/* BTROS operator portal design tokens */
:root {
    /* SPEC-0044: the operator token values are re-pointed to the ARK360 brand
       (ADR-0019). Component rules below consume these tokens unchanged. */
    --btros-primary: #2aa8bc; /* ARK Teal 500 */
    --btros-primary-hover: #1893a6; /* Teal 600 */
    --btros-primary-soft: #e6f6f8; /* Teal 050 */
    --btros-sidebar: #17232f; /* ARK Navy 800 */
    --btros-sidebar-hover: #21303d; /* Navy 700 */
    --btros-surface: #f7f9fa;
    --btros-surface-2: #eef2f4;
    --btros-elevated: #ffffff;
    --btros-on-accent: #ffffff; /* foreground on navy chrome; teal primary buttons set navy text explicitly */
    --btros-border: #e1e7eb;
    --btros-border-strong: #cdd6db;
    --btros-ink: #0f1822;
    --btros-text: #2e3b45; /* Ink 700 */
    --btros-muted: #5c6a73; /* Ink 500 */
    --btros-radius: 0.625rem; /* 10px — ARK360 md */
    --btros-radius-sm: 0.5rem; /* 8px — ARK360 sm */
    --btros-shadow-sm: 0 1px 2px rgba(15, 24, 34, 0.06), 0 1px 3px rgba(15, 24, 34, 0.05);
    --btros-shadow: 0 1px 2px rgba(15, 24, 34, 0.06), 0 1px 3px rgba(15, 24, 34, 0.05);
    --btros-shadow-md: 0 4px 10px rgba(15, 24, 34, 0.07), 0 2px 4px rgba(15, 24, 34, 0.05);
    --btros-shadow-lg: 0 16px 40px rgba(15, 24, 34, 0.12), 0 6px 12px rgba(15, 24, 34, 0.07);
    --btros-font: var(--ark-font-sans);

    /* Align Bootstrap radii to the crisper BTROS scale */
    --bs-border-radius: 0.625rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;

    /* Brand scale (mirrors legacy tailwind brand.* / shadcn primary) */
    --btros-brand-400: #46c2d4;
    --btros-brand-500: #2aa8bc;
    --btros-brand-600: #1893a6;

    /* Spacing scale (SPEC-0034) */
    --btros-space-1: 0.25rem;
    --btros-space-2: 0.5rem;
    --btros-space-3: 0.75rem;
    --btros-space-4: 1rem;
    --btros-space-5: 1.25rem;
    --btros-space-6: 1.5rem;
    --btros-space-8: 2rem;
    --btros-chrome-height: 2.5rem;

    /* Semantic status colours (SPEC-0035 / ADR-0016): one canonical hue per
       meaning, consumed by every status surface. -soft = tinted background,
       -border = hairline, -text = AA-contrast text on the soft surface. */
    --btros-success: #1f9d6b;
    --btros-success-soft: #e7f6ef;
    --btros-success-border: #c2e6d5;
    --btros-success-text: #136f4b;
    --btros-warning: #b9791a;
    --btros-warning-soft: #fbf1de;
    --btros-warning-border: #ebd7a7;
    --btros-warning-text: #7c5212;
    --btros-danger: #cf4438;
    --btros-danger-soft: #fbe9e7;
    --btros-danger-border: #f0c9c4;
    --btros-danger-text: #9e2b21;
    --btros-info: #2a6fbc;
    --btros-info-soft: #e8f0fa;
    --btros-info-border: #cadbf1;
    --btros-info-text: #1f5187;

    /* Type scale (SPEC-0035 / ADR-0016): text sizes derive from these steps. */
    --btros-text-2xs: 0.6875rem;
    --btros-text-xs: 0.75rem;
    --btros-text-sm: 0.8125rem;
    --btros-text-md: 0.875rem;
    --btros-text-base: 1rem;
    --btros-text-lg: 1.125rem;
    --btros-text-2xl: 1.75rem;

    /* Accessible keyboard focus ring (SPEC-0035 REQ-006). */
    --btros-focus-ring: 0 0 0 2.5px rgba(42, 168, 188, 0.45);
}

html {
    font-size: 16px;
}

body {
    font-family: var(--btros-font);
    color: var(--btros-text);
    background: var(--btros-surface);
    -webkit-font-smoothing: antialiased;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0.5rem;
    z-index: 2000;
    padding: 0.5rem 1rem;
    background: var(--btros-elevated);
    color: var(--btros-primary);
    border: 1px solid var(--btros-border);
    border-radius: var(--btros-radius-sm);
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    left: 0.5rem;
    outline: 2px solid var(--btros-primary);
    outline-offset: 2px;
}

a {
    color: var(--ark-teal-700); /* Teal Ink — AA on light surfaces */
}

a:hover {
    color: var(--ark-teal-600);
}

.btn {
    --bs-btn-font-weight: 500;
}

/* ARK360 brand rule (ADR-0029): solid CTA fill is Teal Ink with white text; hover darkens. */
.btn-primary {
    --bs-btn-bg: var(--ark-teal-700);
    --bs-btn-border-color: var(--ark-teal-700);
    --bs-btn-color: var(--ark-on-dark);
    --bs-btn-hover-bg: var(--ark-teal-700);
    --bs-btn-hover-border-color: var(--ark-teal-700);
    --bs-btn-hover-color: var(--ark-on-dark);
    --bs-btn-active-bg: var(--ark-teal-700);
    --bs-btn-active-border-color: var(--ark-teal-700);
    --bs-btn-active-color: var(--ark-on-dark);
    --bs-btn-focus-shadow-rgb: 15, 122, 138;
}

.btn-primary:hover,
.btn-primary:active {
    filter: brightness(0.95);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus-visible,
.nav-link:focus-visible {
    box-shadow: var(--btros-focus-ring);
}

/* Visible keyboard focus for custom interactive controls that do not carry the
   Bootstrap .btn / .form-control / .nav-link classes (SPEC-0035 REQ-006). The
   transparent outline becomes a visible ring under forced-colors / high contrast. */
.topbar-icon-btn:focus-visible,
.topbar-search-trigger:focus-visible,
.filter-bar-item:focus-visible,
.user-menu-trigger:focus-visible,
.palette-item:focus-visible,
.notification-item:focus-visible,
.table-toolbar-clear:focus-visible,
.btros-toast-close:focus-visible,
.dashboard-nav-link:focus-visible,
.marketing-nav-link:focus-visible,
.day-chip:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--btros-focus-ring);
}

/* Auth shell */
.auth-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #e6f6f8 0%, #eef2f4 50%, #f7f9fa 100%);
}

.auth-shell {
    width: 100%;
    max-width: 28rem;
}

.auth-card {
    border: 1px solid var(--btros-border);
    border-radius: var(--btros-radius);
    box-shadow: var(--btros-shadow-lg) !important;
}

.auth-card-body {
    padding: var(--btros-space-8) !important;
}

.auth-card-body > form.form-stack {
    margin-top: var(--btros-space-2);
}

.auth-card-body > .alert {
    margin-bottom: var(--btros-space-4);
}

.auth-card-body > p.small {
    margin-top: var(--btros-space-4);
}

.auth-logo {
    object-fit: contain;
    /* SPEC-0073: the mark is a self-contained Cyan Bright badge — no white frame. */
    background: transparent;
    box-shadow: var(--btros-shadow);
}

.auth-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--btros-ink);
}

.auth-subtitle {
    color: var(--btros-muted) !important;
}

/* Dashboard */
.dashboard-page {
    display: flex;
    min-height: 100vh;
    background: var(--btros-surface);
}

.dashboard-sidebar {
    width: 16rem;
    flex-shrink: 0;
    background: var(--btros-sidebar);
    color: #f7f9fa;
    display: flex;
    flex-direction: column;
    z-index: 1040;
}

.dashboard-brand {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 4rem;
}

.dashboard-brand-mark {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    object-fit: contain;
    /* SPEC-0073: self-contained Cyan Bright shield badge — no white frame on the navy sidebar. */
    background: transparent;
}

.dashboard-nav-link {
    position: relative;
    color: #c7d2da !important; /* light navy-tint for nav text on the ARK Navy sidebar */
    border-radius: var(--btros-radius-sm);
    margin-bottom: 0.125rem;
    padding: 0.5rem 0.75rem !important;
    font-weight: 500;
    font-size: var(--btros-text-md);
    transition: background 0.15s ease, color 0.15s ease;
}

.dashboard-nav-link:hover {
    background: var(--btros-sidebar-hover);
    color: var(--btros-on-accent) !important;
}

.dashboard-nav-link.active {
    background: rgba(42, 168, 188, 0.20) !important;
    color: var(--btros-on-accent) !important;
}

/* Left accent bar reads like a control console rather than a flat fill */
.dashboard-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.375rem;
    bottom: 0.375rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--btros-brand-500);
}

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

.dashboard-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--btros-topbar-bg, var(--btros-elevated));
    background: color-mix(in srgb, var(--btros-topbar-bg, var(--btros-elevated)) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--btros-border);
    min-height: 4rem;
    box-shadow: var(--btros-shadow);
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.dashboard-topbar > .d-flex:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-topbar > .d-flex:last-child {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.dashboard-content {
    flex: 1;
    overflow: auto;
}

/* Keep Bootstrap cards on operator pages aligned with surface-card theming. */
.dashboard-page .card,
.dashboard-page .content-panel,
.dashboard-page .surface-card {
    background-color: var(--btros-elevated);
    border-color: var(--btros-border);
    color: var(--btros-text);
}

/* surface-card uses card-header/card-body without always including .card */
.dashboard-page .surface-card {
    --bs-card-bg: var(--btros-elevated);
    --bs-card-color: var(--btros-text);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: var(--btros-ink);
    --bs-card-border-color: var(--btros-border);
}

.dashboard-page .surface-card > .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--btros-border);
    color: var(--btros-ink);
}

.dashboard-page .surface-card > .card-body {
    background-color: transparent;
    color: var(--btros-text);
}

/* Page chrome */
.page-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--btros-space-6);
    width: 100%;
    max-width: 100%;
}

.page-stack > * {
    margin-bottom: 0 !important;
}

.page-stack .content-panel {
    margin-bottom: 0;
}

.page-header .page-actions {
    align-items: center;
}

.page-description {
    margin-bottom: 0;
    font-size: var(--btros-text-sm);
    color: var(--btros-muted);
}

.dashboard-greeting-text {
    font-size: var(--btros-text-lg);
    font-weight: 500;
    color: var(--btros-text);
    margin: 0;
}

.dashboard-greeting-divider {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--btros-border);
    opacity: 1;
}

.stat-summary-row {
    margin: 0;
}

.card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--btros-space-3);
}

@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.card-grid--loose {
    gap: var(--btros-space-4);
}

@media (min-width: 1200px) {
    .card-grid--loose {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--btros-space-2);
}

.door-card-actions.action-row {
    display: grid;
}

@media (min-width: 992px) {
    .door-card-actions.action-row {
        display: flex;
    }
}

.settings-section + .settings-section {
    margin-top: var(--btros-space-2);
}

.settings-section-label {
    font-size: var(--btros-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--btros-muted);
    margin: 0 0 var(--btros-space-3);
}

.nav-group-label {
    font-size: var(--btros-text-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    padding: var(--btros-space-4) var(--btros-space-3) var(--btros-space-2);
    margin-top: var(--btros-space-2);
}

.nav-group-label:first-child {
    margin-top: 0;
    padding-top: var(--btros-space-2);
}

.section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--btros-space-3);
    margin-bottom: var(--btros-space-4);
}

.section-title {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--btros-ink);
}

.section-description {
    margin-top: var(--btros-space-1);
}

.section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--btros-space-2);
}

.page-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--btros-ink);
}

.content-panel {
    border-radius: var(--btros-radius);
    overflow: hidden;
    margin-bottom: var(--btros-space-6);
    background: var(--btros-elevated);
}

.content-panel__body {
    background: var(--btros-elevated);
}

.content-panel--padded .content-panel__body {
    padding: var(--btros-space-5);
}

.content-panel-toolbar {
    padding: 0;
    border-bottom: 1px solid var(--btros-border);
    background: var(--btros-elevated);
}

/* Combined filters + search header (Users, etc.) */
.list-panel-header {
    display: flex;
    flex-direction: column;
    gap: var(--btros-space-4);
    padding: var(--btros-space-4) var(--btros-space-5);
    width: 100%;
}

.list-panel-header .table-toolbar {
    padding: 0;
    margin: 0;
}

.content-panel--list .list-panel-header .filter-bar {
    display: flex;
    width: 100%;
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.content-panel--list .list-panel-header .filter-bar-item {
    flex: 1 1 0;
    text-align: center;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.75rem;
    margin-bottom: -1px;
}

.content-panel--list .list-panel-header .filter-bar-item.is-active {
    background: transparent;
    box-shadow: none;
    color: var(--btros-primary);
    border-bottom-color: var(--btros-primary);
}

.content-panel--list .list-panel-header .filter-bar-item:hover:not(.is-active) {
    background: var(--btros-surface);
    color: var(--btros-ink);
}

/* List pages: search-only header in panel body */
.content-panel--list .content-panel__body > .table-toolbar {
    padding: var(--btros-space-4) var(--btros-space-5);
    margin: 0;
    border-bottom: 1px solid var(--btros-border);
}

.content-panel--list .table-toolbar-search .form-control {
    background: var(--btros-elevated);
    border-color: var(--btros-border);
    border-radius: var(--btros-radius-sm);
    min-height: var(--btros-chrome-height);
}

.content-panel--list .table-toolbar-meta {
    align-self: center;
}

.content-panel--list .content-panel__body > .empty-state {
    padding: var(--btros-space-8) var(--btros-space-5);
}

.content-panel--list .pager {
    padding: var(--btros-space-3) var(--btros-space-5);
    margin: 0;
    border-top: 1px solid var(--btros-border);
}

.content-panel .table tbody tr:hover {
    background: var(--btros-surface-2);
    background: color-mix(in srgb, var(--btros-primary-soft) 35%, transparent);
}

.table-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--btros-space-1);
}

.table-actions .btn-group {
    gap: var(--btros-space-1);
}

/* Form stack */
.form-stack {
    display: flex;
    flex-direction: column;
    gap: var(--btros-space-4);
}

.form-stack .form-label {
    margin-bottom: var(--btros-space-1);
    font-weight: 500;
    font-size: var(--btros-text-md);
}

.form-field .validation-message {
    margin-top: var(--btros-space-1);
    font-size: var(--btros-text-sm);
}

.form-stack-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--btros-space-2);
    padding-top: var(--btros-space-2);
}

/* Filter bar (segmented) */
.filter-bar {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--btros-space-1);
    padding: var(--btros-space-1);
    background: var(--btros-surface-2);
    border: 1px solid var(--btros-border);
    border-radius: var(--btros-radius);
}

.filter-bar-item {
    border: 0;
    background: transparent;
    color: var(--btros-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: var(--btros-radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.filter-bar-item:hover {
    color: var(--btros-ink);
    background: var(--btros-elevated);
}

.filter-bar-item.is-active {
    background: var(--btros-elevated);
    color: var(--btros-primary);
    box-shadow: var(--btros-shadow-sm);
}

/* App modal */
.app-modal .modal-content {
    border: 1px solid var(--btros-border);
    border-radius: var(--btros-radius);
    box-shadow: var(--btros-shadow-lg);
}

.app-modal .modal-header {
    padding: var(--btros-space-5) var(--btros-space-6) var(--btros-space-3);
    border-bottom: 1px solid var(--btros-border);
}

.app-modal .modal-body {
    padding: var(--btros-space-4) var(--btros-space-6);
}

.app-modal .modal-footer {
    padding: var(--btros-space-3) var(--btros-space-6) var(--btros-space-5);
    border-top: 1px solid var(--btros-border);
    gap: var(--btros-space-2);
}

.app-modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--btros-space-2);
}

.app-modal .modal-dialog-sm { max-width: 24rem; }
.app-modal .modal-dialog-md { max-width: 32rem; }
.app-modal .modal-dialog-lg { max-width: 40rem; }

/* System / auth centered pages */
.system-page {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--btros-space-8) var(--btros-space-4);
}

.system-page-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--btros-ink);
}

.content-panel .table {
    margin-bottom: 0;
}

.content-panel .table thead th {
    background: var(--btros-surface-2);
    border-bottom: 1px solid var(--btros-border-strong);
    font-size: var(--btros-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--btros-muted);
    padding: 0.75rem 1rem;
}

.content-panel .table tbody td {
    padding: 0.875rem 1rem;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
    background: var(--btros-elevated);
    border-bottom: 1px solid var(--btros-border);
}

.content-panel--list .table tbody tr:last-child td {
    border-bottom: none;
}

/* Cells carry an opaque background, so row hover must repaint the cells
   themselves rather than only the <tr> underneath them. */
.content-panel .table tbody tr:hover > td {
    background: color-mix(in srgb, var(--btros-primary-soft) 35%, var(--btros-elevated));
}

.stat-card {
    border: 1px solid var(--btros-border);
    border-radius: var(--btros-radius);
    background: var(--btros-elevated);
    box-shadow: var(--btros-shadow);
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.stat-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--btros-space-5) var(--btros-space-6);
}

.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--btros-space-3);
    margin-bottom: var(--btros-space-2);
}

.stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--btros-text);
    min-width: 0;
}

.stat-card-metric {
    display: flex;
    flex-direction: column;
    gap: var(--btros-space-1);
}

.stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btros-primary-soft);
    color: var(--btros-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stat-value {
    font-size: var(--btros-text-2xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--btros-ink);
    font-variant-numeric: tabular-nums;
}

.stat-hint {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--btros-muted);
}

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--btros-muted);
}

.empty-state-icon {
    font-size: 2.5rem;
    opacity: 0.5;
    margin-bottom: 0.75rem;
}

.modal-backdrop-custom {
    background: rgba(15, 23, 42, 0.45);
}

.user-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: var(--btros-surface-2);
    border-radius: 999px;
    font-size: 0.875rem;
}

.user-pill-role {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--btros-muted);
    font-weight: 600;
}

/* Mobile offcanvas sidebar */
@media (max-width: 991.98px) {
    .dashboard-sidebar.offcanvas {
        width: 16rem;
        background: var(--btros-sidebar);
        color: #f7f9fa;
        /* SPEC-0081: the static `.dashboard-sidebar` sets z-index 1040 (= the offcanvas backdrop),
           so the backdrop painted over the open panel and swallowed every tap (links unclickable,
           the menu just closed). Restore Bootstrap's panel z-index (1045) above the backdrop. */
        z-index: 1045;
    }

    .dashboard-sidebar.offcanvas .offcanvas-header {
        background: var(--btros-sidebar);
        color: #f7f9fa;
    }
}

@media (min-width: 992px) {
    .dashboard-sidebar.offcanvas {
        display: none !important;
    }
}

/* ===========================================================================
   Shared visual refinements (shadcn-style cards, badges, gradient text)
   =========================================================================== */

.text-gradient {
    /* SPEC-0074: on-palette teal ramp (Teal Ink → ARK Teal-600), AA for large headings. */
    background: linear-gradient(135deg, var(--ark-teal-700), var(--ark-teal-600));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Subtle lift on interactive cards, matching legacy hover:-translate-y-0.5 */
.stat-card,
.surface-card {
    border: 1px solid var(--btros-border);
    border-radius: var(--btros-radius);
    background: var(--btros-elevated);
    box-shadow: var(--btros-shadow-sm);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.surface-card.is-interactive:hover,
.stat-card:hover {
    transform: translateY(-1px);
    border-color: var(--btros-border-strong);
    box-shadow: var(--btros-shadow-md);
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--btros-text-xs);
    font-weight: 600;
    color: var(--ark-teal-700); /* SPEC-0074: Teal Ink — AA on light (small uppercase text) */
}

/* Soft status badges (icon chips) reused across dashboard + marketing */
.icon-chip {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.icon-chip-primary { background: var(--btros-primary-soft); color: var(--ark-teal-700); } /* SPEC-0074: Teal Ink icon for AA on the soft teal chip */
.icon-chip-success { background: var(--btros-success-soft); color: var(--btros-success); }
.icon-chip-danger { background: var(--btros-danger-soft); color: var(--btros-danger); }
.icon-chip-warning { background: var(--btros-warning-soft); color: var(--btros-warning); }
.icon-chip-muted { background: var(--btros-surface-2); color: var(--btros-muted); }

.icon-chip--sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.95rem;
    border-radius: var(--btros-radius-sm);
}

/* ===========================================================================
   Door control cards (full-width list, responsive web + mobile)
   =========================================================================== */
.page-stack > .door-card-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.door-card-list > .door-card {
    width: 100%;
    max-width: 100%;
}

.door-card-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--btros-space-3);
    width: 100%;
    max-width: 100%;
}

.door-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "main"
        "actions";
    align-items: center;
    gap: var(--btros-space-4);
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    padding: var(--btros-space-4) var(--btros-space-5);
    background: var(--btros-elevated);
    border: 1px solid var(--btros-border);
    border-radius: var(--btros-radius);
    box-shadow: var(--btros-shadow-sm);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    animation: door-card-in 0.35s ease both;
}

.door-card:hover {
    border-color: var(--btros-border-strong);
    box-shadow: var(--btros-shadow-md);
    transform: translateY(-1px);
}

.door-card-main {
    grid-area: main;
    display: flex;
    align-items: center;
    gap: var(--btros-space-4);
    min-width: 0;
    width: 100%;
}

.door-card-icon {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    font-size: 1.35rem;
    background: var(--btros-surface-2);
    color: var(--btros-muted);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.door-card-icon--normal { background: var(--btros-primary-soft); color: var(--btros-primary); }
.door-card-icon--opened { background: var(--btros-success-soft); color: var(--btros-success); }
.door-card-icon--locked { background: var(--btros-danger-soft); color: var(--btros-danger); }
.door-card-icon--held-open { background: var(--btros-warning-soft); color: var(--btros-warning); }

.door-card-body {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.door-card-name {
    font-size: var(--btros-text-base);
    font-weight: 600;
    color: var(--btros-ink);
    margin: 0;
    line-height: 1.35;
    word-break: break-word;
}

.door-card-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
}

.door-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--btros-muted);
    transition: background-color 0.2s ease;
}

.door-status-dot--normal { background: var(--btros-primary); }
.door-status-dot--opened { background: var(--btros-success); animation: door-dot-pulse 1.6s ease-in-out infinite; }
.door-status-dot--locked { background: var(--btros-danger); }
.door-status-dot--held-open { background: var(--btros-warning); }

.door-status-label {
    font-size: var(--btros-text-xs);
    color: var(--btros-muted);
}

.door-card-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--btros-space-2);
    width: 100%;
    min-width: 0;
}

.door-card-actions .btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .door-card-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .door-card {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "main actions";
        padding: var(--btros-space-5);
    }

    .door-card-actions {
        display: flex;
        flex-wrap: wrap;
        grid-template-columns: unset;
        width: auto;
        justify-content: flex-end;
        gap: var(--btros-space-2);
    }

    .door-card-actions .btn {
        width: auto;
        flex: 0 0 auto;
    }
}

@media (max-width: 575.98px) {
    .door-card {
        padding: var(--btros-space-4);
    }

    .door-card-actions .btn,
    .table-actions .btn {
        min-height: 2.75rem;
    }

    /* 44px touch target for the topbar icon buttons on small viewports (WCAG 2.5.5). */
    .topbar-icon-btn {
        width: 2.75rem;
        height: 2.75rem;
    }
}

@keyframes door-card-in {
    from { opacity: 0; transform: translateY(0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes door-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .door-card { animation: none; }
    .door-status-dot--opened { animation: none; }
    .door-card:hover { transform: none; }
}

/* ===========================================================================
   Standalone surface-card bodies (define the padding Bootstrap only sets on .card)
   =========================================================================== */
.surface-card > .card-body {
    --bs-card-spacer-y: var(--btros-space-5);
    --bs-card-spacer-x: var(--btros-space-5);
    padding: var(--btros-space-5);
}

.surface-card > .card-header {
    padding: var(--btros-space-4) var(--btros-space-5);
}

.surface-card .card-title {
    color: var(--btros-ink);
    font-weight: 600;
}

/* Compact day-of-week chips for schedule cards */
.day-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.day-chip {
    width: 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--btros-surface-2);
    color: var(--btros-muted);
    border: 1px solid var(--btros-border);
}

.day-chip.is-active {
    background: var(--btros-primary);
    color: var(--btros-on-accent);
    border-color: var(--btros-primary);
}

/* Small metadata pills used on access-level / schedule cards */
.meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    background: var(--btros-surface-2);
    color: var(--btros-muted);
    border: 1px solid var(--btros-border);
}

.meta-pill i { font-size: 0.85rem; }

.door-picker-list {
    max-height: 12rem;
    overflow-y: auto;
    border: 1px solid var(--btros-border);
    border-radius: var(--btros-radius-sm);
    padding: var(--btros-space-3);
}

/* ===========================================================================
   Marketing landing page
   =========================================================================== */

.marketing-page {
    background: #fff;
    color: var(--btros-text);
}

/* Offset in-page anchor targets so the sticky nav doesn't cover headings. */
.marketing-page section[id] {
    scroll-margin-top: 5rem;
}

.marketing-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--btros-border);
}

.marketing-nav-bar {
    min-height: 4rem;
}

.marketing-form {
    max-width: 26rem;
}

.marketing-container-narrow {
    max-width: 36rem;
}

.marketing-card-subtitle {
    letter-spacing: 0.08em;
    color: var(--btros-muted);
}

.site-picker-select {
    min-width: 12rem;
    max-width: min(20rem, 40vw);
}

.marketing-container {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: var(--btros-space-6);
}

.marketing-nav-link {
    color: var(--btros-muted);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}

.marketing-nav-link:hover {
    color: var(--btros-text);
}

/* SPEC-0076: the Platform dropdown toggle is a <button> that must read as a nav link. */
button.marketing-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.marketing-platform-menu {
    border-color: var(--btros-border);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

/* SPEC-0077: hero badge icon, mobile nav offcanvas, related-link cards, FAQ. */
.marketing-badge-icon {
    color: var(--ark-teal-700, #0f7a8a);
    font-size: 1rem;
}

.marketing-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: none;
    border: 1px solid var(--btros-border);
    border-radius: 0.5rem;
    color: var(--btros-text);
    font-size: 1.25rem;
    cursor: pointer;
}

.marketing-offcanvas {
    background: #fff;
    color: var(--btros-text);
    max-width: 20rem;
}

.marketing-offcanvas-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--btros-muted);
    margin-bottom: 0.5rem;
}

.marketing-offcanvas-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    color: var(--btros-text);
    font-weight: 500;
    text-decoration: none;
}

.marketing-offcanvas-link:hover {
    color: var(--ark-teal-700, #0f7a8a);
}

.marketing-card-link {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.marketing-card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}

.marketing-faq {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.marketing-faq-item {
    border: 1px solid var(--btros-border);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    background: #fff;
    text-align: left;
}

.marketing-faq-item > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.marketing-faq-item > summary::-webkit-details-marker {
    display: none;
}

.marketing-faq-item > summary::after {
    content: "+";
    color: var(--btros-muted);
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1;
}

.marketing-faq-item[open] > summary::after {
    content: "\2212"; /* minus sign */
}

.marketing-section {
    padding-block: 6rem;
}

.marketing-section-tight {
    padding-block: 4rem;
}

.marketing-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding-block: 7rem 6rem;
}

.marketing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(45% 40% at 50% 60%, rgba(42, 168, 188, 0.06), transparent);
}

/* Faint engineered grid motif (smart-building "infrastructure" cue) */
.marketing-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, #000 25%, transparent 75%);
}

.marketing-hero > * {
    position: relative;
    z-index: 1;
}

.marketing-hero h1 {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    max-width: 48rem;
    margin-inline: auto;
    color: var(--btros-ink);
}

.marketing-lead {
    font-size: 1.25rem;
    color: var(--btros-muted);
    max-width: 40rem;
    margin-inline: auto;
}

.marketing-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--btros-border);
    background: #fff;
    border-radius: 999px;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--btros-muted);
    box-shadow: var(--btros-shadow-sm);
}

.marketing-h2 {
    font-size: clamp(1.875rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--btros-ink);
}

/* Credibility strip (slim bordered band of capability stats under the hero) */
.marketing-strip {
    border-block: 1px solid var(--btros-border);
    background: #fff;
}

.marketing-strip .marketing-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 2rem;
    padding-block: 1.5rem;
}

@media (min-width: 768px) {
    .marketing-strip .marketing-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

.marketing-strip-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.marketing-strip-item > .bi {
    color: var(--btros-primary);
    font-size: 1.125rem;
    line-height: 1.5;
    flex-shrink: 0;
}

.marketing-strip-value {
    font-weight: 700;
    color: var(--btros-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.marketing-muted-band {
    background: linear-gradient(to bottom, rgba(241, 245, 249, 0.6), transparent);
}

.marketing-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--btros-border);
    border-radius: 1rem;
    padding: 1.75rem;
    box-shadow: var(--btros-shadow-sm);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.marketing-card:hover {
    transform: translateY(-1px);
    border-color: var(--btros-border-strong);
    box-shadow: var(--btros-shadow-md);
}

.marketing-step-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.marketing-step-line {
    position: absolute;
    left: 16.67%;
    right: 16.67%;
    top: 1.5rem;
    height: 1px;
    background: var(--btros-border);
}

.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(42, 168, 188, 0.05);
    color: rgba(15, 23, 42, 0.8);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.marketing-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding-block: 7rem;
}

.marketing-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(45% 50% at 50% 50%, rgba(42, 168, 188, 0.05), transparent);
}

.marketing-cta > * {
    position: relative;
    z-index: 1;
}

/* ===========================================================================
   SPEC-0074: dark hero + closing CTA (bookend, ARK360-style) — navy chrome with
   a faint white grid masked to the top-right and a teal glow. Content reverses
   to white + Cyan-Bright accent; the middle of the page stays light.
   =========================================================================== */
.marketing-hero--dark,
.marketing-cta--dark {
    background: var(--ark-navy-800);
    color: #ffffff;
}

/* faint navy grid (white lines, masked to top-right) */
.marketing-hero--dark::after,
.marketing-cta--dark::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(120% 90% at 80% 6%, #000 25%, transparent 75%);
    mask-image: radial-gradient(120% 90% at 80% 6%, #000 25%, transparent 75%);
}

/* teal glow at the top-right */
.marketing-hero--dark::before,
.marketing-cta--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(60% 50% at 75% -10%, rgba(70, 194, 212, 0.14), transparent);
}

/* on-dark content */
.marketing-hero--dark h1,
.marketing-cta--dark h1,
.marketing-cta--dark .marketing-h2 { color: #ffffff; }

.marketing-hero--dark .marketing-lead,
.marketing-cta--dark .marketing-lead { color: #a9bac6; }

.marketing-hero--dark .text-muted,
.marketing-cta--dark .text-muted { color: #9fb0bc !important; }

.marketing-cta--dark a:not(.btn) { color: var(--ark-teal-300); }

/* accent word → Cyan-Bright ramp (reads on navy) */
.marketing-hero--dark .text-gradient,
.marketing-cta--dark .text-gradient {
    background: linear-gradient(135deg, var(--ark-teal-300), var(--ark-teal-400));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* badge on dark: translucent, white text */
.marketing-hero--dark .marketing-badge {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: #e1e7eb;
    box-shadow: none;
}

/* ghost secondary button on dark */
.marketing-hero--dark .btn-outline-secondary,
.marketing-cta--dark .btn-outline-secondary {
    --bs-btn-color: #ffffff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.28);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.5);
}

/* trust pills on dark: translucent fill + light text + cyan check */
.marketing-cta--dark .trust-pill {
    background: rgba(255, 255, 255, 0.06);
    color: #e1e7eb;
}

.marketing-cta--dark .trust-pill .text-primary {
    color: var(--ark-teal-300) !important;
}

.marketing-footer {
    border-top: 1px solid var(--btros-border);
    padding-block: 2rem;
    color: var(--btros-muted);
    font-size: 0.875rem;
}

@media (max-width: 767.98px) {
    .marketing-step-line { display: none; }
    .marketing-section { padding-block: 4rem; }
}

/* ===========================================================================
   Utilities
   =========================================================================== */
.min-w-0 { min-width: 0; }

/* ===========================================================================
   Toasts
   =========================================================================== */
.toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}

.btros-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    background: var(--btros-elevated);
    border: 1px solid var(--btros-border);
    border-left-width: 3px;
    border-radius: var(--btros-radius-sm);
    box-shadow: var(--btros-shadow-lg);
    animation: toast-in 0.22s ease both;
}

.btros-toast-icon { font-size: 1.05rem; line-height: 1.4; flex-shrink: 0; }
.btros-toast-body { flex: 1 1 auto; min-width: 0; }
.btros-toast-title { font-weight: 600; font-size: var(--btros-text-md); color: var(--btros-ink); }
.btros-toast-text { font-size: var(--btros-text-md); color: var(--btros-text); word-break: break-word; }
.btros-toast-close { flex-shrink: 0; font-size: 0.65rem; margin-top: 0.1rem; }

.btros-toast--success { border-left-color: var(--btros-success); }
.btros-toast--success .btros-toast-icon { color: var(--btros-success); }
.btros-toast--error { border-left-color: var(--btros-danger); }
.btros-toast--error .btros-toast-icon { color: var(--btros-danger); }
.btros-toast--warning { border-left-color: var(--btros-warning); }
.btros-toast--warning .btros-toast-icon { color: var(--btros-warning); }
.btros-toast--info { border-left-color: var(--btros-info); }
.btros-toast--info .btros-toast-icon { color: var(--btros-info); }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(0.75rem); }
    to { opacity: 1; transform: translateX(0); }
}

/* ===========================================================================
   Confirmation dialog
   =========================================================================== */
.confirm-modal { z-index: 1075; }

.confirm-dialog-content {
    border: 1px solid var(--btros-border);
    border-radius: var(--btros-radius);
    box-shadow: var(--btros-shadow-lg);
    animation: confirm-in 0.18s ease both;
}

.confirm-icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.4rem;
}

.confirm-icon--danger { background: var(--btros-danger-soft); color: var(--btros-danger); }
.confirm-icon--info { background: var(--btros-info-soft); color: var(--btros-info); }

@keyframes confirm-in {
    from { opacity: 0; transform: translateY(0.5rem) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===========================================================================
   Skeleton loaders
   =========================================================================== */
.skeleton {
    display: inline-block;
    background: linear-gradient(90deg, var(--btros-surface-2) 25%, var(--btros-elevated) 37%, var(--btros-surface-2) 63%);
    background-size: 400% 100%;
    border-radius: var(--btros-radius-sm);
    animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton--rounded { border-radius: 999px; }

@keyframes skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .btros-toast,
    .confirm-dialog-content { animation: none; }
    .skeleton { animation: none; }
}

/* ===========================================================================
   Status badges (residents / users / visitors / devices)
   =========================================================================== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: var(--btros-text-xs);
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
}

.status-badge i { font-size: 0.7rem; }

.status-badge--success { background: var(--btros-success-soft); color: var(--btros-success-text); border-color: var(--btros-success-border); }
.status-badge--warning { background: var(--btros-warning-soft); color: var(--btros-warning-text); border-color: var(--btros-warning-border); }
.status-badge--danger { background: var(--btros-danger-soft); color: var(--btros-danger-text); border-color: var(--btros-danger-border); }
.status-badge--info { background: var(--btros-info-soft); color: var(--btros-info-text); border-color: var(--btros-info-border); }
.status-badge--muted { background: var(--btros-surface-2); color: var(--btros-muted); border-color: var(--btros-border); }

/* Stat-card icon tones */
.stat-icon--primary { background: var(--btros-primary-soft); color: var(--btros-primary); }
.stat-icon--success { background: var(--btros-success-soft); color: var(--btros-success); }
.stat-icon--warning { background: var(--btros-warning-soft); color: var(--btros-warning); }
.stat-icon--danger { background: var(--btros-danger-soft); color: var(--btros-danger); }
.stat-icon--muted { background: var(--btros-surface-2); color: var(--btros-muted); }

/* ===========================================================================
   Topbar controls (icon buttons, search trigger, badges)
   =========================================================================== */
.topbar-icon-btn {
    position: relative;
    width: var(--btros-chrome-height);
    height: var(--btros-chrome-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--btros-radius-sm);
    background: transparent;
    color: var(--btros-text);
    font-size: 1.05rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.topbar-icon-btn:hover {
    background: var(--btros-surface-2);
    border-color: var(--btros-border);
}

.topbar-badge {
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--btros-danger);
    color: var(--btros-on-accent);
    font-size: var(--btros-text-2xs);
    font-weight: 700;
    line-height: 1;
}

.topbar-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: var(--btros-chrome-height);
    max-width: 100%;
    min-width: 0;
    padding: 0 0.6rem;
    border: 1px solid var(--btros-border);
    border-radius: var(--btros-radius-sm);
    background: var(--btros-surface-2);
    color: var(--btros-muted);
    font-size: 0.875rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    flex-shrink: 1;
}

.topbar-search-trigger:hover { border-color: var(--btros-border-strong); }
.topbar-search-text { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 992px) {
    .topbar-search-trigger {
        min-width: 9rem;
        max-width: 11rem;
        justify-content: flex-start;
        padding: 0 0.75rem;
        gap: 0.5rem;
    }

    .topbar-search-text { display: inline; }
}

.topbar-search-kbd {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0.05rem 0.35rem;
    border-radius: 0.3rem;
    background: var(--btros-surface);
    border: 1px solid var(--btros-border);
    color: var(--btros-muted);
    font-size: 0.7rem;
}

/* ===========================================================================
   Command palette
   =========================================================================== */
.palette-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 1090;
}

.palette {
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(34rem, calc(100vw - 2rem));
    background: var(--btros-elevated);
    border: 1px solid var(--btros-border);
    border-radius: var(--btros-radius);
    box-shadow: var(--btros-shadow-lg);
    z-index: 1091;
    overflow: hidden;
    animation: confirm-in 0.16s ease both;
}

.palette-input-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--btros-border);
    color: var(--btros-muted);
}

.palette-input {
    flex: 1 1 auto;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--btros-text);
    font-size: 0.95rem;
}

.palette-results { max-height: 22rem; overflow-y: auto; padding: 0.4rem; }
.palette-empty { padding: 1.25rem; text-align: center; color: var(--btros-muted); font-size: 0.875rem; }
.palette-list { list-style: none; margin: 0; padding: 0; }

.palette-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: var(--btros-radius-sm);
    background: transparent;
    color: var(--btros-text);
    font-size: 0.9rem;
    text-align: left;
}

.palette-item i { color: var(--btros-muted); width: 1.1rem; text-align: center; flex-shrink: 0; }
.palette-item.is-active { background: var(--btros-primary-soft); }
.palette-item.is-active i { color: var(--btros-primary); }
.palette-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item-path { flex-shrink: 0; margin-left: 0.35rem; color: var(--btros-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }

/* ===========================================================================
   User menu + notifications panel
   =========================================================================== */
.user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    height: 2.25rem;
    padding: 0 0.5rem 0 0.35rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.user-menu-trigger:hover { background: var(--btros-surface-2); border-color: var(--btros-border); }

.user-avatar {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--btros-primary);
    color: var(--btros-on-accent);
    font-size: 0.8rem;
    font-weight: 600;
}

.user-avatar--lg { width: 2.5rem; height: 2.5rem; font-size: 0.95rem; }

.user-menu-meta { flex-direction: column; line-height: 1.1; text-align: left; }
.user-menu-name { font-size: 0.85rem; font-weight: 600; color: var(--btros-ink); }
.user-menu-role { font-size: 0.72rem; color: var(--btros-muted); text-transform: capitalize; }
.user-menu-caret { font-size: 0.7rem; color: var(--btros-muted); }

.user-menu-panel { min-width: 15rem; }
.user-menu-header { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 1rem; }

.notifications-panel { min-width: 22rem; max-width: 24rem; }
.notifications-head { padding: 0.75rem 1rem; border-bottom: 1px solid var(--btros-border); }
.notifications-body { max-height: 24rem; overflow-y: auto; }
.notifications-body .empty-state { padding: 1.5rem 1rem; }
.notifications-list { list-style: none; margin: 0; padding: 0; }
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--btros-border);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.notification-item:hover { background: var(--btros-surface-2); }
.notification-item.is-unread { background: var(--btros-primary-soft); }
.notification-item.is-unread:hover { background: var(--btros-primary-soft); }
.notification-item .icon-chip { flex: 0 0 auto; width: 2rem; height: 2rem; }
.notification-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.notification-title { font-weight: 600; font-size: 0.85rem; color: var(--btros-ink); }
.notification-message {
    font-size: 0.8rem;
    color: var(--btros-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.notification-time { font-size: 0.72rem; color: var(--btros-muted); }
.notification-unread-dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.35rem;
    border-radius: 50%;
    background: var(--btros-primary);
}

@media (prefers-reduced-motion: reduce) {
    .palette { animation: none; }
}

/* ===========================================================================
   Dark mode (Bootstrap 5.3 data-bs-theme). Operator portal surfaces flip;
   marketing and auth pre-login surfaces stay light (no toggle is exposed there).
   =========================================================================== */
[data-bs-theme="dark"] {
    --btros-surface: #0f1822; /* ARK Navy 900 */
    --btros-surface-2: #17232f; /* Navy 800 */
    --btros-elevated: #1a2733;
    --btros-border: #21303d; /* Navy 700 */
    --btros-border-strong: #2e4150; /* Navy 600 */
    --btros-ink: #f7f9fa;
    --btros-text: #e1e7eb;
    --btros-muted: #9fb0bc;
    --btros-primary: var(--ark-teal-300); /* SPEC-0074: Cyan Bright is the on-dark teal accent */
    --btros-primary-soft: #14333a;
    --btros-topbar-bg: #0f1822;
    --btros-sidebar: #0f1822;

    /* Status surfaces adapt for dark cards: brighter foregrounds, translucent
       tinted backgrounds, and AA-legible text (SPEC-0035 REQ-005), ARK360-tinted. */
    --btros-success: #34c08a;
    --btros-success-soft: rgba(31, 157, 107, 0.16);
    --btros-success-border: rgba(31, 157, 107, 0.34);
    --btros-success-text: #7fd9b3;
    --btros-warning: #d79a3c;
    --btros-warning-soft: rgba(185, 121, 26, 0.18);
    --btros-warning-border: rgba(185, 121, 26, 0.36);
    --btros-warning-text: #e7c187;
    --btros-danger: #e0675c;
    --btros-danger-soft: rgba(207, 68, 56, 0.18);
    --btros-danger-border: rgba(207, 68, 56, 0.36);
    --btros-danger-text: #f0b0a9;
    --btros-info: #5a93d6;
    --btros-info-soft: rgba(42, 111, 188, 0.18);
    --btros-info-border: rgba(42, 111, 188, 0.36);
    --btros-info-text: #a7c6ec;
    color-scheme: dark;
}

[data-bs-theme="dark"] body {
    background: var(--btros-surface);
    color: var(--btros-text);
}

/* SPEC-0074: links use Cyan Bright on dark (Teal Ink fails AA on the navy surface). */
[data-bs-theme="dark"] a {
    color: var(--ark-teal-300);
}

[data-bs-theme="dark"] a:hover {
    color: var(--ark-teal-400);
}

/* Operator dashboard: Bootstrap cards and panels follow the same elevated surface token. */
[data-bs-theme="dark"] .dashboard-page .card,
[data-bs-theme="dark"] .dashboard-page .content-panel,
[data-bs-theme="dark"] .dashboard-page .surface-card {
    --bs-card-bg: var(--btros-elevated);
    --bs-card-cap-bg: transparent;
    --bs-card-border-color: var(--btros-border);
    --bs-card-color: var(--btros-text);
    background-color: var(--btros-elevated);
    border-color: var(--btros-border);
    color: var(--btros-text);
}

[data-bs-theme="dark"] .dashboard-page .surface-card > .card-header,
[data-bs-theme="dark"] .dashboard-page .surface-card > .card-body {
    background-color: transparent;
    color: var(--btros-text);
}

[data-bs-theme="dark"] .dashboard-page .surface-card > .card-header {
    color: var(--btros-ink);
}

[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .surface-card,
[data-bs-theme="dark"] .door-card,
[data-bs-theme="dark"] .btros-toast,
[data-bs-theme="dark"] .content-panel,
[data-bs-theme="dark"] .confirm-dialog-content {
    background: var(--btros-elevated);
    border-color: var(--btros-border);
}

[data-bs-theme="dark"] .topbar-search-trigger,
[data-bs-theme="dark"] .day-chip,
[data-bs-theme="dark"] .meta-pill,
[data-bs-theme="dark"] .filter-bar,
[data-bs-theme="dark"] .content-panel-toolbar {
    background: var(--btros-surface-2);
}

[data-bs-theme="dark"] .filter-bar-item.is-active {
    background: var(--btros-elevated);
}

[data-bs-theme="dark"] .content-panel--list .list-panel-header .filter-bar-item:hover:not(.is-active) {
    background: var(--btros-surface-2);
}

[data-bs-theme="dark"] .content-panel--list .table-toolbar-search .form-control {
    background: var(--btros-surface-2);
    border-color: var(--btros-border);
    color: var(--btros-text);
}

[data-bs-theme="dark"] .content-panel--list .table-toolbar-search .form-control:focus {
    background: var(--btros-elevated);
}

[data-bs-theme="dark"] .content-panel .table thead th,
[data-bs-theme="dark"] .content-panel--list .table thead th {
    background: var(--btros-surface-2);
}

[data-bs-theme="dark"] .content-panel .table tbody td {
    background: var(--btros-elevated);
}

[data-bs-theme="dark"] .content-panel .table tbody tr:hover {
    background: var(--btros-surface-2);
    background: color-mix(in srgb, var(--btros-primary-soft) 50%, transparent);
}

[data-bs-theme="dark"] .content-panel .table tbody tr:hover > td {
    background: color-mix(in srgb, var(--btros-primary-soft) 50%, var(--btros-elevated));
}

[data-bs-theme="dark"] .app-modal .modal-content {
    background: var(--btros-elevated);
    border-color: var(--btros-border);
}

[data-bs-theme="dark"] .door-card-icon { background: var(--btros-surface-2); }

/* ===========================================================================
   Global animation pass (gated behind prefers-reduced-motion)
   =========================================================================== */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes event-flash {
    0% { background-color: var(--btros-primary-soft); }
    100% { background-color: transparent; }
}

@media (prefers-reduced-motion: no-preference) {
    .dashboard-content { animation: fade-in-up 0.22s ease both; }
    .surface-card,
    .stat-card,
    .content-panel { animation: fade-in-up 0.28s ease both; }
    .btn { transition: transform 0.08s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
    .btn:active { transform: translateY(1px); }
    .dashboard-nav-link { transition: background-color 0.15s ease, color 0.15s ease; }
    .event-row-new { animation: event-flash 1.6s ease both; }
}

/* Table toolbar (search) + pager (SPEC-0031) */
.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0 0 0.875rem;
    margin-bottom: 0.25rem;
}

.table-toolbar-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 16rem;
    max-width: 28rem;
}

.table-toolbar-search > .bi-search {
    position: absolute;
    left: 0.75rem;
    color: var(--btros-muted);
    pointer-events: none;
    font-size: 0.9rem;
}

.table-toolbar-search .form-control {
    padding-left: 2.25rem;
    padding-right: 2rem;
}

.table-toolbar-clear {
    position: absolute;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    background: transparent;
    border-radius: 50%;
    color: var(--btros-muted);
    font-size: 0.75rem;
    cursor: pointer;
}

.table-toolbar-clear:hover {
    background: var(--btros-surface-2);
    color: var(--btros-ink);
}

.table-toolbar-meta {
    color: var(--btros-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.875rem 0.25rem 0;
    margin-top: 0.25rem;
    border-top: 1px solid var(--btros-border);
}

.pager-status {
    color: var(--btros-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

/* Live connection-status pill (SPEC-0032) */
.live-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--btros-border);
    background: var(--btros-surface-2);
    color: var(--btros-muted);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.live-status .live-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--btros-muted);
    flex: 0 0 auto;
}

.live-status .bi { font-size: 0.8rem; }

.live-status-live {
    color: var(--btros-success-text);
    border-color: var(--btros-success-border);
    background: var(--btros-success-soft);
}

.live-status-live .live-dot { background: var(--btros-success); }

.live-status-pending {
    color: var(--btros-warning-text);
    border-color: var(--btros-warning-border);
    background: var(--btros-warning-soft);
}

.live-status-pending .live-dot { background: var(--btros-warning); }

.live-status-offline {
    color: var(--btros-muted);
}

@media (prefers-reduced-motion: no-preference) {
    .live-status-live .live-dot { animation: live-pulse 2s ease-in-out infinite; }
    .live-status-pending .bi-arrow-repeat { animation: spin 1s linear infinite; }
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

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

/* Keep marketing and auth shells in light presentation regardless of stored theme. */
[data-bs-theme="dark"] .marketing-page,
[data-bs-theme="dark"] .auth-shell {
    --btros-surface: #f7f9fa;
    --btros-surface-2: #eef2f4;
    --btros-border: #e1e7eb;
    --btros-border-strong: #cdd6db;
    --btros-ink: #0f1822;
    --btros-text: #2e3b45;
    --btros-muted: #5c6a73;
    --btros-primary-soft: #e6f6f8;
    color: var(--btros-text);
}