/* TIOO Dashboard Layout (§4.4a) */
/* Modern, mobile-first dashboard with refined typography */

/* ── Payment Warning Banner ─────────────────────────────── */
.payment-warning-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #fef3cd;
    border-bottom: 2px solid #f59e0b;
    color: #92400e;
    font-size: 14px;
    z-index: 1001;
}
.payment-warning-banner a { color: #92400e; font-weight: 600; text-decoration: underline; }
.payment-warning-content { display: flex; align-items: center; gap: 10px; }
.payment-warning-content svg { flex-shrink: 0; }
.payment-warning-dismiss {
    background: none;
    border: none;
    color: #92400e;
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
}

/* ── Readable greys (2026-10-05) ──────────────────────────
   Dashboard only (base.css is shared with tioo.com + admin). The old
   slate greys were blue-tinted and too light: secondary text #64748b
   was 4.4:1 on the page background (under the 4.5:1 minimum) and the
   light grey #94a3b8 was 2.4:1. Neutral, darker replacements:
   secondary ~6:1, light grey (icons/dividers) ~3.4:1. */
:root {
    --color-gray-400: #8a8a8a;
    --color-gray-500: #5f5f5f;
    --color-gray-600: #4a4a4a;
    --color-gray-700: #333333;
}

/* ── Dashboard Shell ─────────────────────────────────────── */
.dashboard {
    display: flex;
    min-height: 100vh;
    background: var(--color-gray-50);
    overflow-x: hidden;
    max-width: 100vw;
}

/* ── Tenant Dashboard Typography Bump ───────────────────── */
/* Larger text for better readability on tenant side */
.dashboard table { font-size: 16px; }
.dashboard thead th { font-size: 14px; }
.dashboard .form-control { font-size: 15px; }
.dashboard label { font-size: 14px; }
.dashboard .card h3 { font-size: 17px; }

/* Dashboard button — indigo to match sidebar theme */
.dashboard .btn-primary {
    background: linear-gradient(135deg, var(--brand, #4f46e5) 0%, var(--brand-2, #6366f1) 100%);
    border-color: var(--brand, #4f46e5);
    color: #fff;
    box-shadow: 0 1px 3px rgba(var(--brand-rgb, 79, 70, 229), 0.25);
}
.dashboard .btn-primary:visited { color: #fff; }
.dashboard .btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-ink, #4338ca) 0%, var(--brand, #4f46e5) 100%);
    border-color: var(--brand-ink, #4338ca);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--brand-rgb, 79, 70, 229), 0.35);
}

/* ── Sidebar (menu) ───────────────────────────────────────
   Rebuilt 2026-10-08. One dark rail: logo + business at the top,
   grouped items, Customize menu at the bottom. Items sit inset with
   rounded highlights; the active page has a light fill and an amber
   marker. Folded (« button, desktop): icons only, the business initial,
   the TIOO icon, and a floating name label on hover/focus (JS in
   templates/dashboard/base.html). Widths 248 / 68 are used by many page
   layouts (topbar, editor bars) — keep them. */
.sidebar {
    --sb-bg: #0d0e11;
    /* Solid colours (not see-through white): see-through text and icons
       are drawn softer on many screens. */
    --sb-text: #d6d8dd;
    --sb-text-strong: #fff;
    --sb-muted: #8f939c;
    --sb-hover: rgba(255, 255, 255, 0.06);
    --sb-active: rgba(255, 255, 255, 0.1);
    --sb-line: rgba(255, 255, 255, 0.08);
    --sb-focus: #fbbf24;
    width: 248px;
    background: var(--sb-bg);
    color: var(--sb-text-strong);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transition: transform var(--transition-base);
}

.sidebar-header {
    padding: 16px 14px 12px 20px;
    border-bottom: 1px solid var(--sb-line);
}

.sidebar-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
}

.sidebar-header .logo {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    text-decoration: none;
}
.sidebar-header .logo .logo-full { display: block; height: 22px; width: auto; }
.sidebar-header .logo .logo-icon { display: none; width: 32px; height: 32px; }

/* Close button (phones/tablets only) */
.sidebar-close {
    display: none;
    background: none;
    border: none;
    color: var(--sb-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.sidebar-close:hover {
    color: var(--sb-text-strong);
    background: var(--sb-active);
}

/* Business name: initial + name, under the logo */
.sidebar-header .org-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--sb-line);
    min-width: 0;
}
.org-avatar {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: linear-gradient(135deg, #a63446 0%, #d97706 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
}
.org-name-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--sb-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Items ── */
.sidebar-nav {
    flex: 1;
    padding: 8px 0 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    /* An opaque scroll area keeps the browser's sharpest text drawing
       (Chrome drops it on a scrolling layer with no background). */
    background: var(--sb-bg);
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.sidebar-nav .nav-section {
    padding: 16px 22px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sb-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.sidebar-nav .nav-section:first-child { padding-top: 8px; }

.sidebar-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    margin: 1px 8px;
    padding: 0 8px 0 12px;
    border-radius: 8px;
    color: var(--sb-text);
    /* Whole pixels: half-pixel sizes (14.5px) render fuzzier. */
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-nav a:hover {
    color: var(--sb-text-strong);
    background: var(--sb-hover);
    text-decoration: none;
}
.sidebar-nav a.active {
    color: var(--sb-text-strong);
    background: var(--sb-active);
    font-weight: 600;
}
/* Amber marker on the active page */
.sidebar-nav a.active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-accent);
}
.sidebar a:focus-visible,
.sidebar button:focus-visible {
    outline: 2px solid var(--sb-focus);
    outline-offset: -2px;
}

/* Icons */
.sidebar-nav a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    /* No fading: icons take the solid text colour so they stay sharp. */
}
.sidebar-nav a .nav-lock svg,
.sidebar-nav a .nav-star svg { width: auto; height: auto; }

.sidebar-nav a .nav-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Count badges — right-aligned pills */
.nav-badge {
    flex-shrink: 0;
    margin-left: auto;
    background: var(--brand, #4f46e5);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    text-align: center;
    box-sizing: border-box;
}
.nav-badge + .nav-badge { margin-left: 4px; }
.nav-badge--teal { background: #2b8a97; }
.nav-badge--amber { background: #c2410c; }
.nav-badge--rose { background: #e11d48; }

/* Plan-locked items: readable, with the plan they need */
.nav-locked { color: var(--sb-muted) !important; }
.nav-locked svg { opacity: 0.6 !important; }
.nav-locked:hover { color: var(--sb-text) !important; }
.nav-lock {
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.62);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
}
.nav-lock svg { width: 10px !important; height: 10px !important; opacity: 0.9 !important; }
/* The plan name says it all; the padlock only shows when there's no name */
.nav-lock:has(.nav-lock-plan) svg { display: none; }

/* ── Footer ── */
.sidebar-footer {
    padding: 8px 10px;
    border-top: 1px solid var(--sb-line);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-footer-link,
.sidebar-footer a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    padding: 0 10px 0 12px;
    border-radius: 8px;
    color: var(--sb-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.sidebar-footer-link:hover,
.sidebar-footer a:hover {
    color: var(--sb-text-strong);
    background: var(--sb-hover);
}
.sidebar-footer-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.8;
}
.sidebar-footer form { display: inline; }
.sidebar-signout-btn {
    background: none;
    border: none;
    color: var(--sb-muted);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    padding: 0;
    transition: color var(--transition-fast);
}
.sidebar-signout-btn:hover { color: rgba(255, 255, 255, 0.8); }

/* Sidebar backdrop (phones/tablets) */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99;
    opacity: 0;
    transition: opacity var(--transition-base);
}
.sidebar-backdrop.active {
    display: block;
    opacity: 1;
}
/* Prevent body scroll when the menu is open on a phone */
body.sidebar-open { overflow: hidden; }

/* ── Fold button (« / ») ── */
.sidebar-collapse-btn {
    display: none;  /* desktop only, see below */
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--sb-muted);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.sidebar-collapse-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}
.sidebar-collapse-btn:hover {
    color: var(--sb-text-strong);
    background: var(--sb-active);
}
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

/* Group divider line (folded menu only) */
.nav-section-line { display: none; }

/* Floating name label for the folded menu (made by base.html JS) */
.sidebar-tooltip {
    position: fixed;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 280px;
    padding: 6px 10px;
    border-radius: 7px;
    background: #1f2430;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}
.sidebar-tooltip[hidden] { display: none; }
.sidebar-tooltip::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background: inherit;
    transform: rotate(45deg);
}
.sidebar-tooltip-count {
    padding: 0 6px;
    border-radius: 9px;
    background: #c2410c;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
}
.sidebar-tooltip-count--rose { background: #e11d48; }
.sidebar-tooltip-plan {
    padding: 0 7px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    color: rgba(255, 255, 255, 0.8);
}

/* ── Folded menu (desktop only) ── */
@media (min-width: 769px) {
    .sidebar-collapse-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar { transition: width 0.2s ease; }
    .sidebar.collapsed { width: 68px; }

    .sidebar.collapsed .sidebar-header { padding: 14px 0 10px; }
    .sidebar.collapsed .sidebar-header-top {
        flex-direction: column;
        justify-content: center;
        gap: 8px;
    }
    .sidebar.collapsed .logo .logo-full { display: none; }
    .sidebar.collapsed .logo .logo-icon { display: block; }

    .sidebar.collapsed .org-name {
        justify-content: center;
        margin: 10px auto 0;
        padding: 4px;
        width: 40px;
        box-sizing: border-box;
        background: none;
        border-color: transparent;
    }
    .sidebar.collapsed .org-avatar { width: 28px; height: 28px; line-height: 28px; font-size: 13px; }
    .sidebar.collapsed .org-name-text,
    .sidebar.collapsed .sidebar-nav a .nav-text,
    .sidebar.collapsed .sidebar-footer .nav-text {
        /* hidden from sight, still read out by screen readers */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Group headings → thin divider lines */
    .sidebar.collapsed .nav-section { padding: 10px 16px 6px; }
    .sidebar.collapsed .nav-section-text { display: none; }
    .sidebar.collapsed .nav-section-line {
        display: block;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
    }
    .sidebar.collapsed .sidebar-nav .nav-section:first-child { display: none; }

    /* Icon-only items */
    .sidebar.collapsed .sidebar-nav a {
        justify-content: center;
        gap: 0;
        min-height: 40px;
        margin: 2px 10px;
        padding: 0;
    }
    .sidebar.collapsed .sidebar-nav a svg { width: 20px; height: 20px; }
    .sidebar.collapsed .sidebar-nav a.active::before { left: -10px; }

    /* Counts → small bubble at the icon's top-right corner; the second
       (notes) count → a dot at the bottom-right. Exact numbers are in the
       hover label. */
    .sidebar.collapsed .nav-badge {
        position: absolute;
        top: 3px;
        left: calc(50% + 6px);
        margin: 0;
        height: 16px;
        min-width: 16px;
        padding: 0 4px;
        font-size: 10px;
        line-height: 16px;
        box-shadow: 0 0 0 2px var(--sb-bg);
    }
    .sidebar.collapsed .nav-badge--secondary {
        top: auto;
        bottom: 6px;
        left: calc(50% + 7px);
        width: 8px;
        height: 8px;
        min-width: 0;
        padding: 0;
        font-size: 0;
    }
    .sidebar.collapsed .nav-lock { display: none; }

    .sidebar.collapsed .sidebar-footer { padding: 8px 10px; align-items: stretch; }
    .sidebar.collapsed .sidebar-footer-link { justify-content: center; padding: 0; gap: 0; }
    .sidebar.collapsed .sidebar-signout-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        border-radius: 8px;
        width: 100%;
    }
}

/* ── Phones/tablets: off-canvas menu ── */
.sidebar-find, .sidebar-more { display: none; }
@media (max-width: 768px) {
    .sidebar { width: min(300px, 86vw); }
    .sidebar-header { padding: 10px 10px 12px 20px; }
    .sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    .sidebar-nav a,
    .sidebar-footer-link { min-height: 44px; }
    .sidebar-nav .nav-section { padding-top: 18px; }

    /* Find a page + "there's more" fades (owner 2026-10-19). */
    .sidebar-find { display: block; position: relative; padding: 4px 14px 8px; }
    .sidebar-find__icon { position: absolute; left: 26px; top: 16px; width: 16px; height: 16px; color: var(--sb-muted); pointer-events: none; }
    .sidebar-find__input {
        width: 100%; min-height: 40px; padding: 8px 12px 8px 36px;
        border: 1px solid var(--sb-line); border-radius: 10px;
        background: var(--sb-hover); color: var(--sb-text-strong);
        font: inherit; font-size: 15px;
    }
    .sidebar-find__input::placeholder { color: var(--sb-muted); }
    .sidebar-find__input:focus { outline: 2px solid var(--sb-focus); outline-offset: 1px; }
    .sidebar-find__none { margin: 8px 6px 0; font-size: 13px; color: var(--sb-muted); }
    .sidebar-nav.is-finding .nav-section,
    .sidebar-nav.is-finding .nav-favorites { display: none; }
    .sidebar-nav a[hidden] { display: none !important; }
    .sidebar-nav.has-more-bottom { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); }
    .sidebar-nav.has-more-top { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 36px); mask-image: linear-gradient(to bottom, transparent, #000 36px); }
    .sidebar-nav.has-more-top.has-more-bottom { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 36px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 36px, #000 calc(100% - 44px), transparent); }
    .sidebar-more {
        position: absolute; left: 50%; transform: translateX(-50%); z-index: 2;
        display: inline-flex; align-items: center; gap: 4px;
        min-height: 32px; padding: 6px 14px; border: 1px solid var(--sb-line); border-radius: 999px;
        background: var(--sb-bg); color: var(--sb-text-strong); font: inherit; font-size: 13px; font-weight: 600;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); cursor: pointer;
    }
    .sidebar-more[hidden] { display: none; }
}

/* ── Upgrade modal ──────────────────────────────────────── */
.upgrade-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1100;
    align-items: center;
    justify-content: center;
}
.upgrade-modal-overlay.show {
    display: flex;
}
.upgrade-modal {
    background: #fff;
    border-radius: 14px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: upgradeModalIn 0.2s ease;
}
@keyframes upgradeModalIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.upgrade-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px 0;
}
.upgrade-modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
}
.upgrade-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #8a8a8a;
    cursor: pointer;
    padding: 0 4px;
}
.upgrade-modal-close:hover {
    color: #333333;
}
.upgrade-modal-body {
    padding: 10px 22px 16px;
}
.upgrade-modal-desc {
    font-size: 14px;
    color: #5f5f5f;
    margin: 0 0 16px;
    line-height: 1.5;
}
.upgrade-modal-tier {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.upgrade-modal-tier-header {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
}
.upgrade-modal-tier-label {
    font-size: 12px;
    color: #8a8a8a;
    margin: 0 0 8px;
}
.upgrade-modal-tier-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.upgrade-modal-tier-list li {
    font-size: 13px;
    color: #333333;
    padding: 3px 0 3px 20px;
    position: relative;
}
.upgrade-modal-tier-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: 700;
}
.upgrade-modal-tier-list li.upgrade-highlight {
    font-weight: 600;
    color: #1e293b;
}
.upgrade-modal-next-tier {
    font-size: 12px;
    color: #5f5f5f;
    line-height: 1.5;
    padding: 10px 14px;
    background: #fefce8;
    border-radius: 8px;
    margin-bottom: 12px;
}
.upgrade-modal-next-tier strong {
    color: #92400e;
}
.upgrade-modal-reassurance {
    font-size: 12px;
    color: #8a8a8a;
    text-align: center;
    margin: 0;
}
.upgrade-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 12px 22px 18px;
}
.upgrade-modal-cta {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    background: #349ead;
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}
.upgrade-modal-cta:hover {
    background: #2b8a97;
    color: #fff;
}
.upgrade-modal-cancel {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    color: #5f5f5f;
    cursor: pointer;
}
.upgrade-modal-cancel:hover {
    background: #f8fafc;
}

/* ── Feature upsell page (reusable across features) ─────── */
.sp-upsell {
    max-width: 560px;
    text-align: center;
    padding: 48px 32px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 12px;
}
.sp-upsell__icon {
    color: var(--color-primary, #2563eb);
    margin-bottom: 16px;
}
.sp-upsell__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-gray-800, #1f2937);
    margin: 0 0 8px 0;
}
.sp-upsell__desc {
    font-size: 14px;
    color: var(--color-gray-500, #6b7280);
    margin: 0 0 20px 0;
    line-height: 1.6;
}
.sp-upsell__plan {
    font-size: 13px;
    color: var(--color-gray-400, #9ca3af);
    margin: 0 0 24px 0;
}

/* ── Main Content Area ───────────────────────────────────── */
.main-content {
    flex: 1;
    min-width: 0;  /* allow flex child to shrink below content width */
    margin-left: 248px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.2s ease;
}

/* When sidebar is collapsed, shrink the margin */
.dashboard.sidebar-collapsed .main-content {
    margin-left: 68px;
}

/* ── Top Bar ─────────────────────────────────────────────── */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 28px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    position: fixed;
    top: 0;
    right: 0;
    left: 248px;
    z-index: 50;
    height: 64px;
    box-sizing: border-box;
    transition: left 0.2s ease;
}
.dashboard.sidebar-collapsed .topbar {
    left: 68px;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-left h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-gray-900);
    letter-spacing: -0.02em;
}

.topbar-left .breadcrumb {
    font-size: 14px;
    color: var(--color-gray-400);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ── Upgrade Button (topbar) ── */
.topbar-upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-2, #6366f1), #8b5cf6);
    border-radius: 6px;
    text-decoration: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.topbar-upgrade-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ── User Menu Dropdown ── */
.topbar-right .user-menu {
    position: relative;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.user-menu-trigger:hover {
    background: var(--color-gray-100);
}

.user-menu-chevron {
    color: var(--color-gray-400);
    transition: transform 0.2s ease;
}
.user-menu.open .user-menu-chevron {
    transform: rotate(180deg);
}

/* User avatar (first-initial circle) */
.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Dropdown panel */
.user-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 100;
    overflow: hidden;
}
.user-menu.open .user-menu-dropdown {
    display: block;
    animation: userMenuFadeIn 0.15s ease;
}
@keyframes userMenuFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.user-menu-header {
    padding: 14px 16px 12px;
}
.user-menu-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray-900);
}
.user-menu-email {
    font-size: 12px;
    color: var(--color-gray-500);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-menu-meta {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.user-menu-divider {
    height: 1px;
    background: var(--color-gray-100);
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--color-gray-700);
    text-decoration: none;
    transition: background 0.1s ease;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
/* Language row in the user menu (templates/dashboard/_user_menu_lang.html):
   "Language · English ▾" opens a short list under it (phones; desktop has
   the top-bar globe). Rows reuse .tb-item / .tb-check from the top bar. */
.user-menu-lang {
    display: block;
    padding: 4px 6px;
    margin: 0;
}
.user-menu-lang__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--color-gray-700);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.user-menu-lang__btn > svg:first-child { flex-shrink: 0; color: var(--color-gray-400); }
.user-menu-lang__btn:hover,
.user-menu-lang__btn[aria-expanded="true"] { background: var(--color-gray-50); }
.user-menu-lang__label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-400);
}
.user-menu-lang__current {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
}
.user-menu-lang__chev { flex-shrink: 0; margin-left: auto; color: var(--color-gray-400); transition: transform 0.15s ease; }
.user-menu-lang__btn[aria-expanded="true"] .user-menu-lang__chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .user-menu-lang__chev { transition: none; } }
.user-menu-lang__list {
    display: flex;
    flex-direction: column;
    padding: 2px 0 4px 26px;
}
.user-menu-lang__list[hidden] { display: none; }
.user-menu-lang__list .tb-item { min-height: 44px; padding: 8px 10px; }
.user-menu-item:hover {
    background: var(--color-gray-50);
}
.user-menu-item svg {
    color: var(--color-gray-400);
    flex-shrink: 0;
}
.user-menu-item--danger {
    color: var(--color-danger, #ef4444);
}
.user-menu-item--danger svg {
    color: var(--color-danger, #ef4444);
}
.user-menu-item--danger:hover {
    background: #fef2f2;
}

/* Logout button — in-flight spinner + disabled state so prospects see
   visible feedback during the ~1-2s tenant→main→tenant redirect chain. */
.dashboard-logout-spinner {
    display: none;
    width: 14px;
    height: 14px;
    margin-left: auto;
    border: 2px solid rgba(239, 68, 68, 0.25);
    border-top-color: var(--color-danger, #ef4444);
    border-radius: 50%;
    animation: dashboardLogoutSpin 0.7s linear infinite;
}
#dashboardLogoutBtn.is-signing-out .dashboard-logout-spinner {
    display: inline-block;
}
#dashboardLogoutBtn.is-signing-out {
    opacity: 0.75;
    cursor: wait;
}
#dashboardLogoutBtn[disabled] {
    pointer-events: none;
}
@keyframes dashboardLogoutSpin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .dashboard-logout-spinner { animation: none; }
}

/* Plan badge colors */
.badge-plan {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: capitalize;
}
.badge-plan--free { background: #f1f5f9; color: #4a4a4a; }
.badge-plan--starter { background: #dbeafe; color: #1e40af; }
.badge-plan--growth { background: #d1fae5; color: #065f46; }
.badge-plan--pro { background: #fef3c7; color: #92400e; }
.badge-plan--enterprise { background: #ede9fe; color: #5b21b6; }

/* ── Page Content ────────────────────────────────────────── */
.page-content {
    padding: 28px;
    padding-top: 92px; /* 64px topbar + 28px spacing */
    flex: 1;
    overflow-x: hidden;
}
.page-content.has-property-bar {
    padding-top: 144px; /* 64px topbar + 52px property bar + 28px spacing */
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-gray-900);
    letter-spacing: -0.02em;
}

.page-header .actions {
    display: flex;
    gap: 8px;
}

/* ── Stat Cards ──────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 22px 24px;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
}

/* Clickable stat cards — strip the <a> default styles, keep card shape,
   add a subtle lift on hover so prospects know they can click through
   to the underlying surface. */
.stat-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-base), border-color var(--transition-base), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-card--link:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary, #2563eb);
    text-decoration: none;
    color: inherit;
}

/* ─── Dashboard "Needs your attention" card ─── */
.dash-attention-card {
    margin-top: 20px;
    background: linear-gradient(135deg, #FFF8EC 0%, #FEF3DD 100%);
    border: 1px solid #F3DBAC;
    border-radius: var(--radius-xl);
    padding: 18px 22px;
}
.dash-attention-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #8E5720;
}
.dash-attention-card__header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #8E5720;
}
.dash-attention-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dash-attention-card__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(243, 219, 172, 0.6);
    border-radius: 10px;
    text-decoration: none;
    color: #15110A;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.dash-attention-card__row:hover {
    background: #FFFFFF;
    border-color: #B8742E;
    transform: translateX(2px);
    text-decoration: none;
    color: #15110A;
}
.dash-attention-card__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FEF3DD;
    color: #8E5720;
}
.dash-attention-card__icon--pricing { background: #DCFCE7; color: #166534; }
.dash-attention-card__icon--messages { background: #DBEAFE; color: #1E40AF; }
.dash-attention-card__icon--bookings { background: #FEE2E2; color: #B91C1C; }
.dash-attention-card__icon--checkins { background: #FEF3C7; color: #A16207; }
.dash-attention-card__label {
    flex: 1 1 auto;
    min-width: 0;
}
.dash-attention-card__chevron {
    flex: 0 0 auto;
    color: #8E5720;
    opacity: 0.6;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.dash-attention-card__row:hover .dash-attention-card__chevron {
    opacity: 1;
    transform: translateX(2px);
}

/* ─── Dashboard "Quick actions" tile grid ─── */
.dash-actions {
    margin-top: 24px;
}
.dash-actions__header {
    margin-bottom: 12px;
}
.dash-actions__header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-gray-500);
}
.dash-actions__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.dash-action-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, box-shadow 0.18s ease;
}
.dash-action-tile:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary, #2563eb);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: inherit;
}
.dash-action-tile__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #F3F4F6;
    color: var(--color-primary, #2563eb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
.dash-action-tile:hover .dash-action-tile__icon {
    background: var(--color-primary, #2563eb);
    color: #FFFFFF;
}
.dash-action-tile__label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-gray-900, #15110A);
    line-height: 1.3;
}
.dash-action-tile__sub {
    font-size: 13px;
    color: var(--color-gray-500);
    line-height: 1.4;
}

@media (max-width: 640px) {
    .dash-actions__grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .dash-action-tile {
        padding: 14px;
    }
    .dash-action-tile__label {
        font-size: 14px;
    }
    .dash-action-tile__sub {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stat-card--link,
    .dash-action-tile,
    .dash-attention-card__row,
    .dash-attention-card__chevron {
        transition: none !important;
    }
    .stat-card--link:hover,
    .dash-action-tile:hover,
    .dash-attention-card__row:hover {
        transform: none !important;
    }
}

.stat-card .stat-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-500);
    margin-bottom: 6px;
}

.stat-card .stat-value {
    font-size: 30px;
    font-weight: 800;
    color: var(--color-gray-900);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.stat-card .stat-change {
    font-size: 13px;
    font-weight: 600;
    margin-top: 6px;
}

.stat-change.positive { color: var(--color-success); }
.stat-change.negative { color: var(--color-error); }

/* Stat card accent variants (colored top border) */
.stat-card--rooms    { border-top: 3px solid var(--color-info); }
.stat-card--guests   { border-top: 3px solid var(--color-success); }
.stat-card--checkins { border-top: 3px solid var(--color-accent); }
.stat-card--messages { border-top: 3px solid var(--color-error); }
.stat-card--bookings { border-top: 3px solid var(--color-secondary); }
.stat-card--danger   { border-left: 3px solid var(--color-error); }

/* Stat card icon container */
.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.stat-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stat-icon--rooms    { background: #dbeafe; color: #2563eb; }
.stat-icon--guests   { background: #d1fae5; color: #059669; }
.stat-icon--checkins { background: #fef3c7; color: #d97706; }
.stat-icon--messages { background: #fee2e2; color: #dc2626; }
.stat-icon--bookings { background: var(--brand-soft-2, #e0e7ff); color: var(--brand, #4f46e5); }

/* Website builder action cards */
.wb-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.wb-action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-base), border-color var(--transition-base), transform 0.15s ease;
}
.wb-action-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--card-accent) 30%, var(--color-gray-200));
}
.wb-action-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--card-accent) 12%, white);
    color: var(--card-accent);
}
.wb-action-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.wb-action-text strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray-900);
}
.wb-action-text span {
    font-size: 12.5px;
    color: var(--color-gray-500);
    line-height: 1.3;
}

/* Stat card as link (settings overview) */
.stat-card--link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.stat-card--link:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-gray-300);
}

.stat-card-desc {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-top: 4px;
}

/* ── Page Header Subtitle ──────────────────────────────────── */
.page-header__sub {
    font-size: 14px;
    color: var(--color-gray-500);
    margin-top: 2px;
}

/* ── Settings Overview ─────────────────────────────────────── */
.settings-section {
    margin-bottom: 32px;
}
.settings-section__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-gray-200);
}
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
.settings-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.settings-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-gray-300);
    transform: translateY(-1px);
    text-decoration: none;
}
.settings-card__icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.settings-card__icon svg {
    width: 22px;
    height: 22px;
}
.settings-card__icon--indigo { background: var(--brand-soft, #eef2ff); color: var(--brand, #4f46e5); }
.settings-card__icon--indigo svg { stroke: var(--brand, #4f46e5); }
.settings-card__icon--teal { background: #f0fdfa; color: #0d9488; }
.settings-card__icon--teal svg { stroke: #0d9488; }
.settings-card__icon--amber { background: #fffbeb; color: #d97706; }
.settings-card__icon--amber svg { stroke: #d97706; }
.settings-card__icon--green { background: #f0fdf4; color: #16a34a; }
.settings-card__icon--green svg { stroke: #16a34a; }
.settings-card__icon--violet { background: #f5f3ff; color: #7c3aed; }
.settings-card__icon--violet svg { stroke: #7c3aed; }
.settings-card__icon--rose { background: #fff1f2; color: #e11d48; }
.settings-card__icon--rose svg { stroke: #e11d48; }
.settings-card__icon--sky { background: #f0f9ff; color: #0284c7; }
.settings-card__icon--sky svg { stroke: #0284c7; }
.settings-card__icon--red { background: #fef2f2; color: #dc2626; }
.settings-card__icon--red svg { stroke: #dc2626; }
.settings-card__body {
    flex: 1;
    min-width: 0;
}
.settings-card__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-gray-900);
    line-height: 1.3;
}
.settings-card__desc {
    font-size: 13px;
    color: var(--color-gray-500);
    margin-top: 2px;
    line-height: 1.4;
}
.settings-card__arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-gray-400);
    transition: color var(--transition-fast), transform var(--transition-fast);
}
.settings-card:hover .settings-card__arrow {
    color: var(--color-gray-600);
    transform: translateX(2px);
}
/* Danger variant */
.settings-card--danger {
    border-color: #fecaca;
    background: #fef2f2;
}
.settings-card--danger:hover {
    border-color: #fca5a5;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.1);
}
.settings-card--danger .settings-card__name {
    color: #991b1b;
}
.settings-card--danger .settings-card__desc {
    color: #b91c1c;
}

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

/* ── Team Members ──────────────────────────────────────────── */
.team-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.team-header h2 {
    margin: 0;
}
.team-header .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
/* ── Team List (row-based) ── */
.team-list {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.team-list--removed {
    margin-top: 12px;
}
.team-row {
    display: grid;
    grid-template-columns: 1fr 120px 120px 200px 40px;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--color-gray-100);
    transition: background var(--transition-fast);
}
.team-row:last-child {
    border-bottom: none;
}
a.team-row:hover {
    background: var(--color-gray-50);
    text-decoration: none;
    color: inherit;
}
a.team-row:focus-visible {
    outline: 2px solid var(--brand, #4f46e5);
    outline-offset: -2px;
}
.team-row--removed {
    opacity: 0.55;
}
.team-row__left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.team-row__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.team-row__avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}
.team-row__avatar--owner { background: var(--brand, #4f46e5); }
.team-row__avatar--admin { background: #7c3aed; }
.team-row__avatar--manager { background: #0d9488; }
.team-row__avatar--receptionist { background: #0284c7; }
.team-row__avatar--cleaner { background: #d97706; }
.team-row__avatar--removed { background: var(--color-gray-400); }
.team-row__info {
    min-width: 0;
    flex: 1;
}
.team-row__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team-row__email {
    font-size: 13px;
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team-row__middle {
    display: flex;
    align-items: center;
    gap: 10px;
}
.team-row__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.team-row__action-hint {
    color: var(--color-gray-400);
}
.team-row__chevron {
    color: var(--color-gray-300);
    transition: transform var(--transition-fast);
}
a.team-row:hover .team-row__chevron {
    color: var(--color-gray-500);
    transform: translateX(2px);
}
/* Column header row */
.team-row--header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-400);
    padding: 10px 20px;
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    cursor: default;
}
/* Phone / Joined columns */
.team-row__col {
    min-width: 0;
}
.team-row__phone,
.team-row__date {
    font-size: 13px;
    color: var(--color-gray-500);
}
.team-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 20px;
}
.team-badge--owner { background: var(--brand-soft, #eef2ff); color: var(--brand-ink, #4338ca); }
.team-badge--admin { background: #f5f3ff; color: #6d28d9; }
.team-badge--manager { background: #f0fdfa; color: #0f766e; }
.team-badge--receptionist { background: #f0f9ff; color: #0369a1; }
.team-badge--cleaner { background: #fffbeb; color: #b45309; }
.team-badge--removed { background: var(--color-gray-100); color: var(--color-gray-500); }
.team-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-gray-500);
}
.team-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}
.team-status--active .team-status__dot { background: #16a34a; }
.team-status--active { color: #16a34a; }
.team-status--invited .team-status__dot { background: #d97706; }
.team-status--invited { color: #d97706; }
.team-status--removed .team-status__dot { background: var(--color-gray-400); }
.team-status--removed { color: var(--color-gray-500); }
/* ── Team Invite (Phase A.1 of POST_BILLING_AUDIT_PLAN) ── */
.team-row-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}
.team-row-wrap .team-row {
    flex: 1;
    min-width: 0;
}
.team-row__date--pending {
    color: #b45309;
    font-weight: 500;
}
.team-invite-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 6px;
    white-space: nowrap;
}
.team-invite-badge--pending { background: #fef3c7; color: #92400e; }
.team-invite-badge--sent { background: #dcfce7; color: #166534; }
.team-invite-badge--failed { background: #fee2e2; color: #991b1b; }
.team-row__resend-form {
    margin: 0;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-left: 1px solid var(--color-gray-100);
}
.team-row__resend-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #1e3a5f;
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.team-row__resend-btn:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-400);
}
.team-row__resend-btn:active {
    background: var(--color-gray-100);
}
@media (max-width: 768px) {
    .team-row__resend-form {
        padding: 0 8px;
    }
    .team-row__resend-btn span,
    .team-row__resend-btn {
        font-size: 11px;
    }
}
/* ── Team Profile (detail page) ── */
.team-profile {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.team-profile__header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px;
    border-bottom: 1px solid var(--color-gray-100);
}
.team-profile__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.team-profile__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}
.team-profile__avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}
.team-profile__avatar--owner { background: var(--brand, #4f46e5); }
.team-profile__avatar--admin { background: #7c3aed; }
.team-profile__avatar--manager { background: #0d9488; }
.team-profile__avatar--receptionist { background: #0284c7; }
.team-profile__avatar--cleaner { background: #d97706; }
.team-profile__avatar--removed { background: var(--color-gray-400); }
.team-profile__avatar-actions {
    position: absolute;
    bottom: -4px;
    right: -4px;
    display: flex;
    gap: 4px;
}
.team-avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-600);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.team-avatar-btn:hover {
    background: var(--color-gray-50);
    color: var(--color-gray-900);
}
.team-avatar-btn--remove:hover {
    background: #fef2f2;
    color: #dc2626;
}
.team-avatar-btn:focus-visible {
    outline: 2px solid var(--brand, #4f46e5);
    outline-offset: 2px;
}
.team-profile__avatar-form {
    display: inline;
}
.team-profile__info {
    min-width: 0;
}
.team-profile__name {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 4px;
}
.team-profile__email {
    font-size: 14px;
    color: var(--color-gray-500);
    margin-bottom: 10px;
}
.team-profile__badges {
    display: flex;
    align-items: center;
    gap: 10px;
}
.team-profile__details {
    padding: 24px 28px;
    border-bottom: 1px solid var(--color-gray-100);
}
.team-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
.team-detail-item__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gray-400);
    margin-bottom: 4px;
}
.team-detail-item__value {
    font-size: 14px;
    color: var(--color-gray-900);
    font-weight: 500;
}
.team-profile__section {
    padding: 24px 28px;
    border-bottom: 1px solid var(--color-gray-100);
}
.team-profile__section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-gray-700);
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.team-perm-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.team-perm {
    font-size: 13px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 20px;
}
.team-perm--granted {
    background: #f0fdf4;
    color: #15803d;
}
.team-perm--denied {
    background: var(--color-gray-50);
    color: var(--color-gray-400);
    text-decoration: line-through;
}
.team-profile__actions {
    display: flex;
    gap: 10px;
    padding: 24px 28px;
}

/* Removed members collapsible */
.team-removed-section {
    margin-top: 28px;
}
.team-removed-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray-500);
    cursor: pointer;
    padding: 6px 0;
    list-style: none;
}
.team-removed-toggle::-webkit-details-marker { display: none; }
.team-removed-toggle:focus-visible {
    outline: 2px solid var(--brand, #4f46e5);
    outline-offset: 2px;
    border-radius: 4px;
}
.team-removed-toggle svg {
    transition: transform var(--transition-fast);
}
.team-removed-section[open] .team-removed-toggle svg {
    transform: rotate(180deg);
}

/* Team empty state */
.team-empty {
    text-align: center;
    padding: 60px 24px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
}
.team-empty__icon {
    color: var(--color-gray-300);
    margin-bottom: 16px;
}
.team-empty__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 6px;
}
.team-empty__desc {
    font-size: 14px;
    color: var(--color-gray-500);
    margin-bottom: 20px;
}

/* Team form pages (invite / edit / remove) */
.team-form-card {
    max-width: 520px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 28px;
}
.team-form-card--danger {
    border-color: #fecaca;
}
.team-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.form-optional {
    font-weight: 400;
    color: var(--color-gray-400);
    font-size: 12px;
}
.team-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}
.team-role-hints {
    margin-top: 10px;
    display: grid;
    gap: 6px;
}
.team-role-hint {
    font-size: 12px;
    color: var(--color-gray-500);
    line-height: 1.4;
}
.team-role-hint strong {
    color: var(--color-gray-700);
}
.team-remove-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-gray-100);
}
.team-remove-warning {
    font-size: 14px;
    color: var(--color-gray-600);
    line-height: 1.5;
}
.dashboard .btn-danger {
    background: #dc2626;
    color: #fff;
    border: none;
}
.dashboard .btn-danger:hover {
    background: #b91c1c;
}
.form-error {
    color: #dc2626;
    font-size: 12px;
    margin-top: 4px;
}
/* Global utility buttons */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--brand, #4f46e5);
    background: #fff;
    border: 1px solid var(--brand, #4f46e5);
    border-radius: 8px;
    padding: 6px 14px;
    text-decoration: none;
    margin-bottom: 8px;
    transition: background 0.15s, color 0.15s;
}
.btn-back:hover {
    background: var(--brand, #4f46e5);
    color: #fff;
    text-decoration: none;
}
.btn-back:focus-visible,
.btn-secondary:focus-visible,
.dashboard .btn-primary:focus-visible,
.dashboard .btn-danger:focus-visible {
    outline: 2px solid var(--brand, #4f46e5);
    outline-offset: 2px;
}
.btn-secondary {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    border: none;
    text-decoration: none;
}
.btn-secondary:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-800);
    text-decoration: none;
}

@media (max-width: 768px) {
    .team-row--header { display: none; }
    .team-row__col { display: none; }
    .team-row {
        grid-template-columns: 1fr auto auto;
    }
    .team-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .team-header {
        flex-direction: column;
    }
    .team-row {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }
    .team-row__middle {
        grid-column: 1 / -1;
    }
    .team-profile__header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    .team-profile__badges {
        justify-content: center;
    }
    .team-detail-grid {
        grid-template-columns: 1fr 1fr;
    }
    .team-profile__actions {
        flex-direction: column;
    }
    .team-profile__actions .btn {
        justify-content: center;
    }
}

/* ── Website List ────────────────────────────────────────── */
.ws-list {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow-x: auto;
}
.ws-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.4fr) minmax(130px, 1.2fr) 85px 45px 80px 80px minmax(200px, 1.2fr);
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-gray-100);
}
.ws-row:last-child { border-bottom: none; }
.ws-row--header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-400);
    padding: 10px 20px;
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    cursor: default;
}
.ws-row__name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ws-row__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ws-row__icon--portfolio { background: #ede9fe; color: #6d28d9; }
.ws-row__icon--property { background: #dbeafe; color: #2563eb; }
.ws-row__info { min-width: 0; }
.ws-row__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-row__type {
    font-size: 12px;
    color: var(--color-gray-400);
}
.ws-row__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ws-row__props {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.ws-prop-pill {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 500;
    padding: 1px 6px;
    background: var(--color-gray-50, #f8fafc);
    border: 1px solid var(--color-gray-200, #e2e8f0);
    border-radius: 10px;
    color: var(--color-gray-600, #475569);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ws-row__props-col {
    min-width: 0;
}
.ws-row__col { min-width: 0; }
.ws-row__template,
.ws-row__pages,
.ws-row__date {
    font-size: 12px;
    color: var(--color-gray-500);
}
.ws-row__domain {
    font-size: 13px;
    color: var(--brand, #4f46e5);
    font-weight: 500;
}
.ws-row__domain--none {
    color: var(--color-gray-400);
}
.ws-row__status { min-width: 0; }
.ws-row__edit-props { min-width: 0; text-align: center; }
.ws-row__edit-props a {
    color: var(--brand, #4f46e5);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ws-row__edit-props a:hover {
    color: var(--brand-ink-2, #3730a3);
}
.ws-row__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.ws-btn--publish {
    color: #16a34a;
    border-color: #16a34a;
    font-size: 12px;
}
.ws-btn--publish:hover {
    background: #f0fdf4;
}
.ws-btn--view {
    color: var(--brand, #4f46e5);
    border-color: var(--brand, #4f46e5);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}
.ws-btn--view:hover {
    background: var(--brand-soft, #eef2ff);
    text-decoration: none;
}
.ws-btn--delete {
    color: var(--color-gray-400);
    border-color: var(--color-gray-300);
    padding: 4px 8px;
}
.ws-btn--delete:hover {
    color: #dc2626;
    border-color: #dc2626;
    background: #fef2f2;
}
.ws-btn--publish:focus-visible {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}
.ws-btn--view:focus-visible {
    outline: 2px solid var(--brand, #4f46e5);
    outline-offset: 2px;
}
.ws-btn--delete:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}
.inline-form { display: inline; margin: 0; }
.website-upgrade-btn {
    font-size: 13px;
    color: var(--color-gray-500);
    gap: 6px;
}
.website-upgrade-btn:hover {
    color: var(--brand, #4f46e5);
    border-color: var(--brand, #4f46e5);
}
/* Website modals */
.wb-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.wb-modal {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    max-width: 440px;
    width: 100%;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.wb-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    color: #8a8a8a;
    cursor: pointer;
    line-height: 1;
}
.wb-modal-close:hover { color: #333333; }
.wb-modal-icon { margin-bottom: 16px; }
.wb-modal h3 {
    margin: 0 0 8px;
    font-size: 1.15rem;
    color: #1e293b;
}
.wb-modal p {
    margin: 0 0 20px;
    font-size: 0.9rem;
    color: #5f5f5f;
    line-height: 1.6;
}
.wb-modal-count {
    font-size: 0.85rem !important;
    font-weight: 600;
    color: #f59e0b !important;
    margin-bottom: 12px !important;
}
.wb-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.ws-row__hint { font-size: 11px; color: var(--color-gray-400); }
.ws-btn--props { font-size: 12px; }
.ws-btn--delete .ws-btn__text { display: none; }
@media (max-width: 900px) {
    .wb-modal { padding: 24px; }
    /* One card per website on narrow screens (the table hid the buttons) */
    .ws-list { overflow: visible; background: none; border: none; display: grid; gap: 12px; }
    .ws-row--header { display: none; }
    .ws-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "name name status"
            "props props props"
            "tpl pages date"
            "actions actions actions";
        gap: 12px;
        padding: 16px;
        background: var(--color-white);
        border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-xl);
    }
    .ws-row:last-child { border-bottom: 1px solid var(--color-gray-200); }
    .ws-row__name { grid-area: name; }
    .ws-row__title { white-space: normal; }
    .ws-row__status { grid-area: status; justify-self: end; }
    .ws-row__props-col { grid-area: props; }
    .ws-row__props { flex-direction: row; flex-wrap: wrap; }
    .ws-row__col--template { grid-area: tpl; }
    .ws-row__col--pages { grid-area: pages; }
    .ws-row__col--date { grid-area: date; }
    .ws-row__col::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: var(--color-gray-400);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 2px;
    }
    .ws-row__col span { font-size: 13px; color: var(--color-gray-700); }
    .ws-row__actions {
        grid-area: actions;
        justify-content: stretch;
        border-top: 1px solid var(--color-gray-100);
        padding-top: 12px;
    }
    .ws-row__actions > .btn,
    .ws-row__actions > .inline-form { flex: 1 1 calc(50% - 6px); }
    .ws-row__actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
    .ws-btn--delete .ws-btn__text { display: inline; }
}

/* ── Smart Locks Dashboard ───────────────────────────────── */
.lock-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 24px;
    font-size: 14px;
    flex-wrap: wrap;
}
.lock-banner--ok { background: #d1fae5; }
.lock-banner--error { background: #fee2e2; }
.lock-banner--off { background: var(--color-gray-100); }
.lock-banner__method {
    background: #ede9fe;
    color: #7c3aed;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.lock-banner__provider { font-weight: 500; }
.lock-banner__sync { color: var(--color-gray-500); }
.lock-banner__error { color: #dc2626; }
.lock-banner--ok .lock-banner__error { margin-left: auto; }
.lock-banner__link { color: var(--brand, #4f46e5); margin-left: auto; text-decoration: none; font-weight: 500; }
.lock-banner__link:hover { text-decoration: underline; }

/* Lock card sections */
.lock-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 24px;
}
.lock-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-gray-200);
}
.lock-card__header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-gray-900);
}
.lock-card__note {
    padding: 8px 20px 14px;
    font-size: 12px;
    color: var(--color-gray-400);
}
.lock-card__empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-gray-500);
}
.lock-card__empty p { margin: 0 0 6px; }
.lock-card__empty p:first-child { font-size: 16px; }
.lock-card__empty p:last-child { font-size: 14px; }
.lock-card__empty a { color: var(--brand, #4f46e5); text-decoration: none; }
.lock-card__empty a:hover { text-decoration: underline; }

/* Page-level tabs (Overview / Settings) */
.lock-page-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-gray-200);
    margin-bottom: 24px;
}
.lock-page-tab {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-500);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.12s ease;
}
.lock-page-tab:hover { color: var(--color-gray-700); }
.lock-page-tab--active {
    font-weight: 600;
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Provider rows (Settings tab) */
.lock-provider-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-gray-100);
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease;
}
.lock-provider-row:last-child { border-bottom: none; }
.lock-provider-row:hover:not(.lock-provider-row--disabled) { background: var(--color-gray-50); }
.lock-provider-row--disabled { cursor: default; opacity: 0.65; }
.lock-provider-row__icon {
    width: 40px;
    height: 40px;
    background: var(--color-gray-100);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lock-provider-row__info { flex: 1; min-width: 0; }
.lock-provider-row__name { font-weight: 600; font-size: 15px; color: var(--color-gray-900); }
.lock-provider-row__desc { font-size: 13px; color: var(--color-gray-500); margin-top: 2px; }
.lock-provider-row__status { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lock-provider-row__count { font-size: 13px; color: var(--color-gray-500); }
.lock-provider-row__action { flex-shrink: 0; }

@media (max-width: 640px) {
    .lock-provider-row {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px;
    }
    .lock-provider-row__info { width: calc(100% - 56px); }
    .lock-provider-row__status { width: 100%; padding-left: 56px; }
    .lock-provider-row__action { width: 100%; padding-left: 56px; }
    .lock-provider-row__desc { display: none; }
}

/* Door-number badge drops to its own line below the room name app-wide
   (was mobile-only until 2026-05-06). Reservation list room column was
   the visible failure: the badge sat inline next to the room name and
   got truncated by ellipsis at narrower column widths. Stacking below
   reads as a sub-label and never gets hidden. The inline `style=
   "margin-left: 4px"` on the include is overridden by `margin: 4px 0 0
   !important` here so the rule wins regardless of attribute specificity.
   Applied app-wide via templates/properties/_door_number_badge.html
   — affects reservation list, cleaning task list, guest list, room
   list, lock dashboard, etc. — same visual treatment everywhere.

   Strip the .badge pill padding so the door number text aligns flush-
   left with the room name above. The pill's `padding: 3px 10px` was
   designed for inline-next-to-name placement; once we stack below, the
   10px horizontal padding visibly indents the text away from the room
   name's left edge. Killing the padding (and any background, defensively)
   makes it read as a clean sub-label. Font-size + font-weight from .badge
   stay — they're fine for a metadata line. */
.door-num-badge {
    display: block;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
}

/* Lock overview rows */
.lock-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 160px 110px 100px auto;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-gray-100);
}
.lock-row:last-child { border-bottom: none; }
.lock-row--header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-400);
    padding: 10px 20px;
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    cursor: default;
}
.lock-row__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
}
.lock-row__icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #ede9fe;
    color: #6d28d9;
}
.lock-row__col { font-size: 13px; color: var(--color-gray-500); min-width: 0; }
.lock-row__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
.lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.lock-badge--green { background: #d1fae5; color: #15803d; }
.lock-badge--yellow { background: #fef9c3; color: #a16207; }
.lock-badge--red { background: #fee2e2; color: #dc2626; }
.lock-badge--blue { background: #dbeafe; color: #2563eb; }
.lock-badge--gray { background: #f3f4f6; color: #5f5f5f; }
.lock-online {
    font-size: 11px;
    margin-left: 4px;
}
.lock-online--yes { color: #16a34a; }
.lock-online--no { color: #dc2626; }

/* PIN tabs */
.lock-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-gray-200);
    padding: 0 20px;
    gap: 0;
}
.lock-tab {
    padding: 10px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-500);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.lock-tab:hover { color: var(--color-gray-700); }
.lock-tab.active {
    font-weight: 600;
    color: var(--brand, #4f46e5);
    border-bottom-color: var(--brand, #4f46e5);
}
.lock-tab:focus-visible {
    outline: 2px solid var(--brand, #4f46e5);
    outline-offset: -2px;
}

/* PIN rows */
.pin-row {
    display: grid;
    grid-template-columns: 1fr 100px 90px 120px 80px auto;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-gray-100);
}
.pin-row:last-child { border-bottom: none; }
.pin-row--header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-400);
    padding: 10px 20px;
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    cursor: default;
}
.pin-row--pending { grid-template-columns: 1fr 100px 120px 80px auto; }
.pin-row--expired { grid-template-columns: 1fr 100px 90px 120px 80px; }
.pin-row__guest {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray-900);
}
.pin-row__col { font-size: 13px; color: var(--color-gray-500); min-width: 0; }
.pin-row__pin {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--color-gray-700);
    font-weight: 500;
}
.pin-row__pin--expired { color: var(--color-gray-400); }
.pin-row__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
.lock-tab-content { padding: 0; }
.lock-tab-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--color-gray-500);
    font-size: 14px;
}

/* Activity log rows */
.activity-row {
    display: grid;
    grid-template-columns: 130px 1fr 140px 100px;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-gray-100);
}
.activity-row:last-child { border-bottom: none; }
.activity-row--header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-400);
    padding: 10px 20px;
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    cursor: default;
}
.activity-row__time { font-size: 13px; color: var(--color-gray-500); }
.activity-row__event { font-size: 13px; color: var(--color-gray-700); font-weight: 500; }
.activity-row__lock {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    color: var(--color-gray-500);
}

/* Lock button styles */
.lock-btn--unlock {
    color: var(--brand, #4f46e5);
    border: 1px solid var(--brand, #4f46e5);
    background: #fff;
    font-size: 12px;
}
.lock-btn--unlock:hover { background: var(--brand-soft, #eef2ff); }
.lock-btn--regen {
    color: #d97706;
    border: 1px solid #d97706;
    background: #fff;
    font-size: 12px;
}
.lock-btn--regen:hover { background: #fffbeb; }
.lock-btn--revoke {
    color: #dc2626;
    border: 1px solid #dc2626;
    background: #fff;
    font-size: 12px;
}
.lock-btn--revoke:hover { background: #fef2f2; }
.lock-btn--generate {
    color: #16a34a;
    border: 1px solid #16a34a;
    background: #fff;
    font-size: 12px;
}
.lock-btn--generate:hover { background: #f0fdf4; }
.lock-btn--unlock:focus-visible { outline: 2px solid var(--brand, #4f46e5); outline-offset: 2px; }
.lock-btn--regen:focus-visible { outline: 2px solid #d97706; outline-offset: 2px; }
.lock-btn--revoke:focus-visible { outline: 2px solid #dc2626; outline-offset: 2px; }
.lock-btn--generate:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }

/* Mobile sub-lines (hidden on desktop, shown on mobile) */
.lock-row__sub { display: none; }
.lock-row__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray-900);
}
.pin-row__sub,
.pin-row__pin-inline,
.activity-row__sub { display: none; }

/* Lock responsive */
@media (max-width: 768px) {
    .lock-row { grid-template-columns: 1fr 100px auto; }
    .lock-row__col:nth-child(2) { display: none; }
    .pin-row { grid-template-columns: 1fr 90px 80px auto; }
    .pin-row--pending { grid-template-columns: 1fr 80px auto; }
    .pin-row--expired { grid-template-columns: 1fr 90px 80px; }
    .pin-row__col:nth-child(4) { display: none; }
    .activity-row { grid-template-columns: 100px 1fr 80px; }
    .activity-row__lock { display: none; }
}
@media (max-width: 640px) {
    .lock-row--header,
    .pin-row--header,
    .activity-row--header { display: none; }

    /* Lock rows — show name + sub-info stacked */
    .lock-row {
        grid-template-columns: 1fr auto;
        gap: 8px;
    }
    .lock-row__col { display: none; }
    .lock-row__title { display: block; font-weight: 600; }
    .lock-row__sub {
        display: block;
        font-size: 12px;
        color: var(--color-gray-400);
        margin-top: 2px;
    }
    .lock-row__name { align-items: flex-start; }

    /* PIN rows — show guest + sub-info stacked */
    .pin-row {
        grid-template-columns: 1fr auto;
        gap: 8px;
    }
    .pin-row__col,
    .pin-row__pin { display: none; }
    .pin-row__sub {
        display: block;
        font-size: 12px;
        color: var(--color-gray-400);
        margin-top: 2px;
    }
    .pin-row__pin-inline {
        display: inline;
        font-family: 'SF Mono', 'Fira Code', monospace;
        letter-spacing: 1px;
        font-weight: 500;
    }
    .pin-row__actions { grid-column: 1 / -1; }
    .pin-row--expired .pin-row__guest { color: var(--color-gray-500); }

    /* Activity rows — show event + sub-info */
    .activity-row {
        grid-template-columns: 1fr auto;
        gap: 6px;
    }
    .activity-row__time,
    .activity-row__lock { display: none; }
    .activity-row__sub {
        display: block;
        font-size: 12px;
        color: var(--color-gray-400);
        margin-top: 2px;
    }

    /* Tabs scrollable */
    .lock-tabs { overflow-x: auto; }
    .lock-tab { font-size: 13px; padding: 10px 12px; white-space: nowrap; }

    /* Banner stacks better */
    .lock-banner { gap: 8px; }
    .lock-banner__link { margin-left: 0; }
}

/* ── Grid Layout ─────────────────────────────────────────── */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* ── Card Header Link ────────────────────────────────────── */
.card-header-link {
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.card-header-link:hover {
    color: var(--color-accent);
}

/* ── Empty State Compact (inside cards) ──────────────────── */
.empty-state--compact {
    padding: var(--space-8) var(--space-4);
}

/* ── Utility Classes ─────────────────────────────────────── */
.inline-form {
    display: inline;
}

.mt-section {
    margin-top: 24px;
}

/* ── Mobile Sidebar Toggle ───────────────────────────────── */
.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-gray-600);
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.sidebar-toggle:hover {
    background: var(--color-gray-100);
}

/* ── Responsive Table → Card Stacking (opt-in) ──────────── */
/* Add class="table-responsive-cards" + data-label on <td>s  */
/* On desktop: normal table. On mobile: stacked card layout  */

/* No menu slide while the window changes size (sidebar_resize_guard.js) —
   switching to a phone size used to flash the menu open then closed. */
html.sb-resizing .sidebar,
html.sb-resizing .sidebar-backdrop { transition: none !important; }

/* ── Mobile Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-2xl);
    }
    .main-content {
        margin-left: 0;
    }
    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    .sidebar-collapse-btn {
        display: none !important;
    }
    .grid-2 {
        grid-template-columns: 1fr;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .page-content {
        padding: 20px;
        padding-top: 76px; /* 56px topbar + 20px spacing */
    }
    .page-content.has-property-bar {
        padding-top: 128px; /* 56px topbar + 52px property bar + 20px spacing */
    }
    .topbar {
        padding: 14px 20px;
        height: 56px;
        left: 0;
    }
    /* Hide upgrade text on mobile, show icon only */
    .topbar-upgrade-btn span {
        display: none;
    }
    .topbar-upgrade-btn {
        padding: 6px 8px;
    }

    /* User menu dropdown full-width on mobile */
    .user-menu-dropdown {
        width: 240px;
        right: -8px;
    }

    /* Responsive table card stacking */
    .table-responsive-cards thead {
        display: none;
    }
    .table-responsive-cards tbody tr {
        display: block;
        background: var(--color-white);
        border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
        margin-bottom: var(--space-3);
    }
    .table-responsive-cards tbody tr:hover {
        background: var(--color-white);
    }
    .table-responsive-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--color-gray-100);
    }
    .table-responsive-cards tbody td:last-child {
        border-bottom: none;
    }
    .table-responsive-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: var(--text-xs);
        color: var(--color-gray-500);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex-shrink: 0;
        margin-right: var(--space-3);
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .stat-card {
        padding: 16px;
    }
    .stat-card .stat-value {
        font-size: 22px;
    }
    .stat-card .stat-label {
        font-size: 12px;
    }
    .stat-icon {
        width: 34px;
        height: 34px;
        margin-bottom: 8px;
    }
    .stat-icon svg {
        width: 16px;
        height: 16px;
    }
    .user-info .user-name {
        display: none;
    }
}

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

/* ── Impersonation Banner ────────────────────────────────── */
.impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
    padding: 10px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.impersonation-end-btn {
    background: #78350f;
    color: #fff;
    padding: 6px 16px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: background var(--transition-fast);
}

.impersonation-end-btn:hover {
    background: #451a03;
    color: #fff;
}

/* The End buttons are POST forms (2026-10-13) */
.imp-banner__end {
    margin: 0;
}

.imp-banner__end .impersonation-end-btn {
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

/* Push everything down when impersonation banner is shown. Since
   2026-10-08 the banners set --dash-top, which the sidebar, top bar and
   property strip all read (the property strip used to stay at 64px and
   hide under the top bar). topbar_menus.js replaces 42px with the
   banner's real height (it wraps on phones). */
.impersonation-banner + .sidebar-backdrop + .dashboard,
.impersonation-banner + .dashboard {
    --dash-top: 42px;
}

/* ── Silent (investigative) impersonation banner ──
 * Deliberately distinct from tier-1's amber. Dark red = "high-stakes
 * mode, do not confuse with the transparent impersonation you use
 * every day". Only ever rendered on the operator's session — a real
 * tenant user's session doesn't have the is_silent_investigation flag.
 * Countdown JS lives inline in dashboard/base.html.
 */
.silent-impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: linear-gradient(90deg, #991b1b 0%, #7c2d12 100%);
    color: #fef2f2;
    padding: 10px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.silent-impersonation-icon {
    font-size: 16px;
    line-height: 1;
}

.silent-impersonation-countdown {
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.silent-impersonation-end-btn {
    background: #fef2f2;
    color: #7f1d1d;
    padding: 6px 14px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: background var(--transition-fast);
}

.silent-impersonation-end-btn:hover {
    background: #fecaca;
}

/* Both bars (2026-10-13): mode pill, time left, wrap on phones. */
.impersonation-banner,
.silent-impersonation-banner {
    flex-wrap: wrap;
    row-gap: 6px;
}

.imp-banner__mode {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.silent-impersonation-banner .imp-banner__mode {
    background: rgba(255, 255, 255, 0.16);
}

.imp-banner__time {
    font-weight: 500;
    white-space: nowrap;
}

.imp-banner__count {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.impersonation-banner.is-ending .imp-banner__count,
.silent-impersonation-banner.is-ending .silent-impersonation-countdown {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .impersonation-banner,
    .silent-impersonation-banner {
        padding: 8px 12px;
        gap: 6px 10px;
        font-size: 13px;
    }
    .impersonation-end-btn,
    .silent-impersonation-end-btn {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
}

/* Push everything down when silent banner is shown (same 42px offset). */
.silent-impersonation-banner + .sidebar-backdrop + .dashboard,
.silent-impersonation-banner + .dashboard {
    --dash-top: 42px;
}

/* ── Feature Gate: locked overlay for tier-gated UI ── */
.feature-locked {
    position: relative;
    pointer-events: none;
    opacity: 0.5;
}
.feature-locked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.4);
    border-radius: inherit;
    z-index: 2;
    cursor: not-allowed;
}
.feature-locked .tier-badge {
    pointer-events: auto;
}

/* Tier badges */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    color: #fff;
    letter-spacing: 0.02em;
}
.tier-badge-growth { background: #f59e0b; }
.tier-badge-pro { background: #8b5cf6; }

/* ── Drag-and-drop: SortableJS ghost + handle ── */
.drag-handle {
    cursor: grab;
    color: var(--color-gray-400, #8f8e8d);
    padding: 2px 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}
.drag-handle:hover {
    color: var(--color-gray-600, #475569);
}
.drag-handle:active {
    cursor: grabbing;
}
.sortable-ghost {
    opacity: 0.4;
    border: 2px dashed var(--color-primary, #2563eb) !important;
    background: rgba(37, 99, 235, 0.04) !important;
}
.sortable-drag {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    border-radius: 8px;
}
.sortable-chosen {
    background: #f8fafc;
}

/* ── Settings Form Layout ──────────────────────────────── */
.settings-form {
    max-width: 840px;
}
.form-section {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
}
.form-section h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--color-gray-900, #111827);
}
.form-section > p {
    font-size: 13px;
    color: var(--color-gray-500, #6b7280);
    margin: 0 0 16px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 8px;
}

@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    .form-section {
        padding: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════
   Dashboard Polish — DigitalOcean-inspired refinements
   Scoped to .dashboard so public site is unaffected
   ═══════════════════════════════════════════════════════════ */

/* Softer page background */
.dashboard {
    background: #f6f8fa;
}
/* Phones: one white surface — text always sits on white, no grey page
   behind white boxes (2026-10-05 readability pass). */
@media (max-width: 768px) {
    .dashboard,
    .dashboard-page { background: #ffffff; }
}

/* More breathing room in content area */
.dashboard .page-content {
    padding: 32px;
    padding-top: 96px; /* 64px topbar + 32px spacing */
}
.dashboard .page-content.has-property-bar {
    padding-top: 148px; /* 64px topbar + 52px property bar + 32px spacing */
}
@media (max-width: 768px) {
    .dashboard .page-content {
        padding: 20px;
        padding-top: 76px; /* 56px topbar + 20px spacing */
    }
    .dashboard .page-content.has-property-bar {
        padding-top: 128px; /* 56px topbar + 52px property bar + 20px spacing */
    }
}

/* Cards: more padding, lighter border, subtler shadow */
.dashboard .card {
    padding: 28px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
}
@media (max-width: 480px) {
    .dashboard .card:not(.preview-card) {
        padding: 16px !important;
    }
}

/* Better body text line-height */
.dashboard .main-content {
    line-height: 1.6;
}

/* Topbar: cleaner, lighter */
.dashboard .topbar {
    border-bottom: 1px solid #eaecef;
    box-shadow: none;
}
.dashboard .topbar-left h1 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
/* Long titles ("Reservation: Maria Fernanda Santos") stay on one line
   with "…" instead of wrapping into the bar below (all pages). */
.dashboard .topbar-left { flex: 1 1 auto; min-width: 0; }
.dashboard .topbar-right { flex-shrink: 0; }
.dashboard .topbar-left h1 {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Section titles: more space, tighter tracking */
.dashboard .wb-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #24292f;
    margin: 32px 0 16px;
    letter-spacing: -0.01em;
}

/* Stat cards: more padding, lighter feel */
.dashboard .stat-card {
    padding: 24px 28px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
}
.dashboard .stat-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-color: #d1d5db;
}
.dashboard .stat-card .stat-label {
    font-size: 13.5px;
    font-weight: 500;
    color: #656d76;
    letter-spacing: 0.01em;
}
.dashboard .stat-card .stat-value {
    font-size: 26px;
    font-weight: 700;
    color: #1f2328;
}

/* Action cards: wider gap, cleaner borders */
.dashboard .wb-actions-grid {
    gap: 16px;
}
.dashboard .wb-action-card {
    padding: 22px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
}
.dashboard .wb-action-card:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
    border-color: #d1d5db;
}
.dashboard .wb-action-text strong {
    font-size: 14px;
    font-weight: 600;
    color: #1f2328;
}
.dashboard .wb-action-text span {
    font-size: 13px;
    color: #656d76;
    line-height: 1.4;
}

/* Pages list: cleaner rows */
.dashboard .wb-pages-list {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.dashboard .wb-page-row {
    padding: 16px 22px;
    border-bottom: 1px solid #f3f4f6;
}
.dashboard .wb-page-row:hover {
    background: #f9fafb;
}
.dashboard .wb-page-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2328;
}

/* Form controls: slightly taller, softer */
.dashboard .form-control {
    padding: 9px 13px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.5;
    color: #1f2328;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.dashboard .form-control:focus {
    border-color: var(--brand, #4f46e5);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 79, 70, 229), 0.1);
}
.dashboard .form-control::placeholder {
    color: #8a8a8a;
}

/* Form labels: consistent sizing */
.dashboard .form-group label,
.dashboard .form-section label {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    letter-spacing: 0.005em;
}

/* Settings form sections: lighter */
.dashboard .form-section {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.dashboard .form-section h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1f2328;
}
.dashboard .form-section > p {
    color: #656d76;
}

/* ── Property Form ── */
.prop-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.prop-page-header h2 {
    margin: 0;
}
.prop-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 550;
    color: #333333;
    text-decoration: none;
    padding: 9px 20px 9px 16px;
    border-radius: 9px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    transition: all 0.15s;
    white-space: nowrap;
}
.prop-back-btn:hover {
    border-color: var(--brand-2, #6366f1);
    color: var(--brand-2, #6366f1);
    background: #f5f3ff;
}
.prop-back-btn svg {
    transition: transform 0.15s;
}
.prop-back-btn:hover svg {
    transform: translateX(-2px);
}

/* ── Property Form: Intro ── */
.prop-intro {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--brand-soft, #eef2ff);
    border: 1px solid var(--brand-line, #c7d2fe);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.prop-intro svg { flex-shrink: 0; margin-top: 2px; }
.prop-intro p { margin: 0; font-size: 14px; color: #333333; line-height: 1.6; }

/* ── Property Form: Full-Width Grid Layout ── */
.prop-form-full { width: 100%; }
.prop-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
.prop-form-card {
    padding: 28px;
}
.prop-form-section {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-gray-100, #f3f4f6);
}
.prop-form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 16px;
    padding-bottom: 0;
}
.prop-form-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2328;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.prop-form-section .form-group {
    margin-bottom: 16px;
}
.prop-form-section .form-group:last-child {
    margin-bottom: 0;
}
.prop-form-section .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 6px;
}
.prop-form-section .form-group label .required {
    color: #ef4444;
}
.prop-form-section .form-control {
    width: 100%;
    box-sizing: border-box;
}
.form-hint {
    display: block;
    font-size: 13px;
    color: #8a8a8a;
    margin-top: 4px;
}
.prop-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.prop-form-actions {
    display: flex;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--color-gray-100, #f3f4f6);
}

/* ── Property Form: Image Upload Slots ── */
.prop-images-hint {
    font-size: 13px;
    color: #5f5f5f;
    margin: 0 0 20px;
    line-height: 1.5;
}
.prop-img-slot {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f3f4f6;
}
.prop-img-slot:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.prop-img-slot > label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 8px;
}
.prop-img-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    border: 2px dashed #d1d5db;
    overflow: hidden;
    position: relative;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.prop-img-preview.has-image {
    border-style: solid;
    border-color: #e5e7eb;
}
.prop-img-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.prop-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}
.prop-img-preview:hover .prop-img-overlay {
    opacity: 1;
}
.prop-img-change {
    background: #fff;
    color: #333333;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.prop-img-change:hover { background: #f3f4f6; }
.prop-img-remove {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prop-img-remove:hover { background: rgba(239, 68, 68, 0.8); }
.prop-img-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #8a8a8a;
    font-size: 13px;
}
.prop-img-actions {
    display: flex;
    gap: 8px;
}
.prop-img-upload-btn,
.prop-img-stock-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px !important;
    padding: 7px 14px !important;
}

/* Upload loading spinner */
.prop-img-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #5f5f5f;
    font-size: 13px;
}
.prop-img-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--brand-2, #6366f1);
    border-radius: 50%;
    animation: prop-spin 0.7s linear infinite;
}
@keyframes prop-spin {
    to { transform: rotate(360deg); }
}

/* ── Image Preview Modal ── */
.prop-preview-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.prop-preview-dialog {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.prop-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #e5e7eb;
}
.prop-preview-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}
.prop-preview-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #f9fafb;
    min-height: 200px;
    max-height: 50vh;
    overflow: hidden;
}
.prop-preview-body img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}
.prop-preview-info {
    display: flex;
    justify-content: space-between;
    padding: 10px 24px;
    font-size: 13px;
    color: #5f5f5f;
    border-bottom: 1px solid #f3f4f6;
}
.prop-preview-actions {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    justify-content: flex-end;
}
.prop-preview-crop-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
@media (max-width: 768px) {
    .prop-preview-dialog {
        max-width: 100%;
    }
    .prop-preview-actions {
        flex-wrap: wrap;
    }
    .prop-preview-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ── Stock Photo Search Modal ── */
.prop-stock-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.prop-stock-modal-content {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 720px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.prop-stock-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #e5e7eb;
}
.prop-stock-modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}
.prop-stock-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #5f5f5f;
    padding: 4px;
    line-height: 1;
}
.prop-stock-close:hover { color: #1f2937; }
.prop-stock-tabs {
    display: flex;
    gap: 0;
    padding: 0 24px;
    border-bottom: 1px solid #e5e7eb;
}
.prop-stock-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #5f5f5f;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.prop-stock-tab:hover {
    color: #333333;
}
.prop-stock-tab.active {
    color: var(--brand, #4f46e5);
    border-bottom-color: var(--brand, #4f46e5);
    font-weight: 600;
}
.prop-stock-search-bar {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    border-bottom: 1px solid #f3f4f6;
}
.prop-stock-search-bar .form-control {
    flex: 1;
}
/* Scroll body wrapping grid + load more */
.prop-stock-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    min-height: 300px;
}
.prop-stock-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.prop-stock-empty {
    text-align: center;
    padding: 48px 20px;
    color: #8a8a8a;
    font-size: 15px;
}
.prop-stock-card {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}
.prop-stock-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.prop-stock-thumb-wrap {
    position: relative;
    padding-bottom: 66%; /* 3:2 aspect ratio */
    background: #f1f5f9;
}
.prop-stock-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.prop-stock-hover {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}
.prop-stock-card:hover .prop-stock-hover {
    opacity: 1;
}
.prop-stock-select-btn {
    background: #fff;
    color: #0f172a;
    padding: 8px 24px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}
.prop-stock-credit {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
}
.prop-stock-loadmore {
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    cursor: pointer;
    transition: background 0.15s;
}
.prop-stock-loadmore:hover {
    background: #f3f4f6;
}
.prop-stock-footer {
    padding: 12px 24px;
    border-top: 1px solid #f3f4f6;
    text-align: center;
    color: #8a8a8a;
}

@media (max-width: 768px) {
    .prop-form-grid {
        grid-template-columns: 1fr;
    }
    .prop-form-card {
        padding: 20px;
    }
    .prop-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .prop-form-row .form-group {
        margin-bottom: 16px;
    }
    .prop-stock-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .prop-img-actions {
        flex-wrap: wrap;
    }
}

/* ── Property Setup Guide ── */
.setup-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 32px;
    background: linear-gradient(135deg, var(--brand-soft, #eef2ff) 0%, var(--brand-soft-2, #e0e7ff) 100%);
    border-radius: 14px;
    margin-bottom: 28px;
    border: 1px solid var(--brand-line, #c7d2fe);
}
.setup-hero-icon {
    width: 64px;
    height: 64px;
    background: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(var(--brand-rgb, 79, 70, 229), 0.12);
}
.setup-hero-text h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}
.setup-hero-status {
    margin: 0;
    font-size: 15px;
    color: #4a4a4a;
}
.setup-hero-status.setup-complete {
    color: #059669;
    font-weight: 600;
}
.setup-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 28px;
}
.setup-step {
    display: flex;
    gap: 18px;
    padding: 24px 28px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    transition: background 0.15s;
}
.setup-step:first-child {
    border-radius: 12px 12px 0 0;
}
.setup-step:last-child {
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0 0 12px 12px;
}
.setup-step:only-child {
    border-radius: 12px;
    border-bottom: 1px solid #e5e7eb;
}
.setup-step-done {
    background: #f8fdf9;
}
.setup-step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--brand-2, #6366f1);
    background: var(--brand-soft, #eef2ff);
    border: 2px solid var(--brand-line, #c7d2fe);
}
.setup-step-done .setup-step-number {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #10b981;
}
.setup-step-content {
    flex: 1;
    min-width: 0;
}
.setup-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.setup-step-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
    color: #1e293b;
}
.setup-step-done .setup-step-header h4 {
    color: #059669;
}
.setup-step-detail {
    font-size: 13px;
    color: #5f5f5f;
    background: #f3f4f6;
    padding: 2px 10px;
    border-radius: 20px;
}
.setup-step-detail.text-success {
    color: #059669;
    background: #ecfdf5;
}
.setup-optional {
    font-size: 11px;
    font-weight: 500;
    color: #8a8a8a;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 1px 8px;
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 4px;
}
.setup-step-content p {
    margin: 6px 0 0;
    font-size: 14px;
    color: #5f5f5f;
    line-height: 1.55;
}
.setup-step-done .setup-step-content p {
    color: #8a8a8a;
}
.setup-step-btn {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.setup-footer-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}
@media (max-width: 768px) {
    .setup-hero {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }
    .setup-step {
        padding: 18px 16px;
        gap: 14px;
    }
    .setup-step-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ── Setup Checklist Container ─────────────────────────── */
.setup-checklist {
    background: #ffffff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl, 16px);
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}
.setup-checklist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
}
.setup-checklist-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.setup-checklist-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg, 12px);
    background: var(--brand-soft, #eef2ff);
    color: var(--brand, #4f46e5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.setup-checklist-icon svg {
    width: 22px;
    height: 22px;
}
.setup-checklist-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0;
    letter-spacing: -0.01em;
}
.setup-checklist-subtitle {
    font-size: 13px;
    color: var(--color-gray-500);
    margin: 2px 0 0;
}
.setup-checklist-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.setup-checklist-ring {
    position: relative;
    width: 40px;
    height: 40px;
}
.setup-checklist-ring svg { width: 40px; height: 40px; }
.setup-checklist-ring circle:last-child {
    transition: stroke-dasharray 0.6s ease;
}
.setup-checklist-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-gray-600);
}
.setup-checklist-dismiss { display: inline; }
.setup-checklist-dismiss-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md, 8px);
    border: none;
    background: transparent;
    color: var(--color-gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
}
.setup-checklist-dismiss-btn:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}
.setup-checklist-dismiss-btn svg { width: 16px; height: 16px; }
.setup-checklist-progress {
    height: 3px;
    background: var(--color-gray-100);
    margin: 0 24px;
    border-radius: 2px;
    overflow: hidden;
}
.setup-checklist-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 2px;
    transition: width 0.6s ease;
}
.setup-checklist-steps { padding: 12px 0 4px; }
.setup-checklist .setup-step {
    padding: 16px 24px;
    border-left: none;
    border-right: none;
}
.setup-checklist .setup-step:first-child { border-radius: 0; }
.setup-checklist .setup-step:last-child {
    border-radius: 0;
    border-bottom: none;
}
.setup-checklist-complete {
    padding: 16px 24px 20px;
    text-align: center;
    background: #f0fdf4;
    border-top: 1px solid #bbf7d0;
}
.setup-checklist-complete p {
    font-size: 14px;
    font-weight: 600;
    color: #059669;
    margin: 0 0 12px;
}
@media (max-width: 640px) {
    .setup-checklist-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .setup-checklist-header-right { align-self: flex-end; }
    .setup-checklist .setup-step { padding: 14px 16px; }
}

/* Controls card (maintenance/login link) */
.dashboard .wb-controls {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.dashboard .wb-control-label {
    font-size: 14px;
    font-weight: 600;
    color: #1f2328;
}
.dashboard .wb-control-desc {
    font-size: 13px;
    color: #656d76;
    line-height: 1.5;
}

/* Tables: cleaner */
.dashboard table {
    font-size: 16px;
}
.dashboard thead th {
    font-size: 14px;
    color: #656d76;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 16px;
}
.dashboard tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    color: #1f2328;
}
.dashboard tbody tr:hover {
    background: #f9fafb;
}

/* Buttons: rounder, cleaner */
.dashboard .btn {
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 18px;
}
.dashboard .btn:hover {
    transform: translateY(-1px);
}

/* Badges: consistent */
.dashboard .badge {
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

/* Alerts: rounder */
.dashboard .alert {
    border-radius: 10px;
    font-size: 14px;
}

/* Hero card polish */
.dashboard .wb-hero {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 28px 32px;
}
.dashboard .wb-hero-title {
    font-size: 22px;
    font-weight: 700;
    color: #1f2328;
}

/* Banners: softer radius */
.dashboard .wb-banner {
    border-radius: 12px;
}

/* Empty states: cleaner */
.dashboard .empty-state {
    color: #656d76;
}
.dashboard .empty-state h3 {
    color: #1f2328;
}

/* ── Notices from TIOO (admin.tioo.com → Announcements), 2026-10-12 ──
   Cards inside .dash-notices on every dashboard page. */
.tioo-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px 12px 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
    color: #1e3a8a;
    transition: opacity .2s ease, transform .2s ease;
}
.tioo-notice--warning { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
.tioo-notice--maintenance { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.tioo-notice--closing { opacity: 0; transform: translateY(-6px); }
.tioo-notice__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #dbeafe;
    color: #1d4ed8;
}
.tioo-notice--warning .tioo-notice__icon { background: #fef3c7; color: #b45309; }
.tioo-notice--maintenance .tioo-notice__icon { background: #fee2e2; color: #b91c1c; }
.tioo-notice__text { flex: 1; min-width: 0; }
.tioo-notice__from {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .75;
}
.tioo-notice__title { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.35; color: inherit; }
.tioo-notice__body { margin: 4px 0 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.tioo-notice__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tioo-notice__close-form { margin: 0; flex-shrink: 0; }
.tioo-notice__close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: -6px 0 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .7;
}
.tioo-notice__close:hover, .tioo-notice__close:focus-visible { opacity: 1; background: rgba(15, 23, 42, .07); }
@media (max-width: 600px) {
    .tioo-notice { padding: 12px 8px 12px 12px; gap: 10px; }
    .tioo-notice__icon { width: 28px; height: 28px; }
    .tioo-notice__close { width: 44px; height: 44px; margin: -10px -2px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .tioo-notice { transition: none; } }

/* ── Billing Page ───────────────────────────────────────── */

/* Current plan header card */
.billing-plan-header {
    padding: 28px 32px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #0D0E11 0%, #1e1b4b 50%, var(--brand-ink-3, #312e81) 100%);
    color: #fff;
    border-radius: 16px;
    border: none;
    position: relative;
    overflow: hidden;
}
.billing-plan-header::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(var(--brand-rgb, 79, 70, 229), 0.3) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.billing-plan-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    z-index: 1;
}
.billing-plan-header__info h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.billing-plan-header__sub {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}
.billing-plan-header .billing-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
}
.billing-badge--pending {
    background: rgba(var(--brand-rgb, 79, 70, 229), 0.3);
    color: var(--brand-line, #c7d2fe);
}
.billing-badge--warning {
    background: rgba(245, 158, 11, 0.25);
    color: #fde68a;
}
.billing-plan-header .btn-manage {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.billing-plan-header .btn-manage:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

/* Usage summary strip */
.billing-usage-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}
.billing-usage-item {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
}
.billing-usage-item__label {
    font-size: 12px;
    font-weight: 500;
    color: #5f5f5f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.billing-usage-item__value {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.3px;
}
.billing-usage-item__value span {
    font-size: 13px;
    font-weight: 400;
    color: #8a8a8a;
}

/* ──── Billing summary strip (Phase 1 of BILLING_OVERHAUL_PLAN, 2026-06-05) ──── */
/* Shows next bill date + next charge + active payment method below the plan
   header. Same visual shape as billing-usage-strip but with a tighter info
   layout — these are reference values, not bar-graph metrics. */
.billing-summary-strip {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 16px;
    margin-bottom: 28px;
}
@media (max-width: 768px) {
    .billing-summary-strip {
        grid-template-columns: 1fr;
    }
}
.billing-summary-strip__item {
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
}
.billing-summary-strip__label {
    font-size: 12px;
    font-weight: 500;
    color: #5f5f5f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.billing-summary-strip__value {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.2px;
}
.billing-summary-strip__update-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary, #1e3a5f);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}
.billing-summary-strip__update-link:hover {
    text-decoration: underline;
}

/* ──── Past-due banner ──── */
/* Renders ONLY when subscription_status == "past_due" + dunning_started_at
   is set. Severity escalates by day count via the body copy — banner colour
   stays consistent (red border, amber background) so it's instantly
   recognisable as a billing alert. */
.billing-past-due-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    border: 1px solid #dc2626;
    background: #fef2f2;
    border-radius: 12px;
}
.billing-past-due-banner__icon {
    font-size: 24px;
    color: #dc2626;
    flex-shrink: 0;
    line-height: 1;
}
.billing-past-due-banner__body {
    flex: 1;
    color: #7f1d1d;
    font-size: 14px;
    line-height: 1.5;
}
.billing-past-due-banner__body strong {
    display: block;
    margin-bottom: 4px;
    color: #991b1b;
    font-size: 15px;
}
.billing-past-due-banner__action {
    flex-shrink: 0;
    margin: 0;
}
.btn-update-payment {
    display: inline-block;
    padding: 10px 20px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.btn-update-payment:hover {
    background: #b91c1c;
}
@media (max-width: 640px) {
    .billing-past-due-banner {
        flex-direction: column;
    }
    .billing-past-due-banner__action {
        width: 100%;
    }
    .btn-update-payment {
        width: 100%;
        text-align: center;
    }
}

/* ──── Invoices page (Phase 2 of BILLING_OVERHAUL_PLAN, 2026-06-05) ──── */
.billing-invoices-filter {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 16px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
}
.billing-invoices-filter label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.billing-invoices-filter__label {
    font-size: 12px;
    font-weight: 500;
    color: #5f5f5f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.billing-invoices-filter select {
    min-width: 140px;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
}
.billing-invoices-filter__clear {
    color: var(--color-primary, #1e3a5f);
    font-size: 13px;
    text-decoration: none;
    padding: 10px 0;
}
.billing-invoices-filter__clear:hover {
    text-decoration: underline;
}

.billing-invoices-table-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}
.billing-invoices-table {
    width: 100%;
    border-collapse: collapse;
}
.billing-invoices-table thead th {
    text-align: left;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    color: #5f5f5f;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.billing-invoices-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
    color: #1f2937;
    font-size: 14px;
}
.billing-invoices-table tbody tr:last-child td {
    border-bottom: none;
}
.billing-invoices-table__desc {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.billing-invoices-table__pdf-link {
    color: var(--color-primary, #1e3a5f);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
}
.billing-invoices-table__pdf-link:hover {
    text-decoration: underline;
}

.billing-invoice-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}
.billing-invoice-status--paid {
    background: #d1fae5;
    color: #065f46;
}
.billing-invoice-status--open {
    background: #fef3c7;
    color: #92400e;
}
.billing-invoice-status--draft {
    background: #e5e7eb;
    color: #4a4a4a;
}
.billing-invoice-status--void,
.billing-invoice-status--uncollectible {
    background: #fee2e2;
    color: #991b1b;
}

.billing-invoices-empty {
    text-align: center;
    padding: 40px 20px;
    color: #5f5f5f;
    border: 1px dashed #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
}
.billing-invoices-empty a {
    color: var(--color-primary, #1e3a5f);
    text-decoration: none;
}
.billing-invoices-empty a:hover {
    text-decoration: underline;
}

/* ──── Top-bar manual refresh button (2026-09-21) ──── */
/* Sits left of the notification bell. Matches the bell's 40x40 hit
   zone + muted color so the two icons read as one visual pair. Spin
   animation fires while a refresh is in flight (min 300ms so it's
   always perceptible even when the fetch resolves instantly). */
.topbar-refresh {
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: #4a4a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    transition: background 0.15s;
    padding: 0;
}
.topbar-refresh:hover {
    background: #f3f4f6;
}
.topbar-refresh[disabled] {
    cursor: default;
    opacity: 0.8;
}
.topbar-refresh svg {
    transition: transform 0.15s;
}
.topbar-refresh.spinning svg {
    animation: topbar-refresh-spin 0.7s linear infinite;
}
@keyframes topbar-refresh-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .topbar-refresh.spinning svg {
        animation: none;
    }
}

/* ──── Notifications bell + dropdown (TenantNotification wiring, 2026-06-05) ──── */
.notif-bell {
    position: relative;
    margin-right: 8px;
}
.notif-bell-trigger {
    position: relative;
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: #4a4a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.notif-bell-trigger:hover {
    background: #f3f4f6;
}
.notif-bell-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}
.notif-bell-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 100;
}
.notif-bell.open .notif-bell-dropdown {
    display: flex;
}
.notif-bell.open .notif-bell-trigger {
    background: #f3f4f6;
}
.notif-bell-dropdown__header {
    padding: 14px 18px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.notif-bell-dropdown__count {
    color: #5f5f5f;
    font-size: 12px;
    font-weight: 500;
    margin-left: auto;
    margin-right: 10px;
}
/* 2026-06-30: compact "Mark all read" link inside the bell dropdown
 * header so tenants don't have to navigate to /dashboard/notifications/
 * just to clear the badge.
 */
.notif-bell-dropdown__mark-all {
    background: none;
    border: 0;
    padding: 0;
    color: var(--brand, #4f46e5);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
.notif-bell-dropdown__mark-all:hover {
    text-decoration: underline;
}
.notif-bell-dropdown__mark-all[hidden] {
    display: none;
}
.notif-bell-dropdown__mark-all:disabled {
    color: #8a8a8a;
    cursor: wait;
}
.notif-bell-dropdown__list {
    overflow-y: auto;
    max-height: 340px;
}
.notif-bell-dropdown__item {
    display: block;
    padding: 12px 18px;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    color: #1f2937;
    transition: background 0.1s;
}
.notif-bell-dropdown__item:hover {
    background: #f9fafb;
}
.notif-bell-dropdown__item--unread {
    background: #f0f9ff;
}
.notif-bell-dropdown__item--unread:hover {
    background: #e0f2fe;
}
.notif-bell-dropdown__item--error {
    border-left: 3px solid #dc2626;
}
.notif-bell-dropdown__item--warning {
    border-left: 3px solid #f59e0b;
}
.notif-bell-dropdown__item--success {
    border-left: 3px solid #10b981;
}
.notif-bell-dropdown__item--info {
    border-left: 3px solid #3b82f6;
}
.notif-bell-dropdown__title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 3px;
    line-height: 1.3;
}
.notif-bell-dropdown__time {
    font-size: 12px;
    color: #5f5f5f;
}
.notif-bell-dropdown__view-all {
    display: block;
    padding: 12px 18px;
    text-align: center;
    color: var(--color-primary, #1e3a5f);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-top: 1px solid #f3f4f6;
}
.notif-bell-dropdown__view-all:hover {
    background: #f9fafb;
}
.notif-bell-dropdown__empty {
    padding: 24px 18px;
    text-align: center;
    color: #5f5f5f;
    font-size: 13px;
}

/* Notifications list page */
.notif-list {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.notif-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
}
.notif-row:last-child {
    border-bottom: none;
}
.notif-row--unread {
    background: #f0f9ff;
}
.notif-row--error {
    border-left: 4px solid #dc2626;
}
.notif-row--warning {
    border-left: 4px solid #f59e0b;
}
.notif-row--success {
    border-left: 4px solid #10b981;
}
.notif-row--info {
    border-left: 4px solid #3b82f6;
}
.notif-row__icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    width: 30px;
    text-align: center;
}
.notif-row__body {
    flex: 1;
    min-width: 0;
}
.notif-row__title {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
    margin-bottom: 4px;
}
.notif-row__message {
    color: #4a4a4a;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 8px;
}
.notif-row__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: #5f5f5f;
}
.notif-row__action {
    color: var(--color-primary, #1e3a5f);
    text-decoration: none;
    font-weight: 500;
}
.notif-row__action:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .notif-bell-dropdown {
        position: fixed;
        top: 60px;
        left: 8px;
        right: 8px;
        width: auto;
    }
}

/* Section headings */
.billing-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}
.billing-section-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.2px;
}

/* Plan cards grid */
.billing-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 36px;
}
.billing-plan-card {
    padding: 24px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fff;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}
.billing-plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.billing-plan-card--highlight {
    border: 2px solid var(--brand-2, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 79, 70, 229), 0.1);
}
.billing-plan-card--current {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.billing-plan-card__popular {
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-2, #6366f1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.billing-plan-card__name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}
.billing-plan-card__price {
    margin: 10px 0;
}
.billing-plan-card__price-amount {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.5px;
}
.billing-plan-card__price-period {
    font-size: 14px;
    color: #5f5f5f;
    font-weight: 400;
}
.billing-plan-card__annual {
    font-size: 13px;
    color: #5f5f5f;
    margin-bottom: 16px;
}
.billing-plan-card__annual strong {
    color: #059669;
    font-weight: 600;
}
.billing-plan-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    font-size: 13px;
    color: #4a4a4a;
}
.billing-plan-card__features li {
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.billing-plan-card__features li::before {
    content: '';
    width: 16px;
    height: 16px;
    min-width: 16px;
    background: var(--brand-soft-2, #e0e7ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234f46e5'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 111.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}
.billing-plan-card .btn {
    width: 100%;
    text-align: center;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.billing-plan-card .btn-upgrade {
    background: linear-gradient(135deg, var(--brand-2, #6366f1), #8b5cf6);
    color: #fff;
}
.billing-plan-card .btn-upgrade:hover {
    box-shadow: 0 4px 12px rgba(var(--brand-rgb, 79, 70, 229), 0.35);
    transform: translateY(-1px);
}
.billing-plan-card .btn-getstarted {
    background: #111827;
    color: #fff;
}
.billing-plan-card .btn-getstarted:hover {
    background: #1f2937;
}
.billing-plan-card .btn-downgrade {
    background: #f3f4f6;
    color: #4a4a4a;
    border: 1px solid #d1d5db;
}
.billing-plan-card .btn-downgrade:hover {
    background: #e5e7eb;
}
.billing-plan-card .btn-current {
    background: #f1f5f9;
    color: #8a8a8a;
    cursor: default;
}
.billing-plan-card .btn-pending {
    background: var(--brand-soft, #eef2ff);
    color: var(--brand-2, #6366f1);
    cursor: default;
}
.billing-plan-card .btn-cancel {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}
.billing-plan-card .btn-cancel:hover {
    background: #fee2e2;
}

/* Add-on cards */
.billing-addons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 36px;
}
.billing-addon-card {
    padding: 20px 24px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: box-shadow 0.2s;
}
.billing-addon-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.billing-addon-card__name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}
.billing-addon-card__price {
    font-size: 13px;
    color: #5f5f5f;
    margin-top: 3px;
}
.billing-addon-card .btn {
    white-space: nowrap;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}
.billing-addon-card .btn-addon-add {
    background: var(--brand-soft, #eef2ff);
    color: var(--brand, #4f46e5);
}
.billing-addon-card .btn-addon-add:hover {
    background: var(--brand-soft-2, #e0e7ff);
}
.billing-addon-card .btn-addon-remove {
    background: #f3f4f6;
    color: #5f5f5f;
}
.billing-addon-card .btn-addon-remove:hover {
    background: #fef2f2;
    color: #dc2626;
}
.billing-addon-card__quantity {
    font-size: 13px;
    color: #333333;
    margin-top: 6px;
}
.billing-addon-card .btn-addon-manage {
    background: #f0fdfa;
    color: #0d9488;
    text-decoration: none;
    display: inline-block;
}
.billing-addon-card .btn-addon-manage:hover {
    background: #ccfbf1;
    color: #0f766e;
}

/* ── Usage Page ─────────────────────────────────────────── */

/* Usage header */
.usage-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}
.usage-header__info h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}
.usage-header__sub {
    color: #5f5f5f;
    margin-top: 4px;
    font-size: 14px;
}

/* Usage meter cards */
.usage-meters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 36px;
}
.usage-meter {
    padding: 24px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fff;
    position: relative;
}
.usage-meter__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.usage-meter__title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}
.usage-meter__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.usage-meter__icon--messages { background: #ede9fe; color: #7c3aed; }
.usage-meter__icon--emails { background: #dbeafe; color: #2563eb; }
.usage-meter__icon--storage { background: #d1fae5; color: #059669; }
.usage-meter__icon--api { background: #fef3c7; color: #d97706; }
.usage-meter__count {
    font-size: 13px;
    color: #5f5f5f;
    font-weight: 500;
}
.usage-meter__bar-wrap {
    background: #f3f4f6;
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}
.usage-meter__bar {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
    min-width: 2px;
}
.usage-meter__bar--ok { background: linear-gradient(90deg, var(--brand-2, #6366f1), var(--brand-400, #818cf8)); }
.usage-meter__bar--warning { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.usage-meter__bar--danger { background: linear-gradient(90deg, #dc2626, #ef4444); }
.usage-meter__note {
    font-size: 12px;
    color: #8a8a8a;
    margin: 0;
}
.usage-meter__note--danger {
    color: #dc2626;
    font-weight: 500;
}
.usage-meter__note--muted {
    color: #8a8a8a;
}

/* Usage history table */
.usage-history-card {
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fff;
    overflow-x: auto;
    margin-bottom: 16px;
}
.usage-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.usage-history-table thead {
    background: #f8fafc;
}
.usage-history-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #5f5f5f;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e5e7eb;
}
.usage-history-table th.text-right { text-align: right; }
.usage-history-table th.text-center { text-align: center; }
.usage-history-table td {
    padding: 12px 16px;
    color: #333333;
    border-bottom: 1px solid #f3f4f6;
}
.usage-history-table td.text-right { text-align: right; }
.usage-history-table td.text-center { text-align: center; }
.usage-history-table tbody tr:last-child td {
    border-bottom: none;
}
.usage-history-table tbody tr:hover {
    background: #f8fafc;
}
.usage-overage-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.usage-overage-chip--billed {
    background: #d1fae5;
    color: #059669;
}
.usage-overage-chip--pending {
    background: #fef3c7;
    color: #d97706;
}
.usage-overage-chip--none {
    background: #f3f4f6;
    color: #8a8a8a;
}
.usage-overage-inline {
    color: #dc2626;
    font-size: 11px;
    font-weight: 600;
}

/* Empty state */
.billing-empty-state {
    padding: 48px 24px;
    text-align: center;
    color: #8a8a8a;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fff;
}
.billing-empty-state__icon {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.6;
}
.billing-empty-state__text {
    font-size: 14px;
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Usage footer note */
.billing-footer-note {
    font-size: 12px;
    color: #8a8a8a;
    margin-top: 20px;
    line-height: 1.6;
    padding: 0 4px;
}

/* Responsive */
@media (max-width: 640px) {
    .billing-plan-header {
        padding: 20px;
    }
    .billing-plan-header__info h3 {
        font-size: 20px;
    }
    .billing-plans-grid {
        grid-template-columns: 1fr;
    }
    .billing-addons-grid {
        grid-template-columns: 1fr;
    }
    .billing-addon-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .billing-addon-card .btn {
        width: 100%;
        text-align: center;
    }
    .usage-header {
        flex-direction: column;
    }
    .usage-meters-grid {
        grid-template-columns: 1fr;
    }
    .usage-history-table {
        font-size: 12px;
    }
    .usage-history-table th,
    .usage-history-table td {
        padding: 10px 10px;
    }
}

/* ── Cleaning Dashboard ──────────────────────────────────── */

/* Stat cards */
/* ── Cleaning Module ──────────────────────────────────────── */

/* Stat cards */
/* Live "Needs Cleaning" board — hero section, derived from checkouts */
.cln-needs {
    margin-bottom: 24px;
}
.cln-needs__head {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-bottom: 12px;
}
.cln-needs__title {
    font-size: 16px; font-weight: 700;
    color: var(--color-gray-800, #1f2937); margin: 0;
}
.cln-needs__summary {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.cln-need-chip {
    font-size: 12px; font-weight: 600;
    padding: 3px 10px; border-radius: 999px;
    border: 1px solid transparent; white-space: nowrap;
}
.cln-need-chip--turnover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.cln-need-chip--due { background: #fff7ed; color: #ea580c; border-color: #fed7aa; }
.cln-need-chip--overdue { background: #fefce8; color: #ca8a04; border-color: #fde68a; }
.cln-need-chip--progress { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; }
.cln-need-chip--scheduled { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }

.cln-needs__clear {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 18px; border-radius: 10px;
    background: #f0fdf4; border: 1px solid #bbf7d0;
    color: #15803d; font-size: 14px; font-weight: 500;
}
.cln-needs__nudge {
    margin: 0 0 12px; font-size: 13px; color: #4a4a4a;
}
.cln-needs__nudge a { color: var(--color-primary, #349ead); font-weight: 600; white-space: nowrap; }

.cln-needs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.cln-need-card {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-left: 4px solid #cbd5e1;
    border-radius: 10px; padding: 14px;
    display: flex; flex-direction: column; gap: 8px;
}
/* Left-border state colour — at-a-glance scan */
.cln-need-card--checkout_due { border-left-color: #ea580c; }
.cln-need-card--overdue { border-left-color: #ca8a04; }
.cln-need-card--in_progress { border-left-color: #2563eb; }
.cln-need-card--scheduled { border-left-color: #16a34a; }
.cln-need-card--done { border-left-color: #cbd5e1; opacity: 0.7; }
.cln-need-card--skipped { border-left-color: #cbd5e1; opacity: 0.7; }
.cln-need-card--turnover { border-left-color: #dc2626; box-shadow: 0 0 0 1px #fecaca; }

.cln-need-card__top {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.cln-need-card__room { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cln-need-card__name { font-weight: 600; font-size: 14px; color: var(--color-gray-800, #1f2937); }
.cln-need-badge {
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
}
.cln-need-badge--turnover { background: #dc2626; color: #fff; }
.cln-need-badge--due { background: #fff7ed; color: #ea580c; }
.cln-need-badge--overdue { background: #fefce8; color: #ca8a04; }
.cln-need-badge--progress { background: #eff6ff; color: #2563eb; }
.cln-need-badge--scheduled { background: #f0fdf4; color: #16a34a; }
.cln-need-badge--done { background: #f1f5f9; color: #5f5f5f; }
.cln-need-badge--skipped { background: #f1f5f9; color: #5f5f5f; }

.cln-need-card__times { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--color-gray-600, #475569); }
.cln-need-card__time--in { color: #dc2626; font-weight: 600; }
.cln-need-card__cleaner { font-size: 13px; color: var(--color-gray-600, #475569); }
.cln-need-card__actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 2px; }

.cln-section-label {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--color-gray-500, #6b7280);
    margin: 0 0 10px;
}

.cln-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.cln-stat-card {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 10px;
    padding: 16px;
}
.cln-stat-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
}
.cln-stat-icon--pending { background: #fefce8; color: #ca8a04; }
.cln-stat-icon--progress { background: #dbeafe; color: #2563eb; }
.cln-stat-icon--done { background: #d1fae5; color: #15803d; }
.cln-stat-value {
    font-size: 22px; font-weight: 700;
    color: var(--color-gray-800, #1f2937); line-height: 1.2;
}
.cln-stat-label {
    font-size: 12px; font-weight: 500;
    color: var(--color-gray-500, #6b7280); margin-top: 2px;
}

/* Tabs */
.cln-tabs {
    display: flex; gap: 4px; margin-bottom: 16px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.cln-tab {
    padding: 6px 14px; font-size: 13px; font-weight: 500;
    color: var(--color-gray-500, #6b7280);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 6px; text-decoration: none;
    background: var(--color-white, #fff);
    transition: background 0.15s; white-space: nowrap; flex-shrink: 0;
}
.cln-tab.active {
    background: var(--color-primary, #1c232d);
    color: #fff; border-color: var(--color-primary, #1c232d);
}
.cln-tab:hover:not(.active) { background: var(--color-gray-50, #f9fafb); }
.cln-tab:focus-visible { outline: 2px solid var(--color-primary, #1c232d); outline-offset: 2px; }

/* ── Task list table ────────────────────────────────────── */
.cln-table {
    width: 100%; background: #fff;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 10px; overflow: hidden;
}
.cln-table table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.cln-table thead th {
    text-align: left; padding: 10px 16px;
    font-weight: 600; font-size: 11px;
    color: var(--color-gray-500, #6b7280);
    text-transform: uppercase; letter-spacing: 0.5px;
    background: #f8fafc; border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
    white-space: nowrap;
}
.cln-table thead th:last-child,
.cln-table tbody td:last-child { text-align: right; }
.cln-table tbody tr { border-top: 1px solid #f1f5f9; }
.cln-table tbody tr:first-child { border-top: none; }
.cln-table tbody tr:hover { background: #f8fafc; }
.cln-table tbody td {
    padding: 12px 16px; color: var(--color-gray-700, #374151);
    vertical-align: middle;
}
.cln-table tbody tr.cln-row--urgent { background: #fffbeb; }
.cln-table tbody tr.cln-row--urgent:hover { background: #fef9c3; }
.cln-table .cln-cell-room {
    font-weight: 600; color: var(--color-gray-800, #1f2937);
}
.cln-table .cln-cell-room a {
    color: inherit; text-decoration: none;
}
.cln-table .cln-cell-room a:hover { color: var(--color-primary, #1c232d); }
.cln-table .cln-cell-muted { color: var(--color-gray-400, #9ca3af); }
/* Mobile-only meta line */
.cln-table .cln-cell-meta {
    display: none; font-size: 12px;
    color: var(--color-gray-500, #6b7280); margin-top: 2px;
}
.cln-table .cln-cell-meta .cln-badge { vertical-align: middle; }

/* ── Accountability / Reports table ─────────────────────── */
.cln-report-table {
    width: 100%; background: #fff;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 10px; overflow: hidden;
}
.cln-report-table__header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}
.cln-report-table__header h3 {
    margin: 0; font-size: 15px; font-weight: 600; color: #1e293b;
}
.cln-report-table table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.cln-report-table thead th {
    text-align: center; padding: 10px 12px;
    font-weight: 600; font-size: 11px;
    color: var(--color-gray-500, #6b7280);
    text-transform: uppercase; letter-spacing: 0.5px;
    background: #f8fafc;
}
.cln-report-table thead th:first-child { text-align: left; padding-left: 20px; }
.cln-report-table tbody tr { border-top: 1px solid #f1f5f9; }
.cln-report-table tbody td {
    text-align: center; padding: 12px;
    color: var(--color-gray-700, #374151); vertical-align: middle;
}
.cln-report-table tbody td:first-child { text-align: left; padding-left: 20px; }
.cln-report-table tbody tr.cln-row--faded { opacity: 0.5; }
.cln-cleaner-cell {
    display: flex; align-items: center; gap: 10px;
}
.cln-cleaner-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: #e0f2fe; display: flex; align-items: center;
    justify-content: center; font-weight: 600; font-size: 13px;
    color: #0284c7; flex-shrink: 0;
}
.cln-cleaner-name {
    font-weight: 500; color: #1e293b;
}
.cln-cleaner-phone {
    font-size: 11px; color: #8a8a8a;
}
.cln-report-table .cln-td-bold {
    font-weight: 600; color: #1e293b;
}
.cln-report-table .cln-td-amount {
    font-weight: 500; color: #1e293b;
}
/* Payment history row */
.cln-report-table .cln-payment-row td { padding: 0; }
.cln-report-table .cln-payment-details {
    padding: 0 20px 12px 62px;
}
.cln-report-table .cln-payment-item {
    display: flex; gap: 16px; padding: 4px 0;
    border-bottom: 1px solid #f8fafc; font-size: 12px; color: #4a4a4a;
}
/* Mobile card variant for reports */
.cln-report-cards { display: none; }
.cln-report-card {
    background: #fff; border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 10px; padding: 16px; margin-bottom: 10px;
}
.cln-report-card__header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.cln-report-card__stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    font-size: 13px;
}
.cln-report-card__stat {
    display: flex; justify-content: space-between;
    padding: 4px 0; border-bottom: 1px solid #f8fafc;
}
.cln-report-card__stat-label { color: #5f5f5f; }
.cln-report-card__stat-value { font-weight: 500; color: #1e293b; }
.cln-report-card__actions {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    display: flex; align-items: center; justify-content: space-between;
}

/* ── Badges ──────────────────────────────────────────────── */
.cln-badge {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 10px;
}
.cln-badge--green { background: #d1fae5; color: #15803d; }
.cln-badge--yellow { background: #fef9c3; color: #a16207; }
.cln-badge--amber { background: #fef3c7; color: #92400e; }
.cln-badge--blue { background: #dbeafe; color: #2563eb; }
.cln-badge--gray { background: #f3f4f6; color: #5f5f5f; }

.cln-duration-badge {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 2px 7px; border-radius: 9999px;
    background: #f0f9ff; color: #0369a1;
    margin-left: 6px; vertical-align: middle;
}

.cln-checklist-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 600;
    padding: 2px 7px; border-radius: 9999px;
    background: #fef3c7; color: #92400e;
    margin-left: 6px; vertical-align: middle;
}
.cln-checklist-badge--done { background: #d1fae5; color: #065f46; }

.cln-photo-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 600;
    padding: 2px 7px; border-radius: 9999px;
    background: #ede9fe; color: #6d28d9;
    margin-left: 4px; vertical-align: middle;
    border: none; cursor: pointer; transition: background 0.15s;
}
.cln-photo-badge:hover { background: #ddd6fe; }

/* ── Action buttons ──────────────────────────────────────── */
.cln-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    border: 1px solid; background: none; cursor: pointer;
    transition: background 0.15s;
}
.cln-btn:focus-visible { outline: 2px solid var(--color-primary, #1c232d); outline-offset: 2px; }
.cln-btn--start { color: #2563eb; border-color: #2563eb; }
.cln-btn--start:hover { background: #eff6ff; }
.cln-btn--complete { color: #16a34a; border-color: #16a34a; }
.cln-btn--complete:hover { background: #f0fdf4; }
.cln-btn--skip { color: #d97706; border-color: #d97706; }
.cln-btn--skip:hover { background: #fffbeb; }
.cln-btn--reopen { color: #2563eb; border-color: #2563eb; }
.cln-btn--reopen:hover { background: #eff6ff; }
.cln-btn--delete { color: #dc2626; border-color: #dc2626; }
.cln-btn--delete:hover { background: #fef2f2; }
.cln-btn--edit { background: #f0f9ff; color: #0369a1; border: none; }
.cln-btn--edit:hover { background: #e0f2fe; }

/* Text action buttons (replace icon-only buttons) */
.cln-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 10px; font-size: 12px; font-weight: 600;
    border-radius: 6px; border: 1px solid; cursor: pointer;
    background: none; white-space: nowrap;
    transition: background 0.15s;
}
.cln-action-btn:focus-visible { outline: 2px solid var(--color-primary, #1c232d); outline-offset: 2px; }
.cln-action-btn--start { color: #2563eb; border-color: #bfdbfe; }
.cln-action-btn--start:hover { background: #eff6ff; }
.cln-action-btn--complete { color: #16a34a; border-color: #bbf7d0; }
.cln-action-btn--complete:hover { background: #f0fdf4; }
.cln-action-btn--skip { color: #d97706; border-color: #fde68a; }
.cln-action-btn--skip:hover { background: #fffbeb; }
.cln-action-btn--reopen { color: #2563eb; border-color: #bfdbfe; }
.cln-action-btn--reopen:hover { background: #eff6ff; }
.cln-action-btn--delete { color: #dc2626; border-color: #fecaca; }
.cln-action-btn--delete:hover { background: #fef2f2; }

/* Header nav buttons — consistent size */
.btn-sm-icon {
    font-size: 13px; padding: 7px 14px;
}

.cln-row__actions {
    display: flex; align-items: center; gap: 4px; justify-content: flex-end;
}
.cln-unassigned {
    color: var(--color-gray-400, #9ca3af); font-style: italic; font-size: 12px;
}

/* Assign dropdown */
.cln-select {
    font-size: 12px; padding: 4px 6px;
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: 6px; background: var(--color-white, #fff);
    max-width: 120px; cursor: pointer;
}
.cln-select:focus-visible { outline: 2px solid var(--color-primary, #1c232d); outline-offset: 1px; }

/* ── Empty state ─────────────────────────────────────────── */
.cln-empty {
    text-align: center; padding: 48px 24px;
    color: var(--color-gray-400, #9ca3af);
}
.cln-empty svg { margin-bottom: 12px; }
.cln-empty h3 { font-size: 16px; color: var(--color-gray-600, #4b5563); margin: 0 0 4px 0; }
.cln-empty p { font-size: 14px; margin: 0; }

/* ── Checklist settings ──────────────────────────────────── */
.cln-checklist-list { display: flex; flex-direction: column; gap: 2px; }
.cln-checklist-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: #fff; border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06); cursor: grab;
    transition: box-shadow 0.15s;
}
.cln-checklist-item:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.cln-checklist-item--dragging { opacity: 0.5; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.cln-checklist-item__drag { color: #d1d5db; flex-shrink: 0; cursor: grab; }
.cln-checklist-item__content { flex: 1; display: flex; align-items: center; gap: 8px; }
.cln-checklist-item__label { font-size: 14px; font-weight: 500; color: #1e293b; }
.cln-checklist-item__actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Forms ────────────────────────────────────────────────── */
.cln-form-group { margin-bottom: 14px; }
.cln-form-group label {
    display: block; font-size: 13px; font-weight: 500;
    color: var(--color-gray-700, #374151); margin-bottom: 4px;
}
.cln-form-input {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: 6px; font-size: 13px;
}
.cln-form-input:focus-visible { outline: 2px solid var(--color-primary, #1c232d); outline-offset: 1px; }
.cln-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cln-room-grid { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 0; }
.cln-room-check {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--color-text, #1e293b); cursor: pointer;
}
.cln-room-check input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--color-primary, #1c232d);
}
.cln-hint { display: block; font-size: 12px; color: #8a8a8a; margin-top: 4px; }
.cln-portal-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.cln-portal-section h4 { font-size: 14px; font-weight: 600; margin: 0 0 8px; color: var(--color-text, #1e293b); }
.cln-portal-status { font-size: 13px; color: #5f5f5f; margin: 0 0 10px; }
.cln-portal-status--active { color: #16a34a; }
.cln-danger-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5e7eb; }

/* ── Settings cards ──────────────────────────────────────── */
.cln-settings-form { max-width: 640px; }
.cln-settings-card {
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 10px; padding: 24px; margin-bottom: 20px;
}
.cln-settings-card__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 700; margin: 0 0 4px;
    color: var(--color-text, #1e293b);
}
.cln-settings-card__desc { font-size: 13px; color: #5f5f5f; margin: 0 0 20px; }
.cln-settings-row { padding: 12px 0; border-top: 1px solid #f3f4f6; }
.cln-settings-row:first-of-type { border-top: none; padding-top: 0; }
.cln-toggle {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 8px; cursor: pointer;
}
.cln-toggle input[type="checkbox"] {
    width: 18px; height: 18px; margin-top: 1px;
    accent-color: var(--color-primary, #1c232d); flex-shrink: 0;
}
.cln-toggle__label {
    font-size: 14px; font-weight: 600;
    color: var(--color-text, #1e293b); flex: 1; min-width: 200px;
}
.cln-toggle__hint {
    display: block; width: 100%; padding-left: 26px;
    font-size: 12px; color: #8a8a8a; line-height: 1.4;
}
.cln-settings-actions { padding-top: 8px; }

/* ── Cleaning Responsive ─────────────────────────────────── */

/* Hide columns progressively */
@media (max-width: 900px) {
    .cln-table .cln-col-guest { display: none; }
    .cln-table .cln-col-rooms { display: none; }
    .cln-report-table .cln-col-photos { display: none; }
}

@media (max-width: 768px) {
    .cln-table .cln-col-date { display: none; }
    .cln-table .cln-col-phone { display: none; }
    .cln-report-table .cln-col-hours { display: none; }
    .cln-form-row { grid-template-columns: 1fr; }
    .cln-settings-card { padding: 16px; }
}

@media (max-width: 640px) {
    /* Task & cleaner tables: card-style rows */
    .cln-table thead { display: none; }
    .cln-table tbody tr {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 8px; padding: 12px 16px;
        border-top: 1px solid #f1f5f9;
    }
    .cln-table tbody td { padding: 0; display: none; }
    .cln-table tbody td.cln-col-room {
        display: block; width: 100%;
    }
    .cln-table tbody td.cln-col-actions {
        display: flex; width: 100%;
    }
    .cln-table .cln-cell-meta { display: block; }
    .cln-table tbody tr.cln-row--urgent {
        background: #fffbeb; border-radius: 8px; margin: 4px 0;
    }

    /* Reports: swap table for cards */
    .cln-report-table table,
    .cln-report-table thead { display: none; }
    .cln-report-cards { display: block; padding: 12px; }

    /* Stat cards: 2 columns */
    .cln-stats { grid-template-columns: 1fr 1fr; }

    .cln-select { max-width: 100px; }
    .cln-checklist-item { padding: 10px 12px; gap: 8px; }
    .cln-report-table__header { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }

    /* Action buttons wrap to new line on mobile */
    .cln-row__actions {
        flex-wrap: wrap; gap: 4px;
    }
    .cln-action-btn { font-size: 11px; padding: 3px 8px; }

    /* Header buttons: smaller on mobile */
    .btn-sm-icon { font-size: 12px; padding: 6px 10px; }
}

/* ── Cleaning Task Detail ──────────────────────────────────── */

.cln-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .cln-detail-grid {
        grid-template-columns: 1fr;
    }
}
.cln-detail-main { min-width: 0; }
.cln-detail-sidebar { min-width: 0; }

/* Timeline */
.cln-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 12px;
}
.cln-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    padding-bottom: 16px;
}
.cln-timeline-item:last-child { padding-bottom: 0; }
.cln-timeline-item::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 14px;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
}
.cln-timeline-item:last-child::before { display: none; }
.cln-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
    margin-top: 3px;
    position: relative;
    z-index: 1;
}
.cln-timeline-item--done .cln-timeline-dot { background: #10b981; }
.cln-timeline-item--skipped .cln-timeline-dot { background: #9ca3af; }
.cln-timeline-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cln-timeline-content strong {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}
.cln-timeline-content span {
    font-size: 12px;
    color: #5f5f5f;
}

/* Info list */
.cln-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cln-info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
}
.cln-info-label {
    color: #5f5f5f;
    font-weight: 500;
}
.cln-info-value {
    color: #1e293b;
    font-weight: 500;
    text-align: right;
}

/* Detail checklist */
.cln-detail-checklist {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cln-detail-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #333333;
}
.cln-detail-check svg { flex-shrink: 0; }
.cln-detail-check--done {
    color: #8a8a8a;
}
.cln-detail-check--done svg { color: #10b981; }

.cln-room-location {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    color: #5f5f5f;
    background: #f3f4f6;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ── Invoice Dashboard ─────────────────────────────────────── */

/* Stat cards */
.inv-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.inv-stat-card {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 10px;
    padding: 16px;
}

.inv-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.inv-stat-icon--total { background: #eff6ff; color: #2563eb; }
.inv-stat-icon--outstanding { background: #fefce8; color: #ca8a04; }
.inv-stat-icon--paid { background: #d1fae5; color: #15803d; }
.inv-stat-icon--overdue { background: #fef2f2; color: #dc2626; }

.inv-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-gray-800, #1f2937);
    line-height: 1.2;
}

.inv-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-gray-500, #6b7280);
    margin-top: 2px;
}

/* Tabs */
.inv-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.inv-tab {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-500, #6b7280);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 6px;
    text-decoration: none;
    background: var(--color-white, #fff);
    transition: background 0.15s;
}

.inv-tab.active {
    background: var(--color-primary, #1c232d);
    color: #fff;
    border-color: var(--color-primary, #1c232d);
}

.inv-tab:hover:not(.active) { background: var(--color-gray-50, #f9fafb); }
.inv-tab:focus-visible { outline: 2px solid var(--color-primary, #1c232d); outline-offset: 2px; }

/* Grid rows */
.inv-row {
    /* 2026-06-25 desktop bug fix (Phase 1 of invoices redesign):
     *   - All non-action columns get `minmax(0, …)` so they shrink
     *     PREDICTABLY without overflowing siblings. The pre-fix
     *     grid `140px 110px 110px 100px auto` with fixed widths
     *     gave neighbours no room to compress, so column 1 was
     *     forced to overflow into them whenever a guest name
     *     exceeded ~14ch (e.g. "Zooza s. r. o. VAT number ...").
     *   - The actions column shrinks to its content size (`auto`)
     *     and the primary CTA + kebab pair stays visible.
     *   - Bumped Invoice column to `1.4fr` because Phase 2 puts a
     *     primary CTA in the actions column, eating ~120px more
     *     than before.
     *
     * 2026-06-25 follow-up: when can_bulk_action is True, each row
     * has a 7th cell (the checkbox). The original 6-column grid
     * forced the 7th cell (Actions) to wrap onto a NEW row below
     * the data. Fixed by toggling a 7-column variant via the
     * `.inv-list-page--with-check` wrapper class. Pre-existing
     * bug — the original code shipped with this same mismatch but
     * the wrap was easier to miss before the Phase 1 ellipsis fix
     * made column widths honest.
     */
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 110px) minmax(0, 130px) minmax(0, 110px) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-gray-100, #f3f4f6);
    font-size: 13px;
    color: var(--color-gray-700, #374151);
}

/* 7-column variant — emitted when can_bulk_action is True for the
 * current user (owner/admin). Adds a 28px checkbox column at the
 * front so the trailing Actions cell stays on the same row instead
 * of wrapping below the data.
 */
.inv-list-page--with-check .inv-row {
    grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 110px) minmax(0, 130px) minmax(0, 110px) auto;
}

.inv-row--header {
    font-weight: 600;
    font-size: 12px;
    color: var(--color-gray-500, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
    padding-bottom: 8px;
}

.inv-row--urgent {
    background: #fef2f2;
    margin: 0 -12px;
    padding: 10px 12px;
    border-radius: 6px;
}

.inv-row__name { min-width: 0; }

.inv-row__title {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-primary, var(--brand, #4f46e5));
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.inv-row__title:hover { text-decoration: underline; }

.inv-row__sub {
    display: none;
    font-size: 12px;
    color: var(--color-gray-500, #6b7280);
    margin-top: 2px;
}

.inv-row__col {
    /* 2026-06-25 Phase 1: pre-fix this was `white-space: nowrap`
     * alone with NO overflow protection, so a long Guest value
     * (e.g. "Zooza s. r. o. VAT number SK2121869970") bled into
     * the Amount + Date cells beside it. Adding ellipsis + the
     * matching `min-width: 0` (inherited via parent grid's
     * `minmax(0, …)` columns) clips at column boundary instead.
     */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-row__col[title] { cursor: help; }

.inv-row__amount {
    font-weight: 600;
    color: var(--color-gray-800, #1f2937);
}

.inv-row__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

/* Badges */
.inv-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.inv-badge--green { background: #d1fae5; color: #15803d; }
.inv-badge--yellow { background: #fef9c3; color: #a16207; }
.inv-badge--blue { background: #dbeafe; color: #2563eb; }
.inv-badge--red { background: #fef2f2; color: #dc2626; }
.inv-badge--gray { background: #f3f4f6; color: #5f5f5f; }

/* Action buttons */
.inv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid;
    background: none;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}

.inv-btn:focus-visible { outline: 2px solid var(--color-primary, #1c232d); outline-offset: 2px; }

.inv-btn--view { color: var(--brand-2, #6366f1); border-color: var(--brand-2, #6366f1); }
.inv-btn--view:hover { background: var(--brand-soft, #eef2ff); }
.inv-btn--send { color: #2563eb; border-color: #2563eb; }
.inv-btn--send:hover { background: #eff6ff; }
.inv-btn--paid { color: #16a34a; border-color: #16a34a; }
.inv-btn--paid:hover { background: #f0fdf4; }
.inv-btn--cancel { color: #d97706; border-color: #d97706; }
.inv-btn--cancel:hover { background: #fffbeb; }
.inv-btn--reopen { color: #2563eb; border-color: #2563eb; }
.inv-btn--reopen:hover { background: #eff6ff; }
.inv-btn--delete { color: #dc2626; border-color: #dc2626; }
.inv-btn--delete:hover { background: #fef2f2; }

/* ─────────────────────────────────────────────────────────────────
 * 2026-06-25 Phase 2 — Primary CTA + kebab menu (Linear/Notion pattern).
 *
 * Each row gets ONE primary action button that progresses the invoice
 * lifecycle (Send / Mark Paid), plus a [⋮] kebab containing every
 * other action with explicit text labels.
 *
 * Replaces the icon-only inv-btn buttons that tenants couldn't read
 * without hovering (and couldn't hover at all on touch devices). The
 * old .inv-btn class stays alive for the bulk-action bar which still
 * uses icon+label inside its compact pill.
 * ───────────────────────────────────────────────────────────────── */

.inv-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.inv-cta:focus-visible { outline: 2px solid var(--color-primary, #1c232d); outline-offset: 2px; }

.inv-cta--send {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.inv-cta--send:hover { background: #1d4ed8; border-color: #1d4ed8; }

.inv-cta--paid {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.inv-cta--paid:hover { background: #15803d; border-color: #15803d; }

/* Secondary outline/ghost variant for the Resend button (2026-06-25
 * user-requested addition for sent/overdue invoices). Solid green
 * Mark Paid stays the visual primary — Resend is a side action that
 * shouldn't compete for attention but needs to be visible (vs.
 * buried in the kebab where it took 3 taps to reach).
 *
 * The send-airplane SVG inside keeps its blue tint as a colour cue
 * back to the original blue "Send" CTA on draft invoices — same
 * action, just at a later lifecycle stage.
 */
.inv-cta--resend {
    background: #fff;
    border-color: var(--color-gray-300, #d1d5db);
    color: var(--color-gray-700, #374151);
}
.inv-cta--resend:hover {
    background: var(--color-gray-50, #f9fafb);
    border-color: var(--color-gray-400, #9ca3af);
    color: var(--color-gray-900, #111827);
}
.inv-cta--resend svg { color: #2563eb; }

/* Kebab button (3 vertical dots) — opens the per-row action menu. */
.inv-kebab-wrap { position: relative; display: inline-flex; }

.inv-kebab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    background: #fff;
    color: var(--color-gray-600, #4b5563);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.inv-kebab-btn:hover {
    background: var(--color-gray-50, #f9fafb);
    border-color: var(--color-gray-300, #d1d5db);
    color: var(--color-gray-800, #1f2937);
}
.inv-kebab-btn[aria-expanded="true"] {
    background: var(--color-gray-100, #f3f4f6);
    border-color: var(--color-gray-400, #9ca3af);
    color: var(--color-gray-900, #111827);
}
.inv-kebab-btn:focus-visible { outline: 2px solid var(--color-primary, #1c232d); outline-offset: 2px; }

/* Kebab dropdown menu.
 *
 * `position: fixed` so the menu escapes any `overflow: hidden`
 * ancestor (the page wraps + bulk-action form region both have
 * overflow constraints that would clip an absolute-positioned menu).
 * Coords are computed in JS from the trigger's bounding rect and
 * flipped above the trigger when there's no space below.
 *
 * Critical: top + left are set inline by JS — do NOT set them here.
 */
.inv-kebab-menu {
    position: fixed;
    z-index: 1100;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 10px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.08),
        0 10px 24px -4px rgba(0, 0, 0, 0.12);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.inv-kebab-menu[hidden] { display: none; }

/* `inline-form` wrapping a kebab item keeps the menu's flex column flow */
.inv-kebab-menu .inline-form { display: flex; }
.inv-kebab-menu .inline-form > .inv-kebab-item { width: 100%; }

.inv-kebab-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-800, #1f2937);
    background: none;
    border: 0;
    border-radius: 6px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    line-height: 1.2;
}
.inv-kebab-item:hover {
    background: var(--color-gray-50, #f9fafb);
    color: var(--color-gray-900, #111827);
}
.inv-kebab-item:focus-visible {
    outline: 2px solid var(--color-primary, #1c232d);
    outline-offset: -2px;
}
.inv-kebab-item svg { flex-shrink: 0; color: var(--color-gray-500, #6b7280); }
.inv-kebab-item:hover svg { color: var(--color-gray-800, #1f2937); }

.inv-kebab-item--warn { color: #b45309; }
.inv-kebab-item--warn svg { color: #d97706; }
.inv-kebab-item--warn:hover { background: #fffbeb; color: #92400e; }

.inv-kebab-item--danger { color: #dc2626; }
.inv-kebab-item--danger svg { color: #ef4444; }
.inv-kebab-item--danger:hover { background: #fef2f2; color: #b91c1c; }

.inv-kebab-divider {
    height: 1px;
    background: var(--color-gray-100, #f3f4f6);
    margin: 4px 0;
}

/* The redesigned actions column hosts the primary CTA + kebab pair.
 * They sit on a single line with consistent spacing; if neither
 * action fires (e.g. terminal paid state with no primary), only
 * the kebab renders.
 */
.inv-row__actions {
    gap: 6px;
}

/* Empty state */
.inv-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--color-gray-400, #9ca3af);
}

.inv-empty svg { margin-bottom: 12px; }

.inv-empty h3 {
    font-size: 16px;
    color: var(--color-gray-600, #4b5563);
    margin: 0 0 4px 0;
}

.inv-empty p {
    font-size: 14px;
    margin: 0;
}

/* ── Invoice Detail Page ───────────────────────────────────── */

.inv-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 16px;
}

.inv-detail-card {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 10px;
    padding: 20px;
}

.inv-detail-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-gray-800, #1f2937);
    margin: 0 0 16px 0;
}

.inv-detail-rows { display: flex; flex-direction: column; gap: 10px; }

.inv-detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.inv-detail-row__label {
    color: var(--color-gray-500, #6b7280);
    font-weight: 500;
}

.inv-detail-row__value {
    color: var(--color-gray-800, #1f2937);
    font-weight: 500;
}

.inv-detail-notes {
    font-size: 13px;
    color: var(--color-gray-600, #4b5563);
    margin: 0;
    line-height: 1.5;
}

/* Line items in detail */
.inv-items-header {
    display: grid;
    grid-template-columns: 2fr 60px 90px 90px;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-gray-500, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}

.inv-items-row {
    display: grid;
    grid-template-columns: 2fr 60px 90px 90px;
    gap: 8px;
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-gray-100, #f3f4f6);
    color: var(--color-gray-700, #374151);
}

.inv-items-row__total { font-weight: 600; }

.inv-items-totals {
    padding-top: 12px;
    margin-top: 4px;
}

.inv-items-total-row {
    display: flex;
    justify-content: flex-end;
    gap: 32px;
    font-size: 13px;
    color: var(--color-gray-600, #4b5563);
    padding: 4px 0;
}

.inv-items-total-row--grand {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary, var(--brand, #4f46e5));
    padding-top: 8px;
    border-top: 1px solid var(--color-gray-200, #e5e7eb);
    margin-top: 4px;
}

/* ── Invoice Create Form ───────────────────────────────────── */

.inv-alert {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
}

.inv-alert--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.inv-alert p { margin: 0 0 4px 0; }
.inv-alert p:last-child { margin-bottom: 0; }

.inv-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.inv-form-group {
    margin-bottom: 0;
}

.inv-form-group--full {
    margin-top: 14px;
}

.inv-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-700, #374151);
    margin-bottom: 4px;
}

.inv-form-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}

.inv-form-input:focus-visible { outline: 2px solid var(--color-primary, #1c232d); outline-offset: 1px; }

.inv-form-input--small {
    width: 80px;
    padding: 4px 8px;
    font-size: 13px;
}

.inv-line-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.inv-line-header .inv-detail-card__title { margin-bottom: 0; }

.inv-line-labels {
    display: grid;
    grid-template-columns: 3fr 80px 100px 100px 36px;
    gap: 8px;
    font-size: 12px;
    color: var(--color-gray-500, #6b7280);
    font-weight: 500;
    margin-bottom: 8px;
}

.inv-line-row {
    display: grid;
    grid-template-columns: 3fr 80px 100px 100px 36px;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.inv-line-row .item-total {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-700, #374151);
}

.inv-totals-block {
    border-top: 1px solid var(--color-gray-200, #e5e7eb);
    padding-top: 12px;
    margin-top: 12px;
    max-width: 300px;
    margin-left: auto;
}

.inv-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--color-gray-600, #4b5563);
    padding: 4px 0;
}

.inv-totals-row label {
    font-size: 13px;
    color: var(--color-gray-500, #6b7280);
}

.inv-totals-row--grand {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary, var(--brand, #4f46e5));
    border-top: 1px solid var(--color-gray-200, #e5e7eb);
    padding-top: 8px;
    margin-top: 4px;
}

.inv-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .inv-stats { grid-template-columns: repeat(2, 1fr); }
    .inv-detail-grid { grid-template-columns: 1fr; }
    .inv-row {
        grid-template-columns: minmax(100px, 1fr) 90px 90px 90px auto;
    }
    .inv-row__col:nth-child(3) { display: none; } /* Hide Date */
    .inv-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .inv-stats { grid-template-columns: repeat(2, 1fr); }
    .inv-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .inv-tab { flex-shrink: 0; }

    .inv-row--header { display: none; }

    /* 2026-06-25 follow-up: clean 2-column row on mobile fallback
     * (when the `invoice_mobile_cards` feature flag is OFF). The
     * checkbox is hidden because bulk-action is a desktop pattern;
     * the leftover [name | actions] pair fits cleanly in `1fr auto`.
     *
     * Without this override, the bulk-action wrapper class adds a
     * 7-column grid at desktop AND that grid leaked into mobile,
     * pushing the Send button + kebab onto a wrapped 2nd row below
     * the content. The user-reported "mobile one isn't [fixed]"
     * symptom 2026-06-25.
     */
    .inv-row:not(.inv-row--header),
    .inv-list-page--with-check .inv-row:not(.inv-row--header) {
        grid-template-columns: 1fr auto;
        gap: 8px;
    }
    .inv-row__col { display: none; }
    .inv-row__sub { display: block; }
    .inv-row__actions { gap: 6px; }

    /* Hide the bulk-action checkbox column on mobile fallback.
     * Touch users very rarely bulk-action; the checkbox eats column
     * space and forces a 3-row layout. Mobile cards (Phase 3) also
     * hide it via `.inv-mobile-cards-on .inv-row__check`.
     */
    .inv-row__check { display: none !important; }

    /* Primary CTA + kebab pair: keep them inline with the row content
     * on the same line. The Phase 2 CTA pill (Send / Mark Paid) is
     * already compact (~70-90px wide).
     */
    .inv-row__actions .inv-cta {
        padding: 6px 10px;
        font-size: 12px;
    }

    .inv-line-labels { display: none; }
    .inv-line-row {
        grid-template-columns: 1fr 60px 80px 36px;
    }
    .inv-line-row .item-total { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
 * 2026-06-25 Phase 3 — Mobile cards layout (≤768px).
 *
 * Gated by `invoice_mobile_cards` PlatformFeatureFlag → view sets
 * `mobile_cards_enabled` context var → template wraps the page in
 * `.inv-mobile-cards-on`. Off = mobile users see the desktop layout
 * which still works after Phase 1's ellipsis fix.
 *
 * Mirrors the reservation_mobile_cards pattern shipped earlier:
 *   - 4px left border by status colour (instant scan)
 *   - Border-radius + box-shadow (card affordance)
 *   - Padding clears the absolute kebab/chevron
 *   - Grid reflow to 2 rows: [invoice# + amount] / [guest + date]
 *   - Primary CTA sits below row content on its own line
 *   - Chevron toggles expanded detail (line items count, due date,
 *     mark-paid affordance preview)
 *   - Status badge wraps next to invoice number
 *
 * Critical: `.inv-row__expand-btn` is in the DOM always (template
 * emits it unconditionally) but hidden via display:none here unless
 * mobile cards flag on AND viewport ≤768px.
 * ───────────────────────────────────────────────────────────────── */

.inv-row__expand-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--color-gray-200, #e5e7eb);
    background: #fff;
    color: var(--color-gray-600, #4b5563);
    cursor: pointer;
    transition: transform 0.18s, background 0.15s;
}
.inv-row__expand-btn:focus-visible {
    outline: 2px solid var(--color-primary, #1c232d);
    outline-offset: 2px;
}

/* When inv-card--expanded class is on the row, rotate the chevron 180° */
.inv-row.inv-card--expanded .inv-row__expand-btn { transform: rotate(180deg); }

@media (max-width: 768px) {
    .inv-mobile-cards-on .inv-row--header { display: none !important; }

    /* Card container styling.
     * Grid: rows reflow to a 2-row layout. Position: relative so
     * the absolute kebab/chevron can anchor to it.
     */
    .inv-mobile-cards-on .inv-row:not(.inv-row--header) {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title kebab"
            "sub kebab"
            "cta cta";
        gap: 6px 12px;
        position: relative;
        margin-bottom: 10px;
        padding: 14px 14px 14px 18px;
        background: #fff;
        border: 1px solid var(--color-gray-100, #f3f4f6);
        border-left: 4px solid #cbd5e1;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        font-size: 14px;
    }
    /* Status-based left border colour (the at-a-glance signal) */
    .inv-mobile-cards-on .inv-row.inv-row--urgent { border-left-color: #ef4444 !important; background: #fef2f2 !important; margin: 0 0 10px; padding: 14px 14px 14px 18px; }

    /* Per-status left-border tint via parent class (template renders
     * status-specific badges; we tint via a thin attribute selector
     * matched on the status-badge presence in the .inv-row__sub area).
     */
    .inv-mobile-cards-on .inv-row:has(.inv-badge--green) { border-left-color: #16a34a; }
    .inv-mobile-cards-on .inv-row:has(.inv-badge--blue) { border-left-color: #2563eb; }
    .inv-mobile-cards-on .inv-row:has(.inv-badge--yellow) { border-left-color: #ca8a04; }
    .inv-mobile-cards-on .inv-row:has(.inv-badge--red) { border-left-color: #ef4444; }
    .inv-mobile-cards-on .inv-row:has(.inv-badge--gray) { border-left-color: #9ca3af; }

    /* Layout slots */
    .inv-mobile-cards-on .inv-row__check { display: none; }
    .inv-mobile-cards-on .inv-row__name { grid-area: title; min-width: 0; }
    .inv-mobile-cards-on .inv-row__sub {
        grid-area: sub;
        display: block;
        font-size: 13px;
        color: var(--color-gray-600, #4b5563);
        line-height: 1.4;
    }
    /* Desktop column duplicates hidden — sub already carries everything */
    .inv-mobile-cards-on .inv-row__col { display: none !important; }

    /* Title gets a slight size bump for readability */
    .inv-mobile-cards-on .inv-row__title { font-size: 15px; }

    /* Actions wrap: kebab is absolute (top-right anchor). Primary CTA
     * sits below the row content on its own line for thumb-friendly
     * tap target. If no primary exists (paid/cancelled), only kebab
     * renders and the cta grid row collapses.
     */
    .inv-mobile-cards-on .inv-row__actions {
        grid-area: cta;
        display: flex;
        align-items: center;
        justify-content: stretch;
        gap: 6px;
        padding-top: 6px;
        margin-top: 4px;
        border-top: 1px solid var(--color-gray-50, #f9fafb);
    }
    .inv-mobile-cards-on .inv-cta {
        flex: 1;
        justify-content: center;
        padding: 10px 14px;
        font-size: 13.5px;
    }

    /* Move the kebab into the row corner (top-right) — escapes the
     * .inv-row__actions flex container by becoming absolute.
     */
    .inv-mobile-cards-on .inv-kebab-wrap {
        position: absolute;
        top: 8px;
        right: 8px;
    }
    .inv-mobile-cards-on .inv-kebab-btn {
        width: 36px;
        height: 36px;
    }

    /* Chevron expand: now visible (hidden by default outside the flag).
     * Sits next to (or replaces) the primary CTA depending on layout.
     * For now: visible to the left of the primary, below the kebab.
     */
    .inv-mobile-cards-on .inv-row__expand-btn {
        display: inline-flex;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    /* Expanded state: future-friendly hook. Currently no extra detail
     * panel renders — the .inv-row__sub already shows everything. Hook
     * stays for future enhancement (line items, due date, etc.).
     */
    .inv-mobile-cards-on .inv-row.inv-card--expanded {
        background: var(--color-gray-50, #f9fafb);
    }

    /* Bulk-action checkbox column hidden in card view (cards aren't
     * really bulk-actionable on mobile — desktop pattern only).
     */
    .inv-mobile-cards-on .inv-row__check { display: none !important; }
}



/* ================================================================
   MESSAGES  (.msg-)
   ================================================================ */

/* ── Unread Badge (header) ── */
.msg-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-error);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    padding: 0 6px;
    margin-left: 8px;
    vertical-align: middle;
}

/* ── Email Banner (inbox) ── */
.msg-email-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-md);
    padding: 10px 16px;
    margin-bottom: 16px;
}
.msg-email-banner__content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: #1e3a5f;
}
.msg-email-banner__content svg {
    color: #2563eb;
    flex-shrink: 0;
}
.msg-email-banner__address {
    color: #1e40af;
    font-family: monospace;
    font-size: 13px;
    -webkit-user-select: all;
    user-select: all;
}
.msg-email-banner__copy {
    background: none;
    border: 1px solid #93c5fd;
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    cursor: pointer;
    color: #2563eb;
    display: flex;
    align-items: center;
    transition: background var(--transition-fast);
}
.msg-email-banner__copy:hover {
    background: #dbeafe;
}
.msg-email-banner__hint {
    font-size: 12px;
    color: #5f5f5f;
    flex-shrink: 0;
}

/* ── Toolbar (tabs + search row) ── */
.msg-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* ── Tab Filters ── */
.msg-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: 0;
}
.msg-tab {
    display: inline-block;
    padding: 8px 16px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gray-500);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.msg-tab:hover {
    color: var(--color-gray-700);
    border-bottom-color: var(--color-gray-300);
}
.msg-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* ── Select All ── */
.msg-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.msg-select-all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    cursor: pointer;
}
.msg-select-all input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}

/* ── Toolbar right (filter + search) ── */
.msg-toolbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.msg-property-filter {
    padding: 7px 12px;
    font-size: var(--text-sm);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    color: var(--color-gray-700);
    cursor: pointer;
    max-width: 200px;
    outline: none;
}
.msg-property-filter:focus {
    border-color: var(--color-primary);
}

/* ── Context Badges (thread detail) ── */
.msg-context-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.msg-context-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 9999px;
    line-height: 1.4;
}
.msg-context-badge svg {
    flex-shrink: 0;
}
.msg-context-badge--property {
    background: var(--brand-soft, #eef2ff);
    color: var(--brand-ink, #4338ca);
}
.msg-context-badge--room {
    background: #eff6ff;
    color: #1d4ed8;
}

/* ── Search (in toolbar) ── */
.msg-search form {
    display: flex;
    align-items: center;
    gap: 0;
}
.msg-search__input {
    padding: 7px 14px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    font-size: var(--text-sm);
    width: 200px;
    outline: none;
    transition: border-color var(--transition-fast);
}
.msg-search__input:focus {
    border-color: var(--color-primary);
}
.msg-search__btn {
    padding: 8px 12px;
    font-size: var(--text-sm);
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* ── Bulk Action Bar ── */
.msg-bulk-bar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--color-primary-dark);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    font-size: var(--text-sm);
}
.msg-bulk-bar--visible { display: flex; }
.msg-bulk-bar__count { font-weight: 600; }
.msg-bulk-bar__btn {
    padding: 5px 12px;
    font-size: var(--text-xs);
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.msg-bulk-bar__btn:hover { background: rgba(255, 255, 255, 0.25); }
.msg-bulk-bar__btn--danger {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}
.msg-bulk-bar__btn--danger:hover { background: rgba(239, 68, 68, 0.45); }

/* ── Thread List ── */
.msg-thread-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    overflow: hidden;
}
.msg-thread {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: var(--color-white);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--color-gray-100);
    cursor: pointer;
}
.msg-thread:last-child { border-bottom: none; }
.msg-thread:hover { background: var(--color-gray-50); }
.msg-thread--unread { background: #f0f7ff; }
.msg-thread--unread:hover { background: #e5f0fa; }

/* Thread checkbox */
.msg-thread__check { flex-shrink: 0; }
.msg-thread__check input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

/* Thread avatar */
.msg-thread__avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--color-white);
    /* Neutral grey fallback for unknown platform codes — modifier classes
       below override per-OTA. Without this, new platforms with no per-OTA
       rule (e.g. Hostelworld, Trip.com — added in Channex prep Tier 1.E)
       would render as white-text-on-transparent (invisible). */
    background: var(--color-gray-400, #9ca3af);
}
.msg-thread__avatar--whatsapp { background: #25d366; }
.msg-thread__avatar--sms { background: var(--color-info); }
.msg-thread__avatar--email { background: var(--color-secondary); }
.msg-thread__avatar--website { background: #10b981; }

/* Platform-specific avatar colours (matches iCal card brand colours) */
.msg-thread__avatar--booking { background: #003580; }
.msg-thread__avatar--airbnb { background: #FF5A5F; }
.msg-thread__avatar--vrbo { background: #3c67f6; }
.msg-thread__avatar--expedia { background: #FFCC00; color: #1a1a1a; }
.msg-thread__avatar--tripadvisor { background: #00af87; }
.msg-thread__avatar--agoda { background: #5542f6; }
.msg-thread__avatar--hotels_com { background: #d32f2f; }

/* Thread content — 2-line layout */
.msg-thread__content {
    flex: 1;
    min-width: 0;
}
.msg-thread__line1 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.msg-thread__name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}
.msg-thread__ref {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    white-space: nowrap;
    flex-shrink: 0;
}
.msg-thread__time {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}
.msg-thread__clip {
    color: var(--color-gray-400);
    flex-shrink: 0;
}
.msg-thread__line2 {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Unread state — bolder appearance */
.msg-thread--unread .msg-thread__name {
    font-weight: 700;
    color: var(--color-gray-800);
}
.msg-thread--unread .msg-thread__line2 {
    color: var(--color-gray-600);
    font-weight: 500;
}
/* Keep property pill for test compat (hidden in new layout but class exists) */
.msg-thread__property {
    font-size: 11px;
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    padding: 1px 7px;
    border-radius: 9999px;
    display: none;
}
/* Unread dot indicator */
.msg-thread__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary, #2563eb);
    flex-shrink: 0;
    margin-right: 2px;
    vertical-align: middle;
}
/* Unread state — time emphasis */
.msg-thread--unread .msg-thread__time { color: var(--color-primary); font-weight: 600; }
.msg-thread__attachment {
    color: var(--color-gray-400);
    font-size: var(--text-xs);
}

/* Channel badges */
.msg-channel-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: 10px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.msg-channel-badge--whatsapp { background: #dcfce7; color: #166534; }
.msg-channel-badge--sms { background: #dbeafe; color: #1e40af; }
.msg-channel-badge--email { background: #e0f2fe; color: #0369a1; }
.msg-channel-badge--website { background: #fef3c7; color: #92400e; }

/* ── Pagination ── */
.msg-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px 0;
}
.msg-pagination a {
    padding: 6px 14px;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    text-decoration: none;
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    color: var(--color-primary);
}
.msg-pagination a:hover { background: var(--color-gray-50); }
.msg-pagination__info {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}

/* ── Empty State ── */
.msg-empty {
    text-align: center;
    padding: 64px 32px;
    color: var(--color-gray-400);
}
.msg-empty svg { margin-bottom: 12px; }
.msg-empty h3 {
    color: var(--color-gray-600);
    margin-bottom: 8px;
}

/* ── Chat Container ── */
/* ── Thread Header ── */
.msg-thread-header {
    margin-bottom: 24px;
}
.msg-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    text-decoration: none;
    margin-bottom: 12px;
}
.msg-back-link:hover { color: var(--color-primary); }
.msg-thread-header__main { margin-bottom: 12px; }
.msg-thread-header__subject {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 6px;
    line-height: 1.3;
}
.msg-thread-header__info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}
.msg-thread-header__name { font-weight: 600; color: var(--color-gray-700); }
.msg-thread-header__name--link {
    text-decoration: none;
    color: var(--color-primary, #2563eb);
    transition: color 120ms;
}
.msg-thread-header__name--link:hover {
    text-decoration: underline;
    color: var(--color-gray-900, #0f172a);
}
.msg-thread-header__detail::before { content: "·"; margin-right: 8px; }
.msg-thread-header__context {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: var(--text-xs);
    color: var(--color-gray-400);
}
.msg-thread-header__context span::after { content: "·"; margin-left: 6px; }
.msg-thread-header__context span:last-child::after { content: ""; }
.msg-thread-header__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* ── Message Cards ── */
.msg-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.msg-card {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    overflow: hidden;
}
.msg-card--outbound {
    border-left: 3px solid var(--color-primary);
}
.msg-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
    cursor: pointer;
    gap: 12px;
}
.msg-card__header:hover { background: var(--color-gray-100); }
.msg-card__sender {
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}
.msg-card__sender strong { font-weight: 600; }
.msg-card__via {
    font-weight: 400;
    color: var(--color-gray-400);
    font-size: var(--text-xs);
}
.msg-card__header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.msg-card__time {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    white-space: nowrap;
}
.msg-card__delivery { font-size: 10px; }
.msg-card__delivery--sent { color: var(--color-info); }
.msg-card__delivery--delivered { color: var(--color-success); }
.msg-card__delivery--failed { color: var(--color-error); }

.msg-card__body {
    padding: 16px;
}
.msg-card__cc {
    font-size: 12px;
    color: var(--color-gray-400);
    margin-bottom: 8px;
}
.msg-card__text {
    font-size: var(--text-sm);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--color-gray-700);
}

/* Attachments — image previews + file download cards */
.msg-card__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}
.msg-attachment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    font-size: 12px;
    color: #4a4a4a;
    text-decoration: none;
    max-width: 280px;
    transition: background 0.15s, border-color 0.15s;
}
.msg-attachment:hover {
    background: #fff;
    border-color: #94a3b8;
    color: #1e293b;
}
.msg-attachment svg {
    flex-shrink: 0;
    color: #5f5f5f;
}
.msg-attachment__name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.msg-attachment__size {
    color: #8a8a8a;
    flex-shrink: 0;
}
.msg-attachment--image {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    max-width: 240px;
    gap: 0;
}
.msg-attachment--image img {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
}
.msg-attachment--image .msg-attachment__name {
    padding: 6px 10px 0;
}
.msg-attachment--image .msg-attachment__size {
    padding: 0 10px 6px;
}
.msg-card__html-frame {
    width: 100%;
    border: none;
    min-height: 80px;
    display: block;
}
.msg-card__body--overflow {
    position: relative;
    max-height: 600px;
    overflow: hidden;
}
.msg-card__body--overflow::after {
    content: "Show full email ▼";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 16px 12px;
    background: linear-gradient(transparent, var(--color-white) 60%);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-primary);
    cursor: pointer;
}

/* Collapsed messages — show header only */
.msg-card--collapsed .msg-card__body { display: none; }
.msg-card--collapsed .msg-card__header { border-bottom: none; }

/* ── Date Divider (unchanged) ── */

/* Translation */
.msg-translate {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-gray-100);
}
.msg-translate__btn {
    background: none;
    border: none;
    color: var(--color-info);
    cursor: pointer;
    font-size: var(--text-xs);
    padding: 2px 0;
    text-decoration: underline;
}
.msg-translate__btn:hover { color: #2563eb; }
.msg-translate__btn:disabled { color: var(--color-gray-400); cursor: wait; }
.msg-translate__text {
    color: var(--color-gray-600);
    font-size: var(--text-xs);
    margin-top: 4px;
    padding: 4px 8px;
    background: var(--color-gray-50);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-info);
}
.msg-translate__lang {
    font-size: 10px;
    color: var(--color-gray-400);
    margin-left: 4px;
}

/* Date Divider */
.msg-date-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}
.msg-date-divider::before,
.msg-date-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--color-gray-200);
}
.msg-date-divider span {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    white-space: nowrap;
}

/* ── Reply Form ── */
.msg-reply {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 20px;
}
.msg-reply__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    font-size: var(--text-sm);
    color: var(--color-gray-500);
}
.msg-reply__to { font-weight: 500; }
.msg-reply__template-picker {
    padding: 5px 10px;
    font-size: var(--text-xs);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-gray-600);
    cursor: pointer;
    max-width: 200px;
}
.msg-reply--disabled {
    text-align: center;
    color: var(--color-gray-400);
}
.msg-reply__title {
    margin: 0 0 12px;
    font-size: var(--text-sm);
    color: var(--color-gray-700);
}
.msg-reply__cc-toggle { margin-bottom: 8px; }
.msg-reply__cc-btn {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: 0;
}
.msg-reply__cc-fields {
    display: none;
    margin-bottom: 8px;
}
.msg-reply__cc-fields--visible { display: block; }
.msg-reply__cc-row { margin-bottom: 6px; }
.msg-reply__cc-label {
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    display: block;
    margin-bottom: 2px;
}
.msg-reply__cc-input {
    width: 100%;
    padding: 7px 12px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    outline: none;
    box-sizing: border-box;
}
.msg-reply__cc-input:focus { border-color: var(--color-primary); }
.msg-reply__textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    resize: vertical;
    outline: none;
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
}
.msg-reply__textarea:focus { border-color: var(--color-primary); }

/* Reply file attachment UI */
.msg-reply__attach {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.msg-reply__attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12px;
    color: #4a4a4a;
    cursor: pointer;
    font-weight: 500;
}
.msg-reply__attach-btn:hover {
    background: #fff;
    border-color: #94a3b8;
    color: #1e293b;
}
.msg-reply__file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.msg-reply__file-item {
    padding: 4px 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    font-size: 11px;
    color: #1e40af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.msg-reply__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}
.msg-reply__hint {
    font-size: var(--text-xs);
    color: var(--color-gray-400);
}
.msg-reply__error {
    color: var(--color-error);
    font-size: var(--text-sm);
    margin-top: 8px;
    display: none;
}
.msg-reply__success {
    color: var(--color-success);
    font-size: var(--text-sm);
    margin-top: 8px;
    display: none;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .msg-email-banner { flex-direction: column; align-items: flex-start; gap: 6px; }
    .msg-email-banner__hint { flex-shrink: 1; }
    .msg-toolbar { flex-direction: column; align-items: stretch; }
    .msg-toolbar__right { flex-direction: column; gap: 8px; }
    .msg-property-filter { max-width: 100%; }
    .msg-search__input { width: 100%; }
    .msg-thread__ref { display: none; }
    .msg-thread__line2 { max-width: 250px; }
    .msg-card__header { flex-direction: column; align-items: flex-start; gap: 4px; }
    .msg-card__header-right { flex-wrap: wrap; }
    .msg-thread-header__actions { flex-wrap: wrap; }
    .msg-reply__actions { flex-direction: column; gap: 8px; }
}

/* ── Property Settings Banners ─────────────────────────── */
.settings-defaults-banner,
.settings-property-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.4;
}
.settings-defaults-banner {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0c4a6e;
}
.settings-property-banner {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #14532d;
}
.settings-banner__icon {
    flex-shrink: 0;
    opacity: .7;
}
.settings-banner__text {
    flex: 1;
    min-width: 0;
}
.settings-banner__text strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}
.settings-banner__text p {
    margin: 0;
    font-size: 12px;
    opacity: .8;
}
.settings-defaults-banner .btn,
.settings-property-banner .btn {
    flex-shrink: 0;
    white-space: nowrap;
}
.btn-outline-danger {
    color: #dc2626;
    border: 1px solid #dc2626;
    background: transparent;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s;
}
.btn-outline-danger:hover {
    background: #fef2f2;
}

/* ── Portal Settings Tabs (DigitalOcean-style folder tabs) ── */
.portal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #d1d5db;
    margin-bottom: 24px;
}
.portal-tabs a {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-500, #6b7280);
    text-decoration: none;
    border: 2px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s, background 0.15s;
}
.portal-tabs a:hover {
    color: var(--color-gray-700, #374151);
    background: var(--color-gray-50, #f9fafb);
}
.portal-tabs a.active {
    color: var(--color-text, #1f2937);
    font-weight: 600;
    background: #fff;
    border-color: #d1d5db;
}

/* ── Check-in Link Card ── */
.checkin-link-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--color-surface, #f8fafc);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    margin-bottom: 20px;
}
.checkin-link-card__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary, #2563eb);
    border-radius: 8px;
    color: #fff;
}
.checkin-link-card__body {
    flex: 1;
    min-width: 0;
}
.checkin-link-card__title {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text, #1f2937);
    margin-bottom: 2px;
}
.checkin-link-card__desc {
    font-size: 13px;
    color: var(--color-gray-500, #6b7280);
}
.checkin-link-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.checkin-link-card__url {
    font-size: 13px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    color: var(--color-text, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

/* ── Mobile: Portal Tabs + Check-in Card ── */
@media (max-width: 768px) {
    .portal-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .portal-tabs::-webkit-scrollbar { display: none; }
    .portal-tabs a {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 10px 12px;
        font-size: 13px;
    }

    .checkin-link-card {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
    }
    .checkin-link-card__icon { display: none; }
    .checkin-link-card__actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    .checkin-link-card__url {
        max-width: 100%;
        flex: 1;
        min-width: 0;
        font-size: 12px;
    }

    .settings-defaults-banner,
    .settings-property-banner {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 14px;
    }
    .settings-banner__icon {
        display: none;
    }
    .settings-defaults-banner .btn,
    .settings-property-banner .btn {
        width: 100%;
        text-align: center;
        padding: 8px 12px;
    }
}

/* ── Shared Pagination ───────────────────────────────────── */

.rsv-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 13px;
    color: var(--color-gray-500, #6b7280);
}

.rsv-pagination__info {
    font-size: 12px;
}

.rsv-pagination__controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rsv-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--color-gray-600, #4b5563);
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.rsv-pagination__btn:hover {
    background: var(--color-gray-50, #f9fafb);
    border-color: var(--color-gray-300, #d1d5db);
}

.rsv-pagination__btn--active {
    background: var(--color-primary, #2563eb);
    color: #fff;
    border-color: var(--color-primary, #2563eb);
    cursor: default;
}

.rsv-pagination__btn--active:hover {
    background: var(--color-primary, #2563eb);
    border-color: var(--color-primary, #2563eb);
}

.rsv-pagination__ellipsis {
    padding: 0 4px;
    color: var(--color-gray-400, #9ca3af);
}

/* ── Concierge Setup Request ─────────────────────────── */
.setup-status-card {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    margin-bottom: 24px;
}
.setup-status-card__icon { flex-shrink: 0; margin-top: 2px; }
.setup-status-card__body strong { font-size: 14px; color: #0c4a6e; }
.setup-status-card__body p { font-size: 13px; color: #5f5f5f; margin: 2px 0 8px; }
.setup-status-card__cats { display: flex; flex-wrap: wrap; gap: 6px; }

.setup-cat-badge {
    display: inline-block;
    padding: 2px 10px;
    background: #e0f2fe;
    border-radius: 12px;
    font-size: 11px;
    color: #0369a1;
    font-weight: 500;
}

.setup-rate-limit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 13px;
    color: #92400e;
}

.setup-form { max-width: 640px; }

.setup-fieldset {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.setup-fieldset legend {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    padding: 0 6px;
}

.setup-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.setup-category-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    color: #333333;
    cursor: pointer;
    transition: background 0.15s;
}
.setup-category-option:hover { background: #f1f5f9; }
.setup-category-option input:checked + span { color: var(--brand-2, #6366f1); font-weight: 500; }

.setup-form-group { margin-bottom: 14px; }
.setup-form-group label { display: block; font-size: 13px; font-weight: 500; color: #4a4a4a; margin-bottom: 4px; }

.setup-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.setup-contact-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.setup-radio-option {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #4a4a4a;
    cursor: pointer;
}

.setup-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

/* Concierge CTA used across pages */
.concierge-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #faf5ff;
    border: 1px solid #e9d5ff;
    border-radius: 8px;
    font-size: 13px;
    color: #6b21a8;
    margin-top: 16px;
}
.concierge-cta a {
    color: #7c3aed;
    font-weight: 600;
    text-decoration: underline;
}
.concierge-cta svg { flex-shrink: 0; stroke: #7c3aed; }

@media (max-width: 600px) {
    .setup-categories { grid-template-columns: 1fr; }
    .setup-form-row { grid-template-columns: 1fr; }
    .setup-contact-options { flex-direction: column; gap: 8px; }
}

/* ── Favourites sidebar feature (Phase 2 of FAVOURITES_MENU_PLAN, 2026-06-03) ──
 *
 * Edit-mode pattern: the sidebar has two states.
 *   - Normal mode: stars hidden, sidebar looks identical to today
 *   - Edit mode: sidebar gets data-edit-mode="true", stars revealed,
 *     link navigation disabled (only the star is interactive)
 *
 * Star buttons are present in the DOM on every favoritable item
 * (template includes _sidebar_star.html unconditionally) but hidden
 * via .nav-star { display: none } in normal mode. Edit mode reveals
 * them via .sidebar[data-edit-mode="true"] .nav-star { display: ... }.
 */

.nav-star {
    margin-left: auto;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: none;
    color: rgba(255, 255, 255, 0.4);
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 150ms ease, background 150ms ease;
}

.sidebar[data-edit-mode="true"] .nav-star {
    display: inline-flex;
}

.sidebar[data-edit-mode="true"] .nav-star--active {
    color: #f59e0b;
}

.nav-star:hover {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.1);
}

.nav-star:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 1px;
}

/* Mobile: enlarge the star button to a WCAG 2.5.5 44×44 tap target.
 * The visible 16×16 icon stays the same; the padding grows. */
@media (max-width: 768px) {
    .sidebar[data-edit-mode="true"] .nav-star {
        padding: 14px;
    }
}

/* In edit mode, disable link navigation on favoritable items so
 * the user can tap freely without accidentally navigating away.
 * The star button itself stays interactive (overridden below). */
.sidebar[data-edit-mode="true"] .sidebar-nav a.nav-item-favoritable {
    pointer-events: none;
    opacity: 0.85;
}

.sidebar[data-edit-mode="true"] .sidebar-nav a.nav-item-favoritable .nav-star {
    pointer-events: auto;
    opacity: 1;
}

/* "Customize menu" button — subtle amber tint when active. */
.sidebar-customize-btn {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.sidebar[data-edit-mode="true"] .sidebar-customize-btn {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.sidebar[data-edit-mode="true"] .sidebar-customize-btn svg {
    fill: currentColor;
}

/* Collapsed sidebar (desktop ≥769px): always hide the star button.
 * Collapsed mode has no room for stars; entering edit mode auto-
 * expands the sidebar via JS so this rule only applies to the brief
 * moment between collapsed-state and edit-mode toggle. */
@media (min-width: 769px) {
    .sidebar.collapsed .nav-star {
        display: none !important;
    }
}

/* Favourites section header — visually identical to other nav-section
 * headers; this class exists only as a selector hook for future
 * customisation (e.g. a small ⭐ glyph next to the section name). */
.nav-section--favorites .nav-section-text {
    /* inherits all from .nav-section-text */
}

/* Spoken "Added to favourites: X" (favorites.js), never seen. */
.nav-fav-status {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Top-bar language picker (templates/dashboard/_topbar_lang.html) ── */
.topbar-lang { position: relative; }
.topbar-lang__btn {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--color-gray-200);
    border-radius: 999px;
    background: #fff;
    color: var(--color-gray-700);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.topbar-lang__btn::-webkit-details-marker { display: none; }
.topbar-lang__btn:hover,
.topbar-lang[open] .topbar-lang__btn { border-color: var(--color-primary); color: var(--color-primary); }
.topbar-lang__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.topbar-lang__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 200;
    min-width: 180px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
.topbar-lang__menu a,
.topbar-lang__menu button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--color-gray-700);
    font: inherit;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.topbar-lang__menu a:hover,
.topbar-lang__menu button:hover { background: var(--color-gray-50); }
.topbar-lang__menu [aria-current="true"] { color: var(--color-primary); font-weight: 600; }
.topbar-lang__menu [aria-current="true"]::after { content: " ✓"; }
/* Phones: the top bar is full (menu, title, refresh, bell, avatar) — the
   language sits at the top of the user menu instead. */
@media (max-width: 768px) {
    .topbar-lang { display: none; }
}
/* Desktop shows the top-bar picker, so the user-menu copy is phone-only. */
@media (min-width: 769px) {
    .user-menu-lang--top,
    .user-menu-lang--top + .user-menu-divider { display: none; }
}

/* One-time language prompt (templates/dashboard/_lang_prompt.html) */
.dash-lang-prompt {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 900;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 10px 14px;
    background: #0f172a;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.3);
    font-size: 14px;
}
.dash-lang-prompt[hidden] { display: none; }
.dash-lang-prompt__yes {
    padding: 6px 14px;
    border: none;
    border-radius: 999px;
    background: var(--brand-2, #6366f1);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.dash-lang-prompt__no {
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.75);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ── Top bar + property picker (rebuilt 2026-10-08) ─────────────────
   Tenant dashboard only (.topbar--tenant; the admin panel shares
   .topbar / .user-menu and keeps its look). Heights stay 64 / 56 —
   the website editor bars and many sticky offsets sit under them.
   Property picker: in the bar next to the title from 1200px; below
   that it is the 52px strip under the bar (the old "property bar", so
   .has-property-bar offsets are unchanged there). Dropdowns share one
   look (.tb-panel / .tb-item) and one behaviour
   (static/js/dashboard/topbar_menus.js). --dash-top = height of any
   banner fixed above the dashboard (impersonation, live demo). */
.dashboard {
    padding-top: var(--dash-top, 0px);
}
.dashboard .sidebar,
.dashboard .topbar {
    top: var(--dash-top, 0px);
}

.topbar--tenant {
    --tb-ink: #1c232d;
    --tb-text: #333333;
    --tb-muted: #5f5f5f;
    --tb-line: #eaecef;
    --tb-hover: #f3f4f6;
    --tb-press: #e9ebef;
    gap: 16px;
    padding: 0 20px 0 28px;
}
.topbar--tenant .topbar-left {
    gap: 12px;
}
.topbar--tenant .topbar-title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--tb-ink);
}
.topbar--tenant .topbar-right {
    gap: 4px;
    flex-shrink: 0;
}

/* Shared focus ring: dark outline + amber halo (the menu's focus colour,
   readable on white). */
.topbar--tenant :is(button, a, input, summary):focus-visible,
.tb-panel :is(button, a, input):focus-visible {
    outline: 2px solid var(--tb-ink, #1c232d);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.28);
}
.tb-panel .tb-item:focus-visible {
    outline-offset: -2px;
    box-shadow: none;
}

/* One size for every round control on the right */
.topbar--tenant .topbar-refresh,
.topbar--tenant .notif-bell-trigger,
.topbar--tenant .topbar-lang__btn,
.topbar--tenant .user-menu-trigger,
.topbar--tenant .sidebar-toggle {
    height: 40px;
    min-width: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--tb-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.topbar--tenant .topbar-refresh:hover,
.topbar--tenant .notif-bell-trigger:hover,
.topbar--tenant .topbar-lang__btn:hover,
.topbar--tenant .user-menu-trigger:hover,
.topbar--tenant .sidebar-toggle:hover {
    background: var(--tb-hover);
    color: var(--tb-ink);
}
.topbar--tenant [data-tb-trigger][aria-expanded="true"] {
    background: var(--tb-press);
    color: var(--tb-ink);
}
@media (min-width: 769px) {
    .topbar--tenant .sidebar-toggle { display: none; }
}
.topbar--tenant .notif-bell,
.topbar--tenant .user-menu,
.topbar--tenant .topbar-lang {
    position: relative;
    margin: 0;
}
.topbar--tenant .notif-bell.open .notif-bell-trigger {
    background: var(--tb-press);
}

/* Language: globe + code */
.topbar--tenant .topbar-lang__btn {
    gap: 6px;
    padding: 0 10px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Bell badge */
.topbar--tenant .notif-bell-badge {
    top: 3px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    box-sizing: content-box;
    font-size: 10.5px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
}
.topbar--tenant .notif-bell-badge[hidden] {
    display: none;
}

/* User: avatar + chevron, set apart by a thin line */
.topbar--tenant .user-menu {
    margin-left: 6px;
    padding-left: 10px;
    border-left: 1px solid var(--tb-line);
}
.topbar--tenant .user-menu-trigger {
    gap: 4px;
    padding: 0 6px 0 4px;
}
.topbar--tenant .user-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
    background: var(--tb-ink);
}
.topbar--tenant .user-menu-chevron,
.tb-chevron {
    flex-shrink: 0;
    color: #8a8a8a;
    transition: transform 0.2s ease;
}
.tb-menu.open .user-menu-chevron,
.tb-menu.open .tb-chevron {
    transform: rotate(180deg);
}

/* Zoom: same quiet look */
.topbar--tenant .tioo-zoom-control {
    height: 36px;
    box-sizing: border-box;
    margin-right: 6px;
    border-radius: 10px;
    background: #f6f7f9;
    border-color: var(--tb-line);
}

/* ── Dropdown panels (bell, user, language, property) ── */
.tb-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 200;
    display: none;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
    text-align: left;
}
.tb-menu.open > .tb-panel {
    display: block;
    animation: tbPanelIn 0.14s ease;
}
.tb-menu.open > .notif-bell-dropdown {
    display: flex;
}
@keyframes tbPanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .tb-menu.open > .tb-panel { animation: none; }
    .tb-chevron, .topbar--tenant .user-menu-chevron { transition: none; }
}

.tb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #333333;
    font: inherit;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.tb-item:hover,
.tb-item:focus-visible {
    background: #f3f4f6;
    color: #1c232d;
}
.tb-item > svg:first-child {
    flex-shrink: 0;
    color: #8a8a8a;
}
.tb-item--muted {
    color: #5f5f5f;
}
.tb-check {
    flex-shrink: 0;
    margin-left: auto;
    color: #1c232d;
    visibility: hidden;
}
.tb-item[aria-checked="true"] {
    font-weight: 600;
    color: #1c232d;
}
.tb-item[aria-checked="true"] .tb-check {
    visibility: visible;
}
.tb-tag {
    flex-shrink: 0;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f1f2f4;
    color: #4a4a4a;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.tb-tag--plan {
    margin-left: auto;
    background: #fef3c7;
    color: #92400e;
}
.tb-divider {
    height: 1px;
    margin: 6px 4px;
    background: #eceef1;
}

/* Language menu */
.topbar--tenant .topbar-lang__menu {
    min-width: 200px;
    padding: 6px;
    display: none;
    flex-direction: column;
}
.topbar--tenant .topbar-lang.open > .topbar-lang__menu {
    display: flex;
}
.topbar--tenant .topbar-lang__menu .tb-item {
    display: flex;
    padding: 8px 10px;
    border-radius: 8px;
    color: #333333;
}
.topbar--tenant .topbar-lang__menu .tb-item[aria-current="true"] {
    color: #1c232d;
}
.topbar--tenant .topbar-lang__menu .tb-item[aria-current="true"]::after {
    content: none;
}

/* User menu panel */
.topbar--tenant .user-menu-dropdown {
    width: 280px;
    padding: 6px;
    overflow: visible;
}
.topbar--tenant .user-menu-header {
    padding: 10px 10px 12px;
    min-width: 0;
}
.topbar--tenant .user-menu-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar--tenant .user-menu-divider {
    margin: 6px 4px;
    background: #eceef1;
}
.topbar--tenant .user-menu-item {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: #333333;
}
.topbar--tenant .user-menu-item:hover,
.topbar--tenant .user-menu-item:focus-visible {
    background: #f3f4f6;
    color: #1c232d;
}
.topbar--tenant .user-menu-item--danger,
.topbar--tenant .user-menu-item--danger:hover {
    color: #b91c1c;
}
.topbar--tenant .user-menu-item--danger:hover {
    background: #fef2f2;
}
.topbar--tenant .user-menu-lang {
    padding: 4px 6px;
}

/* Bell panel */
.topbar--tenant .notif-bell-dropdown {
    width: 360px;
    max-height: min(480px, calc(100vh - var(--dash-top, 0px) - 90px));
}

/* ── Property picker ── */
.tb-prop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 0 2 auto;
}
.tb-prop__sep {
    width: 1px;
    height: 24px;
    background: var(--tb-line, #eaecef);
    flex-shrink: 0;
}
.tb-prop__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 300px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #1c232d;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tb-prop__btn:hover {
    background: #f3f4f6;
}
.tb-prop__btn[aria-expanded="true"] {
    background: #e9ebef;
}
.tb-prop__icon {
    flex-shrink: 0;
    color: #5f5f5f;
}
.tb-prop__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.tb-prop__kicker {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5f5f5f;
}
.tb-prop__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}
.tb-prop__panel {
    left: 12px;
    right: auto;
    width: 320px;
    max-width: calc(100vw - 24px);
    padding: 6px;
}
.tb-prop__list {
    max-height: min(360px, calc(100vh - var(--dash-top, 0px) - 220px));
    overflow-y: auto;
    overscroll-behavior: contain;
}
.tb-prop__item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tb-prop__item .tb-tag {
    margin-left: 4px;
}
/* Today's arrivals / departures per property (2026-10-19). */
.tb-prop__counts {
    margin-left: 8px;
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}
.tb-prop__item .tb-check {
    margin-left: auto;
}
.tb-prop__search {
    position: relative;
    margin: 2px 2px 6px;
}
.tb-prop__search svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a8a8a;
    pointer-events: none;
}
.tb-prop__search input {
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    padding: 0 10px 0 34px;
    border: 1px solid #d9dce1;
    border-radius: 8px;
    background: #fff;
    color: #1c232d;
    font: inherit;
    font-size: 14px;
}
.tb-prop__search input:focus-visible {
    outline: none;
    border-color: #1c232d;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}
.tb-prop__empty {
    margin: 0;
    padding: 10px;
    font-size: 13.5px;
    color: #5f5f5f;
}

/* Wide screens: in the bar; page content no longer needs the strip's room.
   The page title gives way first (it gets a tooltip when cut short). */
@media (min-width: 1200px) {
    .tb-prop {
        flex-shrink: 0;
        max-width: 300px;
    }
    .tb-prop__btn {
        max-width: 100%;
    }
    .dashboard .page-content.has-property-bar {
        padding-top: 96px;
    }
}

/* Below 1200px: the picker is the strip under the bar */
@media (max-width: 1199px) {
    .tb-prop {
        position: fixed;
        top: calc(var(--dash-top, 0px) + 64px);
        left: 248px;
        right: 0;
        z-index: 49;
        height: 52px;
        box-sizing: border-box;
        padding: 0 20px;
        background: #fff;
        border-bottom: 1px solid #eaecef;
        transition: left 0.2s ease;
    }
    .dashboard.sidebar-collapsed .tb-prop {
        left: 68px;
    }
    .tb-prop__sep {
        display: none;
    }
    .tb-prop__btn {
        height: 40px;
        max-width: min(420px, 100%);
        border-color: #e3e5e9;
        background: #fff;
    }
    .tb-prop__btn:hover {
        border-color: #cfd3d9;
        background: #f9fafb;
    }
    .tb-prop__kicker {
        display: none;
    }
    .tb-prop__panel {
        left: 20px;
        top: calc(100% - 4px);
    }
}

@media (max-width: 1023px) {
    .topbar--tenant .tioo-zoom-control {
        display: none;
    }
}

/* Phones */
@media (max-width: 768px) {
    .topbar--tenant {
        gap: 8px;
        padding: 0 8px 0 6px;
    }
    .topbar--tenant .topbar-left {
        gap: 4px;
    }
    .topbar--tenant .topbar-title {
        font-size: 16px;
    }
    .topbar--tenant .topbar-right {
        gap: 0;
    }
    .topbar--tenant .topbar-refresh,
    .topbar--tenant .notif-bell-trigger,
    .topbar--tenant .user-menu-trigger,
    .topbar--tenant .sidebar-toggle {
        height: 44px;
        min-width: 44px;
    }
    .topbar--tenant .user-menu {
        margin-left: 2px;
        padding-left: 4px;
    }
    .topbar--tenant .user-menu-trigger {
        padding: 0;
    }
    .topbar--tenant .user-menu-chevron {
        display: none;
    }
    .tb-prop {
        top: calc(var(--dash-top, 0px) + 56px);
        left: 0;
        padding: 0 12px;
    }
    .tb-prop__btn {
        max-width: 100%;
        height: 40px;
    }
    .tb-prop__panel {
        left: 12px;
    }
    .tb-item,
    .topbar--tenant .user-menu-item {
        min-height: 44px;
    }
}

/* Small phones: every dropdown is a full-width panel under the bars */
@media (max-width: 600px) {
    .topbar--tenant .tb-panel,
    .topbar--tenant .notif-bell-dropdown,
    .topbar--tenant .user-menu-dropdown {
        position: fixed;
        top: calc(var(--dash-top, 0px) + 56px + 6px);
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - var(--dash-top, 0px) - 56px - 18px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .topbar--tenant .tb-prop__panel {
        top: calc(var(--dash-top, 0px) + 56px + 52px + 4px);
        max-height: calc(100vh - var(--dash-top, 0px) - 56px - 52px - 16px);
    }
    .topbar--tenant .tb-prop__list {
        max-height: none;
    }
}

/* Account notices (payment overdue, 2FA deadline…) at the top of the page */
.dash-notices > .payment-warning-banner {
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid #f5d27a;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}
.dash-notices > .payment-warning-banner .payment-warning-content {
    align-items: flex-start;
}
.dash-notices > .payment-warning-banner .payment-warning-dismiss {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
}
.dash-notices > .payment-warning-banner .payment-warning-dismiss:hover {
    background: rgba(146, 64, 14, 0.08);
}

/* ── Menu button (phones/tablets): bigger burger, three equal lines ──
   Intro "slide and settle" (lines dealt in from the left, then one soft
   ring) is switched on by the inline script next to the button in
   dashboard/base.html via html.dash-burger-intro / .dash-burger-ring.
   Different on purpose from the marketing burger (static/css/mkt/header.css). */
.topbar--tenant .sidebar-toggle { position: relative; color: var(--tb-ink); }
.dash-burger { position: relative; display: block; width: 22px; height: 16px; }
.dash-burger i {
    position: absolute;
    left: 0;
    width: 22px;
    height: 2.25px;
    border-radius: 2px;
    background: currentColor;
    transition: top 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.dash-burger i:nth-child(1) { top: 0; }
.dash-burger i:nth-child(2) { top: 7px; }
.dash-burger i:nth-child(3) { top: 14px; }
.sidebar-toggle[aria-expanded="true"] .dash-burger i { animation: none; }
.sidebar-toggle[aria-expanded="true"] .dash-burger i:nth-child(1) { top: 7px; transform: rotate(45deg); }
.sidebar-toggle[aria-expanded="true"] .dash-burger i:nth-child(2) { opacity: 0; }
.sidebar-toggle[aria-expanded="true"] .dash-burger i:nth-child(3) { top: 7px; transform: rotate(-45deg); }
.dash-burger-intro .dash-burger i {
    animation: dash-burger-deal 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.dash-burger-intro .dash-burger i:nth-child(1) { animation-delay: 0.35s; }
.dash-burger-intro .dash-burger i:nth-child(2) { animation-delay: 0.47s; }
.dash-burger-intro .dash-burger i:nth-child(3) { animation-delay: 0.59s; }
@keyframes dash-burger-deal {
    0% { transform: translateX(-14px); opacity: 0; }
    60% { transform: translateX(3px); opacity: 1; }
    80% { transform: translateX(-1px); }
    100% { transform: none; opacity: 1; }
}
.dash-burger-ring .topbar--tenant .sidebar-toggle::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 12px;
    pointer-events: none;
    animation: dash-burger-ring 0.9s ease-out 1.15s both;
}
@keyframes dash-burger-ring {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
    100% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .dash-burger i { transition: none; }
    .dash-burger-intro .dash-burger i,
    .dash-burger-ring .topbar--tenant .sidebar-toggle::after { animation: none !important; }
}

/* "Settings › Page" trail on pages opened from a Settings card (2026-10-12). */
.dash-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 12px; font-size: 13px; color: #64748b; }
.dash-crumb a { color: var(--brand, #4f46e5); font-weight: 600; text-decoration: none; padding: 6px 0; }
.dash-crumb a:hover { text-decoration: underline; }
.dash-crumb__sep { color: #94a3b8; }
.dash-crumb [aria-current] { color: #334155; font-weight: 600; }

/* One-time question: authenticator code at sign-in (dashboard/base.html) */
.tfa-question .payment-warning-content { flex-wrap: wrap; row-gap: 8px; }
.tfa-question__form { display: inline; margin: 0; }
.tfa-question__btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid currentColor; background: #1e3a8a; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.tfa-question__btn--quiet { background: transparent; color: inherit; }

/* "Sheet" (spreadsheet view) buttons: computers + big tablets only. */
@media (max-width: 1023px) {
    .sh-open-btn { display: none !important; }
}