/* ============================================================================
   DXL Design Tokens — foundation release
   Loaded after bootstrap + shared.css so these values win.
   One place for brand color, status colors, and portal-wide component fixes.
   ========================================================================== */

:root {
    /* Brand */
    --dxl-teal: #0E7C7B;
    --dxl-teal-deep: #0A5A59;
    --dxl-teal-soft: #E3F0EF;
    /* Neutrals */
    --dxl-ink: #1E2B2A;
    --dxl-muted: #5A6E6C;
    --dxl-line: #D8E2E0;
    --dxl-ground: #F5F8F7;
    /* Semantic */
    --dxl-success: #2E6B3A;
    --dxl-warning: #B4690E;
    --dxl-danger: #B3413A;
    /* Request status map (bg / ink pairs) */
    --dxl-status-draft-bg: #ECEFEE;      --dxl-status-draft-ink: #5A6E6C;
    --dxl-status-submitted-bg: #E1ECF6;  --dxl-status-submitted-ink: #2D5E8F;
    --dxl-status-review-bg: #FFF2D8;     --dxl-status-review-ink: #8A6414;
    --dxl-status-approved-bg: #DFF0E2;   --dxl-status-approved-ink: #2E6B3A;
    --dxl-status-declined-bg: #F7DEDC;   --dxl-status-declined-ink: #94382F;
    --dxl-status-paid-bg: #E3F0EF;       --dxl-status-paid-ink: #0A5A59;
    --dxl-star: gold;
    --dxl-purple: #7c3aed;
    /* Bridge into Bootstrap 5.3 */
    --bs-primary: var(--dxl-teal);
    --bs-primary-rgb: 14, 124, 123;
    --bs-link-color: var(--dxl-teal-deep);
    --bs-link-hover-color: var(--dxl-teal);
    --bs-link-color-rgb: 10, 90, 89;
    --bs-link-hover-color-rgb: 14, 124, 123;
}

/* ---- Buttons: one primary color, portal-wide (fixes the blue/teal drift) -- */
.btn-primary {
    --bs-btn-bg: var(--dxl-teal);
    --bs-btn-border-color: var(--dxl-teal);
    --bs-btn-hover-bg: var(--dxl-teal-deep);
    --bs-btn-hover-border-color: var(--dxl-teal-deep);
    --bs-btn-active-bg: var(--dxl-teal-deep);
    --bs-btn-active-border-color: var(--dxl-teal-deep);
    --bs-btn-focus-shadow-rgb: 14, 124, 123;
}

.btn-outline-primary {
    --bs-btn-color: var(--dxl-teal-deep);
    --bs-btn-border-color: var(--dxl-teal);
    --bs-btn-hover-bg: var(--dxl-teal);
    --bs-btn-hover-border-color: var(--dxl-teal);
    --bs-btn-active-bg: var(--dxl-teal-deep);
    --bs-btn-active-border-color: var(--dxl-teal-deep);
    --bs-btn-focus-shadow-rgb: 14, 124, 123;
}

/* Semantic text colors resolve to tokens */
.text-success { color: var(--dxl-success) !important; }
.text-danger { color: var(--dxl-danger) !important; }

/* Spinner utility replacing Font Awesome's fa-spin */
.dxl-spin { display: inline-block; animation: dxl-spin 1s linear infinite; }
@keyframes dxl-spin { to { transform: rotate(360deg); } }

/* Legacy custom class used across views — align to the same token */
.btn-teal, .btn-teal:focus {
    background-color: var(--dxl-teal);
    border-color: var(--dxl-teal);
    color: #fff;
}
.btn-teal:hover, .btn-teal:active {
    background-color: var(--dxl-teal-deep) !important;
    border-color: var(--dxl-teal-deep) !important;
    color: #fff !important;
}

/* Disabled state that actually reads as disabled (audit finding) */
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
    filter: grayscale(0.55);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto; /* keep cursor feedback */
}

/* Focus ring in brand color for inputs */
.form-control:focus, .form-select:focus {
    border-color: var(--dxl-teal);
    box-shadow: 0 0 0 0.25rem rgba(14, 124, 123, 0.18);
}
.form-check-input:checked {
    background-color: var(--dxl-teal);
    border-color: var(--dxl-teal);
}

/* ---- Status pills (use on grids/detail as views adopt them) -------------- */
.dxl-pill {
    display: inline-block;
    border-radius: 20px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
    white-space: nowrap;
}
.dxl-pill.draft     { background: var(--dxl-status-draft-bg);     color: var(--dxl-status-draft-ink); }
.dxl-pill.submitted { background: var(--dxl-status-submitted-bg); color: var(--dxl-status-submitted-ink); }
.dxl-pill.review    { background: var(--dxl-status-review-bg);    color: var(--dxl-status-review-ink); }
.dxl-pill.approved  { background: var(--dxl-status-approved-bg);  color: var(--dxl-status-approved-ink); }
.dxl-pill.declined  { background: var(--dxl-status-declined-bg);  color: var(--dxl-status-declined-ink); }
.dxl-pill.paid      { background: var(--dxl-status-paid-bg);      color: var(--dxl-status-paid-ink); }

/* ---- DataTables skin (pairs with app-shared-dxl-datatables.js) ----------- */
table.dataTable thead th {
    background: var(--dxl-teal-soft);
    color: var(--dxl-teal-deep);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--dxl-line) !important;
    vertical-align: bottom;
}
/* hover targets the cells: Bootstrap paints td backgrounds (--bs-table-bg)
   over the row, so a tr-level hover background never shows through */
table.dataTable tbody tr:hover:not(.selected) > * {
    background-color: rgba(14, 124, 123, 0.08);
    box-shadow: none;
}
table.dataTable td.dataTables_empty, table.dataTable td.dt-empty {
    padding: 32px 16px;
    color: var(--dxl-muted);
    font-size: 15px;
}

/* Numeric / currency columns: right-aligned, lining figures */
.dxl-num, table.dataTable td.dxl-num, table.dataTable th.dxl-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

/* ---- Image placeholder for items/orgs without a picture ------------------ */
.dxl-imgph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    background: var(--dxl-teal-soft);
    color: var(--dxl-teal);
    border-radius: 6px;
    font-size: 18px;
}

/* ---- Clickable table rows (Select Program etc.) -------------------------- */
tr.dxl-rowlink { cursor: pointer; }
tr.dxl-rowlink:hover { background-color: rgba(14, 124, 123, 0.07); }

/* ---- Status tabs (Manage Requests etc.) ---------------------------------- */
.nav-tabs {
    --bs-nav-tabs-link-active-bg: var(--dxl-teal);
    --bs-nav-tabs-link-active-color: #fff;
}
.nav-tabs .nav-link { color: var(--dxl-muted); }
.nav-tabs .nav-link:hover { color: var(--dxl-teal-deep); }
.nav-tabs .nav-link.active {
    color: #fff; /* white on the teal active tab - dark-on-dark was unreadable */
    font-weight: 600;
    border-bottom: 2px solid var(--dxl-teal-deep);
}
/* ---- Public form: vertical stepper progress marks -------------------------- */
/* progress is drawn on the vertical stepper rail: brand-align the connector and
   done-checks (dxlStepper.css ships them green), and highlight the open step */
div.step::before, div.step.is-done::before { border-left-color: var(--dxl-teal) !important; }
div.step.is-done::after {
    background-color: var(--dxl-teal) !important;
    border-color: var(--dxl-teal) !important;
    color: #fff !important; /* white checkmark - black on teal was unreadable */
}
div.step:not(.minimized):not(.no-number)::after {
    border-color: var(--dxl-teal) !important;
    color: var(--dxl-teal-deep);
}
div.step:not(.minimized) > .step-header .header { color: var(--dxl-teal-deep); }

/* ---- Public form: long intro clamp + read-more ----------------------------- */
.dxl-intro-content.dxl-clamped {
    max-height: 340px;
    overflow: hidden;
    position: relative;
}
.dxl-intro-content.dxl-clamped::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 70px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}
.dxl-readmore {
    text-decoration: none;
    font-weight: 600;
    color: var(--dxl-teal-deep) !important;
    padding-left: 0;
}

/* ---- Public form: Google Translate widget tidy ----------------------------- */
#divGoogleTranslate .goog-te-gadget {
    font-size: 10px;
    color: var(--dxl-muted);
}
#divGoogleTranslate .goog-te-gadget .goog-te-combo {
    font-size: 13px;
    margin: 0 0 2px;
    padding: 4px 8px;
    border: 1px solid var(--dxl-line);
    border-radius: 6px;
    color: var(--dxl-muted);
    background: #fff;
}

/* ---- Dashboard KPI tiles -------------------------------------------------- */
.card.dxl-kpi h4 {
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
    color: var(--dxl-ink);
    min-height: 1.2em;
}
.card.dxl-kpi .greyTitle {
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dxl-muted);
}
.card.dxl-kpi-hero {
    background: var(--dxl-teal-soft);
    border-color: var(--dxl-teal);
}
.card.dxl-kpi-hero h4 {
    color: var(--dxl-teal-deep);
    font-size: 2rem;
}
.card.dxl-kpi-hero .greyTitle { color: var(--dxl-teal-deep); }

/* Dashboard widget-remove buttons only show while the layout is unlocked */
.grid .grid-remove-btn { display: none; }
.grid.dxl-dash-edit .grid-remove-btn { display: block; }

.dxl-tab-count {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--dxl-teal-soft);
    color: var(--dxl-teal-deep);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.7;
    margin-left: 5px;
    text-align: center;
}