/* ==========================================
   COASTAL SHIELD: MASTER STYLESHEET
   ========================================== */

/* --- 1. BASE STYLES & TYPOGRAPHY --- */
body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
    background-color: #f1f5f9; 
    color: #334155; 
    margin: 0; 
    padding: 40px; 
}

.container { 
    max-width: 1300px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 40px; 
}

/* Global view hiding — works at ALL viewport sizes */
/* ═══════════════════════════════════════════════════════════
   VIEW SWITCHING — body class controls which view is visible.
   Scoped to body[class*="on-"] so standalone pages (report.html,
   hub.html) are unaffected by these rules.
   ═══════════════════════════════════════════════════════════ */

/* 1. Hide every view by default — only when body has an on-* class */
body[class*="on-"] #view-dashboard,
body[class*="on-"] #view-outline,
body[class*="on-"] #view-builder,
body[class*="on-"] #view-report,
body[class*="on-"] #view-repair,
body[class*="on-"] #view-templates,
body[class*="on-"] #view-agents,
body[class*="on-"] #view-automations,
body[class*="on-"] #view-samples,
body[class*="on-"] #view-settings {
    display: none !important;
}

/* 2. Show only the active view */
body.on-dashboard   #view-dashboard   { display: block !important; }
body.on-outline     #view-outline     { display: grid  !important; }
body.on-builder     #view-builder     { display: grid  !important; }
body.on-report      #view-report      { display: flex  !important; }
body.on-repair      #view-repair      { display: flex  !important; }
body.on-templates   #view-templates   { display: grid  !important; }
body.on-agents      #view-agents      { display: grid  !important; }
body.on-automations #view-automations { display: grid  !important; }
body.on-samples     #view-samples     { display: grid  !important; }
body.on-settings    #view-settings    { display: grid  !important; }

/* Keep old data-hidden as belt-and-suspenders */
[data-hidden="1"] { display: none !important; }


h1 { 
    color: #183e61; 
    margin-top: 0; 
    font-family: 'Georgia', serif; 
    font-weight: normal; 
    font-size: 32px; 
    border-bottom: 2px solid #e2e8f0; 
    padding-bottom: 16px;
}

.panel { 
    background: #ffffff; 
    padding: 32px; 
    border-radius: 4px; 
    box-shadow: 0 10px 25px rgba(24,62,97,0.05); 
    border: 1px solid #e2e8f0; 
}

/* --- 2. STRUCTURAL GRIDS --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; }

/* --- 3. FORMS & INPUTS --- */
label { 
    display: block; 
    font-size: 11px; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    color: #64748b; 
    margin-bottom: 8px; 
    margin-top: 20px; 
}

input, select, textarea { 
    width: 100%; 
    padding: 14px; 
    border: 1px solid #cbd5e1; 
    border-radius: 2px; 
    font-family: inherit; 
    font-size: 14px; 
    box-sizing: border-box; 
    background-color: #f8fafc; 
}

input:focus, select:focus, textarea:focus { 
    outline: none; 
    border-color: #183e61; 
    background-color: #ffffff; 
}

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

.checkbox-label { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    cursor: pointer; 
    margin-top: 24px; 
    color: #183e61; 
    font-weight: 800; 
    font-size: 13px;
}

.checkbox-label input { 
    width: 18px; 
    height: 18px; 
    margin: 0; 
    cursor: pointer; 
}

/* --- 4. BUTTONS --- */
.btn-primary { 
    background-color: #183e61; 
    color: white; 
    border: none; 
    padding: 16px 24px; 
    border-radius: 2px; 
    font-size: 13px; 
    font-weight: 800; 
    cursor: pointer; 
    margin-top: 24px; 
    transition: background 0.2s; 
    width: 100%; 
    text-transform: uppercase; 
    letter-spacing: 2px;
}
.btn-primary:hover:not(:disabled) { background-color: #609cc3; }
.btn-primary:disabled { background-color: #94a3b8; cursor: not-allowed; }

.btn-secondary { 
    background-color: #e2e8f0; 
    color: #475569; 
    border: none; 
    padding: 12px 24px; 
    border-radius: 2px; 
    font-size: 11px; 
    font-weight: 800; 
    cursor: pointer; 
    transition: background 0.2s; 
    width: 100%; 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    margin-top: 12px;
}
.btn-secondary:hover { background-color: #cbd5e1; color: #1e293b; }

.btn-micro { 
    background-color: #f1f5f9; 
    color: #475569; 
    border: 1px solid #cbd5e1; 
    border-radius: 2px; 
    padding: 4px 10px; 
    font-size: 12px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: all 0.1s;
}
.btn-micro:hover { background-color: #e2e8f0; color: #183e61; border-color: #94a3b8;}

.quick-tap { 
    background-color: #e2e8f0; 
    color: #334155; 
    border: none; 
    border-radius: 99px; 
    padding: 4px 10px; 
    font-size: 10px; 
    font-weight: 800; 
    cursor: pointer; 
    transition: background 0.1s; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    white-space: nowrap; 
}
.quick-tap:hover { background-color: #cbd5e1; }

/* --- 5. BUILDER PREVIEW & CODE --- */
#preview-box { 
    padding: 0; 
    border: none; 
    background: transparent; 
    min-height: 200px; 
    margin-bottom: 32px;
}

#code-output { 
    background: #1e293b; 
    color: #a5b4fc; 
    font-family: 'Courier New', monospace; 
    font-size: 11px; 
    padding: 20px; 
    border-radius: 4px; 
    border: none; 
    word-break: break-all; 
    white-space: pre-wrap; 
    height: 180px; 
    overflow-y: auto;
}

/* --- 6. DRAG AND DROP STYLES --- */
.drag-over { 
    border: 2px dashed #10b981 !important; 
    background-color: #f0fdf4 !important; 
    transform: scale(1.02) !important; 
    opacity: 0.8; 
}

/* --- 7. PREMIUM DASHBOARD --- */
.dash-hero {
    background: linear-gradient(135deg, #183e61 0%, #2b5c85 100%);
    border-radius: 12px;
    padding: 48px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 20px 40px rgba(24,62,97,0.15);
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.dash-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    cursor: pointer;
}

.dash-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 25px -5px rgba(24,62,97,0.1), 0 10px 10px -5px rgba(24,62,97,0.04);
    border-color: #cbd5e1;
}

.dash-del-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f1f5f9;
    color: #94a3b8;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}
.dash-del-btn:hover { background: #fee2e2; color: #ef4444; transform: scale(1.1); }

.dash-badge {
    background: #f1f5f9;
    color: #475569;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 16px;
}

/* --- 8. FINAL CLIENT REPORT UI --- */
#view-report {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0; left: 0;
    background: #f1f5f9;
    z-index: 2000;
    overflow: hidden;
}

/* Hide the magic cover uploader in the final web report */
#view-report .cover-upload-btn { display: none !important; }

.report-layout-wrapper { 
    display: flex; 
    flex: 1; 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
}

.report-sidebar {
    width: 310px;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0,0,0,0.03);
    z-index: 40;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.report-main {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    padding: 40px 32px;
    background: #f8fafc;
    scroll-behavior: smooth;
}

.nav-item {
    padding: 16px 32px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid transparent;
    border-bottom: 1px solid #f8fafc;
    transition: all 0.2s ease-in-out;
    color: #475569;
}

.nav-item:hover { 
    background: #f1f5f9; 
    border-left-color: #183e61; 
    color: #183e61; 
    transform: translateX(6px); 
}

.nav-item span.nav-title { 
    font-size: 15px; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    gap: 16px; 
}

.report-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    padding: 12px 32px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    z-index: 100;
    flex-shrink: 0;
}

.top-bar-actions { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
}

/* Custom Sidebar Scrollbar */
#report-sidebar::-webkit-scrollbar { width: 4px; }
#report-sidebar::-webkit-scrollbar-track { background: transparent; }
#report-sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.3s; }
#report-sidebar:hover::-webkit-scrollbar-thumb { background: #cbd5e1; }

/* Mobile Floating Menu Pill (Hidden on Desktop) */
.mobile-menu-pill {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 24px;
    background: #183e61;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 25px rgba(24,62,97,0.4);
    cursor: pointer;
    z-index: 1999;
    align-items: center;
    gap: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-pill:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 15px 35px rgba(24,62,97,0.5); 
}


/* ==========================================
   9. ULTIMATE RESPONSIVE ENGINE
   ========================================== */
/* We removed the forced display:block so flex containers don't break! */
.mobile-only { display: none; }

/* Stop Apple iOS from zooming in on input taps */
input, select, textarea {
    font-size: 16px !important; 
    -webkit-appearance: none; 
    border-radius: 4px;
    box-sizing: border-box;
}

/* TABLET (iPads up to 1024px) */
@media (max-width: 1024px) {
    #view-builder { grid-template-columns: 1fr !important; }
    .grid-3, .grid-4 { grid-template-columns: 1fr 1fr !important; }
    #preview-box { margin-top: 16px; }
}

/* REPORT — Tablet & iPad (collapse sidebar above 768px, up to 1024px) */
@media (max-width: 1024px) {
    /* Hide the desktop top bar address — too cramped */
    .rtb-addr { display: none !important; }
    .rtb-sep  { display: none !important; }

    /* Collapse sidebar to a hidden drawer at tablet size — fixed so it doesn't scroll with page */
    .report-sidebar {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        height: 100vh !important;
        width: 80% !important;
        max-width: 340px !important;
        transform: translateX(-100%) !important;
        z-index: 2000 !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
    }
    .report-sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 100vw 0 0 rgba(15, 23, 42, 0.55), 20px 0 40px rgba(0,0,0,0.25) !important;
    }
    .report-layout-wrapper { position: relative !important; }

    /* Show the Sections pill on tablet */
    .mobile-menu-pill { display: flex !important; }

    /* Give the report main full width with comfortable padding */
    .report-main {
        padding: 40px 32px !important;
        width: 100% !important;
    }

    /* Tighten the top bar */
    .report-top-bar {
        padding: 0 20px !important;
        height: 52px !important;
    }
}

/* MOBILE (Phones & Z-Folds up to 768px) */
@media (max-width: 768px) {
    /* Kill desktop padding and prevent horizontal scrolling */
    body { 
        padding: 12px !important; 
        overflow-x: hidden !important; 
    }

    /* Any view flagged as hidden stays hidden — belt + suspenders */
    .container[data-hidden="1"] {
        display: none !important;
    }
    
    /* Show the active view as a single-column flex layout */
    .container:not([data-hidden="1"]) {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        gap: 16px !important;
    }
    
    /* Prevent panels from stretching off screen */
    .panel {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        min-width: 0 !important; 
        overflow-wrap: break-word !important; 
    }
    
    h1 { 
        font-size: 22px !important; 
        text-align: center !important; 
        padding-bottom: 12px !important; 
    }

    .dash-hero { 
        padding: 32px 20px; 
        text-align: center; 
    }
    
    /* Collapse grids */
    .grid-2, .grid-3, .grid-4 { 
        grid-template-columns: 1fr !important; 
        gap: 12px !important; 
    }
    #standard-inputs .grid-2[style*="1fr auto"] { 
        grid-template-columns: 1fr auto !important; 
    }
    
    /* Stack top headers */
    #view-builder > .panel:first-child { 
        flex-direction: column !important; 
        align-items: stretch !important; 
        gap: 12px; 
    }
    #view-builder > .panel:first-child > div { 
        margin: 0 !important; 
        max-width: 100% !important; 
    }
    
    /* Touch friendly Quick Taps */
    .quick-tap { 
        flex: 1 1 30%; 
        text-align: center; 
        padding: 10px 4px; 
    }
    
    /* Dashboard Cards — section grid handled by sg-* rules below */
    #section-grid { 
        display: grid !important; 
        grid-template-columns: 1fr !important;
        width: 100% !important; 
        gap: 8px !important; 
    }
    
    /* Hide overflowing long words */
    #preview-box, #section-cards-output { 
        overflow-x: hidden; 
        width: 100%; 
        box-sizing: border-box; 
    }
    
    /* Resize Modals */
    #new-report-modal > div, #annotation-modal > div { 
        width: 95% !important; 
        padding: 20px !important; 
        box-sizing: border-box; 
    }
    
    /* FINAL REPORT MOBILE OVERRIDES */
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
    
    /* Reveal the mobile menu pill */
    .mobile-menu-pill { display: flex !important; }
    
    /* Full-Screen Drawer Menu — fixed so it doesn't scroll with the page */
    .report-sidebar {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        height: 100vh !important;
        width: 85% !important;
        max-width: 360px !important;
        transform: translateX(-100%) !important;
        z-index: 2000 !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-y: auto !important;
    }

    .report-sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 100vw 0 0 rgba(15, 23, 42, 0.55), 20px 0 40px rgba(0,0,0,0.3) !important; 
    }
    
    /* On mobile, report-main is full-width and the page body scrolls */
    .report-main { 
        padding: 16px 4px !important;
        width: 100% !important;
        height: auto !important;
        overflow-y: visible !important;
    }
    /* KEY FIX: remove fixed positioning so the body scroll works on mobile.
       position:fixed + height:auto = element expands forever, nothing scrolls. */
    #view-report {
        position: relative !important;
        height: auto !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
    /* Wrapper must also be auto-height so it doesn't clip the content */
    .report-layout-wrapper {
        height: auto !important;
        overflow: visible !important;
    }
    /* Report page: kill body padding so cards get full width */
    body:has(#view-report:not([data-hidden="1"])) {
        padding: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    body {
        overflow: auto !important;
    }
}

/* ==========================================
   10. PDF DELIVERY ENGINE (PRINT STYLES)
   ========================================== */
@media print {
    @page { margin: 0.6in; }
    body { 
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important; 
        background: white !important;
    }
    
    /* Hide all web app buttons and toggles */
    .report-top-bar, .report-sidebar, .mobile-menu-pill, #defects-toggle, .btn-secondary, .btn-primary, .cover-upload-btn, #theme-toggle { 
        display: none !important; 
    }
    body > h1 { display: none !important; }
    
    /* Expand the report pane for printing */
    #view-report, .report-layout-wrapper, .report-main { 
        display: block !important; 
        position: relative !important; 
        height: auto !important; 
        padding: 0 !important; 
        width: 100% !important; 
        max-width: 100% !important; 
        overflow: visible !important; 
        background: white !important;
    }
    
    .print-only-header { display: block !important; }
    .print-page-break { page-break-before: always !important; break-before: page !important; }
    div[style*="page-break-inside: avoid"] { page-break-inside: avoid !important; break-inside: avoid !important; }
}

.print-only-header { display: none; }


/* ==========================================
   11. AMOLED DARK MODE ENGINE
   ========================================== */
body.dark-mode { 
    background-color: #0f172a !important; 
    color: #e2e8f0 !important; 
}

/* Text */
body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode label, 
body.dark-mode .nav-title {
    color: #f8fafc !important;
}

/* Base Panels */
body.dark-mode .panel, 
body.dark-mode .report-sidebar, 
body.dark-mode .report-main {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
}

/* Dashboard Cards */
body.dark-mode .dash-card { 
    background-color: #1e293b !important; 
    border-color: #334155 !important; 
}
body.dark-mode .dash-card:hover { 
    background-color: #27354f !important; 
    border-color: #475569 !important; 
}
body.dark-mode .dash-badge { 
    background-color: #0f172a !important; 
    color: #94a3b8 !important; 
}

/* Inputs */
body.dark-mode input, 
body.dark-mode select, 
body.dark-mode textarea {
    background-color: #0f172a !important; 
    color: #f8fafc !important; 
    border-color: #334155 !important;
}
body.dark-mode input:focus, 
body.dark-mode select:focus, 
body.dark-mode textarea:focus {
    border-color: #10b981 !important; 
    background-color: #1e293b !important;
}

/* Secondary Buttons */
body.dark-mode .btn-secondary, 
body.dark-mode .btn-micro, 
body.dark-mode .quick-tap {
    background-color: #334155 !important; 
    color: #cbd5e1 !important; 
    border-color: #475569 !important;
}
body.dark-mode .btn-secondary:hover, 
body.dark-mode .btn-micro:hover, 
body.dark-mode .quick-tap:hover {
    background-color: #475569 !important; 
    color: #f8fafc !important;
}

/* Mobile Pill */
body.dark-mode .mobile-menu-pill { 
    background-color: #334155; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.6); 
}

/* Component Containers */
body.dark-mode #dashboard-drafts-list > div, 
body.dark-mode #repair-plan-inputs, 
body.dark-mode #diagram-input-container > div > div, 
body.dark-mode #section-grid > div, 
body.dark-mode #fuzzy-results {
    background-color: #1e293b !important; 
    border-color: #334155 !important;
}
body.dark-mode #fuzzy-results > div:hover { 
    background-color: #334155 !important; 
}
body.dark-mode #view-builder > .panel:first-child { 
    background-color: #0f172a !important; 
    border-color: #334155 !important; 
}
body.dark-mode #add-section-container { 
    border-top-color: #334155 !important; 
}

/* Component Pills */
body.dark-mode button[style*="background: #f8fafc"] { 
    background-color: #0f172a !important; 
    border-color: #334155 !important; 
    color: #94a3b8 !important; 
}
body.dark-mode button[style*="background: #dcfce3"] { 
    background-color: #064e3b !important; 
    border-color: #047857 !important; 
    color: #34d399 !important; 
}

/* ==========================================
   12. FORCE INLINE HTML CARDS INTO DARK MODE
   ========================================== */

/* 1. Convert White/Light Grey Backgrounds to Dark Slate */
body.dark-mode [style*="background-color: #ffffff"],
body.dark-mode [style*="background-color: #f8fafc"],
body.dark-mode [style*="background: #f8fafc"] {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* 2. Convert Dark Grey/Slate Text to Light Grey */
body.dark-mode [style*="color: #334155"],
body.dark-mode [style*="color: #475569"],
body.dark-mode [style*="color:#64748b"],
body.dark-mode [style*="color: #64748b"] {
    color: #cbd5e1 !important;
}

/* 3. Convert Navy Blue Headings to a Readable Light Blue */
body.dark-mode [style*="color: #183e61"],
body.dark-mode [style*="color:#183e61"] {
    color: #93c5fd !important;
}

/* 4. Adjust Tinted Defect Boxes (Green, Orange, Red) */
body.dark-mode [style*="background-color: #f0fdf4"], 
body.dark-mode [style*="background-color: #f0f8ff"] {
    background-color: #064e3b !important;
    border-color: #047857 !important;
}
body.dark-mode [style*="background-color: #fffaf5"] {
    background-color: #451a03 !important;
    border-color: #78350f !important;
}
body.dark-mode [style*="background-color: #fff5f5"],
body.dark-mode [style*="background-color: #fef2f2"] {
    background-color: #4c0519 !important;
    border-color: #881337 !important;
}

/* 5. Convert Defect Text Colors */
body.dark-mode [style*="color:#065f46"], body.dark-mode [style*="color: #065f46"],
body.dark-mode [style*="color:#166534"], body.dark-mode [style*="color: #166534"],
body.dark-mode [style*="color:#047857"], body.dark-mode [style*="color: #047857"] {
    color: #a7f3d0 !important;
}
body.dark-mode [style*="color:#e65c00"], body.dark-mode [style*="color: #e65c00"] {
    color: #fdba74 !important;
}
body.dark-mode [style*="color:#9f1239"], body.dark-mode [style*="color: #9f1239"],
body.dark-mode [style*="color:#be123c"], body.dark-mode [style*="color: #be123c"] {
    color: #fecdd3 !important;
}

/* 6. Soften harsh borders */
body.dark-mode [style*="border: 1px solid #cbd5e1"],
body.dark-mode [style*="border-bottom: 2px solid #e2e8f0"],
body.dark-mode [style*="border: 1px solid #e2e8f0"],
body.dark-mode [style*="border-bottom: 1px solid #e2e8f0"] {
    border-color: #334155 !important;
}
/* =====================================================
   TOOLBOX — append to the bottom of styles.css
   ===================================================== */

/* Pill hover */
#toolbox-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(16,185,129,0.5);
}

/* Dark mode: flip the pill to match */
body.dark-mode #toolbox-pill {
    background: #059669;
    border-color: #047857;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

/* Dark mode: panel */
body.dark-mode #toolbox-panel {
    background: #1e293b !important;
}
body.dark-mode #toolbox-panel h3,
body.dark-mode #toolbox-panel h4 {
    color: #93c5fd !important;
}
body.dark-mode #toolbox-panel p,
body.dark-mode #toolbox-panel label {
    color: #94a3b8 !important;
}

/* Pulsing robot animation for loading state */
@keyframes tb-pulse {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%       { transform: scale(1.1); opacity: 0.7; }
}

/* ── Chat starter chips ── */
.ask-chip {
    text-align: left;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.ask-chip:hover { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; }

/* ── Typing dots ── */
@keyframes tb-bounce {
    0%, 80%, 100% { transform: translateY(0);    opacity: 0.4; }
    40%            { transform: translateY(-5px); opacity: 1;   }
}

/* ── Send button hover ── */
#ask-send-btn:hover:not(:disabled) { background: #4c1d95; }
#ask-send-btn:disabled { background: #a78bfa; cursor: default; }
/* ── Hide toolbox + theme toggle in print ── */
@media print {
    #toolbox-pill, #toolbox-panel, #toolbox-backdrop, #theme-toggle, #publish-btn {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   SECTION GRID v3 — Compact list with progress rings
   ══════════════════════════════════════════════════════════════ */

/* Desktop: 2-column grid */
#section-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

/* Mobile: single column list */
@media (max-width: 768px) {
    #section-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
}

/* Card container — compact row */
.sg-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #183e61;
    border-radius: 14px;
    padding: 0;
    overflow: visible;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    position: relative;
    -webkit-tap-highlight-color: rgba(0,0,0,0.04);
}
.sg-card:active { transform: scale(0.99); }
.sg-card-done   { border-left-color: #10b981; }
.sg-card-progress { border-left-color: #609cc3; }
.sg-card-na     { border-left-color: #94a3b8; opacity: 0.55; }

/* Main row — everything in one line */
.sg-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 14px 16px 16px;
    min-height: 68px;
    border-radius: 14px 14px 0 0;
}
.sg-icon {
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    cursor: pointer;
}
.sg-icon-done { background: #dcfce3; }
.sg-icon-na   { background: #f1f5f9; }
.sg-info { flex: 1; min-width: 0; }
.sg-name {
    font-family: Georgia, serif;
    font-size: 15px;
    color: #183e61;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
}
.sg-count {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
}
.sg-count-active { color: #10b981; }
.sg-cards-count {
    font-size: 10px;
    color: #cbd5e1;
}

/* Defect badges inline */
.sg-defect {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 99px;
    color: white;
}
.sg-defect-material { background: #b91c1c; }
.sg-defect-major { background: #e65c00; }
.sg-defect-minor { background: #609cc3; }
.sg-defect-clear { background: none; color: #10b981; font-size: 10px; }

/* Right side: ring + status + overflow */
.sg-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Progress ring */
.sg-progress-ring {
    width: 42px;
    height: 42px;
    position: relative;
    flex-shrink: 0;
}
.sg-ring-svg {
    width: 100%;
    height: 100%;
}
.sg-ring-bg {
    stroke: #f1f5f9;
}
.sg-ring-fill {
    stroke: #609cc3;
    transition: stroke-dasharray 0.5s;
}
.sg-ring-done {
    stroke: #10b981;
}
.sg-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #475569;
}

/* Status button — hide "Not started" on desktop (ring already shows 0) */
.sg-status {
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 28px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0.04);
}
.sg-status-pending {
    background: transparent;
    color: transparent;
    border: none;
    padding: 0;
    min-height: 0;
    width: 0;
    overflow: hidden;
}
.sg-status-done    { background: #dcfce3; color: #166534; }
.sg-status-na      { background: #f1f5f9; color: #94a3b8; }

/* Overflow menu trigger */
.sg-overflow {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0.04);
}
.sg-overflow:active { background: #f1f5f9; }

/* Overflow popup */
.sg-menu-popup {
    position: absolute;
    top: 52px;
    right: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.14);
    padding: 4px;
    z-index: 100;
    animation: sgPopIn 0.15s ease;
    min-width: 160px;
}
@keyframes sgPopIn { from { opacity: 0; transform: translateY(-4px); } }
.sg-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    min-height: 44px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    transition: background 0.12s;
}
.sg-menu-item:active { background: #f1f5f9; }
.sg-menu-danger { color: #dc2626; }
.sg-menu-danger:active { background: #fef2f2; }

/* Expand trigger */
.sg-expand-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-top: 1px solid #f1f5f9;
    font-size: 11px;
    font-weight: 600;
    color: #b0b8c4;
    cursor: pointer;
    transition: background 0.12s;
    -webkit-tap-highlight-color: rgba(0,0,0,0.04);
}
.sg-expand-trigger:active { background: #f8fafc; }
.sg-expand-arrow {
    font-size: 10px;
    color: #cbd5e1;
}
.sg-mode-badge {
    margin-left: auto;
    font-size: 13px;
    opacity: 0.4;
}

/* Details panel (components + mode bar) */
.sg-details {
    padding: 12px 16px 16px;
    border-top: 1px solid #f1f5f9;
}
.sg-details .section-mode-bar {
    margin-bottom: 12px;
}

/* Component pills */
.sg-pills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sg-pill-wrap {
    position: relative;
    flex: 1 1 auto;
}
.sg-pill {
    width: 100%;
    padding: 10px 28px 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    line-height: 1.3;
    transition: background 0.12s;
    min-height: 44px;
    -webkit-tap-highlight-color: rgba(0,0,0,0.04);
}
.sg-pill:active { background: #f1f5f9; }
.sg-pill-done {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}
.sg-pill-done:active { background: #dcfce3; }
.sg-pill-x {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

/* Removed pills */
.sg-removed-wrap {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}
.sg-removed-label {
    font-size: 9px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.sg-removed-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.sg-pill-removed {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecdd3;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: line-through;
    font-family: inherit;
    min-height: 32px;
}

/* ── Mobile: ultra-compact rows ── */
@media (max-width: 768px) {
    .sg-card { border-radius: 10px; border-left-width: 4px; }
    .sg-row { padding: 14px 10px 14px 14px; gap: 10px; min-height: unset; }
    .sg-icon { width: 36px; height: 36px; font-size: 17px; border-radius: 8px; }
    .sg-name { font-size: 15px; white-space: normal; }
    .sg-count { font-size: 12px; font-weight: 800; }
    .sg-cards-count { display: none; }
    .sg-status { display: none; }
    .sg-right { gap: 4px; }
    .sg-overflow { width: 28px; height: 28px; font-size: 16px; }
    .sg-progress-ring { display: none; }
    .sg-expand-trigger { display: none; }
    .sg-details { padding: 10px 14px 14px; }
}

/* ── Dark mode — Section grid v3 ── */
body.dark-mode .sg-card {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .sg-card:active { transform: scale(0.99); }
body.dark-mode .sg-card-done   { border-left-color: #10b981; }
body.dark-mode .sg-card-progress { border-left-color: #609cc3; }
body.dark-mode .sg-card-na     { border-left-color: #64748b; }
body.dark-mode .sg-icon { background: #334155; }
body.dark-mode .sg-icon-done { background: #064e3b; }
body.dark-mode .sg-icon-na { background: #334155; }
body.dark-mode .sg-name { color: #f8fafc; }
body.dark-mode .sg-count { color: #64748b; }
body.dark-mode .sg-count-active { color: #10b981; }
body.dark-mode .sg-cards-count { color: #475569; }
body.dark-mode .sg-ring-bg { stroke: #334155; }
body.dark-mode .sg-ring-text { color: #cbd5e1; }
body.dark-mode .sg-status-pending { background: transparent; color: transparent; border: none; }
body.dark-mode .sg-status-done { background: #064e3b; color: #34d399; }
body.dark-mode .sg-status-na { background: #1e293b; color: #64748b; }
body.dark-mode .sg-overflow { color: #64748b; }
body.dark-mode .sg-overflow:active { background: #334155; }
body.dark-mode .sg-menu-popup { background: #1e293b; border-color: #475569; box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
body.dark-mode .sg-menu-item { color: #cbd5e1; }
body.dark-mode .sg-menu-item:active { background: #334155; }
body.dark-mode .sg-menu-danger { color: #fca5a5; }
body.dark-mode .sg-menu-danger:active { background: #7f1d1d; }
body.dark-mode .sg-expand-trigger { border-top-color: #334155; color: #64748b; }
body.dark-mode .sg-expand-trigger:active { background: #334155; }
body.dark-mode .sg-expand-arrow { color: #475569; }
body.dark-mode .sg-details { border-top-color: #334155; }
body.dark-mode .sg-pill { background: #0f172a; border-color: #475569; color: #cbd5e1; }
body.dark-mode .sg-pill:active { background: #334155; }
body.dark-mode .sg-pill-done { background: #064e3b; border-color: #047857; color: #34d399; }
body.dark-mode .sg-pill-done:active { background: #065f46; }
body.dark-mode .sg-pill-x { background: #334155; border-color: #475569; color: #94a3b8; }
body.dark-mode .sg-removed-wrap { border-top-color: #334155; }
body.dark-mode .sg-removed-label { color: #64748b; }
body.dark-mode .sg-pill-removed { background: #1e293b; border-color: #475569; color: #ef4444; }

/* Section mode bar dark */
body.dark-mode .section-mode-bar { border-color: #475569 !important; }
body.dark-mode .section-mode-btn {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
}
body.dark-mode .section-mode-btn.active-auto,
body.dark-mode .section-mode-btn.active-manual,
body.dark-mode .section-mode-btn.active-walkthrough {
    background: #183e61 !important;
    border-color: #609cc3 !important;
    color: #e2e8f0 !important;
}

/* Add section container */
body.dark-mode #add-section-container {
    border-top-color: #334155 !important;
}
/* ════════════════════════════════════════════
   MOBILE EDGE TOOLBAR
   ════════════════════════════════════════════ */

/* The small tab on the right edge */
#mobile-toolbar-tab {
    display: none; /* Hidden on desktop */
    position: fixed;
    right: 0;
    bottom: 50%;
    transform: translateY(50%);
    background: #183e61;
    color: white;
    border: 1px solid #2b5c85;
    border-right: none;
    border-radius: 12px 0 0 12px;
    padding: 12px 8px;
    font-size: 16px;
    cursor: pointer;
    z-index: 9998;
    box-shadow: -4px 0 12px rgba(24,62,97,0.15);
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}
#mobile-toolbar-tab:active {
    background: #2b5c85;
}

/* The drawer that slides out */
#mobile-toolbar-drawer {
    display: none; /* Hidden on desktop */
    position: fixed;
    right: 0;
    bottom: 50%;
    transform: translateY(50%) translateX(100%);
    background: white;
    border: 1px solid #e2e8f0;
    border-right: none;
    border-radius: 16px 0 0 16px;
    padding: 12px;
    flex-direction: column;
    gap: 8px;
    z-index: 9999;
    box-shadow: -8px 0 24px rgba(0,0,0,0.12);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 200px;
}
#mobile-toolbar-drawer.mobile-toolbar-open {
    transform: translateY(50%) translateX(0);
}
#mobile-toolbar-drawer.mobile-toolbar-closed {
    transform: translateY(50%) translateX(100%);
}

/* Dark mode */
body.dark-mode #mobile-toolbar-tab {
    background: #334155;
    border-color: #475569;
}
body.dark-mode #mobile-toolbar-drawer {
    background: #1e293b;
    border-color: #334155;
    box-shadow: -8px 0 24px rgba(0,0,0,0.4);
}

/* MOBILE: show edge drawer, hide floating pills */
@media (max-width: 768px) {
    #mobile-toolbar-tab {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #mobile-toolbar-drawer {
        display: flex;
    }

    /* Hide the original floating buttons on mobile */
    #toolbox-pill {
        display: none !important;
    }
    #theme-toggle {
        display: none !important;
    }
}
/* ── Section Mode Bar (Manual / Auto Inspect / WalkThrough) ── */
/* These must be in styles.css — NOT dynamically injected —     */
/* so they're available on initial page load                     */
.section-mode-bar {
    margin-top:12px;padding-top:12px;
    border-top:1px solid #f1f5f9;
    display:flex;gap:0;border-radius:8px;overflow:hidden;
    border:1px solid #e2e8f0;
}
.section-mode-btn {
    flex:1;padding:9px 4px;border:none;
    background:#f8fafc;color:#94a3b8;
    font-size:9px;font-weight:800;cursor:pointer;
    font-family:inherit;text-transform:uppercase;
    letter-spacing:0.5px;transition:all 0.15s;
    display:flex;flex-direction:column;align-items:center;gap:3px;
    border-right:1px solid #e2e8f0;line-height:1.2;
}
.section-mode-btn:last-child { border-right:none; }
.section-mode-btn.active-manual {
    background:#183e61;color:white;
}
.section-mode-btn.active-auto {
    background:linear-gradient(135deg,#0369a1,#0284c7);color:white;
}
.section-mode-btn.active-walkthrough {
    background:linear-gradient(135deg,#7c3aed,#6d28d9);color:white;
}
.section-mode-btn:hover:not(.active-manual):not(.active-auto):not(.active-walkthrough) {
    background:#f1f5f9;color:#475569;
}
.section-mode-icon { font-size:14px; }
/* ══════════════════════════════════════════════════════════════
   DASHBOARD CARD v2 — Mobile-first redesign
   Bigger tap targets (44px min), status dots, overflow menu
   ══════════════════════════════════════════════════════════════ */

.dc-v2 {
    padding: 0 !important;
    overflow: hidden;
    border-left: 4px solid #cbd5e1;
    min-height: auto !important;
}
.dc-v2.dc-published { border-left-color: #10b981; }
.dc-v2.dc-draft     { border-left-color: #f59e0b; }
.dc-v2.dc-expired   { border-left-color: #ef4444; }

/* ── Header ── */
.dc-header {
    padding: 24px 24px 12px;
}
.dc-address {
    margin: 0 0 8px;
    color: #183e61;
    font-size: 20px;
    font-family: Georgia, serif;
    line-height: 1.3;
    padding-right: 36px;
    font-weight: 600;
}
.dc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    align-items: center;
}
.dc-client { font-weight: 600; color: #475569; }
.dc-sep { color: #cbd5e1; }
.dc-type-pill {
    background: var(--pill-bg, #f0fdf4);
    color: var(--pill-fg, #065f46);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 10px;
    border-radius: 99px;
}
.dc-email {
    color: #94a3b8;
    font-size: 12px;
    margin-top: 4px;
}

/* ── Status Dots ── */
.dc-status-row {
    padding: 0 24px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
}
.dc-dots-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.dc-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.dc-dot-green  { background: #10b981; box-shadow: 0 0 0 2px #d1fae5; }
.dc-dot-amber  { background: #f59e0b; box-shadow: 0 0 0 2px #fef3c7; }
.dc-dot-red    { background: #ef4444; box-shadow: 0 0 0 2px #fee2e2; }
.dc-dot-blue   { background: #3b82f6; box-shadow: 0 0 0 2px #dbeafe; }
.dc-dot-gray   { background: #cbd5e1; box-shadow: 0 0 0 2px #f1f5f9; }
.dc-dot-loading {
    width: 10px; height: 10px;
    background: #e2e8f0;
    animation: dcPulse 1.2s infinite;
}
@keyframes dcPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
.dc-status-legend {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}

/* ── Progress ── */
.dc-progress {
    padding: 0 24px 16px;
}
.dc-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.dc-progress-pct {
    color: #183e61;
    font-size: 13px;
    font-weight: 800;
}
.dc-progress-track {
    width: 100%;
    background: #f1f5f9;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}
.dc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #609cc3, #183e61);
    border-radius: 4px;
    transition: width 0.5s;
}

/* ── Primary Actions (4 big buttons) ── */
.dc-actions-primary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-top: 1px solid #f1f5f9;
}
.dc-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 10px 4px;
    background: none;
    border: none;
    border-right: 1px solid #f1f5f9;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0.04);
}
.dc-action:last-child { border-right: none; }
.dc-action:active { background: #f1f5f9; }
@media (hover: hover) {
    .dc-action:hover { background: #f8fafc; }
}
.dc-action-icon {
    font-size: 20px;
    line-height: 1;
}
.dc-action-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #475569;
}

/* ── More button ── */
.dc-actions-more-wrap {
    position: relative;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: center;
}
.dc-more-btn {
    width: 100%;
    padding: 12px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.dc-more-btn:active { background: #f8fafc; color: #64748b; }
@media (hover: hover) {
    .dc-more-btn:hover { background: #f8fafc; color: #64748b; }
}

/* ── More popup ── */
.dc-more-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
    padding: 6px;
    display: flex;
    gap: 2px;
    z-index: 100;
    animation: dcPopIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}
@keyframes dcPopIn {
    from { opacity: 0; transform: translateX(-50%) scale(0.9) translateY(6px); }
    to { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}
.dc-more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 14px;
    min-width: 52px;
    min-height: 52px;
    background: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: background 0.12s;
}
.dc-more-item:active { background: #f1f5f9; }
@media (hover: hover) {
    .dc-more-item:hover { background: #f1f5f9; }
}
.dc-more-icon {
    font-size: 18px;
    line-height: 1;
}

/* ── Dark mode overrides ── */
body.dark-mode .dc-v2 { border-left-color: #475569; }
body.dark-mode .dc-v2.dc-published { border-left-color: #10b981; }
body.dark-mode .dc-v2.dc-draft     { border-left-color: #f59e0b; }
body.dark-mode .dc-v2.dc-expired   { border-left-color: #ef4444; }
body.dark-mode .dc-address { color: #f8fafc; }
body.dark-mode .dc-meta { color: #94a3b8; }
body.dark-mode .dc-client { color: #cbd5e1; }
body.dark-mode .dc-email { color: #64748b; }
body.dark-mode .dc-dot-green  { box-shadow: 0 0 0 2px #064e3b; }
body.dark-mode .dc-dot-amber  { box-shadow: 0 0 0 2px #78350f; }
body.dark-mode .dc-dot-red    { box-shadow: 0 0 0 2px #7f1d1d; }
body.dark-mode .dc-dot-blue   { box-shadow: 0 0 0 2px #1e3a5f; }
body.dark-mode .dc-dot-gray   { box-shadow: 0 0 0 2px #334155; }
body.dark-mode .dc-dot-loading { background: #475569; }
body.dark-mode .dc-status-legend { color: #64748b; }
body.dark-mode .dc-progress-pct { color: #e2e8f0; }
body.dark-mode .dc-progress-track { background: #334155; }
body.dark-mode .dc-actions-primary { border-top-color: #334155; }
body.dark-mode .dc-action { border-right-color: #334155; }
body.dark-mode .dc-action:active { background: #334155; }
body.dark-mode .dc-action-label { color: #94a3b8; }
body.dark-mode .dc-actions-more-wrap { border-top-color: #334155; }
body.dark-mode .dc-more-btn { color: #64748b; }
body.dark-mode .dc-more-btn:active { background: #334155; color: #cbd5e1; }
body.dark-mode .dc-more-popup {
    background: #1e293b;
    border-color: #475569;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
body.dark-mode .dc-more-item { color: #cbd5e1; }
body.dark-mode .dc-more-item:active { background: #334155; }

/* ══════════════════════════════════════════════════════════════
   DASHBOARD TOP BAR + HERO v2 + NAVIGATION GRID
   Replaces old h1 + dash-hero button soup
   ══════════════════════════════════════════════════════════════ */

/* ── Branded Top Bar ── */
.dash-topbar {
    background: #0f2a44;
    margin: -40px -40px 0;
    padding: 0 40px;
    position: sticky;
    top: 0;
    z-index: 500;
}
.dash-topbar-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
}
.dash-topbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dash-topbar-logo {
    width: 32px;
    height: 35px;
    flex-shrink: 0;
}
.dash-topbar-name {
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: normal;
    color: #ffffff;
    letter-spacing: 0.3px;
}
/* Move logout into the top bar — override its default button styles */
.dash-topbar .btn-secondary,
.dash-topbar button[onclick*="logout"],
#auth-logout-slot button {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.65) !important;
    border-color: rgba(255,255,255,0.12) !important;
    font-size: 11px !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    margin: 0 !important;
    width: auto !important;
}

/* Hide the old h1 when top bar is present */
body.on-dashboard > h1 { display: none; }

/* ── Hero v2 ── */
.dash-hero-v2 {
    background: linear-gradient(135deg, #0f2a44 0%, #183e61 40%, #2b5c85 100%) !important;
    padding: 36px 28px 32px !important;
    margin-bottom: 0 !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 8px 32px rgba(15,42,68,0.2) !important;
    display: block !important;
}
.dash-hero-content {
    position: relative;
    z-index: 2;
}
.dash-hero-greeting {
    font-family: Georgia, serif !important;
    font-size: 28px !important;
    font-weight: normal !important;
    color: #ffffff !important;
    margin: 0 0 6px !important;
    line-height: 1.2;
}
.dash-hero-sub {
    color: #94a3b8 !important;
    font-size: 14px !important;
    margin: 0 0 20px !important;
    line-height: 1.4;
}
.dash-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #10b981;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    box-shadow: 0 4px 16px rgba(16,185,129,0.3);
    width: 100%;
    justify-content: center;
}
.dash-hero-cta:active {
    transform: scale(0.98);
    background: #059669;
}
.dash-hero-cta-plus {
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
}

/* ── Navigation Grid ── */
.dash-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 16px 0 8px;
}
.dash-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 4px;
    min-height: 64px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s, transform 0.1s;
    position: relative;
    -webkit-tap-highlight-color: rgba(0,0,0,0.04);
}
.dash-nav-item:active { transform: scale(0.97); background: #f8fafc; }
@media (hover: hover) {
    .dash-nav-item:hover { background: #f8fafc; border-color: #cbd5e1; }
}
.dash-nav-icon {
    font-size: 20px;
    line-height: 1;
}
.dash-nav-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #475569;
}
.dash-nav-comms {
    border-color: #e0f2fe;
    background: #f0f9ff;
}
.dash-nav-comms:active { background: #e0f2fe; }
.dash-nav-subtle {
    background: #f8fafc;
    border-color: #f1f5f9;
}
.dash-nav-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Secondary toolbar ── */
.dash-secondary-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.dash-sec-btn {
    flex: 1;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s;
}
.dash-sec-btn:active { background: #f1f5f9; }

/* ── Dark mode for new layout ── */
body.dark-mode .dash-topbar { background: #0a1929; }
body.dark-mode .dash-topbar-name { color: #e2e8f0; }

body.dark-mode .dash-hero-v2 {
    background: linear-gradient(135deg, #0a1929 0%, #0f2a44 40%, #183e61 100%) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
body.dark-mode .dash-hero-greeting { color: #f8fafc !important; }
body.dark-mode .dash-hero-sub { color: #64748b !important; }

body.dark-mode .dash-nav-item {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .dash-nav-item:active { background: #334155; }
body.dark-mode .dash-nav-label { color: #94a3b8; }
body.dark-mode .dash-nav-comms {
    background: #1e293b;
    border-color: #1e3a5f;
}
body.dark-mode .dash-nav-subtle {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .dash-sec-btn {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
body.dark-mode .dash-sec-btn:active { background: #334155; }

/* ── Mobile overrides ── */
@media (max-width: 768px) {
    .dash-topbar {
        margin: -12px -12px 0;
        padding: 0 16px;
    }
    .dash-topbar-inner { height: 50px; }
    .dash-topbar-logo { width: 28px; height: 31px; }
    .dash-topbar-name { font-size: 16px; }

    .dash-hero-v2 {
        border-radius: 0 0 12px 12px !important;
        padding: 28px 20px 24px !important;
    }
    .dash-hero-greeting { font-size: 24px !important; }
    .dash-hero-sub { font-size: 13px !important; }
    .dash-hero-cta { padding: 13px 24px; font-size: 14px; }

    .dash-nav-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 6px; }
    .dash-nav-item { min-height: 56px; padding: 10px 2px; border-radius: 10px; }
    .dash-nav-icon { font-size: 18px; }
    .dash-nav-label { font-size: 9px; }
}

/* ══════════════════════════════════════════════════════════════
   ACTION ITEMS + SCHEDULE — class-based (replaces inline styles)
   ══════════════════════════════════════════════════════════════ */

/* Action Items card */
.dc-action-items {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 16px 20px;
    margin-bottom: 4px;
}
.dc-ai-title {
    font-size: 13px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 10px;
}
.dc-ai-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 99px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid;
    transition: background 0.15s;
}
.dc-ai-warn    { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.dc-ai-caution { background: #fefce8; border-color: #fde68a; color: #a16207; }
.dc-ai-neutral { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
.dc-ai-danger  { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.dc-ai-pill:active { filter: brightness(0.95); }

/* Schedule items */
/* Schedule wrapper */
.dc-schedule-wrap {
    background: linear-gradient(135deg, #183e61, #1e4a7a);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 4px;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
}

/* Schedule items */
.dc-schedule-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: border-color 0.15s;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.dc-schedule-item:active { border-color: #183e61; }
.dc-schedule-time {
    background: #183e61;
    color: white;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    flex-shrink: 0;
}
.dc-schedule-addr {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.dc-schedule-client {
    font-size: 11px;
    color: #64748b;
}

/* ── Dark mode — Action Items + Schedule ── */
body.dark-mode .dc-action-items {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .dc-ai-title {
    color: #f8fafc;
}
body.dark-mode .dc-ai-pill {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
body.dark-mode .dc-ai-warn,
body.dark-mode .dc-ai-caution,
body.dark-mode .dc-ai-neutral,
body.dark-mode .dc-ai-danger {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}
body.dark-mode .dc-schedule-item {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .dc-schedule-item:active { border-color: #609cc3; }
body.dark-mode .dc-schedule-time {
    background: #0f172a;
}
body.dark-mode .dc-schedule-addr {
    color: #f8fafc;
}
body.dark-mode .dc-schedule-client {
    color: #94a3b8;
}

/* ── Dark mode — Search bar + heading (inline style overrides) ── */
body.dark-mode #view-dashboard > div[style*="border-bottom"] {
    border-bottom-color: #334155 !important;
}
body.dark-mode #view-dashboard h3[style*="color:#1e293b"] {
    color: #f8fafc !important;
}
body.dark-mode #dash-search {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
body.dark-mode #dash-filter {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* ── Dark mode — Card delete button ── */
body.dark-mode .dash-del-btn {
    background: #334155 !important;
    color: #94a3b8 !important;
}
body.dark-mode .dash-del-btn:hover {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
}

/* ══════════════════════════════════════════════════════════════
   DAILY PLANNER — timeline modal with drive time + stats
   ══════════════════════════════════════════════════════════════ */

/* Open button inside schedule card */
.dp-open-btn {
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    min-height: 44px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0.04);
    touch-action: manipulation;
}
.dp-open-btn:active { background: rgba(255,255,255,0.18); }

/* Modal backdrop */
.dp-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(15,23,42,0.75);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Bottom sheet */
.dp-sheet {
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 640px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -16px 48px rgba(0,0,0,0.25);
    animation: dpUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dpUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.dp-handle {
    width: 36px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin: 14px auto 0;
    flex-shrink: 0;
}

/* Header */
.dp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.dp-header-title {
    font-family: Georgia, serif;
    font-size: 20px;
    color: #183e61;
    font-weight: normal;
}
.dp-header-date {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}
.dp-close {
    background: #f1f5f9;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(0,0,0,0.04);
}

/* Summary stats */
.dp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px 20px;
    flex-shrink: 0;
}
.dp-stat {
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}
.dp-stat-val {
    font-size: 20px;
    font-weight: 800;
    color: #183e61;
    font-family: 'Courier New', monospace;
}
.dp-stat-label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Full route link */
.dp-full-route {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px 12px;
    padding: 12px 14px;
    min-height: 44px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    color: #0369a1;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    flex-shrink: 0;
    transition: background 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0.04);
}
.dp-full-route:active { background: #e0f2fe; }

/* Timeline container */
.dp-timeline {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px 20px 40px;
}

/* Each stop */
.dp-stop {
    display: grid;
    grid-template-columns: 64px 24px 1fr;
    gap: 0;
    min-height: 100px;
}
.dp-stop.dp-onsite { }

/* Time column */
.dp-time-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 8px;
    padding-top: 4px;
}
.dp-time-start {
    font-size: 13px;
    font-weight: 800;
    color: #183e61;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}
.dp-time-dur {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 4px;
}
.dp-time-end {
    font-size: 10px;
    color: #cbd5e1;
    margin-top: 2px;
}

/* Connector dots + lines */
.dp-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.dp-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #cbd5e1;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 2px #e2e8f0;
    flex-shrink: 0;
    margin-top: 6px;
    z-index: 2;
}
.dp-dot-active {
    background: #ea580c;
    box-shadow: 0 0 0 2px #fed7aa;
    animation: dpPulse 1.5s infinite;
}
@keyframes dpPulse {
    0%, 100% { box-shadow: 0 0 0 2px #fed7aa; }
    50% { box-shadow: 0 0 0 4px rgba(234,88,12,0.2); }
}
.dp-dot-done {
    background: #10b981;
    box-shadow: 0 0 0 2px #d1fae5;
}
.dp-line {
    width: 2px;
    flex: 1;
    background: #e2e8f0;
    min-height: 16px;
}
.dp-line-drive {
    background: repeating-linear-gradient(
        to bottom,
        #cbd5e1 0px,
        #cbd5e1 4px,
        transparent 4px,
        transparent 8px
    );
}

/* Content card */
.dp-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    margin-left: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s;
    position: relative;
    -webkit-tap-highlight-color: rgba(0,0,0,0.04);
    touch-action: manipulation;
}
.dp-card:active { border-color: #183e61; }
.dp-onsite .dp-card { border-color: #fed7aa; background: #fffbf5; }

.dp-onsite-badge {
    position: absolute;
    top: -8px;
    right: 12px;
    background: #fff7ed;
    color: #ea580c;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 99px;
    border: 1px solid #fed7aa;
}

.dp-card-addr {
    font-family: Georgia, serif;
    font-size: 15px;
    color: #183e61;
    font-weight: normal;
    margin-bottom: 4px;
    line-height: 1.3;
}
.dp-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 10px;
    align-items: center;
}
.dp-card-type {
    font-size: 10px;
    font-weight: 700;
    background: #f0fdf4;
    color: #065f46;
    padding: 1px 8px;
    border-radius: 99px;
}
.dp-card-price {
    font-weight: 700;
    color: #047857;
    font-family: 'Courier New', monospace;
}

/* Mini progress bar */
.dp-card-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.dp-card-progress-track {
    flex: 1;
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    overflow: hidden;
}
.dp-card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #609cc3, #183e61);
    border-radius: 2px;
}
.dp-card-progress-pct {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    min-width: 28px;
    text-align: right;
}

/* Quick actions inside card */
.dp-card-actions {
    display: flex;
    gap: 6px;
}
.dp-act {
    flex: 1;
    padding: 10px 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    transition: background 0.12s;
    min-height: 44px;
    -webkit-tap-highlight-color: rgba(0,0,0,0.04);
}
.dp-act:active { background: #f1f5f9; }

/* Drive time link between stops */
.dp-drive {
    display: grid;
    grid-template-columns: 64px 24px 1fr;
    gap: 0;
    min-height: 44px;
}
.dp-drive-link {
    display: flex;
    align-items: center;
    margin-left: 8px;
    padding: 12px 12px;
    min-height: 44px;
    background: #f0f9ff;
    border: 1px dashed #bae6fd;
    border-radius: 8px;
    color: #0369a1;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 8px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0.04);
}
.dp-drive-link:active { background: #e0f2fe; }

/* Empty state */
.dp-empty {
    text-align: center;
    padding: 48px 20px;
}
.dp-empty-icon { font-size: 40px; margin-bottom: 12px; }
.dp-empty-text { font-size: 15px; color: #94a3b8; margin-bottom: 20px; }
.dp-empty-btn {
    background: #10b981;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 14px 24px;
    min-height: 48px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0.04);
}

/* ── Dark mode ── */
body.dark-mode .dp-sheet { background: #1e293b; }
body.dark-mode .dp-handle { background: #475569; }
body.dark-mode .dp-header { border-bottom-color: #334155; }
body.dark-mode .dp-header-title { color: #f8fafc; }
body.dark-mode .dp-header-date { color: #64748b; }
body.dark-mode .dp-close { background: #334155; color: #94a3b8; }
body.dark-mode .dp-stat { background: #0f172a; }
body.dark-mode .dp-stat-val { color: #f8fafc; }
body.dark-mode .dp-stat-label { color: #64748b; }
body.dark-mode .dp-full-route { background: #0f172a; border-color: #1e3a5f; color: #38bdf8; }
body.dark-mode .dp-time-start { color: #f8fafc; }
body.dark-mode .dp-time-dur { color: #64748b; }
body.dark-mode .dp-time-end { color: #475569; }
body.dark-mode .dp-dot { background: #475569; border-color: #1e293b; box-shadow: 0 0 0 2px #334155; }
body.dark-mode .dp-dot-done { background: #10b981; box-shadow: 0 0 0 2px #064e3b; }
body.dark-mode .dp-dot-active { background: #ea580c; box-shadow: 0 0 0 2px #78350f; }
body.dark-mode .dp-line { background: #334155; }
body.dark-mode .dp-card { background: #0f172a; border-color: #334155; }
body.dark-mode .dp-card:active { border-color: #609cc3; }
body.dark-mode .dp-onsite .dp-card { border-color: #78350f; background: #1c1207; }
body.dark-mode .dp-onsite-badge { background: #78350f; border-color: #92400e; color: #fbbf24; }
body.dark-mode .dp-card-addr { color: #f8fafc; }
body.dark-mode .dp-card-meta { color: #94a3b8; }
body.dark-mode .dp-card-type { background: #064e3b; color: #34d399; }
body.dark-mode .dp-card-price { color: #34d399; }
body.dark-mode .dp-card-progress-track { background: #334155; }
body.dark-mode .dp-card-progress-pct { color: #64748b; }
body.dark-mode .dp-act { background: #1e293b; border-color: #334155; color: #94a3b8; }
body.dark-mode .dp-act:active { background: #334155; }
body.dark-mode .dp-drive-link { background: #0f172a; border-color: #1e3a5f; color: #38bdf8; }
body.dark-mode .dp-drive-link:active { background: #1e293b; }
body.dark-mode .dp-empty-text { color: #64748b; }

/* ── Mobile overrides ── */
@media (max-width: 768px) {
    .dp-sheet {
        max-height: 95vh;
        max-height: 95dvh;
        border-radius: 16px 16px 0 0;
    }
    .dp-timeline {
        padding: 14px 16px calc(40px + env(safe-area-inset-bottom, 0px));
    }
    .dp-header { padding: 14px 16px 10px; }
    .dp-stats { padding: 12px 16px; gap: 6px; }
    .dp-stat { padding: 10px 8px; }
    .dp-stat-val { font-size: 18px; }
    .dp-full-route { margin: 0 16px 10px; font-size: 12px; }
    .dp-stop { grid-template-columns: 52px 20px 1fr; }
    .dp-drive { grid-template-columns: 52px 20px 1fr; }
    .dp-time-start { font-size: 11px; }
    .dp-card { padding: 12px; }
    .dp-card-addr { font-size: 14px; }
    .dp-empty-btn { width: 100%; padding: 14px; }
}

/* ══════════════════════════════════════════════════════════════
   CARD BUILDER — Mobile-first redesign (CSS overlay)
   Reorders existing builder elements for mobile without
   touching the HTML structure
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Builder top bar: compact mobile header ── */
    #view-builder > .panel:first-child {
        padding: 10px 16px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2000 !important;
        background: #f8fafc !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    #view-builder > .panel:first-child h3 {
        font-size: 14px !important;
        min-width: unset !important;
        width: 100% !important;
        margin-bottom: 4px !important;
    }
    /* Remove search library entirely on mobile */
    #fuzzy-search, #fuzzy-results,
    #view-builder > .panel:first-child > div[style*="max-width: 600px"],
    #view-builder > .panel:first-child > div[style*="max-width:600px"] {
        display: none !important;
    }
    /* Compact action buttons */
    #view-builder > .panel:first-child > div:last-child {
        width: 100% !important;
    }
    #view-builder > .panel:first-child button {
        padding: 8px 12px !important;
        font-size: 10px !important;
    }

    /* ── FIELD REORDER: Photos above optional fields ── */
    #standard-inputs {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Photos card (contains #use-diagram) → order 1 (right after AI banner) */
    #standard-inputs > div:has(#use-diagram) {
        order: -5 !important;
    }
    /* AI banner stays first */
    #standard-inputs > div:first-child {
        order: -10 !important;
    }
    /* Gen standard container */
    #gen-standard-container {
        order: -9 !important;
    }
    #quick-fields-container {
        order: -8 !important;
    }
    /* Narrative stays prominent */
    #standard-inputs > div:has(#narrative) {
        order: -4 !important;
    }
    /* Recommendation */
    #standard-inputs > div:has(#recommendation) {
        order: -3 !important;
    }

    /* ── COLLAPSIBLE optional fields ── */
    /* Title+Location, Tags+Repair, Bottom Line, Limitation = optional */
    #standard-inputs > div:has(#title),
    #defect-only-fields,
    #standard-inputs > div:has(#bottom-line),
    #category-container {
        order: 10 !important;
    }
    /* When collapsed, hide optional fields */
    #standard-inputs.cb-collapsed > div:has(#title),
    #standard-inputs.cb-collapsed #defect-only-fields,
    #standard-inputs.cb-collapsed > div:has(#bottom-line),
    #standard-inputs.cb-collapsed #category-container {
        display: none !important;
    }

    /* Toggle button styling */
    .cb-toggle-btn {
        order: 5 !important;
        width: 100%;
        padding: 12px;
        background: none;
        border: 1px dashed #cbd5e1;
        border-radius: 10px;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
        margin-bottom: 8px;
        min-height: 44px;
        -webkit-tap-highlight-color: rgba(0,0,0,0.04);
        touch-action: manipulation;
    }
    .cb-toggle-btn:active { background: #f8fafc; }

    /* ── Builder form: make it breathe ── */
    #view-builder > .panel:nth-child(2) {
        padding: 0 !important;
    }
    #view-builder > .panel:nth-child(2) > div {
        padding: 8px 10px 120px 10px !important;
        max-width: 100% !important;
    }

    /* ── Card type grid: 4 columns, big tap targets like dashboard nav ── */
    #view-builder div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }
    #view-builder .type-pill {
        padding: 14px 4px !important;
        font-size: 10px !important;
        letter-spacing: 0.3px !important;
        min-height: 56px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        border-radius: 12px !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0.04) !important;
        touch-action: manipulation !important;
    }

    /* ── Component dropdown → horizontal scroll strip ── */
    #system-selectors {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    #component {
        font-size: 15px !important;
        padding: 14px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        border-width: 2px !important;
        border-color: #183e61 !important;
        min-height: 48px !important;
    }

    /* ── Photo section: always visible on mobile ── */
    #diagram-input-container {
        display: block !important;
    }
    /* Hide the checkbox and its label text */
    #use-diagram {
        display: none !important;
    }
    .checkbox-label:has(#use-diagram) {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #94a3b8 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        pointer-events: none !important;
    }
    #diagram-input-container .grid-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    #btn-upload-1, #btn-upload-2 {
        padding: 24px 10px !important;
        font-size: 13px !important;
        min-height: 60px !important;
        border-radius: 10px !important;
    }

    /* ── Form cards: reduce padding ── */
    #standard-inputs > div,
    #equipment-inputs > div,
    #video-inputs > div {
        border-radius: 10px !important;
        padding: 14px !important;
        margin-bottom: 8px !important;
    }

    /* ── Textareas: taller for thumb typing ── */
    #narrative, #recommendation {
        min-height: 100px !important;
        font-size: 15px !important;
    }

    /* ── AI buttons: bigger tap targets ── */
    #ai-dictate-btn, #dictate-narrative, #polish-btn,
    #gen-standard-btn, #eq-ai-dictate-btn, #eq-dictate-notes-btn {
        min-height: 48px !important;
        font-size: 12px !important;
    }

    /* ── Sticky save button at bottom ── */
    #view-builder > .panel:last-child {
        padding: 0 10px !important;
    }
    #add-report-btn {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1999 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 16px !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        min-height: 56px !important;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.15) !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }
    #reset-btn {
        margin-bottom: 12px !important;
    }

    /* ── Preview box: inline, compact ── */
    #preview-box {
        margin-bottom: 16px !important;
    }

    /* ── Saved cards list: compact ── */
    #section-cards-output .card-drag-item {
        margin-bottom: 6px !important;
    }

    /* ── Location quick taps: bigger ── */
    #location-wrapper .quick-tap {
        padding: 10px 12px !important;
        font-size: 12px !important;
        min-height: 40px !important;
    }

    /* ── Grid overrides inside builder ── */
    #standard-inputs .grid-2,
    #defect-only-fields .grid-2 {
        grid-template-columns: 1fr !important;
    }
    /* Keep title + location side by side */
    #standard-inputs > div:nth-child(3) .grid-2 {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   CARD BUILDER — Dark mode
   ══════════════════════════════════════════════════════════════ */

/* Builder top bar */
body.dark-mode #view-builder > .panel:first-child {
    background: #0f172a !important;
    border-color: #334155 !important;
}
body.dark-mode #view-builder > .panel:first-child h3 {
    color: #f8fafc !important;
}
body.dark-mode #view-builder > .panel:first-child h3 span {
    color: #609cc3 !important;
}

/* Builder form background */
body.dark-mode #view-builder > .panel:nth-child(2) {
    background: #0f172a !important;
}

/* Card type pills */
body.dark-mode .type-pill {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
body.dark-mode .type-pill:active {
    background: #1e293b !important;
}
/* Active type pill — matches by the inline style the JS sets */
body.dark-mode .type-pill[style*="background: #183e61"],
body.dark-mode .type-pill[style*="background:#183e61"] {
    background: #183e61 !important;
    border-color: #609cc3 !important;
    color: white !important;
}
/* Minor active */
body.dark-mode .type-pill[style*="background: #2563eb"],
body.dark-mode .type-pill[style*="background:#2563eb"] {
    background: #1d4ed8 !important;
    border-color: #3b82f6 !important;
    color: white !important;
}
/* Major active */
body.dark-mode .type-pill[style*="background: #ea580c"],
body.dark-mode .type-pill[style*="background:#ea580c"],
body.dark-mode .type-pill[style*="background: #e65c00"],
body.dark-mode .type-pill[style*="background:#e65c00"] {
    background: #c2410c !important;
    border-color: #ea580c !important;
    color: white !important;
}
/* Material active */
body.dark-mode .type-pill[style*="background: #dc2626"],
body.dark-mode .type-pill[style*="background:#dc2626"],
body.dark-mode .type-pill[style*="background: #b91c1c"],
body.dark-mode .type-pill[style*="background:#b91c1c"] {
    background: #991b1b !important;
    border-color: #ef4444 !important;
    color: white !important;
}

/* White form cards → dark */
body.dark-mode #standard-inputs > div[style*="background: white"],
body.dark-mode #standard-inputs > div[style*="background:white"],
body.dark-mode #equipment-inputs > div[style*="background: white"],
body.dark-mode #equipment-inputs > div[style*="background:white"],
body.dark-mode #video-inputs > div[style*="background: white"],
body.dark-mode #video-inputs > div[style*="background:white"],
body.dark-mode #defect-only-fields,
body.dark-mode div[style*="border-left: 4px solid #609cc3"] {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: none !important;
}
body.dark-mode div[style*="border-left: 4px solid #609cc3"] {
    border-left-color: #609cc3 !important;
}

/* Labels */
body.dark-mode #view-builder label[style*="color: #94a3b8"],
body.dark-mode #view-builder label[style*="color:#94a3b8"] {
    color: #64748b !important;
}
body.dark-mode #view-builder label[style*="color: #334155"],
body.dark-mode #view-builder label[style*="color:#334155"] {
    color: #e2e8f0 !important;
}

/* Photo upload zones */
body.dark-mode #photo-drop-zone-1,
body.dark-mode #photo-drop-zone-2,
body.dark-mode [id^="photo-drop-zone"] {
    background: #0f172a !important;
    border-color: #475569 !important;
}
body.dark-mode #btn-upload-1, body.dark-mode #btn-upload-2 {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
}
body.dark-mode #btn-gallery-1, body.dark-mode #btn-gallery-2 {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #a78bfa !important;
}

/* Limitation textarea */
body.dark-mode #limitation-text {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

/* Equipment photo buttons */
body.dark-mode [id^="eq-photo-btn"] {
    background: #0f172a !important;
    border-color: #475569 !important;
}
body.dark-mode [id^="eq-photo-btn"] span:last-child {
    color: #94a3b8 !important;
}

/* Equipment form fields */
body.dark-mode #equipment-inputs input[type="text"],
body.dark-mode #equipment-inputs select,
body.dark-mode #equipment-inputs textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* Quick tap buttons */
body.dark-mode #view-builder .quick-tap {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}

/* Preview panel */
body.dark-mode #view-builder > .panel:last-child {
    background: transparent !important;
}
body.dark-mode #view-builder > .panel:last-child h4 {
    color: #f8fafc !important;
    border-bottom-color: #334155 !important;
}

/* Saved card items */
body.dark-mode .card-drag-item,
body.dark-mode #section-cards-output > div[style*="background:#ffffff"],
body.dark-mode #section-cards-output > div[style*="background: #ffffff"],
body.dark-mode #section-cards-output .card-drag-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}
body.dark-mode .card-drag-item div[style*="background:#f8fafc"],
body.dark-mode .card-drag-item div[style*="background: #f8fafc"] {
    background: #0f172a !important;
    border-color: #334155 !important;
}

/* Fuzzy search */
body.dark-mode #fuzzy-search {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
body.dark-mode #fuzzy-results {
    background: #1e293b !important;
    border-color: #475569 !important;
}

/* Save button stays green in dark */
body.dark-mode #add-report-btn {
    background: #10b981 !important;
    color: white !important;
}

/* Repair plan section */
body.dark-mode #repair-plan-inputs {
    border-top-color: #334155 !important;
}
body.dark-mode #repair-plan-inputs p[style*="color: #183e61"],
body.dark-mode #repair-plan-inputs p[style*="color:#183e61"] {
    color: #f8fafc !important;
}

/* Category dropdown */
body.dark-mode #category-icon {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Analyze photo buttons */
body.dark-mode [id^="analyze-photo-btn"] {
    background: #1e3a5f !important;
    border-color: #1d4ed8 !important;
    color: #93c5fd !important;
}

/* Word count */
body.dark-mode #word-count-container {
    color: #10b981 !important;
}

/* Toggle button dark mode */
body.dark-mode .cb-toggle-btn {
    border-color: #475569;
    color: #94a3b8;
}
body.dark-mode .cb-toggle-btn:active {
    background: #334155;
}