/* ==========================================================================
   SPOTSMART - INSTITUTIONAL DESIGN SYSTEM

   Same design language as Aciena, EquityMarker and LoanHawk (Inter, 2px radius,
   hairline borders, minimal shadow, navy structure) with SpotSmart's OWN logo
   palette: a navy wordmark, an orange "t", and a dotted sphere.

   LOAD ORDER: this file must load AFTER Bootstrap and Font Awesome.
   It is injected into <head> by SiteAssets.Register(Page), called from the
   navigation user controls. Do not add a <link> to it on a page.

   PALETTE PROVENANCE: ARCHITECTURE.md section 6 (sampled from the logo, every
   contrast ratio computed with the WCAG relative-luminance formula):
     wordmark navy        #1A2230  (structure; 15.96:1 on white)
     the orange "t"       #F28C28  (decoration, and a button ground with navy text; 6.51:1)
     the indigo dot       #3D4FB0  (links and the interactive accent on white; 7.13:1)

   Orange is DECORATION and the primary-button ground. As text on white it steps
   down to --ss-orange-text (#B85B0A, 4.63:1). On navy it stays #F28C28.

   SECTIONS
     1. Tokens
     2. Base & typography
     3. Layout & app shell
     4. Sidebar, switchers, mobile drawer
     5. Topbar and footer
     6. Buttons and the busy state
     7. Forms, read mode, money input
     8. Tables
     9. Cards, KPI tiles, definition rows, chips, meter
    10. Badges
    11. Alerts
    12. Modals and the in-place confirmation
    13. The search picker
    14. Tabs, empty state, pagination
    15. Wizard, lifecycle rail, command bar, overflow menu, auth card
    16. Attachments: tiles, drop zone, phone capture
    17. Shared families new to SpotSmart: lang switch, plate, auth code, marketing, portal
    18. Permissions matrix and plan cards (lane C)
    19. Utilities, responsive, motion, print (print scoped to .ss-doc)
    20. Reports (lane J), appended verbatim
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
    /* Structure: the wordmark navy. Carries the weight of the design: sidebar,
       card top-borders, headings. 15.96:1 on white. */
    --ss-navy: #1A2230;
    --ss-navy-deep: #0F1626;   /* 18.06:1 on white: footer, page titles, sidebar */
    --ss-navy-mid: #2A3550;

    /* The brand orange: the "t" of the logo. THREE steps because it lands on
       three grounds: as a button ground under navy text (6.51:1), as the hover
       of that button (4.97:1 with navy text), and as TEXT or an icon on white,
       where the raw sample fails and is darkened along its own hue (4.63:1). */
    --ss-orange: #F28C28;
    --ss-orange-hover: #DD7314;
    --ss-orange-text: #B85B0A;
    --ss-orange-soft: #FDF0E3;

    /* Accent: the indigo dot. Links and the primary interactive colour on white
       (7.13:1); lightened along the same hue for navy grounds. */
    --ss-accent: #3D4FB0;
    --ss-accent-hover: #2F3E8F;
    --ss-accent-on-dark: #9FB0FF;
    --ss-accent-soft: #ECEEFB;

    /* Neutrals */
    --ss-white: #FFFFFF;
    --ss-canvas: #F5F6FA;
    --ss-gray-soft: #F5F6FA;
    --ss-gray-100: #F9FAFB;
    --ss-gray-200: #F3F4F6;
    --ss-gray-border: #E5E7EB;
    --ss-gray-border-strong: #D1D5DB;
    --ss-text-dark: #111827;
    --ss-text-muted: #5B6472;   /* 5.98:1 on white; stays >= 4.5 on a 10% tint */
    --ss-text-on-navy: #A9B1C4; /* paragraphs on --ss-navy-deep */
    --ss-list-on-navy: #C9CFDC; /* list and link text on --ss-navy-deep */

    /* Semantic: muted, institutional, never candy-bright.
       On white: success 5.02:1, warning 5.02:1, danger 6.47:1. */
    --ss-success: #15803D;
    --ss-success-soft: #ECFDF3;
    --ss-warning: #B45309;
    --ss-warning-soft: #FFFBEB;
    --ss-danger: #B91C1C;
    --ss-danger-soft: #FEF2F2;
    --ss-info: #1A2230;
    --ss-info-soft: #EEF0F5;

    /* A negative amount on a ledger or a statement: the convention every
       accountant already reads. Not the same thing as danger. */
    --ss-negative: #B91C1C;

    /* The dotted sphere: status pills and chart series. Never text on white
       unless listed (yellow has its own text step). */
    --ss-dot-red: #D93C4C;
    --ss-dot-pink: #D4418C;
    --ss-dot-magenta: #B23FA8;
    --ss-dot-purple: #7F3FBF;
    --ss-dot-indigo: #3D4FB0;
    --ss-dot-blue: #2F7FBF;
    --ss-dot-teal: #1F8F86;
    --ss-dot-green: #2D8A44;
    --ss-dot-yellow: #F5C242;
    --ss-dot-yellow-text: #B8860B;
    --ss-dot-orange: #F28C28;

    /* Two tokens the siblings' pages reference. */
    --ss-gray-700: #374151;          /* 10.31:1 on white */
    --ss-ink: var(--ss-text-dark);

    /* Type */
    --ss-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --ss-font-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;

    /* Geometry: institutional, near-square, hairline, restrained shadow */
    --ss-radius: 2px;
    --ss-radius-lg: 4px;
    --ss-hairline: 1px solid var(--ss-gray-border);
    --ss-shadow-sm: 0 1px 2px rgba(15, 22, 38, 0.04);
    --ss-shadow: 0 4px 14px rgba(15, 22, 38, 0.06);
    --ss-shadow-lg: 0 16px 40px rgba(15, 22, 38, 0.10);

    /* Chrome metrics */
    --ss-sidebar-w: 264px;
    --ss-topbar-h: 64px;

    /* --- Bootstrap 5.3 theme bridge -------------------------------------
       Bootstrap composes .bg-* / .text-* / .border-* utilities as
       rgba(var(--bs-*-rgb), var(--bs-bg-opacity)). NEVER re-point one with a
       flat `background-color: x !important`: that collapses every
       bg-opacity-* tint into a solid block with unreadable text on it
       (this destroyed 26 tinted panels in EquityMarker once). Set the
       -rgb variables instead: solid fills AND tints both come out right. */
    --bs-primary: #1A2230;
    --bs-primary-rgb: 26, 34, 48;       /* navy      #1A2230 */
    --bs-secondary-rgb: 91, 100, 114;   /* muted     #5B6472 */
    --bs-success-rgb: 21, 128, 61;      /* success   #15803D */
    --bs-danger-rgb: 185, 28, 28;       /* danger    #B91C1C */
    --bs-warning-rgb: 180, 83, 9;       /* warning   #B45309 */
    --bs-info-rgb: 42, 53, 80;          /* navy-mid  #2A3550 */
    --bs-light-rgb: 245, 246, 250;      /* gray-soft #F5F6FA */
    --bs-dark-rgb: 15, 22, 38;          /* navy-deep #0F1626 */
    --bs-link-color: #1A2230;
    --bs-link-color-rgb: 26, 34, 48;
    --bs-link-hover-color: #3D4FB0;
    --bs-link-hover-color-rgb: 61, 79, 176;
    --bs-body-font-family: var(--ss-font);
    --bs-body-color: #111827;
    --bs-body-color-rgb: 17, 24, 39;
    --bs-border-color: #E5E7EB;
    --bs-border-radius: 2px;
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: 4px;
    --bs-border-radius-xl: 4px;
    --bs-focus-ring-color: rgba(61, 79, 176, 0.25);
}

/* .text-dark / .text-black / .text-white-50 / .text-muted are plain colour
   utilities with no rgb composition in Bootstrap 5.3, so they do need an
   explicit re-point. */
.text-dark { color: var(--ss-navy-deep) !important; }
.text-black { color: var(--ss-navy-deep) !important; }
.text-white-50 { color: var(--ss-text-on-navy) !important; }
.text-muted { color: var(--ss-text-muted) !important; }


/* ==========================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================== */
html { scroll-behavior: smooth; }

body {
    font-family: var(--ss-font) !important;
    color: var(--ss-text-dark);
    background-color: var(--ss-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.ss-app { background-color: var(--ss-canvas); }
body.ss-site { background-color: var(--ss-white); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ss-font);
    color: var(--ss-navy-deep);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* FIGURES MUST ALIGN. A column of fees, fines and balances whose digits do
   not line up cannot be scanned for an order-of-magnitude error, which is the
   error a human is actually good at catching. Tabular figures make every
   digit the same width, so 1,000.00 and 999.99 sit under each other
   correctly. Every numeric cell gets .ss-num. */
.ss-num,
.ss-table td.ss-num,
.ss-table th.ss-num,
.ss-kpi__value,
.ss-def__v,
.ss-money input,
input.ss-money__input {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Negative amounts. The convention every accountant already reads. */
.ss-num--negative { color: var(--ss-negative); }
.ss-num--neg, table.ss-table tr > td.ss-num--neg { color: var(--ss-negative); }

a {
    color: var(--ss-navy);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover { color: var(--ss-accent); }

hr { border-color: var(--ss-gray-border); opacity: 1; }

::selection { background: var(--ss-navy); color: #fff; }

canvas { max-width: 100%; }
img { max-width: 100%; height: auto; }

:focus-visible {
    outline: 2px solid var(--ss-accent);
    outline-offset: 2px;
}

/* The eyebrow is orange: the one place the brand accent is text on white,
   at the darkened step that passes. */
.ss-eyebrow {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ss-orange-text);
    margin-bottom: 14px;
}

/* On a navy ground the raw orange reads fine (7.5:1 on navy-deep). */
.ss-bg-navy .ss-eyebrow,
.ss-hero .ss-eyebrow,
.ss-on-navy .ss-eyebrow { color: var(--ss-orange); }

.ss-muted { color: var(--ss-text-muted); }

/* ASP.NET validators, when a page carries one. */
.field-validation-error,
span[id*="rfv"],
span[id*="Validator"],
.ss-validation {
    color: var(--ss-danger);
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    margin-top: 4px;
}


/* ==========================================================================
   3. LAYOUT & APP SHELL
   ========================================================================== */
.ss-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.ss-bg-gray { background-color: var(--ss-gray-soft); }

.ss-bg-navy {
    background-color: var(--ss-navy);
    color: #fff;
}

.ss-bg-navy h1, .ss-bg-navy h2, .ss-bg-navy h3, .ss-bg-navy h4, .ss-bg-navy h5 { color: #fff; }
.ss-bg-navy p { color: var(--ss-text-on-navy); }

/* Dashboard shell.
   Scoped to a sibling sidebar ON PURPOSE: auth pages reuse the same
   .main-content class as a flex centering wrapper with no sidebar, and must
   not be given a left offset. Do not widen this selector. */
.ss-sidebar ~ .main-content {
    margin-left: var(--ss-sidebar-w);
    padding: 32px;
    min-height: 100vh;
}

.ss-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--ss-gray-border);
}

.ss-page-head__title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ss-navy-deep);
    margin: 0 0 4px;
}

.ss-page-head__sub {
    font-size: 0.925rem;
    color: var(--ss-text-muted);
    margin: 0;
}

.ss-page-head__note {
    font-size: 0.85rem;
    color: var(--ss-text-muted);
    margin: 6px 0 0;
}

.ss-page-head__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.ss-crumbs {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ss-text-muted);
    margin-bottom: 10px;
}

.ss-crumbs a { color: var(--ss-text-muted); }
.ss-crumbs a:hover { color: var(--ss-accent); }

/* Any child, not only a span: a manage page puts an <a> crumb in the middle
   and the separator must survive it. */
.ss-crumbs > * + *::before {
    content: '/';
    margin: 0 8px;
    color: var(--ss-gray-border-strong);
}
.ss-crumbs i { display: none; }   /* pages still emitting angle icons fall back to the slash */



/* ==========================================================================
   4. SIDEBAR, SWITCHERS, MOBILE DRAWER
   The dark-ground greys (#8D96AD labels and icons, #AEB6C9 nested headers,
   #6C7489 / #555D72 pending, #F0A9A9 danger) are literals derived from the
   navy; they and white are the only non-token colours in the sheet.
   ========================================================================== */
.ss-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--ss-sidebar-w);
    height: 100vh;
    background: var(--ss-navy-deep);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform 0.25s ease;
}

.ss-sidebar__brand {
    display: block;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ss-sidebar__brand img {
    height: 30px;
    width: auto;
    display: block;
}

.ss-sidebar__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 0 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}

.ss-sidebar__scroll::-webkit-scrollbar { width: 6px; }
.ss-sidebar__scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); }

/* The two switchers sit ABOVE the menu because everything below is read
   through them: the organization, then the facility. */
.ss-switch {
    padding: 14px 16px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.16);
}

.ss-switch__field + .ss-switch__field { margin-top: 12px; }

.ss-switch__label {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: #8D96AD;
    margin-bottom: 5px;
}

.ss-switch__select {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--ss-radius);
    color: #fff;
    font-family: var(--ss-font);
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0.42rem 1.9rem 0.42rem 0.6rem;
    cursor: pointer;

    /* The native arrow is drawn in the OS's colour and disappears on a dark ground.
       This is the same chevron, drawn as an inline SVG in a colour we control. */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238D96AD'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-size: 12px;

    /* A long organization name must not stretch the sidebar. */
    text-overflow: ellipsis;
}

.ss-switch__select:hover { border-color: var(--ss-accent-on-dark); }

.ss-switch__select:focus {
    outline: none;
    border-color: var(--ss-accent-on-dark);
    box-shadow: 0 0 0 3px rgba(159, 176, 255, 0.20);
}

/* The dropdown LIST is drawn by the OS, not by us: on most platforms it inherits the
   control's colours, so the options need a readable ground of their own or they render
   as white-on-white. */
.ss-switch__select option {
    background-color: var(--ss-navy-deep);
    color: #fff;
}

/* The facility-count tag under the facility switcher (replaces the siblings'
   currency chip). Orange on the navy ground. */
.ss-switch__tag {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ss-orange);
    background: rgba(242, 140, 40, 0.13);
    border: 1px solid rgba(242, 140, 40, 0.30);
    border-radius: var(--ss-radius);
    padding: 1px 7px;
}

.ss-sidebar__group {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: #8D96AD;
    padding: 20px 20px 8px;
}

.ss-sidebar__link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 20px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ss-list-on-navy);
    border-left: 3px solid transparent;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.ss-sidebar__link i {
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
    color: #8D96AD;
    transition: color 0.15s ease;
}

.ss-sidebar__link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.ss-sidebar__link:hover i { color: var(--ss-accent-on-dark); }

/* The active item carries the 3px orange rule: the brand accent as structure. */
.ss-sidebar__link.active {
    color: #fff;
    font-weight: 600;
    background: rgba(242, 140, 40, 0.12);
    border-left: 3px solid var(--ss-orange);
}

.ss-sidebar__link.active i { color: var(--ss-orange); }

/* A group header is a .ss-sidebar__link that toggles a Bootstrap collapse. The chevron
   points down when open and right when closed. Bootstrap adds .collapsed to the
   trigger when the target is shut, which is the only state signal available without
   scripting it ourselves. */
.ss-sidebar__chevron {
    margin-left: auto;
    font-size: 0.62rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.ss-sidebar__link.collapsed .ss-sidebar__chevron { transform: rotate(-90deg); }

.ss-sidebar__submenu { background: rgba(0, 0, 0, 0.20); }

.ss-sidebar__link--sub {
    padding-left: 52px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 0.83rem;
}

.ss-sidebar__submenu .ss-sidebar__submenu { background: rgba(0, 0, 0, 0.16); }
.ss-sidebar__submenu .ss-sidebar__submenu .ss-sidebar__link--sub { padding-left: 68px; }

.ss-sidebar__submenu .ss-sidebar__submenu .ss-sidebar__submenu { background: rgba(0, 0, 0, 0.12); }
.ss-sidebar__submenu .ss-sidebar__submenu .ss-sidebar__submenu .ss-sidebar__link--sub { padding-left: 84px; }

.ss-sidebar__submenu > .ss-sidebar__link--sub[data-bs-toggle] {
    font-weight: 600;
    color: #AEB6C9;
}

/* Pending items are RENDERED, not hidden. The menu is the shape of the product, and
   hiding what is coming makes it read as a much smaller system than it is. They are
   muted and inert: a label that plainly is not a link, rather than a link that 404s. */
.ss-sidebar__link--pending {
    color: #6C7489;
    cursor: default;
}

.ss-sidebar__link--pending:hover {
    background: transparent;
    color: #6C7489;
}

.ss-sidebar__link--pending i { color: #555D72; }

.ss-sidebar__foot {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 0;
}

.ss-sidebar__foot .ss-lang { display: flex; padding: 6px 20px 8px; }

.ss-sidebar__link--danger { color: #F0A9A9; }
.ss-sidebar__link--danger i { color: #F0A9A9; }
.ss-sidebar__link--danger:hover { color: #fff; background: rgba(185, 28, 28, 0.25); }

/* Mobile drawer */
.ss-navtoggle {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 1050;
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--ss-navy);
    border: 1px solid var(--ss-gray-border-strong);
    border-radius: var(--ss-radius);
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: var(--ss-shadow-sm);
}

.ss-navscrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 22, 38, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1035;
    display: none;
}

.ss-navscrim.show { display: block; }

@media (max-width: 991.98px) {
    .ss-sidebar { transform: translateX(-100%); }
    .ss-sidebar.mobile-open { transform: translateX(0); }
    .ss-navtoggle { display: inline-flex; }
    body.ss-nav-open { overflow: hidden; }

    .ss-sidebar ~ .main-content {
        margin-left: 0;
        padding: 20px 16px;
    }

    .ss-page-head__title { font-size: 1.35rem; }
}


/* ==========================================================================
   5. TOPBAR AND FOOTER
   The public-site header and the dashboard's slim bar share one family.
   ========================================================================== */
.ss-topbar {
    background: #fff;
    border-bottom: 1px solid var(--ss-gray-border);
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 1px 12px rgba(15, 22, 38, 0.04);
}

.ss-topbar__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    min-height: var(--ss-topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ss-topbar__logo img {
    height: 34px;
    width: auto;
    display: block;
}

.ss-topbar__nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.ss-topbar__links {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ss-topbar__link {
    display: inline-flex;
    align-items: center;
    height: var(--ss-topbar-h);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ss-navy);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.ss-topbar__link:hover,
.ss-topbar__link.active {
    color: var(--ss-accent);
    border-bottom-color: var(--ss-accent);
}

.ss-topbar__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    padding-left: 22px;
    border-left: 1px solid var(--ss-gray-border);
}

.ss-topbar__toggle {
    display: none;
    background: none;
    border: 1px solid var(--ss-gray-border-strong);
    border-radius: var(--ss-radius);
    width: 44px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: var(--ss-navy);
    cursor: pointer;
}

@media (max-width: 991.98px) {
    .ss-topbar__toggle { display: inline-flex; }

    .ss-topbar__nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: #fff;
        border-bottom: 1px solid var(--ss-gray-border);
        box-shadow: var(--ss-shadow);
        padding: 10px 24px 22px;
    }

    .ss-topbar__nav.is-open { display: block; }

    .ss-topbar__links { flex-direction: column; align-items: stretch; gap: 0; }

    .ss-topbar__link {
        height: auto;
        padding: 14px 0;
        border-bottom: 1px solid var(--ss-gray-200);
        border-left: 3px solid transparent;
    }

    .ss-topbar__link:hover,
    .ss-topbar__link.active {
        border-bottom-color: var(--ss-gray-200);
        border-left-color: var(--ss-accent);
        padding-left: 12px;
    }

    .ss-topbar__actions {
        margin: 18px 0 0;
        padding: 0;
        border-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .ss-topbar__actions .ss-btn { width: 100%; }
}

.ss-sidebar ~ .ss-topbar { margin-left: var(--ss-sidebar-w); }

@media (max-width: 991.98px) {
    .ss-sidebar ~ .ss-topbar { margin-left: 0; }
    .ss-sidebar ~ .ss-topbar .ss-topbar__inner { padding-right: 72px; }
}

.ss-topbar__context {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ss-navy-deep);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The facility (or "All facilities") beside the organization name: orange
   text on its soft tint, a hairline in the tint's darker step. Replaces the
   siblings' currency chip. */
.ss-topbar__context-tag {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ss-orange-text);
    background: var(--ss-orange-soft);
    border: 1px solid #F9D3AD;
    border-radius: var(--ss-radius);
    padding: 1px 6px;
    flex: 0 0 auto;
}

.ss-topbar__user {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 260px;
    background: none;
    border: 1px solid var(--ss-gray-border-strong);
    border-radius: var(--ss-radius);
    padding: 7px 12px;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--ss-navy);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.ss-topbar__user:hover { color: var(--ss-accent); border-color: var(--ss-accent); }
.ss-topbar__user i { font-size: 1rem; }

.ss-footer {
    background: var(--ss-navy-deep);
    color: var(--ss-text-on-navy);
    padding: 52px 0 30px;
    font-size: 0.88rem;
}

.ss-footer__logo {
    height: 30px;
    width: auto;
}

.ss-footer__tagline { color: var(--ss-list-on-navy); margin: 14px 0 0; }
.ss-footer a { color: var(--ss-list-on-navy); }
.ss-footer a:hover { color: #fff; }

.ss-footer__top,
.ss-footer__bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.ss-footer__bottom { align-items: center; }

.ss-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.ss-footer__rule { border-color: rgba(255, 255, 255, 0.12); margin: 30px 0 18px; }
.ss-footer__legal { color: var(--ss-text-on-navy); font-size: 0.78rem; margin: 0; }
.ss-footer__links--legal { font-size: 0.78rem; gap: 16px; }



/* ==========================================================================
   6. BUTTONS AND THE BUSY STATE
   The primary is ORANGE with navy text and uppercase tracking (ARCHITECTURE 6).
   Every other verb is the siblings' institutional geometry.
   ========================================================================== */
.ss-btn,
.btn.ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 28px;
    font-family: var(--ss-font);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--ss-radius);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}

.ss-btn-primary {
    background-color: var(--ss-orange);
    border-color: var(--ss-orange);
    color: var(--ss-navy) !important;
}

.ss-btn-primary:hover,
.ss-btn-primary:focus {
    background-color: var(--ss-orange-hover);
    border-color: var(--ss-orange-hover);
    color: var(--ss-navy) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(242, 140, 40, 0.28);
}

.ss-btn-secondary {
    background-color: transparent;
    border-color: var(--ss-navy);
    color: var(--ss-navy) !important;
}

.ss-btn-secondary:hover,
.ss-btn-secondary:focus {
    background-color: var(--ss-navy);
    color: #fff !important;
}

.ss-btn-navy {
    background-color: var(--ss-navy);
    border-color: var(--ss-navy);
    color: #fff !important;
}

.ss-btn-navy:hover,
.ss-btn-navy:focus {
    background-color: var(--ss-navy-deep);
    border-color: var(--ss-navy-deep);
    color: #fff !important;
}

/* White outline for navy grounds (the hero). */
.ss-btn-light {
    background-color: transparent;
    border-color: #fff;
    color: #fff !important;
}

.ss-btn-light:hover,
.ss-btn-light:focus {
    background-color: #fff;
    color: var(--ss-navy-deep) !important;
}

.ss-btn-danger {
    background-color: var(--ss-danger);
    border-color: var(--ss-danger);
    color: #fff !important;
}

.ss-btn-danger:hover,
.ss-btn-danger:focus {
    background-color: #9B1717;
    border-color: #9B1717;
    color: #fff !important;
}

.ss-btn-ghost {
    background: transparent;
    border-color: var(--ss-gray-border);
    color: var(--ss-text-muted) !important;
}

.ss-btn-ghost:hover {
    border-color: var(--ss-navy);
    color: var(--ss-navy) !important;
    background: var(--ss-gray-100);
}

.ss-btn-success {
    background-color: var(--ss-success);
    border-color: var(--ss-success);
    color: #fff !important;
}
.ss-btn-success:hover,
.ss-btn-success:focus {
    background-color: #116A32;
    border-color: #116A32;
    color: #fff !important;
}

/* The quiet destructive verb: red text, hairline until hovered. */
.ss-btn-danger-ghost {
    background: transparent;
    border-color: var(--ss-gray-border);
    color: var(--ss-danger) !important;
}
.ss-btn-danger-ghost:hover,
.ss-btn-danger-ghost:focus {
    border-color: var(--ss-danger);
    background: var(--ss-danger-soft);
    color: var(--ss-danger) !important;
}

/* A pressed ghost toggle. */
.ss-toggle[aria-pressed="true"] {
    border-color: var(--ss-navy);
    color: var(--ss-navy) !important;
    background: var(--ss-accent-soft);
}

.ss-btn-sm { padding: 8px 16px; font-size: 0.72rem; letter-spacing: 0.05em; }
.ss-btn-lg { padding: 17px 38px; font-size: 0.95rem; }
.ss-btn-block { width: 100%; }
.ss-btn-group { display: flex; gap: 14px; flex-wrap: wrap; }

/* --- Bootstrap button re-skin (covers plain asp:Button CssClass="btn ...") --- */
.btn {
    font-family: var(--ss-font);
    font-weight: 600;
    border-radius: var(--ss-radius);
    letter-spacing: 0.01em;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary {
    --bs-btn-bg: var(--ss-orange);
    --bs-btn-border-color: var(--ss-orange);
    --bs-btn-hover-bg: var(--ss-orange-hover);
    --bs-btn-hover-border-color: var(--ss-orange-hover);
    --bs-btn-active-bg: var(--ss-orange-hover);
    --bs-btn-active-border-color: var(--ss-orange-hover);
    --bs-btn-disabled-bg: var(--ss-orange);
    --bs-btn-disabled-border-color: var(--ss-orange);
    --bs-btn-color: var(--ss-navy);
    --bs-btn-hover-color: var(--ss-navy);
    --bs-btn-active-color: var(--ss-navy);
    --bs-btn-disabled-color: var(--ss-navy);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus { box-shadow: 0 6px 16px rgba(242, 140, 40, 0.28); }

.btn-secondary {
    --bs-btn-bg: var(--ss-navy);
    --bs-btn-border-color: var(--ss-navy);
    --bs-btn-hover-bg: var(--ss-navy-deep);
    --bs-btn-hover-border-color: var(--ss-navy-deep);
    --bs-btn-active-bg: var(--ss-navy-deep);
    --bs-btn-active-border-color: var(--ss-navy-deep);
}

.btn-outline-primary {
    --bs-btn-color: var(--ss-navy);
    --bs-btn-border-color: var(--ss-navy);
    --bs-btn-hover-bg: var(--ss-navy);
    --bs-btn-hover-border-color: var(--ss-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ss-navy);
    --bs-btn-active-border-color: var(--ss-navy);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ss-text-muted);
    --bs-btn-border-color: var(--ss-gray-border-strong);
    --bs-btn-hover-bg: var(--ss-navy);
    --bs-btn-hover-border-color: var(--ss-navy);
    --bs-btn-hover-color: #fff;
}

.btn-success { --bs-btn-bg: var(--ss-success); --bs-btn-border-color: var(--ss-success); --bs-btn-hover-bg: #126A33; --bs-btn-hover-border-color: #126A33; }
.btn-danger  { --bs-btn-bg: var(--ss-danger);  --bs-btn-border-color: var(--ss-danger);  --bs-btn-hover-bg: #9B1717; --bs-btn-hover-border-color: #9B1717; }

.btn-link {
    --bs-btn-color: var(--ss-navy);
    --bs-btn-hover-color: var(--ss-accent);
    text-decoration: none;
    font-weight: 600;
}

.btn-check:focus + .btn,
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(61, 79, 176, 0.25); }

/* ---- Busy state --------------------------------------------------------
   Applied by spotsmart.js. `disabled` is NEVER set on a WebForms submit
   control: a disabled submit is dropped from the form's entry list and the
   server-side handler silently never fires. The script locks with a class
   (pointer-events: none) and capture-phase click suppression instead. */
.ss-btn-locked {
    pointer-events: none !important;
    cursor: progress !important;
    opacity: 0.6;
    position: relative;
    user-select: none;
}

.ss-btn-locked.ss-btn-locked--spin::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    width: 13px;
    height: 13px;
    margin-top: -7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ss-spin 0.65s linear infinite;
    opacity: 0.9;
}

@keyframes ss-spin { to { transform: rotate(360deg); } }

body.ss-submitting { cursor: progress; }

.ss-progress-top {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--ss-orange);
    z-index: 2147483647;
    transition: width 0.35s ease;
    pointer-events: none;
}

body.ss-submitting .ss-progress-top {
    width: 82%;
    transition: width 8s cubic-bezier(0.1, 0.6, 0.2, 1);
}


/* ==========================================================================
   7. FORMS: LABELS, INPUTS, FIELDS, READ MODE, MONEY INPUT
   ========================================================================== */
.form-label,
.ss-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ss-text-muted);
    margin-bottom: 6px;
}

.form-control,
.form-select,
.input-group-text {
    font-family: var(--ss-font);
    font-size: 0.925rem;
    color: var(--ss-text-dark);
    background-color: #fff;
    border: 1px solid var(--ss-gray-border-strong);
    border-radius: var(--ss-radius);
    padding: 0.55rem 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ss-navy);
    box-shadow: 0 0 0 3px rgba(26, 34, 48, 0.10);
}

.form-control::placeholder { color: #9CA3AF; }

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--ss-gray-100);
    color: var(--ss-text-muted);
}

.input-group-text {
    background-color: var(--ss-gray-100);
    color: var(--ss-text-muted);
    font-weight: 600;
}

.form-text { font-size: 0.8rem; color: var(--ss-text-muted); }

/* ==================================================================================================
   THE DOUBLE CHECKBOX

   <asp:CheckBox CssClass="form-check-input" /> does NOT put that class on the <input>. When a
   CheckBox has a CssClass, Text, or any attribute, ASP.NET wraps it:

       <span class="form-check-input"><input type="checkbox" ... /></span>

   Bootstrap then draws its 1em bordered box on the WRAPPER and the browser draws a native checkbox
   inside it: two checkboxes, one of which does nothing. Neutralise the wrapper and let the real
   input carry the styling. The selector is stated twice because Bootstrap's
   .form-switch .form-check-input (0,2,0) outranks span.form-check-input (0,1,1).
   ================================================================================================== */
span.form-check-input,
.form-switch span.form-check-input {
    all: unset;
    display: inline-flex;
    align-items: center;
}

span.form-check-input > input[type="checkbox"],
span.form-check-input > input[type="radio"] {
    width: 1em;
    height: 1em;
    margin: 0;
    accent-color: var(--ss-accent);
}

.form-check-input:checked {
    background-color: var(--ss-accent);
    border-color: var(--ss-accent);
}

.form-check-input:focus {
    border-color: var(--ss-accent);
    box-shadow: 0 0 0 3px rgba(61, 79, 176, 0.25);
}

/* A field group whose control sits at the bottom, so inputs in one row line
   up even when one label wraps to two lines and its neighbour does not. */
.ss-field {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ss-field > .form-control,
.ss-field > .form-select,
.ss-field > .input-group,
.ss-field > .ss-codebox { margin-top: auto; }

/* A field with no label of its own (a select inside a table row): the control
   sits where the label would, nothing is pushed to the bottom. */
.ss-field--bare { height: auto; }
.ss-field--bare > .form-control,
.ss-field--bare > .form-select,
.ss-field--bare > .input-group { margin-top: 0; }

.ss-codebox {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ss-codebox__input {
    flex: 0 0 7rem;
    max-width: 7rem;
    text-transform: uppercase;
}

/* TEXT_CASE = UPPER: the glyphs a person types render in capitals so the screen agrees with
   what the save writes. Rendering only; the writers do the truth. Inputs that stay verbatim
   (codes, emails, web addresses, references, dates, numbers) opt out. */
.ss-upper .form-control:not([data-ss-verbatim]),
.ss-upper textarea.form-control:not([data-ss-verbatim]) { text-transform: uppercase; }
.ss-upper input[type="date"],
.ss-upper input[type="number"],
.ss-upper input[data-ss-money],
.ss-upper .ss-codebox__input { text-transform: none; }

.ss-codebox__auto {
    margin-bottom: 0;
    white-space: nowrap;
}

.ss-codebox__auto .form-check-label {
    font-size: 0.82rem;
    color: var(--ss-text-muted);
    margin-left: 0.35rem;
}

.ss-help {
    font-size: 0.76rem;
    color: var(--ss-text-muted);
    margin-top: 0.25rem;
}

/* Section rule inside a form: a thin line and a small-caps label, never a
   card nested inside another card. */
.ss-fset { padding: 0; margin: 0 0 2rem; border: 0; }
.ss-fset:last-child { margin-bottom: 0.5rem; }

.ss-fset__legend {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ss-text-muted);
    padding: 0 0 0.5rem;
    margin: 0 0 1.25rem;
    width: 100%;
    border-bottom: 1px solid var(--ss-gray-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ss-fset__legend i { opacity: 0.8; }

/* Stacked blocks inside a fieldset breathe by one g-3 gutter (R8).
   Bootstrap's .row carries margin-top: calc(-1 * var(--bs-gutter-y)) and each
   of its columns +var(--bs-gutter-y), so two sibling rows sit with NO gap
   between them: the second row's negative margin eats its columns' top
   gutter. Cancelling that negative margin leaves exactly the 1rem g-3 gutter.
   A bare .ss-field has no gutter of its own, so it takes the 1rem itself.
   Scoped to .ss-fset: criteria cards, confirm panels, pickers and the apply
   row keep their own spacing. 0,2,0 beats .row and loses to Bootstrap's
   .mt-0 !important, which is why no row inside a fieldset carries mt-0. */
.ss-fset .row + .row { margin-top: 0; }
.ss-fset .row + .ss-field { margin-top: 1rem; }
.ss-fset .ss-field + .row { margin-top: 0; }
.ss-fset .ss-field + .ss-field { margin-top: 1rem; }

/* A locked-field note. */
.ss-locked {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font-size: 0.78rem;
    color: var(--ss-warning);
    background: var(--ss-warning-soft);
    border: 1px solid #FDE68A;
    border-radius: var(--ss-radius);
    padding: 0.6rem 0.75rem;
    margin-top: 0.4rem;
    line-height: 1.5;
}

.ss-locked i { margin-top: 0.15rem; }

/* The document grid replaces the Bootstrap row on record screens. */
.ss-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem 1.25rem;
}
.ss-doc-grid .ss-field--wide { grid-column: 1 / -1; }
.ss-doc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
.ss-doc-grid--3 .ss-field { height: auto; }
.ss-doc-grid--3 .ss-field--2 { grid-column: span 2; }
@media (max-width: 991.98px) {
    .ss-doc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .ss-doc-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .ss-doc-grid--3 .ss-field--2 { grid-column: auto; }
}


/* A CheckBoxList rendered RepeatLayout="Flow": the pairs wrap as a row. ROW gap only:
   the input and the label are two separate flex items, so the pair is held together by
   the label's own margins and the wide space always falls BETWEEN pairs. */
.ss-checklist {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 0;
}

.ss-checklist br { display: none; }

.ss-checklist label {
    font-size: .88rem;
    color: var(--ss-gray-700);
    margin-left: .4rem;
    margin-right: 1.5rem;
    cursor: pointer;
}

.ss-checklist input[type="checkbox"] {
    accent-color: var(--ss-navy);
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

/* A segmented radio group: the radios are hidden and the labels are the control. */
.ss-segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: var(--ss-gray-100); border: 1px solid var(--ss-gray-border); border-radius: var(--ss-radius); }
.ss-segmented input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ss-segmented label { margin: 0; padding: 6px 12px; font-size: .8rem; font-weight: 600; color: var(--ss-text-muted); border-radius: calc(var(--ss-radius) - 2px); cursor: pointer; }
.ss-segmented input[type="radio"]:checked + label { background: #fff; color: var(--ss-navy-deep); box-shadow: 0 1px 2px rgba(15, 22, 38, .12); }
.ss-segmented input[type="radio"]:focus-visible + label { outline: 2px solid var(--ss-accent); outline-offset: 1px; }
.ss-segmented input[type="radio"]:disabled + label { opacity: .5; cursor: not-allowed; }

/* ---- Choice cards (the sign-up wizard's sign-in method) ---------------------
   Two stacked cards, each one whole clickable target. A bare radio beside a label gives a
   14px hit area for a decision this important; the whole card is the control. The selected
   card carries the orange rule, the one place the brand colour marks "chosen". */
.ss-choice { display: block; margin-bottom: 0.85rem; }

.ss-choice__card {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    border: 1px solid var(--ss-gray-border-strong);
    border-left: 3px solid var(--ss-gray-border-strong);
    border-radius: var(--ss-radius);
    padding: 1rem 1.1rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ss-choice__card:hover { border-color: var(--ss-accent); background: var(--ss-gray-100); }

.ss-choice__card.is-selected {
    border-color: var(--ss-orange);
    border-left-color: var(--ss-orange);
    background: var(--ss-orange-soft);
}

.ss-choice__radio { margin-top: 0.2rem; accent-color: var(--ss-orange-text); width: 1rem; height: 1rem; }
.ss-choice__body { min-width: 0; }
.ss-choice__title { font-size: 0.95rem; font-weight: 700; color: var(--ss-navy-deep); margin: 0 0 0.15rem; }
.ss-choice__note  { font-size: 0.82rem; color: var(--ss-text-muted); margin: 0; line-height: 1.5; }

/* The panel that opens under the selected option. */
.ss-choice__detail {
    padding: 1.25rem 0 0.25rem 2.5rem;
    margin-bottom: 0.85rem;
}

@media (max-width: 575.98px) { .ss-choice__detail { padding-left: 0; } }

/* Show/hide control, sitting inside the password field's own border rather than beside it. */
.ss-pw { position: relative; }
.ss-pw .form-control { padding-right: 2.75rem; }

.ss-pw__toggle {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--ss-text-muted);
    cursor: pointer;
}

.ss-pw__toggle:hover { color: var(--ss-navy); }

/* Password requirements list. Each line turns from muted to success as it is met: the
   rules are stated up front rather than revealed one rejection at a time. */
.ss-pwreq { list-style: none; margin: 0.75rem 0 0; padding: 0; }

.ss-pwreq li {
    font-size: 0.8rem;
    color: var(--ss-text-muted);
    padding: 0.15rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ss-pwreq li i { width: 0.9rem; font-size: 0.7rem; }
.ss-pwreq li.is-met { color: var(--ss-success); }

.ss-pwmatch { font-size: 0.8rem; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.ss-pwmatch.is-ok { color: var(--ss-success); }
.ss-pwmatch.is-bad { color: var(--ss-danger); }

/* ==========================================================================
   READ MODE

   A record being READ should look like a RECORD, not like a switched-off
   form. A page of greyed-out inputs reads as "broken" or "you lack
   permission", when in fact it is simply not being edited.

   ONE SET OF MARKUP SERVES BOTH. The page writes its fields once, as inputs.
   In read mode the server renders a marker element (data-ss-readmode) and
   spotsmart.js replaces each input in a [data-ss-readpane] with its VALUE as
   a .ss-ro block, dropping the empty ones. Duplicated read/edit markup is the
   alternative, and it drifts: a field added to the edit half and forgotten in
   the read half is invisible until somebody notices their data "disappeared".

   The script is PRESENTATION ONLY. The server independently sets ReadOnly on
   every control and hides Save: that is the enforcement, and it holds with
   scripting disabled.
   ========================================================================== */
.ss-ro {
    font-size: 0.94rem;
    color: var(--ss-navy-deep);
    font-weight: 500;
    padding: 0.15rem 0 0.35rem;
    min-height: 1.6rem;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-line;
}

.ss-ro--money {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    font-weight: 600;
}

.ss-ro--empty { color: var(--ss-text-muted); }

.ss-ro--mono {
    font-family: var(--ss-font-mono);
    font-size: 0.84rem;
}

/* A field with nothing in it is REMOVED in read mode, not shown blank.
   The fields that carry a value are the record. They come back the moment
   Edit is pressed. */
.ss-read .ss-field--empty { display: none; }

/* A field GATED by a reveal-when select (spotsmart.js, data-ss-reveal-when: the
   Other box beside a make or body type select) is hidden until the select says
   the word, in edit mode and read mode alike. Presentation only: the hidden box
   still posts and the server reads it whenever the select says the word; with
   scripting off the class is never added and the box is simply visible. */
.ss-field--gated { display: none; }

/* A section whose every field was empty goes too, or read mode leaves a
   legend with nothing under it. */
.ss-read .ss-fset.ss-field--empty { display: none; }

/* In read mode the labels stay: they are what makes the value mean something.
   They only tighten up, because there is no input box to clear. */
.ss-read .form-label { margin-bottom: 2px; }

/* A control the SERVER made read-only, still rendered as an input (the script
   did not run, or the field is deliberately never editable). It must not look
   editable, and must not look broken either. */
.ss-readonly,
.form-control.ss-readonly {
    background-color: var(--ss-gray-100);
    border-color: var(--ss-gray-border);
    color: var(--ss-text-muted);
    cursor: default;
}

/* A checkbox in read mode: shown only when ticked, and not clickable. */
.ss-ro-check { opacity: 1; pointer-events: none; }

/* Record identity line under the title. */
.ss-idline {
    margin-top: 0.4rem;
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 1.25rem;
    align-items: baseline;
}

.ss-idline__k {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ss-text-muted);
    margin-right: 0.45rem;
}

.ss-idline__v { color: var(--ss-navy-deep); font-weight: 600; }
.ss-idline__v--mono { font-family: var(--ss-font-mono); font-size: 0.82rem; font-weight: 500; }

/* ---- Money input ----------------------------------------------------------
   <div class="input-group ss-money"><span class="ss-unit">$</span>
   <asp:TextBox CssClass="form-control ss-money__input" data-ss-money data-ss-decimals="2" /></div>
   Put the span after the input and add .ss-money--trailing for a trailing symbol. */
.ss-unit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: 0 0.6rem;
    border: 1px solid var(--ss-gray-border-strong);
    background: var(--ss-gray-200);
    color: var(--ss-navy);
    font-weight: 700;
    font-size: 0.9rem;
    /* A three-character symbol must not stretch the cell into the input's
       space, and a one-character one must not let the cell collapse. */
    white-space: nowrap;
}

/* Fuse the unit to the field: one shared border, square inner corners. */
.input-group > .ss-unit:first-child {
    border-right: 0;
    border-radius: var(--ss-radius) 0 0 var(--ss-radius);
}

.input-group > .ss-unit:last-child {
    border-left: 0;
    border-radius: 0 var(--ss-radius) var(--ss-radius) 0;
}

.input-group > .form-control,
.input-group > .form-select { border-radius: var(--ss-radius); }

.ss-money:focus-within .ss-unit { border-color: var(--ss-navy); }

.ss-money:focus-within .form-control {
    border-color: var(--ss-navy);
    box-shadow: 0 0 0 3px rgba(26, 34, 48, 0.10);
}

.ss-money__input { text-align: right; }

.ss-unit-select { flex: 0 0 5rem; max-width: 5rem; }

/* The AM/PM select of a date-time trio: a narrow column, so less padding. */
.ss-ampm { padding-left: 0.55rem; padding-right: 1.6rem; background-position: right 0.45rem center; }

/* The popover calendar of a data-ss-date box (spotsmart.js mountDatePickers).
   z-index 1060 sits above the modal backdrop (1050) in case a date box ever
   lives in a client modal. The title capitalizes, so a lower-case Spanish
   month reads as a title while the lang value stays as the language writes it. */
.ss-field--cal { position: relative; }
.ss-cal {
    position: absolute; top: 100%; left: 0; z-index: 1060;
    margin-top: 4px; width: 17.5rem; padding: 0.6rem;
    background: #fff; border: 1px solid var(--ss-gray-border-strong); border-radius: var(--ss-radius-lg);
    box-shadow: 0 10px 30px rgba(15, 22, 38, 0.14);
}
.ss-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.ss-cal__title { font-size: 0.8rem; font-weight: 700; color: var(--ss-navy-deep); text-transform: capitalize; }
.ss-cal__nav { border: 0; background: transparent; color: var(--ss-text-muted); width: 2rem; height: 2rem; border-radius: var(--ss-radius); cursor: pointer; }
.ss-cal__nav:hover { background: var(--ss-gray-200); color: var(--ss-navy); }
.ss-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ss-cal__dow { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ss-text-muted); text-align: center; padding: 0.2rem 0; }
.ss-cal__day { border: 0; background: transparent; font: inherit; font-size: 0.82rem; color: var(--ss-text-dark); height: 2.1rem; border-radius: var(--ss-radius); cursor: pointer; }
.ss-cal__day:hover { background: var(--ss-gray-200); }
.ss-cal__day.is-outside { color: #9CA3AF; }
.ss-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--ss-orange); }
.ss-cal__day.is-selected { background: var(--ss-navy); color: #fff; }


/* ==========================================================================
   8. TABLES, NUMERIC ALIGNMENT, CLICKABLE ROWS, TOTALS
   ========================================================================== */
.ss-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ss-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ss-table thead th {
    background: var(--ss-gray-soft);
    color: var(--ss-navy);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--ss-gray-border);
    white-space: nowrap;
}

.ss-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ss-gray-200);
    vertical-align: middle;
}

.ss-table tbody tr:last-child td { border-bottom: 0; }
.ss-table tbody tr:hover td { background: var(--ss-gray-100); }

.ss-table .ss-num,
.ss-table .text-end { text-align: right; }

/* A totals row is not just bold: it carries a rule above it, the way a
   printed statement does, so the eye finds it without reading. */
.ss-table tfoot td,
.ss-table tr.ss-total td {
    font-weight: 700;
    color: var(--ss-navy-deep);
    border-top: 2px solid var(--ss-navy);
    background: var(--ss-gray-100);
}

/* Rows that open on click (the shared script activates the row's data-ss-rowlink). */
.ss-table tbody tr[data-ss-rowclick] { cursor: pointer; }
.ss-table tbody tr[data-ss-rowclick]:hover td { background: var(--ss-accent-soft); }

@media (max-width: 767.98px) {
    /* Tables must never blow out the viewport. The wrapper's own overflow-x
       does the work; never full-bleed it with negative margins. */
    .ss-table-wrap,
    .table-responsive { max-width: 100%; }

    .ss-table,
    .table { font-size: 0.82rem; }

    .ss-table thead th,
    .table thead th,
    .ss-table tbody td,
    .table tbody td { padding: 0.6rem 0.7rem; }
}



/* ==========================================================================
   9. CARDS (PANELS), KPI TILES, DEFINITION ROWS, CHIPS, METER
   ========================================================================== */
.ss-card {
    background: #fff;
    border: 1px solid var(--ss-gray-border);
    border-top: 3px solid var(--ss-navy);
    border-radius: var(--ss-radius-lg);
    margin-bottom: 24px;
}

.ss-card--plain { border-top-color: var(--ss-gray-border); }
.ss-card--accent { border-top-color: var(--ss-accent); }
.ss-card--orange { border-top-color: var(--ss-orange); }

.ss-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ss-gray-border);
}

.ss-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ss-navy);
    margin: 0;
}

.ss-card__title i { color: var(--ss-accent); font-size: 0.9rem; }
.ss-card__title .ss-badge { letter-spacing: 0.04em; }

/* A section description inside a card head, wrapping under the title. */
.ss-card__lead { flex-basis: 100%; font-size: 0.82rem; color: var(--ss-text-muted); margin: 0; }

.ss-card__body { padding: 20px; }
.ss-card__body--flush { padding: 0; }

.ss-card__foot {
    padding: 14px 20px;
    border-top: 1px solid var(--ss-gray-border);
    background: var(--ss-gray-100);
}

/* An in-place confirmation is a question, not another record card: no navy top
   rule, a 3px left rule in the semantic colour, the soft ground behind it. */
.ss-card.ss-card-confirm {
    border-top: 1px solid var(--ss-gray-border);
    border-left: 3px solid var(--ss-danger);
    background: var(--ss-danger-soft);
    margin-bottom: 16px;
}
.ss-card.ss-card-confirm--warning {
    border-left-color: var(--ss-warning);
    background: var(--ss-warning-soft);
}
.ss-card-confirm .ss-card__body { padding: 16px 20px; }
.ss-card-confirm p strong { color: var(--ss-navy-deep); }
.ss-card-confirm__refusal {
    font-size: 0.9rem;
    color: var(--ss-text-dark);
    margin: 0 0 12px;
    padding: 8px 12px;
    background: #fff;
    border-left: 3px solid var(--ss-gray-border-strong);
}

/* KPI tile */
.ss-kpi {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--ss-gray-border);
    border-top: 3px solid var(--ss-navy);
    border-radius: var(--ss-radius-lg);
    padding: 20px;
    height: 100%;
    transition: border-top-color 0.2s ease, box-shadow 0.2s ease;
}

.ss-kpi:hover { border-top-color: var(--ss-accent); box-shadow: var(--ss-shadow-sm); }

.ss-kpi__glyph {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ss-gray-border);
    border-radius: var(--ss-radius);
    color: var(--ss-navy);
    font-size: 1rem;
    background: var(--ss-gray-soft);
}

.ss-kpi__body { min-width: 0; }

.ss-kpi__label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ss-text-muted);
    margin: 0 0 6px;
    line-height: 1.3;
}

.ss-kpi__value {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ss-navy-deep);
    margin: 0;
    line-height: 1.1;
}

.ss-kpi__meta { font-size: 0.78rem; color: var(--ss-text-muted); margin: 4px 0 0; }

.ss-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 991.98px) { .ss-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
    .ss-kpi-strip { grid-template-columns: minmax(0, 1fr); }
    .ss-kpi { padding: 16px; gap: 12px; }
    .ss-kpi__value { font-size: 1.25rem; }
}

/* A tile that is a filter. */
a.ss-kpi,
a.ss-kpi:hover { color: inherit; text-decoration: none; }
.ss-kpi--active { border-top-color: var(--ss-accent); background: var(--ss-accent-soft); }
.ss-kpi--alert { border-top-color: var(--ss-danger); }
.ss-kpi--alert .ss-kpi__value { color: var(--ss-negative); }
.ss-kpi__value--sm { font-size: 1.15rem; }
.ss-kpi__value--negative { color: var(--ss-negative); }

/* Definition rows (key / value) */
.ss-defs { margin: 0; }

.ss-def {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ss-gray-200);
}

.ss-def:last-child { border-bottom: 0; }

.ss-def__k {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ss-text-muted);
}

.ss-def__v {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ss-navy-deep);
    text-align: right;
}
.ss-def__v.ss-num--negative { color: var(--ss-negative); }

/* Status quick-filter chips (GET links; the querystring is the saved view). */
.ss-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.ss-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--ss-gray-border);
    border-radius: var(--ss-radius);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ss-text-muted);
    text-decoration: none;
}
.ss-chip:hover { border-color: var(--ss-navy); color: var(--ss-navy); background: var(--ss-gray-100); }
.ss-chip--active,
.ss-chip--active:hover { background: var(--ss-navy); border-color: var(--ss-navy); color: #fff; }
.ss-chip__count {
    font-size: 0.68rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    border-radius: var(--ss-radius);
    background: var(--ss-gray-200);
    color: var(--ss-text-muted);
}
.ss-chip--active .ss-chip__count { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* Small shared text helpers. */
.ss-apply-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; }
.ss-apply-row .ss-field { margin: 0; }
.ss-balance-line { font-size: 0.9rem; color: var(--ss-gray-700); margin: 0.35rem 0 0; }
.ss-balance-line strong { color: var(--ss-ink); }
.ss-result-count { font-size: 0.85rem; color: var(--ss-gray-700); margin: 0.15rem 0 0; }
.ss-doc-sub { font-size: 0.78rem; color: var(--ss-gray-700); margin-top: 0.15rem; }

/* State words. */
.ss-state--open { color: var(--ss-warning); font-weight: 600; }
.ss-state--over { color: var(--ss-danger);  font-weight: 600; }
.ss-state--done { color: var(--ss-success); font-weight: 600; }

/* A live computed sentence under a table or a form: a statement, not a hint. */
.ss-statement { font-size: 0.9rem; color: var(--ss-text-dark); margin: 12px 0 0; }
.ss-statement strong { color: var(--ss-navy-deep); font-variant-numeric: tabular-nums; }

/* A past Due / Valid Until / Expires. */
.ss-due--late { color: var(--ss-negative); font-weight: 600; }

/* Occupancy meter: used in navy over a gray track, the reserved share as an
   accent band along the bottom. 6rem x 6px. */
.ss-meter {
    display: inline-block;
    position: relative;
    width: 6rem;
    height: 6px;
    margin-right: 8px;
    vertical-align: middle;
    background: var(--ss-gray-200);
    border-radius: var(--ss-radius);
    overflow: hidden;
}
.ss-meter__used,
.ss-meter__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ss-navy); }
.ss-meter__reserved { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--ss-accent); }

/* A document region (reports, statements, the record screens): min-width 0 so
   a wide table scrolls inside its wrapper instead of stretching the grid. */
.ss-doc { min-width: 0; }


/* ==========================================================================
   10. BADGES / STATUS PILLS
   The border colours are literals, one per soft tint.
   ========================================================================== */
.ss-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 4px 9px;
    border-radius: var(--ss-radius);
    border: 1px solid transparent;
    white-space: nowrap;
}

.ss-badge-success { background: var(--ss-success-soft); color: var(--ss-success);     border-color: #BBF7D0; }
.ss-badge-warning { background: var(--ss-warning-soft); color: var(--ss-warning);     border-color: #FDE68A; }
.ss-badge-danger  { background: var(--ss-danger-soft);  color: var(--ss-danger);      border-color: #FECACA; }
.ss-badge-neutral { background: var(--ss-gray-soft);    color: var(--ss-text-muted);  border-color: var(--ss-gray-border); }
.ss-badge-navy    { background: var(--ss-info-soft);    color: var(--ss-navy);        border-color: #CDD2DF; }
/* The in-progress states: Requested, Pending, Submitted. Same face as navy. */
.ss-badge-info    { background: var(--ss-info-soft);    color: var(--ss-navy);        border-color: #CDD2DF; }
.ss-badge-accent  { background: var(--ss-accent-soft);  color: var(--ss-accent-hover);border-color: #C9CFF0; }
.ss-badge-orange  { background: var(--ss-orange-soft);  color: var(--ss-orange-text); border-color: #F9D3AD; }

/* A badge for something that used to matter and no longer does: retired, superseded, closed. */
.ss-badge-muted { background: var(--ss-gray-soft); color: var(--ss-text-muted); border-color: var(--ss-gray-border); }

/* A counted state on a light card: the muted palette plus tabular figures. */
.ss-badge-holding {
    background: var(--ss-gray-soft);
    color: var(--ss-text-muted);
    border-color: var(--ss-gray-border);
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   11. ALERTS (there are no toasts)
   Feedback is a server-rendered asp:Panel with Bootstrap alert classes, in
   the page flow; data-ss-autodismiss on success only. Errors never dismiss.
   ========================================================================== */
.ss-alert,
.alert {
    border-radius: var(--ss-radius);
    border: 1px solid var(--ss-gray-border);
    border-left-width: 3px;
    font-size: 0.9rem;
    padding: 0.85rem 1.1rem;
}

.ss-alert { margin-bottom: 1rem; transition: opacity 0.4s ease; }
.ss-alert--fading { opacity: 0; }

.ss-alert-success, .alert-success { background: var(--ss-success-soft); border-left-color: var(--ss-success); color: #14532D; }
.ss-alert-danger,  .alert-danger  { background: var(--ss-danger-soft);  border-left-color: var(--ss-danger);  color: #7F1D1D; }
.ss-alert-warning, .alert-warning { background: var(--ss-warning-soft); border-left-color: var(--ss-warning); color: #78350F; }
.ss-alert-info,    .alert-info    { background: var(--ss-info-soft);    border-left-color: var(--ss-navy);    color: var(--ss-navy-deep); }
.alert-primary                    { background: var(--ss-info-soft);    border-left-color: var(--ss-navy);    color: var(--ss-navy-deep); }



/* ==========================================================================
   12. MODALS AND THE IN-PLACE CONFIRMATION

   A server-rendered modal: the backdrop and card are an asp:Panel whose
   Visible drives everything, so there is no show/hide script and nothing to
   re-open after a postback. A Bootstrap modal containing an AutoPostBack
   control "fights ViewState and loses", because the markup comes back with
   the modal closed. A panel that renders only when it should be open cannot
   have that problem, and it survives an AutoPostBack inside it.

   Never declare a fixed-position modal inside a Bootstrap .tab-pane: a fixed
   child of a display:none ancestor does not render. No ancestor of a modal
   may set transform, filter, perspective or contain. Every modal panel sets
   DefaultButton so Enter fires its own primary.
   ========================================================================== */
.ss-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1rem 2rem;
    background: rgba(15, 22, 38, 0.38);
    overflow-y: auto;
}

.ss-modal {
    width: 100%;
    max-width: 34rem;
    background: var(--ss-white);
    border: var(--ss-hairline);
    border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow-lg);
}

.ss-modal--wide { max-width: 52rem; }
.ss-modal--line { max-width: 44rem; }
.ss-modal--line [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--ss-danger); }
.ss-modal--line .is-over { color: var(--ss-danger); font-weight: 600; }
.ss-modal--line .ss-modal__head { display: flex; align-items: center; gap: 1rem; }

/* The dialog container takes focus only as a parking spot (tabindex=-1); the ring
   belongs to its controls. */
.ss-modal:focus { outline: none; }

.ss-modal__head {
    padding: 1rem 1.25rem;
    border-bottom: var(--ss-hairline);
}

.ss-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ss-navy-deep);
}

.ss-modal__title i { margin-right: .5rem; }

.ss-modal__body { padding: 1.25rem; }

.ss-modal__foot {
    display: flex;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-top: var(--ss-hairline);
    background: var(--ss-gray-100);
    border-radius: 0 0 var(--ss-radius-lg) var(--ss-radius-lg);
}

/* The client-opened modal (zero-postback editing of a fieldset): an asp:Panel
   CssClass="ss-clientmodal ss-keep-live" holding a .ss-modal. Collapsed by the
   script; opened as the backdrop (the script adds ss-modal-backdrop and is-open);
   inline when neither class is present (script off, or the server's is-open after
   a postback from inside it). */
.ss-clientmodal.is-collapsed { display: none; }
.ss-clientmodal:not(.ss-modal-backdrop) { margin-top: 10px; }
.ss-clientmodal:not(.ss-modal-backdrop) .ss-modal { position: static; max-width: none; box-shadow: none; }
.ss-clientmodal__problem { margin: 0 0 0.75rem; color: var(--ss-danger); font-size: 0.88rem; }

/* The Bootstrap modal, allowed only when nothing inside it posts back with
   AutoPostBack (a password box; a criteria dialog). A plain <div> so Bootstrap
   finds the literal id. */
.ss-rpt-params .modal-dialog { max-width: 52rem; }
.ss-rpt-params .modal-content { border: var(--ss-hairline); border-radius: var(--ss-radius-lg); box-shadow: var(--ss-shadow-lg); }
.ss-rpt-params .modal-header { padding: 1rem 1.25rem; border-bottom: var(--ss-hairline); }
.ss-rpt-params .modal-title { font-size: 1rem; font-weight: 600; color: var(--ss-navy-deep); }
.ss-rpt-params .modal-body { padding: 1.25rem; }
.ss-rpt-params .modal-body .alert { margin-bottom: 1rem; }
.ss-rpt-params .modal-footer { padding: 1rem 1.25rem; border-top: var(--ss-hairline); background: var(--ss-gray-100); border-radius: 0 0 var(--ss-radius-lg) var(--ss-radius-lg); }
@media (max-width: 575.98px) { .ss-rpt-params .ss-field--wide { min-width: 0; } }


/* ==========================================================================
   13. THE SEARCH PICKER
   A field that names the chosen record, one ghost verb (Choose / Change), and
   a server-rendered search modal. No client-side filtering; the results table
   is raw HTML in a ViewState-off Literal. Every record chooser is one of these;
   no DropDownList ever lists records.
   ========================================================================== */
.ss-picker { min-width: 0; }
.ss-picker > .ss-picker__row { margin-top: auto; }

.ss-picker__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-height: 38px;
}

.ss-picker__name {
    font-weight: 600;
    color: var(--ss-navy-deep);
    text-decoration: none;
}
.ss-picker__name:hover { color: var(--ss-accent); text-decoration: underline; }

.ss-picker__code {
    font-family: var(--ss-font-mono);
    font-size: 0.8rem;
    color: var(--ss-text-muted);
}

/* "No account", "Choose a facility", "Vehicle removed": a state, not a value. */
.ss-picker__none {
    color: var(--ss-text-muted);
    font-style: italic;
}

/* The search box and its button, bottoms aligned. */
.ss-picker__search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .75rem;
    align-items: end;
}
.ss-picker__search .ss-field { margin: 0; }
@media (max-width: 575.98px) {
    .ss-picker__search { grid-template-columns: minmax(0, 1fr); }
}

.ss-picker__results { margin-top: 1rem; }
.ss-picker__results .ss-table thead th { padding: 0.5rem 0.75rem; }
.ss-picker__results .ss-table tbody td { padding: 0.5rem 0.75rem; font-size: 0.85rem; }
.ss-picker__results .ss-table .ss-badge { margin-left: .35rem; }

.ss-picker__glyph {
    color: var(--ss-text-muted);
    font-size: 0.8rem;
    margin-right: .4rem;
}

/* "Plate", "VIN", "Space 2-14": why the row matched. */
.ss-picker__matched {
    font-size: 0.76rem;
    color: var(--ss-text-muted);
}

.ss-picker__cap {
    font-size: 0.8rem;
    margin: .5rem 0 0;
}

.ss-pickbox { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-height: 38px; padding: 0 4px 0 .75rem; background: #fff; border: 1px solid var(--ss-gray-border-strong); border-radius: var(--ss-radius); transition: border-color .15s, box-shadow .15s; }
.ss-field > .ss-pickbox { margin-top: auto; }
.ss-pickbox:focus-within { border-color: var(--ss-navy); box-shadow: 0 0 0 3px rgba(26, 34, 48, .10); }
.ss-pickbox__glyph { color: var(--ss-accent); font-size: 0.9rem; flex: 0 0 auto; width: 1.1rem; text-align: center; }
.ss-pickbox--empty .ss-pickbox__glyph { color: var(--ss-text-muted); }
.ss-pickbox__text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .925rem; font-weight: 500; color: var(--ss-navy-deep); }
.ss-pickbox__text .ss-picker__name { color: inherit; font-weight: inherit; text-decoration: none; }
.ss-pickbox__text .ss-picker__name:hover { color: var(--ss-accent); text-decoration: underline; }
.ss-pickbox .ss-picker__code { display: none; }
.ss-pickbox__act { margin-left: auto; flex: 0 0 auto; padding: 6px 10px; font-size: .66rem; border-color: transparent; }
.ss-pickbox__warn { color: var(--ss-danger); font-weight: 500; }
.ss-read .ss-pickbox { border: 0; padding: 0; min-height: 0; background: transparent; box-shadow: none; }
.ss-read .ss-pickbox__text { white-space: normal; font-size: .94rem; padding: .15rem 0 .35rem; line-height: 1.5; }
.ss-read .ss-pickbox__text .ss-picker__name:hover { color: var(--ss-accent); text-decoration: underline; }
/* Any host that still shows the code outside a box. */
.ss-picker__code { display: block; font-size: .74rem; line-height: 1.3; }
/* The muted italic keeps its own weight inside the 500-weight text span. */
.ss-picker__none { font-weight: 400; }


/* ==========================================================================
   14. TABS, EMPTY STATE, PAGINATION
   ========================================================================== */
/* Square, hairline, no fill. The active tab is marked by a 2px rule, not a
   box: the same restraint as everything else. */
.ss-tabs {
    border-bottom: 1px solid var(--ss-gray-border);
    gap: 0;
    flex-wrap: nowrap;

    /* overflow-x lets a long tab strip scroll sideways on a narrow screen.
       overflow-y MUST be stated with it: per the CSS overflow spec, setting one
       axis to anything but `visible` computes the other from `visible` to
       `auto`, so `overflow-x: auto` alone quietly enables VERTICAL scrolling
       too. The tab content is a couple of pixels taller than its box (the
       active tab's 2px rule), which is enough to trip it, and the result is a
       full-height scrollbar with up/down arrows floating at the right of the
       tab strip. */
    overflow-x: auto;
    overflow-y: hidden;
}

.ss-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--ss-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.7rem 1.15rem;
    white-space: nowrap;
}

.ss-tabs .nav-link:hover { color: var(--ss-navy); background: transparent; }

.ss-tabs .nav-link.active {
    color: var(--ss-navy);
    background: transparent;
    border-bottom-color: var(--ss-navy);
}

.ss-tabs .nav-link i { margin-right: 0.4rem; opacity: 0.75; }

.ss-tabpane { padding-top: 1.75rem; }

.ss-tabpane__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}
.ss-tabpane__head > .ss-toggle { margin-left: auto; }

.ss-tabpane__title { font-size: 0.95rem; font-weight: 700; color: var(--ss-navy); margin: 0 0 0.3rem; }

.ss-tabpane__sub {
    font-size: 0.82rem;
    color: var(--ss-text-muted);
    margin: 0 0 1.5rem;
    max-width: 82ch;
    line-height: 1.55;
}

@media (max-width: 575.98px) {
    .ss-tabs .nav-link { padding: 0.7rem 0.8rem; }
    .ss-tabs .nav-link i { display: none; }
}

/* Empty state. An optional .ss-btn follows the text (the 20px bottom margin
   on __text leaves room for it). */
.ss-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--ss-text-muted);
}

.ss-empty__glyph { font-size: 1.6rem; color: var(--ss-gray-border-strong); margin-bottom: 14px; }
.ss-empty__title { font-size: 1rem; font-weight: 700; color: var(--ss-navy); margin-bottom: 6px; }
.ss-empty__text  { font-size: 0.9rem; max-width: 420px; margin: 0 auto 20px; }

/* Pagination: Bootstrap's .pagination, reskinned. .page-link is in the shared
   script's exempt list (never guarded). GridView paging rides the table rules. */
.page-link {
    color: var(--ss-navy);
    border-color: var(--ss-gray-border);
    border-radius: 0 !important;
    font-size: 0.85rem;
    font-weight: 600;
}

.page-link:hover {
    background-color: var(--ss-gray-soft);
    color: var(--ss-accent);
}

.page-item.active .page-link {
    background-color: var(--ss-navy);
    border-color: var(--ss-navy);
    color: #fff;
}



/* ==========================================================================
   15. WIZARD, LIFECYCLE RAIL, COMMAND BAR, OVERFLOW MENU, AUTH CARD
   ========================================================================== */
/* Wizard step header: current step orange, done navy, upcoming grey; the
   connecting rule is drawn as two halves so the first and last step do not
   trail a line. */
.ss-wizard {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 30px;
    list-style: none;
    padding: 0;
}

.ss-wizard__step {
    flex: 1;
    text-align: center;
    position: relative;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ss-text-muted);
}

.ss-wizard__num {
    width: 28px;
    height: 28px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ss-gray-border-strong);
    border-radius: var(--ss-radius);
    background: #fff;
    font-size: 0.75rem;
    color: var(--ss-text-muted);
    position: relative;
    z-index: 2;
}

.ss-wizard__step::before,
.ss-wizard__step::after {
    content: '';
    position: absolute;
    top: 14px;
    height: 1px;
    background: var(--ss-gray-border);
    z-index: 1;
}

.ss-wizard__step::before { left: 0; right: 50%; }
.ss-wizard__step::after  { left: 50%; right: 0; }

.ss-wizard__step:first-child::before,
.ss-wizard__step:last-child::after { display: none; }

.ss-wizard__step--done .ss-wizard__num {
    background: var(--ss-navy);
    border-color: var(--ss-navy);
    color: #fff;
}

/* The current step: orange ground, navy text (6.51:1), like the primary button. */
.ss-wizard__step--current .ss-wizard__num {
    background: var(--ss-orange);
    border-color: var(--ss-orange);
    color: var(--ss-navy);
    font-weight: 700;
}

.ss-wizard__step--current,
.ss-wizard__step--done { color: var(--ss-navy); }

.ss-wizard__step--current { color: var(--ss-orange-text); }

/* Lifecycle rail: the wizard's geometry with a 22px dot; done navy, current
   accent with a halo, partial soft, off danger with a dashed connector. */
.ss-rail {
    display: flex;
    align-items: flex-start;
    gap: 0;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}
.ss-rail__step {
    flex: 1;
    min-width: 0;
    position: relative;
    text-align: center;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ss-text-muted);
}
.ss-rail__step::before,
.ss-rail__step::after {
    content: '';
    position: absolute;
    top: 11px;
    height: 1px;
    background: var(--ss-gray-border);
    z-index: 1;
}
.ss-rail__step::before { left: 0; right: 50%; }
.ss-rail__step::after  { left: 50%; right: 0; }
.ss-rail__step:first-child::before,
.ss-rail__step:last-child::after { display: none; }
.ss-rail__dot {
    width: 22px;
    height: 22px;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ss-gray-border-strong);
    border-radius: var(--ss-radius);
    background: #fff;
    font-size: 0.62rem;
    color: var(--ss-text-muted);
    position: relative;
    z-index: 2;
}
.ss-rail__label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-rail__meta {
    display: block;
    margin-top: 4px;
    font-size: 0.74rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ss-text-muted);
}
.ss-rail__step--done { color: var(--ss-navy); }
.ss-rail__step--done .ss-rail__dot { background: var(--ss-navy); border-color: var(--ss-navy); color: #fff; }
.ss-rail__step--done::before,
.ss-rail__step--done::after,
.ss-rail__step--current::before,
.ss-rail__step--partial::before { background: var(--ss-navy); }
.ss-rail__step--current { color: var(--ss-accent-hover); }
.ss-rail__step--current .ss-rail__dot {
    background: var(--ss-accent);
    border-color: var(--ss-accent);
    color: #fff;
    box-shadow: 0 0 0 3px var(--ss-accent-soft);
}
.ss-rail__step--partial { color: var(--ss-accent-hover); }
.ss-rail__step--partial .ss-rail__dot {
    background: var(--ss-accent-soft);
    border-color: var(--ss-accent);
    color: var(--ss-accent-hover);
}
.ss-rail__step--off { color: var(--ss-danger); }
.ss-rail__step--off .ss-rail__dot { background: var(--ss-danger-soft); border-color: var(--ss-danger); color: var(--ss-danger); }
.ss-rail__step--off::before {
    background: repeating-linear-gradient(90deg, var(--ss-danger) 0 4px, transparent 4px 8px);
}
@media (max-width: 575.98px) {
    .ss-rail__step:not(.ss-rail__step--current):not(.ss-rail__step--off) .ss-rail__label,
    .ss-rail__meta { display: none; }
}

/* Command bar: sticky under the topbar. One primary, at most two outlined
   secondaries, a native <details> for the rest, a hairline, then the
   destructive verbs as red ghosts: visible but quiet, never hidden in a menu.
   The script toggles .is-stuck through an IntersectionObserver on the sentinel. */
.ss-cmdbar__sentinel { height: 1px; margin-top: -1px; }
.ss-cmdbar {
    position: -webkit-sticky;
    position: sticky;
    top: var(--ss-topbar-h);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 0;
    margin: 0 0 20px;
    background: var(--ss-canvas);
    border-bottom: 1px solid var(--ss-gray-border);
}
.ss-cmdbar.is-stuck { box-shadow: 0 8px 12px -10px rgba(15, 22, 38, 0.22); }
.ss-cmdbar--editing { border-left: 3px solid var(--ss-accent); padding-left: 12px; }
.ss-cmdbar__status {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
    min-height: 38px;
}
.ss-cmdbar__meta { font-size: 0.85rem; color: var(--ss-text-muted); }
.ss-cmdbar__meta a { font-family: var(--ss-font-mono); font-size: 0.82rem; }
.ss-cmdbar__meta strong { color: var(--ss-navy-deep); font-weight: 600; font-variant-numeric: tabular-nums; }
.ss-cmdbar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 38px;
}
.ss-cmdbar__actions .ss-btn { padding: 10px 20px; font-size: 0.76rem; }
.ss-cmdbar__actions > .ss-btn-primary { order: -1; }
.ss-cmdbar__danger { display: flex; gap: 8px; }
.ss-cmdbar__rule { width: 1px; height: 24px; background: var(--ss-gray-border-strong); margin: 0 4px; }
@media (max-width: 767.98px) {
    .ss-cmdbar__actions .ss-btn { padding: 8px 14px; font-size: 0.7rem; }
}

/* A pre-computed refusal takes the verb's place in the status cell: one
   sentence, the danger colour, never a badge. */
.ss-cmdbar__refusal {
    display: inline-block;
    margin-left: 6px;
    color: var(--ss-danger);
    font-weight: 600;
}

/* Native details disclosure as an overflow menu; closed by a document click listener. */
.ss-menu { position: relative; display: inline-block; }
.ss-menu > summary { list-style: none; cursor: pointer; }
.ss-menu > summary::-webkit-details-marker { display: none; }
.ss-menu__list {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 15rem;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--ss-gray-border);
    border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow-lg);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ss-menu__list .ss-btn {
    justify-content: flex-start;
    text-align: left;                /* the items are <input type=submit>, which is not a flex container */
    width: 100%;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 9px 12px;
    background: transparent;
    border-color: transparent;
    color: var(--ss-navy-deep) !important;
    box-shadow: none;
    transform: none;
}
.ss-menu__list .ss-btn:hover,
.ss-menu__list .ss-btn:focus { background: var(--ss-gray-100); border-color: transparent; }

/* Auth card. body.ss-auth for a bare sign-in page; .ss-auth-shell on the form
   plus .ss-auth-shell__body around the card when the page carries topbar and
   footer. The orange top rule is the brand's one mark on the sign-in card. */
.ss-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--ss-gray-soft);
}

.ss-auth-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--ss-gray-soft);
}

.ss-auth-shell__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 16px;
}

/* The logo above the card, the language switch under it, all centred. */
.ss-auth__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.ss-auth__stack > .ss-auth__logo,
.ss-auth__stack > img { margin-bottom: 22px; }
.ss-auth__stack > .ss-lang { margin-top: 18px; }

.ss-auth__card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid var(--ss-gray-border);
    border-top: 4px solid var(--ss-orange);
    border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow);
    padding: 40px;
}

.ss-auth__card--wide { max-width: 680px; }

.ss-auth__logo { height: 38px; width: auto; margin-bottom: 26px; }
.ss-auth__stack .ss-auth__logo { margin-bottom: 22px; }

.ss-auth__title {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ss-navy-deep);
    margin-bottom: 6px;
}

.ss-auth__sub {
    font-size: 0.92rem;
    color: var(--ss-text-muted);
    margin-bottom: 28px;
}

/* The six-digit e-mail code: one box, monospace, letter-spaced, centred. */
.ss-auth__code {
    font-family: var(--ss-font-mono);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-align: center;
    text-indent: 0.4em;
    color: var(--ss-navy-deep);
}

/* "or" between the password form and the Microsoft button: a hairline either side. */
.ss-authsep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ss-text-muted);
}
.ss-authsep::before,
.ss-authsep::after {
    content: '';
    flex: 1 1 auto;
    border-top: 1px solid var(--ss-gray-border);
}

/* The organization chooser: one row per organization, the whole row the control. */
.ss-choose {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border: 1px solid var(--ss-gray-border);
    border-radius: var(--ss-radius-lg);
    background: #fff;
}
.ss-choose > li + li { border-top: 1px solid var(--ss-gray-200); }
.ss-choose__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    text-align: left;
    font-family: var(--ss-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ss-navy-deep);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ss-choose__btn:hover,
.ss-choose__btn:focus {
    background: var(--ss-accent-soft);
    border-left-color: var(--ss-orange);
    color: var(--ss-navy-deep);
}
.ss-choose__btn .ss-badge { flex: 0 0 auto; }
.ss-choose__meta { display: block; font-size: 0.8rem; font-weight: 500; color: var(--ss-text-muted); }



/* ==========================================================================
   16. ATTACHMENTS: TILES, DROP ZONE, PHONE CAPTURE
   One tile writer (AttachmentTiles), a two-step in-place Remove (a native
   <details>), a drop zone the shared script mounts through data-ss-dropzone.
   ========================================================================== */
.ss-attach {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 12px;
}
.ss-attach__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 12px 3.25rem;
    border: 1px solid var(--ss-gray-border);
    border-radius: var(--ss-radius-lg);
    background: #fff;
    min-width: 0;
}
.ss-attach__tile--pending { border-style: dashed; background: var(--ss-gray-100); }
.ss-attach__icon {
    position: absolute;
    left: 14px;
    top: 14px;
    font-size: 1.5rem;
    color: var(--ss-navy);
}
.ss-attach__tile--pending .ss-attach__icon { color: var(--ss-text-muted); }
.ss-attach__name {
    font-weight: 600;
    color: var(--ss-navy-deep);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.ss-attach__name:hover { color: var(--ss-accent); }
.ss-attach__meta { font-size: 0.78rem; color: var(--ss-text-muted); font-variant-numeric: tabular-nums; }
.ss-attach__sha { font-size: 0.72rem; color: var(--ss-text-muted); letter-spacing: 0.04em; }
.ss-attach__badge { align-self: flex-start; }
.ss-attach__remove {
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 4px 8px;
}
.ss-attach__tile--new { box-shadow: 0 0 0 2px var(--ss-accent-soft); }
.ss-attach__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }

.ss-dropzone { display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-start; text-align: left; gap: 10px 14px; padding: 16px 18px; border: 1px dashed var(--ss-gray-border-strong); background: var(--ss-white); color: var(--ss-text-muted); }
.ss-dropzone > i { font-size: 1.35rem; color: var(--ss-accent); }
.ss-dropzone.is-over { border-color: var(--ss-accent); background: var(--ss-accent-soft); }
.ss-dropzone__text { min-width: 0; flex: 1 1 12rem; }
.ss-dropzone__text strong { display: block; font-size: .9rem; font-weight: 500; color: var(--ss-text-dark); }
.ss-dropzone__text span { display: block; font-size: .78rem; color: var(--ss-text-muted); margin-top: 2px; }
.ss-dropzone__file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ss-dropzone__file:focus-visible + .ss-dropzone__choose { outline: 2px solid var(--ss-accent); outline-offset: 2px; }

.ss-capture { padding-left: 24px; border-left: 1px solid var(--ss-gray-border); }
.ss-capture__qr { width: 104px; height: 104px; padding: 6px; background: #fff; border: 1px solid var(--ss-gray-border); color: var(--ss-text-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.ss-capture__qr svg { display: block; width: 100%; height: 100%; }
.ss-capture__qr.is-expired { opacity: 0.35; }
.ss-capture--pending .ss-capture__qr { border-style: dashed; background: var(--ss-gray-100); color: var(--ss-gray-border-strong); font-size: 1.4rem; }
.ss-capture__text { font-size: .78rem; color: var(--ss-text-muted); max-width: 11rem; margin: 0; line-height: 1.4; }
.ss-capture__text strong { display: block; color: var(--ss-navy-deep); }
.ss-capture__text span { display: block; }
.ss-capture__landed { color: var(--ss-navy-deep); font-weight: 600; margin-top: 4px; }

/* The two-step Remove: a <details> whose summary is the ghost verb; open, it
   shows the in-place confirm and the verb turns red. */
.ss-attach__confirm { margin: 0; }
.ss-attach__confirm > summary { list-style: none; cursor: pointer; }
.ss-attach__confirm > summary::-webkit-details-marker { display: none; }
.ss-attach__confirm > summary::marker { content: ""; }
.ss-attach__confirm[open] > summary { color: var(--ss-danger); border-color: var(--ss-danger); }


/* ==========================================================================
   17. SHARED FAMILIES NEW TO SPOTSMART
   ========================================================================== */

/* ---- The language switch: EN | ES, rendered by LangSwitchHtml() -----------
   On a light ground the links are muted; on navy (the sidebar foot, the footer)
   they take the list colour. The active language carries a 2px orange rule. */
.ss-lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.ss-lang__link {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ss-text-muted);
    border-bottom: 2px solid transparent;
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.ss-lang__link:hover { color: var(--ss-navy); }

.ss-lang__link.active {
    color: var(--ss-navy-deep);
    border-bottom-color: var(--ss-orange);
}

.ss-lang__sep { color: var(--ss-gray-border-strong); font-size: 0.72rem; }

.ss-sidebar .ss-lang__link,
.ss-footer .ss-lang__link,
.ss-bg-navy .ss-lang__link,
.ss-on-navy .ss-lang__link { color: var(--ss-list-on-navy); }

.ss-sidebar .ss-lang__link:hover,
.ss-footer .ss-lang__link:hover,
.ss-bg-navy .ss-lang__link:hover,
.ss-on-navy .ss-lang__link:hover { color: #fff; }

.ss-sidebar .ss-lang__link.active,
.ss-footer .ss-lang__link.active,
.ss-bg-navy .ss-lang__link.active,
.ss-on-navy .ss-lang__link.active { color: #fff; border-bottom-color: var(--ss-orange); }

.ss-sidebar .ss-lang__sep,
.ss-footer .ss-lang__sep,
.ss-bg-navy .ss-lang__sep,
.ss-on-navy .ss-lang__sep { color: rgba(255, 255, 255, 0.25); }

/* ---- The plate: a licence plate rendered as a plate ------------------------
   Monospace, uppercase, letter-spaced, a hairline box at the 2px radius. The
   state or region is a muted prefix inside the box. */
.ss-plate {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45em;
    font-family: var(--ss-font-mono);
    font-size: 0.92rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
    color: var(--ss-navy-deep);
    background: #fff;
    border: 1px solid var(--ss-gray-border-strong);
    border-radius: var(--ss-radius);
    padding: 2px 8px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ss-plate__state,
.ss-plate .ss-plate--state {
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ss-text-muted);
}

.ss-plate--lg { font-size: 1.25rem; padding: 4px 12px; }
.ss-table .ss-plate { font-size: 0.84rem; }

/* ---- Marketing (website_home.aspx): EquityMarker's editorial and hero rules --- */
.ss-rule {
    width: 40px;
    height: 3px;
    background: var(--ss-orange);
    border: 0;
    margin: 0 0 24px;
    opacity: 1;
}

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

.ss-hero {
    background: var(--ss-navy-deep);
    color: #fff;
    padding: 130px 0 100px;
    position: relative;
    overflow: hidden;
}

.ss-hero__title {
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    color: #fff;
    margin-bottom: 22px;
}

.ss-hero__lead {
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--ss-list-on-navy);
    max-width: 680px;
    margin-bottom: 34px;
    line-height: 1.45;
}

.ss-hero p { color: var(--ss-text-on-navy); }
.ss-hero .ss-hero__lead { color: var(--ss-list-on-navy); }

.ss-hero__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ss-section { padding: 96px 0; }
.ss-section--tight { padding: 64px 0; }
.ss-section--gray { background-color: var(--ss-gray-soft); }

.ss-h2 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ss-navy-deep);
    margin-bottom: 20px;
}

.ss-h3 {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ss-navy-deep);
    margin-bottom: 14px;
}

.ss-lead {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--ss-navy);
}

/* Arrow list: the house signature bullet, in orange. */
.ss-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ss-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    color: var(--ss-text-muted);
}

.ss-list li::before {
    content: '\2192';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ss-orange-text);
    font-weight: 700;
}

.ss-bg-navy .ss-list li,
.ss-hero .ss-list li,
.ss-on-navy .ss-list li { color: var(--ss-list-on-navy); }

.ss-bg-navy .ss-list li::before,
.ss-hero .ss-list li::before,
.ss-on-navy .ss-list li::before { color: var(--ss-orange); }

/* The square institutional glyph tile. */
.ss-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--ss-gray-border-strong);
    border-radius: var(--ss-radius);
    color: var(--ss-navy);
    font-size: 1.15rem;
    background: #fff;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

/* A persona card (operator, landlord, employer, HOA): the flat panel with a
   3px orange top rule. */
.ss-persona,
.ss-feature {
    display: block;
    background: #fff;
    border: 1px solid var(--ss-gray-border);
    border-top: 3px solid var(--ss-orange);
    border-radius: var(--ss-radius-lg);
    padding: 32px 28px;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: border-top-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* A feature card carries the navy rule and turns orange on hover. */
.ss-feature { border-top-color: var(--ss-navy); }

.ss-persona:hover,
.ss-feature:hover {
    border-top-color: var(--ss-orange);
    box-shadow: var(--ss-shadow);
    transform: translateY(-3px);
    color: inherit;
}

.ss-persona__glyph,
.ss-feature__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--ss-gray-border-strong);
    border-radius: var(--ss-radius);
    color: var(--ss-navy);
    font-size: 1.15rem;
    background: var(--ss-gray-soft);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.ss-persona:hover .ss-persona__glyph,
.ss-feature:hover .ss-feature__glyph { border-color: var(--ss-orange); color: var(--ss-orange-text); }

.ss-persona__title,
.ss-feature__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ss-navy-deep);
    margin: 16px 0 10px;
    letter-spacing: -0.015em;
}

.ss-persona__text,
.ss-feature__text {
    font-size: 0.95rem;
    color: var(--ss-text-muted);
    margin: 0;
}

/* The pricing card: plan names in a row, one line each, no figures until seeded. */
.ss-pricing {
    background: #fff;
    border: 1px solid var(--ss-gray-border);
    border-top: 3px solid var(--ss-navy);
    border-radius: var(--ss-radius-lg);
    padding: 32px 28px;
}

.ss-pricing__plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.ss-pricing__plans > li {
    padding: 18px 20px;
    border: 1px solid var(--ss-gray-border);
    border-radius: var(--ss-radius);
    background: var(--ss-gray-100);
}

.ss-pricing__name {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ss-orange-text);
    margin-bottom: 8px;
}

.ss-pricing__line {
    font-size: 0.92rem;
    color: var(--ss-text-dark);
    margin: 0;
    line-height: 1.5;
}

.ss-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.ss-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ss-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

@media (max-width: 991.98px) {
    .ss-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    .ss-grid-2,
    .ss-grid-3,
    .ss-grid-4 { grid-template-columns: 1fr; }

    .ss-hero { padding: 72px 0 56px; }
    .ss-hero__title { font-size: 2.05rem; }
    .ss-hero__lead { font-size: 1.1rem; }
    .ss-h2 { font-size: 1.7rem; }
    .ss-section { padding: 48px 0; }
    .ss-persona, .ss-feature, .ss-pricing { padding: 24px 20px; }
}

/* ---- The parker portal (lane I): a topbar-only shell, no sidebar -------------
   body.ss-app.ss-app--portal; <header class="ss-topbar ss-topbar--portal">;
   <div class="ss-portal"> in place of .main-content, centred at 1240px. */
body.ss-app--portal { background-color: var(--ss-canvas); }

.ss-topbar--portal .ss-topbar__inner { max-width: 1240px; }

.ss-topbar__switch {
    max-width: 18rem;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--ss-navy);
    padding: 0.42rem 2rem 0.42rem 0.7rem;
}

.ss-portal {
    max-width: 1240px;
    margin: 0 auto;
    padding: 32px 24px;
    min-height: calc(100vh - var(--ss-topbar-h));
}

@media (max-width: 991.98px) {
    .ss-topbar--portal .ss-topbar__actions .ss-topbar__switch { max-width: none; width: 100%; }
    .ss-portal { padding: 20px 16px; }
}



/* ==========================================================================
   18. PERMISSIONS MATRIX AND PLAN CARDS (lane C, dashboard_settings_groups
   and the Billing tab of dashboard_settings_organization)
   ========================================================================== */
.ss-perm-table { width: 100%; border-collapse: collapse; }

.ss-perm-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ss-gray-soft);
    border-bottom: 1px solid var(--ss-gray-border);
}

.ss-perm-table th.ss-perm-act,
.ss-perm-table td.ss-perm-act {
    width: 92px;
    text-align: center;
}

.ss-perm-section td {
    background: var(--ss-navy);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    padding: 8px 14px !important;
}

.ss-perm-name { font-weight: 600; color: var(--ss-navy-deep); font-size: 0.9rem; }
.ss-perm-desc { font-size: 0.78rem; color: var(--ss-text-muted); margin-top: 2px; }

.ss-perm-table tbody tr:hover td { background: var(--ss-gray-100); }
.ss-perm-table .ss-perm-section:hover td { background: var(--ss-navy); }

.ss-perm-na { color: var(--ss-gray-border-strong); font-size: 0.75rem; }

.ss-perm-scroll { max-height: 620px; overflow-y: auto; }

.ss-group-row { cursor: pointer; }
.ss-group-row:hover td { background: var(--ss-gray-100); }
.ss-group-row.is-active td { background: var(--ss-accent-soft) !important; }
.ss-group-row.is-active td:first-child { box-shadow: inset 3px 0 0 var(--ss-orange); }

/* The group name is the row's link. It carries text-decoration-none, so
   without a colour it reads as plain text and nothing on the row looks
   actionable. Scoped to .ss-group-row because .ss-perm-name is also used for
   resource names in the permission matrix, which are not links. */
.ss-group-row .ss-perm-name { color: var(--ss-accent); }
.ss-group-row:hover .ss-perm-name { text-decoration: underline; }

.ss-full-access-note {
    background: var(--ss-accent-soft);
    border: 1px solid var(--ss-gray-border);
    border-left: 3px solid var(--ss-accent);
    padding: 14px 16px;
    font-size: 0.88rem;
}

/* The plan cards. The plan the organization is on carries the orange ring:
   "open now", never a primary action colour. */
.ss-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.ss-plan {
    border: 1px solid var(--ss-gray-border);
    border-radius: var(--ss-radius);
    padding: 1.1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.ss-plan--current {
    border-color: var(--ss-orange);
    box-shadow: 0 0 0 1px var(--ss-orange);
}

.ss-plan__name {
    font-weight: 600;
    color: var(--ss-navy-deep);
    font-size: 1.05rem;
}

.ss-plan__price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ss-navy);
    margin: 0.4rem 0 0.1rem;
    /* Tabular figures so the four prices line up down the row rather than drifting. */
    font-variant-numeric: tabular-nums;
}

.ss-plan__per { font-size: 0.78rem; color: var(--ss-text-muted); }

.ss-plan__limits {
    list-style: none;
    padding: 0;
    margin: 0.9rem 0 1rem;
    font-size: 0.86rem;
    color: var(--ss-navy-deep);
}

.ss-plan__limits li { padding: 0.18rem 0; }
.ss-plan__limits i { color: var(--ss-accent); margin-right: 0.45rem; }

/* Pushes the button to the bottom so the cards' actions line up even when one
   plan's description wraps to a second line. */
.ss-plan__action { margin-top: auto; }

.ss-plan__usage {
    font-size: 0.84rem;
    color: var(--ss-text-muted);
    margin-top: 0.35rem;
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   19. UTILITIES, RESPONSIVE, MOTION, PRINT
   ========================================================================== */
.ss-hairline-t { border-top: 1px solid var(--ss-gray-border); }
.ss-hairline-b { border-bottom: 1px solid var(--ss-gray-border); }

.ss-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.72rem;
}

.ss-mono { font-family: var(--ss-font-mono); }

.ss-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reveal-on-scroll, mounted by spotsmart.js. FAILS SAFE: the default is
   VISIBLE. The animation only arms itself once the script has run far enough
   to put .ss-js on <html>, which it does as its first statement. No script,
   no hiding. Never reuse "reveal" as a page-local class name. */
.ss-reveal {
    opacity: 1;
    transform: none;
}

html.ss-js .ss-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

html.ss-js .ss-reveal.ss-in {
    opacity: 1;
    transform: none;
}

@media (max-width: 575.98px) {
    .ss-auth__card { padding: 26px 20px; }
    .ss-container { padding: 0 16px; }

    /* At this width the wizard's labels collide. Keep the numbers, drop the
       words: the current step's heading is right below it anyway. */
    .ss-wizard__step { font-size: 0; }
    .ss-wizard__num { font-size: 0.75rem; }

    /* The date-time trio's quarter columns: hh:mm and the Spanish a. m. / p. m. do not fit
       0.925rem Inter behind 0.75rem padding at 360-375px. */
    input[data-ss-time] { padding-left: 0.4rem; padding-right: 0.4rem; font-size: 0.85rem; }
    .ss-ampm { padding-left: 0.35rem; padding-right: 1.1rem; font-size: 0.85rem; background-position: right 0.25rem center; background-size: 12px 9px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .ss-reveal,
    html.ss-js .ss-reveal { opacity: 1; transform: none; }
}

/* A statement, a hang tag, a report gets printed and filed. What comes out
   must be the document, not a screenshot of an application: no chrome, no
   navigation, no buttons. The chrome rules are global (every page loses its
   shell on paper); the black-rule and tab-pane rules are SCOPED to .ss-doc,
   the document region, so Ctrl+P on an ordinary settings page is untouched. */
@media print {
    .ss-sidebar,
    .ss-topbar,
    .ss-footer,
    .ss-navtoggle,
    .ss-navscrim,
    .ss-page-head__actions,
    .ss-btn,
    .btn,
    .ss-progress-top,
    .ss-cmdbar,
    .ss-cmdbar__sentinel,
    .ss-rail,
    .ss-chips,
    .ss-kpi-strip,
    .ss-card-confirm,
    .ss-menu,
    .ss-picker .ss-btn,
    .ss-pickbox__act,
    .ss-dropzone,
    .ss-dropzone__list,
    .ss-attach__remove,
    .ss-capture,
    .ss-clientmodal,
    .ss-rpt-params,
    .modal-backdrop,
    .ss-lang { display: none !important; }

    .ss-sidebar ~ .main-content { margin-left: 0; padding: 0; }
    .ss-portal { padding: 0; }

    /* Bootstrap writes overflow:hidden inline on <body> while a modal stands;
       a hidden-overflow body prints one clipped page. */
    body.modal-open { overflow: visible !important; padding-right: 0 !important; }

    body { background: #fff; }

    .ss-pickbox { border: 0; padding: 0; }
    .ss-attach__tile { border-color: #999; break-inside: avoid; }

    .ss-doc .ss-card,
    .ss-doc .ss-kpi {
        border: 1px solid #000;
        box-shadow: none;
        break-inside: avoid;
    }

    .ss-doc .ss-table thead th { background: #fff; border-bottom: 1px solid #000; }
    .ss-doc .ss-table tbody td { border-bottom: 1px solid #999; }
    .ss-doc .ss-table tfoot td,
    .ss-doc tr.ss-total td { border-top-color: #000; background: #fff; }

    /* Repeat the header on every page of a long table. */
    .ss-doc .ss-table thead { display: table-header-group; }
    .ss-doc .ss-table tr { break-inside: avoid; }

    /* THE TAB STRIP AND THE PANES on a document screen that carries them.
       Bootstrap hides an inactive .tab-pane with display:none and fades it
       with opacity, so both have to be answered or Ctrl+P prints one section.
       Scoped to .ss-doc: unscoped, these rules would rewrite Ctrl+P on every
       tabbed settings and record page. */
    .ss-doc .ss-tabs { display: none !important; }
    .ss-doc .tab-content > .tab-pane { display: block !important; opacity: 1 !important; }
    .ss-doc .ss-tabpane__title--echo { display: block; }

    /* A negative figure keeps its red on paper; stated after the black rules so it wins. */
    .ss-doc .ss-num--negative,
    .ss-doc .ss-num--neg { color: var(--ss-negative) !important; }

    a[href]::after { content: ''; }
}


/* ==========================================================================
   20. REPORTS (lane J)
   ========================================================================== */
/* Reports (lane J). The Showing strip, section titles, and the print view scoped to .ss-doc. */
.ss-rpt-showing { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 14px 20px; border-bottom: 1px solid var(--ss-gray-border); font-size: 0.85rem; color: var(--ss-text-muted); }
.ss-rpt-showing__k { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ss-navy); margin-right: 0.35rem; }
.ss-rpt-showing__v { color: var(--ss-text-dark); }
.ss-report__section { padding: 0 0 8px; }
.ss-report__title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ss-navy); margin: 0; padding: 16px 20px 8px; }
.ss-report__section .ss-empty__text { margin: 0; padding: 0 20px 16px; }

@media print {
    .ss-rpt-criteria, .ss-page-head__actions, .ss-sidebar, .ss-topbar, .ss-footer, .ss-navtoggle, .ss-navscrim,
    .ss-btn, .btn, .ss-progress-top, .alert { display: none !important; }
    .ss-sidebar ~ .main-content { margin-left: 0; padding: 0; }
    @page { margin: 16mm; }
    body { background: #fff; }
    .ss-doc, .ss-doc .ss-card { border: 0; box-shadow: none; }
    .ss-doc .ss-table thead th { background: #fff; color: #000; border-bottom: 1px solid #000; }
    .ss-doc .ss-table tbody td { border-bottom: 1px solid #999; }
    .ss-doc .ss-table tfoot td, .ss-doc tr.ss-total td { background: #fff; color: #000; border-top: 2px solid #000; }
    .ss-doc .ss-table thead { display: table-header-group; }
    .ss-doc .ss-table tr { break-inside: avoid; }
    .ss-doc .ss-report__title { break-after: avoid; }
    .ss-doc .ss-num--negative { color: var(--ss-negative) !important; }
    a[href]::after { content: ''; }
}