/* ============================================================================
   Bootstrap 3 "look" compatibility layer for Bootstrap 5
   ----------------------------------------------------------------------------
   Re-applies Bootstrap 3.4.1's visual characteristics (compact 14px sizing,
   button/form/table density, BS3 color palette, 4px radii) on top of the
   Bootstrap 5 framework, so the upgraded UI resembles the previous (BS3) look.

   MUST be loaded AFTER bootstrap.css in every style bundle (so it overrides).
   App-specific brand overrides that load later (e.g. EmployeeDashboard _Layout
   inline styles) still win over this layer.
   ============================================================================ */

/* ---- Base typography (BS3 was 14px / 1.428..; BS5 is 16px) ---- */
body {
    font-size: 14px;
    line-height: 1.42857143;
}

.btn,
.form-control,
.form-select,
.input-group-text,
.dropdown-menu,
.table,
.nav,
.badge,
.alert,
label,
.col-form-label {
    font-size: 14px;
}

/* ---- Removed-in-v4 utility classes the app still uses ---- */
.hidden,
.hide {
    display: none !important;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

/* ---- Buttons: BS3 sizing + palette ---- */
.btn {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
}

.btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; }
.btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
.btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; }

/* .btn-default (mapped to .btn-secondary) — BS3 white/bordered button */
.btn-secondary { color: #333; background-color: #fff; border-color: #ccc; }
.btn-secondary:hover, .btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
    color: #333; background-color: #e6e6e6; border-color: #adadad; box-shadow: none;
}

.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; }
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active { background-color: #286090; border-color: #204d74; }

.btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; }
.btn-success:hover, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active { background-color: #449d44; border-color: #398439; }

.btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; }
.btn-info:hover, .btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active { background-color: #31b0d5; border-color: #269abc; }

.btn-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; }
.btn-warning:hover, .btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active { background-color: #ec971f; border-color: #d58512; }

.btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; }
.btn-danger:hover, .btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active { background-color: #c9302c; border-color: #ac2925; }

/* ---- Form controls: BS3 height/padding/border ---- */
.form-control,
.form-select {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

textarea.form-control { height: auto; }

.form-control:focus,
.form-select:focus {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

.form-control-sm { height: 30px; padding: 5px 10px; font-size: 12px; border-radius: 3px; }
.form-control-lg { height: 46px; padding: 10px 16px; font-size: 18px; border-radius: 6px; }

.input-group-text {
    padding: 6px 12px;
    font-size: 14px;
    color: #555;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* ---- Tables: BS3 density/borders ---- */
.table > :not(caption) > * > * {
    padding: 8px;
    line-height: 1.42857143;
    border-bottom-width: 0;
}

.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th {
    border-top: 1px solid #ddd;
    box-shadow: none;
}

.table-sm > :not(caption) > * > * { padding: 5px; }

/* ---- Dropdowns + cards: BS3 sizing/radius ---- */
.dropdown-menu { font-size: 14px; border-radius: 4px; }
.dropdown-item { padding: 3px 20px; }
.card { border-radius: 4px; }
.card-header { padding: 10px 15px; }
.card-body { padding: 15px; }

/* ---- Labels -> badges (BS3 .label sizing) ---- */
.badge {
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: 700;
    border-radius: 0.25em;
}

/* ---- Headings: BS3 sizes (BS5 headings are larger) ---- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-weight: 500;
    line-height: 1.1;
}

h1, .h1, h2, .h2, h3, .h3 { margin-top: 20px; margin-bottom: 10px; }
h4, .h4, h5, .h5, h6, .h6 { margin-top: 10px; margin-bottom: 10px; }

h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

p { margin: 0 0 10px; }
.lead { font-size: 16px; }

/* ---- Modals: BS3 sizing / layout / padding ---- */
.modal-content { border-radius: 6px; }

/* Widths: BS3 defaults (BS5 is narrower). Crucially, honor legacy inline
   style="width:NN%" — BS5's .modal-dialog max-width:500px otherwise caps it,
   which is why wide modals rendered narrow after the upgrade. */
.modal-dialog { max-width: 600px; }
.modal-lg { max-width: 900px; }
.modal-sm { max-width: 300px; }
.modal-dialog[style*="width"] { max-width: none; }

/* Header: BS3 layout — title on the left, close (×) floated to the top-right
   (BS5 flex re-orders them because the close button precedes the title). */
.modal-header { display: block; padding: 15px; border-bottom: 1px solid #e5e5e5; }
.modal-header .btn-close,
.modal-header .close { float: right; margin: 0; }
.modal-title { margin: 0; line-height: 1.42857143; font-size: 18px; }

.modal-body { padding: 15px; }
.modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; }

/* Inputs span the modal width (override the admin "input{max-width:280px}" cap). */
.modal .form-control,
.modal .form-select,
.modal input,
.modal select,
.modal textarea { max-width: 100%; }

/* ---- Menu / navbar spacing: BS3 nav-link padding (colors stay app-specific) ---- */
.navbar .navbar-nav > li > a,
.navbar .navbar-nav .nav-link {
    padding: 15px;
    line-height: 20px;
}

.navbar .navbar-text { padding: 15px; }
.navbar .dropdown-menu { font-size: 14px; }

/* ---- Unobtrusive validation -> Bootstrap 5 error styling ------------------
   jquery.validate.unobtrusive tags invalid inputs with .input-validation-error
   and message spans with .field-validation-error. Bootstrap 3 styled these
   (red border + red text); Bootstrap 5 does not, and the admin bundles never
   included the old rules (same gap as .hidden), so error styling disappeared
   after the upgrade. Re-apply it here, loaded in every bundle. This is the
   CSS half of the form-validation workstream — no per-page markup edits, and
   it avoids fighting unobtrusive's own highlight/errorPlacement in JS. */
.form-control.input-validation-error,
.form-select.input-validation-error,
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: #dc3545;
}

.form-control.input-validation-error:focus,
.form-select.input-validation-error:focus,
input.input-validation-error:focus,
select.input-validation-error:focus,
textarea.input-validation-error:focus {
    border-color: #dc3545;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(217,53,69,.6);
}

.field-validation-error,
.field-validation-error span {
    color: #dc3545;
    font-size: 90%;
}

.validation-summary-errors {
    color: #dc3545;
}

.validation-summary-errors ul { margin-bottom: 0; }