/* =====================================================================================
   DMC shared page theme
   -------------------------------------------------------------------------------------
   Opt in one page at a time: wrap the page's content (modals included) in
       <div class="dmc-page"> ... </div>
   Pages without the wrapper are not affected.

   Load order: after bootstrap.css (Content.Master renders ~/bundles/dmcThemeCSS after
   nonBundableCSS), and before a page's own <style> block so a page can still override.

   Seasonal themes: dmc-theme.js sets data-dmc-theme on <html>. A theme only overrides
   the "theme roles" in section 1; everything else is derived from them.
   Status colors (Bootstrap success / warning / danger / info) are deliberately NOT
   themed, so Approved / Pending / Denied look the same all year.
   ===================================================================================== */


/* =====================================================================================
   1. Tokens - JCPS default
   ===================================================================================== */
:root {
    /* JCPS logo colors */
    --jcps-navy: #10186E;
    --jcps-red: #D7000F;
    --jcps-green: #6A8C1D;
    --jcps-teal: #075D70;

    /* Theme roles (the only values a seasonal theme needs to set) */
    --dmc-primary: var(--jcps-navy);
    --dmc-primary-rgb: 16, 24, 110;          /* must match --dmc-primary; Bootstrap's text-/bg-primary need it */
    --dmc-secondary: var(--jcps-teal);
    --dmc-notice: #C8000E;                   /* logo red, a touch darker so white text passes contrast */
    --dmc-flame-1: var(--jcps-red);          /* the three colors in the title underline */
    --dmc-flame-2: var(--jcps-green);
    --dmc-flame-3: var(--jcps-teal);
    --dmc-page-bg: #F3F5FA;

    /* Derived from the roles */
    --dmc-on-primary: #FFFFFF;
    --dmc-primary-hover: color-mix(in srgb, var(--dmc-primary) 82%, #000);
    --dmc-surface: #FFFFFF;
    --dmc-surface-muted: color-mix(in srgb, var(--dmc-primary) 6%, #FFF);
    --dmc-border: color-mix(in srgb, var(--dmc-primary) 18%, #FFF);
    --dmc-text: #1E2233;
    --dmc-text-muted: #5B6275;
    --dmc-heading: var(--dmc-primary);
    --dmc-link: var(--dmc-primary);
    --dmc-focus-ring: rgba(var(--dmc-primary-rgb), 0.25);
    --dmc-table-head-bg: var(--dmc-primary);
    --dmc-table-head-text: var(--dmc-on-primary);
    --dmc-table-stripe: rgba(var(--dmc-primary-rgb), 0.035);
    --dmc-table-hover: rgba(var(--dmc-primary-rgb), 0.08);

    /* Typography (rem, so browser zoom / magnified displays scale everything evenly) */
    --dmc-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --dmc-fs-title: 1.75rem;        /* page title */
    --dmc-fs-subtitle: 1rem;        /* line under the page title */
    --dmc-fs-section: 1rem;         /* card headers, modal titles, section headings */
    --dmc-fs-control: 0.875rem;     /* buttons, inputs, dropdowns, filter labels, body copy in cards */
    --dmc-fs-th: 0.8125rem;         /* table headers */
    --dmc-fs-td: 0.875rem;          /* table data */
    --dmc-fs-xs: 0.75rem;           /* help text, fine print */

    /* Spacing and shape */
    --dmc-nav-offset: 2.5rem;       /* space between the fixed navbar and the page title */
    --dmc-title-gap: 1.25rem;       /* page title block -> first object on the page */
    --dmc-section-gap: 1.5rem;      /* between major sections */
    --dmc-radius: 0.5rem;
    --dmc-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
}


/* =====================================================================================
   2. Seasonal themes
   Add a theme: copy a block, change the values, and add a matching entry to THEMES
   in Scripts/dmc-theme.js.
   ===================================================================================== */
[data-dmc-theme="valentines"] {
    --dmc-primary: #7E1640;
    --dmc-primary-rgb: 126, 22, 64;
    --dmc-secondary: #B0154F;
    --dmc-notice: #B0154F;
    --dmc-flame-1: #D81B3C;
    --dmc-flame-2: #E8577E;
    --dmc-flame-3: #F2A5B8;
    --dmc-page-bg: #FDF3F6;
}

[data-dmc-theme="stpatricks"] {
    --dmc-primary: #0F5132;
    --dmc-primary-rgb: 15, 81, 50;
    --dmc-secondary: #23704A;
    --dmc-notice: #23704A;
    --dmc-flame-1: #2E8B57;
    --dmc-flame-2: #6CBF4E;
    --dmc-flame-3: #D4A017;
    --dmc-page-bg: #F1F8F3;
}

[data-dmc-theme="derby"] {
    --dmc-primary: #0F4D2E;
    --dmc-primary-rgb: 15, 77, 46;
    --dmc-secondary: #A8102A;
    --dmc-notice: #A8102A;
    --dmc-flame-1: #B5122B;
    --dmc-flame-2: #0F4D2E;
    --dmc-flame-3: #C9A227;
    --dmc-page-bg: #F6F6F1;
}

[data-dmc-theme="patriotic"] {
    --dmc-primary: #1B2A6B;
    --dmc-primary-rgb: 27, 42, 107;
    --dmc-secondary: #A8192E;
    --dmc-notice: #A8192E;
    --dmc-flame-1: #B22234;
    --dmc-flame-2: #8C9BC4;
    --dmc-flame-3: #1B2A6B;
    --dmc-page-bg: #F5F6FB;
}

[data-dmc-theme="halloween"] {
    --dmc-primary: #3B1D5A;
    --dmc-primary-rgb: 59, 29, 90;
    --dmc-secondary: #A9480A;
    --dmc-notice: #A9480A;
    --dmc-flame-1: #E8670C;
    --dmc-flame-2: #6B2FA0;
    --dmc-flame-3: #3A3A3A;
    --dmc-page-bg: #FBF4EC;
}

[data-dmc-theme="thanksgiving"] {
    --dmc-primary: #5C3317;
    --dmc-primary-rgb: 92, 51, 23;
    --dmc-secondary: #9A3F16;
    --dmc-notice: #9A3F16;
    --dmc-flame-1: #B5521B;
    --dmc-flame-2: #D59A2A;
    --dmc-flame-3: #6E7B2A;
    --dmc-page-bg: #FAF4EA;
}

[data-dmc-theme="christmas"] {
    --dmc-primary: #14532D;
    --dmc-primary-rgb: 20, 83, 45;
    --dmc-secondary: #A3141F;
    --dmc-notice: #A3141F;
    --dmc-flame-1: #C0141F;
    --dmc-flame-2: #1E7A43;
    --dmc-flame-3: #C9A227;
    --dmc-page-bg: #F3F8F4;
}


/* =====================================================================================
   3. Page shell
   ===================================================================================== */

/* Page background: commonCSS.css sets body to whitesmoke !important, so this needs
   !important plus the extra specificity of :has() to win on themed pages only */
body:has(.dmc-page) {
    background-color: var(--dmc-page-bg) !important;
}

.dmc-page {
    /* Point Bootstrap's own primary/link/focus colors at the theme, so existing markup
       (btn-primary, text-primary, links, focus rings) follows the theme automatically */
    --bs-primary: var(--dmc-primary);
    --bs-primary-rgb: var(--dmc-primary-rgb);
    --bs-link-color: var(--dmc-link);
    --bs-link-color-rgb: var(--dmc-primary-rgb);
    --bs-link-hover-color: var(--dmc-primary-hover);
    --bs-focus-ring-color: var(--dmc-focus-ring);

    padding-top: var(--dmc-nav-offset);
    font-family: var(--dmc-font);
    color: var(--dmc-text);
}

/* Site.Master pages: the header is in the page flow (not a fixed navbar like Content.Master),
   so only a small gap is needed. #header / #body only exist in Site.Master. */
#header ~ #body .dmc-page {
    --dmc-nav-offset: 0.5rem;
}

/* Neutralize the legacy element rules in Site.css inside themed pages.
   :where() keeps these at element-level specificity, so Bootstrap classes still win. */
:where(.dmc-page) a {
    padding-left: 0;
    padding-right: 0;
    color: var(--bs-link-color);
}

:where(.dmc-page) a:hover {
    background-color: transparent;
}

:where(.dmc-page) label {
    font-size: inherit;
    font-weight: inherit;
}

:where(.dmc-page) input,
:where(.dmc-page) textarea {
    margin: 0;
}

:where(.dmc-page) button,
:where(.dmc-page) td button {
    margin-right: 0;
}

:where(.dmc-page) table {
    margin-top: 0;
}

:where(.dmc-page) fieldset legend {
    display: block;
}


/* =====================================================================================
   4. Page title and section headings
   ===================================================================================== */
.dmc-page-header {
    text-align: center;
    margin-bottom: var(--dmc-title-gap);
}

.dmc-page-title {
    margin: 0;
    font-size: var(--dmc-fs-title);
    font-weight: 700;
    line-height: 1.2;
    color: var(--dmc-heading);
}

.dmc-page-subtitle {
    margin: 0.35rem 0 0;
    font-size: var(--dmc-fs-subtitle);
    color: var(--dmc-text-muted);
}

/* Three-color underline taken from the logo's flame */
.dmc-page-header::after {
    content: "";
    display: block;
    width: 9rem;
    height: 4px;
    margin: 0.75rem auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg,
        var(--dmc-flame-1) 0 33.33%,
        var(--dmc-flame-2) 33.33% 66.66%,
        var(--dmc-flame-3) 66.66% 100%);
}

/* Vertical rhythm between the major blocks of a page (filters, table, footnotes) */
.dmc-section {
    margin-top: var(--dmc-section-gap);
}

.dmc-section-title {
    margin-bottom: 0.75rem;
    font-size: var(--dmc-fs-section);
    font-weight: 600;
    color: var(--dmc-heading);
}

.dmc-text-sm {
    font-size: var(--dmc-fs-control);
}

.dmc-text-xs {
    font-size: var(--dmc-fs-xs);
}

@media (max-width: 768px) {
    .dmc-page {
        --dmc-fs-title: 1.5rem;
        --dmc-nav-offset: 1.5rem;
    }
}


/* =====================================================================================
   5. Cards
   <div class="card dmc-card">            primary header
   <div class="card dmc-card dmc-card--notice">  notice (important rules, warnings)
   ===================================================================================== */
.dmc-card {
    --bs-card-bg: var(--dmc-surface);
    --bs-card-border-color: var(--dmc-border);
    --bs-card-border-radius: var(--dmc-radius);
    --bs-card-inner-border-radius: calc(var(--dmc-radius) - 1px);
    --bs-card-cap-bg: var(--dmc-primary);
    --bs-card-cap-color: var(--dmc-on-primary);
    --bs-card-cap-padding-y: 0.4rem;
    box-shadow: var(--dmc-shadow);
    font-size: var(--dmc-fs-control);
}

.dmc-card > .card-header {
    font-size: var(--dmc-fs-section);
    font-weight: 600;
    text-align: center;
}

.dmc-card > .card-footer {
    background-color: var(--dmc-surface-muted);
    color: var(--dmc-text);
}

.dmc-card--notice {
    --bs-card-border-color: var(--dmc-notice);
    --bs-card-border-width: 2px;
    --bs-card-cap-bg: var(--dmc-notice);
}


/* =====================================================================================
   6. Filters and form controls
   ===================================================================================== */
.dmc-filter-title {
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--dmc-secondary);
    font-size: var(--dmc-fs-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dmc-secondary);
}

.dmc-filter-group .form-check-label {
    font-size: var(--dmc-fs-control);
}

.dmc-page .form-label {
    margin-bottom: 0.25rem;
    font-size: var(--dmc-fs-control);
    font-weight: 600;
}

.dmc-page .form-control-sm,
.dmc-page .form-select-sm,
.dmc-page .input-group-sm > .form-control,
.dmc-page .input-group-sm > .form-select,
.dmc-page .input-group-sm > .input-group-text,
.dmc-page .dropdown-menu {
    font-size: var(--dmc-fs-control);
}

.dmc-page .input-group-text {
    background-color: var(--dmc-surface-muted);
    color: var(--dmc-text);
}

.dmc-page .form-check-input:checked {
    background-color: var(--dmc-primary);
    border-color: var(--dmc-primary);
}

.dmc-page .form-control:focus,
.dmc-page .form-select:focus,
.dmc-page .form-check-input:focus {
    border-color: rgba(var(--dmc-primary-rgb), 0.5);
    box-shadow: 0 0 0 0.25rem var(--dmc-focus-ring);
}

.dmc-page .dropdown-menu {
    --bs-dropdown-link-hover-bg: rgba(var(--dmc-primary-rgb), 0.08);
    --bs-dropdown-link-active-bg: var(--dmc-primary);
}


/* =====================================================================================
   7. Buttons - btn-primary / btn-outline-primary follow the theme
   ===================================================================================== */
.dmc-page .btn-sm {
    --bs-btn-font-size: var(--dmc-fs-control);
}

.dmc-page .btn-primary {
    --bs-btn-color: var(--dmc-on-primary);
    --bs-btn-bg: var(--dmc-primary);
    --bs-btn-border-color: var(--dmc-primary);
    --bs-btn-hover-color: var(--dmc-on-primary);
    --bs-btn-hover-bg: var(--dmc-primary-hover);
    --bs-btn-hover-border-color: var(--dmc-primary-hover);
    --bs-btn-active-color: var(--dmc-on-primary);
    --bs-btn-active-bg: var(--dmc-primary-hover);
    --bs-btn-active-border-color: var(--dmc-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--dmc-primary-rgb);
    --bs-btn-disabled-color: var(--dmc-on-primary);
    --bs-btn-disabled-bg: var(--dmc-primary);
    --bs-btn-disabled-border-color: var(--dmc-primary);
}

.dmc-page .btn-outline-primary {
    --bs-btn-color: var(--dmc-primary);
    --bs-btn-border-color: var(--dmc-primary);
    --bs-btn-hover-color: var(--dmc-on-primary);
    --bs-btn-hover-bg: var(--dmc-primary);
    --bs-btn-hover-border-color: var(--dmc-primary);
    --bs-btn-active-color: var(--dmc-on-primary);
    --bs-btn-active-bg: var(--dmc-primary);
    --bs-btn-active-border-color: var(--dmc-primary);
    --bs-btn-focus-shadow-rgb: var(--dmc-primary-rgb);
    --bs-btn-disabled-color: var(--dmc-primary);
    --bs-btn-disabled-border-color: var(--dmc-primary);
}


/* =====================================================================================
   8. Tables  -  <table class="table table-sm table-striped dmc-table">
   (DataTables copies the table's classes onto its scroll-header table, so the themed
   header works with scrollX / scrollY too)
   ===================================================================================== */
.dmc-table {
    --bs-table-bg: var(--dmc-surface);
    --bs-table-color: var(--dmc-text);
    --bs-table-border-color: var(--dmc-border);
    --bs-table-striped-bg: var(--dmc-table-stripe);
    --bs-table-striped-color: var(--dmc-text);
    --bs-table-hover-bg: var(--dmc-table-hover);
    --bs-table-hover-color: var(--dmc-text);
    margin-bottom: 0;
}

.dmc-table > thead th {
    --bs-table-bg: var(--dmc-table-head-bg);
    --bs-table-color: var(--dmc-table-head-text);
    color: var(--dmc-table-head-text);
    font-size: var(--dmc-fs-th);
    font-weight: 600;
    text-align: center;
    vertical-align: bottom;
    border-bottom: 0;
}

.dmc-table > tbody > tr > td,
.dmc-table > tbody > tr > th {
    font-size: var(--dmc-fs-td);
}

.dmc-table-wrap {
    background-color: var(--dmc-surface);
    border: 1px solid var(--dmc-border);
    border-radius: var(--dmc-radius);
    box-shadow: var(--dmc-shadow);
    padding: 0.5rem;
}

/* DataTables search / info / buttons row */
.dmc-page .dt-container {
    font-size: var(--dmc-fs-control);
}


/* =====================================================================================
   9. Modals
   ===================================================================================== */
.dmc-page .modal {
    --bs-modal-border-radius: var(--dmc-radius);
    --bs-modal-header-border-color: transparent;
}

.dmc-page .modal-header {
    background-color: var(--dmc-primary);
    color: var(--dmc-on-primary);
}

.dmc-page .modal-header .modal-title {
    font-size: var(--dmc-fs-section);
    font-weight: 600;
    color: inherit;
}

.dmc-page .modal-header .btn-close {
    filter: var(--bs-btn-close-white-filter);
}


/* =====================================================================================
   10. Link lists - numbered lists of links with descriptions (home / landing pages)
   <ol class="dmc-link-list">
       <li><h3 class="dmc-link-title"><a href="...">Title</a></h3>
           <p class="dmc-link-desc">What it is</p></li>
   </ol>
   ===================================================================================== */
.dmc-link-list {
    counter-reset: dmc-link;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dmc-link-list > li {
    counter-increment: dmc-link;
    position: relative;
    margin-bottom: 1rem;
    padding-left: 2.5rem;
}

.dmc-link-list > li:last-child {
    margin-bottom: 0;
}

.dmc-link-list > li::before {
    content: counter(dmc-link);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--dmc-primary);
    color: var(--dmc-on-primary);
    font-size: var(--dmc-fs-xs);
    font-weight: 700;
}

.dmc-link-title {
    margin: 0 0 0.15rem;
    font-size: var(--dmc-fs-section);
    font-weight: 600;
    line-height: 1.75rem;              /* centers a one-line title on the number badge */
    color: var(--dmc-heading);
}

.dmc-link-title a,
.dmc-link-sub a {
    text-decoration: none;
}

.dmc-link-title a:hover,
.dmc-link-sub a:hover {
    text-decoration: underline;
}

.dmc-link-sub {
    margin-bottom: 0.15rem;
    font-weight: 600;
}

.dmc-link-desc {
    margin: 0;
    color: var(--dmc-text-muted);
}


/* =====================================================================================
   11. Print - plain black on white whatever the theme
   ===================================================================================== */
@media print {
    body:has(.dmc-page) {
        background-color: #FFF !important;
    }

    .dmc-page {
        padding-top: 0;
    }

    .dmc-card,
    .dmc-table-wrap {
        box-shadow: none;
    }

    .dmc-table-wrap {
        border: 0;
        padding: 0;
    }

    .dmc-page-header::after {
        display: none;
    }

    .dmc-table > thead th {
        --bs-table-bg: #FFF;
        color: #000 !important;
    }
}