/* ============================================================
   RESVIA DASHBOARD — DESIGN SYSTEM
   S-08 UI Redesign — April 2026
   ============================================================ */

/* ── FONT ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--ui-bg);
    color: var(--ui-text-1);
    line-height: 1.5;
}

/* ── DESIGN TOKENS — LIGHT MODE ── */
:root,
[data-theme="light"] {
    --ui-bg: #f8fafc;
    --ui-surface: #ffffff;
    --ui-surface-2: #f1f5f9;
    --ui-surface-3: #e8edf2;

    --ui-text-1: #0f172a;
    --ui-text-2: #475569;
    --ui-text-3: #94a3b8;

    --ui-border: #e2e8f0;
    --ui-border-strong: #cbd5e1;

    --ui-primary: #111827;
    --ui-primary-soft: #1f2937;
    --ui-accent: #e11d48;
    --ui-accent-soft: #fff1f2;
    --ui-accent-hover: #be123c;

    --ui-success: #16a34a;
    --ui-success-bg: #f0fdf4;
    --ui-warning: #d97706;
    --ui-warning-bg: #fffbeb;
    --ui-danger: #dc2626;
    --ui-danger-bg: #fef2f2;
    --ui-info: #0369a1;
    --ui-info-bg: #eff6ff;

    --ui-radius-sm: 8px;
    --ui-radius-md: 10px;
    --ui-radius-lg: 14px;
    --ui-radius-xl: 18px;

    --ui-shadow-sm: 0 1px 2px rgba(15,23,42,0.05), 0 1px 6px rgba(15,23,42,0.04);
    --ui-shadow-md: 0 4px 16px rgba(15,23,42,0.08);

    --sidebar-bg: #0f172a;
    --sidebar-text: rgba(255,255,255,0.75);
    --sidebar-text-active: #ffffff;
    --sidebar-active-bg: rgba(255,255,255,0.12);
    --sidebar-hover-bg: rgba(255,255,255,0.07);
    --sidebar-border: rgba(255,255,255,0.08);
    --sidebar-width: 220px;
}

/* ── DESIGN TOKENS — DARK MODE ── */
[data-theme="dark"] {
    --ui-bg: #0f172a;
    --ui-surface: #1e293b;
    --ui-surface-2: #283548;
    --ui-surface-3: #334155;

    --ui-text-1: #f1f5f9;
    --ui-text-2: #94a3b8;
    --ui-text-3: #64748b;

    --ui-border: #2d3f55;
    --ui-border-strong: #3d5068;

    --ui-primary: #e2e8f0;
    --ui-primary-soft: #cbd5e1;
    --ui-accent: #f43f5e;
    --ui-success-border: #166534;
    --ui-warning-border: #92400e;
    --ui-danger-border: #991b1b;
    --ui-info-border: #1e40af;
    --ui-accent-soft: #2d1b22;
    --ui-accent-hover: #e11d48;

    --ui-success: #4ade80;
    --ui-success-bg: #052e16;
    --ui-warning: #fbbf24;
    --ui-warning-bg: #1c1000;
    --ui-danger: #f87171;
    --ui-danger-bg: #1f0606;
    --ui-info: #60a5fa;
    --ui-info-bg: #0c1a2e;

    --ui-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --ui-shadow-md: 0 4px 16px rgba(0,0,0,0.4);

    --sidebar-bg: #080f1a;
    --sidebar-text: rgba(255,255,255,0.6);
    --sidebar-text-active: #ffffff;
    --sidebar-active-bg: rgba(255,255,255,0.1);
    --sidebar-hover-bg: rgba(255,255,255,0.05);
    --sidebar-border: rgba(255,255,255,0.06);
    --sidebar-width: 220px;
}

/* ── APP SHELL — SIDEBAR LAYOUT ── */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
    width: 100%;
}

.app-sidebar {
    grid-column: 1;
}

.app-main {
    grid-column: 2;
}

.mobile-tabs {
    grid-column: 1 / -1;
}

/* ── SIDEBAR ── */
.app-sidebar {
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--sidebar-border);
    z-index: 50;
}

.sidebar-brand {
    padding: 0 12px;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
}

.sidebar-brand-name {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.sidebar-logo {
    max-height: 44px;
    max-width: 188px;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: var(--ui-radius-md);
    text-decoration: none;
    color: var(--sidebar-text);
    font-size: 13.5px;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
    min-height: 40px;
}

.sidebar-link-logout {
    color: rgba(239,68,68,0.75);
    margin-top: 4px;
}

.sidebar-link-logout:hover {
    background: rgba(239,68,68,0.12) !important;
    color: #f87171 !important;
}

.sidebar-link svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.sidebar-link:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text-active);
}

.sidebar-link:hover svg {
    opacity: 1;
}

.sidebar-link.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-text-active);
    font-weight: 600;
}

.sidebar-link.active svg {
    opacity: 1;
}

.sidebar-divider {
    height: 1px;
    background: var(--sidebar-border);
    margin: 8px 4px;
}

.sidebar-footer {
    padding: 10px;
    border-top: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.sidebar-util {
    display: block;
    padding: 7px 12px;
    border-radius: var(--ui-radius-sm);
    text-decoration: none;
    color: var(--sidebar-text);
    font-size: 12.5px;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
}

.sidebar-util:hover,
.sidebar-util.active {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text-active);
}

.sidebar-logout {
    color: rgba(239,68,68,0.75);
}

.sidebar-logout:hover {
    background: rgba(239,68,68,0.12);
    color: #f87171;
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--ui-radius-md);
    border: none;
    background: transparent;
    color: var(--sidebar-text);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
    min-height: 40px;
    text-align: left;
}

.theme-toggle:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text-active);
}

.theme-toggle svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.theme-toggle:hover svg {
    opacity: 1;
}

.theme-toggle-label {
    font-size: 13.5px;
}

[data-theme="light"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }

/* ── MAIN CONTENT ── */
.app-main {
    min-width: 0;
    min-height: 100vh;
    background: var(--ui-bg);
    padding: 0;
}

.app-main > .platform-main,
.app-main > .page-header:first-child {
    padding: 28px 32px;
}

/* ── IMPERSONATE BAR ── */
.impersonate-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: #1e3a5f;
    color: #fff;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    gap: 16px;
}

.impersonate-stop {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 4px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

/* ── TRIAL BANNER ── */
.trial-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-radius: var(--ui-radius-md);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
}

.trial-banner--info {
    background: var(--ui-info-bg);
    color: var(--ui-info);
    border: 1px solid rgba(3,105,161,0.15);
}

.trial-banner--warning {
    background: var(--ui-warning-bg);
    color: var(--ui-warning);
    border: 1px solid rgba(217,119,6,0.2);
}

.trial-banner--expired {
    background: var(--ui-danger-bg);
    color: var(--ui-danger);
    border: 1px solid rgba(220,38,38,0.2);
}

.trial-banner__cta {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    text-decoration: none;
    background: currentColor;
    color: #fff !important;
    opacity: 0.9;
    transition: opacity 0.12s;
}

.trial-banner__cta:hover { opacity: 1; }

/* ── MESSAGES ── */
.app-messages {
    margin-bottom: 20px;
}

/* ── MOBILE BOTTOM TAB BAR ── */
.mobile-tabs {
    display: none;
}

/* ── RESPONSIVE — TABLET (iPad service mode) ── */
@media (max-width: 1024px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }

    .app-sidebar {
        display: none;
    }

    .app-main {
        padding: 20px 16px 80px;
    }

    .mobile-tabs {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: var(--ui-surface);
        border-top: 1px solid var(--ui-border);
        padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    }

    .mobile-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 6px 4px;
        text-decoration: none;
        color: var(--ui-text-3);
        font-size: 10px;
        font-weight: 500;
        transition: color 0.12s;
        min-height: 44px;
        justify-content: center;
    }

    .mobile-tab.active {
        color: var(--ui-accent);
    }

    .mobile-tab svg {
        flex-shrink: 0;
    }
}

/* ── RESPONSIVE — MOBILE ── */
@media (max-width: 640px) {
    .app-main {
        padding: 16px 12px 80px;
    }
}

/* ============================================================
   END S-08 DESIGN SYSTEM
   ============================================================ */

.platform-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    background: var(--ui-bg, #f6f8fb);
}

.platform-sidebar {
    background: #111827;
    color: #fff;
    padding: 24px 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.platform-brand {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.platform-brand-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.platform-brand-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.platform-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.platform-nav-label {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 10px 14px 4px;
    margin-top: 8px;
}

.platform-nav-link {
    display: block;
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
}

.platform-nav-link:hover,
.platform-nav-link.active {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.platform-main {
    padding: 28px 32px;
    min-width: 0;
    width: 100%;
}

.platform-messages {
    margin-bottom: 20px;
}

.alert {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 10px;
    font-size: 14px;
}

.alert-success { background: var(--ui-success-bg); color: var(--ui-success); border: 1px solid rgba(22,163,74,0.2); }
.alert-error,
.alert-danger  { background: var(--ui-danger-bg); color: var(--ui-danger); border: 1px solid rgba(220,38,38,0.2); }
.alert-warning { background: var(--ui-warning-bg); color: var(--ui-warning); border: 1px solid rgba(217,119,6,0.2); }
.alert-info    { background: var(--ui-info-bg); color: var(--ui-info); border: 1px solid rgba(3,105,161,0.15); }

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

.page-header h1 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    color: var(--ui-text-1);
    line-height: 1.15;
}

.page-header-actions {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
}

.text-muted {
    color: var(--ui-text-2);
    font-size: 14px;
    margin: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.stats-grid.stats-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stats-grid.stats-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .stats-grid.stats-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stats-grid.stats-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .stats-grid.stats-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-grid.stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stat-card {
    background: var(--ui-surface);
    border-radius: var(--ui-radius-lg);
    padding: 20px;
    box-shadow: var(--ui-shadow-sm);
    border: 1px solid var(--ui-border);
    border-left: 4px solid transparent;
}

.stat-card.success { border-left-color: #10b981; }
.stat-card.warning { border-left-color: #f59e0b; }
.stat-card.danger  { border-left-color: #ef4444; }

.stat-label {
    font-size: 11px;
    color: var(--ui-text-3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--ui-text-1);
    line-height: 1;
}

.stat-sub {
    font-size: 12px;
    color: var(--ui-text-3);
    margin-top: 5px;
}

.content-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

.content-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel {
    background: var(--ui-surface);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
    border: 1px solid var(--ui-border);
    margin-bottom: 20px;
    overflow: hidden;
}

.panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text-1);
    letter-spacing: -0.01em;
}

.panel-body {
    padding: 14px 16px;
    color: var(--ui-text-1);
}

.platform-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.platform-table th,
.platform-table td {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid var(--ui-border);
    vertical-align: middle;
    color: var(--ui-text-1);
}

.platform-table tr:last-child td {
    border-bottom: none;
}

.platform-table th {
    font-size: 11px;
    color: var(--ui-text-3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--ui-surface-2);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.badge-success { background: var(--ui-success-bg); color: var(--ui-success); }
.badge-danger  { background: var(--ui-danger-bg);  color: var(--ui-danger); }
.badge-warning { background: var(--ui-warning-bg); color: var(--ui-warning); }
.badge-info    { background: var(--ui-info-bg);    color: var(--ui-info); }
.badge-muted   { background: var(--ui-surface-2);  color: var(--ui-text-2); }

.filters-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto auto;
    gap: 12px;
    align-items: end;
}

.form-control {
    width: 100%;
    height: 42px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    padding: 0 12px;
    background: var(--ui-surface);
    font-size: 14px;
    color: var(--ui-text-1);
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.12s;
}

.form-control:focus {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px rgba(225,29,72,0.08);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.btn-sm {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

.btn-primary   { background: var(--ui-accent); color: #fff; }
.btn-secondary { background: var(--ui-surface-2); color: var(--ui-text-1); border: 1px solid var(--ui-border); }
.btn-danger    { background: var(--ui-danger); color: #fff; }

.btn-primary:hover  { background: var(--ui-accent-hover); }
.btn-secondary:hover { background: var(--ui-surface-3); }

.progress {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 6px;
}

.progress-bar {
    height: 100%;
    background: #111827;
    border-radius: 999px;
}

.key-value-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px 16px;
    color: var(--ui-text-1);
    font-size: 14px;
}

.readiness-list {
    display: grid;
    gap: 8px;
}

.readiness-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f9fafb;
    border-radius: 10px;
    font-size: 14px;
}

.empty-state {
    color: var(--ui-text-3);
    font-size: 14px;
    margin: 0;
    padding: 32px 0;
    text-align: center;
}

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

@media (max-width: 1200px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-grid.two-col { grid-template-columns: 1fr; }
    .filters-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .platform-shell { grid-template-columns: 1fr; }
    .platform-sidebar { position: static; height: auto; }
    .platform-main { padding: 20px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .filters-row { grid-template-columns: 1fr; }
}

.page-header-actions-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.btn-dark {
    background: #111827;
    color: #fff;
    border: none;
}

.btn-dark:hover {
    background: #1f2937;
    color: #fff;
}

.admin-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.admin-shortcut-card {
    display: block;
    text-decoration: none;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    color: #111827;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-shortcut-card:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.admin-shortcut-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}

.admin-shortcut-card span {
    display: block;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.4;
}

@media (max-width: 1200px) {
    .admin-shortcuts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .admin-shortcuts-grid {
        grid-template-columns: 1fr;
    }
}

.filters-row-subscriptions {
    grid-template-columns: 2fr 1fr 1fr auto auto;
}

.subscription-meta-row td {
    background: #f9fafb;
    padding-top: 0;
    border-bottom: 1px solid #e5e7eb;
}

.subscription-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 13px;
    color: #4b5563;
    padding: 8px 0 2px;
}

@media (max-width: 1200px) {
    .filters-row-subscriptions {
        grid-template-columns: 1fr 1fr;
    }
}

.filters-row-integrations {
    grid-template-columns: 2fr 1fr 1fr auto auto;
}

@media (max-width: 1200px) {
    .filters-row-integrations {
        grid-template-columns: 1fr 1fr;
    }
}

.filters-row-webhooks {
    grid-template-columns: 2fr 1fr 1fr auto auto;
}

@media (max-width: 1200px) {
    .filters-row-webhooks {
        grid-template-columns: 1fr 1fr;
    }
}

.filters-row-launch-readiness {
    grid-template-columns: 2fr 1fr 1fr auto auto;
}

.readiness-cell {
    min-width: 180px;
}

.readiness-percent-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.missing-items-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 1200px) {
    .filters-row-launch-readiness {
        grid-template-columns: 1fr 1fr;
    }
}

.filters-row-issues {
    grid-template-columns: 2fr 2fr 1fr auto auto;
}

@media (max-width: 1200px) {
    .filters-row-issues {
        grid-template-columns: 1fr 1fr;
    }
}

.filters-row-activity {
    grid-template-columns: 2fr 1fr auto auto;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.activity-item {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    background: #ffffff;
}

.activity-main {
    font-size: 14px;
    margin-bottom: 4px;
}

.activity-meta {
    font-size: 13px;
    color: #6b7280;
}

.activity-time {
    font-size: 12px;
    margin-top: 6px;
}

@media (max-width: 1200px) {
    .filters-row-activity {
        grid-template-columns: 1fr 1fr;
    }
}

.onboarding-step-row {
    gap: 18px;
}

.onboarding-step-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.booking-url-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    font-size: 14px;
    color: #111827;
    word-break: break-all;
}

.code-box {
    background: #111827;
    color: #f9fafb;
    border-radius: 12px;
    padding: 16px;
    font-size: 13px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.slug-warning-box {
    margin-top: 16px;
    background: rgba(251, 146, 60, 0.08);
    border: 1px solid rgba(251, 146, 60, 0.25);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--ui-text-1);
    line-height: 1.5;
}
.slug-warning-box strong {
    color: #c2410c;
}

.filters-row-bookings {
    grid-template-columns: 2fr 1fr auto auto;
}

.empty-state-block {
    padding: 22px;
    text-align: center;
}

.empty-state-block h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

@media (max-width: 1200px) {
    .filters-row-bookings {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Booking detail / edit components ── */

.booking-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.booking-summary-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
}

.booking-summary-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-top: 4px;
}

.info-block {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
}

.stack-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stack-list-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ui-border);
}

.stack-list-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.stack-list-label {
    color: var(--ui-text-2);
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
}

.stack-cards {
    display: grid;
    gap: 12px;
}

.stack-card {
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    padding: 14px;
    color: var(--ui-text-1);
}

.stack-card-title {
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.action-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.section-subtitle {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ui-text-1);
}

.timeline {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.timeline-item {
    border-left: 3px solid var(--ui-border-strong);
    padding-left: 14px;
}

.timeline-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text-1);
    margin-bottom: 4px;
}

.timeline-meta {
    font-size: 12px;
    color: var(--ui-text-3);
    margin-top: 6px;
}

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

.form-field {
    min-width: 0;
}

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

.form-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text-1);
    margin-bottom: 8px;
}

.form-control-textarea {
    min-height: 110px;
    padding: 12px;
    resize: vertical;
}

.field-error {
    color: var(--ui-danger);
    font-size: 13px;
    margin-top: 6px;
}

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

.checkbox-card {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
    cursor: pointer;
}

.checkbox-card input {
    width: auto;
    margin: 0;
}

@media (max-width: 960px) {
    .booking-summary-grid,
    .form-grid,
    .checkbox-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Subnav + Settings polish ── */

.subnav-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 12px 16px;
    margin-bottom: 20px;
}

.subnav-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-3);
    margin-bottom: 10px;
}

.subnav-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.subnav-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface-2);
    color: var(--ui-text-2);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.subnav-link:hover {
    border-color: var(--ui-border-strong);
    background: var(--ui-surface-3);
    color: var(--ui-text-1);
}

.subnav-link.active {
    background: var(--ui-text-1);
    color: var(--ui-surface);
    border-color: var(--ui-text-1);
    font-weight: 600;
}

.section-intro {
    margin: 0 0 18px;
    color: #6b7280;
    max-width: 820px;
}

.settings-link-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 16px;
    transition: border-color 0.15s, background 0.15s;
}

.settings-link-card:hover {
    border-color: var(--ui-border-strong);
    background: var(--ui-surface-2);
}

.settings-link-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text-1);
    margin-bottom: 4px;
}

.next-step-card {
    margin-top: 22px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
}

.next-step-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 6px;
}

.next-step-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

/* ── Table board ── */

.table-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.table-card {
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-top: 6px solid #d1d5db;
}

.table-card-free {
    border-top-color: #22c55e;
}

.table-card-reserved {
    border-top-color: #f59e0b;
}

.table-card-occupied {
    border-top-color: #ef4444;
}

.table-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.table-card-name {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

.table-booking-block {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.table-booking-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 4px;
}

.table-booking-name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

/* ── Top navigation bar — legacy styles removed in S-08 (sidebar layout) ── */

/* ── Booking book + service board ── */

.booking-toolbar .toolbar-grid {
    display: grid;
    grid-template-columns: 180px 220px minmax(220px, 1fr) auto;
    gap: 16px;
    align-items: end;
}

.form-field-search {
    min-width: 0;
}

.toolbar-actions .action-row {
    justify-content: flex-start;
}

.booking-book-list {
    display: grid;
    gap: 12px;
}

.booking-row-card {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.booking-row-main {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.booking-row-time {
    min-width: 52px;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.booking-row-name {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.booking-row-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.booking-book-table-wrap {
    overflow-x: auto;
}

.booking-flag-stack {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mini-flag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
}

.service-table-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: 5px solid #d1d5db;
    border-radius: 16px;
    padding: 16px;
}

.service-table-card.state-free {
    border-top-color: #10b981;
}

.service-table-card.state-reserved {
    border-top-color: #f59e0b;
}

.service-table-card.state-occupied {
    border-top-color: #3b82f6;
}

.service-table-card.due-soon {
    box-shadow: 0 0 0 2px #f59e0b;
    border-color: #f59e0b;
}

.service-table-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.service-block {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    margin-top: 12px;
}

.service-block-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 6px;
}

.service-block-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.state-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.state-pill-free     { background: var(--ui-success-bg); color: var(--ui-success); }
.state-pill-reserved { background: var(--ui-warning-bg); color: var(--ui-warning); }
.state-pill-occupied { background: var(--ui-info-bg);    color: var(--ui-info); }

@media (max-width: 960px) {
    .booking-toolbar .toolbar-grid {
        grid-template-columns: 1fr;
    }

    .booking-row-card {
        flex-direction: column;
    }

    .booking-row-meta {
        justify-content: flex-start;
    }
}

/* ── Slot chips (manual booking) ── */
.slot-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.slot-chip {
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text-1);
    border-radius: 999px;
    min-height: 38px;
    padding: 0 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    font-size: 14px;
    font-family: inherit;
}

.slot-chip:hover {
    background: var(--ui-surface-2);
    border-color: var(--ui-border-strong);
    color: var(--ui-text-1);
}

.slot-chip.active {
    background: var(--ui-accent);
    color: #fff;
    border-color: var(--ui-accent);
}

.slot-meta {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-2);
    color: var(--ui-text-1);
}

.slot-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--ui-border);
    font-size: 14px;
    color: var(--ui-text-1);
}

.slot-meta-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* ── Walk-in action row ── */
.walk-in-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* ── Table board operational states ── */
.service-table-card.state-dirty        { border-top-color: var(--ui-warning); }
.service-table-card.state-blocked      { border-top-color: var(--ui-danger); }
.service-table-card.state-out_of_service { border-top-color: var(--ui-text-3); opacity: 0.9; }

.state-pill.state-pill-dirty        { background: var(--ui-warning-bg); color: var(--ui-warning); }
.state-pill.state-pill-blocked      { background: var(--ui-danger-bg);  color: var(--ui-danger); }
.state-pill.state-pill-out_of_service { background: var(--ui-surface-2); color: var(--ui-text-2); }

.table-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--ui-border);
}

.table-state-note {
    margin-top: 10px;
    font-size: 13px;
    color: var(--ui-text-3);
    font-style: italic;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.pricing-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 24px 20px;
    background: var(--ui-surface);
    text-align: center;
    transition: border-color 0.15s;
}

.pricing-card:hover {
    border-color: var(--ui-accent);
}

.pricing-card h3 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ui-text-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pricing-price {
    font-size: 32px;
    font-weight: 700;
    color: var(--ui-text-1);
    margin-bottom: 4px;
}


.inline-action-form {
    display: inline-flex;
    margin: 0;
}

.inline-action-form button {
    margin: 0;
}

.action-row .inline-action-form,
.booking-row-meta .inline-action-form,
.table-state-actions .inline-action-form {
    display: inline-flex;
}

/* ============================================================
   DESIGN SYSTEM — CSS VARIABLES (superseded by S-08 tokens above)
   ============================================================ */

/* ============================================================
   TOP NAV — REDESIGNED
   ============================================================ */
.app-topnav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-sm);
}

.app-topnav-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 12px 20px;
}

.app-brand {
    font-size: 15px;
    font-weight: 800;
    color: var(--ui-text-1);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.app-nav,
.app-nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.app-nav {
    justify-content: center;
}

.app-nav-right {
    justify-content: flex-end;
    gap: 4px;
}

.app-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--ui-text-2);
    font-weight: 600;
    font-size: 14px;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
}

.app-nav-link:hover {
    background: var(--ui-surface-2);
    color: var(--ui-text-1);
}

.app-nav-link.active {
    background: var(--ui-primary);
    color: #fff;
}

.app-nav-link.utility {
    font-size: 13px;
    font-weight: 500;
    color: var(--ui-text-3);
    min-height: 32px;
    padding: 0 10px;
}

.app-nav-link.utility:hover {
    color: var(--ui-text-2);
    background: var(--ui-surface-2);
}

.app-nav-link.utility.active {
    background: var(--ui-surface-2);
    color: var(--ui-text-1);
}

.app-nav-link.logout {
    background: var(--ui-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    min-height: 32px;
    padding: 0 12px;
}

.app-nav-link.logout:hover {
    background: #be123c;
    color: #fff;
}

/* ============================================================
   SERVICE STRIP (dashboard + service mode)
   ============================================================ */
.service-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.service-strip-item {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 12px 16px;
    box-shadow: var(--ui-shadow-sm);
}

.service-strip-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--ui-text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.service-strip-item strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--ui-text-1);
    line-height: 1.1;
}

/* ============================================================
   DASHBOARD OPS GRID
   ============================================================ */
.dashboard-ops-grid {
    grid-template-columns: 1fr 1.6fr;
}

/* ============================================================
   URGENCY CARDS (action needed)
   ============================================================ */
.urgency-card {
    border-left: 4px solid transparent;
    border-radius: var(--ui-radius-sm);
    padding: 12px 14px;
    background: var(--ui-surface);
    margin-bottom: 10px;
}

.urgency-card:last-child {
    margin-bottom: 0;
}

.urgency-card.urgency-warning {
    border-left-color: var(--ui-warning);
    background: var(--ui-warning-bg);
}

.urgency-card.urgency-info {
    border-left-color: var(--ui-info);
    background: var(--ui-info-bg);
}

.stack-card-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--ui-text-1);
    margin-bottom: 3px;
}

/* ============================================================
   TODAY TIMELINE (dashboard)
   ============================================================ */
.timeline-bookings .booking-timeline-item {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--ui-border);
}

.timeline-bookings .booking-timeline-item:last-child {
    border-bottom: none;
}

.timeline-time {
    font-weight: 800;
    color: var(--ui-text-1);
    font-size: 13px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.timeline-body {
    min-width: 0;
}

.timeline-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--ui-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-sub {
    font-size: 12px;
    color: var(--ui-text-3);
    margin-top: 1px;
}

.timeline-party-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    font-size: 12px;
    font-weight: 700;
    color: var(--ui-text-2);
}

.timeline-meta {
    padding-top: 2px;
}

/* ============================================================
   SYSTEM STATUS LIST
   ============================================================ */
.stack-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.stack-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--ui-border);
    font-size: 14px;
}

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

.stack-list-label {
    color: var(--ui-text-2);
}

.status-text-success {
    color: var(--ui-success);
    font-weight: 700;
}

.status-text-warning {
    color: var(--ui-warning);
    font-weight: 700;
}

/* ============================================================
   SERVICE MODE — URGENCY
   ============================================================ */
.booking-row-card.urgency-overrun {
    border-left: 4px solid var(--ui-danger);
    background: #fff5f5;
}

.booking-row-card.urgency-due-now {
    border-left: 4px solid var(--ui-warning);
    background: #fffbeb;
}

.overrun-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--ui-danger);
    background: #fee2e2;
    border-radius: 4px;
    padding: 2px 7px;
    margin-left: 8px;
}

.due-now-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--ui-warning);
    background: #fef3c7;
    border-radius: 4px;
    padding: 2px 7px;
    margin-left: 8px;
}

/* ============================================================
   BOOKINGS LIST — PREMIUM TABLE
   ============================================================ */
.platform-table tbody tr:hover {
    background: #f8fafc;
}

.platform-table td,
.platform-table th {
    vertical-align: top;
}

.booking-book-table-wrap .platform-table td {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Date quick-chips */
.date-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.date-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text-2);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    text-decoration: none;
    transition: 0.12s ease;
    white-space: nowrap;
}

.date-chip:hover {
    background: var(--ui-surface-2);
    color: var(--ui-text-1);
    border-color: var(--ui-border-strong);
}

.date-chip.active {
    background: var(--ui-primary);
    color: #fff;
    border-color: var(--ui-primary);
}

/* Table board urgency chip */
.urgency-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    background: #fef3c7;
    color: var(--ui-warning);
    margin-top: 6px;
}

.urgency-chip.overrun {
    background: #fee2e2;
    color: var(--ui-danger);
}

/* ============================================================
   GO LIVE — SETUP STATUS BAR
   ============================================================ */
/* ── Setup Progress Bar ── */
.setup-bar {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    padding: 22px 26px;
    margin-bottom: 24px;
}

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

.setup-bar-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ui-text-3);
    margin: 0 0 4px;
}

.setup-bar-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--ui-text-1);
    margin: 0;
}

.setup-bar-title.all-done {
    color: var(--ui-success);
}

.setup-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--ui-radius-sm);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.setup-status-badge.pending {
    background: var(--ui-warning-bg);
    border: 1px solid rgba(217,119,6,0.25);
    color: var(--ui-warning);
}

.setup-status-badge.live {
    background: var(--ui-success-bg);
    border: 1px solid rgba(22,163,74,0.25);
    color: var(--ui-success);
}

.setup-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}

.setup-progress-track {
    height: 4px;
    background: var(--ui-border);
    border-radius: 999px;
    margin: 18px 0 20px;
    overflow: hidden;
}

.setup-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--ui-accent);
    transition: width 0.4s ease;
}

.setup-progress-fill.complete {
    background: var(--ui-success);
}

.setup-items {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.setup-pill {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    border-radius: var(--ui-radius-sm);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.setup-pill-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.setup-pill-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.setup-pill-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.setup-pill-name {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 2px;
    line-height: 1.3;
}

.setup-pill-sub {
    font-size: 11px;
    margin: 0;
    line-height: 1.3;
}

/* Done */
.setup-pill.complete {
    background: var(--ui-success-bg);
    border-color: rgba(22,163,74,0.2);
    cursor: default;
}
.setup-pill.complete .setup-pill-icon { background: var(--ui-success); }
.setup-pill.complete .setup-pill-badge { color: var(--ui-success); }
.setup-pill.complete .setup-pill-name { color: var(--ui-success); }
.setup-pill.complete .setup-pill-sub { color: var(--ui-success); opacity: 0.65; }

/* Required incomplete */
.setup-pill.required {
    background: var(--ui-surface-2);
    border-color: var(--ui-border);
}
.setup-pill.required .setup-pill-icon {
    border: 1.5px solid var(--ui-border-strong);
    background: transparent;
}
.setup-pill.required .setup-pill-badge { color: var(--ui-text-3); }
.setup-pill.required .setup-pill-name { color: var(--ui-text-1); }
.setup-pill.required .setup-pill-sub { color: var(--ui-text-3); }
.setup-pill.required:hover {
    background: var(--ui-warning-bg);
    border-color: rgba(217,119,6,0.3);
}
.setup-pill.required:hover .setup-pill-name { color: var(--ui-warning); }
.setup-pill.required:hover .setup-pill-sub { color: var(--ui-warning); opacity: 0.8; }
.setup-pill.required:hover .setup-pill-badge { color: var(--ui-warning); }

/* Optional incomplete */
.setup-pill.optional {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    opacity: 0.6;
}
.setup-pill.optional .setup-pill-icon {
    border: 1.5px dashed var(--ui-border-strong);
    background: transparent;
}
.setup-pill.optional .setup-pill-badge { color: var(--ui-text-3); }
.setup-pill.optional .setup-pill-name { color: var(--ui-text-2); }
.setup-pill.optional .setup-pill-sub { color: var(--ui-text-3); }
.setup-pill.optional:hover { opacity: 1; }

/* Completion banner */
.setup-complete-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ui-success-bg);
    border: 1px solid rgba(22,163,74,0.2);
    border-radius: var(--ui-radius-sm);
    padding: 14px 18px;
    margin-top: 16px;
}

.setup-complete-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ui-success);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.setup-complete-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-success);
    margin: 0 0 2px;
}

.setup-complete-sub {
    font-size: 12px;
    color: var(--ui-success);
    opacity: 0.7;
    margin: 0;
}

.setup-bar-footer {
    font-size: 12px;
    color: var(--ui-text-3);
    margin: 14px 0 0;
    text-align: right;
}

/* GO LIVE — BOOKING URL dark variant */
.code-box.code-box-primary {
    background: #0f172a;
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .01em;
    padding: 18px 20px;
}

/* GO LIVE — ADVANCED TOGGLE */
.advanced-section {
    margin-bottom: 24px;
}

.advanced-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 14px 18px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    text-align: left;
    transition: background .15s;
}

.advanced-toggle:hover {
    background: var(--surface-2);
}

.advanced-arrow {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform .2s ease;
    flex-shrink: 0;
}

.advanced-toggle.open .advanced-arrow {
    transform: rotate(180deg);
}

.advanced-toggle.open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.advanced-content .panel {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 1200px) {
    .dashboard-ops-grid {
        grid-template-columns: 1fr;
    }
    .service-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .service-strip {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   ANALYTICS
   ============================================================ */

.period-filter {
    display: flex;
    gap: 4px;
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 4px;
}

.period-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ui-text-2);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.period-btn:hover {
    background: var(--ui-surface);
    color: var(--ui-text-1);
}

.period-btn.active {
    background: var(--ui-surface);
    color: var(--ui-text-1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.stat-change {
    font-size: 0.78rem;
    font-weight: 500;
    margin-top: 4px;
}

.stat-change.positive { color: #10b981; }
.stat-change.negative { color: #ef4444; }

.stat-sub {
    font-size: 0.78rem;
    color: var(--ui-text-2);
    margin-top: 4px;
}

.insights-panel { margin-bottom: 24px; }

.insights-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.insight-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.4;
}

.insight-info    { background: #eff6ff; color: #1e40af; }
.insight-success { background: #f0fdf4; color: #166534; }
.insight-warning { background: #fffbeb; color: #92400e; }

.insight-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.insight-text { flex: 1; }

.analytics-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--ui-border);
}

.analytics-bar-row:last-child { border-bottom: none; }

.analytics-bar-label {
    width: 130px;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--ui-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-bar-label.mono { font-family: monospace; }

.analytics-bar-track {
    flex: 1;
    height: 8px;
    background: var(--ui-surface-2);
    border-radius: 4px;
    overflow: hidden;
}

.analytics-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--brand-primary, #e11d48);
    transition: width 0.3s ease;
    min-width: 2px;
}

.analytics-bar-fill.accent { background: #6366f1; }
.analytics-bar-fill.green  { background: #10b981; }
.analytics-bar-fill.purple { background: #8b5cf6; }

.analytics-bar-count {
    width: 32px;
    text-align: right;
    font-size: 0.88rem;
    color: var(--ui-text-1);
    flex-shrink: 0;
}

.empty-state-inline {
    color: var(--ui-text-2);
    font-size: 0.88rem;
    text-align: center;
    padding: 20px 0;
}

@media (max-width: 640px) {
    .period-filter { flex-wrap: wrap; }
    .analytics-bar-label { width: 90px; }
}

.funnel-panel { margin-bottom: 24px; }

.panel-header-sub {
    font-size: 0.82rem;
    color: var(--ui-text-2);
    margin-left: 10px;
}

.funnel-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.funnel-step {
    flex: 1;
    min-width: 90px;
    text-align: center;
    background: var(--ui-surface-2);
    border-radius: 10px;
    padding: 14px 10px;
}

.funnel-step-success {
    background: #f0fdf4;
}

.funnel-step-icon {
    font-size: 1.4rem;
    margin-bottom: 6px;
}

.funnel-step-count {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--ui-text-1);
    line-height: 1;
    margin-bottom: 4px;
}

.funnel-step-label {
    font-size: 0.75rem;
    color: var(--ui-text-2);
    font-weight: 500;
}

.funnel-arrow {
    font-size: 1.3rem;
    color: var(--ui-text-2);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .funnel-steps { gap: 6px; }
    .funnel-arrow { display: none; }
    .funnel-step { min-width: calc(50% - 6px); flex: none; }
}

/* ============================================================
   BOOKINGS LIST — VIEW TABS + FILTER CHIPS
   ============================================================ */

.view-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.view-tab {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--ui-text-2);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.view-tab:hover {
    background: var(--ui-surface-2);
    border-color: var(--ui-border-strong);
    color: var(--ui-text-1);
}

.view-tab.active {
    background: var(--ui-text-1);
    color: var(--ui-surface);
    border-color: var(--ui-text-1);
    font-weight: 600;
}

.filter-bar-panel {
    margin-bottom: 8px;
}

.filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ui-border);
}

.chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--ui-text-2);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.chip:hover {
    background: var(--ui-surface-2);
    color: var(--ui-text-1);
    border-color: var(--ui-border-strong);
}

.chip-active {
    background: var(--ui-primary);
    color: #fff;
    border-color: var(--ui-primary);
}

.filter-active-notice {
    font-size: 0.85rem;
    color: var(--ui-text-2);
    margin-bottom: 12px;
    padding: 8px 14px;
    background: var(--ui-warning-bg);
    border: 1px solid #fde68a;
    border-radius: 8px;
}

.filter-active-notice a {
    color: var(--ui-text-2);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .view-tabs { gap: 6px; }
    .view-tab { min-height: 34px; padding: 0 12px; font-size: 13px; }
}

/* ============================================================
   CRM — CUSTOMER LIST + DETAIL
   ============================================================ */


.crm-stat-divider { color: var(--ui-border-strong); user-select: none; }
[data-theme="dark"] .crm-stat-item.crm-stat-gold { color: #fcd34d; }

.customer-row-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.customer-name-strong {
    font-size: 16px;
    font-weight: 800;
    color: var(--ui-text-1);
}

.customer-row:hover { background: var(--ui-surface-2); margin: 0 -20px; padding: 14px 20px; border-radius: 8px; border-bottom-color: transparent; }

.customer-meta {
    color: var(--ui-text-2);
    font-size: 14px;
}

.customer-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Autocomplete dropdown ── */
.autocomplete-results {
    position: relative;
}

.autocomplete-dropdown {
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    box-shadow: var(--ui-shadow-md);
    overflow: hidden;
    z-index: 200;
}

.autocomplete-item {
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--ui-border);
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background: var(--ui-surface-2);
}

.autocomplete-name {
    font-weight: 700;
    color: var(--ui-text-1);
}

.autocomplete-meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ui-text-2);
}

@media (max-width: 700px) {
    .crm-stat-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   TOUCH UX PASS — iPad & service ergonomics
   ============================================================ */

/* ── Global touch-target upgrades ── */
.btn-sm {
    height: 38px;
    padding: 0 14px;
}

.app-nav-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.view-tab {
    min-height: 42px;
}

.chip {
    height: 36px;
    padding: 0 16px;
}

.period-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}

.subnav-link {
    min-height: 42px;
}

/* ── Sticky action bar ── */
.sticky-action-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    box-shadow: var(--ui-shadow-md);
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
}

.sticky-action-bar .booking-status-indicator {
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-text-2);
    margin-right: 4px;
}

.sticky-action-bar-right {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

/* ── Due-soon chip for table board ── */
.due-soon-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #92400e;
    white-space: nowrap;
}

.due-soon-chip::before {
    content: "⏱";
    font-size: 10px;
}

/* ── Table board action grouping ── */
.table-actions-primary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.table-actions-secondary {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
}

.table-actions-secondary .btn-sm {
    background: #f8fafc;
    color: var(--ui-text-2);
    border: 1px solid var(--ui-border);
    font-size: 12px;
    height: 34px;
    padding: 0 12px;
}

.table-actions-secondary .btn-sm:hover {
    background: var(--ui-surface-2);
    color: var(--ui-text-1);
}

/* ── Table board grid: more breathing room ── */
.table-board-grid {
    gap: 20px;
}

.service-table-card {
    padding: 18px;
}

/* ── Service mode: card spacing ── */
.svc-card {
    padding: 16px 18px;
    margin-bottom: 12px;
}

.svc-card.urgency-late      { border-left: 4px solid var(--ui-danger); background: var(--ui-danger-bg); }
.svc-card.urgency-due-now   { border-left: 4px solid var(--ui-warning); background: var(--ui-warning-bg); }
.svc-card.urgency-overrun   { border-left: 4px solid var(--ui-danger); background: var(--ui-danger-bg); }

.svc-name {
    font-size: 16px;
}

.svc-time {
    font-size: 24px;
    min-width: 58px;
}

/* Section count pill — use consistently ── */
.service-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 2px 8px;
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ui-text-1);
}

/* ── Booking detail — guest panel actions ── */
.booking-state-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Manual booking: larger inputs & slots ── */
.form-control {
    min-height: 42px;
}

/* ── Responsive: iPad portrait / tablet ── */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .table-board-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .app-nav {
        gap: 4px;
    }

    .app-nav-link {
        padding: 8px 10px;
        font-size: 13px;
    }

    .content-grid.two-col {
        grid-template-columns: 1fr;
    }

    .sticky-action-bar {
        border-radius: 10px;
    }
}

@media (max-width: 768px) {
    .view-tabs {
        gap: 6px;
        flex-wrap: wrap;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .page-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .filter-chips {
        gap: 6px;
    }

    .chip {
        height: 38px;
    }

    .platform-table th,
    .platform-table td {
        padding: 10px 8px;
    }
}


/* ============================================================
   GLOBAL COMPONENTS — moved from inline template styles
   ============================================================ */

/* ── Tag pills (used on booking detail, customer list, customer detail) ── */
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.tag-pill.tag-gold   { background: #fef9c3; color: #854d0e; }
.tag-pill.tag-blue   { background: #dbeafe; color: #1e40af; }
.tag-pill.tag-red    { background: #fee2e2; color: #991b1b; }
.tag-pill.tag-orange { background: #ffedd5; color: #9a3412; }
.tag-pill.tag-green  { background: #dcfce7; color: #166534; }
.tag-pill.tag-grey   { background: #f1f5f9; color: #475569; }
.tag-pill .tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0,0,0,0.14);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    border: none;
    padding: 0;
    color: inherit;
    text-decoration: none;
    transition: background 0.1s;
}
.tag-pill .tag-remove:hover { background: rgba(0,0,0,0.26); }
.tag-remove-form { display: inline; }
.tags-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── Customer intel bar (booking detail, customer detail) ── */
.customer-intel-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 20px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-sm);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.customer-intel-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 80px;
}
.customer-intel-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--ui-text-1);
    line-height: 1;
}
.customer-intel-stat-value.danger { color: var(--ui-danger); }
.customer-intel-stat-label {
    font-size: 11px;
    color: var(--ui-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.intel-divider {
    width: 1px;
    height: 32px;
    background: var(--ui-border);
    flex-shrink: 0;
}
.intel-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.intel-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.intel-profile-link {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text-1);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s;
}
.intel-profile-link:hover {
    background: var(--ui-surface-2);
    border-color: var(--ui-border-strong);
}
.intel-noshowrisk {
    background: var(--ui-danger-bg);
    border: 1px solid rgba(220,38,38,0.2);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-danger);
    white-space: nowrap;
}

/* ── Sticky action bar dark mode fix ── */
.sticky-action-bar {
    background: var(--ui-surface);
}

/* ── Due-soon chip token fix ── */
.due-soon-chip {
    background: var(--ui-warning-bg);
    color: var(--ui-warning);
}

/* ── Guest summary strip (customer detail) ── */
.guest-summary-strip {
    display: flex;
    align-items: center;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-sm);
    padding: 20px 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}
.guest-summary-name {
    flex: 1;
    min-width: 200px;
}
.guest-summary-name h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--ui-text-1);
    margin: 0 0 4px;
}
.guest-summary-contact {
    font-size: 14px;
    color: var(--ui-text-2);
    margin-bottom: 8px;
}
.guest-summary-stats {
    display: flex;
    gap: 28px;
    align-items: center;
    flex-shrink: 0;
}
.gstat { text-align: center; }
.gstat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--ui-text-1);
    line-height: 1;
}
.gstat-value.danger { color: var(--ui-danger); }
.gstat-label {
    font-size: 11px;
    color: var(--ui-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.gstat-divider {
    width: 1px;
    height: 36px;
    background: var(--ui-border);
}

/* ── Add tag form (customer detail) ── */
.add-tag-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}
.add-tag-form select {
    padding: 6px 10px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    font-size: 13px;
    background: var(--ui-surface);
    color: var(--ui-text-1);
}

/* ── Customer list row layout ── */
.customer-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ui-border);
}
.customer-row:last-child { border-bottom: none; }
.customer-col-main { flex: 1; min-width: 0; }
.customer-name-strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--ui-text-1);
    text-decoration: none;
    display: block;
    margin-bottom: 2px;
}
.customer-name-strong:hover { color: var(--ui-accent); }
.customer-col-stats {
    display: flex;
    gap: 24px;
    flex-shrink: 0;
}
.cstat {
    text-align: center;
    min-width: 44px;
}
.cstat-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--ui-text-1);
    line-height: 1;
}
.cstat-value.danger { color: var(--ui-danger); }
.cstat-label {
    font-size: 11px;
    color: var(--ui-text-3);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.customer-col-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 80px;
    max-width: 160px;
}
.customer-col-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.crm-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.crm-search-input {
    flex: 1;
    min-width: 200px;
    max-width: 380px;
    padding: 8px 14px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--ui-surface);
    color: var(--ui-text-1);
}
.crm-search-input:focus {
    outline: none;
    border-color: var(--ui-border-strong);
}
.crm-filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
@media (max-width: 700px) {
    .customer-col-stats { display: none; }
    .customer-col-tags { display: none; }
    .customer-col-actions { flex-direction: column; }
}

/* ── Prefill banner (manual booking form) ── */
.prefill-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ui-success-bg);
    border: 1px solid rgba(22,163,74,0.2);
    border-radius: var(--ui-radius-md);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--ui-success);
}
.prefill-banner strong { color: var(--ui-success); }
.prefill-banner a { color: var(--ui-success); font-size: 12px; }

/* ── Autocomplete dropdown ── */
.autocomplete-dropdown {
    margin-top: 6px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-md);
    overflow: hidden;
    z-index: 100;
}
.autocomplete-item {
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text-1);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: var(--ui-surface-2); }
.autocomplete-name { font-weight: 700; color: var(--ui-text-1); }
.autocomplete-meta { margin-top: 3px; font-size: 13px; color: var(--ui-text-2); }

/* ── No-show risk banner (customer detail) ── */
.noshowrisk-banner {
    background: var(--ui-danger-bg);
    border: 1px solid rgba(220,38,38,0.2);
    border-radius: var(--ui-radius-sm);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-danger);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Booking history row (customer detail) ── */
.booking-hist-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ui-border);
    font-size: 14px;
}
.booking-hist-row:last-child { border-bottom: none; }
.booking-hist-date {
    min-width: 80px;
    font-weight: 700;
    color: var(--ui-text-1);
    font-size: 13px;
}
.booking-hist-detail {
    flex: 1;
    color: var(--ui-text-2);
    font-size: 13px;
}
.booking-hist-link {
    font-size: 12px;
    color: var(--ui-info);
    text-decoration: none;
    white-space: nowrap;
}
.booking-hist-link:hover { text-decoration: underline; }

/* ── Booking status badges (customer detail history) ── */
.booking-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.bstatus-completed { background: var(--ui-success-bg); color: var(--ui-success); }
.bstatus-confirmed { background: var(--ui-info-bg); color: var(--ui-info); }
.bstatus-seated    { background: var(--ui-success-bg); color: var(--ui-success); }
.bstatus-pending   { background: var(--ui-warning-bg); color: var(--ui-warning); }
.bstatus-cancelled { background: var(--ui-surface-2); color: var(--ui-text-2); }
.bstatus-no_show   { background: var(--ui-danger-bg); color: var(--ui-danger); }
.bstatus-default   { background: var(--ui-surface-2); color: var(--ui-text-2); }

/* ── Guest summary actions ── */
.guest-summary-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

/* ── Notes textarea ── */
.notes-textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    font-family: inherit;
    background: var(--ui-surface);
    color: var(--ui-text-1);
    box-sizing: border-box;
}
.notes-textarea:focus { outline: none; border-color: var(--ui-border-strong); }
.notes-helper {
    font-size: 12px;
    color: var(--ui-text-3);
    margin-top: 6px;
    line-height: 1.5;
}

/* ── Section intro (settings pages) ── */
.section-intro {
    margin: 0 0 18px;
    color: var(--ui-text-2);
    max-width: 820px;
    font-size: 14px;
}

/* ── Booking summary grid (booking detail) ── */
.booking-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.booking-summary-item { display: flex; flex-direction: column; gap: 4px; }
.booking-summary-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--ui-text-1);
}

/* ── Info block (booking detail notes) ── */
.info-block {
    padding: 12px 0;
    border-top: 1px solid var(--ui-border);
}
.info-block strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text-1);
}

/* ── Service mode — live bar ── */
.service-live-bar {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 10px 16px;
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    flex-wrap: wrap;
}
.live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: livepulse 1.4s infinite;
}
@keyframes livepulse {
    0%   { opacity: 0.4; transform: scale(0.85); }
    50%  { opacity: 1;   transform: scale(1.1); }
    100% { opacity: 0.4; transform: scale(0.85); }
}
.live-bar-sep {
    width: 1px;
    height: 18px;
    background: var(--ui-border-strong);
    flex-shrink: 0;
}
.live-bar-stat { display: flex; flex-direction: column; gap: 0; line-height: 1.2; }
.live-bar-val { font-size: 18px; font-weight: 800; color: var(--ui-text-1); }
.live-bar-lbl { font-size: 11px; color: var(--ui-text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.last-updated {
    margin-left: auto;
    font-size: 12px;
    color: var(--ui-text-3);
    white-space: nowrap;
}

/* ── Service mode — card layout ── */
.svc-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    margin-bottom: 10px;
    transition: border-color 0.12s;
}
.svc-card:last-child { margin-bottom: 0; }
.svc-card.urgency-late    { border-left: 4px solid var(--ui-danger); background: var(--ui-danger-bg); }
.svc-card.urgency-due-now { border-left: 4px solid var(--ui-warning); background: var(--ui-warning-bg); }
.svc-card.urgency-overrun { border-left: 4px solid var(--ui-danger); background: var(--ui-danger-bg); }
.svc-time {
    font-size: 12px;
    font-weight: 700;
    color: var(--ui-text-3);
    line-height: 1;
    min-width: 40px;
    padding-top: 3px;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}
.svc-main { flex: 1; min-width: 0; }
.svc-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ui-text-1);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.svc-detail {
    font-size: 13px;
    color: var(--ui-text-2);
    margin-bottom: 6px;
}
.svc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.svc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.svc-actions-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    flex-shrink: 0;
}

/* ── Service mode — urgency badges ── */
.urgency-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.urgency-badge.late    { background: var(--ui-danger-bg); color: var(--ui-danger); }
.urgency-badge.due     { background: var(--ui-warning-bg); color: var(--ui-warning); }
.urgency-badge.overrun { background: var(--ui-danger-bg); color: var(--ui-danger); }

/* ── Service mode — section headings ── */
.service-section { margin-bottom: 24px; }
.service-section-heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ui-text-3);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.service-section-count {
    background: var(--ui-surface-2);
    border-radius: 99px;
    padding: 1px 8px;
    font-size: 11px;
    color: var(--ui-text-2);
}

/* ── Alert success (analytics) ── */
.alert-success {
    background: var(--ui-success-bg);
    color: var(--ui-success);
    border: 1px solid rgba(22,163,74,0.2);
}

/* ── Dashboard action needed row layout ── */
.dash-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.dash-action-btns {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Dashboard review slide panel ── */
.review-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 200;
    backdrop-filter: blur(2px);
}
.review-overlay.open { display: block; }

.review-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100vw;
    height: 100vh;
    background: var(--ui-surface);
    border-left: 1px solid var(--ui-border);
    box-shadow: -4px 0 32px rgba(0,0,0,0.12);
    z-index: 201;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.review-panel.open { transform: translateX(0); }

.review-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ui-border);
    flex-shrink: 0;
}
.review-panel-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ui-text-1);
}
.review-panel-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--ui-text-3);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.12s;
}
.review-panel-close:hover { color: var(--ui-text-1); }
.review-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
.review-panel-loading {
    color: var(--ui-text-3);
    font-size: 14px;
    padding: 20px 0;
}

/* ── Panel inner components ── */
.review-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.review-detail-item { display: flex; flex-direction: column; gap: 4px; }
.review-detail-value { font-size: 15px; font-weight: 600; color: var(--ui-text-1); }

.review-table-block {
    padding: 14px 16px;
    background: var(--ui-success-bg);
    border: 1px solid rgba(22,163,74,0.2);
    border-radius: var(--ui-radius-md);
    margin-bottom: 20px;
}
.review-table-block.review-table-unassigned {
    background: var(--ui-surface-2);
    border-color: var(--ui-border);
}
.review-table-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-3);
    margin-bottom: 4px;
}
.review-table-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--ui-text-1);
    margin-bottom: 2px;
}
.review-table-detail { font-size: 13px; color: var(--ui-text-2); }

.review-guest-block {
    padding: 16px;
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    margin-bottom: 16px;
}
.review-risk-alert {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--ui-danger-bg);
    border-radius: var(--ui-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-danger);
}
.review-notes {
    padding: 14px;
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    margin-bottom: 16px;
}
.review-deposit-note {
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: var(--ui-radius-sm);
    margin-bottom: 16px;
}
.review-deposit-paid    { background: var(--ui-success-bg); color: var(--ui-success); }
.review-deposit-pending { background: var(--ui-warning-bg); color: var(--ui-warning); }

.review-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ui-border);
}
.review-actions .btn { width: 100%; justify-content: center; }

/* ── Dashboard covers-by-hour chart ── */
.covers-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding: 8px 0 0 0;
}

.covers-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.covers-chart-bar {
    width: 100%;
    min-height: 2px;
    background: var(--ui-accent);
    border-radius: 3px 3px 0 0;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.covers-chart-bar.is-past {
    background: var(--ui-border-strong);
}

.covers-chart-bar.is-now {
    opacity: 1;
}

.covers-chart-col.is-past .covers-chart-bar {
    background: var(--ui-border-strong);
    opacity: 1;
}

.covers-chart-col.is-now .covers-chart-bar {
    opacity: 1;
}

.covers-chart-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--ui-text-2);
    line-height: 1;
    min-height: 12px;
}

.covers-chart-label {
    font-size: 10px;
    color: var(--ui-text-3);
    white-space: nowrap;
    padding-top: 4px;
    border-top: 1px solid var(--ui-border);
    width: 100%;
    text-align: center;
    line-height: 1;
}

.covers-chart-col.is-now .covers-chart-label {
    color: var(--ui-accent);
    font-weight: 700;
}

.covers-chart-col.is-past .covers-chart-label {
    color: var(--ui-text-3);
}

/* ── Setup needed banner (dashboard) ── */
.setup-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--ui-warning-bg);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: var(--ui-radius-md);
    margin-bottom: 20px;
    font-size: 13px;
}
.setup-banner-label {
    font-weight: 700;
    color: var(--ui-warning);
    flex-shrink: 0;
}
.setup-banner-item {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    color: var(--ui-text-1);
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    transition: border-color 0.12s;
}
.setup-banner-item:hover {
    border-color: var(--ui-accent);
    color: var(--ui-accent);
}
.setup-banner-settings {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-text-2);
    text-decoration: none;
    white-space: nowrap;
}
.setup-banner-settings:hover { color: var(--ui-text-1); }

/* ── Billing — current plan card highlight ── */
.pricing-card-current {
    border: 2px solid var(--ui-accent);
}
.pricing-card-current h3 {
    color: var(--ui-accent);
}

/* ── Table board — compact free cards ── */
.service-table-card.state-free {
    padding-bottom: 14px;
}
.table-actions-secondary {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ui-border);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Install page — live demo wrapper ── */
.live-demo-wrap {
    margin-bottom: 20px;
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.live-demo-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ui-text-3);
    padding: 10px 16px;
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ui-border);
}
.live-demo-stage {
    padding: 28px 24px;
    background: var(--ui-surface);
    min-height: 100px;
}
.live-demo-page-sim {
    max-width: 400px;
}
.live-demo-text-line {
    height: 10px;
    background: var(--ui-border);
    border-radius: 4px;
    margin-bottom: 8px;
}

/* ============================================================
   FULL SITE MOBILE & TABLET OPTIMISATION PASS
   ============================================================ */

/* ── Platform admin sidebar (currently totally broken on mobile) ── */
@media (max-width: 1024px) {
    .platform-shell {
        flex-direction: column;
    }
    .platform-sidebar {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        padding: 0;
        overflow-x: auto;
        overflow-y: visible;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        flex-wrap: nowrap;
    }
    .platform-brand {
        padding: 12px 16px;
        border-bottom: none;
        border-right: 1px solid rgba(255,255,255,0.1);
        flex-shrink: 0;
        margin-bottom: 0;
        height: auto;
    }
    .platform-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 8px 12px;
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .platform-nav::-webkit-scrollbar { display: none; }
    .platform-nav-section { display: none; }
    .platform-nav-link {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 6px 12px;
        font-size: 13px;
    }
    .platform-main {
        margin-left: 0;
        padding: 20px 16px 40px;
        min-height: auto;
    }
}
@media (max-width: 600px) {
    .platform-main { padding: 14px 12px 32px; }
    .platform-brand-tag { display: none; }
}

/* ── App dashboard home ── */
@media (max-width: 768px) {
    .dashboard-ops-grid { grid-template-columns: 1fr !important; }
}

/* ── Booking list — table to card view on phones ── */
@media (max-width: 700px) {
    .booking-book-table-wrap { display: none; }
    .booking-book-list-mobile { display: flex !important; flex-direction: column; gap: 8px; }
}

/* ── Booking table rows — hide less critical columns on tablet ── */
@media (max-width: 960px) {
    .platform-table .hide-tablet { display: none !important; }
}
@media (max-width: 640px) {
    .platform-table .hide-mobile { display: none !important; }
}

/* ── Sticky action bar — stack on phones ── */
@media (max-width: 640px) {
    .sticky-action-bar {
        position: static;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
    }
    .sticky-action-bar .inline-action-form,
    .sticky-action-bar .inline-action-form button,
    .sticky-action-bar > .btn {
        width: 100%;
        justify-content: center;
    }
    .sticky-action-bar .booking-status-indicator {
        font-size: 12px;
        font-weight: 700;
        color: var(--ui-text-2);
    }
}

/* ── Customer intel bar — compact on phones ── */
@media (max-width: 640px) {
    .customer-intel-bar {
        gap: 10px;
        padding: 10px 12px;
        flex-wrap: wrap;
    }
    .intel-divider { display: none; }
    .customer-intel-stat { min-width: 56px; }
    .customer-intel-stat-value { font-size: 15px; }
}

/* ── Service live bar — scroll horizontally on phones ── */
@media (max-width: 768px) {
    .service-live-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 12px;
        padding: 10px 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .service-live-bar::-webkit-scrollbar { display: none; }
    .live-bar-stat { flex-shrink: 0; }
    .live-bar-sep  { flex-shrink: 0; }
    .last-updated  { display: none; }
}

/* ── Page header — stack on mobile ── */
@media (max-width: 640px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 16px;
    }
    .page-header h1 { font-size: 20px; }
    .page-header-actions,
    .page-header-actions-wrap {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }
    .page-header-actions .btn,
    .page-header-actions-wrap .btn {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
        justify-content: center;
    }
}

/* ── Stats grid — responsive collapse ── */
@media (max-width: 768px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat-card   { padding: 14px; }
    .stat-value  { font-size: 24px; }
}
@media (max-width: 400px) {
    .stats-grid { gap: 8px; }
    .stat-value { font-size: 20px; }
}

/* ── Service strip ── */
@media (max-width: 640px) {
    .service-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .service-strip-item { padding: 12px; }
    .service-strip-item strong { font-size: 17px; }
}

/* ── Panel padding — tighter on phones ── */
@media (max-width: 640px) {
    .panel-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
    .panel-header h2 { font-size: 14px; }
    .panel-body { padding: 14px; }
}

/* ── View tabs — horizontal scroll on phones ── */
@media (max-width: 480px) {
    .view-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .view-tabs::-webkit-scrollbar { display: none; }
    .view-tab { flex-shrink: 0; }
}

/* ── Filter bar ── */
@media (max-width: 640px) {
    .booking-toolbar .toolbar-grid { grid-template-columns: 1fr; gap: 10px; }
    .filter-bar-panel .panel-body  { padding: 12px; }
    .chip { font-size: 12px; height: 34px; padding: 0 10px; }
}

/* ── Week view 7-day bar — override inline grid ── */
@media (max-width: 900px) {
    .bookings-week-bar { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 560px) {
    .bookings-week-bar { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Two-col content grid ── */
@media (max-width: 768px) {
    .content-grid.two-col { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Form grid ── */
@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; gap: 14px; }
    .checkbox-card-grid { grid-template-columns: 1fr; }
}

/* ── CRM stat strip (removed) ── */

/* ── Guest summary strip (customer detail) ── */
@media (max-width: 640px) {
    .guest-summary-strip {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 14px;
    }
    .guest-summary-actions { width: 100%; }
    .guest-summary-actions .btn { width: 100%; text-align: center; justify-content: center; }
    .guest-summary-stats { width: 100%; gap: 20px; }
}

/* ── Analytics CRM grid (inline style override) ── */
@media (max-width: 640px) {
    .analytics-crm-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}

/* ── Table board ── */
@media (max-width: 640px) {
    .table-board-grid { grid-template-columns: 1fr !important; }
}

/* ── Settings link cards ── */
@media (max-width: 640px) {
    .settings-link-card { padding: 14px; }
}

/* ── Slot chips — smaller on phones ── */
@media (max-width: 480px) {
    .slot-chip { font-size: 13px; padding: 8px 12px; }
}

/* ── Analytics bar labels ── */
@media (max-width: 480px) {
    .analytics-bar-label { width: 80px; font-size: 12px; }
}

/* ── Mobile tab labels ── */
@media (max-width: 360px) {
    .mobile-tab span { font-size: 9px; }
}

/* ── Platform admin overview inline grids ── */
@media (max-width: 768px) {
    .platform-funnel-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    .platform-funnel-grid { grid-template-columns: 1fr !important; }
    .platform-trends-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   PLATFORM ADMIN — MOBILE & TABLET OPTIMISATION
   ============================================================ */

/* ── All platform-table instances need overflow scroll ── */
.pa-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Stats row — horizontal strip of stat cards ── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
@media (max-width: 640px) {
    .stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ── Filter forms collapse to 1-col on mobile ── */
@media (max-width: 768px) {
    .filters-row,
    .filters-row-issues,
    .filters-row-activity,
    .filters-row-launch-readiness,
    .filters-row-subscriptions,
    .filters-row-integrations,
    .filters-row-webhooks {
        grid-template-columns: 1fr !important;
    }
    .pa-filter-inline {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 8px;
    }
}

/* ── Inline funnel / trends grids ── */
.pa-funnel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.pa-trends-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.pa-funnel-grid-restaurant {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
    text-align: center;
}
@media (max-width: 900px) {
    .pa-funnel-grid          { grid-template-columns: repeat(2, 1fr); }
    .pa-trends-grid          { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .pa-funnel-grid-restaurant { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .pa-funnel-grid          { grid-template-columns: 1fr 1fr; }
    .pa-trends-grid          { grid-template-columns: 1fr 1fr; gap: 14px; }
    .pa-funnel-grid-restaurant { grid-template-columns: 1fr 1fr; }
}

/* ── Stats grid on platform admin pages ── */
@media (max-width: 900px) {
    .platform-main .stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .platform-main .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .platform-main .stat-card  { padding: 12px 14px; }
    .platform-main .stat-value { font-size: 22px; }
}

/* ── Two-col grids collapse on tablet ── */
@media (max-width: 900px) {
    .platform-main .content-grid.two-col { grid-template-columns: 1fr; }
}

/* ── Page header ── */
@media (max-width: 640px) {
    .platform-main .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 16px;
    }
    .platform-main .page-header h1 { font-size: 20px; }
    .platform-main .page-header-actions { width: 100%; }
    .platform-main .page-header-actions .btn { flex: 1; text-align: center; justify-content: center; }
}

/* ── Panel header ── */
@media (max-width: 640px) {
    .platform-main .panel-header { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
    .platform-main .panel-body   { padding: 14px; }
}

/* ── Table font size on mobile ── */
@media (max-width: 640px) {
    .pa-table-wrap .platform-table th,
    .pa-table-wrap .platform-table td {
        font-size: 13px;
        padding: 10px 8px;
        white-space: nowrap;
    }
}

/* ── Onboarding wizard ─────────────────────────────────────────────────── */

.onboarding-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.onboarding-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.onboarding-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ui-accent);
    margin-bottom: 6px;
}

.onboarding-title {
    margin: 0 0 6px;
}

.onboarding-progress-card {
    background: var(--ui-panel);
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    padding: 16px;
}

.onboarding-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--ui-text-3);
    margin-bottom: 10px;
}

.onboarding-progress-bar {
    height: 10px;
    margin-bottom: 14px;
}

.onboarding-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.onboarding-step-pill {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--ui-border);
    font-size: 13px;
    color: var(--ui-text-2);
    background: var(--ui-bg);
}

.onboarding-step-pill.active {
    border-color: var(--ui-accent);
    color: var(--ui-accent);
    font-weight: 700;
}

.onboarding-step-pill.done {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #047857;
    font-weight: 700;
}

.onboarding-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr);
    gap: 20px;
}

.onboarding-main-panel,
.onboarding-side-panel {
    height: fit-content;
}

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

.wizard-actions {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

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

.opening-hours-onboarding {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.opening-day-row {
    display: grid;
    grid-template-columns: 140px 110px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: var(--ui-bg);
}

.opening-day-label {
    font-weight: 600;
}

.opening-day-times {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.opening-day-times input[type="time"] {
    min-width: 120px;
}

.opening-day-error {
    grid-column: 1 / -1;
    color: #b91c1c;
    font-size: 13px;
}

.go-live-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.go-live-card {
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    padding: 14px;
    background: var(--ui-bg);
}

.go-live-checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.readiness-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-url-box {
    margin: 8px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    font-size: 13px;
    word-break: break-all;
}

.code-snippet {
    margin: 10px 0 0;
    padding: 12px;
    border-radius: 12px;
    background: #0f172a;
    color: #e2e8f0;
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.5;
}

.onboarding-resume-card {
    margin-bottom: 18px;
}

.onboarding-resume-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width: 980px) {
    .onboarding-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .opening-day-row {
        grid-template-columns: 1fr;
    }

    .wizard-actions {
        flex-direction: column;
    }

    .wizard-actions-right {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .wizard-actions > .btn,
    .wizard-actions-right > .btn {
        width: 100%;
    }
}

/* ── Logout form resets ────────────────────────────────────────────────── */

.logout-form {
    margin: 0;
    padding: 0;
}


/* ═══════════════════════════════════════════════════════════════
   PLATFORM ADMIN — DARK MODE COMPONENT OVERRIDES
   Appended to platform_admin.css — do not edit above this line
   ═══════════════════════════════════════════════════════════════ */

/* ── Activity ── */
[data-theme="dark"] .activity-item { background:#1e293b; border-color:#334155; }
[data-theme="dark"] .activity-main { color:#e2e8f0; }
[data-theme="dark"] .activity-meta { color:#94a3b8; }
[data-theme="dark"] .activity-time { color:#64748b; }

/* ── Readiness items ── */
[data-theme="dark"] .readiness-item { background:#0f172a; color:#cbd5e1; }

/* ── Admin shortcut cards ── */
[data-theme="dark"] .admin-shortcut-card { background:#1e293b; border-color:#334155; color:#e2e8f0; }
[data-theme="dark"] .admin-shortcut-card:hover { background:#334155; border-color:#475569; }
[data-theme="dark"] .admin-shortcut-card span { color:#94a3b8; }

/* ── Booking URL / info boxes ── */
[data-theme="dark"] .booking-url-box { background:#0f172a; border-color:#334155; color:#e2e8f0; }
[data-theme="dark"] .booking-summary-item { background:#1e293b; border-color:#334155; }
[data-theme="dark"] .booking-summary-value { color:#f1f5f9; }
[data-theme="dark"] .info-block { background:#1e293b; border-color:#334155; }
[data-theme="dark"] .booking-row-card { background:#1e293b; border-color:#334155; }
[data-theme="dark"] .booking-row-time { color:#f1f5f9; }
[data-theme="dark"] .booking-row-name { color:#f1f5f9; }

/* ── Checkbox cards ── */
[data-theme="dark"] .checkbox-card { background:#1e293b; border-color:#334155; color:#e2e8f0; }

/* ── Next step card ── */
[data-theme="dark"] .next-step-card { background:#1e293b; border-color:#334155; }
[data-theme="dark"] .next-step-label { color:#94a3b8; }
[data-theme="dark"] .next-step-title { color:#f1f5f9; }

/* ── Table board cards ── */
[data-theme="dark"] .table-card { background:#1e293b; border-color:#334155; }
[data-theme="dark"] .table-card-name { color:#f1f5f9; }
[data-theme="dark"] .table-booking-block { border-top-color:#334155; }
[data-theme="dark"] .table-booking-name { color:#f1f5f9; }
[data-theme="dark"] .table-booking-label { color:#64748b; }

/* ── Stack card titles ── */
[data-theme="dark"] .stack-card-title { color:#f1f5f9; }

/* ── Section text ── */
[data-theme="dark"] .section-intro { color:#94a3b8; }
[data-theme="dark"] .next-step-label { color:#94a3b8; }

/* ── Badges ── */
[data-theme="dark"] .badge-muted   { background:#1e293b; color:#94a3b8; }
[data-theme="dark"] .badge-active  { background:#052e16; color:#4ade80; }
[data-theme="dark"] .badge-success { background:#052e16; color:#4ade80; }
[data-theme="dark"] .badge-warning { background:#422006; color:#fbbf24; }
[data-theme="dark"] .badge-danger  { background:#450a0a; color:#f87171; }
[data-theme="dark"] .badge-info    { background:#0c1a2e; color:#60a5fa; }

/* ── Alerts ── */
[data-theme="dark"] .alert { background:#1e293b; border-color:#334155; color:#cbd5e1; }
[data-theme="dark"] .alert-warning { background:#422006; border-color:#92400e; color:#fbbf24; }
[data-theme="dark"] .alert-danger, [data-theme="dark"] .alert-error { background:#450a0a; border-color:#991b1b; color:#f87171; }
[data-theme="dark"] .alert-success { background:#052e16; border-color:#166534; color:#4ade80; }

/* ── Buttons ── */
[data-theme="dark"] .btn-secondary { background:#1e293b; color:#cbd5e1; border-color:#334155; }
[data-theme="dark"] .btn-secondary:hover { background:#334155; color:#f1f5f9; }

/* ── Forms ── */
[data-theme="dark"] label { color:#e2e8f0; }
[data-theme="dark"] .form-help { color:#64748b; }
[data-theme="dark"] .form-section-label { color:#64748b !important; }
[data-theme="dark"] .form-control { background:#0f172a; border-color:#334155; color:#f1f5f9; }
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] select,
[data-theme="dark"] textarea { background:#0f172a !important; border-color:#334155 !important; color:#f1f5f9 !important; }

/* ── Stack list ── */
[data-theme="dark"] .stack-list-row { border-color:#334155; }
[data-theme="dark"] .stack-list-label { color:#94a3b8; }

/* ── Code / pre ── */
[data-theme="dark"] code { background:#0f172a; color:#a5b4fc; border-color:#334155; }
[data-theme="dark"] pre { background:#0f172a; color:#94a3b8; border-color:#334155; }

/* ── Tables ── */
[data-theme="dark"] .platform-table th { background:#0f172a; color:#94a3b8; border-color:#334155; }
[data-theme="dark"] .platform-table td { border-color:#1e293b; color:#cbd5e1; }
[data-theme="dark"] .platform-table tr:hover td { background:#1e293b; }

/* ── Panels ── */
[data-theme="dark"] .panel { background:#1e293b; border-color:#334155; }
[data-theme="dark"] .panel-header { border-color:#334155; }
[data-theme="dark"] .panel-header h2 { color:#f1f5f9; }
[data-theme="dark"] .panel-body { color:#cbd5e1; }
[data-theme="dark"] .content-grid .panel { background:#1e293b; }

/* ── Stats ── */
[data-theme="dark"] .stat-card { background:#1e293b; border-color:#334155; }
[data-theme="dark"] .stat-label { color:#94a3b8; }
[data-theme="dark"] .stat-value { color:#f1f5f9; }

/* ── Page header ── */
[data-theme="dark"] .page-header h1 { color:#f1f5f9; }
[data-theme="dark"] .page-header p,
[data-theme="dark"] .page-header .text-muted { color:#94a3b8; }

/* ── General text ── */
[data-theme="dark"] .text-muted { color:#64748b; }
[data-theme="dark"] .empty-state { color:#64748b; }
[data-theme="dark"] strong { color:#e2e8f0; }
[data-theme="dark"] p { color:#cbd5e1; }
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 { color:#f1f5f9; }
[data-theme="dark"] a { color:#818cf8; }
[data-theme="dark"] a:hover { color:#a5b4fc; }

/* ── Overview — attention cards ── */
[data-theme="dark"] [style*="background:#fff7ed"] { background:#422006 !important; border-color:#92400e !important; }
[data-theme="dark"] [style*="background:#fff1f2"] { background:#450a0a !important; border-color:#991b1b !important; }
[data-theme="dark"] [style*="background:#fefce8"] { background:#422006 !important; border-color:#92400e !important; }
[data-theme="dark"] [style*="background:#fafafa"] { background:#1e293b !important; border-color:#334155 !important; }
[data-theme="dark"] [style*="background:#f9fafb"] { background:#1e293b !important; }
[data-theme="dark"] [style*="background:#f8fafc"] { background:#1e293b !important; }
[data-theme="dark"] [style*="background:#f1f5f9"] { background:#0f172a !important; }
[data-theme="dark"] [style*="background:#fee2e2"] { background:#450a0a !important; border-color:#991b1b !important; }
[data-theme="dark"] [style*="background:#fff5f5"] { background:#450a0a !important; }
[data-theme="dark"] [style*="background:#fef2f2"] { background:#450a0a !important; border-color:#991b1b !important; }
[data-theme="dark"] [style*="background:#f0fdf4"] { background:#052e16 !important; border-color:#166534 !important; }
[data-theme="dark"] [style*="background:#fffbeb"] { background:#422006 !important; border-color:#92400e !important; }

/* ── Inline colour text overrides ── */
[data-theme="dark"] [style*="color:#0f172a"] { color:#f1f5f9 !important; }
[data-theme="dark"] [style*="color:#111827"] { color:#f1f5f9 !important; }
[data-theme="dark"] [style*="color:#374151"] { color:#cbd5e1 !important; }
[data-theme="dark"] [style*="color:#475569"] { color:#94a3b8 !important; }
[data-theme="dark"] [style*="color:#64748b"] { color:#64748b !important; }
[data-theme="dark"] [style*="color:#6b7280"] { color:#94a3b8 !important; }

/* ── Mobile drawer dark mode ── */
[data-theme="dark"] .platform-drawer { background:#0f0e1a; }
[data-theme="dark"] .platform-drawer-link { color:rgba(255,255,255,0.7); }
[data-theme="dark"] .platform-drawer-link:hover,
[data-theme="dark"] .platform-drawer-link.active { background:rgba(165,180,252,0.12); color:#c7d2fe; }
[data-theme="dark"] .platform-drawer-section { color:rgba(165,180,252,0.4); }
[data-theme="dark"] .platform-topbar { background:#0f0e1a; }


/* ================================================================
   PLATFORM ADMIN — DARK MODE OVERRIDES
   Every hardcoded light colour covered, derived from full CSS audit
   ================================================================ */

/* Shell background */
[data-theme="dark"] .platform-shell { background: #0f172a; }
[data-theme="dark"] .platform-main  { background: #0f172a; color: #cbd5e1; }

/* Panels */
[data-theme="dark"] .panel                    { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .panel-header             { border-color: #334155; }
[data-theme="dark"] .panel-header h2          { color: #f1f5f9; }
[data-theme="dark"] .panel-body               { color: #cbd5e1; }
[data-theme="dark"] .content-grid .panel      { background: #1e293b; }

/* Stats */
[data-theme="dark"] .stat-card                { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .stat-label               { color: #94a3b8; }
[data-theme="dark"] .stat-value               { color: #f1f5f9; }

/* Tables */
[data-theme="dark"] .platform-table th        { background: #0f172a; color: #94a3b8; border-color: #334155; }
[data-theme="dark"] .platform-table td        { border-color: #1e293b; color: #cbd5e1; }
[data-theme="dark"] .platform-table tr:hover td { background: #1e293b; }
[data-theme="dark"] .platform-table tbody tr:hover { background: #1e293b; }

/* Progress bar track */
[data-theme="dark"] .progress                 { background: #334155; }

/* Readiness */
[data-theme="dark"] .readiness-item           { background: #0f172a; color: #cbd5e1; }

/* Admin shortcut cards */
[data-theme="dark"] .admin-shortcut-card      { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .admin-shortcut-card:hover{ background: #334155; border-color: #475569; }
[data-theme="dark"] .admin-shortcut-card span { color: #94a3b8; }

/* Subscription meta */
[data-theme="dark"] .subscription-meta-row td { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .subscription-meta        { color: #94a3b8; }

/* Activity */
[data-theme="dark"] .activity-item            { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .activity-main            { color: #e2e8f0; }
[data-theme="dark"] .activity-meta            { color: #94a3b8; }
[data-theme="dark"] .activity-time            { color: #64748b; }

/* Booking URL / info boxes */
[data-theme="dark"] .booking-url-box          { background: #0f172a; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .booking-summary-item     { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .booking-summary-value    { color: #f1f5f9; }
[data-theme="dark"] .info-block               { background: #1e293b; border-color: #334155; }

/* Stack cards */
[data-theme="dark"] .stack-card-title         { color: #f1f5f9; }
[data-theme="dark"] .stack-list-row           { border-color: #334155; }
[data-theme="dark"] .stack-list-label         { color: #94a3b8; }

/* Section text */
[data-theme="dark"] .section-intro            { color: #94a3b8; }

/* Next step card */
[data-theme="dark"] .next-step-card           { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .next-step-label          { color: #94a3b8; }
[data-theme="dark"] .next-step-title          { color: #f1f5f9; }

/* Table board */
[data-theme="dark"] .table-card               { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .table-card-name          { color: #f1f5f9; }
[data-theme="dark"] .table-booking-block      { border-top-color: #334155; }
[data-theme="dark"] .table-booking-label      { color: #64748b; }
[data-theme="dark"] .table-booking-name       { color: #f1f5f9; }

/* Booking row cards */
[data-theme="dark"] .booking-row-card         { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .booking-row-card.urgency-overrun { background: #450a0a; }
[data-theme="dark"] .booking-row-card.urgency-due-now { background: #422006; }
[data-theme="dark"] .booking-row-time         { color: #f1f5f9; }
[data-theme="dark"] .booking-row-name         { color: #f1f5f9; }

/* Service cards */
[data-theme="dark"] .service-table-card       { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .service-block            { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .service-block-label      { color: #94a3b8; }
[data-theme="dark"] .service-block-title      { color: #f1f5f9; }

/* Checkbox cards */
[data-theme="dark"] .checkbox-card            { background: #1e293b; border-color: #334155; color: #e2e8f0; }

/* Mini flag */
[data-theme="dark"] .mini-flag                { background: #334155; color: #cbd5e1; }

/* Chips / urgency */
[data-theme="dark"] .overrun-chip             { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .due-now-chip             { background: #422006; color: #fcd34d; }
[data-theme="dark"] .urgency-chip             { background: #422006; color: #fcd34d; }
[data-theme="dark"] .urgency-chip.overrun     { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .due-soon-chip            { background: #1c1917; border-color: #44403c; color: #fcd34d; }

/* Insights */
[data-theme="dark"] .insight-info             { background: #0c1a2e; color: #60a5fa; }
[data-theme="dark"] .insight-success          { background: #052e16; color: #4ade80; }
[data-theme="dark"] .insight-warning          { background: #422006; color: #fbbf24; }

/* Funnel */
[data-theme="dark"] .funnel-step-success      { background: #052e16; }

/* Tag pills */
[data-theme="dark"] .tag-pill.tag-gold        { background: #422006; color: #fcd34d; }
[data-theme="dark"] .tag-pill.tag-blue        { background: #0c1a2e; color: #60a5fa; }
[data-theme="dark"] .tag-pill.tag-red         { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .tag-pill.tag-orange      { background: #422006; color: #fdba74; }
[data-theme="dark"] .tag-pill.tag-green       { background: #052e16; color: #4ade80; }
[data-theme="dark"] .tag-pill.tag-grey        { background: #1e293b; color: #94a3b8; }

/* Autocomplete */
[data-theme="dark"] .autocomplete-dropdown    { background: #1e293b; border-color: #334155; }

/* Table actions */
[data-theme="dark"] .table-actions-secondary  { border-top-color: #334155; }
[data-theme="dark"] .table-actions-secondary .btn-sm { background: #1e293b; }

/* Filter active notice */
[data-theme="dark"] .filter-active-notice     { background: #422006; border-color: #92400e; color: #fbbf24; }

/* Alerts */
[data-theme="dark"] .alert                    { background: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .alert-warning            { background: #422006; border-color: #92400e; color: #fbbf24; }
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-error              { background: #450a0a; border-color: #991b1b; color: #f87171; }
[data-theme="dark"] .alert-success            { background: #052e16; border-color: #166534; color: #4ade80; }
[data-theme="dark"] .alert-info               { background: #0c1a2e; border-color: #1e40af; color: #60a5fa; }

/* Badges */
[data-theme="dark"] .badge-muted              { background: #1e293b; color: #94a3b8; }
[data-theme="dark"] .badge-active,
[data-theme="dark"] .badge-success            { background: #052e16; color: #4ade80; }
[data-theme="dark"] .badge-warning            { background: #422006; color: #fbbf24; }
[data-theme="dark"] .badge-danger             { background: #450a0a; color: #f87171; }
[data-theme="dark"] .badge-info               { background: #0c1a2e; color: #60a5fa; }

/* Buttons */
[data-theme="dark"] .btn-secondary            { background: #1e293b; color: #cbd5e1; border-color: #334155; }
[data-theme="dark"] .btn-secondary:hover      { background: #334155; color: #f1f5f9; }

/* Forms */
[data-theme="dark"] label                     { color: #e2e8f0; }
[data-theme="dark"] .form-help                { color: #64748b; }
[data-theme="dark"] .form-section-label       { color: #64748b !important; }
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] select,
[data-theme="dark"] textarea                  { background: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; }

/* Code */
[data-theme="dark"] code                      { background: #0f172a; color: #a5b4fc; border-color: #334155; }
[data-theme="dark"] pre                       { background: #0f172a; color: #94a3b8; border-color: #334155; }

/* Page header */
[data-theme="dark"] .page-header h1           { color: #f1f5f9; }
[data-theme="dark"] .page-header p,
[data-theme="dark"] .page-header .text-muted  { color: #94a3b8; }

/* General text */
[data-theme="dark"] .text-muted               { color: #64748b; }
[data-theme="dark"] .empty-state              { color: #64748b; }
[data-theme="dark"] p                         { color: #cbd5e1; }
[data-theme="dark"] strong                    { color: #e2e8f0; }
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 { color: #f1f5f9; }
[data-theme="dark"] a                         { color: #818cf8; }
[data-theme="dark"] a:hover                   { color: #a5b4fc; }

/* Inline style overrides — catch hardcoded colours in templates */
[data-theme="dark"] [style*="background:#fff7ed"],
[data-theme="dark"] [style*="background: #fff7ed"] { background: #422006 !important; border-color: #92400e !important; }
[data-theme="dark"] [style*="background:#fff1f2"],
[data-theme="dark"] [style*="background: #fff1f2"] { background: #450a0a !important; border-color: #991b1b !important; }
[data-theme="dark"] [style*="background:#fefce8"],
[data-theme="dark"] [style*="background: #fefce8"] { background: #422006 !important; border-color: #92400e !important; }
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background: #fafafa"] { background: #1e293b !important; }
[data-theme="dark"] [style*="background:#f9fafb"],
[data-theme="dark"] [style*="background: #f9fafb"] { background: #1e293b !important; }
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f8fafc"] { background: #1e293b !important; }
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background: #f1f5f9"] { background: #0f172a !important; }
[data-theme="dark"] [style*="background:#fee2e2"],
[data-theme="dark"] [style*="background: #fee2e2"] { background: #450a0a !important; }
[data-theme="dark"] [style*="background:#fff5f5"],
[data-theme="dark"] [style*="background: #fff5f5"] { background: #450a0a !important; }
[data-theme="dark"] [style*="background:#fef2f2"],
[data-theme="dark"] [style*="background: #fef2f2"] { background: #450a0a !important; }
[data-theme="dark"] [style*="background:#f0fdf4"],
[data-theme="dark"] [style*="background: #f0fdf4"] { background: #052e16 !important; border-color: #166534 !important; }
[data-theme="dark"] [style*="background:#fffbeb"],
[data-theme="dark"] [style*="background: #fffbeb"] { background: #422006 !important; border-color: #92400e !important; }
[data-theme="dark"] [style*="background:#0f172a"] { background: #0f172a !important; }

/* Inline text colour overrides */
[data-theme="dark"] [style*="color:#0f172a"],
[data-theme="dark"] [style*="color: #0f172a"] { color: #f1f5f9 !important; }
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color: #111827"] { color: #f1f5f9 !important; }
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #1e293b"] { color: #f1f5f9 !important; }
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color: #374151"] { color: #cbd5e1 !important; }
[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color: #475569"] { color: #94a3b8 !important; }
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color: #6b7280"] { color: #94a3b8 !important; }
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"] { color: #64748b !important; }

/* Mobile drawer */
[data-theme="dark"] .platform-drawer          { background: #0f0e1a; }
[data-theme="dark"] .platform-drawer-link     { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .platform-drawer-link:hover,
[data-theme="dark"] .platform-drawer-link.active { background: rgba(165,180,252,0.12); color: #c7d2fe; }
[data-theme="dark"] .platform-drawer-section  { color: rgba(165,180,252,0.4); }
[data-theme="dark"] .platform-topbar          { background: #0f0e1a; border-color: rgba(255,255,255,0.06); }

/* Sidebar footer */
[data-theme="dark"] .sidebar-footer           { border-top-color: rgba(255,255,255,0.08); }

/* Onboarding */
[data-theme="dark"] .onboarding-step-pill.done { color: #4ade80; }
[data-theme="dark"] .opening-day-error        { color: #f87171; }

/* ── Sidebar scrollbar dark mode ── */
[data-theme="dark"] .platform-sidebar::-webkit-scrollbar { width: 4px; }
[data-theme="dark"] .platform-sidebar::-webkit-scrollbar-track { background: #0f0e1a; }
[data-theme="dark"] .platform-sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
[data-theme="dark"] .platform-main::-webkit-scrollbar { width: 8px; }
[data-theme="dark"] .platform-main::-webkit-scrollbar-track { background: #0f172a; }
[data-theme="dark"] .platform-main::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
[data-theme="dark"] body::-webkit-scrollbar { width: 8px; }
[data-theme="dark"] body::-webkit-scrollbar-track { background: #0f172a; }
[data-theme="dark"] body::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }



/* ============================================================
   ANALYTICS PAGE — SAFE UI POLISH PATCH
   ============================================================ */

.analytics-section-label {
    margin: 2px 0 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-text-3);
}

.analytics-home .panel {
    overflow: hidden;
}

.analytics-home .panel-header h2 {
    letter-spacing: -0.01em;
}

.analytics-home .stat-card {
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.analytics-home .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.analytics-home .analytics-lead {
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.analytics-home .analytics-lead h2 {
    letter-spacing: -0.02em;
    max-width: 760px;
}

.analytics-home .analytics-lead p {
    max-width: 760px;
}

.analytics-home .analytics-lead-pill {
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.analytics-home .analytics-top-grid,
.analytics-home .analytics-funnel-detail-grid {
    align-items: stretch;
}

.analytics-home .analytics-mini-summary {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ui-border);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.analytics-home .analytics-mini-summary-item {
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    padding: 10px 12px;
}

.analytics-home .analytics-mini-summary-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ui-text-3);
    margin-bottom: 4px;
}

.analytics-home .analytics-funnel-step {
    border: 1px solid transparent;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.analytics-home .analytics-funnel-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    border-color: var(--ui-border);
}

.analytics-home .analytics-funnel-rate {
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ui-text-3);
}

.analytics-home .analytics-dropoff-card {
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--ui-border);
}

.analytics-home .analytics-crm-card {
    border: 1px solid var(--ui-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

@media (max-width: 900px) {
    .analytics-home .analytics-mini-summary {
        grid-template-columns: 1fr;
    }
}


/* Booking highlights card redesign */
.booking-highlights-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.booking-highlight-stat {
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
}

.booking-highlight-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ui-text-3);
    margin-bottom: 6px;
}

.booking-highlight-value {
    display: block;
    font-size: 1.55rem;
    line-height: 1;
    color: var(--ui-text-1);
}

.booking-highlights-subhead {
    font-size: 12px;
    font-weight: 700;
    color: var(--ui-text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 2px 0 10px;
}

.booking-highlights-note {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--ui-text-2);
    line-height: 1.45;
}

@media (max-width: 640px) {
    .booking-highlights-stats {
        grid-template-columns: 1fr;
    }
}


/* Compact booking highlights summary row */
.booking-highlights-inline-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.booking-inline-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: var(--ui-surface-2);
}

.booking-inline-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-text-3);
}

.booking-inline-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--ui-text-1);
}


/* ============================================================
   CRM — Guest list redesign
   ============================================================ */

/* Stat pills row */
.crm-stat-pills {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
    padding: 0 4px;
    margin-bottom: 20px;
    overflow: hidden;
}
.crm-stat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 24px;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.crm-pill-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--ui-text-1);
    line-height: 1;
}
.crm-pill-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-3);
    white-space: nowrap;
}
.crm-pill-sep {
    width: 1px;
    height: 36px;
    background: var(--ui-border);
    flex-shrink: 0;
}
.crm-stat-pill.crm-pill-gold .crm-pill-value { color: #92400e; }
.crm-stat-pill.crm-pill-danger .crm-pill-value { color: var(--ui-danger); }
[data-theme="dark"] .crm-stat-pill.crm-pill-gold .crm-pill-value { color: #fcd34d; }

/* Panel top: search + chips */
.crm-panel-top {
    padding: 16px 20px 0;
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.crm-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.crm-search-input {
    flex: 1;
    max-width: 360px;
    padding: 8px 14px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    font-size: 14px;
    background: var(--ui-surface);
    color: var(--ui-text-1);
}
.crm-search-input:focus {
    outline: none;
    border-color: var(--ui-border-strong);
}
.crm-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 14px;
}

/* Column header row */
.crm-col-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0 10px 52px;
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: 2px;
}
.crm-sort-link {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-3);
    text-decoration: none;
}
.crm-sort-link:hover { color: var(--ui-text-1); }

/* Customer row */
.crm-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ui-border);
    transition: background 0.1s;
}
.crm-row:last-child { border-bottom: none; }
.crm-row:hover {
    background: var(--ui-surface-2);
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom-color: transparent;
    border-radius: 6px;
}

/* Avatar */
.crm-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ui-surface-3);
    color: var(--ui-text-2);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

/* Column widths */
.crm-col-guest { flex: 1; min-width: 0; }
.crm-col-stat  { min-width: 72px; text-align: center; flex-shrink: 0; }
.crm-col-tags  { min-width: 80px; max-width: 140px; display: flex; flex-wrap: wrap; gap: 4px; flex-shrink: 0; }
.crm-col-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Guest name + contact */
.crm-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text-1);
    text-decoration: none;
    display: block;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-name:hover { color: var(--ui-accent); }
.crm-contact {
    font-size: 12px;
    color: var(--ui-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Numbers */
.crm-num {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text-1);
}
.crm-num-sm { font-size: 13px; font-weight: 500; }
.crm-num-danger { color: var(--ui-danger); }
.crm-dash { color: var(--ui-text-3); font-size: 14px; }

/* Pagination */
.crm-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--ui-border);
    margin-top: 8px;
}
.crm-pagination-info { font-size: 13px; color: var(--ui-text-3); }
.crm-pagination-controls { display: flex; gap: 6px; align-items: center; }
.crm-pagination-page { font-size: 13px; padding: 6px 12px; color: var(--ui-text-2); }

/* Responsive */
@media (max-width: 800px) {
    .crm-col-stat:nth-child(4),
    .crm-col-stat:nth-child(5) { display: none; }
    .crm-col-header .crm-col-stat:nth-child(4),
    .crm-col-header .crm-col-stat:nth-child(5) { display: none; }
    .crm-col-tags { display: none; }
    .crm-col-header .crm-col-tags { display: none; }
}
@media (max-width: 500px) {
    .crm-stat-pill { padding: 12px 12px; }
    .crm-pill-value { font-size: 18px; }
    .crm-col-actions { flex-direction: column; }
}


/* ============================================================
   CRM guest list — full redesign
   ============================================================ */
.crm-stat-pills {
    display: flex;
    align-items: stretch;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
}
.crm-stat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    gap: 3px;
    flex: 1;
}
.crm-pill-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--ui-text-1);
    line-height: 1;
}
.crm-pill-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-3);
    white-space: nowrap;
}
.crm-pill-sep {
    width: 1px;
    background: var(--ui-border);
    flex-shrink: 0;
    align-self: stretch;
}
.crm-stat-pill.crm-pill-gold .crm-pill-value { color: #92400e; }
.crm-stat-pill.crm-pill-danger .crm-pill-value { color: var(--ui-danger); }
[data-theme="dark"] .crm-stat-pill.crm-pill-gold .crm-pill-value { color: #fcd34d; }

.crm-panel-top {
    padding: 16px 20px 0;
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.crm-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.crm-search-input {
    flex: 1;
    max-width: 360px;
    padding: 8px 14px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    font-size: 14px;
    background: var(--ui-surface);
    color: var(--ui-text-1);
}
.crm-search-input:focus {
    outline: none;
    border-color: var(--ui-border-strong);
}
.crm-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 14px;
}

.crm-col-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0 10px 52px;
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: 2px;
}
.crm-sort-link {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-3);
    text-decoration: none;
}
.crm-sort-link:hover { color: var(--ui-text-1); }

.crm-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ui-border);
}
.crm-row:last-child { border-bottom: none; }
.crm-row:hover {
    background: var(--ui-surface-2);
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom-color: transparent;
    border-radius: 6px;
}

.crm-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ui-surface-3);
    color: var(--ui-text-2);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

.crm-col-guest { flex: 1; min-width: 0; }
.crm-col-stat { min-width: 72px; text-align: center; flex-shrink: 0; }
.crm-col-tags { min-width: 80px; max-width: 140px; display: flex; flex-wrap: wrap; gap: 4px; flex-shrink: 0; }
.crm-col-actions { display: flex; gap: 6px; flex-shrink: 0; }

.crm-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text-1);
    text-decoration: none;
    display: block;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-name:hover { color: var(--ui-accent); }
.crm-contact {
    font-size: 12px;
    color: var(--ui-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-num { font-size: 14px; font-weight: 600; color: var(--ui-text-1); }
.crm-num-sm { font-size: 13px; font-weight: 500; }
.crm-num-danger { color: var(--ui-danger); }
.crm-dash { color: var(--ui-text-3); font-size: 14px; }

.crm-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--ui-border);
    margin-top: 8px;
}
.crm-pagination-info { font-size: 13px; color: var(--ui-text-3); }
.crm-pagination-controls { display: flex; gap: 6px; align-items: center; }
.crm-pagination-page { font-size: 13px; padding: 6px 12px; color: var(--ui-text-2); }

@media (max-width: 800px) {
    .crm-col-tags { display: none; }
    .crm-col-header .crm-col-tags { display: none; }
}
@media (max-width: 600px) {
    .crm-stat-pill { padding: 12px 10px; }
    .crm-pill-value { font-size: 18px; }
    .crm-col-actions { flex-direction: column; }
}

/* Per-page selector */
.crm-perpage {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.crm-perpage-label {
    font-size: 13px;
    color: var(--ui-text-3);
    margin-right: 4px;
}
.crm-perpage-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 30px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ui-text-2);
    text-decoration: none;
    border: 1px solid transparent;
}
.crm-perpage-opt:hover {
    background: var(--ui-surface-2);
    color: var(--ui-text-1);
}
.crm-perpage-active {
    background: var(--ui-surface-2);
    border-color: var(--ui-border-strong);
    color: var(--ui-text-1);
    font-weight: 700;
}