/* ============================================================================
   Spaxly.Web - wwwroot/css/site.css
   The one stylesheet (Doc 05 S1-S6). Ported from the CitrusMakerspace
   dark theme, cleaned:
     - --cms- variables renamed --sx- (Doc 03 C14).
     - Dark theme through Bootstrap's colour mode (html data-bs-theme="dark");
       Bootstrap's own variables are mapped to the --sx- palette (S3).
     - The brand colour --sx-accent comes from /branding.css (Doc 03 C11);
       its shades are derived here with color-mix() (S2).
     - Cards do not lift on hover; clickable cards opt in with .hover-lift (S5).
     - Module styles are added when their module is ported (S6).
     - Page, form and list patterns follow Doc 09 GUI Standards:
       one-line form rows (.sx-form-row, G1-G6), one-line list rows
       (.sx-table, G7-G9), sortable headers (.sx-sort, G10), clickable rows
       (.sx-row-link, G13). Compact sizes are the default (G4) - there is
       no form-compact wrapper.
   No per-page style blocks anywhere else.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. Palette
   -------------------------------------------------------------------------- */
:root {
    /* Brand colour - fallback only; /branding.css overrides it (S2) */
    --sx-accent: #10b981;
    --sx-accent-hover: color-mix(in srgb, var(--sx-accent) 85%, black);
    --sx-accent-light: color-mix(in srgb, var(--sx-accent) 15%, transparent);
    /* Surfaces */
    --sx-bg-darkest: #0d1117;
    --sx-bg-dark: #161b22;
    --sx-bg-card: #1c2128;
    --sx-bg-elevated: #21262d;
    --sx-bg-input: #2d2d2d;
    --sx-bg-disabled: #252830;
    /* Borders */
    --sx-border: #30363d;
    --sx-border-light: #21262d;
    --sx-border-input: #444444;
    /* Text */
    --sx-text-primary: #e6edf3;
    --sx-text-secondary: #8b949e;
    --sx-text-muted: #6e7681;
    --sx-text-link: #58a6ff;
    /* Status */
    --sx-success: #3fb950;
    --sx-warning: #d29922;
    --sx-danger: #f85149;
    --sx-info: #58a6ff;
    /* Shadows */
    --sx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sx-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    --sx-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
    /* Radius */
    --sx-radius-sm: 0.25rem;
    --sx-radius: 0.375rem;
    --sx-radius-lg: 0.5rem;
    --sx-radius-xl: 0.75rem;
    /* Motion */
    --sx-transition: 0.2s ease;
    /* Layout (Doc 09) */
    --sx-label-width: 9.5rem;     /* G1: fixed label column */
    --sx-form-gap: 0.75rem;       /* gap between label and field */
}

/* --------------------------------------------------------------------------
   2. Bootstrap dark mode mapped to the palette (S3)
   Every Bootstrap component picks these up - no per-component dark overrides.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--sx-bg-darkest);
    --bs-body-bg-rgb: 13, 17, 23;
    --bs-body-color: var(--sx-text-primary);
    --bs-body-color-rgb: 230, 237, 243;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: var(--sx-text-secondary);
    --bs-tertiary-color: var(--sx-text-muted);
    --bs-secondary-bg: var(--sx-bg-elevated);
    --bs-tertiary-bg: var(--sx-bg-dark);
    --bs-border-color: var(--sx-border);
    --bs-link-color: var(--sx-text-link);
    --bs-link-color-rgb: 88, 166, 255;
    --bs-primary: var(--sx-accent);
    --bs-focus-ring-color: var(--sx-accent-light);
}

/* Bootstrap builds these from --bs-primary-rgb, which cannot be derived from
   a runtime hex colour - point them at the accent directly. */
.text-primary {
    color: var(--sx-accent) !important;
}

.bg-primary {
    background-color: var(--sx-accent) !important;
}

.border-primary {
    border-color: var(--sx-accent) !important;
}

/* A unit held - Current / Occupied (Doc 25 §11): a fixed blue, never the
   accent, so it never looks like Vacant (success green) whatever the brand. */
.badge.sx-badge-held {
    background-color: #2f6fde;
    color: #ffffff;
}

/* Rows added in a form (G85 - Doc 25 XC3, XC6): extras and deposits.
   Each row one line of fields that wraps on a narrow screen. */
.sx-rows-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.sx-row-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

    .sx-row-line .sx-row-fill {
        flex: 1 1 10rem;
        min-width: 8rem;
    }

/* --------------------------------------------------------------------------
   3. Base and typography
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sx-text-primary);
    font-weight: 600;
    line-height: 1.3;
}

h1 {
    font-size: 2.25rem;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.1rem;
}

h6 {
    font-size: 1rem;
}

a {
    text-decoration: none;
    transition: color var(--sx-transition);
}

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

.text-muted {
    color: var(--sx-text-muted) !important;
}

.text-secondary {
    color: var(--sx-text-secondary) !important;
}

.text-accent {
    color: var(--sx-accent) !important;
}

/* Page header row (Doc 09 G14): title left, primary actions right */
.sx-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

    .sx-page-header h1 {
        font-size: 1.5rem;
        margin-bottom: 0;
    }

        .sx-page-header h1 .bi {
            margin-right: 0.5rem;
        }

    .sx-page-header .sx-subtitle {
        color: var(--sx-text-secondary);
        font-size: 0.875rem;
        margin-left: 0.5rem;
    }

/* Back link above a detail / edit page title (G19) */
.sx-back {
    display: inline-block;
    color: var(--sx-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
   4. Navigation
   -------------------------------------------------------------------------- */
.navbar {
    --bs-navbar-color: var(--sx-text-secondary);
    --bs-navbar-hover-color: var(--sx-text-primary);
    --bs-navbar-active-color: var(--sx-text-primary);
    --bs-navbar-brand-color: var(--sx-text-primary);
    --bs-navbar-brand-hover-color: var(--sx-text-primary);
    background-color: var(--sx-bg-dark);
    border-bottom: 1px solid var(--sx-border);
    padding: 0.75rem 0;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
}

    .navbar-brand img {
        height: 40px;
        width: auto;
    }

.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: color var(--sx-transition);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--sx-bg-elevated);
    --bs-dropdown-border-color: var(--sx-border);
    --bs-dropdown-link-color: var(--sx-text-secondary);
    --bs-dropdown-link-hover-color: var(--sx-text-primary);
    --bs-dropdown-link-hover-bg: var(--sx-accent-light);
    --bs-dropdown-link-active-color: #ffffff;
    --bs-dropdown-link-active-bg: var(--sx-accent);
    --bs-dropdown-divider-bg: var(--sx-border);
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: 0.5rem;
    box-shadow: var(--sx-shadow-lg);
}

/* The main nav (Doc 09 G82, OI-26). Below lg #mainNav is an offcanvas panel
   from the right: links stacked, Manage's groups listed open under it, the
   name menu last. From lg up the same markup is the inline nav, and Manage
   opens one wide panel with the groups in up to three columns. */
.sx-nav-panel {
    --bs-offcanvas-bg: var(--sx-bg-dark);
    --bs-offcanvas-width: 19rem;
    border-left: 1px solid var(--sx-border);
}

.sx-manage-group .dropdown-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sx-text-muted);
    padding: 0.5rem 1rem 0.25rem;
}

@media (min-width: 992px) {
    .sx-manage-menu.show {
        display: grid;
        gap: 0 1rem;
        padding: 0.5rem;
    }

    .sx-manage-cols-1.show { grid-template-columns: minmax(12rem, 1fr); }
    .sx-manage-cols-2.show { grid-template-columns: repeat(2, minmax(12rem, 1fr)); }
    .sx-manage-cols-3.show { grid-template-columns: repeat(3, minmax(12rem, 1fr)); }
}

@media (max-width: 991.98px) {
    .sx-nav-panel .navbar-nav .nav-link {
        padding: 0.5rem 0.25rem;
    }

    /* Manage: a heading over its groups, always open in the panel. */
    .sx-manage > .dropdown-toggle {
        pointer-events: none;
    }

        .sx-manage > .dropdown-toggle::after {
            display: none;
        }

    .sx-manage-menu {
        display: block;
        position: static;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 0 0.5rem;
    }

        .sx-manage-menu .dropdown-item {
            padding: 0.4rem 0.75rem;
        }

    .sx-nav-user {
        border-top: 1px solid var(--sx-border);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }

        .sx-nav-user .dropdown-menu {
            position: static;
            box-shadow: none;
        }
}

/* --------------------------------------------------------------------------
   5. Cards (static by default - S5)
   -------------------------------------------------------------------------- */
.card {
    background-color: var(--sx-bg-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-radius-lg);
}

.card-header {
    background-color: var(--sx-bg-elevated);
    border-bottom: 1px solid var(--sx-border);
    padding: 1rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background-color: var(--sx-bg-elevated);
    border-top: 1px solid var(--sx-border);
    padding: 1rem 1.25rem;
}

.card-title {
    color: var(--sx-text-primary);
    margin-bottom: 0.75rem;
}

.card-text {
    color: var(--sx-text-secondary);
}

/* Accent card header */
.card-header.header-accent {
    background-color: var(--sx-accent) !important;
    border-bottom-color: var(--sx-accent-hover) !important;
    color: #ffffff;
}

/* Clickable cards and tiles opt in */
.hover-lift {
    transition: transform var(--sx-transition), box-shadow var(--sx-transition);
}

    .hover-lift:hover {
        transform: translateY(-4px);
        box-shadow: var(--sx-shadow);
    }

/* --------------------------------------------------------------------------
   6. Buttons (btn-sm on all buttons - UI standard)
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--sx-radius);
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    transition: all var(--sx-transition);
}

.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
}

.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--sx-accent);
    --bs-btn-border-color: var(--sx-accent);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--sx-accent-hover);
    --bs-btn-hover-border-color: var(--sx-accent-hover);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--sx-accent-hover);
    --bs-btn-active-border-color: var(--sx-accent-hover);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--sx-accent);
    --bs-btn-disabled-border-color: var(--sx-accent);
    --bs-btn-focus-shadow-rgb: 16, 185, 129;
}

.btn-outline-primary {
    --bs-btn-color: var(--sx-accent);
    --bs-btn-border-color: var(--sx-accent);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--sx-accent);
    --bs-btn-hover-border-color: var(--sx-accent);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--sx-accent-hover);
    --bs-btn-active-border-color: var(--sx-accent-hover);
    --bs-btn-disabled-color: var(--sx-accent);
    --bs-btn-disabled-border-color: var(--sx-accent);
}

.btn-secondary {
    --bs-btn-color: var(--sx-text-primary);
    --bs-btn-bg: var(--sx-bg-elevated);
    --bs-btn-border-color: var(--sx-border);
    --bs-btn-hover-color: var(--sx-text-primary);
    --bs-btn-hover-bg: var(--sx-border);
    --bs-btn-hover-border-color: var(--sx-border);
    --bs-btn-active-color: var(--sx-text-primary);
    --bs-btn-active-bg: var(--sx-border);
    --bs-btn-active-border-color: var(--sx-border);
}

/* --------------------------------------------------------------------------
   7. Forms (Doc 09 G1-G6, G20-G22)
   Compact sizes are the default for every form (G4).
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    background-color: var(--sx-bg-input);
    border: 1px solid var(--sx-border-input);
    color: var(--sx-text-primary);
    border-radius: var(--sx-radius);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.form-select {
    padding-right: 2rem;           /* room for the arrow */
    background-position: right 0.5rem center;
}

textarea.form-control {
    padding: 0.35rem 0.5rem;
}

    .form-control:focus,
    .form-select:focus {
        background-color: var(--sx-bg-input);
        border-color: var(--sx-accent);
        color: var(--sx-text-primary);
        box-shadow: 0 0 0 0.2rem var(--sx-accent-light);
    }

    .form-control::placeholder {
        color: var(--sx-text-secondary);
    }

    .form-control:disabled,
    .form-select:disabled {
        background-color: var(--sx-bg-disabled);
        color: var(--sx-text-secondary);
        border-color: var(--sx-border);
        cursor: not-allowed;
    }

/* Browser autofill must not change the control colours (G22) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--sx-text-primary);
    caret-color: var(--sx-text-primary);
    -webkit-box-shadow: 0 0 0 1000px var(--sx-bg-input) inset;
    box-shadow: 0 0 0 1000px var(--sx-bg-input) inset;
    transition: background-color 9999s ease-out 0s;
}

    input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px var(--sx-bg-input) inset, 0 0 0 0.2rem var(--sx-accent-light);
        box-shadow: 0 0 0 1000px var(--sx-bg-input) inset, 0 0 0 0.2rem var(--sx-accent-light);
    }

.input-group-text {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* A field with a unit beside it (Doc 09 G72): the field never shrinks below
   5rem, whatever the width class on the group and however long the unit -
   the group grows past its class instead of squeezing the field. */
.input-group > .form-control,
.input-group > .form-select {
    min-width: 5rem;
}

.form-check {
    margin-bottom: 0.25rem;
    min-height: 1.25rem;
}

.form-check-label {
    font-size: 0.875rem;
}

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

.form-check-input:focus {
    border-color: var(--sx-accent);
    box-shadow: 0 0 0 0.2rem var(--sx-accent-light);
}

.form-label {
    color: var(--sx-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.form-text {
    color: var(--sx-text-muted);
    font-size: 0.75rem;
    line-height: 1.3;
    margin-top: 0.15rem;
}

.field-validation-error,
.invalid-feedback {
    display: block;
    color: var(--sx-danger);
    font-size: 0.75rem;
    margin-top: 0.15rem;
}

/* --------------------------------------------------------------------------
   8. Form rows (Doc 09 G1-G6)
   <div class="sx-form-row">
       <label class="form-label" asp-for="Input.Email"></label>
       <div>
           <input class="form-control" asp-for="Input.Email" />
           <span asp-validation-for="Input.Email"></span>
       </div>
   </div>
   ...
   <div class="sx-form-actions">
       <button type="submit" class="btn btn-primary btn-sm">Save</button>
       <a class="btn btn-outline-secondary btn-sm" href="...">Cancel</a>
   </div>
   A row with no label (e.g. a lone checkbox): leave the label empty -
   <span class="form-label"></span>.
   Two rows side by side on wide screens: wrap them in .sx-form-cols-2 (G3).
   Modal bodies use stacked labels (G6): plain .mb-2 blocks, no .sx-form-row.
   -------------------------------------------------------------------------- */
.sx-form-row {
    display: grid;
    grid-template-columns: var(--sx-label-width) minmax(0, 1fr);
    column-gap: var(--sx-form-gap);
    align-items: start;
    margin-bottom: 0.5rem;
}

    .sx-form-row > .form-label,
    .sx-form-row > label {
        text-align: right;                     /* G1: right-aligned */
        margin-bottom: 0;
        padding-top: calc(0.25rem + 1px);      /* lines up with the control text */
    }

    .sx-form-row > .form-check,
    .sx-form-row > div > .form-check:first-child {
        padding-top: calc(0.25rem + 1px);
    }

/* Buttons line up under the fields, not the labels (G5) */
.sx-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-left: calc(var(--sx-label-width) + var(--sx-form-gap));
    margin-top: 0.75rem;
}

/* Two form rows per line on wide screens (G3) */
.sx-form-cols-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1.5rem;
}

@media (min-width: 992px) {
    .sx-form-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phones: label above field (G2) */
@media (max-width: 575.98px) {
    .sx-form-row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.15rem;
    }

        .sx-form-row > .form-label,
        .sx-form-row > label {
            text-align: left;
            padding-top: 0;
        }

    .sx-form-actions {
        padding-left: 0;
    }
}

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.table {
    --bs-table-bg: var(--sx-bg-card);
    --bs-table-color: var(--sx-text-primary);
    --bs-table-border-color: var(--sx-border-light);
    --bs-table-hover-bg: var(--sx-accent-light);
    --bs-table-hover-color: var(--sx-text-primary);
}

    .table thead th {
        background-color: var(--sx-bg-elevated);
        border-bottom: 2px solid var(--sx-border);
        color: var(--sx-text-secondary);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
    }

    .table tbody td {
        vertical-align: middle;
    }

/* --------------------------------------------------------------------------
   10. Lists (Doc 09 G7-G13, G24-G28)
   <div class="card"><div class="card-body p-0"><div class="table-responsive">
     <table class="table table-sm table-hover sx-table mb-0">
       <thead><tr>
         <th class="sx-fill"> _SortHeader </th>
         <th class="sx-w-md"> _SortHeader </th>
         <th class="sx-w-xs"></th>                       actions, not sortable
       </tr></thead>
       <tbody>
         <tr class="sx-row-link" data-sx-href="/Admin/Users/Edit/5?returnUrl=...">
           <td class="sx-fill" title="Full text"><a href="...">Name</a></td>
           ...
   Every cell is one line (G7): no wrapping; text that does not fit is cut
   off with an ellipsis - put the full text in title.
   One column per table carries .sx-fill and takes the remaining width;
   the others are sized with .sx-w-* (G9).
   -------------------------------------------------------------------------- */
.sx-table {
    font-size: 0.875rem;
}

    .sx-table > :not(caption) > * > * {
        padding: 0.3rem 0.5rem;               /* G8: one row height for every list */
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sx-table thead th {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    .sx-table .badge {
        font-size: 0.75rem;
        padding: 0.2em 0.5em;
        line-height: 1.2;
        vertical-align: 0.05em;
    }

    .sx-table .btn-sm {                       /* icon buttons fit the row (G27) */
        padding: 0.05rem 0.4rem;
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .sx-table .sx-actions {
        text-align: end;
        overflow: visible;
    }

        .sx-table .sx-actions form {
            display: inline;
        }

    .sx-table .sx-empty {                     /* G28 */
        text-align: center;
        color: var(--sx-text-secondary);
        padding: 1.5rem 0.5rem;
        white-space: normal;
    }

        .sx-table .sx-empty .bi {
            display: block;
            font-size: 1.5rem;
            margin-bottom: 0.25rem;
        }

/* Column widths (G9) - also size filter inputs (G16) */
.sx-fill {
    width: 100%;
    max-width: 0;              /* lets the column shrink and cut off its text */
}

.sx-w-xs {
    width: 5rem;
    max-width: 5rem;
}

.sx-w-sm {
    width: 8rem;
    max-width: 8rem;
}

.sx-w-md {
    width: 12rem;
    max-width: 12rem;
}

.sx-w-lg {
    width: 18rem;
    max-width: 18rem;
}

/* Cut-off text outside a table cell (G7) */
.sx-trunc {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Sortable column headers (G10) - drawn by _SortHeader */
.sx-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    white-space: nowrap;
}

    .sx-sort:hover,
    .sx-sort.active {
        color: var(--sx-text-primary);
    }

    .sx-sort .bi {
        font-size: 0.7rem;
    }

    .sx-sort.active .bi {
        color: var(--sx-accent);
    }

/* Clickable rows (G13) - site.js navigates to data-sx-href */
.sx-row-link {
    cursor: pointer;
}

    .sx-row-link a {
        color: inherit;
    }

        .sx-row-link a:focus-visible {
            outline: 2px solid var(--sx-accent);
            outline-offset: 2px;
        }

/* Footer count line under a list (G18) */
.sx-list-footer {
    color: var(--sx-text-secondary);
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

    /* ---- Add to site.css: at the end of section 10 (Lists), right after the
        .sx-list-footer rule (Doc 09 G36, G37) ---- */

    /* Footer with paging (G36): count left, Previous / Next right */
    .sx-list-footer.sx-pager-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }

    .sx-list-footer .pagination {
        margin-bottom: 0;
        --bs-pagination-bg: var(--sx-bg-card);
        --bs-pagination-color: var(--sx-text-secondary);
        --bs-pagination-border-color: var(--sx-border);
        --bs-pagination-hover-bg: var(--sx-accent-light);
        --bs-pagination-hover-color: var(--sx-text-primary);
        --bs-pagination-hover-border-color: var(--sx-border);
        --bs-pagination-focus-bg: var(--sx-accent-light);
        --bs-pagination-focus-color: var(--sx-text-primary);
        --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--sx-accent-light);
        --bs-pagination-disabled-bg: var(--sx-bg-card);
        --bs-pagination-disabled-color: var(--sx-text-muted);
        --bs-pagination-disabled-border-color: var(--sx-border);
    }

/* A rendered email, shown in an empty-sandbox iframe (G37). The email keeps
   its own light layout; the frame scrolls inside. */
.sx-email-frame {
    display: block;
    width: 100%;
    height: 32rem;
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-radius);
    background-color: #ffffff;
}

/* --------------------------------------------------------------------------
   11. Badges and alerts
   -------------------------------------------------------------------------- */
.badge {
    font-weight: 500;
    padding: 0.35em 0.65em;
    border-radius: var(--sx-radius);
}

    .badge.bg-success {
        background-color: var(--sx-success) !important;
    }

    .badge.bg-warning {
        background-color: var(--sx-warning) !important;
    }

    .badge.bg-danger {
        background-color: var(--sx-danger) !important;
    }

    .badge.bg-info {
        background-color: var(--sx-info) !important;
    }

    .badge.bg-secondary {
        background-color: var(--sx-bg-elevated) !important;
    }

.alert {
    border-radius: var(--sx-radius);
    border: none;
}

.alert-success {
    background-color: color-mix(in srgb, var(--sx-success) 15%, transparent);
    color: var(--sx-success);
}

.alert-warning {
    background-color: color-mix(in srgb, var(--sx-warning) 15%, transparent);
    color: var(--sx-warning);
}

.alert-danger {
    background-color: color-mix(in srgb, var(--sx-danger) 15%, transparent);
    color: var(--sx-danger);
}

.alert-info {
    background-color: color-mix(in srgb, var(--sx-info) 15%, transparent);
    color: var(--sx-info);
}

/* --------------------------------------------------------------------------
   12. Modals and accordions
   (Close buttons and accordion arrows are handled by dark mode - no filters.)
   -------------------------------------------------------------------------- */
.modal-content {
    background-color: var(--sx-bg-card);
    border: 1px solid var(--sx-border);
}

.modal-header {
    border-bottom-color: var(--sx-border);
}

.modal-footer {
    border-top-color: var(--sx-border);
}

/* Summary box inside a confirm-with-input modal (G33) */
.sx-modal-summary {
    background-color: var(--sx-bg-elevated);
    border-radius: var(--sx-radius);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.accordion-item {
    background-color: var(--sx-bg-card);
    border: 1px solid var(--sx-border);
    margin-bottom: 0.5rem;
    border-radius: var(--sx-radius) !important;
}

.accordion-button {
    background-color: var(--sx-bg-card);
    color: var(--sx-text-primary);
    font-weight: 500;
}

    .accordion-button:not(.collapsed) {
        background-color: var(--sx-bg-elevated);
        color: var(--sx-accent);
    }

    .accordion-button:focus {
        box-shadow: none;
        border-color: var(--sx-accent);
    }

.accordion-body {
    color: var(--sx-text-secondary);
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
footer {
    background-color: var(--sx-bg-dark);
    border-top: 1px solid var(--sx-border);
    padding: 1.5rem 0;
}

    footer h5 {
        color: var(--sx-text-primary);
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    footer p,
    footer li {
        color: var(--sx-text-secondary);
    }

    footer a {
        color: var(--sx-text-secondary);
    }

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

.footer-bottom {
    color: var(--sx-text-muted);
    font-size: 0.875rem;
}

/* Divider only when the details row is present (footer partial) */
footer .row + .footer-bottom {
    border-top: 1px solid var(--sx-border);
    margin-top: 1.5rem;
    padding-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   14. Page sections and shared pieces
   -------------------------------------------------------------------------- */
.section {
    padding: 4rem 0;
}

.section-dark {
    background-color: var(--sx-bg-dark);
}

.section-title {
    margin-bottom: 3rem;
    text-align: center;
}

    .section-title h2 {
        margin-bottom: 0.5rem;
    }

    .section-title p {
        color: var(--sx-text-secondary);
        font-size: 1.125rem;
    }

.feature-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--sx-radius-lg);
    background-color: var(--sx-accent-light);
    color: var(--sx-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.border-subtle {
    border-color: var(--sx-border) !important;
}

.rounded-lg {
    border-radius: var(--sx-radius-lg) !important;
}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .section {
        padding: 3rem 0;
    }

    .navbar-nav {
        padding-top: 1rem;
    }

        .navbar-nav .nav-link {
            padding: 0.75rem 0;
        }
}

/* --------------------------------------------------------------------------
   16. Scrollbar
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--sx-bg-darkest);
}

::-webkit-scrollbar-thumb {
    background: var(--sx-border);
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--sx-text-muted);
    }

/* --------------------------------------------------------------------------
   17. Print
   Pages print on white: menu, footer, alerts and anything marked
   .d-print-none are left out; cards and tables print in black on white
   (My account invoice - Doc 19 AC24).
   -------------------------------------------------------------------------- */
@media print {
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    .navbar,
    footer,
    .alert {
        display: none !important;
    }

    .card,
    .card-body,
    .card-header,
    .card-footer {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-color: #cccccc !important;
    }

    .card-header.header-accent {
        color: #000000 !important;
    }

    .table {
        --bs-table-bg: #ffffff;
        --bs-table-color: #000000;
        --bs-table-border-color: #cccccc;
    }

        .table thead th {
            background-color: #ffffff !important;
            color: #000000 !important;
            border-bottom-color: #999999 !important;
        }

    h1, h2, h3, h4, h5, h6,
    .text-secondary,
    .text-muted,
    .sx-detail-row > .sx-detail-label,
    a {
        color: #000000 !important;
    }

    .badge {
        border: 1px solid #999999;
        color: #000000 !important;
        background-color: #ffffff !important;
    }

    .sx-table > :not(caption) > * > * {
        white-space: normal;      /* printed lines wrap instead of cutting off */
    }
}

/* --------------------------------------------------------------------------
   Module styles (S6) - added below as each module is ported.
   -------------------------------------------------------------------------- */

/* ---- Issue Tracking (Doc 11 T32; Doc 09 G38-G41) ---- */

/* Stat tiles row (G38): small coloured tiles above a list */
.sx-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.sx-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--sx-radius);
    background-color: var(--sx-bg-elevated);
    border: 1px solid var(--sx-border);
    font-size: 0.875rem;
    color: var(--sx-text-secondary);
}

    .sx-stat strong {
        color: var(--sx-text-primary);
        font-size: 1rem;
    }

    .sx-stat.sx-stat-accent .bi { color: var(--sx-accent); }
    .sx-stat.sx-stat-danger .bi { color: var(--sx-danger); }
    .sx-stat.sx-stat-info .bi { color: var(--sx-info); }
    .sx-stat.sx-stat-success .bi { color: var(--sx-success); }

/* Tabs on a list page (G39) */
.sx-tabs {
    margin-bottom: 0.75rem;
}

    .sx-tabs .nav-link {
        color: var(--sx-text-secondary);
        font-size: 0.875rem;
        padding: 0.4rem 0.9rem;
    }

        .sx-tabs .nav-link.active {
            color: var(--sx-text-primary);
            background-color: var(--sx-bg-card);
            border-color: var(--sx-border) var(--sx-border) var(--sx-bg-card);
        }

    .sx-tabs .badge {
        font-size: 0.7rem;
        margin-left: 0.35rem;
    }

/* Two-card detail layout (G40): read-only label / value rows like .sx-form-row */
.sx-detail-row {
    display: grid;
    grid-template-columns: var(--sx-label-width) minmax(0, 1fr);
    column-gap: var(--sx-form-gap);
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
}

    .sx-detail-row > .sx-detail-label {
        text-align: right;
        color: var(--sx-text-secondary);
    }

@media (max-width: 575.98px) {
    .sx-detail-row {
        grid-template-columns: minmax(0, 1fr);
    }

        .sx-detail-row > .sx-detail-label {
            text-align: left;
        }
}

.sx-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0;
}

/* Text that keeps the line breaks people typed (descriptions, comments) */
.sx-pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Comment thread (G41): newest first, scrolls inside the card */
.sx-scroll-box {
    max-height: 18rem;
    overflow-y: auto;
    margin-bottom: 0.5rem;
}

.sx-comment {
    border-bottom: 1px solid var(--sx-border-light);
    padding: 0.35rem 0;
    font-size: 0.875rem;
}

    .sx-comment:last-child {
        border-bottom: none;
    }

    .sx-comment .sx-comment-meta {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        color: var(--sx-text-secondary);
        font-size: 0.8125rem;
    }

    .sx-comment .sx-comment-author {
        color: var(--sx-accent);
        font-weight: 600;
    }

/* ---- Files (Doc 14 F10; Doc 09 G42) ---- */

/* Avatar (G42): the person's photo, or initials on the accent colour */
.sx-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--sx-radius-lg);   /* rounded square - shows the whole photo */
    object-fit: cover;
    background-color: var(--sx-accent);
    color: #ffffff;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
}

.sx-avatar-sm {
    width: 24px;
    height: 24px;
    font-size: 0.625rem;
    border-radius: var(--sx-radius-sm);
}

.sx-avatar-lg {
    width: 120px;
    height: 120px;
    font-size: 2.5rem;
}

/* A list cell with an avatar and the name beside it */
.sx-table .sx-avatar-sm {
    margin-right: 0.4rem;
}

/* Photo and its buttons at the top of the person page's Details card */
.sx-avatar-block {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-left: calc(var(--sx-label-width) + var(--sx-form-gap));   /* lines up with the fields */
}

@media (max-width: 575.98px) {
    .sx-avatar-block {
        padding-left: 0;
    }
}

/* Attachments card (G43): preview in the Add modal, full size in the image modal */
.sx-attachment-preview {
    max-width: 100%;
    max-height: 16rem;
    border-radius: var(--sx-radius);
}

.sx-attachment-full {
    max-width: 100%;
    max-height: 75vh;
    border-radius: var(--sx-radius);
}

/* ---- Bulk email (Doc 16 B5c) ---- */

/* The rich editor (Jodit 4, its dark theme) matched to the palette. Jodit's
   dark theme reads its --jd-dark-* variables; setting them on the theme class
   (editor, toolbar, pop-ups) overrides Jodit's grey defaults. The email itself
   is shown light in the preview frame (G37). */
.jodit_theme_dark {
    --jd-dark-background-color: var(--sx-bg-input);
    --jd-dark-background-darknes: var(--sx-bg-dark);
    --jd-dark-toolbar-color: var(--sx-bg-elevated);
    --jd-dark-border-color: var(--sx-border-input);
    --jd-dark-text-color: var(--sx-text-primary);
    --jd-dark-icon-color: var(--sx-text-secondary);
    --jd-color-border: var(--sx-border-input);
    --jd-font-default: inherit;
}

.jodit_theme_dark.jodit-container {
    border-radius: var(--sx-radius);
}

.jodit_theme_dark .jodit-wysiwyg {
    font-size: 0.9375rem;
}

    .jodit_theme_dark .jodit-wysiwyg a {
        color: var(--sx-accent);
    }

    .jodit_theme_dark .jodit-wysiwyg img {
        max-width: 100%;
        height: auto;
    }

    .jodit_theme_dark .jodit-wysiwyg blockquote {
        border-left: 3px solid var(--sx-border);
        margin: 0 0 0.75rem 0;
        padding: 0.25rem 0.75rem;
        color: var(--sx-text-secondary);
    }

    /* Tables: the server keeps only the structure, so show every table the
       same way here - the email gives them the same look (Doc 16 B5e). */
    .jodit_theme_dark .jodit-wysiwyg table {
        width: 100%;
        border-collapse: collapse;
        margin: 0 0 0.75rem 0;
    }

    .jodit_theme_dark .jodit-wysiwyg th,
    .jodit_theme_dark .jodit-wysiwyg td {
        border: 1px solid var(--sx-border-input);
        padding: 0.25rem 0.5rem;
        vertical-align: top;
        text-align: left;
    }

    .jodit_theme_dark .jodit-wysiwyg th {
        font-weight: 600;
        background-color: var(--sx-bg-elevated);
    }

    /* Borders off (border="0"): faint dashed lines here so the cells can be
       found; no lines at all in the email. */
    .jodit_theme_dark .jodit-wysiwyg table[border="0"] th,
    .jodit_theme_dark .jodit-wysiwyg table[border="0"] td {
        border: 1px dashed var(--sx-border);
    }

    .jodit_theme_dark .jodit-wysiwyg table[border="0"] th {
        background-color: transparent;
    }

/* ---- Public home page (Pages/Index - Spaxly reference instance; Doc 17 §9) ----
   Full-width bands (ViewData["FullWidth"], _PublicLayout), each with its own
   .container. Headings use Space Grotesk, loaded by the page's Head section;
   if the font cannot load, the system font is used. */
.sx-home-band {
    padding: 5rem 0;
    border-bottom: 1px solid var(--sx-border);
}

.sx-home-band-alt {
    background-color: var(--sx-bg-dark);
}

.sx-home-band h1,
.sx-home-band h2,
.sx-home-band h3 {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #ffffff;
}

.sx-home-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

.sx-home-eyebrow,
.sx-home-kicker {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sx-accent);
    margin-bottom: 0.75rem;
}

.sx-home-kicker {
    color: var(--sx-text-secondary);
    margin-bottom: 0.25rem;
}

.sx-home-lead {
    font-size: 1.25rem;
    color: var(--sx-text-secondary);
    max-width: 36rem;
    margin-bottom: 1.5rem;
}

/* The Spaxly mark, drawn inline so it follows the accent colour */
.sx-home-mark {
    width: 100%;
    max-width: 18rem;
    height: auto;
}

.sx-home-mark-line {
    fill: none;
    stroke: var(--sx-text-primary);
    stroke-width: 5;
    stroke-linecap: square;
}

.sx-home-mark-dot {
    fill: var(--sx-accent);
}

.sx-home-intro {
    max-width: 46rem;
    margin-bottom: 2rem;
}

    .sx-home-intro h2,
    .sx-home-h2 {
        font-size: clamp(1.75rem, 3.5vw, 2.4rem);
        line-height: 1.15;
        margin-bottom: 0.5rem;
    }

    .sx-home-intro p {
        color: var(--sx-text-secondary);
        margin-bottom: 0;
    }

/* Tiles: problem cards, pillars, module groups, ways to run it */
.sx-home-tile {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background-color: var(--sx-bg-card);
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-radius-xl);
    padding: 1.25rem 1.5rem;
}

    .sx-home-tile strong {
        color: #ffffff;
    }

    .sx-home-tile > span {
        color: var(--sx-text-secondary);
    }

    .sx-home-tile h3 {
        font-size: 1.4rem;
        margin-bottom: 0.25rem;
    }

.sx-home-pillar {
    border-top: 3px solid var(--sx-accent);
}

.sx-home-tile-accent {
    border-color: var(--sx-accent);
}

    .sx-home-tile-accent > span {
        color: var(--sx-text-primary);
    }

.sx-home-list-row {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--sx-border);
    color: var(--sx-text-secondary);
}

    .sx-home-list-row:last-child {
        border-bottom: none;
    }

    .sx-home-list-row strong {
        color: #ffffff;
    }

.sx-home-note {
    color: var(--sx-text-muted);
    font-size: 0.875rem;
    margin: 1.25rem 0 0 0;
}

.sx-home-close {
    border-bottom: none;
}

    .sx-home-close h2 {
        font-size: clamp(2rem, 4vw, 2.75rem);
    }

    .sx-home-close p {
        color: var(--sx-text-secondary);
        margin-bottom: 1.25rem;
    }

/* The Ask band (Home Page Spec v0.4 HP17-HP21): the public chat under the
   hero. Its own accent tint, so the alternation of the bands below is the
   same whether it shows or not (HP19). The thread scrolls inside the panel. */
.sx-home-ask {
    background-color: color-mix(in srgb, var(--sx-accent) 6%, var(--sx-bg-darkest));
}

    .sx-home-ask .sx-chat-thread {
        height: 22rem;
    }

.sx-home-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .sx-home-band {
        padding: 3rem 0;
    }

    .sx-home-ask .sx-chat-thread {
        height: 18rem;
    }
}
/* ---- Settings page (Doc 17 BS12; Doc 09 G49) ----
   Add to the end of site.css, after the Public home page section.
   Each branding image is shown on the background it is used on: the light
   logo on white (email header), the dark logo and the favicon on the menu
   bar colour. */
.sx-brand-row {
    margin-bottom: 1rem;
}

.sx-brand-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-radius-lg);
}

.sx-brand-tile-light {
    background-color: #ffffff;
}

.sx-brand-tile-dark {
    background-color: var(--sx-bg-dark);
}

.sx-brand-logo {
    max-width: 100%;
    max-height: 3rem;
    height: auto;
}

.sx-brand-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--sx-radius);
}

.sx-brand-empty {
    font-size: 0.8125rem;
    color: var(--sx-text-muted);
}

.sx-brand-tile-light .sx-brand-empty {
    color: #6b7280;
}

/* ---- Accounts (Doc 19 AC24) ----
   The document card on My account's invoice page (/MyAccount/Invoice/{id}). */
.sx-doc-org {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--sx-text-primary);
}

.sx-doc-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--sx-text-primary);
}

@media print {
    .sx-doc {
        border: none !important;
    }

        .sx-doc .card-body {
            padding: 0;
        }

    .sx-doc-org,
    .sx-doc-title {
        color: #000000;
    }
}

/* ----------------------------------------------------------------------------
   Home page band 4 - Location above Spaces and Equipment (Home Page Spec v0.2,
   HP13). Equipment sits in a space or directly at a location (Doc 00 D7), so
   the two are drawn side by side under Location, not in a chain.
   Phones: the pair stacks and the connector shows only the stem.
   ---------------------------------------------------------------------------- */
.sx-home-branch {
    max-width: 46rem;
    margin: 0 auto 1rem;
}

.sx-home-branch-top {
    max-width: 22rem;
    margin: 0 auto;
}

.sx-home-branch-stem {
    width: 2px;
    height: 1.5rem;
    margin: 0 auto;
    background: var(--sx-accent);
}

.sx-home-branch-pair {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-top: 1.5rem;
}

    .sx-home-branch-pair::before {
        content: "";
        position: absolute;
        top: 0;
        left: calc(25% - 0.25rem);
        right: calc(25% - 0.25rem);
        height: 2px;
        background: var(--sx-accent);
    }

    .sx-home-branch-pair > div {
        position: relative;
    }

        .sx-home-branch-pair > div::before {
            content: "";
            position: absolute;
            top: -1.5rem;
            left: calc(50% - 1px);
            width: 2px;
            height: 1.5rem;
            background: var(--sx-accent);
        }

        .sx-home-branch-pair > div > .sx-home-tile {
            height: 100%;
        }

@media (max-width: 767.98px) {
    .sx-home-branch-pair {
        grid-template-columns: 1fr;
        padding-top: 0;
    }

        .sx-home-branch-pair::before,
        .sx-home-branch-pair > div::before {
            display: none;
        }
}

/* --------------------------------------------------------------------------
   Spaces (Doc 22 §7)
   Tree view: rows in tree order, the name cell indented by depth
   (.sx-tree-d0 to -d7 - no inline widths), a caret button on rows with
   children (space-tree.js) and an empty slot of the same width on the
   others, so names line up. Hidden spaces (inactive, or under an inactive
   one) are muted. Breadcrumb above a space's title. The space photo keeps
   its shape (not cropped like the avatar - Doc 22 S14). Feature checklist
   in a grid.
   -------------------------------------------------------------------------- */
.sx-table td.sx-tree-d0 { padding-left: 0.5rem; }
.sx-table td.sx-tree-d1 { padding-left: 1.75rem; }
.sx-table td.sx-tree-d2 { padding-left: 3rem; }
.sx-table td.sx-tree-d3 { padding-left: 4.25rem; }
.sx-table td.sx-tree-d4 { padding-left: 5.5rem; }
.sx-table td.sx-tree-d5 { padding-left: 6.75rem; }
.sx-table td.sx-tree-d6 { padding-left: 8rem; }
.sx-table td.sx-tree-d7 { padding-left: 9.25rem; }

.sx-tree-toggle,
.sx-tree-leaf {
    display: inline-block;
    width: 1.25rem;
    margin-right: 0.15rem;
    text-align: center;
}

.sx-tree-toggle {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sx-text-secondary);
    line-height: 1;
    cursor: pointer;
}

    .sx-tree-toggle:hover,
    .sx-tree-toggle:focus-visible {
        color: var(--sx-accent);
    }

    .sx-tree-toggle .bi {
        font-size: 0.75rem;
    }

.sx-table tr.sx-muted-row > td,
.sx-table tr.sx-muted-row > td a {
    color: var(--sx-text-muted);
}

/* Tree beside a panel (G75 - the location page, Doc 22 §7.2): the tree card
   on the left, no table header; the selected row carries an accent edge on
   the elevated background; the tags cell (type, Reservable, Inactive) stays
   on the row's one line, right-aligned. A dashed callout invites the first
   space (Doc 20 LC28a). */
.sx-tree-editor .sx-table tbody tr:first-child > td {
    border-top: 0;
}

.sx-table tr.sx-tree-sel > td {
    background-color: var(--sx-bg-elevated);
}

.sx-table tr.sx-tree-sel > td:first-child {
    box-shadow: inset 3px 0 0 var(--sx-accent);
}

.sx-table tr.sx-tree-sel > td a {
    color: var(--sx-accent);
}

.sx-table td.sx-tree-tags {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    padding-right: 0.5rem;
}

.sx-callout {
    padding: 0.75rem 1rem;
    border: 1px dashed var(--sx-accent);
    border-radius: 0.375rem;
    background-color: var(--sx-accent-light);
}

.sx-breadcrumb {
    font-size: 0.875rem;
    color: var(--sx-text-secondary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sx-breadcrumb-sep {
    margin: 0 0.4rem;
    color: var(--sx-text-muted);
}

.sx-space-photo {
    display: block;
    max-width: 100%;
    max-height: 16rem;
    margin: 0 auto;
    border-radius: var(--sx-radius-lg);
    border: 1px solid var(--sx-border);
}

.sx-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.15rem 1rem;
}

/* --------------------------------------------------------------------------
   Issue links (Doc 22 IL1-IL3)
   The type-to-search equipment picker (equipment-picker.js): the matches
   open under the search box, above what follows. A filter chip on a list
   (the staff issue list's equipment filter) with its remove link.
   -------------------------------------------------------------------------- */
.sx-picker {
    position: relative;
}

.sx-picker-results {
    position: absolute;
    z-index: 1050;
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
    margin-top: 0.15rem;
    box-shadow: var(--sx-shadow);
}

    .sx-picker-results .list-group-item {
        background-color: var(--sx-bg-elevated);
        border-color: var(--sx-border);
        color: var(--sx-text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sx-picker-results .list-group-item-action:hover,
    .sx-picker-results .list-group-item-action:focus {
        background-color: var(--sx-accent-light);
    }

/* A picker has its own Clear button (data-sx-picker-clear): hide the
   browser's built-in x on its search box so only one shows. */
.sx-picker input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.sx-filter-chip {
    display: inline-flex;
    align-items: center;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
}

/* Pick several (Doc 09 G81, OI-22): chips, then the "+ Add feature" box -
   _MultiPick, multi-picker.js. The chip text is cut with an ellipsis (G7);
   the x is a small btn-close. */
.sx-multipick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

    .sx-multipick .sx-filter-chip {
        gap: 0.35rem;
        padding-right: 0.4rem;
    }

    .sx-multipick .sx-chip-text {
        overflow: hidden;
        text-overflow: ellipsis;
    }

.sx-chip-x {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0.2rem;
    background-size: 0.5rem;
    flex-shrink: 0;
}

.sx-multipick-add {
    width: 12rem;
}

/* --------------------------------------------------------------------------
   Reservations - the live form (Design Note 1.2 TL8)
   Day view: one bar per resource, 15-minute cells laid out by the grid (no
   widths in the markup); the hour labels above use the same grid. Free cells
   are light and clickable (reservation-form.js sets Start), reserved solid,
   closed hatched, the chosen window in the accent colour, red where it meets
   something. The legend in the card footer uses the same classes.
   -------------------------------------------------------------------------- */
.sx-day-bar,
.sx-day-hours {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

.sx-day-bar {
    height: 1.25rem;
    border: 1px solid var(--sx-border);
    border-radius: var(--sx-radius-sm);
    overflow: hidden;
}

    .sx-day-bar > span {
        display: block;
        border-right: 1px solid var(--sx-bg-card);
    }

        .sx-day-bar > span:last-child {
            border-right: none;
        }

.sx-day-hours {
    font-size: 0.7rem;
    line-height: 1;
    color: var(--sx-text-muted);
}

    .sx-day-hours > span {
        overflow: visible;
        white-space: nowrap;
    }

.sx-day-free {
    background-color: var(--sx-bg-elevated);
    cursor: pointer;
}

    .sx-day-bar > .sx-day-free:hover {
        background-color: var(--sx-accent-light);
    }

.sx-day-taken {
    background-color: var(--sx-info);
}

.sx-day-closed {
    background: repeating-linear-gradient(45deg, var(--sx-bg-dark) 0 3px, var(--sx-border) 3px 5px);
}

.sx-day-chosen {
    background-color: var(--sx-accent);
}

.sx-day-clash {
    background-color: var(--sx-danger);
}

/* Legend swatches in the day view's footer */
.sx-day-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
    border: 1px solid var(--sx-border);
    margin-right: 0.25rem;
    vertical-align: -1px;
}
/* Doc 09 G68 - the compact day bar in a list row (Find a space, Doc 23 FS9):
   the day view's cells at row height; no click, so free cells don't light up. */
.sx-day-bar.sx-day-bar-sm {
    height: 0.875rem;
}

.sx-day-bar-sm > .sx-day-free {
    cursor: default;
}

.sx-day-bar.sx-day-bar-sm > .sx-day-free:hover {
    background-color: var(--sx-bg-elevated);
}

.sx-day-hours.sx-day-hours-sm {
    font-size: 0.65rem;
    font-weight: normal;
}

/* ============================================================================
   Doc 09 G69, G70 - the calendar (/Reservations/Calendar, Doc 23 §14.2)
   ============================================================================ */

/* The timeline scrolls sideways inside its card, never the page (G69). */
.sx-cal-scroll {
    overflow-x: auto;
}

.sx-cal-table,
.sx-cal-week {
    min-width: 48rem;
    table-layout: fixed;
}

/* One row of the timeline: a grid of 15-minute columns; slots, blocks and the
   now line all sit on the one grid row, blocks above the slots. */
.sx-cal-grid {
    display: grid;
    grid-template-rows: 1.5rem;
    align-items: stretch;
}

    .sx-cal-grid > * {
        grid-row: 1;
        min-width: 0;
    }

.sx-cal-head {
    grid-template-rows: auto;
    font-size: 0.7rem;
    font-weight: normal;
    color: var(--sx-text-muted);
}

    .sx-cal-head > span {
        border-left: 1px solid var(--sx-border);
        padding-left: 0.15rem;
    }

/* Slots: free (a link with Work - CV8) and closed hours. */
.sx-cal-free {
    display: block;
    background-color: var(--sx-bg-elevated);
    border-right: 1px solid var(--sx-bg-card);
}

a.sx-cal-free:hover {
    background-color: var(--sx-accent-light);
}

.sx-cal-closed {
    display: block;
    background: repeating-linear-gradient(45deg, var(--sx-bg-dark) 0 3px, var(--sx-border) 3px 5px);
}

/* Group rows (Doc 23 CV13-CV15): a grouping's row sums its units per cell -
   all free (.sx-cal-free), some free (.sx-cal-part), none free (.sx-cal-full);
   the row is set apart by a darker name cell. The week grid's compact bars
   use .sx-day-part the same way. */
.sx-cal-group > td {
    background-color: var(--sx-bg-dark);
}

.sx-cal-part,
.sx-cal-full {
    display: block;
    border-right: 1px solid var(--sx-bg-card);
}

.sx-cal-part {
    background-color: color-mix(in srgb, var(--sx-info) 35%, var(--sx-bg-elevated));
}

.sx-cal-full {
    background-color: var(--sx-info);
}

.sx-cal-part-swatch {
    background-color: color-mix(in srgb, var(--sx-info) 35%, var(--sx-bg-elevated));
}

.sx-day-part {
    background-color: color-mix(in srgb, var(--sx-info) 35%, var(--sx-bg-elevated));
}

/* Blocks: a reservation (status colour from bg-*), blocked by another space,
   a closure. Text cut off with an ellipsis; details in the title. */
.sx-cal-block,
.sx-cal-closure {
    z-index: 1;
    margin: 2px 1px;
    padding: 0 0.25rem;
    border-radius: var(--sx-radius-sm);
    font-size: 0.75rem;
    line-height: calc(1.5rem - 4px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}

.sx-cal-block {
    color: #fff;
}

    .sx-cal-block:hover {
        color: #fff;
        filter: brightness(1.15);
    }

.sx-cal-blocked {
    z-index: 1;
    margin: 6px 0;
    border-radius: 2px;
    background-color: var(--sx-info);
    opacity: 0.35;
}

.sx-cal-closure {
    color: var(--sx-text-primary);
    border: 1px solid var(--sx-warning);
    background: repeating-linear-gradient(45deg, var(--sx-bg-dark) 0 4px, rgba(255, 193, 7, 0.25) 4px 8px);
}

.sx-cal-more-l::before {
    content: "\2039\00a0";
}

.sx-cal-more-r::after {
    content: "\00a0\203a";
}

/* CV9: now. */
.sx-cal-now {
    z-index: 2;
    border-left: 2px solid var(--sx-accent);
    pointer-events: none;
}

/* Legend swatches that have no block of their own. */
.sx-cal-blocked-swatch {
    background-color: var(--sx-info);
    opacity: 0.35;
}

.sx-cal-now-swatch {
    border: none;
    border-left: 2px solid var(--sx-accent);
    border-radius: 0;
}

/* Legend: the slot and closure classes used as swatches stay small and inline. */
.sx-day-swatch.sx-cal-free,
.sx-day-swatch.sx-cal-closed,
.sx-day-swatch.sx-cal-closure,
.sx-day-swatch.sx-cal-full {
    display: inline-block;
    margin: 0 0.25rem 0 0;
    padding: 0;
    line-height: normal;
}

/* G70 - the week overview: a compact bar per resource and day. */
.sx-cal-today {
    background-color: var(--sx-accent-light);
}

.sx-cal-day-link {
    display: block;
    text-decoration: none;
}

    .sx-cal-day-link > .sx-day-bar {
        display: grid;
    }

/* The grid's columns and lines - generated once (G69): .sx-cal-cols-N for a
   span of N quarter hours (whole hours: 4 to 96), .sx-cal-s-K / .sx-cal-e-K
   for grid lines 1 to 97. */
.sx-cal-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sx-cal-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.sx-cal-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.sx-cal-cols-16 {
    grid-template-columns: repeat(16, minmax(0, 1fr));
}

.sx-cal-cols-20 {
    grid-template-columns: repeat(20, minmax(0, 1fr));
}

.sx-cal-cols-24 {
    grid-template-columns: repeat(24, minmax(0, 1fr));
}

.sx-cal-cols-28 {
    grid-template-columns: repeat(28, minmax(0, 1fr));
}

.sx-cal-cols-32 {
    grid-template-columns: repeat(32, minmax(0, 1fr));
}

.sx-cal-cols-36 {
    grid-template-columns: repeat(36, minmax(0, 1fr));
}

.sx-cal-cols-40 {
    grid-template-columns: repeat(40, minmax(0, 1fr));
}

.sx-cal-cols-44 {
    grid-template-columns: repeat(44, minmax(0, 1fr));
}

.sx-cal-cols-48 {
    grid-template-columns: repeat(48, minmax(0, 1fr));
}

.sx-cal-cols-52 {
    grid-template-columns: repeat(52, minmax(0, 1fr));
}

.sx-cal-cols-56 {
    grid-template-columns: repeat(56, minmax(0, 1fr));
}

.sx-cal-cols-60 {
    grid-template-columns: repeat(60, minmax(0, 1fr));
}

.sx-cal-cols-64 {
    grid-template-columns: repeat(64, minmax(0, 1fr));
}

.sx-cal-cols-68 {
    grid-template-columns: repeat(68, minmax(0, 1fr));
}

.sx-cal-cols-72 {
    grid-template-columns: repeat(72, minmax(0, 1fr));
}

.sx-cal-cols-76 {
    grid-template-columns: repeat(76, minmax(0, 1fr));
}

.sx-cal-cols-80 {
    grid-template-columns: repeat(80, minmax(0, 1fr));
}

.sx-cal-cols-84 {
    grid-template-columns: repeat(84, minmax(0, 1fr));
}

.sx-cal-cols-88 {
    grid-template-columns: repeat(88, minmax(0, 1fr));
}

.sx-cal-cols-92 {
    grid-template-columns: repeat(92, minmax(0, 1fr));
}

.sx-cal-cols-96 {
    grid-template-columns: repeat(96, minmax(0, 1fr));
}

.sx-cal-s-1 {
    grid-column-start: 1;
}

.sx-cal-s-2 {
    grid-column-start: 2;
}

.sx-cal-s-3 {
    grid-column-start: 3;
}

.sx-cal-s-4 {
    grid-column-start: 4;
}

.sx-cal-s-5 {
    grid-column-start: 5;
}

.sx-cal-s-6 {
    grid-column-start: 6;
}

.sx-cal-s-7 {
    grid-column-start: 7;
}

.sx-cal-s-8 {
    grid-column-start: 8;
}

.sx-cal-s-9 {
    grid-column-start: 9;
}

.sx-cal-s-10 {
    grid-column-start: 10;
}

.sx-cal-s-11 {
    grid-column-start: 11;
}

.sx-cal-s-12 {
    grid-column-start: 12;
}

.sx-cal-s-13 {
    grid-column-start: 13;
}

.sx-cal-s-14 {
    grid-column-start: 14;
}

.sx-cal-s-15 {
    grid-column-start: 15;
}

.sx-cal-s-16 {
    grid-column-start: 16;
}

.sx-cal-s-17 {
    grid-column-start: 17;
}

.sx-cal-s-18 {
    grid-column-start: 18;
}

.sx-cal-s-19 {
    grid-column-start: 19;
}

.sx-cal-s-20 {
    grid-column-start: 20;
}

.sx-cal-s-21 {
    grid-column-start: 21;
}

.sx-cal-s-22 {
    grid-column-start: 22;
}

.sx-cal-s-23 {
    grid-column-start: 23;
}

.sx-cal-s-24 {
    grid-column-start: 24;
}

.sx-cal-s-25 {
    grid-column-start: 25;
}

.sx-cal-s-26 {
    grid-column-start: 26;
}

.sx-cal-s-27 {
    grid-column-start: 27;
}

.sx-cal-s-28 {
    grid-column-start: 28;
}

.sx-cal-s-29 {
    grid-column-start: 29;
}

.sx-cal-s-30 {
    grid-column-start: 30;
}

.sx-cal-s-31 {
    grid-column-start: 31;
}

.sx-cal-s-32 {
    grid-column-start: 32;
}

.sx-cal-s-33 {
    grid-column-start: 33;
}

.sx-cal-s-34 {
    grid-column-start: 34;
}

.sx-cal-s-35 {
    grid-column-start: 35;
}

.sx-cal-s-36 {
    grid-column-start: 36;
}

.sx-cal-s-37 {
    grid-column-start: 37;
}

.sx-cal-s-38 {
    grid-column-start: 38;
}

.sx-cal-s-39 {
    grid-column-start: 39;
}

.sx-cal-s-40 {
    grid-column-start: 40;
}

.sx-cal-s-41 {
    grid-column-start: 41;
}

.sx-cal-s-42 {
    grid-column-start: 42;
}

.sx-cal-s-43 {
    grid-column-start: 43;
}

.sx-cal-s-44 {
    grid-column-start: 44;
}

.sx-cal-s-45 {
    grid-column-start: 45;
}

.sx-cal-s-46 {
    grid-column-start: 46;
}

.sx-cal-s-47 {
    grid-column-start: 47;
}

.sx-cal-s-48 {
    grid-column-start: 48;
}

.sx-cal-s-49 {
    grid-column-start: 49;
}

.sx-cal-s-50 {
    grid-column-start: 50;
}

.sx-cal-s-51 {
    grid-column-start: 51;
}

.sx-cal-s-52 {
    grid-column-start: 52;
}

.sx-cal-s-53 {
    grid-column-start: 53;
}

.sx-cal-s-54 {
    grid-column-start: 54;
}

.sx-cal-s-55 {
    grid-column-start: 55;
}

.sx-cal-s-56 {
    grid-column-start: 56;
}

.sx-cal-s-57 {
    grid-column-start: 57;
}

.sx-cal-s-58 {
    grid-column-start: 58;
}

.sx-cal-s-59 {
    grid-column-start: 59;
}

.sx-cal-s-60 {
    grid-column-start: 60;
}

.sx-cal-s-61 {
    grid-column-start: 61;
}

.sx-cal-s-62 {
    grid-column-start: 62;
}

.sx-cal-s-63 {
    grid-column-start: 63;
}

.sx-cal-s-64 {
    grid-column-start: 64;
}

.sx-cal-s-65 {
    grid-column-start: 65;
}

.sx-cal-s-66 {
    grid-column-start: 66;
}

.sx-cal-s-67 {
    grid-column-start: 67;
}

.sx-cal-s-68 {
    grid-column-start: 68;
}

.sx-cal-s-69 {
    grid-column-start: 69;
}

.sx-cal-s-70 {
    grid-column-start: 70;
}

.sx-cal-s-71 {
    grid-column-start: 71;
}

.sx-cal-s-72 {
    grid-column-start: 72;
}

.sx-cal-s-73 {
    grid-column-start: 73;
}

.sx-cal-s-74 {
    grid-column-start: 74;
}

.sx-cal-s-75 {
    grid-column-start: 75;
}

.sx-cal-s-76 {
    grid-column-start: 76;
}

.sx-cal-s-77 {
    grid-column-start: 77;
}

.sx-cal-s-78 {
    grid-column-start: 78;
}

.sx-cal-s-79 {
    grid-column-start: 79;
}

.sx-cal-s-80 {
    grid-column-start: 80;
}

.sx-cal-s-81 {
    grid-column-start: 81;
}

.sx-cal-s-82 {
    grid-column-start: 82;
}

.sx-cal-s-83 {
    grid-column-start: 83;
}

.sx-cal-s-84 {
    grid-column-start: 84;
}

.sx-cal-s-85 {
    grid-column-start: 85;
}

.sx-cal-s-86 {
    grid-column-start: 86;
}

.sx-cal-s-87 {
    grid-column-start: 87;
}

.sx-cal-s-88 {
    grid-column-start: 88;
}

.sx-cal-s-89 {
    grid-column-start: 89;
}

.sx-cal-s-90 {
    grid-column-start: 90;
}

.sx-cal-s-91 {
    grid-column-start: 91;
}

.sx-cal-s-92 {
    grid-column-start: 92;
}

.sx-cal-s-93 {
    grid-column-start: 93;
}

.sx-cal-s-94 {
    grid-column-start: 94;
}

.sx-cal-s-95 {
    grid-column-start: 95;
}

.sx-cal-s-96 {
    grid-column-start: 96;
}

.sx-cal-s-97 {
    grid-column-start: 97;
}

.sx-cal-e-1 {
    grid-column-end: 1;
}

.sx-cal-e-2 {
    grid-column-end: 2;
}

.sx-cal-e-3 {
    grid-column-end: 3;
}

.sx-cal-e-4 {
    grid-column-end: 4;
}

.sx-cal-e-5 {
    grid-column-end: 5;
}

.sx-cal-e-6 {
    grid-column-end: 6;
}

.sx-cal-e-7 {
    grid-column-end: 7;
}

.sx-cal-e-8 {
    grid-column-end: 8;
}

.sx-cal-e-9 {
    grid-column-end: 9;
}

.sx-cal-e-10 {
    grid-column-end: 10;
}

.sx-cal-e-11 {
    grid-column-end: 11;
}

.sx-cal-e-12 {
    grid-column-end: 12;
}

.sx-cal-e-13 {
    grid-column-end: 13;
}

.sx-cal-e-14 {
    grid-column-end: 14;
}

.sx-cal-e-15 {
    grid-column-end: 15;
}

.sx-cal-e-16 {
    grid-column-end: 16;
}

.sx-cal-e-17 {
    grid-column-end: 17;
}

.sx-cal-e-18 {
    grid-column-end: 18;
}

.sx-cal-e-19 {
    grid-column-end: 19;
}

.sx-cal-e-20 {
    grid-column-end: 20;
}

.sx-cal-e-21 {
    grid-column-end: 21;
}

.sx-cal-e-22 {
    grid-column-end: 22;
}

.sx-cal-e-23 {
    grid-column-end: 23;
}

.sx-cal-e-24 {
    grid-column-end: 24;
}

.sx-cal-e-25 {
    grid-column-end: 25;
}

.sx-cal-e-26 {
    grid-column-end: 26;
}

.sx-cal-e-27 {
    grid-column-end: 27;
}

.sx-cal-e-28 {
    grid-column-end: 28;
}

.sx-cal-e-29 {
    grid-column-end: 29;
}

.sx-cal-e-30 {
    grid-column-end: 30;
}

.sx-cal-e-31 {
    grid-column-end: 31;
}

.sx-cal-e-32 {
    grid-column-end: 32;
}

.sx-cal-e-33 {
    grid-column-end: 33;
}

.sx-cal-e-34 {
    grid-column-end: 34;
}

.sx-cal-e-35 {
    grid-column-end: 35;
}

.sx-cal-e-36 {
    grid-column-end: 36;
}

.sx-cal-e-37 {
    grid-column-end: 37;
}

.sx-cal-e-38 {
    grid-column-end: 38;
}

.sx-cal-e-39 {
    grid-column-end: 39;
}

.sx-cal-e-40 {
    grid-column-end: 40;
}

.sx-cal-e-41 {
    grid-column-end: 41;
}

.sx-cal-e-42 {
    grid-column-end: 42;
}

.sx-cal-e-43 {
    grid-column-end: 43;
}

.sx-cal-e-44 {
    grid-column-end: 44;
}

.sx-cal-e-45 {
    grid-column-end: 45;
}

.sx-cal-e-46 {
    grid-column-end: 46;
}

.sx-cal-e-47 {
    grid-column-end: 47;
}

.sx-cal-e-48 {
    grid-column-end: 48;
}

.sx-cal-e-49 {
    grid-column-end: 49;
}

.sx-cal-e-50 {
    grid-column-end: 50;
}

.sx-cal-e-51 {
    grid-column-end: 51;
}

.sx-cal-e-52 {
    grid-column-end: 52;
}

.sx-cal-e-53 {
    grid-column-end: 53;
}

.sx-cal-e-54 {
    grid-column-end: 54;
}

.sx-cal-e-55 {
    grid-column-end: 55;
}

.sx-cal-e-56 {
    grid-column-end: 56;
}

.sx-cal-e-57 {
    grid-column-end: 57;
}

.sx-cal-e-58 {
    grid-column-end: 58;
}

.sx-cal-e-59 {
    grid-column-end: 59;
}

.sx-cal-e-60 {
    grid-column-end: 60;
}

.sx-cal-e-61 {
    grid-column-end: 61;
}

.sx-cal-e-62 {
    grid-column-end: 62;
}

.sx-cal-e-63 {
    grid-column-end: 63;
}

.sx-cal-e-64 {
    grid-column-end: 64;
}

.sx-cal-e-65 {
    grid-column-end: 65;
}

.sx-cal-e-66 {
    grid-column-end: 66;
}

.sx-cal-e-67 {
    grid-column-end: 67;
}

.sx-cal-e-68 {
    grid-column-end: 68;
}

.sx-cal-e-69 {
    grid-column-end: 69;
}

.sx-cal-e-70 {
    grid-column-end: 70;
}

.sx-cal-e-71 {
    grid-column-end: 71;
}

.sx-cal-e-72 {
    grid-column-end: 72;
}

.sx-cal-e-73 {
    grid-column-end: 73;
}

.sx-cal-e-74 {
    grid-column-end: 74;
}

.sx-cal-e-75 {
    grid-column-end: 75;
}

.sx-cal-e-76 {
    grid-column-end: 76;
}

.sx-cal-e-77 {
    grid-column-end: 77;
}

.sx-cal-e-78 {
    grid-column-end: 78;
}

.sx-cal-e-79 {
    grid-column-end: 79;
}

.sx-cal-e-80 {
    grid-column-end: 80;
}

.sx-cal-e-81 {
    grid-column-end: 81;
}

.sx-cal-e-82 {
    grid-column-end: 82;
}

.sx-cal-e-83 {
    grid-column-end: 83;
}

.sx-cal-e-84 {
    grid-column-end: 84;
}

.sx-cal-e-85 {
    grid-column-end: 85;
}

.sx-cal-e-86 {
    grid-column-end: 86;
}

.sx-cal-e-87 {
    grid-column-end: 87;
}

.sx-cal-e-88 {
    grid-column-end: 88;
}

.sx-cal-e-89 {
    grid-column-end: 89;
}

.sx-cal-e-90 {
    grid-column-end: 90;
}

.sx-cal-e-91 {
    grid-column-end: 91;
}

.sx-cal-e-92 {
    grid-column-end: 92;
}

.sx-cal-e-93 {
    grid-column-end: 93;
}

.sx-cal-e-94 {
    grid-column-end: 94;
}

.sx-cal-e-95 {
    grid-column-end: 95;
}

.sx-cal-e-96 {
    grid-column-end: 96;
}

.sx-cal-e-97 {
    grid-column-end: 97;
}

/* ============================================================================
   AI Assistant chat (Doc 24 PA9-PA11, §12)
   The chat panel (_PublicAssistant) and a conversation read back
   (/Assistant/Visitors/Details): messages as bubbles - the person's on the
   right in the accent colour, the assistant's on the left, notes centred.
   Text only, line breaks kept (AS10). The thread scrolls inside the card;
   the input row sits under it. No inline styles.
   ============================================================================ */
.sx-chat-page {
    max-width: 48rem;
}

.sx-chat-thread {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 26rem;
    overflow-y: auto;
    padding: 1rem;
}

.sx-chat-thread-read {
    height: auto;
    max-height: 40rem;
    padding: 0;
}

.sx-chat-msg {
    max-width: 85%;
    padding: 0.45rem 0.75rem;
    border-radius: var(--sx-radius-lg);
    font-size: 0.875rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sx-chat-user {
    align-self: flex-end;
    background-color: var(--sx-accent);
    color: #fff;
    border-bottom-right-radius: var(--sx-radius-sm);
}

.sx-chat-assistant {
    align-self: flex-start;
    background-color: var(--sx-bg-elevated);
    color: var(--sx-text-primary);
    border: 1px solid var(--sx-border);
    border-bottom-left-radius: var(--sx-radius-sm);
}

/* A reply's bullet list (Doc 24 AS10a, AssistantText): the bubble keeps
   pre-wrap for line breaks; the list sets its own spacing, a little more
   below it so a following heading line doesn't sit tight under it. */
.sx-chat-list {
    margin: 0.25rem 0 0.6rem;
    padding-left: 1.25rem;
    white-space: normal;
}

    .sx-chat-list li {
        margin: 0.1rem 0;
    }

.sx-chat-note {
    align-self: center;
    max-width: 95%;
    background-color: transparent;
    color: var(--sx-warning);
    font-size: 0.8rem;
    text-align: center;
}

.sx-chat-thinking {
    padding: 0 1rem 0.5rem;
}

.sx-chat-input {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    padding: 0.5rem;
    border-top: 1px solid var(--sx-border);
}

.sx-chat-input textarea {
    resize: none;
}

/* The signed-in assistant /Assistant (Doc 24 §12.1 AP2, AP3): a taller
   thread; the Conversations card - one-line rows (title cut with an ellipsis,
   date muted under it), the open one marked with the accent edge; scrolls
   inside the card. On phones the card body collapses (Bootstrap collapse,
   always shown from lg up with d-lg-block). */
.sx-chat-thread-tall {
    height: 32rem;
}

.sx-chat-convs {
    max-height: 34rem;
    overflow-y: auto;
}

.sx-chat-conv {
    display: block;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--sx-border);
    border-left: 3px solid transparent;
    color: var(--sx-text-primary);
    font-size: 0.875rem;
    text-decoration: none;
}

.sx-chat-conv:hover {
    background-color: var(--sx-bg-elevated);
    color: var(--sx-text-primary);
}

.sx-chat-conv-open {
    background-color: var(--sx-bg-elevated);
    border-left-color: var(--sx-accent);
}

.sx-chat-conv-empty {
    padding: 0.75rem;
    color: var(--sx-text-secondary);
    font-size: 0.875rem;
}

/* Action cards in the chat (Doc 24 AP10, Doc 09 G76): on the left like the
   assistant's bubbles, as a small bordered card with an accent edge - the
   kind and state, label / value rows, obligations, Open and Dismiss.
   Dismissed and expired cards are muted (.sx-chat-card-off). */
.sx-chat-card {
    align-self: flex-start;
    width: 100%;
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.75rem;
    background-color: var(--sx-bg-elevated);
    border: 1px solid var(--sx-border);
    border-left: 3px solid var(--sx-accent);
    border-radius: var(--sx-radius-lg);
    font-size: 0.875rem;
}

.sx-chat-card-off {
    opacity: 0.6;
    border-left-color: var(--sx-border);
}

.sx-chat-card-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sx-chat-card-row {
    display: flex;
    gap: 0.75rem;
}

.sx-chat-card-row > span:first-child {
    flex: 0 0 5.5rem;
}

.sx-chat-card-row > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sx-chat-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* The public guide editor on /Assistant/Settings. */
.sx-guide-text {
    font-family: var(--bs-font-monospace);
    font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Record pages in two flowing columns (Doc 09 G83, OI-23). The cards of a
   record page sit in div.sx-cards. From lg up it is two CSS columns: each
   card as tall as its content, the next card straight under it in the same
   column, never split. A col-* wrapper a partial or view component brings is
   full width inside, and h-100 has no effect. Below lg: one column.
   -------------------------------------------------------------------------- */
.sx-cards > * {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: 1rem;
    break-inside: avoid;
}

.sx-cards .card.h-100 {
    height: auto !important;
}

@media (min-width: 992px) {
    .sx-cards {
        column-count: 2;
        column-gap: 1rem;
    }
}