/* ============================================================
   DRS BRAND REFRESH — token layer + self-hosted font
   Direction C (Modern Slate). Branch: feature/site-refresh.
   Components below reference these tokens; dark mode flows
   from the same variables (re-declared under body.dark-mode).
   ============================================================ */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/IBMPlexSans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/IBMPlexSans-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/IBMPlexSans-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/IBMPlexSans-700.woff2') format('woff2')}

:root{
    --ui-font:'IBM Plex Sans',system-ui,'Segoe UI',Arial,sans-serif;
    --brand:#2a3c74; --brand-hover:#1f2d57;
    --secondary:#2f7d90; --secondary-tint:#e7f1f3;
    --success:#57b84a; --success-tint:#e8f4e3;  /* brand green from the logo/display */
    --danger:#ce1616; --danger-hover:#a50000; --danger-tint:#fdecec;
    --warn:#b9760a; --warn-tint:#fbeecd;
    --avail:#f2c200; --avail-tint:#fdf3cf; --on-avail:#1a1e28;  /* Available day-type: yellow + near-black text (readable-yellow rule) */
    --travelout:#5b6cc4;   /* Travel-Out day-type (kept on a token like its siblings) */
    /* Light mode: clean WHITE page; the white→blue gradient lives on the chrome
       (cards/header/panels via --chrome-grad), not the page background. Brand stays navy/teal. */
    --surface:#ffffff; --surface-2:#eef3fb;
    --text:#1a1e28; --muted:#5a6478; --border:#c4d1e6;
    --nav:#161d2e; --nav-text:#c3cadd;
    --field:#f5f8fd; --field-border:#c8d4e8;
    --brand-tint:#e6e9f3;
    --grid-header:#2a3c74; --grid-header-text:#ffffff;
    --row-odd:#ffffff; --row-even:#eef4fc; --row-hover:#dce8f8;
    --chrome-grad:linear-gradient(180deg,#ffffff 0%,#dbe7f8 100%);
    --row-selected:#d8def4; --row-selected-text:#15224d;
    --radius:6px;
    --shadow:0 1px 2px rgba(16,22,40,.07),0 4px 10px rgba(16,22,40,.07);
}
body.dark-mode{
    --brand:#5b78e0; --brand-hover:#6f88e7;
    --secondary:#43a7bd; --secondary-tint:#10333b;
    --success:#52c01b; --success-tint:#16320c;
    --danger:#e0524f; --danger-hover:#c23b38; --danger-tint:#3a1616;
    --warn:#e0a23a; --warn-tint:#3a2c10;
    --avail:#e6b52a;   /* yellow keeps dark --on-avail text even in dark mode */
    --travelout:#7c8ce0;   /* brighter indigo in dark mode, matching sibling day-types */
    --surface:#121826; --surface-2:#0a0e16;
    --text:#e7ecf3; --muted:#8b96a8; --border:#243044;
    --nav:#0b0f18; --nav-text:#aab4c8;
    --field:#0d1422; --field-border:#26324a;
    --brand-tint:#16203a;
    --grid-header:#1c2740; --grid-header-text:#ffffff;
    --row-odd:#0f1626; --row-even:#121a2b; --row-hover:#1b2740;
    --row-selected:#243a66; --row-selected-text:#dfe7fb;
    --shadow:0 2px 8px rgba(0,0,0,.55);
}

/* base typography — IBM Plex Sans across the app */
html, body { font-family: var(--ui-font); }
button, input, select, textarea, table, .btn { font-family: var(--ui-font); }

/* Move down content because we have a fixed navbar that is 50px tall */
/*body {
    padding-top: 50px;
    padding-bottom: 20px;
}*/

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
/*.body-content {
    padding-left: 15px;
    padding-right: 15px;
}*/

/* Set widths on the form inputs since otherwise they're 100% wide */
/*input,
select,
textarea {
    max-width: 280px;
}*/


/* Responsive: Portrait tablets and up */
/*@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}*/

/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
    background-color: var(--surface-2);
    color: var(--text);
}

/* ===== LIGHT-MODE "WAVE" CHROME (global) ==============================
   Silvery blue-grey page lifted from the trade-show display, thin straight
   tri-color lines under the navbar, and a fixed layered swoop wave behind
   ALL content. Dark mode keeps its own look (every rule is :not(.dark-mode)).
   Markup for .lm-lines / .lm-wave lives once in Site.Master. ==========*/
body:not(.dark-mode) {
    padding-top: 59px;            /* 50px navbar + 9px tri-color lines */
    background-color: #c4d0df;    /* fallback under the gradient */
    background-image:
        radial-gradient(1200px 540px at 88% -8%, rgba(47,140,163,.10), transparent 60%),
        radial-gradient(1100px 520px at -6% 8%, rgba(42,60,116,.08), transparent 58%),
        linear-gradient(176deg, #eef2f6 0%, #dbe3ee 42%, #c4d0df 100%);
    background-attachment: fixed;
}
/* ----- DARK MODE: same wave chrome, tuned for the deep-navy base ----- */
body.dark-mode {
    padding-top: 59px;
    background-image:
        radial-gradient(1200px 560px at 88% -10%, rgba(47,140,163,.16), transparent 60%),
        radial-gradient(1100px 540px at -8% 6%, rgba(63,90,160,.20), transparent 58%);
    background-attachment: fixed;
}
body.dark-mode .lm-lines {
    display: block; position: fixed; top: 50px; left: 0; right: 0; height: 9px; z-index: 1029;
    background: linear-gradient(180deg, #57b84a 0 33.34%, #2f8ca3 33.34% 66.67%, #3f5aa0 66.67% 100%);
    box-shadow: 0 3px 12px rgba(0,0,0,.55);
}
body.dark-mode .lm-wave {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
}
body.dark-mode .lm-wave svg { display: block; width: 100%; height: 100px; }
/* lift the navy band so the swoop reads against the near-black background */
body.dark-mode .lm-wave svg path:last-child { fill: #3f5aa0; }
/* Wave is disabled (see .lm-wave kill switch below), so we only need a small
   footer gap here, not the full 50px wave-clearance. If the wave is ever
   re-enabled, restore this (and the light-mode rule) to ~50px. */
body.dark-mode .body-content { padding-bottom: 14px; }

/* Copyright as a frosted pill so it stays legible where it overlaps the wave */
.body-content > footer { margin-top: 8px; }
.body-content > footer p {
    display: inline-block; margin: 0;
    padding: 5px 14px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; line-height: 1.5;
    color: var(--brand);
    background: rgba(255,255,255,.82);
    border: 1px solid var(--border);
    box-shadow: 0 2px 9px rgba(28,42,85,.18);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
body.dark-mode .body-content > footer p {
    color: #dbe4f7;
    background: rgba(16,22,36,.78);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 2px 10px rgba(0,0,0,.55);
}

/* thin straight tri-color lines, pinned just under the navbar */
.lm-lines, .lm-wave { display: none; }
body:not(.dark-mode) .lm-lines {
    display: block; position: fixed; top: 50px; left: 0; right: 0; height: 9px; z-index: 1029;
    background: linear-gradient(180deg, #57b84a 0 33.34%, #2f8ca3 33.34% 66.67%, #2a3c74 66.67% 100%);
    box-shadow: 0 2px 8px rgba(28,42,85,.16);
}
/* fixed layered swoop wave, behind all content (z-index:-1) */
body:not(.dark-mode) .lm-wave {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
}
body:not(.dark-mode) .lm-wave svg { display: block; width: 100%; height: 100px; }
/* TOGGLE: comment out the next line to bring the bottom swoop wave back. */
.lm-wave { display: none !important; }
/* Small footer gap only (wave is disabled above). vfill.js reserves this same
   padding so grid pages don't over-scroll. Restore to ~50px if the wave returns. */
body:not(.dark-mode) .body-content { padding-bottom: 14px; }

/* cards/panels stay crisp white so they pop on the silvery base */
body:not(.dark-mode) .stats-wrapper,
body:not(.dark-mode) .stat-card,
body:not(.dark-mode) .kpi,
body:not(.dark-mode) .ui-card,
body:not(.dark-mode) .login-container,
body:not(.dark-mode) .jumbotron,
body:not(.dark-mode) .qa,
body:not(.dark-mode) .toolbar,
body:not(.dark-mode) .page-head {
    background-color: #ffffff !important;
    background-image: none !important;
}

.oporg-sticky-note {
    background: var(--brand-tint);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: 8px;
    box-shadow: none;
    padding: 12px 15px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    font-family: var(--ui-font);
    position: relative;
}

.reject-callout {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe29a 100%);
    border: 1px solid rgba(220, 53, 69, 0.25);
    border-left: 4px solid #dc3545;
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
    margin-top: 6px;
    color: #721c24;
    font-size: 13.5px;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.08);
}

    .reject-callout strong {
        color: #a02533;
    }

    .reject-callout em {
        display: block;
        margin-top: 3px;
        font-style: italic;
        color: #8d4a50;
        font-size: 12px;
    }

body.dark-mode .reject-callout {
    background: linear-gradient(135deg, #3a1a1d 0%, #241013 100%);
    border: 1px solid rgba(255, 99, 112, 0.35);
    border-left: 4px solid #ff6370;
    color: #ffd6da;
    box-shadow: 0 2px 6px rgba(255, 99, 112, 0.18);
}

    body.dark-mode .reject-callout strong {
        color: #ff8892;
    }

    body.dark-mode .reject-callout em {
        color: #e0a8ad;
    }

.note {
    position: relative;
}

    .note:after { /* Magic Happens Here!!! */
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        display: block;
        border-left: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-top: 10px solid #0047AB;
    }
/* </magic> */

.btn-compact {
    padding: 2px 8px; /* tighter padding */
    font-size: 12px; /* smaller text */
    line-height: 1.1; /* reduce height */
    border-radius: 3px; /* slightly sharper corners */
}

.reload {
    font-family: Lucida Sans Unicode;
}

.text-sm {
    font-weight: normal;
    font-size: 1.2rem;
    line-height: 1.4;
}

.btn-center {
    text-align: center;
}

.ModalPopupBG {
    background-color: #666699;
    filter: opacity();
    opacity: 0.7;
}

.info-modal {
    background: gainsboro;
    margin: 0 auto;
    width: auto;
    position: absolute;
    z-index: 998;
    top: 439px;
    left: 179px;
    padding: 30px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.HellowWorldPopup {
    min-width: 300px;
    min-height: 150px;
    background: white;
    border: solid 2px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 2em;
    z-index: 101;
}

.HellowWorldPopupUpload {
    min-width: 300px;
    min-height: 150px;
    background: white;
    border: solid 2px;
    border-radius: 10px;
    padding: 2em;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(0, 0, 0);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(0, 0, 0);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999999999;
}

.ModalPopupWait {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999999999;
    /* Optional: add background overlay */
    /* background: rgba(0,0,0,0.5); */
}

.ModalPopupWaitDiv {
    color: Black;
    font-weight: bolder;
    background-color: White;
    padding: 15px;
    width: 200px;
}

.HellowWorldPopupInfo {
    min-width: 300px;
    min-height: 150px;
    background: white;
    border: solid 2px;
    border-radius: 10px;
    position: fixed;
    top: 10%;
    left: 10%;
    padding: 2em;
    z-index: 101;
}

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

.auto-style1 {
    width: 216px;
}

.button-yellow-noflex-pulsate {
    animation: pulsate 2s ease-out infinite;
    background-color: gold;
    font-size: 10px;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    color: black;
    border-radius: 10px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
    justify-content: center;
    align-items: center;
}

.button-red-noflex {
    background: var(--danger);
    background-color: var(--danger);
    font-size: 13px;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    color: white;
    border-radius: 10px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
    justify-content: center;
    align-items: center;
}

    .button-red-noflex:hover {
        background: var(--danger-hover);
        background-color: var(--danger-hover);
        color: lime;
        text-decoration: none;
    }

    .button-red-noflex:visited {
        text-decoration: none;
    }

.button-blue-noflex {
    background: var(--brand);
    background-color: var(--brand);
    font-size: 13px;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    color: white;
    border-radius: 10px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
    justify-content: center;
    align-items: center;
}

    .button-blue-noflex:hover {
        background: var(--brand-hover);
        background-color: var(--brand-hover);
        color: lime;
        text-decoration: none;
    }

    .button-blue-noflex:visited {
        text-decoration: none;
    }

.button-drsblue,
.button-drsgreen,
.button-steelblue,
.button-green,
.button-red,
.button-yellow,
.button-orange,
.button-blue,
.button-purple,
.button-light-purple,
.button-black {
    font-size: 13px;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    color: white;
    border-radius: 10px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-drsblue {
    background: var(--brand);
}

.button-drsgreen {
    background: var(--success);
}

.button-green {
    background: var(--success);
}

.button-yellow {
    background: yellow;
    color: black !important;
}

.button-red {
    background: var(--danger);
}

.button-orange {
    background: rgb(223, 117, 20);
}

.button-steelblue {
    background: var(--secondary);
}

.button-blue {
    background: var(--brand);
    background-color: var(--brand);
}

.button-purple {
    background: rgb(128, 0, 128);
}

.button-light-purple {
    background: rgb(182, 149, 192);
}

.button-black {
    background: rgb(0, 0, 0);
}

.cssPager span {
    font-size: 20px;
    font-weight: bold;
}

.cssPage td {
    padding: 1px 4px 2px 4px;
}

.cssPager a {
    text-decoration: underline;
}

.box {
    float: left;
    width: 50%;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 5px;
    padding-right: 5px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    /*max-width: 280px;*/
    max-width: 600px;
}

.cssDetailsViewInput {
    max-width: none !important;
    width: 100%;
}

.btn-primary-logout {
    color: #fff;
    background-color: #ce1616;
    border-color: #2e6da4;
    margin-top: 14px;
    margin-left: 10px;
}

    .btn-primary-logout:hover {
        color: #fff;
        background-color: #a50000;
        border-color: #204d74;
    }

.btn-primary-cancel {
    color: #fff;
    background-color: #ce1616;
    border-color: #2e6da4;
    margin-top: 4px;
}

    .btn-primary-cancel:hover {
        color: #fff;
        background-color: #a50000;
        border-color: #204d74;
    }

.milestoneNote {
    min-width: 150px;
}

.legendBox {
    float: left;
    height: 20px;
    width: 20px;
    margin-bottom: 1px;
    border: 1px solid black;
    clear: both;
}

.legendLightPink {
    background-color: lightpink;
}

.legendLime {
    background-color: lime;
}

/* Set the size of the div element that contains the map */
#map {
    BORDER-BOTTOM: black 1px solid;
    BORDER-LEFT: black 1px solid;
    BORDER-TOP: black 1px solid;
    BORDER-RIGHT: black 1px solid
}

.rows:hover {
    background-color: Yellow;
}

.lockHead {
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    z-index: 99;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.justShadow {
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.divRounded {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.circlewhite {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-size: 12px;
    color: #000;
    text-align: center;
    background: #FFFFFF;
    border-style: solid;
    border-width: thin
}

.circleblue {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-size: 12px;
    color: #FFF;
    text-align: center;
    background: #30a2f8;
    border-style: solid;
    border-width: thin;
    border-color: black
}

.circlegreen {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-size: 12px;
    color: #000;
    text-align: center;
    background: #00FF00;
    border-style: solid;
    border-width: thin
}

.circleyellow {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-size: 12px;
    color: #000;
    text-align: center;
    background: #FFFF00;
    border-style: solid;
    border-width: thin
}

/* HEARBEAT */
.heartbeat {
    position: absolute;
    display: none;
    margin: 5px;
    color: red;
    right: 0;
    top: 0;
}

.circlered {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-size: 12px;
    color: #FFF;
    text-align: center;
    background: #FF0000;
    border-style: solid;
    border-width: thin;
    border-color: black
}

@-webkit-keyframes pulsate {
    0% {
        box-shadow: 0 0 0 black;
    }

    50% {
        box-shadow: 0 0 17px black;
    }

    100% {
        box-shadow: 0 0 0 black;
    }
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 10px;
    }

    .body-content {
        padding: 0 16px;
    }

    .login-container {
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        max-width: 400px;
        margin: 0 auto;
        margin-top: 20px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    /* Button icons: crisp white SVGs from the same family as the modal header
       icons (replaces the old PNG image-file icons). Background color comes from
       the brand rule below; here we only set the left icon + padding. */
    .btn-with-edit-image,.btn-with-add-image,.btn-with-minus-image,
    .btn-with-export-image,.btn-with-save-image{
        padding:5px 9px 5px 29px!important;background-repeat:no-repeat!important;
        background-position:8px center!important;background-size:15px 15px!important}
    .btn-with-edit-image{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/></svg>")!important}
    .btn-with-add-image{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='16'/><line x1='8' y1='12' x2='16' y2='12'/></svg>")!important}
    .btn-with-minus-image{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><line x1='10' y1='11' x2='10' y2='17'/><line x1='14' y1='11' x2='14' y2='17'/><path d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/></svg>")!important}
    .btn-with-export-image{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>")!important}
    .btn-with-save-image{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/><polyline points='17 21 17 13 7 13 7 21'/><polyline points='7 3 7 8 15 8'/></svg>")!important}

    /* Hex/name text box paired with a native colour swatch. The native picker
       opens in the browser's top layer, so it can't be occluded by a modal the
       way the AjaxControlToolkit palette was. */
    .color-field {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

/* Two-column dialog form: give every field the SAME width. Opt in with class="pop-form"
   on the table. Widths belong here, not per control -- Primary Details carried
   Width="250px" on the name, "150px" on the UNOS ID and nothing at all on colour/tier, so
   the fields were three different sizes and the widest overflowed its cell.
   Deliberately NOT setting table width or table-layout here. Bootstrap's .table sets
   width:100% with equal specificity and wins on order, so a width here silently loses --
   and table-layout:fixed WITHOUT that width collapses the label column to ~3px. Leave the
   table's own layout alone and only normalise the fields.
   max-width:100% is what keeps this safe on a phone: the fields shrink with the dialog
   instead of forcing it wider than the screen. */
/* Let the labels wrap. "OPOrganization UNOS ID:" on one line claimed 185px of a 326px
   dialog, leaving 125px for every field. Two things were needed and neither is obvious:
     1. white-space:normal on the CELL. It inherits nowrap, so the text could not break and
        the column could not shrink below its 169px of content -- which silently made a
        width here a no-op (auto table layout treats width as a hint, not a rule).
     2. the selector must hit SPAN, not label: <asp:Label> renders as <span>. */
.pop-form > tbody > tr > td:first-child{width:110px;white-space:normal}
.pop-form > tbody > tr > td:first-child span{white-space:normal}
.pop-form input[type="text"],
.pop-form select,
.pop-form textarea{width:220px;max-width:100%;box-sizing:border-box}
/* Colour row keeps its swatch: cap the pair, let the text field take what's left.
   min-width:0 is required or a flex item refuses to shrink below its intrinsic size. */
.pop-form .color-field{display:flex;max-width:220px}
.pop-form .color-field input[type="text"]{flex:1 1 auto;width:auto;min-width:0}
.pop-form .color-field-swatch{flex:0 0 30px}

    .color-field-swatch {
        width: 30px;
        height: 26px;
        padding: 0 1px;
        border: 1px solid var(--border, #999);
        border-radius: 5px;
        background: transparent;
        cursor: pointer;
        flex: 0 0 auto;
    }

    .color-button {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        /*background-color: #4CAF50;
        color: white;*/
        border: 1px solid black;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.onboard-progress {
    background: #fff;
    padding: 8px;
    border-radius: 3px;
}

    .onboard-progress .progress-item {
        padding: 8px 6px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
    }

        .onboard-progress .progress-item:last-child {
            border-bottom: none;
        }

    .onboard-progress .stage-icon {
        width: 34px;
        text-align: center;
        font-size: 18px;
        margin-right: 8px;
    }

    .onboard-progress .stage-title {
        font-weight: 700;
        display: block;
    }

    .onboard-progress .stage-sub {
        display: block;
        font-size: 0.9em;
        color: #666;
    }

    .onboard-progress .completed .stage-icon {
        color: #28a745;
    }
    /* green */
    .onboard-progress .pending .stage-icon {
        color: #6c757d;
    }
/* gray */

/* Dark mode basics */
body.dark-mode .ModalPopupWaitDiv {
    color: White;
    font-weight: bolder;
    background-color: #181818;
    padding: 15px;
    width: 200px;
}

body.dark-mode,
body .dark-mode {
    background-color: #121212 !important;
    color: #e6e6e6 !important;
}

    /* jumbotron / panels */
    body.dark-mode .jumbotron {
        background-color: #1e1e1e;
        color: #e6e6e6;
        border-color: #222;
    }

    /* table */
    body.dark-mode .table {
        background-color: #1b1b1b;
        color: #ddd;
        border-color: #2a2a2a;
    }

    /* .table-bordered draws a light (#ddd) border on EVERY cell -- those read as
       bright white grid lines in dark mode. Soften the cell borders to the same
       subtle dark tone as the table border (e.g. CoordinatorOnboarding tabs). */
    body.dark-mode .table-bordered,
    body.dark-mode .table-bordered > thead > tr > th,
    body.dark-mode .table-bordered > tbody > tr > th,
    body.dark-mode .table-bordered > tfoot > tr > th,
    body.dark-mode .table-bordered > thead > tr > td,
    body.dark-mode .table-bordered > tbody > tr > td,
    body.dark-mode .table-bordered > tfoot > tr > td {
        border-color: #2a2a2a;
    }

    /* navbar */
    body.dark-mode .navbar {
        background-color: #111 !important;
        border-color: #222;
    }

        body.dark-mode .navbar a,
        body.dark-mode .navbar-brand,
        body.dark-mode .navbar-nav > li > a {
            color: #ddd !important;
        }

    /* buttons: invert primary look slightly */
    body.dark-mode .btn-primary {
        background-color: #2a6f9e;
        border-color: #1f5a83;
        color: #fff;
    }

        body.dark-mode .btn-primary:hover {
            color: #fff;
            background-color: #286090;
            border-color: #204d74;
        }

    body.dark-mode .btn-primary-cancel {
        color: #fff;
        background-color: #ce1616;
        border-color: #2e6da4;
        margin-top: 4px;
    }

        body.dark-mode .btn-primary-cancel:hover {
            color: #fff;
            background-color: #a50000;
            border-color: #204d74;
        }

    body.dark-mode .btn-primary-logout {
        color: #fff;
        background-color: #ce1616;
        border-color: #2e6da4;
        margin-top: 14px;
        margin-left: 10px;
    }

        body.dark-mode .btn-primary-logout:hover {
            color: #fff;
            background-color: #a50000;
            border-color: #204d74;
        }

    /* form controls */
    body.dark-mode input,
    body.dark-mode textarea,
    body.dark-mode select {
        background-color: var(--field);
        color: var(--text);
        border-color: var(--field-border);
    }

    /* labels/messages */
    body.dark-mode label,
    body.dark-mode .lead,
    body.dark-mode p,
    body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
        color: #e6e6e6;
    }

    /* Dark-mode modal overrides — append after existing dark-mode rules */
    body.dark-mode .ModalPopupBG {
        background-color: rgba(0, 0, 0, 0.75); /* dark overlay */
        opacity: 1; /* keep children fully opaque */
        filter: none;
    }

    body.dark-mode .info-modal,
    body.dark-mode .HellowWorldPopup,
    body.dark-mode .HellowWorldPopupUpload,
    body.dark-mode .HellowWorldPopupInfo,
    body.dark-mode .ModalPopupWait {
        background-color: #181818;
        color: #e6e6e6;
        border-color: #2f2f2f;
        -webkit-box-shadow: 0 8px 30px rgba(0,0,0,0.75);
        -moz-box-shadow: 0 8px 30px rgba(0,0,0,0.75);
        box-shadow: 0 8px 30px rgba(0,0,0,0.75);
    }

    /* Ensure popup borders are visible */
    body.dark-mode .HellowWorldPopup,
    body.dark-mode .HellowWorldPopupUpload,
    body.dark-mode .HellowWorldPopupInfo,
    body.dark-mode .info-modal {
        border: 1px solid #2f2f2f;
    }

    /* Keep upload popup inset shadow readable */
    body.dark-mode .HellowWorldPopupUpload {
        -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.02), 0 0 8px rgba(0,0,0,0.8);
        box-shadow: inset 0 1px 1px rgba(255,255,255,0.02), 0 0 8px rgba(0,0,0,0.8);
    }

    /* Text, headings and paragraph color inside popups */
    body.dark-mode .info-modal h1,
    body.dark-mode .info-modal h2,
    body.dark-mode .info-modal h3,
    body.dark-mode .HellowWorldPopup h1,
    body.dark-mode .HellowWorldPopup h2,
    body.dark-mode .HellowWorldPopup h3,
    body.dark-mode .HellowWorldPopupInfo h1,
    body.dark-mode .HellowWorldPopupInfo h2 {
        color: #ffffff;
    }

    body.dark-mode .info-modal p,
    body.dark-mode .HellowWorldPopup p,
    body.dark-mode .HellowWorldPopupInfo p {
        color: #d7d7d7;
    }

    /* Inputs and selects inside popups */
    body.dark-mode .info-modal input,
    body.dark-mode .info-modal textarea,
    body.dark-mode .info-modal select,
    body.dark-mode .HellowWorldPopup input,
    body.dark-mode .HellowWorldPopup textarea,
    body.dark-mode .HellowWorldPopup select {
        background-color: #222;
        color: #e6e6e6;
        border-color: #333;
    }

    /* Buttons inside popups — reuse primary style */
    body.dark-mode .info-modal .btn-primary,
    body.dark-mode .HellowWorldPopup .btn-primary,
    body.dark-mode .HellowWorldPopupUpload .btn-primary,
    body.dark-mode .HellowWorldPopupInfo .btn-primary {
        background-color: #2a6f9e;
        border-color: #1f5a83;
        color: #fff;
    }

        body.dark-mode .info-modal .btn-primary:hover,
        body.dark-mode .HellowWorldPopup .btn-primary:hover,
        body.dark-mode .HellowWorldPopupUpload .btn-primary:hover,
        body.dark-mode .HellowWorldPopupInfo .btn-primary:hover {
            color: #fff;
            background-color: #286090;
            border-color: #204d74;
        }

    body.dark-mode .info-modal .btn-primary-cancel,
    body.dark-mode .HellowWorldPopup .btn-primary-cancel,
    body.dark-mode .HellowWorldPopupUpload .btn-primary-cancel,
    body.dark-mode .HellowWorldPopupInfo .btn-primary-cancel,
    body.dark-mode .ModalPopupWait .btn-primary-cancel {
        background-color: #ce1616;
        border-color: #2e6da4;
        color: #fff;
    }

        /* Hover state */
        body.dark-mode .info-modal .btn-primary-cancel:hover,
        body.dark-mode .HellowWorldPopup .btn-primary-cancel:hover,
        body.dark-mode .HellowWorldPopupUpload .btn-primary-cancel:hover,
        body.dark-mode .HellowWorldPopupInfo .btn-primary-cancel:hover,
        body.dark-mode .ModalPopupWait .btn-primary-cancel:hover {
            background-color: #a50000;
            border-color: #204d74;
        }

    /* Dark-mode tab styles — append after existing dark-mode rules */
    /* Bootstrap 3 nav-tabs */
    body.dark-mode .nav-tabs {
        border-bottom: 1px solid #2a2a2a;
    }

        body.dark-mode .nav-tabs > li > a {
            color: #d7d7d7;
            background-color: transparent;
            border: 1px solid transparent;
            border-radius: 4px 4px 0 0;
        }

            body.dark-mode .nav-tabs > li > a:hover {
                background-color: #222;
                color: #fff;
            }

        body.dark-mode .nav-tabs > li.active > a,
        body.dark-mode .nav-tabs > li.active > a:hover,
        body.dark-mode .nav-tabs > li.active > a:focus {
            color: #fff;
            background-color: #1f1f1f;
            border: 1px solid #333;
            border-bottom-color: transparent; /* visually connect active tab to pane */
        }

        /* Bootstrap 4/5 .nav-link */
        body.dark-mode .nav-tabs .nav-link,
        body.dark-mode .nav-pills .nav-link {
            color: #d7d7d7;
            background-color: transparent;
        }

            body.dark-mode .nav-tabs .nav-link.active,
            body.dark-mode .nav-pills .nav-link.active,
            body.dark-mode .nav-link.show {
                color: #fff;
                background-color: #1f1f1f;
                border: 1px solid #333;
            }

    /* nav-pills */
    body.dark-mode .nav-pills > li > a,
    body.dark-mode .nav-pills .nav-link {
        color: #d7d7d7;
    }

        body.dark-mode .nav-pills > li.active > a,
        body.dark-mode .nav-pills .nav-link.active {
            background-color: #2a6f9e; /* keep same accent used for btn-primary */
            color: #fff;
        }

    /* Tab content / panes */
    body.dark-mode .tab-content,
    body.dark-mode .tab-pane {
        background-color: #161616;
        color: #d7d7d7;
        border: 1px solid #2a2a2a;
        padding: 12px 15px;
        border-radius: 0 4px 4px 4px;
    }

    body.dark-mode .ajax__tab_panel,
    body.dark-mode .ajax__tab_body {
        background-color: #2E2E2E;
    }

    /* ASP.NET AJAX TabContainer (common AJAX Control Toolkit classes) */
    body.dark-mode .ajax__tab_header,
    body.dark-mode .ajax__tab_outer,
    body.dark-mode .ajax__tab_tab,
    body.dark-mode .ajax__tab_inner {
        background-color: #1e1e1e;
        color: #d7d7d7;
        border-color: #2e2e2e;
    }

    /* jQuery UI tabs */
    body.dark-mode .ui-tabs .ui-tabs-nav li a {
        background: transparent;
        color: #d7d7d7;
    }

    body.dark-mode .ui-tabs .ui-tabs-nav li.ui-state-active a {
        background: #1f1f1f;
        color: #fff;
        border-color: #333;
    }

    body.dark-mode .ui-tabs .ui-tabs-panel {
        background: #161616;
        color: #d7d7d7;
        border: 1px solid #2a2a2a;
    }

    /* Generic fallback for custom tab markup */
    body.dark-mode .tabs,
    body.dark-mode .tabs-header,
    body.dark-mode .tab,
    body.dark-mode .tab-link,
    body.dark-mode .tabs .tab-link {
        background-color: #121212;
        color: #d7d7d7;
    }

        body.dark-mode .tabs .tab-link.active,
        body.dark-mode .tab.active,
        body.dark-mode .tab-link.active {
            background-color: #1f1f1f;
            color: #fff;
            border: 1px solid #333;
        }

    /* Hover/focus polish */
    body.dark-mode .nav-tabs > li > a:focus,
    body.dark-mode .nav-tabs > li > a:hover,
    body.dark-mode .nav-pills > li > a:focus,
    body.dark-mode .nav-pills > li > a:hover,
    body.dark-mode .nav-link:focus,
    body.dark-mode .nav-link:hover {
        background-color: #222;
        color: #fff;
    }

    /* Ensure tabbable links remain visible (increase specificity if needed) */
    body.dark-mode a.nav-link,
    body.dark-mode a.nav-tabs a,
    body.dark-mode a.nav-pills a {
        color: inherit;
    }

    /* Strong dark-mode tab overrides (append at end of file) */
    body.dark-mode .nav.nav-tabs > li > a,
    body.dark-mode .nav-tabs > li > a,
    body.dark-mode .nav-tabs .nav-link {
        color: #d7d7d7 !important;
        background-color: transparent !important;
        border-color: transparent !important;
    }

        body.dark-mode .nav.nav-tabs > li.active > a,
        body.dark-mode .nav-tabs > li.active > a,
        body.dark-mode .nav-tabs .nav-link.active {
            color: #fff !important;
            background-color: #1f1f1f !important;
            border: 1px solid #333 !important;
            border-bottom-color: transparent !important;
        }

    body.dark-mode .nav-pills .nav-link,
    body.dark-mode .nav-pills > li > a {
        color: #d7d7d7 !important;
    }

        body.dark-mode .nav-pills .nav-link.active,
        body.dark-mode .nav-pills > li.active > a {
            background-color: #2a6f9e !important;
            color: #fff !important;
        }

    body.dark-mode .tab-content,
    body.dark-mode .tab-pane {
        background-color: #161616 !important;
        color: #d7d7d7 !important;
        border: 1px solid #2a2a2a !important;
        padding: 12px 15px !important;
    }

    /* ASP.NET AJAX TabContainer / table-based tabs */
    body.dark-mode .ajax__tab_outer .ajax__tab_header,
    body.dark-mode .ajax__tab_outer .ajax__tab_header td,
    body.dark-mode .ajax__tab_outer .ajax__tab_tab {
        background: #2e2e2e !important;
        color: #92cdff !important;
        border-color: #2a2a2a !important;
    }

    /* jQuery UI fallback */
    body.dark-mode .ui-tabs .ui-tabs-nav li a {
        color: #d7d7d7 !important;
    }

    body.dark-mode .ui-tabs .ui-tabs-nav li.ui-state-active a {
        background: #1f1f1f !important;
        color: #fff !important;
    }

    body.dark-mode .login-container {
        background-color: #1f1f1f !important;
        color: #fff !important;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        max-width: 400px;
        margin: 0 auto;
        margin-top: 20px;
    }

    /* Dark-mode: brighter glow for .justShadow (replace or append at end of file) */
    body.dark-mode .justShadow {
        /* core depth + a brighter cool glow and faint rim */
        -webkit-box-shadow: 0 12px 30px rgba(0,0,0,0.68), /* deeper core shadow */
        0 0 12px rgba(255,255,255,0.03), /* faint rim for separation */
        0 0 28px rgba(79,176,255,0.20), /* bright inner blue glow */
        0 0 56px rgba(79,176,255,0.12); /* softer outer glow */
        -moz-box-shadow: 0 12px 30px rgba(0,0,0,0.68), 0 0 12px rgba(255,255,255,0.03), 0 0 28px rgba(79,176,255,0.20), 0 0 56px rgba(79,176,255,0.12);
        box-shadow: 0 12px 30px rgba(0,0,0,0.68), 0 0 12px rgba(255,255,255,0.03), 0 0 28px rgba(79,176,255,0.20), 0 0 56px rgba(79,176,255,0.12);
        transition: box-shadow 220ms ease, transform 220ms ease;
    }


/* Dark-mode table.gridview overrides --------------------------------- */
/* Target your GridView tables via the CssClass "gridview" */
table.gridview,
table.gridview tbody,
table.gridview thead,
table.gridview tbody tr {
    border-collapse: collapse;
}

/* headers */
body.dark-mode table.gridview thead th {
    background-color: #222;
    color: #fff;
    border-color: #333;
}

/* cells: use per-row CSS var if set, otherwise fallback to a dark default.
   Do NOT use !important here so inline styles and explicit classes win. */
body.dark-mode table.gridview tbody tr td {
    background-color: var(--row-bg, var(--row-even));
    color: var(--text);
    border-color: var(--border);
}

/* Dark-mode GridView: stronger zebra contrast (apply on TR) */
body.dark-mode table.gridview tbody tr:nth-child(odd) {
    background-color: var(--row-odd);
}

body.dark-mode table.gridview tbody tr:nth-child(even) {
    background-color: var(--row-even);
}

/* Ensure TDs inherit the row background instead of overriding it */
body.dark-mode table.gridview tbody tr:not(.cssPager) td {
    background-color: transparent; /* inherit from TR */
}

/* Keep selected row clearly visible */
body.dark-mode table.gridview tbody tr.selected-row td {
    background-color: var(--row-selected) !important;
    color: var(--row-selected-text);
}

/* Optional: hover, but don’t overpower selected */
body.dark-mode table.gridview tbody tr:hover:not(.cssPager) td {
    background-color: var(--row-hover);
}

/* Light-mode GridView: stronger zebra contrast */
body:not(.dark-mode) table.gridview tbody tr:nth-child(odd) {
    background-color: var(--row-odd);
}

body:not(.dark-mode) table.gridview tbody tr:nth-child(even) {
    background-color: var(--row-even);
}

/* Cells inherit row background and keep clear borders/text */
body:not(.dark-mode) table.gridview tbody tr td {
    background-color: transparent;
    color: var(--text);
    border-color: var(--border);
}

/* Hover: slightly stronger tint to stand out */
body:not(.dark-mode) table.gridview tbody tr:hover td {
    background-color: var(--row-hover);
}

/* Selected row: higher contrast highlight */
body:not(.dark-mode) table.gridview tbody tr.selected-row td {
    background-color: var(--row-selected) !important;
    color: var(--row-selected-text);
}

/* hover for rows that did not specify inline background */
body.dark-mode table.gridview tbody tr:not([style]):hover td {
    background-color: rgba(255,255,255,0.03);
}

body.dark-mode li > a {
    color: #29a5fb !important;
}

/* Select column is first column */
body.dark-mode table.gridview tbody tr td:first-child a,
body.dark-mode table.gridview tbody tr td:nth-child(1) a {
    color: #2a6f9e !important;
}

/*Hover+Selected Tab*/
/* hover on tabs to preview active state */
body.dark-mode .ajax__tab_outer .ajax__tab_tab:hover {
    background-color: #1f1f1f;
    color: #d7d7d7 !important;
    transform: translateY(-2px);
}


body.dark-mode .ajax__tab_active .ajax__tab_inner .ajax__tab_tab {
    color: #fff !important;
    background-color: var(--brand) !important;
    font-weight: 700;
}

/* Onboarding Progress */
/* Dark-mode overrides for onboard progress */
body.dark-mode .onboard-progress {
    background: linear-gradient(180deg, #0f1112 0%, #161617 100%);
    color: #e6e6e6;
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 8px 22px rgba(0,0,0,0.6);
    padding: 6px;
}

    /* Items: tighter spacing for compact appearance */
    body.dark-mode .onboard-progress .progress-item {
        padding: 6px 8px;
        border-bottom: 1px solid rgba(255,255,255,0.03);
        display: flex;
        align-items: center;
        transition: background-color 140ms ease, transform 140ms ease;
    }

        body.dark-mode .onboard-progress .progress-item:last-child {
            border-bottom: none;
        }

    /* Circle-style icon with subtle surface */
    body.dark-mode .onboard-progress .stage-icon {
        width: 34px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        font-size: 16px;
        margin-right: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,0.02);
        color: #9aa4ad; /* default muted */
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
        transition: all 160ms ease;
    }

    /* Titles and subtitles */
    body.dark-mode .onboard-progress .stage-title {
        font-weight: 700;
        color: #e6e6e6;
        display: block;
    }

    body.dark-mode .onboard-progress .stage-sub {
        display: block;
        font-size: 0.88em;
        color: #9aa4ad;
    }

    /* Completed: bright, slightly glowing green */
    body.dark-mode .onboard-progress .completed .stage-icon {
        color: #2fe08a;
        background: linear-gradient(180deg, rgba(47,224,138,0.13), rgba(47,224,138,0.05));
        box-shadow: 0 6px 18px rgba(47,224,138,0.06);
    }

    /* Pending: muted, low-contrast */
    body.dark-mode .onboard-progress .pending .stage-icon {
        color: #9aa4ad;
        background: rgba(255,255,255,0.015);
    }

    /* Hover / focus polish */
    body.dark-mode .onboard-progress .progress-item:hover {
        background-color: rgba(255,255,255,0.02);
        transform: translateY(-1px);
    }

    /* Keyboard focus fallback (if a focusable control exists inside the item) */
    body.dark-mode .onboard-progress .progress-item:focus-within {
        outline: 2px solid rgba(42,111,158,0.22);
        outline-offset: 2px;
    }

/* Dark-mode sticky note now flows from tokens (subtle, no blue gradient);
   only the background needs a nudge for contrast on dark. */
body.dark-mode .oporg-sticky-note {
    background: var(--surface-2);
}

body.dark-mode .button-yellow-noflex-pulsate {
    /* slightly brighten the button base for better contrast in dark mode */
    background: linear-gradient(180deg, #ffd44d 0%, #ffdd69 100%);
    background-color: gold;
    color: #111;
    animation: pulsate-dark 1.6s ease-in-out infinite;
    position: relative;
    z-index: 3;
    font-size: 10px;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    color: black;
    border-radius: 10px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
    justify-content: center;
    align-items: center;
}

/* Keyframes for dark theme — bright, high-contrast multi-layer glow so it reads on dark backgrounds */
@keyframes pulsate-dark {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 235, 140, 0), 0 0 0 rgba(255, 160, 0, 0);
        transform: scale(1);
    }

    40% {
        box-shadow: 0 0 12px 4px rgba(255, 235, 140, 0.98), /* tight bright rim */
        0 0 32px 10px rgba(255, 160, 0, 0.40); /* soft warm outer glow */
        transform: scale(1.035);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 235, 140, 0), 0 0 0 rgba(255, 160, 0, 0);
        transform: scale(1);
    }
}

/* Ultra modern blue gradient header style (dark-mode only) */
body.dark-mode .button-blue.lockHead {
    background: linear-gradient(135deg,#0a1b2b 0%, #0d3558 22%, #0f4e86 45%, #106bb7 70%, #1e90ff 100%);
    background-size: 240% 240%;
    animation: drsBlueSweep 14s ease-in-out infinite;
    color: #e6f4ff;
    border: 1px solid #1273dc;
    box-shadow: 0 6px 18px rgba(0,0,0,0.7), inset 0 0 14px rgba(255,255,255,0.05), 0 0 28px rgba(30,144,255,0.25);
    transition: box-shadow .4s, transform .35s;
}

    body.dark-mode .button-blue.lockHead h1,
    body.dark-mode .button-blue.lockHead h2,
    body.dark-mode .button-blue.lockHead h3,
    body.dark-mode .button-blue.lockHead h4,
    body.dark-mode .button-blue.lockHead h5,
    body.dark-mode .button-blue.lockHead h6 {
        margin: 0;
        font-weight: 600;
        letter-spacing: .6px;
        /* remove gradient text effect */
        background: none;
        -webkit-background-clip: initial;
        -webkit-text-fill-color: initial;
        color: #e6f4ff; /* plain readable color */
        line-height: 1.25;
    }

    body.dark-mode .button-blue.lockHead:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(0,0,0,0.75), 0 0 36px rgba(30,144,255,0.35);
    }

    body.dark-mode .button-blue.lockHead:active {
        transform: translateY(0);
        box-shadow: 0 4px 14px rgba(0,0,0,0.65), 0 0 20px rgba(30,144,255,0.25);
    }

@keyframes drsBlueSweep {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


body.dark-mode .button-blue.lockHead {
    /* adjust vertical size: slightly shorter than previous (was 10px/44px) */
    padding: 6px 12px;
    min-height: 34px;
    display: flex;
    align-items: center;
}

    /* keep heading line-height consistent */
    body.dark-mode .button-blue.lockHead h1,
    body.dark-mode .button-blue.lockHead h2,
    body.dark-mode .button-blue.lockHead h3,
    body.dark-mode .button-blue.lockHead h4,
    body.dark-mode .button-blue.lockHead h5,
    body.dark-mode .button-blue.lockHead h6 {
        line-height: 1.2;
    }

/* Light-mode enhanced gradient header style to match dark-mode styling */
.button-blue.lockHead {
    background: linear-gradient(135deg,#0a1b2b 0%, #0d3558 22%, #0f4e86 45%, #106bb7 70%, #1e90ff 100%);
    background-size: 240% 240%;
    animation: drsBlueSweep 14s ease-in-out infinite;
    color: #0d1e29; /* darker text for light context inside header if plain text elements */
    border: 1px solid #1273dc;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 0 14px rgba(255,255,255,0.25), 0 0 18px rgba(30,144,255,0.25);
    transition: box-shadow .4s, transform .35s;
    padding: 6px 12px; /* match adjusted height */
    min-height: 34px;
    display: flex;
    align-items: center;
}

    .button-blue.lockHead h1,
    .button-blue.lockHead h2,
    .button-blue.lockHead h3,
    .button-blue.lockHead h4,
    .button-blue.lockHead h5,
    .button-blue.lockHead h6 {
        margin: 0;
        font-weight: 600;
        letter-spacing: .6px;
        background: none;
        -webkit-background-clip: initial;
        -webkit-text-fill-color: initial;
        color: #e6f4ff; /* keep same readable heading color */
        line-height: 1.2;
    }

    .button-blue.lockHead:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(0,0,0,0.45), 0 0 26px rgba(30,144,255,0.35);
    }

    .button-blue.lockHead:active {
        transform: translateY(0);
        box-shadow: 0 4px 14px rgba(0,0,0,0.30), 0 0 18px rgba(30,144,255,0.25);
    }

/* Disable animation on gradient headers (light & dark) */
body.dark-mode .button-blue.lockHead,
.button-blue.lockHead {
    animation: none !important;
    background-size: 100% 100%; /* static background */
}

/* Modern stats cards */
.stats-wrapper {
    background: linear-gradient(135deg,#ffffff 0%, #e6f3ff 40%, #d4e9ff 75%, #c5e1ff 100%);
    border: 1px solid #a8cce6;
    border-radius: 14px;
    padding: 8px 12px 8px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.grid-section-wrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: var(--shadow);
    padding: 0;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
    margin-right: 5px;
    margin-left: 5px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
    gap: 14px;
}

.stat-card {
    background: linear-gradient(180deg,#deeeff 0%, #e6f2ff 35%, #dfe9ff 70%, #d9e3f5 100%);
    border: 1px solid #98bfe0;
    border-radius: 12px;
    padding: 6px 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 72px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
    transition: box-shadow .25s ease, transform .25s ease;
}

    .stat-card:before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 12px;
        pointer-events: none;
        background: radial-gradient(circle at 30% 20%, rgba(43,58,140,0.12), transparent 65%);
        opacity: .7;
    }

    .stat-card:hover {
        box-shadow: 0 8px 20px rgba(43,58,140,0.14);
        transform: translateY(-3px);
    }

.stat-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #1e5a99;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: #0a3f7d;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
    position: relative;
    z-index: 1;
}

@media (max-width: 600px) {
    .stat-value {
        font-size: 26px;
    }
}

/* Dark mode stats */
body.dark-mode .stats-wrapper {
    background: #12191f;
    border: 1px solid #1f2a33;
}

body.dark-mode .grid-section-wrapper {
    background: #12191f;
    border: 1px solid #1f2a33;
}

body.dark-mode .stat-card {
    background: linear-gradient(180deg,#1a242c 0%, #162026 100%);
    border: 1px solid #23323b;
    box-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03);
    min-height: 72px;
    padding: 6px 8px 6px;
    border-radius: 12px;
}

    body.dark-mode .stat-card:before {
        background: radial-gradient(circle at 30% 20%, rgba(91,120,224,0.18), transparent 60%);
        opacity: .5;
        border-radius: 12px;
    }

    body.dark-mode .stat-card:hover {
        box-shadow: 0 10px 28px rgba(0,0,0,0.65), 0 0 0 1px rgba(79,176,255,0.25);
    }

body.dark-mode .stat-label {
    color: #8aa6bb;
}

body.dark-mode .stat-value {
    color: #e6f4ff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}

/* Grid section wrapper for col-md-6 spacing */
.grid-section-wrapper {
    margin-right: 5px;
    margin-left: 5px;
}

.col-md-6.grid-section-wrapper {
    padding-left: 10px;
    padding-right: 10px;
}

/* Adjust row containing grid-section-wrapper to handle margins */
.row > .col-md-6.grid-section-wrapper {
    width: calc(50% - 10px);
}

/* Mobile/Tablet responsive: restore full width on smaller screens */
@media (max-width: 991px) {
    .row > .col-md-6.grid-section-wrapper {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Checkbox Styling - Light Mode (all checkboxes) */
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid #337ab7;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transition: all 0.15s ease-in-out;
}

input[type="checkbox"]:checked {
    background-color: #337ab7;
    border-color: #337ab7;
}

input[type="checkbox"]:checked::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

input[type="checkbox"]:hover {
    border-color: #286090;
    box-shadow: 0 0 4px rgba(51, 122, 183, 0.4);
}

input[type="checkbox"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Checkbox Styling - Dark Mode (all checkboxes) */
body.dark-mode input[type="checkbox"] {
    border: 1px solid #4fb0ff;
    background-color: #222;
}

body.dark-mode input[type="checkbox"]:checked {
    background-color: #2a6f9e;
    border-color: #4fb0ff;
}

body.dark-mode input[type="checkbox"]:checked::after {
    color: #fff;
}

body.dark-mode input[type="checkbox"]:hover {
    border-color: #7cc4ff;
    box-shadow: 0 0 6px rgba(79, 176, 255, 0.5);
}

/* ============================================================
   BRAND REFRESH — component layer (Direction C)
   Tokens drive both light & dark. INTENTIONALLY no !important on
   grid cell/row backgrounds or label text, so data-driven
   code-behind styling (expiry Red/Yellow cells, status labels)
   still wins. No layout/markup/responsive changes here.
   ============================================================ */

/* --- Navbar (recolor only; Bootstrap collapse/layout untouched) --- */
.navbar-inverse{background-color:var(--nav)!important;border-color:transparent!important}
.navbar-inverse .navbar-brand{color:#fff!important;font-weight:600}
.navbar-inverse .navbar-nav>li>a{color:var(--nav-text)!important}
.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:hover{
    color:#fff!important;background-color:rgba(255,255,255,.07)!important}
.navbar-inverse .navbar-toggle{border-color:rgba(255,255,255,.28)!important}
.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff!important}
.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus{background-color:rgba(255,255,255,.10)!important}

/* --- Buttons --- */
.btn{border-radius:var(--radius)}
.btn-primary,body.dark-mode .btn-primary{background-color:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,body.dark-mode .btn-primary:hover{
    background-color:var(--brand-hover)!important;border-color:var(--brand-hover)!important;color:#fff!important}
.btn-primary-cancel,.btn-primary-logout,
body.dark-mode .btn-primary-cancel,body.dark-mode .btn-primary-logout{
    background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}
.btn-primary-cancel:hover,.btn-primary-logout:hover,
body.dark-mode .btn-primary-cancel:hover,body.dark-mode .btn-primary-logout:hover{
    background-color:var(--danger-hover)!important;border-color:var(--danger-hover)!important;color:#fff!important}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* --- Form fields (dark handled by retokened rule above) --- */
input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=image]),
textarea, select, .form-control{
    background-color:var(--field);color:var(--text);
    border:1px solid var(--field-border);border-radius:var(--radius)}
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus,.form-control:focus{
    border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-tint)}

/* --- Card surfaces --- */
.jumbotron{background-color:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);color:var(--text)}
.login-container{background-color:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);color:var(--text)}

/* --- Login form: centered, aligned, responsive --- */
.login-container table{margin:0 auto;border-collapse:separate;border-spacing:0 10px}
.login-container table td{vertical-align:middle}
.login-container table tr td:first-child{text-align:right;padding-right:10px;white-space:nowrap;font-weight:600;color:var(--muted)}
.login-container input:not([type=checkbox]){width:200px;max-width:100%;height:38px;padding:7px 11px;box-sizing:border-box;font-size:14px}
/* "Forgot your password?" as a subtle link beside the Login button */
.login-forgot-link{margin-left:14px;font-size:13px;color:var(--brand);text-decoration:none;white-space:nowrap}
.login-forgot-link:hover{text-decoration:underline}

/* --- Stat cards --- */
.stats-wrapper{background:var(--surface)!important;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow)}
.stat-card,body.dark-mode .stat-card{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:8px;box-shadow:none!important}
.stat-card .stat-label,body.dark-mode .stat-card .stat-label{color:var(--muted)!important}
.stat-card .stat-value,body.dark-mode .stat-card .stat-value{color:var(--brand)!important}

/* --- Modals / popups --- */
.HellowWorldPopup,.HellowWorldPopupUpload,.HellowWorldPopupInfo,.info-modal,
body.dark-mode .HellowWorldPopup,body.dark-mode .HellowWorldPopupUpload,body.dark-mode .HellowWorldPopupInfo{
    background-color:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:10px}
.ModalPopupBG,body.dark-mode .ModalPopupBG{background-color:rgba(8,12,20,.55)!important}

/* --- GridView header: brand navy. NOTE: ASP.NET GridView does NOT emit
   <thead>, so the header cells are plain <th> (often inside the
   browser-inserted <tbody>). Target th directly, not thead th. The inline
   HeaderStyle BackColor="#006699" is beaten with !important. Headers are
   not data-driven, so forcing color here is safe. --- */
table.gridview th,
table.gridview thead th{
    background-color:var(--grid-header)!important;color:var(--grid-header-text)!important;border:none!important;
    font-size:12px!important;font-weight:600!important;letter-spacing:.02em;padding:6px 12px!important;text-align:left}
/* Kill the GridView's white BackColor + outer #CCCCCC border so no light
   sliver shows past the header cells / at the table edge. */
table.gridview{background-color:var(--surface)!important;border:none!important}

/* --- Links --- */
a{color:var(--brand)}
a:hover,a:focus{color:var(--brand-hover)}

/* --- Icon buttons (keep their bg-image; recolor only) --- */
.btn-with-edit-image,.btn-with-add-image,.btn-with-minus-image,
.btn-with-export-image,.btn-with-save-image{background-color:var(--brand)!important}

/* --- Checkboxes (tokens drive both modes) --- */
input[type="checkbox"]:checked{background-color:var(--brand)!important;border-color:var(--brand)!important}
input[type="checkbox"]:hover{border-color:var(--brand)!important}

/* Native date/time picker icon: the default glyph is dark and vanishes on the
   dark field background — invert it in dark mode so it's visible. */
body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="time"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="month"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="week"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.7);cursor:pointer}

/* --- Theme-toggle button: navbar is dark navy in BOTH modes, so keep it light --- */
.theme-toggle-btn,body:not(.dark-mode) .theme-toggle-btn{color:#fff!important;border-color:rgba(255,255,255,.28)!important}
.theme-toggle-btn:hover{background:rgba(255,255,255,.12)!important}

/* ============================================================
   BRAND REFRESH — Phase 2 layout components (Direction C)
   Additive, token-driven, used by the revamped Dashboard +
   search pages. New class names, so other pages are unaffected.
   ============================================================ */

/* Page header */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-right:14px;
    margin:2px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.page-head .ph-title{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.page-head .ph-title .ph-bar{width:4px;height:21px;border-radius:3px;background:var(--brand);display:inline-block}
.page-head .ph-sub{font-size:12.5px;color:var(--muted);margin:2px 0 0 14px}
.page-head .ph-actions{display:flex;gap:8px;align-items:center}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.kpi{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);
    border-radius:8px;padding:9px 14px;box-shadow:var(--shadow)}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--brand))}
.kpi .kpi-ico{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;
    font-size:13px;margin-bottom:3px;background:color-mix(in srgb,var(--accent,var(--brand)) 16%,var(--surface))}
.kpi .kpi-label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.kpi .kpi-value{font-size:22px;font-weight:700;line-height:1.05;margin-top:1px;color:var(--accent,var(--brand))}
.kpi.k1{--accent:var(--brand)} .kpi.k2{--accent:var(--secondary)} .kpi.k3{--accent:var(--success)} .kpi.k4{--accent:var(--warn)}

/* Quick-action tiles */
.quick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.quick .qa{flex:1 1 200px}
.qa-logo{position:relative;flex:0 0 220px;align-self:stretch;background:#fff;display:flex;align-items:center;justify-content:center;padding:10px;border-radius:8px;border:1px solid var(--border);min-height:88px}
.qa-logo img{max-width:100%;max-height:58px}
.qa-logo .dash-cog{position:absolute;top:6px;right:6px}
.grid-section-wrapper h4 .gs-count{margin-left:8px;background:var(--brand-tint);color:var(--brand);font-size:11px;font-weight:700;padding:1px 8px;border-radius:20px}
.grid-section-wrapper h4 .gs-meta{margin-left:auto;font-weight:400;font-size:11.5px;color:var(--muted)}
.qa{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);
    background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:11px 13px;box-shadow:var(--shadow);
    transition:border-color .2s,transform .12s,box-shadow .2s}
.qa:hover{border-color:color-mix(in srgb,var(--accent,var(--brand)) 40%,var(--border));transform:translateY(-2px);text-decoration:none;color:var(--text)}
.qa .qa-ico{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
    font-size:17px;background:color-mix(in srgb,var(--accent,var(--brand)) 14%,var(--surface))}
.qa .qa-title{font-weight:600;font-size:13.5px} .qa .qa-sub{font-size:11.5px;color:var(--muted)}
.qa.q1{--accent:var(--brand)} .qa.q2{--accent:var(--secondary)} .qa.q3{--accent:#9aa3b2}
.qa.qa-disabled{opacity:.55;pointer-events:none}

/* Generic card + section header */
.ui-card{background:var(--surface);border:1px solid var(--border);border-radius:9px;box-shadow:var(--shadow);overflow:hidden}
.ui-card .card-head{display:flex;align-items:center;gap:9px;padding:9px 13px;border-bottom:1px solid var(--border)}
.ui-card .card-head .hb{width:3px;height:15px;border-radius:2px;background:var(--brand)}
.ui-card .card-head .ht{font-weight:600;font-size:13.5px;color:var(--text)}
.ui-card .card-head .cnt{background:var(--brand-tint);color:var(--brand);font-size:11px;font-weight:700;padding:1px 8px;border-radius:20px}
.ui-card .card-head .meta{margin-left:auto;font-size:11.5px;color:var(--muted)}
.ui-card .card-body{padding:0}

/* Details card: clean key/value table (replaces the old .table-bordered look) */
.detail-card .kv-body{padding:4px 14px 11px}
.kv-table{width:100%;border-collapse:collapse;font-size:13px}
.kv-table>tbody>tr>th{text-align:left;color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;
    letter-spacing:.02em;padding:7px 10px 7px 0;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap}
.kv-table>tbody>tr>td{padding:7px 14px 7px 0;border-bottom:1px solid var(--border);font-weight:500;vertical-align:middle}
.kv-table>tbody>tr:last-child>th,.kv-table>tbody>tr:last-child>td{border-bottom:none}
.kv-table table{border:none}                /* inner onboarding status mini-table */
.kv-table table td{border:none!important;padding:0 6px 0 0!important}

/* Sub-group header inside a field table (e.g. "Emergency Contact"): a clear
   tinted banner with a brand left-accent, so the grouped fields read as a unit
   (and can drop the repeated word). box-shadow fills the cell background so it
   survives the modal's transparent-cell overrides. */
.field-group{color:var(--brand)!important;font-weight:700!important;font-size:11.5px!important;
    text-transform:uppercase;letter-spacing:.05em;padding:8px 12px!important;border:none!important;
    box-shadow:inset 0 0 0 100px var(--brand-tint),inset 4px 0 0 var(--brand)!important}
/* Rows belonging to that group (class="fg-row"): tinted block with a continuous
   brand left-accent so the banner + its fields read as one boxed sub-card. The
   box-shadow tint fill survives the modal's transparent-cell overrides. */
.fg-row>th,.fg-row>td{box-shadow:inset 0 0 0 100px color-mix(in srgb,var(--brand) 7%,var(--surface))!important;border-color:transparent!important}
.fg-row>th:first-child,.fg-row>td:first-child{box-shadow:inset 0 0 0 100px color-mix(in srgb,var(--brand) 7%,var(--surface)),inset 4px 0 0 var(--brand)!important}
.fg-row:last-of-type>th,.fg-row:last-of-type>td{box-shadow:inset 0 0 0 100px color-mix(in srgb,var(--brand) 7%,var(--surface)),inset 0 -2px 0 color-mix(in srgb,var(--brand) 22%,var(--border))!important}
.fg-row:last-of-type>th:first-child,.fg-row:last-of-type>td:first-child{box-shadow:inset 0 0 0 100px color-mix(in srgb,var(--brand) 7%,var(--surface)),inset 4px 0 0 var(--brand),inset 0 -2px 0 color-mix(in srgb,var(--brand) 22%,var(--border))!important}
/* Padding for a kv-table that sits directly in a scroll box (no card body). */
.kv-pad{padding:2px 14px}

/* Detail tab revamp: responsive grid of section cards (Additional Details).
   Cards reflow from multi-column to single column as the tab narrows. */
/* Additional Details: details cards on the left, a standalone aside (Travel /
   Preferred Airlines + its grid) on the right so it sits beside the details on
   wide screens and its grid scrolls in place instead of overflowing the flow. */
.addl-layout{display:flex;gap:14px;align-items:flex-start}
.addl-main{flex:1 1 auto;min-width:0}
.addl-aside{flex:0 0 380px;max-width:380px}
@media (max-width:900px){.addl-layout{flex-direction:column}.addl-aside{flex:1 1 auto;max-width:none;width:100%}}
.detail-sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;align-items:start}
.detail-sections .span2{grid-column:span 2}
@media (max-width:680px){.detail-sections .span2{grid-column:auto}}
/* Inline editor row inside a section card (e.g. add a preferred airline). */
.ed-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin:12px 0 10px}
.ed-row .fld{flex:1 1 140px}
.ed-row .fld>label{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
.ed-row select,.ed-row input[type="text"],.ed-row .form-control{width:100%!important;height:32px!important;box-sizing:border-box!important;
    padding:5px 9px!important;background:var(--field)!important;color:var(--text)!important;border:1px solid var(--field-border)!important;
    border-radius:6px!important;font:500 13px var(--ui-font)!important;margin:0!important}
.ed-row select{-webkit-appearance:none!important;appearance:none!important;cursor:pointer;padding-right:28px!important;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%)!important;
    background-position:calc(100% - 15px) 13px,calc(100% - 10px) 13px!important;background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important}

/* 2-up panel grid */
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Filter toolbar */
.toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:11px;background:var(--surface);
    border:1px solid var(--border);border-radius:8px;padding:12px;box-shadow:var(--shadow);margin-bottom:12px}
.toolbar .fld{display:flex;flex-direction:column;gap:4px}
.toolbar .fld label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.toolbar .fld input,.toolbar .fld select,.toolbar .fld .form-control{height:34px!important;box-sizing:border-box;padding:5px 9px;font-size:13px}
.toolbar .chk{display:flex;align-items:center;gap:7px;font-size:12.5px;padding-bottom:7px}
.toolbar .tb-actions{margin-left:auto;display:flex;gap:8px;align-items:flex-end}

/* Status badge */
.badge-status{display:inline-block;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.5;
    letter-spacing:.02em;color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.22);white-space:nowrap}
.badge-status.is-ok{background:var(--success);box-shadow:0 1px 2px rgba(0,0,0,.18),0 0 11px color-mix(in srgb,var(--success) 65%,transparent)}
.badge-status.is-soon{background:var(--warn);box-shadow:0 1px 2px rgba(0,0,0,.18),0 0 11px color-mix(in srgb,var(--warn) 65%,transparent)}
.badge-status.is-exp{background:var(--danger);box-shadow:0 1px 2px rgba(0,0,0,.18),0 0 12px color-mix(in srgb,var(--danger) 70%,transparent)}
.badge-status.is-muted{background:var(--muted);box-shadow:0 1px 2px rgba(0,0,0,.18),0 0 9px color-mix(in srgb,var(--muted) 50%,transparent)}
/* Center any table cell whose content is a status pill (grids, details, modals). */
td:has(> .badge-status),th:has(> .badge-status){text-align:center!important}
/* Back/Home buttons: a clean white left-arrow icon in place of the old « glyph */
.btn-back{padding-left:30px!important;background-repeat:no-repeat!important;background-position:9px center!important;background-size:14px 14px!important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='19' y1='12' x2='5' y2='12'/><polyline points='12 19 5 12 12 5'/></svg>")}
/* --- Public About / Contact pages --- */
.pub-wrap{max-width:1180px;margin:0 auto}
.contact-hero{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:16px 20px}
.contact-hero .ch-logo{height:50px;background:#fff;border-radius:8px;padding:6px 10px}
.contact-hero .ch-org{font-size:20px;font-weight:700;color:var(--text)}
.contact-hero address{margin:4px 0 0;font-style:normal;color:var(--muted);font-size:13.5px;line-height:1.7}
.contact-hero address a{color:var(--brand);font-weight:600;text-decoration:none}
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:16px}
/* pin to 3 across once there's room, so the roster reads in the rows DRS laid out */
@media (min-width:900px){.people-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.person{display:flex;gap:13px;align-items:flex-start;padding:15px 16px}
.person .avatar{flex:0 0 46px;width:46px;height:46px;border-radius:50%;overflow:hidden;
    background-color:var(--accent,var(--brand));box-shadow:0 2px 6px color-mix(in srgb,var(--accent,var(--brand)) 45%,transparent);
    background-repeat:no-repeat;background-position:center 7px;background-size:34px 34px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><circle cx='12' cy='8.5' r='3.8'/><path d='M12 13.5c-4.2 0-7 2.4-7 5.4V22h14v-3.1c0-3-2.8-5.4-7-5.4z'/></svg>")}
.person .avatar img{width:100%;height:100%;object-fit:cover;display:block}  /* drop a photo in later */
.person .p-body{min-width:0}
.person .pname{font-weight:700;font-size:15px;color:var(--text);line-height:1.2}
.person .ptitle{color:var(--muted);font-size:12px;margin:2px 0 8px;text-transform:uppercase;letter-spacing:.03em}
.person .p-row{font-size:13px;margin-top:3px;color:var(--muted)}
.person .p-row a{color:var(--brand);text-decoration:none;font-weight:500;word-break:break-word}
.person.a1{--accent:var(--brand)} .person.a2{--accent:var(--secondary)} .person.a3{--accent:var(--success)}
.person.a4{--accent:var(--warn)} .person.a5{--accent:#6d5bd0} .person.a6{--accent:#0e8a8a}
.person.a7{--accent:#b4497a} .person.a8{--accent:#5a6b7d}

/* About page */
.about-card{margin:0}
.about-hero{text-align:center;padding:24px 20px 4px}
.about-hero .ah-logo{height:58px;background:#fff;border-radius:8px;padding:8px 12px}
.about-hero h2{margin:14px 0 2px;font-size:23px;font-weight:700;color:var(--text)}
.about-hero .ah-since{color:var(--secondary);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.about-body{padding:8px 26px 24px;font-size:15px;line-height:1.75;color:var(--text)}
.about-body p{margin:0 0 14px}

/* Account / settings pages: a grid of setting cards */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;align-items:stretch}
.settings-grid > .ui-card{display:flex;flex-direction:column}
.settings-grid > .ui-card .set-body{flex:1}
.set-body{padding:14px 16px}
.set-body .form-control{display:block;width:100%;box-sizing:border-box;height:36px;padding:6px 10px;
    background:var(--field)!important;color:var(--text)!important;border:1px solid var(--field-border)!important;border-radius:6px!important;margin:0 0 9px!important}
.set-body .btn{margin:2px 6px 0 0}
.set-body img[id]{max-width:228px;border-radius:8px;background:#fff;padding:6px;margin-bottom:10px;display:block}
.set-body .set-note{display:block;margin-top:9px;font-weight:600;font-size:12.5px}
.set-body .checkbox,.set-body label{font-size:13.5px}

/* CoordinatorOnboarding compact header: brand bar + tips strip + horizontal
   progress stepper (replaces the tall logo + details + progress stack).
   Fully responsive — bar wraps, steps go full-width on phones. */
.onb-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);
    border-radius:11px;box-shadow:var(--shadow);padding:12px 16px;margin:2px 0 10px}
.onb-bar .onb-logo{flex:0 0 auto;height:42px;background:#fff;border:1px solid var(--border);border-radius:6px;padding:4px 8px;display:flex;align-items:center}
.onb-bar .onb-logo img{height:32px;width:auto;display:block}
.onb-bar .onb-id{flex:1 1 220px;min-width:0}
.onb-bar .onb-id .t{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.onb-bar .onb-id .n{font-size:18px;font-weight:700;color:var(--text);line-height:1.2}
.onb-bar .onb-id .n .e{font-weight:400;font-size:13px;color:var(--muted)}

.onb-tip{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;background:var(--brand-tint);border:1px solid var(--border);
    border-left:3px solid var(--brand);border-radius:8px;padding:8px 13px;margin-bottom:12px;font-size:11.5px;color:var(--text)}
.onb-tip .lead{flex:1 1 340px}
.onb-tip .lead strong{color:var(--brand)}
.onb-tip .onb-legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.onb-tip .onb-legend b{color:var(--text);font-weight:600}

/* turn the existing vertical .onboard-progress into a horizontal stepper */
.onb-steps{display:flex!important;gap:8px;flex-wrap:wrap;background:transparent!important;border:none!important;
    box-shadow:none!important;padding:0!important;margin:0 0 14px!important}
.onb-steps .progress-item{flex:1 1 210px;display:flex!important;align-items:center;gap:10px;margin:0!important;
    padding:10px 13px!important;border:1px solid var(--border)!important;border-radius:9px!important;background:var(--surface)!important;box-shadow:var(--shadow)!important}
.onb-steps .progress-item .stage-icon{flex:0 0 auto;margin:0!important}
.onb-steps .stage-body{display:flex;flex-direction:column;min-width:0}
.onb-steps .stage-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.2}
.onb-steps .stage-tip{font-size:11px;color:var(--muted);line-height:1.3}
.onb-steps .stage-sub{font-size:11.5px;font-weight:600;line-height:1.35}
@media (max-width:680px){.onb-steps .progress-item{flex:1 1 100%}}

/* Dashboard fused header: big logo joined to a 2-row right side (Nav over KPIs)
   in one card. Flatten the dashboard's outer box so this + the grids float. */
.home-section.stats-wrapper.jumbotron{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;margin:0!important}
.fuse{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;margin:14px 0}
.fuse .fuse-logo{flex:0 0 235px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px;border-right:1px solid var(--border)}
.fuse .fuse-logo img{max-width:100%;max-height:104px}
.fuse .fuse-right{flex:1;display:flex;flex-direction:column;min-width:0}
.fuse-nav{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--border)}
.fuse-nav>a,.fuse-nav>span{display:flex;align-items:center;gap:11px;padding:12px 16px;border-left:1px solid var(--border);text-decoration:none;color:var(--text);transition:background .15s}
.fuse-nav>*:first-child{border-left:none}
.fuse-nav>a:hover{background:var(--brand-tint);text-decoration:none;color:var(--text)}
.fuse-nav .ico{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto;background:color-mix(in srgb,var(--accent,var(--brand)) 14%,var(--surface))}
.fuse-nav .ttl{font-weight:600;font-size:13.5px}
.fuse-nav .sub{font-size:11.5px;color:var(--muted)}
.fuse-nav .n1{--accent:var(--brand)} .fuse-nav .n2{--accent:var(--secondary)} .fuse-nav .n3{--accent:#9aa3b2}
.fuse-nav .disabled{opacity:.6;pointer-events:none}
.fuse-kpi{display:grid;grid-template-columns:repeat(5,1fr)}
.fuse-kpi .k{position:relative;padding:11px 16px;border-left:1px solid var(--border);display:flex;flex-direction:column;justify-content:center}
.fuse-kpi .k:first-child{border-left:none}
.fuse-kpi .k::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--brand))}
.fuse-kpi .num{font-size:23px;font-weight:700;line-height:1;color:var(--accent,var(--brand))}
.fuse-kpi .lab{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.fuse-kpi .s1{--accent:var(--brand)} .fuse-kpi .s2{--accent:var(--secondary)} .fuse-kpi .s3{--accent:var(--success)} .fuse-kpi .s4{--accent:var(--warn)} .fuse-kpi .s5{--accent:#5b6cc4}
@media (max-width:760px){
    .fuse{flex-direction:column}
    .fuse .fuse-logo{flex-basis:auto;border-right:none;border-bottom:1px solid var(--border);padding:14px}
    .fuse .fuse-logo img{max-height:60px}
    .fuse-nav{grid-template-columns:1fr}
    .fuse-nav>*{border-left:none;border-top:1px solid var(--border)}
    .fuse-nav>*:first-child{border-top:none}
    .fuse-kpi{grid-template-columns:1fr 1fr}
    .fuse-kpi .k:nth-child(2){border-left:1px solid var(--border)}
}

/* Action-button icons selected by the button's value text (zero markup):
   Search / Clear / Accept / Reject / Delete — plus .btn-ext for "open in new
   window". White SVGs from the same family; buttons are brand/cancel colored. */
.btn[value="Search"],.btn[value="Clear"],.btn[value="Accept"],.btn[value="Reject"],.btn[value="Delete"],
.btn[value="Cancel"],.btn[value="Close"],.btn[value="Re-send Invite"],.btn[value="OK"],.btn-ext{
    padding-left:29px!important;background-repeat:no-repeat!important;background-position:9px center!important;background-size:14px 14px!important}
.btn[value="Cancel"],.btn[value="Close"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>")!important}
.btn[value="Re-send Invite"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><polyline points='3 7 12 13 21 7'/></svg>")!important}
.btn[value="Search"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>")!important}
.btn[value="Clear"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>")!important}
.btn[value="Accept"],.btn[value="OK"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")!important}
.btn[value="Reject"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='15' y1='9' x2='9' y2='15'/><line x1='9' y1='9' x2='15' y2='15'/></svg>")!important}
.btn[value="Delete"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><line x1='10' y1='11' x2='10' y2='17'/><line x1='14' y1='11' x2='14' y2='17'/><path d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/></svg>")!important}
.btn-ext{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>")!important}

/* Logout button: exit-door (log-out) icon */
.btn-primary-logout{padding-left:30px!important;background-repeat:no-repeat!important;background-position:9px center!important;background-size:15px 15px!important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>")!important}

/* Responsive: collapse grids on narrow screens */
@media (max-width:900px){
    .kpis{grid-template-columns:repeat(2,1fr)}
    .panel-grid{grid-template-columns:1fr}
    .quick{grid-template-columns:1fr}
}
@media (max-width:520px){
    .kpis{grid-template-columns:1fr}
    .page-head{align-items:flex-start}
}

/* Dashboard grid panels: turn the existing .grid-section-wrapper (h4 + scroll div)
   into a card with an accent-bar section header. Markup unchanged. */
.grid-section-wrapper h4{margin:0;padding:8px 13px;font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--border)}
.grid-section-wrapper h4::before{content:"";width:3px;height:15px;border-radius:2px;background:var(--brand)}
.grid-section-wrapper > div[id]{border:none!important;box-shadow:none;background:transparent}
.col-md-6.grid-section-wrapper{padding-left:0;padding-right:0}

/* Smash a section title bar (.lockHead) onto the grid box directly beneath it,
   so header + grid read as one card (like the dashboard). Zero markup. */
.button-blue.lockHead:has(+ br + .justShadow),
.button-blue.lockHead:has(+ .justShadow){border-radius:7px 7px 0 0!important;margin-bottom:0!important}
.button-blue.lockHead:has(+ br + .justShadow) + br{display:none}
.button-blue.lockHead:has(+ br + .justShadow) + br + .justShadow,
.button-blue.lockHead:has(+ .justShadow) + .justShadow{
    margin-top:0!important;border:1px solid var(--border)!important;border-top:none!important;
    border-left:3px solid var(--brand)!important;border-radius:0 0 8px 8px!important}

/* --- Tabs (AjaxControlToolkit ajax__custom-theme): brand-styled, both modes --- */
/* line-height sets the height of each wrapped row of tabs; it must exceed the
   tab's own height (padding+text+border ~38px) or wrapped rows overlap. */
.ajax__tab_header{border-bottom:1px solid var(--border);padding-bottom:0;line-height:2.6}
.ajax__tab_outer,.ajax__tab_inner,.ajax__tab_tab{display:inline-block!important;vertical-align:top;float:none!important;line-height:1.15}
/* Kill ACT's default tab edge/separator sprite images (the whiteish double lines
   between tabs) so only our own clean tab borders show. */
.ajax__tab_outer,.ajax__tab_inner{background-image:none!important;background-color:transparent!important;padding:0!important;margin:0!important}
.ajax__tab_tab{background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-bottom:none!important;padding:4px 14px!important;margin:0 3px 5px 0!important;border-radius:7px 7px 0 0;font-weight:600;line-height:1.15;font-size:13px}
.ajax__tab_outer .ajax__tab_tab:hover{background:var(--brand-tint)!important;color:var(--text)!important;transform:none}
.ajax__tab_active .ajax__tab_inner .ajax__tab_tab,.ajax__tab_active .ajax__tab_tab{background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important;font-weight:700}
.ajax__tab_body{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-top:none!important;padding:12px!important;border-radius:0 0 9px 9px}

/* --- Section title bar (.button-blue.lockHead): match the clean .card-head look
   (brand left-accent + bold title), replacing the old 1990s blue gradient bar.
   Light mode gets a darker tinted band for presence; dark mode stays minimal. --- */
.button-blue.lockHead,
body.dark-mode .button-blue.lockHead{
    background:color-mix(in srgb,var(--brand) 12%,var(--surface))!important;background-image:none!important;background-size:auto!important;
    color:var(--brand)!important;border:none!important;border-left:3px solid var(--brand)!important;border-radius:7px!important;
    box-shadow:none!important;animation:none!important;transform:none!important;padding:8px 14px!important;min-height:0!important;
    display:block!important;text-align:left!important}
body.dark-mode .button-blue.lockHead{
    background:color-mix(in srgb,var(--brand) 16%,var(--surface))!important;color:var(--text)!important}
.button-blue.lockHead h1,.button-blue.lockHead h2,.button-blue.lockHead h3,
.button-blue.lockHead h4,.button-blue.lockHead h5,.button-blue.lockHead h6{
    margin:0!important;color:inherit!important;font-weight:700!important;font-size:14px!important;text-shadow:none!important;letter-spacing:.01em;text-align:left!important}
.button-blue.lockHead:hover{transform:none!important;box-shadow:none!important}

/* Search/list: grid scroll container sits inside the Results card */
.ui-card #coords,.ui-card #oporgs{border:none!important;border-radius:0 0 9px 9px}

/* Vertical-fill scroll containers (sized by vfill.js). Keep the grid's column
   headers pinned to the top of the box while the rows scroll underneath. */
.vfill{overflow:auto}
.vfill table.gridview th{position:sticky;top:0;z-index:3}

/* --- Themed scrollbars for grid scroll-boxes (token-driven → adapts to both
   themes; mainly to kill the stark default scrollbar in dark mode). --- */
/* .tscroll = side-effect-free hook: themes the scrollbar only (no shadow/height
   changes), for scroll boxes that aren't .vfill/.justShadow. */
.vfill, .justShadow, .tscroll, .body-content div:has(> table.gridview){
    scrollbar-width: thin;
    scrollbar-color: var(--muted) transparent;   /* Firefox: thumb / track */
}
.vfill::-webkit-scrollbar,
.justShadow::-webkit-scrollbar,
.tscroll::-webkit-scrollbar,
.body-content div:has(> table.gridview)::-webkit-scrollbar{ width:11px; height:11px; }
.vfill::-webkit-scrollbar-track,
.justShadow::-webkit-scrollbar-track,
.tscroll::-webkit-scrollbar-track,
.body-content div:has(> table.gridview)::-webkit-scrollbar-track{ background:transparent; }
.vfill::-webkit-scrollbar-thumb,
.justShadow::-webkit-scrollbar-thumb,
.tscroll::-webkit-scrollbar-thumb,
.body-content div:has(> table.gridview)::-webkit-scrollbar-thumb{
    background: var(--muted); border-radius:8px;
    border:2px solid transparent; background-clip:padding-box;   /* inset look */
}
.vfill::-webkit-scrollbar-thumb:hover,
.justShadow::-webkit-scrollbar-thumb:hover,
.tscroll::-webkit-scrollbar-thumb:hover,
.body-content div:has(> table.gridview)::-webkit-scrollbar-thumb:hover{
    background: var(--brand); background-clip:padding-box; border:2px solid transparent;
}
.vfill::-webkit-scrollbar-corner,
.justShadow::-webkit-scrollbar-corner,
.tscroll::-webkit-scrollbar-corner,
.body-content div:has(> table.gridview)::-webkit-scrollbar-corner{ background:transparent; }
/* GridView empty-data row (ShowHeaderWhenEmpty): tidy muted "no records" line */
table.gridview tr.grid-empty td{text-align:center!important;color:var(--muted)!important;font-style:italic;padding:16px 12px!important}
/* base style for standalone .grid-empty divs (panels/cards, not inside a gridview row) */
.grid-empty{text-align:center;color:var(--muted);font-style:italic;padding:16px 12px}

/* ============================================================
   MODAL OVERHAUL — clean themed cards for every ACT popup.
   Site-wide structure is uniform: .HellowWorldPopup >
   .PopupHeader + .PopupBody + .Controls. Token-driven, both
   modes. Appended last so it authoritatively governs appearance
   (wins source-order ties against the older modal rules above).
   Header/footer go full-bleed via negative margins so modals
   with loose content (stray checkboxes/<br>) stay clean too.
   ============================================================ */
/* Dim backdrop */
.ModalPopupBG,body.dark-mode .ModalPopupBG{background:rgba(8,12,20,.55)!important;opacity:1!important;filter:none!important}

/* Card shell */
.HellowWorldPopup,.HellowWorldPopupUpload,.HellowWorldPopupInfo,
body.dark-mode .HellowWorldPopup,body.dark-mode .HellowWorldPopupUpload,body.dark-mode .HellowWorldPopupInfo{
    background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important;
    border-radius:11px!important;box-shadow:0 18px 50px rgba(0,0,0,.40)!important;overflow:hidden!important}
.HellowWorldPopup{padding:0 16px!important;min-width:360px!important;max-width:94vw!important}
/* Mobile / short screens: let a tall modal scroll inside itself instead of
   running off-screen. */
@media (max-width:600px),(max-height:680px){
    .HellowWorldPopup,.HellowWorldPopupUpload,.HellowWorldPopupInfo{max-height:92vh!important;overflow-y:auto!important;overflow-x:hidden!important}
}
.HellowWorldPopupUpload,.HellowWorldPopupInfo{padding:16px!important}
/* The "Please Wait" overlay reuses .HellowWorldPopupUpload but is just a small
   centered spinner box, not a form card. Strip the card chrome so the inner
   .ModalPopupWaitDiv is the visible box and stays centered. */
#ModalPopupWait{padding:0!important;background:transparent!important;border:none!important;box-shadow:none!important;
    overflow:visible!important;min-width:0!important;min-height:0!important}
#ModalPopupWait table.center{width:auto!important;margin:0!important}
#ModalPopupWait .ModalPopupWaitDiv{background-color:var(--surface)!important;color:var(--text)!important;
    border:1px solid var(--border)!important;border-radius:11px!important;box-shadow:0 18px 50px rgba(0,0,0,.4)!important;text-align:center}

/* Techy "Please Wait" spinner — tri-color orbit (brand navy / teal / green dots)
   that replaces the old mismatched blue pleasewait.gif. Parent spins; the three
   dots are pinned at 120deg intervals around the ring. Tokens keep it on-brand in
   both themes. Markup: <span class="tech-spin"><i></i><i></i><i></i></span> */
.tech-spin{display:inline-block;width:60px;height:60px;position:relative;margin:4px auto 2px;
    animation:tech-orbit 1.1s linear infinite}
.tech-spin i{position:absolute;width:13px;height:13px;border-radius:50%;left:50%;top:50%;margin:-6.5px 0 0 -6.5px}
.tech-spin i:nth-child(1){background:var(--brand);transform:translateY(-22px)}
.tech-spin i:nth-child(2){background:var(--secondary);transform:rotate(120deg) translateY(-22px)}
.tech-spin i:nth-child(3){background:var(--success);transform:rotate(240deg) translateY(-22px)}
@keyframes tech-orbit{to{transform:rotate(360deg)}}

/* Full-bleed brand header (replaces the old 👉 blue look) */
.HellowWorldPopup .PopupHeader,body.dark-mode .HellowWorldPopup .PopupHeader{
    margin:0 -16px 13px!important;padding:10px 16px!important;background:var(--brand)!important;color:#fff!important;
    text-align:left!important;border:none!important;display:flex!important;align-items:center;gap:10px}
/* Polished standout icon: a crisp white glyph in a translucent chip. One rule
   gives every modal a consistent header mark (white SVG reads clearly on the
   brand bar, unlike a dark emoji glyph which CSS can't recolor). */
.HellowWorldPopup .PopupHeader::before{
    content:"";flex:0 0 auto;width:26px;height:26px;border-radius:7px;
    background-color:rgba(255,255,255,.18);background-repeat:no-repeat;background-position:center;background-size:16px 16px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/><line x1='10' y1='9' x2='8' y2='9'/></svg>")}
/* Per-type modal header icons, selected by the PopupHeader's id (CSS-only, no
   markup): edit=pencil, add=plus, delete=trash, print=printer, accept=check,
   reject/void=x. Everything else keeps the neutral document mark above. */
.HellowWorldPopup .PopupHeader[id*="Edit"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/></svg>")}
.HellowWorldPopup .PopupHeader[id*="Add"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='16'/><line x1='8' y1='12' x2='16' y2='12'/></svg>")}
.HellowWorldPopup .PopupHeader[id*="Delete"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><line x1='10' y1='11' x2='10' y2='17'/><line x1='14' y1='11' x2='14' y2='17'/><path d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/></svg>")}
.HellowWorldPopup .PopupHeader[id*="Print"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 6 2 18 2 18 9'/><path d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/><rect x='6' y='14' width='12' height='8'/></svg>")}
.HellowWorldPopup .PopupHeader[id*="Accept"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>")}
.HellowWorldPopup .PopupHeader[id*="Reject"]::before,.HellowWorldPopup .PopupHeader[id*="Void"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='15' y1='9' x2='9' y2='15'/><line x1='9' y1='9' x2='15' y2='15'/></svg>")}
.HellowWorldPopup .PopupHeader h1,.HellowWorldPopup .PopupHeader h2,.HellowWorldPopup .PopupHeader h3,
.HellowWorldPopup .PopupHeader h4,.HellowWorldPopup .PopupHeader h5,.HellowWorldPopup .PopupHeader h6{
    margin:0!important;color:#fff!important;font-size:15px!important;font-weight:600!important;text-shadow:none!important}

/* Body: kill stray inline borders; keep inline heights/scroll */
.HellowWorldPopup .PopupBody{border:none!important;background:transparent!important}

/* Clean form layout (form tables only — never GridViews) */
.HellowWorldPopup table:not(.gridview),.HellowWorldPopupUpload table:not(.gridview),.HellowWorldPopupInfo table:not(.gridview){
    width:100%!important;border:none!important;margin:0!important;background:transparent!important;border-collapse:collapse!important}
.HellowWorldPopup table:not(.gridview)>tbody>tr>td,.HellowWorldPopup table:not(.gridview)>tbody>tr>th,
.HellowWorldPopupUpload table:not(.gridview)>tbody>tr>td,.HellowWorldPopupInfo table:not(.gridview)>tbody>tr>td{
    border:none!important;padding:5px 8px!important;background:transparent!important;vertical-align:middle!important}
.HellowWorldPopup table:not(.gridview)>tbody>tr>td:first-child{color:var(--muted)!important;font-weight:600!important;white-space:nowrap;width:1%}

/* Inputs/selects/textarea: full-width, box-sizing so they never overlap a cell border */
.HellowWorldPopup input[type="text"],.HellowWorldPopup input[type="date"],.HellowWorldPopup input[type="email"],
.HellowWorldPopup input[type="password"],.HellowWorldPopup input[type="number"],.HellowWorldPopup input[type="search"],
.HellowWorldPopup input[type="tel"],.HellowWorldPopup textarea,.HellowWorldPopup select,
.HellowWorldPopupUpload input[type="text"],.HellowWorldPopupUpload textarea,.HellowWorldPopupUpload select,
.HellowWorldPopupInfo input[type="text"],.HellowWorldPopupInfo textarea,.HellowWorldPopupInfo select{
    width:100%!important;box-sizing:border-box!important;height:34px;padding:6px 10px!important;
    background:var(--field)!important;color:var(--text)!important;border:1px solid var(--field-border)!important;
    border-radius:6px!important;font:500 13px/1.2 var(--ui-font)!important;margin:0!important;min-width:0}
.HellowWorldPopup textarea,.HellowWorldPopupUpload textarea,.HellowWorldPopupInfo textarea{height:auto!important;min-height:64px;line-height:1.4!important}
.HellowWorldPopup input:focus,.HellowWorldPopup textarea:focus,.HellowWorldPopup select:focus,
.HellowWorldPopupUpload input:focus,.HellowWorldPopupInfo input:focus{
    border-color:var(--brand)!important;box-shadow:0 0 0 3px var(--brand-tint)!important;outline:none!important}

/* Beat the old .btn/.btn-primary look that these selects carry (esp. the
   high-specificity body.dark-mode .HellowWorldPopup .btn-primary rule). */
.HellowWorldPopup select.btn,.HellowWorldPopup select.btn-primary,.HellowWorldPopup select.dropdown-toggle,
body.dark-mode .HellowWorldPopup select,body.dark-mode .HellowWorldPopup select.btn-primary,
body.dark-mode .HellowWorldPopup input[type="text"],body.dark-mode .HellowWorldPopup input[type="date"],
body.dark-mode .HellowWorldPopup textarea{
    background-color:var(--field)!important;color:var(--text)!important;border:1px solid var(--field-border)!important;
    font:500 13px/1.2 var(--ui-font)!important}

/* Selects: strip the old btn/dropdown look, render as a real field with a chevron */
.HellowWorldPopup select,.HellowWorldPopupUpload select,.HellowWorldPopupInfo select{
    -webkit-appearance:none!important;appearance:none!important;cursor:pointer;padding-right:30px!important;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%)!important;
    background-position:calc(100% - 16px) 14px,calc(100% - 11px) 14px!important;background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important}

/* Footer: full-bleed, right-aligned actions */
.HellowWorldPopup .Controls,body.dark-mode .HellowWorldPopup .Controls{
    margin:13px -16px 0!important;padding:11px 16px!important;border-top:1px solid var(--border)!important;
    background:var(--surface-2)!important;display:flex!important;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}

/* In-modal GridViews keep the standard themed look (already styled via table.gridview) */
.HellowWorldPopup table.gridview{margin:0!important}

/* ============================================================
   SUBMITTED DOCUMENTS tab (CoordinatorDetails): make the three
   left panels share the column's full height (matched to the
   viewer on the right) instead of three fixed 200px boxes that
   left big dead gaps. Each box still scrolls on overflow with
   its .lockHead grid header pinned, and empty grids show the
   header + a centered "No records" line (ShowHeaderWhenEmpty).
   md+ only — stacks normally on mobile. ============================================================ */
@media (min-width:768px){
    .submitted-docs-row{display:flex;align-items:stretch}
    .submitted-docs-row > [class*="col-"]{float:none;flex:0 0 auto}
    /* Close the wide inter-column gutter: trim the two facing paddings so the
       grids and the viewer nearly meet (keeps the 1/3 ÷ 2/3 column split). */
    .submitted-docs-left{padding-right:6px}
    .submitted-docs-row > .col-md-8{padding-left:6px}
}
.submitted-docs-left{display:flex;flex-direction:column;min-height:0}
.sd-panel{display:flex;flex-direction:column;flex:1 1 0;min-height:0}
.sd-panel + .sd-panel{margin-top:10px}
.sd-box{flex:1 1 0;min-height:0;overflow:auto}

/* ============================ Scheduling (Phase 1a) ============================ */
/* Shared scope: single source of truth for card padding + field labels across all
   scheduling pages. (Base .ui-card .card-body is padding:0 by theme design, so each
   page would otherwise re-add its own -- this centralizes it.) */
/* Scheduling pages run edge-to-edge. bootstrap.css caps .container at 85% from
   1200px up, which costs the Gantt (and the coverage calendar, and the tracker
   rails) a few hundred px of working width. Keyed off body so the navbar's own
   .container widens too -- overriding only .body-content would leave the header
   inset while the content went full-bleed. Every scheduling page root carries
   .sched-scope, so this one rule covers board, tracker, coverage, availability
   and admin, and cannot leak to a non-scheduling page. */
body:has(.sched-scope) .container{width:auto;max-width:none}
/* ...up to a ceiling. Rows, cards and forms stretched across an ultrawide become long thin
   lines with a dead middle and the eye loses its place. The Gantt is capped too: its appetite
   for width is not unlimited, only enough that all 31 day columns read comfortably. At 2400px
   that is (2400-300)/31 ~= 68px per day, well clear of the ~45px it gets at 1680 where the
   board already reads fine; beyond that the bars just get fat.
   Capping .container (not just .body-content) keeps the navbar in step -- capping only the
   content would re-create the misaligned-header problem the rule above exists to avoid. */
body:has(.sched-scope) .container{max-width:2400px;margin-left:auto;margin-right:auto}
/* Bootstrap pulls .navbar-right flush to the container's content edge with
   margin-right:-15px. That reads as intentional while the container is inset at
   85%, but full-bleed it jams the Logout button against the viewport edge. Cancel
   it and match .body-content's 16px so the navbar lines up with the content below.
   The brand needs no equivalent fix: it carries -15px too, but its own 15px
   padding absorbs that, so the logo already lands on the 16px gutter. */
body:has(.sched-scope) .navbar .container{padding-left:16px;padding-right:16px}
body:has(.sched-scope) .navbar-nav.navbar-right{margin-right:0}

.sched-scope .card-body{padding:14px 18px}
.sched-scope .fld-label,.sched-scope .fld > label{font-size:11px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:4px}
.sched-admin .ui-card{margin-bottom:16px}
.sched-msg{display:inline-block;margin-top:8px;color:var(--secondary);font-weight:600;font-size:12.5px}
/* success/error variants so a validation failure doesn't read the same as a save
   confirmation (color + wording, not wording alone) */
.sched-msg.is-ok{color:var(--success)}
.sched-msg.is-error{color:var(--danger)}
/* standing environment notice (e.g. email suppression is on) rather than a transient
   save message -- a block banner so it reads as a state, not a result. Uses the
   theme-aware --warn tokens so it holds contrast in both light and dark. */
.sched-msg.is-warn{display:block;margin-top:8px;padding:7px 10px;border-radius:6px;
  color:var(--warn);background:var(--warn-tint);border:1px solid var(--warn);font-weight:600}
/* standardized assignment label, shared by Gantt bars and month cells (DRS #28):
   bold OPO code, then "First L.", then a moon on night shifts. Inherits colour from
   the bar/entry so it stays legible on both light and dark OPO colours. */
/* Service-line dot (DRS #33). Small and fixed-size so it never shrinks or clips, with a
   faint outline so a dark line colour still reads on a dark bar and a pale one on a light
   one. Colour is never the only cue: gap bars show the line name beside it, and every dot
   carries a title for the surfaces that do not. */
.sl-dot{flex:0 0 auto;display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:1px;vertical-align:middle;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.sl-dot-none{background:var(--muted);opacity:.5}
.sl-swatch{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:middle;
  border:1px solid var(--border);margin-right:5px}
.ent-code{font-weight:800;letter-spacing:.2px}
.ent-who{font-weight:600}
/* Night indicator: a filled dark disc so the crescent reads at 10px against any OPO
   colour. The bare glyph was a thin outline that vanished into tinted backgrounds and
   was the first thing to be clipped. Fixed size, never shrinks. */
.ent-nite{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;background:#10131c;color:#fff;
  font-size:9px;line-height:1;font-weight:400;text-indent:0}
/* an empty message span shouldn't reserve vertical space (e.g. between a toolbar and a grid) */
.sched-msg:empty{display:none}
.sched-lnk{display:inline-block;margin-right:10px;color:var(--brand);font-weight:600;text-decoration:none;cursor:pointer}
.sched-lnk-danger{color:var(--danger)}
.sched-lnk:focus-visible,.sched-lnk-danger:focus-visible{outline:2px solid var(--brand);outline-offset:2px;text-decoration:underline}
.sched-lnk:hover{text-decoration:underline}
.sched-cbl label{margin-right:16px;font-weight:500}
.sched-cbl input[type=checkbox]{margin-right:4px}

/* type-ahead combo (coordinator picker) */
.combo{position:relative;max-width:320px}
/* Bootstrap floats .form-control (float:left, width:75%); a floated child gives
   .combo zero height, which makes the dropdown's top:100% land ON the input.
   Un-float it so .combo has real height and the dropdown sits below the field. */
.combo .form-control{float:none;width:100%;box-sizing:border-box}
.combo-list{position:absolute;z-index:20;left:0;right:0;top:100%;margin-top:6px;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 28px rgba(8,12,20,.28);
  max-height:210px;overflow:auto;display:none}
.combo-list.open{display:block}
.combo-list .opt{padding:7px 12px;cursor:pointer;font-size:13px;color:var(--text);display:flex;align-items:baseline;gap:8px}
.combo-list .opt:hover,.combo-list .opt.active{background:var(--brand-tint);color:var(--brand)}
.combo-list .opt .opt-name{font-weight:500}
.combo-list .opt .opt-email{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-list .opt:hover .opt-email,.combo-list .opt.active .opt-email{color:var(--brand)}
.combo-list .opt-more{padding:6px 12px;font-size:11.5px;color:var(--muted);font-style:italic;border-top:1px solid var(--border);cursor:default}
/* clear (x) button inside the type-ahead */
.combo .form-control{padding-right:30px}
.combo-clear{position:absolute;top:50%;right:8px;transform:translateY(-50%);border:0;background:transparent;
  color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.combo-clear:hover{color:var(--danger)}
.combo-clear[hidden]{display:none}
.assign-roster{margin-top:4px}
/* roster toolbar: New button left, type-to-filter search upper-right of the grid */
.roster-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.roster-search{display:flex;align-items:center;gap:8px;margin-left:auto}
.roster-search > label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0}
.roster-filter{float:none;width:240px;max-width:60vw;box-sizing:border-box}
/* Cycle Tracker "working period" selector -- an input-group style control (a
   brand "addon" label fused to the dropdown in one bordered unit) using the
   app's standard radius, so it matches the form while the brand label still
   makes the active period obvious. Centered in the page-head row; absolute
   centering keeps it in the true middle regardless of the (unequal) title vs.
   actions widths on either side. */
.period-bar{display:inline-flex;align-items:stretch;width:fit-content;max-width:100%;
  border:1px solid var(--brand);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
/* Center the picker in the header via a 3-column grid (title | picker | actions),
   with each item pinned to its own column, so the picker stays truly centered and
   can NEVER overlap the title/actions at any width (the old absolute-centering did). */
.tracker-page .page-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.tracker-page .page-head > div:first-child{grid-column:1;justify-self:start}
.tracker-page .page-head .period-bar{grid-column:2;justify-self:center;margin:0}
.tracker-page .page-head .ph-actions{grid-column:3;justify-self:end}
@media (max-width:760px){
  /* stack cleanly on narrow screens */
  .tracker-page .page-head{grid-template-columns:1fr}
  .tracker-page .page-head > div:first-child,
  .tracker-page .page-head .period-bar,
  .tracker-page .page-head .ph-actions{grid-column:1;justify-self:start}
}
.period-bar-label{display:inline-flex;align-items:center;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--brand);
  padding:0 12px;white-space:nowrap}
.period-bar .period-select{float:none;width:auto;min-width:180px;box-sizing:border-box;
  border:0;border-radius:0;background:var(--surface);color:var(--text);font-weight:600;
  padding:6px 10px}
/* the native option popup inherits the select's colors -- pin them so dark mode
   isn't light-text-on-white ("white on white") when the list is open */
.period-bar .period-select option{background:var(--surface);color:var(--text)}
.period-bar .period-select:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* tracker "outstanding only" toggle (sits left of the search in the toolbar) */
.trk-outstanding{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;margin:0}
.trk-outstanding input[type=checkbox]{margin:0}
/* shared fixed-height scroll box for admin grids (service lines + roster) */
.sched-grid-scroll{max-height:280px;overflow:auto;border-radius:6px}
/* read-only coordinator name shown in the assign modal when editing */
.asg-coordname{font-weight:600;color:var(--text);padding:6px 0}
/* assign modal: allow the type-ahead dropdown to escape the card (which is
   otherwise overflow:hidden); round header/footer corners explicitly since the
   parent no longer clips them */
/* two-class selector so this beats the base .mc-dialog{overflow:hidden} (which
   is declared later in the file) -- otherwise the type-ahead dropdown clips */
.mc-dialog.asg-dialog{overflow:visible}
.asg-dialog .mc-title{border-radius:11px 11px 0 0}
.asg-dialog .mc-actions{border-radius:0 0 11px 11px}
.asg-dialog .combo{max-width:none}

/* Shared themed modal (scheduling confirms + the period create/edit form).
   Matches the app-standard .HellowWorldPopup look: same dim backdrop, card
   radius/shadow, full-bleed brand-navy header bar with a white icon chip, and
   a full-bleed surface-2 footer strip. Token-driven, so both themes inherit. */
.mc-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(8,12,20,.55);
  display:flex;align-items:center;justify-content:center;z-index:1080}
.mc-dialog{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:11px;
  box-shadow:0 18px 50px rgba(0,0,0,.40);overflow:hidden;box-sizing:border-box;
  width:min(440px,94vw);padding:0 16px}
/* short OR narrow screens: let a tall modal scroll inside itself */
@media (max-height:680px),(max-width:600px){.mc-dialog{max-height:92vh;overflow-y:auto;overflow-x:hidden}}

/* Full-bleed brand header bar with white icon chip (mirrors .PopupHeader) */
.mc-title{margin:0 -16px 13px;padding:10px 16px;background:var(--brand);color:#fff;
  font-size:15px;font-weight:600;display:flex;align-items:center;gap:10px}
.mc-title::before{content:"";flex:0 0 auto;width:26px;height:26px;border-radius:7px;
  background-color:rgba(255,255,255,.18);background-repeat:no-repeat;background-position:center;background-size:16px 16px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/><line x1='10' y1='9' x2='8' y2='9'/></svg>")}
.mc-title.mc-ic-confirm::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>")}
.mc-title.mc-ic-add::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='16'/><line x1='8' y1='12' x2='16' y2='12'/></svg>")}
.mc-title.mc-ic-edit::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/></svg>")}

.mc-msg{font-size:13.5px;line-height:1.5;color:var(--text);margin:0 0 4px}

/* Full-bleed footer strip with top border + surface-2 (mirrors .Controls) */
.mc-actions{margin:13px -16px 0;padding:11px 16px;border-top:1px solid var(--border);
  background:var(--surface-2);display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}

/* --- Cycle tracker layout (mock-aligned; reuses existing pills/buttons) --- */
.tracker-cols{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:16px;align-items:stretch;min-height:340px}
/* fill (A): panels stretch to the vfill-set height; each list scrolls internally */
.tracker-cols>.ui-card{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.tracker-cols .card-body{flex:1;display:flex;flex-direction:column;min-height:0}
@media (max-width:900px){
  .tracker-cols{grid-template-columns:1fr;grid-template-rows:none;height:auto!important;overflow:visible!important}
  .tracker-cols>.ui-card{overflow:visible}
}

.phase-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:4px 0 14px}
.phase{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 12px;box-shadow:var(--shadow)}
.phase .ph-when{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.phase .ph-what{font-size:12px;font-weight:600;color:var(--text);margin-top:2px;line-height:1.2}
/* "Coming in ..." pill on steps not yet built (Build draft = 1c, approval/emails = Phase 3).
   White text (matches the other pills); readable now that the upcoming card no longer
   dims the whole pill via opacity. */
.phase .ph-soon{display:inline-block;margin-top:6px;background:#c67c12;color:#fff;font-size:9px;
  font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:1px 7px;border-radius:20px;white-space:nowrap}
.phase.active{background:var(--brand);border-color:var(--brand)}
.phase.active .ph-when{color:rgba(255,255,255,.75)}
.phase.active .ph-what{color:#fff}
.phase.done{border-left:3px solid var(--success)}
/* Mute only the step's text for "upcoming", not the whole card -- a card-wide
   opacity would also dim the "Coming in..." pill (opacity can't be undone on a
   child), making it hard to read. */
.phase.upcoming .ph-when,.phase.upcoming .ph-what{opacity:.5}
@media (max-width:760px){.phase-strip{grid-template-columns:1fr 1fr}}

.trk-progress{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.trk-bar{flex:1;height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border);display:flex}
.trk-bar .seg-sub{height:100%;background:var(--success)}
.trk-bar .seg-draft{height:100%;background:var(--warn)}
.trk-frac{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.trk-stats{display:flex;flex-wrap:wrap;gap:14px;margin:-4px 0 12px}
.trk-stats .ts{font-size:11.5px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.trk-stats .ts::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--muted);display:inline-block}
.trk-stats .ts.is-ok::before{background:var(--success)}
.trk-stats .ts.is-soon::before{background:var(--warn)}
.trk-stats .ts.is-exp::before{background:var(--danger)}

/* prominent standalone lock nudge in the tracker card header (right-aligned) */
.trk-lock-nudge{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap;line-height:1.4}
.trk-lock-nudge .ln-sub{font-weight:500;opacity:.85}
.trk-lock-nudge.is-ready{background:var(--warn-tint);color:var(--warn);border:1px solid var(--warn)}
.trk-lock-nudge.is-upcoming{background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.trk-lock-nudge.is-locked{background:var(--danger-tint);color:var(--danger);border:1px solid var(--danger)}

.trk-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.trk-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 2px;border-bottom:1px solid var(--border)}
.trk-row:last-child{border-bottom:0}
.trk-who{min-width:0}
.trk-name{font-weight:600;font-size:13.5px;color:var(--text)}
.trk-sub{font-size:11.5px;color:var(--muted)}
.trk-email{font-size:11px;color:var(--muted)}
.trk-right{display:flex;align-items:center;gap:10px;white-space:nowrap}
.trk-when{font-size:12px;color:var(--muted)}
.trk-days{font-size:11px;font-weight:700;color:var(--secondary)}
.btn-remind{padding:3px 12px!important;font-size:12px!important}
.trk-open{font-size:12px}
/* Narrow screens: let the row wrap so the status/days/date/Remind/Open cluster
   drops below the name instead of forcing horizontal scroll on phones. */
@media (max-width:560px){
  .trk-row{flex-wrap:wrap;gap:6px 10px}
  .trk-right{white-space:normal;flex-wrap:wrap;justify-content:flex-start;width:100%}
}
.trk-foot{margin-top:12px;text-align:right;flex:none}
.tracker-cols .trk-progress{flex:none}
.tracker-teaser .teaser-content{flex:1}

/* teaser styles kept for 1C: the schedule-board teaser will reuse this treatment
   (the 1b coverage-needs teaser card was replaced by the live panel) */
.tracker-teaser{position:relative;overflow:hidden}
.tracker-teaser .teaser-content{filter:blur(2.5px);opacity:.7;pointer-events:none;user-select:none}
.teaser-badge{background:#c67c12;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:20px;margin-left:auto}
/* scope the overlay to the card body so the header (title + "Coming in 1b" badge) stays crisp */
.tracker-teaser .card-body{position:relative}
.teaser-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;
  /* opaque behind the message (crisp text) fading to clear at the edges, so the
     blurred coverage-needs mock stays visible around it */
  background:radial-gradient(ellipse 92% 82% at 50% 50%,
    color-mix(in srgb,var(--surface) 93%,transparent) 0%,
    color-mix(in srgb,var(--surface) 80%,transparent) 42%,
    color-mix(in srgb,var(--surface) 28%,transparent) 100%)}
.teaser-lock{font-size:26px;margin-bottom:6px}
.teaser-head{font-size:15px;font-weight:700;color:var(--brand);margin-bottom:4px}
.teaser-note{font-size:12.5px;color:var(--muted);max-width:280px;line-height:1.45}

/* --- Scheduling Admin: period cards + action buttons --- */
.period-cards{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.period-card{display:flex;align-items:center;gap:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:12px 16px}
.period-card .pc-main{flex:1;min-width:0}
.period-card .pc-title{font-weight:700;font-size:14.5px;color:var(--text)}
.period-card .pc-meta{font-size:12px;color:var(--muted);margin-top:2px}
.period-card .pc-lockcue{display:inline-block;margin-left:6px;background:#c67c12;color:#fff;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:1px 7px;border-radius:20px;vertical-align:middle}
.period-card .pc-actions{display:flex;gap:6px;flex-wrap:wrap}
.period-toggle{margin:8px 2px 0}
.sbtn{display:inline-block;border:1px solid var(--border);border-radius:6px;padding:4px 12px;font-size:12px;font-weight:600;text-decoration:none;cursor:pointer;background:var(--surface);color:var(--text)}
.sbtn:hover{text-decoration:none}
.sbtn-open{border-color:var(--success);color:var(--success)}
.sbtn-open:hover{background:var(--success);color:#fff}
.sbtn-lock{border-color:var(--warn);color:var(--warn)}
.sbtn-lock:hover{background:#c67c12;color:#fff}
.sbtn-close{border-color:var(--muted);color:var(--muted)}
.sbtn-close:hover{background:var(--muted);color:#fff}

/* --- Preferred-OPO clickable pills (availability) --- */
.opo-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.opo-pills input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}
.opo-pills label{display:inline-block;border:1px solid var(--brand);color:var(--brand);border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:600;cursor:pointer;user-select:none;transition:background .12s,color .12s;margin:0}
.opo-pills input:focus-visible + label{outline:2px solid var(--brand);outline-offset:2px}
.opo-pills label:hover{background:var(--brand-tint)}
.opo-pills input:checked + label{background:var(--brand);color:#fff}
.opo-pills input:checked + label:hover{background:var(--brand)}

/* scheduling selects: size to content so the selected value isn't truncated */
.sched-admin .toolbar .fld select,
.avail-page .toolbar .fld select,
.tracker-page .toolbar .fld select{width:auto;min-width:210px}

/* --- Availability page (sidebar + calendar; responsive) --- */
.avail-page .ui-card{margin-bottom:16px}
.avail-cols{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:stretch}
@media (max-width:900px){.avail-cols{grid-template-columns:1fr;align-items:start}}
.avail-side{display:flex;flex-direction:column;gap:16px}
.avail-cols .ui-card{margin-bottom:0}
/* last sidebar card (notes) grows to fill the height difference vs the calendar */
.avail-side > .ui-card:last-child{flex:1;display:flex;flex-direction:column}
.avail-side > .ui-card:last-child .card-body{flex:1;display:flex;flex-direction:column}
.avail-side > .ui-card:last-child textarea.form-control{flex:1}
.avail-hint{font-size:12px;color:var(--muted);line-height:1.5;margin-top:8px}
.avail-status{margin:10px 0}
.avail-status .badge-status{font-size:13px;padding:5px 16px}
.info-tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--muted);color:#fff;font-size:11px;font-weight:700;font-style:normal;line-height:1;flex:none;cursor:pointer;margin-left:6px}
.info-tip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.info-tip:hover{background:var(--brand)}
.tip-panel{background:var(--brand-tint);color:var(--text);font-size:12.5px;line-height:1.55;padding:10px 16px;border-bottom:1px solid var(--border)}
.avail-prefsummary{margin-top:10px;font-size:12.5px}
.avail-prefsummary .aps-lab{font-weight:600;color:var(--muted);margin-right:4px}
.avail-prefsummary .aps-chip{display:inline-block;background:var(--brand-tint);color:var(--brand);border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:600;margin:2px 3px 0 0}
.avail-side .fld{display:flex;flex-direction:column;gap:4px}
.fld-row{display:flex;gap:12px;margin-bottom:10px}
.fld-row .fld{flex:1;min-width:0}
.avail-side .form-control{width:100%;box-sizing:border-box;float:none}
.avail-side textarea.form-control{display:block;min-height:120px;resize:vertical;padding:8px 10px;margin-bottom:2px}
.avail-side .opo-cbl label{display:block;margin:3px 0;font-weight:500}
.avail-periodinfo{display:block;margin-top:10px}
.avail-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-top:1px solid var(--border);flex-wrap:wrap}
/* pin the buttons to the right ALWAYS -- .sched-msg:empty is display:none, so without
   this the lone button group sat left and jumped right when a save message appeared */
.avail-foot-btns{display:flex;gap:10px;margin-left:auto}
.avail-foot .sched-msg{flex:1 1 auto;min-width:0;margin-top:0}
/* neutral/secondary button (e.g. "Save draft") -- distinct from primary (blue) and cancel (red) */
.btn-neutral,body.dark-mode .btn-neutral{background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--border)!important;box-shadow:none!important}
.btn-neutral:hover,body.dark-mode .btn-neutral:hover{background:var(--brand-tint)!important;color:var(--brand)!important;border-color:var(--brand)!important}
/* "Unlock Login" only when an account is ACTUALLY locked: red + gentle pulse to draw the eye */
.btn-locked{background:var(--danger)!important;color:#fff!important;border:1px solid var(--danger)!important;animation:pulsate 2s ease-out infinite}
.btn-locked:hover{background:var(--danger-hover)!important;border-color:var(--danger-hover)!important}

/* day-type palette (shared by brush buttons + painted cells) */
.dt-AVAIL{background:var(--avail)!important;color:var(--on-avail)!important}
.dt-TRAVELIN{background:var(--secondary)!important;color:#fff!important}
.dt-TRAVELOUT{background:var(--travelout)!important;color:#fff!important}
.dt-NA{background:var(--danger)!important;color:#fff!important}

.brush-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.brush{border:0;border-radius:6px;padding:7px 14px;font-weight:600;font-size:12.5px;cursor:pointer;color:#fff;opacity:.85}
.brush:focus-visible{outline:2px solid var(--brand);outline-offset:2px;opacity:1}
.brush:disabled{cursor:not-allowed;opacity:.5}
.avail-cal.cal-readonly .cal-day{cursor:not-allowed}
.brush.sel{opacity:1;box-shadow:0 0 0 3px var(--brand-tint),0 0 0 4px var(--brand)}
.brush-erase{background:var(--muted)}

.avail-cal{margin:4px 0}
/* Prominent "which month am I working on" banner above the calendar grid.
   Theme-safe brand tint via color-mix so it reads in light and dark. */
.cal-month{text-align:center;margin:0 0 10px;padding:7px 12px;border-radius:8px;
  font-size:17px;font-weight:700;letter-spacing:.03em;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 12%,var(--surface));border:1px solid var(--border)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{text-align:center;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;padding:4px 0}
.cal-blank{min-height:56px}
.cal-day{min-height:56px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);
  cursor:pointer;position:relative;user-select:none;transition:background .06s}
.cal-day:hover{border-color:var(--brand)}
.cal-day:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.cal-day .dn{position:absolute;top:3px;left:6px;font-size:12px;font-weight:600}
/* letter cue on painted cells so day type isn't conveyed by color alone (also a legend) */
.cal-day[data-dt]::after{position:absolute;bottom:3px;right:5px;font-size:9px;font-weight:800;line-height:1;color:#fff;letter-spacing:.3px}
.cal-day[data-dt="AVAIL"]::after{content:'Av';color:var(--on-avail)}  /* dark cue text on yellow */
.cal-day[data-dt="TRAVELIN"]::after{content:'In'}
.cal-day[data-dt="TRAVELOUT"]::after{content:'Out'}
.cal-day[data-dt="NA"]::after{content:'NA'}   /* abbreviation of "Not Avail" (DRS #32); 'Av'/'In'/'Out' set the terse house style */
/* availability windows flow onto the calendar as a highlighted block (DRS 7/22):
   brand-tinted cell + a bottom bar cue that stays visible under painted day marks
   (dt-* backgrounds are !important, so they override the tint but not the bar) */
.cal-day.cal-win{background:color-mix(in srgb,var(--brand) 22%,var(--surface-2));
  border-color:color-mix(in srgb,var(--brand) 65%,var(--border))}
.cal-day.cal-win .dn{color:var(--brand)}
.cal-day.cal-win::before{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--brand);border-radius:0 0 5px 5px}
/* letter cue for window days, matching the painted-day Av/In/Out tags; only on
   unpainted cells -- a painted day keeps its own tag (the bar still shows the window).
   Scoped to the availability page: the coverage page reuses .cal-win for span
   tint and puts its own headcount badge in that corner. */
.avail-page .cal-day.cal-win:not([data-dt])::after{content:'Window';position:absolute;bottom:7px;right:5px;
  font-size:9px;font-weight:800;line-height:1;letter-spacing:.3px;color:var(--brand)}
/* legend under the calendar -- only shown (via .show) while a window is highlighted */
.cal-legend{display:none;align-items:center;gap:7px;margin-top:8px;font-size:12px;color:var(--muted)}
.cal-legend.show{display:flex}
.cal-legend .swatch{flex:0 0 auto;width:15px;height:15px;border-radius:4px;position:relative;
  border:1px solid color-mix(in srgb,var(--brand) 65%,var(--border));
  background:color-mix(in srgb,var(--brand) 22%,var(--surface-2))}
.cal-legend .swatch::before{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--brand);border-radius:0 0 3px 3px}
.avail-summary{margin-top:10px;font-size:12.5px;color:var(--muted);font-style:italic}

.win-editor > label{display:block;font-weight:600;margin-bottom:6px}
.win-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.win-row .form-control{max-width:180px;display:inline-block}
.win-to{color:var(--muted)}
.win-editor #btnAddWindow{margin-top:4px}

/* --- Per-OPO caveat rows (availability: max days + note per preferred OPO) --- */
.opo-caveats{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.opo-caveat{display:flex;align-items:center;gap:8px}
.opo-caveat .oc-name{flex:0 0 auto;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;font-weight:600;color:var(--brand)}
.opo-caveat .oc-max{flex:0 0 76px;width:76px;padding:5px 8px;font-size:12px}
.opo-caveat .oc-note{flex:1;min-width:0;padding:5px 8px;font-size:12px}

/* period create/edit modal (admin): field grid inside the shared mc-dialog */
.pm-dialog{width:min(480px,94vw)}
.pm-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin:0 0 2px}
@media (max-width:520px){.pm-fields{grid-template-columns:1fr}}
.pm-fields .fld{min-width:0}
.pm-fields .fld > label{font-size:11px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:4px}
/* normal-case helper note inside an uppercase field label */
.pm-fields .fld > label .fld-note{text-transform:none;font-weight:400;letter-spacing:normal;opacity:.85}
.pm-fields .pm-span2{grid-column:1 / -1}
.pm-fields .form-control{width:100%;box-sizing:border-box}
.pm-dialog .sched-msg{display:block;margin:6px 0 0}
.pm-dialog .sched-msg:empty{display:none}

/* --- Scheduling error banner (migrator health on SchedulingAdmin) --- */
.sched-banner-error{background:var(--danger-tint,rgba(220,53,69,.12));border:1px solid var(--danger);
  color:var(--text);border-left-width:4px;border-radius:8px;padding:10px 16px;margin-bottom:16px;
  font-size:12.5px;line-height:1.5}
.sched-banner-error b{color:var(--danger)}
/* amber companion to the error banner (advisory, not blocking) */
.sched-banner-warn{background:color-mix(in srgb,#c67c12 12%,var(--surface));border:1px solid #c67c12;
  color:var(--text);border-left-width:4px;border-radius:8px;padding:10px 16px;margin-bottom:16px;
  font-size:12.5px;line-height:1.5}

/* =====================================================================
   Coverage needs (Chunk 1b): CoverageRequests page + tracker panel
   ===================================================================== */
.trk-head-lnk{margin-left:auto;font-size:12px;white-space:nowrap}
a.trk-row-lnk{text-decoration:none;color:inherit;cursor:pointer}
a.trk-row-lnk:hover .trk-name{color:var(--brand)}

.cov-cols{display:grid;grid-template-columns:minmax(340px,5fr) minmax(0,7fr);gap:16px;align-items:start}
@media (max-width:1100px){.cov-cols{grid-template-columns:1fr}}

/* left column: partner groups + need rows */
.cov-opo-list{display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding-right:4px}
.cov-opo{border:1px solid var(--border);border-radius:8px;background:var(--surface-2);padding:8px 12px}
.cov-opo-head{display:flex;align-items:center;gap:10px}
.cov-chip{flex:0 0 auto;width:10px;height:26px;border-radius:4px}
.cov-opo-who{flex:1;min-width:0}
.cov-opo-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.cov-btn-sm{padding:4px 10px!important;font-size:11.5px!important;white-space:nowrap}
.cov-need-row{display:flex;align-items:center;gap:8px;padding:6px 0 5px 20px;border-top:1px dashed var(--border);margin-top:6px;font-size:12.5px}
.cov-need-mode{flex:0 0 auto;color:var(--brand);font-weight:700}
.cov-need-sum{flex:1;min-width:0;color:var(--text)}
/* the row open in the editor -- staff were editing one need while reading another and
   overwriting it, so the pairing has to be unmistakable (accent bar + tint + label) */
.cov-need-row.is-editing{background:var(--brand-tint);border-left:3px solid var(--brand);
  padding-left:17px;border-radius:4px}
.cov-need-row.is-editing .cov-need-sum{font-weight:700;color:var(--brand)}
.cov-need-editing{flex:0 0 auto;background:var(--brand);color:#fff;border-radius:999px;
  padding:1px 8px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
/* which need the editor is on, beside the partner name in the card head */
.cov-ed-which{font-weight:400;font-size:12px;color:var(--muted)}
.cov-need-actions{flex:0 0 auto;display:flex;gap:10px}
.cov-lnk-del{color:var(--danger)!important}

/* editor layout */
.cov-ed-cols{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px}
@media (max-width:900px){.cov-ed-cols{grid-template-columns:1fr}}
.cov-ed-side{display:flex;flex-direction:column;gap:10px}
.cov-ed-side .fld{display:flex;flex-direction:column;gap:4px}
.cov-ed-side .form-control{width:100%;box-sizing:border-box;float:none}
.cov-ed-side textarea.form-control{display:block;resize:vertical}
.cov-lbl-hint{font-weight:400;font-size:11px;color:var(--muted)}
.cov-hc-input{max-width:90px}
.cov-shift input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.cov-hint{font-size:11.5px;color:var(--muted);font-style:italic;margin:6px 0 2px}
/* "+ Add span" and its hint share one compact row (hint fills the remainder) */
.cov-span-foot{display:flex;align-items:center;gap:10px;margin-top:2px}
.cov-span-foot .cov-hint{flex:1;min-width:0;margin:0}
#covSpanEd > .fld-label{display:block;margin-bottom:6px}
.cov-total{margin-top:10px;font-size:13px;color:var(--text)}
.cov-total b{color:var(--brand);font-size:15px}

/* entry-mode segmented control */
.mode-seg{display:flex;gap:0;margin-bottom:12px;border:1px solid var(--border);border-radius:8px;overflow:hidden;width:fit-content}
.mode-btn{border:0;background:var(--surface-2);color:var(--muted);padding:7px 16px;font-size:12.5px;font-weight:600;cursor:pointer}
.mode-btn + .mode-btn{border-left:1px solid var(--border)}
.mode-btn.sel{background:var(--brand);color:#fff}
.mode-btn:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.cov-mode-panel{display:none}

/* headcount brushes (Individual days): the shared .brush style expects a colored
   dt-* background under white text -- these have none, so style them outline-
   to-filled like the mode buttons (readable in both themes, never white-on-pale) */
.cov-brush{background:var(--surface-2);color:var(--brand);border:1px solid var(--brand);opacity:1;min-width:38px}
.cov-brush:hover{background:var(--brand-tint)}
.cov-brush.sel{background:var(--brand);color:#fff}
/* custom-number brush: a small number box living in the brush bar; the .sel
   ring marks it active just like a button brush */
.cov-custom-hc{width:58px;padding:5px 8px;font-size:12.5px;font-weight:700;text-align:center;
  float:none;display:inline-block;border:1px solid var(--brand);border-radius:6px;color:var(--brand)}
.cov-custom-hc.sel{box-shadow:0 0 0 3px var(--brand-tint),0 0 0 4px var(--brand)}

/* calendar headcount badge (span overrides + days-mode counts): a filled round
   pill, CENTERED -- the count is the cell's only content on this calendar
   (only the coverage editor emits .cal-hc), so let it own the cell */
.cal-hc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:13px;font-weight:800;line-height:1;color:#fff;background:var(--brand);
  border-radius:999px;min-width:22px;height:22px;display:flex;align-items:center;
  justify-content:center;padding:0 5px;box-sizing:border-box}
.cal-hc:empty{display:none}
.cal-day.cov-marked{background:color-mix(in srgb,var(--brand) 30%,var(--surface-2));border-color:var(--brand)}
.cal-day.cov-marked .dn{color:var(--brand)}

/* span-override stepper popover */
.cov-stepper{position:absolute;z-index:30;top:100%;left:50%;transform:translateX(-50%);margin-top:2px;
  display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--brand);
  border-radius:8px;padding:4px 6px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.cov-stepper button{border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  border-radius:5px;padding:2px 8px;font-weight:700;cursor:pointer;font-size:12px}
.cov-stepper button:hover{border-color:var(--brand);color:var(--brand)}
.cov-stepper .st-val{min-width:18px;text-align:center;font-weight:800;color:var(--brand)}

/* find-period search modal (Scheduling Admin): the one doorway to ANY period,
   including Closed months hidden from the everyday period lists */
.fp-open{margin-left:auto}
.fp-dialog{width:min(560px,92vw)}
.fp-dialog .form-control{width:100%;box-sizing:border-box;float:none;margin:10px 0}
.fp-list{max-height:340px;overflow-y:auto;border:1px solid var(--border);border-radius:8px}
.fp-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:12.5px}
.fp-row:last-child{border-bottom:0}
.fp-row .fp-name{flex:1;min-width:0;font-weight:600;color:var(--text)}
.fp-row .fp-actions{display:flex;gap:6px;flex:0 0 auto}
.fp-more{padding:8px 12px;font-size:11.5px;color:var(--muted);font-style:italic;border-top:1px solid var(--border)}

/* =====================================================================
   1C Schedule Board (ScheduleBoard.aspx + Scripts/sched-board.js)
   Mockup class vocabulary kept (.bgrid/.bar/.gapseg/.shpill/.epanel/.ctxmenu)
   with colors mapped to theme tokens. Bars are OPO-colored via --opocolor.
   ===================================================================== */
.sched-scope .opo-chip{display:inline-block;width:10px;height:10px;border-radius:3px;flex:0 0 auto}
/* --- Home dashboard: scheduling coverage strip (Default.aspx) --------------
   Two segments only, filled vs open, straight from ComputeGaps -- the same numbers the
   board shows. A prettier four-way split (confirmed/tentative/draft/gap) would need a
   separate status count that does not reconcile to Filled, and a dashboard whose figures
   disagree with the board is worse than one with fewer colours. */
.sched-strip{margin:0 0 18px}
.ss-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center}
@media (max-width:900px){.ss-top{grid-template-columns:1fr}}
.ss-ringwrap{display:flex;align-items:center;gap:18px}
/* --filled/--total are stamped on by the code-behind; the angle maths stays in CSS. */
.ss-ring{position:relative;width:132px;height:132px;border-radius:50%;flex:0 0 132px;
  background:conic-gradient(var(--brand) 0turn calc(var(--filled,0)/var(--total,1)*1turn),
    var(--gap-amber,#c67c12) calc(var(--filled,0)/var(--total,1)*1turn) 1turn)}
.ss-ring::after{content:"";position:absolute;inset:15px;border-radius:50%;background:var(--surface)}
.ss-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;z-index:1}
.ss-pct{font-size:27px;font-weight:800;line-height:1;color:var(--text)}
.ss-sub{font-size:10.5px;color:var(--muted);margin-top:2px}
.ss-legend{display:flex;flex-direction:column;gap:7px;font-size:12px}
.ss-legend div{display:flex;align-items:center;gap:8px;white-space:nowrap}
.ss-legend i{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.ss-legend b{margin-left:auto;padding-left:16px;font-variant-numeric:tabular-nums;color:var(--text)}
.ss-sw-filled{background:var(--brand)}
.ss-sw-open{background:#c67c12}
.ss-sw-need{background:var(--muted);opacity:.4}
.ss-phases{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
@media (max-width:760px){.ss-phases{grid-template-columns:1fr 1fr}}
.ss-ph{border:1px solid var(--border);border-radius:9px;padding:9px 11px;background:var(--surface-2)}
.ss-ph .k{font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.ss-ph .v{font-size:12.5px;font-weight:600;margin-top:3px;color:var(--text)}
.ss-ph .s{font-size:10.5px;color:var(--muted);margin-top:3px}
.ss-ph.done{border-color:var(--success)} .ss-ph.done .k{color:var(--success)}
.ss-ph.late{border-color:#c67c12;background:color-mix(in srgb,#c67c12 9%,var(--surface))}
.ss-ph.late .k{color:#c67c12}
.ss-ph.now{background:var(--brand);border-color:var(--brand)}
.ss-ph.now .k,.ss-ph.now .v,.ss-ph.now .s{color:#fff}
.ss-ph.now .k{opacity:.85}
.ss-ph.soon{opacity:.6}
.ss-tag{display:inline-block;margin-top:5px;font-size:8.5px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;padding:2px 6px;border-radius:999px;color:#c67c12;border:1px solid #c67c12;
  background:color-mix(in srgb,#c67c12 10%,var(--surface))}
.ss-due{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12.5px;
  padding:9px 13px;border-radius:9px;font-weight:600;color:#c67c12;
  border:1px solid #c67c12;background:color-mix(in srgb,#c67c12 9%,var(--surface))}
.ss-due .big{font-size:16px;font-weight:800;white-space:nowrap}
.ss-due .rest{color:var(--text);font-weight:500}
/* Strip nav tiles. Deliberately reuses the dashboard's own .fuse-nav / .qa language
   (accent icon chip + title + sub) instead of three equal-weight solid buttons -- on a
   landing page a wall of primary buttons hides which one you actually want. The tile
   matching the "Now" phase card gets .is-next server-side. */
.ss-links{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.ss-go{display:flex;align-items:center;gap:9px;flex:1 1 190px;min-width:0;
  padding:8px 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);
  color:var(--text);text-decoration:none;
  transition:border-color .2s,background .2s,transform .12s,box-shadow .2s}
.ss-go:hover,.ss-go:focus-visible{text-decoration:none;color:var(--text);transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent,var(--brand)) 45%,var(--border));box-shadow:var(--shadow)}
.ss-go .ico{width:30px;height:30px;border-radius:8px;flex:0 0 30px;display:flex;
  align-items:center;justify-content:center;font-size:15px;
  background:color-mix(in srgb,var(--accent,var(--brand)) 18%,var(--surface))}
.ss-go .tx{display:flex;flex-direction:column;min-width:0}
.ss-go .ttl{font-weight:600;font-size:12.5px;line-height:1.2}
.ss-go .sub{font-size:10.5px;color:var(--muted);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-go.g1{--accent:var(--brand)} .ss-go.g2{--accent:var(--secondary)} .ss-go.g3{--accent:var(--success)}
/* the one obvious next click */
.ss-go.is-next{border-color:var(--accent,var(--brand));
  background:color-mix(in srgb,var(--accent,var(--brand)) 12%,var(--surface))}
/* Stronger tint, NOT a solid fill: the chips hold emoji, which carry their own colours,
   so a saturated background just muddies them (color:#fff does nothing to an emoji).
   The promoted tile is already signalled by its border, tint, title colour and arrow. */
.ss-go.is-next .ico{background:color-mix(in srgb,var(--accent,var(--brand)) 34%,var(--surface))}
.ss-go.is-next .ttl{color:var(--accent,var(--brand))}
.ss-go.is-next::after{content:"\2192";margin-left:auto;padding-left:8px;font-weight:800;
  color:var(--accent,var(--brand));flex:0 0 auto}

/* "Also open" rows: other still-open cycles, one compact line each. Sits below the main
   strip content and spans the full card so it reads as a footnote to the headline period,
   not a competing tile. */
.ss-more{display:flex;flex-direction:column;gap:6px;margin-top:13px;
  padding-top:12px;border-top:1px dashed var(--border)}
.ss-mrow{display:flex;align-items:center;gap:11px;padding:7px 11px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface-2);text-decoration:none;
  color:var(--text);font-size:11.5px;transition:border-color .18s,background .18s}
.ss-mrow:hover,.ss-mrow:focus-visible{text-decoration:none;color:var(--text);
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border));
  background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
.ss-mrow .k{font-size:8.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:2px 7px;flex:0 0 auto}
/* Status chip colours. Locked is amber, matching .ss-ph.late: availability has shut and the
   schedule still has to be built, which is the state that actually needs a human. */
.ss-mrow .k.pst-open{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 45%,var(--border))}
.ss-mrow .k.pst-locked{color:#c67c12;border-color:color-mix(in srgb,#c67c12 50%,var(--border));
  background:color-mix(in srgb,#c67c12 10%,var(--surface))}
.ss-mrow .k.pst-draft{color:var(--muted);border-style:dashed}
.ss-mrow .nm{font-weight:700;font-size:12.5px;flex:0 0 auto}
.ss-mrow .mbar{flex:1 1 90px;min-width:60px;max-width:200px;height:6px;border-radius:4px;
  background:color-mix(in srgb,var(--muted) 28%,var(--surface));overflow:hidden}
.ss-mrow .mbar i{display:block;height:100%;border-radius:4px;background:var(--brand)}
.ss-mrow .pc{font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto}
.ss-mrow .fr{color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto}
.ss-mrow .fr.dim{font-style:italic;opacity:.8}
.ss-mrow .due{color:var(--muted);margin-left:auto;flex:0 0 auto}
.ss-mrow .arw{opacity:.45;font-weight:800;flex:0 0 auto}
.ss-mrow:hover .arw{opacity:1;color:var(--brand)}
.ss-mrow.is-more{justify-content:center;font-weight:700;color:var(--brand);background:none;
  border-style:dashed}
@media (max-width:760px){
    .ss-mrow{flex-wrap:wrap;gap:7px}
    .ss-mrow .due{margin-left:0}
    .ss-mrow .mbar{flex:1 1 100%;max-width:none;order:9}
}

/* Zip-centroid health line on SchedulingAdmin. */
.zc-state{font-size:12.5px;color:var(--text);margin:0 0 10px}
.zc-err{display:block;margin-top:3px;color:#c67c12}
/* floating toast stack: fixed to the viewport top-center, above everything,
   visible at any scroll position; click a toast to dismiss */
.sb-msg-region{position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:99999;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;max-width:min(560px,90vw)}
.sb-toast{pointer-events:auto;cursor:pointer;background:var(--brand);color:#fff;border-radius:10px;
  padding:9px 18px;font-size:12.5px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.35);
  opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s;text-align:center}
.sb-toast.show{opacity:1;transform:translateY(0)}
.sb-toast.is-error{background:var(--danger)}

/* toolbar */
.sb-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sb-toolbar .monthpick{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--text)}
.sb-toolbar .monthpick button{border:1px solid var(--border);background:var(--surface-2);color:var(--brand);
  border-radius:6px;padding:2px 10px;font-size:15px;font-weight:800;cursor:pointer}
.sb-toolbar .monthpick button:hover{border-color:var(--brand)}
.linechips{display:flex;gap:6px;flex-wrap:wrap}
.lchip{border:1px solid var(--border);background:var(--surface-2);color:var(--muted);border-radius:999px;
  padding:4px 12px;font-size:11.5px;font-weight:600;cursor:pointer}
.lchip:hover{border-color:var(--brand);color:var(--brand)}
.lchip.sel{background:var(--brand);border-color:var(--brand);color:#fff}
.sb-tglbtn{border:1px dashed #c67c12;background:color-mix(in srgb,#c67c12 8%,var(--surface));color:#c67c12;
  border-radius:8px;padding:4px 12px;font-size:11.5px;font-weight:700;cursor:pointer}
.sb-tglbtn.sel{background:#c67c12;color:#fff;border-style:solid}
.sb-viewseg{margin-bottom:0}
.sb-stats{display:flex;gap:8px;margin-left:auto}
.sb-stats .stat{display:flex;flex-direction:column;align-items:center;min-width:60px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;padding:3px 10px}
.sb-stats .stat b{font-size:15px;line-height:1.1;color:var(--text)}
.sb-stats .stat i{font-style:normal;font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.sb-stats .stat.is-ok b{color:var(--success)}
.sb-stats .stat.is-warn b{color:#c67c12}
.sb-stats .stat b.pulse{animation:sbPulse .5s ease-out}
/* Tiles count only what the filters are showing; the dashed brand edge says so at a glance
   (same "this is a toggle-scoped thing" idiom as .sb-tglbtn). Tooltip names the scope. */
.sb-stats.is-filtered .stat{border-color:var(--brand);border-style:dashed}
@keyframes sbPulse{0%{transform:scale(1.35)}100%{transform:scale(1)}}
.sb-tools{display:flex;gap:6px}

/* board layout */
.sb-wrap{display:flex;gap:14px;align-items:flex-start}
.sb-boardcard{flex:1;min-width:0}
/* height set by vfill.js (fill to viewport, internal scroll); calc is the
   no-JS fallback only */
.sb-board{overflow:auto;max-height:calc(100vh - 280px)}
.bgrid{display:grid;gap:0;min-width:1080px}
/* --grid-header and --grid-header-text are a PAIR (see the gridview header rule above).
   This took the background but set color:var(--muted), which is tuned for light surfaces --
   in light mode that put #5a6478 text on the #2a3c74 navy band at 1.77:1, i.e. invisible.
   Dark mode scored 4.97:1 by luck, which is why it survived: the board is built in dark. */
.bhead{position:sticky;top:0;z-index:3;background:var(--grid-header,var(--surface-2));color:var(--grid-header-text,var(--muted));
  text-align:center;font-size:10.5px;font-weight:700;padding:3px 0 4px;border-bottom:1px solid var(--border)}
.bhead span{display:block;font-size:8.5px;font-weight:600;opacity:.75}
.bhead.wkend{background:color-mix(in srgb,var(--grid-header,var(--surface-2)) 82%,#000)}
.bhead.rlabel{text-align:left;padding-left:10px;z-index:4;left:0}
.rlabel{position:sticky;left:0;z-index:2;display:flex;align-items:center;gap:7px;background:var(--surface);
  border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:5px 10px;min-width:0}
.rlabel .rl-text{min-width:0}
.rlabel .rl-text b{display:block;font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlabel .rl-text i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* rules hint/entry on the OPO's first lane: reminder + click path to the drawer */
.rl-rules{margin-left:auto;flex:0 0 auto;border:1px solid var(--border);background:var(--surface-2);
  color:var(--muted);border-radius:999px;padding:1px 8px;font-size:9.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.rl-rules:hover{border-color:var(--brand);color:var(--brand)}
.lane{position:relative;display:grid;grid-template-columns:subgrid;grid-auto-rows:28px;gap:2px 0;
  border-bottom:1px solid var(--border);padding:3px 0}
.lane .day{grid-row:1 / span var(--slots,1);border-right:1px solid color-mix(in srgb,var(--border) 55%,transparent)}
.lane .day.wkend{background:color-mix(in srgb,var(--muted) 7%,transparent)}
.lane .day.selrange{background:var(--brand-tint);outline:1px dashed var(--brand);outline-offset:-2px}

/* assignment bars + gaps */
.bar{position:relative;z-index:1;display:flex;align-items:center;gap:5px;overflow:hidden;cursor:pointer;
  background:var(--opocolor,#5b6c8f);color:#fff;border-radius:6px;margin:1px 2px;padding:0 7px;
  font-size:11.5px;font-weight:600;min-height:24px}
.bar--dark-text{color:#16223a}
.bar .bar-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bar .st{margin-left:auto;font-size:9px;font-weight:800;opacity:.9;letter-spacing:.3px;white-space:nowrap}
.bar.st-tent{opacity:.78}
/* Draft hatch. The pale band mixes toward #fff, NOT var(--surface) -- deliberately
   theme-independent. sched-board.js picks the label colour from
   needsDarkText(row.color), i.e. from the SOLID opo colour, then uses it on the
   hatch too. Mixing toward --surface made dark mode darken the band under a label
   already set dark for a light partner colour, so the text vanished on every other
   stripe. Lightening in both themes gives dark mode the light-mode hatch, which
   reads cleanly. Light mode is unaffected: --surface is already #ffffff there.
   Draft stays unambiguous regardless -- the dashed outline encodes it a second
   time. Text-shadows are paired to the label colour to cover the weaker case
   (white label on a lightened band). */
.bar.st-draft{background:repeating-linear-gradient(45deg,var(--opocolor,#5b6c8f),var(--opocolor,#5b6c8f) 7px,
  color-mix(in srgb,var(--opocolor,#5b6c8f) 72%,#fff) 7px,color-mix(in srgb,var(--opocolor,#5b6c8f) 72%,#fff) 13px);
  outline:1.5px dashed color-mix(in srgb,var(--opocolor,#5b6c8f) 70%,#000);outline-offset:-1.5px;
  text-shadow:0 1px 2px rgba(0,0,0,.55)}
.bar.st-draft.bar--dark-text{text-shadow:0 1px 2px rgba(255,255,255,.6)}
.bar.clip-s{border-top-left-radius:0;border-bottom-left-radius:0;border-left:3px dashed rgba(255,255,255,.7)}
.bar.clip-e{border-top-right-radius:0;border-bottom-right-radius:0;border-right:3px dashed rgba(255,255,255,.7)}
.bar .clip{font-weight:800;font-size:10px;white-space:nowrap}
.bar:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.gapseg{position:relative;z-index:1;display:flex;align-items:center;gap:5px;cursor:pointer;overflow:hidden;
  background:color-mix(in srgb,#c67c12 13%,var(--surface));border:1.5px dashed #c67c12;color:#a26410;
  border-radius:6px;margin:1px 2px;padding:0 7px;font-size:11px;font-weight:700;min-height:24px;white-space:nowrap}
body.dark-mode .gapseg{color:#e8a94e}
.gapseg:hover{background:color-mix(in srgb,#c67c12 22%,var(--surface))}
.gapseg:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* The gap whose candidates the rail is currently showing. With several gaps for one
   partner on nearby dates, the rail's title alone does not say WHICH bar you opened.
   Solid (not dashed) + brand ring + lifted, so it reads as "this is the open one"
   rather than as another gap state. Mirrored on the month chip below. */
.gapseg.is-open{border-style:solid;border-color:var(--brand);
  background:color-mix(in srgb,var(--brand) 20%,var(--surface));color:var(--brand);
  box-shadow:0 0 0 2px var(--brand-tint);z-index:3}
body.dark-mode .gapseg.is-open{color:#fff}
.bm-gap.is-open{border-style:solid;border-color:var(--brand);
  background:color-mix(in srgb,var(--brand) 20%,var(--surface));color:var(--brand);
  box-shadow:0 0 0 2px var(--brand-tint)}
body.dark-mode .bm-gap.is-open{color:#fff}
.shpill{display:inline-flex;align-items:center;gap:2px;border-radius:999px;padding:0 6px;font-size:9px;
  font-weight:800;line-height:15px;max-height:15px;overflow:hidden;white-space:nowrap;flex:0 0 auto}
.shpill.day{background:#ffd36b;color:#5c4500}
.shpill.night{background:#1c2748;color:#cfd9f4}

/* legend */
.sb-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11px;color:var(--muted)}
.sb-legend .lg{display:inline-flex;align-items:center;gap:5px}
.sb-legend i{display:inline-block;width:20px;height:11px;border-radius:3px}
.sb-legend .lg-conf{background:var(--brand)}
.sb-legend .lg-tent{background:var(--brand);opacity:.78}
/* Matches the bars: lightens toward #fff in both themes. A touch deeper (60% vs
   72%) because the swatch is only 20x11px with no text over it, so it needs the
   extra contrast to read as a pattern at all. */
.sb-legend .lg-draft{background:repeating-linear-gradient(45deg,var(--brand),var(--brand) 4px,
  color-mix(in srgb,var(--brand) 60%,#fff) 4px,color-mix(in srgb,var(--brand) 60%,#fff) 8px);
  outline:1px dashed var(--brand)}
.sb-legend .lg-gap{background:color-mix(in srgb,#c67c12 13%,var(--surface));border:1px dashed #c67c12}
.sb-legend .lg-tip{font-style:italic}

/* eligibility rail */
/* Height is set by vfill.js (the .vfill class on the markup), not by CSS: the rail starts
   ~180px down the page, so any viewport-relative calc overshoots the bottom by exactly that
   offset and grows the document. vfill measures the live top edge, which is the whole point
   of it. Stretching to the flex row does not work either -- that equalises heights without
   capping them, so a long "Show N blocked" list drags the board card taller instead.
   min-height:0 is load-bearing: a flex child defaults to min-height:auto and refuses to
   shrink below its content no matter what the parent allows. */
.epanel{flex:0 0 280px;position:sticky;top:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.ep-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);
  font-weight:700;font-size:13px;color:var(--text)}
.ep-close{margin-left:auto;border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1}
.ep-close:hover{color:var(--danger)}
.ep-sub{padding:6px 12px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--border)}
.ep-sub .shpill{margin-left:6px;vertical-align:middle}
.ep-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:8px}
.match{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface-2);padding:7px 10px}
.match .m-who{flex:1;min-width:0}
.match .m-who b{display:block;font-size:12px;color:var(--text)}
.match .m-who i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* M2 ranked rail: match %, attribute chips, blocked section.
   Card = header row (name · % · assign button) with chips flowing FULL-WIDTH
   underneath, so the narrow rail wastes no horizontal space. */
.ep-count{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin:2px 2px 4px}
.ep-note{font-size:11px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);
  border-left:3px solid var(--brand);border-radius:6px;padding:5px 9px;margin:0 0 6px}
/* Geography warning. Same shape as .ep-note so the rail stays visually coherent, but the
   amber left rule and tint mark it as a system-detected problem rather than a partner note
   -- it is telling you the mileage below is untrustworthy. Amber matches the gap/warning
   colour used across the board (#c67c12). */
.ep-warn{font-size:11px;color:var(--text);background:color-mix(in srgb,#c67c12 10%,var(--surface));
  border:1px solid color-mix(in srgb,#c67c12 35%,var(--border));border-left:3px solid #c67c12;
  border-radius:6px;padding:5px 9px;margin:0 0 6px;line-height:1.45}
.match{flex-direction:column;align-items:stretch;gap:5px}
.match .m-head{display:flex;align-items:center;gap:8px;width:100%}
.match .m-head b{font-size:12px;color:var(--text)}
.match .m-head .btn{margin-left:auto;white-space:nowrap}
.match .m-pct{font-size:11.5px;font-weight:800;border-radius:999px;padding:1px 8px;background:var(--surface)}
.match .m-pct.is-ok{color:var(--success)}
.match .m-pct.is-soon{color:#c67c12}
.match .m-pct.is-exp{color:var(--danger)}
.match .m-chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.chip{font-size:9.5px;font-weight:700;border-radius:999px;padding:1px 7px;line-height:1.5}
.chip-ok{background:color-mix(in srgb,var(--success) 14%,var(--surface));color:var(--success)}
.chip-info{background:var(--surface);color:var(--muted);border:1px solid var(--border)}
.chip-warn{background:color-mix(in srgb,#c67c12 14%,var(--surface));color:#a26410}
body.dark-mode .chip-warn{color:#e8a94e}
.chip-block{background:color-mix(in srgb,var(--danger) 12%,var(--surface));color:var(--danger)}
/* Dark mode brightens the red the same way .chip-warn brightens the amber above: --danger
   (#e0524f) is tuned as a BUTTON FILL, and as 9.5px text on a dark red-tinted chip it only
   reaches 4.12:1 -- the one chip in this set below AA, and visibly dimmer than the amber
   sitting next to it. #ff7b72 measures 6.25:1 on the chip and 7.03:1 on the pill, landing
   between .chip-ok (5.99) and .chip-warn (7.27) so it joins the family instead of shouting.
   Scoped here on purpose: --danger itself fills buttons and badges that carry #fff text,
   where a brighter token would LOWER contrast. */
body.dark-mode .chip-block{color:#ff7b72}
body.dark-mode .match .m-pct.is-exp{color:#ff7b72}
.match.is-blocked{opacity:.75}
.ep-blocked-toggle{border:0;background:none;color:var(--brand);font-size:11.5px;font-weight:600;
  cursor:pointer;text-align:left;padding:4px 2px}
.ep-foot{font-size:10px;color:var(--muted);font-style:italic;padding:6px 2px 2px;border-top:1px solid var(--border);margin-top:4px}

/* M5 month/calendar view */
.bmonth{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;min-width:840px}
.bm-dow{text-align:center;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.4px;padding:3px 0}
.bm-blank{min-height:96px}
.bm-day{min-height:96px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);
  padding:3px 5px;display:flex;flex-direction:column;gap:2px;cursor:pointer;overflow:hidden}
.bm-day:hover{border-color:var(--brand)}
.bm-day.wkend{background:color-mix(in srgb,var(--muted) 8%,var(--surface-2))}
.bm-day.bm-quiet{opacity:.55}
.bm-num{font-size:11px;font-weight:700;color:var(--muted)}
/* Flex row, not a nowrap text block: with plain ellipsis the trailing night moon was the
   first thing clipped, so the one piece of information you cannot afford to lose was the
   piece that disappeared. Now the NAME truncates and the code + moon always survive. */
.bm-entry{font-size:10.5px;font-weight:600;color:var(--text);border-left:5px solid var(--opocolor,#5b6c8f);
  background:color-mix(in srgb,var(--opocolor,#5b6c8f) 14%,var(--surface));border-radius:3px;
  padding:1px 5px;cursor:pointer;
  display:flex;align-items:center;gap:4px;overflow:hidden}
.bm-entry .ent-code{flex:0 0 auto}
.bm-entry .ent-who{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm-entry .ent-nite{margin-left:auto}
.bm-entry.st-draft{border-left-style:dashed;opacity:.85}
.bm-entry.st-tent{opacity:.7}
/* Confirmed had NO rule of its own -- it read as "the one that isn't dimmed", which is the
   weakest possible signal for the strongest state. Give it a double-width blip so a settled
   day is findable at a glance in a month grid.
   Light mode DARKENS the partner colour rather than using it raw: these are hand-picked in
   the admin colour picker and several are saturated mid-tones that vanish on white -- pure
   yellow #ffff01 scores 1.07:1 against --surface, i.e. invisible. At 60% toward black even
   that worst case clears 3:1. Dark mode keeps the colour raw, because there darkening it
   would sink the blip into the surface instead of lifting it off. */
.bm-entry.st-conf{border-left-width:8px;
  border-left-color:color-mix(in srgb,var(--opocolor,#5b6c8f) 60%,#000);
  background:color-mix(in srgb,var(--opocolor,#5b6c8f) 20%,var(--surface))}
body.dark-mode .bm-entry.st-conf{border-left-color:var(--opocolor,#5b6c8f)}
.bm-gap{font-size:10px;font-weight:700;color:#a26410;background:color-mix(in srgb,#c67c12 13%,var(--surface));
  border:1px dashed #c67c12;border-radius:3px;padding:1px 5px;text-align:left;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.dark-mode .bm-gap{color:#e8a94e}
.bm-more{font-size:9.5px;color:var(--brand);background:none;border:0;text-align:left;cursor:pointer;padding:0 5px}
.bm-tag{font-size:8.5px;font-weight:800;color:var(--muted);letter-spacing:.3px}
/* Expand-days: the per-day cap is lifted in JS (see renderMonth), so cells grow on their own --
   grid-auto-rows is already auto. All this adds is letting entry text wrap to its full name
   instead of ellipsing, which is the other half of "fit their contents". */
.bmonth.bm-expanded .bm-day{overflow:visible}
.bmonth.bm-expanded .bm-entry,
.bmonth.bm-expanded .bm-gap{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
/* Board freshness stamp (next to Refresh). Amber once the view is old enough to re-read. */
.sb-fresh{font-size:10.5px;color:var(--muted);white-space:nowrap;align-self:center;margin-left:2px}
.sb-fresh.is-stale{color:#c67c12;font-weight:700}

/* Partner filter type-ahead (replaces a native select -- see ScheduleBoard.aspx). */
.sb-opofilter{width:auto;min-width:190px;float:none;padding:4px 24px 4px 8px;font-size:12px}
.sb-opocombo{position:relative;display:inline-flex;align-items:center}
/* Clear button only earns its space once a partner is actually selected. */
.sb-opoclear{display:none;position:absolute;right:5px;border:0;background:none;color:var(--muted);
  font-size:15px;line-height:1;cursor:pointer;padding:0 3px}
.sb-opocombo.has-val .sb-opoclear{display:block}
.sb-opoclear:hover{color:var(--brand)}
/* z-index clears the sticky grid header (.bhead is 3-4) so the list is never clipped by it. */
.sb-opolist{display:none;position:absolute;top:100%;left:0;z-index:20;margin:3px 0 0;padding:4px;
  min-width:100%;max-height:260px;overflow:auto;list-style:none;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.sb-opocombo.is-open .sb-opolist{display:block}
.sb-opolist li{padding:5px 9px;border-radius:5px;font-size:12px;color:var(--text);cursor:pointer;white-space:nowrap}
.sb-opolist li[aria-selected="true"]{font-weight:700;color:var(--brand)}
/* Keyboard highlight and hover share one look, so arrowing and pointing feel the same.
   NOT --brand-tint: in dark mode that is #16203a against a #121826 list, ~3% apart in
   perceived brightness, which makes the active-option highlight invisible to a keyboard
   user. Mixing brand into surface adapts to both themes and stays clearly visible. */
.sb-opolist li.is-active,.sb-opolist li:hover{background:color-mix(in srgb,var(--brand) 22%,var(--surface))}
.sb-opolist .sb-opoempty{color:var(--muted);cursor:default;font-style:italic}
.sb-opolist .sb-opoempty:hover{background:none}

/* M4 auto-fill + impact preview */
.af-list{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto;
  border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:8px}
.af-row{display:flex;flex-direction:column;gap:2px;font-size:12px;padding-bottom:6px;border-bottom:1px dashed var(--border)}
.af-row:last-child{border-bottom:0;padding-bottom:0}
.af-row .af-gap{font-weight:700;color:var(--text)}
.af-row .af-pick{color:var(--muted)}
.af-row.af-none .af-pick{color:#c67c12;font-style:italic}
#sbdImpact{margin-top:6px}
.imp-block{font-size:12px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);
  border-left:3px solid #c67c12;border-radius:6px;padding:6px 10px;margin-top:6px}
.imp-block.imp-ok{border-left-color:var(--success)}
/* No substitute exists -- removing leaves an unfillable gap. Amber, not red: it's a warning
   about a consequence, not a rejected action. */
.imp-block.imp-warn{border-left-color:#c67c12;background:color-mix(in srgb,#c67c12 9%,var(--surface))}

/* M3 rules drawer */
.rd-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;margin-bottom:12px;
  border:1px solid var(--border);border-radius:8px;padding:8px 10px}
.rd-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text)}
.rd-row .rd-desc{flex:1;min-width:0}
.rd-add{border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:12px}
.rd-add > .fld-label,.rd-zips > .fld-label{display:block;margin-bottom:8px}
.rd-add .fld{display:flex;flex-direction:column;gap:3px;margin-bottom:6px}
.rd-zips{border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.rd-ziprow{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:12px}
.rd-ziprow span{flex:1;min-width:0;color:var(--text)}
.rd-ziprow .rd-zip{max-width:110px;float:none}
@media (max-width:1200px){
  .sb-wrap{position:relative}
  /* Fixed takes the rail out of the flex row, so it needs its own bounds on BOTH axes.
     Height: vfill sizes it, and this cap is the backstop (the 80px top offset is known here).
     Width: `flex:0 0 280px` above stops applying the moment the panel leaves the flex flow,
     and with only `right` set it shrink-to-fits against the whole viewport -- it was rendering
     ~1074px wide over a 1084px window and burying the board. */
  .epanel{position:fixed;right:10px;top:80px;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.3);
    width:300px;max-width:calc(100vw - 20px);max-height:calc(100vh - 100px)}
}

/* context menu */
.ctxmenu{position:fixed;z-index:100;background:var(--surface);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);padding:4px;min-width:230px;display:flex;flex-direction:column}
.ctxmenu .cm-item{border:0;background:none;text-align:left;padding:7px 12px;font-size:12.5px;color:var(--text);
  border-radius:6px;cursor:pointer}
.ctxmenu .cm-item:hover{background:var(--brand-tint);color:var(--brand)}
.ctxmenu .cm-item.danger{color:var(--danger)}
.ctxmenu .cm-item.danger:hover{background:color-mix(in srgb,var(--danger) 10%,var(--surface))}
.ctxmenu .cm-item.disabled{color:var(--muted);cursor:default;opacity:.6}
.ctxmenu .cm-item.disabled:hover{background:none}

/* board modal */
.sb-dialog{width:min(620px,94vw)}
.sb-modal-body{padding:4px 0 8px}
.sbd-row{display:flex;gap:10px;margin-bottom:8px;font-size:12.5px}
.sbd-row > label{flex:0 0 90px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);padding-top:2px}
.sbd-row > div{color:var(--text);min-width:0}
.sbd-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-bottom:8px}
.sbd-grid .fld{display:flex;flex-direction:column;gap:3px}
.sbd-grid .form-control,.sb-modal-body .form-control{width:100%;box-sizing:border-box;float:none}
.sb-travel{border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:8px}
.sb-travel > .fld-label{display:block;margin-bottom:6px}

/* print: the finished draft, filters as-is */
@media print{
  .navbar,.footer,.page-head .ph-actions,.sb-toolbar .sb-tools,.sb-toolbar .sb-viewseg,
  .sb-toolbar .monthpick button,.epanel,.sb-legend .lg-tip,.sb-msg-region{display:none!important}
  .sb-board{overflow:visible!important;max-height:none!important}
  .bgrid{min-width:0!important}
  .bar,.gapseg,.bhead,.lane .day{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .bar{outline:1px solid #333}
  @page{size:landscape}
}

/* day/night grid */
.cov-grid-wrap{max-height:430px;overflow-y:auto;border:1px solid var(--border);border-radius:8px}
.cov-grid{width:100%;border-collapse:collapse;font-size:12.5px}
.cov-grid th{position:sticky;top:0;background:var(--surface-2);color:var(--muted);text-align:left;
  font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:7px 12px;border-bottom:1px solid var(--border)}
.cov-grid td{padding:3px 12px;border-bottom:1px solid var(--border)}
.cov-grid tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.cov-grid .cg-date{white-space:nowrap;color:var(--text)}
.cov-grid input.form-control{width:64px;padding:3px 8px;font-size:12.5px;float:none;display:inline-block}