/* TMS · App shell · layout grid + chrome rules
 *
 * Loaded by /tms/includes/layout_top.cfm after tokens.css. All class
 * names prefixed with `tms-`, `cf-` (custom-tag widgets) or `cf-icon`.
 * Anything not in this file falls back to tokens.css base styles.
 */

/* ------------------------------------------------------------
   Body wraps the shell. Shell fills the viewport with a grid:
   60px rail | 220px sidebar | flex main column
   The main column itself is column-flex: 44px topbar then a
   white card with 10px outer margin.
   ------------------------------------------------------------ */
html, body { height: 100%; }
body { background: var(--bg); }

.tms-shell {
    display: grid;
    grid-template-columns: 60px 220px 1fr;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* ------------------------------------------------------------
   Left module rail (60px)
   ------------------------------------------------------------ */
.tms-rail {
    width: 60px;
    background: var(--chrome-rail);
    border-right: 1px solid var(--chrome-rail-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0;
    gap: 8px;
    overflow: hidden;
}
.tms-rail__brand {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--chrome-brand-bg);
    color: var(--chrome-brand-fg);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    flex-shrink: 0;
}
.tms-rail__divider {
    width: 24px;
    height: 1px;
    background: var(--chrome-divider);
    margin: 4px 0;
}
.tms-rail__btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: transparent;
    color: var(--chrome-rail-fg);
    display: grid;
    place-items: center;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    border: none;
    flex-shrink: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    transition: background-color .12s ease;
}
.tms-rail__btn:hover { background: var(--chrome-rail-hover-bg); }
.tms-rail__btn.is-active {
    background: var(--chrome-rail-active-bg);
    color: var(--chrome-rail-fg-active);
}
.tms-rail__btn.is-active::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 11px;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--rail-active-color, var(--accent));
}
.tms-rail__spacer { flex: 1; }
.tms-rail__avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--chrome-avatar-bg);
    color: var(--chrome-avatar-fg);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   Workspace sidebar (220px)
   ------------------------------------------------------------ */
.tms-sidebar {
    width: 220px;
    background: var(--chrome-tint);
    border-right: 1px solid var(--chrome-tint-border);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
}
.tms-sidebar__head {
    padding: 4px 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tms-sidebar__head-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.tms-sidebar__head-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.tms-sidebar__head-name { font-size: 13px; font-weight: 600; }
.tms-sidebar__head-sub  { font-size: 10px; color: var(--text-3); }
.tms-sidebar__search {
    margin: 0 0 10px;
}
.tms-sidebar__search-input {
    height: 30px;
    background: var(--surface);
    border: 1px solid var(--chrome-tint-border);
    border-radius: 8px;
    padding: 0 10px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-3);
}
.tms-sidebar__search-input .cf-kbd {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-3);
}
/* Group heading = the <summary> of a collapsible section. Typography is
   unchanged from when this was a static label; padding evens out to 6px
   because it is now a hover/click target, and margin-top restores the
   breathing room the old 10px top padding gave between sections. */
.tms-sidebar__group-label {
    padding: 6px 10px;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    /* text-2 (not text-3) so group labels stay AA-legible on the
       soft-violet chrome tint */
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    /* Drop the native disclosure triangle — the chevron on the right is
       the affordance. Both forms are needed: WebKit uses the pseudo
       element, everything else uses list-style on the summary. */
    list-style: none;
}
.tms-sidebar__group-label::-webkit-details-marker { display: none; }
.tms-sidebar__group-label:hover { background: rgba(255, 255, 255, 0.60); }
.tms-sidebar__group-label:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.tms-sidebar__group-chevron {
    margin-left: auto;
    display: inline-flex;
    color: var(--text-3);
    transition: transform .15s ease;
}
.tms-sidebar__group[open] > .tms-sidebar__group-label .tms-sidebar__group-chevron {
    transform: rotate(90deg);
}
/* .tms-sidebar is a flex column with gap:1px; the rows inside a section
   need that spacing re-established on their own container. */
.tms-sidebar__group-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cf-sb-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border-radius: 10px;
    color: var(--text-2);
    background: transparent;
    text-decoration: none;
    font-size: 13px;
    transition: background-color .12s ease;
}
.cf-sb-item:hover { background: rgba(255,255,255,0.60); }
.cf-sb-item.is-active {
    /* Active item lifts off the violet chrome as a white card —
       accent-soft would blend into the tint */
    color: var(--accent);
    background: var(--surface);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 0 0 1px var(--chrome-tint-border);
    font-weight: 600;
}
.cf-sb-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.cf-sb-item__label { flex: 1; }
.cf-sb-item__count {
    font-size: 11px;
    color: var(--text-3);
}
.cf-sb-item__badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

/* ------------------------------------------------------------
   Main column = topbar (44px) + main card (margin: 10px)
   ------------------------------------------------------------ */
.tms-main-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--chrome-tint);
    min-width: 0;
}
.tms-topbar {
    height: 44px;
    padding: 0 16px 0 18px;
    border-bottom: 1px solid var(--chrome-tint-border);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--chrome-tint);
    flex-shrink: 0;
}
.tms-topbar__spacer { flex: 1; }
.tms-topbar__envpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-2);
}
.tms-topbar__envpill .dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    display: inline-block;
}
.tms-topbar__iconbtn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    text-decoration: none;
}
.tms-topbar__iconbtn:hover { background: rgba(255,255,255,0.60); }
.tms-topbar__iconbtn[aria-expanded="true"] { background: rgba(255,255,255,0.60); }
.tms-topbar__divider {
    width: 1px;
    height: 18px;
    background: var(--chrome-tint-border);
    margin: 0 2px;
}
.tms-topbar__popover { position: relative; }
.tms-topbar__userchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px 3px 4px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    color: var(--text);
    font: inherit;
}
.tms-topbar__userchip:hover { background: rgba(255,255,255,0.60); }
.tms-topbar__userchip[aria-expanded="true"] { background: rgba(255,255,255,0.60); }
.tms-topbar__userchip[aria-expanded="true"] .cf-icon:last-child {
    transform: rotate(180deg);
}
.tms-topbar__userchip .cf-icon:last-child {
    transition: transform 120ms ease-out;
}
.tms-topbar__avatar {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--chrome-avatar-bg);
    color: var(--chrome-avatar-fg);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
}
.tms-topbar__name { font-size: 12px; font-weight: 500; }
.tms-topbar__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 15, 30, 0.10);
    z-index: 50;
}
.tms-topbar__menu[hidden] { display: none; }
.tms-topbar__menuitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
}
.tms-topbar__menuitem:hover,
.tms-topbar__menuitem:focus {
    background: var(--bg-2);
    outline: none;
}
.tms-topbar__menusep {
    height: 1px;
    margin: 4px 6px;
    background: var(--border);
}

.tms-topbar__appgrid {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 304px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 15, 30, 0.10);
    z-index: 50;
    padding: 12px 10px 8px;
}
.tms-topbar__appgrid[hidden] { display: none; }
.tms-topbar__appgrid-header {
    padding: 0 6px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}
.tms-topbar__appgrid-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.tms-topbar__apptile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    text-align: center;
}
.tms-topbar__apptile:hover,
.tms-topbar__apptile:focus {
    background: var(--bg-2);
    outline: none;
}
.tms-topbar__apptile-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 600;
    background: color-mix(in srgb, var(--app-color) 22%, transparent);
    color: var(--app-color);
}
.tms-topbar__apptile-label {
    font-size: 11px;
    line-height: 1.25;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.tms-topbar__apptile.is-active {
    background: color-mix(in srgb, var(--app-color) 10%, transparent);
}
.tms-topbar__apptile.is-active .tms-topbar__apptile-label {
    color: var(--text);
    font-weight: 600;
}
.tms-topbar__appgrid-empty {
    padding: 18px 8px;
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
}
.tms-topbar__appgrid-footer {
    margin-top: 8px;
    padding: 8px 6px 2px;
    border-top: 1px solid var(--border);
    text-align: right;
}
.tms-topbar__appgrid-footerlink {
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
}
.tms-topbar__appgrid-footerlink:hover { text-decoration: underline; }

.tms-main-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    margin: 10px;
    border-radius: 14px;
    border: 1px solid var(--border);
    min-height: 0;
}

/* ------------------------------------------------------------
   Page header (inside the main card, replaces the old h1 row)
   ------------------------------------------------------------ */
.cf-pageheader {
    padding: 14px 22px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}
.cf-pageheader__lead { min-width: 0; }
.cf-pageheader__crumbs {
    font-size: 11px;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.cf-pageheader__crumb a {
    color: inherit;
    text-decoration: none;
}
.cf-pageheader__crumb a:hover { color: var(--text-2); }
.cf-pageheader__crumb.is-leaf { color: var(--text-2); }
.cf-pageheader__title {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--text);
}
.cf-pageheader__count {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-3);
    margin-left: 6px;
}
.cf-pageheader__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.cf-mdot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    display: inline-block;
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   Page content scrolling area inside the main card
   ------------------------------------------------------------ */
.tms-page-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    min-height: 0;
}
.tms-page-body--padded {
    padding: 18px 22px 22px;
}
/* Cards stacked directly in the scrolling page body must keep their
   natural height. Without this the column-flex parent shrinks them when
   the viewport is short, and any card with an internal overflow:auto
   table-wrap clips its rows instead of letting the page scroll. (List
   pages put a bare .cf-table-wrap here instead, which still flexes.) */
.tms-page-body > .cf-card {
    flex-shrink: 0;
}

/* Main column + side panel (a list beside a maintenance/detail rail).
   Override the track list per page with --split-cols, e.g.
   style="--split-cols: minmax(0,1fr) 320px;". Stacks below 1024px — see
   the responsive block at the foot of this file. */
.cf-split {
    display: grid;
    grid-template-columns: var(--split-cols, minmax(0, 2.2fr) minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
}

/* ------------------------------------------------------------
   Buttons (cf_button)
   ------------------------------------------------------------ */
.cf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    color: var(--text);
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
    white-space: nowrap;
}
.cf-btn:disabled { opacity: .55; cursor: default; }
.cf-btn--sm { height: 28px; font-size: 12px; padding: 0 10px; }
.cf-btn--md { height: 32px; }
.cf-btn--lg { height: 38px; font-size: 13.5px; padding: 0 16px; }
.cf-btn--block { width: 100%; }

.cf-btn--primary {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    border-color: transparent;
}
.cf-btn--primary:hover { background: #5C46C8; }

/* Secondary CTA (teal) — affirmative secondary actions (Search, Export,
   Save view, Pin). Additive identity, never a second primary; violet stays
   the one filled primary on every screen. Neutral/Back actions use --ghost. */
.cf-btn--secondary {
    background: var(--teal-soft);
    color: var(--teal);
    font-weight: 600;
    border-color: transparent;
}
.cf-btn--secondary:hover { background: #C4ECE6; }

.cf-btn--module {
    background: var(--btn-bg, var(--accent));
    color: #fff;
    font-weight: 600;
}
.cf-btn--module:hover { filter: brightness(.94); }

.cf-btn--ghost {
    background: var(--surface);
    color: var(--text-2);
    border-color: var(--border);
}
.cf-btn--ghost:hover {
    background: var(--bg-2);
    color: var(--text);
}

.cf-btn--danger {
    background: #FFEFE9;
    color: #8A2B14;
    border-color: #F2C4B0;
    font-weight: 600;
}
.cf-btn--danger:hover { background: #FCE0D5; }

/* ------------------------------------------------------------
   Status pills (cf_statuspill)
   ------------------------------------------------------------ */
.cf-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.cf-pill--ok      { background: #E0F0DA; color: #3E7E2C; }
.cf-pill--warn    { background: #FBEACC; color: #A06A18; }
.cf-pill--info    { background: #E0EAFB; color: #2C5E94; }
.cf-pill--neutral { background: var(--bg-2); color: var(--text-2); }

/* ------------------------------------------------------------
   Flash alerts
   ------------------------------------------------------------ */
.tms-flash {
    /* Sits on the lavender chrome, just above the white content card;
       horizontal margin matches the card's 10px so the edges line up. */
    margin: 10px 10px 0;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    border: 1px solid transparent;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}
.tms-flash--error    { background: #FFEFE9; color: #8A2B14; border-color: #F2C4B0; }
.tms-flash--success  { background: #E6F5EB; color: #14653B; border-color: #B7E0C5; }
.tms-flash--warning  { background: #FEF7E0; color: #78580A; border-color: #F1E3A6; }
.tms-flash--info     { background: #E0EAFB; color: #2C5E94; border-color: #B8CDF0; }

/* ------------------------------------------------------------
   Impersonation bar
   First child of .tms-main-col, above the 44px topbar. Only present
   while session.isImpersonating.

   Colours are the WARNING flash inverted: its text colour (#78580A)
   becomes this bar's fill, its fill (#FEF7E0) becomes the text. A flash
   renders a few pixels below this in the same column, and if the two read
   alike the eye files this one as dismissable and stops seeing it. Same
   palette family, deliberately not the same object.

   flex-shrink:0 keeps it from being squeezed by the scrolling card below;
   .tms-main-col is already a flex column so nothing else needs to change.
   ------------------------------------------------------------ */
.tms-impbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 7px 16px 7px 18px;
    background: #78580A;
    color: #FEF7E0;
    font-size: 12.5px;
    line-height: 1.35;
    border-bottom: 1px solid #5C4308;
}
.tms-impbar__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    /* cf_icon strokes currentColor, so it inherits the bar's text colour. */
    color: #FEF7E0;
}
.tms-impbar__text { flex: 1; min-width: 200px; }
.tms-impbar__text strong { font-weight: 600; }
.tms-impbar__role {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(254, 247, 224, 0.18);
    font-size: 11px;
    font-weight: 500;
    text-transform: lowercase;
}
.tms-impbar__sep    { opacity: 0.55; margin: 0 4px; }
.tms-impbar__timer  {
    flex-shrink: 0;
    font-size: 11.5px;
    opacity: 0.8;
    white-space: nowrap;
}
.tms-impbar__form   { flex-shrink: 0; margin: 0; }
.tms-impbar__stop {
    /* Plain <button>, not cf_button: this is a submit inside a form and
       cf_button has no place for the surrounding markup. */
    appearance: none;
    border: 1px solid rgba(254, 247, 224, 0.45);
    background: rgba(254, 247, 224, 0.12);
    color: #FEF7E0;
    font: 600 12px/1 'Inter', system-ui, sans-serif;
    padding: 6px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
}
.tms-impbar__stop:hover  { background: #FEF7E0; color: #78580A; border-color: #FEF7E0; }
.tms-impbar__stop:focus-visible { outline: 2px solid #FEF7E0; outline-offset: 2px; }

/* Below 768px the rail is already behind a hamburger; keep the bar to two
   readable rows rather than letting the timer and button crowd the text. */
@media (max-width: 767px) {
    .tms-impbar { padding: 7px 12px; gap: 8px; font-size: 12px; }
    .tms-impbar__text { min-width: 100%; order: 2; }
    .tms-impbar__timer { order: 3; }
    .tms-impbar__form  { order: 4; margin-left: auto; }
}

/* ------------------------------------------------------------
   Forms inside cards (used by settings + district_add/_edit)
   ------------------------------------------------------------ */
.cf-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
/* A full-bleed table's tinted header pokes past the card's rounded
   corners. Round the table-wrap itself to match the card: the wrap
   already has overflow:auto, so its content clips to these corners
   while its scrolling is preserved. Round the top only when the wrap
   sits at the card's top edge, the bottom only at the bottom edge,
   so a card with a header (or footer) above/below isn't affected. */
.cf-card > .cf-table-wrap:first-child {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}
.cf-card > .cf-table-wrap:last-child {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}
.cf-card__head {
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--border);
}
.cf-card__title {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 2px;
    letter-spacing: -0.005em;
}
.cf-card__sub {
    font-size: 12px;
    color: var(--text-2);
    margin: 0;
}
.cf-card__body  { padding: 14px 18px; }
.cf-card__foot  {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.cf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cf-field:last-child { margin-bottom: 0; }
.cf-field__label {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-2);
}
.cf-field__hint {
    font-size: 11.5px;
    color: var(--text-3);
}
.cf-field__error {
    font-size: 11.5px;
    color: #8A2B14;
}
.cf-input,
.cf-textarea,
.cf-select {
    height: 38px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    width: 100%;
    outline: none;
}
.cf-textarea,
textarea.cf-input {
    height: auto;
    min-height: 80px;
    padding: 10px 12px;
    line-height: 1.45;
    resize: vertical;
}
.cf-input:focus,
.cf-textarea:focus,
.cf-select:focus {
    border: 1.5px solid var(--accent);
}

/* ------------------------------------------------------------
   Native file inputs
   <input type="file" class="cf-input"> renders a browser-default
   "Choose File" button jammed in the corner of the field. Lay the
   field out as a flex row so the control is vertically centred, and
   restyle the ::file-selector-button to read like a cf-btn--ghost.
   The button rule also targets bare file inputs so every uploader in
   every module looks consistent, not just the .cf-input ones.
   ------------------------------------------------------------ */
.cf-input[type="file"] {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 38px;
    /* Native file inputs ignore align-items on the host, so the vertical
       padding (not flex) is what actually centres the 28px button in the
       38px field: (38 - 2px border - 28px button) / 2 = 4px. */
    padding: 4px 8px;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
}
input[type="file"]::file-selector-button {
    margin-right: 12px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
input[type="file"]::file-selector-button:hover {
    background: var(--bg-2);
    color: var(--text);
    border-color: var(--border-2, var(--border));
}
/* Legacy WebKit fallback (older Safari/Chrome) */
input[type="file"]::-webkit-file-upload-button {
    margin-right: 12px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-2);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.cf-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
}
.cf-toggle-row__text { flex: 1; }
.cf-toggle-row__title { font-size: 13px; font-weight: 500; color: var(--text); }
.cf-toggle-row__sub   { font-size: 12px; color: var(--text-2); margin-top: 2px; }

.cf-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}
.cf-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.cf-switch__slider {
    position: absolute;
    inset: 0;
    background: var(--border-strong);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .14s ease;
}
.cf-switch__slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 999px;
    transition: transform .14s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.cf-switch input:checked + .cf-switch__slider { background: var(--accent); }
.cf-switch input:checked + .cf-switch__slider::before { transform: translateX(16px); }
.cf-switch input:focus-visible + .cf-switch__slider { box-shadow: 0 0 0 2px rgba(91,63,214,0.35); }

.cf-radio-group { display: flex; flex-direction: column; gap: 8px; }
.cf-radio-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    background: var(--surface);
}
.cf-radio-row:hover { border-color: var(--border-strong); }
.cf-radio-row input[type=radio] { accent-color: var(--accent); }
.cf-radio-row__label { font-size: 13px; }

/* ------------------------------------------------------------
   Tables (used by districts list)
   ------------------------------------------------------------ */
.cf-tabstrip {
    padding: 8px 22px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.cf-tab {
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    border-radius: 8px 8px 0 0;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.cf-tab.is-active {
    background: var(--bg-2);
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--accent);
}
.cf-tab__count {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-3);
    margin-left: 4px;
}

.cf-filterbar {
    padding: 10px 22px;
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.cf-filter-search {
    flex: 1;
    height: 32px;
    background: var(--bg-2);
    border: 0;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 12px;
    color: var(--text);
    outline: none;
}
.cf-filter-search:focus { box-shadow: 0 0 0 1.5px var(--accent); }
.cf-filter-pill {
    height: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 12px;
    font-size: 12px;
    color: var(--text);
    outline: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cf-filter-pill:focus { border-color: var(--border-strong); }

.cf-table-wrap {
    flex: 1;
    overflow: auto;
    background: var(--surface);
    min-height: 0;
}
.cf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.cf-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-2);
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
/* Opt-out for tables embedded in a card (no scroll container): the header
   should not stick to the page scroll and float over the rows. */
.cf-table--static thead th { position: static; }
.cf-table tbody td {
    padding: 7px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.cf-table tbody tr:hover td { background: rgba(91,63,214,0.03); }
.cf-table__name { font-weight: 500; color: var(--text); }
.cf-table__sub  { color: var(--text-2); }
.cf-table__muted { color: var(--text-3); }
.cf-table__actions { text-align: right; color: var(--text-3); width: 32px; }

.cf-empty {
    padding: 60px 22px;
    text-align: center;
    color: var(--text-2);
}
.cf-empty__title { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.cf-empty__sub   { font-size: 12.5px; color: var(--text-2); }

.cf-pagination {
    padding: 8px 22px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    font-size: 11.5px;
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.cf-pagination__nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cf-pagination__btn {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    text-decoration: none;
}
.cf-pagination__btn:hover { background: var(--bg-2); color: var(--text); }
.cf-pagination__btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* ------------------------------------------------------------
   Responsive chrome
   ------------------------------------------------------------
   Two tiers:
     • ≥1025px  full shell (60 | 220 | 1fr)
     • ≤1024px  off-canvas drawer: rail + sidebar slide in over a
                dim overlay, toggled by the topbar hamburger. The
                shell carries `.is-nav-open` while the drawer is up.

   (The spec's 769–1024 icon-only collapse was dropped in favour of a
   single drawer behaviour below 1024 — cleaner than a redundant
   second icon strip beside the module rail.)

   Base state of the two drawer-only chrome pieces. They do nothing
   above 1024px — the hamburger and overlay are hidden until the
   drawer tier turns them on.
   ------------------------------------------------------------ */
.tms-topbar__hamburger { display: none; }

.tms-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(15, 15, 30, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    border: 0;
    padding: 0;
}

/* Below 640px: stack the page-header lead over its right actions so
   the action buttons don't overflow on a phone. Above this the main
   column is full-width (drawer tier), so the header has room to stay
   on one row. */
@media (max-width: 640px) {
    .cf-pageheader {
        flex-direction: column;
        align-items: stretch;
    }
    .cf-pageheader__actions { justify-content: flex-end; }
}

/* ≤1024px: off-canvas drawer. The main column takes the full width;
   rail + sidebar are lifted out of the grid (position:fixed) and
   parked off the left edge, sliding in together when `.is-nav-open`
   is set on the shell. The sidebar keeps its full 220px width and
   labels here — this is a real drawer, not an icon-only collapse. */
@media (max-width: 1024px) {
    .tms-shell { grid-template-columns: 1fr; }

    .tms-rail,
    .tms-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 60;
        transition: transform .22s ease;
    }
    .tms-rail    { left: 0;    transform: translateX(-100%); }
    .tms-sidebar {
        left: 60px;
        width: 220px;
        padding: 14px 10px;
        transform: translateX(calc(-100% - 60px));
    }

    .tms-shell.is-nav-open .tms-rail,
    .tms-shell.is-nav-open .tms-sidebar { transform: translateX(0); }

    .tms-nav-overlay { display: block; }
    .tms-shell.is-nav-open .tms-nav-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .tms-topbar__hamburger { display: grid; }
}

/* ≤1024px: stack .cf-split to one column. The drawer above hands the page
   the full viewport width, but a 260px+ side panel still claims half of a
   narrow screen and squeezes the main column to nothing. Stacking follows
   DOM order — main column first, side panel beneath — so tab order stays
   put and no `order` reshuffle is needed. */
@media (max-width: 1024px) {
    .cf-split { grid-template-columns: minmax(0, 1fr); }
}

/* Small screens: the app-grid popover is anchored (right:0) to its
   trigger, which sits mid-topbar with the user chip to its right. Its
   304px width then spills off the left edge. Pin it to the viewport's
   right edge instead and clamp the width so it always fits on screen. */
@media (max-width: 768px) {
    .tms-topbar__appgrid {
        position: fixed;
        top: 48px;
        right: 8px;
        left: auto;
        width: min(304px, calc(100vw - 16px));
    }
}