/* ================================================================
   CampSuite Admin - global styles
   ----------------------------------------------------------------
   The admin console is the SAME product as the operator app, so it
   is built from the same component catalogue: `cs-btn`, `cs-card`,
   `cs-input`, `cs-badge`, `cs-page-header`, `cs-actionbar`, the
   deep-blue `cs-topnav` canopy and the phone bottom bar. Anything
   shared with Campsuite.Web is a straight port, so a fix in one
   place can be applied to the other without translation.

   Read DESIGN.md before styling anything here. Reach for a `cs-*`
   class before typing a Tailwind utility string; if nothing fits,
   add ONE reusable class here and document it.
   ================================================================ */

/* Base font: 16px everywhere - never smaller than the browser default */
html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
}

body {
    -webkit-text-size-adjust: 100%;
    /* UI typeface - Source Sans 3, the CampSuite interface face, with the
       native system stack as a fast fallback until it loads. Sora carries
       the brand voice on display headings. */
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings: slightly tighter tracking reads more "designed" without
   hurting legibility. Weights stay bold so hierarchy is obvious. */
h1, h2, h3, h4 {
    letter-spacing: -0.01em;
}

/* Craft details: brand selection, no grey tap flash, warm thin scrollbars,
   and every column of figures lined up like a ledger. */
::selection { background: #d7e6f4; color: #0f213f; }

html { -webkit-tap-highlight-color: transparent; }

table,
.cs-stat-value {
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    * { scrollbar-width: thin; scrollbar-color: #d6d0c4 transparent; }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb {
        background: #d6d0c4;
        border-radius: 5px;
        border: 2px solid transparent;
        background-clip: content-box;
    }
    *::-webkit-scrollbar-thumb:hover { background-color: #a8a092; }
}

/* Display face - Sora, the CampSuite brand headline face. Page titles and
   hero moments only; body copy stays in Source Sans 3. */
.cs-font-display {
    font-family: "Sora", "Segoe UI", system-ui, sans-serif;
    letter-spacing: -0.01em;
    font-optical-sizing: auto;
}

/* ── Focus styles ── visible, high-contrast ring for keyboard users. */
:focus-visible {
    outline: 3px solid #22568c;
    outline-offset: 2px;
}

/* ── Form inputs ── bigger touch targets, clearer text */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
select,
textarea {
    font-size: 1rem;
    min-height: 48px;
}

@media (min-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="search"],
    select,
    textarea {
        min-height: 44px;
    }
}

/* ── Checkboxes & radio buttons ── larger touch targets */
input[type="checkbox"],
input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
}

/* ── Buttons ── generous touch targets (44px minimum on mobile) */
button,
[type="submit"],
a.inline-flex {
    min-height: 44px;
}

/* ── Smooth transitions for interactive elements ── */
input, select, textarea, button, a {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* ── Icons ── one consistent, lighter line weight everywhere. The stock 2px
   heroicon stroke is the generic-template look; 1.7px reads drawn-for-us. */
svg[stroke-width="2"] {
    stroke-width: 1.7;
}

/* ── Mobile drawer animation ──
   visibility toggles with the slide so the closed drawer is out of the tab
   order and invisible to screen readers (transform alone hides neither). */
#cs-mobile {
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    -webkit-overflow-scrolling: touch;
}

#cs-mobile.cs-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s linear 0s;
}

#cs-overlay {
    opacity: 0;
    transition: opacity 0.25s ease;
}

#cs-overlay.cs-open {
    opacity: 1;
}

/* ── Table responsive helpers ── */
@media (max-width: 767px) {
    .cs-table-desktop { display: none !important; }
}

@media (min-width: 768px) {
    .cs-table-mobile { display: none !important; }
}

/* ── Validation messages ── make errors prominent and readable */
.field-validation-error {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #b42318;
}

.validation-summary-valid { display: none; }

/* ── Buttons ─────────────────────────────────────────────────────
   .cs-btn is the base; add a variant. Big tap targets, clear focus. */
.cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border-radius: 0.625rem;            /* 14px - soft, modern */
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .08s ease;
    -webkit-tap-highlight-color: transparent;
}

.cs-btn:active { transform: translateY(1px); }

.cs-btn:focus-visible {
    outline: 3px solid #22568c;
    outline-offset: 2px;
}

/* Primary = the main "do it" action (Save, Confirm, Take a booking).
   Sunset Orange with deep-blue ink - loud, confident and the same pairing as
   the logo. This is the one consistent colour for the main action on every
   screen, so nobody has to hunt for the button. */
.cs-btn-primary {
    background: #f06436;
    color: #0f213f;
    box-shadow: 0 1px 2px rgba(240, 100, 54, .28);
}
.cs-btn-primary:hover { background: #e0561f; }

/* Brand = booking-led CTAs. Same Sunset Orange as primary so the main action
   reads identically wherever it appears (top bar, dashboard, forms). */
.cs-btn-brand {
    background: #f06436;
    color: #0f213f;
    box-shadow: 0 1px 2px rgba(240, 100, 54, .28);
}
.cs-btn-brand:hover { background: #e0561f; }

/* Secondary = the blue alternative / cancel / back. A deep-blue outline:
   clearly on-brand, quieter than the orange primary, never competing with it. */
.cs-btn-secondary {
    background: #fff;
    color: #22568c;
    border-color: #b4d0e9;
    box-shadow: 0 1px 2px rgba(15, 33, 63, .04);
}
.cs-btn-secondary:hover { background: #eef4fa; border-color: #22568c; }

/* Danger = destructive (Delete). Quiet until hovered. */
.cs-btn-danger {
    background: #fff;
    color: #b42318;
    border-color: #f4c9c4;
}
.cs-btn-danger:hover { background: #fef3f2; border-color: #e8a59d; }

.cs-btn-block { width: 100%; }

/* Small = compact toolbar / modal-header buttons. Still a comfortable tap
   target (40px) but tighter than the full-size action button. */
.cs-btn-sm {
    min-height: 40px;
    padding: 0.4rem 0.85rem;
    font-size: 0.9375rem;
    border-radius: 0.5rem;
    gap: 0.35rem;
}

/* ── Segmented chip (radio "pills") ──────────────────────────────
   A branded, grandma-proof way to pick one of a few options (priority,
   frequency). Big tap target, clear selected state in brand blue. Wrap a
   hidden radio input and a label span; the whole chip is the tap target. */
.cs-segchip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.5rem 0.5rem;
    border-radius: 0.5rem;
    border: 1.5px solid #e5e0d5;
    background: #fff;
    color: #575147;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, color .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.cs-segchip:hover { border-color: #c9c2b4; }
.cs-segchip:has(input:checked) {
    background: #22568c;
    border-color: #22568c;
    color: #fff;
    box-shadow: 0 1px 2px rgba(34, 86, 140, .25);
}
.cs-segchip:has(input:focus-visible) { outline: 3px solid rgba(34, 86, 140, .4); outline-offset: 1px; }

/* ── Form fields ─────────────────────────────────────────────────
   .cs-input works for input / select / textarea. */
.cs-input {
    width: 100%;
    border-radius: 0.625rem;
    border: 1.5px solid #d6d0c4;
    background: #fff;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: #1b1813;
    box-shadow: 0 1px 2px rgba(28, 26, 22, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cs-input::placeholder { color: #a8a092; }
.cs-input:focus {
    outline: none;
    border-color: #22568c;
    box-shadow: 0 0 0 4px rgba(34, 86, 140, .15);
}

.cs-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #2a2722;
    margin-bottom: 0.375rem;
}
.cs-hint { font-size: 0.875rem; color: #797163; margin-top: 0.375rem; }

/* A <summary> borrowing .cs-label's type is still a control, so it keeps its
   disclosure triangle. Without this the label's display:block wins over the
   browser's display:list-item, the marker vanishes, and the row reads as a
   heading - so nobody ever discovers the panel folded underneath it. */
summary.cs-label {
    display: list-item;
    list-style-position: inside;
    min-height: 44px;
    padding-top: 0.55rem;
}
summary.cs-label::marker { color: #797163; }

/* ── Cards ───────────────────────────────────────────────────────
   The standard container for content & form sections. */
.cs-card {
    border-radius: 0.75rem;                /* 12px - calm, ledger-like */
    border: 1px solid #eae6dd;
    background: #fff;
    box-shadow: 0 1px 2px rgba(28, 26, 22, .04);
    overflow: hidden;
}
.cs-card-header {
    border-bottom: 1px solid #f0ede6;
    background: #fbfaf7;
    padding: 1rem 1.25rem;
}
.cs-card-title { font-size: 1.125rem; font-weight: 700; color: #1b1813; }
.cs-card-sub   { font-size: 0.9375rem; color: #797163; margin-top: 0.125rem; }
.cs-card-body  { padding: 1.25rem; }

/* Interactive cards (list rows that link somewhere) lift on hover. */
.cs-card-link { transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.cs-card-link:hover {
    border-color: #d6d0c4;
    box-shadow: 0 10px 24px -10px rgba(28, 26, 22, .18);
    transform: translateY(-1px);
}

/* ── Page shell ──────────────────────────────────────────────────
   The measured column every screen sits in, centred inside the
   layout's padded <main>. One width for the whole section means the
   page header, the section rail and the content all line up as you
   move between screens, instead of each page picking its own
   max-width and making the console breathe in and out. */
.cs-shell {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
}

/* A column of running prose inside a full-width shell. The page header and
   the section rail still span the shell, so the screen lines up with its
   neighbours, but the reading matter keeps a sane line length instead of
   stretching to 80rem. Use it for guides and explanations, not for lists,
   tables or dashboards - those should use the width. */
.cs-measure { max-width: 48rem; }

/* ── Page header ─────────────────────────────────────────────────
   Consistent title block at the top of every screen. */
.cs-page-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
    .cs-page-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.cs-page-title {
    font-family: "Sora", "Segoe UI", system-ui, sans-serif;
    font-optical-sizing: auto;
    font-size: 1.875rem;
    font-weight: 600;
    color: #1b1813;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.cs-page-sub   { margin-top: 0.25rem; color: #575147; }

/* ── Action bar ──────────────────────────────────────────────────
   THE home for Save / Cancel on every form.
   Desktop: right-aligned footer (primary on the right).
   Mobile : sticks to the bottom of the screen so Save is always
            reachable with a thumb - no hunting, grandma-proof. */
.cs-actionbar {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.cs-actionbar .cs-btn { width: 100%; }

@media (min-width: 640px) {
    .cs-actionbar {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
    }
    .cs-actionbar .cs-btn { width: auto; }
    /* When there's a destructive action it sits far left, away from Save. */
    .cs-actionbar .cs-actionbar-spacer { margin-right: auto; }
}

/* On small screens, pin the action bar to the bottom so the primary
   action is always one thumb-tap away. Opt in with .cs-actionbar-sticky. */
@media (max-width: 639px) {
    .cs-actionbar-sticky {
        position: sticky;
        bottom: 0;
        z-index: 20;
        margin-top: 1.5rem;
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom));
        background: rgba(250, 249, 246, .92);
        backdrop-filter: blur(8px);
        border-top: 1px solid #e8e4db;
    }
}

/* ── Status pills / badges ───────────────────────────────────────── */
.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
}
.cs-badge-brand   { background: #eef4fa; color: #1b4472; }
.cs-badge-neutral { background: #f3f1ec; color: #575147; }
.cs-badge-amber   { background: #fef3c7; color: #92600a; }
.cs-badge-rose    { background: #fee2e2; color: #b42318; }
.cs-badge-sky     { background: #e6eff8; color: #2f5d86; }

/* ── Note timeline (guests and bookings) ────────────────────────────
   The running record on a guest or a booking: who wrote what, and when,
   newest at the top. Entries are never edited, so the list reads as a
   history rather than a notepad. A quiet blue spine ties the entries
   together; Delete only appears for owners and admins and stays low-key
   so nobody reaches for it by accident. Markup: Pages/Shared/_NoteTimeline.cshtml */
.cs-note-add { padding-bottom: 1.25rem; border-bottom: 1px solid #f3f1ec; }
.cs-note-empty {
    padding-top: 1.25rem;
    color: #797163;
    font-size: 1rem;
}

.cs-timeline {
    list-style: none;
    margin: 0;
    padding: 1.25rem 0 0;
}
.cs-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0 0 1.25rem 1.125rem;
}
/* The spine. It stops at the last entry so the list doesn't trail off. */
.cs-timeline-item::before {
    content: "";
    position: absolute;
    left: 0.3125rem;
    top: 0.75rem;
    bottom: -0.25rem;
    width: 2px;
    background: #e8e4db;
}
.cs-timeline-item:last-child { padding-bottom: 0; }
.cs-timeline-item:last-child::before { display: none; }
.cs-timeline-dot {
    position: absolute;
    left: 0;
    top: 0.4375rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background: #fff;
    border: 2px solid #4c8dcb;
}
.cs-timeline-body { flex: 1 1 auto; min-width: 0; }
.cs-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.9375rem;
}
.cs-timeline-author { font-weight: 700; color: #1b1813; }
.cs-timeline-when { color: #797163; }
.cs-timeline-text {
    margin-top: 0.25rem;
    font-size: 1rem;
    line-height: 1.55;
    color: #423d35;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.cs-timeline-actions { flex: 0 0 auto; }
.cs-timeline-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #a8a092;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.cs-timeline-delete svg { width: 1.25rem; height: 1.25rem; }
.cs-timeline-delete:hover { background: #fff1f2; color: #b42318; }

/* ── Settings hub (/more) ────────────────────────────────────
   A calm, scannable launcher: one branded icon per destination so an
   owner recognises where to go at a glance. Grandma-proof - big tap
   targets, 16px+ copy, and ONE consistent icon treatment (brand blue
   on a pale brand tint), never a rainbow of chips. The icon "d" paths
   live in Code/AdminMenu.cs, shared with the drawer menu. */
.cs-hub-search { position: relative; margin-top: 1.25rem; }
/* The field itself is a standard .cs-input (radius, border, focus ring and all);
   this only adds clearance for the leading magnifier. */
.cs-hub-search input { padding-left: 3rem; }
.cs-hub-search svg {
    position: absolute;
    left: 1rem; top: 50%; transform: translateY(-50%);
    height: 1.25rem; width: 1.25rem;
    color: #a8a092; pointer-events: none;
}

.cs-hub-group { margin-top: 2rem; }
.cs-hub-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #797163;
}

.cs-hub-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
    margin-top: 0.875rem;
}
@media (min-width: 640px)  { .cs-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cs-hub-grid { grid-template-columns: repeat(3, 1fr); } }

/* Composed as `cs-card cs-card-link cs-hub-card` in the markup, so the
   border, shadow, hover lift and the global keyboard focus ring all come from
   the shared card components; this class adds the icon/body/chevron row and the
   menu-style way-finding accent. */
.cs-hub-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    width: 100%;
    padding: 1.0625rem 1.125rem 1.0625rem 1.5rem;
    text-align: left;
}
/* Sunset Orange way-finding bar - the SAME accent the active sidebar item uses
   (.cs-nav-link-active::before), so the hub reads as one system with the menu. */
.cs-hub-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8125rem;
    bottom: 0.8125rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #f06436;
}
/* On hover the whole card lights up like a menu item coming active: brand tint
   plus brand-blue icon and title. */
.cs-hub-card:hover { background: #eef4fa; }
/* The search filter toggles Tailwind's .hidden; site.css loads after the
   Tailwind layer, so this 2-class rule must win over the flex display above or
   matched-out cards would stay visible. */
.cs-hub-card.hidden { display: none; }

/* The icon matches the sidebar menu icons: no chip, drawn in the same warm ink
   (currentColor), so the hub and the nav render the icon identically. */
.cs-hub-ico {
    flex: none;
    display: grid; place-items: start center;
    height: 1.75rem; width: 1.75rem;
    margin-top: 0.0625rem;
    color: #423d35;
    transition: color .15s ease;
}
.cs-hub-ico svg { height: 1.5rem; width: 1.5rem; }
.cs-hub-card:hover .cs-hub-ico,
.cs-hub-card:hover .cs-hub-title { color: #16365a; }

.cs-hub-body { min-width: 0; flex: 1 1 auto; }
.cs-hub-title {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #1b1813;
    line-height: 1.3;
}
.cs-hub-desc {
    display: block;
    margin-top: 0.25rem;
    font-size: 1rem;
    color: #575147;
    line-height: 1.45;
}

.cs-hub-go {
    flex: none; align-self: center;
    height: 1.25rem; width: 1.25rem;
    color: #d6d0c4;
    transition: color .15s ease, transform .15s ease;
}
.cs-hub-card:hover .cs-hub-go { color: #22568c; transform: translateX(2px); }

/* "Nothing matches that search" panel. */
.cs-hub-empty {
    margin-top: 2.5rem;
    border-radius: 0.75rem;
    border: 1px dashed #d6d0c4;
    background: #fff;
    padding: 2rem;
    text-align: center;
}

/* Warm, subtle paper backdrop behind the whole app. */
body.cs-app {
    background:
        radial-gradient(1200px 600px at 100% -5%, rgba(34, 86, 140, .05), transparent 60%),
        #f6f4ef;
}

/* Active nav item: brand tint + a left accent bar so the current
   section is unmistakable (helps non-tech users stay oriented). */
.cs-nav-link {
    position: relative;
    transition: background-color .15s ease, color .15s ease;
}
.cs-nav-link-active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #f06436;   /* Sunset Orange - the active way-finding indicator */
}

/* ════════════════════════════════════════════════════════════════
   Horizontal top navigation (Ui:Navigation = "Horizontal")
   ----------------------------------------------------------------
   The branded app bar: a deep-blue canopy with the ridgeline
   from the CampSuite mark echoed as a whisper-quiet texture. Grouped
   drop-down menus (Xero/FreeAgent style), a context-aware "create"
   action and a global quick-create menu. Same destinations as the
   sidebar - only the chrome changes.
   ════════════════════════════════════════════════════════════════ */

.cs-topnav {
    position: sticky;
    top: 0;
    z-index: 30;
    color: #eef4fa;
    background:
        /* the brand ridgeline, barely-there, anchored to the bar's floor */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='64' viewBox='0 0 480 64' fill='none'%3E%3Cpath d='M-8 50 L48 22 L84 42 L138 12 L196 50 L240 32 L288 50 L336 16 L384 40 L432 26 L488 50' stroke='%23eef4fa' stroke-opacity='0.045' stroke-width='2'/%3E%3C/svg%3E") repeat-x bottom left,
        linear-gradient(168deg, #183253 0%, #12253f 52%, #0f213f 100%);
    box-shadow:
        inset 0 -1px 0 rgba(238, 244, 250, .07),
        0 12px 32px -20px rgba(10, 24, 48, .65);
}

/* Full-height nav item wrapper so the active underline can sit on the
   bar's bottom edge, exactly where the eye expects it. */
.cs-topnav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.cs-topnav-item.is-active::after {
    content: "";
    position: absolute;
    left: 0.625rem;
    right: 0.625rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #f06436;
}

.cs-topnav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding: 0 0.8125rem;
    border-radius: 0.625rem;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(238, 244, 250, .82);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.cs-topnav-link:hover { color: #fff; background: rgba(238, 244, 250, .09); }
.cs-topnav-link[aria-expanded="true"] { color: #fff; background: rgba(238, 244, 250, .13); }
.cs-topnav-item.is-active .cs-topnav-link { color: #fff; }
.cs-topnav-link:focus-visible {
    outline: 3px solid #f06436;
    outline-offset: -3px;
}
.cs-topnav-caret { transition: transform .18s ease; opacity: .7; }
.cs-topnav-link[aria-expanded="true"] .cs-topnav-caret { transform: rotate(180deg); }

/* Park switcher - a quiet glass pill on the canopy. */
.cs-topnav-park {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 6rem;   /* the park name may truncate but never vanishes */
    min-height: 2.75rem;
    max-width: 15rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(238, 244, 250, .16);
    background: rgba(238, 244, 250, .06);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.cs-topnav-park:hover { background: rgba(238, 244, 250, .13); border-color: rgba(238, 244, 250, .28); }
.cs-topnav-park:focus-visible { outline: 3px solid #f06436; outline-offset: 2px; }
.cs-topnav-park-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The one always-there action - Take a booking - in Sunset Orange with
   deep-blue ink for contrast. Same label, same spot, on every page. */
.cs-topnav-cta {
    display: none;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0 1.125rem;
    border-radius: 0.625rem;
    background: #f06436;
    color: #0f213f;
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 12px rgba(240, 100, 54, .35);
    transition: background-color .15s ease, transform .08s ease;
}
.cs-topnav-cta:hover { background: #e0561f; }
.cs-topnav-cta:active { transform: translateY(1px); }
.cs-topnav-cta:focus-visible { outline: 3px solid #eef4fa; outline-offset: 2px; }

@media (min-width: 768px) {
    .cs-topnav-cta { display: inline-flex; }
}

/* Drawer footer account block: a single quiet row that discloses the
   account actions on tap. Native details/summary - no JS to go wrong. */
.cs-drawer-account summary { list-style: none; }
.cs-drawer-account summary::-webkit-details-marker { display: none; }
.cs-drawer-account-row {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.4rem 0.5rem; border-radius: 0.625rem; cursor: pointer;
}
.cs-drawer-account-row:hover { background: #f3f1ec; }
.cs-drawer-account-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    height: 2.1rem; width: 2.1rem; flex-shrink: 0; border-radius: 9999px;
    background: #eef4fa; color: #1b4472; font-size: 0.9rem; font-weight: 700;
}
.cs-drawer-account-caret { transition: transform .15s ease; }
.cs-drawer-account[open] .cs-drawer-account-caret { transform: rotate(180deg); }

/* The create button opens the booking-type chooser; the wrapper just
   anchors the drop-down panel. */
.cs-topnav-ctagroup { position: relative; display: flex; align-items: stretch; }
.cs-topnav-cta { border: none; cursor: pointer; }
.cs-topnav-ctagroup .cs-topnav-panel { top: calc(100% + 8px); }

/* Icon buttons on the bar (quick create, mobile menu). */
.cs-topnav-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    width: 2.75rem;
    flex-shrink: 0;
    border-radius: 0.625rem;
    border: 1px solid rgba(238, 244, 250, .16);
    background: rgba(238, 244, 250, .06);
    color: #eef4fa;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.cs-topnav-iconbtn:hover { background: rgba(238, 244, 250, .13); border-color: rgba(238, 244, 250, .28); }
.cs-topnav-iconbtn:focus-visible { outline: 3px solid #f06436; outline-offset: 2px; }
.cs-topnav-iconbtn[aria-expanded="true"] { background: rgba(238, 244, 250, .16); }

/* Avatar (user menu trigger). Solid brand blue, light ring - no gradient. */
.cs-topnav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    width: 2.75rem;
    flex-shrink: 0;
    border-radius: 9999px;
    border: none;
    background: #22568c;
    box-shadow: 0 0 0 2px rgba(238, 244, 250, .28);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow .15s ease;
}

/* The user menu lives in the bar on desktop; the drawer footer covers phones. */
.cs-topnav-user { display: none; }
@media (min-width: 1024px) {
    .cs-topnav-user { display: flex; align-items: center; }
}
.cs-topnav-avatar:hover,
.cs-topnav-avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(238, 244, 250, .45); }
.cs-topnav-avatar:focus-visible { outline: 3px solid #f06436; outline-offset: 2px; }

/* Drop-down panels. Anchored to the item; springy but quick. */
.cs-topnav-panel {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    z-index: 45;
    min-width: 16.5rem;
    max-width: min(34rem, calc(100vw - 1.5rem));
    padding: 0.5rem;
    border-radius: 0.75rem;
    background: #fff;
    border: 1px solid rgba(27, 24, 19, .08);
    box-shadow: 0 24px 48px -12px rgba(10, 24, 48, .3), 0 3px 10px rgba(10, 24, 48, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.98);
    transform-origin: top left;
    transition: opacity .16s cubic-bezier(.16, 1, .3, 1),
                transform .16s cubic-bezier(.16, 1, .3, 1),
                visibility .16s;
}
.cs-menu-open > .cs-topnav-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.cs-topnav-panel-right { left: auto; right: 0; transform-origin: top right; }

/* Panels attached to the right-cluster buttons (quick create, user menu)
   hang just below their trigger rather than off the bar's floor. */
.cs-topnav-panel-below { top: calc(100% + 8px); }

.cs-topnav-brand { border-radius: 0.5rem; }
.cs-topnav-brand:focus-visible { outline: 3px solid #f06436; outline-offset: 3px; }

/* Brand lockup: the full CampSuite wordmark at every size on the top bar,
   including desktop. The links tighten (see below) rather than the logo
   dropping to the mark, so the brand name is always spelled out. */
.cs-topnav-logo-full { display: block; }
.cs-topnav-logo-mark { display: none; }

/* Narrow desktops (lg → xl): a gentle tighten so seven destinations, the
   park name and Take a booking fit without anything disappearing. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .cs-topnav-link { padding: 0 0.5rem; font-size: 0.9375rem; }
    .cs-topnav-item.is-active::after { left: 0.5rem; right: 0.5rem; }
    .cs-topnav-park { min-width: 4.5rem; max-width: 9rem; padding: 0.25rem 0.5rem; }
    .cs-topnav-cta { padding: 0 0.875rem; font-size: 0.875rem; }
}
@media (min-width: 1280px) and (max-width: 1599.98px) {
    .cs-topnav-park { max-width: 12rem; }
}

/* Panel entries - big targets, plain-English labels. */
.cs-menu-heading {
    display: block;
    padding: 0.625rem 0.75rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #797163;   /* ≥4.5:1 on white - headings stay readable, not decorative */
}
.cs-menu-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #2a2722;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}
.cs-menu-item svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: #a8a092; transition: color .12s ease; }
.cs-menu-item:hover { background: #f3f1ec; color: #1b1813; }
.cs-menu-item:hover svg { color: #575147; }
.cs-menu-item.is-active { background: #eef4fa; color: #1b4472; }
.cs-menu-item.is-active svg { color: #22568c; }
.cs-menu-item:focus-visible { outline: 3px solid #22568c; outline-offset: -3px; }
.cs-menu-divider { height: 1px; margin: 0.5rem 0.25rem; background: #f3f1ec; }

/* Dark brand panel for page heroes - the same deep-blue canopy and quiet
   ridgeline as the top bar, so the motif repeats instead of resorting to
   decorative gradient blobs. */
.cs-hero-canopy {
    color: #eef4fa;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='64' viewBox='0 0 480 64' fill='none'%3E%3Cpath d='M-8 50 L48 22 L84 42 L138 12 L196 50 L240 32 L288 50 L336 16 L384 40 L432 26 L488 50' stroke='%23eef4fa' stroke-opacity='0.045' stroke-width='2'/%3E%3C/svg%3E") repeat-x bottom left,
        linear-gradient(168deg, #183253 0%, #12253f 52%, #0f213f 100%);
    box-shadow: inset 0 -1px 0 rgba(238, 244, 250, .07), 0 14px 32px -18px rgba(10, 24, 48, .5);
}

/* Content in horizontal mode is centred with a comfortable reading width. */
body.cs-chrome-top main {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 96rem;
}


/* ── Global search on the bar (admin only) ────────────────────────
   The back office is a search-first tool, so the field the operator
   app spends on a park switcher goes here instead. Same glass pill
   treatment as .cs-topnav-park so the bar keeps one material. */
.cs-topnav-search { position: relative; flex: 0 1 20rem; min-width: 0; display: none; }
@media (min-width: 768px) { .cs-topnav-search { display: block; } }
.cs-topnav-search input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.25rem 0.75rem 0.25rem 2.6rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(238, 244, 250, .16);
    background: rgba(238, 244, 250, .06);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 500;
}
.cs-topnav-search input::placeholder { color: rgba(238, 244, 250, .55); }
.cs-topnav-search input:hover { background: rgba(238, 244, 250, .11); }
.cs-topnav-search input:focus {
    outline: none;
    background: rgba(238, 244, 250, .16);
    border-color: rgba(238, 244, 250, .38);
}
.cs-topnav-search input:focus-visible { outline: 3px solid #f06436; outline-offset: 2px; }
.cs-topnav-search svg {
    position: absolute;
    left: 0.85rem; top: 50%; transform: translateY(-50%);
    height: 1.1rem; width: 1.1rem;
    color: rgba(238, 244, 250, .6);
    pointer-events: none;
}

/* The admin bar carries eight destinations, so it tightens one step
   earlier than the operator app's seven. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
    .cs-topnav-link { padding: 0 0.45rem; font-size: 0.9375rem; }
    .cs-topnav-item.is-active::after { left: 0.45rem; right: 0.45rem; }
    .cs-topnav-search { flex-basis: 12rem; }
}

/* An "Admin" tag next to the logo, so a screenshot of the back office
   can never be mistaken for a customer's park. */
.cs-topnav-tag {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: 0.35rem;
    background: rgba(240, 100, 54, .18);
    border: 1px solid rgba(240, 100, 54, .45);
    color: #f7b499;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Drop-down panels with more than a handful of entries (CRM, Content)
   run in two columns on a desktop so nothing scrolls. */
.cs-topnav-panel-wide { min-width: 30rem; }
@media (min-width: 640px) {
    .cs-topnav-panel-cols { columns: 2; column-gap: 0.25rem; }
    .cs-topnav-panel-cols > * { break-inside: avoid; }
}
.cs-menu-item-desc {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: #797163;
    white-space: normal;
}
.cs-menu-item { align-items: flex-start; }
.cs-menu-item svg { margin-top: 0.1rem; }

/* ── Segmented control ───────────────────────────────────────────
   The one connected "pick a view" toggle: Cards / Grid, Today / Week /
   People. Active tab lifts onto a white card in brand blue. Scrolls
   sideways rather than wrapping when it runs out of room on a phone. */
.cs-segment {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.625rem;
    background: #efece4;
    border: 1px solid #e2ddd2;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cs-segment::-webkit-scrollbar { display: none; }
.cs-segment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #6b6355;
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.cs-segment-btn:hover { color: #22568c; }
.cs-segment-btn.is-active {
    background: #fff;
    color: #22568c;
    box-shadow: 0 1px 2px rgba(28, 26, 22, .1);
}
.cs-segment-btn svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

/* ── Quick-filter pills (by type) ──────────────────────────────── */
.cs-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
    /* let the row bleed to the card edges so pills can scroll fully on mobile */
    margin: 0 -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    /* A flex item's min-width is auto, so without this the row of pills refuses
       to shrink below its content and pushes the WHOLE PAGE sideways on a phone
       instead of scrolling inside itself, which is the entire point of the
       overflow-x above. The more chips a screen offers, the further it pushed. */
    min-width: 0;
    max-width: 100%;
}
@media (min-width: 768px) {
    .cs-pills { flex-wrap: wrap; overflow-x: visible; }
}
.cs-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #423d35;
    background: #fff;
    border: 1.5px solid #e2ddd2;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cs-pill:hover { border-color: #c7bfb0; background: #faf9f6; }
.cs-pill.is-active {
    background: #eef4fa;
    border-color: #22568c;
    color: #1b4472;
}
.cs-pill-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 9999px;
    background: #a8a092;
    flex-shrink: 0;
}
.cs-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0 0.35rem;
    height: 1.4rem;
    border-radius: 9999px;
    background: rgba(27, 24, 19, .07);
    font-size: 0.8125rem;
    font-weight: 700;
    color: inherit;
}
.cs-pill.is-active .cs-pill-count { background: rgba(34, 86, 140, .14); }

/* ── Inventory grid (dense table that collapses to cards on phones) ─ */

/* ================================================================
   Mobile bottom navigation (phones and small tablets, below lg)
   ----------------------------------------------------------------
   App-style bar for staff out on the park: Today, Diary, a raised
   "New" button (quick-action sheet), Guests and More (opens the
   existing full-menu drawer). Labels always visible, 48px+ targets,
   iPhone safe-area padding. Desktop is untouched: everything here
   is display:none at lg and up.
   ================================================================ */
.cs-bottomnav, .cs-sheet, .cs-sheet-backdrop { display: none; }

@media (max-width: 1023.98px) {
    .cs-bottomnav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 39;   /* under the drawer overlay (40) and drawer (50) */
        align-items: stretch;
        background: rgba(255, 255, 255, .97);
        border-top: 1px solid #e8e4db;
        padding: 0.375rem 0.375rem calc(0.375rem + env(safe-area-inset-bottom));
        box-shadow: 0 -10px 28px -22px rgba(28, 26, 22, .5);
    }
    .cs-bottomnav-item,
    .cs-bottomnav-slot { flex: 1 1 0; min-width: 0; }
    .cs-bottomnav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        min-height: 3.25rem;
        padding: 0.25rem 0;
        border: none;
        background: transparent;
        border-radius: 0.625rem;
        font-size: 0.6875rem;
        font-weight: 600;
        color: #575147;
        text-decoration: none;
        cursor: pointer;
    }
    .cs-bottomnav-item svg { width: 1.5rem; height: 1.5rem; }
    .cs-bottomnav-item.is-active { color: #f06436; }
    .cs-bottomnav-item:focus-visible { outline: 3px solid #22568c; outline-offset: -3px; }

    .cs-bottomnav-slot {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    .cs-bottomnav-new {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3.25rem;
        height: 3.25rem;
        margin-top: -1.375rem;
        border: none;
        border-radius: 9999px;
        background: #f06436;   /* Sunset Orange - the booking/create action */
        color: #fff;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(240, 100, 54, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
    }
    .cs-bottomnav-new svg { width: 1.625rem; height: 1.625rem; }
    .cs-bottomnav-new:active { transform: translateY(1px); }
    .cs-bottomnav-new:focus-visible { outline: 3px solid #f06436; outline-offset: 2px; }
    .cs-bottomnav-newlabel {
        font-size: 0.6875rem;
        font-weight: 600;
        color: #575147;
        margin-top: 0.125rem;
    }

    /* Quick-action sheet */
    .cs-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 44;
        background: rgba(27, 24, 19, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility 0s linear .2s;
    }
    .cs-sheet-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .2s ease; }
    .cs-sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        background: #fff;
        border-radius: 1rem 1rem 0 0;
        padding: 0.5rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
        box-shadow: 0 -18px 44px -20px rgba(28, 26, 22, .45);
        transform: translateY(105%);
        visibility: hidden;
        transition: transform .22s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .25s;
    }
    .cs-sheet.is-open {
        transform: translateY(0);
        visibility: visible;
        transition: transform .22s cubic-bezier(.16, 1, .3, 1);
    }
    .cs-sheet-grip {
        width: 2.5rem;
        height: 0.3125rem;
        border-radius: 9999px;
        background: #e8e4db;
        margin: 0.25rem auto 0.5rem;
    }
    .cs-sheet-item {
        display: flex;
        align-items: center;
        gap: 0.875rem;
        min-height: 3.25rem;
        padding: 0.5rem 0.75rem;
        border-radius: 0.625rem;
        font-size: 1.0625rem;
        font-weight: 600;
        color: #1b1813;
        text-decoration: none;
    }
    .cs-sheet-item svg { width: 1.5rem; height: 1.5rem; color: #22568c; flex-shrink: 0; }
    .cs-sheet-item:active { background: #f3f1ec; }
    .cs-sheet-item:focus-visible { outline: 3px solid #22568c; outline-offset: -3px; }
    .cs-sheet-form { padding: 0.25rem 0.75rem 0.5rem; }
    .cs-sheet-form .cs-label { font-size: 1.0625rem; }
    .cs-sheet-cancel {
        display: block;
        width: 100%;
        min-height: 3rem;
        margin-top: 0.375rem;
        border: none;
        border-radius: 0.625rem;
        background: #f3f1ec;
        color: #423d35;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
    }

    /* Keep existing fixed and sticky elements clear of the bar. */
    body.cs-app main { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
    .cs-actionbar-sticky { bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
}

/* ── Print: strip the app chrome so reports print clean ── */
@media print {
    aside,
    header,
    #cs-overlay,
    #cs-mobile,
    .cs-bottomnav,
    .cs-sheet,
    .cs-sheet-backdrop,
    .no-print {
        display: none !important;
    }

    body { background: #ffffff !important; }
    main, #main { padding: 0 !important; }
    .print-full { max-width: none !important; }
    a[href]:after { content: ""; } /* don't append URLs */
}

/* ════════════════════════════════════════════════════════════════
   Admin-only components
   ----------------------------------------------------------------
   Everything above this line is shared with the operator app. What
   follows is the handful of patterns only the back office needs:
   dense data tables, headline number tiles, the CRM pipeline board
   and the lead work surface. Same tokens, same radii, same warm
   paper - they just do not exist in the operator app.
   ════════════════════════════════════════════════════════════════ */

/* ── Section rail (the tab bar inside a section: CRM, Comms, …) ────
   One row of quiet chips under the page header, scrolling sideways on
   a phone. The active chip is brand blue on the Sand track, matching
   .cs-segment rather than inventing a third selected-tab look. */
.cs-rail {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0 1.5rem;
    padding: 0.25rem;
    border-radius: 0.625rem;
    background: #efece4;
    border: 1px solid #e2ddd2;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cs-rail::-webkit-scrollbar { display: none; }
.cs-rail-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0.4rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #6b6355;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.cs-rail-item svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.cs-rail-item:hover { color: #1b1813; background: rgba(255, 255, 255, .6); }
.cs-rail-item.is-active {
    background: #fff;
    color: #1b4472;
    box-shadow: 0 1px 2px rgba(28, 26, 22, .10);
}
.cs-rail-item:focus-visible { outline: 3px solid #22568c; outline-offset: -3px; }
.cs-rail-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    padding: 0 0.35rem;
    border-radius: 9999px;
    background: rgba(27, 24, 19, .08);
    font-size: 0.75rem;
    font-weight: 700;
}
.cs-rail-item.is-active .cs-rail-count { background: #eef4fa; color: #1b4472; }
.cs-rail-sep { flex: 0 0 auto; width: 1px; height: 1.4rem; background: #ddd7ca; margin: 0 0.25rem; }

/* ── Stat tiles (the headline numbers) ────────────────────────────
   A row of plain figures on white with one quiet tinted rule at the
   top. No gradient cards, no icon chips - the number is the point. */
.cs-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (min-width: 768px)  { .cs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .cs-stats-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.cs-stat {
    position: relative;
    display: block;
    padding: 0.9rem 1rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid #eae6dd;
    background: #fff;
    box-shadow: 0 1px 2px rgba(28, 26, 22, .04);
    text-decoration: none;
    overflow: hidden;
}
.cs-stat::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: #d6d0c4;
}
a.cs-stat { transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
a.cs-stat:hover {
    border-color: #d6d0c4;
    box-shadow: 0 10px 24px -12px rgba(28, 26, 22, .22);
    transform: translateY(-1px);
}
.cs-stat-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #797163;
}
.cs-stat-value {
    display: block;
    margin-top: 0.25rem;
    font-family: "Sora", "Source Sans 3", system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0f213f;
}
.cs-stat-sub { display: block; margin-top: 0.25rem; font-size: 0.9375rem; color: #797163; }

/* The rule on top carries the state colour, per the DESIGN.md §8 map. */
.cs-stat-brand::before  { background: #22568c; }
.cs-stat-action::before { background: #f06436; }
.cs-stat-sky::before    { background: #4c8dcb; }
.cs-stat-amber::before  { background: #d99a08; }
.cs-stat-rose::before   { background: #d1483a; }
.cs-stat-brand .cs-stat-value  { color: #1b4472; }
.cs-stat-amber .cs-stat-value  { color: #92600a; }
.cs-stat-rose  .cs-stat-value  { color: #b42318; }

/* ── Data table (the back-office list) ────────────────────────────
   Dense on a desktop, and wide tables scroll sideways rather than
   squashing. A table that can read as a list of records opts into
   `cs-dtable-cards` as well: below 1024px each row folds into its own
   card, labelled from the data-label on every <td>. The fold happens at
   lg, not md, because an eight-column list is still unreadable on an
   iPad in portrait - the same breakpoint the nav collapses at. Tables
   too wide or too numeric to fold (an audit log, a fee report) leave it
   off and keep scrolling, which beats a stack of unlabelled figures. */
.cs-dtable-wrap {
    border-radius: 0.75rem;
    border: 1px solid #eae6dd;
    background: #fff;
    box-shadow: 0 1px 2px rgba(28, 26, 22, .04);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cs-dtable { width: 100%; border-collapse: collapse; }
.cs-dtable thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fbfaf7;
    border-bottom: 1px solid #eae6dd;
    padding: 0.7rem 1rem;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #797163;
    white-space: nowrap;
}
.cs-dtable tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f3f1ec;
    font-size: 0.9375rem;
    color: #423d35;
    vertical-align: middle;
}
.cs-dtable tbody tr:last-child td { border-bottom: none; }
.cs-dtable tbody tr:hover td { background: #fbfaf7; }
.cs-dtable-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-dtable-actions { text-align: right; white-space: nowrap; }
.cs-dtable-primary { font-weight: 600; color: #1b1813; }
.cs-dtable a.cs-dtable-primary:hover { color: #22568c; }
.cs-dtable-secondary { display: block; font-size: 0.8125rem; color: #797163; margin-top: 0.1rem; }

/* A group heading row inside the table (leads grouped by region, …). */
.cs-dtable-group td {
    background: #f6f4ef !important;
    padding: 0.45rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #797163;
}

@media (max-width: 1023.98px) {
    .cs-dtable-wrap:has(.cs-dtable-cards) { border: none; background: transparent; box-shadow: none; border-radius: 0; }
    .cs-dtable-cards, .cs-dtable-cards tbody, .cs-dtable-cards tr, .cs-dtable-cards td { display: block; width: 100%; }
    .cs-dtable-cards thead { display: none; }
    .cs-dtable-cards tbody tr {
        border: 1px solid #eae6dd;
        border-radius: 0.75rem;
        background: #fff;
        box-shadow: 0 1px 2px rgba(28, 26, 22, .04);
        padding: 0.35rem 0.85rem;
        margin-bottom: 0.75rem;
    }
    .cs-dtable-cards tbody tr:hover td { background: transparent; }
    .cs-dtable-cards tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f6f4ef;
        text-align: right;
    }
    .cs-dtable-cards tbody td:last-child { border-bottom: none; }
    /* A column the person has put away stays away in card mode too. The
       display:flex above outranks the [hidden] attribute's display:none, so
       without this the chooser looks like it does nothing on a phone. */
    .cs-dtable-cards tbody td[hidden],
    .cs-dtable-cards thead th[hidden] { display: none; }
    .cs-dtable-cards td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #797163;
        text-align: left;
    }
    /* The first cell is the row's headline: full width, no label, left aligned. */
    .cs-dtable-cards td.cs-dtable-head {
        display: block;
        text-align: left;
        padding-top: 0.7rem;
    }
    .cs-dtable-cards td.cs-dtable-head::before { content: none; }
    .cs-dtable-actions { justify-content: flex-end; }
    .cs-dtable-group td { border-radius: 0; margin: 0.5rem 0 0.25rem; }
    .cs-dtable-cards tbody tr.cs-dtable-group {
        border: none;
        background: transparent;
        box-shadow: none;
        padding: 0;
        margin-bottom: 0.25rem;
    }
    .cs-dtable-group td::before { content: none; }
}

/* ── Working grid (cs-dtable + cs-grid.js) ────────────────────────
   The back-office table turned into something you can actually work a
   pipeline in: click a header to sort, tick rows and act on the lot,
   drop columns you don't care about, tighten the rows up. Every part
   is an addition to `cs-dtable`, so a plain list keeps reading exactly
   as it did and only the grids that opt in change.

   Markup contract (wwwroot/js/cs-grid.js):
     <div class="cs-grid" data-cs-grid="leads">   the id the browser
        remembers a person's columns and density under
     <th data-col="worth">                        a hideable column;
        every <td> in that column repeats the same data-col
     <input class="cs-grid-check" data-cs-grid-row>  a row tick
   The whole thing degrades to a normal sortable table with no
   JavaScript: sorting and paging are links, and the bulk bar is a
   plain form that simply never appears. */
.cs-grid { display: block; }

/* The strip above the grid: what is selected, and the view controls. */
.cs-gridbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.15rem 0.75rem;
    font-size: 0.875rem;
    color: #797163;
}
.cs-gridbar-spacer { flex: 1 1 auto; }
.cs-gridbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e0d5;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    color: #423d35;
    cursor: pointer;
    white-space: nowrap;
}
.cs-gridbtn:hover { border-color: #c7bfb0; background: #fbfaf7; }
.cs-gridbtn:focus-visible { outline: 3px solid #22568c; outline-offset: 2px; }
.cs-gridbtn.is-active { border-color: #2f6faf; background: #eef4fa; color: #1b4472; }
.cs-gridbtn svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }

/* Column chooser: a plain panel hung under its button, never a modal. */
.cs-colmenu-wrap { position: relative; }
.cs-colmenu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 30;
    min-width: 15rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e5e0d5;
    background: #fff;
    box-shadow: 0 12px 28px rgba(28, 26, 22, .12);
}
.cs-colmenu[hidden] { display: none; }
.cs-colmenu-title {
    padding: 0.3rem 0.5rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #797163;
}
.cs-colmenu label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: #423d35;
    cursor: pointer;
}
.cs-colmenu label:hover { background: #fbfaf7; }

/* Sortable header: the whole cell is the target, the arrow says which
   way it runs. An unsorted column shows its arrow only on hover, so a
   wide header row is not a wall of chevrons. */
.cs-dtable th .cs-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.cs-dtable th .cs-sort:hover { color: #22568c; }
.cs-dtable th .cs-sort:focus-visible { outline: 3px solid #22568c; outline-offset: 2px; border-radius: 0.25rem; }
.cs-sort-arrow { width: 0.85rem; height: 0.85rem; opacity: 0; flex-shrink: 0; }
.cs-dtable th .cs-sort:hover .cs-sort-arrow { opacity: .45; }
.cs-dtable th.is-sorted { color: #1b4472; background: #f4f7fb; }
.cs-dtable th.is-sorted .cs-sort-arrow { opacity: 1; }

/* Row ticks. The header tick selects the page, nothing more - a bulk
   action never silently reaches rows nobody has looked at. */
.cs-dtable th.cs-dtable-pick,
.cs-dtable td.cs-dtable-pick {
    width: 2.75rem;
    padding-right: 0;
    text-align: center;
}
.cs-grid-check { width: 1.15rem; height: 1.15rem; accent-color: #22568c; cursor: pointer; }
.cs-dtable tbody tr.is-picked td { background: #f4f7fb; }

/* Compact density: the same grid with the air taken out, for when the
   question is "how many of these are there" rather than "read me this
   one". Body text stays at 15px - density is padding, never type size. */
.cs-dtable-compact tbody td { padding: 0.45rem 0.7rem; }
.cs-dtable-compact thead th { padding: 0.45rem 0.7rem; }
.cs-dtable-compact .cs-dtable-secondary { display: none; }

/* Keep the site name in view when a wide grid scrolls sideways, the
   way every desktop CRM does. Desktop only: on a phone the rows fold
   into cards and there is nothing to pin. */
@media (min-width: 1024px) {
    .cs-dtable-pinned thead th.cs-dtable-pick,
    .cs-dtable-pinned tbody td.cs-dtable-pick {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
    }
    .cs-dtable-pinned thead th.cs-dtable-pick { z-index: 3; background: #fbfaf7; }
    .cs-dtable-pinned thead th.cs-dtable-head,
    .cs-dtable-pinned tbody td.cs-dtable-head {
        position: sticky;
        left: 2.75rem;
        z-index: 2;
        background: #fff;
        box-shadow: 1px 0 0 #f3f1ec;
    }
    /* No tick column (a read-only viewer) means the headline column IS the first
       one, so it pins against the edge rather than leaving a phantom gutter. */
    .cs-dtable-pinned thead th.cs-dtable-head:first-child,
    .cs-dtable-pinned tbody td.cs-dtable-head:first-child { left: 0; }
    .cs-dtable-pinned thead th.cs-dtable-head { z-index: 3; background: #fbfaf7; }
    .cs-dtable-pinned tbody tr:hover td.cs-dtable-head,
    .cs-dtable-pinned tbody tr:hover td.cs-dtable-pick { background: #fbfaf7; }
    .cs-dtable-pinned tbody tr.is-picked td.cs-dtable-head,
    .cs-dtable-pinned tbody tr.is-picked td.cs-dtable-pick { background: #f4f7fb; }
}

/* The bulk bar: floats over the bottom of the screen once anything is
   ticked, and says how many before it says what it can do. */
.cs-bulkbar {
    position: fixed;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 45;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: min(60rem, calc(100vw - 1.5rem));
    padding: 0.7rem 0.9rem;
    border-radius: 0.75rem;
    border: 1px solid #d6d0c4;
    background: #fff;
    box-shadow: 0 12px 32px rgba(28, 26, 22, .18);
}
.cs-bulkbar[hidden] { display: none; }
.cs-bulkbar-count {
    font-weight: 700;
    color: #1b1813;
    white-space: nowrap;
}
/* cs-input is full-width by default, which in a single row of controls makes
   every dropdown claim a line of its own. In the bar they size to content. */
.cs-bulkbar .cs-input {
    width: auto;
    flex: 0 1 11rem;
    min-width: 8rem;
    min-height: 44px;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 0.9375rem;
}
.cs-bulkbar-spacer { flex: 1 1 auto; }

@media (max-width: 1023.98px) {
    /* Below lg the rows are cards, so the tick sits inline with the
       headline rather than in a column of its own. */
    .cs-dtable-cards td.cs-dtable-pick {
        display: inline-flex;
        width: auto;
        border-bottom: none;
        padding: 0.7rem 0 0;
    }
    .cs-dtable-cards td.cs-dtable-pick::before { content: none; }
    .cs-bulkbar { bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 5rem)); }
}

/* ── Toolbar (search + filters above a list) ──────────────────────
   A soft panel rather than another white card, so a list screen is
   not three stacked boxes. */
.cs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid #eae6dd;
    background: #fbfaf7;
    margin-bottom: 1.25rem;
}
.cs-toolbar-grow { flex: 1 1 14rem; min-width: 0; }
.cs-toolbar-field { flex: 0 0 auto; }
.cs-toolbar-field .cs-label { font-size: 0.8125rem; margin-bottom: 0.25rem; }
.cs-toolbar .cs-input { min-height: 44px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.cs-toolbar-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #423d35;
    cursor: pointer;
}
/* min-width:0 for the same reason as .cs-pills: a flex item will not shrink
   below its content unless told to, so a row holding a long scroller would
   otherwise stretch the toolbar and take the page sideways with it. */
.cs-toolbar-row { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Search field with a leading magnifier (same wrapper trick as the
   settings hub, so there is one way to draw a search box). */
.cs-search { position: relative; }
.cs-search input { padding-left: 2.85rem; }
.cs-search svg {
    position: absolute;
    left: 0.95rem; top: 50%; transform: translateY(-50%);
    height: 1.15rem; width: 1.15rem;
    color: #a8a092; pointer-events: none;
}

/* ── Empty state ──────────────────────────────────────────────────
   The one way a list says "nothing here yet". */
.cs-empty {
    border-radius: 0.75rem;
    border: 1px dashed #d6d0c4;
    background: #fff;
    padding: 2.5rem 1.5rem;
    text-align: center;
}
.cs-empty-title { font-size: 1.125rem; font-weight: 700; color: #1b1813; }
.cs-empty-body { margin-top: 0.35rem; font-size: 1rem; color: #575147; }
.cs-empty-actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* ── Set-it-once panel (a <details> folded into a card) ───────────
   For the things a screen has to offer but nobody needs on a Tuesday: the
   diary's Outlook subscription links. Composes .cs-card so the surface,
   border and shadow are the shared ones - this only adds the fold. */
.cs-outlook { margin-bottom: 1.25rem; }
.cs-outlook-summary {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    color: #22568c;
    min-height: 48px;
}
.cs-outlook-summary::-webkit-details-marker { display: none; }
.cs-outlook-summary > svg { flex: none; margin-top: 0.15rem; }
.cs-outlook-summary .cs-card-title,
.cs-outlook-summary .cs-card-sub { display: block; }
.cs-outlook-summary:hover .cs-card-title { color: #22568c; }
.cs-outlook[open] .cs-outlook-summary { border-bottom: 1px solid #f3f1ec; }

.cs-outlook-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .cs-outlook-row { grid-template-columns: 15rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
}
.cs-outlook-link { min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.cs-outlook-link .cs-input { width: 100%; }
.cs-outlook-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cs-outlook-note {
    border-top: 1px solid #f3f1ec;
    padding-top: 1rem;
    font-size: 0.9375rem;
    color: #575147;
}
.cs-outlook-note p + p { margin-top: 0.5rem; }

/* ── Toast (the "that worked" line after a POST) ──────────────────
   One class, three tones from the §8 state map. */
.cs-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid #b4d0e9;
    background: #eef4fa;
    color: #1b4472;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.cs-toast svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.1rem; }
.cs-toast-warn  { border-color: #f3dda2; background: #fef8e7; color: #92600a; }
.cs-toast-error { border-color: #f4c9c4; background: #fef3f2; color: #b42318; }

/* ── Section heading inside a page (above a table or a panel) ───── */
.cs-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 2rem 0 0.875rem;
}
.cs-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1b1813;
}
.cs-section-sub { font-size: 0.9375rem; color: #797163; margin-top: 0.1rem; }

/* ── Meter (a proportion bar: pipeline, segment mix) ──────────────
   Colour is never the only signal - every meter is labelled and
   carries its own count beside it. */
.cs-meter {
    height: 0.625rem;
    border-radius: 9999px;
    background: #efece4;
    overflow: hidden;
}
.cs-meter-fill { height: 100%; border-radius: 9999px; background: #22568c; }
.cs-meter-fill-sky    { background: #4c8dcb; }
.cs-meter-fill-action { background: #f06436; }
.cs-meter-fill-amber  { background: #d99a08; }
.cs-meter-fill-rose   { background: #d1483a; }
.cs-meter-fill-mute   { background: #a8a092; }
.cs-meter-row {
    display: grid;
    grid-template-columns: 7.5rem 1fr 2.75rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0;
}
.cs-meter-name { font-size: 0.9375rem; color: #575147; }
.cs-meter-count { text-align: right; font-size: 0.9375rem; font-weight: 700; color: #1b1813; font-variant-numeric: tabular-nums; }

/* ── Pipeline board (kanban) ──────────────────────────────────────
   Columns scroll sideways on a phone and snap, so a stage is never
   cut in half. Each column is a soft panel, not another white card. */
.cs-board {
    display: flex;
    gap: 0.875rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.cs-board-col {
    flex: 0 0 17rem;
    max-width: 17rem;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    border: 1px solid #eae6dd;
    background: #fbfaf7;
}

/* On a desktop the stages share the page shell rather than overflowing it, so
   the board sits in the same column as every other CRM screen and you can see
   the whole pipeline without scrolling sideways. Below this they go back to
   fixed-width panels that snap-scroll. */
@media (min-width: 1280px) {
    .cs-board { overflow-x: visible; }
    .cs-board-col { flex: 1 1 0; max-width: none; min-width: 0; }
}
.cs-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid #f0ede6;
}
.cs-board-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1b1813;
}
.cs-board-dot { width: 0.6rem; height: 0.6rem; border-radius: 9999px; background: #a8a092; flex: none; }
.cs-board-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 9999px;
    background: #efece4;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #575147;
}
.cs-board-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem;
    min-height: 4rem;
}
.cs-board-card {
    display: block;
    padding: 0.7rem 0.8rem;
    border-radius: 0.5625rem;
    border: 1px solid #eae6dd;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(28, 26, 22, .04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.cs-board-card:hover {
    border-color: #b4d0e9;
    box-shadow: 0 8px 20px -12px rgba(15, 33, 63, .3);
    transform: translateY(-1px);
}
.cs-board-card-title { font-size: 0.9375rem; font-weight: 600; color: #1b1813; line-height: 1.3; }
.cs-board-card-meta { margin-top: 0.3rem; font-size: 0.8125rem; color: #797163; }
.cs-board-card-tags { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cs-board-empty { padding: 0.75rem; font-size: 0.875rem; color: #a8a092; text-align: center; }
.cs-board-more { display: block; padding: 0.4rem; text-align: center; font-size: 0.875rem; font-weight: 600; color: #22568c; }

/* ── Lead work surface (the CRM detail page) ──────────────────────
   A two-column split on a desktop: the record on the left, the
   activity feed and next actions on the right. One column on a
   phone, activity first, because that is what you came for. */
.cs-crm-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .cs-crm-split { grid-template-columns: minmax(0, 1fr) 24rem; }
    .cs-crm-side { position: sticky; top: 5.5rem; }
}

/* The identity strip at the top of a lead: who they are, one line of
   facts, and the actions that matter (call, email, website). */
.cs-crm-ident {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.75rem;
    border: 1px solid #eae6dd;
    background: #fff;
    box-shadow: 0 1px 2px rgba(28, 26, 22, .04);
}
.cs-crm-score {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    flex: none;
    border-radius: 0.625rem;
    background: #eef4fa;
    color: #1b4472;
    line-height: 1;
}
.cs-crm-score strong { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-crm-score span { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: .75; }
.cs-crm-score-hot  { background: #fdeee7; color: #8f2f13; }
.cs-crm-score-warm { background: #fef8e7; color: #92600a; }
.cs-crm-ident-body { min-width: 0; flex: 1 1 12rem; }
.cs-crm-ident-name {
    font-family: "Sora", "Source Sans 3", system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #0f213f;
    line-height: 1.2;
}
.cs-crm-ident-meta {
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    font-size: 0.9375rem;
    color: #797163;
}
.cs-crm-ident-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }

/* Quick contact buttons: the same shape as cs-btn-sm but icon-led. */
.cs-crm-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.4rem 0.85rem;
    border-radius: 0.5rem;
    border: 1.5px solid #b4d0e9;
    background: #fff;
    color: #22568c;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.cs-crm-contact svg { width: 1.125rem; height: 1.125rem; }
.cs-crm-contact:hover { background: #eef4fa; border-color: #22568c; }

/* ── Activity feed (what happened, and what happens next) ─────────
   The CRM's spine. Reuses the operator app's note timeline look so a
   history reads the same everywhere; the extra bits here are the kind
   icon and the due/overdue treatment on an open task. */
.cs-act-kind {
    position: absolute;
    left: -0.35rem;
    top: 0.15rem;
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 9999px;
    background: #eef4fa;
    color: #22568c;
    border: 2px solid #fff;
}
.cs-act-kind svg { width: 0.95rem; height: 0.95rem; }
.cs-act-kind-task { background: #fef8e7; color: #92600a; }
.cs-act-kind-done { background: #eef4fa; color: #1b4472; }
.cs-act-kind-call { background: #e6eff8; color: #2f5d86; }
.cs-act-kind-note { background: #f3f1ec; color: #575147; }

.cs-act-item { padding-left: 2rem; }
.cs-act-item::before { left: 0.45rem; }
.cs-act-subject { font-size: 1rem; font-weight: 700; color: #1b1813; }
.cs-act-due {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
    font-weight: 700;
}
.cs-act-overdue { color: #b42318; }
.cs-act-today   { color: #92600a; }
.cs-act-later   { color: #797163; }
.cs-act-complete {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 40px;
    padding: 0.3rem 0.7rem;
    border-radius: 0.5rem;
    border: 1.5px solid #b4d0e9;
    background: #fff;
    color: #22568c;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}
.cs-act-complete:hover { background: #eef4fa; }
.cs-act-done .cs-act-subject { color: #797163; }

/* The composer: log what just happened, or set what happens next. */
.cs-act-compose { padding: 0 0 1.1rem; border-bottom: 1px solid #f3f1ec; }
.cs-act-kinds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
@media (min-width: 480px) { .cs-act-kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Follow-up queue row (Today's work) ───────────────────────────
   A tap target that says who, what and when in one line on a phone. */
.cs-queue { display: flex; flex-direction: column; gap: 0.625rem; }
.cs-queue-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid #eae6dd;
    background: #fff;
    box-shadow: 0 1px 2px rgba(28, 26, 22, .04);
}
.cs-queue-item.is-overdue { border-left: 3px solid #d1483a; }
.cs-queue-item.is-today   { border-left: 3px solid #f06436; }
.cs-queue-body { min-width: 0; flex: 1 1 auto; }
.cs-queue-title { font-size: 1rem; font-weight: 600; color: #1b1813; }
.cs-queue-title a { color: inherit; text-decoration: none; }
.cs-queue-title a:hover { color: #22568c; }
.cs-queue-meta {
    margin-top: 0.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    font-size: 0.875rem;
    color: #797163;
}
.cs-queue-actions { flex: none; display: flex; gap: 0.4rem; }

/* ── Key/value facts (a read-only record panel) ───────────────────
   Two columns on a desktop, stacked on a phone, with a hairline
   between rows instead of yet another set of boxes. */
.cs-facts { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } }
.cs-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #f3f1ec;
    font-size: 0.9375rem;
}
.cs-fact-key { color: #797163; flex: none; }
.cs-fact-val { color: #1b1813; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.cs-fact-val a { color: #22568c; }

/* ── Simple bar/line chart frames ─────────────────────────────────
   The SVG is drawn by the page; this only gives it a consistent
   frame, legend and axis colour so two charts never disagree. */
.cs-chart { width: 100%; height: auto; display: block; }
.cs-chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.85rem;
    font-size: 0.8125rem;
    color: #797163;
}
.cs-chart-key { display: inline-flex; align-items: center; gap: 0.35rem; }
.cs-chart-swatch { width: 0.65rem; height: 0.65rem; border-radius: 0.15rem; }

/* ── Pager ────────────────────────────────────────────────────── */
.cs-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    color: #575147;
}
.cs-pager-btns { display: flex; gap: 0.5rem; }

/* ── Code / identifier text (API keys, ids, hostnames) ──────────── */
.cs-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    background: #f3f1ec;
    border-radius: 0.35rem;
    padding: 0.1rem 0.4rem;
    color: #423d35;
    overflow-wrap: anywhere;
}

/* ──────────────────────────────────────────────────────────────
   Rich HTML editor (Quill) - ported from Campsuite.Web so admins can
   author help-widget content (tour steps, hints, KB articles) with the
   same visual editor used for email templates.
   ────────────────────────────────────────────────────────────── */
.cs-editor-wrap .ql-toolbar.ql-snow {
    border: 1px solid #d6d0c4;
    border-bottom: none;
    border-radius: 0.75rem 0.75rem 0 0;
    background: #fbfaf7;
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

/* Toolbar groups, separated by a soft divider so related controls read as a set.
   Tailwind's CDN preflight resets <button>/<svg>, which strips Quill's own toolbar
   styling - so we restyle the buttons and pickers from scratch here. */
.cs-editor-wrap .ql-toolbar.ql-snow .ql-formats {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-right: 8px;
    border-right: 1px solid #e8e4db;
}

.cs-editor-wrap .ql-toolbar.ql-snow .ql-formats:last-child {
    border-right: none;
    padding-right: 0;
}

/* Each toolbar control is a proper, tappable, rounded button. */
.cs-editor-wrap .ql-toolbar.ql-snow button {
    width: 32px;
    height: 32px;
    padding: 5px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    transition: background-color .12s ease;
}

.cs-editor-wrap .ql-toolbar.ql-snow button svg {
    width: 18px;
    height: 18px;
}

.cs-editor-wrap .ql-toolbar.ql-snow button:hover,
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label:hover {
    background: #e8e4db;
}

.cs-editor-wrap .ql-toolbar.ql-snow button .ql-stroke,
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label .ql-stroke {
    stroke: #575147;
}

.cs-editor-wrap .ql-toolbar.ql-snow button .ql-fill,
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label .ql-fill {
    fill: #575147;
}

/* Active / hovered controls pick up the brand blue. */
.cs-editor-wrap .ql-toolbar.ql-snow button.ql-active,
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label.ql-active {
    background: #eef4fa;
}

.cs-editor-wrap .ql-toolbar.ql-snow button.ql-active .ql-stroke,
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke,
.cs-editor-wrap .ql-toolbar.ql-snow button:hover .ql-stroke,
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke {
    stroke: #1b4472;
}

.cs-editor-wrap .ql-toolbar.ql-snow button.ql-active .ql-fill,
.cs-editor-wrap .ql-toolbar.ql-snow button:hover .ql-fill {
    fill: #1b4472;
}

/* Dropdown pickers (heading level, text colour). */
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker {
    height: 32px;
    display: inline-flex;
    align-items: center;
    color: #575147;
    font-size: 14px;
    font-weight: 500;
}

.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label {
    border: none;
    border-radius: 8px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
}

.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label::before {
    line-height: 32px;
}

.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-options {
    border-radius: 10px;
    border: 1px solid #e8e4db;
    box-shadow: 0 10px 28px rgba(28, 26, 22, 0.14);
    padding: 6px;
}

.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-item:hover,
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-item.ql-selected {
    color: #1b4472;
}

.cs-editor-wrap .ql-container.ql-snow {
    border: 1px solid #d6d0c4;
    border-radius: 0 0 0.75rem 0.75rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    background: #ffffff;
}

.cs-editor-wrap .ql-editor {
    min-height: 240px;
    line-height: 1.6;
    color: #1b1813;
}

.cs-editor-wrap .ql-editor.ql-blank::before {
    color: #a8a092;
    font-style: normal;
}

/* Brand-blue focus ring to match the rest of the app. */
.cs-editor-wrap:focus-within .ql-toolbar.ql-snow,
.cs-editor-wrap:focus-within .ql-container.ql-snow {
    border-color: #2f6faf;
}

/* Friendly blockquote = the "info card" used in templates. */
.cs-editor-wrap .ql-editor blockquote {
    border-left: 4px solid #22568c;
    background: #fbfaf7;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 12px;
    color: #423d35;
}

/* Raw HTML source view. */
.cs-html-source {
    width: 100%;
    min-height: 280px;
    border: 1px solid #d6d0c4;
    border-radius: 0.75rem;
    padding: 12px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    color: #1b1813;
    background: #ffffff;
}

.cs-html-source:focus {
    outline: none;
    border-color: #2f6faf;
    box-shadow: 0 0 0 1px #2f6faf;
}

.cs-source-toggle.cs-source-active {
    background: #eef4fa;
    border-color: #2f6faf;
    color: #1b4472;
}

/* Tour builder: drag-to-reorder affordances */
.cs-step-drag { touch-action: none; }
.cs-step-card.cs-dragging { opacity: .5; }
.cs-step-card[draggable="true"] { cursor: grabbing; }