/* ============================================================================
   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;
}

/* ---- Links: BS3 color + no underline --------------------------------------
   Bootstrap 5 underlines links and uses #0d6efd; Bootstrap 3 used #337ab7 with
   no underline. Restore both app-wide (Benefactor's copy of this file already
   has this rule; this app's copy had drifted out of sync). No !important, so
   more specific rules (e.g. white footer links, .btn, .navbar) still win. */
a {
    color: #337ab7;
    text-decoration: none;
}

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

/* ---- BS3 made labels bold by default; BS5 renders them normal weight.
   Restore bold so field labels are distinguishable from values. Checkboxes/
   radios keep normal weight. ---- */
label,
.control-label,
.col-form-label,
.form-label {
    font-weight: 700;
}

.form-check-label {
    font-weight: 400;
}

/* ---- 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; --bs-btn-disabled-color: #333; --bs-btn-disabled-bg: #fff; --bs-btn-disabled-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;
}

/* BS5's own .btn:disabled rule (higher specificity than .btn-*) reads the
   --bs-btn-disabled-* custom properties, not background-color/border-color, so
   each variant below must set them too or disabled buttons fall back to BS5's
   default palette instead of the BS3 color faded via opacity. */
.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #337ab7; --bs-btn-disabled-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; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #5cb85c; --bs-btn-disabled-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; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #5bc0de; --bs-btn-disabled-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; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #f0ad4e; --bs-btn-disabled-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; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #d9534f; --bs-btn-disabled-border-color: #d43f3a; }
.btn-danger:hover, .btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active { background-color: #c9302c; border-color: #ac2925; }

.btn-dark { color: #fff; background-color: #5c636a; border-color: #565e64; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #6c757d; --bs-btn-disabled-border-color: #6c757d; }
.btn-dark:hover, .btn-dark:focus,
.btn-dark:not(:disabled):not(.disabled):active { background-color: #5c636a; border-color: #565e64; box-shadow: 0 0 0 .25rem rgba(130, 138, 145, .5); }

/* ---- .dl-horizontal (removed in v4) ----------------------------------------
   BS5 has no .dl-horizontal, so <dt>/<dd> render as plain stacked block
   elements instead of a right-aligned label next to its value on the same
   line (e.g. Manage/Index). Restoring BS3 3.4.1's float layout puts them back
   on one line. ---------------------------------------- */
.dl-horizontal dd::after {
    display: table;
    content: " ";
    clear: both;
}

@media (min-width: 768px) {
    .dl-horizontal dt {
        float: left;
        width: 160px;
        overflow: hidden;
        clear: left;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dl-horizontal dd {
        margin-left: 180px;
    }
}

/* ---- 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; }

/* BS5 styles :disabled form controls grey but ships no equivalent for
   [readonly] -- BS3's readonly grey-out was never ported to this app's copy of
   the compat file (Benefactor's copy already has this; this one had drifted
   out of sync), so readonly fields (e.g. Register's pre-filled Email) rendered
   indistinguishable from editable ones. [readonly] attribute selectors only --
   NOT :read-only, which also matches every <select> (no readonly attribute on
   that element per spec) and would grey out plain dropdowns app-wide. */
.form-control[readonly],
.form-select[readonly],
textarea[readonly] {
    background-color: #eee;
    opacity: 1;
}

.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:not(.table-borderless) > thead > tr > th,
.table:not(.table-borderless) > tbody > tr > td,
.table:not(.table-borderless) > 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; }

/* Close button (×): BS3 had no .btn-close rule; re-declare it so the × renders
   even if a stale Bootstrap 3 bootstrap.css is still cached (same fix as
   Benefactor, per QA #19715). */
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.25em;
    opacity: 0.5;
}

.btn-close:hover { color: #000; opacity: 0.75; }

/* Alert dismiss button: drop the SVG background and render × as a pseudo-element
   instead. The SVG background on .btn-close can fail to appear when other CSS rules
   interfere with the background shorthand; an explicit character is always visible. */
.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 0.75rem 1rem;
    background-image: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.5;
}

.alert-dismissible .btn-close::before {
    content: "\00d7";
}

.alert-dismissible .btn-close:hover { opacity: 0.75; }

/* 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 error text ------------------------------------
   jquery.validate.unobtrusive tags invalid inputs with .input-validation-error
   and message spans with .field-validation-error. A prior pass here added a
   red BORDER on .input-validation-error, on the premise that "BS3 styled these
   with a red border" -- checked every pre-migration CSS file and none contain
   any such rule; BS3 only ever showed the red error TEXT below the field, and
   visual comparison against the true baseline confirms it (invalid inputs keep
   their default border). Removed; only the text-color rule below is real. */

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

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

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