/* ============================================================================
   CALI Suite design system — The Viewing Room
   ----------------------------------------------------------------------------
   The Viewing Room ships as a companion app to the CALI CRM + Workflow Suite:
   standalone, but also embedded inside CALI. This file is the shared visual
   contract between the two — tokens, app shell and component layer ported from
   the suite's own admin.css so a user moving between the apps sees one product.

   Load order matters: bootstrap.min.css, then this file, then site.css. This
   sheet also neutralises the Bootstrap defaults (blue links/buttons/badges,
   square-ish radii) that would otherwise leak through the CALI surfaces.
   ========================================================================= */

:root {
    --cali-ink: #1a1a1a;
    --cali-charcoal: #2b2b2f;
    --cali-forest: #30382B;
    --cali-sage: #a8b5a2;
    /* Decoration only — fills, borders, rules, accents. At 3.7:1 on our paper/ivory
       surfaces it is below the WCAG AA floor for text, so it is never used as a
       text colour here. */
    --cali-rust: #c46a4a;
    /* The text-safe rust: same hue, dark enough to clear AA (4.5:1) at small sizes on
       paper/ivory — and, as a fill, to carry --cali-paper text. Reach for this whenever
       rust is a foreground colour. */
    --cali-rust-deep: #9b4d31;
    --cali-gold: #d4a373;
    --cali-sand: #d8d1c7;
    --cali-ivory: #f7f6f2;
    --cali-paper: #fffdf8;
    --cali-border: #e6dfd4;
    --cali-muted: #746f67;
    --cali-shadow: 0 18px 45px rgba(47, 58, 52, 0.08);

    /* Semantic states. The suite leans on sage for "good" and rust for "bad" rather
       than importing a stoplight palette that would fight the editorial neutrals. */
    --cali-success: #4a6b4f;
    --cali-warning: #8a5a2d;
    --cali-danger: var(--cali-rust-deep);

    --cali-font-display: "Playfair Display", Georgia, serif;
    --cali-font-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --cali-radius-sm: 6px;
    --cali-radius: 8px;
    --cali-radius-pill: 999px;
}

* {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */

/* Layout-only, so it keeps normal specificity. */
body.cali-app {
    margin: 0;
    min-height: 100vh;
}

/* Surface and type are wrapped in :where() (0,0,0) because the client-facing share
   pages also carry .cali-app — they need the Bootstrap bridge below, but a studio's
   own gallery branding sets `body { font-family }` at (0,0,1) and must win. */
:where(body.cali-app) {
    color: var(--cali-ink);
    background:
        radial-gradient(circle at top left, rgba(168, 181, 162, 0.18), transparent 32rem),
        linear-gradient(135deg, #fbfaf7 0%, var(--cali-ivory) 100%);
    background-attachment: fixed;
    font-family: var(--cali-font-ui);
    letter-spacing: 0;
}

/* Both halves are wrapped in :where() so the whole selector scores (0,0,0). This has to
   read as a *default* that any page-level class can override — even `body.cali-app h1`
   would score (0,1,1) and silently beat a single-class heading rule like .landing-title. */
:where(body.cali-app) :where(h1, h2, h3, h4, h5, h6) {
    color: var(--cali-forest);
    font-family: var(--cali-font-ui);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    font-style: normal;
}

/* The display serif is reserved for the few editorial moments the suite uses it
   for — the greeting, metric numerals, modal titles — never for body headings. */
.cali-display,
.admin-greeting,
.metric-value,
.cali-confirm-modal h2 {
    font-family: var(--cali-font-display);
    font-weight: 500;
}

/* Bootstrap 5.1 hard-codes plain <a> to #0d6efd. This :where() rule has the same
   (0,0,1) specificity as Bootstrap's own `a` selector but loads later, so it wins
   the tie for links that set no colour of their own — while still losing to every
   component class (nav links, buttons, .text-link, …). */
:where(body.cali-app) a {
    color: var(--cali-rust-deep);
    text-underline-offset: 2px;
}

:where(body.cali-app) a:hover,
:where(body.cali-app) a:focus {
    color: var(--cali-forest);
}

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

/* ---------------------------------------------------------------------------
   App shell
   ------------------------------------------------------------------------- */

.admin-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 100vh;
}

.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 26px 12px;
    background:
        linear-gradient(145deg, rgba(168, 181, 162, 0.08), transparent 26rem),
        #30382B;
    color: var(--cali-paper);
    display: flex;
    flex-direction: column;
}

.admin-brand {
    display: block;
    padding: 0 8px 22px;
    color: var(--cali-paper);
    text-decoration: none;
}

.admin-brand-logo {
    display: block;
    width: 100%;
    max-width: 188px;
    height: auto;
    margin: 0 auto;
}

.brand-word {
    display: block;
    color: var(--cali-paper);
    font-family: var(--cali-font-display);
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: 0.18em;
}

.brand-subtitle {
    display: block;
    margin-top: 8px;
    color: rgba(255, 253, 248, 0.68);
    font-size: 0.67rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.admin-nav {
    display: grid;
    gap: 4px;
    align-content: start;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    padding: 8px 12px;
    color: rgba(255, 253, 248, 0.72);
    border-radius: var(--cali-radius-sm);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
}

.admin-nav-link:hover,
.admin-nav-link:focus {
    color: var(--cali-paper);
    background: rgba(247, 246, 242, 0.16);
}

.admin-nav-link.is-active {
    color: var(--cali-forest);
    background: rgba(247, 246, 242, 0.76);
}

.admin-nav-section {
    margin: 18px 0 6px;
    padding: 0 12px;
    color: rgba(255, 253, 248, 0.44);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* Sidebar footer — the "part of the suite" tie-back and any secondary links. */
.admin-sidebar-foot {
    margin-top: auto;
    padding: 18px 12px 0;
    border-top: 1px solid rgba(247, 246, 242, 0.14);
}

.admin-suite-tag {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 253, 248, 0.56);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
}

.admin-suite-tag:hover,
.admin-suite-tag:focus {
    color: var(--cali-paper);
}

.admin-suite-tag img {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Nav icons — the suite's tri-state line icons. Sage at rest, terracotta on hover,
   olive once active (the active pill is light, so the dark icon is the readable one). */
.nav-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-image: var(--icon-sage);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.admin-nav-link:hover .nav-icon,
.admin-nav-link:focus .nav-icon {
    background-image: var(--icon-terracotta);
}

.admin-nav-link.is-active .nav-icon {
    background-image: var(--icon-olive);
}

.nav-icon-dashboard {
    --icon-olive: url("../images/icons/cali-dashboard-line/dashboard_home_olive.svg");
    --icon-sage: url("../images/icons/cali-dashboard-line/dashboard_home_sage.svg");
    --icon-terracotta: url("../images/icons/cali-dashboard-line/dashboard_home_terracotta.svg");
}

.nav-icon-collections {
    --icon-olive: url("../images/icons/cali-dashboard-line/gallery_image_olive.svg");
    --icon-sage: url("../images/icons/cali-dashboard-line/gallery_image_sage.svg");
    --icon-terracotta: url("../images/icons/cali-dashboard-line/gallery_image_terracotta.svg");
}

.nav-icon-clients {
    --icon-olive: url("../images/icons/cali-dashboard-line/clients_contacts_olive.svg");
    --icon-sage: url("../images/icons/cali-dashboard-line/clients_contacts_sage.svg");
    --icon-terracotta: url("../images/icons/cali-dashboard-line/clients_contacts_terracotta.svg");
}

.nav-icon-orders {
    --icon-olive: url("../images/icons/cali-dashboard-line/invoices_document_money_olive.svg");
    --icon-sage: url("../images/icons/cali-dashboard-line/invoices_document_money_sage.svg");
    --icon-terracotta: url("../images/icons/cali-dashboard-line/invoices_document_money_terracotta.svg");
}

.nav-icon-branding {
    --icon-olive: url("../images/icons/cali-dashboard-line/review_star_olive.svg");
    --icon-sage: url("../images/icons/cali-dashboard-line/review_star_sage.svg");
    --icon-terracotta: url("../images/icons/cali-dashboard-line/review_star_terracotta.svg");
}

.nav-icon-activity {
    --icon-olive: url("../images/icons/cali-dashboard-line/analytics_trending_olive.svg");
    --icon-sage: url("../images/icons/cali-dashboard-line/analytics_trending_sage.svg");
    --icon-terracotta: url("../images/icons/cali-dashboard-line/analytics_trending_terracotta.svg");
}

.nav-icon-settings {
    --icon-olive: url("../images/icons/cali-dashboard-line/settings_gear_olive.svg");
    --icon-sage: url("../images/icons/cali-dashboard-line/settings_gear_sage.svg");
    --icon-terracotta: url("../images/icons/cali-dashboard-line/settings_gear_terracotta.svg");
}

.nav-icon-viewing-room {
    --icon-olive: url("../images/icons/cali-dashboard-line/viewing_room_video_olive.svg");
    --icon-sage: url("../images/icons/cali-dashboard-line/viewing_room_video_sage.svg");
    --icon-terracotta: url("../images/icons/cali-dashboard-line/viewing_room_video_terracotta.svg");
}

.admin-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 42px 22px;
}

.admin-title-group {
    padding-top: 30px;
    min-width: 0;
}

.admin-greeting {
    margin: 0 0 7px;
    color: var(--cali-ink);
    font-family: var(--cali-font-display);
    font-size: clamp(1.75rem, 2.3vw, 2.45rem);
    font-weight: 500;
    line-height: 1.12;
}

.admin-kicker {
    margin: 0;
    color: var(--cali-muted);
    font-size: 0.9rem;
}

.admin-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    align-self: flex-start;
    margin-left: auto;
    min-width: min(430px, 48vw);
}

.admin-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 260px;
    max-width: 330px;
}

.admin-search input {
    width: 100%;
    min-height: 38px;
    padding: 0 58px 0 38px;
    border: 1px solid rgba(216, 209, 199, 0.8);
    border-radius: var(--cali-radius-sm);
    background: rgba(255, 253, 248, 0.72);
    color: var(--cali-ink);
    font-size: 0.84rem;
    outline: none;
}

.admin-search input:focus {
    border-color: rgba(168, 181, 162, 0.95);
    box-shadow: 0 0 0 3px rgba(168, 181, 162, 0.18);
}

.admin-search-icon {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    background-image: url("../images/icons/cali-dashboard-line/search_olive.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.admin-search:hover .admin-search-icon {
    background-image: url("../images/icons/cali-dashboard-line/search_sage.svg");
}

.admin-search:focus-within .admin-search-icon {
    background-image: url("../images/icons/cali-dashboard-line/search_terracotta.svg");
}

.admin-search-shortcut {
    position: absolute;
    right: 10px;
    color: rgba(116, 111, 103, 0.72);
    font-size: 0.68rem;
    font-weight: 700;
    pointer-events: none;
}

.icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--cali-radius-pill);
    background: transparent;
    color: var(--cali-muted);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 21px 21px;
}

.icon-button:hover,
.icon-button:focus {
    background-color: rgba(168, 181, 162, 0.12);
    color: var(--cali-forest);
}

.notification-button {
    background-image: url("../images/icons/cali-dashboard-line/reminder_bell_olive.svg");
}

.notification-button:hover {
    background-image: url("../images/icons/cali-dashboard-line/reminder_bell_sage.svg");
}

.notification-button:focus {
    background-image: url("../images/icons/cali-dashboard-line/reminder_bell_terracotta.svg");
}

.notification-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 7px;
    height: 7px;
    border: 1.5px solid var(--cali-ivory);
    border-radius: var(--cali-radius-pill);
    background: var(--cali-rust);
}

.profile-menu {
    position: relative;
}

.avatar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(31, 45, 36, 0.12);
    border-radius: var(--cali-radius-pill);
    background:
        radial-gradient(circle at 68% 24%, #f6dbc9 0 11%, transparent 12%),
        radial-gradient(circle at 50% 35%, #cdb49d 0 28%, transparent 29%),
        linear-gradient(145deg, #a8b5a2, #2f3a34);
    color: var(--cali-paper);
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(31, 45, 36, 0.12);
}

.avatar-button-large {
    width: 46px;
    height: 46px;
}

.profile-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 30;
    width: 280px;
    padding: 14px;
    border: 1px solid var(--cali-border);
    border-radius: var(--cali-radius);
    background: rgba(255, 253, 248, 0.98);
    box-shadow: 0 22px 55px rgba(31, 45, 36, 0.16);
}

.profile-popover[hidden] {
    display: none;
}

.profile-popover-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 13px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--cali-border);
}

.profile-popover h2 {
    margin: 0;
    color: var(--cali-forest);
    font-size: 0.95rem;
    font-weight: 800;
    word-break: break-word;
}

.profile-popover p {
    margin: 2px 0 0;
    color: var(--cali-muted);
    font-size: 0.78rem;
    word-break: break-word;
}

.profile-menu-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--cali-radius-sm);
    background: transparent;
    color: var(--cali-forest);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
}

.profile-menu-link:hover,
.profile-menu-link:focus {
    background: rgba(168, 181, 162, 0.14);
    color: var(--cali-forest);
}

.profile-menu-button {
    color: var(--cali-rust-deep);
}

.admin-content {
    flex: 1 0 auto;
    padding: 0 42px 46px;
}

.admin-footer {
    padding: 0 42px 26px;
    color: var(--cali-muted);
    font-size: 0.78rem;
}

.admin-footer a {
    color: var(--cali-muted);
    text-decoration: none;
}

.admin-footer a:hover,
.admin-footer a:focus {
    color: var(--cali-forest);
}

/* --- Mobile drawer -------------------------------------------------------- */

.admin-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--cali-border);
    border-radius: var(--cali-radius);
    background: var(--cali-paper);
    color: var(--cali-forest);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.admin-menu-toggle:hover,
.admin-menu-toggle:focus-visible {
    outline: none;
    border-color: var(--cali-forest);
    background: var(--cali-forest);
}

.admin-menu-toggle:hover .admin-menu-toggle-bar,
.admin-menu-toggle:focus-visible .admin-menu-toggle-bar {
    background: var(--cali-paper);
}

.admin-menu-toggle-bar {
    display: block;
    width: 18px;
    height: 1.6px;
    border-radius: var(--cali-radius-pill);
    background: var(--cali-forest);
    transition: background 120ms ease;
}

.admin-sidebar-close {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 253, 248, 0.25);
    border-radius: var(--cali-radius-pill);
    background: transparent;
    color: var(--cali-paper);
    cursor: pointer;
    z-index: 2;
}

.admin-sidebar-close:hover,
.admin-sidebar-close:focus-visible {
    outline: none;
    background: rgba(255, 253, 248, 0.12);
    border-color: rgba(255, 253, 248, 0.45);
}

.admin-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(20, 28, 22, 0.42);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 180ms ease;
}

.admin-sidebar-backdrop.is-visible {
    opacity: 1;
}

body.cali-sidebar-open {
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Public shell — signed-out landing, ported from the suite's public pages
   ------------------------------------------------------------------------- */

.public-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.public-header {
    position: relative;
    z-index: 10;
    padding: clamp(10px, 1.5vh, 16px) clamp(18px, 4vw, 42px);
    background: rgba(247, 246, 242, 0.84);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--cali-border);
}

.public-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    max-width: 1320px;
    margin: 0 auto;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    color: var(--cali-forest);
    text-decoration: none;
}

.site-brand:hover,
.site-brand:focus {
    color: var(--cali-forest);
}

.site-brand-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
}

.site-brand-word {
    font-family: var(--cali-font-display);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.public-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 6vh, 72px) clamp(18px, 4vw, 42px);
}

.public-footer {
    margin-top: auto;
    padding: 0 clamp(18px, 4vw, 42px) 26px;
    color: var(--cali-muted);
    font-size: 0.78rem;
    text-align: center;
}

.public-footer a {
    color: var(--cali-muted);
    text-decoration: none;
}

.public-footer a:hover,
.public-footer a:focus {
    color: var(--cali-forest);
}

/* ---------------------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------------------- */

.section-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.panel,
.metric-card,
.form-panel {
    background: rgba(255, 253, 248, 0.86);
    border: 1px solid var(--cali-border);
    border-radius: var(--cali-radius);
    box-shadow: var(--cali-shadow);
}

.panel {
    padding: 22px;
}

.panel + .panel {
    margin-top: 18px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.panel-title {
    margin: 0;
    color: var(--cali-forest);
    font-size: 1rem;
    font-weight: 700;
}

.panel-title.small {
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.panel-link {
    color: var(--cali-muted);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
}

.panel-link:hover,
.panel-link:focus {
    color: var(--cali-rust-deep);
}

.metric-card {
    padding: 20px;
    min-height: 120px;
}

.metric-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.metric-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background-image: var(--icon-olive);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.metric-card:hover .metric-icon,
.metric-card:focus-within .metric-icon {
    background-image: var(--icon-terracotta);
}

.metric-icon-collections {
    --icon-olive: url("../images/icons/cali-dashboard-line/gallery_image_olive.svg");
    --icon-sage: url("../images/icons/cali-dashboard-line/gallery_image_sage.svg");
    --icon-terracotta: url("../images/icons/cali-dashboard-line/gallery_image_terracotta.svg");
}

.metric-icon-viewing-room {
    --icon-olive: url("../images/icons/cali-dashboard-line/viewing_room_video_olive.svg");
    --icon-sage: url("../images/icons/cali-dashboard-line/viewing_room_video_sage.svg");
    --icon-terracotta: url("../images/icons/cali-dashboard-line/viewing_room_video_terracotta.svg");
}

.metric-icon-orders {
    --icon-olive: url("../images/icons/cali-dashboard-line/invoices_document_money_olive.svg");
    --icon-sage: url("../images/icons/cali-dashboard-line/invoices_document_money_sage.svg");
    --icon-terracotta: url("../images/icons/cali-dashboard-line/invoices_document_money_terracotta.svg");
}

.metric-icon-clients {
    --icon-olive: url("../images/icons/cali-dashboard-line/crm_user_olive.svg");
    --icon-sage: url("../images/icons/cali-dashboard-line/crm_user_sage.svg");
    --icon-terracotta: url("../images/icons/cali-dashboard-line/crm_user_terracotta.svg");
}

.metric-label,
.field-label {
    color: var(--cali-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.metric-value {
    margin-top: 12px;
    color: var(--cali-ink);
    font-size: 2.2rem;
    line-height: 1;
}

.metric-note {
    margin-top: 8px;
    color: var(--cali-muted);
    font-size: 0.82rem;
}

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.admin-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-cali,
.btn-cali-secondary,
.btn-cali-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 9px 15px;
    border-radius: var(--cali-radius-sm);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.btn-cali {
    border: 1px solid var(--cali-forest);
    background: var(--cali-forest);
    color: var(--cali-paper);
}

.btn-cali:hover,
.btn-cali:focus {
    color: var(--cali-paper);
    background: #253029;
}

.btn-cali-secondary {
    border: 1px solid var(--cali-border);
    background: transparent;
    color: var(--cali-forest);
}

.btn-cali-secondary:hover,
.btn-cali-secondary:focus,
.btn-cali-secondary:active {
    color: var(--cali-forest);
    background: rgba(168, 181, 162, 0.16);
    border-color: var(--cali-sage);
    text-decoration: none;
}

.btn-cali-danger {
    border: 1px solid rgba(168, 93, 77, 0.25);
    background: rgba(168, 93, 77, 0.08);
    color: var(--cali-rust-deep);
}

.btn-cali-danger:hover,
.btn-cali-danger:focus {
    border-color: var(--cali-rust-deep);
    background: var(--cali-rust-deep);
    color: var(--cali-paper);
}

/* Tertiary tier: a quiet text action for secondary row controls that shouldn't
   compete with the button beside them. */
.btn-cali-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--cali-radius-sm);
    background: transparent;
    color: var(--cali-muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.btn-cali-quiet:hover,
.btn-cali-quiet:focus,
.btn-cali-quiet:focus-visible {
    color: var(--cali-rust-deep);
    background: rgba(196, 106, 74, 0.08);
    border-color: rgba(196, 106, 74, 0.22);
    text-decoration: none;
}

.btn-cali-quiet.is-danger {
    color: var(--cali-rust-deep);
}

.btn-cali-quiet.is-danger:hover,
.btn-cali-quiet.is-danger:focus,
.btn-cali-quiet.is-danger:focus-visible {
    color: var(--cali-rust-deep);
    background: rgba(168, 93, 77, 0.12);
    border-color: rgba(168, 93, 77, 0.28);
}

.btn-cali:disabled,
.btn-cali-secondary:disabled,
.btn-cali-danger:disabled,
.btn-cali-quiet:disabled,
.btn-cali.disabled,
.btn-cali-secondary.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-cali-sm {
    min-height: 32px;
    padding: 6px 11px;
    font-size: 0.78rem;
}

/* Compact icon buttons for row actions. */
.btn-icon,
.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--cali-border);
    border-radius: var(--cali-radius-sm);
    background: var(--cali-paper);
    color: var(--cali-forest);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn-icon-only {
    width: 32px;
    padding: 0;
}

.btn-icon .cali-action-icon,
.btn-icon-only .cali-action-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.btn-icon:hover,
.btn-icon:focus-visible,
.btn-icon-only:hover,
.btn-icon-only:focus-visible {
    outline: none;
    border-color: var(--cali-forest);
    background: var(--cali-forest);
    color: var(--cali-paper);
}

.btn-icon.is-danger,
.btn-icon-only.is-danger {
    color: var(--cali-rust-deep);
    border-color: rgba(168, 93, 77, 0.25);
    background: rgba(168, 93, 77, 0.06);
}

/* The inverse of the rule above — paper text on a rust fill. --cali-rust as the fill
   puts the 0.78rem label at 3.75:1; the deep rust carries it to 5.9:1. */
.btn-icon.is-danger:hover,
.btn-icon.is-danger:focus-visible,
.btn-icon-only.is-danger:hover,
.btn-icon-only.is-danger:focus-visible {
    border-color: var(--cali-rust-deep);
    background: var(--cali-rust-deep);
    color: var(--cali-paper);
}

.btn-icon.is-success,
.btn-icon-only.is-success {
    color: var(--cali-forest);
    border-color: rgba(48, 56, 43, 0.25);
    background: rgba(48, 56, 43, 0.06);
}

.btn-icon.is-success:hover,
.btn-icon.is-success:focus-visible,
.btn-icon-only.is-success:hover,
.btn-icon-only.is-success:focus-visible {
    border-color: var(--cali-forest);
    background: var(--cali-forest);
    color: var(--cali-paper);
}

.cali-action-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    color: inherit;
    pointer-events: none;
}

.link-button {
    border: 0;
    background: none;
    color: var(--cali-rust-deep);
    font: inherit;
    padding: 0;
}

.text-link {
    color: var(--cali-rust-deep);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.text-link:hover,
.text-link:focus {
    color: var(--cali-forest);
}

/* Branded "← Back to …" link shared by detail pages. */
.cali-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    color: var(--cali-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.cali-back:hover,
.cali-back:focus {
    color: var(--cali-forest);
}

/* ---------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------- */

.data-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--cali-ink);
}

.data-table th,
.data-table td {
    padding: 13px 10px;
    border-bottom: 1px solid var(--cali-border);
    vertical-align: middle;
}

.data-table th {
    color: var(--cali-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
}

.data-table td {
    font-size: 0.9rem;
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.table-row-link {
    color: inherit;
    text-decoration: none;
}

.table-row-link:hover {
    text-decoration: underline;
}

/* Button variant: for rows whose "edit" opens a modal instead of navigating, so the
   title can trigger the same action while looking exactly like a plain row-link. */
button.table-row-link {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.table-scroll {
    overflow-x: visible;
}

/* Tighten the actions cell so multiple icon buttons sit on one line.
   Only target wrapper elements — never the <td> itself, which must stay table-cell. */
.data-table div.admin-actions,
.data-table span.admin-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */

.form-panel {
    max-width: 980px;
    padding: 24px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-grid .full {
    grid-column: 1 / -1;
}

.form-field {
    display: grid;
    gap: 7px;
    align-content: start;
}

.form-section {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 8px 0 -2px;
    color: var(--cali-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.form-section::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--cali-border), rgba(230, 223, 212, 0));
}

.field-hint {
    display: block;
    margin-top: 6px;
    color: var(--cali-muted);
    font-size: 0.78rem;
}

body.cali-app .form-control,
body.cali-app .form-select {
    border-color: var(--cali-border);
    border-radius: var(--cali-radius-sm);
    min-height: 42px;
    color: var(--cali-ink);
    font-size: 0.92rem;
}

body.cali-app .form-control:focus,
body.cali-app .form-select:focus {
    border-color: var(--cali-sage);
    box-shadow: 0 0 0 0.18rem rgba(168, 181, 162, 0.25);
}

body.cali-app textarea.form-control {
    min-height: 96px;
}

/* Native file inputs: restyle the browser's default grey "Choose File" button to match
   .btn-cali-secondary. The standard (::file-selector-button) and legacy webkit
   (::-webkit-file-upload-button) pseudo-elements must be separate rules — grouping a
   selector a browser doesn't recognise drops the whole rule. */
body.cali-app input[type="file"].form-control {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 40px;
}

body.cali-app input[type="file"].form-control::file-selector-button {
    margin: 0 12px 0 0;
    padding: 0 15px;
    height: 40px;
    border: 0;
    border-right: 1px solid var(--cali-border);
    background: rgba(168, 181, 162, 0.16);
    color: var(--cali-forest);
    font: inherit;
    font-weight: 700;
    font-size: 0.84rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

body.cali-app input[type="file"].form-control::file-selector-button:hover {
    background: var(--cali-sage);
    color: var(--cali-paper);
}

body.cali-app input[type="file"].form-control::-webkit-file-upload-button {
    margin: 0 12px 0 0;
    padding: 0 15px;
    height: 40px;
    border: 0;
    border-right: 1px solid var(--cali-border);
    background: rgba(168, 181, 162, 0.16);
    color: var(--cali-forest);
    font: inherit;
    font-weight: 700;
    font-size: 0.84rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

body.cali-app input[type="file"].form-control::-webkit-file-upload-button:hover {
    background: var(--cali-sage);
    color: var(--cali-paper);
}

/* ---------------------------------------------------------------------------
   Feedback surfaces
   ------------------------------------------------------------------------- */

.notice {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: var(--cali-radius-sm);
    font-size: 0.9rem;
}

.notice-success {
    background: rgba(168, 181, 162, 0.18);
    color: var(--cali-forest);
}

.notice-danger {
    background: rgba(168, 93, 77, 0.12);
    color: var(--cali-rust-deep);
}

.notice-info {
    background: rgba(120, 132, 150, 0.12);
    color: var(--cali-forest);
}

.notice-warning {
    background: rgba(212, 163, 115, 0.16);
    color: var(--cali-forest);
    border: 1px solid rgba(212, 163, 115, 0.45);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: var(--cali-radius-pill);
    background: rgba(168, 181, 162, 0.2);
    color: var(--cali-forest);
    font-size: 0.72rem;
    font-weight: 700;
}

.status-pill.rust {
    background: rgba(168, 93, 77, 0.12);
    color: var(--cali-rust-deep);
}

.status-pill.gold {
    background: rgba(212, 163, 115, 0.16);
    color: #8a5a2d;
}

.status-pill.forest {
    background: rgba(48, 56, 43, 0.12);
    color: var(--cali-forest);
}

.status-pill.muted {
    background: rgba(116, 111, 103, 0.12);
    color: var(--cali-muted);
}

.empty-state {
    padding: 30px;
    color: var(--cali-muted);
    text-align: center;
    border: 1px dashed var(--cali-border);
    border-radius: var(--cali-radius);
}

.empty-state.compact {
    padding: 18px;
    font-size: 0.82rem;
}

.empty-state-title {
    font-weight: 600;
    color: var(--cali-ink);
    margin-bottom: 4px;
}

.muted {
    color: var(--cali-muted);
}

/* ---------------------------------------------------------------------------
   Modals
   ------------------------------------------------------------------------- */

.cali-modal-open {
    overflow: hidden;
}

.cali-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(26, 26, 26, 0.42);
    backdrop-filter: blur(7px);
}

.cali-modal-backdrop[hidden] {
    display: none;
}

.cali-confirm-modal {
    position: relative;
    width: min(440px, 100%);
    padding: 28px;
    border: 1px solid rgba(216, 209, 199, 0.95);
    border-radius: var(--cali-radius);
    background:
        radial-gradient(circle at top left, rgba(168, 181, 162, 0.13), transparent 16rem),
        rgba(255, 253, 248, 0.98);
    box-shadow: 0 26px 72px rgba(31, 45, 36, 0.24);
    color: var(--cali-forest);
}

.cali-modal-kicker {
    margin-bottom: 10px;
    color: var(--cali-rust-deep);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cali-confirm-modal h2 {
    margin: 0;
    color: var(--cali-forest);
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.1;
}

.cali-confirm-modal p {
    margin: 12px 0 0;
    color: var(--cali-muted);
    font-size: 0.93rem;
    line-height: 1.55;
}

.cali-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.modal-field {
    display: grid;
    gap: 7px;
    margin-top: 20px;
}

.modal-field-hint {
    color: var(--cali-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.cali-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: var(--cali-radius-pill);
    background: transparent;
}

.cali-modal-close::before,
.cali-modal-close::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 8px;
    width: 13px;
    height: 1.5px;
    border-radius: var(--cali-radius-pill);
    background: var(--cali-muted);
}

.cali-modal-close::before {
    transform: rotate(45deg);
}

.cali-modal-close::after {
    transform: rotate(-45deg);
}

.cali-modal-close:hover,
.cali-modal-close:focus {
    border-color: rgba(168, 181, 162, 0.42);
    background: rgba(168, 181, 162, 0.14);
}

/* ---------------------------------------------------------------------------
   Bootstrap bridge
   ----------------------------------------------------------------------------
   The Viewing Room's pages are built on Bootstrap. Rather than rewrite 25k lines
   of Razor, map Bootstrap's component defaults onto the CALI equivalents so
   untouched markup still lands on-brand.
   ------------------------------------------------------------------------- */

body.cali-app .btn {
    border-radius: var(--cali-radius-sm);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

/* Bootstrap 5.1 styles buttons with plain declarations — it predates the --bs-btn-*
   custom properties of 5.3 — so these have to be real overrides, not variable
   re-pointing, and each state needs spelling out. */
body.cali-app .btn-primary,
body.cali-app .btn-dark,
body.cali-app .btn-success {
    background-color: var(--cali-forest);
    border-color: var(--cali-forest);
    color: var(--cali-paper);
}

body.cali-app .btn-primary:hover,
body.cali-app .btn-primary:focus,
body.cali-app .btn-primary:active,
body.cali-app .btn-primary.active,
body.cali-app .btn-dark:hover,
body.cali-app .btn-dark:focus,
body.cali-app .btn-dark:active,
body.cali-app .btn-success:hover,
body.cali-app .btn-success:focus,
body.cali-app .btn-success:active,
body.cali-app .btn-check:checked + .btn-primary {
    background-color: #253029;
    border-color: #253029;
    color: var(--cali-paper);
}

body.cali-app .btn-primary:disabled,
body.cali-app .btn-primary.disabled,
body.cali-app .btn-dark:disabled,
body.cali-app .btn-success:disabled {
    background-color: var(--cali-forest);
    border-color: var(--cali-forest);
    color: var(--cali-paper);
    opacity: 0.5;
}

body.cali-app .btn-secondary,
body.cali-app .btn-outline-secondary,
body.cali-app .btn-outline-primary,
body.cali-app .btn-outline-dark,
body.cali-app .btn-outline-info,
body.cali-app .btn-outline-light,
body.cali-app .btn-light {
    background-color: transparent;
    border-color: var(--cali-border);
    color: var(--cali-forest);
}

body.cali-app .btn-secondary:hover,
body.cali-app .btn-secondary:focus,
body.cali-app .btn-secondary:active,
body.cali-app .btn-outline-secondary:hover,
body.cali-app .btn-outline-secondary:focus,
body.cali-app .btn-outline-secondary:active,
body.cali-app .btn-outline-secondary.active,
body.cali-app .btn-outline-primary:hover,
body.cali-app .btn-outline-primary:focus,
body.cali-app .btn-outline-primary:active,
body.cali-app .btn-outline-primary.active,
body.cali-app .btn-outline-dark:hover,
body.cali-app .btn-outline-dark:focus,
body.cali-app .btn-outline-dark:active,
body.cali-app .btn-outline-info:hover,
body.cali-app .btn-outline-info:focus,
body.cali-app .btn-outline-info:active,
body.cali-app .btn-outline-info.active,
body.cali-app .btn-light:hover,
body.cali-app .btn-light:focus,
body.cali-app .btn-check:checked + .btn-outline-primary,
body.cali-app .btn-check:checked + .btn-outline-secondary,
body.cali-app .btn-check:checked + .btn-outline-info {
    background-color: rgba(168, 181, 162, 0.16);
    border-color: var(--cali-sage);
    color: var(--cali-forest);
}

body.cali-app .btn-danger,
body.cali-app .btn-outline-danger {
    background-color: rgba(168, 93, 77, 0.08);
    border-color: rgba(168, 93, 77, 0.25);
    color: var(--cali-rust-deep);
}

body.cali-app .btn-danger:hover,
body.cali-app .btn-danger:focus,
body.cali-app .btn-danger:active,
body.cali-app .btn-outline-danger:hover,
body.cali-app .btn-outline-danger:focus,
body.cali-app .btn-outline-danger:active {
    background-color: var(--cali-rust-deep);
    border-color: var(--cali-rust-deep);
    color: var(--cali-paper);
}

body.cali-app .btn-warning {
    background-color: rgba(212, 163, 115, 0.2);
    border-color: rgba(212, 163, 115, 0.5);
    color: #8a5a2d;
}

body.cali-app .btn-warning:hover,
body.cali-app .btn-warning:focus,
body.cali-app .btn-warning:active {
    background-color: var(--cali-gold);
    border-color: var(--cali-gold);
    color: var(--cali-forest);
}

body.cali-app .btn-link {
    color: var(--cali-rust-deep);
}

body.cali-app .btn-link:hover,
body.cali-app .btn-link:focus {
    color: var(--cali-forest);
}

body.cali-app .btn:focus-visible,
body.cali-app .btn:focus,
body.cali-app .btn-check:focus + .btn {
    box-shadow: 0 0 0 0.18rem rgba(168, 181, 162, 0.3);
}

body.cali-app .card {
    border-color: var(--cali-border);
    border-radius: var(--cali-radius);
    background: rgba(255, 253, 248, 0.86);
    box-shadow: var(--cali-shadow);
}

body.cali-app .card-header,
body.cali-app .card-footer {
    border-color: var(--cali-border);
    background: transparent;
}

body.cali-app .modal-content {
    border: 1px solid rgba(216, 209, 199, 0.95);
    border-radius: var(--cali-radius);
    background:
        radial-gradient(circle at top left, rgba(168, 181, 162, 0.13), transparent 16rem),
        rgba(255, 253, 248, 0.98);
    box-shadow: 0 26px 72px rgba(31, 45, 36, 0.24);
    color: var(--cali-forest);
}

body.cali-app .modal-header,
body.cali-app .modal-footer {
    border-color: var(--cali-border);
}

body.cali-app .modal-title {
    font-family: var(--cali-font-display);
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--cali-forest);
}

body.cali-app .badge {
    border-radius: var(--cali-radius-pill);
    font-weight: 700;
    letter-spacing: 0;
}

body.cali-app .badge.bg-primary,
body.cali-app .badge.text-bg-primary,
body.cali-app .badge.bg-success,
body.cali-app .badge.text-bg-success {
    background-color: rgba(168, 181, 162, 0.25) !important;
    color: var(--cali-forest) !important;
}

body.cali-app .badge.bg-secondary,
body.cali-app .badge.text-bg-secondary {
    background-color: rgba(116, 111, 103, 0.16) !important;
    color: var(--cali-muted) !important;
}

body.cali-app .badge.bg-danger,
body.cali-app .badge.text-bg-danger {
    background-color: rgba(168, 93, 77, 0.14) !important;
    color: var(--cali-rust-deep) !important;
}

body.cali-app .badge.bg-warning,
body.cali-app .badge.text-bg-warning {
    background-color: rgba(212, 163, 115, 0.2) !important;
    color: #8a5a2d !important;
}

body.cali-app .badge.bg-info,
body.cali-app .badge.text-bg-info,
body.cali-app .badge.bg-light,
body.cali-app .badge.text-bg-light {
    background-color: rgba(168, 181, 162, 0.18) !important;
    color: var(--cali-forest) !important;
}

body.cali-app .alert {
    border-radius: var(--cali-radius-sm);
}

body.cali-app .alert-success {
    background-color: rgba(168, 181, 162, 0.18);
    border-color: rgba(168, 181, 162, 0.4);
    color: var(--cali-forest);
}

body.cali-app .alert-primary,
body.cali-app .alert-info,
body.cali-app .alert-secondary {
    background-color: rgba(120, 132, 150, 0.1);
    border-color: rgba(120, 132, 150, 0.24);
    color: var(--cali-forest);
}

body.cali-app .alert-warning {
    background-color: rgba(212, 163, 115, 0.16);
    border-color: rgba(212, 163, 115, 0.45);
    color: #8a5a2d;
}

body.cali-app .alert-danger {
    background-color: rgba(168, 93, 77, 0.12);
    border-color: rgba(168, 93, 77, 0.3);
    color: var(--cali-rust-deep);
}

body.cali-app .form-check-input {
    border-color: rgba(48, 56, 43, 0.28);
}

body.cali-app .form-check-input:checked {
    background-color: var(--cali-forest);
    border-color: var(--cali-forest);
}

body.cali-app .form-check-input:focus {
    border-color: var(--cali-sage);
    box-shadow: 0 0 0 0.18rem rgba(168, 181, 162, 0.25);
}

body.cali-app .progress {
    background-color: rgba(48, 56, 43, 0.08);
    border-radius: var(--cali-radius-pill);
}

body.cali-app .progress-bar {
    background-color: var(--cali-forest);
    color: var(--cali-paper);
}

body.cali-app .nav-tabs {
    border-bottom-color: var(--cali-border);
}

body.cali-app .nav-tabs .nav-link {
    color: var(--cali-muted);
    border-radius: var(--cali-radius-sm) var(--cali-radius-sm) 0 0;
    font-size: 0.86rem;
    font-weight: 700;
}

body.cali-app .nav-tabs .nav-link:hover {
    border-color: transparent transparent var(--cali-sage);
    color: var(--cali-forest);
}

body.cali-app .nav-tabs .nav-link.active {
    color: var(--cali-forest);
    background: rgba(255, 253, 248, 0.86);
    border-color: var(--cali-border) var(--cali-border) transparent;
}

body.cali-app .table {
    --bs-table-striped-bg: rgba(168, 181, 162, 0.06);
    --bs-table-hover-bg: rgba(168, 181, 162, 0.1);
    color: var(--cali-ink);
    border-color: var(--cali-border);
}

body.cali-app .table > :not(caption) > * > * {
    border-bottom-color: var(--cali-border);
}

body.cali-app .table > thead {
    color: var(--cali-muted);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Bootstrap ships $code-color as #d63384 (pink) and $form-text-color as the cool
   grey #6c757d. Both read as foreign next to CALI's warm neutrals. The suite sets
   inline code in rust-deep and every hint in --cali-muted. */
body.cali-app code,
body.cali-app kbd,
body.cali-app samp {
    color: var(--cali-rust-deep);
    font-size: 0.86em;
    word-wrap: break-word;
}

body.cali-app kbd {
    padding: 2px 6px;
    border-radius: var(--cali-radius-sm);
    background: rgba(48, 56, 43, 0.08);
}

body.cali-app pre code {
    color: var(--cali-ink);
}

body.cali-app .form-text,
body.cali-app .form-text > * {
    color: var(--cali-muted);
}

body.cali-app .text-muted {
    color: var(--cali-muted) !important;
}

body.cali-app .text-primary,
body.cali-app .text-info {
    color: var(--cali-forest) !important;
}

body.cali-app .text-success {
    color: var(--cali-success) !important;
}

body.cali-app .text-warning {
    color: var(--cali-warning) !important;
}

body.cali-app .text-danger {
    color: var(--cali-rust-deep) !important;
}

body.cali-app .bg-light,
body.cali-app .bg-light-subtle,
body.cali-app .bg-white {
    background-color: rgba(255, 253, 248, 0.86) !important;
}

body.cali-app .bg-primary,
body.cali-app .bg-info,
body.cali-app .text-bg-info {
    background-color: rgba(168, 181, 162, 0.18) !important;
    color: var(--cali-forest) !important;
}

body.cali-app .border,
body.cali-app .border-top,
body.cali-app .border-bottom,
body.cali-app .border-start,
body.cali-app .border-end {
    border-color: var(--cali-border) !important;
}

body.cali-app .dropdown-menu {
    border-color: var(--cali-border);
    border-radius: var(--cali-radius);
    background: rgba(255, 253, 248, 0.98);
    box-shadow: 0 22px 55px rgba(31, 45, 36, 0.16);
}

body.cali-app .dropdown-item {
    color: var(--cali-forest);
    font-size: 0.86rem;
    font-weight: 600;
}

body.cali-app .dropdown-item:hover,
body.cali-app .dropdown-item:focus {
    background: rgba(168, 181, 162, 0.14);
    color: var(--cali-forest);
}

body.cali-app .dropdown-item.active,
body.cali-app .dropdown-item:active {
    background: var(--cali-forest);
    color: var(--cali-paper);
}

body.cali-app .list-group-item {
    border-color: var(--cali-border);
    background: transparent;
    color: var(--cali-ink);
}

body.cali-app .page-link {
    color: var(--cali-forest);
    border-color: var(--cali-border);
}

body.cali-app .page-item.active .page-link {
    background-color: var(--cali-forest);
    border-color: var(--cali-forest);
    color: var(--cali-paper);
}

body.cali-app ::selection {
    background: rgba(168, 181, 162, 0.4);
    color: var(--cali-forest);
}

/* ---------------------------------------------------------------------------
   DataTables
   ----------------------------------------------------------------------------
   The Viewing Room's list screens are DataTables-driven, so its chrome (length
   menu, filter, info, pager) needs the same treatment the CRM gives its own
   tables — otherwise the surrounding panel is CALI and the table is Bootstrap.
   ------------------------------------------------------------------------- */

body.cali-app .dataTables_wrapper .dataTables_length,
body.cali-app .dataTables_wrapper .dataTables_filter,
body.cali-app .dataTables_wrapper .dataTables_info,
body.cali-app .dataTables_wrapper .dataTables_paginate {
    color: var(--cali-muted);
    font-size: 0.82rem;
}

body.cali-app .dataTables_wrapper .dataTables_length select,
body.cali-app .dataTables_wrapper .dataTables_filter input {
    min-height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--cali-border);
    border-radius: var(--cali-radius-sm);
    background: rgba(255, 253, 248, 0.72);
    color: var(--cali-ink);
    font-size: 0.84rem;
    outline: none;
}

body.cali-app .dataTables_wrapper .dataTables_length select:focus,
body.cali-app .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--cali-sage);
    box-shadow: 0 0 0 3px rgba(168, 181, 162, 0.18);
}

body.cali-app .dataTables_wrapper table.dataTable {
    border-collapse: collapse;
    color: var(--cali-ink);
}

body.cali-app .dataTables_wrapper table.dataTable > thead > tr > th,
body.cali-app .dataTables_wrapper table.dataTable > thead > tr > td {
    border-bottom: 1px solid var(--cali-border);
    color: var(--cali-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.cali-app .dataTables_wrapper table.dataTable > tbody > tr > td {
    border-top: 0;
    border-bottom: 1px solid var(--cali-border);
    font-size: 0.9rem;
    vertical-align: middle;
}

body.cali-app .dataTables_wrapper table.dataTable > tbody > tr:hover > td {
    background: rgba(168, 181, 162, 0.08);
}

/* DataTables tints the sorted column by default, which reads as a stray stripe against
   the flat CALI table. Let the row own the background instead. */
body.cali-app .dataTables_wrapper table.dataTable > tbody > tr > td.sorting_1,
body.cali-app .dataTables_wrapper table.dataTable > tbody > tr > td.sorting_2,
body.cali-app .dataTables_wrapper table.dataTable > tbody > tr > td.sorting_3 {
    background: transparent;
}

body.cali-app .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 32px;
    margin-left: 4px;
    padding: 5px 10px;
    border: 1px solid transparent !important;
    border-radius: var(--cali-radius-sm) !important;
    background: transparent !important;
    color: var(--cali-forest) !important;
    font-size: 0.82rem;
    font-weight: 600;
}

body.cali-app .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
body.cali-app .dataTables_wrapper .dataTables_paginate .paginate_button:focus {
    border-color: var(--cali-sage) !important;
    background: rgba(168, 181, 162, 0.16) !important;
    color: var(--cali-forest) !important;
    box-shadow: none !important;
}

body.cali-app .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.cali-app .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border-color: var(--cali-forest) !important;
    background: var(--cali-forest) !important;
    color: var(--cali-paper) !important;
}

body.cali-app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.cali-app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--cali-muted) !important;
    opacity: 0.55;
}

body.cali-app .dataTables_wrapper .dataTables_empty {
    padding: 26px 10px;
    color: var(--cali-muted);
}

/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    /* Drawer sits off-canvas by default.
       minmax(0, 1fr) — not plain 1fr — because 1fr resolves its minimum to min-content,
       so a single wide table (the DataTables lists set `nowrap`) would stretch the whole
       shell past the viewport instead of scrolling inside its own container. */
    .admin-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(284px, 86vw);
        max-width: 320px;
        height: 100vh;
        z-index: 1000;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 220ms ease;
        box-shadow: 22px 0 50px rgba(20, 28, 22, 0.32);
    }

    .admin-sidebar.is-open {
        transform: translateX(0);
    }

    .admin-menu-toggle,
    .admin-sidebar-close {
        display: inline-flex;
    }

    .admin-sidebar-backdrop {
        display: block;
    }

    .admin-nav {
        grid-template-columns: 1fr;
    }

    .span-3,
    .span-4,
    .span-5,
    .span-6,
    .span-7,
    .span-8 {
        grid-column: span 12;
    }
}

@media (max-width: 720px) {
    .admin-topbar,
    .admin-content,
    .admin-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-menu-toggle {
        align-self: flex-start;
    }

    .admin-title-group {
        padding-top: 0;
    }

    .admin-top-actions {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }

    .admin-search {
        max-width: none;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .table-scroll {
        overflow-x: auto;
    }

    .data-table {
        min-width: 640px;
    }
}