:root {
    --primary-50: #f0fdfa;
    --primary-100: #ccfbf1;
    --primary-200: #99f6e4;
    --primary-500: #14b8a6;
    --primary-600: #0f766e;
    --primary-700: #0b544e;
    --primary-900: #063a36;

    --accent-50: #fff7ed;
    --accent-500: #f97316;
    --accent-600: #ea580c;

    --gray-50: #f8fafa;
    --gray-100: #f1f3f4;
    --gray-200: #e6e9ea;
    --gray-300: #d7dbdd;
    --gray-400: #a5adb2;
    --gray-500: #6b7480;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-900: #172023;

    --danger: #dc2626;
    --danger-50: #fef2f2;
    --success: #059669;
    --success-50: #ecfdf5;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 3px rgba(23, 32, 35, 0.09), 0 4px 12px -4px rgba(23, 32, 35, 0.10);
    --shadow-md: 0 2px 4px rgba(23, 32, 35, 0.08), 0 10px 24px -6px rgba(23, 32, 35, 0.16);
    --shadow-lg: 0 16px 36px rgba(23, 32, 35, 0.14);

    --text: var(--gray-900);
    --muted: var(--gray-500);
    --border: #dce3e2;
    --bg: #f1f4f4;
    --surface: #ffffff;
    /* Form fields need their own, stronger border + a faint fill so they're clearly visible as
       inputs against a white card — the general --border is deliberately subtle for dividers, but
       that made fields nearly invisible on white in light mode. */
    --field-bg: #f3f6f7;
    --field-border: #bcc6cb;
    color-scheme: only light; /* "only": browsers with their own forced dark mode (Samsung Internet, Chrome) must not repaint the light theme */

    /* Teal used as standalone text/icon color (links, prices, badges) — kept separate
       from --primary-600/700 because those are also used as solid button/header
       backgrounds, which must stay dark+saturated even in dark mode (white text on top). */
    --primary-ink: var(--primary-600);
    --primary-ink-strong: var(--primary-700);
    --primary-tint-bg: var(--primary-50);
    --primary-tint-border: var(--primary-200);
    --avatar-bg: var(--primary-100);
    --accent-tint-bg: var(--accent-50);
    --accent-tint-border: #fed7aa;
    --accent-tint-bg-strong: #ffedd5;
    --focus-ring: var(--primary-100);
    --shadow-up: 0 -4px 16px rgba(23, 32, 35, 0.06);

    --success-bg: var(--success-50);
    --success-text: #065f46;
    --success-border: #a7f3d0;
    --danger-bg: var(--danger-50);
    --danger-text: #991b1b;
    --danger-border: #fecaca;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --purple-bg: #ede9fe;
    --purple-text: #5b21b6;
    --indigo-bg: #e0e7ff;
    --indigo-text: #3730a3;
    --under-offer-bg: #ffedd5;
    --under-offer-text: #9a3412;
    --reduced-bg: #fce7f3;
    --reduced-text: #9d174d;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --text: #eef2f2;
        --muted: #93a0a3;
        --border: #263034;
        --bg: #0b1210;
        --surface: #141b1d;
        --field-bg: #1b2427;
        --field-border: #37454d;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.6);
        --shadow-up: 0 -4px 16px rgba(0, 0, 0, 0.4);
        color-scheme: dark;

        --gray-50: #0b1210;
        --gray-100: #1c2629; /* a step lighter than the cards (#141b1d), so tracks and grey pills stay visible */
        --gray-200: #1f2a2d;
        --gray-300: #2b373b;
        --gray-400: #55636b;
        --gray-500: #7c8a90;
        --gray-600: #a3b0b4;
        --gray-700: #c7d0d2;
        --gray-900: #f2f6f6;

        --primary-ink: #5eead4;
    --danger: #f87171; /* the light-mode red is too dark to read on dark surfaces */
        --primary-ink-strong: #5eead4;
        --primary-tint-bg: rgba(20, 184, 166, 0.16);
        --primary-tint-border: rgba(94, 234, 212, 0.4);
        --avatar-bg: rgba(20, 184, 166, 0.22);
        --accent-tint-bg: rgba(249, 115, 22, 0.16);
        --accent-tint-border: rgba(251, 146, 60, 0.4);
        --accent-tint-bg-strong: rgba(249, 115, 22, 0.26);
        --focus-ring: rgba(20, 184, 166, 0.25);

        --success-bg: rgba(16, 185, 129, 0.16);
        --success-text: #6ee7b7;
        --success-border: rgba(110, 231, 183, 0.35);
        --danger-bg: rgba(220, 38, 38, 0.18);
        --danger-text: #fca5a5;
        --danger-border: rgba(252, 165, 165, 0.35);
        --warning-bg: rgba(245, 158, 11, 0.18);
        --warning-text: #fcd34d;
        --purple-bg: rgba(139, 92, 246, 0.18);
        --purple-text: #c4b5fd;
        --indigo-bg: rgba(99, 102, 241, 0.18);
        --indigo-text: #a5b4fc;
        --under-offer-bg: rgba(249, 115, 22, 0.18);
        --under-offer-text: #fdba74;
        --reduced-bg: rgba(219, 39, 119, 0.2);
        --reduced-text: #f9a8d4;
    }
}

:root[data-theme="dark"] {
    --text: #eef2f2;
    --muted: #93a0a3;
    --border: #263034;
    --bg: #0b1210;
    --surface: #141b1d;
    --field-bg: #1b2427;
    --field-border: #37454d;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.6);
    --shadow-up: 0 -4px 16px rgba(0, 0, 0, 0.4);
    color-scheme: dark;

    --gray-50: #0b1210;
    --gray-100: #1c2629; /* a step lighter than the cards (#141b1d), so tracks and grey pills stay visible */
    --gray-200: #1f2a2d;
    --gray-300: #2b373b;
    --gray-400: #55636b;
    --gray-500: #7c8a90;
    --gray-600: #a3b0b4;
    --gray-700: #c7d0d2;
    --gray-900: #f2f6f6;

    --primary-ink: #5eead4;
    --danger: #f87171; /* the light-mode red is too dark to read on dark surfaces */
    --primary-ink-strong: #5eead4;
    --primary-tint-bg: rgba(20, 184, 166, 0.16);
    --primary-tint-border: rgba(94, 234, 212, 0.4);
    --avatar-bg: rgba(20, 184, 166, 0.22);
    --accent-tint-bg: rgba(249, 115, 22, 0.16);
    --accent-tint-border: rgba(251, 146, 60, 0.4);
    --accent-tint-bg-strong: rgba(249, 115, 22, 0.26);
    --focus-ring: rgba(20, 184, 166, 0.25);

    --success-bg: rgba(16, 185, 129, 0.16);
    --success-text: #6ee7b7;
    --success-border: rgba(110, 231, 183, 0.35);
    --danger-bg: rgba(220, 38, 38, 0.18);
    --danger-text: #fca5a5;
    --danger-border: rgba(252, 165, 165, 0.35);
    --warning-bg: rgba(245, 158, 11, 0.18);
    --warning-text: #fcd34d;
    --purple-bg: rgba(139, 92, 246, 0.18);
    --purple-text: #c4b5fd;
    --indigo-bg: rgba(99, 102, 241, 0.18);
    --indigo-text: #a5b4fc;
    --under-offer-bg: rgba(249, 115, 22, 0.18);
    --under-offer-text: #fdba74;
    --reduced-bg: rgba(219, 39, 119, 0.2);
    --reduced-text: #f9a8d4;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    /* Just the device's home-indicator/gesture-bar safe area (0 on desktop) — the old fixed
       bottom tab bar it used to clear has been removed. */
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

a {
    color: var(--primary-ink);
    text-decoration: none;
}

.icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Admin impersonation ("signed in as user") banner — deliberately loud so it's never missed. */
.impersonation-banner {
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
    background: #7c3aed; color: #fff; padding: 8px 16px; font-size: 0.9rem; font-weight: 600;
    text-align: center;
}
.impersonation-banner .icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.impersonation-banner strong { font-weight: 800; }
.impersonation-banner form { margin: 0; }
.impersonation-banner button {
    background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.5);
    padding: 5px 12px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 0.82rem;
}
.impersonation-banner button:hover { background: rgba(255,255,255,0.3); }

/* Base size for nav-link-icon so it's never unconstrained when used standalone (e.g. inside a
   .type-pill or a .meta line). Context rules like .header-nav/.back-link .nav-link-icon override. */
.nav-link-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---------- Header ---------- */

.header {
    background: var(--primary-700);
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: var(--shadow-md);
}

.header .logo {
    font-weight: 800;
    font-size: 1.55rem;
    color: #fff;
    letter-spacing: -0.02em;
}

.header .logo span {
    color: var(--accent-500);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    padding: 6px;
    margin: -6px 0;
    cursor: pointer;
    flex-shrink: 0;
}

.header-menu-toggle .icon {
    width: 24px;
    height: 24px;
}

/* This header (logo + nav) had no mobile handling at all before this — .header-nav's plain
   flex row with no wrap just let extra items (Log Out, always the last one, was usually the
   victim) silently overflow past the right edge of the screen with no scrollbar or other hint
   they were even there, on every page that uses this public layout (every page isn't the CRM
   shell, which already has its own hamburger sidebar for exactly this reason). A first pass
   just wrapped the nav in place, which kept everything on-screen but read as a messy, uneven
   two-row jumble. This instead folds it behind a hamburger toggle, matching the CRM sidebar's
   own open/close pattern (assets/js/app.js), so mobile gets one tidy dropdown instead. */
@media (max-width: 640px) {
    .header-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        background: var(--primary-700);
        padding: 10px 20px 16px;
        box-shadow: var(--shadow-md);
    }

    .header-nav.open {
        display: flex;
    }

    .header-nav a,
    .header-nav .theme-toggle-btn,
    .header-nav .logout-btn {
        width: 100%;
        padding: 10px 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        justify-content: flex-start;
    }

    .header-nav .theme-toggle-form:first-child .theme-toggle-btn {
        border-top: none;
    }

    .header-nav .logout-form {
        width: 100%;
    }

    .header-nav .btn-pill {
        width: fit-content;
    }
}

.header-nav a {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.86rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease;
}

.header-nav a:hover {
    color: #fff;
}

.header-nav .nav-link-icon {
    width: 16px;
    height: 16px;
}

/* Separates "Book a Demo" (for agencies) from the Log In / Register pair so they don't read as one group. */
.header-nav-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
}

/* The mobile dropdown already draws a rule between every item. */
@media (max-width: 640px) {
    .header-nav-divider {
        display: none;
    }
}

.unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.header-nav .btn-pill {
    background: var(--accent-500);
    color: #fff;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

.header-nav .btn-pill:hover {
    background: var(--accent-600);
    color: #fff;
}

/* Log In + Register as a matched pair: outline + solid buttons of the same size. */
.header-auth {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.header-nav .header-auth a {
    justify-content: center;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    font-weight: 600;
    line-height: 1.2;
}

.header-nav .header-auth-login {
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.header-nav .header-auth-login:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.header-nav .header-auth .btn-pill {
    border: 1.5px solid var(--accent-500);
}

/* Mobile dropdown: two equal full-width buttons side by side. */
@media (max-width: 640px) {
    .header-auth {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 14px 0 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .header-nav .header-auth a {
        width: auto;
        padding: 12px 14px;
        border-radius: 12px;
        font-size: 0.95rem;
    }

    .header-nav .header-auth .btn-pill {
        width: auto;
        box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
    }
}

.logout-form {
    display: inline-flex;
}

.logout-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.86rem;
    font-weight: 500;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.logout-btn:hover {
    color: #fff;
    background: none;
    box-shadow: none;
}

.theme-toggle-form {
    display: inline-flex;
}

.theme-toggle-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.88);
    padding: 0;
    display: inline-flex;
    cursor: pointer;
}

.theme-toggle-btn:hover {
    color: #fff;
    background: none;
    box-shadow: none;
}

.theme-toggle-btn .icon {
    width: 19px;
    height: 19px;
}

/* Both states are always in the DOM (one per theme, "which one to offer switching to"), and
   CSS alone decides which is visible — the toggle click handler (assets/js/app.js) only ever
   flips the [data-theme] attribute, so this needs no JS re-render of icon/label markup at all. */
.theme-toggle-offer-dark,
.theme-toggle-offer-light {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.theme-toggle-offer-light {
    display: none;
}

:root[data-theme="dark"] .theme-toggle-offer-dark {
    display: none;
}

:root[data-theme="dark"] .theme-toggle-offer-light {
    display: inline-flex;
}

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

.container {
    padding: 20px 16px;
    max-width: 900px;
    margin: 0 auto;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.back-link .nav-link-icon {
    width: 16px;
    height: 16px;
}

.flash, .errors {
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    border: 1px solid transparent;
    box-shadow: var(--shadow-sm);
}

.flash {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

.flash-success {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    border-width: 1.5px;
}

.flash-success .badge-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.errors {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-text);
}

.errors ul {
    margin: 0;
    padding-left: 18px;
}

/* ---------- Hero / search ---------- */

/* The banner photo: a light WebP, and a much smaller one on phones (the banner is what Google times the page by). */
:root { --hero-photo: url('../img/hero-bg.webp'); }
@media (max-width: 900px) { :root { --hero-photo: url('../img/hero-bg-sm.webp'); } }

.hero {
    background:
        linear-gradient(165deg, rgba(6, 58, 54, 0.58) 0%, rgba(4, 33, 30, 0.72) 100%),
        var(--hero-photo) center/cover no-repeat;
    color: #fff;
    padding: 64px 16px 100px;
    position: relative;
    overflow: hidden;
}

@media (min-width: 640px) {
    .hero {
        min-height: 520px;
        padding: 80px 16px 120px;
    }
}

.hero::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.18), transparent 70%);
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.2), transparent 70%);
    /* Purely decorative — without this, a real click/tap landing in its 320px footprint gets
       swallowed by the blob instead of reaching whatever's actually underneath it. On desktop
       the hero is tall enough that nothing interactive ever sits this low, so this went
       unnoticed; on mobile the hero compresses and the "More Filters" toggle lands right in
       it, silently eating taps there (z-index alone wouldn't fix this — ::after paints last
       among same-stacking-level siblings, i.e. on top, regardless of DOM nesting depth). */
    pointer-events: none;
}

.hero > * {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.hero-kicker {
    display: block;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-500);
    margin: 0 auto 12px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.hero h1 {
    font-size: clamp(1.9rem, 4.5vw + 1rem, 3.1rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin: 0 auto 14px;
    text-align: center;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.hero p {
    margin: 0 auto 32px;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(1rem, 1vw + 0.7rem, 1.2rem);
    text-align: center;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* Search-box place autocomplete dropdown (body-appended, fixed-positioned). */
.place-suggest-dropdown {
    position: fixed;
    z-index: 4000;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 48px -12px rgba(15, 40, 36, 0.35), 0 4px 12px rgba(15, 40, 36, 0.10);
    padding: 8px;
    max-height: 360px;
    overflow-y: auto;
    transform-origin: top center;
    animation: placeSuggestIn 0.14s ease-out;
}
@keyframes placeSuggestIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.place-suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
    transition: background 0.12s ease;
}
.place-suggest-item + .place-suggest-item { margin-top: 2px; }
.place-suggest-item:hover,
.place-suggest-item.active {
    background: var(--primary-tint-bg);
}
.place-suggest-pin-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-tint-bg);
    color: var(--primary-ink);
    transition: background 0.12s ease, color 0.12s ease;
}
.place-suggest-item:hover .place-suggest-pin-wrap,
.place-suggest-item.active .place-suggest-pin-wrap {
    background: var(--primary-600);
    color: #fff;
}
.place-suggest-pin { width: 18px; height: 18px; }
.place-suggest-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.place-suggest-name {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.place-suggest-sub {
    font-size: 0.8rem;
    color: var(--muted);
}
.place-suggest-count {
    flex-shrink: 0;
    margin-left: auto;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}
.place-suggest-item:hover .place-suggest-count,
.place-suggest-item.active .place-suggest-count {
    background: rgba(255, 255, 255, 0.7);
    color: var(--primary-ink);
}

/* Live "N properties on the market" pill under the hero subtitle. */
.hero .hero-count {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    margin: -14px auto 30px;
    padding: 9px 20px;
    border-radius: var(--radius-full);
    background: rgba(8, 28, 25, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.92rem;
    text-shadow: none;
}
.hero .hero-count-num {
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: -0.01em;
}
.hero .hero-count-text { color: rgba(255, 255, 255, 0.82); }
.hero-count-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    flex-shrink: 0;
    animation: heroCountPulse 2.2s ease-out infinite;
}
@keyframes heroCountPulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-count-dot { animation: none; }
}

.search-form {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 18px;
    display: grid;
    gap: 12px;
    color: var(--text);
    box-shadow: var(--shadow-md);
}

/* Grid items default to min-width:auto, a floor at their content's own intrinsic width — for a
   text input, Chrome factors its current VALUE into that, not just its `size` attribute. Type
   a long unbroken value (a title with no spaces, say) into any field on this form and, with no
   override, that one field's intrinsic width becomes the whole grid column's minimum, forcing
   the entire form off the right edge of the screen. min-width:0 removes that floor so a field
   scrolls its own overflowing text internally instead of ever widening the form around it. */
.search-form > * {
    min-width: 0;
}

.hero .search-form {
    box-shadow: var(--shadow-lg);
    margin-bottom: -48px;
    position: relative;
}

.hero-search {
    background: var(--surface);
    border-radius: var(--radius-full);
    padding: 6px;
    display: flex;
    align-items: stretch;
    gap: 2px;
    box-shadow: 0 24px 48px -16px rgba(4, 20, 18, 0.45), var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-bottom: -48px;
    position: relative;
}

.hero-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    min-width: 0;
}

.hero-search-field .icon {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex-shrink: 0;
}

.hero-search-select {
    flex: 0 0 auto;
    max-width: 168px;
}

.hero-search-input {
    flex: 1;
}

.hero-search-select select,
.hero-search-input input {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.92rem;
    color: var(--text);
    width: 100%;
}

.hero-search-select select {
    font-weight: 700;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 16px;
}

/* The closed pill needs a transparent background to blend into .hero-search-field, but a
   transparent <select> background leaks into its native dropdown popup too — Chrome then
   falls back to a plain white popup while the text stays whatever --text resolves to, which
   in dark mode is a near-white color on that white popup: unreadable. Options get their own
   explicit, solid, theme-aware colors so the popup is never transparent, regardless of what
   the closed pill looks like. */
.hero-search-select select option {
    background-color: var(--surface);
    color: var(--text);
    font-weight: 500;
    padding: 8px 12px;
}

.hero-search-select select:focus,
.hero-search-input input:focus {
    outline: none;
    box-shadow: none;
}

.hero-search-field:focus-within {
    background: var(--bg);
    border-radius: var(--radius-full);
}

.hero-search-divider {
    width: 1px;
    background: var(--border);
    margin: 8px 0;
    flex-shrink: 0;
}

.hero-filters-toggle-wrap {
    display: flex;
    justify-content: center;
    /* .hero-search has margin-bottom: -48px (deliberate — lets the pill visually overlap
       into the white section below the hero), which also drags whatever follows it up by
       that same 48px in normal block flow. Cancel that pull (+48px) before adding the
       actual visible gap (+16px) we want under the pill. */
    margin-top: 64px;
}

.hero-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.hero-filters-toggle:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #fff;
}

.hero-filters-toggle .toggle-filters-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}

.hero-filters-toggle.open .toggle-filters-icon {
    transform: rotate(45deg);
}

.hero-filters-panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-top: 14px;
    display: grid;
    gap: 12px;
    color: var(--text);
    box-shadow: var(--shadow-lg);
    text-align: left;
}

/* Custom listing-type picker — replaces the native <select>'s dropdown (which can't be
   themed beyond its own text/background colors: square corners, no shadow, browser-default
   highlight color, no border-radius to match the pill it lives in). The <select> itself
   stays in the DOM as the real form field and as the fallback control if JS never runs. */
.custom-select {
    position: relative;
    flex: 1;
    min-width: 0;
}

.custom-select.js-enhanced .custom-select-native {
    display: none;
}

.custom-select-trigger {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    /* This is a button, not text content — an accidental drag-click shouldn't leave the
       label text sitting there highlighted in the browser's selection color. */
    user-select: none;
}

/* Needed because .custom-select-trigger is a real <button>: the site-wide `button:hover`
   rule (solid brand-color fill) is a pseudo-class + element selector, which is MORE specific
   than the plain single-class `.custom-select-trigger` rule above — so without this, hovering
   the trigger repaints it with the default button hover color instead of staying transparent. */
.custom-select-trigger:hover {
    background: transparent;
}

.custom-select.js-enhanced .custom-select-trigger {
    display: flex;
}

.custom-select-chevron {
    width: 16px;
    height: 16px;
    color: var(--muted);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.custom-select.open .custom-select-chevron {
    transform: rotate(180deg);
}

/* position: fixed (not absolute) and positioned via JS (see custom-select.js) rather than
   `top/left` relative to .custom-select — the homepage hero this lives in has `overflow:
   hidden` (needed to clip its own decorative background blobs), which would otherwise clip
   the bottom of this listbox whenever it has more options than fit in the hero's remaining
   height below the search bar. `position: fixed` escapes that ancestor's clipping. */
.custom-select-listbox {
    position: fixed;
    width: max-content;
    /* width:max-content sizes this to whichever option's text is widest with no wrapping —
       fine for short option labels (province names, listing types), but a long one (a lengthy
       property title) can make the whole box wider than a mobile screen, with no horizontal
       scroll to reach the overflow — it just silently runs off the right edge. This caps it to
       the viewport so long labels wrap onto a second line inside the box instead. */
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    margin: 0;
    list-style: none;
    z-index: 40;
    max-height: 260px;
    overflow-y: auto;
}

.custom-select-option {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.1s ease;
    /* Belt-and-braces for the max-width cap above: normal wrapping only breaks at spaces, so a
       single very long unbroken token (garbled data, a URL, anything with no whitespace) would
       still push past the box's edge on its own line. This allows a mid-word break as a last
       resort, only once a token is too wide to fit any other way. */
    overflow-wrap: anywhere;
}

/* A neutral gray hover (not the same teal tint .selected uses below) so the two states never
   read as visually identical when hovering the option that's already selected — and
   --gray-200, not --gray-100, since --gray-100 is literally the same color as the listbox's
   own --surface background in dark mode (both #141b1d), which would make hover invisible
   there specifically even though it showed up fine in light mode. */
.custom-select-option:hover,
.custom-select-option:focus {
    background: var(--gray-200);
    outline: none;
}

.custom-select-option.selected {
    background: var(--primary-tint-bg);
    color: var(--primary-ink-strong);
    font-weight: 700;
}

.custom-select-option.selected:hover,
.custom-select-option.selected:focus {
    background: var(--primary-tint-bg);
}

.hero-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary-600);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    padding: 0 26px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease;
}

.hero-search-btn .icon {
    width: 18px;
    height: 18px;
}

.hero-search-btn:hover {
    background: var(--primary-700);
}

.hero-search-btn:active {
    transform: scale(0.97);
}

@media (max-width: 680px) {
    .hero-search {
        flex-direction: column;
        border-radius: var(--radius-lg);
        padding: 10px;
        gap: 2px;
    }

    .hero-search-divider {
        width: auto;
        height: 1px;
        margin: 2px 12px;
    }

    .hero-search-select,
    .hero-search-input {
        max-width: none;
        width: 100%;
    }

    .hero-search-field:focus-within {
        border-radius: var(--radius-md);
    }

    .hero-search-btn {
        border-radius: var(--radius-md);
        padding: 14px;
        margin-top: 6px;
    }
}

/* .filters-panel (results page) was missing from this list, so its .row divs (Property Type +
   Province, Min/Max Price, Min Beds/Baths) never got the 2-column grid treatment and stacked
   as plain full-width blocks instead — the actual cause of the results page's search/filters
   card looking cramped and unpolished. */
.search-form .row,
.filters-panel .row,
.hero-filters-panel .row,
.settings-card .row {
    display: grid;
    /* minmax(0, 1fr), not a bare 1fr — a bare 1fr track's implicit minimum is its content's
       own min-content width (a <select>'s longest option, an input's rendered value), which
       varies by the viewer's actual font rendering. That's invisible on a desktop test but on
       a real phone, with different system font metrics, the two columns' min-content widths
       can sum past the viewport and force the whole form to scroll sideways. minmax(0, 1fr)
       lets the track shrink past that, so overflow is the input's own problem, never the grid's. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

/* On phones these two-up rows (search filters, settings, the New/Confirm password pair) are too
   cramped side by side and their labels wrap — stack them to one column. Placed after the base
   rule so it wins at narrow widths. */
@media (max-width: 520px) {
    .search-form .row,
    .filters-panel .row,
    .hero-filters-panel .row,
    .settings-card .row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    margin-bottom: 6px;
}

.member-role-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.member-role-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    flex-shrink: 0;
}

.member-role-select {
    width: auto;
    min-width: 150px;
    padding: 6px 10px;
    font-size: 0.82rem;
}

.checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--muted);
    margin: 4px 0 18px;
    cursor: pointer;
}

.checkbox-field input {
    width: auto;
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--primary-600);
}

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

.photo-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 30px 16px;
    background: var(--bg);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.photo-dropzone .icon {
    width: 30px;
    height: 30px;
    color: var(--muted);
    margin-bottom: 6px;
}

.photo-dropzone strong {
    font-size: 0.92rem;
    color: var(--text);
}

.photo-dropzone.dragover {
    border-color: var(--primary-500);
    background: var(--primary-tint-bg);
}

.photo-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.photo-preview-item {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    box-shadow: var(--shadow-sm);
}

.photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-preview-item form {
    position: absolute;
    top: 4px;
    right: 4px;
}

.photo-preview-remove {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    border: none;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.photo-preview-remove:hover {
    background: var(--danger);
}

.more-filters-panel {
    gap: 12px;
}

.toggle-filters-icon {
    transition: transform 0.2s ease;
}

.btn-icon.open .toggle-filters-icon {
    transform: rotate(45deg);
}

/* ---------- Modern search bar + filters panel ---------- */

.tab-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tab-group input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.tab-group label {
    padding: 9px 16px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--muted);
    background: var(--surface);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tab-group input:checked + label {
    background: var(--primary-600);
    color: #fff;
    border-color: var(--primary-600);
}

.tab-group input:focus-visible + label {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.search-input-wrap {
    position: relative;
}

.search-input-wrap .icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--muted);
    pointer-events: none;
}

.search-input-wrap input {
    padding-left: 40px;
}

.select-wrap select {
    padding-left: 40px;
    padding-right: 36px;
    appearance: none;
    -webkit-appearance: none;
    font-weight: 600;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}

.quick-search-bar {
    display: grid;
    gap: 12px;
}

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

.featured-header .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.featured-header .section-title .icon {
    color: #d97706;
}

#featured-region-form .listing-type-field {
    min-width: 220px;
}

/* Results-page listing-type picklist — same .custom-select JS/markup as the homepage hero
   search, just wrapped in a bordered field to match this page's squared-off input style
   instead of the hero's rounded pill. */
.listing-type-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1.5px solid var(--field-border);
    border-radius: var(--radius-sm);
    background: var(--field-bg);
}

.listing-type-field > .icon {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex-shrink: 0;
}

.listing-type-field .custom-select {
    flex: 1;
    min-width: 0;
}

.filters-panel {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-top: 14px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    display: grid;
    gap: 12px;
}

/* Collapsible filter panel on the results page: starts collapsed once filters are applied. */
.filters-collapse { display: grid; gap: 12px; }
.filters-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.filters-summary::-webkit-details-marker { display: none; }
.filters-summary-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    flex-shrink: 0;
}
.filters-summary-active {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.filters-summary-chevron {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--muted);
    transition: transform 0.2s ease;
}
details.filters-collapse[open] .filters-summary-chevron { transform: rotate(180deg); }
.filters-collapse-body { display: grid; gap: 12px; margin-top: 4px; }

.filters-panel .section-title {
    margin: 0 0 2px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.features-grid .checkbox-field {
    margin: 4px 0;
}

.theme-choice-row {
    display: flex;
    gap: 10px;
}

.profile-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
}

.profile-links-row .btn {
    width: auto;
}

.theme-choice-row button.active-theme {
    background: var(--primary-tint-bg);
    border-color: var(--primary-500);
    color: var(--primary-ink-strong);
}

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

/* Every dropdown list gets solid, theme-aware colours. A select drawn with a see-through background (pills, toolbar
   filters) otherwise opens on a white list with the dark theme's near-white text in Chrome on Windows: unreadable. */
select option, select optgroup {
    background-color: var(--surface);
    color: var(--text);
}
select option:disabled {
    color: var(--muted);
}

input, select, textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid var(--field-border);
    border-radius: var(--radius-sm);
    font-size: 0.94rem;
    background: var(--field-bg);
    color: var(--text);
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

input::placeholder, textarea::placeholder {
    color: var(--muted);
    opacity: 1;
}

/* File pickers everywhere: a dashed drop-style box with a proper branded button instead of the browser's grey one. */
input[type="file"] {
    padding: 7px;
    border-style: dashed;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.86rem;
    cursor: pointer;
    line-height: 1.4;
}
input[type="file"]:hover {
    border-color: var(--primary-500);
    background: var(--primary-tint-bg);
}
input[type="file"]::file-selector-button {
    margin: 0 12px 0 0;
    padding: 8px 16px;
    border: 1.5px solid var(--primary-600);
    border-radius: calc(var(--radius-sm) - 2px);
    background: var(--surface);
    color: var(--primary-ink-strong, var(--primary-600));
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
input[type="file"]:hover::file-selector-button,
input[type="file"]:focus-visible::file-selector-button {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}
input[type="file"]:disabled { cursor: not-allowed; opacity: 0.6; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

textarea {
    resize: vertical;
    min-height: 90px;
}

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

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary-600);
    color: #fff;
    border: none;
    padding: 11px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

/* The standard teal button darkens on hover. :where() keeps this rule as weak as a single class, so a
   button with its own look (text links, icon buttons, chips, tabs) keeps it instead of turning dark teal. */
:where(button, .btn):hover {
    background: var(--primary-700);
    box-shadow: var(--shadow-sm);
}

button:active, .btn:active {
    transform: translateY(1px);
}

button.secondary, .btn.secondary {
    background: var(--surface);
    color: var(--primary-ink);
    border: 1.5px solid var(--primary-tint-border);
}

button.secondary:hover, .btn.secondary:hover {
    background: var(--primary-tint-bg);
    border-color: var(--primary-500);
}

button.favorited {
    background: var(--accent-tint-bg);
    color: var(--accent-600);
    border: 1.5px solid var(--accent-tint-border);
}

button.favorited:hover {
    background: var(--accent-tint-bg-strong);
}

button.danger, .btn.danger {
    background: var(--surface);
    color: var(--danger);
    border: 1.5px solid var(--danger-border);
}

button.danger:hover, .btn.danger:hover {
    background: var(--danger-bg);
    box-shadow: none;
}

button.block, .btn.block {
    width: 100%;
}

button.btn-auction, .btn.btn-auction {
    background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
    color: #fff;
    border: none;
}

button.btn-auction:hover, .btn.btn-auction:hover {
    background: linear-gradient(135deg, var(--accent-600), var(--accent-600));
    box-shadow: var(--shadow-md);
}

.add-listing-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.add-listing-actions .btn {
    flex: 1;
    min-width: 160px;
}

.btn-icon .icon {
    width: 18px;
    height: 18px;
}

/* Selectable package cards (franchise tier picker on register) — replaces a long-label native
   <select> that rendered badly on mobile. */
.package-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}
@media (max-width: 560px) {
    .package-options { grid-template-columns: minmax(0, 1fr); }
}
.package-option {
    position: relative;
    display: block;
    cursor: pointer;
}
.package-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.package-option-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.package-option:hover .package-option-card { border-color: var(--primary-500); }
.package-option input:checked + .package-option-card {
    border-color: var(--primary-600);
    background: var(--primary-tint-bg);
    box-shadow: 0 0 0 3px var(--primary-tint-bg);
}
.package-option-check {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.package-option input:checked + .package-option-card .package-option-check {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}
.package-option-check .icon { width: 13px; height: 13px; }
.package-option-name {
    font-weight: 800;
    font-size: 1rem;
    color: var(--text);
    padding-right: 30px;
}
.package-option-price {
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--primary-ink);
}
.package-option-price small {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}
.package-option-sub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--muted);
}
.package-option-sub .badge-icon { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------- Cards / grid ---------- */

.section-title {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 28px 0 14px;
}

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

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

/* Browsing pages (home featured, search results): wider on desktop so buyers see three homes per row. */
.container.container-browse {
    max-width: 1240px;
}

@media (min-width: 1000px) {
    .container-browse .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Link card that fills the empty end of the last grid row (partials/_grid_filler.php). Shown only at
   the column count where a gap actually exists; hidden on phones (one column never has a gap). */
.grid-filler {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 220px;
    padding: 24px;
    text-align: center;
    color: inherit;
    text-decoration: none;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--primary-tint-bg);
    transition: border-color 0.15s ease;
}

.grid-filler:hover {
    border-color: var(--primary-tint-border, var(--border));
}

.grid-filler-icon .icon,
.grid-filler-icon svg {
    width: 28px;
    height: 28px;
}

.grid-filler-cta {
    font-weight: 700;
    color: var(--primary-ink);
}

@media (min-width: 640px) and (max-width: 999px) {
    .container-browse .grid-filler--2 {
        display: flex;
    }
}

@media (min-width: 1000px) {
    .container-browse .grid-filler--3 {
        display: flex;
        grid-column: span var(--fill-span3);
    }
}

.card {
    background: var(--surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    /* A visible lift off the page: the old --shadow-sm (0.06 alpha) plus the very light --border
       left white cards almost edgeless on the near-white light background. This layered shadow
       reads clearly in light mode and is effectively invisible on the dark background, where the
       border does the separating. */
    box-shadow: 0 1px 3px rgba(23, 32, 35, 0.09), 0 8px 20px -8px rgba(23, 32, 35, 0.12);
    border: 1px solid var(--border);
    display: block;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.card .thumb {
    width: 100%;
    height: 175px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    position: relative;
}

.card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

a.card:hover .thumb img {
    transform: scale(1.06);
}

.card .body {
    padding: 14px;
}

.card .price {
    font-weight: 800;
    color: var(--primary-ink-strong);
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.card .tag {
    display: inline-block;
    background: var(--accent-tint-bg);
    color: var(--accent-600);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    margin-bottom: 8px;
}

.card .title {
    font-weight: 700;
    margin: 5px 0 3px;
    color: var(--text);
    font-size: 0.98rem;
}

/* No bare .meta rule existed before this — every other property comes from the specific
   scoped rules below (.card .meta, .hero .meta, etc.) or plain inherited/browser defaults.
   This exists purely so a long unbroken word inside one (a title with no spaces, typed as a
   single run of characters) wraps onto a new line instead of forcing the whole page wider —
   the same class of overflow bug as .list-row .info strong above, just for plain <p>/<span>
   captions instead of list rows. */
.meta {
    overflow-wrap: break-word;
    word-break: break-word;
}

.card .meta {
    color: var(--muted);
    font-size: 0.83rem;
}

.card-address {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 0.83rem;
    margin-top: 2px;
}

.card-address .icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.card-description {
    color: var(--muted);
    font-size: 0.83rem;
    line-height: 1.4;
    margin: 8px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
}

.card-specs span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.card-specs .icon {
    width: 15px;
    height: 15px;
    color: var(--muted);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    text-transform: capitalize;
}

.status-awaiting_payment { background: var(--purple-bg); color: var(--purple-text); }
.status-pending { background: var(--warning-bg); color: var(--warning-text); }
.status-active { background: var(--success-bg); color: var(--success-text); }
.status-rejected { background: var(--danger-bg); color: var(--danger-text); }

.payment-badge { background: var(--success); color: #fff !important; }
.payment-badge.unpaid { background: var(--danger); }
.payment-badge.free { background: var(--primary-500); }
.status-sold, .status-rented { background: var(--indigo-bg); color: var(--indigo-text); }
.status-under_offer { background: var(--under-offer-bg); color: var(--under-offer-text); }
.status-reduced { background: var(--reduced-bg); color: var(--reduced-text); }
.status-expired { background: var(--gray-100); color: var(--gray-700); }

/* Same amber identity as .featured-badge (the on-photo ribbon), but inline — sits next to the
   status pill in a table cell rather than pinned absolute over an image. */
.featured-inline-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    margin-left: 4px;
}

.featured-inline-badge .icon {
    width: 11px;
    height: 11px;
}

/* Sits directly on a photo, so it needs its own solid, high-contrast colors
   regardless of theme — the translucent .status-pill tokens above are tuned
   for flat card/table backgrounds and read as barely-there over an image. */
.card-status-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    box-shadow: var(--shadow-sm);
    color: #fff;
}
.card-status-badge.status-under_offer { background: #c2410c; }
.card-status-badge.status-sold,
.card-status-badge.status-rented { background: #3730a3; }
.card-status-badge.status-reduced { background: #be185d; }

/* ---------- Property detail ---------- */

.detail-page {
    max-width: 1100px;
}

.back-to-listings {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
}

.back-to-listings:hover {
    color: var(--text);
}

.back-to-listings .icon {
    width: 16px;
    height: 16px;
}

.detail-gallery {
    display: flex;
    overflow-x: auto;
    border-radius: var(--radius-lg);
    scroll-snap-type: x mandatory;
    box-shadow: var(--shadow-md);
    /* The point of this whole component: swipeable, but no visible scrollbar. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.detail-gallery::-webkit-scrollbar {
    display: none;
}

.gallery-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: 4 / 3;
    cursor: zoom-in;
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (min-width: 640px) {
    .gallery-slide {
        aspect-ratio: 16 / 9;
    }
}

.gallery-empty {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    background: var(--gray-100);
    color: var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    box-shadow: var(--shadow-md);
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(15, 23, 23, 0.55);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    backdrop-filter: blur(3px);
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
}

.gallery-arrow:hover {
    background: rgba(15, 23, 23, 0.8);
    transform: translateY(-50%) scale(1.07);
}

/* The global `button:active { transform: translateY(1px); }` rule (style.css, Buttons
   section) REPLACES this button's own `transform: translateY(-50%)` centering the instant
   it's pressed — transform isn't additive across separate rules — so on mousedown the arrow
   jumped out of its vertical-centered position toward the top of the image, then snapped back
   on release. That visible "drop and return" also meant the cursor was no longer over the
   button by the time mouseup fired, so the click's target became whatever was now underneath
   it instead of the arrow itself. Composing both transforms here keeps it centered through
   the press. */
.gallery-arrow:active {
    transform: translateY(-50%) translateY(1px);
}

.gallery-arrow-prev { left: 12px; }
.gallery-arrow-next { right: 12px; }
.gallery-arrow .icon { width: 20px; height: 20px; }

.gallery-counter {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(15, 23, 23, 0.6);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: var(--radius-full);
    z-index: 3;
    backdrop-filter: blur(3px);
}

.gallery-expand {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 23, 23, 0.55);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    backdrop-filter: blur(3px);
    padding: 0;
    transition: background 0.15s ease;
}

.gallery-expand:hover { background: rgba(15, 23, 23, 0.8); }
.gallery-expand .icon { width: 16px; height: 16px; }

.gallery-dots {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 2px;
}

/* The dot still looks 7px, but a transparent 9px border around it makes it a comfortable thumb target. */
.gallery-dot {
    box-sizing: content-box;
    width: 7px;
    height: 7px;
    min-height: 0;
    border-radius: 50%;
    background: var(--border);
    background-clip: padding-box;
    border: 9px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.gallery-dot.active {
    background-color: var(--primary-600); /* colour only: keeps the 7px dot inside its larger tap area */
    transform: scale(1.35);
}

/* ---------- Fullscreen lightbox ---------- */

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 8, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 56px 16px;
}

.lightbox.open {
    display: flex;
}

.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.lightbox-close,
.lightbox-arrow {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(3px);
    padding: 0;
    transition: background 0.15s ease;
}

.lightbox-close:hover,
.lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Same fix as .gallery-arrow:active above, and the actual root cause of the "click next and
   the lightbox closes" bug: .lightbox-arrow centers itself with `transform: translateY(-50%)`,
   which the global `button:active { transform: translateY(1px); }` rule silently replaced
   (not composed) the instant the button was pressed — so the arrow visibly jumped away from
   under the cursor on mousedown and snapped back on release, meaning the click's mouseup
   landed on the backdrop behind it instead of the button, closing the whole lightbox. Enlarging
   the button earlier only reduced how often this was noticeable; this is the actual fix.
   .lightbox-close doesn't need the same override — it's positioned with plain top/right, not
   transform, so it was never affected. */
.lightbox-arrow:active {
    transform: translateY(-50%) translateY(1px);
}

.lightbox-close { top: 18px; right: 18px; width: 46px; height: 46px; }
/* 64px (up from 48px) — the previous size was an easy miss on a real click (not a
   pixel-perfect scripted one), and missing this button means the click lands on the
   full-viewport backdrop behind it, which closes the whole lightbox. A bigger target
   makes that far less likely without changing the "click outside to close" behavior itself. */
.lightbox-arrow { top: 50%; transform: translateY(-50%); width: 64px; height: 64px; }
.lightbox-arrow-prev { left: 14px; }
.lightbox-arrow-next { right: 14px; }
.lightbox-close .icon { width: 20px; height: 20px; }
.lightbox-arrow .icon { width: 26px; height: 26px; }

.lightbox-counter {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.12);
    padding: 5px 13px;
    border-radius: var(--radius-full);
}

/* ---------- Detail header / two-column layout ---------- */

.detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 18px 0 4px;
}

/* Same fix as .search-form > * above, same reason: a flex item's default min-width:auto sizes
   it to fit its content (the title, uninterrupted) before overflow-wrap ever gets a chance to
   break it — this removes that floor so the title wraps inside the available width instead of
   pushing the whole page wider. */
.detail-header > * {
    min-width: 0;
}

.detail-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    overflow-wrap: break-word;
}

.detail-location {
    display: flex;
    align-items: center;
    gap: 5px;
}

.detail-location .nav-link-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.detail-price {
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--primary-ink-strong);
    background: var(--primary-tint-bg);
    border: 1.5px solid var(--primary-tint-border);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

@media (min-width: 640px) {
    .detail-price {
        font-size: 2.2rem;
    }
}

.detail-section {
    padding: 16px;
    margin-bottom: 16px;
}

.detail-description {
    color: var(--text);
    line-height: 1.6;
}

.detail-layout {
    margin-top: 8px;
}

.detail-sidebar {
    margin-top: 24px;
}

@media (min-width: 960px) {
    .detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px; /* minmax(0, ...): a long tab row scrolls instead of pushing the sidebar off screen */
        gap: 32px;
        align-items: start;
    }

    .detail-sidebar {
        margin-top: 0;
        position: sticky;
        top: 88px;
    }
}

/* ---------- CRM record page (client record, etc.) ---------- */

.record-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-600) 55%, var(--primary-500) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    margin: 14px 0 20px;
    box-shadow: var(--shadow-md);
}

.record-hero .avatar {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
    border: 3px solid rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.record-hero .avatar-fallback {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.record-hero-info {
    flex: 1;
    min-width: 180px;
}

.record-hero-name {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: #fff;
}

.record-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.record-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.18);
    padding: 3px 11px;
    border-radius: var(--radius-full);
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.record-hero-actions {
    display: flex;
    flex-wrap: wrap; /* several text buttons (e.g. branch "Head Office" page) wrap instead of pushing off a phone screen */
    gap: 10px;
}

.icon-action-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}

.icon-action-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
}

.icon-action-btn .icon {
    width: 19px;
    height: 19px;
}

.icon-action-btn.outline {
    background: var(--surface);
    border: 1.5px solid var(--primary-tint-border);
    color: var(--primary-ink);
    width: 38px;
    height: 38px;
}

.icon-action-btn.outline:hover {
    background: var(--primary-tint-bg);
    border-color: var(--primary-500);
    transform: none;
}

/* Right-aligned row of actions in a table cell (e.g. "Open" + remove) — keeps a rectangular
   button and a round icon button inline and vertically centred instead of the icon button
   (display:flex) dropping onto its own line. */
.table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

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

/* Danger variant of the outline icon button — red icon/border, red tint on hover. */
.icon-action-btn--danger {
    border-color: var(--danger-border);
    color: var(--danger-text);
}

.icon-action-btn--danger:hover {
    background: var(--danger-bg);
    border-color: var(--danger-text);
    color: var(--danger-text);
}

.icon-action-btn.outline .icon {
    width: 16px;
    height: 16px;
}

.section-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.section-icon-chip {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-tint-bg);
    color: var(--primary-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-icon-chip .icon {
    width: 18px;
    height: 18px;
}

.section-card-header h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
}

.section-card-header .count-badge {
    margin-left: auto;
    background: var(--gray-100);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

/* Rows inside a record section card read as a clean divided list rather than
   boxes-within-a-box — .list-row's own border/shadow are only useful standalone. */
.detail-section .list-row,
.record-tab-content .list-row {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 14px 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
}

.detail-section .list-row:last-of-type,
.record-tab-content .list-row:last-of-type {
    border-bottom: none;
    padding-bottom: 2px;
}

.detail-section .empty-hint,
.record-tab-content .empty-hint {
    color: var(--muted);
    font-size: 0.88rem;
    padding: 6px 0 2px;
}

.upload-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 180px;
    padding: 11px 14px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.upload-picker:hover {
    border-color: var(--primary-500);
    color: var(--primary-ink);
}

.upload-picker .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---------- Document Vault: guided steps, type pills, friendly field chips ---------- */

.guide-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 14px 0 22px;
}

.guide-step {
    flex: 1 1 220px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
}

.guide-step-number {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-600);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-step strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

/* Target only the description text, not the numbered badge (also a span, directly under .guide-step):
   a bare ".guide-step span" is more specific than ".guide-step-number" and was overriding the badge's
   white number with muted grey — near-invisible on the teal circle in light theme. */
.guide-step > div > span {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.type-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.type-pill--file {
    background: var(--gray-100);
    color: var(--muted);
}

.type-pill--template {
    background: var(--primary-tint-bg);
    color: var(--primary-ink-strong);
}

.field-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* Spacing so the chips never sit flush against each other — especially the vertical gap once
       they wrap onto multiple rows (they're inline in a <p>, so without this the rows touch). */
    margin: 3px 6px 3px 0;
    background: var(--primary-tint-bg);
    color: var(--primary-ink-strong);
    border: 1px solid var(--primary-tint-border);
    border-radius: var(--radius-full);
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.field-chip:hover {
    background: var(--primary-100);
}

.field-chip code {
    font-weight: 400;
    opacity: 0.7;
    font-size: 0.72rem;
}

.callout {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--primary-tint-bg);
    border: 1px solid var(--primary-tint-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text);
}

.callout .icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--primary-ink);
    margin-top: 1px;
}

.callout.callout-warning {
    background: var(--warning-bg);
    border-color: var(--warning-text);
}

.callout.callout-warning .icon {
    color: var(--warning-text);
}

.fill-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 800;
    margin: 20px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fill-group-title .icon {
    width: 16px;
    height: 16px;
}

.fill-group-title.is-done { color: var(--success-text); }
.fill-group-title.is-todo { color: var(--warning-text); }

/* An inline-editable row's <summary> styled to look and read exactly like the other action
   buttons beside it (Download/Delete) — plain grey .meta text reads as a caption, not a
   control, and was easy to miss entirely as the way to actually edit a document. */
.edit-toggle {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    color: var(--primary-ink);
    border: 1.5px solid var(--primary-tint-border);
    padding: 11px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 600;
    margin-top: 8px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.edit-toggle:hover {
    background: var(--primary-tint-bg);
    border-color: var(--primary-500);
}

.edit-toggle::-webkit-details-marker {
    display: none;
}

.edit-toggle .icon {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}

details[open] > .edit-toggle .icon {
    transform: rotate(180deg);
}

.stat-card-highlight {
    background: var(--primary-tint-bg);
    border-color: var(--primary-tint-border);
}

.stat-card-highlight strong {
    color: var(--primary-ink-strong);
}

/* Full-width KPI banner — deliberately NOT part of .stats-row's grid: that grid
   stretches every card to match its tallest sibling, and this value (currency +
   two labels) needs more room than a plain "0 / Active" counter can spare at the
   grid's 140px column floor without text wrapping awkwardly. Giving it the full
   row width instead means it never has to fight the small cards for space. */
.commission-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 20px;
    background: var(--primary-tint-bg);
    border: 1px solid var(--primary-tint-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 18px 22px;
    margin-bottom: 12px;
}

.commission-banner-value {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.commission-banner-value strong {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    color: var(--primary-ink-strong);
}

.commission-banner-value span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}

.commission-banner-sub {
    font-size: 0.8rem;
    color: var(--muted);
    opacity: 0.85;
}

.commission-banner-sub a {
    color: inherit;
    text-decoration: underline;
}

.record-tabs-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    /* visible, so a searchable picklist (select-search.js) inside a tab can open past the card's edge; the tab
       strip rounds its own top corners instead. */
    overflow: visible;
}

.record-tabs-card > .record-tabs { border-radius: var(--radius-md) var(--radius-md) 0 0; }

.record-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    padding: 0 10px;
    /* Horizontal scroll only, for narrow screens. overflow-y MUST be set explicitly: per the CSS
       spec, when one axis is 'auto' and the other is 'visible', the visible axis computes to 'auto'
       too — which made a stray vertical scrollbar appear whenever the tab buttons were a hair taller
       than the strip's line box. 'hidden' pins it to horizontal-only. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox: hide the (rarely needed) horizontal scrollbar chrome */
}

/* Tabs wrap onto a second line instead of scrolling: a sideways-scrolling strip with a hidden scrollbar hid the
   last tabs (Chat, WhatsApp) on narrower windows, with nothing to show they were there. */
.record-tabs { flex-wrap: wrap; overflow: visible; gap: 6px; padding: 10px 12px; }
.record-tabs .record-tab { border-radius: var(--radius-full); border-bottom: none; margin-bottom: 0; padding: 7px 11px; }
.client-link-property-form .ss .ss-trigger { width: 100%; }
.record-tab .count-badge.is-zero { display: none; } /* empty tabs don't need a 0; the stat cards show totals */
@media (min-width: 1100px) and (max-width: 1500px) { .detail-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; } }
.record-tabs .record-tab.active { box-shadow: inset 0 0 0 1.5px var(--primary-600); }

.record-tabs::-webkit-scrollbar {
    height: 0; /* Chrome/Edge/Safari: hide the horizontal scrollbar; tabs still scroll by swipe/drag */
}

.record-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    /* These reset the site-wide button styles (solid fill, shadow, active-nudge) so a text tab never
       gets the dark filled-button look on hover — that was the "dogshit" light-theme hover. */
    background: none;
    box-shadow: none;
    border: none;
    padding: 12px 14px;
    margin-bottom: -1px; /* sit the active underline on top of the strip's own bottom border */
    border-radius: 8px 8px 0 0;
    font-weight: 700;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.record-tab .icon {
    width: 16px;
    height: 16px;
}

.record-tab:hover {
    color: var(--text);
    background: var(--primary-tint-bg);
    box-shadow: none;
}

.record-tab:active {
    transform: none; /* cancel the global button:active nudge — tabs shouldn't jump */
}

.record-tab.active {
    color: var(--primary-ink);
    background: var(--primary-tint-bg);
    border-bottom-color: var(--primary-600);
}

.record-tab .count-badge {
    background: var(--gray-100);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.record-tab.active .count-badge {
    background: var(--primary-tint-bg);
    color: var(--primary-ink);
}

.record-tab-content {
    padding: 18px;
}

.record-tab-panel[hidden] {
    display: none;
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0;
}

.spec-grid .spec {
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 12px 8px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--muted);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.spec .icon {
    width: 20px;
    height: 20px;
    color: var(--primary-500);
}

.spec strong {
    display: block;
    font-size: 1.05rem;
    color: var(--text);
    font-weight: 800;
}

.badge-verified {
    color: var(--primary-ink);
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-icon {
    width: 15px;
    height: 15px;
}

/* ---------- Profile / avatar ---------- */

.profile-header-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
    color: var(--text);
}

a.profile-header-card:hover {
    box-shadow: var(--shadow-md);
}

.avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    font-weight: 800;
    font-size: 1rem;
}

.avatar-lg {
    width: 68px;
    height: 68px;
    font-size: 1.4rem;
}

.avatar-sm {
    width: 34px;
    height: 34px;
    font-size: 0.8rem;
}

.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--avatar-bg);
    color: var(--primary-ink-strong);
}

/* ---------- Map ---------- */

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 28px 0 14px;
    flex-wrap: wrap;
}

.results-header .section-title {
    margin: 0;
}

#toggle-map-view {
    flex-shrink: 0;
    width: auto;
    padding: 9px 16px;
}

.map-box {
    width: 100%;
    height: 420px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    z-index: 1;
}

#property-map {
    margin-bottom: 20px;
}

.map-box-wide {
    height: 320px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

@media (min-width: 640px) {
    .map-box-wide {
        height: 420px;
    }
}

.map-box-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 20px;
    background: var(--gray-50);
    color: var(--muted);
}

.map-box-placeholder .icon {
    width: 28px;
    height: 28px;
    opacity: 0.6;
    margin-bottom: 4px;
}

.map-box-placeholder strong {
    color: var(--text);
    font-size: 1rem;
}

.map-box-placeholder span {
    font-size: 0.85rem;
    max-width: 380px;
}

/* ---------- Modal ---------- */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-overlay.open {
    display: flex;
}

.modal-box {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 22px;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-box .field {
    margin-bottom: 14px;
}

.modal-box .actions {
    justify-content: flex-end;
    margin-top: 4px;
}

.featured-popup-box {
    text-align: center;
}

/* ---------- Branded confirm modal (replaces the browser's native confirm() everywhere in the CRM — see assets/js/app.js's data-confirm handler) ---------- */

.confirm-modal-box {
    text-align: center;
    max-width: 380px;
}

.confirm-modal-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--danger-bg);
    color: var(--danger-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-modal-icon .icon {
    width: 26px;
    height: 26px;
}

.confirm-calm .confirm-modal-icon {
    background: var(--primary-tint-bg);
    color: var(--primary-ink);
}

.confirm-modal-title {
    margin: 0 0 8px;
    font-size: 1.1rem;
}

.confirm-modal-message {
    margin: 0;
    white-space: pre-line;
}

.confirm-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

.confirm-modal-actions button {
    width: 100%;
}

.featured-popup-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--primary-tint-bg);
    color: var(--primary-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-popup-icon .icon {
    width: 26px;
    height: 26px;
}

.featured-popup-actions {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

/* ---------- Pagination ---------- */

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 24px 0;
}

.pagination a, .pagination span {
    padding: 7px 13px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-600);
}

.pagination a:hover {
    border-color: var(--primary-500);
    color: var(--primary-ink);
}

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

/* Ellipsis between windowed page numbers — a plain separator, not a bordered box. */
.pagination .pagination-gap {
    border: none;
    padding: 7px 2px;
    color: var(--muted);
    font-weight: 700;
}

/* ---------- Customizable dashboard widgets ---------- */
.dash-board { margin: 4px 0 26px; }
.dash-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
/* The board is a bounded "canvas" — GridStack lays widgets out freely inside it (drag + resize). */
.dash-board .grid-stack { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 4px; min-height: 140px; }
.dash-board.customizing .grid-stack { border-style: dashed; border-color: var(--primary-500); }
.grid-stack-item-content { inset: 0; overflow: visible; }

.dash-widget {
    height: 100%;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(23, 32, 35, 0.06);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dash-widget-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.dash-widget-title { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 0.9rem; color: var(--text); min-width: 0; }
.dash-widget-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--primary-tint-bg); color: var(--primary-ink); flex-shrink: 0; }
.dash-widget-ico .icon { width: 16px; height: 16px; }
.dash-widget-grip { display: none; margin-left: 4px; color: var(--muted); cursor: grab; }
.dash-widget-grip .icon { width: 18px; height: 18px; }
.dash-widget-remove { display: none; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--danger-bg); color: var(--danger-text); border: none; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.dash-widget-remove .icon { width: 14px; height: 14px; }
.dash-board.customizing .dash-widget-remove { display: inline-flex; }
.dash-board.customizing .dash-widget-grip { display: inline-flex; }
.dash-board.customizing .dash-widget { border-style: dashed; border-color: var(--primary-tint-border, var(--primary-500)); }
.dash-board.customizing .dash-widget-head { cursor: move; }

/* Chart cog — always available on chart widgets so anyone can switch chart type. */
.dash-cog-wrap { position: relative; margin-left: auto; flex-shrink: 0; }
.dash-cog { display: inline-flex; width: 26px; height: 26px; padding: 0; border: none; border-radius: 7px; background: var(--gray-100); color: var(--muted); align-items: center; justify-content: center; cursor: pointer; }
.dash-cog:hover { background: var(--primary-tint-bg); color: var(--primary-ink); }
.dash-cog .icon { width: 15px; height: 15px; }
.dash-cog-menu { position: absolute; right: 0; top: 32px; z-index: 30; min-width: 130px; display: flex; flex-direction: column; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }
.dash-cog-menu[hidden] { display: none; }
.dash-cog-opt { text-align: left; padding: 8px 11px; border: none; background: none; border-radius: 7px; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--text); font-family: inherit; }
.dash-cog-opt:hover { background: var(--primary-tint-bg); }
.dash-cog-opt.active { color: var(--primary-ink); font-weight: 800; }
/* When the cog sits before grip/remove, don't let margin-left:auto also push those — reset. */
.dash-cog-wrap + .dash-widget-grip, .dash-cog-wrap + .dash-widget-remove { margin-left: 0; }

.dash-widget-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.dash-chart-wrap { position: relative; flex: 1; min-height: 160px; }
.dash-chart { width: 100% !important; }
.dash-stat { display: flex; flex-direction: column; gap: 2px; }
.dash-stat-num { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--primary-ink); line-height: 1.1; }
.dash-stat-label { font-size: 0.82rem; color: var(--muted); }
.dash-widget-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 0.85rem; font-weight: 700; color: var(--primary-ink); }
.dash-widget-link .badge-icon { width: 14px; height: 14px; }
.dash-empty { font-size: 0.85rem; color: var(--muted); margin: 0; }

.dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-list li { display: flex; flex-direction: column; gap: 1px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.dash-list li:last-child { border-bottom: none; padding-bottom: 0; }
.dash-list-when { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.dash-list-main { font-size: 0.9rem; color: var(--text); }

.dash-quick { display: flex; flex-direction: column; gap: 7px; }
.dash-quick .btn { justify-content: flex-start; font-size: 0.85rem; padding: 9px 13px; white-space: nowrap; width: 100%; }
.dash-quick .btn .icon { flex-shrink: 0; }

.dash-attention { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-attention a { display: inline-flex; align-items: center; gap: 7px; font-size: 0.88rem; color: var(--text); font-weight: 600; }
.dash-attention .badge-icon { width: 15px; height: 15px; color: var(--accent-600); flex-shrink: 0; }

.dash-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dash-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); text-align: left; }
.dash-tile.has { background: var(--primary-tint-bg); border-color: var(--primary-tint-border, var(--primary-500)); }
.dash-tile-num { font-size: 1.5rem; font-weight: 800; color: var(--primary-ink); line-height: 1; }
.dash-tile-label { font-size: 0.78rem; color: var(--muted); }

.dash-add-panel { margin-top: 14px; padding: 14px 16px; border: 1.5px dashed var(--border); border-radius: var(--radius-md); background: var(--bg); }
.dash-add-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.dash-add-actions { display: flex; gap: 8px; }
.dash-add-items { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-add-item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-full); background: var(--surface); border: 1.5px solid var(--border); color: var(--text); font-size: 0.83rem; font-weight: 700; cursor: pointer; }
.dash-add-item:hover { border-color: var(--primary-500); color: var(--primary-ink); }
.dash-add-item .badge-icon { width: 14px; height: 14px; }
.dash-empty-board { font-size: 0.9rem; color: var(--muted); grid-column: 1 / -1; padding: 8px 0; }

/* ---------- Dashboard / admin rows ---------- */

.list-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-sm);
}

.list-row .info {
    flex: 1;
    min-width: 0;
}

.list-row .info strong {
    display: block;
    font-weight: 700;
    /* Some callers set display:inline-flex inline (an icon + filename/label) — that wins over
       the display:block above, and an inline-flex box sizes to its content's max-content width
       by default, so a long unbroken filename can push wider than .info and overflow the row.
       max-width/break-word apply regardless of which display value wins, closing that gap. */
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.list-row .info span {
    color: var(--muted);
    font-size: 0.83rem;
}

/* Agency Members list — give each member row calm vertical rhythm (name, email, a status line,
   then role) instead of meta lines mashed together, so it reads like a proper directory record. */
.member-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.member-info strong {
    font-size: 0.98rem;
    margin-bottom: 1px;
}
.member-email .badge-icon {
    color: var(--primary-ink);
    vertical-align: -2px;
}
/* One tidy status line: presence · last login. Items align on a shared baseline with a muted
   dot separator, and wrap cleanly on narrow screens instead of colliding. */
.member-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 1px;
}
.member-meta-line .meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}
.member-meta-line .badge-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--muted);
}
.member-meta-sep {
    color: var(--muted);
    opacity: 0.55;
    font-weight: 700;
    line-height: 1;
}
/* The value that matters — the actual login date — carries normal ink weight so it reads as
   data, while the "Last login" label and the relative "(2 days ago)" stay muted context. */
.member-lastlogin time {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.member-lastlogin-ago {
    color: var(--muted);
}
.member-never {
    font-style: italic;
    opacity: 0.85;
}
.member-role-line {
    margin-top: 6px;
}

/* .list-row's info column can run tall (name, email, a verified badge, presence, sometimes a
   role picker) while .actions is short — align-items:center then centers those short buttons
   against the middle of a much taller block, which on a narrow screen (where there's no spare
   width to fit both side by side anyway) reads as buttons floating over the text. Letting the
   row wrap and pushing .actions onto its own full-width line below fixes both at once. */
@media (max-width: 700px) {
    .list-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .list-row .actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.client-link-property-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.client-link-property-form select {
    flex: 1;
    min-width: 200px;
    width: auto;
}

.client-link-property-form .ss,
.client-link-property-form .custom-select {
    flex: 1;
    min-width: 200px;
}

/* .custom-select-trigger is transparent by default — everywhere else it's used, an ancestor
   (.hero-search-select, .listing-type-field) supplies the bordered field look. This is the
   first standalone use, so the trigger needs to carry that box itself, matching the plain
   input/select style it replaces (see the global `select` rule) so the closed state looks
   identical to before — only the open dropdown (now the on-brand listbox, not the browser's
   native popup) actually changes. */
.client-link-property-form .custom-select-trigger {
    padding: 11px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.client-link-property-form button {
    width: auto;
    flex-shrink: 0;
}

.upload-row input[type="file"] {
    flex: 1;
    min-width: 180px;
    font-size: 0.82rem;
    color: var(--muted);
}

/* ---------- Data table (Clients, and anything else that reads better as a grid than a
   stacked list of cards) ---------- */

.table-responsive {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    white-space: nowrap;
}

.data-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    font-weight: 700;
    padding: 12px 16px;
    background: var(--gray-100);
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tbody tr:last-of-type td {
    border-bottom: none;
}

.data-table tbody tr {
    cursor: pointer;
    transition: background 0.12s ease;
}

.data-table tbody tr:hover {
    background: var(--primary-tint-bg);
}

.data-table .cell-primary {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: normal;
    /* Same min-width:auto flex trap fixed elsewhere this session: without it, a flex item's
       content-based floor can still win over its own max-width when that content can't break
       (an unbroken title) — .cell-primary-text's max-width alone isn't reliably enough. */
    min-width: 0;
}

/* Phones: a client's name + several pills (Manual, finance, "1 new match") wrap instead of overflowing. */
@media (max-width: 700px) {
    .data-table .cell-primary {
        flex-wrap: wrap;
    }
}

.data-table .cell-primary strong {
    display: block;
    font-weight: 700;
}

.data-table .cell-muted {
    color: var(--muted);
    font-size: 0.82rem;
}

.listing-view-count {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.listing-view-count .icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.data-table .count-badge {
    display: inline-block;
    background: var(--primary-tint-bg);
    color: var(--primary-ink-strong);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

.listing-thumb {
    width: 56px;
    height: 42px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--gray-100);
}

.listing-thumb-placeholder {
    width: 56px;
    height: 42px;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.listing-thumb-placeholder .icon {
    width: 18px;
    height: 18px;
}

.data-table .actions-cell {
    display: flex;
    gap: 8px;
    row-gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    white-space: normal;
    /* Used to reserve 520px so the busiest row (awaiting_payment's Pay Now / Check Payment
       Status / Edit / Delete, or expired's Renew — Pay Now / Edit / Delete) never wrapped —
       but that assumed a wide desktop viewport with room to spare, which a normal laptop-width
       screen doesn't have: it forced the whole table wider than the CRM content area, cutting
       real buttons off the edge entirely. A row with more buttons wrapping onto a second line
       (mild, harmless height variance) is a much smaller problem than that, so there's no
       min-width here now — flex-wrap alone keeps every row's buttons inside the column.
       max-width matches .cell-primary-text so neither column can starve the other. Set to fit
       Edit / Share / Status / Delete on one line on desktop, still wrapping neatly if narrower. */
    max-width: 400px;
}

/* Dense listings action row: the two secondary toggle actions (Share, Feature/Unfeature) render
   icon-only so all five controls — Edit, Share, status dropdown, Feature, Delete — stay on one
   line instead of wrapping to a ragged second row. The label stays in the DOM for screen readers,
   and each button also carries aria-label + title. On the mobile card layout the labels come back
   (see the <=700px block), where there's room. */
.actions-cell .btn-compact {
    padding-left: 12px;
    padding-right: 12px;
}

.actions-cell .btn-compact .btn-txt {
    display: none;
}

/* Wide screens have room for the words, so "Share" / "Feature" aren't bare icons there either. */
@media (min-width: 1600px) {
    .actions-cell .btn-compact .btn-txt {
        display: inline;
    }
}

/* Required fields get a red asterisk on their label, so agents know up front what must be filled in. */
.field:has(> :is(input, select, textarea)[required]) > label::after,
.field:has(> .custom-select :is(select)[required]) > label::after {
    content: " *";
    color: var(--danger-text);
    font-weight: 700;
}

/* My Listings: Edit, Share, status, Feature and Delete (bin icon) keep to one tidy line on a
   laptop-width screen or wider; the table gives this column the room and wraps the listing title
   instead. Narrower screens still wrap, and phones get the stacked card layout below. */
@media (min-width: 1100px) {
    .data-table .actions-cell.listing-actions {
        flex-wrap: nowrap;
        max-width: none;
    }

    .data-table .actions-cell.listing-actions > * {
        flex-shrink: 0; /* don't squash the status dropdown ("Under O…") */
    }
}

/* Below ~700px a multi-column data table can only ever be read by scrolling sideways — turn
   each row into its own card instead, with column headers as inline labels (from a `data-label`
   attribute the PHP template sets per <td>). The first and last column are always left un-
   labelled: first is the row's own identity (name/title — needs no "Client:" prefix restating
   the obvious), last is the actions cell, which reads fine as plain buttons with no label. */
@media (max-width: 700px) {
    .table-responsive {
        overflow-x: visible;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .data-table {
        white-space: normal;
    }

    .data-table thead {
        display: none;
    }

    .data-table, .data-table tbody, .data-table tr, .data-table td {
        display: block;
        width: 100%;
    }

    .data-table tr {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        padding: 12px 14px;
        margin-bottom: 12px;
    }

    .data-table td {
        border-bottom: 1px solid var(--border);
        padding: 8px 0;
    }

    .data-table td:first-child {
        padding-top: 0;
    }

    .data-table td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .data-table td[data-label] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
    }

    .data-table td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        text-align: left;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--muted);
    }

    .data-table .actions-cell {
        min-width: 0;
        justify-content: flex-start;
    }

    /* On the stacked mobile card there's room for full labels again, so bring the Share/Feature
       text back rather than leaving bare icons. */
    .actions-cell .btn-compact .btn-txt {
        display: inline;
    }

    .actions-cell .btn-compact {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* The label-left/content-right split above assumes one short value (a price, a date) —
       fine for those, but a cell with real multi-part content (a status pill, a Featured
       badge, and a wrapped sentence about when either expires) gets squeezed into a narrow
       right-hand column and wraps one word per line. .cell-rich stacks the label above
       instead, so that content gets the card's full width to lay out in. */
    .data-table td[data-label].cell-rich {
        display: block;
        text-align: left;
    }

    .data-table td[data-label].cell-rich::before {
        display: block;
        margin-bottom: 6px;
    }

    /* The card's title row (first cell): left-aligned, full width, wrapping cleanly. */
    .data-table td:first-child:not([data-label]) { text-align: left; padding-bottom: 10px; }
    .data-table td:first-child .cell-primary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
    .data-table td:first-child .cell-primary-text { min-width: 0; max-width: none; flex: 1 1 160px; }
    .data-table td:first-child .cell-primary > strong { font-size: 1rem; }
    /* A value made of several pieces (email + phone) stays one right-aligned block; a long email may break. */
    .data-table td[data-label] > .td-val { min-width: 0; text-align: right; overflow-wrap: anywhere; }
    .data-table td { max-width: none !important; }
}

.cell-primary-text {
    min-width: 200px;
    max-width: 320px;
    /* The table sets white-space:nowrap globally; this column holds a title + a full description,
       so it must wrap — without this the description ignores max-width and runs across the next
       columns. */
    white-space: normal;
    /* A title with no spaces (one long unbroken run of characters) otherwise ignores this
       max-width entirely — plain text only wraps at whitespace by default — and bleeds across
       the Price/Status columns next to it instead of staying inside its own box. */
    overflow-wrap: break-word;
    word-break: break-word;
}

.rejection-notice {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger-text);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-top: 8px;
    font-size: 0.82rem;
}

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

/* ---------- Footer ---------- */

/* Public pages: header / main / footer as a full-height column, so the footer always sits at the
   bottom of the screen on short pages (empty inbox, login) and simply follows long ones. */
.site-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: 0;
}

.site-body > .header {
    flex-shrink: 0;
}

.site-main {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
    background: linear-gradient(165deg, var(--primary-900) 0%, #04211e 100%);
    color: rgba(255, 255, 255, 0.7);
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    position: relative;
}

.footer-top {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px 16px 8px;
    display: grid;
    gap: 28px;
}

@media (min-width: 640px) {
    .footer-top {
        grid-template-columns: 240px 1fr;
    }
}

.footer-brand .footer-logo {
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    color: #fff;
}

.footer-brand .footer-logo span {
    color: var(--accent-500);
}

.footer-brand p {
    font-size: 0.84rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    max-width: 320px;
    margin: 10px 0 0;
}

.footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
}

@media (min-width: 640px) {
    .footer-columns {
        /* auto-fit (not a hardcoded repeat(4, ...)) lets the browser drop to 3/2 columns
           as space tightens instead of forcing a ~960px+ minimum total width — a fixed
           4-column minimum overflowed .site-footer's overflow:hidden and silently clipped
           the Legal column at viewports roughly 640-960px wide (common laptop/browser
           window sizes), cutting off "Terms & Conditions" etc. */
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
        gap: 24px 24px;
    }
}

.footer-col h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    margin: 0 0 12px;
}

.footer-col h4 .icon {
    width: 15px;
    height: 15px;
    color: var(--accent-500);
    flex-shrink: 0;
}

.footer-col a {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.85rem;
    padding: 5px 0;
    transition: color 0.15s ease;
}

.footer-col a:hover {
    color: #fff;
}

.footer-provinces {
    position: relative;
    max-width: 1100px;
    margin: 24px auto 0;
    padding: 20px 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-provinces h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 12px;
}

.footer-provinces h4 .icon {
    width: 13px;
    height: 13px;
    color: var(--accent-500);
    flex-shrink: 0;
}

.footer-provinces-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.footer-provinces-links a {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.48);
    padding: 3px 0;
    transition: color 0.15s ease;
}

/* A *trailing* dot (not a leading one) — it rides along at the end of whichever line its own
   link lands on, so a line that wraps always starts flush-left with plain text, never with a
   stray "· " hanging off the front of it. */
.footer-provinces-links a:not(:last-child)::after {
    content: "\00b7";
    display: inline-block;
    color: rgba(255, 255, 255, 0.22);
    margin: 0 12px;
}

.footer-provinces-links a:hover {
    color: var(--accent-500);
}

/* Mobile: each footer section collapses into a tap-to-open dropdown (accordion). Only active once
   footer-accordion.js adds .footer-accordion — so without JS the links stay visible (no dead-end). */
@media (max-width: 680px) {
    .site-footer.footer-accordion .footer-col h4,
    .site-footer.footer-accordion .footer-provinces h4 {
        cursor: pointer;
        margin-bottom: 0;
        padding: 12px 0;
        user-select: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .site-footer.footer-accordion .footer-col h4::after,
    .site-footer.footer-accordion .footer-provinces h4::after {
        content: "";
        margin-left: auto;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
        flex-shrink: 0;
        opacity: 0.7;
    }
    .site-footer.footer-accordion .footer-col.is-open h4::after,
    .site-footer.footer-accordion .footer-provinces.is-open h4::after {
        transform: rotate(-135deg);
    }
    /* Collapse the section body; reveal only when open. */
    .site-footer.footer-accordion .footer-col > a { display: none; }
    .site-footer.footer-accordion .footer-col.is-open > a { display: block; }
    .site-footer.footer-accordion .footer-col.is-open > a:first-of-type { margin-top: 10px; }
    .site-footer.footer-accordion .footer-provinces .footer-provinces-links { display: none; }
    .site-footer.footer-accordion .footer-provinces.is-open .footer-provinces-links { display: flex; margin-top: 12px; }
    /* Each section reads as one stacked, divided row on mobile. */
    .site-footer.footer-accordion .footer-columns { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* Make "Browse by Province" just another accordion row directly below Legal — drop its extra
       top margin/padding/border (and the footer's bottom padding) so the divider spacing is even. */
    .site-footer.footer-accordion .footer-top { padding-bottom: 0; }
    .site-footer.footer-accordion .footer-provinces {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-top: none;
    }
}

.mode-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.mode-tab {
    background: rgba(4, 33, 30, 0.62);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    color: #fff;
    padding: 10px 24px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease, color 0.15s ease;
}

.mode-tab:hover {
    background: rgba(4, 33, 30, 0.8);
    border-color: #fff;
}

.mode-tab.active {
    background: #fff;
    color: var(--primary-700);
    border-color: #fff;
}

/* .hero p's white/shadowed styling is meant for text sitting directly on the hero photo —
   without this override it leaks (via the plain descendant selector) onto any .meta text
   dynamically inserted deeper inside the hero, e.g. inside the white province-map card,
   rendering it invisible (white text on a white card). Same fix, same reason, for the map
   card's own hint text below it — .hero p (a class + element selector) otherwise beats
   .sa-map-hint (a single class) on specificity regardless of source order. */
.hero .meta,
.hero .sa-map-hint {
    color: var(--muted);
    text-shadow: none;
}

/* ---------- "Search by Map" province picker ---------- */

.sa-map-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 22px;
    margin-top: 14px;
    box-shadow: var(--shadow-lg);
    /* South Africa's outline is nearly as tall as it is wide, so scaling the SVG to the full
       card width (on a wide desktop card, several hundred px) made the country view dramatically
       taller than the province drill-down view. Switching between them then hid/showed two very
       differently-sized boxes, and everything below the card reflowed upward by the difference —
       scrollY itself never moved, but visually it read as the page jumping. Capping the SVG's own
       size (below) mostly closes that gap; this min-height guarantees no reflow either way. */
    min-height: 540px;
}

@media (max-width: 680px) {
    /* The 540px reservation above is sized for desktop, where the country SVG (bounded to
       400px tall) is the taller of the two views. On a narrow card the SVG shrinks with the
       card's width (it keeps its aspect ratio), but the province view's Leaflet canvas below
       doesn't — it's a fixed height — so on mobile the province view becomes the taller one
       instead, by a wide margin, and the leftover reservation shows up as blank space under
       the country map. Shrinking the canvas here closes most of that gap from both sides. */
    .sa-map-card {
        min-height: 420px;
    }

    .sa-map-canvas {
        height: 220px;
    }
}

.sa-map-eyebrow {
    display: block;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--primary-ink);
    margin-bottom: 10px;
}

.sa-map-svg-wrap {
    position: relative;
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 140% at 30% 15%, rgba(94, 234, 212, 0.22), transparent 60%),
        radial-gradient(120% 140% at 80% 90%, rgba(249, 115, 22, 0.1), transparent 55%),
        linear-gradient(180deg, #f0fdfa 0%, #e3f4f1 100%);
}

.sa-map-svg {
    display: block;
    /* South Africa's outline is close to 1:1 (roughly as tall as it is wide), so letting this
       scale to the card's full width made it grow just as tall — several hundred px on a wide
       desktop card. Bounding both dimensions keeps it a sensible, consistent size at any card
       width; the flex-centered wrap keeps it centred in the leftover space either way. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 400px;
    filter: drop-shadow(0 10px 20px rgba(6, 58, 54, 0.18));
}

.sa-province-path {
    stroke: #f7fdfc;
    stroke-width: 1.6;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill 0.2s ease, filter 0.15s ease;
    outline: none;
}

.sa-province-path:hover,
.sa-province-path:focus-visible {
    fill: var(--accent-500) !important;
    filter: drop-shadow(0 4px 10px rgba(234, 88, 12, 0.45));
}

.sa-map-tooltip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 12px));
    /* Deliberately a fixed colour, not var(--gray-900) — that token flips from near-black to
       near-white in dark mode (it means "primary text colour", not "dark surface"), which
       silently turned this into a near-white pill with hardcoded white text on top of it. The
       tooltip itself needs to look the same dark chip in both themes. */
    background: #172023;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-md);
    z-index: 5;
}

.sa-map-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #172023;
}

.sa-map-hint {
    text-align: center;
    color: var(--muted);
    font-size: 0.84rem;
    margin: 14px 0 0;
}

.sa-map-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--primary-ink);
    font-weight: 700;
    font-size: 0.86rem;
    padding: 0;
    margin-bottom: 14px;
    cursor: pointer;
}

.sa-map-back-btn:hover {
    /* The generic button:hover rule (solid fill + shadow, meant for real filled buttons)
       otherwise wins back the background/shadow on hover even though .sa-map-back-btn's own
       base rule already cleared them at rest — same specificity trap as any plain <button>
       styled to look like a text link: a bare `button:hover` selector still out-specifies a
       single class selector for whichever properties the class's own :hover block leaves
       untouched. */
    background: none;
    box-shadow: none;
    color: var(--primary-ink-strong);
}

.sa-map-canvas {
    width: 100%;
    height: 340px;
    border-radius: var(--radius-md);
    background:
        radial-gradient(120% 140% at 30% 15%, rgba(94, 234, 212, 0.22), transparent 60%),
        linear-gradient(180deg, #f0fdfa 0%, #e3f4f1 100%);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--primary-tint-border);
}

.sa-map-province-actions {
    margin-top: 14px;
}

@keyframes sa-map-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.sa-map-fade-in {
    animation: sa-map-fade-in 0.25s ease;
}

.sa-town-marker-dot {
    display: block;
    width: 14px;
    height: 14px;
    background: var(--accent-500);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(23, 32, 35, 0.4);
}

/* Several towns too close to tell apart: one numbered bubble; click to zoom in until they split. */
.sa-town-cluster span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--accent-500);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25), 0 2px 8px rgba(23, 32, 35, 0.4);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.sa-town-cluster:hover span {
    transform: scale(1.1);
}

.sa-town-list-popup .leaflet-popup-content span + a {
    margin-top: 8px;
}

.sa-map-reset {
    padding: 6px 12px;
    font: 700 0.78rem/1 inherit;
    color: var(--primary-ink);
    background: #fff;
    border: 1px solid var(--primary-tint-border);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(23, 32, 35, 0.15);
    cursor: pointer;
}

.sa-map-reset:hover {
    background: var(--primary-tint, #f0fdfa);
}

.leaflet-popup-content-wrapper {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.leaflet-popup-content {
    margin: 10px 14px;
    font-family: inherit;
}

.leaflet-popup-content a {
    display: block;
    font-weight: 700;
    color: var(--primary-ink);
}

.leaflet-popup-content span {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 2px;
}

/* ---------- Ribbon / auction badge ---------- */

.gallery-wrap {
    position: relative;
}

.ribbon {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #fcd34d 0%, #f97316 55%, #ea580c 100%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 7px 14px 7px 10px;
    border-radius: var(--radius-full);
    box-shadow: 0 6px 16px rgba(194, 65, 12, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    z-index: 2;
    pointer-events: none;
}

.ribbon .icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

.auction-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--accent-600);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

/* Bottom-right — the other three corners are already claimed by .ribbon (top-left),
   .auction-badge (top-right) and .card-status-badge (bottom-left, non-active statuses only). */
.featured-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.featured-badge .icon {
    width: 11px;
    height: 11px;
}

.auction-box {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-900));
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 18px;
    margin: 16px 0;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.auction-box.auction-live {
    background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
}

.auction-box.auction-ended {
    background: var(--gray-600);
}

.auction-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 6px;
}

.auction-status {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.auction-timer {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.auction-dates {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.85);
}

.auction-current-bid {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.92rem;
}

.auction-current-bid strong {
    font-size: 1.05rem;
}

.bond-result-primary {
    text-align: center;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.bond-monthly-figure {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-ink-strong);
    letter-spacing: -0.02em;
}

.bond-result-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    text-align: center;
}

.bond-result-grid strong {
    display: block;
    font-size: 0.92rem;
    margin-top: 2px;
    color: var(--text);
}

.footer-bottom {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
    flex-wrap: wrap;
    text-align: center;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.4);
    padding: 18px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}


.footer-bottom-logo {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.8);
}

.footer-bottom-logo span {
    color: var(--accent-500);
}

.footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.76rem;
    transition: color 0.15s ease;
}

.footer-credit span {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    transition: color 0.15s ease;
}

.footer-credit:hover {
    color: rgba(255, 255, 255, 0.7);
}

.footer-credit:hover span {
    color: var(--accent-500);
}

/* ---------- Messaging ---------- */

.message-bubble {
    max-width: 80%;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    font-size: 0.9rem;
    box-shadow: var(--shadow-sm);
}

.message-bubble.mine {
    background: var(--primary-600);
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.message-bubble.theirs {
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}

.message-bubble .meta {
    font-size: 0.68rem;
    opacity: 0.75;
    margin-top: 5px;
}

.thread-item {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease;
}

.thread-item:hover {
    box-shadow: var(--shadow-md);
}

.chat-log {
    max-height: 55vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* ---------- Presence (Teams-style online/away/offline dots) ---------- */

.presence-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.presence-online {
    background: #22c55e;
}

.presence-away {
    background: #f59e0b;
}

.presence-offline {
    background: #9ca3af;
}

.avatar-presence-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.avatar-presence-wrap .presence-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid var(--surface);
}

.presence-dot-inline {
    vertical-align: middle;
    margin-left: 2px;
}

.presence-label {
    text-transform: capitalize;
}

/* ---------- Unified chat shell (Teams-style rail + pane) ---------- */

.chat-page {
    padding-left: 0;
    padding-right: 0;
    max-width: 1200px;
}

.chat-shell {
    display: flex;
    height: calc(100vh - 220px);
    min-height: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.chat-rail {
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.chat-rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
    gap: 8px;
}

.chat-new {
    display: flex;
    gap: 6px;
}

.chat-new-btn {
    padding: 5px 10px;
    font-size: 0.78rem;
}

.chat-rail-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 8px;
}

.chat-rail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: var(--radius-sm);
    position: relative;
    color: var(--text);
}

.chat-rail-item:hover {
    background: var(--surface);
}

.chat-rail-item.active {
    background: var(--primary-tint-bg);
    border: 1px solid var(--primary-tint-border);
}

.chat-rail-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--avatar-bg);
    color: var(--primary-ink-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-rail-icon .icon {
    width: 17px;
    height: 17px;
}

.chat-rail-icon-support {
    background: var(--accent-tint-bg);
    color: var(--accent-600);
}

.chat-rail-info {
    min-width: 0;
    flex: 1;
}

.chat-rail-info strong {
    display: block;
    font-size: 0.87rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-rail-preview {
    display: block;
    font-size: 0.76rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-rail-unread {
    flex-shrink: 0;
}

.chat-rail-empty {
    padding: 14px 10px;
}

.chat-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.chat-pane-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.chat-pane-back {
    display: none;
}

.chat-pane-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-pane-title strong {
    font-size: 0.95rem;
}

.chat-pane-members {
    display: flex;
    gap: 6px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow-x: auto;
}

.chat-pane .chat-log {
    flex: 1;
    max-height: none;
    padding: 14px 16px;
}

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.chat-composer-input {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.chat-composer textarea {
    resize: none;
    min-height: 42px;
    max-height: 140px;
}

.chat-attach-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--muted);
    cursor: pointer;
}

.chat-attach-btn:hover {
    color: var(--primary-ink);
    border-color: var(--primary-tint-border);
}

.chat-attach-btn .icon {
    width: 19px;
    height: 19px;
}

.chat-image-preview {
    align-items: center;
    gap: 8px;
}

.chat-image-preview img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.chat-image-preview button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.chat-image {
    display: block;
    max-width: 240px;
    max-height: 240px;
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    object-fit: cover;
}

.chat-pane-delete-form {
    margin-left: auto;
    flex-shrink: 0;
}

.btn-icon-only {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    background: transparent;
}

.btn-icon-only .icon {
    width: 17px;
    height: 17px;
}

.chat-pane-form,
.chat-pane-empty {
    padding: 20px;
    overflow-y: auto;
}

.chat-pane-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--muted);
}

@media (max-width: 720px) {
    .chat-shell {
        height: calc(100vh - 180px);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .chat-rail {
        width: 100%;
    }

    .chat-page.has-active-chat .chat-rail {
        display: none;
    }

    .chat-page:not(.has-active-chat) .chat-pane {
        display: none;
    }

    .chat-pane-back {
        display: inline-flex;
    }
}

.star-icon {
    width: 16px;
    height: 16px;
}

.star-filled {
    fill: var(--accent-500);
    stroke: var(--accent-500);
}

.star-empty {
    fill: none;
    stroke: var(--border);
}

/* ---------- CRM shell (agency members' backend pages) ---------- */

.crm-body {
    padding-bottom: 0;
}

.crm-shell {
    display: flex;
    min-height: 100vh;
}

.crm-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: linear-gradient(165deg, var(--primary-900) 0%, #04211e 100%);
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    flex-direction: column;
    padding: 16px 14px 12px;
    position: sticky;
    top: 0;
    height: 100vh;
    /* Only the link list scrolls (see .crm-nav) — the logo and footer stay put. */
    overflow: hidden;
    z-index: 30;
}

.crm-logo {
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: -0.02em;
    padding: 6px 10px 20px;
}

/* .crm-logo .crm-logo-tag (two classes) deliberately outweighs .crm-logo span (one class +
   one type) so this doesn't inherit the "Find" half-logo's orange accent color. */
.crm-logo .crm-logo-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.crm-logo span {
    color: var(--accent-500);
}

.crm-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Scrolls on short screens so the footer (Settings / theme / Log Out) is always visible.
       The -14px margin + matching padding keeps the active link's left accent bar (which
       sits 14px outside the link) inside this scroll box instead of clipped by it. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0 -14px;
    padding: 0 14px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.crm-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
    font-weight: 500;
    position: relative;
}

.crm-nav-link .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Group headings in the agency sidebar (Sales, Deals & Paperwork, …). Inherits the sidebar's
   text colour and fades it, so it also reads correctly on an agency's branded sidebar. */
.crm-nav-section {
    display: block;
    padding: 13px 12px 4px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.55;
}

.crm-nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.crm-nav-link.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.crm-nav-link.active::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--accent-500);
    border-radius: 0 3px 3px 0;
}


/* Sub-sections shown indented beneath an expanded top-level item (e.g. Accounting). */
.crm-nav-sub {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 4px 26px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.crm-nav-sublink {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.82rem;
    font-weight: 500;
}

.crm-nav-sublink .icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.85;
}

.crm-nav-sublink:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.crm-nav-sublink.active {
    color: #fff;
    font-weight: 600;
}

/* "Continue with Google" sign-in button + the "or" divider above it, on the auth pages. */
.oauth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
    margin: 16px 0;
}
.oauth-divider::before,
.oauth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border, rgba(148, 163, 184, 0.3));
}
.oauth-divider span { padding: 0 12px; }

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    border: 1px solid #dadce0;
    border-radius: var(--radius-sm, 8px);
    background: #fff;
    color: #3c4043;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow .15s, background .15s;
}
.btn-google:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.2); }
.btn-google .google-g { flex-shrink: 0; }

/* Plan listing-allowance banner on the CRM Listings page. */
.listings-plan-banner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary-500); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.listings-plan-banner strong { display: block; font-size: 1.05rem; }
.listings-plan-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.listings-plan-meter { max-width: 260px; margin-top: 6px; background: var(--gray-200); }

/* "What's nearby" (schools/shops/healthcare) on the public listing page. */
.nearby-amenities { margin-top: 16px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.nearby-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.02rem; }
.nearby-title .icon { width: 18px; height: 18px; color: var(--primary-ink); }
.nearby-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.nearby-cat h5 { margin: 0 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.nearby-cat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nearby-cat li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.9rem; }
.nearby-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nearby-dist { flex-shrink: 0; color: var(--primary-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.nearby-note { margin: 12px 0 0; font-size: 0.78rem; }

/* Generic CRM modal (native <dialog>), e.g. the New Property Alert window. */
.crm-dialog { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; padding: 24px; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.crm-dialog::backdrop { background: rgba(15, 23, 42, 0.55); }
.crm-dialog-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 8px; }
.crm-dialog-head h2 { margin: 0; font-size: 1.2rem; }
.crm-dialog-close { border: 0; background: none; padding: 4px; min-height: 0; color: var(--muted); cursor: pointer; box-shadow: none; }
.crm-dialog-close:hover { color: var(--text); background: none; }
.crm-dialog-close .icon { width: 20px; height: 20px; }
.crm-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Buyer finance-position pills on client records (cash / pre-approved / needs approval). */
.status-pill.fin-cash { background: var(--success-bg); color: var(--success-text); }
.status-pill.fin-preapproved { background: var(--primary-tint-bg); color: var(--primary-ink-strong); }
.status-pill.fin-needs_approval { background: var(--warning-bg); color: var(--warning-text); }

/* Proof-document attachment cells in the trust ledger and income/expense tables. */
.acc-attach { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.acc-attach-file { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-2, rgba(148,163,184,0.12)); border-radius: var(--radius-sm); padding: 2px 4px 2px 6px; max-width: 190px; }
.acc-attach-file a { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 0.8rem; }
.acc-attach-file a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.acc-attach-file .icon { width: 14px; height: 14px; flex-shrink: 0; }
.acc-attach-del { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.acc-attach-del:hover { color: var(--danger, #dc2626); }
.acc-attach-add { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 0.8rem; color: var(--primary-700, #0f766e); font-weight: 600; }
.acc-attach-add .icon { width: 14px; height: 14px; }

.crm-nav-link .unread-dot {
    margin-left: auto;
}

.nav-count-badge {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--accent-500);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.crm-nav-link.active .nav-count-badge {
    background: #fff;
    color: var(--primary-700);
}

.crm-sidebar-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.crm-sidebar-footer form {
    margin: 0;
}

.crm-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.crm-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.crm-menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 4px;
    color: var(--text);
    cursor: pointer;
}

.crm-menu-toggle .icon {
    width: 22px;
    height: 22px;
}

.crm-topbar-title {
    font-weight: 700;
    font-size: 1.05rem;
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    flex-shrink: 0;
    /* Pins to the right whether or not .global-search is present in this topbar (it's
       hidden entirely on admin pages, which have no agency-scoped data to search). */
    margin-left: auto;
}

.global-search {
    position: relative;
    flex: 1 1 420px;
    max-width: 420px;
    min-width: 0;
    margin: 0 auto;
}

.global-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--muted);
    pointer-events: none;
}

.global-search-input {
    width: 100%;
    padding: 9px 12px 9px 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.88rem;
}

.global-search-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-tint-border);
}

.global-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 40;
    padding: 6px;
}

.global-search-group + .global-search-group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.global-search-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    padding: 6px 8px 4px;
}

.global-search-result {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    color: inherit;
}

.global-search-result:hover {
    background: var(--primary-tint-bg);
}

.global-search-result-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
}

.global-search-result-sub {
    font-size: 0.76rem;
    color: var(--muted);
}

.global-search-empty {
    padding: 14px 8px;
    font-size: 0.84rem;
    color: var(--muted);
    text-align: center;
}

.crm-content {
    flex: 1;
    padding: 22px 24px 40px;
}

.crm-content .container {
    max-width: 1100px;
    margin: 0;
    padding: 0;
}

/* Overview pages (dashboard, listing/client tables) use the room on big monitors; forms stay at 1100px so lines don't get too long to read. */
.crm-content .container.container-wide {
    max-width: 1480px;
}

.crm-content .chat-page {
    max-width: none;
}

.crm-content .chat-shell {
    height: calc(100vh - 170px);
}

.crm-sidebar-backdrop {
    display: none;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 18px;
    box-shadow: var(--shadow-sm);
    /* Grid stretches every card in a row to match the tallest one (the commission card's
       wrapped text is often taller than a plain "0 / Active" card) — without centering,
       a short card's content sits pinned to the top and reads as an empty box once that
       top edge scrolls out from under the sticky header. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 108px;
}

.stat-card {
    min-width: 0;
}

.stat-card strong {
    display: block;
    /* Shrinks on phones so big amounts ("R 1 234 567.89") stay inside a half-width card. */
    font-size: clamp(1.05rem, 4.4vw, 1.6rem);
    overflow-wrap: anywhere;
    font-weight: 800;
    color: var(--primary-ink-strong);
    line-height: 1.15;
}

.stat-card span {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.3;
}

.stat-card-sub {
    font-size: 0.72rem !important;
    opacity: 0.8;
    margin-top: 2px;
}

.charts-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 20px;
}

/* Explicit 2-column track (not auto-fit) — with only 2-3 cards, auto-fit was reserving
   extra empty column tracks on wide screens, so the actual cards rendered small and
   left-aligned with a big dead gap to the right instead of filling the row. */
@media (min-width: 760px) {
    .charts-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    transition: box-shadow 0.2s ease;
}

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

.chart-card-wide {
    grid-column: 1 / -1;
}

.chart-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.chart-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* Per-graph type switcher: a cog on the chart card header opens a small menu of chart types. */
.chart-cog-wrap { position: relative; margin-left: auto; flex-shrink: 0; }
.chart-cog { display: inline-flex; width: 30px; height: 30px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--muted); align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.chart-cog:hover { background: var(--primary-tint-bg); color: var(--primary-ink); }
.chart-cog svg { width: 16px; height: 16px; }
.chart-cog-menu { position: absolute; right: 0; top: 36px; z-index: 40; min-width: 132px; display: flex; flex-direction: column; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }
.chart-cog-menu[hidden] { display: none; }
.chart-cog-opt { text-align: left; padding: 8px 11px; border: none; background: none; border-radius: 7px; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--text); font-family: inherit; }
.chart-cog-opt:hover { background: var(--primary-tint-bg); }
.chart-cog-opt.active { color: var(--primary-ink); font-weight: 800; }

.chart-card-subtitle {
    font-size: 0.78rem;
    color: var(--muted);
    margin: -14px 0 18px;
}

/* Admin Dashboard "Website Visitors" (SiteVisits): headline numbers, the graph, then sources + pages. */
.visits-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 10px; margin-bottom: 18px; }
.visits-stats strong small { font-size: 0.8rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.visits-trend { font-weight: 800; white-space: nowrap; }
.visits-stats .visits-perday-note { font-size: 0.72rem; margin-top: 2px; }
.visits-trend.is-up { color: var(--success-text, #15803d); }
.visits-trend.is-down { color: var(--danger-text, #b91c1c); }
@media (max-width: 1100px) { .visits-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .visits-perday { grid-column: span 2; } }
.visits-stats div { background: var(--surface-muted, var(--bg)); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.visits-stats strong { font-size: 1.4rem; font-weight: 900; letter-spacing: -0.02em; color: var(--primary-ink-strong); }
.visits-stats span { font-size: 0.78rem; color: var(--muted); }
.visits-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.visits-lists h4 { margin: 0 0 10px; font-size: 0.85rem; font-weight: 800; }
.visits-lists ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.visits-lists li { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.visits-lists li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.visits-lists .muted { margin: 0; font-size: 0.85rem; color: var(--muted); }
.visits-lists .visits-abroad { margin-top: 12px; font-size: 0.8rem; }
/* The two lists read as tables: a line between rows, light stripes and a hover row, so the eye can follow a name to its number. */
.visits-lists ul.visits-table { gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); overflow: hidden; }
.visits-table li { padding: 9px 12px; border-bottom: 1px solid var(--border); }
.visits-table li:last-child { border-bottom: none; }
.visits-table li:nth-child(odd):not(.visits-table-head) { background: color-mix(in srgb, var(--text) 3%, transparent); }
.visits-table li:not(.visits-table-head):hover { background: var(--primary-tint-bg); }
.visits-table .visits-table-head { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); }
.visits-table .visits-table-head b { font-weight: 800; }
/* Admin dashboard: Video Plays card */
.vp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vp-lists { display: block; }
.vp-table li { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px 72px 96px; gap: 10px; align-items: center; }
.vp-table li b { margin-left: 0; text-align: right; }
.vp-table li span small { display: block; font-size: 0.74rem; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.vp-table li.vp-auto { color: var(--muted); }
.vp-table .vp-last { font-weight: 600; color: var(--muted); }
@media (max-width: 700px) { .vp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vp-table li { grid-template-columns: minmax(0, 1fr) 56px 64px; } .vp-hide-sm { display: none; } }
/* Admin dashboard: Agencies & users / Marketing switch, Blog Reads card */
.dash-switch-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dash-switch-head .section-title { margin: 0; }
.dash-switch { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-sm); }
.dash-switch a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; color: var(--muted); text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.dash-switch a .icon { width: 16px; height: 16px; }
.dash-switch a:hover { color: var(--text); background: var(--primary-tint-bg); }
.dash-switch a.is-active { background: var(--primary-600); color: #fff; box-shadow: 0 4px 12px rgba(15, 118, 110, 0.25); }
.dash-switch a.is-active:hover { background: var(--primary-700); color: #fff; }
.dash-card-link { margin-left: auto; }
.blog-reads-table li { display: grid; grid-template-columns: minmax(0, 1fr) 80px 64px; gap: 10px; align-items: center; }
.blog-reads-table li b { margin-left: 0; text-align: right; }
.blog-reads-table li span { min-width: 0; }
.blog-reads-table li span a { color: inherit; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog-reads-table li span a:hover { color: var(--primary); text-decoration: underline; }
.blog-reads-bar { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: linear-gradient(90deg, #14b8a6, #0f766e); min-width: 4px; }
@media (max-width: 700px) { .blog-reads-table li { grid-template-columns: minmax(0, 1fr) 56px; } .dash-switch { width: 100%; } .dash-switch a { flex: 1; justify-content: center; padding: 8px 10px; } }
.visits-credit { margin: 14px 0 0; font-size: 0.72rem; color: var(--muted); }
.visits-credit a { color: inherit; }
.visits-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
/* Source colours: a validated colour-blind-safe categorical palette (light + dark steps); Direct is neutral grey. */
.visits-linkedin { background: #2a78d6; }
.visits-facebook { background: #eb6834; }
.visits-whatsapp { background: #1baf7a; }
.visits-google { background: #eda100; }
.visits-email { background: #e87ba4; }
.visits-other { background: #6250d6; }
:root[data-theme="dark"] .visits-linkedin { background: #3987e5; } :root[data-theme="dark"] .visits-facebook { background: #d95926; } :root[data-theme="dark"] .visits-whatsapp { background: #199e70; }
:root[data-theme="dark"] .visits-google { background: #c98500; } :root[data-theme="dark"] .visits-email { background: #d55181; } :root[data-theme="dark"] .visits-other { background: #9085e9; }
.visits-direct { background: #b6bcc6; }
.visits-app { background: #0f766e; }
:root[data-theme="dark"] .visits-app { background: #2dd4bf; }
:root[data-theme="dark"] .visits-direct { background: #6b7280; }
@media (max-width: 640px) {
    .visits-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .visits-perday { grid-column: 1 / -1; }
    .visits-lists { grid-template-columns: minmax(0, 1fr); }
}

/* Chart.js sizes the canvas from this wrapper's own box (maintainAspectRatio:false in
   the JS options) rather than guessing an aspect ratio from canvas width alone — the old
   CSS-only "max-height" approach rendered noticeably small/squashed on wide chart cards. */
.chart-canvas-wrap {
    position: relative;
    height: 260px;
}

.chart-canvas-wrap.chart-canvas-wrap-tall {
    height: 320px;
}

.chart-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 880px) {
    .crm-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--shadow-md);
    }

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

    .crm-menu-toggle {
        display: block;
    }

    .crm-sidebar-backdrop.visible {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 25;
    }

    /* Title and search both compete for a narrow topbar on mobile — the title still shows
       page context in the tab/nav, so it's the one that gives way here. */
    .crm-topbar-title {
        display: none;
    }

    .crm-topbar-user span {
        display: none;
    }

    .crm-content {
        padding: 16px 16px 32px;
    }

    .crm-content .chat-shell {
        height: calc(100vh - 200px);
    }
}

/* Leads Kanban board — this page trades the normal centered/capped .container width for the
   full CRM content width (it's the only page that benefits: 5 columns need real room). Grid
   with minmax() self-adapts across the whole width range with no breakpoint needed: on a
   wide desktop the 5 columns stretch evenly to fill the page and there's no scrollbar at
   all; once the viewport can't fit all 5 at their floor width, it falls back to a normal
   horizontal scroll (the usual mobile Kanban pattern) automatically. The 242px below is the
   measured, fixed (not viewport-relative) height of everything above the board: topbar +
   content padding + the "Leads" title + subtitle line + the content area's own bottom
   padding — so the board's own height exactly fills the rest of the viewport and only each
   column scrolls internally, never the outer page. */
.crm-content .container.kanban-page {
    max-width: none;
}

.kanban-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(210px, 1fr));
    gap: 18px;
    align-items: stretch;
    overflow-x: auto;
    height: calc(100vh - 242px);
    min-height: 360px;
    padding-bottom: 4px;
}

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

/* Phone-only pieces of the Leads page — hidden on desktop, where the full board shows. */
.kanban-tabs,
.kanban-card-quick,
.kanban-card-when {
    display: none;
}

/* Lead actions bottom sheet (phones) */
.lead-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    background: rgba(8, 15, 14, 0.5);
}

.lead-sheet-overlay[hidden] {
    display: none;
}

.lead-sheet {
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: 8px;
    animation: lead-sheet-up 0.18s ease-out;
}

@keyframes lead-sheet-up {
    from { transform: translateY(24px); opacity: 0.6; }
    to { transform: none; opacity: 1; }
}

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

.lead-sheet-grip {
    justify-self: center;
    width: 40px;
    height: 4px;
    margin: 2px 0 6px;
    border-radius: var(--radius-full);
    background: var(--gray-300);
}

.lead-sheet-title {
    font-size: 1.02rem;
}

.lead-sheet-label {
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.lead-sheet-stages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.lead-sheet .lead-sheet-stage,
.lead-sheet .lead-sheet-stage:hover {
    min-height: 44px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--surface);
    box-shadow: none;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
}

.lead-sheet .lead-sheet-stage.is-current {
    background: var(--primary-tint-bg);
    border-color: var(--primary-500);
    color: var(--primary-ink);
    opacity: 1;
    cursor: default;
}

.lead-sheet-actions {
    display: grid;
    margin-top: 6px;
    border-top: 1px solid var(--border);
}

.lead-sheet .lead-sheet-action,
.lead-sheet .lead-sheet-action:hover {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 50px;
    padding: 0 4px;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
}

.lead-sheet .lead-sheet-action[hidden] {
    display: none;
}

.lead-sheet-action .icon {
    width: 18px;
    height: 18px;
    color: var(--muted);
}

.lead-sheet .lead-sheet-danger,
.lead-sheet .lead-sheet-danger .icon {
    color: var(--danger);
}

.lead-sheet .lead-sheet-close,
.lead-sheet .lead-sheet-close:hover {
    min-height: 48px;
    margin-top: 6px;
    border-radius: var(--radius-md);
    background: var(--gray-100);
    border: none;
    box-shadow: none;
    color: var(--text);
    font-weight: 700;
}

body.lead-sheet-open {
    overflow: hidden;
}

.lead-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 210;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border-radius: var(--radius-full);
    background: var(--gray-900);
    color: var(--surface);
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
}

.lead-toast[hidden] {
    display: none;
}

/* The document page itself stays a true-to-size 700px box always (see the comment above it in
   agency-documents/preview.php) — the drag-to-position logo feature depends on matching the
   real PDF's rendered width exactly. Below 700px available width, JS applies a CSS transform
   to scale the whole box down uniformly (never stretches it back up past its real size) and
   this wrapper's height is set to match in script, since a transform doesn't affect layout
   flow on its own. */
.doc-preview-scale-outer {
    overflow: hidden;
    display: flex;
    justify-content: center;
    /* Flex's default align-items:stretch would otherwise squeeze .doc-preview-page's cross-axis
       (height) to match whatever height we've just set on THIS element in script — which is
       exactly backwards, since that height is derived FROM the page's own natural height. Left
       on stretch, that's a feedback loop: a too-small measurement shrinks the wrapper, which
       then squashes the page shorter, which measures even smaller next time. flex-start makes
       the page always report its true content height regardless of the wrapper's own height. */
    align-items: flex-start;
}

.doc-preview-page {
    flex-shrink: 0;
    transform-origin: top center;
}

.kanban-column {
    /* A clearly tinted "lane" with a crisp border (works over both light and dark page backgrounds)
       so each column is distinct from the page and the white cards pop against it. */
    background: rgba(120, 140, 160, 0.14);
    border: 1px solid rgba(120, 140, 160, 0.28);
    border-radius: var(--radius-md);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    /* A slightly darker strip so the column header reads as a header and delineates each lane. */
    background: rgba(120, 140, 160, 0.12);
    border-bottom: 1px solid rgba(120, 140, 160, 0.22);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}

.kanban-column-header .count-badge {
    background: var(--surface);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(120, 140, 160, 0.25);
}

.kanban-column-body .empty-hint {
    color: var(--muted);
    font-size: 0.82rem;
    text-align: center;
    padding: 16px 4px;
}

.kanban-column-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background-color 0.15s ease;
}

.kanban-column-body.drag-over {
    background: var(--primary-tint-bg);
}

.kanban-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
    cursor: grab;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(23, 32, 35, 0.06);
    transition: box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.kanban-card:hover {
    box-shadow: 0 4px 14px -6px rgba(23, 32, 35, 0.28);
    border-color: var(--primary-tint-border, var(--border));
}

.kanban-card.dragging {
    opacity: 0.5;
    box-shadow: 0 8px 24px -8px rgba(23, 32, 35, 0.4);
}

.kanban-card-link {
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kanban-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.kanban-card-top strong {
    font-size: 0.86rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The buyer's name opens the lead (conversation / client / edit) — as does a click anywhere else on the card. */
/* The name keeps room for itself; labels (Manual, Website, New) move to a second line when the card is narrow. */
.kanban-card-name {
    flex: 1 1 7.5em;
    min-width: 0;
    display: flex;
    color: inherit;
    text-decoration: none;
}

.kanban-card-name:hover strong,
.kanban-card-name:focus-visible strong {
    color: var(--primary-ink);
    text-decoration: underline;
}

.kanban-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* Edit/Delete are icon-only circles (fixed 38px), unlike the stage select and View Client/
   Convert button above them — stacking them one-per-row like everything else in this column
   left a lot of dead space and read as disconnected floating buttons. A compact row fits them
   both without fighting the column layout above. */
.kanban-card-icon-row {
    display: flex;
    gap: 8px;
}

.kanban-stage-select {
    width: 100%;
    font-size: 0.78rem;
    padding: 6px 8px;
}

.kanban-card-actions .btn,
.kanban-card-actions button {
    width: 100%;
    text-align: center;
    font-size: 0.78rem;
    padding: 6px 8px;
}

/* Property Defect Disclosure */
.disclosure-legal-note {
    background: var(--warning-bg);
    border: 1px solid #fde68a;
    color: var(--warning-text);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.disclosure-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
    margin-bottom: 14px;
}

.disclosure-section summary {
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    padding: 2px 0;
    list-style: none;
}

.disclosure-section summary::-webkit-details-marker {
    display: none;
}

.disclosure-section summary::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(-45deg);
    margin-right: 10px;
    transition: transform 0.15s ease;
}

.disclosure-section[open] summary::before {
    transform: rotate(45deg);
}

.disclosure-question {
    padding: 14px 0;
    border-top: 1px solid var(--border);
    margin-top: 12px;
}

.disclosure-question p {
    margin: 0 0 10px;
    font-weight: 600;
    font-size: 0.88rem;
}

.disclosure-answer-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.disclosure-answer-group label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    background: var(--bg);
}

.disclosure-answer-group input[type="radio"] {
    width: auto;
    accent-color: var(--primary-600);
}

.disclosure-answer-group textarea,
.disclosure-question textarea {
    margin-top: 0;
}

.signature-pad-wrap {
    position: relative;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    height: 180px;
    touch-action: none;
}

#signature-canvas, .signature-pad-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
}

.signature-empty-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #b8b8b8;
    font-size: 0.85rem;
    pointer-events: none;
}

.signature-pad-block {
    margin-bottom: 18px;
}

.signature-pad-block .signature-pad-wrap {
    height: 150px;
}

.field-chip--signature {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-color: var(--warning-text);
}

/* The agency's own fields (Agency → Custom Fields). */
.field-chip--custom {
    border-style: dashed;
    border-color: var(--primary-500);
}
.inline-token-select { width: auto; min-width: 140px; }

/* "Email" on a listing document: a small form that opens under the row's buttons. */
.doc-email > summary { list-style: none; cursor: pointer; }
.doc-email > summary::-webkit-details-marker { display: none; }
.doc-email { position: relative; }
.doc-email[open] > summary { border-color: var(--primary-600); }
.doc-email-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(360px, calc(100vw - 48px)); display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.18)); }
.doc-email-form button { width: auto; justify-self: start; }
@media (max-width: 768px) {
    .doc-email[open] { flex-basis: 100%; order: 5; }
    .doc-email-form { position: static; width: auto; margin-top: 8px; box-shadow: none; }
}

/* Disclosure signatures: seller (here or by link), the agent's counter-signature, buyers later. */
.dsc-signer { padding: 16px 0; border-top: 1px solid var(--border); }
.dsc-signer:first-of-type { border-top: 0; }
.dsc-signer-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dsc-signer-head strong { display: block; font-size: 0.95rem; }
.dsc-signer-head .meta { font-size: 0.8rem; }
.dsc-step { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-600); color: #fff; font-weight: 800; font-size: 0.85rem; }
.dsc-signer-later .dsc-step { background: var(--border); color: var(--muted); }
.dsc-declaration { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--primary-600); background: var(--primary-tint-bg); border-radius: 6px; font-size: 0.86rem; line-height: 1.5; }
.dsc-confirm { margin-top: 4px; }
.dsc-confirm[hidden] { display: none; }
.disclosure-signing .signature-pad-block { max-width: 460px; }
.disclosure-signing .signature-pad-label { display: block; font-weight: 700; font-size: 0.8rem; margin-bottom: 6px; }
.disclosure-signing .sig-mode { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.disclosure-signing .sig-mode-option { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border: 1.5px solid var(--border); border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--muted); background: var(--bg); cursor: pointer; line-height: 1.3; text-transform: none; }
.disclosure-signing .sig-mode-option input { width: auto; margin: 0; accent-color: var(--primary-600); }
.disclosure-signing .sig-mode-option:has(input:checked) { border-color: var(--primary-600); background: var(--primary-tint-bg); color: var(--text); }
.disclosure-signing .signature-pad-block[data-mode="remote"] .sig-here, .disclosure-signing .signature-pad-block[data-mode="here"] .sig-remote { display: none; }
.disclosure-signing .sig-remote { display: grid; gap: 8px; padding: 12px; border: 1.5px dashed var(--primary-600); border-radius: 10px; background: var(--primary-tint-bg); }
.disclosure-signing .sig-remote-input[data-fill="name"] { display: none; }
.disclosure-signing .sig-remote-hint { font-size: 0.78rem; line-height: 1.45; color: var(--muted); }
.disclosure-signing .signature-pad-clear { width: auto; margin-top: 8px; }
.dsc-pending { display: flex; gap: 16px; align-items: flex-start; padding: clamp(16px, 3vw, 24px); border-radius: 16px; background: var(--warning-bg); color: var(--text); border: 1px solid #fde68a; margin-bottom: 22px; }
.dsc-pending-icon { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #f59e0b; color: #fff; }
.dsc-pending-icon .icon { width: 22px; height: 22px; }
.dsc-pending h2 { margin: 0 0 4px; font-size: 1.15rem; }
.dsc-pending p { margin: 0; line-height: 1.5; }
.dsc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.dsc-actions form { margin: 0; }

.disclosure-form-actions {
    display: flex;
    gap: 10px;
    margin: 20px 0 40px;
}

.disclosure-form-actions .block {
    flex: 1;
}

.disclosure-form-actions .secondary {
    flex-shrink: 0;
}

/* ---------- Book a Demo (/book-demo) + Admin Demo Bookings ---------- */

.demo-hero {
    background:
        linear-gradient(165deg, rgba(6, 58, 54, 0.62) 0%, rgba(4, 33, 30, 0.78) 100%),
        var(--hero-photo) center/cover no-repeat;
    color: #fff;
    padding: 48px 16px 40px;
}

.demo-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.demo-hero h1 {
    font-size: clamp(1.7rem, 3.5vw + 1rem, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin: 0 0 12px;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.demo-hero p {
    margin: 0 auto 20px;
    max-width: 620px;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(0.98rem, 0.6vw + 0.8rem, 1.1rem);
}

.demo-hero-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.demo-hero-points li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
}

.demo-hero-points .icon {
    width: 16px;
    height: 16px;
}

.demo-container {
    max-width: 760px;
}

.demo-container > .detail-section,
.demo-form > .detail-section {
    margin-bottom: 16px;
}

.demo-referrer-flash {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-tint-bg);
    border-color: var(--accent-tint-border);
    color: var(--accent-600);
}

.demo-referrer-flash .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* The details form sits inside a .card already — drop .search-form's own box so it isn't a card-in-a-card. */
.search-form.demo-fields {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.demo-optional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* Visually hidden but still in the form — bots fill it, people never see it. */
.demo-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Slot picker */
.demo-date-chips {
    display: none;
}

.demo-slot-picker.js-enabled .demo-date-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    margin-bottom: 6px;
    scrollbar-width: thin;
}

.demo-date-chip {
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0;
    min-width: 62px;
    padding: 8px 10px;
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    line-height: 1.15;
}

.demo-date-chip:hover {
    background: var(--primary-tint-bg);
    border-color: var(--primary-500);
    box-shadow: none;
}

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

.demo-date-chip-dow,
.demo-date-chip-month {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

.demo-date-chip-day {
    font-size: 1.25rem;
    font-weight: 800;
}

.demo-slot-day + .demo-slot-day {
    margin-top: 14px;
}

.demo-slot-picker.js-enabled .demo-slot-day {
    display: none;
    margin-top: 0;
}

.demo-slot-picker.js-enabled .demo-slot-day.active {
    display: block;
}

.demo-slot-day-heading {
    margin: 0 0 8px;
    font-size: 0.9rem;
    font-weight: 700;
}

.demo-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}

.demo-slot {
    position: relative;
    cursor: pointer;
}

.demo-slot input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.demo-slot span {
    display: block;
    text-align: center;
    padding: 10px 6px;
    border: 1.5px solid var(--primary-tint-border);
    border-radius: var(--radius-sm);
    color: var(--primary-ink);
    font-weight: 700;
    font-size: 0.92rem;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.demo-slot:hover span {
    background: var(--primary-tint-bg);
    border-color: var(--primary-500);
}

.demo-slot input:checked + span {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}

.demo-slot input:focus-visible + span {
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.demo-slot-tz {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

/* Online / in-person choice */
.demo-format-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.demo-format-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
}

.demo-format-option:has(input:checked) {
    border-color: var(--primary-500);
    background: var(--primary-tint-bg);
}

.demo-format-option input {
    width: auto;
    margin-top: 3px;
    accent-color: var(--primary-600);
}

.demo-format-option small {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
}

/* In person is switched off when the agency is outside the Western Cape. */
.demo-format-option.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.demo-consent {
    margin: 2px 0 4px;
}

/* Confirmation + manage */
.demo-confirm-card {
    text-align: center;
    padding: 28px 20px;
}

.demo-confirm-card h1 {
    margin: 10px 0 6px;
    font-size: 1.5rem;
    font-weight: 800;
}

.demo-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
}

.demo-confirm-icon .icon {
    width: 28px;
    height: 28px;
}

.demo-confirm-card .demo-summary {
    text-align: left;
    margin: 18px 0;
}

.demo-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.demo-summary {
    margin: 0 0 14px;
    display: grid;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
}

.demo-summary dt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.demo-summary dt .icon {
    width: 14px;
    height: 14px;
}

.demo-summary dd {
    margin: 2px 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.demo-status {
    display: inline-block;
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--primary-tint-bg);
    color: var(--primary-ink-strong);
    vertical-align: middle;
}

.demo-status-completed {
    background: var(--success-bg);
    color: var(--success-text);
}

.demo-status-cancelled,
.demo-status-no_show {
    background: var(--gray-100);
    color: var(--muted);
}

/* Admin */
.demo-admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

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

/* Recent imports popup — a clean card per data dump instead of a cramped table. */
.imports-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}
.import-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.import-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--primary-tint-bg);
    color: var(--primary-ink);
}
.import-card-icon .icon { width: 18px; height: 18px; }
.import-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.import-card-agency { font-size: 1rem; font-weight: 700; }
.import-card-file {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.import-card-file .badge-icon { width: 14px; height: 14px; flex-shrink: 0; }
.import-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.import-stat {
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--muted);
    font-size: 0.78rem;
}
.import-stat strong { color: var(--text); font-weight: 800; }
.import-stat-live strong { color: var(--success-text); }
.import-card-undo { margin: 0; flex-shrink: 0; }
@media (max-width: 560px) {
    .import-card { flex-wrap: wrap; }
    .import-card-undo { width: 100%; }
    .import-card-undo .btn-sm { width: 100%; justify-content: center; }
}

.demo-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.demo-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
}

.demo-stat strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.demo-stat span {
    color: var(--muted);
    font-size: 0.8rem;
}

.demo-stat-alert {
    border-color: var(--accent-tint-border);
    background: var(--accent-tint-bg);
}

.demo-stat-alert strong {
    color: var(--accent-600);
}

.demo-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.demo-row .info > .meta {
    display: block;
    margin-top: 3px;
}

.demo-row .info strong .demo-status {
    margin-left: 6px;
}

.demo-row-when,
.demo-row-referral {
    display: flex !important;
    align-items: center;
    gap: 5px;
}

.demo-row-when .icon,
.demo-row-referral .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.demo-row-referral {
    color: var(--accent-600) !important;
}

.demo-row-notes {
    font-style: italic;
}

.demo-row-admin-notes {
    margin-top: 8px;
    font-size: 0.85rem;
}

.demo-row-admin-notes summary {
    cursor: pointer;
    color: var(--primary-ink);
    font-weight: 600;
}

.demo-row-admin-notes form {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    justify-items: start;
}

.demo-row-admin-notes textarea {
    min-height: 70px;
}

.demo-window-rows {
    display: grid;
    gap: 8px;
}

.demo-window-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.demo-block-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
    gap: 8px;
    margin-top: 12px;
}

@media (max-width: 560px) {
    .demo-format-options,
    .demo-block-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .demo-window-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .demo-window-row select {
        grid-column: 1 / -1;
    }

    .demo-window-row > .meta {
        display: none;
    }
}

/* ---------- Admin Users: search + role tabs ---------- */

.user-search-form {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.user-search-input {
    flex: 1;
    min-width: 0;
}

.user-search-form .btn,
.user-search-form button {
    flex-shrink: 0;
}

.user-tabs-card .record-tab {
    text-decoration: none;
}

.user-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.user-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface);
}

.user-filter-chip:hover {
    border-color: var(--primary-500);
    color: var(--primary-ink);
}

.user-filter-chip.active {
    background: var(--primary-tint-bg);
    border-color: var(--primary-500);
    color: var(--primary-ink);
}

.user-filter-chip .nav-count-badge {
    margin-left: 2px;
}

.user-results-summary {
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: var(--muted);
}

/* Rows sit inside the tabs card — same divided-list treatment as other record cards. */
.user-tabs-card .list-row {
    box-shadow: none;
}

@media (max-width: 560px) {
    .user-search-form {
        flex-wrap: wrap;
    }

    .user-search-input {
        flex-basis: 100%;
    }
}

.user-tabs-card .list-row .info > span:not(.status-pill) {
    display: block;
    margin-top: 2px;
}

.user-tabs-card .list-row .info > .status-pill {
    margin-top: 4px;
}

/* ---------- CRM Branding: branded sidebar logo ---------- */

.crm-logo-brand {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 10px 18px;
}

.crm-logo-brand img {
    display: block;
    max-width: 180px;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.crm-logo-brand.on-white img {
    background: #fff;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    box-sizing: content-box;
}

.branding-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--accent-tint-bg);
    border-color: var(--accent-tint-border);
    color: var(--text);
}

.branding-notice .icon {
    width: 18px;
    height: 18px;
    color: var(--accent-600);
    flex-shrink: 0;
}

.branding-notice span {
    flex: 1;
    min-width: 200px;
}

/* ---------- CRM Branding editor (/branding) ---------- */

.branding-page > .meta {
    margin: 0 0 16px;
    max-width: 760px;
}

.branding-status.is-active {
    border-color: var(--primary-tint-border);
}

.branding-status p {
    margin: 0 0 12px;
}

.branding-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.branding-status-fineprint {
    margin: 12px 0 0 !important;
    font-size: 0.8rem;
    color: var(--muted);
}

.branding-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 16px;
    align-items: start;
}

.branding-controls > .card {
    margin-bottom: 16px;
}

.branding-preview-wrap {
    position: sticky;
    top: 84px;
}

.branding-preview-label {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.branding-logo-current {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 14px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
    background: repeating-conic-gradient(var(--gray-100) 0% 25%, var(--surface) 0% 50%) 50% / 16px 16px;
}

.branding-logo-current img {
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
}

.branding-logo-current .meta {
    background: var(--surface);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.branding-logo-upload {
    display: flex;
    gap: 8px;
    align-items: center;
}

.branding-logo-upload input[type=file] {
    flex: 1;
    min-width: 0;
    padding: 8px;
}

.branding-logo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.branding-colour-field {
    margin-bottom: 18px;
}

.branding-colour-field > .meta {
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: var(--muted);
}

.branding-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.branding-swatch {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border);
}

.branding-swatch:hover {
    box-shadow: 0 0 0 2px var(--gray-400);
}

.branding-swatch.selected {
    box-shadow: 0 0 0 2px var(--text);
}

.branding-custom-colour {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 3px 10px 3px 3px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.8rem !important;
    color: var(--text) !important;
}

.branding-custom-colour input[type=color] {
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.branding-custom-colour input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.branding-custom-colour input[type=color]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.branding-hex {
    font-size: 0.8rem;
    color: var(--muted);
}

.branding-contrast-warning {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: var(--danger-text);
}

.branding-reset {
    margin-bottom: 16px;
}

/* Live preview — a miniature CRM, always drawn in light mode so it reads as "the design". */
.branding-preview {
    --bp-primary: #0f766e;
    --bp-primary-dark: #0b5c56;
    --bp-sidebar-start: #063a36;
    --bp-sidebar-end: #031815;
    --bp-tint: #f0fdfa;
    --bp-tint-border: #99f6e4;
    --bp-accent: #f97316;
    --bp-on-primary: #fff;
    --bp-on-accent: #fff;
    --bp-ink: #0f766e;
    --bp-sidebar-bg: linear-gradient(165deg, var(--bp-sidebar-start) 0%, var(--bp-sidebar-end) 100%);
    --bp-sidebar-text: #fff;
    display: flex;
    min-height: 300px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    background: #f8fafa;
    color: #172023;
    font-size: 0.8rem;
}

.bp-sidebar {
    width: 38%;
    max-width: 190px;
    flex-shrink: 0;
    padding: 14px 10px;
    background: var(--bp-sidebar-bg);
    color: color-mix(in srgb, var(--bp-sidebar-text) 78%, transparent);
}

.bp-logo {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin: 0 6px 14px;
    color: var(--bp-sidebar-text);
    font-weight: 800;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.bp-logo img {
    max-width: 100%;
    max-height: 32px;
    object-fit: contain;
}

.bp-logo.on-white img {
    background: #fff;
    padding: 4px 7px;
    border-radius: 6px;
}

.bp-nav {
    display: grid;
    gap: 2px;
}

.bp-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    border-radius: 6px;
}

.bp-nav-item .icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.bp-nav-item.active {
    background: color-mix(in srgb, var(--bp-sidebar-text) 14%, transparent);
    color: var(--bp-sidebar-text);
}

.bp-nav-item.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--bp-accent);
}

.bp-badge {
    margin-left: auto;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--bp-accent);
    color: var(--bp-on-accent);
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

.bp-topbar {
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #e6e9ea;
    font-weight: 700;
}

.bp-content {
    padding: 14px;
    display: grid;
    gap: 12px;
}

.bp-card {
    background: #fff;
    border: 1px solid #e6e9ea;
    border-radius: 10px;
    padding: 10px 12px;
    display: grid;
    gap: 4px;
    justify-items: start;
}

.bp-card span {
    color: #6b7480;
}

.bp-card a {
    color: var(--bp-ink);
    font-weight: 600;
}

.bp-chip {
    margin-top: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--bp-tint);
    border: 1px solid var(--bp-tint-border);
    color: var(--bp-ink) !important;
    font-size: 0.7rem;
    font-weight: 700;
}

.bp-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bp-btn {
    padding: 7px 12px;
    border-radius: 8px;
    background: var(--bp-primary);
    color: var(--bp-on-primary);
    font-weight: 700;
}

.bp-btn.secondary {
    background: #fff;
    color: var(--bp-ink);
    border: 1.5px solid var(--bp-tint-border);
}

@media (max-width: 900px) {
    .branding-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .branding-preview-wrap {
        position: static;
        order: -1;
    }
}

@media (max-width: 480px) {
    .branding-logo-upload {
        flex-wrap: wrap;
    }

    .branding-logo-upload input[type=file] {
        flex-basis: 100%;
    }
}

/* CRM Branding editor: text colour + sidebar style controls */
.branding-text-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.branding-text-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}

.branding-text-modes {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.branding-text-mode {
    position: relative;
    margin: 0 !important;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.branding-text-mode input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.branding-text-mode span {
    display: inline-block;
    padding: 5px 11px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}

.branding-text-mode input:checked + span {
    border-color: var(--primary-500);
    background: var(--primary-tint-bg);
    color: var(--primary-ink);
}

.branding-text-mode input:focus-visible + span {
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.branding-text-modes input[type=color] {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1.5px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
}

.branding-text-modes input[type=color][hidden] {
    display: none;
}

.branding-text-sample {
    margin-left: auto;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid var(--border);
}

.branding-sidebar-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.branding-sidebar-mode {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin: 0 !important;
    padding: 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.88rem !important;
    color: var(--text) !important;
}

.branding-sidebar-mode:has(input:checked) {
    border-color: var(--primary-500);
    background: var(--primary-tint-bg);
}

.branding-sidebar-mode input {
    width: auto;
    margin-top: 3px;
    accent-color: var(--primary-600);
}

.branding-sidebar-swatch {
    flex-shrink: 0;
    width: 22px;
    height: 34px;
    border-radius: 5px;
    border: 1px solid var(--border);
}

.branding-sidebar-mode small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 500;
}

@media (max-width: 560px) {
    .branding-sidebar-modes {
        grid-template-columns: minmax(0, 1fr);
    }

    .branding-text-sample {
        margin-left: 0;
    }
}

/* ErfFind wordmark in the Branding preview when no custom logo is set — mirrors .crm-logo. */
.bp-erffind-logo {
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.bp-erffind-logo span {
    color: var(--bp-accent);
}

/* ---------- Listing video (Edit Listing + public Video Tour) ---------- */

.listing-video video,
.detail-video video {
    display: block;
    width: 100%;
    max-height: 70vh;
    border-radius: var(--radius-md);
    background: #000;
}

.listing-video video {
    max-height: 360px;
    margin-bottom: 8px;
}

/* Portrait phone videos: keep them phone-shaped and centred rather than a tall black column. */
.detail-video.is-portrait video {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

/* The video on the portals (via ErfFind's YouTube): status line + the agent's switch. */
.listing-video-portals { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; padding: 10px 12px; border-radius: var(--radius-md, 10px); background: var(--surface-2, rgba(148,163,184,0.12)); border: 1px solid var(--border); font-size: 0.86rem; line-height: 1.45; }
.listing-video-portals.is-on { border-color: var(--primary-tint-border); background: var(--primary-tint-bg); }
.listing-video-portals > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--primary-ink); }
.listing-video-terms { display: block; margin-top: 3px; font-size: 0.78rem; color: var(--text-muted, #64748b); }
.listing-video-portals > span { flex: 1; min-width: 200px; }
.listing-video-portals .link-button { background: none; border: 0; padding: 0; width: auto; margin: 0; color: var(--primary-ink); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
.listing-video-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.listing-video-progress {
    padding: 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.listing-video-progress-label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.listing-video-bar {
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    overflow: hidden;
}

.listing-video-bar span {
    display: block;
    height: 100%;
    background: var(--primary-600);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.listing-video-progress .meta {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.listing-video [data-video-error] {
    margin-bottom: 10px;
}

/* ---------- Admin → System Health ---------- */

.system-health {
    max-width: 1100px;
}

.system-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* Status tokens: good / watch / action needed — always paired with an icon + words, never colour alone. */
.system-level-ok { --lvl: var(--success); --lvl-bg: var(--success-bg); --lvl-text: var(--success-text); --lvl-track: var(--success-border); }
.system-level-watch { --lvl: #d97706; --lvl-bg: var(--warning-bg); --lvl-text: var(--warning-text); --lvl-track: #fde68a; }
.system-level-upgrade { --lvl: var(--danger); --lvl-bg: var(--danger-bg); --lvl-text: var(--danger-text); --lvl-track: var(--danger-border); }
.system-level-unknown { --lvl: var(--gray-400); --lvl-bg: var(--gray-100); --lvl-text: var(--muted); --lvl-track: var(--gray-200); }

.system-verdict {
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 18px;
    background: var(--lvl-bg);
    border: 1px solid var(--lvl-track);
    color: var(--text);
}

.system-verdict-head {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--lvl-text);
}

.system-verdict-head .icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.system-advice {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.system-advice li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.88rem;
    line-height: 1.45;
}

.system-advice li .icon {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    color: var(--lvl);
}

.system-advice li strong {
    color: var(--lvl-text);
}

.system-meters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

.system-meter {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.system-meter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.system-meter-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
}

.system-meter-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--lvl-bg);
    color: var(--lvl-text);
    font-size: 0.7rem;
    font-weight: 700;
}

.system-meter-status .icon {
    width: 12px;
    height: 12px;
}

.system-meter-value {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text);
}

.system-meter-track {
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--lvl-track);
    overflow: hidden;
}

.system-meter-track span {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--lvl);
}

.system-meter-detail {
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.35;
}

.system-two-col {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.system-bars {
    display: grid;
    gap: 10px;
}

.system-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
}

.system-bar-label {
    color: var(--text);
}

.system-bar-track {
    height: 10px;
    border-radius: 0 4px 4px 0;
    background: var(--gray-100);
    overflow: hidden;
}

.system-bar-track span {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: var(--primary-600);
}

.system-bar-value {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    min-width: 64px;
    text-align: right;
}

.system-table-view {
    margin-top: 14px;
    font-size: 0.85rem;
}

.system-table-view summary,
.system-details summary {
    cursor: pointer;
    color: var(--primary-ink);
    font-weight: 600;
    border-radius: 6px;
}

/* A mouse click left a heavy black box around "Show as table"; keep the ring for keyboard users only. */
.system-table-view summary:focus:not(:focus-visible),
.system-details summary:focus:not(:focus-visible) { outline: none; }

.system-details {
    display: block;
    margin-bottom: 20px;
}

.system-kv td:first-child {
    color: var(--muted);
    width: 45%;
}

.system-kv tbody tr {
    cursor: default;
}

.system-plan-form {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

@media (max-width: 560px) {
    .system-bar-row {
        grid-template-columns: 1fr auto;
    }

    .system-bar-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* Sidebar footer: just Log Out (Settings is in the "More" group; Light/Dark lives on the Settings page). */
.crm-sidebar-footer .crm-footer-btn {
    width: 100%;
    justify-content: flex-start;
    background: none;
    border: none;
    box-shadow: none;
    cursor: pointer;
}

.crm-sidebar-footer .crm-footer-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
/* ---------- CRM Calendar (calendar/index.php + assets/js/crm-calendar.js) ---------- */

.crm-content .container.cal-page {
    max-width: none;
}

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

.cal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

.cal-main {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px 16px 12px;
    min-width: 0;
}

/* Toolbar: Today ‹ › Title ............ Month | Week | Day | Agenda */
.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cal-nav button {
    height: 36px;
    padding: 0 14px;
    font-size: 0.85rem;
}

.cal-nav .cal-arrow {
    width: 36px;
    padding: 0;
}

.cal-nav .cal-arrow .icon {
    width: 18px;
    height: 18px;
}

.cal-title {
    margin: 0 0 0 8px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.cal-views {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    border: 1px solid var(--border);
}

.cal-views button,
.cal-views button:hover {
    background: transparent;
    color: var(--muted);
    border: none;
    box-shadow: none;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 700;
}

.cal-views button:hover {
    color: var(--text);
}

.cal-views button.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

/* Type filter chips */
.cal-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.cal-filters .cal-filter,
.cal-filters .cal-filter:hover {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: none;
}

.cal-filters .cal-filter.is-on {
    color: var(--text);
    border-color: color-mix(in srgb, var(--type-color) 45%, var(--border));
    background: color-mix(in srgb, var(--type-color) 9%, var(--surface));
}

.cal-filter-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--type-color);
}

.cal-filter:not(.is-on) .cal-filter-dot {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--gray-400);
}

/* The grid fills the rest of the viewport on desktop and scrolls inside itself. */
.cal-grid {
    height: calc(100vh - 262px);
    min-height: 560px;
    --fc-border-color: var(--border);
    --fc-page-bg-color: var(--surface);
    --fc-neutral-bg-color: var(--gray-100);
    --fc-today-bg-color: transparent;
    --fc-now-indicator-color: var(--accent-500);
    --fc-non-business-color: color-mix(in srgb, var(--gray-100) 70%, transparent);
    --fc-list-event-hover-bg-color: var(--primary-tint-bg);
    --fc-highlight-color: var(--primary-tint-bg);
    color: var(--text);
    font-size: 0.85rem;
}

.cal-grid .fc-scrollgrid {
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Day headers: "MON" over a date pill; today's pill in the brand colour. */
.cal-grid .fc-col-header-cell {
    padding: 8px 0 6px;
    background: var(--surface);
}

.cal-grid .fc-col-header-cell-cushion {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--muted);
    text-decoration: none;
}

.cal-dh-dow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cal-dh-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
}

.cal-dh-num.is-today {
    background: var(--primary-600);
    color: #fff;
}

/* Time grid */
.cal-grid .fc-timegrid-slot {
    height: 2.9em;
}

.cal-grid .fc-scroller {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}

.cal-grid .fc-timegrid-event .fc-event-main {
    overflow: hidden;
}

.cal-grid .fc-timegrid-slot-minor {
    border-top-color: color-mix(in srgb, var(--border) 45%, transparent);
}

.cal-grid .fc-timegrid-slot-label-cushion {
    font-size: 0.72rem;
    color: var(--muted);
    padding-right: 8px;
}

.cal-grid .fc-timegrid-now-indicator-line {
    border-width: 2px 0 0;
}

.cal-grid .fc-timegrid-now-indicator-arrow {
    border-width: 5px 0 5px 6px;
}

/* Event cards: a soft wash of the type colour with a solid edge; text always in text tokens. */
.cal-grid .fc-timegrid-event,
.cal-grid .fc-daygrid-block-event {
    background: color-mix(in srgb, var(--type-color) 15%, var(--surface)) !important;
    border: none !important;
    border-left: 3px solid var(--type-color) !important;
    border-radius: 6px;
    box-shadow: none;
    cursor: pointer;
}

.cal-grid .fc-timegrid-event:hover,
.cal-grid .fc-daygrid-block-event:hover {
    background: color-mix(in srgb, var(--type-color) 24%, var(--surface)) !important;
}

.cal-grid .fc-timegrid-event-harness-inset .fc-timegrid-event {
    box-shadow: 0 0 0 1.5px var(--surface);
}

.cal-grid .fc-event .fc-event-main {
    color: var(--text);
    padding: 3px 6px;
}

.cal-ev-time-grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    line-height: 1.25;
}

.cal-ev-time {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.cal-ev-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cal-ev-sub {
    font-size: 0.7rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-ev-flag {
    align-self: flex-start;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--muted);
}

/* Short (30 min or less) appointments: time + title on one line so nothing spills out.
   .cal-ev-compact is set by crm-calendar.js from the duration; FullCalendar's own -short class
   only kicks in for even tinier events. */
.cal-grid .cal-ev-compact .cal-ev-time-grid,
.cal-grid .fc-timegrid-event-short .cal-ev-time-grid {
    flex-direction: row;
    gap: 5px;
    align-items: baseline;
}

.cal-grid .cal-ev-compact .cal-ev-title,
.cal-grid .fc-timegrid-event-short .cal-ev-title {
    -webkit-line-clamp: 1;
}

.cal-grid .cal-ev-compact .cal-ev-sub,
.cal-grid .cal-ev-compact .cal-ev-flag,
.cal-grid .fc-timegrid-event-short .cal-ev-sub,
.cal-grid .fc-timegrid-event-short .cal-ev-flag {
    display: none;
}

.calendar-event-cancelled {
    opacity: 0.6;
}

.calendar-event-cancelled .cal-ev-title,
.calendar-event-cancelled .cal-ev-list strong {
    text-decoration: line-through;
}

/* Month: compact "● 09:00 Title" rows, today's date as a pill. */
.cal-grid .fc-daygrid-day-top {
    flex-direction: row;
    justify-content: flex-start;
    padding: 4px 6px 0;
}

.cal-grid .fc-daygrid-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

.cal-grid .fc-day-today .fc-daygrid-day-number {
    background: var(--primary-600);
    color: #fff;
}

.cal-grid .fc-day-other .fc-daygrid-day-number {
    color: var(--gray-400);
}

.cal-grid .fc-daygrid-dot-event {
    padding: 2px 4px;
    border-radius: 5px;
    cursor: pointer;
}

.cal-grid .fc-daygrid-dot-event:hover {
    background: var(--gray-100);
}

.cal-ev-month {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--text);
}

.cal-ev-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--type-color);
}

.cal-ev-month .cal-ev-time {
    flex-shrink: 0;
    font-size: 0.72rem;
}

.cal-ev-month .cal-ev-title {
    font-size: 0.75rem;
    font-weight: 600;
    -webkit-line-clamp: 1;
}

.cal-grid .fc-daygrid-more-link {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-ink);
    padding: 0 4px;
}

.cal-grid .fc-popover {
    background: var(--surface);
    border-color: var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

/* Agenda (list) view */
.cal-grid .fc-list {
    border-radius: var(--radius-md);
}

.cal-grid .fc-list-day-cushion {
    background: var(--gray-100);
    padding: 8px 14px;
    font-size: 0.8rem;
}

.cal-grid .fc-list-day-text,
.cal-grid .fc-list-day-side-text {
    color: var(--text);
    font-weight: 800;
    text-decoration: none;
}

.cal-grid .fc-list-day-side-text {
    color: var(--muted);
    font-weight: 600;
}

.cal-grid .fc-list-event td {
    padding: 10px 14px;
    border-color: var(--border);
}

.cal-grid .fc-list-event-time {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cal-grid .fc-list-event-dot {
    border-color: var(--type-color);
}

.cal-ev-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cal-ev-list strong {
    font-weight: 700;
    color: var(--text);
}

.cal-ev-list span {
    font-size: 0.78rem;
    color: var(--muted);
}

.cal-grid .fc-list-empty {
    background: transparent;
    color: var(--muted);
}

/* Upcoming side panel */
.cal-side {
    position: sticky;
    top: 84px;
}

.cal-side-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.cal-side-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.cal-side-stats div {
    background: var(--primary-tint-bg);
    border-radius: var(--radius-md);
    padding: 10px 12px;
}

.cal-side-stats strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--primary-ink-strong);
}

.cal-side-stats span {
    font-size: 0.75rem;
    color: var(--muted);
}

.cal-side-title {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.cal-side-day + .cal-side-day {
    margin-top: 12px;
}

.cal-side-day-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text);
}

.cal-side-day-label em {
    font-style: normal;
    font-weight: 500;
    color: var(--muted);
    margin-left: 4px;
}

.cal-side-item {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--type-color);
    background: color-mix(in srgb, var(--type-color) 8%, var(--surface));
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s ease;
}

.cal-side-item:hover {
    background: color-mix(in srgb, var(--type-color) 16%, var(--surface));
}

.cal-side-time {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 42px;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cal-side-time small {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--muted);
}

.cal-side-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cal-side-body strong {
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.3;
}

.cal-side-body > span {
    font-size: 0.75rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-side-loc,
.cal-side-agent {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.cal-side-loc .icon,
.cal-side-agent .icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.cal-side-empty {
    text-align: center;
    padding: 18px 8px;
    color: var(--muted);
    font-size: 0.85rem;
}

.cal-side-empty .icon {
    width: 28px;
    height: 28px;
    opacity: 0.6;
}

.cal-side-empty p {
    margin: 6px 0;
}

@media (max-width: 1180px) {
    .cal-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .cal-side {
        position: static;
    }

    .cal-side-card {
        max-height: none;
    }
}

/* Phones: Agenda is the default view, the grid grows with its content, and the toolbar stacks. */
@media (max-width: 719px) {
    .cal-main {
        padding: 12px 10px 8px;
        border-radius: var(--radius-md);
    }

    .cal-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .cal-nav {
        flex-wrap: wrap;
    }

    .cal-title {
        flex-basis: 100%;
        order: -1;
        margin: 0 0 4px;
        font-size: 1.05rem;
        white-space: normal;
    }

    .cal-views {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .cal-views .cal-view-desktop {
        display: none;
    }

    .cal-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .cal-filters .cal-filter {
        flex-shrink: 0;
    }

    .cal-grid {
        height: auto;
        min-height: 0;
    }

    .cal-side {
        display: none;
    }

    .cal-page-header .btn {
        width: 100%;
    }
}

/* Agenda day heading: "Monday  21 September  [Today]" */
.cal-grid .fc-list-day-cushion {
    text-align: left;
}

.cal-list-day {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text);
}

.cal-list-day em {
    font-style: normal;
    font-weight: 500;
    color: var(--muted);
}

.cal-list-today {
    padding: 1px 8px;
    border-radius: var(--radius-full);
    background: var(--primary-600);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---------- New / Edit Appointment (calendar/form.php + assets/js/appointment-form.js) ---------- */

.crm-content .container.appt-page {
    max-width: 1080px;
}

.appt-page-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 16px;
}

.appt-status {
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--primary-tint-bg);
    color: var(--primary-ink-strong);
}

.appt-status-completed { background: var(--success-bg); color: var(--success-text); }
.appt-status-cancelled { background: var(--gray-100); color: var(--muted); }

.appt-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

.appt-form [hidden] {
    display: none !important;
}

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

.appt-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
}

/* Without this a card grows to its widest child (the scrolling date strip) instead of scrolling it. */
.appt-card {
    min-width: 0;
}

.appt-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px 6px;
}

.appt-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 800;
}

.appt-card-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-tint-bg);
    color: var(--primary-ink);
    font-size: 0.78rem;
}

.appt-optional {
    margin-left: 4px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gray-400);
}

/* Type cards */
.appt-types {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.appt-type {
    position: relative;
    cursor: pointer;
}

.appt-type input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.appt-type-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    padding: 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.appt-type:hover .appt-type-card {
    border-color: color-mix(in srgb, var(--type-color) 50%, var(--border));
}

.appt-type input:checked + .appt-type-card {
    border-color: var(--type-color);
    background: color-mix(in srgb, var(--type-color) 9%, var(--surface));
    box-shadow: 0 0 0 1px var(--type-color);
}

.appt-type input:focus-visible + .appt-type-card {
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.appt-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--type-color) 14%, var(--surface));
    color: var(--type-color);
}

.appt-type-icon .icon {
    width: 16px;
    height: 16px;
}

.appt-type-card strong {
    font-size: 0.88rem;
    color: var(--text);
}

.appt-type-card small {
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--muted);
}

/* When */
.appt-when {
    padding-bottom: 14px;
}

.appt-when-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.appt-form .appt-pick-date,
.appt-form .appt-pick-date:hover {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: none;
    color: var(--primary-ink);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.appt-form .appt-pick-date:hover,
.appt-form .appt-pick-date.is-open {
    border-color: var(--primary-500);
    background: var(--primary-tint-bg);
}

.appt-pick-date .icon {
    width: 14px;
    height: 14px;
}

/* Month picker: on desktop a pop-over anchored under the "Pick a date" button, floating over
   the time grid rather than pushing it down; on phones it opens inline, full width. */
.appt-when {
    position: relative;
}

.appt-month {
    position: absolute;
    z-index: 25;
    top: 34px;
    right: 0;
    width: 340px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    animation: appt-month-in 0.14s ease-out;
}

@keyframes appt-month-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

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

.appt-month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.appt-month-head strong {
    font-size: 0.98rem;
    font-weight: 800;
}

.appt-form .appt-month-nav,
.appt-form .appt-month-nav:hover {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    box-shadow: none;
    color: var(--text);
}

.appt-form .appt-month-nav:hover {
    background: var(--gray-100);
}

.appt-form .appt-month-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent;
}

.appt-month-nav .icon {
    width: 16px;
    height: 16px;
}

.appt-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.appt-month-dow {
    padding: 4px 0 6px;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.appt-form .appt-month-day,
.appt-form .appt-month-day:hover {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    min-height: 38px;
    padding: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1.5px solid transparent;
    box-shadow: none;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.appt-form .appt-month-day:hover {
    background: var(--primary-tint-bg);
    border-color: var(--primary-tint-border);
}

.appt-form .appt-month-day.is-sunday {
    color: var(--muted);
}

.appt-form .appt-month-day.is-today {
    border-color: var(--primary-500);
    color: var(--primary-ink);
    font-weight: 800;
}

.appt-form .appt-month-day.is-selected,
.appt-form .appt-month-day.is-selected:hover {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
    font-weight: 800;
}

.appt-form .appt-month-day:disabled,
.appt-form .appt-month-day:disabled:hover {
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent;
    border-color: transparent;
}

.appt-form .appt-month-day:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* A small dot under days the agent already has bookings on. */
.appt-month-day.has-bookings::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: var(--accent-500);
}

.appt-month-day.is-selected.has-bookings::after {
    background: #fff;
}

.appt-month-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.appt-month-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--muted);
}

.appt-month-key i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-500);
}

.appt-form .appt-month-today,
.appt-form .appt-month-today:hover {
    padding: 5px 14px;
    border-radius: var(--radius-full);
    background: transparent;
    border: 1px solid var(--border);
    box-shadow: none;
    color: var(--primary-ink);
    font-size: 0.8rem;
    font-weight: 700;
}

.appt-form .appt-month-today:hover {
    background: var(--primary-tint-bg);
}

@media (max-width: 560px) {
    .appt-month {
        position: static;
        width: auto;
        margin: 0 0 12px;
        padding: 12px 10px;
        box-shadow: var(--shadow-md);
    }

    .appt-form .appt-month-day,
    .appt-form .appt-month-day:hover {
        min-height: 42px;
        font-size: 0.95rem;
    }
}

.appt-dates {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    margin-bottom: 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.appt-form .appt-date,
.appt-form .appt-date:hover {
    flex: 0 0 auto;
    flex-direction: column;
    gap: 1px;
    width: 58px;
    padding: 7px 0;
    scroll-snap-align: start;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--text);
    box-shadow: none;
    line-height: 1.15;
}

.appt-form .appt-date:hover {
    border-color: var(--primary-500);
}

.appt-date span {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.appt-date strong {
    font-size: 1.15rem;
    font-weight: 800;
}

.appt-form .appt-date.is-sunday {
    background: var(--gray-50);
}

.appt-form .appt-date.is-selected,
.appt-form .appt-date.is-selected:hover {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}

.appt-date.is-selected span {
    color: rgba(255, 255, 255, 0.85);
}

.appt-times {
    display: grid;
    gap: 10px;
}

.appt-time-group {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.appt-time-group-label {
    padding-top: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
}

.appt-time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
    gap: 6px;
}

.appt-form .appt-time,
.appt-form .appt-time:hover {
    padding: 7px 0;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--text);
    box-shadow: none;
    font-size: 0.84rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.appt-form .appt-time:hover {
    border-color: var(--primary-500);
    background: var(--primary-tint-bg);
}

.appt-form .appt-time.is-busy {
    background: repeating-linear-gradient(135deg, var(--gray-100) 0 6px, var(--surface) 6px 12px);
    color: var(--muted);
    border-style: dashed;
}

.appt-form .appt-time.is-past,
.appt-form .appt-time.is-past:hover {
    opacity: 0.35;
    cursor: not-allowed;
    background: var(--surface);
    border-color: var(--border);
}

.appt-form .appt-time.is-selected,
.appt-form .appt-time.is-selected:hover {
    background: var(--primary-600);
    border-color: var(--primary-600);
    border-style: solid;
    color: #fff;
}

.appt-busy-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.appt-busy-key i {
    display: inline-block;
    width: 22px;
    height: 12px;
    border-radius: 3px;
    border: 1.5px dashed var(--border);
    background: repeating-linear-gradient(135deg, var(--gray-100) 0 4px, var(--surface) 4px 8px);
}

.appt-custom-time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 10px 0 6px;
    font-size: 0.8rem;
    color: var(--muted);
}

.appt-custom-time input {
    width: auto;
    padding: 6px 10px;
}

.appt-durations {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.appt-form .appt-chip,
.appt-form .appt-chip:hover {
    padding: 7px 14px;
    border-radius: var(--radius-full);
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--text);
    box-shadow: none;
    font-size: 0.84rem;
    font-weight: 600;
}

.appt-form .appt-chip:hover {
    border-color: var(--primary-500);
}

.appt-form .appt-chip.is-selected,
.appt-form .appt-chip.is-selected:hover {
    background: var(--primary-tint-bg);
    border-color: var(--primary-500);
    color: var(--primary-ink);
}

.appt-when-result {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--primary-tint-bg);
    border: 1px solid var(--primary-tint-border);
    color: var(--text);
    font-size: 0.9rem;
}

.appt-when-result span {
    font-weight: 600;
}

.appt-when-result strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.appt-when-result input {
    width: auto;
    padding: 4px 8px;
    font-weight: 700;
}

.appt-when-result em {
    margin-left: auto;
    font-style: normal;
    font-weight: 700;
    color: var(--primary-ink);
}

/* Who & where */
.appt-contact {
    margin: -2px 0 14px;
}

.appt-contact summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-ink);
    list-style: none;
}

.appt-contact summary::-webkit-details-marker {
    display: none;
}

.appt-contact summary .icon {
    width: 15px;
    height: 15px;
}

.appt-contact[open] summary .icon {
    transform: rotate(45deg);
}

.appt-contact .meta {
    margin: 6px 0 10px;
    font-size: 0.8rem;
}

.appt-input-icon {
    position: relative;
}

.appt-input-icon .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--muted);
    pointer-events: none;
}

.appt-input-icon input {
    padding-left: 36px;
}

/* Colleague chips */
.appt-people {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.appt-person {
    position: relative;
    margin: 0 !important;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.appt-person input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.appt-person > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text);
}

.appt-person > span > .icon {
    display: none;
    width: 14px;
    height: 14px;
    color: var(--primary-ink);
}

.appt-person input:checked + span {
    border-color: var(--primary-500);
    background: var(--primary-tint-bg);
}

.appt-person input:checked + span > .icon {
    display: inline-block;
}

.appt-person input:focus-visible + span {
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.appt-person .avatar-sm {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
}

/* Summary side card */
.appt-side {
    position: sticky;
    top: 84px;
    display: grid;
    gap: 12px;
}

.appt-summary,
.appt-manage {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    display: grid;
    gap: 10px;
}

.appt-summary {
    border-top: 4px solid var(--type-color);
}

.appt-summary-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.appt-type-pill {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--type-color) 14%, var(--surface));
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 700;
}

.appt-type-pill .icon {
    width: 13px;
    height: 13px;
    color: var(--type-color);
}

.appt-summary-title {
    font-size: 1.02rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.appt-facts {
    display: grid;
    gap: 8px;
    margin: 0 0 4px;
}

.appt-facts dt {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.appt-facts dt .icon {
    width: 12px;
    height: 12px;
}

.appt-facts dd {
    margin: 2px 0 0;
    font-size: 0.86rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.appt-conflict {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--warning-bg);
    color: var(--warning-text);
    font-size: 0.8rem;
    line-height: 1.35;
}

.appt-conflict .icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.appt-manage .block {
    justify-content: flex-start;
}

/* Read-only view for invited colleagues */
.appt-readonly {
    max-width: 640px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--type-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
}

.appt-readonly h2 {
    margin: 10px 0 14px;
    font-size: 1.3rem;
}

@media (max-width: 900px) {
    .appt-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .appt-side {
        position: static;
    }

    .appt-types {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .appt-card {
        padding: 16px 14px 4px;
    }

    .appt-form .row {
        grid-template-columns: minmax(0, 1fr);
    }

    .appt-time-group {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .appt-time-group-label {
        padding-top: 0;
    }

    .appt-time-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .appt-type-card small {
        display: none;
    }

    .appt-when-result em {
        margin-left: 0;
    }
}

.appt-when-result.has-clash {
    background: var(--warning-bg);
    border-color: #fde68a;
}

.appt-clash-inline {
    flex-basis: 100%;
    margin: 2px 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--warning-text);
}

/* "This would double-book…" warning with Book anyway / Choose another time */
.appt-clash-panel {
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    border: 1px solid #fcd34d;
    background: var(--warning-bg);
    color: var(--text);
}

.appt-clash-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--warning-text);
    font-size: 0.98rem;
}

.appt-clash-head .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.appt-clash-panel p {
    margin: 8px 0 6px;
    font-size: 0.88rem;
}

.appt-clash-list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.appt-clash-list li {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.86rem;
}

.appt-clash-role {
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.appt-clash-time {
    color: var(--muted);
    white-space: nowrap;
}

.appt-clash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.appt-clash-actions .appt-book-anyway,
.appt-clash-actions .appt-book-anyway:hover {
    background: var(--warning-text);
    border-color: var(--warning-text);
    color: #fff;
}

:root[data-theme="dark"] .appt-clash-actions .appt-book-anyway {
    color: #1c1405;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .appt-clash-actions .appt-book-anyway {
        color: #1c1405;
    }
}

/* Placed after the base .kanban-* rules on purpose: at equal specificity the later rule wins,
   and these must override the desktop board's column header, actions and scroll boxes. */
/* Phones: stage tabs + one full-height list per stage (no board-in-a-box scrolling), compact
   cards with Call / WhatsApp / "⋯", and a bottom sheet for the rest (see inbox/leads.php).
   Drag-and-drop doesn't exist on touch browsers, so nothing is lost by dropping the board. */
@media (max-width: 700px) {
    .kanban-page-actions {
        width: 100%;
    }

    .kanban-page-actions .btn {
        flex: 1;
    }

    .kanban-tabs {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        margin: 0 -16px 12px;
        padding: 2px 16px 6px;
        scrollbar-width: none;
        position: sticky;
        top: 60px;
        z-index: 5;
        background: var(--bg);
    }

    .kanban-tabs::-webkit-scrollbar {
        display: none;
    }

    .kanban-tabs .kanban-tab,
    .kanban-tabs .kanban-tab:hover {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: var(--radius-full);
        background: var(--surface);
        border: 1.5px solid var(--border);
        box-shadow: none;
        color: var(--muted);
        font-size: 0.85rem;
        font-weight: 700;
    }

    .kanban-tabs .kanban-tab.is-active {
        background: var(--primary-600);
        border-color: var(--primary-600);
        color: #fff;
    }

    .kanban-tab-count {
        min-width: 20px;
        padding: 1px 6px;
        border-radius: var(--radius-full);
        background: var(--gray-100);
        color: var(--muted);
        font-size: 0.72rem;
        text-align: center;
    }

    .kanban-tab.is-active .kanban-tab-count {
        background: rgba(255, 255, 255, 0.22);
        color: #fff;
    }

    .kanban-board {
        display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
        padding-bottom: 0;
    }

    .kanban-column {
        display: none;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .kanban-column.is-active-stage {
        display: block;
    }

    /* The tabs already name the stage and its count. */
    .kanban-column-header {
        display: none;
    }

    .kanban-column-body {
        overflow: visible;
        padding: 0;
        gap: 8px;
    }

    .kanban-column-body .empty-hint {
        padding: 40px 8px;
        background: var(--surface);
        border: 1px dashed var(--border);
        border-radius: var(--radius-md);
    }

    .kanban-card {
        background: var(--surface);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        padding: 12px;
        gap: 10px;
        cursor: default;
    }

    .kanban-card-top strong {
        font-size: 0.95rem;
    }

    .kanban-card-when {
        display: inline;
        margin-left: auto;
        flex-shrink: 0;
        font-size: 0.75rem;
        color: var(--muted);
    }

    .kanban-card-top .type-pill {
        flex-shrink: 0;
    }

    /* Call/WhatsApp buttons replace the raw number/email lines; the date moves into the corner. */
    .kanban-card-contact,
    .kanban-card-date,
    .kanban-card-actions {
        display: none;
    }

    .kanban-card-about,
    .kanban-card-notes {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.84rem;
    }

    .kanban-card-quick {
        display: flex;
        gap: 6px;
    }

    .kanban-quick-btn,
    .kanban-card-quick .kanban-quick-btn:hover {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 40px;
        padding: 0 10px;
        border-radius: var(--radius-sm);
        border: 1.5px solid var(--border);
        background: var(--surface);
        box-shadow: none;
        color: var(--text);
        font-size: 0.85rem;
        font-weight: 700;
    }

    .kanban-quick-btn .icon {
        width: 17px;
        height: 17px;
        color: var(--primary-ink);
    }

    .kanban-quick-wa .icon {
        color: #25d366;
    }

    .kanban-card-quick .kanban-quick-more,
    .kanban-card-quick .kanban-quick-more:hover {
        flex: 0 0 44px;
        padding: 0;
        font-size: 1.3rem;
        line-height: 1;
        color: var(--muted);
    }
}

/* ---------- Admin listings import (Pending Listings → Import listings) ---------- */
.import-row-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.import-photo-pill { background: var(--gray-100); color: var(--gray-700); }
.import-photo-pill.none { background: var(--warning-bg); color: var(--warning-text); }
.import-waiting {
    margin-top: 22px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 4px 14px 10px;
    background: var(--surface);
}
.import-waiting > summary {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    list-style: none;
}
.import-waiting > summary::-webkit-details-marker { display: none; }
.import-waiting > summary > span:first-child::before { content: '▸ '; color: var(--muted); }
.import-waiting[open] > summary > span:first-child::before { content: '▾ '; }
.import-history-title { font-size: 1.05rem; margin: 28px 0 10px; }
.import-history .data-table { width: 100%; }

.import-modal-box { max-width: 560px; }
.import-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.import-modal-head h3 { margin: 0; }
.import-modal-head button {
    background: none;
    border: 0;
    padding: 6px;
    color: var(--muted);
    box-shadow: none;
    min-height: 0;
}
.import-modal-head button .icon { width: 20px; height: 20px; }
.import-step { display: flex; gap: 12px; margin: 16px 0; transition: opacity .15s; }
.import-step[data-disabled] { opacity: .45; }
.import-step-num {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 800;
    background: var(--primary-tint-bg);
    color: var(--primary-ink-strong);
}
.import-step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.import-step-body label { font-weight: 700; }
.import-step-body .meta a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.import-step-body .meta a .icon { width: 14px; height: 14px; }
.import-agency-results {
    margin-top: 6px;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.import-agency-option {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    width: 100%;
    text-align: left;
    background: var(--surface);
    color: var(--text);
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 10px 12px;
    box-shadow: none;
    font-weight: 400;
    min-height: 0;
}
.import-agency-option:last-child { border-bottom: 0; }
.import-agency-option:hover, .import-agency-option:focus-visible { background: var(--primary-tint-bg); color: var(--text); }
.import-agency-option strong { flex: 1 1 auto; }
.import-agency-option .meta { flex-basis: 100%; font-size: 0.8rem; }
.import-agency-empty { padding: 12px; margin: 0; }
.import-unverified {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--warning-bg);
    color: var(--warning-text);
}
.import-agency-chosen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--primary-500);
    border-radius: var(--radius-md);
    background: var(--primary-tint-bg);
}
.import-agency-chosen[hidden], #import-agency-picker[hidden] { display: none; }
.import-modal-box button[type=submit]:disabled { opacity: .5; cursor: not-allowed; }
.import-agency-chosen > div { display: flex; flex-direction: column; min-width: 0; }
.import-agency-chosen .meta { font-size: 0.8rem; }
.import-agency-chosen .btn { flex-shrink: 0; padding: 6px 12px; }

.import-summary-card {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
    margin: 12px 0 14px;
}
.import-summary-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.import-summary-who strong { font-size: 1.15rem; }
.import-summary-who .import-unverified { margin-top: 6px; white-space: normal; }
.import-summary-stats { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 10px; }
.import-stat-warn { border-color: var(--warning-text); }
.import-columns { margin-bottom: 14px; }
.import-columns summary { cursor: pointer; font-weight: 600; color: var(--gray-600); }
.import-columns ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 6px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 16px;
    font-size: 0.85rem;
}
.import-columns li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted var(--border); padding: 3px 0; }
.import-preview-table td { font-size: 0.88rem; white-space: normal; }
.import-preview-table td:nth-child(2) { min-width: 200px; }
.import-preview-table td:nth-child(3) { white-space: nowrap; }
.import-preview-table td:nth-child(5) { min-width: 150px; }
.import-history .data-table td { white-space: normal; }
.import-preview-table tr.import-row-error td { background: var(--danger-bg); }
.import-notes { min-width: 220px; }
.import-note { display: flex; gap: 6px; align-items: flex-start; font-size: 0.8rem; line-height: 1.35; margin-bottom: 3px; }
.import-note .icon { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 2px; }
.import-note.error { color: var(--danger-text); font-weight: 600; }
.import-note.warn { color: var(--warning-text); }
.import-note.ok { color: var(--success-text); font-weight: 700; }
.import-confirm-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 0;
    margin-top: 12px;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

/* Agency side: imported listings waiting for photos */
.import-photos-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-top: 16px;
    border-radius: var(--radius-md);
    background: var(--warning-bg);
    color: var(--warning-text);
}
.import-photos-banner > .icon { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; }
.import-photos-banner div { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.import-needs-photos { display: flex; align-items: center; gap: 4px; color: var(--warning-text) !important; font-weight: 600; margin-top: 4px; }
.import-needs-photos .icon { width: 14px; height: 14px; }
.import-needs-photos-hint {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--warning-bg);
    color: var(--warning-text);
    font-size: 0.9rem;
}
.import-needs-photos-hint .icon { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }

@media (max-width: 640px) {
    .import-modal-box { padding: 18px 16px; }
    .import-summary-stats { width: 100%; grid-template-columns: repeat(3, 1fr); }
    .import-summary-stats .demo-stat { padding: 10px; }
    .import-summary-stats .demo-stat strong { font-size: 1.2rem; }
    .import-notes { min-width: 0; }
}

.map-approximate-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}
.map-approximate-note .icon { width: 15px; height: 15px; flex: 0 0 15px; }

/* ---------- Admin → Savings Calculator (demo tool) ---------- */
.sc-header { align-items: flex-start; }
.sc-header .meta { margin: 4px 0 0; max-width: 620px; }
.sc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin-top: 16px;
    align-items: start;
}
.sc-inputs, .sc-results { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sc-results { position: sticky; top: 76px; }
.sc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 18px;
}
.sc-card-title { display: flex; align-items: center; gap: 10px; font-size: 1rem; margin: 0 0 14px; }
.sc-card .field { margin-bottom: 12px; }
.sc-card .field:last-child { margin-bottom: 0; }
.sc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-preset {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 7px 14px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: none;
    min-height: 0;
}
.sc-preset:hover { background: var(--primary-tint-bg); color: var(--text); }
.sc-preset.active { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.sc-preset-note { margin: 8px 0 14px; font-size: 0.8rem; min-height: 1em; }
.sc-cost-line .meta { display: block; font-size: 0.76rem; margin-top: 3px; }
.sc-money-input { display: flex; align-items: stretch; }
.sc-money-input span {
    display: grid;
    place-items: center;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--gray-100);
    color: var(--muted);
    font-weight: 700;
}
.sc-money-input input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; min-width: 0; }
.sc-portal-note { display: flex; gap: 6px; align-items: flex-start; font-size: 0.8rem; margin: 14px 0 0; }
.sc-portal-note .icon { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; color: var(--warning-text); }
.sc-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.sc-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 10px 10px;
    box-shadow: none;
    font-weight: 400;
    min-height: 0;
}
.sc-plan:hover { background: var(--primary-tint-bg); color: var(--text); }
.sc-plan.active { border-color: var(--primary-600); background: var(--primary-tint-bg); box-shadow: 0 0 0 1px var(--primary-600); }
.sc-plan strong { font-size: 0.9rem; }
.sc-plan-price { font-size: 1.15rem; font-weight: 800; }
.sc-plan-price small { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.sc-plan .meta { font-size: 0.72rem; line-height: 1.3; }
.sc-plan-tag {
    position: absolute;
    top: -9px;
    right: 8px;
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    background: var(--accent-600);
    color: #fff;
}
.sc-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; margin-top: 6px; cursor: pointer; }
.sc-toggle input { width: auto; margin: 0; }

.sc-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 18px;
    background: linear-gradient(135deg, var(--primary-700), var(--primary-500));
    border: 0;
    color: #fff;
}
.sc-hero-label { font-size: 0.9rem; font-weight: 700; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.05em; }
.sc-hero-value { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 900; line-height: 1.1; margin: 4px 0; font-variant-numeric: tabular-nums; }
.sc-hero-sub { font-size: 0.9rem; opacity: 0.9; }
.sc-hero.negative { background: linear-gradient(135deg, #7c2d12, #b45309); }
.sc-hero.empty .sc-hero-value { opacity: 0.45; }
.sc-compare-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; margin-top: 10px; }
.sc-compare-row:first-child { margin-top: 0; }
.sc-compare-row strong { font-variant-numeric: tabular-nums; }
.sc-bar { height: 12px; border-radius: var(--radius-full); background: var(--gray-100); margin-top: 6px; overflow: hidden; }
.sc-bar-fill { display: block; height: 100%; border-radius: var(--radius-full); transition: width .25s ease; }
.sc-bar-fill.now { background: var(--gray-500, #6b7280); }
.sc-bar-fill.erf { background: var(--primary-500); }
.sc-per { margin: 8px 0 0; font-size: 0.78rem; }
.sc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.sc-stats div { background: var(--primary-tint-bg); border-radius: var(--radius-md); padding: 10px 12px; }
.sc-stats dt { font-size: 0.74rem; color: var(--muted); font-weight: 600; }
.sc-stats dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 800; color: var(--primary-ink-strong); font-variant-numeric: tabular-nums; }
.sc-stats dd.neg { color: var(--danger-text); }
.sc-warning {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--warning-bg);
    color: var(--warning-text);
    font-size: 0.85rem;
}
.sc-included-title { margin: 0 0 10px; font-size: 0.95rem; }
.sc-included { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; font-size: 0.88rem; }
.sc-included li { display: flex; gap: 8px; align-items: flex-start; }
.sc-included .icon { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; color: var(--success); }
.sc-settings { margin-top: 22px; }
.sc-settings summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; }
.sc-settings summary .icon { width: 18px; height: 18px; }
.sc-set-group { margin: 18px 0 0; }
.sc-set-group + .sc-set-group { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.sc-set-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 10px; }
.sc-set-head h3 { margin: 0; font-size: 0.98rem; }
.sc-set-head .meta { margin: 0; font-size: 0.82rem; }
/* One 4-column grid for both groups, so agency and franchise cards line up column for column. */
.sc-set-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sc-set-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.sc-set-card h4 { margin: 0; font-size: 0.92rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-set-card .meta { margin: 0; font-size: 0.78rem; }
.sc-set-card input:disabled { color: var(--muted); cursor: not-allowed; }
.sc-settings .actions { margin-top: 16px; }
@media (max-width: 1000px) { .sc-set-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sc-set-cards { grid-template-columns: minmax(0, 1fr); } }
.sc-settings label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 600; }
.sc-print-only { display: none; }

@media (max-width: 900px) {
    .sc-grid { grid-template-columns: minmax(0, 1fr); }
    .sc-results { position: static; order: -1; }
}
@media (max-width: 520px) {
    .sc-plans { grid-template-columns: minmax(0, 1fr); }
    .sc-stats { grid-template-columns: minmax(0, 1fr); }
    .sc-stats div { display: flex; justify-content: space-between; align-items: baseline; }
}

@media print {
    body:has(.sc-page) .crm-sidebar,
    body:has(.sc-page) .crm-topbar,
    body:has(.sc-page) .crm-sidebar-backdrop,
    .sc-page .sc-inputs,
    .sc-page .sc-settings,
    .sc-page .sc-header,
    .sc-page .flash { display: none !important; }
    body:has(.sc-page) { background: #fff !important; }
    .sc-page .sc-grid { display: block; margin: 0; }
    .sc-page .sc-results { position: static; }
    .sc-page .sc-card { box-shadow: none; break-inside: avoid; margin-bottom: 14px; }
    .sc-page .sc-print-only { display: block; }
    .sc-page .sc-print-brand { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px solid #0b544e; padding-bottom: 8px; margin-bottom: 16px; }
    .sc-page .sc-print-wm { font-size: 1.4rem; font-weight: 800; color: #0b544e; letter-spacing: -0.5px; }
    .sc-page .sc-print-wm span { color: #f97316; }
    .sc-page .sc-print-tag { text-transform: uppercase; letter-spacing: 1px; font-size: 0.72rem; color: #5d6b6a; }
    .sc-page .sc-hero, .sc-page .sc-bar-fill, .sc-page .sc-stats div { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- System Health → Backups ---------- */
.backup-card { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.backup-status {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--success-bg);
    color: var(--success-text);
}
.backup-status.bad { background: var(--danger-bg); color: var(--danger-text); }
.backup-status.running { background: var(--primary-tint-bg); color: var(--primary-ink-strong); }
.backup-status > .icon { flex: 0 0 26px; width: 26px; height: 26px; }
.backup-status > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.backup-status > div span { font-size: 0.85rem; opacity: 0.9; }
.backup-status form { flex-shrink: 0; }
.backup-offsite-nudge {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--warning-bg);
    color: var(--warning-text);
    font-size: 0.88rem;
}
.backup-offsite-nudge .icon { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; }
.btn-sm-inline { padding: 6px 12px; font-size: 0.82rem; display: inline-flex; align-items: center; gap: 6px; }
.btn-sm-inline .icon { width: 14px; height: 14px; }
.btn-sm { padding: 6px 12px; font-size: 0.82rem; }
.btn-sm .icon { width: 14px; height: 14px; }

/* Admin: per-user password reset (a support tool — sets a new password, never reveals the old). */
.admin-pw-reset { position: relative; }
.admin-pw-reset > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.admin-pw-reset > summary::-webkit-details-marker { display: none; }
.admin-pw-reset > summary .icon { width: 15px; height: 15px; }
.admin-pw-reset-form {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: var(--surface, #fff);
    max-width: 320px;
}
.admin-pw-reset-form input[type="text"] { padding: 8px 10px; }
.admin-pw-reset-form .meta { margin: 0; }

/* Owner-only editor: which admin sections a staff admin can open. */
.admin-perm-edit { position: relative; }
.admin-perm-edit > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.admin-perm-edit > summary::-webkit-details-marker { display: none; }
.admin-perm-edit > summary .icon { width: 15px; height: 15px; }
.admin-perm-form {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: var(--surface, #fff);
    box-shadow: var(--shadow-md);
    max-width: 340px;
}
.admin-perm-form .meta { margin: 0 0 6px; }
.admin-perm-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}
.admin-perm-option:hover { background: var(--primary-tint-bg, rgba(120,140,160,0.08)); }
.admin-perm-option input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--primary-600); }
.admin-perm-option .icon { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.admin-perm-form button { margin-top: 8px; align-self: flex-start; }

/* Franchise head office <-> branch messaging */
.fmsg-list { display: flex; flex-direction: column; }
.fmsg-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 6px; border-bottom: 1px solid var(--border, #e2e8f0);
    text-decoration: none; color: inherit;
}
.fmsg-row:last-child { border-bottom: none; }
.fmsg-row:hover { background: var(--surface-2, rgba(148,163,184,0.08)); }
.fmsg-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fmsg-row-main .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60ch; }
.fmsg-row.unread .fmsg-row-main strong { font-weight: 700; }
.fmsg-row-time { flex: 0 0 auto; }
.fmsg-unread-badge, .fmsg-sender { font-size: 0.72rem; }
.fmsg-unread-badge {
    display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px;
    background: var(--primary-600, #0f766e); color: #fff; text-align: center; font-weight: 700;
}
.fmsg-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; max-height: 60vh; overflow-y: auto; padding: 4px; }
.fmsg-bubble-row { display: flex; justify-content: flex-start; }
.fmsg-bubble-row.mine { justify-content: flex-end; }
.fmsg-bubble {
    max-width: 78%; padding: 8px 12px; border-radius: 14px;
    background: var(--surface-2, #f1f5f9); display: flex; flex-direction: column; gap: 2px;
}

/* ---------- Back to top ---------- */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 60;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--primary-600);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(15, 118, 110, 0.35), 0 2px 6px rgba(23, 32, 35, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background 0.15s ease;
}
.back-to-top:hover { background: var(--primary-700, var(--primary-600)); }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top svg { width: 20px; height: 20px; }
@media (max-width: 680px) { .back-to-top { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); } }
.fmsg-bubble-row.mine .fmsg-bubble { background: var(--primary-600, #0f766e); color: #fff; }
.fmsg-sender { font-weight: 700; opacity: 0.85; }
.fmsg-body { white-space: pre-wrap; word-break: break-word; }
.fmsg-time { font-size: 0.7rem; opacity: 0.7; align-self: flex-end; }
.fmsg-compose { display: flex; gap: 8px; align-items: flex-end; }
.fmsg-compose textarea { flex: 1; resize: vertical; min-height: 44px; }
.backup-restore-help ol { margin: 10px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; }
.backup-restore-help code { font-size: 0.82rem; word-break: break-all; }
@media (max-width: 640px) {
    .backup-status { flex-wrap: wrap; }
    .backup-status form { width: 100%; }
    .backup-status form button { width: 100%; }
}

/* System Health → Errors */
.error-table td { white-space: normal; }
.error-table td:nth-child(2) { min-width: 260px; }
.error-table summary { cursor: pointer; font-weight: 600; word-break: break-word; }
.error-trace { margin: 8px 0 0; padding: 10px; background: var(--gray-100); border-radius: var(--radius-sm); font-size: 0.72rem; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-all; }

/* ---------- Admin → Launch Checklist ---------- */
.lc-page > .meta { max-width: 760px; }
.lc-progress-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 16px 18px; margin: 16px 0 22px; }
.lc-progress-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 10px; }
.lc-progress-top strong { font-size: 1.3rem; }
.lc-progress-bar { height: 12px; border-radius: var(--radius-full); background: var(--gray-100); overflow: hidden; }
.lc-progress-bar span { display: block; height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--primary-600), var(--primary-400, var(--primary-500))); }
.lc-heading { font-size: 1.05rem; margin: 22px 0 10px; }
.lc-heading .meta { font-weight: 500; font-size: 0.85rem; }
.lc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lc-item { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }
.lc-item.fail { border-left-color: var(--danger); }
.lc-item.warn { border-left-color: var(--warning-text); }
.lc-item.pass { border-left-color: var(--success); }
.lc-icon { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.lc-icon .icon { width: 15px; height: 15px; }
.lc-item.fail .lc-icon { background: var(--danger-bg); color: var(--danger-text); }
.lc-item.warn .lc-icon { background: var(--warning-bg); color: var(--warning-text); }
.lc-item.pass .lc-icon { background: var(--success-bg); color: var(--success-text); }
.lc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lc-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lc-badge { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: var(--radius-full); }
.lc-item.fail .lc-badge { background: var(--danger-bg); color: var(--danger-text); }
.lc-item.warn .lc-badge { background: var(--warning-bg); color: var(--warning-text); }
.lc-item.pass .lc-badge { background: var(--success-bg); color: var(--success-text); }
.lc-detail { font-size: 0.86rem; color: var(--muted); word-break: break-word; }
.lc-fix { font-size: 0.84rem; background: var(--gray-100); border-radius: var(--radius-sm); padding: 7px 10px; margin-top: 4px; word-break: break-word; }
.lc-fix code { font-size: 0.8rem; word-break: break-all; }
.lc-toggle-form { margin: 0; flex-shrink: 0; }
.lc-check { width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 7px; border: 2px solid var(--border); background: var(--surface); color: transparent; display: grid; place-items: center; box-shadow: none; cursor: pointer; }
.lc-check .icon { width: 15px; height: 15px; }
.lc-check:hover { border-color: var(--primary-500); background: var(--surface); }
.lc-item.manual.pass .lc-check { background: var(--success); border-color: var(--success); color: #fff; }
.lc-item.manual.pass .lc-body > strong { text-decoration: line-through; color: var(--muted); }

/* Admin → Agencies: plan controls */
.admin-plan-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.admin-plan-form select { width: auto; min-width: 140px; padding: 7px 10px; }

/* ---------- Agency → Plan & Billing ---------- */
.plan-current {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, var(--radius-md));
    box-shadow: var(--shadow-sm);
    padding: 20px 22px;
    margin: 14px 0 16px;
}
.plan-current.paid { border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-500), var(--shadow-sm); }
.plan-current.ending { border-color: var(--warning-text); box-shadow: 0 0 0 1px var(--warning-text), var(--shadow-sm); }
.plan-current-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.plan-current-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.plan-current-name { font-size: 1.6rem; font-weight: 900; line-height: 1.15; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plan-founding-badge { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: var(--radius-full); background: var(--accent-600); color: #fff; }
.plan-current-until { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--muted); }
.plan-current.ending .plan-current-until { color: var(--warning-text); font-weight: 600; }
.plan-current-until .icon { width: 16px; height: 16px; flex: 0 0 16px; }
.plan-usage { display: grid; grid-template-columns: minmax(180px, 240px); gap: 12px; }
.plan-usage > div { display: flex; flex-direction: column; gap: 3px; background: var(--primary-tint-bg); border-radius: var(--radius-md); padding: 10px 12px; min-width: 0; }
.plan-usage span:first-child { font-size: 0.74rem; color: var(--muted); font-weight: 600; }
.plan-usage strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.plan-meter { display: block; height: 6px; border-radius: var(--radius-full); background: var(--surface); overflow: hidden; margin-top: 3px; }
.plan-meter span { display: block; height: 100%; background: var(--primary-500); border-radius: var(--radius-full); }
.plan-renew-form { margin: 0; }
.plan-renew-form button { white-space: nowrap; }
.plan-pending { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.plan-pending form { margin: 0; }
.plan-heading { font-size: 1.15rem; margin: 26px 0 4px; }
.plan-heading-sub { margin: 0 0 14px; }
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 16px 16px;
    min-width: 0;
}
.plan-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.plan-card.current { border-color: var(--primary-500); background: var(--primary-tint-bg); }
.plan-card.recommended { border-color: var(--accent-600); box-shadow: 0 0 0 1px var(--accent-600); }
.plan-card.too-small { opacity: 0.6; }
.plan-card-flag { position: absolute; top: -10px; left: 14px; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: var(--radius-full); background: var(--accent-600); color: #fff; }
.plan-price { font-size: 1.6rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-left: 2px; }
.plan-incl-vat { margin: 2px 0 0; font-size: 0.78rem; color: var(--muted); }
.plan-limit { margin: 10px 0 0; font-size: 0.85rem; font-weight: 700; }
.plan-features { list-style: none; padding: 0; margin: 12px 0 14px; display: flex; flex-direction: column; gap: 7px; font-size: 0.84rem; flex: 1; }
.plan-features li { display: flex; gap: 7px; align-items: flex-start; }
.plan-features .icon { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; color: var(--success); }
.plan-features li.soon { color: var(--muted); }
.plan-features li.soon .icon { color: var(--muted); }
.plan-features li.excl { color: var(--muted); }
.plan-features li.excl .plan-excl-x { flex: 0 0 15px; width: 15px; text-align: center; margin-top: 1px; color: var(--muted); font-weight: 700; }
.plan-card form { margin: 0; }
.plan-card-status { display: block; text-align: center; font-size: 0.82rem; font-weight: 700; color: var(--primary-ink-strong); padding: 9px 0 2px; }
.plan-card-status.muted { color: var(--muted); font-weight: 600; }
.plan-switch-note { margin: 8px 0 0; font-size: 0.75rem; color: var(--muted); text-align: center; }
.plan-footnote { margin: 14px 0 0; max-width: 820px; }

@media (max-width: 1100px) {
    .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan-current { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .plan-renew-form { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .plan-grid { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
    .plan-current { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .plan-renew-form button { width: 100%; }
}

/* ---------- Demo sign-up: admin QR screen + public join pages ---------- */
.demo-header-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.demo-signup-form { display: flex; gap: 6px; align-items: center; margin: 0; }
.demo-signup-form select { width: auto; padding: 8px 10px; }
.demo-row-signed-up { display: inline-flex; align-items: center; gap: 5px; color: var(--success-text) !important; font-weight: 600; }
.demo-row-signed-up .icon { width: 15px; height: 15px; }

.invite-page { max-width: 760px; }
.invite-page:fullscreen { max-width: none; background: var(--bg); display: grid; place-items: center; padding: 24px; }
.invite-page:fullscreen .back-link, .invite-page:fullscreen .invite-fullscreen { display: none; }
.invite-stage, .invite-done {
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-sm);
    padding: 28px 20px;
    margin-top: 10px;
}
.invite-stage h1, .invite-done h1 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin: 0 0 6px; }
.invite-sub { color: var(--muted); margin: 0 0 18px; }
.invite-qr { width: min(340px, 78vw); aspect-ratio: 1; margin: 0 auto; background: #fff; border-radius: 16px; padding: 10px; box-sizing: border-box; }
.invite-qr svg { width: 100%; height: 100%; display: block; }
.invite-qr.unavailable { display: grid; place-items: center; color: #374151; font-size: 0.9rem; padding: 20px; aspect-ratio: auto; }
.invite-or { margin: 18px 0 6px; color: var(--muted); font-size: 0.92rem; }
.invite-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: clamp(2rem, 7vw, 3.2rem); font-weight: 800; letter-spacing: 0.12em; color: var(--primary-ink-strong); }
.invite-waiting { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 4px; font-weight: 600; }
.invite-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--primary-500); animation: invite-pulse 1.4s ease-in-out infinite; }
@keyframes invite-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .invite-pulse { animation: none; } }
.invite-expiry { margin: 4px 0 14px; }
.invite-fullscreen { display: inline-flex; align-items: center; gap: 6px; }
.invite-done-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 12px; background: var(--success-bg); color: var(--success-text); }
.invite-done-icon .icon { width: 34px; height: 34px; }
.invite-done-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.invite-done-actions .btn { display: inline-flex; align-items: center; gap: 6px; }

.join-page { display: flex; justify-content: center; padding-top: 12px; padding-bottom: 24px; }
.join-card { width: 100%; max-width: 480px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 24px 20px; }
.join-brand { font-weight: 900; font-size: 1.3rem; letter-spacing: -0.02em; margin-bottom: 10px; }
.join-brand span { color: var(--accent-600); }
.join-card h1 { font-size: 1.5rem; margin: 0 0 10px; }
.join-offer { display: flex; gap: 10px; align-items: flex-start; background: var(--primary-tint-bg); color: var(--primary-ink-strong); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.join-offer .icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; color: var(--accent-600); }
.join-offer div { display: flex; flex-direction: column; gap: 2px; }
.join-offer span { font-size: 0.86rem; }
.join-form fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.join-form legend { font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 8px; padding: 0; }
.join-form .field { margin-bottom: 12px; }
.join-form input { font-size: 16px; } /* 16px stops iPhones zooming in on focus */
.join-form .meta { display: block; font-size: 0.78rem; margin-top: 3px; }
.join-terms { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; margin: 4px 0 16px; cursor: pointer; }
.join-terms input { width: auto; margin-top: 3px; }
.join-submit { padding: 14px; font-size: 1rem; }
.join-foot { text-align: center; margin: 14px 0 0; font-size: 0.8rem; }
.join-code-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.join-code-form input { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.6rem; text-align: center; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- CRM dashboard → onboarding checklist ---------- */
.onboarding-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 18px 18px 8px; margin: 0 0 18px; }
.onboarding-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.onboarding-head h2 { font-size: 1.1rem; margin: 0 0 2px; }
.onboarding-head form { margin: 0; }
.onboarding-hide { background: none; border: 0; box-shadow: none; padding: 6px; min-height: 0; color: var(--muted); }
.onboarding-hide:hover { background: var(--gray-100); color: var(--text); }
.onboarding-hide .icon { width: 18px; height: 18px; }
.onboarding-bar { height: 8px; border-radius: var(--radius-full); background: var(--gray-100); overflow: hidden; margin: 12px 0 6px; }
.onboarding-bar span { display: block; height: 100%; background: var(--primary-500); border-radius: var(--radius-full); transition: width .3s; }
.onboarding-steps { list-style: none; padding: 0; margin: 0; }
.onboarding-step { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.onboarding-step:first-child { border-top: 0; }
.onboarding-tick { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; }
.onboarding-tick .icon { width: 14px; height: 14px; }
.onboarding-step.done .onboarding-tick { background: var(--success); border-color: var(--success); color: #fff; }
.onboarding-step.next .onboarding-tick { border-color: var(--primary-500); }
.onboarding-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.onboarding-text strong { font-size: 0.92rem; }
.onboarding-text strong em { font-weight: 500; color: var(--muted); font-style: normal; font-size: 0.82rem; }
.onboarding-text span { font-size: 0.82rem; color: var(--muted); }
.onboarding-step.done .onboarding-text strong { color: var(--muted); text-decoration: line-through; font-weight: 600; }
.onboarding-action { flex-shrink: 0; padding: 7px 14px; font-size: 0.84rem; white-space: nowrap; }
@media (max-width: 560px) {
    .onboarding-step { flex-wrap: wrap; }
    .onboarding-action { margin-left: 36px; }
}

/* ---------- CRM → Help ---------- */
.help-page { max-width: 860px; }
.help-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 20px; margin-bottom: 18px; }
.help-hero .section-title { margin: 0 0 12px; }
.help-search { display: flex; gap: 8px; }
.help-search .search-input-wrap { flex: 1; min-width: 0; }
.help-heading { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 18px 0 8px; display: flex; align-items: center; gap: 10px; }
.help-clear { font-size: 0.8rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
.help-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.help-list { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.help-list li + li { border-top: 1px solid var(--border); }
.help-list a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; color: inherit; text-decoration: none; }
.help-list a:hover { background: var(--primary-tint-bg); }
.help-list strong { font-size: 0.92rem; color: var(--primary-ink-strong); }
.help-list span { font-size: 0.82rem; color: var(--muted); }
.help-article { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 22px; margin-top: 8px; }
.help-article-category { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary-ink-strong); }
.help-article h1 { font-size: 1.45rem; margin: 4px 0 6px; }
.help-article-summary { color: var(--muted); margin: 0 0 14px; }
.help-article-body { line-height: 1.6; font-size: 0.95rem; }
.help-article-body ol, .help-article-body ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.help-contact { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--primary-tint-bg); color: var(--primary-ink-strong); }
.help-contact > .icon { flex: 0 0 26px; width: 26px; height: 26px; }
.help-contact > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.help-contact span { font-size: 0.86rem; opacity: 0.9; }
@media (max-width: 700px) { .help-categories { grid-template-columns: minmax(0, 1fr); } .help-search { flex-direction: column; } }

/* ---------- Portals (syndication) ---------- */
.synd-page { max-width: 900px; }
.synd-intro { max-width: 720px; }
.synd-upsell { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0; padding: 14px 16px; border-radius: var(--radius-md); background: var(--accent-tint-bg); border: 1px solid var(--accent-tint-border); }
.synd-upsell > .icon { flex: 0 0 22px; width: 22px; height: 22px; color: var(--accent-600); }
.synd-upsell > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.synd-upsell span { font-size: 0.86rem; color: var(--muted); }
.synd-portals, .synd-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.synd-portal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.synd-portal .field { margin: 0; }
.synd-portal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.synd-portal-head h2 { font-size: 1.05rem; margin: 0; }
.synd-portal .meta { margin: 0; font-size: 0.84rem; }
.synd-connection { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: var(--radius-full); }
.synd-connection .icon { width: 12px; height: 12px; }
.synd-connection.on { background: var(--success-bg); color: var(--success-text); }
.synd-connection.pending { background: var(--warning-bg); color: var(--warning-text); }
.synd-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.synd-toggle input { width: auto; margin: 0; }
.synd-save { grid-column: 1 / -1; }
.synd-counts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.synd-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); background: var(--gray-100); color: var(--gray-700); }
.synd-chip.small { font-size: 0.68rem; padding: 2px 8px; margin: 4px 4px 0 0; }
.synd-chip.live { background: var(--success-bg); color: var(--success-text); }
.synd-chip.awaiting_connection, .synd-chip.queued { background: var(--primary-tint-bg); color: var(--primary-ink-strong); }
.synd-chip.failed { background: var(--warning-bg); color: var(--warning-text); }
.synd-chip.rejected { background: var(--danger-bg); color: var(--danger-text); }
.synd-heading { font-size: 1.05rem; margin: 24px 0 10px; }
.synd-problems { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.synd-problems li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }
.synd-problems li > div:first-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: flex-start; }
.synd-problem-actions { display: flex; gap: 6px; }
.synd-problem-actions form { margin: 0; }
.synd-listing-card { margin-top: 18px; }
.synd-listing-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--border); }
.synd-listing-row:first-of-type { border-top: 0; }
.synd-listing-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.synd-listing-actions { display: flex; gap: 6px; margin: 0; }
@media (max-width: 700px) { .synd-portals, .synd-admin-grid { grid-template-columns: minmax(0, 1fr); } }

/* Agency → Website settings */
.website-page { max-width: 820px; }
.website-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--warning-text); border-radius: var(--radius-md); padding: 16px 18px; margin: 14px 0 18px; }
.website-status.live { border-left-color: var(--success); }
.website-status > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.website-status-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--warning-text); }
.website-status.live .website-status-label { color: var(--success-text); }
.website-url { font-weight: 800; font-size: 1.05rem; word-break: break-all; }
.website-status-actions { display: flex; gap: 8px; }
.website-form fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.website-form .field { margin-bottom: 14px; }
.website-slug { display: flex; align-items: stretch; }
.website-slug span { display: flex; align-items: center; padding: 0 10px; background: var(--gray-100); border: 1px solid var(--border); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); color: var(--muted); font-size: 0.86rem; white-space: nowrap; }
.website-slug input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; min-width: 0; }
.website-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .website-two { grid-template-columns: minmax(0, 1fr); } .website-slug span { font-size: 0.74rem; } }

/* Listing page → the agency's own website */
.agency-site-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 0.86rem; font-weight: 600; }


/* Sale agreements: sign in ink, never on screen */
.ink-only-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 12px 0 16px; border-radius: var(--radius-md); background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-text); }
.ink-only-notice > .icon { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; }
.ink-only-notice > div { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; line-height: 1.5; }
.ink-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; max-width: 760px; }
.ink-choice-option { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); text-decoration: none; }
.ink-choice-option:hover { border-color: var(--primary-ink); text-decoration: none; }
.ink-choice-option strong { display: inline-flex; align-items: center; gap: 7px; font-size: 0.95rem; }
.ink-choice-option strong .icon { width: 17px; height: 17px; color: var(--muted); }
.ink-choice-option span { font-size: 0.84rem; color: var(--muted); }
.ink-choice-option.is-on { border-color: var(--primary-ink); background: color-mix(in srgb, var(--primary-ink) 9%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-ink) 20%, transparent); }
.ink-choice-option.is-on strong .icon { color: var(--primary-ink); }
@media (max-width: 600px) { .ink-choice { grid-template-columns: minmax(0, 1fr); } }
.ink-only-notice em { font-style: normal; opacity: 0.85; font-size: 0.84rem; }
.signature-ink-block { margin: 22px 0 8px; max-width: 360px; }
.signature-ink-line { display: block; border-bottom: 1.5px solid #333; height: 36px; }
.signature-ink-label { display: block; font-size: 11px; font-weight: 700; color: #444; margin-top: 4px; }
.ink-only-badge { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 4px; font-size: 0.8rem; font-weight: 600; color: var(--warning-text); background: var(--warning-bg); border-radius: var(--radius-sm); padding: 4px 8px; }
.ink-override { margin-top: 6px; font-size: 0.84rem; }
.ink-override summary { cursor: pointer; color: var(--muted); }
.ink-override form { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; }
.ink-override label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.ink-override input[type=checkbox] { width: auto; margin-top: 3px; }

/* ---------- Book a Demo landing page (demo/book.php) ---------- */
.dl-hero {
    background:
        linear-gradient(105deg, rgba(4, 33, 30, 0.94) 0%, rgba(6, 58, 54, 0.86) 45%, rgba(6, 58, 54, 0.55) 100%),
        var(--hero-photo) center/cover no-repeat;
    color: #fff;
    padding: clamp(40px, 7vw, 88px) 16px clamp(44px, 7vw, 96px);
}
.dl-hero-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.dl-kicker, .dl-eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-500, #f97316); }
.dl-hero h1 { font-size: clamp(2rem, 4.2vw + 0.6rem, 3.4rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.06; margin: 12px 0 16px; color: #fff; }
.dl-hero-sub { font-size: clamp(1rem, 0.5vw + 0.9rem, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, 0.9); max-width: 600px; margin: 0 0 26px; }
.dl-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dl-hero .btn, .dl-final .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; font-size: 1rem; border-radius: 12px; }
.dl-btn-primary { background: var(--accent-500, #f97316); color: #fff; border: 0; box-shadow: 0 10px 28px rgba(249, 115, 22, 0.35); }
.dl-btn-primary:hover { background: var(--accent-600, #ea580c); color: #fff; }
.dl-btn-ghost { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.45); }
.dl-btn-ghost:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.dl-hero-trust { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.92rem; color: rgba(255, 255, 255, 0.88); }
.dl-hero-trust li { display: inline-flex; align-items: center; gap: 6px; }
.dl-hero-trust .icon { width: 16px; height: 16px; color: #5eead4; }
.dl-offer { background: #fff; color: #111827; border-radius: 20px; padding: 26px 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.dl-offer-tag { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9a3412; background: #ffedd5; padding: 4px 10px; border-radius: 999px; }
.dl-offer strong { display: block; font-size: 2.2rem; font-weight: 900; letter-spacing: -0.03em; margin: 12px 0 6px; color: #0f766e; }
.dl-offer p { margin: 0 0 14px; color: #4b5563; line-height: 1.5; }
.dl-offer ul { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.dl-offer li { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 0.94rem; }
.dl-offer li .icon { width: 17px; height: 17px; color: #0f766e; flex: 0 0 17px; }
.dl-offer .btn { background: #0f766e; color: #fff; padding: 13px; border-radius: 12px; text-align: center; }

.dl-strip { max-width: 1140px; margin: -34px auto 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08); overflow: hidden; }
.dl-strip-item { display: flex; flex-direction: column; gap: 3px; padding: 22px 22px; border-left: 1px solid var(--border); }
.dl-strip-item:first-child { border-left: 0; }
.dl-strip-item strong { font-size: 1.45rem; font-weight: 900; letter-spacing: -0.02em; color: var(--primary-ink-strong); }
.dl-strip-item span { font-size: 0.88rem; color: var(--muted); line-height: 1.4; }

.dl-section { max-width: 1140px; margin: 0 auto; padding: clamp(52px, 7vw, 88px) 16px 0; }
.dl-section-head { text-align: center; max-width: 680px; margin: 0 auto 34px; }
.dl-section-head h2, .dl-book-side h2 { font-size: clamp(1.6rem, 2.4vw + 0.8rem, 2.4rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.12; margin: 8px 0 10px; }
.dl-section-head p { color: var(--muted); font-size: 1.05rem; line-height: 1.6; margin: 0; }
.dl-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dl-feature { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px 20px; transition: transform .18s, box-shadow .18s, border-color .18s; }
.dl-feature:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08); border-color: var(--primary-200, var(--border)); }
.dl-feature-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--primary-tint-bg); color: var(--primary-ink-strong); margin-bottom: 14px; }
.dl-feature-icon .icon { width: 23px; height: 23px; }
.dl-feature h3 { font-size: 1.05rem; margin: 0 0 8px; }
.dl-feature p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.dl-feature em { font-style: normal; font-weight: 700; color: var(--accent-600); }

.dl-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: none; }
.dl-steps li { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px 22px 22px; }
.dl-step-num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--primary-600); color: #fff; font-weight: 900; font-size: 1.1rem; margin-bottom: 14px; }
.dl-steps h3 { font-size: 1.1rem; margin: 0 0 8px; }
.dl-steps p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 0.94rem; }

.dl-pricing { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
/* A short pricing row (e.g. the 2 franchise tiers) centred instead of pinned left. */
.dl-pricing.dl-pricing-center { display: flex; flex-wrap: wrap; justify-content: center; }
.dl-pricing.dl-pricing-center .dl-price-card { flex: 1 1 260px; max-width: 300px; }
.dl-price-card { position: relative; background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; padding: 24px 20px; display: flex; flex-direction: column; }
.dl-price-card.featured { border-color: var(--primary-600); box-shadow: 0 0 0 1px var(--primary-600), 0 16px 36px rgba(15, 118, 110, 0.14); }
.dl-price-flag { position: absolute; top: -11px; left: 20px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--primary-600); color: #fff; }
.dl-price-card h3 { font-size: 1.05rem; margin: 0 0 8px; }
.dl-price { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dl-price small { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.dl-price-card p { margin: 10px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

.dl-book { margin-top: clamp(56px, 8vw, 96px); padding: clamp(48px, 7vw, 80px) 16px; background: linear-gradient(180deg, var(--primary-tint-bg) 0%, transparent 100%); scroll-margin-top: 70px; }
.dl-book-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.dl-book-side { position: sticky; top: 90px; }
.dl-checklist { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-direction: column; gap: 12px; }
.dl-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; line-height: 1.45; }
.dl-checklist .icon { flex: 0 0 22px; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--primary-600); color: #fff; box-sizing: border-box; margin-top: 1px; }
.dl-book-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }
.dl-book-note .icon { flex: 0 0 18px; width: 18px; height: 18px; color: var(--primary-ink-strong); margin-top: 1px; }
.dl-book-form .demo-form > .detail-section { border-radius: 18px; }
.dl-submit { padding: 15px; font-size: 1.05rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.dl-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.dl-faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0 20px; }
.dl-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; font-weight: 700; font-size: 1.02rem; }
.dl-faq summary::-webkit-details-marker { display: none; }
.dl-faq-icon { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-tint-bg); position: relative; }
.dl-faq-icon::before, .dl-faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: var(--primary-ink-strong); transform: translate(-50%, -50%); transition: transform .2s; }
.dl-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.dl-faq details[open] .dl-faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.dl-faq details p { margin: 0 0 18px; color: var(--muted); line-height: 1.6; }

.dl-final { max-width: 1140px; margin: clamp(56px, 8vw, 96px) auto clamp(40px, 6vw, 72px); padding: clamp(36px, 6vw, 60px) 20px; text-align: center; border-radius: 24px; color: #fff; background: linear-gradient(120deg, #063a36 0%, #0f766e 100%); }
.dl-final h2 { font-size: clamp(1.6rem, 2.4vw + 0.8rem, 2.3rem); font-weight: 900; letter-spacing: -0.03em; margin: 0 0 8px; color: #fff; }
.dl-final p { margin: 0 0 22px; color: rgba(255, 255, 255, 0.88); font-size: 1.05rem; }

/* Home page "For estate agencies" block (partials/_agency_pitch.php) reuses the dl-* styles above. */
.home-pitch { padding-bottom: clamp(48px, 7vw, 80px); }
.home-pitch .dl-section-head p { text-wrap: balance; }
.home-pitch .dl-features { margin-bottom: clamp(32px, 5vw, 48px); }
.home-pitch-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 14px; margin-top: 30px; }
.home-pitch-actions .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; font-size: 1rem; border-radius: 12px; }
.home-pitch-link { flex-basis: 100%; text-align: center; font-weight: 700; font-size: 0.93rem; color: var(--primary-ink-strong); display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.home-pitch-link .icon { width: 16px; height: 16px; }

/* About page (legal/about.php). */
.about-page { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.about-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 40px); max-width: 760px; }
.about-hero h1 { font-size: clamp(2rem, 3.2vw + 0.8rem, 3rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.08; margin: 10px 0 16px; }
.about-hero p { font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.15rem); line-height: 1.65; color: var(--muted); margin: 0; }
.about-story { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.about-story-text h2 { font-size: clamp(1.35rem, 1.2vw + 1rem, 1.75rem); font-weight: 900; letter-spacing: -0.02em; margin: 0 0 14px; }
.about-story-text p { line-height: 1.7; margin: 0 0 14px; }
.about-founder { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 26px 24px; text-align: center; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06); }
.about-founder-photo { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; display: block; border: 4px solid var(--primary-tint-bg); }
.about-founder-initials { width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; font-size: 2.6rem; font-weight: 900; letter-spacing: -0.03em; color: #fff; background: linear-gradient(135deg, #063a36 0%, #0f766e 100%); }
.about-founder h3 { margin: 0; font-size: 1.15rem; }
.about-founder-role { margin: 4px 0 12px; color: var(--muted); font-size: 0.92rem; }
.about-founder-quote { margin: 0; font-size: 0.95rem; line-height: 1.6; font-style: italic; }
.about-values { padding-top: clamp(40px, 6vw, 64px); }
@media (max-width: 900px) {
    .about-story { grid-template-columns: minmax(0, 1fr); }
    .about-founder { max-width: 420px; }
}

@media (max-width: 1080px) {
    .dl-features, .dl-pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .dl-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .dl-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: -28px 16px 0; }
    .dl-strip-item:nth-child(3) { border-left: 0; }
    .dl-strip-item:nth-child(n+3) { border-top: 1px solid var(--border); }
    .dl-steps { grid-template-columns: minmax(0, 1fr); }
    .dl-book-inner { grid-template-columns: minmax(0, 1fr); }
    .dl-book-side { position: static; }
}
@media (max-width: 560px) {
    .dl-features, .dl-pricing { grid-template-columns: minmax(0, 1fr); }
    .dl-hero .btn { width: 100%; justify-content: center; }
    .dl-strip-item { padding: 16px; }
    .dl-strip-item strong { font-size: 1.2rem; }
    .dl-final { margin-left: 16px; margin-right: 16px; }
    .dl-pricing { row-gap: 18px; }
}
@media (prefers-reduced-motion: reduce) { .dl-feature, .dl-faq-icon::after, .dl-faq-icon::before { transition: none; } }

.dl-pricing-note { text-align: center; color: var(--muted); font-size: 0.95rem; max-width: 640px; margin: 22px auto 0; line-height: 1.55; }


/* Admin → Agencies: details on top, actions below (rows carry many action buttons) */
.admin-agency-row { flex-direction: column; align-items: stretch; gap: 12px; }
.admin-agency-row .info { min-width: 0; }
.admin-agency-row .actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.admin-agency-row .actions form { margin: 0; }

/* Name + status pills, then the facts as a labelled grid (not one run-on line). */
.aa-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.aa-name { font-size: 1.1rem; }
.aa-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--bg); border: 1px solid var(--border); color: var(--muted); }
.aa-pill .badge-icon { width: 14px; height: 14px; }
.aa-pill.is-ok { color: var(--success-text, #15803d); border-color: currentColor; }
.aa-pill.is-wait { color: var(--warning-text); border-color: currentColor; }
.aa-pill.is-plan { color: var(--primary-ink); border-color: currentColor; }
.aa-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 20px; margin: 0; }
.aa-facts > div { min-width: 0; }
.aa-facts dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; margin: 0 0 2px; }
.aa-facts dd { margin: 0; font-size: 0.9rem; line-height: 1.4; overflow-wrap: anywhere; }
.aa-missing { color: var(--muted); font-style: italic; }
.aa-note { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.aa-note .badge-icon { flex: none; margin-top: 2px; }
.aa-note.is-warn { color: var(--warning-text); }
.aa-note.is-accent { color: var(--accent-600); }

/* Grouped, labelled admin agency actions (Verification / Plan / Franchise / Branding), side by side. */
.admin-agency-row .actions.admin-agency-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; gap: 16px 24px; }
.admin-agency-actions .admin-plan-form { display: contents; }
.admin-agency-actions .admin-action-group { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.admin-action-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.admin-action-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-action-btns form { margin: 0; }
.admin-action-select { width: auto; min-width: 160px; padding: 7px 10px; }
.admin-agency-actions .btn-sm { padding: 7px 12px; font-size: 0.82rem; }

/* ---------- Agency → Website editor (templates & customisation) ---------- */
.website-page { max-width: 1400px; }
.website-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px; }
.website-top .website-status { flex-direction: column; align-items: flex-start; margin: 0; gap: 4px; max-width: 460px; }
.website-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; margin-top: 18px; align-items: start; }
.website-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.website-tabs { display: flex; gap: 4px; flex-wrap: wrap; background: var(--gray-100); padding: 4px; border-radius: 12px; margin-bottom: 16px; }
.website-tab { flex: 1 1 auto; background: transparent; color: var(--muted); border: 0; box-shadow: none; border-radius: 9px; padding: 9px 12px; font-weight: 700; min-height: 0; }
.website-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.website-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; }
.website-h { font-size: 1rem; margin: 22px 0 10px; }
.website-h:first-child { margin-top: 0; }
.website-save { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 0; background: var(--bg); z-index: 2; }

.tpl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.tpl-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 14px; border: 2px solid var(--border); border-radius: 14px; cursor: pointer; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.tpl-card:hover { border-color: var(--primary-200, var(--primary-500)); }
.tpl-card.selected { border-color: var(--primary-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-600) 20%, transparent); }
.tpl-card input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-name { font-weight: 800; font-size: 1rem; padding: 0 4px; }
.tpl-name em { font-style: normal; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; background: var(--primary-600); color: #fff; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.tpl-blurb { font-size: 0.82rem; color: var(--muted); line-height: 1.45; padding: 0 4px; }
.tpl-font { font-size: 0.8rem; color: var(--muted); padding: 0 4px; }
/* Miniature layout sketches of each template */
.tpl-thumb { display: flex; flex-direction: column; height: 120px; border-radius: 9px; overflow: hidden; background: #f4f5f4; border: 1px solid var(--border); }
.tt-head { height: 12px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.tt-hero { position: relative; flex: 1; margin: 6px; border-radius: 6px; background: linear-gradient(110deg, var(--t-primary), color-mix(in srgb, var(--t-primary) 60%, #9ca3af)); display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 7px; }
.tt-line { display: block; height: 5px; width: 55%; border-radius: 3px; background: rgba(255, 255, 255, 0.9); }
.tt-line.short { width: 35%; opacity: 0.7; }
.tt-btn { display: block; width: 26px; height: 7px; border-radius: 3px; background: var(--t-accent); margin-top: 2px; }
.tt-cards { display: flex; gap: 5px; padding: 0 6px 6px; }
.tt-cards span { flex: 1; height: 20px; border-radius: 4px; background: #fff; border: 1px solid #e5e7eb; }
.tpl-thumb--modern .tt-hero { margin: 0; border-radius: 0; background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.2)), url('../img/hero-bg.jpg') center/cover; }
.tpl-thumb--coastal { background: #eef7f8; }
.tpl-thumb--coastal .tt-hero { background: linear-gradient(90deg, transparent 50%, color-mix(in srgb, var(--t-primary) 40%, #bae6fd) 50%); border-radius: 6px 6px 6px 22px; }
.tpl-thumb--coastal .tt-line { background: #134e4a; width: 38%; }
.tpl-thumb--coastal .tt-cards span { border-radius: 8px; }
.tpl-thumb--luxury { background: #0c0c0c; border-color: #2a2724; }
.tpl-thumb--luxury .tt-head { background: #111; border-color: #2a2724; }
.tpl-thumb--luxury .tt-hero { margin: 0; border-radius: 0; align-items: center; justify-content: center; background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)), url('../img/hero-bg.jpg') center/cover; }
.tpl-thumb--luxury .tt-line { background: #f4f1ea; }
.tpl-thumb--luxury .tt-btn { border-radius: 0; }
.tpl-thumb--luxury .tt-cards span { background: #141414; border-color: #2a2724; border-radius: 0; }
.tpl-thumb--urban .tt-head { border-bottom: 2px solid #111; }
.tpl-thumb--urban .tt-hero { margin: 0; border-radius: 0; background: linear-gradient(100deg, var(--t-primary) 58%, #9ca3af 58%); }
.tpl-thumb--urban .tt-line { height: 7px; }
.tpl-thumb--urban .tt-btn { background: #111; border-radius: 0; }
.tpl-thumb--urban .tt-cards span { border: 1.5px solid #111; border-radius: 0; box-shadow: 2px 2px 0 #111; }
.tpl-thumb--heritage { background: #faf6ee; }
.tpl-thumb--heritage .tt-head { background: #faf6ee; height: 16px; }
.tpl-thumb--heritage .tt-hero { background: linear-gradient(#faf6ee 45%, color-mix(in srgb, var(--t-primary) 35%, #d6c7a8) 45%); align-items: center; border: 2px solid #fffdf8; }
.tpl-thumb--heritage .tt-line { background: #2b2419; }
/* Prestige, Horizon, Metro */
.tpl-thumb--prestige { background: #0b0b0c; border-color: #2a2724; }
.tpl-thumb--prestige .tt-head { background: transparent; border: 0; position: absolute; }
.tpl-thumb--prestige .tt-hero { margin: 0; border-radius: 0; align-items: center; justify-content: center; background: radial-gradient(ellipse, rgba(0,0,0,.45), rgba(0,0,0,.85)), url('../img/hero-bg.jpg') center/cover; }
.tpl-thumb--prestige .tt-line { background: #f3efe6; height: 6px; }
.tpl-thumb--prestige .tt-btn { border-radius: 0; width: 60%; height: 9px; background: rgba(20, 20, 22, .85); border: 1px solid rgba(255,255,255,.2); }
.tpl-thumb--prestige .tt-cards span { background: transparent; border: 0; border-bottom: 2px solid var(--t-primary); border-radius: 0; }
.tpl-thumb--horizon { background: #fbfaf7; }
.tpl-thumb--horizon .tt-head { background: #fbfaf7; border: 0; }
.tpl-thumb--horizon .tt-hero { margin: 0 4px; border-radius: 0 0 12px 12px; background: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.5)), url('../img/hero-bg.jpg') center/cover; }
.tpl-thumb--horizon .tt-btn { width: 70%; height: 9px; border-radius: 5px; background: #fff; }
.tpl-thumb--horizon .tt-cards span { border-radius: 8px; border-color: #e8e2d6; }
.tpl-thumb--metro .tt-hero { margin: 0; border-radius: 0; background: linear-gradient(90deg, rgba(5,10,20,.85), rgba(5,10,20,.1)), url('../img/hero-bg.jpg') center/cover; }
.tpl-thumb--metro .tt-line { height: 7px; }
.tpl-thumb--metro .tt-btn { width: 70%; height: 9px; border-radius: 3px; background: #fff; }
/* Signature templates (Maison, Skyline, Terra) */
.tpl-sig { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin: 2px 4px 0; padding: 3px 9px; border-radius: 999px; background: linear-gradient(110deg, #0f766e, #f97316); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tpl-card--sig { background: linear-gradient(180deg, color-mix(in srgb, #f97316 5%, var(--surface)), var(--surface)); }
.tpl-thumb--maison { background: #f6f2eb; border-color: #e0d6c6; }
.tpl-thumb--maison .tt-head { position: absolute; background: transparent; border: 0; }
.tpl-thumb--maison .tt-hero { margin: 0; border-radius: 0; align-items: center; justify-content: center; background: linear-gradient(rgba(10,8,5,.35), rgba(10,8,5,.6)), url('../img/hero-bg.jpg') center/cover; }
.tpl-thumb--maison .tt-line { height: 8px; width: 62%; background: #fff; border-radius: 1px; }
.tpl-thumb--maison .tt-line.short { width: 40%; height: 6px; background: #eadfcb; opacity: 1; }
.tpl-thumb--maison .tt-btn { width: 64%; height: 8px; border-radius: 0; background: #fffdf9; }
.tpl-thumb--maison .tt-cards { padding: 6px; }
.tpl-thumb--maison .tt-cards span { height: 26px; border-radius: 0; border: 0; background: linear-gradient(#cbbda7, #6e665b); }
.tpl-thumb--skyline { position: relative; background: radial-gradient(circle at 100% 0, rgba(79,70,229,.2), transparent 60%), #fff; }
.tpl-thumb--skyline .tt-head { background: transparent; border: 0; }
.tpl-thumb--skyline .tt-hero { margin: 4px 50% 6px 8px; border-radius: 0; background: transparent; padding: 0; justify-content: center; }
.tpl-thumb--skyline .tt-line { height: 9px; width: 90%; background: #0b0f1a; border-radius: 3px; }
.tpl-thumb--skyline .tt-line.short { width: 60%; background: linear-gradient(90deg, #4f46e5, #0ea5e9); opacity: 1; }
.tpl-thumb--skyline .tt-btn { width: 90%; height: 12px; border-radius: 5px; background: #fff; border: 1px solid #e6e8f1; box-shadow: 0 3px 8px rgba(17,24,58,.1); }
.tpl-thumb--skyline .tt-cards { position: absolute; right: 8px; top: 16px; bottom: 30px; width: 42%; padding: 0; display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; }
.tpl-thumb--skyline .tt-cards span { height: auto; border: 0; border-radius: 7px; background: url('../img/hero-bg.jpg') center/cover; }
.tpl-thumb--skyline .tt-cards span:first-child { grid-row: span 2; }
.tpl-thumb--terra { background: #f7f1e8; border-color: #e5d8c4; position: relative; }
.tpl-thumb--terra .tt-head { background: #f7f1e8; border: 0; }
.tpl-thumb--terra .tt-hero { margin: 2px 6px 14px; padding-bottom: 20px; border-radius: 14px; background: linear-gradient(rgba(40,22,8,.15), rgba(40,22,8,.55)), url('../img/hero-bg.jpg') center/cover; }
.tpl-thumb--terra .tt-line { height: 7px; width: 50%; }
.tpl-thumb--terra .tt-line.short { background: #ffc9a3; opacity: 1; }
.tpl-thumb--terra .tt-btn { position: absolute; left: 18%; right: 18%; bottom: 18px; width: auto; height: 12px; border-radius: 999px; background: #fffaf3; box-shadow: 0 3px 8px rgba(60,35,10,.2); }
.tpl-thumb--terra .tt-cards span { height: 14px; border-radius: 6px; border: 0; background: #efe5d5; }
.tpl-thumb--prestige, .tpl-thumb--horizon, .tpl-thumb--metro { position: relative; }
.tpl-card .tpl-name em { white-space: nowrap; }

.colour-modes, .font-options { display: flex; flex-direction: column; gap: 8px; }
.colour-mode, .font-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; }
.colour-mode:has(input:checked), .font-option:has(input:checked) { border-color: var(--primary-600); background: var(--primary-tint-bg); }
.colour-mode.disabled { opacity: 0.55; cursor: not-allowed; }
.colour-mode input, .font-option input { width: auto; margin: 0; }
.colour-mode > span:not(.swatches), .font-option > span { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.colour-mode small, .font-option small { color: var(--muted); font-size: 0.8rem; }
.font-option strong { font-size: 1.1rem; }
.swatches { display: flex; gap: 4px; }
.swatches i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
.custom-colours { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 12px; padding: 12px 14px; background: var(--gray-100); border-radius: 12px; }
.custom-colours label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.88rem; }
.custom-colours input[type=color] { width: 44px; height: 34px; padding: 2px; border-radius: 8px; cursor: pointer; }
.custom-colours .meta { flex-basis: 100%; }

.hero-photo { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.hero-photo-preview { aspect-ratio: 16 / 10; border-radius: 10px; background-size: cover; background-position: center; border: 1px solid var(--border); }
.hero-photo label { font-weight: 700; font-size: 0.85rem; display: block; margin-bottom: 6px; }
.hero-photo .meta { display: block; font-size: 0.78rem; margin-top: 4px; }
.hero-photo .synd-toggle { margin-top: 8px; font-weight: 400; }
input[type=range] { width: 100%; accent-color: var(--primary-600); }

.section-list { list-style: none; padding: 0; margin: 0 0 8px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.section-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--surface); }
.section-list li + li { border-top: 1px solid var(--border); }
.section-list label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.section-list input { width: auto; margin: 0; }
.section-move { display: flex; gap: 4px; }
.section-move button { padding: 4px 10px; min-height: 0; font-size: 0.9rem; line-height: 1.2; }
.repeat-rows { display: flex; flex-direction: column; gap: 8px; }
.repeat-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 8px; }
.testimonial-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr); }

.website-preview { position: sticky; top: 76px; }
.website-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.preview-sizes { display: flex; background: var(--gray-100); border-radius: 10px; padding: 3px; }
.preview-sizes button { background: transparent; color: var(--muted); border: 0; box-shadow: none; padding: 6px 12px; border-radius: 8px; font-weight: 700; font-size: 0.82rem; min-height: 0; }
.preview-sizes button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.website-preview-frame { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; height: calc(100vh - 160px); min-height: 520px; box-shadow: var(--shadow-sm); transition: max-width .25s; margin: 0 auto; }
.website-preview-frame[data-size=desktop] iframe { width: 166.6667%; height: 166.6667%; transform: scale(0.6); transform-origin: 0 0; }
.website-preview-frame[data-size=mobile] { max-width: 390px; }
.website-preview-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 1100px) {
    .website-editor { grid-template-columns: minmax(0, 1fr); }
    .website-preview { position: static; order: -1; }
    .website-preview-frame { height: 520px; }
}
@media (max-width: 560px) {
    .tpl-grid, .repeat-row, .testimonial-row, .hero-photo { grid-template-columns: minmax(0, 1fr); }
    .website-preview-frame[data-size=desktop] iframe { width: 250%; height: 250%; transform: scale(0.4); }
}

.custom-colours[hidden] { display: none; }


/* A number box with its unit picker attached (e.g. Erf size in m² or hectares) */
.unit-input { display: flex; align-items: stretch; }
.unit-input input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.unit-input select { width: auto; flex: 0 0 auto; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-right: 28px; background-color: var(--gray-100); font-weight: 600; }
.unit-hint { display: block; min-height: 1.2em; font-size: 0.8rem; margin-top: 4px; }

/* ---------- Legal pages (Terms, Privacy Policy, Refund Policy) ---------- */
.legal-doc { max-width: 820px; padding-top: 8px; padding-bottom: 48px; line-height: 1.65; }
.legal-head .section-title { margin-bottom: 4px; }
.legal-updated { color: var(--muted); font-size: 0.88rem; margin: 0 0 14px; }
.legal-summary { font-size: 1.02rem; margin: 0 0 22px; }
.legal-toc { background: var(--primary-tint-bg); border: 1px solid var(--primary-tint-border); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 30px; }
.legal-toc strong { display: block; margin-bottom: 6px; font-size: 0.9rem; }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; font-size: 0.92rem; }
.legal-toc li { break-inside: avoid; padding: 2px 0; }
.legal-toc a { color: var(--primary-ink); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
.legal-doc section { scroll-margin-top: 90px; margin-bottom: 26px; }
.legal-doc h2 { font-size: 1.15rem; margin: 0 0 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.legal-doc p, .legal-doc li { color: var(--text); }
.legal-doc p { margin: 0 0 10px; }
.legal-doc ul { margin: 0 0 12px; padding-left: 22px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc a { color: var(--primary-ink); }
.legal-table td { white-space: normal; vertical-align: top; }
.legal-foot { color: var(--muted); font-size: 0.92rem; border-top: 1px solid var(--border); padding-top: 16px; }
@media (max-width: 640px) {
    .legal-toc ol { columns: 1; }
}
.results-count { font-size: 0.9rem; font-weight: 500; white-space: nowrap; }
.demo-row:target { box-shadow: 0 0 0 2px var(--primary-ink); scroll-margin-top: 90px; }
.cal-demo-tag { display: inline-block; background: var(--type-color); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; border-radius: 999px; padding: 1px 7px; margin-right: 6px; vertical-align: 1px; }
/* Portals: feed login fields and the agency's listing feed */
.synd-credentials { margin: 4px 0 10px; }
.synd-credentials summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; padding: 4px 0; }
.synd-cred-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; margin-top: 8px; }
.synd-toggle.small { font-size: 0.85rem; margin-top: 4px; }
.synd-feed { margin-top: 28px; }
.synd-feed-issues { margin: 6px 0 12px; padding-left: 20px; font-size: 0.9rem; }
.synd-feed-issues li { margin-bottom: 4px; }
.synd-feed-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.synd-feed-link input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
.synd-field-ref { margin-top: 18px; }
.synd-field-ref summary { cursor: pointer; font-weight: 600; }
.env-banner { position: sticky; top: 0; z-index: 2000; background: #b45309; color: #fff; text-align: center; font-size: 0.82rem; font-weight: 600; padding: 6px 12px; }
.env-banner-lock { display: inline-block; margin-left: 10px; text-decoration: none; }
.env-banner-lock:hover { background: rgba(255, 255, 255, 0.3); color: #fff; }
.env-banner-sandbox { background: #6d28d9; } /* the sandbox is purple, the demo orange: never mixed up */
.env-banner-tag { display: inline-block; margin-right: 8px; padding: 1px 9px; border-radius: 999px; background: #fff; color: #6d28d9; font-weight: 800; letter-spacing: 0.08em; }
.env-banner-reset { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 10px; flex-wrap: wrap; justify-content: center; }
.env-banner-confirm:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.env-banner-btn { font: inherit; font-size: 0.78rem; color: #fff; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.env-banner-btn:hover, .env-banner-btn:focus-visible { background: rgba(255, 255, 255, 0.3); }
.env-banner-btn-yes { background: #fff; color: #b45309; border-color: #fff; }
.env-banner-btn-yes:hover, .env-banner-btn-yes:focus-visible { background: #fef3c7; }
/* "Resetting the demo…" page (app/Views/demo-reset/resetting.php) */
.demo-reset-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--bg); color: var(--text); }
.demo-reset-card { max-width: 440px; width: 100%; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 24px; }
.demo-reset-card h1 { font-size: 1.35rem; margin: 16px 0 8px; }
.demo-reset-card p { color: var(--muted); margin: 0 0 16px; }
.demo-reset-spinner { width: 40px; height: 40px; margin: 0 auto; border: 4px solid var(--border); border-top-color: var(--primary-600); border-radius: 50%; animation: demo-reset-spin 0.9s linear infinite; }
.demo-reset-card.is-finished .demo-reset-spinner { display: none; }
@keyframes demo-reset-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .demo-reset-spinner { animation-duration: 3s; } }
/* ---------- Maps (assets/js/maps.js) ---------- */
.erf-map-frame { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--surface); margin-bottom: 20px; }
.erf-map-frame #property-map { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.erf-map-frame:fullscreen { border-radius: 0; display: flex; flex-direction: column; }
.erf-map-frame:fullscreen #property-map { flex: 1; height: auto; }
.erf-map-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.erf-map-place { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.erf-map-place .icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--primary-ink); margin-top: 2px; }
.erf-map-place strong { display: block; font-size: 0.95rem; }
.erf-map-place small { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.erf-map-directions { white-space: nowrap; }
.leaflet-container { font-family: inherit; background: #eef2f3; }

/* Listing pin: a teal drop with a house, and a soft pulse on the ground under it */
.erf-pin { background: none; border: 0; }
.erf-pin-shape { position: absolute; left: 4px; top: 0; width: 36px; height: 36px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: linear-gradient(135deg, #14b8a6, #0f766e); border: 3px solid #fff; box-shadow: 0 6px 16px rgba(15, 118, 110, 0.45); display: grid; place-items: center; }
.erf-pin-shape svg { width: 18px; height: 18px; transform: rotate(45deg); fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.erf-pin-pulse { position: absolute; left: 12px; top: 44px; width: 20px; height: 8px; border-radius: 50%; background: rgba(15, 118, 110, 0.35); animation: erf-pin-pulse 2.2s ease-out infinite; }
@keyframes erf-pin-pulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .erf-pin-pulse { animation: none; } }
.erf-area-label { background: none; border: 0; }
.erf-area-label span { display: inline-block; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.95); color: #0f766e; font-weight: 700; font-size: 0.78rem; padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); white-space: nowrap; }

/* Search map: price tags that open a photo card */
.erf-price-tag { background: none; border: 0; }
.erf-price-tag span { display: inline-block; transform: translate(-50%, -100%); position: relative; background: #0f766e; color: #fff; font-weight: 700; font-size: 0.78rem; padding: 5px 9px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); white-space: nowrap; font-variant-numeric: tabular-nums; transition: background 0.15s, transform 0.15s; }
.erf-price-tag span::after { content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #fff; border-bottom: 0; }
.erf-price-tag:hover span, .erf-price-tag:focus span { background: #134e4a; transform: translate(-50%, -100%) scale(1.06); }
.erf-price-tag.approximate span { background: #475569; }
.erf-map-popup .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: 14px; }
.erf-map-popup .leaflet-popup-content { margin: 0; width: 240px !important; }
.erf-map-card { display: block; color: inherit; text-decoration: none; }
.erf-map-card-img { display: block; height: 130px; background: #e5e7eb center / cover no-repeat; }
.erf-map-card-body { display: block; padding: 10px 12px 12px; }
.erf-map-card-body strong { display: block; font-size: 1rem; color: #0f766e; }
.erf-map-card-body span { display: block; color: #1f2937; font-size: 0.85rem; margin-top: 2px; line-height: 1.35; }
.erf-map-card-body em { display: block; color: #64748b; font-size: 0.78rem; margin-top: 4px; font-style: normal; }

/* Map controls */
.erf-map-bar { display: flex; gap: 6px; align-items: center; }
.erf-map-seg { display: inline-flex; background: #fff; border-radius: 999px; padding: 3px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.erf-map-seg button { border: 0; background: none; color: #334155; font: inherit; font-size: 0.8rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; min-height: 0; box-shadow: none; }
.erf-map-seg button.on { background: #0f766e; color: #fff; }
.erf-map-btn { width: 34px; height: 34px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #334155; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.erf-map-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.erf-map-btn:hover, .erf-map-seg button:not(.on):hover { color: #0f766e; }
.leaflet-bar { border: 0 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important; border-radius: 12px !important; overflow: hidden; }
.leaflet-bar a { width: 34px !important; height: 34px !important; line-height: 34px !important; color: #334155 !important; }
.leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, 0.8) !important; border-radius: 6px 0 0 0; }
.is-satellite .leaflet-control-attribution { background: rgba(255, 255, 255, 0.7) !important; }
/* Search map clusters: a numbered teal bubble for listings close together */
.erf-cluster { background: none; border: 0; }
.erf-cluster span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #0f766e; color: #fff; font-weight: 800; font-size: 0.9rem; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(20, 184, 166, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.erf-cluster:hover span { transform: scale(1.08); }
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow { transition: transform 0.3s ease-out, opacity 0.3s ease-in; }
/* Files attached to messages */
.chat-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; background: rgba(0, 0, 0, 0.06); color: inherit; text-decoration: none; max-width: 280px; }
.message-bubble.mine .chat-file { background: rgba(255, 255, 255, 0.18); }
.chat-file:hover { background: rgba(0, 0, 0, 0.1); }
.message-bubble.mine .chat-file:hover { background: rgba(255, 255, 255, 0.28); }
.chat-file-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-tint-bg); color: var(--primary-ink); }
.message-bubble.mine .chat-file-icon { background: rgba(255, 255, 255, 0.9); color: #0f766e; }
.chat-file-icon .icon { width: 18px; height: 18px; }
.chat-file-text { min-width: 0; display: flex; flex-direction: column; }
.chat-file-text strong { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-text small { font-size: 0.75rem; opacity: 0.8; }
.chat-file-preview { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; padding: 6px 8px; margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; }
.chat-file-preview[hidden] { display: none; }
.chat-file-preview .icon { width: 16px; height: 16px; color: var(--primary-ink); flex: 0 0 16px; }
.chat-file-preview span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-preview button { border: 0; background: none; font-size: 1.1rem; cursor: pointer; padding: 0 4px; min-height: 0; color: var(--muted); box-shadow: none; }
/* Share listing window (listings/_share_modal.php) */
.share-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 22px; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.share-dialog::backdrop { background: rgba(15, 23, 42, 0.55); }
.share-dialog-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.share-dialog-head h2 { margin: 0 0 2px; font-size: 1.2rem; }
.share-dialog-head .meta { margin: 0; }
.share-close { border: 0; background: none; padding: 4px; min-height: 0; color: var(--muted); cursor: pointer; box-shadow: none; }
.share-close .icon { width: 20px; height: 20px; }
.share-preview { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 16px; min-width: 0; }
.share-preview-img { flex: 0 0 64px; height: 48px; border-radius: 8px; background: var(--primary-tint-bg) center / cover no-repeat; }
.share-preview-link { color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.share-networks { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 8px; }
.share-net { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.8rem; font-weight: 600; text-decoration: none; cursor: pointer; min-height: 0; box-shadow: none; }
.share-net:hover { border-color: var(--primary-ink); color: var(--text); }
.share-net[hidden] { display: none; }
.share-net-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.share-net-icon svg { width: 20px; height: 20px; }
.share-net-icon .icon { width: 19px; height: 19px; stroke: #fff; }
.share-native-hint { font-size: 0.8rem; margin: 0 0 10px; }
.share-caption-field { margin-top: 12px; }
.share-caption-field textarea { font-size: 0.88rem; line-height: 1.5; }
.share-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.share-copied { color: var(--primary-ink); font-weight: 600; }
.share-pages { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.88rem; }
.share-pages a { color: var(--primary-ink); font-weight: 600; }
.sc-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Savings Calculator feature comparison */
.sc-compare { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.sc-compare th, .sc-compare td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.sc-compare thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.sc-compare thead th:nth-child(2) { color: var(--primary-ink); }
.sc-compare td:first-child { color: var(--text); }
.sc-cmp-erf { color: var(--primary-ink); font-weight: 600; white-space: nowrap; }
.sc-cmp-erf span { font-weight: 700; }
.sc-cmp-no { color: var(--danger-text); }
.sc-cmp-dash { color: var(--muted); }
/* Accounting sub-navigation + period filter */
.acc-subnav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.acc-subnav a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.acc-subnav a .icon { width: 16px; height: 16px; }
.acc-subnav a:hover { color: var(--text); }
.acc-subnav a.active { color: var(--primary-ink); border-bottom-color: var(--primary-ink); }
.acc-period { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.acc-period label { font-size: 0.8rem; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.acc-period input { min-width: 150px; }
/* ===== Public profile + Account settings (professional layout) ===== */
.profile-page,
.settings-page {
    padding-bottom: 40px;
}

.profile-hero .avatar {
    width: 88px;
    height: 88px;
    font-size: 1.9rem;
}

.profile-hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    color: #fff;
}

.profile-hero-sub {
    margin-top: 8px;
    font-size: 0.82rem;
}

.profile-job-title {
    margin-top: 2px;
    font-weight: 600;
    font-size: 0.95rem;
    opacity: 0.95;
}

.profile-hero-sub span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.profile-hero-sub .icon,
.record-hero-badge .badge-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Action buttons row under the hero */
.profile-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
}

/* Stat cards specific to the profile use a slightly tighter min-height */
.profile-stats .stat-card {
    min-height: 88px;
    text-align: center;
    align-items: center;
}

/* Two-column: main content + listings sidebar on wide screens */
.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (min-width: 900px) {
    .profile-grid.has-listings,
    .profile-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.profile-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.card.profile-card,
.card.settings-card {
    padding: 22px 24px;
    overflow: visible;
}

.card.profile-card:hover,
.card.settings-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

.profile-bio {
    margin: 0;
    color: var(--text);
    line-height: 1.6;
}

.empty-hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

/* Reviews */
.review-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.review-item {
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.review-item:first-child {
    padding-top: 0;
    border-top: none;
}

.review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.review-head strong {
    font-size: 0.95rem;
}

.review-body {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Listings section */
.profile-listings {
    margin-top: 6px;
}

/* ===== Account settings ===== */
.settings-hero .avatar {
    width: 72px;
    height: 72px;
}

.settings-page form + .settings-card,
.settings-page .settings-card + .settings-card,
.settings-page .settings-card {
    margin-bottom: 18px;
}

.settings-page form {
    margin-bottom: 18px;
}

/* Breathing room above the full-width submit button (Save changes / Change password) so it isn't
   flush against the last field. */
.settings-card button[type="submit"].block {
    margin-top: 18px;
}

.settings-page .settings-card .field:last-child,
.settings-page .settings-card .row:last-child {
    margin-bottom: 0;
}

/* Avatar upload control */
.avatar-field-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.avatar-field-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
    flex: 1;
}

.avatar-field-row .avatar-lg {
    flex-shrink: 0;
}


/* ===== Buyer document library (settings) ===== */
.doc-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}

.doc-table thead th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    padding: 0 10px 8px;
    border-bottom: 1px solid var(--border);
}

.doc-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

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

.doc-table-date {
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.85rem;
}

.doc-table-actions {
    white-space: nowrap;
    text-align: right;
}

.doc-table-actions form {
    display: inline-block;
    margin: 0;
}

/* Inline rename form in the name cell */
.doc-rename-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.doc-rename-form .doc-icon {
    width: 18px;
    height: 18px;
    color: var(--primary-ink);
    flex-shrink: 0;
}

.doc-rename-form input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
}

.doc-rename-form input:focus {
    outline: none;
    border-color: var(--primary-500);
}

.doc-rename-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--muted);
    box-shadow: none;
    cursor: pointer;
}

.doc-rename-save:hover {
    color: var(--primary-ink);
    border-color: var(--primary-500);
    background: var(--primary-tint-bg);
}

.doc-rename-save .icon { width: 16px; height: 16px; }

/* Reusable view / remove buttons (settings table + elsewhere) */
.doc-view,
.doc-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--muted);
    box-shadow: none;
    cursor: pointer;
}

.doc-view { margin-right: 6px; }

.doc-view:hover {
    color: var(--primary-ink);
    border-color: var(--primary-500);
    background: var(--primary-tint-bg);
}

.doc-remove:hover {
    color: #b91c1c;
    border-color: #fca5a5;
    background: #fef2f2;
}

.doc-view .icon,
.doc-remove .icon { width: 16px; height: 16px; }

/* Add-document form */
.doc-add-form {
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}

.doc-add-row {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 12px;
}

@media (max-width: 560px) {
    .doc-add-row { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Documents tab: buyer-provided subsection ===== */
.doc-subhead {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.doc-subhead svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.doc-subhead .meta {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* A little role tag beside a document name (ID / Pre-approval). */
.doc-tag {
    flex-shrink: 0;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary-ink);
    background: var(--primary-tint-bg);
    border: 1px solid var(--primary-tint-border);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

/* ===== Public "Find an Estate Agent" directory ===== */
.agency-directory .record-hero { margin-bottom: 18px; }

.agency-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.agency-region-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.agency-region-chip:hover {
    border-color: var(--primary-500);
    color: var(--primary-ink);
}

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

.agency-region-count {
    font-size: 0.72rem;
    background: var(--gray-100);
    color: var(--muted);
    padding: 1px 8px;
    border-radius: var(--radius-full);
}

.agency-region-chip.active .agency-region-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.agency-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 14px;
}

.card.agency-directory-card {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card.agency-directory-card:hover { transform: none; box-shadow: 0 1px 3px rgba(23, 32, 35, 0.09), 0 8px 20px -8px rgba(23, 32, 35, 0.12); }

/* Buttons row on a directory card ("View listings" + optional "Website"). */
.agency-directory-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}
.agency-directory-actions .btn { flex: 1; min-width: 130px; }

/* Public agency page header. */
.agency-public-hero {
    display: flex;
    align-items: center;
    gap: 16px;
}
.agency-public-logo {
    width: 64px;
    height: 64px;
    border-radius: 12px;
}
.agency-public-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.agency-directory-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agency-directory-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: contain;
    background: var(--gray-100);
    flex-shrink: 0;
}

.agency-directory-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-tint-bg);
    color: var(--primary-ink);
}

.agency-directory-logo-fallback .icon { width: 22px; height: 22px; }

.agency-directory-name { font-size: 1.02rem; font-weight: 800; }

.agency-directory-address {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
    flex: 1;
}

.agency-directory-pin { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--primary-ink); }

/* Map popup: agency link + non-linked variant */
.erf-map-card-link { display: block; color: #0f766e !important; font-weight: 700; margin-top: 6px; font-style: normal; }
.erf-map-card-static { cursor: default; }

/* ===== Grouped lead card: property list + indicators ===== */
.lead-indicators {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 8px 0 6px;
}

.lead-prop-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--gray-100);
    padding: 2px 9px;
    border-radius: var(--radius-full);
}

.lead-prop-count .lead-prop-icon {
    width: 13px;
    height: 13px;
}

.lead-new-flag {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    background: var(--accent-500);
    padding: 2px 9px;
    border-radius: var(--radius-full);
}

.lead-prop-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lead-prop-list li {
    font-size: 0.85rem;
    line-height: 1.35;
}

.lead-prop-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
}

.lead-prop-list a:hover {
    color: var(--primary-ink);
    text-decoration: underline;
}

.lead-prop-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-500);
    flex-shrink: 0;
}

/* ===== Register: account-type segmented selector ===== */
.acct-type-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .acct-type-seg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Scoped with .acct-type-seg so these beat the generic `.field label` rule (display:block +
   uppercase), which was clobbering the flex layout and mis-aligning the icon/label. */
.acct-type-seg .acct-type-opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 58px;
    padding: 10px 12px;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    border: 1.5px solid var(--field-border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--muted);
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.acct-type-seg .acct-type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.acct-type-seg .acct-type-opt .icon { width: 20px; height: 20px; flex-shrink: 0; }
.acct-type-seg .acct-type-opt:hover { border-color: var(--primary-500); color: var(--primary-ink); }
.acct-type-seg .acct-type-opt.selected { border-color: var(--primary-600); background: var(--primary-tint-bg); color: var(--primary-ink); box-shadow: inset 0 0 0 1px var(--primary-600); }
.acct-fields { display: none; }
.acct-fields.active { display: block; }

/* ===== Franchise announcements ===== */
.announce-list { display: flex; flex-direction: column; gap: 12px; }
.announce-item { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.announce-item.pinned { border-color: var(--primary-tint-border); background: var(--primary-tint-bg); }
.announce-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.announce-head strong { font-size: 0.98rem; display: inline-flex; align-items: center; gap: 6px; }
.announce-pin { width: 14px; height: 14px; color: var(--accent-500); }
.announce-body { margin: 8px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.announce-actions { display: flex; gap: 8px; margin-top: 12px; }
.announce-actions form { margin: 0; }

/* Branch dashboard: head-office updates card (priority, at the top) */
.franchise-hq-card { border: 1.5px solid var(--primary-600); border-radius: var(--radius-lg); background: var(--primary-tint-bg); padding: 16px 18px; margin-bottom: 18px; }
.franchise-hq-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.franchise-hq-head strong { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-ink-strong); }
.franchise-hq-new { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; background: var(--accent-500); padding: 2px 8px; border-radius: var(--radius-full); }
.franchise-hq-all { margin-left: auto; font-size: 0.85rem; font-weight: 700; color: var(--primary-ink); }
.franchise-hq-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--primary-tint-border); }
.franchise-hq-item:first-of-type { border-top: none; }
.franchise-hq-item strong { font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; }
.franchise-hq-item.unread strong { font-weight: 800; }

/* ===== Franchise targets & leaderboard ===== */
/* Consolidated "Targets" card on the dashboard — each target is one compact row, not a big banner. */
.dash-targets { margin-bottom: 18px; padding: 18px 20px; }
.dash-targets-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.dash-targets-head strong { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 800; color: var(--text); }
.dash-targets-head .dash-targets-manage { margin-left: auto; font-weight: 600; font-size: 0.85rem; }
.dash-target-row { padding: 12px 0; border-top: 1px solid var(--border); }
.dash-target-row:first-of-type { border-top: none; padding-top: 0; }
.dash-target-row:last-of-type { padding-bottom: 0; }
.dash-target-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.dash-target-label { font-weight: 700; font-size: 0.88rem; color: var(--text); }
.dash-target-pct { font-weight: 800; font-size: 0.82rem; color: var(--muted); flex-shrink: 0; }
.dash-target-pct.is-hit { color: var(--primary-ink); }
.dash-target-row .target-meter { margin: 0 0 6px; }

.target-meter { height: 8px; background: var(--gray-100); border-radius: var(--radius-full); overflow: hidden; margin-bottom: 3px; }
.target-meter span { display: block; height: 100%; background: var(--accent-500); }
.target-set-form { display: flex; align-items: center; gap: 6px; margin: 0; }
.target-set-form input { width: 110px; }
.target-rand { color: var(--muted); font-weight: 700; }

/* ---------- Auth pages (login): split brand panel + form card ---------- */
.auth-page {
    padding: 48px 16px 64px;
    background:
        radial-gradient(900px 420px at 50% -120px, var(--primary-tint-bg), transparent 70%),
        var(--bg);
}

.auth-shell {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 44px 40px;
    color: #fff;
    background:
        radial-gradient(520px 320px at 110% 110%, rgba(249, 115, 22, 0.22), transparent 60%),
        radial-gradient(420px 300px at -10% -10%, rgba(20, 184, 166, 0.35), transparent 60%),
        linear-gradient(160deg, var(--primary-600), var(--primary-900));
}

.auth-aside-logo {
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: -0.02em;
}

.auth-aside-logo span { color: var(--accent-500); }

.auth-aside h2 {
    margin: 0 0 22px;
    font-size: 1.9rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.auth-aside ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.auth-aside li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

.auth-aside li .icon {
    width: 34px;
    height: 34px;
    padding: 8px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.auth-aside-foot {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
}

.auth-main {
    min-width: 0;
    padding: 44px 44px 36px;
}

/* Small EF tile above the heading, same look as the app icon */
.auth-mark {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    margin-bottom: 18px;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: #fff;
    background: linear-gradient(145deg, var(--primary-600), var(--primary-700));
    box-shadow: 0 6px 14px rgba(11, 84, 78, 0.28);
}

.auth-mark span + span { color: var(--accent-500); }

.auth-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.auth-subtitle {
    margin: 6px 0 26px;
    color: var(--muted);
    font-size: 0.97rem;
}

.auth-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger-text);
    font-size: 0.9rem;
}

.auth-alert .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.auth-alert p { margin: 0; }
.auth-alert p + p { margin-top: 4px; }

.auth-form { display: grid; gap: 18px; }

.auth-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}

.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.auth-link-sm {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--primary-ink);
}

.auth-link-sm:hover { text-decoration: underline; }

.auth-input { position: relative; }

.auth-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    transition: color 0.15s ease;
}

.auth-input input {
    width: 100%;
    height: 50px;
    padding: 0 46px 0 44px;
    margin: 0;
    font: inherit;
    font-size: 0.98rem;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--field-border);
    border-radius: 12px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-input input::placeholder { color: var(--gray-400); }

.auth-input input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.18);
}

.auth-input:focus-within .auth-input-icon { color: var(--primary-ink); }

/* Keep browser autofill from painting the fields pale blue */
.auth-input input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
}

.auth-reveal {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 9px;
    color: var(--muted);
    cursor: pointer;
}

.auth-reveal:hover { color: var(--text); background: var(--field-bg); }
/* Stay centred in the field in every state: the site-wide button:active nudge and hover shadow must not apply here. */
.auth-reveal:hover, .auth-reveal:active, .auth-reveal:focus { transform: translateY(-50%); box-shadow: none; }
.auth-reveal:focus { outline: none; }
.auth-reveal:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 1px; }
.auth-reveal .icon { width: 19px; height: 19px; }
.auth-reveal-hide { display: none; }
.auth-reveal[aria-pressed="true"] .auth-reveal-show { display: none; }
.auth-reveal[aria-pressed="true"] .auth-reveal-hide { display: inline-flex; }
.auth-reveal-show { display: inline-flex; }

.auth-submit {
    width: 100%;
    height: 50px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, var(--primary-600), var(--primary-700));
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(11, 84, 78, 0.25);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.auth-submit:hover { filter: brightness(1.08); box-shadow: 0 10px 22px rgba(11, 84, 78, 0.32); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit .icon { width: 18px; height: 18px; }

.auth-main .oauth-divider { margin: 22px 0 16px; }

.auth-switch {
    margin: 24px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.93rem;
}

.auth-switch a { font-weight: 700; color: var(--primary-ink); }
.auth-switch a:hover { text-decoration: underline; }

.auth-demo {
    margin-top: 26px;
    padding: 14px 16px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--field-bg);
}

.auth-demo-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}

.auth-demo-title span { font-weight: 500; color: var(--muted); }
.auth-demo-title .icon { width: 15px; height: 15px; color: var(--muted); }
.auth-demo-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.auth-demo-chip {
    padding: 6px 14px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
}

.auth-demo-chip:hover { border-color: var(--primary-500); }

@media (max-width: 820px) {
    .auth-shell { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
    .auth-aside { display: none; }
}

@media (max-width: 520px) {
    .auth-page { padding: 24px 12px 40px; }
    .auth-main { padding: 30px 22px 26px; }
    .auth-shell { border-radius: 20px; }
    .auth-title { font-size: 1.55rem; }
}

/* ---------- Admin > All Listings ---------- */
.al-page { max-width: 1180px; }
.al-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.al-head .btn { display: inline-flex; align-items: center; gap: 6px; }
.al-head .btn .icon { width: 16px; height: 16px; }

.al-search { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.al-search-box { position: relative; flex: 1 1 360px; }
.al-search-icon { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.al-search-box input {
    width: 100%; height: 46px; margin: 0; padding: 0 14px 0 42px;
    font: inherit; font-size: 0.97rem; color: var(--text);
    background: var(--surface); border: 1.5px solid var(--field-border); border-radius: 12px;
}
.al-search-box input:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.18); }
.al-search .btn { height: 46px; padding: 0 22px; display: inline-flex; align-items: center; border-radius: 12px; }
.al-tabs { margin-bottom: 18px; }

/* One listing found by ID: big card with the actions */
.al-spot {
    display: grid; grid-template-columns: 260px minmax(0, 1fr);
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
    box-shadow: var(--shadow-md); overflow: hidden; margin-bottom: 22px;
}
.al-spot.is-disabled { border-color: var(--danger-border); }
.al-spot-photo {
    min-height: 220px; background: var(--field-bg) center / cover no-repeat;
    display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.al-spot-photo .icon { width: 40px; height: 40px; }
.al-spot.is-disabled .al-spot-photo { filter: grayscale(0.85); opacity: 0.7; }
.al-spot-body { padding: 20px 24px 22px; }
.al-spot-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.al-spot-title { margin: 10px 0 4px; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.al-spot-price { margin: 0 0 14px; font-weight: 700; color: var(--primary-ink-strong); }
.al-spot-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 20px; margin: 0 0 16px; }
.al-spot-meta dt { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.al-spot-meta dd { margin: 2px 0 0; font-size: 0.9rem; color: var(--text); overflow-wrap: anywhere; }
.al-spot-disabled {
    display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 10px 12px;
    border-radius: 10px; background: var(--danger-bg); border: 1px solid var(--danger-border);
    color: var(--danger-text); font-size: 0.88rem;
}
.al-spot-disabled .icon { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }

.al-id {
    display: inline-block; padding: 2px 8px; border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.8rem; font-weight: 700;
    background: var(--field-bg); color: var(--text);
}
.al-disabled-pill { background: var(--danger-bg); color: var(--danger-text); }
.al-featured-pill { background: var(--accent-tint-bg); color: var(--accent-600); }

.al-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.al-actions form { display: inline-flex; margin: 0; }
.al-actions .btn, .al-actions button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.al-actions .icon { width: 15px; height: 15px; }
.al-actions .btn-sm { padding: 6px 11px; font-size: 0.8rem; border-radius: 8px; }
.al-warn { color: var(--warning-text, #92400e); }

/* Table of listings */
.al-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow-x: auto; box-shadow: var(--shadow-sm); }
.al-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.al-table th {
    text-align: left; padding: 12px 14px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--muted); background: var(--field-bg); border-bottom: 1px solid var(--border);
}
.al-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
.al-table tr:last-child td { border-bottom: none; }
.al-table tbody tr:hover { background: var(--field-bg); }
.al-table tr.is-disabled .al-thumb { filter: grayscale(0.85); opacity: 0.65; }
.al-table tr.is-disabled .al-title { color: var(--muted); }
.al-cell-listing { display: flex; align-items: center; gap: 12px; min-width: 280px; }
.al-thumb {
    width: 64px; height: 48px; flex-shrink: 0; border-radius: 8px; background: var(--field-bg) center / cover no-repeat;
    display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
}
.al-thumb .icon { width: 20px; height: 20px; }
.al-listing-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.al-title { font-weight: 700; color: var(--text); line-height: 1.3; }
.al-title:hover { color: var(--primary-ink); text-decoration: underline; }
.al-sub { display: block; font-size: 0.8rem; color: var(--muted); }
.al-agency { font-weight: 600; }
.al-price { font-weight: 700; white-space: nowrap; }
.al-date { white-space: nowrap; color: var(--muted); }
.al-cell-actions { width: 1%; }
.al-cell-actions .al-actions { flex-wrap: nowrap; justify-content: flex-end; }

.al-empty { text-align: center; padding: 48px 16px; background: var(--surface); border: 1px dashed var(--border); border-radius: 16px; }
.al-empty > .icon { width: 30px; height: 30px; color: var(--muted); }
.al-empty p { margin: 6px 0 0; }

@media (max-width: 860px) {
    .al-spot { grid-template-columns: minmax(0, 1fr); }
    .al-spot-photo { min-height: 180px; }
    .al-table thead { display: none; }
    .al-table, .al-table tbody, .al-table tr, .al-table td { display: block; width: 100%; }
    .al-table tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
    .al-table td { border: none; padding: 4px 0; }
    .al-table td[data-label]::before { content: attr(data-label) ": "; font-size: 0.78rem; color: var(--muted); }
    .al-cell-listing { min-width: 0; }
    .al-cell-actions { width: 100%; }
    .al-cell-actions .al-actions { flex-wrap: wrap; justify-content: flex-start; padding-top: 8px; }
}

/* Admin agencies: "matching X" note from global search */
.admin-search-note { margin: -4px 0 14px; }

/* ---------- Book a Demo: "The ErfFind app" section (video in a phone frame) ---------- */
.dl-app {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 5vw, 64px);
    align-items: center; padding: clamp(28px, 4vw, 48px);
    border-radius: 28px; border: 1px solid var(--border);
    background:
        radial-gradient(520px 360px at 100% 0%, var(--primary-tint-bg), transparent 70%),
        radial-gradient(420px 300px at 0% 100%, var(--accent-tint-bg), transparent 70%),
        var(--surface);
}
.dl-app-copy h2 { font-size: clamp(1.6rem, 2.4vw + 0.8rem, 2.4rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.12; margin: 8px 0 12px; }
.dl-app-lead { color: var(--muted); font-size: 1.05rem; line-height: 1.6; margin: 0 0 24px; }
.dl-app-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.dl-app-points li { display: flex; gap: 14px; align-items: flex-start; }
.dl-app-point-icon {
    display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
    background: var(--primary-tint-bg); color: var(--primary-ink-strong);
}
.dl-app-point-icon .icon { width: 21px; height: 21px; }
.dl-app-points strong { display: block; font-size: 1rem; margin: 1px 0 3px; }
.dl-app-points div > span { display: block; color: var(--muted); font-size: 0.93rem; line-height: 1.5; }
.dl-app-badge {
    display: inline-flex; align-items: center; gap: 8px; margin: 26px 0 0; padding: 8px 14px;
    border-radius: 999px; font-size: 0.86rem; font-weight: 700;
    background: var(--primary-tint-bg); color: var(--primary-ink-strong); border: 1px solid var(--primary-tint-border);
}
.dl-app-badge .icon { width: 16px; height: 16px; }

.dl-app-visual { display: flex; justify-content: center; }
/* A simple modern phone: dark bezel, rounded screen, small camera dot */
.dl-phone {
    position: relative; width: min(290px, 78vw); aspect-ratio: 9 / 19.4; padding: 11px;
    border-radius: 46px; background: #0d1413;
    box-shadow: 0 0 0 2px #26302f inset, 0 30px 60px rgba(6, 58, 54, 0.28), 0 10px 22px rgba(0, 0, 0, 0.18);
    transform: rotate(-2deg);
}
.dl-phone::before {
    content: ""; position: absolute; top: 20px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
    border-radius: 50%; background: #05090a; box-shadow: 0 0 0 2px #1b2423; z-index: 2;
}
/* "Coming soon" card floating over the phone's lower corner, like a store badge (until the app is on Google Play) */
.dl-phone-wrap { position: relative; }
.dl-phone-soon {
    position: absolute; left: -34px; bottom: 64px; z-index: 3;
    display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px;
    border-radius: 16px; background: var(--surface, #fff); border: 1px solid var(--border, #e3e8e7);
    box-shadow: 0 18px 40px rgba(6, 58, 54, 0.18), 0 4px 10px rgba(0, 0, 0, 0.06);
}
.dl-phone-soon-icon {
    display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
    background: var(--accent-tint-bg, #fff1e6); color: var(--accent-500, #f97316);
}
.dl-phone-soon-icon .icon { width: 20px; height: 20px; }
.dl-phone-soon-text { display: flex; flex-direction: column; line-height: 1.25; }
.dl-phone-soon-text small {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-500, #f97316);
}
.dl-phone-soon-text strong { font-size: 0.95rem; color: var(--text, #10201e); }
.dl-phone-video {
    display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 36px; background: #0b544e;
}

@media (max-width: 900px) {
    .dl-app { grid-template-columns: minmax(0, 1fr); }
    .dl-app-visual { order: -1; }
    .dl-phone { transform: none; }
    .dl-phone-soon { left: 50%; bottom: -22px; transform: translateX(-50%); white-space: nowrap; }
    .dl-phone-wrap { margin-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) { .dl-phone { transform: none; } }

/* ---------- Book a Demo: "A look inside" CRM screenshots ---------- */
.dl-peek { margin-top: clamp(40px, 6vw, 64px); }
.dl-peek-head { text-align: center; margin-bottom: 22px; }
.dl-peek-head h3 { margin: 0 0 4px; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.dl-peek-head p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.dl-shot { margin: 0; }
.dl-shot-bar {
    display: flex; align-items: center; gap: 6px; padding: 10px 14px;
    background: var(--field-bg); border: 1px solid var(--border); border-bottom: 0; border-radius: 14px 14px 0 0;
}
.dl-shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-300); }
.dl-shot-bar i:first-child { background: #f87171; }
.dl-shot-bar i:nth-child(2) { background: #fbbf24; }
.dl-shot-bar i:nth-child(3) { background: #34d399; }
.dl-shot-bar span { margin-left: 10px; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.dl-shot-img {
    overflow: hidden; border: 1px solid var(--border); border-radius: 0 0 14px 14px;
    background: #f8fafa; box-shadow: 0 24px 48px rgba(6, 58, 54, 0.12), 0 6px 14px rgba(0, 0, 0, 0.05);
}
.dl-shot-img img { display: block; width: 100%; height: auto; }
/* The pipeline crop cuts through the second row of cards: fade it out so the cut looks intended. */
.dl-shot-fade { position: relative; }
.dl-shot-fade::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
    background: linear-gradient(to bottom, rgba(248, 250, 250, 0), #f8fafa 92%); pointer-events: none;
}
.dl-shot figcaption { margin-top: 14px; color: var(--muted); font-size: 0.93rem; line-height: 1.55; }
.dl-shot figcaption strong { color: var(--text); }
.dl-shot-main { max-width: 1000px; margin: 0 auto; }
.dl-peek-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 34px; }
.dl-peek-more {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; text-align: center;
    margin: 30px 0 0; color: var(--muted); font-size: 0.95rem;
}
.dl-peek-more .icon { width: 17px; height: 17px; color: var(--primary-ink); }
.dl-peek-more a { font-weight: 700; color: var(--primary-ink); }
@media (max-width: 760px) {
    .dl-peek-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Book a Demo: decluttered pieces ---------- */
/* Franchise pricing as one compact strip instead of a second pricing section */
.dl-franchise-strip {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; padding: 18px 22px;
    border-radius: 18px; border: 1px solid var(--primary-tint-border); background: var(--primary-tint-bg);
}
.dl-franchise-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); color: var(--primary-ink-strong); flex-shrink: 0; }
.dl-franchise-icon .icon { width: 22px; height: 22px; }
.dl-franchise-copy { flex: 1 1 280px; display: flex; flex-direction: column; gap: 2px; }
.dl-franchise-copy strong { font-size: 1.02rem; }
.dl-franchise-copy span { color: var(--muted); font-size: 0.9rem; }
.dl-franchise-tiers { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.dl-franchise-tiers li {
    display: flex; flex-direction: column; padding: 10px 16px; min-width: 170px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.dl-franchise-tiers span { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.dl-franchise-tiers strong { font-size: 1.2rem; font-weight: 900; letter-spacing: -0.02em; color: var(--text); }
.dl-franchise-tiers small { font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.dl-franchise-tiers em { font-style: normal; font-size: 0.8rem; color: var(--primary-ink); font-weight: 600; }

/* "What happens next" timeline in the booking aside */
.dl-next { margin: 26px 0 22px; }
.dl-next-title { display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.dl-next ol { list-style: none; margin: 0; padding: 0; counter-reset: dlnext; }
.dl-next li { position: relative; padding: 0 0 16px 44px; counter-increment: dlnext; }
.dl-next li::before {
    content: counter(dlnext); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; color: #fff; background: var(--primary-600);
}
.dl-next li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: var(--primary-tint-border); }
.dl-next strong { display: block; font-size: 0.95rem; }
.dl-next li span { display: block; color: var(--muted); font-size: 0.88rem; line-height: 1.45; }

/* Optional form fields, folded away */
.dl-more { margin: 4px 0 14px; border: 1px dashed var(--border); border-radius: 12px; background: var(--field-bg); }
.dl-more summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px; font-weight: 700; font-size: 0.92rem; color: var(--primary-ink);
}
.dl-more summary::-webkit-details-marker { display: none; }
.dl-more summary > span { display: inline-flex; align-items: center; gap: 8px; }
.dl-more summary .icon { width: 17px; height: 17px; transition: transform .2s; }
.dl-more[open] summary .icon { transform: rotate(45deg); }
.dl-more summary small { font-weight: 500; color: var(--muted); font-size: 0.8rem; }
.dl-more-body { padding: 4px 14px 6px; }

/* Floating book button */
.dl-sticky {
    position: fixed; right: 20px; bottom: 20px; z-index: 60;
    display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px;
    background: var(--accent-500); color: #fff; font-weight: 800; font-size: 0.95rem; text-decoration: none;
    box-shadow: 0 12px 28px rgba(249, 115, 22, 0.38), 0 4px 10px rgba(0, 0, 0, 0.12);
    opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .25s, transform .25s;
}
.dl-sticky .icon { width: 18px; height: 18px; }
.dl-sticky:hover { background: var(--accent-600); color: #fff; }
.dl-sticky.is-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 640px) {
    .dl-sticky { left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .dl-sticky { transition: none; } }
/* The site's own back-to-top button would sit under the floating button on this page */
body:has(.dl-sticky.is-visible) .back-to-top { bottom: 84px; }
/* Phones: feature cards as compact icon + text rows, so the list isn't a long scroll */
@media (max-width: 560px) {
    .dl-features { gap: 10px; }
    .dl-feature { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 16px; border-radius: 14px; }
    .dl-feature-icon { grid-row: span 2; width: 40px; height: 40px; margin: 0; border-radius: 11px; }
    .dl-feature-icon .icon { width: 20px; height: 20px; }
    .dl-feature h3 { margin: 0 0 3px; font-size: 0.98rem; }
    .dl-feature p { margin: 0; font-size: 0.9rem; }
}

/* Unread enquiry replies: dot on the mobile menu button + highlighted rows in the Inbox */
.header-menu-toggle { position: relative; }
.menu-toggle-dot {
    position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%;
    background: #ef4444; box-shadow: 0 0 0 2px var(--primary-700);
}
.thread-item.is-unread { background: var(--primary-tint-bg); border-color: var(--primary-tint-border); }
.thread-item.is-unread strong { color: var(--text); }
.thread-item.is-unread .thread-last { color: var(--text); font-weight: 600; }
.thread-unread-badge {
    flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #ef4444; color: #fff; font-size: 0.75rem; font-weight: 800;
}

/* Buyer profile: "buying journey" badge (from the buyer's settings) */
.record-hero-badge.profile-journey-badge { background: rgba(255, 255, 255, 0.95); color: var(--primary-700); }
.record-hero-badge.profile-journey-badge.journey-cash_buyer,
.record-hero-badge.profile-journey-badge.journey-pre_approved { background: var(--accent-500); color: #fff; }

/* Leads board: the buyer replied and the agent hasn't opened the conversation yet */
.kanban-card.has-reply { box-shadow: 0 0 0 2px #ef4444 inset, var(--shadow-sm); }
.lead-reply-flag {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
    background: #ef4444; color: #fff; font-size: 0.72rem; font-weight: 800;
}
.lead-reply-flag .lead-reply-icon { width: 12px; height: 12px; }
.lead-prop-dot--reply { background: #ef4444; }

/* ---------- Lead + client chats: attachments and composer ---------- */
.chat-thread { display: flex; flex-direction: column; margin-top: 10px; }
.record-tab-panel .chat-thread { max-height: 460px; overflow-y: auto; padding: 4px 2px 8px; }
.chat-intro { margin: 0 0 8px; }
.chat-empty { text-align: center; padding: 18px 0; }
.chat-body { overflow-wrap: anywhere; }
.chat-attach-image { display: block; margin: -3px -6px 8px; }
.chat-attach-image img {
    display: block; max-width: 260px; max-height: 260px; width: auto; height: auto;
    border-radius: 10px; object-fit: cover; background: rgba(0, 0, 0, 0.06);
}
.chat-attach-file {
    display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 10px 12px; min-width: 220px;
    border-radius: 10px; text-decoration: none; color: inherit;
    background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.08);
}
.message-bubble.mine .chat-attach-file { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.25); color: #fff; }
.chat-attach-file > .icon { width: 22px; height: 22px; flex-shrink: 0; }
.chat-attach-file span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-attach-file strong { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attach-file small { font-size: 0.72rem; opacity: 0.75; }
.chat-attach-dl { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.8; }
.chat-attach-file:hover { filter: brightness(0.97); }

.chat-composer { margin-top: 14px; }
.chat-composer textarea {
    width: 100%; min-height: 84px; padding: 12px 14px; font: inherit; resize: vertical;
    border: 1.5px solid var(--field-border); border-radius: 12px; background: var(--surface); color: var(--text);
}
.chat-composer textarea:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16); }
.chat-composer-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.chat-attach-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; cursor: pointer;
    font-size: 0.88rem; font-weight: 600; color: var(--primary-ink); background: var(--primary-tint-bg);
    border: 1px solid var(--primary-tint-border);
}
.chat-attach-btn .icon { width: 17px; height: 17px; }
.chat-attach-btn:hover { border-color: var(--primary-500); }
.chat-attach-name { font-size: 0.85rem; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.chat-send { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.chat-send .icon { width: 16px; height: 16px; }
.chat-composer-hint { margin: 8px 0 0; font-size: 0.78rem; color: var(--muted); }
.chat-unavailable { display: flex; gap: 10px; align-items: flex-start; text-align: left; }
.chat-unavailable .icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); margin-top: 2px; }
.chat-unavailable p { margin: 0; }
.count-badge.chat-unread-count { background: #ef4444; color: #fff; }
@media (max-width: 560px) {
    .chat-attach-btn span { display: none; }
    .chat-attach-image img { max-width: 100%; }
}
/* The public layout styles plain forms as rows; the chat composer always stacks. */
form.chat-composer { display: block; width: 100%; max-width: none; }
form.chat-composer > textarea { display: block; }
form.chat-composer .chat-composer-bar { width: 100%; }
form.chat-composer .chat-attach-btn { white-space: nowrap; }
/* Public pages style every form <label>; reset the attach button so it looks the same everywhere. */
form.chat-composer label.chat-attach-btn {
    all: unset; box-sizing: border-box; position: static; display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border-radius: 10px; cursor: pointer; font-size: 0.88rem; font-weight: 600; line-height: 1.2;
    color: var(--primary-ink); background: var(--primary-tint-bg); border: 1px solid var(--primary-tint-border);
}
form.chat-composer label.chat-attach-btn:hover { border-color: var(--primary-500); }
form.chat-composer label.chat-attach-btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }

/* ---------- Property page: pinned "Enquire" bar on phones/tablets (property_detail.php) ---------- */
.enquire-bar {
    display: none;
}

@media (max-width: 959px) {
    .enquire-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 20px -10px rgba(23, 32, 35, 0.35);
        transition: transform 0.2s ease;
    }

    .enquire-bar.is-hidden {
        transform: translateY(110%);
    }

    .enquire-bar-price {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .enquire-bar-price strong {
        font-size: 1.05rem;
        white-space: nowrap;
    }

    .enquire-bar-price .meta {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .enquire-bar .btn {
        flex-shrink: 0;
    }

    /* Room so the footer isn't hidden behind the bar, and the back-to-top button sits above it. */
    body.has-enquire-bar {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    body.has-enquire-bar .back-to-top {
        bottom: calc(84px + env(safe-area-inset-bottom));
    }
}

/* Phone numbers never break mid-number ("073 421 / 5861") in tables and cards. */
a[href^="tel:"] {
    white-space: nowrap;
}

/* ---------- Property enquiry form (guests + buyers) ---------- */

.enquiry-form .enq-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 14px;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.4;
}

.enquiry-form .enq-consent input {
    width: auto;
    min-height: 0;
    padding: 0;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ---------- Buying position (BuyerPosition helper): lead cards, conversation, filters ---------- */
.pos-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}

.pos-pill.pos-serious { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.pos-pill.pos-progress { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.pos-pill.pos-browsing { background: var(--surface); color: var(--muted); border-color: var(--border); }
.pos-pill.pos-unknown { background: transparent; color: var(--muted); border: 1px dashed var(--border); font-weight: 600; }

.lead-tier-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.lead-tier-dot.pos-serious { background: #16a34a; }
.lead-tier-dot.pos-progress { background: #d97706; }
.lead-tier-dot.pos-browsing { background: #94a3b8; }
.lead-tier-dot.pos-unknown { background: transparent; border: 1px dashed #94a3b8; }

:root[data-theme="dark"] .pos-pill.pos-serious { background: rgba(22, 163, 74, 0.18); color: #86efac; border-color: rgba(22, 163, 74, 0.35); }
:root[data-theme="dark"] .pos-pill.pos-progress { background: rgba(217, 119, 6, 0.18); color: #fcd34d; border-color: rgba(217, 119, 6, 0.35); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pos-pill.pos-serious { background: rgba(22, 163, 74, 0.18); color: #86efac; border-color: rgba(22, 163, 74, 0.35); }
    :root:not([data-theme="light"]) .pos-pill.pos-progress { background: rgba(217, 119, 6, 0.18); color: #fcd34d; border-color: rgba(217, 119, 6, 0.35); }
}

.kanban-card-position { display: flex; flex-wrap: wrap; gap: 6px; }
/* A long note (e.g. a website-form enquiry) shows its first lines on the card; the whole note is on the lead. */
.kanban-card-notes { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.kanban-card[hidden] { display: none; }

.lead-tier-bar { margin-bottom: 16px; }

.lead-tier-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.lead-tier-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

/* Hover stays light (the global button hover turns buttons the dark brand colour, which hid the chip's dark text). */
.lead-tier-chip:hover,
.lead-tier-note-ok:hover {
    border-color: var(--primary-ink);
    background: var(--primary-tint-bg);
    box-shadow: none;
}

.lead-tier-chip.is-active {
    border-color: var(--primary-ink);
    background: var(--primary-tint-bg);
    color: var(--primary-ink);
}

.lead-tier-count { color: var(--muted); font-weight: 700; }

.lead-tier-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 0.8rem;
}

.lead-tier-note .icon { flex-shrink: 0; margin-top: 2px; width: 14px; height: 14px; }

/* Visitor enquiry confirmation, shown in place of the form (property_detail.php). */
.enquiry-sent {
    text-align: center;
    border-color: #bbf7d0;
}

.enquiry-sent-icon svg,
.enquiry-sent-icon .icon {
    width: 40px;
    height: 40px;
    color: #16a34a;
    margin-bottom: 6px;
}


/* ---------- WhatsApp history on leads/clients (whatsapp/_history.php) ---------- */
.wa-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px;
    margin-top: 20px;
    scroll-margin-top: 90px;
}

.wa-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.wa-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.05rem;
}

.wa-panel-title svg { color: #25d366; width: 20px; height: 20px; }
.wa-import-form { margin: 0; }
.wa-import-btn { cursor: pointer; }

.wa-howto { margin: 12px 0; font-size: 0.86rem; }
.wa-howto summary { cursor: pointer; color: var(--primary-ink); font-weight: 600; }
.wa-howto ol { margin: 8px 0; padding-left: 20px; line-height: 1.6; }

.wa-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 520px;
    overflow-y: auto;
    padding: 12px;
    background: #efeae2; /* WhatsApp's chat background, so it reads as "from WhatsApp" */
    border-radius: var(--radius-md);
}

.wa-history--preview { max-height: none; }

.wa-msg {
    align-self: flex-start;
    max-width: 78%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 10px;
    background: #ffffff;
    color: #111b21;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    font-size: 0.9rem;
}

.wa-msg--agent { align-self: flex-end; background: #d9fdd3; }
.wa-msg-meta { font-size: 0.72rem; color: #667781; }
.wa-msg-body { white-space: pre-line; overflow-wrap: anywhere; }
.wa-msg-img { max-width: 220px; max-height: 220px; border-radius: 6px; display: block; }
.wa-msg-file { display: inline-flex; align-items: center; gap: 6px; color: #027eb5; font-weight: 600; overflow-wrap: anywhere; }
.wa-msg-file svg { width: 16px; height: 16px; flex-shrink: 0; }

.wa-event {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: #54656f;
    font-size: 0.75rem;
}

.wa-event svg { width: 13px; height: 13px; color: #25d366; }
.wa-note { margin: 8px 0 0; font-size: 0.78rem; }
.record-tab-panel .wa-panel { border: 0; padding: 0; margin: 0; background: transparent; }

/* ---------- Email Branding editor (email-branding/show.php) ---------- */
.eb-layout {
    display: grid;
    gap: 20px;
    margin-top: 18px;
    align-items: start;
}

@media (min-width: 1100px) {
    .eb-layout { grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); }
    .eb-preview { position: sticky; top: 76px; }
}

.eb-section { padding: 18px; margin-bottom: 14px; }
.eb-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 1rem; }
.eb-section-title svg { width: 18px; height: 18px; color: var(--primary-ink); }
.eb-section-title .meta { font-weight: 500; font-size: 0.8rem; }
.eb-label { display: block; margin: 12px 0 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

.eb-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eb-choice--3 { grid-template-columns: repeat(3, 1fr); }
.eb-choice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
}
.eb-choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.eb-choice-card:has(input:checked) { border-color: var(--primary-ink); background: var(--primary-tint-bg); color: var(--primary-ink); }
.eb-choice-card:has(input:focus-visible) { outline: 2px solid var(--primary-ink); outline-offset: 2px; }
.eb-choice-card.is-disabled { opacity: 0.45; cursor: not-allowed; }
.eb-mini { width: 100%; height: 22px; border-radius: 5px; }
.eb-mini--white { background: #ffffff; border: 1px solid #e5e7eb; border-bottom: 5px solid; }

.eb-colour { margin-top: 12px; }
.eb-switch { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.eb-switch input { width: auto; min-height: 0; margin: 0; }
.eb-colour-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.eb-colour-row input[type=color] { width: 44px; height: 36px; padding: 2px; border-radius: 8px; cursor: pointer; }
.eb-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.eb-swatch { width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
.eb-colour-hint { margin: 6px 0 0; display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.eb-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }

.eb-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.eb-toggle { position: relative; cursor: pointer; }
.eb-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.eb-toggle span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--border); font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.eb-toggle input:checked + span { border-color: var(--primary-ink); background: var(--primary-tint-bg); color: var(--primary-ink); }
.eb-toggle input:checked + span::before { content: "✓ "; }
.eb-toggle input:focus-visible + span { outline: 2px solid var(--primary-ink); outline-offset: 2px; }

.eb-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 0; background: var(--bg, var(--surface)); }
.eb-savebar [data-dirty] { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-600, var(--muted)); }
.eb-savebar [data-dirty][hidden] { display: none; }
.eb-own-logo { padding: 10px; margin-bottom: 10px; border: 1px dashed var(--border); border-radius: var(--radius-md); background: #ffffff; text-align: center; }
.eb-own-logo img { max-height: 60px; max-width: 100%; }

.eb-preview { border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); overflow: hidden; background: #e5e7eb; }
.eb-preview-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.eb-preview-from { display: flex; flex-direction: column; min-width: 0; }
.eb-preview-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.eb-preview-tools select { width: auto; min-height: 36px; padding: 6px 10px; }
.eb-device { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.eb-device button { display: inline-flex; align-items: center; gap: 5px; min-height: 0; padding: 7px 12px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.eb-device button svg { width: 14px; height: 14px; }
.eb-device button.is-active { background: var(--primary-tint-bg); color: var(--primary-ink); }
.eb-frame-wrap { display: flex; justify-content: center; padding: 0; transition: padding 0.2s ease; }
.eb-frame-wrap.is-phone { padding: 18px 0; }
.eb-frame { display: block; width: 100%; height: 780px; border: 0; background: #f3f4f6; transition: width 0.2s ease; }
.eb-frame-wrap.is-phone .eb-frame { width: 390px; max-width: 100%; height: 760px; border-radius: 24px; box-shadow: 0 0 0 10px #111827, 0 12px 30px rgba(0, 0, 0, 0.25); }
.eb-test { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface); border-top: 1px solid var(--border); margin: 0; }
.eb-colour-row[hidden], .eb-colour-hint[hidden] { display: none; }
.eb-locked-note { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 0.8rem; color: var(--primary-ink); }
.eb-locked-note[hidden] { display: none; }
.eb-locked-note .icon { width: 14px; height: 14px; }

/* ---------- "Set a password" prompt for enquiry-created buyer accounts (partials/_set_password_prompt.php) ---------- */
.set-password-prompt { padding-top: 12px; padding-bottom: 0; }
.set-password-prompt[hidden] { display: none; }
.set-password-prompt-card {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--primary-tint-bg);
    border: 1px solid var(--primary-tint-border, var(--border));
    border-radius: var(--radius-md);
}
.set-password-prompt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary-ink);
    flex-shrink: 0;
}
.set-password-prompt-icon svg { width: 18px; height: 18px; }
.set-password-prompt-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.set-password-prompt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.set-password-prompt-actions .btn, .set-password-prompt-actions button { width: auto; }

/* ---------- Leads: whose lead (agency-wide view for Super Users / managers) ---------- */
.lead-owner-filters { margin-bottom: 8px; align-items: center; }
.lead-filter-label { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.lead-waiting { margin-left: 2px; padding: 1px 7px; border-radius: 999px; background: #fee2e2; color: #b91c1c; font-size: 0.7rem; font-weight: 700; }
.lead-chip-mine:not(.is-active) { border-color: var(--primary-tint-border, var(--border)); }
.kanban-card-owner { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: var(--surface-2, #f1f5f9); color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.kanban-card-owner svg { width: 12px; height: 12px; }
.kanban-card-owner.is-mine { background: var(--primary-tint-bg); color: var(--primary-ink); }
:root[data-theme="dark"] .lead-waiting { background: rgba(185, 28, 28, 0.25); color: #fca5a5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lead-waiting { background: rgba(185, 28, 28, 0.25); color: #fca5a5; } }

/* Leads: phone filter button + dismissible "Buyer says" note (inbox/leads.php) */
.lead-filter-toggle { display: none; }
.lead-tier-note[hidden] { display: none; }
.lead-tier-note-ok { margin-left: auto; flex-shrink: 0; min-height: 0; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--primary-ink); font-size: 0.75rem; font-weight: 700; cursor: pointer; width: auto; }
@media (max-width: 700px) {
    .lead-filter-toggle { display: inline-flex; width: auto; margin: 0 0 10px; }
    .lead-tier-bar { display: none; }
    .lead-tier-bar.is-open { display: block; }
}
/* Empty WhatsApp history: one slim line (whatsapp/_history.php) */
.wa-panel--empty { padding: 12px 16px; }
.wa-panel--empty .wa-panel-head { align-items: center; }
.wa-panel--empty .wa-panel-title { font-size: 0.95rem; }
.wa-panel--empty .wa-howto { margin: 6px 0 0; font-size: 0.8rem; }

/* Feature pickers (Add listing, search "More filters"): big tappable chips instead of 13px checkboxes
   with tiny capitalised labels. The read-only feature list on property pages is untouched. */
.features-grid--pick { gap: 8px; }
.features-grid--pick .checkbox-field {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.25;
}
.features-grid--pick .checkbox-field input {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    accent-color: var(--primary-ink);
}
.features-grid--pick .checkbox-field:has(input:checked) {
    border-color: var(--primary-ink);
    background: var(--primary-tint-bg);
    color: var(--primary-ink);
}

/* New Listing: video picked on the form, uploaded right after the listing saves. */
#new-video .errors { margin-bottom: 10px; }
#new-video [hidden], .new-video-overlay-card [hidden] { display: none; }
.new-video-chosen {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: 0.9rem;
    min-width: 0;
}
.new-video-chosen svg { flex: none; width: 18px; height: 18px; color: var(--primary-ink); }
.new-video-chosen span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.new-video-chosen button { flex: none; padding: 6px 12px; min-height: 0; }
.new-video-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.55);
}
.new-video-overlay[hidden] { display: none; }
.new-video-overlay-card {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.new-video-overlay-card .listing-video-progress { border: 0; padding: 0; }
.new-video-overlay-card .btn { margin-top: 14px; }

/* System Health → Backups: live progress while a backup runs. */
.backup-progress { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.backup-progress-bar { flex: 1; height: 10px; border-radius: var(--radius-full); background: rgba(127, 127, 127, 0.25); overflow: hidden; }
.backup-progress-bar span { display: block; height: 100%; border-radius: var(--radius-full); background: currentColor; transition: width 0.6s ease; }
.backup-progress strong { font-size: 0.85rem; min-width: 3ch; text-align: right; }
.backup-status > div span.backup-progress-hint { font-size: 0.78rem; opacity: 0.75; }

/* Listing form: short street/unit number boxes beside the wider name boxes (kept side by side on phones too). */
.search-form .row.address-row { grid-template-columns: 110px minmax(0, 1fr); }
.search-form .row.complex-row { grid-template-columns: minmax(0, 1fr) 110px; }
@media (max-width: 520px) {
    .search-form .row.address-row { grid-template-columns: 84px minmax(0, 1fr); }
    .search-form .row.complex-row { grid-template-columns: minmax(0, 1fr) 84px; }
}
[data-show-listing][hidden], [data-show-ptype][hidden] { display: none !important; }

/* Admin → Users: what each agent is in their agency. */
.agency-role-line { font-size: 0.85rem; }
.agency-role-pill { display: inline-block; padding: 1px 8px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 700; margin-right: 2px; background: var(--gray-100); color: var(--text); }
.agency-role-owner, .agency-role-super_user { background: var(--primary-tint-bg); color: var(--primary-ink-strong); }
.agency-role-agent { background: var(--success-bg, #e6f6ec); color: var(--success-text, #146c2e); }
.agency-role-none { background: var(--warning-bg, #fff4e0); color: var(--warning-text, #8a5a00); }

/* Portals: red count on the sidebar item when a portal turned a listing down. */
.nav-count-badge.nav-count-badge-warn { background: var(--danger, #dc2626); }

/* Portals page, agent view: each of their live listings with a chip per portal. */
.synd-mine { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.synd-mine li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.synd-mine li > a { min-width: 0; overflow-wrap: anywhere; }
.synd-mine-portals { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
@media (max-width: 640px) { .synd-mine-portals { margin-left: 0; width: 100%; } }

/* Leads: a lead that came in from a property portal (e.g. Private Property). */
.type-pill--portal { background: var(--accent-50, #fff7ed); color: var(--accent-600, #ea580c); }

/* ---------- Messaging: chat bubbles, day dividers and composer (team chat, lead and client threads) ---------- */
/* Bubbles size to their text; "mine" uses the agency's own brand colour (--primary-600), "theirs" a soft card. */
.chat-log, .chat-thread { gap: 2px; }
.chat-pane .chat-log { padding: 16px 20px; background: var(--bg, #f6f8f8); }
.message-bubble {
    width: fit-content; max-width: min(75%, 560px); padding: 8px 12px 6px; margin-bottom: 6px;
    border-radius: 16px; font-size: 0.92rem; line-height: 1.45; box-shadow: none; overflow-wrap: anywhere;
}
.message-bubble.mine { align-self: flex-end; margin-left: auto; border-bottom-right-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.message-bubble.theirs { align-self: flex-start; margin-right: auto; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.message-bubble .meta { font-size: 0.68rem; opacity: 0.7; margin-top: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.msg-sender { font-size: 0.74rem; font-weight: 700; color: var(--primary-ink); margin-bottom: 2px; }
.chat-body { white-space: normal; }
/* "Today / Yesterday / Saturday 4 October" dividers */
.chat-day { display: flex; justify-content: center; margin: 12px 0 8px; align-self: stretch; }
.chat-day span {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: var(--muted);
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px;
}

/* Team chat composer: one tidy row (photo, file, growing text box, round send button). These rules win over the
   stacked lead/client composer below, which was making the team chat's buttons wrap above and below the box. */
.chat-pane form.chat-composer {
    display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 12px 16px;
    border-top: 1px solid var(--border); background: var(--surface);
}
.chat-pane form.chat-composer label.chat-attach-btn {
    all: unset; box-sizing: border-box; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; color: var(--muted); transition: background 0.15s, color 0.15s;
}
.chat-pane form.chat-composer label.chat-attach-btn:hover { background: var(--primary-tint-bg); color: var(--primary-ink); }
.chat-pane form.chat-composer label.chat-attach-btn:focus-within { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.chat-pane form.chat-composer label.chat-attach-btn .icon { width: 20px; height: 20px; }
.chat-pane .chat-composer-input { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.chat-pane form.chat-composer textarea {
    width: 100%; min-height: 42px; max-height: 160px; padding: 10px 16px; resize: none; overflow-y: auto;
    border: 1.5px solid var(--field-border); border-radius: 21px; background: var(--field-bg, var(--surface)); font: inherit; line-height: 1.4; color: var(--text);
}
.chat-pane form.chat-composer textarea:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15); }
.chat-send-btn {
    flex-shrink: 0; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; background: var(--primary-600); color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); transition: filter 0.15s, transform 0.05s;
}
.chat-send-btn:hover { filter: brightness(1.1); }
.chat-send-btn:active { transform: scale(0.96); }
.chat-send-btn .icon { width: 18px; height: 18px; margin-left: -1px; }

/* Lead and client threads: a little more air, and a softer composer */
.chat-thread { padding: 6px 2px; }
form.chat-composer textarea { border-radius: 14px; }

/* Empty state: no conversation open */
.chat-pane-empty { background: var(--bg, #f6f8f8); }
.chat-empty-card { max-width: 380px; text-align: center; }
.chat-empty-icon {
    display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; margin-bottom: 14px;
    background: var(--primary-tint-bg); color: var(--primary-ink);
}
.chat-empty-icon .icon { width: 30px; height: 30px; }
.chat-empty-card h2 { margin: 0 0 6px; font-size: 1.2rem; color: var(--text); }
.chat-empty-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
.chat-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 560px) {
    .message-bubble { max-width: 86%; }
    .chat-pane .chat-log { padding: 12px; }
    /* More room for the text on phones: smaller attach buttons, tighter spacing */
    .chat-pane form.chat-composer { gap: 4px; padding: 10px; }
    .chat-pane form.chat-composer label.chat-attach-btn { width: 32px; height: 40px; }
    .chat-pane form.chat-composer label.chat-attach-btn .icon { width: 19px; height: 19px; }
    .chat-pane form.chat-composer textarea { padding: 10px 14px; }
}

/* Agency page → Commission Rate: may agents see the total commission on their own deals? */
.commission-visibility { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.commission-visibility-toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin: 0; font-weight: 400; }
.commission-visibility-toggle input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--primary-600); }
.commission-visibility-toggle strong { display: block; font-size: 0.92rem; color: var(--text); }
.commission-visibility-toggle small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.82rem; line-height: 1.45; }

/* ---------- Blog (/blog, /blog/{slug}) ---------- */
.blog-page, .blog-article-wrap { max-width: 1100px; padding-top: 28px; padding-bottom: 48px; }
.blog-hero { max-width: 720px; margin: 0 0 28px; }
.blog-brand { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.blog-brand-logo { font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1; color: var(--text); }
.blog-brand-logo span { color: var(--accent-500); }
.blog-brand-tag { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--primary-600, #0f766e); padding: 4px 10px; border-radius: 999px; }
.blog-hero h1 { margin: 0 0 10px; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.15; }
.blog-hero p { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 14px); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10); }
.blog-card-media { display: block; aspect-ratio: 16 / 9; background: var(--gray-100); overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap; font-size: 1.6rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--primary-600, #0f766e), #14b8a6); }
.blog-card-placeholder span { color: #fdba74; }
.blog-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card-body h2, .blog-card-body h3 { margin: 0; font-size: 1.12rem; line-height: 1.35; }
.blog-card-body h2 a, .blog-card-body h3 a { color: var(--text); text-decoration: none; }
.blog-card-body h2 a:hover, .blog-card-body h3 a:hover { color: var(--primary-ink); }
.blog-card-excerpt { margin: 0; color: var(--muted); font-size: 0.93rem; line-height: 1.55; }
.blog-meta { margin: 0; color: var(--muted); font-size: 0.82rem; }
.blog-reads { white-space: nowrap; }
.blog-reads .icon { width: 1.05em; height: 1.05em; vertical-align: -0.17em; margin-right: 4px; }
.blog-read { margin-top: auto; padding-top: 4px; font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.blog-read .icon { width: 15px; height: 15px; }
.blog-card-lead { grid-column: 1 / -1; flex-direction: row; }
.blog-card-lead .blog-card-media { flex: 1.25; aspect-ratio: auto; min-height: 300px; }
.blog-card-lead .blog-card-body { flex: 1; padding: 28px; justify-content: center; }
.blog-card-lead h2 { font-size: 1.6rem; }
.blog-card-lead .blog-read { margin-top: 8px; }
.blog-empty { text-align: center; padding: 56px 16px; color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-md, 14px); }
.blog-empty .icon { width: 30px; height: 30px; }
.blog-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; color: var(--muted); font-size: 0.9rem; }
.blog-pager .btn { display: inline-flex; align-items: center; gap: 4px; }
.blog-pager .icon { width: 15px; height: 15px; }
.blog-cta { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; border-radius: var(--radius-md, 14px); background: linear-gradient(135deg, var(--primary-600, #0f766e), #0d9488); color: #fff; }
.blog-cta h2 { margin: 0 0 6px; font-size: 1.3rem; color: #fff; }
.blog-cta p { margin: 0; opacity: 0.92; line-height: 1.5; }
.blog-cta .btn { background: #fff; color: var(--primary-700, #0f5f58); border-color: #fff; white-space: nowrap; font-weight: 700; }
.blog-cta .btn:hover { background: #f0fdfa; color: var(--primary-700, #0f5f58); }
/* Article */
.blog-article { max-width: 760px; margin: 0 auto; }
.blog-back { margin: 0 0 14px; }
.blog-back a { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.blog-back .icon { width: 16px; height: 16px; }
.blog-article header h1 { margin: 0 0 10px; font-size: clamp(1.8rem, 4.5vw, 2.6rem); line-height: 1.15; }
.blog-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md, 14px); margin: 22px 0 6px; display: block; background: var(--gray-100); }
.blog-body { font-size: 1.07rem; line-height: 1.75; color: var(--text); margin-top: 18px; overflow-wrap: anywhere; }
.blog-body h2 { font-size: 1.5rem; line-height: 1.3; margin: 1.8em 0 0.5em; }
.blog-body h3 { font-size: 1.22rem; line-height: 1.35; margin: 1.5em 0 0.4em; }
.blog-body h4 { font-size: 1.05rem; margin: 1.3em 0 0.3em; }
.blog-body p { margin: 0 0 1.1em; }
.blog-body ul, .blog-body ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.blog-body li { margin: 0.35em 0; }
.blog-body blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--primary-600); color: var(--muted); font-style: italic; }
.blog-body blockquote p { margin: 0; }
.blog-body figure { margin: 1.6em 0; }
.blog-body figure img { width: 100%; height: auto; border-radius: 12px; display: block; }
.blog-body figcaption { margin-top: 6px; font-size: 0.85rem; color: var(--muted); text-align: center; }
.blog-body hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.blog-body a { text-decoration: underline; text-underline-offset: 2px; }
.blog-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); }
.blog-share > span { font-weight: 700; font-size: 0.9rem; margin-right: 4px; }
.blog-share a, .blog-share button { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0; box-shadow: none; cursor: pointer; }
.blog-share a:hover, .blog-share button:hover { border-color: var(--primary-600); color: var(--primary-ink); }
.blog-share .icon { width: 17px; height: 17px; }
.blog-share .blog-copy { width: auto; padding: 0 14px; border-radius: 999px; display: inline-flex; gap: 6px; font-size: 0.85rem; font-weight: 600; }
.blog-draft-banner { max-width: 760px; margin: 0 auto 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; background: var(--warning-bg); color: var(--warning-text); font-size: 0.9rem; font-weight: 600; }
.blog-draft-banner .icon { width: 17px; height: 17px; }
.blog-draft-banner a { margin-left: auto; color: inherit; text-decoration: underline; }
.blog-article-wrap .blog-cta { max-width: 760px; margin-left: auto; margin-right: auto; }
.blog-more { margin-top: 44px; }
.blog-article-wrap .blog-more { max-width: 760px; margin-left: auto; margin-right: auto; }
.blog-more h2 { font-size: 1.3rem; margin: 0 0 16px; }
.blog-grid-small .blog-card-body { padding: 14px 16px 16px; }
.blog-grid-small h3 { font-size: 1rem; }
@media (max-width: 900px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-card-lead { flex-direction: column; }
    .blog-card-lead .blog-card-media { min-height: 0; aspect-ratio: 16 / 9; }
    .blog-card-lead .blog-card-body { padding: 18px; }
    .blog-card-lead h2 { font-size: 1.35rem; }
}
@media (max-width: 600px) {
    .blog-page, .blog-article-wrap { padding-top: 18px; }
    .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .blog-cta { flex-direction: column; align-items: flex-start; padding: 20px; }
    .blog-body { font-size: 1.02rem; }
}

/* Franchise head office ↔ branch thread: the shared chat look inside a rounded card. */
.chat-pane.fmsg-pane { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.fmsg-pane .chat-log { min-height: 260px; max-height: 60vh; }
.fmsg-empty { margin: auto; color: var(--muted); font-size: 0.9rem; text-align: center; padding: 24px 0; }
/* Old bubble style kept readable in dark mode wherever it may still appear. */
.fmsg-bubble { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
/* Blog sign-off under every post: the author with "Founder, ErfFind" in the logo's colours. */
.blog-signoff { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md, 14px); background: var(--surface); }
.blog-signoff-mark { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--primary-600, #0f766e); color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.blog-signoff-mark span { color: #fdba74; }
.blog-signoff-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.blog-signoff-text strong { font-size: 1rem; }
.blog-signoff-text > span { color: var(--muted); font-size: 0.9rem; }
.blog-brand-word { font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.blog-brand-word span { color: var(--accent-500, #f97316); }

/* ---------- Free Agent Toolkit (/toolkit) ---------- */
.toolkit { max-width: 1000px; margin: 0 auto; padding-bottom: 20px; }
.toolkit-doc { max-width: 820px; }
.toolkit-hero { text-align: center; padding: 18px 0 8px; }
.toolkit-kicker { display: inline-block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #ea580c; margin-bottom: 8px; }
.toolkit-hero h1 { margin: 0 0 10px; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.toolkit-hero p { margin: 0 auto; max-width: 620px; color: var(--muted); font-size: 1.05rem; line-height: 1.55; }
.toolkit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 26px; }
.toolkit-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md, 14px); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.toolkit-card:hover { border-color: var(--primary-500); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 118, 110, 0.12); }
.toolkit-card-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-tint-bg); color: var(--primary-ink); }
.toolkit-card-icon .icon, .toolkit-card-icon svg { width: 22px; height: 22px; }
.toolkit-card h2, .toolkit-card h3 { margin: 4px 0 0; font-size: 1.08rem; }
.toolkit-group { margin-top: 30px; }
.toolkit-group + .toolkit-group { margin-top: 38px; }
.toolkit-group-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.toolkit-group-head h2 { margin: 0; font-size: 1.25rem; }
.toolkit-group-head p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.toolkit-group .toolkit-grid { grid-template-columns: repeat(var(--tk-cols, 3), minmax(0, 1fr)); margin-top: 16px; }
@media (max-width: 860px) { .toolkit-group .toolkit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .toolkit-group .toolkit-grid { grid-template-columns: minmax(0, 1fr); } }
.toolkit-card p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; flex: 1; }
.toolkit-card-go { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 0.9rem; color: var(--primary-ink); }
.toolkit-card-go svg { width: 15px; height: 15px; }
.toolkit-back { margin: 0 0 12px; }
.toolkit-back a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; }
.toolkit-back svg { width: 15px; height: 15px; }
.toolkit-head h1 { margin: 0 0 8px; font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
.toolkit-head .meta { font-size: 1rem; line-height: 1.55; margin: 0 0 14px; }
.toolkit-section { margin-top: 22px; }
.toolkit-section h2 { font-size: 1.05rem; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--primary-100); }
.toolkit-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.toolkit-checks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.tk-box { flex: none; width: 17px; height: 17px; margin-top: 2px; border: 2px solid var(--primary-600); border-radius: 4px; }
.toolkit-questions { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.toolkit-questions li { line-height: 1.45; }
.toolkit-questions li > span:first-child { display: block; }
.tk-answers { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; color: var(--muted); font-size: 0.88rem; }
.tk-answers i { display: inline-block; width: 13px; height: 13px; border: 1.5px solid var(--muted); border-radius: 3px; margin-left: 8px; }
.tk-answers i:first-child { margin-left: 0; }
.toolkit-note { margin-top: 24px; padding: 12px 14px; border-radius: 10px; background: var(--primary-tint-bg); color: var(--text); font-size: 0.88rem; line-height: 1.5; }
.toolkit-print-fields, .toolkit-print-foot { display: none; }
.tk-brand span, .toolkit-print-foot strong span { color: #f97316; }
.toolkit-cta { margin-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; border-radius: var(--radius-md, 14px); background: linear-gradient(135deg, #0b544e, #0f766e); color: #fff; }
.toolkit-cta h2 { margin: 0 0 6px; font-size: 1.3rem; color: #fff; }
.toolkit-cta .tk-brand span { color: var(--accent-500, #f97316); }
.toolkit-cta p { margin: 0; opacity: 0.94; line-height: 1.5; max-width: 560px; }
.toolkit-cta-actions { display: flex; flex-direction: column; gap: 8px; flex: none; }
.toolkit-cta .btn { background: #fff; color: var(--primary-700, #0b544e); border-color: #fff; white-space: nowrap; font-weight: 700; justify-content: center; }
.toolkit-cta .btn.secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
/* Calculator */
.toolkit-calc { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-top: 8px; }
.toolkit-calc-in, .toolkit-calc-out { padding: 20px; }
.toolkit-calc-in .field { margin-bottom: 14px; }
.toolkit-calc-in .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.toolkit-calc-in .row .field { margin-bottom: 14px; }
@media (max-width: 480px) { .toolkit-calc-in .row { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.tk-big span { display: block; }
.tk-big strong { font-size: 2rem; color: var(--primary-ink); }
.tk-rows { margin: 14px 0 0; display: grid; gap: 8px; }
.tk-rows div { display: flex; justify-content: space-between; gap: 12px; }
.tk-rows dt { color: var(--muted); }
.tk-rows dd { margin: 0; font-weight: 700; }
.tk-rows .tk-sep { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
.tk-warn { color: #b91c1c; font-weight: 600; margin: 10px 0 0; }
/* Lead-leak self-test */
.toolkit-quiz { padding: 22px 24px; margin-top: 8px; }
.toolkit-quiz ol { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 14px; }
.toolkit-quiz p { margin: 0 0 6px; line-height: 1.45; font-weight: 600; }
.tk-yesno { display: flex; gap: 8px; }
.tk-yesno label { cursor: pointer; }
.tk-yesno input { position: absolute; opacity: 0; pointer-events: none; }
.tk-yesno span { display: inline-block; padding: 6px 18px; border: 1.5px solid var(--border); border-radius: 999px; font-weight: 600; font-size: 0.92rem; }
.tk-yesno input:checked + span { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.tk-yesno input:focus-visible + span { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.toolkit-result { display: flex; gap: 20px; align-items: center; padding: 22px 24px; margin-top: 16px; border: 2px solid var(--primary-500); }
.toolkit-result h2 { margin: 0 0 6px; font-size: 1.25rem; }
.toolkit-result p { margin: 0; line-height: 1.5; }
.tk-score { flex: none; text-align: center; }
.tk-score strong { font-size: 2.6rem; color: var(--primary-ink); }
.tk-score span { color: var(--muted); font-weight: 700; }
@media (max-width: 720px) {
    .toolkit-calc { grid-template-columns: minmax(0, 1fr); }
    .toolkit-cta { flex-direction: column; align-items: flex-start; padding: 22px; }
    .toolkit-cta-actions { width: 100%; }
    .toolkit-result { flex-direction: column; align-items: flex-start; }
}
@media print {
    body > .header, .site-footer, .no-print, .back-to-top, .env-banner, [class*="chat-rail"] { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .toolkit { max-width: none; }
    .toolkit-print-fields { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 6px 0 4px; font-size: 0.9rem; }
    .toolkit-print-foot { display: block; margin-top: 16px; font-size: 0.85rem; color: #444; }
    .toolkit-note { background: none; border: 1px solid #ccc; }
    .toolkit-section { break-inside: avoid; }
}
/* Toolkit: optional "contact me" form + owner stats */
.toolkit-lead { margin-top: 28px; }
.toolkit-lead details { border: 2px solid var(--primary-200, #99f6e4); border-radius: var(--radius-md, 14px); background: var(--surface); overflow: hidden; }
.toolkit-lead summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; }
.toolkit-lead summary::-webkit-details-marker { display: none; }
.toolkit-lead summary strong { display: block; font-size: 1.08rem; }
.toolkit-lead summary small { display: block; color: var(--muted); margin-top: 4px; line-height: 1.45; font-size: 0.92rem; }
.toolkit-lead summary .btn { flex: none; white-space: nowrap; }
.toolkit-lead details[open] summary .btn { display: none; }
.tk-lead-form { padding: 0 22px 22px; }
.tk-lead-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tk-lead-form .field { margin-bottom: 12px; }
.tk-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; margin: 4px 0 14px; color: var(--text); font-weight: 400; text-transform: none; letter-spacing: 0; }
.tk-consent { display: flex !important; }
.tk-consent input { flex: none; width: 18px !important; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; }
.tk-consent span { flex: 1; min-width: 0; }
.tk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tk-lead-done { display: flex; gap: 16px; align-items: center; padding: 18px 22px; border-radius: var(--radius-md, 14px); background: var(--primary-tint-bg); border: 2px solid var(--primary-500); }
.tk-lead-done h2 { margin: 0 0 4px; font-size: 1.15rem; }
.tk-lead-done p { margin: 0; line-height: 1.5; }
.tk-lead-tick { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-600); color: #fff; }
.tk-lead-tick svg { width: 22px; height: 22px; }
.pr-toolkit { margin: 0 0 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.pr-toolkit summary { cursor: pointer; padding: 12px 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-toolkit summary svg { width: 18px; height: 18px; color: var(--primary-ink); }
.pr-toolkit-table { margin: 0 16px 8px; width: calc(100% - 32px); }
.pr-toolkit .meta { margin: 0 16px 14px; }
@media (max-width: 600px) {
    .toolkit-lead summary { flex-direction: column; align-items: flex-start; }
    .tk-lead-form .row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* Toolkit in dark mode: the pale-teal panels (--primary-50/100/200 stay light) become dark teal so the text stays readable. */
:root[data-theme="dark"] .toolkit-note,
:root[data-theme="dark"] .tk-lead-done,
:root[data-theme="dark"] .toolkit-card-icon { background: rgba(20, 184, 166, 0.12); color: var(--text); }
:root[data-theme="dark"] .toolkit-card-icon { color: #5eead4; }
:root[data-theme="dark"] .toolkit-section h2 { border-bottom-color: rgba(94, 234, 212, 0.25); }
:root[data-theme="dark"] .toolkit-lead details { border-color: rgba(94, 234, 212, 0.35); }
:root[data-theme="dark"] .tk-box { border-color: #5eead4; }
:root[data-theme="dark"] .tk-big strong, :root[data-theme="dark"] .tk-score strong, :root[data-theme="dark"] .toolkit-card-go { color: #5eead4; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .toolkit-note,
    :root:not([data-theme="light"]) .tk-lead-done,
    :root:not([data-theme="light"]) .toolkit-card-icon { background: rgba(20, 184, 166, 0.12); color: var(--text); }
}

/* Clients: finance tabs above the table (clients/index.php) — the table sits flush inside the card. */
.client-finance-card .record-tab { text-decoration: none; }
.client-finance-card .table-responsive { border: none; border-radius: 0; box-shadow: none; }
.client-finance-empty { padding: 22px 20px; margin: 0; }

/* ---------- Searchable picklist (assets/js/select-search.js, <select data-searchable>) ---------- */
.ss { position: relative; }
.ss.ss-ready > select { display: none; }
.ss-trigger,
.ss-trigger:hover {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border: 1.5px solid var(--field-border);
    border-radius: var(--radius-sm);
    background: var(--field-bg);
    color: var(--text);
    font-size: 0.94rem;
    font-weight: 400;
    text-align: left;
    box-shadow: none;
    transform: none;
}
.ss-trigger:focus-visible,
.ss.open .ss-trigger {
    outline: none;
    border-color: var(--primary-500);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.ss-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-value.ss-empty { color: var(--muted); }
.ss-chevron { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.ss.open .ss-chevron { transform: rotate(180deg); }
.ss-panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    width: max(100%, 340px);
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.ss.ss-up .ss-panel { top: auto; bottom: calc(100% + 6px); }
.ss-search { position: relative; padding: 10px; border-bottom: 1px solid var(--border); }
.ss-search svg { position: absolute; left: 22px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.ss-search input { padding: 9px 12px 9px 36px; font-size: 0.92rem; }
.ss-search input::-webkit-search-cancel-button { cursor: pointer; }
.ss-list { list-style: none; margin: 0; padding: 6px; max-height: 288px; overflow-y: auto; overscroll-behavior: contain; }
.ss-option {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1.3;
}
.ss-label { font-size: 0.92rem; color: var(--text); }
.ss-sub { font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-none .ss-label { color: var(--muted); }
.ss-option.active { background: var(--primary-tint-bg); }
.ss-option[aria-selected="true"] .ss-label { font-weight: 600; color: var(--primary-ink); }
.ss-foot { margin: 0; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--muted); background: var(--gray-50, var(--surface)); }
@media (max-width: 600px) {
    .ss-panel { width: 100%; }
    .ss-list { max-height: 240px; }
}

/* ---------- Admin → Demo Bookings: demo site visits (DemoVisitLog) ---------- */
.demo-visits { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 14px 18px; margin: 18px 0; }
.demo-visits summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; }
.demo-visits summary .icon { width: 18px; height: 18px; }
.demo-visits summary:focus:not(:focus-visible) { outline: none; }
.demo-visits > .meta { margin: 10px 0 12px; }
.demo-visits-table td { vertical-align: top; }
.demo-visit-you { background: var(--primary-tint-bg); color: var(--primary-ink); }
.demo-visit-test { background: var(--accent-tint-bg); color: var(--accent-600); border: 1px solid var(--accent-tint-border); }

/* Remote signing: requests waiting for signatures (listing → Mandate & Compliance Documents). */
.signing-request { border: 1px solid var(--border); border-left: 4px solid var(--primary-600); border-radius: var(--radius-md); padding: 12px 14px; margin: 0 0 12px; background: var(--surface); }
.signing-request-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.signing-request-head strong { display: inline-flex; align-items: center; gap: 6px; }
.signing-request-head .meta { display: block; margin-top: 2px; }
.signing-request-head form button { width: auto; }
.signing-signer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--border); }
.signing-signer-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.signing-signer-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.signing-signer-actions form { margin: 0; }
.signing-signer-actions .btn, .signing-signer-actions button { width: auto; padding: 6px 12px; font-size: 0.82rem; }
.signing-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.signing-status .icon { width: 13px; height: 13px; }
.signing-status.is-signed { background: var(--success-bg); color: var(--success-text); }
.signing-status.is-opened { background: var(--primary-tint-bg); color: var(--primary-ink-strong); }
.signing-status.is-waiting { background: var(--warning-bg); color: var(--warning-text); }
@media (max-width: 560px) {
    .signing-signer-actions { width: 100%; }
    .signing-signer-actions .btn, .signing-signer-actions button, .signing-signer-actions form { flex: 1 1 auto; }
    .signing-signer-actions form button { width: 100%; }
}

/* Each agent's ID on the property portals (Agency → Members, Admin → Users) */
.member-portal-ids { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.portal-id-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2, var(--surface)); color: var(--muted); font-size: 0.76rem; line-height: 1.4; }
.portal-id-chip strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; user-select: all; }
.portal-id-chip.is-none strong { color: var(--muted); font-weight: 500; font-style: italic; user-select: auto; }
.info .member-portal-ids { display: flex; }
.info .member-portal-ids .portal-id-chip { display: inline-flex; width: auto; }

/* ---------- Email Campaigns (Agency → Email Campaigns) ---------- */
.campaign-audience-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.campaign-audience-note > .icon { color: var(--primary-ink); margin-top: 2px; }
.campaign-audience-note strong { display: block; margin-bottom: 2px; }
.campaign-sender { align-items: center; }
.campaign-sender > .icon { align-self: flex-start; }
.campaign-sender-off { font-size: 0.85rem; font-weight: 600; padding: 4px 6px; }
.campaign-sender-text { flex: 1 1 auto; min-width: 0; }
.campaign-sender-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 0 0 auto; }
.campaign-sender-actions form { margin: 0; }
.campaign-sender.is-failed { border-color: #f59e0b; background: #fffbeb; }
.campaign-sender.is-failed > .icon { color: #b45309; }
[data-theme="dark"] .campaign-sender.is-failed { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .5); }
[data-theme="dark"] .campaign-sender.is-failed > .icon { color: #fbbf24; }
@media (max-width: 640px) { .campaign-sender { display: grid; grid-template-columns: auto 1fr; } .campaign-sender-actions { grid-column: 2; justify-content: flex-start; } }
.campaign-empty { text-align: center; padding: 50px 20px; border: 1px dashed var(--border); border-radius: 14px; background: var(--surface); }
.campaign-empty > .icon { width: 40px; height: 40px; color: var(--primary-ink); }
.campaign-empty h2 { margin: 10px 0 6px; font-size: 1.2rem; }
.campaign-empty p { margin: 0 auto 18px; max-width: 460px; }
.campaign-link { font-weight: 700; color: var(--text); }
.campaign-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; background: var(--surface-2, #f1f5f9); color: var(--muted); }
.campaign-status-sent { background: #dcfce7; color: #166534; }
.campaign-status-sending, .campaign-status-queued { background: #e0f2fe; color: #075985; }
.campaign-status-failed { background: #fee2e2; color: #991b1b; }
.campaign-status-skipped, .campaign-status-cancelled { background: #f1f5f9; color: #475569; }
.campaign-status-unsub { background: #fef3c7; color: #92400e; }
[data-theme="dark"] .campaign-status-sent { background: rgba(22, 163, 74, .18); color: #86efac; }
[data-theme="dark"] .campaign-status-sending, [data-theme="dark"] .campaign-status-queued { background: rgba(14, 165, 233, .18); color: #7dd3fc; }
[data-theme="dark"] .campaign-status-failed { background: rgba(220, 38, 38, .2); color: #fca5a5; }
[data-theme="dark"] .campaign-status-skipped, [data-theme="dark"] .campaign-status-cancelled { background: rgba(148, 163, 184, .16); color: #cbd5e1; }
[data-theme="dark"] .campaign-status-unsub { background: rgba(217, 119, 6, .2); color: #fcd34d; }
.campaign-note { display: block; margin-top: 2px; font-size: 0.78rem; }

.campaign-compose { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; margin: 14px 0 18px; }
.campaign-write label { display: block; font-weight: 600; margin-bottom: 12px; }
.campaign-write input, .campaign-write textarea { margin-top: 6px; }
.campaign-write textarea { min-height: 240px; line-height: 1.55; }
.campaign-step { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin: 0 0 14px; }
.campaign-step span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-600); color: #fff; font-size: 0.85rem; }
.campaign-hint { margin: 0; }
.campaign-chip { display: inline-block; padding: 1px 8px; border-radius: 6px; border: 1px dashed var(--primary-500); background: var(--primary-tint-bg); color: var(--primary-ink); font: 600 0.82rem ui-monospace, Consolas, monospace; box-shadow: none; }
.campaign-chip:hover { background: var(--primary-tint-bg); box-shadow: none; }
.campaign-preview-wrap { position: sticky; top: 84px; }
.campaign-preview-label { display: block; margin-bottom: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 0.72rem; }
.campaign-preview { background: #f3f4f6; border-radius: 14px; padding: 14px; color: #111827; }
.campaign-preview-subject { font-weight: 800; font-size: 1.02rem; padding: 2px 6px 0; }
.campaign-preview-from { font-size: 0.8rem; color: #6b7280; padding: 0 6px 10px; }
.campaign-preview-body { background: #fff; border-radius: 10px; padding: 18px 20px; font: 15px/1.55 Arial, Helvetica, sans-serif; }
.campaign-preview-body p { margin: 0 0 12px; }
.campaign-preview-text { white-space: pre-line; margin-bottom: 14px; min-height: 60px; }
.campaign-preview-sig { color: #374151; }
.campaign-preview-foot { margin: 14px 0 0 !important; padding-top: 10px; border-top: 1px solid #f1f5f9; font-size: 0.74rem; color: #6b7280; text-align: center; }

.campaign-recipients-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.campaign-count { font-weight: 700; color: var(--primary-ink); }
.campaign-count.is-over { color: var(--danger, #b91c1c); }
.campaign-tools select { width: auto; flex: 0 1 auto; }
.campaign-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.campaign-tools input[type="search"] { flex: 1 1 240px; max-width: 360px; }
.campaign-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.campaign-filters button { padding: 8px 12px; font-size: 0.84rem; }
.campaign-list { max-height: 460px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; }
.campaign-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.campaign-person:last-child { border-bottom: 0; }
.campaign-person input { width: 18px; height: 18px; margin: 0; }
.campaign-person.is-on { background: var(--primary-tint-bg); }
.campaign-person.is-off { cursor: default; opacity: .62; }
.campaign-person-name { display: flex; flex-direction: column; min-width: 0; }
.campaign-person-name strong, .campaign-person-name .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-person-meta { display: flex; align-items: center; gap: 8px; }
.campaign-person-why { grid-column: 2 / -1; font-size: 0.78rem; color: var(--muted); font-style: italic; }
.campaign-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin: 16px 0 30px; }
.campaign-actions button:disabled { opacity: .5; cursor: not-allowed; }

.campaign-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 14px; }
.campaign-stat { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: center; }
.data-table th .th-sort { all: unset; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; }
.data-table th .th-sort:hover, .data-table th .th-sort.is-sorted { color: var(--text); }
.data-table th .th-sort:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.th-sort-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .3; }
.th-sort.is-sorted .th-sort-arrow { opacity: 1; }
.th-sort.is-sorted[data-dir="asc"] .th-sort-arrow { border-top: 0; border-bottom: 5px solid currentColor; }
.campaign-stat strong { display: block; font-size: 1.6rem; line-height: 1.1; }
.campaign-stat span { color: var(--muted); font-size: 0.84rem; }
.campaign-progress { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; margin: 6px 0; }
.campaign-progress span { display: block; height: 100%; background: var(--primary-600); transition: width .4s; }
.campaign-sent-body { margin-top: 14px; }

/* Client profile: the Email updates switch */
.email-updates-toggle { display: inline; margin: 0; }
.email-updates-toggle button.record-hero-badge { border: 1px dashed rgba(255, 255, 255, .45); cursor: pointer; font: inherit; box-shadow: none; background: rgba(255, 255, 255, .12); color: inherit; }
.email-updates-toggle button.record-hero-badge:hover { background: rgba(255, 255, 255, .24); box-shadow: none; }
.email-updates-toggle button.email-updates-on { border-style: solid; border-color: #86efac; background: #dcfce7; color: #166534; }
[data-theme="dark"] .email-updates-toggle button.email-updates-on { background: rgba(22, 163, 74, .18); border-color: rgba(134, 239, 172, .4); color: #86efac; }
.record-hero-badge.email-updates-off { opacity: .85; }

@media (max-width: 860px) {
    .campaign-compose { grid-template-columns: minmax(0, 1fr); }
    .campaign-preview-wrap { position: static; }
    .campaign-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .campaign-person { grid-template-columns: auto minmax(0, 1fr); }
    .campaign-person-meta { grid-column: 2; }
}
.campaign-write, .campaign-recipients, .campaign-sent-body { padding: 18px 20px; }
.campaign-sent-body > .meta { display: block; margin-bottom: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 0.72rem; }

.campaign-preview-frame { display: block; width: 100%; min-height: 320px; border: 0; border-radius: 10px; background: #f3f4f6; }
.campaign-preview-note { margin: 10px 4px 0; font-size: 0.78rem; color: #6b7280; }
.campaign-preview-note a { color: #0f766e; }

/* Email Campaigns: listings in the newsletter */
.campaign-listings { margin: 4px 0 12px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 12px; }
.campaign-listings-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.campaign-listings-head button { padding: 8px 14px; font-size: 0.86rem; }
.campaign-listings-empty { margin: 8px 0 0; }
.campaign-chosen { display: flex; flex-wrap: wrap; gap: 6px; }
.campaign-chosen:not(:empty) { margin-top: 10px; }
.campaign-chosen-item { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 6px 5px 12px; border-radius: 999px; background: var(--primary-tint-bg); color: var(--primary-ink); font-size: 0.84rem; font-weight: 600; }
.campaign-chosen-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.campaign-chosen-x { width: 22px; height: 22px; padding: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.1rem; line-height: 1; box-shadow: none; }
.campaign-chosen-x:hover { background: rgba(0, 0, 0, .08); box-shadow: none; }
.campaign-picker { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, .55); }
.campaign-picker[hidden] { display: none; }
.campaign-picker-box { width: 100%; max-width: 620px; max-height: min(720px, 90vh); display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px; background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.campaign-picker-head { display: flex; align-items: center; gap: 12px; }
.campaign-picker-head h2 { margin: 0; font-size: 1.15rem; }
.campaign-picker-head .meta { margin-left: auto; font-weight: 700; }
.campaign-picker-close { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: transparent; color: var(--text); font-size: 1.4rem; box-shadow: none; }
.campaign-picker-close:hover { background: var(--border); box-shadow: none; }
.campaign-picker-list { overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; }
.campaign-picker-item { display: grid; grid-template-columns: auto 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.campaign-picker-item:last-child { border-bottom: 0; }
.campaign-picker-item[hidden] { display: none; }
.campaign-picker-item.is-on { background: var(--primary-tint-bg); }
.campaign-picker-item input { width: 18px; height: 18px; margin: 0; }
.campaign-picker-item img, .campaign-picker-noimg { width: 72px; height: 52px; border-radius: 8px; object-fit: cover; }
.campaign-picker-noimg { display: grid; place-items: center; background: var(--border); color: var(--muted); }
.campaign-picker-text { display: flex; flex-direction: column; min-width: 0; }
.campaign-picker-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-picker-foot { display: flex; justify-content: flex-end; gap: 8px; }
.campaign-sent-email { margin-top: 14px; padding: 18px 20px; }
.campaign-sent-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.campaign-sent-label { display: block; margin-bottom: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 0.72rem; }
.campaign-sent-meta { margin: 0; display: grid; gap: 4px; }
.campaign-sent-meta div { display: flex; gap: 10px; font-size: 0.9rem; }
.campaign-sent-meta dt { width: 70px; flex-shrink: 0; color: var(--muted); }
.campaign-sent-meta dd { margin: 0; font-weight: 600; }
.campaign-sent-frame { display: block; width: 100%; max-width: 680px; min-height: 400px; margin: 0 auto; border: 0; border-radius: 12px; background: #f3f4f6; }
.campaign-sent-note { margin: 10px 0 0; text-align: center; }
details.campaign-sent-email > summary { list-style: none; cursor: pointer; margin-bottom: 0; }
details.campaign-sent-email > summary::-webkit-details-marker { display: none; }
details.campaign-sent-email[open] > summary { margin-bottom: 14px; }
.campaign-sent-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-weight: 700; font-size: 0.88rem; color: var(--primary-ink); white-space: nowrap; }
.campaign-sent-toggle .icon { width: 16px; height: 16px; transition: transform .2s; }
details[open] .campaign-sent-toggle .icon { transform: rotate(180deg); }
details:not([open]) .campaign-sent-toggle .when-open, details[open] .campaign-sent-toggle .when-closed { display: none; }
details.campaign-sent-email > summary:hover .campaign-sent-toggle { border-color: var(--primary-500); }
.synd-off-note { color: #b45309; margin: 2px 0 8px; display: flex; gap: 6px; align-items: flex-start; }
[data-theme="dark"] .synd-off-note { color: #fbbf24; }
.synd-edit-note { margin: 4px 0 8px; display: flex; gap: 6px; align-items: flex-start; }
.synd-off-note[hidden] { display: none; }

/* Agency → Reports (app/Views/reports/index.php): filters, summary, headline numbers, tables. */
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.report-head .meta { max-width: 640px; }
.report-downloads { display: flex; gap: 8px; flex-wrap: wrap; }
.report-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.report-filter { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 170px; }
.report-filter[hidden], .report-apply[hidden] { display: none; }
.report-filter span { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.report-filter .form-control { margin: 0; }
.report-range { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--muted); align-self: center; }
.report-range .icon { width: 16px; height: 16px; }
.report-summary { background: var(--primary-tint-bg); border: 1px solid var(--primary-tint-border, var(--border)); border-left: 4px solid var(--primary-600); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 18px; font-size: 0.97rem; line-height: 1.6; color: var(--text); }
.report-summary strong { color: var(--primary-ink-strong); }
.report-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (min-width: 1280px) { .report-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 760px) { .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.report-kpi { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--primary-600); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.report-kpi-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.report-kpi-label .icon { width: 15px; height: 15px; color: var(--primary-ink); }
.report-kpi strong { font-size: clamp(1.2rem, 3.6vw, 1.7rem); font-weight: 900; letter-spacing: -0.02em; color: var(--primary-ink-strong); line-height: 1.15; overflow-wrap: anywhere; }
.report-kpi-note { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.report-kpi-warn { border-top-color: var(--accent-500); }
.report-kpi-warn strong, .report-kpi-warn .report-kpi-label .icon { color: var(--accent-600); }
.report-section { padding: 20px 22px; margin-bottom: 20px; }
.report-h2 { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 800; margin: 0 0 14px; }
.report-h2 .icon { width: 18px; height: 18px; color: var(--primary-ink); }
.report-waiting { border-left: 4px solid var(--accent-500); }
.report-waiting .report-h2 .icon { color: var(--accent-600); }
.report-table td.num, .report-table th.num, .report-section .data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table tfoot td { font-weight: 800; border-top: 2px solid var(--primary-600); background: var(--primary-tint-bg); padding: 12px 16px; }
@media (min-width: 701px) {
    /* Ten columns on a laptop: let the headings wrap so Commission isn't cut off behind a sideways scroll. */
    .report-table th { white-space: normal; vertical-align: bottom; line-height: 1.25; padding: 10px 12px; }
    .report-table td, .report-table tfoot td { padding-left: 12px; padding-right: 12px; }
}
.report-table td a, .report-td-action a { font-weight: 700; color: var(--primary-ink); text-decoration: none; }
.report-table td a:hover, .report-td-action a:hover { text-decoration: underline; }
.report-td-action { text-align: right; }
.report-bar-col { width: 38%; min-width: 120px; }
.report-bar { display: block; height: 10px; border-radius: 999px; background: var(--gray-100); overflow: hidden; margin-top: 5px; }
.report-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary-500), var(--primary-600)); }
.report-pill { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--primary-tint-bg); color: var(--primary-ink); }
.report-pill-warn { display: inline-block; margin-left: 6px; font-size: 0.7rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--accent-tint-bg); color: var(--accent-600); border: 1px solid var(--accent-tint-border); }
.report-foot { margin: 10px 0 0; font-size: 0.8rem; color: var(--muted); }
.report-empty { color: var(--muted); font-size: 0.9rem; margin: 30px 0; text-align: center; }
.report-how { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 30px; font-size: 0.88rem; }
.report-how summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text); }
.report-how summary .icon { width: 16px; height: 16px; color: var(--primary-ink); }
.report-how ul { margin: 12px 0 2px; padding-left: 20px; color: var(--muted); line-height: 1.6; }
.report-how li strong { color: var(--text); }
@media (max-width: 700px) {
    .report-table tfoot { display: block; }
    .report-table tfoot tr { border-color: var(--primary-600); }
    .report-table tfoot td { background: none; border-top: none; padding: 8px 0; }
    .report-tfoot-wide { display: none !important; } /* the agency totals are the headline numbers above */
    .report-bar-col { display: none !important; }
    .report-td-action { text-align: left; }
}
@media (max-width: 760px) {
    .report-range { margin: 0; width: 100%; }
    .report-filter { min-width: 0; flex: 1 1 140px; }
    .report-section { padding: 16px; }
}

/* Agency → Website → Your own domain (AgencyDomain). */
.domain-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.domain-head { display: flex; align-items: flex-start; gap: 12px; }
.domain-head h2 { margin: 0 0 2px; font-size: 1rem; font-weight: 800; }
.domain-head .meta { margin: 0; max-width: 720px; }
.domain-status { margin-left: auto; flex-shrink: 0; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; background: var(--accent-tint-bg); color: var(--accent-600); border: 1px solid var(--accent-tint-border); }
.domain-status-live { background: var(--primary-tint-bg); color: var(--primary-ink); border-color: var(--primary-tint-border); }
.domain-status-problem { background: rgba(220, 38, 38, 0.08); color: #b91c1c; border-color: rgba(220, 38, 38, 0.3); }
.domain-form { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.domain-form input { flex: 1 1 260px; max-width: 420px; margin: 0; }
.domain-note { margin: 12px 0 0; font-size: 0.9rem; }
.domain-current { margin: 14px 0 8px; font-size: 0.92rem; line-height: 1.5; }
.domain-current a { color: var(--primary-ink); }
.domain-warn { display: flex; gap: 8px; align-items: flex-start; color: #b91c1c; font-size: 0.88rem; margin: 0 0 8px; }
.domain-warn .icon { width: 18px; height: 18px; flex-shrink: 0; }
.domain-dns { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.domain-dns summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; }
.domain-dns .meta { margin: 8px 0; }
.domain-dns .table-responsive { max-width: 640px; }
.domain-records code { font-size: 0.88rem; user-select: all; }
.domain-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.domain-actions form { margin: 0; }
@media (max-width: 700px) {
    .domain-head { flex-wrap: wrap; }
    .domain-status { margin-left: 0; }
}
.report-asking { display: block; font-size: 0.74rem; color: var(--muted); font-weight: 500; }
.report-ratio { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
.report-ratio .icon { width: 16px; height: 16px; color: var(--primary-ink); }
/* Mark as sold / rented (listings/_sold_modal.php). */
.sold-modal-box { max-width: 420px; text-align: left; }
.sold-modal-title { margin: 0 0 2px; font-size: 1.1rem; font-weight: 800; }
#sold-modal-listing { margin: 0 0 14px; }
.sold-modal-box .field input { width: 100%; }
.sold-modal-note { font-size: 0.8rem; margin: 4px 0 14px; }
.sold-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Agency → Members: away badge and the Away / Remove dialogs (agency/_member_modals.php, LeadRouting). */
.member-away { display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; gap: 5px; margin-top: 6px; font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--gray-100); color: var(--muted); border: 1px solid var(--border); }
.member-away.is-away { background: var(--accent-tint-bg); color: var(--accent-600); border-color: var(--accent-tint-border); }
.member-modal-box { max-width: 460px; text-align: left; }
.member-modal-title { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; }
.member-modal-box > .meta { margin: 0 0 14px; }
.member-modal-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.member-modal-box .field input, .member-modal-box .field select { width: 100%; }
.member-modal-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.member-modal-spacer { flex: 1; }
@media (max-width: 480px) { .member-modal-dates { grid-template-columns: minmax(0, 1fr); } }
/* A lead that went to a colleague (LeadRouting): "Covering for Jaco while away". */
.kanban-card-covering, .lead-covering { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: var(--accent-tint-bg); color: var(--accent-600); border: 1px solid var(--accent-tint-border); font-size: 0.72rem; font-weight: 700; }
.kanban-card-covering .icon, .lead-covering .icon { width: 13px; height: 13px; }
.lead-covering { margin: -4px 0 12px; font-size: 0.8rem; }
.member-modal-actions button[hidden] { display: none; }
.oauth-note { margin: 8px 0 0; text-align: center; font-size: 0.8rem; }
#google-signup[hidden] { display: none; }

/* Hand a lead to another agent (principals, app/Views/inbox/_reassign.php) */
.lead-reassign { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid #d97706; border-radius: 12px; background: color-mix(in srgb, #d97706 7%, var(--surface)); }
.lead-reassign-text { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.lead-reassign-text .meta { font-size: 0.8rem; }
.lead-reassign select { flex: 0 1 220px; width: auto; min-width: 160px; }
.lead-reassign .btn { width: auto; }
.lead-response-form { display: flex; flex-direction: column; gap: 14px; }
.lead-response-form textarea { width: 100%; }
.lead-response-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.lead-response-actions .btn-icon-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.88rem; }
.lead-response-actions .btn-icon-link .icon { width: 16px; height: 16px; }

/* ===== Deals: the deal progress tracker (app/Views/deals) ===== */
.deals-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.deals-head .btn { width: auto; }
.deals-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.deals-tabs a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; font-size: 0.88rem; text-decoration: none; }
.deals-tabs a span { margin-left: 4px; color: var(--muted); font-weight: 700; }
.deals-tabs a.active { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.deals-tabs a.active span { color: rgba(255, 255, 255, 0.8); }
.deals-empty { text-align: center; padding: 40px 20px; border: 1px dashed var(--border); border-radius: 16px; background: var(--surface); }
.deals-empty > .icon { width: 34px; height: 34px; color: var(--primary-ink); }
.deals-empty h2 { margin: 8px 0 4px; font-size: 1.1rem; }
.deals-empty .btn { width: auto; margin-top: 12px; }
.deals-list { display: grid; gap: 12px; }
.deal-card { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.deal-card:hover { border-color: var(--primary-tint-border); box-shadow: var(--shadow-md); }
.deal-card-photo, .deal-hero-photo { flex: none; width: 112px; height: 84px; border-radius: 10px; overflow: hidden; background: var(--bg); display: grid; place-items: center; color: var(--muted); }
.deal-card-photo img, .deal-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deal-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.deal-card-title { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.deal-card-title strong { font-size: 1rem; }
.deal-card-price { font-weight: 800; white-space: nowrap; }
.deal-card-people { font-size: 0.86rem; }
.deal-card-next { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.88rem; }
.deal-card-count { margin-left: auto; font-weight: 700; }
.deal-bar { display: flex; gap: 3px; }
.deal-bar-seg { flex: 1; height: 7px; border-radius: 99px; background: var(--border); }
.deal-bar-lg .deal-bar-seg { height: 10px; }
.deal-bar-seg.is-done { background: #16a34a; }
.deal-bar-seg.is-skipped { background: #86efac; }
.deal-bar-seg.is-next { background: var(--primary-600); opacity: 0.45; }
.deal-bar-seg.is-overdue { background: #dc2626; opacity: 1; }
.deal-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--primary-tint-bg); color: var(--primary-ink); white-space: nowrap; }
.deal-chip .icon { width: 12px; height: 12px; }
.deal-chip.is-late { background: var(--danger-bg); color: var(--danger-text); }
.deal-chip.is-done { background: var(--success-bg); color: var(--success-text); }
.deal-chip.is-off { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.deal-chip.is-live { background: var(--primary-tint-bg); color: var(--primary-ink); }

.deal-page { max-width: none; }
.deal-hero { display: flex; gap: 18px; margin: 10px 0 16px; padding: 16px 18px; }
.deal-hero-photo { width: 150px; height: 112px; }
.deal-hero-main { flex: 1; min-width: 0; }
.deal-hero-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.deal-hero-top h1 { margin: 0; font-size: 1.35rem; }
.deal-hero-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 0.85rem; flex-wrap: wrap; }
.deal-hint { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--success-bg); color: var(--success-text); font-size: 0.88rem; display: flex; gap: 8px; align-items: flex-start; }
.deal-hint.is-off { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.deal-hint .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.deal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.deal-h2 { margin: 0 0 12px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.deal-steps { padding: 18px 20px; }
.deal-timeline { list-style: none; margin: 0; padding: 0; }
.deal-step { position: relative; display: flex; gap: 14px; padding-bottom: 18px; scroll-margin-top: 90px; }
.deal-step:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: var(--border); }
.deal-step.is-done:not(:last-child)::before { background: #16a34a; }
.deal-dot { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); display: grid; place-items: center; color: var(--muted); font-weight: 800; position: relative; z-index: 1; }
.deal-dot .icon { width: 16px; height: 16px; }
.deal-step.is-done .deal-dot { background: #16a34a; border-color: #16a34a; color: #fff; }
.deal-step.is-skipped .deal-dot { background: var(--bg); }
.deal-step.is-next .deal-dot { border-color: var(--primary-600); box-shadow: 0 0 0 4px var(--primary-tint-bg); }
.deal-step.is-overdue .deal-dot { border-color: #dc2626; }
.deal-step-body { flex: 1; min-width: 0; padding-top: 4px; }
.deal-step-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.deal-step.is-todo .deal-step-head strong, .deal-step.is-skipped .deal-step-head strong { color: var(--muted); font-weight: 600; }
.deal-step-about { margin: 2px 0 0; font-size: 0.85rem; }
.deal-step-note { margin: 6px 0 0; padding: 7px 11px; border-left: 3px solid var(--primary-600); background: var(--bg); border-radius: 6px; font-size: 0.88rem; }
.deal-step-links { display: flex; gap: 14px; align-items: center; margin-top: 4px; font-size: 0.82rem; }
.deal-step-links a, .deal-step-links .link-button, .deal-party-actions a, .deal-party-actions .link-button, .deal-preview-link { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 600; }
.deal-step-links .icon, .deal-party-actions .icon, .deal-preview-link .icon { width: 14px; height: 14px; }
.link-button { background: none; border: 0; padding: 0; color: var(--primary-ink); cursor: pointer; font: inherit; width: auto; }
.link-button:hover { background: none; text-decoration: underline; }
.deal-step-act { margin-top: 8px; }
.deal-step-act > summary { cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--primary-ink); list-style: none; display: inline-block; }
.deal-step-act > summary::-webkit-details-marker { display: none; }
.deal-step-act > summary::before { content: "+ "; }
.deal-step-act[open] > summary::before { content: "\2013  "; }
.deal-step.is-next .deal-step-act > summary { display: none; }
.deal-step-form { margin-top: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); display: grid; gap: 10px; }
.deal-step.is-next .deal-step-form { border-color: var(--primary-tint-border); background: var(--primary-tint-bg); }
.deal-step-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.deal-step-row .field input { width: auto; }
.deal-step-msg { flex: 1 1 260px; }
.deal-step-msg input { width: 100% !important; }
.deal-step-buttons { justify-content: space-between; align-items: center; }
.deal-step-notify { display: inline-flex; gap: 6px; align-items: center; font-size: 0.86rem; font-weight: 600; }
.deal-step-notify input { width: auto; }
.deal-step-btns { display: inline-flex; gap: 8px; }
.deal-step-btns button { width: auto; }
.deal-due-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 0.82rem; }
.deal-due-form label { display: inline-flex; gap: 6px; align-items: center; }
.deal-due-form input { width: auto; padding: 5px 8px; }
.deal-due-form button { width: auto; }
.deal-side { display: grid; gap: 14px; }
.deal-side-card { padding: 16px 18px; }
.deal-side-card textarea { width: 100%; }
.deal-side-card button { width: auto; }
.deal-party + .deal-party { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.deal-party-head { display: flex; justify-content: space-between; font-size: 0.8rem; }
.deal-party-contact { font-size: 0.84rem; overflow-wrap: anywhere; }
.deal-party-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.deal-wa { padding: 5px 11px; border-radius: 999px; background: #25D366; color: #fff !important; text-decoration: none; }
.deal-doc { display: flex; gap: 6px; align-items: center; font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; overflow-wrap: anywhere; }
.deal-doc .icon { flex: none; width: 15px; height: 15px; }
.deal-details { margin-top: 16px; padding: 16px 18px; scroll-margin-top: 90px; }
.deal-details > summary { cursor: pointer; }
.deal-close { margin: 16px 0 30px; }
.deal-close summary { cursor: pointer; }
.deal-close-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.deal-close-form input[type=text] { flex: 1 1 260px; width: auto; }
.deal-close-form input[type=checkbox] { width: auto; }
.deal-close-form button { width: auto; }
.deals-form-page { max-width: 860px; }
.deal-form { padding: 18px 20px; display: grid; gap: 14px; }
.deal-form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.deal-form-actions button { width: auto; }
.dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.dl-grid .field { margin: 0; }
.dl-wide { grid-column: 1 / -1; }
.dl-wide-2 { grid-column: span 2; }
.dl-new { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; padding: 12px; border: 1px dashed var(--border); border-radius: 12px; background: var(--bg); }
.dl-new[hidden], .dl-grid [hidden] { display: none; }
.dl-sub { font-weight: 700; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.dl-label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.dl-toggle { display: flex; gap: 6px; }
.dl-toggle label { flex: 1; display: flex; gap: 6px; align-items: center; justify-content: center; padding: 9px 10px; border: 1px solid var(--field-border); border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.dl-toggle label input { width: auto; }
.dl-toggle label:has(input:checked) { border-color: var(--primary-600); background: var(--primary-tint-bg); color: var(--primary-ink); }
.dl-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.dl-check input { margin-top: 4px; width: auto; }
.dl-check span { display: flex; flex-direction: column; }
.dl-check small { color: var(--muted); font-size: 0.82rem; }
@media (max-width: 960px) { .deal-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
    .dl-grid, .dl-new { grid-template-columns: minmax(0, 1fr); }
    .dl-wide-2 { grid-column: auto; }
    .deal-hero { flex-direction: column; }
    .deal-hero-photo { width: 100%; height: 160px; }
    .deal-card-photo { width: 76px; height: 64px; }
}

/* Deal progress card on the listing page (app/Views/deals/_listing_card.php) */
.dlc { margin-top: 24px; padding: 18px 20px; }
.dlc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dlc-title { display: flex; align-items: center; gap: 10px; }
.dlc-title h3 { margin: 0; }
.dlc-open { width: auto; display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; }
.dlc-open .icon { width: 16px; height: 16px; }
.dlc-body { display: flex; align-items: center; gap: 18px; }
.dlc-ring { position: relative; flex: none; width: 84px; height: 84px; }
.dlc-ring svg { transform: rotate(-90deg); display: block; }
.dlc-ring-bg { fill: none; stroke: var(--border); stroke-width: 7; }
.dlc-ring-fg { fill: none; stroke: #16a34a; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.dlc-ring-num { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 27px; font-size: 0.85rem; color: var(--muted); }
.dlc-ring-num strong { font-size: 1.35rem; color: var(--text); font-weight: 800; }
.dlc-next { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-radius: 12px; background: var(--primary-tint-bg); border: 1px solid var(--primary-tint-border); border-left: 4px solid var(--primary-600); }
.dlc-next strong { font-size: 1.05rem; }
.dlc-next .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.84rem; }
.dlc-next.is-late { background: var(--danger-bg); border-color: var(--danger-border); border-left-color: #dc2626; }
.dlc-next.is-done { background: var(--success-bg); border-color: var(--success-border); border-left-color: #16a34a; }
.dlc-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dlc-bar { display: flex; gap: 4px; margin-top: 16px; }
.dlc-seg { flex: 1; height: 8px; border-radius: 99px; background: var(--border); }
.dlc-seg.is-done { background: #16a34a; }
.dlc-seg.is-skipped { background: #86efac; }
.dlc-seg.is-next { background: repeating-linear-gradient(45deg, var(--primary-600) 0 4px, var(--primary-tint-border) 4px 8px); }
.dlc-seg.is-overdue { background: #dc2626; }
.dlc-bar-ends { display: flex; justify-content: space-between; font-size: 0.74rem; margin-top: 5px; }
.dlc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.dlc-facts div { min-width: 0; }
.dlc-facts dt { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dlc-facts dd { margin: 3px 0 0; font-weight: 700; font-size: 0.92rem; overflow-wrap: anywhere; }
.dlc-facts dd .meta { font-weight: 500; }
.dlc-empty { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border: 1px dashed var(--primary-tint-border); border-radius: 12px; background: var(--primary-tint-bg); }
.dlc-empty > div { flex: 1 1 320px; }
.dlc-empty p { margin: 4px 0 0; }
.dlc-empty .btn { width: auto; }
@media (max-width: 720px) {
    .dlc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dlc-body { gap: 12px; }
    .dlc-ring, .dlc-ring svg { width: 68px; height: 68px; }
}

/* Deals page v2: summary strip + deal cards (app/Views/deals/index.php) */
.deals-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; }
.deals-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--border); border-top: 3px solid var(--primary-600); border-radius: 14px; background: var(--surface); }
.deals-stat strong { font-size: 1.45rem; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deals-stat .meta { font-size: 0.8rem; }
.deals-stat-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.deals-stat.is-late { border-top-color: #dc2626; }
.deals-stat.is-late strong { color: #dc2626; }
.deals-stat.is-warn { border-top-color: #d97706; }
.deals-stat.is-warn strong { color: #b45309; }
.deals-stat.is-good { border-top-color: #16a34a; }
.deal-card2 { position: relative; display: flex; gap: 18px; align-items: stretch; padding: 14px 18px 14px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.deal-card2:hover { border-color: var(--primary-tint-border); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.deal-card2.is-late { border-left: 4px solid #dc2626; }
.deal-card2.is-done { border-left: 4px solid #16a34a; }
.deal-card2.is-off { opacity: 0.75; }
.dc-photo { position: relative; flex: none; width: 150px; min-height: 112px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--primary-tint-bg), var(--bg)); }
.dc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-photo-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--primary-ink); opacity: 0.55; }
.dc-photo-empty .icon { width: 30px; height: 30px; }
.dc-finance { position: absolute; left: 8px; bottom: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(15, 23, 42, 0.78); color: #fff; font-size: 0.72rem; font-weight: 700; }
.dc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dc-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.dc-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-title strong { font-size: 1.02rem; line-height: 1.3; }
.dc-title .meta { font-size: 0.84rem; }
.dc-price { text-align: right; display: flex; flex-direction: column; gap: 2px; flex: none; }
.dc-price strong { font-size: 1.05rem; font-weight: 800; }
.dc-price .meta { font-size: 0.78rem; }
.dc-people { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dc-person { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.86rem; font-weight: 600; max-width: 100%; }
.dc-person > span:last-child { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-person small { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dc-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint-bg); color: var(--primary-ink); font-size: 0.72rem; font-weight: 800; }
.dc-person.is-missing { border-style: dashed; color: var(--muted); }
.dc-person.is-missing .dc-avatar { background: var(--bg); color: var(--muted); }
.dc-agent { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; margin-left: 4px; }
.dc-agent .icon { width: 14px; height: 14px; }
.dc-progress { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.dc-bar { display: flex; gap: 4px; }
.dc-next { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.9rem; }
.dc-next-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 6px; background: var(--primary-tint-bg); color: var(--primary-ink); }
.dc-next.is-late .dc-next-label { background: var(--danger-bg); color: var(--danger-text); }
.dc-ring { flex: none; position: relative; width: 56px; align-self: center; }
.dc-ring svg { transform: rotate(-90deg); display: block; }
.dc-ring .dlc-ring-bg, .dc-ring .dlc-ring-fg { stroke-width: 4; }
.dc-ring > span { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 17px; font-size: 0.72rem; color: var(--muted); }
.dc-ring > span strong { font-size: 1rem; color: var(--text); font-weight: 800; }
@media (max-width: 1100px) { .deals-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
    .deals-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .deals-stat.is-value { grid-column: 1 / -1; order: -1; }
    .deal-card2 { flex-wrap: wrap; padding: 12px; gap: 12px; }
    .dc-photo { width: 100%; min-height: 140px; }
    .dc-ring { position: absolute; top: 18px; right: 18px; background: var(--surface); border-radius: 50%; }
    .dc-top { flex-direction: column; gap: 6px; }
    .dc-price { text-align: left; }
}

.footer-company { display: inline-block; margin-left: 6px; opacity: 0.8; }

/* ---- Alerts: CRM bell + dropdown, Notifications page, Settings device box (Notification / alerts.js) ---- */
.alert-bell { position: relative; flex-shrink: 0; margin-left: auto; }
.alert-bell + .crm-topbar-user { margin-left: 0; }
.alert-bell-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; border-radius: var(--radius-full);
    background: transparent; border: 1px solid var(--border); color: var(--text); cursor: pointer;
    box-shadow: none; transition: background .15s, border-color .15s;
}
.alert-bell-btn:hover, .alert-bell-btn[aria-expanded="true"] { background: rgba(20, 184, 166, 0.10); border-color: var(--primary-500); color: var(--text); }
.alert-bell-btn .icon { width: 20px; height: 20px; }
.alert-bell-count {
    position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: var(--radius-full); background: var(--accent-500); color: #fff; border: 2px solid var(--surface);
    font-size: 0.68rem; font-weight: 700; line-height: 1; align-items: center; justify-content: center; box-sizing: content-box;
}
.alert-bell-panel {
    position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-width: calc(100vw - 24px);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); z-index: 60; overflow: hidden;
}
.alert-bell-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.alert-bell-head strong { font-size: 0.95rem; }
.alert-bell-link { background: none; border: 0; padding: 0; box-shadow: none; color: var(--primary-ink); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.alert-bell-link:hover { background: none; color: var(--primary-ink-strong); text-decoration: underline; }
.alert-bell-push {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px;
    background: rgba(249, 115, 22, 0.08); border-bottom: 1px solid var(--border); font-size: 0.8rem; line-height: 1.35;
}
.alert-bell-push > span { display: flex; gap: 8px; align-items: flex-start; }
.alert-bell-push .icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent-600); margin-top: 1px; }
.alert-bell-push .btn-sm { flex-shrink: 0; }
.alert-bell-list { max-height: min(62vh, 460px); overflow-y: auto; }
.alert-bell-empty { margin: 0; padding: 22px 16px; color: var(--muted); font-size: 0.85rem; text-align: center; }
.alert-bell-all { display: block; padding: 11px 14px; text-align: center; font-size: 0.82rem; font-weight: 600; border-top: 1px solid var(--border); color: var(--primary-ink); text-decoration: none; }
.alert-bell-all:hover { background: rgba(20, 184, 166, 0.06); }
.alert-item { display: flex; gap: 11px; padding: 11px 14px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); position: relative; }
.alert-item:last-child { border-bottom: 0; }
.alert-item:hover { background: rgba(20, 184, 166, 0.06); color: var(--text); }
.alert-item.is-unread { background: rgba(20, 184, 166, 0.07); }
.alert-item.is-unread::after { content: ""; position: absolute; top: 16px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-500); }
.alert-item-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(20, 184, 166, 0.12); color: var(--primary-ink);
}
.alert-item-icon .icon { width: 17px; height: 17px; }
.alert-type-lead_new .alert-item-icon, .alert-item-icon.alert-type-lead_new, .alert-item-icon.alert-type-lead_escalation { background: rgba(249, 115, 22, 0.13); color: var(--accent-600); }
.alert-item-icon.alert-type-deal_reminder, .alert-item-icon.alert-type-mandate { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.alert-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 14px; }
.alert-item-text strong { font-size: 0.86rem; font-weight: 600; line-height: 1.3; }
.alert-item.is-unread .alert-item-text strong { font-weight: 700; }
.alert-item-body { font-size: 0.8rem; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.alert-item-when { font-size: 0.72rem; color: var(--muted); }
.alert-page-list { padding: 0; overflow: hidden; }
.alert-page-list .alert-item { padding: 14px 18px; }
.alert-page-list .alert-item-body { -webkit-line-clamp: 3; }
.alert-device-now {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(20, 184, 166, 0.05);
}
.alert-device-now > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.alert-device-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.alert-device-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.alert-device-list li:last-child { border-bottom: 0; }
.alert-device-list li > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.alert-device-list .icon { width: 16px; height: 16px; color: var(--muted); }
.alert-device-list form { margin: 0; }
@media (max-width: 700px) {
    .alert-bell-btn { width: 36px; height: 36px; }
    .alert-bell-panel { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; max-width: none; }
}
/* Alerts in dark mode: lighter accents so icons and links stay readable. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .alert-item-icon { color: var(--primary-200); background: rgba(20, 184, 166, 0.16); }
    :root:not([data-theme="light"]) .alert-item-icon.alert-type-lead_new, :root:not([data-theme="light"]) .alert-item-icon.alert-type-lead_escalation { color: #fdba74; background: rgba(249, 115, 22, 0.18); }
    :root:not([data-theme="light"]) .alert-item-icon.alert-type-deal_reminder, :root:not([data-theme="light"]) .alert-item-icon.alert-type-mandate { color: #a5b4fc; background: rgba(99, 102, 241, 0.2); }
    :root:not([data-theme="light"]) .alert-bell-link, :root:not([data-theme="light"]) .alert-bell-all { color: var(--primary-200); }
}
:root[data-theme="dark"] .alert-item-icon { color: var(--primary-200); background: rgba(20, 184, 166, 0.16); }
:root[data-theme="dark"] .alert-item-icon.alert-type-lead_new, :root[data-theme="dark"] .alert-item-icon.alert-type-lead_escalation { color: #fdba74; background: rgba(249, 115, 22, 0.18); }
:root[data-theme="dark"] .alert-item-icon.alert-type-deal_reminder, :root[data-theme="dark"] .alert-item-icon.alert-type-mandate { color: #a5b4fc; background: rgba(99, 102, 241, 0.2); }
:root[data-theme="dark"] .alert-bell-link, :root[data-theme="dark"] .alert-bell-all { color: var(--primary-200); }

/* ---- Open mandates: one search result for a property several agencies list (partials/_listing_group.php) ---- */
.card-group {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(23, 32, 35, 0.09), 0 8px 20px -8px rgba(23, 32, 35, 0.12);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-group:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.card-group.is-open { z-index: 20; transform: none; }
.card-group > a.card {
    flex: 1;
    box-shadow: none;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.card-group > a.card:hover { transform: none; box-shadow: none; }

/* Footer: stacked agency logos + "Presented by 3 agencies" */
.card-group-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 1px 0 var(--border);
}
.card-group-bar:hover, .card-group.is-open .card-group-bar { background: var(--primary-tint-bg); color: var(--text); transform: none; }
.card-group-bar:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; }
.card-group-stack { display: inline-flex; flex: none; }
.card-group-badge {
    width: 30px;
    height: 30px;
    margin-left: -9px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border);
}
.card-group-badge:first-child { margin-left: 0; }
.card-group-badge, .card-group-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: none;
    background: hsl(var(--lg-hue, 170) 45% 38%);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.card-group-badge.has-logo, .card-group-logo.has-logo { background: #fff; }
.card-group-badge img, .card-group-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; display: block; }
.card-group-label { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.card-group-label strong { font-size: 0.86rem; font-weight: 700; color: var(--primary-ink-strong); }
.card-group-label span { font-size: 0.74rem; color: var(--muted); }
.card-group-chev { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform 0.2s ease; }
.card-group.is-open .card-group-chev { transform: rotate(180deg); }

/* The list of listings */
.card-group-panel {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 62px; /* opens upwards from the footer, over the card */
    max-height: calc(100% - 76px);
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 40px -10px rgba(15, 23, 42, 0.35), 0 2px 6px rgba(15, 23, 42, 0.08);
    z-index: 5; /* above the photo's badges (Featured, Auction…) */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.card-group-head {
    position: sticky;
    top: 0;
    z-index: 2; /* the list scrolls underneath (the photos and logo badges would otherwise paint over it) */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.card-group-head strong { display: block; font-size: 0.92rem; color: var(--primary-ink-strong); }
.card-group-head span { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--muted); }
.card-group-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px -6px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    box-shadow: none;
}
.card-group-close:hover { background: var(--primary-tint-bg); color: var(--text); transform: none; }
.card-group-close .icon { width: 16px; height: 16px; }
.card-group-list { list-style: none; margin: 0; padding: 6px; }
.card-group-list li + li { border-top: 1px solid var(--border); }
.card-group-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
}
.card-group-item:hover { background: var(--primary-tint-bg); }
/* Each agency's own cover photo, with its logo on the corner, so buyers can compare the listings. */
.card-group-thumb {
    position: relative;
    flex: none;
    width: 76px;
    height: 57px;
    margin: 0 6px 6px 0;
    border-radius: 8px;
    background: var(--gray-100);
}
.card-group-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
.card-group-nophoto { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--muted); }
.card-group-nophoto .icon { width: 18px; height: 18px; }
.card-group-logo {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 2px solid var(--surface);
    font-size: 0.6rem;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
}
.card-group-logo img { padding: 2px; }
.card-group-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.card-group-text strong { font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-group-who { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-group-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.card-group-price { font-size: 0.86rem; font-weight: 800; color: var(--primary-ink-strong); white-space: nowrap; }
.card-group-showing {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--muted);
}
.card-group-view { display: inline-flex; align-items: center; gap: 1px; font-size: 0.78rem; font-weight: 700; color: var(--primary-ink); }
.card-group-view .icon { width: 14px; height: 14px; }
.card-group-item:hover .card-group-view { text-decoration: underline; }
.card-group-feat { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; padding: 1px 6px; border-radius: var(--radius-full); background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); color: #fff; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: 2px; }
.card-group-feat .icon { width: 9px; height: 9px; }
/* Toolkit: seller checklist (agent fills it in on the left; the right is the branded document the seller gets) */
.sc { max-width: 1240px; }
.sc-intro { max-width: 760px; margin-bottom: 22px; }
.sc-intro h1 { margin: 0 0 8px; font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.sc-intro p { margin: 0; color: var(--muted); font-size: 1.04rem; line-height: 1.55; }
.sc-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 26px; align-items: start; }
.sc-setup { display: grid; gap: 14px; align-content: start; min-width: 0; }
.sc-setup > * { min-width: 0; }
.sc-step { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.sc-step h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1rem; }
.sc-step-no { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-600); color: #fff; font-size: 0.8rem; font-weight: 800; }
.sc-step .field { margin-bottom: 11px; }
.sc-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.sc-brand-row { display: grid; grid-template-columns: 1fr 118px; gap: 12px; margin-bottom: 12px; align-items: start; }
.sc-logo-drop { position: relative; display: grid; place-items: center; height: 92px; border: 2px dashed var(--field-border, var(--border)); border-radius: 12px; background: var(--field-bg, var(--bg)); cursor: pointer; overflow: hidden; transition: border-color .2s; }
.sc-logo-drop:hover, .sc-logo-drop:focus-within { border-color: var(--primary-500); }
.sc-logo-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sc-logo-drop img { max-width: 90%; max-height: 74px; object-fit: contain; background: #fff; border-radius: 6px; padding: 4px; }
.sc-logo-drop [hidden] { display: none !important; }
.sc-logo-empty { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-weight: 600; font-size: 0.86rem; }
.sc-logo-empty svg { width: 20px; height: 20px; }
.sc-colour label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; }
.sc-colour-row { display: flex; align-items: center; gap: 8px; }
.sc-colour input[type=color] { width: 40px !important; height: 40px; min-height: 0; padding: 3px !important; border-radius: 10px; cursor: pointer; flex: none; }
.sc-colour-row span { font-family: ui-monospace, Consolas, monospace; font-size: 0.82rem; color: var(--muted); }
.sc-link { background: none; border: 0; padding: 8px 0 0; color: var(--muted); font-size: 0.82rem; text-decoration: underline; cursor: pointer; }
.sc-link[hidden] { display: none; }
.sc-hint { display: flex; gap: 6px; align-items: flex-start; margin: 2px 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.sc-hint svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.sc-extras { border: 0; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: grid; gap: 10px; min-width: 0; }
.sc-extras legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.sc-switch { display: flex !important; align-items: center; gap: 10px; cursor: pointer; font-size: 0.92rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text); margin: 0; }
.sc-switch { position: relative; }
.sc-switch input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; left: 0; top: 0; }
.sc-switch-ui { flex: none; width: 36px; height: 20px; border-radius: 99px; background: var(--field-border, #cbd5e1); position: relative; transition: background .2s; }
.sc-switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.sc-switch input:checked + .sc-switch-ui { background: var(--primary-600); }
.sc-switch input:checked + .sc-switch-ui::after { transform: translateX(16px); }
.sc-switch input:focus-visible + .sc-switch-ui { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.sc-actions { display: grid; gap: 8px; }
.sc-actions .btn { justify-content: center; }

/* The document: always white paper in the agency's colour (also in dark mode), like the PDF. */
.sc-paper {
    --sc-brand: #0f766e; --sc-tint: color-mix(in srgb, var(--sc-brand) 9%, #fff); --sc-line: #e5e9eb; --sc-ink: #14202a; --sc-soft: #5d6b76;
    color-scheme: light; color: var(--sc-ink); background: #fff; border-radius: 6px; padding: 0 44px 34px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 40px rgba(15, 23, 42, .12); border-top: 6px solid var(--sc-brand);
    font-size: 0.95rem; line-height: 1.5; counter-reset: sc-sec;
}
.sc-paper [hidden] { display: none !important; }
.sc-letterhead { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0 20px; border-bottom: 1px solid var(--sc-line); min-height: 40px; }
.sc-letterhead-logo { max-width: 210px; max-height: 72px; object-fit: contain; }
.sc-letterhead-who { margin-left: auto; text-align: right; display: grid; gap: 1px; font-size: 0.86rem; color: var(--sc-soft); }
.sc-letterhead-who strong { font-size: 1.05rem; color: var(--sc-ink); }
.sc-contact { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.sc-titleblock { padding: 26px 0 6px; }
.sc-kicker { display: block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-brand); margin-bottom: 6px; }
.sc-titleblock h2 { margin: 0 0 18px; font-size: 1.75rem; line-height: 1.2; color: var(--sc-ink); letter-spacing: -0.01em; }
.sc-meta { display: grid; grid-template-columns: 1fr 1.6fr 0.9fr; margin: 0; border: 1px solid var(--sc-line); border-radius: 10px; overflow: hidden; }
.sc-meta div { padding: 11px 14px; border-left: 1px solid var(--sc-line); min-width: 0; }
.sc-meta div:first-child { border-left: 0; }
.sc-meta dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-soft); }
.sc-meta dd { margin: 3px 0 0; font-weight: 700; color: var(--sc-ink); overflow-wrap: anywhere; }
.sc-meta dd.is-empty { color: #b3bcc3; font-weight: 500; font-style: italic; }
.sc-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px 20px; margin: 18px 0 8px; padding: 14px 18px; border-radius: 10px; background: var(--sc-tint); }
.sc-summary-label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-soft); }
.sc-summary-main strong { font-size: 1.02rem; white-space: nowrap; }
.sc-bar { height: 8px; border-radius: 99px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--sc-line); }
.sc-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--sc-brand); transition: width .3s; }
.sc-legend { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; font-size: 0.8rem; color: var(--sc-soft); white-space: nowrap; }
.sc-legend li { display: inline-flex; align-items: center; gap: 5px; }
.sc-legend b { color: var(--sc-ink); }
.sc-legend .sc-mark { width: 14px; height: 14px; margin: 0; border-width: 1.5px; }

.sc-section { padding-top: 22px; counter-increment: sc-sec; }
.sc-section-head { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--sc-brand); }
.sc-section-no { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--sc-brand); color: #fff; font-weight: 800; font-size: 0.9rem; margin-top: 1px; }
.sc-section-no::before { content: counter(sc-sec); }
.sc-section-head h3 { margin: 0; font-size: 1.08rem; color: var(--sc-ink); }
.sc-section-head p { margin: 1px 0 0; font-size: 0.85rem; color: var(--sc-soft); }
.sc-section-head > div { flex: 1; min-width: 0; }
.sc-section-count { flex: none; font-size: 0.78rem; font-weight: 700; color: var(--sc-soft); padding: 3px 9px; border-radius: 99px; background: #f3f5f6; margin-top: 3px; white-space: nowrap; }
.sc-section.is-complete .sc-section-count { background: var(--sc-tint); color: var(--sc-brand); }
.sc-items { list-style: none; margin: 0; padding: 0; }
.sc-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--sc-line); }
.sc-item:last-child { border-bottom: 0; }
.sc-item-text strong { display: block; font-size: 0.97rem; color: var(--sc-ink); }
.sc-item-text > span { display: block; color: var(--sc-soft); font-size: 0.87rem; margin-top: 2px; }
.sc-item[data-state="na"] .sc-item-text { opacity: 0.5; }
.sc-item[data-state="na"] .sc-item-text strong { text-decoration: line-through; text-decoration-color: #aab4bb; }

/* Status marks: empty ring, amber "to do", brand-colour tick, grey dash. */
.sc-mark { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cfd6db; margin-top: 1px; position: relative; flex: none; box-sizing: border-box; }
.sc-mark.is-done, .sc-item[data-state="done"] .sc-mark { background: var(--sc-brand); border-color: var(--sc-brand); }
.sc-mark.is-done::after, .sc-item[data-state="done"] .sc-mark::after { content: ""; position: absolute; left: 50%; top: 45%; width: 30%; height: 55%; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); }
.sc-mark.is-todo, .sc-item[data-state="todo"] .sc-mark { border-color: #f59e0b; background: #fffbeb; }
.sc-mark.is-todo::after, .sc-item[data-state="todo"] .sc-mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #f59e0b; }
.sc-mark.is-na, .sc-item[data-state="na"] .sc-mark { border-color: #cfd6db; background: #f3f5f6; }
.sc-mark.is-na::after, .sc-item[data-state="na"] .sc-mark::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; margin-top: -1px; background: #9aa5ad; }
.sc-paper * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* Segmented status control (screen only). */
.sc-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: #f1f4f5; border: 1px solid var(--sc-line); }
.sc-seg label { margin: 0; cursor: pointer; }
.sc-seg { position: relative; }
.sc-seg input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; left: 0; top: 0; }
.sc-seg span { display: block; padding: 5px 11px; border-radius: 7px; font-size: 0.78rem; font-weight: 700; color: #6b7882; white-space: nowrap; transition: background .15s, color .15s; text-transform: none; letter-spacing: 0; }
.sc-seg label:hover span { color: var(--sc-ink); }
.sc-seg input:focus-visible + span { outline: 2px solid var(--sc-brand); outline-offset: 1px; }
.sc-seg-todo input:checked + span { background: #fff; color: #b45309; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.sc-seg-done input:checked + span { background: var(--sc-brand); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.sc-seg-na input:checked + span { background: #fff; color: var(--sc-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.sc-status-print { display: none; }

/* Notes: a quiet "+ Add a note" on screen; a branded callout on paper. */
.sc-paper .sc-note { margin-top: 7px; width: 100%; max-width: 440px; padding: 5px 0; min-height: 0; border: 0; border-bottom: 1px dashed transparent; border-radius: 0; background: transparent; color: var(--sc-ink); font-size: 0.86rem; box-shadow: none; }
.sc-paper .sc-note::placeholder { color: color-mix(in srgb, var(--sc-brand) 80%, #fff); font-weight: 600; opacity: 1; }
.sc-paper .sc-note:hover, .sc-paper .sc-note:focus { border-bottom-color: #cfd6db; outline: none; box-shadow: none; }
.sc-paper .sc-item.has-note .sc-note { padding: 7px 10px; border: 0; border-left: 3px solid var(--sc-brand); background: var(--sc-tint); border-radius: 0 6px 6px 0; }
.sc-note-print { display: none; }

.sc-paper-foot { margin-top: 26px; display: grid; gap: 12px; }
.sc-contact-card { display: grid; gap: 2px; padding: 14px 18px 14px 20px; border-radius: 0 10px 10px 0; border: 1px solid var(--sc-line); border-left: 4px solid var(--sc-brand); }
.sc-contact-card strong { color: var(--sc-ink); }
.sc-contact-card > span { color: var(--sc-soft); font-size: 0.9rem; }
.sc-contact-card b { color: var(--sc-ink); }
.sc-legal { margin: 0; font-size: 0.78rem; color: var(--sc-soft); line-height: 1.5; }
.sc-made { margin: 0; padding-top: 12px; border-top: 1px solid var(--sc-line); font-size: 0.76rem; color: #8a969f; text-align: center; }
.sc-made strong { color: var(--sc-ink); }
.sc-made strong span { color: #f97316; }

@media (max-width: 1020px) {
    .sc-layout { grid-template-columns: minmax(0, 1fr); }
    .sc-setup { position: static; max-height: none; overflow: visible; grid-template-columns: 1fr 1fr; align-items: start; }
    .sc-actions, .sc-setup > .sc-hint { grid-column: 1 / -1; }
    .sc-actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
    .sc-setup { grid-template-columns: minmax(0, 1fr); }
    .sc-paper { padding: 0 18px 24px; }
    .sc-letterhead { flex-direction: column; align-items: flex-start; gap: 12px; }
    .sc-letterhead-who { margin-left: 0; text-align: left; }
    .sc-contact { justify-content: flex-start; }
    .sc-titleblock h2 { font-size: 1.4rem; }
    .sc-meta { grid-template-columns: minmax(0, 1fr); }
    .sc-meta div { border-left: 0; border-top: 1px solid var(--sc-line); }
    .sc-meta div:first-child { border-top: 0; }
    .sc-summary { grid-template-columns: minmax(0, 1fr); }
    .sc-legend { flex-wrap: wrap; }
    .sc-item { grid-template-columns: 22px minmax(0, 1fr); }
    .sc-seg { grid-column: 2; justify-self: start; }
    .sc-actions { grid-template-columns: minmax(0, 1fr); }
}
@media print {
    @page { size: A4; margin: 14mm 14mm 16mm; }
    .sc { max-width: none; padding: 0; }
    .sc-layout { display: block; }
    .sc .sc-paper { box-shadow: none; border-radius: 0; padding: 0 2mm; border-top-width: 5px; font-size: 10pt; }
    .sc .sc-letterhead { padding-top: 14px; }
    .sc .sc-titleblock h2 { font-size: 19pt; }
    .sc .sc-section { break-inside: auto; padding-top: 16px; }
    .sc .sc-section-head { break-after: avoid; }
    .sc .sc-item { break-inside: avoid; grid-template-columns: 20px minmax(0, 1fr) 70px; padding: 9px 0; }
    .sc .sc-seg, .sc .sc-note { display: none; }
    .sc .sc-status-print { display: block; text-align: right; font-size: 8.5pt; font-weight: 700; color: var(--sc-soft); padding-top: 2px; }
    .sc .sc-item[data-state="done"] .sc-status-print { color: var(--sc-brand); }
    .sc .sc-item[data-state="todo"] .sc-status-print { color: #b45309; }
    .sc .sc-note-print:not(:empty) { display: block; margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid var(--sc-brand); background: var(--sc-tint); border-radius: 0 6px 6px 0; font-size: 9pt; color: var(--sc-ink); }
    .sc .sc-note-print:not(:empty)::before { content: "Note: "; font-weight: 700; }
    .sc .sc-meta dd.is-empty { color: transparent; }
    .sc .sc-paper-foot { break-inside: avoid; }
}
.sc-logo-ph { display: grid; place-items: center; width: 150px; height: 56px; border: 2px dashed #d5dce0; border-radius: 10px; color: #9aa5ad; font-size: 0.82rem; font-weight: 700; }
.sc-letterhead-who .is-empty { color: #b3bcc3; font-style: italic; font-weight: 500; }
@media print { .sc .sc-letterhead-who .is-empty { display: none; } }
/* Buyer checklist: transfer duty estimate on the document */
.sc-costs { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: center; margin: 10px 0 4px; padding: 14px 18px; border: 1px solid var(--sc-line); border-left: 4px solid var(--sc-brand); border-radius: 0 10px 10px 0; }
.sc-costs-main strong { display: block; font-size: 1.35rem; color: var(--sc-ink); line-height: 1.25; }
.sc-costs-on { font-size: 0.8rem; color: var(--sc-soft); white-space: nowrap; }
.sc-costs-on b { color: var(--sc-ink); }
.sc-costs p { margin: 0; font-size: 0.82rem; color: var(--sc-soft); line-height: 1.5; }
@media (max-width: 680px) { .sc-costs { grid-template-columns: minmax(0, 1fr); } }
@media print { .sc .sc-costs { break-inside: avoid; } }
/* Checklists in the CRM (listing / deal), the client's read-only page, and the Checklists overview */
.sc-mode-crm .sc-intro h1 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.sc-step h2 svg { width: 18px; height: 18px; color: var(--primary-ink); }
.sc-share { display: flex; gap: 8px; }
.sc-share input { flex: 1; min-width: 0; font-size: 0.82rem !important; padding: 8px 10px !important; }
.sc-share-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.sc-share-btns .btn { justify-content: center; font-size: 0.88rem; }
.sc-wa { background: #25d366 !important; border-color: #25d366 !important; color: #fff !important; }
.sc-facts { margin: 0 0 12px; display: grid; gap: 8px; }
.sc-facts dt { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.sc-facts dd { margin: 1px 0 0; font-weight: 600; }
.sc-autosave { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 6px 12px; border-radius: 99px; font-size: 0.86rem; font-weight: 700; background: var(--primary-tint-bg); color: var(--primary-ink-strong); }
.sc-autosave svg { width: 16px; height: 16px; flex: none; }
.sc-autosave.is-busy { background: var(--bg); color: var(--muted); }
.sc-autosave.is-err { background: #fef2f2; color: #b91c1c; }
:root[data-theme="dark"] .sc-autosave.is-ok { background: rgba(20, 184, 166, .14); color: #5eead4; }
.sc-brand-foot { margin: 0; }
.sc-brand-foot a { font-weight: 600; }
.sc-saved.is-ok { color: var(--primary-ink); }
.sc-saved.is-err { color: #b91c1c; }
.sc-readonly .sc-layout { display: block; max-width: 860px; margin: 0 auto; }
.sc-readonly.sc { padding: 0; }
.sc-shared-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.sc-readonly .sc-item { grid-template-columns: 22px minmax(0, 1fr) auto; }
.sc-readonly .sc-status-print { display: block; text-align: right; font-size: 0.8rem; font-weight: 700; color: var(--sc-soft); padding-top: 2px; white-space: nowrap; }
.sc-readonly .sc-item[data-state="done"] .sc-status-print { color: var(--sc-brand); }
.sc-readonly .sc-item[data-state="todo"] .sc-status-print { color: #b45309; }
.sc-readonly .sc-note-print:not(:empty) { display: block; margin: 7px 0 0; padding: 7px 10px; border-left: 3px solid var(--sc-brand); background: var(--sc-tint); border-radius: 0 6px 6px 0; font-size: 0.86rem; color: var(--sc-ink); }
.sc-readonly .sc-note-print:not(:empty)::before { content: "Note: "; font-weight: 700; }
.sc-missing { max-width: 560px; margin: 40px auto; padding: 34px; text-align: center; }
.sc-missing h1 { margin: 0 0 8px; font-size: 1.4rem; }
.sm-head-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.deal-checklist { display: grid; grid-template-columns: minmax(0, 1fr) 64px 16px; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.deal-checklist strong { display: block; font-size: 0.95rem; }
.deal-checklist .meta { font-size: 0.82rem; }
.deal-checklist svg { width: 16px; height: 16px; color: var(--muted); }
.deal-checklist:hover strong { color: var(--primary-ink); }
.cl-bar { display: block; height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.cl-bar span { display: block; height: 100%; border-radius: 99px; background: var(--primary-600); }
.cl-head h1 { margin: 0 0 4px; }
.cl-head { margin-bottom: 18px; }
.cl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.cl-col { padding: 18px 20px; }
.cl-col h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; font-size: 1.08rem; }
.cl-col h2 svg { width: 18px; height: 18px; color: var(--primary-ink); }
.cl-col h2 .meta { font-weight: 500; font-size: 0.85rem; }
.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.cl-list a:hover strong { color: var(--primary-ink); }
.cl-main { min-width: 0; display: grid; }
.cl-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-main .meta { font-size: 0.84rem; }
.cl-side { flex: none; display: flex; align-items: center; gap: 8px; }
.cl-side .cl-bar { width: 70px; }
.cl-side svg { width: 16px; height: 16px; color: var(--muted); }
.cl-count { font-size: 0.82rem; font-weight: 700; color: var(--muted); min-width: 34px; text-align: right; }
.cl-new { font-size: 0.8rem; font-weight: 700; color: var(--primary-ink); padding: 3px 10px; border: 1px solid var(--primary-200, #99f6e4); border-radius: 99px; }
.cl-foot { margin-top: 16px; }
@media (max-width: 860px) { .cl-grid { grid-template-columns: minmax(0, 1fr); } }
@media print { .sc-shared-wrap { padding: 0 !important; } body:has(.sc-readonly) { background: #fff !important; } }
.sc-mode-crm .sc-paper:not(.has-logo) .sc-letterhead-who, .sc-readonly .sc-paper:not(.has-logo) .sc-letterhead-who { margin-left: 0; text-align: left; }
.sc-mode-crm .sc-paper:not(.has-logo) .sc-contact, .sc-readonly .sc-paper:not(.has-logo) .sc-contact { justify-content: flex-start; }
.plan-banked { display: flex; align-items: flex-start; gap: 8px; }
.plan-banked svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sc-autosave.is-ok { background: rgba(20, 184, 166, .14); color: #5eead4; } }

/* ---------- New developments (CRM: dv-*, public page: dvp-*, links: dev-*) ---------- */
.dv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dv-head p { max-width: 720px; }
.dv-empty { text-align: center; padding: 40px 24px; }
.dv-empty h2 { margin: 10px 0 6px; font-size: 1.2rem; }
.dv-empty p { max-width: 520px; margin: 0 auto 16px; }
.dv-empty-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--primary-tint-bg); color: var(--primary-ink); }
.dv-empty-icon svg { width: 26px; height: 26px; }
.dv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.dv-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: var(--text); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.dv-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15, 23, 42, .12); border-color: var(--primary-500); }
.dv-card-img { position: relative; aspect-ratio: 16 / 10; background: var(--bg); display: grid; place-items: center; color: var(--muted); }
.dv-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-card-img > span:not(.dv-status) { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.86rem; }
.dv-card-img svg { width: 26px; height: 26px; }
.dv-card-img .dv-status { position: absolute; top: 10px; left: 10px; }
.dv-card-body { display: grid; gap: 4px; padding: 14px 16px 16px; }
.dv-card-body strong { font-size: 1.05rem; }
.dv-card-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 0.86rem; color: var(--muted); }
.dv-card-facts b, .dv-card-from b { color: var(--text); }
.dv-card-from { font-size: 0.95rem; margin-top: 4px; }
.dv-bar { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: 8px; }
.dv-bar span { display: block; height: 100%; border-radius: 99px; background: var(--primary-600); }
.dv-status { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em; background: #0f766e; color: #fff; white-space: nowrap; }
.dv-status-planning { background: #7c3aed; }
.dv-status-completed { background: #334155; }

.dv-hero { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; padding: 18px; margin: 10px 0 18px; }
.dv-hero-img { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--bg); display: grid; place-items: center; color: var(--muted); }
.dv-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.dv-hero-img svg { width: 30px; height: 30px; }
.dv-hero-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dv-hero-top h1 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.dv-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.dv-stats div { padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.dv-stats strong { display: block; font-size: 1.25rem; }
.dv-stats span { font-size: 0.8rem; color: var(--muted); }
.dv-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.dv-note { display: flex; gap: 6px; align-items: center; margin: 10px 0 0; }
.dv-note svg { width: 15px; height: 15px; }
.dv-section { padding: 18px 20px; margin-bottom: 16px; }
.dv-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dv-section h2 { margin: 0; font-size: 1.12rem; }
.dv-section h2 .meta { font-weight: 500; font-size: 0.9rem; }
.dv-table-wrap { overflow-x: auto; }
.dv-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.dv-table th { text-align: left; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.dv-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 0.92rem; }
.dv-table tr:last-child td { border-bottom: 0; }
.dv-unit { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 220px; }
.dv-unit img, .dv-unit-noimg { width: 56px; height: 42px; border-radius: 8px; object-fit: cover; flex: none; background: var(--bg); display: grid; place-items: center; color: var(--muted); }
.dv-unit > span:last-child { display: grid; }
.dv-unit:hover strong { color: var(--primary-ink); }
.dv-row-actions { text-align: right; white-space: nowrap; }
.dv-row-actions form { display: inline; }
.dv-link { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.dv-link summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; color: var(--primary-ink); }
.dv-link summary svg { width: 16px; height: 16px; }
.dv-link-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; margin: 12px 0; max-height: 320px; overflow-y: auto; }
.dv-link-item { display: flex !important; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); margin: 0; }
.dv-link-item input { width: 18px !important; height: 18px; flex: none; margin-top: 2px; min-height: 0; }
.dv-link-item > span { display: grid; min-width: 0; }
.dv-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.dv-photo { position: relative; margin: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.dv-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.dv-photo figcaption { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; font-size: 0.82rem; }
.dv-photo figcaption form { display: inline; }
.dv-photo-cover { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 99px; background: rgba(15, 23, 42, .75); color: #fff; font-size: 0.72rem; font-weight: 700; }
.dv-danger-link { color: var(--danger) !important; }
.dv-upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dv-upload input[type=file] { width: auto; flex: 1; min-width: 220px; }
.dv-details summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dv-details summary::-webkit-details-marker { display: none; }
.dv-details summary::after { content: "Edit"; margin-left: auto; font-weight: 700; color: var(--primary-ink); font-size: 0.9rem; }
.dv-details[open] summary { margin-bottom: 14px; }
.dv-details[open] summary::after { content: "Close"; }
.dv-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.dv-fields .field { margin-bottom: 12px; }
.dv-span2 { grid-column: 1 / -1; }
.dv-form { padding: 20px; }
.dv-delete { margin-top: 6px; }
@media (max-width: 760px) {
    .dv-hero { grid-template-columns: minmax(0, 1fr); }
    .dv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dv-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Public development page */
.dvp { max-width: 1180px; }
.dvp-crumbs { margin: 4px 0 12px; }
.dvp-crumbs a { color: var(--primary-ink); font-weight: 600; text-decoration: none; }
.dvp-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; height: min(460px, 56vw); border-radius: 16px; overflow: hidden; margin-bottom: 22px; }
.dvp-gallery.is-single { grid-template-columns: minmax(0, 1fr); }
.dvp-gallery button { padding: 0; border: 0; border-radius: 0; background: var(--bg); cursor: zoom-in; position: relative; overflow: hidden; display: block; width: 100%; height: 100%; }
.dvp-gallery button:hover { background: var(--bg); box-shadow: none; }
.dvp-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.dvp-gallery button:hover img { transform: scale(1.03); }
.dvp-gallery-side { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 8px; }
.dvp-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 23, 42, .55); color: #fff; font-weight: 700; }
.dvp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.dvp-kicker { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #ea580c; }
.dvp-head h1 { margin: 6px 0 6px; font-size: clamp(1.8rem, 3.8vw, 2.6rem); line-height: 1.15; }
.dvp-place { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 1.02rem; color: var(--muted); }
.dvp-place svg { width: 17px; height: 17px; color: var(--primary-ink); }
.dvp-by { margin: 4px 0 0; }
.dvp-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; padding: 18px 20px; margin: 20px 0 8px; }
.dvp-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.dvp-price strong { display: block; font-size: 1.7rem; color: var(--primary-ink); line-height: 1.15; }
.dvp-avail strong, .dvp-beds strong { display: block; font-size: 1.05rem; }
.dvp-bar { margin: 8px 0 4px; }
.dvp-section { margin-top: 30px; }
.dvp-section h2 { font-size: 1.3rem; margin: 0 0 12px; }
.dvp-section h2 .meta { font-size: 0.95rem; font-weight: 500; }
.dvp-text { line-height: 1.7; color: var(--text); }
.dvp-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 20px; }
.dvp-features li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.dvp-features svg { flex: none; width: 18px; height: 18px; margin-top: 2px; padding: 2px; border-radius: 50%; background: var(--primary-tint-bg); color: var(--primary-ink); }
.dvp-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.dvp-unit { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); color: var(--text); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
a.dvp-unit:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 23, 42, .12); border-color: var(--primary-500); }
.dvp-unit.is-sold { opacity: 0.6; }
.dvp-unit-img { position: relative; aspect-ratio: 4 / 3; background: var(--bg); display: grid; place-items: center; color: var(--muted); }
.dvp-unit-img img { width: 100%; height: 100%; object-fit: cover; }
.dvp-unit-state { position: absolute; top: 8px; left: 8px; padding: 3px 10px; border-radius: 99px; font-size: 0.74rem; font-weight: 800; background: #16a34a; color: #fff; }
.dvp-unit-state.is-under_offer { background: #f59e0b; }
.dvp-unit-state.is-sold, .dvp-unit-state.is-rented { background: #475569; }
.dvp-unit-state.is-pending, .dvp-unit-state.is-draft { background: #64748b; }
.dvp-unit-body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.dvp-unit-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.dvp-unit-facts svg { width: 15px; height: 15px; margin-right: 3px; vertical-align: -2px; }
.dvp-unit-price { font-weight: 800; font-size: 1.05rem; color: var(--primary-ink); }
.dvp-side { position: sticky; top: 90px; }
.dvp-contact { display: grid; gap: 4px; padding: 20px; }
.dvp-logo { max-width: 180px; max-height: 64px; object-fit: contain; margin-bottom: 10px; background: #fff; border-radius: 8px; padding: 4px; }
.dvp-contact strong { font-size: 1.1rem; }
.dvp-contact-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.dvp-contact-btns .btn { justify-content: center; }
.dvp-wa { background: #25d366 !important; border-color: #25d366 !important; color: #fff !important; }
.dvp-units-btn { margin-top: 8px; justify-content: center; }
.dvp-contact-note { margin: 6px 0 0; font-size: 0.84rem; }
.dvp-index-head { margin: 10px 0 22px; max-width: 760px; }
.dvp-index-head h1 { margin: 4px 0 6px; font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.dvp-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(5, 10, 12, .92); display: grid; place-items: center; }
.dvp-lightbox[hidden] { display: none; }
.dvp-lightbox img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 8px; }
.dvp-lb-close, .dvp-lb-nav { position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer; }
.dvp-lb-close:hover, .dvp-lb-nav:hover { background: rgba(255, 255, 255, .24); box-shadow: none; }
.dvp-lb-close { top: 18px; right: 18px; }
.dvp-lb-nav.is-prev { left: 18px; top: 50%; }
.dvp-lb-nav.is-next { right: 18px; top: 50%; }
.dvp-lb-count { position: absolute; bottom: 18px; color: #fff; font-weight: 600; }
@media (max-width: 900px) {
    .dvp-layout { grid-template-columns: minmax(0, 1fr); }
    .dvp-side { position: static; }
    .dvp-gallery { grid-template-columns: minmax(0, 1fr); height: 62vw; }
    .dvp-gallery-side { display: none; }
}

/* Links to developments: card badge, banner on a unit's page, chip on search results */
.dev-badge { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: rgba(15, 23, 42, .78); color: #fff; font-size: 0.72rem; font-weight: 700; }
.dev-badge svg { width: 12px; height: 12px; }
.dev-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--primary-tint-border, var(--border)); background: var(--primary-tint-bg, var(--primary-50)); color: var(--text); text-decoration: none; }
.dev-banner:hover { border-color: var(--primary-500); }
.dev-banner-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-600); color: #fff; }
.dev-banner-icon svg { width: 20px; height: 20px; }
.dev-banner-text { display: grid; flex: 1; min-width: 0; }
.dev-banner-kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-ink); }
.dev-banner-go { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--primary-ink); white-space: nowrap; }
.dev-banner-go svg { width: 16px; height: 16px; }
.dev-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.dev-chip:hover { border-color: var(--primary-500); color: var(--primary-ink); }
.dev-chip svg { width: 16px; height: 16px; color: var(--primary-ink); }
.dev-chip span { padding: 1px 8px; border-radius: 99px; background: var(--primary-tint-bg); color: var(--primary-ink-strong); font-size: 0.8rem; }
@media (max-width: 560px) { .dev-banner { flex-wrap: wrap; } .dev-banner-go { width: 100%; justify-content: flex-end; } }
/* Gallery with 2 or 4 photos: the last side photo fills the row instead of leaving a gap. */
.dvp-gallery-side button:last-child:nth-child(odd) { grid-column: span 2; }
@media (max-width: 560px) {
    .dvp-units { grid-template-columns: 1fr 1fr; gap: 10px; }
    .dvp-unit-body { padding: 10px 10px 12px; }
    .dvp-unit-body strong { font-size: 0.92rem; }
    .dvp-unit-facts { font-size: 0.78rem; gap: 2px 8px; }
    .dvp-unit-price { font-size: 0.95rem; }
}

/* ---------- Bond repayment calculator (bond-calculator.php) ---------- */
.bc-page { max-width: 1100px; }
.bc-head { margin: 8px 0 22px; max-width: 720px; }
.bc-head h1 { margin: 4px 0 8px; font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.bc-head p { margin: 0; color: var(--muted); font-size: 1.04rem; line-height: 1.55; }
.bc-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.bc-inputs { padding: 24px; display: grid; gap: 22px; }
.bc-field { display: grid; gap: 8px; min-width: 0; align-content: start; } /* side-by-side fields: a longer hint never pushes the other box down */
.bc-field-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bc-field-top label, .bc-label { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.bc-chip { padding: 2px 10px; border-radius: 99px; background: var(--primary-tint-bg); color: var(--primary-ink-strong); font-weight: 800; font-size: 0.82rem; }
.bc-money { display: flex; align-items: center; border: 1.5px solid var(--field-border); border-radius: 12px; background: var(--field-bg); transition: border-color .15s, box-shadow .15s; }
.bc-money:focus-within { border-color: var(--primary-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 18%, transparent); }
.bc-money > span { padding: 0 4px 0 16px; font-weight: 800; font-size: 1.2rem; color: var(--muted); }
.bc-suffix > span { padding: 0 16px 0 4px; }
.bc-money input { border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 1.35rem !important; font-weight: 800; padding: 12px 14px 12px 6px !important; min-width: 0; color: var(--text); }
.bc-suffix input { padding-left: 16px !important; }
.bc-hint { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
.bc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; padding: 0 !important; border: 0 !important; border-radius: 99px; background: linear-gradient(to right, var(--primary-600) var(--fill, 0%), var(--border) var(--fill, 0%)) !important; cursor: pointer; min-height: 0; }
.bc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--primary-600); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.bc-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--primary-600); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.bc-range:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 4px; }
.bc-two { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; }
.bc-seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 3px; border-radius: 12px; background: var(--bg); border: 1.5px solid var(--field-border); }
.bc-seg label { margin: 0; cursor: pointer; }
.bc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.bc-seg span { display: block; text-align: center; padding: 11px 0; border-radius: 9px; font-weight: 800; color: var(--muted); text-transform: none; letter-spacing: 0; }
.bc-seg label:hover span { color: var(--text); }
.bc-seg input:checked + span { background: var(--primary-600); color: #fff; box-shadow: 0 2px 6px rgba(15, 118, 110, .35); }
.bc-seg input:focus-visible + span { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.bc-check { display: flex !important; align-items: center; gap: 10px; margin: 0; font-size: 0.92rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text); cursor: pointer; }
.bc-check input { width: 18px !important; height: 18px; min-height: 0; margin: 0; accent-color: var(--primary-600); }
.bc-results { display: grid; gap: 14px; position: sticky; top: 88px; }
.bc-hero { padding: 24px; border: 0; color: #fff; background: radial-gradient(circle at 85% 0%, rgba(249, 115, 22, .22), transparent 45%), linear-gradient(135deg, #0b544e, #0f766e); box-shadow: 0 14px 36px rgba(11, 84, 78, .28); }
.bc-hero .bc-label { color: rgba(255, 255, 255, .78); }
.bc-monthly { display: block; font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1.1; margin: 6px 0 2px; letter-spacing: -0.02em; }
.bc-sub { color: rgba(255, 255, 255, .8); font-size: 0.92rem; }
.bc-split { display: flex; height: 10px; border-radius: 99px; overflow: hidden; margin: 18px 0 10px; background: rgba(255, 255, 255, .15); }
.bc-split-cap { background: #fff; transition: width .3s; }
.bc-split-int { background: #fb923c; transition: width .3s; }
.bc-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.88rem; color: rgba(255, 255, 255, .85); }
.bc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.bc-legend i.is-cap { background: #fff; }
.bc-legend i.is-int { background: #fb923c; }
.bc-legend b { color: #fff; margin-left: 4px; }
.bc-total { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 0.9rem; color: rgba(255, 255, 255, .85); display: flex; justify-content: space-between; gap: 10px; }
.bc-total b { color: #fff; font-size: 1.05rem; }
.bc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bc-mini { padding: 18px; display: grid; gap: 6px; align-content: start; }
.bc-mini strong { font-size: 1.45rem; color: var(--primary-ink); }
.bc-mini-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-tint-bg); color: var(--primary-ink); margin-bottom: 4px; }
.bc-mini-icon svg { width: 18px; height: 18px; }
.bc-costs { margin: 2px 0 4px; display: grid; gap: 4px; }
.bc-costs div { display: flex; justify-content: space-between; gap: 10px; }
.bc-costs dt { color: var(--muted); font-size: 0.9rem; }
.bc-costs dd { margin: 0; font-weight: 800; }
.bc-browse { justify-content: center; padding: 14px 18px; font-size: 1rem; }
.bc-browse svg { width: 18px; height: 18px; }
.bc-disclaimer { margin: 22px 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.5; max-width: 900px; }
@media (max-width: 900px) {
    .bc-layout { grid-template-columns: minmax(0, 1fr); }
    .bc-results { position: static; }
}
@media (max-width: 520px) {
    .bc-inputs { padding: 18px; }
    .bc-two, .bc-cards { grid-template-columns: minmax(0, 1fr); }
}
.bc-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.bc-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; background: none; color: var(--muted); font-weight: 700; box-shadow: none; }
.bc-tab svg { width: 18px; height: 18px; }
.bc-tab:hover { background: var(--bg); color: var(--text); box-shadow: none; }
.bc-tab[aria-selected="true"] { background: var(--primary-600); color: #fff; box-shadow: 0 2px 8px rgba(15, 118, 110, .3); }
.bc-layout[hidden] { display: none; }
.bc-afford-rows { display: grid; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); }
.bc-afford-rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; color: rgba(255, 255, 255, .85); }
.bc-afford-rows b { color: #fff; font-size: 1rem; }
.bc-afford-limit { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .1); font-size: 0.86rem; line-height: 1.45; color: rgba(255, 255, 255, .92); }
@media (max-width: 520px) { .bc-tabs { display: flex; } .bc-tab { flex: 1; justify-content: center; padding: 10px 8px; font-size: 0.9rem; } }
.bc-tab-short { display: none; }
@media (max-width: 520px) { .bc-tab-long { display: none; } .bc-tab-short { display: inline; } }

/* ---------- Find an Attorney (attorneys/*, admin/attorneys/*) ---------- */
.at-page { max-width: 1120px; }
.at-head { margin: 8px 0 18px; max-width: 760px; }
.at-head h1 { margin: 4px 0 8px; font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.at-head p { margin: 0; color: var(--muted); font-size: 1.04rem; line-height: 1.55; }
.at-filter { display: grid; grid-template-columns: 1fr 1.2fr 1fr auto; gap: 12px; align-items: end; padding: 16px 18px; margin-bottom: 16px; }
.at-filter .field { margin: 0; }
.at-filter .btn { height: 46px; }
.at-count { margin: 0 0 10px; }
.at-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.at-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; color: var(--text); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.at-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 23, 42, .12); border-color: var(--primary-500); }
.at-card.is-featured { border-color: var(--primary-tint-border, var(--primary-200)); }
.at-card-top { display: flex; align-items: center; gap: 12px; }
.at-card-name { display: grid; min-width: 0; flex: 1; }
.at-card-name strong { font-size: 1.05rem; }
.at-card-name .meta { display: inline-flex; align-items: center; gap: 4px; }
.at-card-name svg { width: 14px; height: 14px; }
.at-logo { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid var(--border); padding: 4px; flex: none; }
.at-logo-lg { width: 88px; height: 88px; border-radius: 16px; }
.at-initials { display: grid; place-items: center; padding: 0; border: 0; color: #fff; font-weight: 800; font-size: 1.1rem; background: hsl(var(--lg-hue, 170) 45% 38%); }
.at-logo-lg.at-initials { font-size: 1.6rem; }
.at-featured { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; background: #fff7ed; color: #c2410c; font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
.at-featured svg { width: 12px; height: 12px; }
.at-services { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.at-services li { padding: 3px 10px; border-radius: 99px; background: var(--bg); border: 1px solid var(--border); font-size: 0.8rem; color: var(--muted); }
.at-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.at-lpc { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 700; color: var(--primary-ink); }
.at-lpc svg { width: 15px; height: 15px; }
.at-go { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--primary-ink); font-size: 0.9rem; }
.at-go svg { width: 15px; height: 15px; }
.at-empty { text-align: center; padding: 40px 24px; }
.at-empty h2 { margin: 10px 0 6px; font-size: 1.2rem; }
.at-note { margin-top: 22px; font-size: 0.82rem; }
.at-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.at-profile { display: flex; gap: 18px; align-items: center; padding: 22px; }
.at-profile h1 { margin: 4px 0 6px; font-size: clamp(1.5rem, 3vw, 2rem); }
.at-profile .dvp-place { margin-bottom: 6px; }
.at-areas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.at-areas li { padding: 5px 12px; border-radius: 99px; background: var(--primary-tint-bg); color: var(--primary-ink-strong); font-weight: 600; font-size: 0.88rem; }
.at-contact { display: flex; flex-wrap: wrap; gap: 10px; }
.at-side { position: sticky; top: 88px; }
.at-quote { padding: 22px; }
.at-quote h2 { margin: 0 0 6px; font-size: 1.25rem; }
.at-quote .field { margin-bottom: 10px; }
.at-admin-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.at-admin-logo img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 4px; }
.at-q-msg { max-width: 360px; white-space: normal; }
@media (max-width: 900px) {
    .at-layout { grid-template-columns: minmax(0, 1fr); }
    .at-side { position: static; }
    .at-filter { grid-template-columns: 1fr 1fr; }
    .at-filter .btn { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .at-filter { grid-template-columns: minmax(0, 1fr); }
    .at-profile { flex-direction: column; align-items: flex-start; }
    .at-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Copied-photo check on the listing form (PhotoMatch) */
.photo-match-callout { margin: 0 0 16px; }
.photo-match-callout strong { display: block; margin-bottom: 4px; }
.photo-match-list { margin: 4px 0 6px; padding-left: 18px; }
.photo-match-list li { margin: 2px 0; }
.photo-match-list a { font-weight: 600; }
.photo-match-callout .meta { margin: 0; font-size: 0.8rem; }
.photo-preview-item.is-matched { outline: 2px solid var(--warning-text); outline-offset: -2px; }
.photo-match-tag {
    position: absolute;
    left: 4px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.78);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    max-width: calc(100% - 8px);
    pointer-events: none;
}
@media (max-width: 480px) { .photo-match-tag { font-size: 0.62rem; padding: 2px 6px; } }
.photo-match-tag .icon { width: 12px; height: 12px; }
.pm-pending { margin: 0 0 14px; align-items: center; }
.pm-table .al-sub { display: block; }
.pm-table .al-sub .status-pill { margin-right: 4px; }
.pm-count strong { font-size: 1.05rem; }

/* Agency-first home page (home-agency.php), shown until the first listing is live. */
.hero.hero-agency { min-height: 0; padding-bottom: clamp(64px, 9vw, 104px); }
.hero-agency h1 { max-width: 820px; text-wrap: balance; }
.hero-agency p { max-width: 680px; margin-bottom: 28px; text-wrap: balance; }
.hero-agency-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 24px; }
.hero-agency-actions .btn { min-height: 48px; padding: 0 22px; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; }
.hero-agency-primary { background: var(--accent-500); border-color: var(--accent-500); color: #fff; }
.hero-agency-primary:hover { background: var(--accent-600, #ea580c); border-color: var(--accent-600, #ea580c); color: #fff; }
.hero-agency-secondary { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; }
.hero-agency-secondary:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.hero-agency-chips { list-style: none; padding: 0; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.hero-agency-chips li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; font-weight: 600; color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }
.hero-agency-chips .icon { width: 16px; height: 16px; color: #5eead4; }
.home-agency-examples { padding-top: 8px; }
.home-agency-buyers { max-width: 1100px; margin: clamp(24px, 4vw, 40px) auto clamp(48px, 7vw, 72px); padding: clamp(20px, 3vw, 28px); border: 1px solid var(--border); border-radius: var(--radius-lg, 16px); background: var(--surface); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; width: calc(100% - 32px); }
.home-agency-buyers h2 { margin: 0 0 6px; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.home-agency-buyers h2 .icon { width: 20px; height: 20px; color: var(--primary-ink); }
.home-agency-buyers p { margin: 0; color: var(--muted); max-width: 62ch; line-height: 1.55; }
.home-agency-buyers > div:first-child { flex: 1 1 420px; min-width: 0; }
.home-agency-buyers-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Website enquiry form card (Agency → Website) */
.webform-steps { margin: 14px 0 12px; padding-left: 20px; display: grid; gap: 4px; font-size: 0.9rem; line-height: 1.5; }
.webform-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.webform-code textarea { margin: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.78rem; line-height: 1.45; resize: vertical; min-height: 120px; white-space: pre; overflow: auto; }
.webform-code .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.webform-link { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.webform-link a { color: var(--primary-ink); font-weight: 600; word-break: break-all; }
@media (max-width: 640px) { .webform-code { grid-template-columns: minmax(0, 1fr); } .webform-code .btn { justify-self: start; } }
.demo-visits summary { list-style: none; }
.demo-visits summary::-webkit-details-marker { display: none; }
.demo-visits-last { font-weight: 500; font-size: 0.85rem; color: var(--muted); margin-left: 4px; }
.demo-visits summary .demo-visits-chev { margin-left: auto; transition: transform 0.2s ease; color: var(--muted); }
.demo-visits[open] summary .demo-visits-chev { transform: rotate(180deg); }
@media (max-width: 600px) { .demo-visits summary { flex-wrap: wrap; } .demo-visits-last { flex-basis: 100%; order: 3; margin-left: 26px; } }
/* Site switches on Admin → Listing Prices (payments, private sellers, home page) */
.setting-list { display: grid; gap: 12px; margin: 18px 0 26px; }
.setting-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 16px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.setting-card > .section-icon-chip { align-self: start; margin-top: 2px; }
.setting-body { min-width: 0; }
.setting-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 4px; }
.setting-title h2 { margin: 0; font-size: 1.02rem; font-weight: 800; }
.setting-state { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 999px; background: var(--accent-tint-bg); color: var(--accent-600); border: 1px solid var(--accent-tint-border); white-space: nowrap; }
.setting-state.is-on { background: var(--primary-tint-bg); color: var(--primary-ink); border-color: var(--primary-tint-border); }
.setting-body p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; max-width: 720px; }
.setting-body p + p { margin-top: 6px; }
.setting-hint { font-size: 0.84rem !important; }
.setting-action { margin: 0; display: flex; align-items: center; gap: 8px; }
.setting-action button { white-space: nowrap; margin: 0; }
.setting-action-select select { margin: 0; min-width: 0; width: 230px; max-width: 100%; }
@media (max-width: 900px) {
    .setting-card { grid-template-columns: auto minmax(0, 1fr); }
    .setting-action { grid-column: 2; flex-wrap: wrap; }
    .setting-action-select select { width: 100%; }
}
@media (max-width: 520px) {
    .setting-card { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .setting-card > .section-icon-chip { display: none; }
    .setting-action { grid-column: 1; }
}

/* Portals page: each portal card in the same order (status, ID, login details, switches, counts), counts pinned to
   the bottom so both cards line up. */
.synd-portal { gap: 14px; padding: 18px; }
.synd-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--radius-sm, 8px); background: var(--primary-tint-bg); border: 1px solid var(--primary-tint-border); color: var(--muted); font-size: 0.84rem; line-height: 1.5; }
.synd-note .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.synd-credentials { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); padding: 10px 12px; }
.synd-credentials summary { list-style: none; display: flex; flex-direction: column; gap: 2px; padding: 0; font-weight: 400; }
.synd-credentials summary::-webkit-details-marker { display: none; }
.synd-summary-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.synd-summary-arrow { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.15s ease; }
.synd-credentials[open] .synd-summary-arrow { transform: rotate(90deg); }
.synd-summary-hint { font-size: 0.8rem; color: var(--muted); padding-left: 20px; }
.synd-cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.synd-cred-grid .field { margin: 0; }
.synd-cred-wide { grid-column: 1 / -1; }
.synd-verified { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 0.84rem; color: var(--success-text); }
.synd-verified .icon { width: 15px; height: 15px; flex-shrink: 0; }
.synd-options { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); padding-top: 14px; }
.synd-option { display: flex; gap: 10px; align-items: flex-start; margin: 0; cursor: pointer; font-weight: 400; text-transform: none; letter-spacing: normal; }
.synd-option input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--primary); }
.synd-option strong { display: block; font-size: 0.92rem; font-weight: 600; color: var(--text); }
.synd-option small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }
.synd-off-note { margin: 0; }
.synd-portal .synd-counts { margin-top: auto; }
@media (max-width: 520px) { .synd-cred-grid { grid-template-columns: minmax(0, 1fr); } }

/* Admin dashboard: "On the site now" line above the visitor numbers. */
.visits-live { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); font-size: 0.9rem; }
.visits-live strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.visits-live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-400, #9ca3af); flex-shrink: 0; }
.visits-live-dot.is-on { background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); animation: visits-live-pulse 1.8s ease-out infinite; }
@keyframes visits-live-pulse { to { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .visits-live-dot.is-on { animation: none; } }
.visits-live-pages { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.visits-live-pages span { padding: 2px 9px; border-radius: var(--radius-full); background: var(--primary-tint-bg); color: var(--primary-ink); font-size: 0.78rem; font-weight: 700; }

/* Admin → Demo Bookings: Join meeting / Open demo site under an upcoming booking's time. */
.demo-row-launch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.demo-row-launch .btn { width: auto; padding: 8px 14px; font-size: 0.86rem; }
.demo-row-launch .meta { font-size: 0.8rem; }

/* Agency → Weekly Seller Updates: day + time + Save on one line (wraps on phones). */
.seller-schedule-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.seller-schedule-form .field { margin: 0; min-width: 140px; }
.seller-schedule-form button { width: auto; }

/* Disclosure: who fills in the answers (the seller by link, or the agent with them). */
.dsc-who-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.dsc-who-option { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; }
.dsc-who-option input { width: auto; margin: 3px 0 0; accent-color: var(--primary-600); }
.dsc-who-option strong { display: block; font-size: 0.95rem; color: var(--text); }
.dsc-who-option small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.dsc-who-option:has(input:checked) { border-color: var(--primary-600); background: var(--primary-tint-bg); }
.dsc-seller-only { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.dsc-send-fill { width: auto; margin-top: 12px; }
#disclosure-form[data-who="seller"] .dsc-agent-only, #disclosure-form[data-who="agent"] .dsc-seller-only { display: none; }
.dsc-seller-only .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }

/* E-signed sale agreements: ink copy outstanding (InkCopy) */
.ink-due-pill, .ink-done-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; line-height: 1.4; width: fit-content; max-width: 100%; }
.ink-due-pill { background: #fef3c7; color: #92400e; }
.ink-done-pill { background: #dcfce7; color: #166534; }
.ink-due-pill .icon, .ink-done-pill .icon { width: 14px; height: 14px; flex: 0 0 14px; }
[data-theme="dark"] .ink-due-pill { background: rgba(245, 158, 11, .16); color: #fcd34d; }
[data-theme="dark"] .ink-done-pill { background: rgba(22, 163, 74, .18); color: #86efac; }
.otp-esign-form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.otp-esign-accept { max-width: 720px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.88rem; line-height: 1.5; }
.otp-ink-list { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--warning-bg); color: var(--warning-text); font-size: 0.88rem; }
.otp-ink-list ul { margin: 6px 0 0; padding-left: 18px; }
.otp-ink-list a { color: inherit; font-weight: 600; }
.otp-esign-risk { margin: 10px 0 12px; font-size: 0.86rem; }
.otp-esign-risk summary { cursor: pointer; color: var(--primary-ink); font-weight: 600; }
.otp-esign-risk p { margin: 6px 0 0; padding: 10px 12px; border-left: 3px solid var(--border); color: var(--muted); }

/* Admin → Mailbox (MailInbox): ErfFind's own email in the admin CRM */
.nav-count-badge.mbx-nav-badge, .crm-nav-link.active .nav-count-badge.mbx-nav-badge { background: #dc2626; color: #fff; }
.mbx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.mbx-brand { display: flex; gap: 12px; align-items: center; min-width: 0; }
.mbx-brand .section-title { margin: 0; }
.mbx-brand .meta { margin: 2px 0 0; }
.mbx-mark { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 11px; background: #0f766e; display: inline-flex; align-items: center; justify-content: center; font: 800 19px/1 Arial, Helvetica, sans-serif; letter-spacing: -0.5px; }
.mbx-mark span:first-child { color: #fff; }
.mbx-mark span:last-child { color: #f97316; }
.mbx-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mbx-picker select { min-width: 250px; font-weight: 600; }
.mbx-new-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 14px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; font-size: 0.92rem; }
.mbx-new-banner a { color: inherit; font-weight: 700; }
[data-theme="dark"] .mbx-new-banner { background: rgba(220, 38, 38, .12); border-color: rgba(248, 113, 113, .35); color: #fecaca; }
.mbx-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 0.75rem; font-weight: 800; line-height: 1; }
.mbx-dot-sm { min-width: 18px; height: 18px; font-size: 0.7rem; padding: 0 5px; }
.mbx-folders { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.mbx-folders a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 600; text-decoration: none; margin-bottom: -1px; }
.mbx-folders a:hover { color: var(--text); text-decoration: none; }
.mbx-folders a.is-on { color: var(--primary-ink); border-bottom-color: #0f766e; }
.mbx-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.mbx-search input[type="search"] { max-width: 340px; flex: 1 1 220px; }
.mbx-table { width: 100%; }
.mbx-table tr[data-href] { cursor: pointer; }
.mbx-table td { vertical-align: top; }
.mbx-table a { color: inherit; text-decoration: none; }
.mbx-table .mbx-subject strong { font-weight: 600; }
.mbx-table tr.is-unread td, .mbx-table tr.is-unread td strong { font-weight: 800; color: var(--text); }
.mbx-col-dot { width: 26px; padding-right: 0 !important; }
.mbx-col-date { width: 92px; white-space: nowrap; text-align: right; color: var(--muted); }
.mbx-unread-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #dc2626; margin-top: 6px; }
.mbx-replied .icon { width: 14px; height: 14px; color: var(--muted); }
.mbx-from { width: 26%; max-width: 260px; }
.mbx-from a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-from small { display: block; color: var(--muted); font-weight: 400; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-subject a { display: block; min-width: 0; }
.mbx-snippet { display: block; color: var(--muted); font-weight: 400; font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 680px; }
.mbx-clip .icon { width: 13px; height: 13px; color: var(--muted); vertical-align: -2px; }
.mbx-pages { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 16px 0; }
.mbx-back { display: inline-block; margin-bottom: 10px; }
.mbx-read { padding: 0; overflow: hidden; }
.mbx-read-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.mbx-read-head h2 { margin: 0 0 10px; font-size: 1.3rem; line-height: 1.3; }
.mbx-read-meta { display: flex; flex-direction: column; gap: 2px; font-size: 0.92rem; overflow-wrap: anywhere; }
.mbx-prospect { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, #0f766e 9%, var(--surface)); font-size: 0.9rem; }
.mbx-prospect > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mbx-prospect .icon { width: 15px; height: 15px; color: var(--primary-ink); }
.mbx-prospect a { font-weight: 700; }
.mbx-prospect form { margin: 0; }
.mbx-bounce { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: var(--warning-bg); color: var(--warning-text); font-size: 0.88rem; }
.mbx-bounce .icon { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; }
.mbx-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.mbx-actions form { margin: 0; }
.mbx-images-note { display: flex; gap: 6px; align-items: center; margin: 0; padding: 8px 20px; font-size: 0.85rem; color: var(--muted); background: var(--surface-2, rgba(0,0,0,.03)); border-bottom: 1px solid var(--border); }
.mbx-images-note .icon { width: 15px; height: 15px; }
.mbx-frame { display: block; width: 100%; min-height: 120px; height: 260px; border: 0; background: #fff; }
.mbx-attachments { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 20px 16px; border-top: 1px solid var(--border); }
.mbx-attachment { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.86rem; text-decoration: none; color: var(--text); }
.mbx-attachment .icon { width: 14px; height: 14px; color: var(--primary-ink); }
.mbx-compose { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; max-width: 900px; padding: 18px 20px; }
.mbx-compose[hidden] { display: none; }
.mbx-compose h3 { margin: 0 0 4px; }
.mbx-compose label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.88rem; }
.mbx-compose .meta { margin: 0; }
.mbx-compose-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) {
    .mbx-picker select { min-width: 0; width: 100%; }
    .mbx-head-actions, .mbx-picker { width: 100%; }
    .mbx-table thead { display: none; }
    .mbx-table, .mbx-table tbody, .mbx-table tr, .mbx-table td { display: block; width: auto; max-width: none; }
    .mbx-table tr { position: relative; padding: 10px 12px 10px 28px; border-bottom: 1px solid var(--border); }
    .mbx-table td { padding: 0 !important; border: 0 !important; }
    .mbx-col-dot { position: absolute; left: 10px; top: 10px; width: auto; }
    .mbx-col-date { position: absolute; right: 12px; top: 10px; width: auto; font-size: 0.8rem; }
    .mbx-from { padding-right: 60px !important; }
    .mbx-snippet { max-width: 100%; }
}

/* Agency page: Join Code + Referral Code cards (neutral colours: an agency's brand accent can be near-black) */
.code-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 4px 0 14px; }
.code-cards.code-cards-one { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.code-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); }
.code-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.code-card-head h3 { margin: 0; font-size: 1rem; }
.code-card-badge { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #fff7ed; color: #9a3412; font-size: 0.76rem; font-weight: 700; }
[data-theme="dark"] .code-card-badge { background: rgba(249, 115, 22, .16); color: #fdba74; }
.code-card-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, rgba(148,163,184,0.12)); border: 1px dashed var(--border); }
.code-card-code span { font: 800 1.25rem/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.08em; color: var(--text); }
.code-card .meta { margin: 0; line-height: 1.5; }
.code-card-link { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.85rem; text-transform: none; letter-spacing: 0; }
.code-card-link > span { display: flex; gap: 8px; }
.code-card-link input { flex: 1 1 auto; min-width: 0; font-size: 0.85rem; }
.code-card-referral { border-color: color-mix(in srgb, #f97316 40%, var(--border)); }
@media (max-width: 760px) { .code-cards { grid-template-columns: minmax(0, 1fr); } .code-card-badge { margin-left: 0; } }
.code-card [data-copy] { white-space: nowrap; flex: 0 0 auto; }

/* CRM: banners pinned at the top; sidebar + top bar below them at a fixed height (no jumping while scrolling) */
.crm-banners { position: sticky; top: 0; z-index: 2000; }
.crm-banners:empty { display: none; }
.crm-banners .env-banner { position: static; }
.crm-sidebar { top: var(--crm-banner-h, 0px); height: calc(100vh - var(--crm-banner-h, 0px)); }
.crm-topbar { top: var(--crm-banner-h, 0px); }

/* Calendar → Sync with your calendar (CalendarSync) */
.cal-sync { max-width: 860px; }
.cal-sync-lead { max-width: 720px; margin-bottom: 16px; }
.cal-sync-card { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding: 18px 20px; }
.cal-sync-card .section-card-header { margin-bottom: 0; }
.cal-sync-card .meta { margin: 0; line-height: 1.5; }
.cal-sync-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cal-sync-app { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; }
.cal-sync-app:hover { border-color: var(--primary-ink); text-decoration: none; }
.cal-sync-app strong { font-size: 0.98rem; }
.cal-sync-app strong::after { content: ' \2192'; color: var(--primary-ink); }
.cal-sync-app span { font-size: 0.84rem; color: var(--muted); }
.cal-sync-link { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.86rem; text-transform: none; letter-spacing: 0; }
.cal-sync-link > span { display: flex; gap: 8px; }
.cal-sync-link input { flex: 1 1 auto; min-width: 0; font-size: 0.85rem; }
.cal-sync-link button { white-space: nowrap; flex: 0 0 auto; }
.cal-sync-note { display: flex; gap: 6px; align-items: flex-start; }
.cal-sync-note .icon { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; }
.cal-sync-toggle { display: flex; gap: 10px; align-items: center; margin: 0; }
.cal-sync-private form { margin: 0; }
@media (max-width: 600px) { .cal-sync-apps { grid-template-columns: minmax(0, 1fr); } }
.appt-invite-client { margin: 4px 0 12px; text-transform: none; letter-spacing: 0; font-weight: 400; max-width: 640px; }

/* Admin → Demo Bookings → Prospect demos (ProspectDemo) */
.pdemo { margin: 18px 0 22px; }
.pdemo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.pdemo-head h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1.15rem; }
.pdemo-head h2 .icon { width: 18px; height: 18px; color: var(--primary-ink); }
.pdemo-head .meta { margin: 0; max-width: 720px; }
.pdemo-empty { padding: 14px 16px; border: 1px dashed var(--border); border-radius: 12px; }
.pdemo-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 14px 16px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.pdemo-card-head { display: flex; align-items: center; gap: 12px; }
.pdemo-swatch { flex: 0 0 14px; width: 14px; height: 38px; border-radius: 6px; }
.pdemo-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pdemo-title strong { font-size: 1.02rem; }
.pdemo-step { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 0.9rem; }
.pdemo-spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--primary-ink); border-radius: 50%; animation: pdemo-spin 0.8s linear infinite; }
@keyframes pdemo-spin { to { transform: rotate(360deg); } }
.pdemo-error { display: flex; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--warning-bg); color: var(--warning-text); font-size: 0.88rem; }
.pdemo-error .icon { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; }
.pdemo-facts { display: grid; grid-template-columns: 1.35fr 0.7fr 1.1fr 1.25fr 0.9fr; gap: 8px 16px; margin: 0; }
.pdemo-facts dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; }
.pdemo-facts dd { margin: 2px 0 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.pdemo-pass { font-family: ui-monospace, Consolas, monospace; }
.pdemo-cred { font-weight: 600; }
.pdemo-pages { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pdemo-chip { display: inline-flex; gap: 5px; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--surface-2, rgba(148,163,184,0.14)); font-size: 0.8rem; }
.pdemo-chip b { color: var(--primary-ink); }
.pdemo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pdemo-actions form { margin: 0; }
.pdemo-past { margin-top: 6px; }
.pdemo-past summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.pdemo-past ul { margin: 8px 0 0; padding-left: 18px; font-size: 0.9rem; }
.pdemo-form-page { max-width: 820px; }
.pdemo-form { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; margin-top: 12px; }
.pdemo-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.88rem; text-transform: none; letter-spacing: 0; }
.pdemo-form label .meta { font-weight: 400; }
.pdemo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.pdemo-slug { display: flex; align-items: center; gap: 4px; }
.pdemo-slug input { flex: 1 1 auto; min-width: 0; }
.pdemo-slug span { color: var(--muted); font-weight: 500; white-space: nowrap; }
.pdemo-colour { display: flex; align-items: center; gap: 10px; }
.pdemo-colour input[type="color"] { width: 54px; height: 38px; padding: 2px; }
@media (max-width: 760px) { .pdemo-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Admin → Users → Activity (UserActivity timeline) */
.ua-page { max-width: 1000px; }
.ua-who { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); margin: 0 0 16px; align-items: center; }
.ua-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ua-problems-chip .icon { width: 14px; height: 14px; }
.ua-problems-chip.active { border-color: var(--danger-border); color: var(--danger-text); background: var(--danger-bg); }
.ua-stats .stat-card { min-height: 84px; padding: 14px 16px; }
.ua-stat-bad strong { color: var(--danger); }
.ua-devices { margin: -8px 0 6px; }
.ua-devices .icon { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
.ua-help { margin: 0 0 18px; max-width: 760px; }
.ua-empty { padding: 18px; display: flex; gap: 12px; flex-wrap: wrap; }
.ua-day { margin-bottom: 18px; }
.ua-day-title { font-size: 1rem; margin: 0 0 8px; color: var(--text); }
.ua-visit { padding: 0; margin-bottom: 10px; overflow: hidden; }
.ua-visit-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface-muted, var(--surface)); }
.ua-rows { list-style: none; margin: 0; padding: 0; }
.ua-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; }
.ua-row:last-child { border-bottom: 0; }
.ua-row time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.85rem; padding-top: 1px; }
.ua-row.is-problem { border-left-color: var(--danger); background: var(--danger-bg); }
.ua-row.is-event .ua-desc { font-weight: 700; }
.ua-line { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.ua-desc { color: var(--text); }
.ua-badge { font-size: 0.74rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); background: #dc2626; color: #fff; }
.ua-badge-actor { background: var(--primary-tint-bg); color: var(--primary-ink-strong); }
.ua-note { font-size: 0.86rem; margin-top: 3px; overflow-wrap: anywhere; }
.ua-note-error { color: var(--danger-text); }
.ua-note-warning { color: var(--warning-text); }
.ua-note-success, .ua-note-info { color: var(--muted); }
.ua-path { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.75rem; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.ua-error { margin-top: 6px; font-size: 0.85rem; }
.ua-error summary { cursor: pointer; color: var(--danger-text); font-weight: 600; }
.ua-error p { margin: 6px 0 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .ua-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 12px; }
    .ua-visit-head { padding: 10px 12px; }
}
.user-last-active { color: var(--muted); font-size: 0.85rem; }

/* Portal status tags on the marketing cards (Syndication::statusTags) */
.portal-tags { display: grid; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.portal-tag { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 9px; align-items: start; font-size: 0.84rem; line-height: 1.4; color: var(--muted); }
.portal-tag b { color: var(--text); font-weight: 700; }
.portal-tag-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--border); }
.portal-tag-live .portal-tag-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
.portal-tag-live .portal-tag-state { color: #15803d; font-weight: 600; }
.portal-tag-ready .portal-tag-dot { background: var(--primary-500, #14b8a6); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .portal-tag-live .portal-tag-state { color: #4ade80; } }
:root[data-theme="dark"] .portal-tag-live .portal-tag-state { color: #4ade80; }

/* CMA reports (CmaController: cma/index, cma/new, cma/show) */
.cma-page .deals-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cma-new { max-width: 900px; }
.cma-h2 { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; margin: 0 0 12px; }
.cma-h2 .icon { width: 18px; height: 18px; color: var(--primary-ink-strong); }
.cma-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.cma-grid .field { margin: 0; }
.cma-span-2 { grid-column: span 2; }
.cma-span-3 { grid-column: 1 / -1; }
.cma-start-from { padding: 14px 16px; margin-bottom: 14px; }
.cma-start-from label { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 8px; }
.cma-start-from .icon { width: 17px; height: 17px; }
.cma-start-row { display: flex; gap: 8px; }
.cma-start-row select { flex: 1; }
.cma-form { padding: 4px 0 0; }
.cma-new .cma-form { padding: 18px; }
.cma-list { display: grid; gap: 10px; }
.cma-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 16px; color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.cma-row:hover { border-color: var(--primary-500); box-shadow: var(--shadow-md); }
.cma-row-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--primary-tint-bg); color: var(--primary-ink-strong); }
.cma-row-icon .icon { width: 20px; height: 20px; }
.cma-row-main { display: flex; flex-direction: column; min-width: 0; }
.cma-row-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cma-row-price { font-weight: 800; color: var(--primary-ink-strong); white-space: nowrap; }
.cma-row-status { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cma-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--surface); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.cma-pill .icon { width: 13px; height: 13px; }
.cma-pill.is-good { background: var(--success-bg); border-color: transparent; color: var(--success-text); }
.cma-pill.is-draft { background: var(--warning-bg); border-color: transparent; color: var(--warning-text); }
.cma-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cma-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cma-steps > li { padding: 18px; }
.cma-step-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; cursor: default; }
details > summary.cma-step-head { cursor: pointer; list-style: none; margin-bottom: 0; }
details > summary.cma-step-head::-webkit-details-marker { display: none; }
details[open] > summary.cma-step-head { margin-bottom: 14px; }
.cma-step-head > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cma-step-head strong { font-size: 1.05rem; }
.cma-num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-600); color: #fff; font-weight: 800; }
.cma-edit-link { color: var(--primary-ink); font-weight: 700; font-size: 0.88rem; }
details[open] .cma-edit-link { visibility: hidden; }
.cma-comps { display: grid; gap: 8px; }
.cma-comp { display: grid; grid-template-columns: 28px 84px minmax(0, 1fr) 172px 32px; gap: 14px; align-items: center; padding: 12px 12px 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: opacity .15s; }
.cma-comp.is-off { opacity: 0.5; }
.cma-comp-tick input { width: 18px; height: 18px; }
.cma-comp-photo { width: 84px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--primary-tint-bg); display: grid; place-items: center; color: var(--primary-ink-strong); }
.cma-comp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cma-comp-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cma-comp-title { display: block; font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cma-comp-sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cma-comp-sub .meta, .cma-comp-facts { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cma-comp-facts a { color: var(--primary-ink); font-weight: 600; }
.cma-kind { flex: none; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 6px; line-height: 1.5; }
.cma-kind-sold { background: var(--primary-tint-bg); color: var(--primary-ink-strong); }
.cma-kind-active { background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.cma-note { width: 100%; margin-top: 5px; padding: 6px 10px !important; font-size: 0.85rem !important; }
.cma-comp-price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.cma-comp-price strong { font-size: 1.02rem; }
.cma-comp-price label { display: flex; align-items: center; gap: 6px; }
.cma-comp-price input { width: 104px; padding: 5px 8px !important; font-size: 0.85rem !important; text-align: right; }
.cma-remove { background: none !important; border: 0 !important; color: var(--muted) !important; padding: 4px !important; box-shadow: none !important; cursor: pointer; }
.cma-remove:hover { color: var(--danger) !important; }
.cma-remove .icon { width: 17px; height: 17px; }
.cma-enter-save { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cma-comp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cma-none { margin: 0 0 12px; }
.cma-add { margin-top: 14px; }
.cma-add > summary { list-style: none; display: inline-flex; cursor: pointer; }
.cma-add > summary::-webkit-details-marker { display: none; }
.cma-add[open] > summary { margin-bottom: 12px; }
.cma-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.cma-figures > div { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); min-width: 0; }
.cma-figures strong { font-size: 1.2rem; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cma-fig-span { white-space: nowrap; }
.cma-suggest { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 18px; border: 1px solid var(--primary-500); border-left-width: 4px; border-radius: 12px; background: var(--primary-tint-bg); }
.cma-suggest-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cma-suggest strong { font-size: 1.35rem; color: var(--primary-ink-strong); font-variant-numeric: tabular-nums; }
.cma-suggest strong span { white-space: nowrap; }
.cma-suggest .btn { flex: none; }
#price .cma-grid { align-items: end; }
.cma-fig-label { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cma-share { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cma-share form { margin: 0; }
.cma-delete { margin-top: 18px; }
.cma-delete .link-button { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.cma-delete .icon { width: 15px; height: 15px; }
@media (max-width: 900px) {
    .cma-figures strong { font-size: 1.1rem; }
    .cma-comp { grid-template-columns: 28px 64px minmax(0, 1fr) 32px; }
    .cma-comp-photo { width: 64px; height: 50px; }
    .cma-comp-price { grid-column: 3 / 4; align-items: flex-start; text-align: left; }
}
@media (max-width: 640px) {
    .cma-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cma-span-2, .cma-span-3 { grid-column: 1 / -1; }
    .cma-figures { grid-template-columns: minmax(0, 1fr); }
    .cma-comp-title, .cma-comp-sub .meta, .cma-comp-facts { white-space: normal; }
    .cma-comp-sub { flex-wrap: wrap; }
    .cma-row { grid-template-columns: 42px minmax(0, 1fr); }
    .cma-comp { grid-template-columns: 22px 52px minmax(0, 1fr) 28px; gap: 10px; padding: 10px 8px 10px 10px; }
    .cma-comp-photo { width: 52px; height: 44px; }
    .cma-comp-main { grid-column: 3; grid-row: 1; }
    .cma-remove { grid-column: 4; grid-row: 1; align-self: start; }
    .cma-comp-price { grid-column: 1 / -1; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 14px; text-align: left; padding-left: 32px; }
    .cma-comp-price label { white-space: nowrap; }
    .cma-row-price, .cma-row-status { grid-column: 2; align-items: flex-start; }
    .cma-figures { grid-template-columns: minmax(0, 1fr); }
    .cma-steps > li { padding: 14px; }
}

/* Email inbox (EmailController: email/index, email/show, email/settings, email/_record) */
.em-page .deals-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.em-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.em-toolbar .deals-tabs { margin: 0; }
.em-search input { min-width: 260px; }
.em-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.em-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.em-row:last-child { border-bottom: 0; }
.em-row:hover { background: var(--primary-tint-bg); }
.em-row.is-unread { box-shadow: inset 3px 0 0 var(--primary-600); }
.em-row.is-unread strong, .em-row.is-unread .em-subject { font-weight: 800; }
.em-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint-bg); color: var(--primary-ink-strong); font-weight: 800; }
.em-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.em-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.em-subject { font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-snippet { color: var(--muted); font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-snippet b { color: var(--text); font-weight: 600; }
.em-chip { font-size: 0.7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--primary-tint-bg); color: var(--primary-ink-strong); }
.em-chip.is-new { background: var(--warning-bg); color: var(--warning-text); }
.em-chip.is-cover { background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.em-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.em-time { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.em-wait { font-size: 0.72rem; font-weight: 700; color: var(--primary-ink); }
.em-thread { max-width: 900px; }
.em-messages { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.em-msg { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--surface); max-width: 92%; }
.em-msg.is-out { align-self: flex-end; background: var(--primary-tint-bg); border-color: var(--primary-200, var(--border)); }
.em-msg header { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.em-msg-subject { font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.em-msg-body { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; }
.em-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.em-att { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.84rem; background: var(--surface); }
.em-att .icon { width: 14px; height: 14px; }
.em-original { margin-top: 10px; }
.em-original summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--primary-ink); }
.em-original iframe { width: 100%; height: 420px; border: 1px solid var(--border); border-radius: 10px; margin-top: 8px; background: #fff; }
.em-reply { padding: 18px; }
.em-reply textarea { min-height: 150px; }
.em-settings { max-width: 900px; }
.em-address { padding: 16px 18px; margin-bottom: 14px; }
.em-address-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.em-address code { font-size: 1.05rem; font-weight: 700; padding: 6px 10px; border-radius: 8px; background: var(--primary-tint-bg); color: var(--primary-ink-strong); overflow-wrap: anywhere; }
.em-confirm { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--warning-bg); color: var(--warning-text); }
.em-confirm code { font-weight: 800; font-size: 1.05rem; }
.em-guides { display: grid; gap: 10px; margin-bottom: 12px; }
.em-guides details { padding: 14px 16px; }
.em-guides summary { cursor: pointer; }
.em-guides ol { margin: 10px 0 6px; padding-left: 20px; line-height: 1.6; }
.em-record { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 16px 0; background: var(--surface); }
.em-record-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.em-record-head strong { display: inline-flex; align-items: center; gap: 7px; }
.em-record-head .icon { width: 16px; height: 16px; }
.em-record-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.em-record-list a { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; grid-template-areas: "dir subj time" "dir snip time"; gap: 0 10px; padding: 7px 8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.em-record-list a:hover { background: var(--primary-tint-bg); }
.em-dir { grid-area: dir; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding-top: 2px; }
.is-in .em-dir { color: var(--primary-ink-strong); }
.is-unread .em-record-subj { font-weight: 800; }
.em-record-subj { grid-area: subj; font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-record-snip { grid-area: snip; font-size: 0.84rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-record-list .meta { grid-area: time; white-space: nowrap; font-size: 0.78rem; }
@media (max-width: 640px) {
    .em-search, .em-search input { width: 100%; min-width: 0; }
    .em-row { grid-template-columns: 34px minmax(0, 1fr); padding: 12px; }
    .em-avatar { width: 34px; height: 34px; }
    .em-side { grid-column: 2; flex-direction: row; justify-content: flex-start; }
    .em-msg { max-width: 100%; }
    .em-record-list a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "dir" "subj" "snip" "time"; }
}

/* Admin → Mailbox: attachments (files + Sign documents) */
.mbx-attach { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 4px 0 6px; background: var(--surface); }
.mbx-attach > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.mbx-attach > summary .icon { width: 15px; height: 15px; }
.mbx-attach-files { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-weight: 600; font-size: 0.9rem; }
.mbx-attach-docs { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.mbx-attach-docs .ps-inline { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9rem; margin: 4px 0 0; font-weight: 400; }
.mbx-attach-docs .ps-inline input { width: auto !important; flex: none; margin-top: 3px; }

/* ---------- Messages redesign (22 Oct 2026): chat list sections, support channel, cleaner conversations ---------- */
.chat-page .chat-shell { border-radius: 16px; box-shadow: var(--shadow-md); }
.chat-page .chat-rail { width: 320px; background: var(--surface); }
.chat-rail .chat-rail-header { padding: 16px 16px 10px; }
.chat-rail .chat-rail-header h2 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.cr-new { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--primary-ink-strong); background: var(--primary-tint-bg); }
.cr-new:hover { background: var(--primary-600); color: #fff; }
.cr-new .icon { width: 18px; height: 18px; }
.cr-search { position: relative; margin: 0 14px 8px; }
.cr-search .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.cr-search input { width: 100%; padding: 9px 12px 9px 34px !important; border-radius: 10px !important; font-size: 0.88rem !important; background: var(--bg) !important; }
.chat-rail .chat-rail-list { padding: 2px 8px 12px; }
.cr-section { padding: 12px 10px 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cr-section[hidden], .chat-rail-item[hidden] { display: none !important; }
.chat-rail .chat-rail-item { gap: 11px; padding: 9px 10px; border-radius: 12px; border: 1px solid transparent; margin-bottom: 2px; }
.chat-rail .chat-rail-item:hover { background: var(--bg); }
.chat-rail .chat-rail-item.active { background: var(--primary-tint-bg); border-color: var(--primary-tint-border); }
.chat-rail[data-viewer-admin="0"] .chat-rail-item.is-support:not(.active) { background: color-mix(in srgb, var(--primary-tint-bg) 55%, transparent); }
.cr-pic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 0.9rem; letter-spacing: -.02em; }
.cr-pic-group { background: var(--avatar-bg, var(--primary-tint-bg)); color: var(--primary-ink-strong); }
.cr-pic-agency { border-radius: 50%; background: #e0f2fe; color: #075985; }
.cr-pic-ef { background: #0f766e; color: #fff; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; }
.cr-pic-ef span { color: #f97316; }
.chat-rail .avatar.cr-avatar { width: 40px; height: 40px; }
.chat-rail .avatar-presence-wrap { flex: none; }
.cr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-top, .cr-bottom { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cr-name { font-size: 0.9rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cr-count { font-size: 0.72rem; color: var(--muted); font-weight: 600; flex: none; }
.cr-count::before { content: "\00B7\00A0"; }
.cr-badge { flex: none; font-size: 0.64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: #0f766e; color: #fff; }
.cr-time { margin-left: auto; flex: none; font-size: 0.72rem; color: var(--muted); }
.cr-preview { flex: 1; min-width: 0; font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-rail-item.is-unread .cr-name, .chat-rail-item.is-unread .cr-preview { color: var(--text); font-weight: 700; }
.chat-rail-item.is-unread .cr-time { color: var(--primary-ink); font-weight: 700; }
.cr-unread { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--primary-600); }

.chat-page .chat-pane-header { padding: 12px 18px; gap: 12px; min-height: 66px; }
.cp-pic { width: 42px; height: 42px; }
.chat-page .chat-pane-title { flex: 1; }
.chat-page .chat-pane-title strong { font-size: 1rem; display: flex; align-items: center; gap: 6px; }
.chat-page .chat-pane-title .meta { font-size: 0.8rem; }
.cp-members { position: relative; flex: none; }
.cp-members > summary { list-style: none; display: flex; align-items: center; cursor: pointer; padding: 4px 6px; border-radius: 999px; }
.cp-members > summary::-webkit-details-marker { display: none; }
.cp-members > summary:hover { background: var(--bg); }
.cp-stack { width: 30px !important; height: 30px !important; border: 2px solid var(--surface); margin-left: -8px; font-size: 0.7rem; }
.cp-members > summary .cp-stack:first-child { margin-left: 0; }
.cp-more { margin-left: -8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--surface); font-size: 0.7rem; font-weight: 800; color: var(--muted); }
.cp-members-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 260px; max-height: 340px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px; }
.cp-members-pop > strong { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.cp-member { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 0.88rem; }

.chat-page .chat-pane .chat-log { padding: 18px 22px; background: var(--bg); gap: 2px; }
.chat-page .message-bubble { max-width: min(72%, 620px); padding: 9px 13px 7px; border-radius: 16px; margin-bottom: 6px; box-shadow: none; line-height: 1.45; font-size: 0.92rem; }
.chat-page .message-bubble.mine { border-bottom-right-radius: 5px; }
.chat-page .message-bubble.theirs { border-bottom-left-radius: 5px; background: var(--surface); }
.chat-page .message-bubble .meta { font-size: 0.66rem; text-align: right; margin-top: 3px; }
.chat-page .message-bubble.has-av { position: relative; margin-left: 46px; }
.chat-page .message-bubble.is-cont { margin-top: -3px; }
.chat-page .message-bubble.is-cont .msg-av, .chat-page .message-bubble.is-cont .msg-sender { display: none; }
.msg-av { position: absolute; left: -46px; top: 0; }
.msg-av .avatar, .msg-av .cr-pic { width: 34px; height: 34px; font-size: 0.75rem; border-radius: 50%; }
.msg-av .cr-pic-ef { border-radius: 10px; }
.chat-page .msg-sender { font-size: 0.76rem; font-weight: 800; color: var(--primary-ink); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.chat-page .message-bubble.is-staff { border-color: var(--primary-tint-border); background: color-mix(in srgb, var(--primary-tint-bg) 60%, var(--surface)); }
.chat-page .chat-day { margin: 12px 0 8px; }

.chat-page .chat-composer { padding: 12px 16px; gap: 6px; align-items: flex-end; border-top: 1px solid var(--border); background: var(--surface); }
.chat-page .chat-composer-input { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 4px 6px; }
.chat-page .chat-composer-input:focus-within { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(20, 184, 166, .15); }
.chat-page .chat-composer textarea { border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 42px; max-height: 160px; padding: 9px 8px !important; resize: none; }
.chat-page .chat-attach-btn { width: 38px; height: 38px; border-radius: 10px; border: 0; color: var(--muted); display: grid; place-items: center; margin-bottom: 4px; }
.chat-page .chat-attach-btn:hover { background: var(--bg); color: var(--primary-ink); }
.chat-page .chat-send-btn { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 2px; }

.chat-empty-support { display: flex; align-items: center; gap: 12px; text-align: left; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--primary-tint-border); background: var(--primary-tint-bg); border-radius: 14px; color: var(--text); text-decoration: none; }
.chat-empty-support strong { display: block; }
.chat-empty-support:hover { border-color: var(--primary-500); }

@media (max-width: 760px) {
    .chat-page .chat-rail { width: 100%; }
    .chat-page .message-bubble { max-width: 86%; }
    .chat-page .message-bubble.has-av { margin-left: 40px; }
    .msg-av { left: -40px; }
    .msg-av .avatar, .msg-av .cr-pic { width: 30px; height: 30px; }
    .cp-members-pop { right: -40px; }
}

/* Admin → Users: compact actions (Activity, Sign in as user) + a More menu for the rest */
.user-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.user-actions form { margin: 0; }
.user-actions .btn-sm, .user-actions button.btn-sm, .user-actions summary.btn-sm { padding: 6px 12px !important; font-size: 0.82rem !important; min-height: 0 !important; border-radius: 9px !important; line-height: 1.2; display: inline-flex; align-items: center; gap: 6px; }
.user-actions .btn-sm .icon { width: 15px; height: 15px; }
.user-more { position: relative; }
.user-more > summary { list-style: none; cursor: pointer; }
.user-more > summary::-webkit-details-marker { display: none; }
.user-more[open] > summary { background: var(--primary-tint-bg); }
.user-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; }
.user-more-menu form { display: block; }
.user-more-item { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 9px; width: 100%; padding: 9px 10px !important; border: 0 !important; border-radius: 8px !important; background: none !important; color: var(--text) !important; font: inherit; font-size: 0.88rem !important; font-weight: 600; text-align: left; cursor: pointer; box-shadow: none !important; min-height: 0 !important; text-decoration: none; list-style: none; }
.user-more-item::-webkit-details-marker { display: none; }
.user-more-item:hover { background: var(--bg) !important; }
.user-more-item .icon { width: 16px; height: 16px; color: var(--muted); flex: none; }
.user-more-item.is-danger, .user-more-item.is-danger .icon { color: var(--danger) !important; }
.user-more-sub > form { padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.user-more-sub[open] > .user-more-item { background: var(--bg) !important; }
.user-more-menu .admin-perm-form, .user-more-menu .admin-pw-reset-form { position: static; box-shadow: none; border: 0; width: auto; margin: 0; }

/* Messages: more contrast (22 Oct): tinted chat list, darker conversation area, clear lines and inputs */
.chat-page { --chat-line: color-mix(in srgb, var(--border) 65%, var(--text) 14%); --chat-rail-bg: color-mix(in srgb, var(--bg) 70%, var(--primary-tint-bg) 30%); --chat-log-bg: color-mix(in srgb, var(--bg) 82%, var(--text) 5%); }
.chat-page .chat-shell { border: 1px solid var(--chat-line); }
.chat-page .chat-rail { background: var(--chat-rail-bg); border-right: 1px solid var(--chat-line); }
.chat-page .chat-pane-header { border-bottom: 1px solid var(--chat-line); background: var(--surface); }
.chat-page .chat-pane .chat-log { background: var(--chat-log-bg); }
.chat-page .chat-pane-empty { background: var(--chat-log-bg); }
.chat-page .cr-search input { background: var(--surface) !important; border: 1px solid var(--chat-line) !important; }
.chat-page .cr-search input:focus { border-color: var(--primary-500) !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, .15) !important; }
.chat-page .chat-rail .chat-rail-item:hover { background: var(--surface); }
.chat-page .chat-rail .chat-rail-item.active { background: var(--surface); border-color: var(--primary-500); box-shadow: inset 3px 0 0 var(--primary-600); }
.chat-page .message-bubble.theirs { border: 1px solid var(--chat-line); background: var(--surface); }
.chat-page .chat-day span { background: var(--surface); border: 1px solid var(--chat-line); }
.chat-page .chat-composer { border-top: 1px solid var(--chat-line); background: var(--surface); }
.chat-page .chat-composer-input { background: var(--surface); border: 1.5px solid var(--chat-line); }
.chat-page .chat-attach-btn { border: 1px solid var(--chat-line) !important; background: var(--surface); }
.chat-page .chat-attach-btn:hover { border-color: var(--primary-500) !important; }
.chat-page .cr-new { border: 1px solid var(--primary-tint-border); }

/* Dashboards: cards that stand out (22 Oct). A coloured top bar per stat card, a clear lift, and chart cards with a
   firmer edge, so white cards don't fade into the page. */
.stat-card { position: relative; overflow: hidden; padding-top: 22px; border-color: var(--border); box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease; }
.stat-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--stat-accent, var(--primary-500)); }
.stats-row > .stat-card:nth-child(6n+2) { --stat-accent: #f97316; }
.stats-row > .stat-card:nth-child(6n+3) { --stat-accent: #3b82f6; }
.stats-row > .stat-card:nth-child(6n+4) { --stat-accent: #8b5cf6; }
.stats-row > .stat-card:nth-child(6n+5) { --stat-accent: #e11d48; }
.stats-row > .stat-card:nth-child(6n+6) { --stat-accent: #0ea5e9; }
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.chart-card { box-shadow: var(--shadow-sm); }
.chart-card-title { font-weight: 700; }

/* Admin → Agencies (23 Oct): compact clickable rows, and an agency profile page with all actions in one side panel. */
.aa-list { display: grid; gap: 10px; }
.aa-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.aa-row:hover { border-color: var(--primary-500); box-shadow: var(--shadow-md); }
.aa-mark, .ap-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-tint-bg); color: var(--primary-ink-strong); font-weight: 800; }
.aa-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aa-row-facts { display: flex; flex-wrap: wrap; gap: 2px 0; }
.aa-row-facts > span:not(:last-child)::after { content: "·"; margin: 0 8px; opacity: .6; }
.aa-open { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--primary-ink); white-space: nowrap; }
.aa-open .icon { width: 16px; height: 16px; }
.ap-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; margin: 8px 0 14px; }
.ap-id { display: flex; gap: 14px; align-items: center; min-width: 0; }
.ap-mark { width: 56px; height: 56px; border-radius: 14px; font-size: 1.2rem; }
.ap-title h1 { font-size: 1.45rem; margin: 0 0 6px; }
.ap-title .meta { margin: 6px 0 0; }
.ap-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ap-head-actions form { margin: 0; }
.ap-alert { display: flex; justify-content: space-between; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 14px; border-radius: 12px; border: 1px solid var(--border); border-left-width: 4px; background: var(--surface); }
.ap-alert > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 360px; }
.ap-alert.is-wait { border-color: var(--warning-text); background: var(--warning-bg); }
.ap-alert.is-accent { border-color: var(--primary-500); background: var(--primary-tint-bg); }
.ap-alert form { margin: 0; }
.ap-alert-btns { display: flex; gap: 8px; }
.ap-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.ap-main { display: grid; gap: 14px; min-width: 0; }
.ap-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.ap-stats .card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.ap-stats strong { font-size: 1.5rem; color: var(--primary-ink-strong); }
.ap-stat-label, .ap-act-label { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ap-card { padding: 18px 20px; }
.ap-card h2, .ap-actions h2 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 12px; }
.ap-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; }
.ap-dl dt { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 2px; }
.ap-dl dd { margin: 0; overflow-wrap: anywhere; }
.ap-table-wrap { overflow-x: auto; }
.ap-table { width: 100%; border-collapse: collapse; }
.ap-table th { text-align: left; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 0 10px 8px; border-bottom: 1px solid var(--border); }
.ap-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ap-table tr:last-child td { border-bottom: 0; }
.ap-table td .meta { display: block; font-size: 0.82rem; }
.ap-table tr.is-off td { opacity: .55; }
.ap-right { text-align: right !important; white-space: nowrap; }
.ap-portals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ap-portal { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.ap-ok { color: var(--success-text, #15803d); font-weight: 600; }
.ap-warn { color: var(--warning-text); font-weight: 600; }
.ap-bad { color: var(--danger); font-weight: 600; }
.ap-side { position: sticky; top: 84px; }
.ap-actions { padding: 18px 20px; }
.ap-actions form { margin: 0; }
.ap-act { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--border); }
.ap-actions h2 + .ap-act { border-top: 0; padding-top: 0; }
.ap-act-now { margin: -4px 0 0; font-weight: 600; }
.ap-act select { width: 100%; }
.ap-act-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1100px) {
    .ap-grid { grid-template-columns: minmax(0, 1fr); }
    .ap-side { position: static; }
    .ap-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .aa-row { grid-template-columns: 40px minmax(0, 1fr); align-items: start; }
    .aa-open { display: none; }
    .ap-dl, .ap-portals { grid-template-columns: minmax(0, 1fr); }
    .ap-table thead { display: none; }
    .ap-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .ap-table tr:last-child { border-bottom: 0; }
    .ap-table td { padding: 0; border: 0; overflow-wrap: anywhere; }
    .ap-table td:first-child { grid-column: 1 / -1; }
    .ap-table td:nth-child(3) { font-size: 0.85rem; color: var(--muted); }
    /* A 4-column row (name · role · last seen · link): name with its link beside it, role and last seen under it. */
    .ap-table tr:has(> td:nth-child(4):last-child) > td:first-child { grid-column: 1; grid-row: 1; }
    .ap-table tr:has(> td:nth-child(4):last-child) > td:nth-child(4) { grid-column: 2; grid-row: 1; align-self: start; }
    .ap-table tr:has(> td:nth-child(4):last-child) > td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 0.85rem; }
    .ap-table tr:has(> td:nth-child(4):last-child) > td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; }
    /* Record header: small mark top-left beside the name, like the CRM record pages. */
    .ap-head { padding: 16px; }
    .ap-id { align-items: flex-start; gap: 12px; }
    .ap-mark { width: 46px; height: 46px; font-size: 1rem; border-radius: 12px; flex: none; }
    .ap-title { min-width: 0; }
    .ap-title h1 { font-size: 1.3rem; line-height: 1.2; overflow-wrap: anywhere; }
}
/* Agency profile pop-up cards: live listings, export data. */
.ap-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.ap-dialog-wide { width: min(880px, calc(100vw - 32px)); }
.ap-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.ap-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.ap-dialog-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; margin: 0; }
.ap-dialog-x { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--muted) !important; padding: 4px !important; cursor: pointer; }
.ap-dialog-x .icon { width: 20px; height: 20px; }
.ap-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ap-export-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* Admin → Edit details (user / agency): two columns of labelled fields, one on a phone. */
.ap-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.ap-edit-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink-2, #374151); margin: 0; }
.ap-edit-grid input, .ap-edit-grid select { width: 100%; font-weight: 400; }
.ap-edit-grid .ap-edit-wide { grid-column: 1 / -1; }
.ap-export-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 600; }
.ap-export-item:has(input:checked) { border-color: var(--primary-500); background: var(--primary-tint-bg); }
.ap-export-item input { width: 18px; height: 18px; margin: 0; }
.ap-export-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--warning-bg); color: var(--warning-text); font-size: 0.86rem; }
.ap-export-note .badge-icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.ap-live-list { display: grid; gap: 8px; }
.ap-live { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; }
.ap-live-photo { width: 72px; height: 54px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--primary-tint-bg); color: var(--primary-ink-strong); }
.ap-live-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-live-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-live-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-live-main .meta { font-size: 0.82rem; }
.ap-live-price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
@media (max-width: 640px) {
    .ap-export-list { grid-template-columns: minmax(0, 1fr); }
    .ap-edit-grid { grid-template-columns: minmax(0, 1fr); }
    .ap-live { grid-template-columns: 60px minmax(0, 1fr); }
    .ap-live-photo { width: 60px; height: 46px; }
    .ap-live-price { grid-column: 2; align-items: flex-start; flex-direction: row; }
    .ap-live .btn { grid-column: 2; justify-self: start; }
}
/* Demo Bookings (23 Oct): prospect demos and bookings as short rows that open a card with the details and buttons. */
.pdemo-item { display: grid; grid-template-columns: 12px minmax(0, 1fr) 150px 120px auto 18px; gap: 16px; align-items: center; width: 100%; padding: 14px 16px !important; margin-bottom: 10px; text-align: left; color: var(--text) !important; background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm) !important; cursor: pointer; font: inherit; }
.pdemo-item:hover { border-color: var(--primary-500) !important; box-shadow: var(--shadow-md) !important; }
.pdemo-item .pdemo-swatch { width: 12px; height: 40px; border-radius: 6px; }
.pdemo-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdemo-item-main strong, .pdemo-item-main .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdemo-item-fact { display: flex; flex-direction: column; font-weight: 600; font-size: 0.92rem; }
.pdemo-item-fact .meta { font-weight: 400; font-size: 0.8rem; }
.pdemo-item-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pdemo-item > .icon, .demo-line-open > .icon { width: 18px; height: 18px; color: var(--muted); }
.pdemo-dialog .pdemo-card, .demo-dialog .demo-row { border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; background: none !important; }
.pdemo-dialog-x { position: absolute; top: 14px; right: 14px; z-index: 1; }
.pdemo-dialog .pdemo-card-head { padding-right: 36px; }
.demo-dialog .demo-row { flex-direction: column; align-items: stretch; gap: 14px; }
.demo-dialog .demo-row .info { padding-right: 36px; }
.demo-dialog .demo-row .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; padding-top: 14px; border-top: 1px solid var(--border); }
.demo-line { display: flex; align-items: center; gap: 12px; padding: 0 14px 0 0; margin-bottom: 10px; transition: border-color .15s, box-shadow .15s; }
.demo-line:hover { border-color: var(--primary-500); box-shadow: var(--shadow-md); }
.demo-line-open { flex: 1; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 18px; gap: 14px; align-items: center; min-width: 0; padding: 12px 6px 12px 14px !important; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--text) !important; text-align: left; font: inherit; cursor: pointer; }
.demo-line-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 52px; border-radius: 12px; background: var(--primary-tint-bg); color: var(--primary-ink-strong); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.demo-line-date b { font-size: 1.3rem; line-height: 1; }
.demo-line-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.demo-line-main strong { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.demo-line-main .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-line-open > .demo-status { margin-left: 0; white-space: nowrap; }
@media (max-width: 760px) {
    .pdemo-item { grid-template-columns: 10px minmax(0, 1fr) auto; }
    .pdemo-item-fact, .pdemo-item > .icon { display: none; }
}
/* Graph cog: colour schemes (23 Oct). */
.chart-cog-menu { min-width: 236px; }
.chart-cog-head { padding: 8px 11px 4px; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.chart-cog-head:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.chart-cog-colours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 2px 4px 4px; }
.chart-cog-colour { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 7px 8px; border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--text); text-align: left; }
.chart-cog-colour:hover { background: var(--primary-tint-bg); }
.chart-cog-colour.active { border-color: var(--primary-500); background: var(--primary-tint-bg); color: var(--primary-ink); font-weight: 800; }
.chart-cog-dots { display: flex; gap: 3px; }
.chart-cog-dots i { display: block; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.chart-cog-all { margin: 2px 4px 4px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; background: none; cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--primary-ink); }
.chart-cog-all:hover { border-color: var(--primary-500); background: var(--primary-tint-bg); }
.chart-cog-opt { text-align: left !important; justify-content: flex-start !important; }
.chart-cog-locked { display: flex; flex-direction: column; gap: 6px; margin: 2px 4px 6px; padding: 10px 11px; border-radius: 8px; background: var(--primary-tint-bg); font-size: 0.8rem; line-height: 1.35; color: var(--text); max-width: 228px; }
.chart-cog-locked a { font-weight: 700; color: var(--primary-ink); }
/* Pricing cards (23 Oct): price, one-line purpose, button, then what's included. */
.dl-price-card { padding: 26px 22px 24px; gap: 0; }
.dl-price-card.featured { background: linear-gradient(180deg, var(--primary-tint-bg) 0, var(--surface) 140px); }
.dl-price small { font-size: 0.85rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.dl-price-card p.dl-price-tag { margin: 6px 0 16px; min-height: 2.9em; color: var(--muted); font-size: 0.9rem; }
.dl-price-cta { width: 100%; justify-content: center; margin-bottom: 18px; }
.dl-price-intro { display: block; padding-top: 16px; border-top: 1px solid var(--border); margin-bottom: 10px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dl-price-cta + .dl-price-list { padding-top: 16px; border-top: 1px solid var(--border); }
.dl-price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dl-price-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.9rem; line-height: 1.4; color: var(--text); }
.dl-price-list li .icon { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--primary-ink); }
.dl-price-list li.is-off { color: var(--muted); }
.dl-price-x { flex: none; width: 17px; text-align: center; color: var(--muted); font-weight: 700; }
.plan-features-intro { display: block; margin: 12px 0 -4px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
/* Pricing cards (23 Oct, v2): every card lists the same rows in the same order (ticks and dashes), lined up across
   the cards with subgrid so plans compare row by row. 12 rows: the head (name, price, button) + 11 features. */
.dl-pricing { grid-template-rows: auto repeat(12, auto); row-gap: 0; }
.dl-pricing > .dl-price-card { display: grid; grid-row: span 13; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 14px; }
.dl-price-head { display: flex; flex-direction: column; padding-bottom: 6px; }
.dl-price-head .dl-price-cta { margin-bottom: 14px; }
.dl-pricing .dl-price-list { display: contents; }
.dl-pricing .dl-price-list li { padding: 7px 0; border-top: 1px solid var(--border); align-items: center; }
.dl-pricing .dl-price-list li .icon { margin-top: 0; }
@media (max-width: 760px) { .dl-pricing > .dl-price-card { margin-bottom: 14px; } }
/* Franchise packages under the plans (23 Oct): same card style, two cards side by side. */
.dl-franchise { margin-top: 34px; padding: clamp(18px, 3vw, 28px); border-radius: 22px; background: var(--primary-tint-bg); border: 1px solid var(--primary-tint-border); }
.dl-franchise-head { display: flex; gap: 14px; align-items: flex-start; max-width: 760px; margin: 0 auto 20px; }
.dl-franchise-head h3 { margin: 0 0 4px; font-size: 1.2rem; }
.dl-franchise-head p { margin: 0; color: var(--muted); line-height: 1.5; }
.dl-pricing.dl-pricing-franchise { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
@media (max-width: 760px) { .dl-pricing.dl-pricing-franchise { grid-template-columns: minmax(0, 1fr); } }
/* Franchise → Office Health (23 Oct). */
.fh-page { --fh-good: #16a34a; --fh-slipping: #d97706; --fh-risk: #dc2626; }
.fh-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.fh-count { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.fh-count strong { font-size: 1.5rem; }
.fh-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--fh-c); }
.fh-good { --fh-c: #16a34a; } .fh-slipping { --fh-c: #d97706; } .fh-risk { --fh-c: #dc2626; }
.fh-list { display: grid; gap: 10px; }
.fh-row { display: grid; grid-template-columns: 5px minmax(0, 1fr) repeat(5, 92px) 18px; gap: 14px; align-items: center; padding: 14px 16px 14px 0; color: var(--text); text-decoration: none; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.fh-row:hover { border-color: var(--fh-c); box-shadow: var(--shadow-md); }
.fh-bar { align-self: stretch; background: var(--fh-c); margin: -14px 0; }
.fh-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fh-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fh-pill { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; color: var(--fh-c); background: color-mix(in srgb, var(--fh-c) 12%, transparent); }
.fh-reason { font-size: 0.88rem; color: var(--text); }
.fh-fig { display: flex; flex-direction: column; gap: 1px; font-size: 0.95rem; }
.fh-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fh-trend { font-size: 0.75rem; font-weight: 700; }
.fh-trend.is-up { color: #16a34a; } .fh-trend.is-down { color: #dc2626; }
.fh-row > .icon { width: 18px; height: 18px; color: var(--muted); }
.fh-office { padding: 16px 18px; margin: 0 0 16px; border-left: 5px solid var(--fh-c); }
.fh-office-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fh-office-head a { margin-left: auto; }
.fh-reasons { margin: 0 0 10px; padding-left: 18px; font-size: 0.92rem; }
.fh-office-figs { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.9rem; }
@media (max-width: 900px) {
    .fh-row { grid-template-columns: 5px minmax(0, 1fr) repeat(3, 76px); }
    .fh-row .fh-fig:nth-of-type(n+4), .fh-row > .icon { display: none; }
}
@media (max-width: 560px) {
    .fh-counts { grid-template-columns: minmax(0, 1fr); }
    .fh-row { grid-template-columns: 5px minmax(0, 1fr); }
    .fh-row .fh-fig { display: none; }
}
/* Franchise dashboard: Office Health strip (23 Oct). */
.fh-strip { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; color: var(--text); text-decoration: none; }
.fh-strip:hover { border-color: var(--primary-500); }
.fh-strip-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.fh-strip-title .icon { width: 18px; height: 18px; color: var(--primary-ink-strong); }
.fh-strip-item { display: inline-flex; align-items: center; gap: 7px; }
.fh-strip-go { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--primary-ink); }
.fh-strip-go .icon { width: 16px; height: 16px; }
@media (max-width: 560px) {
    .fh-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .fh-count { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; font-size: 0.82rem; }
    .fh-count strong { font-size: 1.25rem; }
    .fh-strip-go { margin-left: 0; }
}
/* Franchise forms: paired fields side by side on desktop (Create office, Refer a client, Royalty terms). */
.franchise-page form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 640px) { .franchise-page form .row { grid-template-columns: minmax(0, 1fr); } }
/* Prospect emails: spread-out sending card + "How to send it" choice (23 Oct). */
.spread-card { display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 14px; border-left: 4px solid var(--primary-500); }
.spread-card.is-paused { border-left-color: var(--warning-text); background: var(--warning-bg); }
.spread-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 360px; }
.spread-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.spread-label .icon { width: 15px; height: 15px; }
.spread-state { font-size: 1.05rem; }
.spread-bar { display: block; height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; max-width: 420px; margin-top: 4px; }
.spread-bar span { display: block; height: 100%; background: var(--primary-500); }
.spread-controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.spread-controls form { margin: 0; }
.spread-numbers { display: flex; align-items: flex-end; gap: 8px; }
.spread-numbers label { display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.spread-numbers input { width: 76px; padding: 6px 8px !important; }
.campaign-pace { padding: 18px; margin-top: 14px; }
.campaign-pace-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.campaign-pace-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; line-height: 1.4; }
.campaign-pace-option:has(input:checked) { border-color: var(--primary-500); background: var(--primary-tint-bg); }
.campaign-pace-option input { margin-top: 3px; width: auto !important; flex: none; }
.campaign-pace-tag { font-style: normal; font-size: 0.7rem; font-weight: 800; color: var(--primary-ink); background: var(--primary-tint-bg); border-radius: 99px; padding: 1px 7px; margin-left: 4px; }
@media (max-width: 700px) { .campaign-pace-options { grid-template-columns: minmax(0, 1fr); } }
/* Give demo access: agency or franchise group (23 Oct). */
.pdemo-kind { border: 0; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pdemo-kind legend { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; padding: 0; }
.pdemo-kind-option { display: flex !important; flex-direction: row !important; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; line-height: 1.4; }
.pdemo-kind-option:has(input:checked) { border-color: var(--primary-500); background: var(--primary-tint-bg); }
.pdemo-kind-option input { width: auto !important; flex: none; margin-top: 3px; }
.pdemo-kind-option > span { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 640px) { .pdemo-kind { grid-template-columns: minmax(0, 1fr); } }
.campaign-line-pill { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: 0.7rem; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--border); vertical-align: middle; }
.campaign-line-pill.is-on { color: var(--success-text, #15803d); background: var(--success-bg, #ecfdf5); border-color: transparent; }

/* Agency → Lead Sharing card */
.lead-sharing-form { display: flex; flex-direction: column; gap: 14px; }
.lead-sharing-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lead-sharing-form legend { font-weight: 700; font-size: 0.88rem; margin-bottom: 6px; padding: 0; }
.lead-sharing-mode { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; margin: 0; font-weight: 400; }
.lead-sharing-mode:has(input:checked) { border-color: var(--primary-600); background: var(--primary-tint-bg); }
.lead-sharing-mode input, .lead-sharing-person input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--primary-600); }
.lead-sharing-mode span { display: flex; flex-direction: column; gap: 2px; }
.lead-sharing-mode small { color: var(--muted); font-size: 0.82rem; }
.lead-sharing-pool { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px !important; }
.lead-sharing-pool legend { grid-column: 1 / -1; }
.lead-sharing-person { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-weight: 500; cursor: pointer; padding: 6px 0; }
.lead-sharing-person small { flex-basis: 100%; padding-left: 26px; font-size: 0.76rem; }
.lead-sharing-tag { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.lead-sharing-tag.next { background: var(--primary-tint-bg); color: var(--primary-ink-strong, var(--primary-600)); }
.lead-sharing-tag.away { background: var(--warning-bg); color: var(--warning-text); }

/* Franchise → Network Report */
.nr-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.nr-month { display: flex; align-items: center; gap: 8px; margin: 0; }
.nr-month label { margin: 0; font-weight: 700; }
.nr-month select { min-width: 200px; }
.nr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.nr-summary { padding: 14px 18px; margin: 0 0 16px; font-size: 0.98rem; line-height: 1.55; border-left: 4px solid var(--primary-600); }
.nr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.nr-tile { padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; border-top: 3px solid var(--primary-600); }
.nr-tile strong { font-size: 1.45rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.nr-tile .meta { font-size: 0.8rem; }
.nr-tl { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.nr-delta { font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
.nr-delta.is-up { color: var(--success-text, #15803d); }
.nr-delta.is-down { color: var(--danger-text, #b91c1c); }
.nr-section { margin-bottom: 18px; }
.nr-highlights { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.nr-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nr-people { display: block; font-size: 0.76rem; }
.nr-paid { font-size: 0.7rem; font-weight: 800; color: var(--success-text, #15803d); text-transform: uppercase; }
.nr-health { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.nr-health-risk { background: var(--danger-bg, #fee2e2); color: var(--danger-text, #991b1b); }
.nr-health-slipping { background: var(--warning-bg); color: var(--warning-text); }
.nr-health-good { background: var(--success-bg, #dcfce7); color: var(--success-text, #166534); }
.nr-email { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* Franchise → Onboarding (head office) and the office's own checklist (Head Office Updates) */
.ob-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ob-count { padding: 12px 18px; display: flex; align-items: baseline; gap: 8px; }
.ob-count strong { font-size: 1.5rem; font-weight: 800; color: var(--warning-text); }
.ob-count.is-done strong { color: var(--primary-ink-strong, var(--primary-600)); }
.ob-offices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ob-office { padding: 0; }
.ob-mine { margin-bottom: 18px; border-top: 3px solid var(--primary-600); }
.ob-office > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 260px) auto 18px; align-items: center; gap: 14px; padding: 14px 18px; }
.ob-office > summary::-webkit-details-marker { display: none; }
.ob-office > summary > .icon { width: 18px; height: 18px; color: var(--muted); transition: transform 0.15s; }
.ob-office[open] > summary > .icon { transform: rotate(180deg); }
.ob-office-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-progress { display: block; height: 8px; border-radius: 999px; background: var(--gray-100, #eef2f1); overflow: hidden; }
.ob-progress span { display: block; height: 100%; background: var(--primary-600); border-radius: 999px; }
.ob-office.is-complete .ob-progress span { background: var(--success-text, #15803d); }
.ob-pct { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.ob-steps { list-style: none; margin: 0; padding: 4px 18px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 20px; border-top: 1px solid var(--border); }
.ob-step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.ob-tick { margin: 0; }
.ob-box { width: 22px; height: 22px; flex: none; border-radius: 6px; border: 2px solid var(--border-strong, #b8c4c2); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; color: #fff; }
.ob-box:hover { border-color: var(--primary-600); background: var(--surface); }
.ob-box-static { cursor: default; border-style: dashed; }
.ob-box .icon { width: 14px; height: 14px; }
.ob-step.is-done .ob-box { background: var(--primary-600); border-color: var(--primary-600); border-style: solid; }
.ob-step.is-done .ob-title { color: var(--muted); }
.ob-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ob-title { font-weight: 600; }
.ob-meta { font-size: 0.78rem; }
.ob-office-link { margin: 0; padding: 0 18px 14px; font-size: 0.85rem; }
.ob-items { margin: 0 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.ob-items li > *, .ob-archived li { display: inline; }
.ob-items li { padding: 4px 0; }
.ob-items li form, .ob-archived li form { display: inline; margin-left: 10px; }
.ob-who { font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-left: 6px; }
.ob-add { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; gap: 10px; align-items: end; }
.ob-archived { margin-top: 14px; }
.ob-archived ul { margin: 8px 0 0; padding-left: 20px; }
@media (max-width: 720px) {
    .ob-office > summary { grid-template-columns: minmax(0, 1fr) auto 18px; }
    .ob-office > summary .ob-progress { grid-column: 1 / -1; grid-row: 2; }
    .ob-add { grid-template-columns: minmax(0, 1fr); }
    .ob-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) { .nr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .nr-tile { padding: 10px 12px; } .nr-tile strong { font-size: 1.15rem; } }

/* Admin → Agencies → profile → Emails */
.ap-mail-compose { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 14px; }
.ap-mail-compose > summary { list-style: none; cursor: pointer; padding: 10px 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--primary-ink-strong, var(--primary-600)); }
.ap-mail-compose > summary::-webkit-details-marker { display: none; }
.ap-mail-compose > summary .icon { width: 17px; height: 17px; }
.ap-mail-form { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.ap-mail-form label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 600; font-size: 0.86rem; }
.ap-mail-form textarea { width: 100%; resize: vertical; }
.ap-mail-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.ap-mail-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ap-mail-actions .meta { font-size: 0.8rem; }
.ap-mail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ap-mail-item { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 4px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.ap-mail-list li:first-child .ap-mail-item { border-top: 0; }
.ap-mail-item:hover { background: var(--bg); color: var(--text); }
.ap-mail-dir { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; text-align: center; margin-top: 2px; }
.ap-mail-in { background: var(--primary-tint-bg); color: var(--primary-ink-strong, var(--primary-600)); }
.ap-mail-out { background: var(--gray-100, #eef2f1); color: var(--muted); }
.ap-mail-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-mail-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-mail-main .icon { width: 13px; height: 13px; vertical-align: -1px; color: var(--muted); }
.ap-mail-main .meta { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-mail-snippet { font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-mail-item time { text-align: right; font-size: 0.82rem; white-space: nowrap; display: flex; flex-direction: column; }
@media (max-width: 640px) {
    .ap-mail-row { grid-template-columns: minmax(0, 1fr); }
    .ap-mail-item { grid-template-columns: minmax(0, 1fr) auto; }
    .ap-mail-dir { grid-column: 1 / -1; justify-self: start; }
}

/* Pages of 20 for long tables and lists in the CRM (assets/js/paginate.js) */
.pg-off { display: none !important; }
@media print { .pg-off { display: revert !important; } .pg-nav { display: none !important; } }
.pg-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 12px 2px 4px; }
.pg-nav[hidden] { display: none; }
.pg-info { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pg-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pg-btn { min-width: 36px; height: 34px; padding: 0 12px !important; border-radius: 9px !important; border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--text) !important; font-size: 0.84rem; font-weight: 700; box-shadow: none !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.pg-btn:hover:not(:disabled) { border-color: var(--primary-600) !important; color: var(--primary-ink-strong, var(--primary-600)) !important; }
.pg-btn.is-on { background: var(--primary-600) !important; border-color: var(--primary-600) !important; color: #fff !important; opacity: 1; }
.pg-btn:disabled:not(.is-on) { opacity: 0.45; cursor: default; }
.pg-dots { color: var(--muted); padding: 0 2px; }
@media (max-width: 560px) { .pg-nav { justify-content: center; } .pg-info { width: 100%; text-align: center; } }

/* Record pages on a phone: the header reads like an app — small avatar top-left beside the name, badges and buttons
   lined up under it; record tabs become one swipeable strip instead of wrapping onto a ragged second row. */
@media (max-width: 600px) {
    .record-hero { display: grid; grid-template-columns: 56px 1fr; align-items: start; gap: 12px 14px; padding: 18px 16px; }
    .record-hero > .avatar { width: 56px; height: 56px; font-size: 1.15rem; border-width: 2px; }
    .record-hero-info { min-width: 0; }
    .record-hero-name { font-size: 1.3rem; line-height: 1.2; overflow-wrap: anywhere; }
    .record-hero-meta { gap: 6px 8px; }
    .record-hero-actions { grid-column: 1 / -1; gap: 8px; }
    .record-hero > :not(.avatar):not(.record-hero-info):not(.record-hero-actions) { grid-column: 1 / -1; }

    .record-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); }
    .record-tabs .record-tab { flex: none; white-space: nowrap; }

    .profile-header-card { align-items: flex-start; gap: 12px; }
    .profile-header-card > .avatar { width: 48px; height: 48px; flex: none; }
    .profile-header-card > div { min-width: 0; flex: 1; }
    .profile-links-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .profile-links-row > .btn { width: 100%; justify-content: flex-start; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Prospect campaign page: number cards filter the list below (click again for everyone); "Show" picklist beside it. */
button.campaign-stat { font: inherit; color: inherit; cursor: pointer; width: 100%; transition: border-color .15s, box-shadow .15s, background .15s; }
button.campaign-stat:hover { border-color: var(--primary-ink); }
button.campaign-stat:focus-visible { outline: 2px solid var(--primary-ink); outline-offset: 2px; }
button.campaign-stat.is-on { border-color: var(--primary-ink); box-shadow: 0 0 0 1px var(--primary-ink); background: var(--primary-tint-bg); }
button.campaign-stat.is-on span { color: var(--primary-ink-strong); font-weight: 600; }
.camp-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; }
.camp-filter-bar label { font-weight: 600; font-size: .9rem; margin: 0; }
.camp-filter-bar select { width: auto; min-width: 220px; margin: 0; }
.camp-filter-empty { padding: 18px; text-align: center; border: 1px dashed var(--border); border-radius: 12px; }
@media (max-width: 600px) { .camp-filter-bar select { flex: 1 1 100%; min-width: 0; } }
tr[hidden], .data-table tr[hidden] { display: none !important; }

/* Listing form: "Write it for me" (Chrome built-in AI, or a quick draft without it). */
.ai-writer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.ai-writer-head label { margin: 0; }
.ai-writer-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-writer-tools select { width: auto; margin: 0; padding: 6px 30px 6px 10px; font-size: .85rem; min-height: 0; }
.ai-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; cursor: pointer;
    border: 1px solid var(--primary-tint-border); background: var(--primary-tint-bg); color: var(--primary-ink-strong); width: auto; margin: 0; line-height: 1.2; }
.ai-btn .icon { width: 16px; height: 16px; }
.ai-btn:hover { border-color: var(--primary-ink); }
.ai-btn:disabled { opacity: .6; cursor: progress; }
.ai-btn-quiet { background: transparent; border-color: var(--border); color: var(--text); }
.ai-chip { font-size: .68rem; font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.ai-chip.is-ai { background: var(--accent-tint-bg-strong); color: #9a3412; border-color: var(--accent-tint-border); }
[data-theme="dark"] .ai-chip.is-ai { background: rgba(249, 115, 22, .18); color: #fdba74; border-color: rgba(249, 115, 22, .35); }
.ai-writer-hint { margin: 6px 0 0; font-size: .85rem; }
.ai-panel { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--primary-tint-border); border-radius: 12px; background: var(--primary-tint-bg); }
.ai-panel-status { font-size: .85rem; font-weight: 600; color: var(--primary-ink-strong); }
.ai-panel-status:empty { display: none; }
.ai-panel-out { white-space: pre-wrap; margin: 8px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); line-height: 1.55; }
.ai-panel-out:empty { display: none; }
.ai-panel-note { margin: 8px 0 0; font-size: .85rem; }
.ai-panel-note:empty { display: none; }
.ai-panel-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ai-panel-actions .btn, .ai-panel-actions button { width: auto; margin: 0; }
@media (max-width: 600px) { .ai-writer-tools { width: 100%; } .ai-writer-tools .ai-btn[data-ai-write] { flex: 1 1 auto; justify-content: center; } }

/* Reply tools under agency reply boxes + conversation summary (erf-ai.js). */
.ai-assist [hidden], .ai-summary [hidden], .ai-summary[hidden], .ai-writer [hidden] { display: none !important; }
.ai-assist { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.ai-quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.ai-quick::-webkit-scrollbar { display: none; }
.ai-quick-btn { flex: 0 0 auto; width: auto; margin: 0; padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.3; white-space: nowrap; cursor: pointer;
    background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.ai-quick-btn:hover { border-color: var(--primary-600); color: var(--primary-ink-strong); }
.ai-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ai-tools .ai-btn { padding: 5px 11px; font-size: .8rem; }
.ai-polish { display: inline-flex; align-items: center; gap: 4px; }
.ai-polish select { width: auto; margin: 0; padding: 4px 26px 4px 8px; font-size: .8rem; min-height: 0; border-radius: 999px; }
.ai-undo { width: auto; margin: 0; padding: 4px 6px; background: none; border: 0; color: var(--primary-ink-strong); font-size: .8rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.ai-status { margin: 0; font-size: .8rem; color: var(--muted); }
.ai-status:empty { display: none; }
.ai-translate { display: inline-block; width: auto; margin: 4px 0 0; padding: 0; background: none; border: 0; color: var(--primary-ink-strong); font-size: .78rem; font-weight: 700; cursor: pointer; text-decoration: underline; }
.ai-translation { margin-top: 6px; padding: 6px 9px; border-left: 3px solid var(--primary-600); border-radius: 6px; background: var(--primary-tint-bg); color: var(--text); font-size: .88rem; white-space: pre-wrap; }
.ai-summary { padding: 14px 16px; margin: 0 0 14px; }
.ai-summary-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ai-summary-head h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 1rem; }
.ai-summary-head h2 .icon { width: 18px; height: 18px; color: var(--accent-600, #ea580c); }
.ai-summary-head .ai-btn { margin-left: auto; padding: 5px 11px; font-size: .8rem; }
.ai-facts { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.ai-facts > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: .88rem; }
.ai-facts > div:last-child { border-bottom: 0; }
.ai-facts dt { color: var(--muted); font-weight: 600; }
.ai-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.ai-facts > div.is-waiting dd { color: var(--warning-text); font-weight: 700; }
.ai-sum-text { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--primary-tint-bg); border: 1px solid var(--primary-tint-border); font-size: .88rem; }
.ai-sum-text ul { margin: 0; padding-left: 18px; }
.ai-sum-text li + li { margin-top: 3px; }
.ai-sum-note { margin: 8px 0 0; font-size: .76rem; }
@media (max-width: 520px) { .ai-facts > div { grid-template-columns: minmax(0, 1fr); gap: 1px; } }

/* Lead score chip (LeadScore): Hot / Warm / Cool. */
.score-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.6; white-space: nowrap; border: 1px solid transparent; cursor: help; }
.score-chip b { font-weight: 800; opacity: .85; }
.score-hot { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.score-warm { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.score-cool { background: var(--field-bg); color: var(--muted); border-color: var(--border); }
[data-theme="dark"] .score-hot { background: rgba(239, 68, 68, .18); color: #fca5a5; border-color: rgba(239, 68, 68, .35); }
[data-theme="dark"] .score-warm { background: rgba(245, 158, 11, .16); color: #fcd34d; border-color: rgba(245, 158, 11, .35); }
.kanban-card-top .score-chip { margin-left: auto; }
.kanban-card-top .score-chip + .kanban-card-when { margin-left: 6px; }

/* Today ("Call these first today") list: dashboard card + Today page. */
.today-list { list-style: none; margin: 0; padding: 0; }
.today-item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--border); }
.today-item:first-child { border-top: 0; }
.today-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-tint-bg); color: var(--primary-ink-strong); }
.today-icon .icon { width: 18px; height: 18px; }
.today-viewing_request .today-icon, .today-lead_new .today-icon, .today-lead_waiting .today-icon { background: var(--accent-tint-bg-strong); color: #c2410c; }
[data-theme="dark"] .today-viewing_request .today-icon, [data-theme="dark"] .today-lead_new .today-icon, [data-theme="dark"] .today-lead_waiting .today-icon { background: rgba(249, 115, 22, .18); color: #fdba74; }
.today-main { flex: 1 1 auto; min-width: 0; text-decoration: none; color: var(--text); }
.today-main strong { display: block; font-size: .95rem; line-height: 1.35; }
.today-main .meta { display: block; font-size: .82rem; margin-top: 2px; overflow-wrap: anywhere; }
.today-main:hover strong { color: var(--primary-ink); }
.today-side { flex: none; display: flex; align-items: center; gap: 6px; }
.today-btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); color: var(--text); background: var(--surface); }
.today-btn .icon { width: 16px; height: 16px; }
.today-btn:hover { border-color: var(--primary-ink); color: var(--primary-ink); }
.today-wa { color: #16a34a; }
.dash-today { margin-bottom: 18px; padding: 14px 16px 6px; }
.dash-today-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dash-today-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.1rem; }
.dash-today-head h2 .icon { color: var(--primary-ink); }
.dash-today-head a { font-weight: 600; font-size: .9rem; white-space: nowrap; }
.dash-today-sub { margin: 2px 0 6px; }
.today-head h1 { display: flex; align-items: center; gap: 10px; }
.today-head h1 .icon { color: var(--primary-ink); }
.today-card { padding: 6px 18px; }
.today-empty { text-align: center; padding: 34px 20px; }
.today-empty > .icon { width: 40px; height: 40px; color: #16a34a; }
.today-empty h2 { margin: 8px 0 4px; }
.today-how { margin-top: 14px; padding: 14px 18px; }
.today-how summary { cursor: pointer; font-weight: 600; }
.today-how ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: .9rem; }
.today-how li { margin: 4px 0; }
@media (max-width: 600px) {
    .today-item { flex-wrap: wrap; gap: 8px 12px; }
    .today-main { flex: 1 1 calc(100% - 50px); }
    .today-side { width: 100%; padding-left: 46px; }
}

/* Buyer's quick answers on a lead (LeadBrief). */
.lead-brief { margin: 16px 0; }
.lead-brief-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lead-brief-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; }
.lead-brief-head h2 .icon { color: var(--primary-ink); }
.lead-brief-sub { margin: 4px 0 8px; }
.lead-brief-said { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; margin: 6px 0 0; }
.lead-brief-said div { padding: 8px 10px; border-radius: 10px; background: var(--field-bg); border: 1px solid var(--border); }
.lead-brief-said dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.lead-brief-said dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.lead-brief-viewing { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.lead-brief-viewing > div:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lead-brief-viewing.is-requested { border-color: var(--accent-tint-border); background: var(--accent-tint-bg); }
.lead-brief-viewing.is-confirmed { border-color: #bbf7d0; background: #f0fdf4; flex-direction: row; align-items: center; flex-wrap: wrap; }
[data-theme="dark"] .lead-brief-viewing.is-requested { background: rgba(249, 115, 22, .1); border-color: rgba(249, 115, 22, .35); }
[data-theme="dark"] .lead-brief-viewing.is-confirmed { background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .35); }
.lead-brief-viewing .icon { width: 18px; height: 18px; flex: none; }
.lead-brief-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lead-brief-actions form { margin: 0; }
.lead-brief-actions .btn, .lead-brief-actions button { width: auto; margin: 0; }
.btn-wa { background: #25D366 !important; border-color: #25D366 !important; color: #fff !important; }
.lead-brief-h3 { font-size: .9rem; margin: 14px 0 4px; }
.lead-brief-matches { list-style: none; margin: 0; padding: 0; }
.lead-brief-matches li { padding: 6px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; }
.lead-brief-matches li:first-child { border-top: 0; }

/* ---------- Lead qualifying (LeadQualify, 2 Nov 2026): badge, board filter, lead panel, qualify page ---------- */
.qual-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.qual-pill .icon { width: 12px; height: 12px; }
.qual-pill.qual-qualified { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.qual-pill.qual-unsure { background: var(--surface); color: var(--muted); border-color: var(--border); }
.qual-pill.qual-not_qualified { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.lead-tier-dot.qual-dot-qualified { background: #2563eb; }
.lead-tier-dot.qual-dot-none { background: transparent; border: 1px dashed #94a3b8; }
.lead-tier-dot.qual-dot-not_qualified { background: #dc2626; }
.lead-qual-filters { margin-top: 8px; align-items: center; }
.lead-qualify { margin: 16px 0; padding: 16px; }
.lead-qualify .lead-brief-actions { margin-top: 10px; }
.lead-qualify.is-qualified { border-left: 4px solid #2563eb; }
.lead-qualify.is-not_qualified { border-left: 4px solid #dc2626; }
.qual-page .section-title { margin-top: 6px; }
.qual-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
.qual-form { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; }
.qual-side { padding: 18px 20px; }
.qual-form label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.qual-verdicts { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.qual-verdicts legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.qual-form .qual-verdict { flex-direction: row; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; background: var(--surface); }
.qual-verdict input { width: auto; margin: 3px 0 0; flex: none; accent-color: var(--primary); }
.qual-verdict span { display: flex; flex-direction: column; gap: 2px; }
.qual-verdict small { color: var(--muted); font-size: .82rem; }
.qual-verdict:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.qual-verdict--qualified:has(input:checked) { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb inset; background: #eff6ff; }
.qual-verdict--not_qualified:has(input:checked) { border-color: #dc2626; box-shadow: 0 0 0 1px #dc2626 inset; background: #fef2f2; }
.qual-form .qual-proof { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--field-bg); border: 1px solid var(--border); cursor: pointer; }
.qual-form .qual-proof[hidden] { display: none; }
.qual-proof input { width: auto; margin: 0; flex: none; accent-color: var(--primary); }
.qual-form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.qual-form-actions .btn { width: auto; margin: 0; }
.qual-saved-by { margin: 0; }
.qual-side h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1.05rem; }
.qual-side h2 .icon { color: var(--primary-ink); }
.qual-side .lead-brief-said { grid-template-columns: 1fr; }
.qual-side-h3 { font-size: .9rem; margin: 16px 0 6px; }
.qual-tips { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--text); font-size: .9rem; }
@media (max-width: 760px) {
    .qual-layout { grid-template-columns: 1fr; }
}
:root[data-theme="dark"] .qual-pill.qual-qualified { background: rgba(37, 99, 235, 0.2); color: #93c5fd; border-color: rgba(37, 99, 235, 0.4); }
:root[data-theme="dark"] .qual-pill.qual-not_qualified { background: rgba(220, 38, 38, 0.18); color: #fca5a5; border-color: rgba(220, 38, 38, 0.38); }
:root[data-theme="dark"] .qual-verdict--qualified:has(input:checked) { background: rgba(37, 99, 235, 0.14); }
:root[data-theme="dark"] .qual-verdict--not_qualified:has(input:checked) { background: rgba(220, 38, 38, 0.12); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .qual-pill.qual-qualified { background: rgba(37, 99, 235, 0.2); color: #93c5fd; border-color: rgba(37, 99, 235, 0.4); }
    :root:not([data-theme="light"]) .qual-pill.qual-not_qualified { background: rgba(220, 38, 38, 0.18); color: #fca5a5; border-color: rgba(220, 38, 38, 0.38); }
    :root:not([data-theme="light"]) .qual-verdict--qualified:has(input:checked) { background: rgba(37, 99, 235, 0.14); }
    :root:not([data-theme="light"]) .qual-verdict--not_qualified:has(input:checked) { background: rgba(220, 38, 38, 0.12); }
}

/* Phones and the Android app (touch screens): comfortable tap targets for small controls (24 Oct 2026 mobile pass). */
@media (pointer: coarse) {
    .photo-preview-remove { width: 30px; height: 30px; font-size: 1.15rem; }
    .ob-box { width: 28px; height: 28px; }
    .link-button { padding: 6px 2px; margin: -6px -2px; }
}

/* ===== Phone / app polish pass (24 Oct 2026): fixes from the full-app review at 390 px, light + dark ===== */
/* Headings never leave one word alone on the last line; paragraphs avoid lonely last words. */
h1, h2, h3, h4, .section-title, .record-hero-name { text-wrap: balance; }
p, .meta, dd, li { text-wrap: pretty; }
/* Stacked form fields inside cards get even spacing (side-by-side rows keep their own gap). */
:is(.settings-card, .card, .detail-section, .modal-box) :not(.row, [class*="grid"], [class*="-row"], .seller-schedule-form, .at-filter) > :is(.field, .row) + :is(.field, .row) { margin-top: 14px; }
.field > .meta:last-child { margin-bottom: 0; }
/* "Manual" and other grey pills stay visible on a dark card. */
.type-pill--file { background: var(--gray-200); }
/* Footer: "Browse by province" matches the other footer headings. */
.footer-provinces h4 { font-size: 0.76rem; color: #fff; }
.footer-provinces h4 .icon { width: 15px; height: 15px; }
/* Listings: the result count sits on its own line under the heading. */
.results-count { display: block; margin-top: 4px; }
/* Property page: key facts fill the row whatever their number; features line up beside their icon. */
.spec-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.features-grid > .meta { display: flex; align-items: flex-start; gap: 6px; }
.features-grid > .meta .badge-icon { flex: none; margin-top: 2px; }
.profile-header-card .meta > .badge-verified { display: flex; width: fit-content; margin-top: 3px; }
/* Panels that sat flush against their card edge. */
.lead-brief { padding: 16px; }
/* Money and big figures in stat cards never break mid-number. */
.stat-card strong, .acct-stat strong, .acct-stat-value, .stat-value, .stat-card .stat-number { white-space: nowrap; font-size: clamp(1rem, 5.2vw, 1.6rem); }
/* Scrollable chip/tab rows: one line that swipes, with a fade at the edge so it's clear there's more. */
@media (max-width: 600px) {
    .kanban-tabs, .deals-tabs, .cal-filters, .ai-quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-right: 24px;
        mask-image: linear-gradient(90deg, #000 82%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); }
    .kanban-tabs::-webkit-scrollbar, .deals-tabs::-webkit-scrollbar, .cal-filters::-webkit-scrollbar { display: none; }
    .deals-tabs a, .cal-filters .cal-filter { flex: none; white-space: nowrap; }
    .record-tabs { mask-image: linear-gradient(90deg, #000 78%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); padding-right: 28px; }
    /* Record headers without an avatar (Find an Estate Agent, Team Targets...) use the full width. */
    .record-hero:not(:has(> .avatar)):not(:has(> .agency-public-logo)) { grid-template-columns: minmax(0, 1fr); }
    .record-hero > .agency-public-logo { grid-column: auto; width: 56px; height: 56px; }
    .record-hero-name { overflow-wrap: break-word; }
}
.agency-public-hero .agency-directory-pin { color: currentColor; opacity: 0.85; }
/* Dark mode: the founding-offer card and light status pills follow the theme. */
:root[data-theme="dark"] .dl-offer { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
:root[data-theme="dark"] .dl-offer p { color: var(--muted); }
:root[data-theme="dark"] .dl-offer strong, :root[data-theme="dark"] .dl-offer li .icon { color: var(--primary-ink); }
:root[data-theme="dark"] .dl-offer-tag { background: var(--accent-tint-bg-strong); color: #fdba74; }
:root[data-theme="dark"] .campaign-status { background: var(--gray-200); }
:root[data-theme="dark"] .campaign-status-sent { background: var(--success-bg); color: var(--success-text); }
:root[data-theme="dark"] .campaign-status-sending, :root[data-theme="dark"] .campaign-status-queued { background: var(--indigo-bg); color: var(--indigo-text); }
:root[data-theme="dark"] .lead-brief-viewing.is-confirmed { border-color: var(--success-border); background: var(--success-bg); }
/* AI reply tools: no "Quick" tag (the rules version just works); the tag shows only for real AI. */
.ai-chip[data-ai-chip]:not(.is-ai) { display: none !important; }
/* -- pass part 2 -- */
/* Searchable pickers never run past their card. */
.ss { min-width: 0; max-width: 100%; }
.ss-trigger { min-width: 0; max-width: 100%; }
/* Checkbox rows inside a form field (e.g. group members) look like tappable rows, not tiny capitals. */
.field label.checkbox-field { display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 600; color: var(--text);
    padding: 11px 12px; margin: 6px 0 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; }
.field label.checkbox-field:has(input:checked) { border-color: var(--primary-500); background: var(--primary-tint-bg); }
.field label.checkbox-field input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--primary-600); }
.field label.checkbox-field + button, .field + button.block { margin-top: 16px; }
/* Appointment form: the chosen duration is as clear as the chosen time. */
.appt-form .appt-chip.is-selected, .appt-form .appt-chip.is-selected:hover { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
/* Inbox rows: normal text colour (they're links), unread marked with a coloured edge instead of a grey card. */
.thread-item { color: var(--text); }
.thread-item.is-unread { background: var(--surface); border-color: var(--border); border-left: 4px solid var(--primary-500); }
/* Notifications: title and buttons on one tidy row; empty states as a card. */
.notif-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.notif-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.notif-head-actions form { margin: 0; }
.notif-empty { padding: 28px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.notif-empty h2 { margin: 6px 0 0; font-size: 1.1rem; }
.notif-empty p { margin: 0; max-width: 440px; }
.notif-empty .btn { margin-top: 8px; width: auto; }
/* Payment result pages. */
.pay-status-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 12px; }
.pay-status-icon .icon { width: 28px; height: 28px; }
.pay-status-icon.is-ok { background: var(--success-bg, #dcfce7); color: var(--success-text, #166534); }
.pay-status-icon.is-off { background: var(--gray-100); color: var(--muted); }
/* Contact page. */
.contact-lead { margin: -4px 0 16px; }
.contact-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.contact-option { display: flex; align-items: center; gap: 14px; padding: 16px; color: var(--text); text-decoration: none; }
.contact-option:hover { border-color: var(--primary-500); }
.contact-option > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.contact-option .meta { overflow-wrap: anywhere; }
.contact-option-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-tint-bg); color: var(--primary-ink); }
.contact-option-icon .icon { width: 22px; height: 22px; }
.contact-option-go { flex: none; width: 18px; height: 18px; color: var(--muted); }
.contact-address { display: flex; gap: 14px; align-items: flex-start; padding: 16px; margin-top: 10px; }
.contact-address p { margin: 0; }
/* Legal pages: the title is clearly the biggest heading. */
.legal-doc h1, .legal-doc .section-title { font-size: clamp(1.6rem, 6vw, 2.1rem); }
/* Sign-up: the third account-type tile spans the row instead of sitting alone at half width. */
.acct-type-seg > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 560px) { .acct-type-seg > :last-child:nth-child(odd) { grid-column: auto; } }
/* For agencies hero: the two buttons are the same full width on a phone. */
@media (max-width: 600px) { .fa-hero-actions { display: grid; gap: 10px; } .fa-hero-actions .btn { width: 100%; justify-content: center; } }
/* Savings calculator comparison: a card per feature on a phone instead of a squashed table. */
@media (max-width: 600px) {
    .sc-compare, .sc-compare tbody, .sc-compare tr, .sc-compare td { display: block; width: 100%; }
    .sc-compare thead { display: none; }
    .sc-compare tr { padding: 10px 0; border-top: 1px solid var(--border); }
    .sc-compare td { padding: 2px 0; border: 0; }
    .sc-compare td:first-child { font-weight: 700; margin-bottom: 2px; }
    .sc-compare td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 600; }
}
/* Stat-card rows with an odd number of cards: the last one spans the row on a phone. */
@media (max-width: 600px) {
    :is(.stats-grid, .stat-grid, .dash-stats, .acct-stats, .fin-stats, .rep-stats) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Agent profile: the rating stars show on the coloured header. */
.profile-hero-rating svg.star-filled { fill: #fbbf24; stroke: #fbbf24; }
.profile-hero-rating svg.star-empty { fill: none; stroke: rgba(255, 255, 255, 0.6); }
.profile-hero-rating svg { width: 15px; height: 15px; flex: none; }
.profile-hero-rating { gap: 2px; }
.profile-hero-rating > svg:last-of-type { margin-right: 4px; }
/* My Listings on a phone: the action buttons sit on an even 2-column grid (status picker full width). */
@media (max-width: 760px) {
    .data-table .actions-cell.listing-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .data-table .actions-cell.listing-actions > * { width: 100%; min-width: 0; margin: 0; }
    .data-table .actions-cell.listing-actions > form > button, .data-table .actions-cell.listing-actions > form > .btn { width: 100%; justify-content: center; }
    .data-table .actions-cell.listing-actions > .btn, .data-table .actions-cell.listing-actions button { justify-content: center; }
    .data-table .actions-cell.listing-actions select { width: 100%; }
    .data-table .actions-cell.listing-actions > :has(select) { grid-column: 1 / -1; }
    .add-listing-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .add-listing-actions .btn { width: 100%; justify-content: center; white-space: nowrap; }
    .add-listing-actions > :nth-child(3) { grid-column: 1 / -1; }
}
/* Hints under form fields are always the small grey style. */
.field > p.meta, .field > .meta:not(label) { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
/* Website page: web addresses break at the slashes, not mid-word; cards keep their gap. */
.website-url { word-break: normal; overflow-wrap: anywhere; }
.website-status + .domain-card, .domain-card { margin-top: 16px; }
/* Document lists: the details line always starts under the name + badge. */
.list-row .info > span:not([class*="pill"]):not([class*="badge"]):not([class*="chip"]) { display: block; margin-top: 3px; }
.list-row .info > span[class*="pill"] { width: fit-content; margin-top: 6px; }
/* Accounting reports: period presets are proper tappable chips. */
.acc-preset { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.84rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.acc-preset:hover { border-color: var(--primary-500); }
.acc-preset.is-on { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
/* CMA form on a phone: one field per row (email and mobile were cramped at half width). */
@media (max-width: 600px) { .cma-grid { grid-template-columns: minmax(0, 1fr); } .cma-grid > * { grid-column: auto !important; } }
@media (max-width: 600px) {
    .record-hero.agency-public-hero { grid-template-columns: minmax(0, 1fr); }
    .record-hero.agency-public-hero > .agency-public-logo { width: 52px; height: 52px; }
}
/* Progress meters always span their cell (on phone cards they were a 30 px stub). */
td.cell-rich .target-meter, .target-meter { width: 100%; min-width: 80px; }
/* Demo hours on a phone: each day is its own row: day on top, "from to" times side by side. */
@media (max-width: 600px) {
    .demo-window-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
    .demo-window-row:first-child { border-top: 0; }
    .demo-window-row select { grid-column: 1 / -1; }
}
/* New chat: names line up with the middle of the avatar. */
.chat-pane-form .list-row { align-items: center; }
.chat-pane-form .list-row .info { justify-content: center; }
/* Appointment form on a phone: one column that can shrink (a bare 1fr grew to the longest listing name). */
@media (max-width: 760px) { .appt-form .row { grid-template-columns: minmax(0, 1fr); } }
/* Form fields that are direct children of a form or settings card: even spacing too. */
:is(form:not([class*="-row"]):not(.seller-schedule-form):not(.target-set-form):not(.acc-period):not(.chat-composer), .settings-card, .detail-section) > :is(.field, .row, .avatar-field-row) + :is(.field, .row, .avatar-field-row) { margin-top: 14px; }
/* Big figures in stat cards scale with their card so they never get cut off. */
.stat-card, .acct-stat, .nr-tile { container-type: inline-size; }
.stat-card strong, .acct-stat strong, .acct-stat-value { font-size: clamp(0.95rem, 12cqi, 1.6rem); white-space: nowrap; }
/* Page titles don't balance (that left long titles at half width); they just avoid a lonely last word. */
h1, .section-title { text-wrap: pretty; }
/* Checklist section headers on a phone: the "0 of 6 done" pill drops under the title instead of squeezing it. */
@media (max-width: 600px) {
    .sc-section-head { flex-wrap: wrap; }
    .sc-section-head > div { flex: 1 1 200px; }
    .sc-section-head .sc-section-count { margin-left: auto; }
}
/* Agency page header: pin beside the address; the website button suits the coloured header. */
.agency-public-hero .record-hero-meta { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 6px; }
.agency-public-hero .btn.secondary { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.agency-public-hero .btn.secondary:hover { background: rgba(255, 255, 255, 0.24); }
/* For agencies: the main "Book a demo" button stands out on the teal header. */
.fa-hero-actions .btn:not(.fa-btn-light) { background: var(--accent-500); border-color: var(--accent-500); color: #fff; }
.fa-hero-actions .btn:not(.fa-btn-light):hover { background: var(--accent-600); border-color: var(--accent-600); }
/* Conversation rows: title, who, then a muted preview. */
.thread-item strong { display: block; }
.thread-item .meta { color: var(--muted); }
.thread-item .thread-last { margin-top: 3px; }
.thread-item:not(.is-unread) .thread-last { font-weight: 400; }

/* Inside the native ErfFind app (MobileApi::inApp): the app draws its own top bar, tabs and menu, so CRM and site
   screens drop theirs and fill the screen. */
body.in-app .crm-sidebar, body.in-app .crm-sidebar-backdrop, body.in-app .crm-topbar, body.in-app .back-to-top,
body.in-app > header.header, body.in-app .site-header, body.in-app .site-footer, body.in-app .env-banner { display: none !important; }
body.in-app .crm-main { margin-left: 0 !important; width: 100%; }
body.in-app .crm-content { padding-top: 14px; }
body.in-app { padding-top: 0 !important; }
/* In the app the top bar shows the page title, so the page's own first heading isn't repeated. */
body.in-app .crm-content > .container > h1.section-title:first-child, body.in-app .crm-content > .container > .page-head:first-child > h1.section-title,
body.in-app .crm-content > .container > div:first-child > h1.section-title:first-child { display: none; }
body.in-app .crm-content > .container > div:first-child > h1.section-title:first-child + .meta { margin-top: 0; }

/* Agency → Custom Fields: the agency's own boxes on the listing form, client form and client page (CustomField). */
.cf-box { border: 1px dashed var(--primary-tint-border, var(--border)); border-radius: var(--radius-md, 10px); padding: 12px 14px 2px; margin: 0 0 16px; background: var(--primary-tint-bg); }
.cf-box-title { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cf-client { padding: 14px 16px; margin: 0 0 18px; }
.cf-client-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.cf-client-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; margin: 0; }
.cf-client-list dt { font-size: 0.78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.cf-client-list dd { margin: 2px 0 0; }

/* New CMA report: pick a listing (photo, details, price) */
.cma-pick { padding: 14px 16px; }
.cma-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.cma-pick-head::-webkit-details-marker { display: none; }
.cma-pick-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.cma-pick-label svg { width: 17px; height: 17px; }
.cma-pick-chosen { font-size: 0.88rem; color: var(--muted); }
.cma-pick-chosen strong { color: var(--text); }
.cma-pick-search { width: 100%; margin: 12px 0 10px; }
.cma-pick-list { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.cma-pick-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.cma-pick-item:hover, .cma-pick-item:focus-visible { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.cma-pick-item.is-on { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.cma-pick-item[hidden] { display: none; }
.cma-pick-img { width: 72px; height: 54px; border-radius: 8px; overflow: hidden; background: var(--gray-100, #eef1f1); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.cma-pick-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cma-pick-img svg { width: 22px; height: 22px; }
.cma-pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cma-pick-text strong { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cma-pick-text .meta { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cma-pick-agent { display: inline-flex; align-items: center; gap: 4px; }
.cma-pick-agent svg { width: 12px; height: 12px; }
.cma-pick-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.cma-pick-side strong { font-size: 0.95rem; white-space: nowrap; }
.cma-pick-status { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--gray-100, #eef1f1); color: var(--muted); white-space: nowrap; }
.cma-pick-status.s-active { background: color-mix(in srgb, #15803d 14%, transparent); color: #15803d; }
.cma-pick-status.s-reduced, .cma-pick-status.s-under_offer { background: color-mix(in srgb, #b45309 14%, transparent); color: #b45309; }
.cma-pick-none { margin: 6px 2px; }
@media (max-width: 560px) {
    .cma-pick-item { grid-template-columns: 56px minmax(0, 1fr); }
    .cma-pick-img { width: 56px; height: 44px; }
    .cma-pick-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
}
/* Autosave: the "Restore what you typed" bar above a form (assets/js/form-autosave.js) */
.autosave-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); background: color-mix(in srgb, var(--primary) 8%, transparent); border-radius: 12px; font-size: 0.9rem; }
.autosave-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }