:root {
    --primary: #0f172a;
    --sidebar: #1e293b;
    --accent: #facc15;
    --accent-hover: #eab308;
    --bg: #f1f5f9;
    --card: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border: #e8ecf3;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --success: #10b981;
    --topbar-height: 70px;
}

* { box-sizing: border-box; font-family: 'Inter', sans-serif; margin: 0; padding: 0; }

body {
    background: var(--bg);
    display: flex;
    color: var(--text-main);
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}

/* --- PERMISSIONS & ACCESS CONTROL --- */
/* NOTE: CSS-only hiding is for UX only — enforce with Firebase Security Rules server-side */
body.is-staff .holiday-staff-card { display: none; }
body.is-staff.user-vince-kent .holiday-staff-card.user-vince-kent,
body.is-staff.user-matilda-evans .holiday-staff-card.user-matilda-evans { display: flex !important; }
body.is-staff .admin-only,
body.is-staff button[onclick*="addStaff"],
body.is-staff button[onclick*="approveHoliday"],
body.is-staff #panelDeleteBtn,
body.is-staff button[onclick*="openAdd"],
body.is-staff button[onclick*="saveQuote"],
body.is-staff button[onclick*="removeHoliday"],
body.is-staff .danger-btn { display: none !important; }

body.is-staff input:not(.crm-input):not([type="search"]):not(.filter-input):not(#leadSearch):not(#opsSearch):not(#pipelineSearch):not(#chasingSearch),
body.is-staff textarea,
body.is-staff select:not(#staffSelect) {
    pointer-events: none;
    background-color: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}

body.is-staff #staffSelect,
body.is-staff #reqDateStart,
body.is-staff #reqDateEnd,
body.is-staff button[onclick*="submitReq"] {
    pointer-events: auto !important;
    background-color: white !important;
    color: var(--text-main) !important;
    display: block !important;
}

/* Sidebar */
.sidebar {
    width: 260px;
    min-width: 260px;
    background: linear-gradient(180deg, #0f172a 0%, #1a2540 100%);
    padding: 24px;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 30000;
    z-index: 1000;
    border-right: 1px solid rgba(255,255,255,0.04);
}

.logo-area img { width: 140px; margin-bottom: 40px; }

.nav-btn {
    width: 100%; padding: 11px 14px; margin-bottom: 4px;
    border: none; background: transparent; color: #94a3b8;
    text-align: left; cursor: pointer; border-radius: 10px;
    font-weight: 600; font-size: 0.85rem;
    transition: all 0.18s ease;
    display: flex; align-items: center; gap: 12px;
}
.nav-btn:hover { background: rgba(255,255,255,0.07); color: white; transform: translateX(2px); }
.nav-btn.active { background: var(--accent); color: var(--primary); box-shadow: 0 4px 14px rgba(250,204,21,0.35); font-weight: 800; }
.nav-btn.active .nav-icon { transform: scale(1.1); }
.logout-btn { margin-top: auto; }
.logout-btn:hover { background: rgba(239,68,68,0.2) !important; }

/* Layout */
.main-wrapper {
    margin-left: 260px;
    display: flex; flex-direction: column;
    flex: 1; min-height: 100vh;
    width: auto; min-width: 0;
}

.top-bar {
    padding: 20px 40px;
    background: white;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    width: 100%;
}

.main {
    padding: 40px;
    flex: 1; width: 100%;
    max-width: 100% !important;
    margin: 0;
}

/* --- PIPELINE FOLDER CARDS --- */
.pipeline-folder-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 12px;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.pipeline-folder-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border-color: #cbd5e1;
}

.pipeline-folder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.pipeline-action-btn {
    background: #f1f5f9;
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.pipeline-action-btn:hover { background: #e2e8f0; }

.pipeline-won-btn {
    flex: 2;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}
.pipeline-won-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.pipeline-lost-btn {
    flex: 1;
    background: transparent;
    color: #94a3b8;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.pipeline-lost-btn:hover { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

/* --- TB FOLDER CARDS --- */
.ops-folder-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
    margin-bottom: 10px;
}
.ops-folder-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

/* Stage-based status banner — sits flush with the card edges as a proper
   footer bar, with a thin coloured accent stripe on top and a very soft
   stage tint behind the text. The text colour does most of the work; the
   tint and stripe are just enough to make the bar feel like a finished
   section, not a floating caption. The urgency left-border (overdue / today
   / soon) still wins where it applies. */
.ops-stage-banner {
    /* Escape the card's 20px horizontal / 18px bottom padding so the bar
       extends edge-to-edge inside the rounded card. */
    margin: 0 -20px -18px -20px;
    padding: 14px 20px;
    text-align: center;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    line-height: 1.15;
    /* Wide letter-spacing tacks a trailing gap onto every word — matching
       left-pad rebalances the visual centring. */
    padding-left: calc(20px + 0.35em);
    /* Round the bottom corners to match the card */
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    /* Default border-top — overridden per stage below */
    border-top: 3px solid #e2e8f0;
}

/* Per-stage tint + accent stripe. Tints sit at the Tailwind 50 level so
   they're soft as breath; the 3px border-top carries the saturated colour. */
.ops-folder-card[data-stage="awaiting_deposit"] .ops-stage-banner {
    background: #fff7ed;
    border-top-color: #c2410c;
}
.ops-folder-card[data-stage="ready"] .ops-stage-banner {
    background: #f8fafc;
    border-top-color: #64748b;
}
.ops-folder-card[data-stage="in_progress"] .ops-stage-banner {
    background: #fffbeb;
    border-top-color: #b45309;
}
.ops-folder-card[data-stage="manufactured"] .ops-stage-banner {
    background: #f0fdfa;
    border-top-color: #0d9488;
}
.ops-folder-card[data-stage="complete"] .ops-stage-banner {
    background: #f0fdf4;
    border-top-color: #15803d;
}

/* Mobile / narrow cards — scale font down and adjust margins to the
   smaller 14px card padding. */
@media (max-width: 640px) {
    .ops-stage-banner {
        font-size: 1.05rem;
        letter-spacing: 0.22em;
        margin: 0 -14px -14px -14px;
        padding: 10px 14px;
        padding-left: calc(14px + 0.22em);
    }
}
html.is-mobile .ops-stage-banner {
    margin: 0 -14px -14px -14px;
    padding: 10px 14px;
    padding-left: calc(14px + 0.22em);
}

/* --- HOLIDAY STAFF CARDS --- */
.holiday-staff-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.holiday-staff-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.07);
    border-color: #cbd5e1;
}

/* --- LEAD TABS & FILTERS --- */
.lead-tab {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lead-tab:hover { color: var(--primary); }
.lead-tab-active { color: var(--primary); border-bottom-color: var(--primary); }

.lead-tab-badge {
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px;
    min-width: 20px;
    text-align: center;
}
.lead-tab-badge:empty { display: none; }

.lead-filter-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.lead-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.lead-filter-active { background: var(--primary); color: white; border-color: var(--primary); }

/* Show/hide per device */
.mobile-only { display: none !important; }
.desktop-only { display: flex; }

/* Search bar */
#leadSearch:focus, #opsSearch:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

/* Lead cards */
#leadList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.lead-card {
    background: white;
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}
.lead-card:hover {
    box-shadow: 0 8px 24px rgba(16,24,40,0.09);
    border-color: #cbd5e1;
    border-left-color: var(--primary);
    transform: translateY(-2px);
}
.lead-card[data-status="Enquiry"] { border-left-color: #3b82f6; }
.lead-card[data-status="Quote Sent"] { border-left-color: #f59e0b; }
.lead-card[data-status="Paid"] { border-left-color: #10b981; }
.lead-card[data-status="Archived"] { border-left-color: #94a3b8; }

/* ── Urgency stripes ──────────────────────────────────────────────────────── */
/* Override default status/stage left border ONLY when the card has been flagged
   as urgent. No data-urgency attribute = default border colour remains. Wider
   stripe (4-5px) makes the signal pop visually without changing card width. */
.lead-card[data-urgency="overdue"]            { border-left: 4px solid #dc2626 !important; }
.lead-card[data-urgency="today"]              { border-left: 4px solid #f59e0b !important; }
.lead-card[data-urgency="soon"]               { border-left: 4px solid #3b82f6 !important; }
.ops-folder-card[data-urgency="overdue"]      { border-left: 5px solid #dc2626 !important; }
.ops-folder-card[data-urgency="today"]        { border-left: 5px solid #f59e0b !important; }
.ops-folder-card[data-urgency="soon"]         { border-left: 5px solid #3b82f6 !important; }
.pipeline-folder-card[data-urgency="overdue"] { border-left: 4px solid #dc2626 !important; }
.pipeline-folder-card[data-urgency="today"]   { border-left: 4px solid #f59e0b !important; }
.pipeline-folder-card[data-urgency="soon"]    { border-left: 4px solid #3b82f6 !important; }

/* Background tint — light wash so the row catches the eye in long lists */
.lead-card[data-urgency="overdue"],
.ops-folder-card[data-urgency="overdue"],
.pipeline-folder-card[data-urgency="overdue"] {
    background: #fef2f2 !important;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.08);
}
.lead-card[data-urgency="today"],
.ops-folder-card[data-urgency="today"],
.pipeline-folder-card[data-urgency="today"] {
    background: #fffbeb !important;
}

/* Corner urgency pill — bold text label, the unmistakable signal */
.urgency-tag {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    border-radius: 5px;
    color: white;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    pointer-events: none;
    text-transform: uppercase;
}
.urgency-tag-overdue { background: #dc2626; }
.urgency-tag-today   { background: #f59e0b; color: #78350f; }
.urgency-tag-soon    { background: #3b82f6; }

.lead-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.lead-avatar {
    position: relative;
    width: 52px;
    height: 52px;
    min-width: 52px;
}

.lead-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lead-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lead-name {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--primary);
}

.lead-badge-new {
    background: #ef4444;
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    animation: pulse 2s infinite;
}

.lead-badge-quotes {
    background: #ede9fe;
    color: #6d28d9;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

.lead-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lead-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.lead-meta-icon { font-size: 0.75rem; }

.lead-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lead-tag {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

.lead-tag-request {
    background: #f8fafc;
    color: #334155;
    border-color: #eef1f5;
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0;
}

.lead-tag-muted {
    background: transparent;
    color: #94a3b8;
    border-color: #e2e8f0;
}

.lead-tag-source {
    background: #ede9fe;
    color: #6d28d9;
    border-color: #ddd6fe;
    font-weight: 700;
}

.lead-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 130px;
}

.lead-status-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.lead-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.lead-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.lead-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 9px;
    padding: 7px 13px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s, opacity 0.15s;
}
.lead-action-btn:hover { opacity: 0.85; transform: translateY(-1px); }

.lead-action-quote {
    background: #10b981;
    color: white;
}

.lead-action-remove {
    background: #f1f5f9;
    color: #64748b;
}

/* --- QUOTE CATEGORY CARDS --- */
.quote-cat-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 18px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.quote-cat-card:hover {
    background: white;
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(15,23,42,0.1);
}
.quote-cat-card--active {
    background: white;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(250,204,21,0.2);
    transform: translateY(-2px);
}
.quote-cat-illustration {
    margin-bottom: 10px;
    opacity: 1;
}
.quote-cat-card:hover .quote-cat-illustration { transform: translateY(-2px); transition: transform 0.2s; }
.quote-cat-name {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--primary);
}
.quote-cat-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.quote-cat-sub {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.quote-cat-card--active .quote-cat-sub { color: #92400e; }

/* --- QUOTE BUILDER LAYOUT --- */
.quote-builder-container {
    display: grid;
    grid-template-columns: 420px 1fr;
    height: calc(100vh - var(--topbar-height));
    overflow: hidden;
    margin: -40px;
}

.quote-controls {
    padding: 32px;
    background: white;
    border-right: 1px solid var(--border);
    overflow-y: auto;
}

.quote-preview-pane {
    padding: 40px;
    background: #cbd5e1;
    overflow-y: auto;
    display: flex;
    justify-content: center;
}

#liveQuotePreview {
    width: 210mm;
    min-height: 297mm;
    background: white;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    padding: 60px;
}

/* --- GENERAL UI COMPONENTS --- */
.data-card {
    background: var(--card);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
    margin-bottom: 24px;
    width: 100% !important;
}

.ops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
}

.primary-btn {
    background: var(--accent);
    color: var(--primary);
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    font-size: 0.88rem;
}
.primary-btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(250,204,21,0.3); }
.primary-btn:active { transform: translateY(0); }
.dark-btn { background: var(--primary); color: white; }
.dark-btn:hover { background: #1e293b; box-shadow: 0 4px 12px rgba(15,23,42,0.2); }
.danger-btn { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; padding: 12px; border-radius: 10px; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.danger-btn:hover { background: #fecaca; }

input, select, textarea {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 0.9rem;
    background: white;
    width: 100%;
}

.section-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 15px 0 6px 0;
    display: block;
}

/* Status badge (used in pipeline/holiday views) */
.status-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(15,23,42,0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

/* Summary card (lead detail panel) */
.summary-card {
    background: #fffbeb;
    border-left: 5px solid var(--accent);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}

.detail-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
}

.summary-card .detail-label {
    color: #92400e;
}

/* Calendar */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.cal-cell {
    background: white;
    min-height: 120px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.cal-date-num {
    font-weight: 700;
    font-size: 0.9rem;
}

.cal-today { border: 2px solid var(--accent) !important; }

.cal-note-input {
    margin-top: auto;
    padding: 4px 6px;
    font-size: 0.72rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    resize: none;
    height: 32px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.shed-extra-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: white;
    transition: background 0.15s;
}
.shed-extra-check:hover { background: #f8fafc; }
.shed-extra-check input[type="checkbox"] { flex-shrink: 0; width: 15px; height: 15px; cursor: pointer; accent-color: var(--primary); }
.stats-range-btn {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}
.stats-range-btn:hover { border-color: var(--primary); color: var(--primary); }
.stats-range-active { background: var(--primary) !important; color: white !important; border-color: var(--primary) !important; }

.stats-kpi-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
}
.stats-kpi-value { font-size: 1.8rem; font-weight: 800; line-height: 1.1; margin: 4px 0; }
.stats-kpi-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.stats-kpi-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }

/* --- SUPPLIER CARDS --- */
.supplier-card {
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}
.supplier-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border-color: #cbd5e1;
    transform: translateY(-1px);
}



/* ============================================================
   MOBILE APP STYLES — Single source of truth
   Applied via html.is-mobile (set by JS before render)
   ============================================================ */

/* Visibility */
.mobile-only { display: none !important; }
.desktop-only { display: flex; }
html.is-mobile .mobile-only { display: flex !important; }
html.is-mobile .desktop-only { display: none !important; }

/* Body & layout */
html.is-mobile body { overflow: auto !important; height: auto !important; min-height: 100vh !important; }
html.is-mobile #appContainer { flex-direction: column !important; height: auto !important; min-height: 100vh !important; }
html.is-mobile .main-wrapper { margin-left: 0 !important; margin-bottom: 80px !important; width: 100% !important; }
html.is-mobile .main { flex: 1 !important; overflow-y: visible !important; padding: 14px !important; }

/* Top bar */
html.is-mobile .top-bar { height: 50px !important; padding: 0 16px !important; position: sticky !important; top: 0 !important; z-index: 100 !important; }
html.is-mobile .top-bar h2 { font-size: 1rem !important; }
html.is-mobile .top-bar span { font-size: 0.68rem !important; }

/* ---- BOTTOM NAV — proper app style ---- */
html.is-mobile .sidebar {
    position: fixed !important;
    width: 100% !important;
    min-width: unset !important;
    height: 80px !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    flex-direction: row !important;
    align-items: stretch !important;
    background: #0f172a !important;
    border-top: 1px solid rgba(250,204,21,0.2) !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3) !important;
}
html.is-mobile .logo-area { display: none !important; }
html.is-mobile .sidebar nav {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}
html.is-mobile .sidebar nav::-webkit-scrollbar { display: none !important; }
html.is-mobile .nav-btn {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 10px 2px 8px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 0 !important; /* Hide default text */
    min-width: 0 !important;
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    height: 80px !important;
    width: auto !important;
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.15s !important;
}
html.is-mobile .nav-btn .nav-icon {
    font-size: 1.6rem !important;
    line-height: 1 !important;
    display: block !important;
}
html.is-mobile .nav-btn .nav-label {
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    display: block !important;
    color: #64748b !important;
    letter-spacing: 0.02em !important;
    margin-top: 2px !important;
}
html.is-mobile .nav-btn.active {
    background: rgba(250,204,21,0.08) !important;
    box-shadow: inset 0 3px 0 #facc15 !important;
}
html.is-mobile .nav-btn.active .nav-label { color: #facc15 !important; }
html.is-mobile .logout-btn { margin-top: 0 !important; flex: 0 0 64px !important; }
html.is-mobile .logout-btn .nav-label { color: #ef4444 !important; }

/* ---- LEADS ---- */
html.is-mobile .lead-tab { font-size: 0.78rem !important; padding: 8px 12px !important; }
html.is-mobile .lead-filter-btn { font-size: 0.72rem !important; padding: 5px 11px !important; }
html.is-mobile .lead-tag, html.is-mobile .lead-tag-request, html.is-mobile .lead-tag-muted {
    max-width: 120px !important; overflow: hidden !important;
    text-overflow: ellipsis !important; white-space: nowrap !important;
}
html.is-mobile section h1 { font-size: 1.15rem !important; }
html.is-mobile section > div:first-child { flex-wrap: wrap !important; gap: 8px !important; }

/* ---- MODALS — slide up from bottom ---- */
html.is-mobile .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
html.is-mobile .modal-overlay .data-card {
    width: 100% !important; max-width: 100% !important; max-height: 93vh !important;
    overflow-y: auto !important; padding: 22px 16px 32px !important;
    border-radius: 20px 20px 0 0 !important; margin: 0 !important;
}
html.is-mobile #staffPanelOverlay { width: 100% !important; }

/* ---- QUOTE BUILDER ---- */
html.is-mobile .quote-builder-container { display: flex !important; flex-direction: column !important; height: auto !important; overflow: visible !important; }
html.is-mobile .quote-controls { width: 100% !important; max-width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; max-height: 55vh !important; overflow-y: auto !important; padding: 14px !important; }
html.is-mobile .quote-preview-pane { padding: 16px !important; width: 100% !important; }
html.is-mobile #liveQuotePreview { width: 100% !important; min-height: auto !important; padding: 20px !important; }

/* ---- SCHEDULE ---- */
html.is-mobile #scheduleScrollWrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
html.is-mobile .calendar-header-grid, html.is-mobile .calendar-grid { min-width: 560px !important; }
html.is-mobile .calendar-day { min-height: 100px !important; padding: 6px 4px !important; }
html.is-mobile .calendar-day input { font-size: 11px !important; padding: 3px !important; }

/* ---- HOLIDAY ---- */
html.is-mobile .holiday-top-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

/* ---- STATS ---- */
html.is-mobile .stats-kpi-grid, html.is-mobile #statsGrid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

/* ---- PREVENT IOS ZOOM ---- */
html.is-mobile input, html.is-mobile select, html.is-mobile textarea { font-size: 16px !important; }

/* ---- NAV ICON/LABEL (desktop too) ---- */
.nav-icon { font-size: 1.1rem; line-height: 1; }
.nav-label { font-size: 0.75rem; }

/* ---- TABLET ---- */
@media (max-width: 1024px) and (min-width: 769px) {
    .sidebar { width: 200px !important; min-width: 200px !important; }
    .main-wrapper { margin-left: 200px !important; }
    .nav-btn { font-size: 0.82rem !important; padding: 10px 12px !important; }
}
/* ============================================================
   POLISH & MICRO-INTERACTIONS
   ============================================================ */

/* View fade-in transition */
main section:not(.hidden) {
    animation: viewFadeIn 0.2s ease;
}
@keyframes viewFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Better input focus states */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.crm-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
    background: white;
}

/* Toast notifications — polished slide-in */
#toastContainer {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
#toastContainer > div {
    animation: toastSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
    min-width: 260px;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.1);
}
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(60px) scale(0.9); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Lead card left-border status — set via JS data attribute */
.lead-card { transition: box-shadow 0.2s, transform 0.15s, border-left-color 0.2s; }

/* Ops folder card polish */
.ops-folder-card {
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
    border-left: 4px solid var(--border);
}
.ops-folder-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
    border-left-color: var(--primary);
    transform: translateY(-2px);
}

/* Pipeline folder card */
.pipeline-folder-card {
    transition: box-shadow 0.2s, border-color 0.2s;
    border-left: 4px solid transparent;
}
.pipeline-folder-card:hover { border-left-color: var(--primary); }

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Top bar polish */
.top-bar {
    box-shadow: 0 1px 0 var(--border);
}

/* Section h1 consistent style */
main h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
}

/* Checklist items */
.checklist-item-row {
    transition: background 0.15s;
}
.checklist-item-row:hover { background: #f8fafc; }

/* Modal backdrop blur polish */
.modal-overlay {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Avatar colour variety — soft tint keyed to first initial */
.lead-avatar[data-initial^="A"], .lead-avatar[data-initial^="B"] { background: #eef2ff; color: #4f46e5; }
.lead-avatar[data-initial^="C"], .lead-avatar[data-initial^="D"] { background: #f5f3ff; color: #7c3aed; }
.lead-avatar[data-initial^="E"], .lead-avatar[data-initial^="F"] { background: #ecfeff; color: #0e7490; }
.lead-avatar[data-initial^="G"], .lead-avatar[data-initial^="H"] { background: #ecfdf5; color: #059669; }
.lead-avatar[data-initial^="I"], .lead-avatar[data-initial^="J"] { background: #fffbeb; color: #b45309; }
.lead-avatar[data-initial^="K"], .lead-avatar[data-initial^="L"] { background: #fdf2f8; color: #be185d; }
.lead-avatar[data-initial^="M"], .lead-avatar[data-initial^="N"] { background: #f1f5f9; color: #475569; }
.lead-avatar[data-initial^="O"], .lead-avatar[data-initial^="P"] { background: #eff6ff; color: #1d4ed8; }
.lead-avatar[data-initial^="Q"], .lead-avatar[data-initial^="R"] { background: #fef2f2; color: #dc2626; }
.lead-avatar[data-initial^="S"], .lead-avatar[data-initial^="T"] { background: #f0fdfa; color: #0d9488; }
.lead-avatar[data-initial^="U"], .lead-avatar[data-initial^="V"] { background: #ede9fe; color: #6d28d9; }
.lead-avatar[data-initial^="W"], .lead-avatar[data-initial^="X"] { background: #fff7ed; color: #c2410c; }
.lead-avatar[data-initial^="Y"], .lead-avatar[data-initial^="Z"] { background: #f7fee7; color: #4d7c0f; }

/* ── PERMISSION HIDING — highest priority, beats all mobile overrides ──────── */
.nav-perm-hidden,
html.is-mobile .nav-perm-hidden,
html.is-mobile .sidebar nav > .nav-perm-hidden,
html.is-mobile .sidebar nav > .nav-btn.nav-perm-hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
}

/* ============================================================
   MOBILE — Full app-style rebuild
   Breakpoint: ≤768px via html.is-mobile class
   ============================================================ */

/* ── Visibility helpers ─────────────────────────────────────── */
.mobile-only  { display: none !important; }
.desktop-only { display: flex; }
html.is-mobile .mobile-only  { display: flex !important; }
html.is-mobile .desktop-only { display: none !important; }

/* ── Root layout ────────────────────────────────────────────── */
html.is-mobile body {
    overflow-x: hidden !important;
}
html.is-mobile #appContainer {
    flex-direction: column !important;
    min-height: 100vh !important;
}
html.is-mobile .main-wrapper {
    margin-left: 0 !important;
    margin-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    min-height: 0 !important;
}
html.is-mobile .main {
    padding: 12px !important;
    overflow-x: hidden !important;
}

/* ── Top bar ────────────────────────────────────────────────── */
html.is-mobile .top-bar {
    height: 52px !important;
    padding: 0 14px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important;
}
html.is-mobile .top-bar h2 { font-size: 0.95rem !important; }
html.is-mobile .top-bar span { font-size: 0.7rem !important; }

/* ── Bottom nav ─────────────────────────────────────────────── */
html.is-mobile .sidebar {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    width: 100% !important;
    min-width: unset !important;
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) 0 !important;
    flex-direction: row !important;
    background: #0f172a !important;
    border-top: 1px solid rgba(250,204,21,0.15) !important;
    z-index: 9999 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.35) !important;
}
html.is-mobile .logo-area { display: none !important; }
html.is-mobile .sidebar nav {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 64px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    gap: 0 !important;
    scroll-snap-type: x mandatory !important;
}
html.is-mobile .sidebar nav::-webkit-scrollbar { display: none !important; }

/* All nav buttons visible, equal width, scroll horizontally */
html.is-mobile .sidebar nav > .nav-btn:not(.logout-btn) {
    display: flex !important;
    flex: 0 0 72px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    height: 64px !important;
    min-width: 72px !important;
    padding: 8px 4px 6px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    scroll-snap-align: start !important;
    border: none !important;
    font-size: 0 !important;
}
html.is-mobile .sidebar nav > .nav-btn:not(.logout-btn) .nav-icon {
    font-size: 1.4rem !important;
    line-height: 1 !important;
    display: block !important;
}
html.is-mobile .sidebar nav > .nav-btn:not(.logout-btn) .nav-label {
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    display: block !important;
    letter-spacing: 0.01em !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
}
html.is-mobile .sidebar nav > .nav-btn.active:not(.logout-btn) .nav-label {
    color: #facc15 !important;
}
/* Hide logout from bottom bar */
html.is-mobile .logout-btn {
    display: none !important;
}

/* ── Toast: above bottom nav ────────────────────────────────── */
html.is-mobile #toastContainer {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    right: 10px !important;
    left: 10px !important;
}
html.is-mobile #toastContainer > div {
    min-width: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0.82rem !important;
}

/* ── Modals: slide up from bottom ───────────────────────────── */
html.is-mobile .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
}
html.is-mobile .modal-overlay .data-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    padding: 20px 16px 32px !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
}
html.is-mobile .modal-overlay .data-card input,
html.is-mobile .modal-overlay .data-card select,
html.is-mobile .modal-overlay .data-card textarea {
    font-size: 16px !important;
    padding: 12px !important;
}
html.is-mobile .modal-overlay button { min-height: 44px !important; }

/* ── Prevent iOS input zoom ─────────────────────────────────── */
html.is-mobile input,
html.is-mobile select,
html.is-mobile textarea { font-size: 16px !important; }

/* ── Section headings ───────────────────────────────────────── */
html.is-mobile main h1 { font-size: 1.15rem !important; }
html.is-mobile main p  { font-size: 0.82rem !important; }
html.is-mobile section > div:first-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* ── LEADS ──────────────────────────────────────────────────── */
html.is-mobile .lead-card-inner {
    flex-direction: column !important;
    gap: 10px !important;
}
/* Hide the right column on mobile — put essentials below name */
html.is-mobile .lead-card-right {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
}
html.is-mobile .lead-date { display: none !important; }
html.is-mobile .lead-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
}
html.is-mobile .lead-action-btn {
    padding: 10px 6px !important;
    font-size: 0.75rem !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Lead tab bar: horizontal scroll */
html.is-mobile .lead-tab {
    font-size: 0.76rem !important;
    padding: 8px 10px !important;
    flex-shrink: 0 !important;
}
html.is-mobile #leadTabBar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
}
html.is-mobile #leadTabBar::-webkit-scrollbar { display: none !important; }
html.is-mobile .lead-filter-btn {
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
html.is-mobile #leadFilterRow {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
}

/* ── JOBS (Ops) ─────────────────────────────────────────────── */
html.is-mobile .ops-folder-card {
    padding: 12px 12px !important;
}
html.is-mobile .ops-folder-card:hover { transform: none !important; }
/* Prevent text overflow in job cards */
html.is-mobile .ops-folder-card * {
    max-width: 100% !important;
    word-break: break-word !important;
}
html.is-mobile .ops-folder-card > div:first-child {
    flex-direction: column !important;
    gap: 10px !important;
}
/* Job card inner: avatar + info row */
html.is-mobile .ops-folder-card > div:first-child > div:first-child {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
    width: 100% !important;
}
/* Price/actions on right: move below on mobile */
html.is-mobile .ops-folder-card > div:first-child > div:last-child {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-left: 0 !important;
    width: 100% !important;
}
html.is-mobile #opsSearch {
    font-size: 16px !important;
    padding: 12px 14px 12px 44px !important;
}

/* ── JOB DETAIL ─────────────────────────────────────────────── */
html.is-mobile #jobPageHeader {
    padding-bottom: 10px !important;
}
html.is-mobile #jobPageHeader > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
}
html.is-mobile #jobPageHeader > div > div:last-child {
    flex-wrap: wrap !important;
    gap: 6px !important;
}
/* Tab bar: horizontal scroll */
html.is-mobile #jobPageTabBar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 14px !important;
}
html.is-mobile #jobPageTabBar::-webkit-scrollbar { display: none !important; }
html.is-mobile #jobPageTabBar button {
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
}
/* Tab content: remove fixed widths */
html.is-mobile #jobTabContent > div { max-width: 100% !important; }

/* ── ALL 2-column grids → 1 column on mobile ────────────────── */
@media (max-width: 900px) {
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns:repeat(auto-fill,minmax(200px"],
    [style*="grid-template-columns:repeat(auto-fill,minmax(140px"],
    [style*="grid-template-columns:repeat(auto-fill,minmax(150px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── Dashboard on mobile ────────────────────────────────────── */
html.is-mobile #viewDashboard .main { padding: 10px !important; }
/* Stat row → 2×2 grid */
html.is-mobile #viewDashboard > div > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}
html.is-mobile #viewDashboard > div > div:nth-child(2) > div {
    padding: 14px !important;
    border-radius: 12px !important;
}
html.is-mobile #viewDashboard > div > div:nth-child(2) > div > div:nth-child(2) {
    font-size: 1.6rem !important;
}
/* Section grid → 1 col */
html.is-mobile #viewDashboard > div > div:nth-child(3) {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}
/* Banner */
html.is-mobile #viewDashboard > div > div:nth-child(1) {
    padding: 16px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
}
html.is-mobile #viewDashboard > div > div:nth-child(1) > div:first-child > div:first-child {
    font-size: 1.2rem !important;
}

/* ── Pipeline / Chasing ─────────────────────────────────────── */
html.is-mobile .pipeline-folder-card { border-radius: 10px !important; }
html.is-mobile .pipeline-folder-header { padding: 12px 12px !important; }

/* ── Schedule: horizontal scroll ───────────────────────────── */
html.is-mobile #scheduleScrollWrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
html.is-mobile .calendar-header-grid,
html.is-mobile .calendar-grid { min-width: 560px !important; }

/* ── Holiday ────────────────────────────────────────────────── */
html.is-mobile .holiday-top-grid { grid-template-columns: 1fr !important; }

/* ── Stats ──────────────────────────────────────────────────── */
html.is-mobile .stats-kpi-grid,
html.is-mobile #statsGrid { grid-template-columns: 1fr 1fr !important; }

/* ── Quote builder ──────────────────────────────────────────── */
html.is-mobile .quote-builder-container {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
}
html.is-mobile .quote-controls {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
    padding: 14px !important;
}
html.is-mobile .quote-preview-pane { padding: 14px !important; width: 100% !important; }
html.is-mobile #liveQuotePreview { width: 100% !important; min-height: auto !important; padding: 16px !important; }

/* ── Staff panel ────────────────────────────────────────────── */
html.is-mobile #staffPanel, html.is-mobile #staffPanelOverlay {
    width: 100% !important;
    max-width: 100% !important;
}

/* ── Upload zone: compact ───────────────────────────────────── */
html.is-mobile [id^="jobUploadZone"] { padding: 20px 14px !important; }

/* ── Checklist: touch targets ───────────────────────────────── */
html.is-mobile [id^="jobChecklistContainer"] > div > div {
    padding: 12px !important;
}
html.is-mobile [id^="jobChecklistContainer"] input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
}

/* ── Tablet (769-1024px) ────────────────────────────────────── */
@media (min-width: 901px) and (max-width: 1024px) {
    .sidebar { width: 200px !important; min-width: 200px !important; }
    .main-wrapper { margin-left: 200px !important; }
    .nav-btn { font-size: 0.8rem !important; padding: 10px 10px !important; }
}

/* ── iOS safe areas ─────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    html.is-mobile .sidebar {
        height: calc(64px + env(safe-area-inset-bottom)) !important;
    }
}

/* ── PWA standalone mode: extra top padding ─────────────────── */
@media (display-mode: standalone) {
    html.is-mobile .top-bar {
        padding-top: max(12px, env(safe-area-inset-top)) !important;
        height: calc(52px + env(safe-area-inset-top)) !important;
    }
}

/* ── Smooth tap highlight ───────────────────────────────────── */
html.is-mobile button,
html.is-mobile a,
html.is-mobile [onclick] {
    -webkit-tap-highlight-color: rgba(250,204,21,0.15);
    -webkit-touch-callout: none;
}

/* ── Scrollbar hide on mobile ───────────────────────────────── */
html.is-mobile ::-webkit-scrollbar { display: none !important; }
html.is-mobile * { scrollbar-width: none !important; }

/* ==================================================================
   MOBILE COVERAGE — newer inline-styled components (dashboard,
   jobs, job page). Scoped so the schedule & quote builder keep
   their own dedicated mobile layouts.
   ================================================================== */

/* Collapse multi-column inline grids to a single column */
html.is-mobile #viewDashboard [style*="grid-template-columns"],
html.is-mobile #viewOps [style*="grid-template-columns"],
html.is-mobile #viewJobDetail [style*="grid-template-columns"],
html.is-mobile #viewLeads [style*="grid-template-columns"],
html.is-mobile #viewChasing [style*="grid-template-columns"],
html.is-mobile #viewStats [style*="grid-template-columns"],
html.is-mobile #viewHoliday [style*="grid-template-columns"],
html.is-mobile #viewSuppliers [style*="grid-template-columns"],
html.is-mobile #viewTimesheets [style*="grid-template-columns"],
html.is-mobile #viewQuotePipeline [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
}

/* Job page progress bar — scroll instead of squashing the 5 steps */
html.is-mobile .job-progress-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 12px 10px !important;
}
html.is-mobile .job-progress-bar::-webkit-scrollbar { display: none !important; }

/* Job page tab bar — horizontal scroll for the row of tabs */
html.is-mobile #jobPageTabBar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
}
html.is-mobile #jobPageTabBar::-webkit-scrollbar { display: none !important; }

/* Jobs view stage tabs — horizontal scroll, tappable */
html.is-mobile #opsTabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
}
html.is-mobile #opsTabs::-webkit-scrollbar { display: none !important; }
html.is-mobile #opsTabs button { flex-shrink: 0 !important; }

/* Job cards — comfortable padding on a phone */
html.is-mobile .ops-folder-card { padding: 14px !important; }

/* Trim oversized inline padding on cards & panels */
html.is-mobile #viewDashboard [style*="padding:40px"],
html.is-mobile #viewDashboard [style*="padding: 40px"],
html.is-mobile #viewDashboard [style*="padding:32px"],
html.is-mobile #viewDashboard [style*="padding:24px"],
html.is-mobile #viewJobDetail [style*="padding:24px"],
html.is-mobile #viewOps [style*="padding:22px"] {
    padding: 14px !important;
}

/* Inline-styled modals — keep the panel within the screen */
html.is-mobile [style*="position:fixed"][style*="inset:0"] > div {
    max-width: 94vw !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
}

/* Wide tables scroll rather than overflowing the screen */
html.is-mobile .main table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Prevent the whole page being dragged sideways */
html.is-mobile .main { max-width: 100vw !important; }


/* ================================================================
   MOBILE LAYOUT - media-query driven (no JavaScript dependency).
   Applies ONLY at <=900px wide. Desktop (>900px) never loads any
   of these rules, so the desktop layout is completely unaffected.
   ================================================================ */
@media (max-width: 900px) {
  html .mobile-only { display: flex !important; }
  html .desktop-only { display: none !important; }
  html body { overflow: auto !important; height: auto !important; min-height: 100vh !important; }
  html #appContainer { flex-direction: column !important; height: auto !important; min-height: 100vh !important; }
  html .main-wrapper { margin-left: 0 !important; margin-bottom: 80px !important; width: 100% !important; }
  html .main { flex: 1 !important; overflow-y: visible !important; padding: 14px !important; }
  html .top-bar { height: 50px !important; padding: 0 16px !important; position: sticky !important; top: 0 !important; z-index: 100 !important; }
  html .top-bar h2 { font-size: 1rem !important; }
  html .top-bar span { font-size: 0.68rem !important; }
  html .sidebar { position: fixed !important;
    width: 100% !important;
    min-width: unset !important;
    height: 80px !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    flex-direction: row !important;
    align-items: stretch !important;
    background: #0f172a !important;
    border-top: 1px solid rgba(250,204,21,0.2) !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3) !important; }
  html .logo-area { display: none !important; }
  html .sidebar nav { display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important; }
  html .sidebar nav::-webkit-scrollbar { display: none !important; }
  html .nav-btn { flex-direction: column !important;
    gap: 4px !important;
    padding: 10px 2px 8px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 0 !important; /* Hide default text */
    min-width: 0 !important;
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    height: 80px !important;
    width: auto !important;
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.15s !important; }
  html .nav-btn .nav-icon { font-size: 1.6rem !important;
    line-height: 1 !important;
    display: block !important; }
  html .nav-btn .nav-label { font-size: 0.6rem !important;
    font-weight: 700 !important;
    display: block !important;
    color: #64748b !important;
    letter-spacing: 0.02em !important;
    margin-top: 2px !important; }
  html .nav-btn.active { background: rgba(250,204,21,0.08) !important;
    box-shadow: inset 0 3px 0 #facc15 !important; }
  html .nav-btn.active .nav-label { color: #facc15 !important; }
  html .logout-btn { margin-top: 0 !important; flex: 0 0 64px !important; }
  html .logout-btn .nav-label { color: #ef4444 !important; }
  html .lead-tab { font-size: 0.78rem !important; padding: 8px 12px !important; }
  html .lead-filter-btn { font-size: 0.72rem !important; padding: 5px 11px !important; }
  html .lead-tag, html .lead-tag-request, html .lead-tag-muted { max-width: 120px !important; overflow: hidden !important;
    text-overflow: ellipsis !important; white-space: nowrap !important; }
  html section h1 { font-size: 1.15rem !important; }
  html section > div:first-child { flex-wrap: wrap !important; gap: 8px !important; }
  html .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  html .modal-overlay .data-card { width: 100% !important; max-width: 100% !important; max-height: 93vh !important;
    overflow-y: auto !important; padding: 22px 16px 32px !important;
    border-radius: 20px 20px 0 0 !important; margin: 0 !important; }
  html #staffPanelOverlay { width: 100% !important; }
  html .quote-builder-container { display: flex !important; flex-direction: column !important; height: auto !important; overflow: visible !important; }
  html .quote-controls { width: 100% !important; max-width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; max-height: 55vh !important; overflow-y: auto !important; padding: 14px !important; }
  html .quote-preview-pane { padding: 16px !important; width: 100% !important; }
  html #liveQuotePreview { width: 100% !important; min-height: auto !important; padding: 20px !important; }
  html #scheduleScrollWrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  html .calendar-header-grid, html .calendar-grid { min-width: 560px !important; }
  html .calendar-day { min-height: 100px !important; padding: 6px 4px !important; }
  html .calendar-day input { font-size: 11px !important; padding: 3px !important; }
  html .holiday-top-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  html .stats-kpi-grid, html #statsGrid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  html input, html select, html textarea { font-size: 16px !important; }
  .nav-perm-hidden,
html .nav-perm-hidden,
html .sidebar nav > .nav-perm-hidden,
html .sidebar nav > .nav-btn.nav-perm-hidden { display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important; }
  html .mobile-only { display: flex !important; }
  html .desktop-only { display: none !important; }
  html body { overflow-x: hidden !important; }
  html #appContainer { flex-direction: column !important;
    min-height: 100vh !important; }
  html .main-wrapper { margin-left: 0 !important;
    margin-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    min-height: 0 !important; }
  html .main { padding: 12px !important;
    overflow-x: hidden !important; }
  html .top-bar { height: 52px !important;
    padding: 0 14px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important; }
  html .top-bar h2 { font-size: 0.95rem !important; }
  html .top-bar span { font-size: 0.7rem !important; }
  html .sidebar { position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    width: 100% !important;
    min-width: unset !important;
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) 0 !important;
    flex-direction: row !important;
    background: #0f172a !important;
    border-top: 1px solid rgba(250,204,21,0.15) !important;
    z-index: 9999 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.35) !important; }
  html .logo-area { display: none !important; }
  html .sidebar nav { display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 64px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    gap: 0 !important;
    scroll-snap-type: x mandatory !important; }
  html .sidebar nav::-webkit-scrollbar { display: none !important; }
  html .sidebar nav > .nav-btn:not(.logout-btn) { display: flex !important;
    flex: 0 0 72px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    height: 64px !important;
    min-width: 72px !important;
    padding: 8px 4px 6px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    scroll-snap-align: start !important;
    border: none !important;
    font-size: 0 !important; }
  html .sidebar nav > .nav-btn:not(.logout-btn) .nav-icon { font-size: 1.4rem !important;
    line-height: 1 !important;
    display: block !important; }
  html .sidebar nav > .nav-btn:not(.logout-btn) .nav-label { font-size: 0.58rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    display: block !important;
    letter-spacing: 0.01em !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important; }
  html .sidebar nav > .nav-btn.active:not(.logout-btn) .nav-label { color: #facc15 !important; }
  html .logout-btn { display: none !important; }
  html #toastContainer { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    right: 10px !important;
    left: 10px !important; }
  html #toastContainer > div { min-width: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0.82rem !important; }
  html .modal-overlay { align-items: flex-end !important;
    padding: 0 !important; }
  html .modal-overlay .data-card { width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    padding: 20px 16px 32px !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important; }
  html .modal-overlay .data-card input,
html .modal-overlay .data-card select,
html .modal-overlay .data-card textarea { font-size: 16px !important;
    padding: 12px !important; }
  html .modal-overlay button { min-height: 44px !important; }
  html input,
html select,
html textarea { font-size: 16px !important; }
  html main h1 { font-size: 1.15rem !important; }
  html main p { font-size: 0.82rem !important; }
  html section > div:first-child { flex-wrap: wrap !important;
    gap: 8px !important; }
  html .lead-card-inner { flex-direction: column !important;
    gap: 10px !important; }
  html .lead-card-right { flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important; }
  html .lead-date { display: none !important; }
  html .lead-card-actions { display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important; }
  html .lead-action-btn { padding: 10px 6px !important;
    font-size: 0.75rem !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; }
  html .lead-tab { font-size: 0.76rem !important;
    padding: 8px 10px !important;
    flex-shrink: 0 !important; }
  html #leadTabBar { overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important; }
  html #leadTabBar::-webkit-scrollbar { display: none !important; }
  html .lead-filter-btn { font-size: 0.72rem !important;
    padding: 5px 10px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important; }
  html #leadFilterRow { overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important; }
  html .ops-folder-card { padding: 12px 12px !important; }
  html .ops-folder-card:hover { transform: none !important; }
  html .ops-folder-card * { max-width: 100% !important;
    word-break: break-word !important; }
  html .ops-folder-card > div:first-child { flex-direction: column !important;
    gap: 10px !important; }
  html .ops-folder-card > div:first-child > div:first-child { flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
    width: 100% !important; }
  html .ops-folder-card > div:first-child > div:last-child { flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-left: 0 !important;
    width: 100% !important; }
  html #opsSearch { font-size: 16px !important;
    padding: 12px 14px 12px 44px !important; }
  html #jobPageHeader { padding-bottom: 10px !important; }
  html #jobPageHeader > div { flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important; }
  html #jobPageHeader > div > div:last-child { flex-wrap: wrap !important;
    gap: 6px !important; }
  html #jobPageTabBar { overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 14px !important; }
  html #jobPageTabBar::-webkit-scrollbar { display: none !important; }
  html #jobPageTabBar button { flex-shrink: 0 !important;
    padding: 10px 14px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important; }
  html #jobTabContent > div { max-width: 100% !important; }
  html #viewDashboard .main { padding: 10px !important; }
  html #viewDashboard > div > div:nth-child(2) { display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important; }
  html #viewDashboard > div > div:nth-child(2) > div { padding: 14px !important;
    border-radius: 12px !important; }
  html #viewDashboard > div > div:nth-child(2) > div > div:nth-child(2) { font-size: 1.6rem !important; }
  html #viewDashboard > div > div:nth-child(3) { grid-template-columns: 1fr !important;
    gap: 0 !important; }
  html #viewDashboard > div > div:nth-child(1) { padding: 16px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important; }
  html #viewDashboard > div > div:nth-child(1) > div:first-child > div:first-child { font-size: 1.2rem !important; }
  html .pipeline-folder-card { border-radius: 10px !important; }
  html .pipeline-folder-header { padding: 12px 12px !important; }
  html #scheduleScrollWrapper { overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important; }
  html .calendar-header-grid,
html .calendar-grid { min-width: 560px !important; }
  html .holiday-top-grid { grid-template-columns: 1fr !important; }
  html .stats-kpi-grid,
html #statsGrid { grid-template-columns: 1fr 1fr !important; }
  html .quote-builder-container { flex-direction: column !important;
    height: auto !important;
    overflow: visible !important; }
  html .quote-controls { width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
    padding: 14px !important; }
  html .quote-preview-pane { padding: 14px !important; width: 100% !important; }
  html #liveQuotePreview { width: 100% !important; min-height: auto !important; padding: 16px !important; }
  html #staffPanel, html #staffPanelOverlay { width: 100% !important;
    max-width: 100% !important; }
  html [id^="jobUploadZone"] { padding: 20px 14px !important; }
  html [id^="jobChecklistContainer"] > div > div { padding: 12px !important; }
  html [id^="jobChecklistContainer"] input[type="checkbox"] { width: 22px !important;
    height: 22px !important; }
  html .sidebar { height: calc(64px + env(safe-area-inset-bottom)) !important; }
  html .top-bar { padding-top: max(12px, env(safe-area-inset-top)) !important;
        height: calc(52px + env(safe-area-inset-top)) !important; }
  html button,
html a,
html [onclick] { -webkit-tap-highlight-color: rgba(250,204,21,0.15);
    -webkit-touch-callout: none; }
  html ::-webkit-scrollbar { display: none !important; }
  html * { scrollbar-width: none !important; }
  html #viewDashboard [style*="grid-template-columns"],
html #viewOps [style*="grid-template-columns"],
html #viewJobDetail [style*="grid-template-columns"],
html #viewLeads [style*="grid-template-columns"],
html #viewChasing [style*="grid-template-columns"],
html #viewStats [style*="grid-template-columns"],
html #viewHoliday [style*="grid-template-columns"],
html #viewSuppliers [style*="grid-template-columns"],
html #viewTimesheets [style*="grid-template-columns"],
html #viewQuotePipeline [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  html .job-progress-bar { overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 12px 10px !important; }
  html .job-progress-bar::-webkit-scrollbar { display: none !important; }
  html #jobPageTabBar { overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important; }
  html #jobPageTabBar::-webkit-scrollbar { display: none !important; }
  html #opsTabs { overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important; }
  html #opsTabs::-webkit-scrollbar { display: none !important; }
  html #opsTabs button { flex-shrink: 0 !important; }
  html .ops-folder-card { padding: 14px !important; }
  html #viewDashboard [style*="padding:40px"],
html #viewDashboard [style*="padding: 40px"],
html #viewDashboard [style*="padding:32px"],
html #viewDashboard [style*="padding:24px"],
html #viewJobDetail [style*="padding:24px"],
html #viewOps [style*="padding:22px"] { padding: 14px !important; }
  html [style*="position:fixed"][style*="inset:0"] > div { max-width: 94vw !important;
    max-height: 88vh !important;
    overflow-y: auto !important; }
  html .main table { display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important; }
  html .main { max-width: 100vw !important; }
}

/* ============================================================
   v17 — Sidebar refresh + top bar overhaul + Lucide icon defaults
   ============================================================ */

/* Sidebar — slimmer brand header, tighter spacing */
.sidebar { padding: 18px 14px; }

.sidebar-header {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 6px 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.brand-mark { width: 100%; max-width: 130px; height: auto; display: block; }
.brand-sub {
    font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(250,204,21,0.55);
    margin-top: 10px;
}

.sidebar nav {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    margin: 0 -4px; padding: 0 4px;
}

/* Nav items — Lucide icons */
.nav-btn {
    padding: 9px 12px;
    margin-bottom: 2px;
    gap: 11px;
    position: relative;
    border-radius: 8px;
    font-size: 0.84rem;
    color: #94a3b8;
}
.nav-btn .nav-icon {
    width: 18px; height: 18px;
    stroke-width: 2;
    flex-shrink: 0;
    color: inherit;
}
.nav-btn .nav-label { font-size: 0.84rem; font-weight: 600; line-height: 1; }
.nav-btn:hover { background: rgba(255,255,255,0.06); color: #f1f5f9; transform: none; }

/* Refined active state — subtle accent bar + soft tint */
.nav-btn.active {
    background: rgba(250,204,21,0.10);
    color: #fde047;
    box-shadow: none;
    font-weight: 700;
}
.nav-btn.active::before {
    content: '';
    position: absolute;
    left: -4px; top: 6px; bottom: 6px;
    width: 3px;
    background: var(--accent, #facc15);
    border-radius: 0 4px 4px 0;
}
.nav-btn.active .nav-icon { transform: none; color: #fde047; }

/* Nav badge dot — leads / chasing / jobs counts */
.nav-badge {
    position: absolute;
    top: 7px; right: 9px;
    color: white;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 20px;
    min-width: 22px;
    text-align: center;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    border: 1.5px solid rgba(0,0,0,0.15);
}

/* Sign out — pinned bottom, soft red */
.logout-btn.desktop-only {
    margin-top: auto;
    background: rgba(239,68,68,0.08) !important;
    color: #fca5a5 !important;
}
.logout-btn.desktop-only:hover { background: rgba(239,68,68,0.18) !important; color: #fecaca !important; }
.logout-btn.desktop-only .nav-icon { color: inherit; }

/* Top bar — brand mark + page title at left, user identity at right */
.top-bar {
    height: 64px !important;
    background: white;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 28px !important;
    position: sticky; top: 0; z-index: 50;
}
.top-bar-left  { display: flex; align-items: center; gap: 14px; }
.top-bar-right { display: flex; align-items: center; gap: 11px; }

.top-brand-mark { height: 36px; width: auto; display: block; }
.top-bar h2#viewTitle {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.01em;
}

.user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #facc15;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    user-select: none;
}
.user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
    max-width: 220px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Generic Lucide icon defaults — anywhere a data-lucide appears */
[data-lucide], .lucide {
    display: inline-block;
    width: 18px; height: 18px;
    stroke-width: 2;
    vertical-align: -3px;
}

/* Old mobile rules used font-size to size the emoji; for Lucide SVGs we set width/height directly */
html.is-mobile .sidebar .nav-btn .nav-icon { width: 22px !important; height: 22px !important; font-size: 0 !important; }
@media (max-width: 900px) {
    .top-bar { height: 54px !important; padding: 0 16px !important; }
    .top-brand-mark { height: 28px; }
    .top-bar h2#viewTitle { font-size: 0.95rem; }
    .user-name { display: none; }
    .user-avatar { width: 30px; height: 30px; font-size: 0.66rem; }
}

/* ============================================================
   v18 — Skeleton loading states (shimmer placeholder bars)
   ============================================================ */
@keyframes skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    display: inline-block;
    vertical-align: middle;
}
.skeleton-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
}
.skeleton-row {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 0; border-bottom: 1px solid #f8fafc;
}
.skeleton-row:last-child { border-bottom: none; }
.skeleton-circle {
    width: 36px; height: 36px;
    border-radius: 9px; flex-shrink: 0;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

/* ============================================================
   v19 — Refined card elevation: hairline border + barely-there shadow
   Targets both .data-card class AND inline-styled white cards.
   The hover lift only fires on clickable cards (have onclick).
   ============================================================ */
.data-card,
div[style*="background:white"][style*="border:1px solid var(--border)"],
div[style*="background:#fff"][style*="border:1px solid var(--border)"] {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.2s ease, transform 0.18s ease;
}
.data-card[onclick]:hover,
div[style*="background:white"][style*="border:1px solid var(--border)"][onclick]:hover,
div[style*="background:#fff"][style*="border:1px solid var(--border)"][onclick]:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* ============================================================
   RESPONSIVE HARDENING  (full phone + tablet support)
   - Compact mode (is-mobile) now covers phones AND tablets (<=1024px)
   - is-tablet refines the larger end (769-1024) to use the extra width
   - Generic safety net for JS-built grids, wide tables and overflow
   - Everything scoped to is-mobile / is-tablet / sub-1200 tablet — desktop untouched
   ============================================================ */

/* 1. Keep the page from sliding sideways; contain wide media */
html.is-mobile .main { overflow-x: hidden !important; }
html.is-mobile .main img,
html.is-mobile .main pre { max-width: 100% !important; height: auto !important; }

/* 2. Wide data tables scroll on their own rather than breaking the page */
html.is-mobile .main table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
}

/* 3. Fixed multi-column grids built inline in app.js -> single column on phones */
html.is-mobile [style*="grid-template-columns:1fr 1fr"],
html.is-mobile [style*="grid-template-columns: 1fr 1fr"],
html.is-mobile [style*="grid-template-columns:repeat(3"],
html.is-mobile [style*="grid-template-columns: repeat(3"],
html.is-mobile [style*="grid-template-columns:repeat(4"],
html.is-mobile [style*="grid-template-columns: repeat(4"],
html.is-mobile [style*="1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
}
html.is-mobile .ops-grid { grid-template-columns: 1fr !important; }

/* 4. Tablets have room for two columns -> restore them where phones used one */
html.is-tablet [style*="grid-template-columns:1fr 1fr"],
html.is-tablet [style*="grid-template-columns: 1fr 1fr"],
html.is-tablet [style*="grid-template-columns:repeat(3"],
html.is-tablet [style*="grid-template-columns: repeat(3"],
html.is-tablet [style*="grid-template-columns:repeat(4"],
html.is-tablet [style*="grid-template-columns: repeat(4"],
html.is-tablet [style*="1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
}
html.is-tablet .ops-grid,
html.is-tablet .stats-kpi-grid,
html.is-tablet #statsGrid { grid-template-columns: 1fr 1fr !important; }
html.is-tablet .main { padding: 20px !important; }

/* 5. Comfortable tap targets on touch screens (forms/actions, not the bottom nav) */
html.is-mobile .main button:not(.nav-btn),
html.is-mobile .main .btn,
html.is-mobile .main select,
html.is-mobile .main input[type="submit"] { min-height: 42px !important; }

/* 6. Larger tablets that keep the desktop sidebar (1025-1200px): degrade gracefully */
@media (min-width: 1025px) and (max-width: 1200px) {
    .sidebar { width: 210px !important; min-width: 210px !important; }
    .main-wrapper { margin-left: 210px !important; }
    .ops-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; }
    .main [style*="grid-template-columns:repeat(4"],
    .main [style*="grid-template-columns: repeat(4"],
    .main [style*="1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
    .main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   MOBILE/TABLET — SCHEDULE SCROLL FIX + APP-FEEL POLISH
   ============================================================ */

/* Schedule: the wrapper must stay screen-width so its OWN overflow scrolls,
   and the grid inside is forced wider so every day (Mon-Sun) is swipeable.
   min-width:0 lets it shrink inside flex parents instead of pushing off-screen. */
html.is-mobile #scheduleScrollWrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
}
html.is-mobile #calendarGrid { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }

/* Tablets have room for the full week without scrolling */
html.is-tablet #scheduleScrollWrapper > * { min-width: 0 !important; }

/* Safe-area insets — content and the bottom nav clear the iPhone home bar */
html.is-mobile .sidebar {
    height: calc(80px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}
html.is-mobile .main-wrapper {
    margin-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}

/* Native-feeling scroll & tap */
html.is-mobile .main { -webkit-overflow-scrolling: touch !important; }
html.is-mobile, html.is-mobile body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
html.is-mobile * { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* Any horizontal scroll strip (job tab bar, etc.) gets momentum + no clipping surprises */
html.is-mobile [style*="overflow-x:auto"],
html.is-mobile [style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
}

/* ============================================================
   SHOW / iPad OPTIMISATION  (mobile + tablet only)
   Lead capture + quoting tuned for touch use at the stand.
   ============================================================ */

/* ---- ADD LEAD: fast, finger-friendly capture ---- */
html.is-mobile #addLeadModal .data-card {
    padding: 22px 18px calc(26px + env(safe-area-inset-bottom)) !important;
}
html.is-mobile #addLeadModal .crm-input {
    padding: 15px 14px !important;
    font-size: 16px !important;            /* no iOS zoom */
    margin-bottom: 13px !important;
    border-radius: 10px !important;
}
html.is-mobile #addLeadModal .crm-input::placeholder { font-size: 15px; }
html.is-mobile #addLeadModal h2 { font-size: 1.3rem !important; margin-bottom: 16px !important; }
html.is-mobile #addLeadModal button {
    min-height: 54px !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
}

/* ---- QUOTE BUILDER: one clean scroll, big controls, reachable actions ---- */
html.is-mobile .quote-controls {
    max-height: none !important;          /* kill the nested 55vh scroll box */
    overflow: visible !important;
    padding: 16px !important;
}
html.is-mobile .quote-controls .crm-input,
html.is-mobile .quote-controls select {
    min-height: 50px !important;
    font-size: 16px !important;
    padding: 13px 14px !important;
}
html.is-mobile .quote-builder-container button {
    min-height: 50px !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
}
/* category / option cards easier to tap */
html.is-mobile .quote-cat-card { padding: 16px !important; }
html.is-mobile .quote-preview-pane { padding: 12px 0 0 0 !important; }
html.is-mobile #liveQuotePreview {
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
}
/* on iPad the preview reads better with a little breathing room above */
html.is-tablet .quote-preview-pane::before {
    content: "Customer preview";
    display: block;
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-muted);
    margin: 4px 0 10px;
}

/* ---- SCHEDULE (forceful): phone scrolls the week, tablet fits all 7 ---- */
/* Phone: pin the scroll box to the screen and make the grid explicitly wide
   so every day is swipeable. :not(.is-tablet) outranks the generic mobile rules. */
html.is-mobile:not(.is-tablet) #scheduleScrollWrapper {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: scroll !important;
    -webkit-overflow-scrolling: touch !important;
}
html.is-mobile:not(.is-tablet) #scheduleScrollWrapper > *,
html.is-mobile:not(.is-tablet) #calendarGrid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
/* Tablet: full week fits, no horizontal scroll */
html.is-tablet #scheduleScrollWrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; width: 100% !important; max-width: 100vw !important; min-width: 0 !important; }
html.is-tablet #scheduleScrollWrapper > *,
html.is-tablet #calendarGrid,
html.is-tablet .calendar-grid,
html.is-tablet .calendar-header-grid {
    width: 100% !important;
    min-width: 0 !important;
}

/* ============================================================
   SCHEDULE SCROLL — THE ACTUAL FIX
   Flex items default to min-width:auto and refuse to shrink below their
   content. The 700px week grid was ballooning the whole app shell instead
   of letting the inner scroll box scroll. Allow the shell to shrink to the
   screen, so the scroller can do its job and Friday becomes reachable.
   ============================================================ */
html.is-mobile body,
html.is-mobile #appContainer,
html.is-mobile .main-wrapper,
html.is-mobile .main,
html.is-mobile section,
html.is-mobile #viewSched {
    min-width: 0 !important;
    max-width: 100vw !important;
}
html.is-mobile #viewSched { overflow-x: hidden !important; }
/* The scroll box and the grid inside it stay screen-width; the table overflows
   it (700px) and therefore scrolls horizontally. */
html.is-mobile #scheduleScrollWrapper,
html.is-mobile #calendarGrid {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
}
html.is-mobile #scheduleScrollWrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

/* ============================================================
   FINAL SCHEDULE FIX — scroll horizontally on phone AND tablet
   The week grid is as wide as its content (far wider than any screen), so it
   must scroll on every compact device. Hard-cap the scroll box and grid to the
   viewport; the wide table then overflows and scrolls instead of being clipped.
   Appended last so it wins over every earlier schedule rule.
   ============================================================ */
html.is-mobile #scheduleScrollWrapper,
html.is-mobile #calendarGrid {
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}


/* ── Lead avatar: building-type icon + corner badges ──────────────────────── */
.lead-av-ill {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lead-av-ill svg { width: 118%; height: 118%; }
.lead-av-faded svg { opacity: 0.34; }
.lead-av-over {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.12rem;
    letter-spacing: 0.02em;
    z-index: 2;
    text-shadow: 0 1px 1px rgba(255,255,255,0.55);
}
.lead-av-big {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.02em;
}
.lead-av-ini {
    position: absolute;
    left: -5px;
    top: -6px;
    background: #0f172a;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.35;
    padding: 2px 6px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    z-index: 2;
}
.lead-av-src {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.lead-av-src svg { width: 13px; height: 13px; }

/* ============================================================
   DESIGN POLISH LAYER  (v1) — refinement pass, appended last so
   it intentionally refines shared components without changing
   layout/behaviour. Tokens first, then components.
   ============================================================ */
:root {
    /* Layered, softer shadows for a more premium feel */
    --shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-md: 0 4px 12px rgba(15,23,42,0.07), 0 2px 4px rgba(15,23,42,0.04);
    --shadow-lg: 0 12px 32px rgba(15,23,42,0.12), 0 4px 8px rgba(15,23,42,0.05);
    --ring: 0 0 0 3px rgba(37,99,235,0.18);
    --radius: 12px;
}

/* Smoother global typography */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.006em; }
h1, h2, h3, h4 { letter-spacing: -0.02em; }

/* Cards — softer, layered shadow + gentle hover lift */
.data-card {
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Buttons — consistent sizing, refined shadow, clearer press feedback */
.primary-btn, .dark-btn, .danger-btn, .pipeline-action-btn, .pipeline-won-btn {
    letter-spacing: -0.01em;
}
.primary-btn { box-shadow: var(--shadow-xs); }
.primary-btn:hover { box-shadow: 0 6px 16px rgba(250,204,21,0.35); }
.dark-btn:hover { box-shadow: var(--shadow-md); }

/* Inputs — clearer, professional focus ring (replaces harsh outline) */
input, select, textarea, .crm-input {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus, .crm-input:focus {
    outline: none !important;
    border-color: #2563eb !important;
    box-shadow: var(--ring) !important;
}

/* Keyboard focus visibility on interactive controls (accessibility + polish) */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: 8px;
}

/* Modals — deeper, softer backdrop + lift on the card inside */
.modal-overlay { background: rgba(15,23,42,0.55); backdrop-filter: blur(6px); }
.modal-overlay .data-card { box-shadow: var(--shadow-lg); }

/* Refined selection colour */
::selection { background: rgba(250,204,21,0.35); }

/* Subtle, modern scrollbars (desktop) */
@media (min-width: 1025px) {
    * { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
    *::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
    *::-webkit-scrollbar-track { background: transparent; }
}

/* Reusable EMPTY STATE (for screens with no data yet) */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 48px 24px; color: var(--text-muted);
}
.empty-state .empty-icon {
    width: 56px; height: 56px; border-radius: 16px; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; font-size: 1.7rem;
}
.empty-state .empty-title { font-size: 1rem; font-weight: 800; color: var(--text-main); margin-bottom: 4px; letter-spacing: -0.01em; }
.empty-state .empty-sub { font-size: 0.85rem; max-width: 340px; line-height: 1.5; margin-bottom: 16px; }

/* Reusable SKELETON shimmer (grey placeholders while loading) */
@keyframes nff-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
    background: #eef1f6;
    background-image: linear-gradient(90deg, #eef1f6 0px, #f6f8fb 200px, #eef1f6 400px);
    background-size: 800px 100%;
    animation: nff-shimmer 1.3s infinite linear;
    border-radius: 8px;
}
.skeleton-row { height: 14px; margin: 8px 0; }

/* ============================================================
   NFF UI KIT styles (motion & graphics components)
   ============================================================ */
.nff-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:nff-spin .7s linear infinite;vertical-align:-2px;}
@keyframes nff-spin{to{transform:rotate(360deg);}}
@keyframes nff-bounce{0%,100%{transform:scale(1);}30%{transform:scale(1.5);}60%{transform:scale(.85);}}
.nff-bounce{animation:nff-bounce .5s;}

/* Toggle switch */
.nff-tog{width:46px;height:26px;border-radius:20px;background:#cbd5e1;position:relative;cursor:pointer;transition:.25s;flex:none;}
.nff-tog.on{background:var(--success);}
.nff-tog i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.25s cubic-bezier(.4,1.4,.5,1);}
.nff-tog.on i{left:23px;}

/* Segmented control */
.nff-seg{position:relative;display:inline-flex;background:#f1f5f9;border-radius:11px;padding:4px;}
.nff-seg-opt{position:relative;z-index:2;padding:7px 15px;font-size:.8rem;font-weight:700;color:var(--text-muted);cursor:pointer;transition:color .2s;white-space:nowrap;}
.nff-seg-opt.on{color:var(--primary);}
.nff-seg-pill{position:absolute;top:4px;bottom:4px;left:4px;width:0;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(15,23,42,.12);transition:.28s cubic-bezier(.4,.8,.3,1);z-index:1;}

/* Gauge card entrance */
.nff-gauge{opacity:0;animation:nff-fade .5s ease .1s forwards;}
@keyframes nff-fade{to{opacity:1;}}

/* Animated SVG line-draw (used by the revenue hero chart) */
.nff-draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:nff-draw 1.8s ease .2s forwards;}
@keyframes nff-draw{to{stroke-dashoffset:0;}}
.nff-rise{opacity:0;transform:translateY(14px);animation:nff-riseA .6s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes nff-riseA{to{opacity:1;transform:none;}}

/* KPI stat tile hover lift */
.nff-kpi{transition:transform .18s ease, box-shadow .18s ease;}
.nff-kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}

/* Job progress ring sweep */
.nff-ring .fg{transition:stroke-dashoffset 1.1s cubic-bezier(.3,.8,.3,1);}

/* Filter buttons rendered as segmented-control options */
.nff-seg .lead-filter-btn{position:relative;z-index:2;background:transparent !important;border:none !important;color:var(--text-muted) !important;padding:7px 15px !important;font-weight:700;box-shadow:none !important;border-radius:8px;white-space:nowrap;transition:color .2s;}
.nff-seg .lead-filter-btn.lead-filter-active{color:var(--primary) !important;background:transparent !important;}

/* Sidebar section headings (Overview / Operations) */
.navgroup{font-size:0.62rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:#5b6b85;padding:16px 12px 7px;}
html.is-mobile .navgroup{display:none;}

/* Inline-editable quote preview (cues are hover/focus only so they never appear in the PDF) */
.q-edit{border-radius:5px;transition:box-shadow .12s ease, background .12s ease;}
.q-edit:hover{background:#eff6ff;box-shadow:0 0 0 3px #eff6ff, 0 0 0 4px #bfdbfe;cursor:text;}
.q-edit:focus{outline:none;background:#fff;box-shadow:0 0 0 3px #fff, 0 0 0 4px #2563eb;}