/* =====================================================
   CommercialListingPro — Main Stylesheet
   ===================================================== */

:root {
    /* Legacy aliases — map to design system tokens */
    --clp-navy:       #0b1739;    /* matches --color-navy */
    --clp-navy-dark:  #0b1739;    /* sidebar bg */
    --clp-navy-light: #16213a;    /* hover */
    --clp-gold:       #d97706;    /* repurposed as warning amber */
    --clp-gold-light: #fbbf24;
    --clp-green:      #059669;    /* maps to --color-success */
    --clp-light-bg:   #f7f8fc;    /* matches --color-bg */
    --clp-border:     #e2e8f0;    /* matches --color-border */
    --clp-text-muted: #64748b;    /* matches --color-text-secondary */
    --sidebar-width:  260px;      /* matches --sidebar-width in design-system */
}

/* =====================================================
   Base
   ===================================================== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--clp-light-bg);
    color: #1f2937;
    font-size: 0.9375rem;
}

a { color: var(--clp-navy); }
a:hover { color: var(--clp-navy-light); }

/* =====================================================
   Navigation
   ===================================================== */
.navbar-clp {
    background-color: var(--clp-navy) !important;
    padding: 0.6rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.navbar-clp .navbar-brand {
    color: white !important;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.navbar-clp .navbar-brand span {
    color: var(--clp-gold);
}

.navbar-clp .nav-link {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem !important;
    border-radius: 6px;
    transition: background 0.15s;
}

.navbar-clp .nav-link:hover,
.navbar-clp .nav-link.active {
    background: rgba(255,255,255,0.12);
    color: white !important;
}

/* The legacy .sidebar/.sidebar-*/.dashboard-main rules that used to live here were dead code —
   no component ever rendered class="sidebar". Removed rather than left to confuse the next
   person searching for "sidebar" in this file; the real, live shell is .acl-sidebar below. */

.dashboard-topbar {
    background: white;
    border-bottom: 1px solid var(--clp-border);
    padding: 0.75rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-content {
    padding: 2rem;
}

/* =====================================================
   Cards
   ===================================================== */
.card {
    border-radius: 12px;
    transition: box-shadow 0.2s, transform 0.2s;
}

.hover-shadow:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    transform: translateY(-2px);
}

.listing-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
    transform: translateY(-3px);
}

.stat-card {
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid var(--clp-border);
}

.admin-action-card:hover {
    background: var(--clp-light-bg) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
    transform: translateY(-2px);
}

/* =====================================================
   Hero Section
   ===================================================== */
.hero-section {
    background: linear-gradient(135deg, var(--clp-navy) 0%, var(--clp-navy-light) 100%);
    color: white;
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/images/hero-bg.jpg') center/cover no-repeat;
    opacity: 0.12;
}

.hero-section .container { position: relative; }

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.hero-search-bar {
    background: white;
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.hero-search-bar .form-control {
    border: none;
    font-size: 1rem;
    padding: 0.6rem 1rem;
}

.hero-search-bar .form-control:focus { box-shadow: none; }

.hero-search-bar .btn {
    background: var(--clp-gold);
    color: #000;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.5rem;
}

/* =====================================================
   Property Category Cards
   ===================================================== */
.category-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--clp-navy);
    border: 1px solid var(--clp-border);
    transition: all 0.2s;
    display: block;
}

.category-card:hover {
    border-color: var(--clp-navy);
    box-shadow: 0 4px 16px rgba(26,46,74,0.12);
    transform: translateY(-3px);
    color: var(--clp-navy);
}

.category-card .icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--clp-gold);
}

/* =====================================================
   Listing Cards
   ===================================================== */
.listing-card .card-img-top {
    border-radius: 12px 12px 0 0;
    transition: transform 0.3s;
}

.listing-card:hover .card-img-top {
    transform: scale(1.03);
}

.listing-card { overflow: hidden; }

.listing-type-badge {
    background: var(--clp-gold);
    color: #000;
    font-weight: 600;
    font-size: 0.75rem;
}

/* =====================================================
   Search Listing Card (LoopNet-style marketplace grid)
   ===================================================== */
.slc-card {
    border: 1px solid #e8edf2;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: box-shadow 0.22s ease, transform 0.22s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.slc-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.13);
    transform: translateY(-3px);
}

.slc-img-wrap {
    position: relative;
    height: 220px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
}

@media (min-width: 1200px) {
    .slc-img-wrap { height: 260px; }
}

.slc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.38s ease;
}

.slc-card:hover .slc-img {
    transform: scale(1.05);
}

.slc-listing-type-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(37, 99, 235, 0.88);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.slc-type-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255,255,255,0.93);
    color: #1f2937;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 20px;
    letter-spacing: 0.01em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.5);
    pointer-events: none;
}

.slc-featured-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--clp-gold);
    color: #000;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    pointer-events: none;
}

/* Paid placement disclosure. Deliberately distinct from the editorial "Featured" badge
   so a sponsored result is never mistaken for an organic one. */
.slc-sponsored-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: #0f172a;
    color: #fbbf24;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 3px 10px;
    border-radius: 20px;
    pointer-events: none;
}

.slc-save-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.93);
    border: 1px solid rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9ca3af;
    font-size: 0.95rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: color 0.18s, background 0.18s, transform 0.18s;
    z-index: 2;
}

.slc-save-btn:hover {
    color: #e74c3c;
    background: white;
    transform: scale(1.1);
}

.slc-save-btn.saved {
    color: #e74c3c;
    background: white;
}

.slc-body {
    padding: 14px 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.slc-price {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2e4a;
    line-height: 1.25;
}

.slc-address {
    font-size: 0.83rem;
    color: #2563eb;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slc-location {
    font-size: 0.8rem;
    color: #6b7280;
}

.slc-size {
    font-size: 0.8rem;
    color: #2563eb;
    font-weight: 500;
    margin-top: 2px;
}

/* =====================================================
   Search Page — Two-column layout
   ===================================================== */
.search-page-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 28px;
    align-items: start;
}

/* Stack on tablet/mobile */
@media (max-width: 991px) {
    .search-page-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Card grid ─────────────────────────────────────── */
.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    align-items: start;
}

/* Single column on phone */
@media (max-width: 479px) {
    .search-results-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Search sidebar ────────────────────────────────── */
.search-sidebar {
    position: sticky;
    top: 80px;   /* stay visible while scrolling past cards */
}

/* On mobile, un-stick */
@media (max-width: 991px) {
    .search-sidebar { position: static; }
}

/* =====================================================
   AI Search Box
   ===================================================== */
.ai-search-wrap {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ai-search-card {
    background: linear-gradient(135deg, #1a2e4a 0%, #1e4a8a 60%, #2563eb 100%);
    padding: 18px 20px 20px;
    border-radius: 14px;
}

.ai-search-input {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.9rem;
    box-shadow: none;
    outline: none;
}

.ai-search-input:focus {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}

/* =====================================================
   Listing Detail Page
   ===================================================== */
.listing-gallery-main {
    border-radius: 12px;
    overflow: hidden;
    height: 420px;
}

.listing-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumbnail {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    height: 90px;
    opacity: 0.75;
    transition: opacity 0.2s, border-color 0.2s;
    border: 2px solid transparent;
}

.gallery-thumbnail:hover,
.gallery-thumbnail.active {
    opacity: 1;
    border-color: var(--clp-gold);
}

.detail-price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--clp-navy);
}

.stat-pill {
    background: var(--clp-light-bg);
    border: 1px solid var(--clp-border);
    border-radius: 50px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.stat-pill i { color: var(--clp-gold); }

/* =====================================================
   Search Filters
   ===================================================== */
.filter-panel {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid var(--clp-border);
    position: sticky;
    top: 80px;
}

.filter-panel h6 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clp-text-muted);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* =====================================================
   Broker Contact Card
   ===================================================== */
.broker-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--clp-border);
    position: sticky;
    top: 80px;
}

.broker-card .broker-photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--clp-gold);
}

/* =====================================================
   Forms
   ===================================================== */
.form-control, .form-select {
    border-color: var(--clp-border);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus, .form-select:focus {
    border-color: var(--clp-navy);
    box-shadow: 0 0 0 3px rgba(26,46,74,0.1);
}

.form-label {
    font-size: 0.85rem;
    color: #374151;
    margin-bottom: 0.3rem;
}

/* =====================================================
   Buttons
   ===================================================== */
.btn {
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* btn-primary and btn-outline-primary are governed by design-system.css */
.btn-warning {
    background: var(--clp-gold);
    border-color: var(--clp-gold);
    color: #fff;
    font-weight: 600;
}
.btn-warning:hover {
    background: var(--clp-gold-light);
    border-color: var(--clp-gold-light);
    color: #fff;
}

/* =====================================================
   Badges
   ===================================================== */
.badge { border-radius: 6px; font-weight: 500; }

/* =====================================================
   Tables
   ===================================================== */
.table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--clp-text-muted);
    font-weight: 600;
    padding: 0.75rem 1rem;
}

.table td { padding: 0.875rem 1rem; vertical-align: middle; }

/* =====================================================
   Avatar
   ===================================================== */
.avatar-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--clp-navy);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* =====================================================
   File Upload
   ===================================================== */
.upload-dropzone {
    border: 2px dashed var(--clp-border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    background: var(--clp-light-bg);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.upload-dropzone:hover,
.upload-dropzone.dragover {
    border-color: var(--clp-navy);
    background: rgba(26,46,74,0.04);
}

.upload-dropzone i {
    font-size: 2rem;
    color: var(--clp-text-muted);
    margin-bottom: 0.5rem;
}

/* =====================================================
   Pricing Cards
   ===================================================== */
.pricing-card-featured {
    border: 2px solid var(--clp-navy) !important;
    transform: scale(1.03);
}

/* =====================================================
   Footer
   ===================================================== */
.site-footer {
    background: var(--clp-navy-dark);
    color: rgba(255,255,255,0.75);
    padding: 3rem 0 1.5rem;
    margin-top: auto;
}

.site-footer h6 {
    color: white;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

.site-footer a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.4rem;
    transition: color 0.15s;
}

.site-footer a:hover { color: var(--clp-gold); }

.site-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 2rem;
    padding-top: 1.25rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
}

/* clp-footer — used in MainLayout.razor */
.clp-footer {
    background: #0f1f33;
    color: rgba(255,255,255,0.75);
    padding: 3rem 0 1.5rem;
    margin-top: auto;
}
.clp-footer h5,
.clp-footer h6 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 0.85rem;
}
.clp-footer p.text-muted,
.clp-footer .text-muted {
    color: rgba(255,255,255,0.55) !important;
}
.clp-footer .footer-link {
    color: rgba(255,255,255,0.62);
    text-decoration: none;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.4rem;
    transition: color 0.15s;
}
.clp-footer .footer-link:hover { color: #c9a227; }
.clp-footer hr,
.clp-footer .border-secondary { border-color: rgba(255,255,255,0.12) !important; }
.clp-footer .text-center.text-muted {
    color: rgba(255,255,255,0.4) !important;
}

/* =====================================================
   Utilities
   ===================================================== */
.text-clp { color: var(--clp-navy) !important; }
.bg-clp { background: var(--clp-navy) !important; }
.text-gold { color: var(--clp-gold) !important; }
.bg-gold { background: var(--clp-gold) !important; }

.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--clp-navy);
}

.section-subtitle {
    color: var(--clp-text-muted);
    font-size: 1.05rem;
}

/* Blazor validation */
.validation-message { color: #dc3545; font-size: 0.8rem; margin-top: 0.25rem; }
.invalid { border-color: #dc3545 !important; }

/* Loading overlay */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .dashboard-main {
        margin-left: 0;
    }

    .listing-gallery-main {
        height: 260px;
    }
}

@media (max-width: 767.98px) {
    .hero-section {
        padding: 3rem 0 2.5rem;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .dashboard-content {
        padding: 1rem;
    }
}

/* =====================================================
   Animations
   ===================================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeIn 0.3s ease; }

/* =====================================================
   Blazor Error UI
   ===================================================== */
#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* =====================================================
   AllCommercialListing SaaS Dashboard v6
   Premium AI Broker Workspace — Sidebar Redesign
   ===================================================== */

/* ── App Shell ─────────────────────────────────────────────────────────── */
.acl-app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 268px 1fr;
    background: var(--color-bg, #f7f8fc);
    transition: grid-template-columns 220ms ease;
}

/* ── Sidebar Shell ─────────────────────────────────────────────────────── */
/* Dark navy theme — restored as the one, permanent sidebar color system. Do not swap this for
   a light/white theme again; every element in the sidebar must read against this navy surface. */
.acl-sidebar {
    background: linear-gradient(180deg, #101D3D 0%, #071225 100%);
    color: #fff;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 32px rgba(6,14,28,.4);
}

/* ── Brand / Logo ──────────────────────────────────────────────────────── */
.acl-sidebar-brand {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 20px 18px 16px;
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 200ms ease;
}

.acl-sidebar-brand:hover {
    background: rgba(79,110,247,.08);
    color: #fff;
}

.acl-brand-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4F6EF7 0%, #7457E8 100%);
    box-shadow: 0 6px 20px rgba(79,110,247,.35);
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.acl-sidebar-brand strong {
    display: block;
    font-size: .9rem;
    letter-spacing: -.02em;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}

.sb-brand-accent { color: #9DB4F5; }

.acl-sidebar-brand small {
    display: block;
    color: #7185A8;
    font-size: .68rem;
    margin-top: 2px;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Thin separation below the brand row — a hairline, not a heavy border/bar. */
.acl-sidebar-brand-divider {
    height: 1px;
    margin: 0 18px;
    background: rgba(113,133,168,.22);
    flex-shrink: 0;
}

/* ── Scrollable Nav ────────────────────────────────────────────────────── */
.acl-sidebar-nav {
    flex: 1;
    padding: 8px 10px 14px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(79,110,247,.3) transparent;
}

.acl-sidebar-nav::-webkit-scrollbar { width: 3px; }
.acl-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(79,110,247,.35);
    border-radius: 3px;
}

.acl-sidebar-section { margin-top: 6px; }

/* ── Section Labels — plain text directly on the navy surface, never a boxed control ────────
   No background, no border, no fieldset/legend/summary semantics anywhere near this — it is a
   <button> styled down to bare text + a chevron, nothing else. */
.acl-sidebar-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #7185A8;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    padding: 12px 10px 6px;
}

.sb-label-line {
    flex: 1;
    height: 1px;
    background: rgba(113,133,168,.2);
    border-radius: 1px;
}

.acl-sidebar-label.sb-label-admin {
    color: #E8B54A;
}

/* ── Nav Links ─────────────────────────────────────────────────────────── */
.acl-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #AFC0DD;
    text-decoration: none;
    padding: 10px 12px;
    min-height: 40px;
    border-radius: 10px;
    font-weight: 550;
    font-size: .845rem;
    margin-bottom: 2px;
    border-left: 3px solid transparent;
    transition: background 180ms ease,
                color 180ms ease,
                border-color 180ms ease;
}

.acl-sidebar-link i {
    width: 17px;
    text-align: center;
    font-size: .95rem;
    flex-shrink: 0;
    color: #6E85B8;
    transition: color 180ms ease;
}

.acl-sidebar-link > span:not(.sb-badge) {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover — a slightly lighter blue wash, calm, no motion/transform */
.acl-sidebar-link:hover {
    color: #fff;
    background: rgba(79,110,247,.12);
}

.acl-sidebar-link:hover i {
    color: #A9BBF8;
}

.acl-sidebar-link:focus-visible {
    outline: 2px solid #4F6EF7;
    outline-offset: 1px;
}

/* Active — brighter blue fill, white text, slim accent bar, never a large dark block */
.acl-sidebar-link.active {
    color: #fff;
    font-weight: 650;
    background: rgba(79, 110, 247, 0.28);
    border-left-color: #4F6EF7;
}

.acl-sidebar-link.active i {
    color: #fff;
}

/* ── AI Section — distinct violet identity ──────────────────────────────── */
.sb-ai-section-wrap { }

.sb-ai-star {
    color: #A08CF0;
    font-size: .7rem;
    animation: sb-star-pulse 3s ease-in-out infinite;
}

@keyframes sb-star-pulse {
    0%, 100% { opacity: .7; }
    50% { opacity: 1; }
}

.sb-ai-link {
    color: #C2B3F5;
}

.sb-ai-link i {
    color: #A08CF0;
}

.sb-ai-link:hover {
    color: #fff;
    background: rgba(116,87,232,.16);
}

.sb-ai-link:hover i {
    color: #C2B3F5;
}

.sb-ai-link.active {
    color: #fff;
    font-weight: 650;
    background: rgba(116, 87, 232, 0.32);
    border-left-color: #7457E8;
}

.sb-ai-link.active i {
    color: #fff;
}

/* ── Collapsible sidebar groups ──────────────────────────────────────────
   Each section label is a plain, fully-clickable button that toggles its own
   link list, with state persisted client-side (see wwwroot/js/app.js
   aclSidebar* helpers). The group animates open/closed via a CSS grid-rows
   trick (1fr <-> 0fr) rather than display:none, so it needs no JS height
   measurement and no fixed max-height guess. */
.acl-sidebar-label-btn {
    /* Nuclear reset first: strips every property a <button> gets from the UA stylesheet
       (background, border, box-shadow, font, padding, appearance — all of it) before a single
       property below is re-declared. This is the belt-and-suspenders fix for the recurring
       "gray/white box around the label" report — background:none/border:none alone left some
       residual native chrome on Windows Chrome/Edge in at least one theme pass. */
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    cursor: pointer;
    border-radius: 7px;
    padding: 12px 10px 6px;
    /* Re-declared explicitly rather than relying on the sibling .acl-sidebar-label class to
       cascade these in — .acl-sidebar-label-btn sits later in this file, so its own `all: unset`
       would otherwise win the cascade for every property and silently blank the label styling. */
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #7185A8;
    text-align: left;
    transition: background 150ms ease;
}
.acl-sidebar-label-btn:hover { background: rgba(79,110,247,.1); color: #C7D4EC; }
.acl-sidebar-label-btn:focus-visible {
    outline: 2px solid #4F6EF7;
    outline-offset: -2px;
}
.sb-label-chevron {
    font-size: .62rem;
    color: #6E85B8;
    flex-shrink: 0;
    transition: transform 200ms ease;
}
.sb-label-chevron.sb-chevron-open { transform: rotate(180deg); }

.acl-sidebar-group {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 220ms ease;
}
.acl-sidebar-group.sb-group-collapsed { grid-template-rows: 0fr; }
.acl-sidebar-group-inner { overflow: hidden; min-height: 0; }

/* ── Sidebar rail (icon-only) collapse toggle — a small, unmistakably a
   button, control anchored to the sidebar's edge. Desktop only; mobile
   always uses the full-width overlay drawer regardless of this state. ── */
.acl-sidebar-rail-toggle {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    top: 22px;
    right: -13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #16213A;
    border: 1px solid rgba(79,110,247,.45);
    box-shadow: 0 2px 8px rgba(6,14,28,.4);
    color: #C7D4EC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    z-index: 5;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.acl-sidebar-rail-toggle:hover { background: #1B2C52; color: #fff; border-color: #4F6EF7; transform: scale(1.06); }
.acl-sidebar-rail-toggle:focus-visible { outline: 2px solid #4F6EF7; outline-offset: 2px; }

@media (min-width: 992px) {
    .acl-app-shell-rail { grid-template-columns: 76px 1fr; }

    .acl-sidebar-rail .acl-sidebar-brand { justify-content: center; padding: 19px 0 17px; }
    .acl-sidebar-rail .acl-sidebar-brand > span:not(.acl-brand-icon) { display: none; }
    .acl-sidebar-rail .acl-sidebar-brand-divider { margin: 0 10px; }

    .acl-sidebar-rail .sb-setup-note { justify-content: center; padding: .5rem; }
    .acl-sidebar-rail .sb-setup-note span { display: none; }

    .acl-sidebar-rail .acl-sidebar-label-btn { justify-content: center; padding: 10px 0 5px; pointer-events: none; }
    .acl-sidebar-rail .acl-sidebar-label-btn .sb-label-line,
    .acl-sidebar-rail .acl-sidebar-label-btn > span,
    .acl-sidebar-rail .sb-label-chevron { display: none; }

    /* Rail mode always shows every icon, even for a group the agent closed while expanded —
       icon-only scanning is how a collapsed rail is meant to be read. */
    .acl-sidebar-rail .acl-sidebar-group,
    .acl-sidebar-rail .acl-sidebar-group.sb-group-collapsed { grid-template-rows: 1fr; }

    .acl-sidebar-rail .acl-sidebar-link { justify-content: center; padding: 10px 0; }
    .acl-sidebar-rail .acl-sidebar-link > span:not(.sb-badge) { display: none; }
    .acl-sidebar-rail .acl-sidebar-link i { width: auto; }

    .acl-sidebar-rail .sb-profile-inner { justify-content: center; }
    .acl-sidebar-rail .sb-profile-text,
    .acl-sidebar-rail .sb-profile-caret,
    .acl-sidebar-rail .sb-profile-btns { display: none; }
    .acl-sidebar-rail .sb-profile-trigger { flex-grow: 0; justify-content: center; }
}

/* ── Topbar icon buttons (Notifications / Help / Copilot) ───────────────── */
.acl-icon-btn {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    background-image: none;
    box-shadow: none;
    color: #475569;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.acl-icon-btn:hover { background: #fff; border-color: #C9D1F0; color: #16213a; box-shadow: 0 4px 12px rgba(24,33,58,.08); }
.acl-icon-btn:focus-visible { outline: 2px solid #5B5CEB; outline-offset: 1px; }
.acl-icon-btn:active { background: #F8F7FC; box-shadow: none; }
.acl-icon-btn[aria-expanded="true"] { background: #EEF2FF; border-color: #C9D1F0; color: #3157D5; }
.acl-icon-btn-ai:hover { border-color: var(--color-ai-tint, #e0d9fc); color: var(--color-ai, #6d4ceb); }
.acl-icon-btn-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #E23744;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(226,55,68,.35);
}

/* ── Notifications popover — a real card, not a raw browser dropdown ────── */
.acl-notif-menu {
    width: 400px;
    max-width: calc(100vw - 24px);
    padding: 0;
    border: 1px solid #E7E9F2;
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(24,33,58,.16), 0 4px 12px rgba(24,33,58,.06);
    overflow: hidden;
}
.acl-notif-head {
    display: flex; align-items: center; gap: .5rem;
    padding: .85rem 1rem .7rem; border-bottom: 1px solid #E7E9F2;
}
.acl-notif-title { font-size: .88rem; font-weight: 800; color: #18213A; }
.acl-notif-count-pill {
    background: #EEF2FF; color: #3157D5; font-size: .68rem; font-weight: 800;
    border-radius: 999px; padding: .1rem .5rem;
}
.acl-notif-markall {
    -webkit-appearance: none; appearance: none;
    margin-left: auto; background: none; border: 0; box-shadow: none;
    font-size: .74rem; font-weight: 700; color: #3157D5; cursor: pointer;
    padding: .3rem .4rem; border-radius: 6px;
}
.acl-notif-markall:hover { background: #F8F7FC; text-decoration: underline; }
.acl-notif-markall:disabled { color: #B7BFD4; cursor: default; }

.acl-notif-tabs {
    display: flex; gap: 2px; padding: .5rem .6rem 0; border-bottom: 1px solid #E7E9F2;
}
.acl-notif-tab {
    -webkit-appearance: none; appearance: none;
    background: none; border: 0; box-shadow: none;
    font-size: .74rem; font-weight: 650; color: #68738D; cursor: pointer;
    padding: .35rem .65rem .55rem; border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent;
}
.acl-notif-tab:hover { color: #18213A; background: #F8F7FC; }
.acl-notif-tab.is-active { color: #3157D5; border-bottom-color: #5B5CEB; }

.acl-notif-list { max-height: 360px; overflow-y: auto; padding: .3rem; }
.acl-notif-empty {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: 1.75rem 1rem 2rem; text-align: center;
}
.acl-notif-empty i { font-size: 1.4rem; color: #16A76B; }
.acl-notif-empty-text { font-size: .84rem; color: #68738D; font-weight: 600; }

.acl-notif-item-row {
    display: flex; align-items: stretch; gap: 0;
    border-bottom: 1px solid #F1F2F8;
}
.acl-notif-item-row:last-child { border-bottom: none; }
.acl-notif-item {
    -webkit-appearance: none; appearance: none;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    flex: 1;
    min-width: 0;
    padding: .65rem .5rem .65rem .6rem;
    border-radius: 10px;
    color: #18213A;
    text-decoration: none !important;
    background: none;
    background-image: none;
    border: none;
    box-shadow: none;
    text-align: left;
    font: inherit;
    position: relative;
    cursor: pointer;
}
.acl-notif-item:hover, .acl-notif-item:focus-visible {
    background: #F8F7FC;
    text-decoration: none !important;
    color: #18213A;
}
.acl-notif-item:focus-visible { outline: 2px solid #5B5CEB; outline-offset: -2px; }
.acl-notif-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: #EEF2FF; color: #3157D5; font-size: .95rem;
}
.acl-notif-icon.is-warn   { background: #FEF3C7; color: #B45309; }
.acl-notif-icon.is-violet { background: #F1EDFC; color: #7457E8; }
.acl-notif-icon.is-cyan   { background: #E3F6FA; color: #0E7C92; }
.acl-notif-icon.is-info   { background: #F1F2F8; color: #56637E; }
.acl-notif-body { flex: 1; min-width: 0; }
.acl-notif-item-title { font-size: .84rem; font-weight: 700; color: #18213A; line-height: 1.3; }
.acl-notif-item-sub {
    font-size: .75rem; color: #68738D; margin-top: 1px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.acl-notif-item-meta { flex-shrink: 0; font-size: .68rem; font-weight: 700; color: #9CA6BE; white-space: nowrap; padding-top: 2px; }
.acl-notif-item-meta.is-overdue { color: #E23744; }
.acl-notif-dot { width: 7px; height: 7px; border-radius: 50%; background: #3157D5; flex-shrink: 0; margin-top: 6px; }

.acl-notif-mark-btn {
    -webkit-appearance: none; appearance: none;
    flex-shrink: 0; align-self: center; margin-right: .4rem;
    width: 30px; height: 30px; border-radius: 8px;
    background: none; border: 0; box-shadow: none;
    color: #B7BFD4; cursor: pointer; font-size: .82rem;
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms ease, color 150ms ease;
}
.acl-notif-item-row:hover .acl-notif-mark-btn { color: #68738D; }
.acl-notif-mark-btn:hover { background: #EEF2FF; color: #3157D5 !important; }
.acl-notif-mark-btn:focus-visible { outline: 2px solid #5B5CEB; outline-offset: 1px; }

.acl-notif-foot { border-top: 1px solid #E7E9F2; padding: .3rem; }
.acl-notif-foot-link {
    -webkit-appearance: none; appearance: none;
    display: block; width: 100%; background: none; border: 0; box-shadow: none;
    text-align: center; padding: .6rem; font-size: .82rem; font-weight: 700;
    color: #3157D5; text-decoration: none !important; border-radius: 10px; cursor: pointer;
}
.acl-notif-foot-link:hover { background: #F8F7FC; color: #1d4ed8; }

@media (max-width: 480px) {
    /* Bootstrap's Popper already flips/shifts the popover to stay on-screen; this just keeps
       it from ever claiming more width than the viewport has. */
    .acl-notif-menu { width: calc(100vw - 24px); }
}

/* ── Notification Badges ────────────────────────────────────────────────── */
.sb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 999px;
    line-height: 1.5;
    margin-left: auto;
    flex-shrink: 0;
    letter-spacing: .02em;
}

/* AI badge — violet */
.sb-badge-ai {
    background: rgba(116,87,232,.22);
    color: #C7BBF5;
    border: 1px solid rgba(116,87,232,.3);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* New badge — green */
.sb-badge-new {
    background: rgba(16,185,129,.14);
    color: #34d399;
    border: 1px solid rgba(16,185,129,.2);
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Count badge — blue */
.sb-badge-count {
    background: rgba(59,130,246,.16);
    color: #93c5fd;
    border: 1px solid rgba(59,130,246,.2);
    min-width: 18px;
    text-align: center;
}

/* Alert badge — red, pulsing */
.sb-badge-alert {
    background: rgba(239,68,68,.18);
    color: #f87171;
    border: 1px solid rgba(239,68,68,.24);
    min-width: 18px;
    text-align: center;
    animation: sb-alert-pulse 2.2s ease-in-out infinite;
}

@keyframes sb-alert-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.15); }
    50%       { box-shadow: 0 0 0 3px rgba(239,68,68,.05); }
}

/* ── User Profile Section ─────────────────────────────────────────────────
   A clean integrated footer, part of the same navy surface: a subtle transparent-blue divider
   above it, no surrounding card, no background fill of its own. */
.sb-profile {
    flex-shrink: 0;
    padding: 12px 10px 14px;
    border-top: 1px solid rgba(113,133,168,.22);
}

.sb-profile-inner {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 4px;
    border-radius: 10px;
}

.sb-profile-trigger {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    padding: 6px;
    cursor: pointer;
    border-radius: 10px;
    transition: background 180ms ease;
}
.sb-profile-trigger:hover { background: rgba(79,110,247,.1); }
.sb-profile-trigger:focus-visible { outline: 2px solid #4F6EF7; outline-offset: 2px; }
.sb-profile-trigger::after { display: none; } /* suppress Bootstrap's caret — the chevron below is the affordance */
.sb-profile-caret { font-size: .68rem; color: #6E85B8; flex-shrink: 0; }

.sb-profile-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4F6EF7, #7457E8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .84rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(79,110,247,.35);
    text-transform: uppercase;
}

.sb-profile-text {
    flex: 1;
    min-width: 0;
}

.sb-profile-name {
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.sb-profile-role {
    font-size: .7rem;
    color: #7185A8;
    margin-top: 2px;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-profile-role.is-demo { color: #9DB4F5; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.sb-profile-role.is-demo .sb-demo-dot {
    width: 5px; height: 5px; border-radius: 50%; background: #4F6EF7; flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(79,110,247,.25);
}

.sb-profile-btns {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.sb-profile-ico {
    all: unset;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #7185A8;
    cursor: pointer;
    font-size: .84rem;
    transition: background 180ms ease, color 180ms ease;
}

.sb-profile-ico:hover {
    background: rgba(79,110,247,.16);
    color: #C7D4EC;
}
.sb-profile-ico:focus-visible { outline: 2px solid #4F6EF7; outline-offset: 1px; }

.sb-profile-logout:hover {
    background: rgba(226,55,68,.18);
    color: #F5B2B8;
}

/* Account menu opened from the sidebar footer — same actions as the topbar's account
   dropdown (a second, natural entry point to the same menu, not a duplicate concept). This
   menu is a floating popover (Bootstrap dropdown-menu), so it stays light/white by design —
   it is not part of the navy sidebar surface, it floats above the whole page. */
.sb-account-menu { width: 220px; padding: .35rem; border-radius: 14px; box-shadow: 0 16px 40px rgba(24,33,58,.24); border: 1px solid #e2e8f0; }
.sb-account-menu .dropdown-item { border-radius: 8px; font-size: .84rem; padding: .55rem .65rem; }
.sb-account-menu .dropdown-item:hover, .sb-account-menu .dropdown-item:focus { background: #f7f8fc; }

/* ── Mobile / Hamburger ─────────────────────────────────────────────────── */
.sb-hamburger {
    background: none;
    border: 1px solid rgba(0,0,0,.1);
    color: #475569;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: background 150ms ease;
}

.sb-hamburger:hover { background: #f1f5f9; color: #1e293b; }

/* Mobile overlay */
.sb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6,14,28,.55);
    z-index: 998;
    backdrop-filter: blur(2px);
    animation: sb-fade 200ms ease;
}

@keyframes sb-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Add Listing: transaction-type chooser ──────────────────────────────────
   Sale vs Lease is the branch the whole form hangs off, so it is presented as two
   deliberate targets rather than a dropdown a broker can skim past. */
.cre-deal-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

.cre-deal-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    padding: .9rem 1.1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.cre-deal-option:hover { border-color: #bfdbfe; background: #f8fafc; }

.cre-deal-option.is-selected {
    border-color: #1d4ed8;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(29,78,216,.10);
}

.cre-deal-option i { font-size: 1.15rem; color: #1d4ed8; }
.cre-deal-title { font-weight: 700; color: #0f172a; }
.cre-deal-sub   { font-size: .78rem; color: #64748b; }

@media (max-width: 560px) {
    .cre-deal-toggle { grid-template-columns: 1fr; }
}

/* Live calculated read-outs (price/SF, cap rate, price/unit). Presented as output, not
   input, so it is obvious these are derived and not something to fill in. */
.cre-calc-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    padding: .65rem .9rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    font-size: .86rem;
    color: #14532d;
}

.cre-calc-label { font-weight: 700; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: #15803d; }
.cre-calc-item strong { color: #14532d; }

/* CRE terminology hints */
.cre-tip { cursor: help; font-size: .82rem; }

/* ── Main / Topbar ──────────────────────────────────────────────────────── */
.acl-main { min-width: 0; display: flex; flex-direction: column; }

/* ── Demo session bar ───────────────────────────────────────────────────────
   Shown only during a passwordless demo session. Sits ABOVE the sticky topbar
   and scrolls away with the page: it is an orientation cue, not a permanent
   toolbar, and pinning it would eat vertical space on a phone. */
.acl-demo-bar {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    padding: .55rem 26px;
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    color: #1e3a8a;
    font-size: .85rem;
    line-height: 1.35;
}

.acl-demo-pill {
    flex-shrink: 0;
    background: #1d4ed8;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: .18rem .55rem;
    border-radius: 999px;
}

.acl-demo-text { flex: 1 1 260px; min-width: 0; }

.acl-demo-cta,
.acl-demo-exit {
    flex-shrink: 0;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.acl-demo-cta  { color: #1d4ed8; }
.acl-demo-exit { color: #64748b; }
.acl-demo-cta:hover,
.acl-demo-exit:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .acl-demo-bar  { padding: .5rem 14px; font-size: .8rem; gap: .5rem; }
    .acl-demo-text { flex-basis: 100%; }
}

/* ── Plan badge — REMOVED ────────────────────────────────────────────────────
   The "Professional Demo" pill used to be repeated in the sidebar footer, the
   topbar, the account dropdown and five page headers. The demo state is now
   stated exactly once, by .acl-demo-bar above, so all of those renderings and
   the .acl-plan-badge / -sm / -dark rules that styled them are gone.

   Do not reintroduce this class name. A SECOND, unrelated `.acl-plan-badge`
   rule further down this file (the pricing-card "Most Popular" ribbon) declared
   `position:absolute; top:-14px; left:24px`. Being later in the cascade it won
   every time, so each demo pill escaped normal flow and anchored to its nearest
   positioned ancestor: against the sticky .acl-sidebar it landed above the brand
   and was clipped by the sidebar's overflow:hidden, and against the sticky
   .acl-topbar it rode up under the demo banner. That collision is what made the
   top of the dashboard look cut off. That dead rule has been removed too. */

.acl-topbar {
    height: 68px;
    padding: 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(12px);
    flex-shrink: 0;
}

.acl-top-title    { font-weight: 900; color: #10243d; font-size: .95rem; }
.acl-top-subtitle { font-size: .76rem; color: #64748b; margin-top: 1px; }
.acl-top-actions  { display: flex; gap: 10px; align-items: center; }
.acl-content      { padding: 22px 24px; flex: 1; }

.acl-dashboard-header {
    overflow: hidden;
    border-radius: 18px;
    /* Building silhouette visible through a deep navy overlay */
    background:
        linear-gradient(110deg,
            rgba(10,22,45,.92) 0%,
            rgba(12,30,58,.84) 48%,
            rgba(14,40,72,.68) 100%
        ),
        url('/images/landing/cre-building-bg.svg') right center / 560px 120% no-repeat,
        #09162d;
    color: #fff;
}

.acl-dashboard-header h1 {
    font-weight: 900;
    letter-spacing: -.03em;
}

.text-white-75 { color: rgba(255,255,255,.78); }

.acl-kicker {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    margin-bottom: 10px;
}

.acl-stat-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 132px;
    padding: 18px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(15,31,51,.07);
    border: 1px solid #e7edf5;
    border-left: 5px solid #0d6efd;
}

.acl-border-primary { border-left-color: #0d6efd; }
.acl-border-success { border-left-color: #198754; }
.acl-border-info { border-left-color: #0dcaf0; }
.acl-border-warning { border-left-color: #f59e0b; }

.acl-stat-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    font-weight: 800;
}

.acl-stat-value {
    font-size: 1.75rem;
    font-weight: 900;
    color: #10243d;
    line-height: 1.1;
    margin-top: 7px;
}

.acl-stat-trend { font-size: .78rem; margin-top: 8px; font-weight: 650; }
.acl-stat-icon { font-size: 2.1rem; opacity: .42; }

.acl-panel {
    border-radius: 18px;
    overflow: hidden;
}

.acl-panel .card-header {
    padding: 16px 18px;
    border-bottom: 1px solid #eef2f7;
}

.acl-insight-card {
    height: 100%;
    padding: 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #edf2f7;
    box-shadow: 0 8px 22px rgba(15,31,51,.05);
    text-align: center;
}

.acl-insight-card h6 {
    font-weight: 800;
    margin: 12px 0 8px;
    color: #10243d;
}

.acl-insight-card p {
    color: #64748b;
    font-size: .85rem;
    margin-bottom: 0;
}

.acl-chart-placeholder {
    width: 92px;
    height: 92px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.acl-chart-primary { background: rgba(13,110,253,.11); color: #0d6efd; }
.acl-chart-success { background: rgba(25,135,84,.11); color: #198754; }
.acl-chart-warning { background: rgba(245,158,11,.14); color: #b77900; }

.acl-featured-card {
    background: #fff;
    border: 1px solid #e7edf5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(15,31,51,.05);
}

.acl-featured-img {
    height: 145px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.acl-featured-img .badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

.acl-thumb {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: #e7edf5;
}

.acl-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0d6efd;
    color: #fff;
    font-size: .85rem;
    font-weight: 900;
    flex: 0 0 auto;
}

.acl-date-box {
    width: 48px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #10243d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.acl-date-box span {
    font-size: .65rem;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 800;
}

.acl-date-box strong {
    font-size: 1.1rem;
    line-height: 1;
}

.acl-quick-links .list-group-item {
    font-weight: 650;
    color: #10243d;
}

.text-clp-navy { color: var(--clp-navy) !important; }

@media (max-width: 992px) {
    .acl-app-shell {
        grid-template-columns: 1fr;
    }

    .acl-sidebar {
        position: fixed;
        left: 0; top: 0;
        height: 100vh;
        width: 265px;
        min-height: 100vh;
        transform: translateX(-100%);
        transition: transform 280ms cubic-bezier(.4,0,.2,1),
                    box-shadow 280ms ease;
        z-index: 999;
    }

    .acl-sidebar.sb-mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 48px rgba(6,14,28,.55);
    }

    .acl-topbar {
        height: auto;
        padding: 12px 16px;
        gap: 10px;
        flex-wrap: wrap;
        position: sticky;
    }

    .acl-content { padding: 14px 16px; }
}


/* ===== AllCommercialListing public landing v6 ===== */
.clp-topnav { background: rgba(15, 23, 42, .96); backdrop-filter: blur(16px); }
.clp-brand { font-weight: 900; color: #fff !important; }
.clp-topnav .nav-link { color: rgba(255,255,255,.78) !important; font-weight: 600; }
.clp-topnav .nav-link:hover { color: #fff !important; }
.btn-gold { background: #f5b700; border-color: #f5b700; color: #0f172a; font-weight: 800; }

/* ===== Hero (video-based, legacy-matched) ===== */
/* .acl-hero, .acl-hero-overlay and .acl-hero-content live inline in Index.razor now.
   The legacy video-hero rules for those three selectors were removed from here because
   they leaked min-height/display/margins into the current photographic carousel hero. */

.acl-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.acl-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.acl-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    padding: 7px 18px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    backdrop-filter: blur(8px);
    margin-bottom: 18px;
    color: rgba(255,255,255,.92);
}

.acl-accent-text {
    background: linear-gradient(90deg, #fff 0%, #bfdbfe 40%, #60a5fa 75%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Trust pills */
.acl-hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 0;
}

.acl-hero-trust-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 210px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    padding: 14px 18px;
    backdrop-filter: blur(8px);
    text-align: left;
}

.acl-hero-trust-pill strong {
    display: block;
    font-size: .96rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 3px;
}

.acl-hero-trust-pill span {
    font-size: .8rem;
    color: rgba(255,255,255,.76);
    font-weight: 400;
    line-height: 1.4;
}

/* Search panel */
.acl-search-panel {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1100px;
    margin: 36px auto 0;
    background: rgba(255,255,255,.99);
    border-radius: 22px;
    padding: 32px;
    box-shadow: 0 24px 60px rgba(8,18,36,.30);
    border: 1px solid rgba(226,232,240,.85);
}

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

.acl-search-panel-header h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 2px;
}

.acl-search-panel-header p {
    font-size: .84rem;
    color: #64748b;
    margin: 0;
}

.acl-search-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .78rem;
    font-weight: 700;
    color: #2563eb;
    white-space: nowrap;
}

/* Tabs */
.acl-filter-tabs {
    display: inline-flex;
    padding: 5px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    gap: 4px;
    margin-bottom: 18px;
}

.acl-filter-tabs button {
    border: 0;
    background: transparent;
    padding: 8px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .875rem;
    color: #475569;
    transition: all .15s;
    cursor: pointer;
}

.acl-filter-tabs button.active {
    background: linear-gradient(135deg, #2563eb, #6366f1);
    color: #fff;
    box-shadow: 0 6px 18px rgba(59,130,246,.22);
}

/* Filter row */
.acl-filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 0;
}

.acl-field-label {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
}

.acl-filter-row .form-control,
.acl-filter-row .form-select,
.acl-ai-row .form-control {
    height: 56px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    font-size: .9375rem;
    background: #fafbfd;
    transition: border-color .15s, box-shadow .15s;
}

.acl-filter-row .form-control:focus,
.acl-filter-row .form-select:focus,
.acl-ai-row .form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
    background: #fff;
}

.acl-btn-search {
    height: 56px;
    min-width: 190px;
    border-radius: 14px;
    font-weight: 800;
    font-size: .9375rem;
    letter-spacing: .01em;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    border: none;
    transition: opacity .15s, transform .15s;
}

.acl-btn-search:hover {
    opacity: .92;
    transform: translateY(-1px);
    color: #fff;
}

/* OR divider */
.acl-or-divider {
    position: relative;
    text-align: center;
    margin: 18px 0;
}

.acl-or-divider:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #e2e8f0;
}

.acl-or-divider span {
    position: relative;
    background: #fff;
    padding: 0 16px;
    color: #94a3b8;
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* AI row */
.acl-ai-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: end;
}

.acl-ai-input {
    height: 56px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    font-size: .9375rem;
    background: #fafbfd;
    transition: border-color .15s, box-shadow .15s;
}

.acl-ai-input:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,.12);
    background: #fff;
}

.acl-btn-ai {
    height: 56px;
    min-width: 180px;
    border-radius: 14px;
    font-weight: 800;
    font-size: .9375rem;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    color: #fff;
    border: none;
    transition: opacity .15s, transform .15s;
}

.acl-btn-ai:hover {
    opacity: .92;
    transform: translateY(-1px);
    color: #fff;
}

/* Suggestion chips */
.acl-suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.acl-suggestion-chips button {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .8rem;
    font-weight: 600;
    transition: all .15s;
    cursor: pointer;
}

.acl-suggestion-chips button:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

/* ===== Page sections ===== */
.acl-page-section { padding: 80px 0; }
.acl-section-bg { background: #f8fafc; }

.acl-section-title { margin-bottom: 56px; text-align: center; }
.acl-eyebrow-tag { display: inline-block; padding: 8px 16px; border-radius: 999px; background: #eff6ff; color: #2563eb; font-weight: 800; font-size: .84rem; margin-bottom: 14px; }
.acl-section-title h2 { font-size: clamp(1.8rem, 3.5vw, 2.55rem); font-weight: 900; color: #0f172a; margin-bottom: 12px; }
.acl-section-title p { max-width: 780px; margin: 0 auto; color: #64748b; font-size: 1.05rem; }

/* Feature cards */
.acl-card-feature {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    box-shadow: 0 14px 30px rgba(15,23,42,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.acl-card-feature:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(15,23,42,.10);
}

.acl-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(79,70,229,.12));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.acl-card-icon i { font-size: 26px; color: #2563eb; }
.acl-card-feature h3 { font-size: 1.2rem; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.acl-card-feature p { color: #64748b; line-height: 1.65; margin: 0; }

/* Stats (AI section) */
.acl-stat-item { text-align: center; padding: 16px 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; }
.acl-stat-num { font-size: 2rem; font-weight: 900; color: #2563eb; line-height: 1; margin-bottom: 4px; }
.acl-stat-lbl { font-size: .82rem; color: #64748b; font-weight: 600; }

/* Benefit items */
.acl-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px;
}

.acl-benefit-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(79,70,229,.14));
    display: flex;
    align-items: center;
    justify-content: center;
}

.acl-benefit-icon i { font-size: 22px; color: #2563eb; }
.acl-benefit-item h4 { font-size: 1.08rem; font-weight: 800; color: #0f172a; margin: 0 0 6px; }
.acl-benefit-item p { color: #64748b; margin: 0; line-height: 1.6; }

/* Benefits stat overlay card */
.acl-benefits-stat-card {
    position: absolute;
    bottom: -18px;
    right: -14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px 22px;
    box-shadow: 0 16px 36px rgba(15,23,42,.12);
    min-width: 200px;
    text-align: center;
}

.acl-benefits-stat-num { font-size: 2.4rem; font-weight: 900; color: #2563eb; line-height: 1; margin-bottom: 6px; }

/* Testimonial cards */
.acl-testi-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    box-shadow: 0 14px 30px rgba(15,23,42,.05);
}

.acl-testi-card p { color: #334155; line-height: 1.72; margin-bottom: 20px; font-style: italic; }

.acl-testi-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.acl-testi-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.acl-testi-author strong { display: block; font-weight: 800; color: #0f172a; font-size: .95rem; }
.acl-testi-author small { color: #64748b; font-size: .82rem; }

/* Pricing cards */
.acl-plan-card {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 30px;
    height: 100%;
    box-shadow: 0 14px 30px rgba(15,23,42,.06);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
}

.acl-plan-card.popular {
    border: 2px solid #2563eb;
    box-shadow: 0 22px 48px rgba(37,99,235,.12);
}

/* The `.acl-plan-badge` ribbon rule that used to sit here has been removed. No
   markup consumed it — Pricing.razor styles its cards entirely with pr-* classes
   — but the name collided with the demo plan pill defined earlier in this file,
   and because this copy came later it won the cascade and absolutely positioned
   every demo badge in the dashboard out of its container. See the "Plan badge —
   REMOVED" note above .acl-topbar. */

.acl-plan-header { margin-bottom: 8px; }
.acl-plan-header h3 { font-size: 1.25rem; font-weight: 900; color: #0f172a; margin: 0 0 4px; }
.acl-plan-price { font-size: 2.2rem; font-weight: 900; color: #0f172a; line-height: 1.1; margin: 10px 0 6px; }
.acl-plan-price span { font-size: 1rem; color: #64748b; font-weight: 500; }
.acl-plan-desc { color: #64748b; font-size: .9rem; min-height: 40px; margin-bottom: 16px; }

.acl-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    gap: 10px;
    flex: 1;
}

.acl-plan-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: .9rem;
}

.acl-plan-features li i { font-size: .9rem; flex-shrink: 0; color: #10b981; }
.acl-plan-features li.disabled { color: #94a3b8; text-decoration: line-through; }
.acl-plan-features li.disabled i { color: #cbd5e1; }

/* CTA section */
.acl-cta-section {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.acl-cta-section:before {
    content: '';
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    top: -140px;
    right: -80px;
}

.acl-cta-section h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 900; margin-bottom: 14px; }
.acl-cta-section p { max-width: 760px; margin: 0 auto 28px; color: rgba(255,255,255,.86); font-size: 1.05rem; }

.acl-btn-cta {
    background: #fff;
    color: #2563eb;
    border: none;
    border-radius: 12px;
    padding: 14px 36px;
    font-weight: 900;
    font-size: 1rem;
    transition: transform .15s, box-shadow .15s;
}

.acl-btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    color: #1d4ed8;
}

/* Shared section/layout helpers */
.acl-section-title { margin-bottom: 52px; }
.acl-feature-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 30px; height: 100%; box-shadow: 0 14px 30px rgba(15,23,42,.06); transition: .25s ease; }
.acl-feature-card:hover { transform: translateY(-8px); box-shadow: 0 18px 38px rgba(15,23,42,.10); }
.acl-icon { width: 68px; height: 68px; border-radius: 18px; background: linear-gradient(135deg,rgba(37,99,235,.10),rgba(79,70,229,.12)); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.acl-icon i { font-size: 28px; color: #2563eb; }
.acl-mini-stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 20px 10px; text-align: center; box-shadow: 0 12px 24px rgba(15,23,42,.05); }
.acl-mini-stat strong { display: block; font-size: 2rem; color: #2563eb; font-weight: 900; }
.acl-mini-stat span { color: #64748b; font-weight: 600; font-size: .9rem; }

/* Responsive */
@media (max-width: 992px) {
    /* The legacy video-hero .acl-hero override was removed here: its margin-top:-60px pulled
       the section up under the fixed nav (clipping the badge at the top of the hero
       composite) and its min-height/padding-top fought the inline rules in Index.razor,
       which is the sole owner of .acl-hero now. */
    .acl-search-panel { padding: 20px; border-radius: 16px; }
    .acl-filter-row,
    .acl-ai-row { grid-template-columns: 1fr; }
    .acl-search-panel-header { flex-direction: row; justify-content: space-between; }
    .acl-section-title h2 { font-size: 2rem; }
    .acl-hero-trust-row { gap: 10px; }
    .acl-hero-trust-pill { min-width: 160px; padding: 10px 14px; }
    .acl-benefits-stat-card { right: 0; bottom: -24px; min-width: 160px; }
}

@media (max-width: 576px) {
    /* Legacy .acl-hero min-height removed - see the note in the 992px block above. */
    .acl-hero-trust-row { flex-direction: column; align-items: center; }
    .acl-hero-trust-pill { min-width: 280px; }
    .acl-btn-search, .acl-btn-ai { min-width: 100%; }
}


/* AI Broker Assistant SaaS pages */
.acl-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 22px 28px;
    /* CRE building fades in from the right */
    background: linear-gradient(160deg, #eef6ff 0%, #f5f9ff 60%, #ffffff 100%);
    border-radius: 14px;
    border: 1px solid #e8f0fe;
    box-shadow: 0 2px 12px rgba(37,99,235,.05);
}
.acl-page-header h1 {
    font-weight: 800;
    color: #0f1f3d;
    margin: 0 0 .25rem;
    font-size: 1.75rem;
}
.acl-page-header p { color: #475569; margin: 0; }
.acl-metric-card {
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:1.15rem;
    box-shadow:0 12px 28px rgba(15,23,42,.06);
    padding:1.1rem;
    height:100%;
}
.acl-metric-card span { display:block; color:#64748b; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.acl-metric-card strong { display:block; font-size:2rem; color:#10213d; line-height:1.1; margin-top:.5rem; }
.ai-step-list { display:grid; gap:.75rem; }
.ai-step-list > div { padding:1rem; border:1px solid #e2e8f0; border-radius:1rem; background:#f8fafc; }
.ai-step-list strong { display:block; color:#10213d; }
.ai-step-list span { color:#64748b; font-size:.92rem; }
.ai-output { background:#0f172a; color:#e2e8f0; border-radius:1rem; padding:1rem; max-height:520px; overflow:auto; }
.ai-output pre { color:inherit; white-space:pre-wrap; margin:0; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:.9rem; }
.ai-recommendation { border:1px solid #e2e8f0; background:#fff; border-radius:1rem; padding:1rem; margin-bottom:.85rem; }
.ai-recommendation h6 { margin:.5rem 0 .35rem; font-weight:800; color:#10213d; }
.ai-recommendation p { margin:0; color:#64748b; font-size:.9rem; }
.media-tile { border:1px solid #e2e8f0; border-radius:1rem; overflow:hidden; background:#fff; box-shadow:0 10px 22px rgba(15,23,42,.05); }
.media-tile img { width:100%; height:170px; object-fit:cover; display:block; background:#f1f5f9; }

.acl-ai-shortcut { display:block; height:100%; padding:1rem; border:1px solid #e2e8f0; border-radius:1rem; text-decoration:none; color:#10213d; background:linear-gradient(180deg,#fff,#f8fafc); transition:.18s ease; }
.acl-ai-shortcut:hover { transform:translateY(-3px); box-shadow:0 12px 26px rgba(15,23,42,.08); color:#10213d; }
.acl-ai-shortcut i { font-size:1.6rem; color:#2563eb; display:block; margin-bottom:.65rem; }
.acl-ai-shortcut strong { display:block; font-weight:800; }
.acl-ai-shortcut span { display:block; color:#64748b; font-size:.85rem; margin-top:.2rem; }

/* ═══════════════════════════════════════════════════════════════
   PREMIUM LISTING DETAIL PAGE  — /listing/{Id}
   ═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.ld-page { background: #f8fafc; min-height: 100vh; padding-bottom: 60px; }

/* ── Header strip ── */
.ld-header { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 22px 0 18px; margin-bottom: 0; }
.ld-header-inner { max-width: 1380px; margin: 0 auto; padding: 0 24px; }
.ld-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ld-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.ld-badge-type    { background: #eff6ff; color: #1d4ed8; }
.ld-badge-listing { background: #f0fdf4; color: #15803d; }
.ld-badge-status  { background: #f0fdf4; color: #15803d; }
.ld-badge-featured { background: linear-gradient(135deg,#fef9c3,#fde68a); color: #92400e; }
.ld-badge-premium  { background: linear-gradient(135deg,#faf5ff,#e9d5ff); color: #6d28d9; }
.ld-badge-sold    { background: #fef2f2; color: #dc2626; }
.ld-badge-pending { background: #fffbeb; color: #b45309; }
.ld-title { font-size: 1.75rem; font-weight: 800; color: #0f172a; line-height: 1.2; margin-bottom: 6px; }
.ld-address { color: #64748b; font-size: .97rem; display: flex; align-items: center; gap: 5px; }
.ld-header-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.ld-save-btn  { border: 1.5px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 8px 18px; font-size: .88rem; font-weight: 600; color: #334155; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: .18s; }
.ld-save-btn:hover, .ld-save-btn.saved { background: #eff6ff; border-color: #2563eb; color: #2563eb; }
.ld-save-btn.saved i { color: #ef4444; }
.ld-share-btn { border: 1.5px solid #e2e8f0; background: #fff; border-radius: 10px; padding: 8px 18px; font-size: .88rem; font-weight: 600; color: #334155; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: .18s; }
.ld-share-btn:hover { background: #f8fafc; border-color: #94a3b8; }

/* ── Gallery ── */
.ld-gallery-wrap { background: #0f172a; }
.ld-gallery-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 3px; max-height: 460px; overflow: hidden; }
.ld-gallery-main { position: relative; overflow: hidden; }
.ld-gallery-main img { width: 100%; height: 460px; object-fit: cover; display: block; transition: transform .35s; }
.ld-gallery-main:hover img { transform: scale(1.02); }
.ld-gallery-thumbs { display: grid; grid-template-rows: repeat(2, 1fr); gap: 3px; }
.ld-gallery-thumb { position: relative; overflow: hidden; cursor: pointer; }
.ld-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.ld-gallery-thumb:hover img { transform: scale(1.04); }
.ld-photo-count-btn {
    position: absolute; bottom: 14px; right: 16px;
    background: rgba(15,23,42,.75); backdrop-filter: blur(6px);
    color: #fff; border: 1.5px solid rgba(255,255,255,.3);
    border-radius: 8px; padding: 7px 16px; font-size: .85rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; gap: 6px;
    transition: background .18s;
}
.ld-photo-count-btn:hover { background: rgba(15,23,42,.92); }
.ld-gallery-no-image {
    height: 340px; background: linear-gradient(135deg,#1e293b,#334155);
    display: flex; align-items: center; justify-content: center;
}
.ld-gallery-no-image i { font-size: 80px; color: rgba(255,255,255,.2); }

/* ── Gallery tabs (Photos / Map / Street View) ── */
.ld-gallery-tabs { background: #1e293b; display: flex; gap: 0; overflow-x: auto; }
.ld-gallery-tab {
    padding: 11px 22px; font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.55);
    border: none; background: none; cursor: pointer; white-space: nowrap;
    border-bottom: 2px solid transparent; transition: .18s;
}
.ld-gallery-tab:hover  { color: rgba(255,255,255,.85); }
.ld-gallery-tab.active { color: #fff; border-bottom-color: #3b82f6; }

/* ── Key facts bar ── */
.ld-facts-bar {
    background: #fff; border-bottom: 1px solid #e2e8f0;
    display: flex; gap: 0; overflow-x: auto;
}
.ld-fact {
    padding: 18px 32px; border-right: 1px solid #e2e8f0;
    min-width: 140px; flex-shrink: 0;
}
.ld-fact:last-child { border-right: none; }
.ld-fact-value { font-size: 1.25rem; font-weight: 800; color: #0f172a; line-height: 1; margin-bottom: 4px; }
.ld-fact-value.price { font-size: 1.5rem; color: #1d4ed8; }
.ld-fact-label { font-size: .78rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }

/* ── Two-column layout ── */
.ld-body { max-width: 1380px; margin: 0 auto; padding: 32px 24px; display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }

/* ── Content sections ── */
.ld-section { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 28px; margin-bottom: 20px; }
.ld-section-title { font-size: 1.05rem; font-weight: 800; color: #0f172a; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #f1f5f9; padding-bottom: 14px; }
.ld-section-title i { color: #2563eb; }

/* ════════════════════════════════════════════════════════════════
   PHD — Property Highlights Detail  (shared by Listing + Property pages)
   Matches Crexi-style premium two-column highlight card
   ════════════════════════════════════════════════════════════════ */

/* Card override */
.phd-card { padding: 32px 36px 28px !important; }

/* Header row: star icon + title + subtitle */
.phd-header { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.phd-star   { font-size: 1.6rem; color: #2563eb; flex-shrink: 0; margin-top: 2px; line-height: 1; }
.phd-title  { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin: 0 0 5px; line-height: 1.2; }
.phd-sub    { font-size: .875rem; color: #64748b; margin: 0; line-height: 1.5; }
.phd-hr     { border: none; border-top: 1px solid #e2e8f0; margin: 0 0 4px; }

/* Two-column flex layout */
.phd-cols      { display: flex; gap: 0; }
.phd-col       { flex: 1; min-width: 0; }
.phd-col-left  { border-right: 1px solid #e2e8f0; padding-right: 36px; }
.phd-col-right { padding-left: 36px; }

/* Individual highlight row */
.phd-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #f1f5f9;
}
.phd-item:last-child { border-bottom: none; }

/* Icon container */
.phd-icon       { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.phd-icon i     { font-size: 1.9rem; color: #2563eb; }
.phd-icon svg   { width: 32px; height: 32px; color: #2563eb; }

/* Text */
.phd-lbl { font-size: .9375rem; font-weight: 700; color: #0f172a; line-height: 1.3; }
.phd-val { font-size: .875rem; color: #64748b; margin-top: 2px; line-height: 1.4; }

/* Please Note box */
.phd-note {
    display: flex; align-items: flex-start; gap: 14px;
    background: #f0f7ff; border: 1px solid #bfdbfe;
    border-radius: 12px; padding: 18px 20px;
    margin-top: 24px;
}
.phd-note-icon {
    width: 32px; height: 32px;
    background: #2563eb; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
}
.phd-note-icon i { font-size: .9rem; color: #fff; }
.phd-note-lbl  { font-size: .9375rem; font-weight: 700; color: #1e3a5f; display: block; margin-bottom: 4px; }
.phd-note-text { font-size: .875rem; color: #1e4080; line-height: 1.6; margin: 0; }

/* Generic chips (unrecognized highlights) */
.phd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #f1f5f9; }
.phd-chip  {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 20px;
    padding: 5px 13px; font-size: .82rem; font-weight: 500; color: #475569;
}
.phd-chip i { font-size: .78rem; color: #94a3b8; }

/* Responsive */
@@media (max-width: 720px) {
    .phd-cols { flex-direction: column; }
    .phd-col-left  { border-right: none; border-bottom: 1px solid #e2e8f0; padding-right: 0; padding-bottom: 4px; }
    .phd-col-right { padding-left: 0; }
    .phd-card { padding: 22px 20px 20px !important; }
}
@@media (max-width: 480px) {
    .phd-item { padding: 14px 0; gap: 12px; }
    .phd-icon { width: 36px; height: 36px; }
    .phd-icon i { font-size: 1.5rem; }
}

/* ── Property facts two-column grid ── */
.ld-facts-grid { display: grid; grid-template-columns: 1fr 1fr; }
.ld-fact-row { display: contents; }
.ld-fact-row-label { padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: .88rem; color: #64748b; font-weight: 500; }
.ld-fact-row-value { padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: .88rem; color: #0f172a; font-weight: 700; text-align: right; }

/* ── Amenities ── */
.ld-amenities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 10px; }
.ld-amenity-tag { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font-size: .88rem; color: #1e293b; font-weight: 500; }
.ld-amenity-tag i { color: #2563eb; font-size: 1rem; }

/* ── Documents ── */
.ld-doc-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 8px; text-decoration: none; color: #1e293b; transition: .18s; }
.ld-doc-row:hover { background: #f8fafc; border-color: #2563eb; }
.ld-doc-row i.type-icon { font-size: 1.4rem; color: #dc2626; flex-shrink: 0; }
.ld-doc-name { flex: 1; font-size: .9rem; font-weight: 600; }
.ld-doc-size { font-size: .8rem; color: #94a3b8; }
.ld-doc-dl i { color: #94a3b8; }

/* ── Map ── */
.ld-map-embed { width: 100%; height: 360px; border: 0; display: block; border-radius: 0 0 0 0; }
.ld-map-actions { display: flex; gap: 10px; padding: 16px 0 0; flex-wrap: wrap; }

/* ── Sidebar ── */
.ld-sidebar { position: sticky; top: 80px; }
.ld-sidebar-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; margin-bottom: 16px; }
.ld-price-display { font-size: 1.85rem; font-weight: 900; color: #0f172a; line-height: 1; margin-bottom: 4px; }
.ld-price-label { font-size: .8rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 18px; }
.ld-cta-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; border-radius: 10px; font-size: .95rem; font-weight: 700; border: none; cursor: pointer; text-decoration: none; margin-bottom: 10px; transition: .2s; }
.ld-cta-primary { background: #2563eb; color: #fff; }
.ld-cta-primary:hover { background: #1d4ed8; color: #fff; }
.ld-cta-secondary { background: #fff; color: #2563eb; border: 1.5px solid #2563eb; }
.ld-cta-secondary:hover { background: #eff6ff; color: #2563eb; }

/* ── Inquiry form in sidebar ── */
.ld-form-label { font-size: .82rem; font-weight: 600; color: #374151; margin-bottom: 4px; display: block; }
.ld-form-control { width: 100%; padding: 9px 12px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: .9rem; color: #0f172a; background: #fff; outline: none; transition: border-color .18s; margin-bottom: 10px; }
.ld-form-control:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
textarea.ld-form-control { resize: vertical; min-height: 90px; }
.ld-submit-btn { background: #2563eb; color: #fff; border: none; border-radius: 10px; padding: 12px; width: 100%; font-size: .95rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .18s; margin-top: 4px; }
.ld-submit-btn:hover { background: #1d4ed8; }

/* ── Activity card ── */
.ld-activity-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #f1f5f9; }
.ld-activity-row:last-child { border-bottom: none; }
.ld-activity-label { font-size: .85rem; color: #64748b; display: flex; align-items: center; gap: 7px; }
.ld-activity-val { font-size: .9rem; font-weight: 700; color: #0f172a; }

/* ── Claim listing card ── */
.ld-claim-card { background: linear-gradient(135deg,#f0fdf4,#dcfce7); border: 1.5px solid #86efac; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.ld-claim-title { font-size: .95rem; font-weight: 800; color: #15803d; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
.ld-claim-desc { font-size: .82rem; color: #166534; margin-bottom: 14px; line-height: 1.5; }
.ld-claim-btn { background: #16a34a; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: .88rem; font-weight: 700; cursor: pointer; width: 100%; transition: background .18s; }
.ld-claim-btn:hover { background: #15803d; }

/* ── Claim modal overlay ── */
.ld-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ld-modal { background: #fff; border-radius: 16px; padding: 32px; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(15,23,42,.25); }
.ld-modal-title { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
.ld-modal-subtitle { font-size: .875rem; color: #64748b; margin-bottom: 22px; }
.ld-modal-close { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 1.4rem; color: #94a3b8; cursor: pointer; }

/* ── Listing metadata ── */
.ld-meta-row { display: flex; gap: 20px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid #f1f5f9; font-size: .82rem; color: #94a3b8; }
.ld-meta-row span { display: flex; align-items: center; gap: 5px; }

/* ── Similar listings grid (full width below fold) ── */
.ld-similar-section { max-width: 1380px; margin: 0 auto; padding: 0 24px 40px; }
.ld-similar-title { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin-bottom: 20px; }
.ld-similar-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.ld-similar-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: .2s; display: block; }
.ld-similar-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(15,23,42,.10); color: inherit; }
.ld-similar-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.ld-similar-card-body { padding: 14px; }
.ld-similar-card-price { font-size: 1.05rem; font-weight: 800; color: #1d4ed8; margin-bottom: 4px; }
.ld-similar-card-addr { font-size: .82rem; color: #64748b; line-height: 1.4; }
.ld-similar-card-type { font-size: .75rem; font-weight: 700; color: #94a3b8; margin-top: 5px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .ld-body { grid-template-columns: 1fr 320px; gap: 24px; }
    .ld-similar-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
    .ld-gallery-grid { grid-template-columns: 1fr; }
    .ld-gallery-thumbs { grid-template-rows: unset; grid-template-columns: repeat(4,1fr); max-height: 100px; }
    .ld-gallery-main img { height: 300px; }
    .ld-body { grid-template-columns: 1fr; }
    .ld-sidebar { position: static; }
    .ld-similar-grid { grid-template-columns: repeat(2,1fr); }
    .ld-fact { padding: 14px 20px; min-width: 110px; }
}
@media (max-width: 600px) {
    .ld-title { font-size: 1.35rem; }
    .ld-fact-value.price { font-size: 1.2rem; }
    .ld-similar-grid { grid-template-columns: 1fr 1fr; }
    .ld-body { padding: 16px 14px; }
    .ld-header-inner { padding: 0 14px; }
}
@media (max-width: 440px) {
    .ld-similar-grid { grid-template-columns: 1fr; }
}


/* =====================================================
   AI COMMERCIAL COPILOT
   A commercial real estate intelligence surface, not a
   generic chat window. See AI_COMMERCIAL_COPILOT_PLAN.md.
   ===================================================== */

.acl-copilot {
    /* AI surface — violet, distinct from the navy/blue platform chrome around it. */
    --cp-surface:  #ffffff;
    --cp-canvas:   #f5f7fa;
    --cp-ink:      #16213a;
    --cp-muted:    #64748b;
    --cp-line:     #e2e8f0;
    --cp-accent:   #6d4ceb;
    --cp-accent-soft: #eeeafe;
    --cp-amber:    #b45309;
    --cp-amber-soft: #fffbeb;
    --cp-danger:   #b91c1c;
    --cp-danger-soft: #fef2f2;
}

/* Every interactive control in the Copilot surface gets a visible, high-contrast focus ring —
   the default browser outline is too easily lost against the violet/navy chrome. */
.acl-copilot :is(button, a, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--cp-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .acl-copilot-thread-scroll { scroll-behavior: auto; }
    .acl-copilot-thinking span, .acl-copilot-card, .acl-copilot-jumplatest { animation: none !important; transition: none !important; }
}

/* ---- Header ---- */
.acl-copilot-header {
    background: linear-gradient(135deg, #0b1739 0%, #2a2160 55%, #6d4ceb 140%);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    color: #fff;
    margin-bottom: 1.25rem;
    flex: 0 0 auto;
}
.acl-copilot-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.35rem;
}
.acl-copilot-header p { color: rgba(255,255,255,.72); margin: 0; font-size: .9rem; max-width: 62ch; }
.acl-copilot-eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: #ded6fb; background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    padding: .25rem .6rem; border-radius: 999px; margin-bottom: .7rem;
}
.acl-copilot-quota {
    font-size: .74rem; color: rgba(255,255,255,.7);
    background: rgba(0,0,0,.2); border-radius: 8px; padding: .3rem .6rem; white-space: nowrap;
}

/* ---- Header controls: New / Clear / History ---- */
.acl-copilot-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.acl-copilot-ctrl-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
    color: #fff; border-radius: 8px; padding: .4rem .75rem; font-size: .8rem; font-weight: 600;
    white-space: nowrap; transition: background .15s, border-color .15s;
}
.acl-copilot-ctrl-btn:hover:not(:disabled) { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.acl-copilot-ctrl-btn:disabled { opacity: .45; }
.acl-copilot-ctrl-btn-danger:hover:not(:disabled) { background: rgba(239,68,68,.35); border-color: rgba(239,68,68,.6); }

/* ---- Fixed-height workspace shell ---- */
.acl-copilot-workspace {
    display: flex; flex-direction: column;
    height: calc(100vh - 148px);
    height: calc(100dvh - 148px);
    min-height: 480px;
}
@media (max-width: 767.98px) {
    .acl-copilot-workspace { height: calc(100vh - 108px); height: calc(100dvh - 108px); }
}
.acl-copilot-body {
    flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-columns: 45% 55%; gap: 1.25rem;
}
.acl-copilot-pane {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--cp-surface); border: 1px solid var(--cp-line); border-radius: 14px;
    overflow: hidden;
}
.acl-copilot-pane-conversation { background: var(--cp-canvas); }
.acl-copilot-pane-head {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: .65rem .9rem; border-bottom: 1px solid var(--cp-line); background: var(--cp-surface);
    font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cp-muted);
}

/* ---- Mobile tab switcher ---- */
.acl-copilot-mobiletabs {
    display: flex; gap: .4rem; background: #eef0f4; border-radius: 10px; padding: .25rem;
    margin-bottom: .85rem; flex: 0 0 auto;
}
.acl-copilot-mobiletabs button {
    flex: 1 1 0; border: 0; background: transparent; border-radius: 8px;
    padding: .5rem .6rem; font-size: .84rem; font-weight: 650; color: #475569;
}
.acl-copilot-mobiletabs button.active { background: #fff; color: var(--cp-accent); box-shadow: 0 1px 3px rgba(16,24,40,.12); }
@media (max-width: 1199.98px) {
    .acl-copilot-body { grid-template-columns: 1fr; }
    .acl-copilot-pane { display: none; }
    .acl-copilot-pane.acl-active { display: flex; }
}

/* ---- Composer ---- */
.acl-copilot-composer {
    flex: 0 0 auto;
    background: var(--cp-surface);
    border-top: 1px solid var(--cp-line);
    padding: .85rem;
}
.acl-copilot-composer textarea {
    border: 1px solid transparent; resize: none; font-size: .95rem; line-height: 1.5; width: 100%;
    max-height: 220px; padding: .35rem .5rem; background: transparent; color: var(--cp-ink);
}
.acl-copilot-composer textarea:focus { outline: none; box-shadow: none; }
.acl-copilot-composer-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; padding-top: .5rem; border-top: 1px solid var(--cp-line); margin-top: .35rem;
}
.acl-copilot-hint { font-size: .72rem; color: var(--cp-muted); }
.acl-copilot-charcount { font-size: .7rem; color: var(--cp-muted); }
.acl-copilot-charcount.acl-copilot-charcount-warn { color: var(--cp-amber); font-weight: 600; }
.acl-copilot-stopbtn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fff; border: 1px solid var(--cp-danger); color: var(--cp-danger);
    border-radius: 8px; padding: .4rem .8rem; font-size: .82rem; font-weight: 650;
}
.acl-copilot-stopbtn:hover { background: var(--cp-danger-soft); }

/* ---- Suggestion pills ---- */
.acl-copilot-suggest {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--cp-surface); border: 1px solid var(--cp-line);
    border-radius: 999px; padding: .4rem .85rem;
    font-size: .8rem; color: #1f2937; cursor: pointer; text-align: left;
    transition: border-color .15s, background .15s, transform .15s;
}
.acl-copilot-suggest:hover:not(:disabled) {
    border-color: #ddd6fe; background: var(--cp-accent-soft); color: var(--cp-accent);
}
.acl-copilot-suggest:disabled { opacity: .55; cursor: default; }
.acl-copilot-suggest-compact { padding: .3rem .65rem; font-size: .74rem; }

/* ---- Conversation ---- */
.acl-copilot-thread-scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scroll-behavior: smooth; position: relative;
    padding: 1rem 1rem .25rem;
}
.acl-copilot-thread { display: flex; flex-direction: column; gap: 1.1rem; }
.acl-copilot-turn-user {
    align-self: flex-end; max-width: min(88%, 46rem);
    background: #16213a; color: #fff;
    border-radius: 14px 14px 4px 14px;
    padding: .65rem 1rem; font-size: .9rem; line-height: 1.5;
    word-break: break-word; overflow-wrap: anywhere;
}
.acl-copilot-turn-ai { display: flex; gap: .7rem; align-items: flex-start; max-width: min(94%, 50rem); }
.acl-copilot-avatar {
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px;
    background: linear-gradient(135deg,#6d4ceb,#0b1739);
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.acl-copilot-turn-col { flex: 1 1 auto; min-width: 0; }
.acl-copilot-bubble {
    background: var(--cp-surface); border: 1px solid var(--cp-line);
    border-radius: 4px 14px 14px 14px; padding: .9rem 1.05rem;
    font-size: .9rem; line-height: 1.6; color: var(--cp-ink);
}
.acl-copilot-bubble-error { border-color: #fecaca; background: var(--cp-danger-soft); }
.acl-copilot-bubble > :last-child { margin-bottom: 0; }
.acl-copilot-bubble h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; }
.acl-copilot-bubble ul { padding-left: 1.1rem; margin-bottom: .5rem; }

.acl-copilot-msg-meta {
    display: flex; align-items: center; gap: .6rem; margin-top: .3rem; padding-left: .1rem;
}
.acl-copilot-msg-time { font-size: .68rem; color: #94a3b8; }
.acl-copilot-turn-user + .acl-copilot-msg-meta,
.acl-copilot-msg-meta.acl-copilot-msg-meta-user { justify-content: flex-end; }
.acl-copilot-msg-actions { display: flex; align-items: center; gap: .15rem; }
.acl-copilot-msg-actions button {
    border: 0; background: transparent; color: #94a3b8; padding: .15rem .35rem;
    border-radius: 6px; font-size: .74rem; line-height: 1; display: inline-flex; align-items: center; gap: .25rem;
}
.acl-copilot-msg-actions button:hover:not(:disabled) { background: #eef0f4; color: var(--cp-ink); }
.acl-copilot-msg-actions button.acl-active { color: var(--cp-accent); }
.acl-copilot-msg-actions button:disabled { opacity: .5; }

.acl-copilot-jumplatest {
    position: sticky; left: 50%; transform: translateX(-50%); bottom: .5rem;
    display: flex; margin: 0 auto; align-items: center; gap: .35rem;
    background: #16213a; color: #fff; border: 0; border-radius: 999px;
    padding: .45rem 1rem; font-size: .78rem; font-weight: 600;
    box-shadow: 0 8px 20px rgba(16,24,40,.25); z-index: 5;
}
.acl-copilot-jumplatest:hover { background: #223057; }

/* ---- Clear/reset inline chooser ---- */
.acl-copilot-clearchoice {
    display: flex; flex-wrap: wrap; gap: .5rem; margin: -.3rem 0 0 2.35rem;
}
.acl-copilot-clearchoice button {
    border: 1px solid var(--cp-line); background: #fff; border-radius: 8px;
    padding: .4rem .8rem; font-size: .8rem; font-weight: 600; color: var(--cp-ink);
}
.acl-copilot-clearchoice button:hover { background: var(--cp-accent-soft); border-color: #ddd6fe; color: var(--cp-accent); }
.acl-copilot-clearchoice button.acl-copilot-clearchoice-danger:hover { background: var(--cp-danger-soft); border-color: #fecaca; color: var(--cp-danger); }

/* ---- Understanding panel ---- */
.acl-copilot-understood {
    background: var(--cp-accent-soft);
    border: 1px solid #ddd6fe; border-radius: 12px;
    padding: .8rem 1rem; margin-bottom: .85rem;
}
.acl-copilot-understood-title {
    font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--cp-accent); margin-bottom: .5rem;
    display: flex; align-items: center; gap: .35rem;
}
.acl-copilot-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fff; border: 1px solid #ddd0fb; border-radius: 999px;
    padding: .25rem .3rem .25rem .7rem; font-size: .78rem; color: #4c2fb8; white-space: nowrap;
}
.acl-copilot-chip-static { padding-right: .7rem; }
.acl-copilot-chip-label { opacity: .62; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.acl-copilot-chip-x {
    border: 0; background: transparent; color: #64748b; line-height: 1;
    padding: 0 .25rem; border-radius: 50%; cursor: pointer; font-size: .8rem;
}
.acl-copilot-chip-x:hover { background: #eeeafe; color: #6d4ceb; }

/* ---- Notices: honest limits, never styled as errors ---- */
.acl-copilot-notice {
    display: flex; gap: .55rem; align-items: flex-start;
    background: var(--cp-amber-soft); border: 1px solid #fde68a; border-radius: 10px;
    padding: .6rem .8rem; font-size: .82rem; color: #78350f; margin-bottom: .5rem;
}
.acl-copilot-notice i { margin-top: .1rem; flex-shrink: 0; }

/* ---- Result toolbar ---- */
.acl-copilot-toolbar {
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between;
    padding: .7rem 0 .8rem; border-bottom: 1px solid var(--cp-line); margin-bottom: 1rem;
}
.acl-copilot-count { font-size: .88rem; font-weight: 600; color: var(--cp-ink); }
.acl-copilot-source {
    font-size: .72rem; color: var(--cp-muted);
    display: inline-flex; align-items: center; gap: .3rem;
}
.acl-copilot-viewtoggle .btn { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .78rem; }

/* ---- Property cards ---- */
.acl-copilot-results {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.acl-copilot-card {
    background: var(--cp-surface); border: 1px solid var(--cp-line);
    border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}
.acl-copilot-card:hover {
    box-shadow: 0 10px 28px rgba(16,24,40,.10); transform: translateY(-2px); border-color: #cbd5e1;
}
.acl-copilot-card-media {
    position: relative; aspect-ratio: 16 / 10; background: #eef2f6; overflow: hidden;
}
.acl-copilot-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acl-copilot-card-media-empty {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 1.75rem;
}
.acl-copilot-card-badge {
    position: absolute; top: .55rem; left: .55rem;
    background: rgba(17,24,39,.86); color: #fff; border-radius: 999px;
    padding: .18rem .6rem; font-size: .68rem; font-weight: 600; letter-spacing: .02em;
}
.acl-copilot-card-badge-own { background: rgba(29,78,216,.92); }
/* Paid-placement disclosure in Copilot results. Visually distinct from the editorial
   "Featured" badge so a sponsored result is never mistaken for an organic one. */
.acl-copilot-card-badge-sponsored { background: rgba(15,23,42,.92); color: #fbbf24; }
.acl-copilot-card-body { padding: .85rem .95rem 1rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.acl-copilot-card-title {
    font-size: .92rem; font-weight: 650; line-height: 1.35; color: var(--cp-ink);
    margin: 0 0 .2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.acl-copilot-card-loc { font-size: .78rem; color: var(--cp-muted); margin-bottom: .55rem; }
.acl-copilot-card-price { font-size: 1.02rem; font-weight: 700; color: var(--cp-ink); margin-bottom: .1rem; }
.acl-copilot-card-price-none { font-size: .85rem; font-weight: 600; color: var(--cp-muted); }
.acl-copilot-metrics {
    display: flex; flex-wrap: wrap; gap: .35rem; margin: .55rem 0 .6rem;
}
.acl-copilot-metric {
    background: #f1f5f9; border-radius: 7px; padding: .25rem .5rem; font-size: .72rem; color: #334155;
}
.acl-copilot-metric strong { color: var(--cp-ink); font-weight: 650; }
.acl-copilot-missing { font-size: .7rem; color: #92400e; margin-bottom: .5rem; }
.acl-copilot-card-foot {
    margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--cp-line);
    display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}
.acl-copilot-card-agent { font-size: .72rem; color: var(--cp-muted); margin-bottom: .45rem; }
.acl-copilot-card-agent a { color: var(--cp-accent); text-decoration: none; }
.acl-copilot-card-agent a:hover { text-decoration: underline; }
.acl-copilot-updated { font-size: .68rem; color: #94a3b8; }

/* ---- Buyer match cards ---- */
.acl-copilot-match {
    background: var(--cp-surface); border: 1px solid var(--cp-line);
    border-left: 3px solid var(--cp-accent); border-radius: 12px;
    padding: .85rem 1rem; margin-bottom: .7rem;
}
.acl-copilot-match-score {
    display: inline-flex; align-items: baseline; gap: .15rem;
    font-size: 1.15rem; font-weight: 750; color: var(--cp-accent);
}
.acl-copilot-match-score span { font-size: .7rem; font-weight: 600; }
.acl-copilot-reason { font-size: .8rem; color: #15803d; }
.acl-copilot-concern { font-size: .8rem; color: #b45309; }

/* ---- Map ---- */
.acl-copilot-map { height: 460px; width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid var(--cp-line); }
.acl-copilot-map-note {
    font-size: .75rem; color: var(--cp-muted); margin-top: .45rem;
}

/* ---- States ---- */
.acl-copilot-empty { text-align: center; padding: 2.5rem 1rem; color: var(--cp-muted); }
.acl-copilot-empty i { font-size: 2.4rem; opacity: .3; display: block; margin-bottom: .7rem; }
.acl-copilot-thinking { display: inline-flex; gap: .28rem; align-items: center; }
.acl-copilot-thinking span {
    width: 6px; height: 6px; border-radius: 50%; background: #94a3b8;
    animation: aclCopilotPulse 1.2s infinite ease-in-out;
}
.acl-copilot-thinking span:nth-child(2) { animation-delay: .18s; }
.acl-copilot-thinking span:nth-child(3) { animation-delay: .36s; }
@keyframes aclCopilotPulse {
    0%, 60%, 100% { opacity: .28; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ---- Contextual launcher ---- */
.acl-copilot-launcher {
    background: var(--cp-surface); border: 1px solid var(--cp-line);
    border-radius: 12px; margin-bottom: 1.15rem; overflow: hidden;
}
.acl-copilot-launcher-head {
    width: 100%; display: flex; align-items: center; gap: .65rem;
    padding: .7rem .95rem; background: transparent; border: 0; cursor: pointer; text-align: left;
}
.acl-copilot-launcher-head:hover { background: #f8fafc; }
.acl-copilot-launcher-icon {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg,#6d4ceb,#0b1739); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: .78rem;
}
.acl-copilot-launcher-title { font-size: .86rem; font-weight: 650; color: var(--cp-ink); line-height: 1.2; }
.acl-copilot-launcher-sub { font-size: .74rem; color: var(--cp-muted); }
.acl-copilot-launcher-body { padding: 0 .95rem 1rem; border-top: 1px solid var(--cp-line); }
.acl-copilot-disclaimer {
    display: flex; align-items: flex-start; gap: .4rem;
    margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--cp-line);
    font-size: .7rem; color: var(--cp-muted); line-height: 1.4;
}
.acl-copilot-disclaimer i { margin-top: .1rem; flex-shrink: 0; }

/* ---- Results pane scroll + lead table ---- */
.acl-copilot-results-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem 1.1rem 1.25rem; }
.acl-copilot-lead-row-unread { font-weight: 650; }
.acl-copilot-lead-row-unread td:first-child { position: relative; }
.acl-copilot-lead-unread-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--cp-accent); margin-right: .4rem; flex-shrink: 0;
}
.acl-copilot-status-badge {
    display: inline-block; padding: .12rem .5rem; border-radius: 999px;
    font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.acl-copilot-status-badge-active  { background: #dcfce7; color: #15803d; }
.acl-copilot-status-badge-pending { background: #fef3c7; color: #92400e; }
.acl-copilot-status-badge-other   { background: #e2e8f0; color: #475569; }

/* ---- Dialogs: Clear-conversation confirm + Conversation History drawer ---- */
.acl-copilot-dialog {
    border: 0; border-radius: 14px; padding: 0; max-width: 440px; width: 92vw;
    box-shadow: 0 24px 60px rgba(16,24,40,.28);
    color: var(--cp-ink); font-family: inherit;
}
.acl-copilot-dialog::backdrop { background: rgba(15,23,42,.55); }
.acl-copilot-dialog-body { padding: 1.35rem 1.5rem; }
.acl-copilot-dialog-title { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.acl-copilot-dialog-msg { font-size: .88rem; color: var(--cp-muted); line-height: 1.55; margin-bottom: 1.25rem; }
.acl-copilot-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; }

.acl-copilot-drawer {
    position: fixed; inset: 0 0 0 auto; margin: 0; height: 100%; max-width: none;
    width: min(440px, 94vw); border-radius: 0; flex-direction: column;
}
/* A closed native <dialog> is display:none by default (UA stylesheet) — only override that to
   flex once it actually has the [open] attribute, or it renders (and intercepts clicks) always. */
.acl-copilot-drawer[open] { display: flex; }
.acl-copilot-drawer-head {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--cp-line);
}
.acl-copilot-drawer-head h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.acl-copilot-drawer-close { border: 0; background: transparent; font-size: 1.2rem; color: var(--cp-muted); line-height: 1; padding: .25rem; }
.acl-copilot-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .5rem; }

.acl-copilot-history-item {
    display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .75rem; border-radius: 10px;
    cursor: pointer; border: 1px solid transparent;
}
.acl-copilot-history-item:hover { background: var(--cp-canvas); }
.acl-copilot-history-item.acl-active { border-color: #ddd6fe; background: var(--cp-accent-soft); }
.acl-copilot-history-item-body { flex: 1 1 auto; min-width: 0; }
.acl-copilot-history-title { font-size: .88rem; font-weight: 650; color: var(--cp-ink); }
.acl-copilot-history-preview {
    font-size: .78rem; color: var(--cp-muted); margin-top: .1rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.acl-copilot-history-meta { font-size: .68rem; color: #94a3b8; margin-top: .3rem; }
.acl-copilot-history-actions { display: flex; flex-direction: column; gap: .15rem; flex: 0 0 auto; }
.acl-copilot-history-actions button {
    border: 0; background: transparent; color: #94a3b8; padding: .25rem; border-radius: 6px; font-size: .82rem;
}
.acl-copilot-history-actions button:hover { background: #e2e8f0; color: var(--cp-ink); }
.acl-copilot-history-rename {
    width: 100%; font-size: .86rem; font-weight: 650; border: 1px solid var(--cp-accent);
    border-radius: 6px; padding: .2rem .4rem;
}
.acl-copilot-history-empty { text-align: center; color: var(--cp-muted); padding: 3rem 1.25rem; font-size: .85rem; }

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
    .acl-copilot-drawer { width: 100vw; }
}
@media (max-width: 575.98px) {
    .acl-copilot-header { padding: 1.15rem 1rem; border-radius: 12px; }
    .acl-copilot-header h1 { font-size: 1.3rem; }
    .acl-copilot-results { grid-template-columns: 1fr; }
    .acl-copilot-map { height: 320px; }
    .acl-copilot-turn-user { max-width: 94%; }
    .acl-copilot-controls { width: 100%; }
    .acl-copilot-ctrl-btn { flex: 1 1 auto; justify-content: center; }
}


/* =====================================================
   PROPERTY INTELLIGENCE
   Compact, scannable, broker-grade. Deliberately restrained:
   no oversized cards or gradients — the data is the product.
   ===================================================== */

.pi-panel {
    --pi-line:   #e5e7eb;
    --pi-ink:    #111827;
    --pi-muted:  #6b7280;
    --pi-accent: #1d4ed8;
    --pi-ok:     #059669;
    --pi-warn:   #b45309;
    --pi-crit:   #b91c1c;
    background: #fff; border: 1px solid var(--pi-line);
    border-radius: 14px; overflow: hidden; margin-bottom: 20px;
}

/* ---- Header ---- */
.pi-head { padding: 16px 18px 0; }
.pi-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; justify-content: space-between; }
.pi-title { font-size: 1.02rem; font-weight: 700; color: var(--pi-ink); margin: 0; letter-spacing: -.01em; }
.pi-title .bi { color: var(--pi-accent); margin-right: 6px; }
.pi-updated { font-size: .72rem; color: var(--pi-muted); }
.pi-plan-chip {
    font-size: .68rem; font-weight: 650; letter-spacing: .03em; text-transform: uppercase;
    background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe;
    border-radius: 999px; padding: 2px 9px;
}

/* ---- Score strip ---- */
.pi-score-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 12px 0 4px; }
.pi-score-num { font-size: 1.75rem; font-weight: 750; color: var(--pi-ink); line-height: 1; }
.pi-score-num small { font-size: .9rem; font-weight: 600; color: var(--pi-muted); }
.pi-bar { flex: 1 1 200px; height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; min-width: 160px; }
.pi-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--pi-accent); transition: width .3s; }
.pi-bar.is-ready  > span { background: var(--pi-ok); }
.pi-bar.is-warn   > span { background: var(--pi-warn); }
.pi-bar.is-blocked> span { background: var(--pi-crit); }

.pi-readiness {
    font-size: .72rem; font-weight: 650; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.pi-readiness.ready   { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.pi-readiness.warn    { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.pi-readiness.blocked { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.pi-facts { font-size: .78rem; color: var(--pi-muted); margin-top: 2px; }
.pi-facts .pi-dot { margin: 0 6px; opacity: .5; }

/* ---- Tabs (same idiom as BrokerProfile) ---- */
.pi-tabs {
    display: flex; gap: 2px; margin-top: 14px; overflow-x: auto;
    border-bottom: 1px solid var(--pi-line); padding: 0 18px; scrollbar-width: thin;
}
.pi-tab {
    background: none; border: 0; border-bottom: 2px solid transparent;
    padding: 9px 12px; font-size: .82rem; font-weight: 550; color: var(--pi-muted);
    white-space: nowrap; cursor: pointer;
}
.pi-tab:hover { color: var(--pi-ink); }
.pi-tab.active { color: var(--pi-accent); border-bottom-color: var(--pi-accent); font-weight: 650; }
.pi-tab-count {
    font-size: .68rem; background: #f1f5f9; border-radius: 999px; padding: 1px 6px; margin-left: 5px; color: #475569;
}
.pi-tab.active .pi-tab-count { background: #dbeafe; color: #1d4ed8; }
.pi-tab-count.crit { background: #fee2e2; color: #b91c1c; }

.pi-body { padding: 16px 18px 18px; }

/* ---- Alert rows ---- */
.pi-alert {
    display: flex; gap: 10px; align-items: flex-start;
    border: 1px solid var(--pi-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
    font-size: .84rem; background: #fff;
}
.pi-alert.crit { background: #fef2f2; border-color: #fecaca; }
.pi-alert.warn { background: #fffbeb; border-color: #fde68a; }
.pi-alert.info { background: #f8fafc; }
.pi-alert i { margin-top: 1px; flex-shrink: 0; }
.pi-alert.crit i { color: var(--pi-crit); }
.pi-alert.warn i { color: var(--pi-warn); }
.pi-alert.info i { color: var(--pi-muted); }
.pi-alert-title { font-weight: 650; color: var(--pi-ink); }
.pi-alert-detail { color: #4b5563; font-size: .8rem; margin-top: 1px; }

/* ---- Field lists ---- */
.pi-fieldgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.pi-field { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; padding: 5px 0; border-bottom: 1px dashed #f1f5f9; }
.pi-field-label { color: var(--pi-muted); }
.pi-field-value { font-weight: 600; color: var(--pi-ink); text-align: right; }
.pi-field-value.missing { color: var(--pi-crit); font-weight: 550; }
.pi-field-value.na      { color: #94a3b8; font-weight: 500; font-style: italic; }

/* ---- Status pills ---- */
.pi-status {
    display: inline-block; font-size: .66rem; font-weight: 650; border-radius: 4px;
    padding: 1px 6px; text-transform: uppercase; letter-spacing: .03em;
}
.pi-status.agent    { background: #eff6ff; color: #1d4ed8; }
.pi-status.verified { background: #ecfdf5; color: #047857; }
.pi-status.provider { background: #f5f3ff; color: #6d28d9; }
.pi-status.doc      { background: #fefce8; color: #a16207; }
.pi-status.ai       { background: #fdf2f8; color: #be185d; }
.pi-status.missing  { background: #fef2f2; color: #b91c1c; }
.pi-status.conflict { background: #fff7ed; color: #c2410c; }
.pi-status.na       { background: #f1f5f9; color: #64748b; }

/* ---- Metrics ---- */
.pi-metric {
    border: 1px solid var(--pi-line); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; background: #fff;
}
.pi-metric-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pi-metric-label { font-size: .82rem; color: var(--pi-muted); }
.pi-metric-value { font-size: 1.05rem; font-weight: 700; color: var(--pi-ink); }
.pi-metric-value.blocked { font-size: .82rem; font-weight: 600; color: var(--pi-warn); }
.pi-metric-formula { font-size: .72rem; color: #64748b; margin-top: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pi-metric-inputs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pi-metric-input { font-size: .7rem; background: #f8fafc; border: 1px solid var(--pi-line); border-radius: 5px; padding: 2px 6px; color: #334155; }
.pi-metric-note { font-size: .72rem; color: var(--pi-muted); margin-top: 5px; }

/* ---- Conflict ---- */
.pi-conflict { border: 1px solid #fed7aa; background: #fff7ed; border-radius: 10px; padding: 12px 13px; margin-bottom: 10px; }
.pi-conflict-values { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.pi-conflict-val { flex: 1 1 150px; background: #fff; border: 1px solid var(--pi-line); border-radius: 8px; padding: 7px 10px; }
.pi-conflict-val .k { font-size: .68rem; color: var(--pi-muted); text-transform: uppercase; letter-spacing: .03em; }
.pi-conflict-val .v { font-size: .95rem; font-weight: 700; color: var(--pi-ink); }
.pi-conflict-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---- Locked / unavailable ---- */
.pi-locked {
    border: 1px dashed #cbd5e1; border-radius: 10px; padding: 16px; text-align: center;
    background: #f8fafc; color: var(--pi-muted); font-size: .84rem;
}
.pi-locked i { display: block; font-size: 1.4rem; margin-bottom: 6px; opacity: .5; }
.pi-unavailable { font-size: .78rem; color: var(--pi-muted); display: flex; gap: 7px; padding: 6px 0; }
.pi-unavailable i { color: #94a3b8; margin-top: 2px; }

/* ---- AI label ---- */
.pi-ai-note {
    font-size: .72rem; color: #be185d; background: #fdf2f8; border: 1px solid #fbcfe8;
    border-radius: 6px; padding: 5px 9px; margin-bottom: 8px; display: inline-block;
}

/* ---- Engagement stats ---- */
.pi-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pi-stat { border: 1px solid var(--pi-line); border-radius: 9px; padding: 9px 10px; text-align: center; }
.pi-stat-v { font-size: 1.15rem; font-weight: 750; color: var(--pi-ink); line-height: 1.1; }
.pi-stat-l { font-size: .68rem; color: var(--pi-muted); margin-top: 2px; }

/* ---- Sources table ---- */
.pi-src { width: 100%; font-size: .78rem; border-collapse: collapse; }
.pi-src th { text-align: left; font-weight: 650; color: var(--pi-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; padding: 5px 8px 5px 0; border-bottom: 1px solid var(--pi-line); }
.pi-src td { padding: 7px 8px 7px 0; border-bottom: 1px solid #f1f5f9; color: #334155; vertical-align: top; }

@media (max-width: 575.98px) {
    .pi-head, .pi-body { padding-left: 13px; padding-right: 13px; }
    .pi-tabs { padding-left: 13px; padding-right: 13px; }
    .pi-fieldgrid { grid-template-columns: 1fr; }
    .pi-score-num { font-size: 1.45rem; }
}


/* =====================================================
   AI DAILY BRIEFING / MY ACTION PLAN
   ===================================================== */

.dap { --dap-line:#e5e7eb; --dap-ink:#111827; --dap-muted:#6b7280; --dap-accent:#1d4ed8; }

/* ---- Priority pills ---- */
.dap-pri { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.04em;
           text-transform:uppercase; border-radius:4px; padding:2px 7px; white-space:nowrap; }
.dap-pri.urgent { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.dap-pri.high   { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; }
.dap-pri.medium { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.dap-pri.low    { background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }

/* ---- Action row ---- */
.dap-item { display:flex; gap:11px; align-items:flex-start; border:1px solid var(--dap-line);
            border-radius:11px; padding:11px 13px; margin-bottom:9px; background:#fff; }
.dap-item.urgent { border-left:3px solid #b91c1c; }
.dap-item.high   { border-left:3px solid #c2410c; }
.dap-item.medium { border-left:3px solid #1d4ed8; }
.dap-item.low    { border-left:3px solid #cbd5e1; }
.dap-item.done   { opacity:.55; }
.dap-item-body   { flex:1 1 auto; min-width:0; }
.dap-item-title  { font-size:.88rem; font-weight:650; color:var(--dap-ink); margin:0 0 2px; }
.dap-item-why    { font-size:.79rem; color:#4b5563; line-height:1.45; }
.dap-item-meta   { font-size:.71rem; color:var(--dap-muted); margin-top:4px;
                   display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.dap-overdue     { color:#b91c1c; font-weight:650; }
.dap-item-actions{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; flex-shrink:0; }
.dap-item-actions .btn { --bs-btn-padding-y:.18rem; --bs-btn-padding-x:.55rem; --bs-btn-font-size:.73rem; }

/* ---- Icon chip ---- */
.dap-ico { width:30px; height:30px; border-radius:8px; flex-shrink:0; display:flex;
           align-items:center; justify-content:center; font-size:.82rem;
           background:#f1f5f9; color:#475569; }
.dap-item.urgent .dap-ico { background:#fef2f2; color:#b91c1c; }
.dap-item.high   .dap-ico { background:#fff7ed; color:#c2410c; }

/* ---- Briefing modal ---- */
.dap-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:1080;
                display:flex; align-items:center; justify-content:center; padding:18px;
                backdrop-filter:blur(2px); }
.dap-modal { background:#fff; border-radius:16px; width:100%; max-width:620px;
             max-height:88vh; display:flex; flex-direction:column; overflow:hidden;
             box-shadow:0 24px 60px rgba(15,23,42,.32); }
.dap-modal-head { padding:20px 22px 14px; border-bottom:1px solid var(--dap-line); }
.dap-modal-greet { font-size:1.15rem; font-weight:750; color:var(--dap-ink); margin:0 0 4px;
                   letter-spacing:-.015em; }
.dap-modal-sub { font-size:.84rem; color:var(--dap-muted); margin:0; }
.dap-modal-body { padding:16px 22px; overflow-y:auto; flex:1 1 auto; }
.dap-modal-foot { padding:13px 22px; border-top:1px solid var(--dap-line); background:#f8fafc;
                  display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.dap-ai-tag { font-size:.7rem; color:#be185d; background:#fdf2f8; border:1px solid #fbcfe8;
              border-radius:5px; padding:3px 8px; display:inline-block; margin-bottom:8px; }

/* ---- Dashboard widget ---- */
.dap-card { background:#fff; border:1px solid var(--dap-line); border-radius:13px; overflow:hidden; }
.dap-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px;
                 padding:13px 15px; border-bottom:1px solid var(--dap-line); }
.dap-card-title { font-size:.92rem; font-weight:700; color:var(--dap-ink); margin:0; }
.dap-card-body { padding:13px 15px; }

/* ---- Triage split ---- */
.dap-triage { display:flex; flex-wrap:wrap; gap:8px; }
.dap-triage-seg { flex:1 1 92px; border-radius:9px; padding:9px 11px; border:1px solid var(--dap-line); }
.dap-triage-seg .v { font-size:1.25rem; font-weight:750; line-height:1.1; }
.dap-triage-seg .l { font-size:.7rem; color:var(--dap-muted); margin-top:2px; }
.dap-triage-seg.now    { background:#fef2f2; border-color:#fecaca; }
.dap-triage-seg.now .v { color:#b91c1c; }
.dap-triage-seg.normal { background:#eff6ff; border-color:#bfdbfe; }
.dap-triage-seg.normal .v { color:#1d4ed8; }
.dap-triage-seg.low    { background:#f8fafc; }
.dap-triage-seg.low .v { color:#64748b; }

/* ---- Perf strip ---- */
.dap-perf { display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:8px; }
.dap-perf-cell { border:1px solid var(--dap-line); border-radius:9px; padding:9px 11px; }
.dap-perf-v { font-size:1.1rem; font-weight:750; color:var(--dap-ink); line-height:1.1; }
.dap-perf-l { font-size:.68rem; color:var(--dap-muted); margin-top:2px; }
.dap-perf-v.muted { color:#94a3b8; font-size:.84rem; font-weight:600; }

/* ---- Action plan page ---- */
.dap-tabs { display:flex; gap:2px; border-bottom:1px solid var(--dap-line);
            overflow-x:auto; margin-bottom:14px; }
.dap-tab { background:none; border:0; border-bottom:2px solid transparent; padding:9px 13px;
           font-size:.83rem; font-weight:550; color:var(--dap-muted); white-space:nowrap; cursor:pointer; }
.dap-tab:hover { color:var(--dap-ink); }
.dap-tab.active { color:var(--dap-accent); border-bottom-color:var(--dap-accent); font-weight:650; }
.dap-tab-n { font-size:.68rem; background:#f1f5f9; border-radius:999px; padding:1px 6px; margin-left:5px; }
.dap-tab.active .dap-tab-n { background:#dbeafe; color:#1d4ed8; }

.dap-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.dap-filters .form-select { font-size:.79rem; width:auto; }

.dap-empty { text-align:center; padding:38px 16px; color:var(--dap-muted); }
.dap-empty i { font-size:2.2rem; opacity:.3; display:block; margin-bottom:8px; }

/* ---- Locked premium action ---- */
.dap-locked { font-size:.72rem; color:#92400e; background:#fffbeb; border:1px solid #fde68a;
              border-radius:6px; padding:4px 8px; display:inline-flex; gap:5px; align-items:center; }

/* ---- Compact onboarding card (replaces the oversized Getting Started) ---- */
.dap-setup { display:flex; align-items:center; gap:12px; border:1px solid var(--dap-line);
             border-radius:11px; padding:11px 14px; background:#fff; }
.dap-setup-bar { flex:1 1 auto; height:6px; background:#f1f5f9; border-radius:999px; overflow:hidden; min-width:90px; }
.dap-setup-bar > span { display:block; height:100%; background:#059669; border-radius:999px; }

@media (max-width:575.98px) {
    .dap-modal { max-height:94vh; border-radius:13px; }
    .dap-modal-head, .dap-modal-body, .dap-modal-foot { padding-left:15px; padding-right:15px; }
    .dap-item { flex-wrap:wrap; }
    .dap-item-actions { width:100%; padding-left:41px; }
    .dap-modal-foot .btn { flex:1 1 auto; }
}


/* =====================================================
   AI MARKET INTELLIGENCE
   ===================================================== */

.mi { --mi-line:#e5e7eb; --mi-ink:#111827; --mi-muted:#6b7280; --mi-accent:#1d4ed8; }

.mi-hero { background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 55%,#1d4ed8 145%);
           border-radius:16px; padding:22px 24px; color:#fff; margin-bottom:18px; }
.mi-hero h1 { font-size:1.55rem; font-weight:750; letter-spacing:-.02em; margin:0 0 5px; }
.mi-hero p  { color:rgba(255,255,255,.72); font-size:.88rem; margin:0; max-width:64ch; }
.mi-eyebrow { display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:650;
              letter-spacing:.09em; text-transform:uppercase; color:#bfdbfe;
              background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
              padding:3px 9px; border-radius:999px; margin-bottom:9px; }

/* ---- Ask bar ---- */
.mi-ask { background:#fff; border:1px solid var(--mi-line); border-radius:13px; padding:11px;
          box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 22px rgba(16,24,40,.06); margin-bottom:16px; }
.mi-ask textarea { border:0; resize:none; width:100%; font-size:.92rem; padding:5px 7px; background:transparent; }
.mi-ask textarea:focus { outline:none; box-shadow:none; }
.mi-ask-bar { display:flex; align-items:center; justify-content:space-between; gap:8px;
              border-top:1px solid var(--mi-line); padding-top:8px; margin-top:4px; }
.mi-suggest { display:inline-flex; align-items:center; gap:.35rem; background:#fff;
              border:1px solid var(--mi-line); border-radius:999px; padding:5px 12px;
              font-size:.78rem; color:#1f2937; cursor:pointer; text-align:left; }
.mi-suggest:hover:not(:disabled) { border-color:#bfdbfe; background:#eff6ff; color:var(--mi-accent); }
.mi-suggest:disabled { opacity:.55; cursor:default; }

/* ---- KPI cards ---- */
.mi-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:11px; margin-bottom:16px; }
.mi-kpi { background:#fff; border:1px solid var(--mi-line); border-radius:12px; padding:13px 15px; }
.mi-kpi-l { font-size:.72rem; color:var(--mi-muted); margin-bottom:5px; line-height:1.3; }
.mi-kpi-v { font-size:1.45rem; font-weight:750; color:var(--mi-ink); line-height:1.1; letter-spacing:-.02em; }
.mi-kpi-v.na { font-size:.82rem; font-weight:600; color:#94a3b8; }
.mi-kpi-s { font-size:.68rem; color:#94a3b8; margin-top:5px; }
.mi-kpi.accent { border-color:#bfdbfe; background:linear-gradient(180deg,#f8fbff,#fff); }
.mi-kpi.accent .mi-kpi-v { color:var(--mi-accent); }

/* Sample-size chip: makes "avg of 4 listings" impossible to miss */
.mi-sample { display:inline-block; font-size:.64rem; font-weight:650; background:#f1f5f9;
             color:#475569; border-radius:4px; padding:1px 5px; margin-left:5px; }
.mi-sample.thin { background:#fffbeb; color:#92400e; }

/* ---- Not-connected card ---- */
.mi-kpi.notconnected { background:#f8fafc; border-style:dashed; }
.mi-kpi.notconnected .mi-kpi-v { font-size:.8rem; font-weight:600; color:#94a3b8; }
.mi-kpi.notconnected .mi-kpi-s { color:#a1a1aa; }

/* ---- Panels ---- */
.mi-panel { background:#fff; border:1px solid var(--mi-line); border-radius:13px;
            overflow:hidden; margin-bottom:16px; }
.mi-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px;
                 padding:13px 16px; border-bottom:1px solid var(--mi-line); }
.mi-panel-title { font-size:.92rem; font-weight:700; color:var(--mi-ink); margin:0; }
.mi-panel-body { padding:15px 16px; }

/* ---- Bar chart (pure CSS; no chart lib dependency) ---- */
.mi-bars { display:flex; flex-direction:column; gap:8px; }
.mi-bar-row { display:grid; grid-template-columns:minmax(96px,26%) 1fr auto; gap:10px; align-items:center; }
.mi-bar-label { font-size:.78rem; color:#334155; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mi-bar-track { height:9px; background:#f1f5f9; border-radius:999px; overflow:hidden; }
.mi-bar-fill  { display:block; height:100%; border-radius:999px; background:var(--mi-accent); }
.mi-bar-val   { font-size:.78rem; font-weight:650; color:var(--mi-ink); white-space:nowrap; }

/* ---- Map ---- */
.mi-map { height:440px; width:100%; border-radius:12px; overflow:hidden; border:1px solid var(--mi-line); }
.mi-map-note { font-size:.74rem; color:var(--mi-muted); margin-top:7px; }

/* ---- Answer panel ---- */
.mi-answer { background:#fff; border:1px solid var(--mi-line); border-left:3px solid var(--mi-accent);
             border-radius:12px; padding:15px 17px; margin-bottom:16px; font-size:.88rem; line-height:1.6; }
.mi-answer h3 { font-size:1rem; font-weight:700; margin:0 0 7px; }
.mi-answer ul { padding-left:1.15rem; margin-bottom:.5rem; }
.mi-ai-tag { font-size:.7rem; color:#be185d; background:#fdf2f8; border:1px solid #fbcfe8;
             border-radius:5px; padding:3px 8px; display:inline-block; margin-bottom:8px; }
.mi-cite { font-size:.72rem; color:var(--mi-muted); margin-top:9px; padding-top:8px;
           border-top:1px solid var(--mi-line); }

/* ---- Unsupported notice ---- */
.mi-unsupported { display:flex; gap:9px; align-items:flex-start; background:#fffbeb;
                  border:1px solid #fde68a; border-radius:10px; padding:11px 13px;
                  font-size:.83rem; color:#78350f; margin-bottom:12px; }
.mi-unsupported i { margin-top:2px; flex-shrink:0; }

.mi-notconn-row { display:flex; gap:8px; align-items:flex-start; font-size:.78rem;
                  color:var(--mi-muted); padding:6px 0; border-bottom:1px solid #f8fafc; }
.mi-notconn-row i { color:#94a3b8; margin-top:2px; }

/* ---- Provider table ---- */
.mi-src { width:100%; font-size:.79rem; border-collapse:collapse; }
.mi-src th { text-align:left; font-size:.69rem; text-transform:uppercase; letter-spacing:.04em;
             color:var(--mi-muted); font-weight:650; padding:5px 8px 5px 0; border-bottom:1px solid var(--mi-line); }
.mi-src td { padding:7px 8px 7px 0; border-bottom:1px solid #f5f7fa; color:#334155; }
.mi-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
.mi-dot.on  { background:#059669; }
.mi-dot.off { background:#cbd5e1; }

.mi-empty { text-align:center; padding:36px 16px; color:var(--mi-muted); }
.mi-empty i { font-size:2.2rem; opacity:.3; display:block; margin-bottom:8px; }

@media (max-width:575.98px) {
    .mi-hero { padding:16px; border-radius:12px; }
    .mi-hero h1 { font-size:1.22rem; }
    .mi-kpis { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
    .mi-map { height:300px; }
    .mi-bar-row { grid-template-columns:minmax(72px,34%) 1fr auto; }
}