/* ---- Reset & Base ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Action Septic color scheme */
    --green-dark: #004237;
    --green-mid: #017151;
    --green-deep: #002620;
    --navy: #012871;
    --gold: #ffb100;
    --gold-dim: rgba(255, 177, 0, 0.12);

    /* App theme — light */
    --bg-primary: #f0f2f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e8ecf0;
    --bg-card: #ffffff;
    --border: #d1d5db;
    --border-light: #e5e7eb;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #999999;

    /* Semantic accents */
    --accent-green: #017151;
    --accent-green-dim: rgba(1, 113, 81, 0.1);
    --accent-amber: #ffb100;
    --accent-amber-dim: rgba(255, 177, 0, 0.12);
    --accent-red: #dc2626;
    --accent-red-dim: rgba(220, 38, 38, 0.1);
    --accent-blue: #012871;
    --accent-blue-dim: rgba(1, 40, 113, 0.1);

    /* Sidebar */
    --sidebar-width: 220px;
    --sidebar-bg: #004237;
    --sidebar-hover: #017151;
    --sidebar-text: rgba(255, 255, 255, 0.8);
    --sidebar-text-active: #ffffff;
    --sidebar-accent: #ffb100;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ---- Login Overlay ---- */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    width: 360px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.login-logo {
    max-width: 220px;
    margin-bottom: 24px;
}

.login-box h2 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--green-dark);
    margin-bottom: 8px;
}

.login-box p {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.login-box input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 16px;
}

.login-box button {
    width: 100%;
    padding: 12px;
    background: var(--green-dark);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.login-box button:hover {
    background: var(--green-mid);
}

.error-msg {
    color: var(--accent-red);
    margin-top: 12px;
    font-size: 0.875rem;
}

.success-msg {
    color: var(--green-mid);
    margin-top: 12px;
    font-size: 0.875rem;
}

.forgot-link {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
}
.forgot-link:hover {
    color: var(--green-mid);
    text-decoration: underline;
}

/* ---- App Shell ---- */
.app-shell {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ---- Sidebar ---- */
.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 100;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-logo {
    height: 36px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    object-position: left center;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Scroll when content exceeds available height — admin nav can exceed
       viewport on short screens. min-height:0 is required for flex children
       to allow overflow (Firefox in particular). */
    overflow-y: auto;
    min-height: 0;
    /* Tidy scrollbar on WebKit; Firefox uses scrollbar-width/color. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Section header in the sidebar nav — visually groups related items without
   requiring collapse/expand JS. Muted, small, uppercase. */
.nav-section-header {
    padding: 14px 14px 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    user-select: none;
}
.nav-section-header:first-child {
    padding-top: 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: all 0.15s;
}

.nav-item:hover {
    background: rgba(255,255,255,0.08);
    color: var(--sidebar-text-active);
}

.nav-item.active {
    background: rgba(255,255,255,0.12);
    color: var(--sidebar-accent);
    font-weight: 600;
}

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

/* Badge counter on sidebar nav items (e.g. stale quote count). Amber so
   it draws attention without the alarm of red; sits at the end of the row. */
.nav-badge-count {
    margin-left: auto;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: #f5b342;
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.sidebar-footer {
    padding: 14px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.sidebar-overlay {
    display: none;
}

/* ---- App Body ---- */
.app-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.page {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.page.active {
    display: flex;
}

/* ---- Hamburger (mobile only) ---- */
.hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
}

/* ---- Top Bar ---- */
.topbar {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.topbar-row {
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.topbar-row-top {
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 14px;
}

.topbar-row-filters {
    gap: 8px;
    padding-bottom: 10px;
    flex-wrap: wrap;
}

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

.app-title {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--green-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Back arrow in detail page headers */
.topbar-back {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 1rem;
    margin-right: 6px;
    line-height: 1;
}
.topbar-back:hover {
    color: var(--green-dark);
}

/* Dashboard: minimal topbar on desktop — user has the sidebar highlight
   to tell them they're on the dashboard, so the redundant "Dashboard"
   title in the topbar just takes space. On mobile there's no sidebar
   visible, so context disappears too — force the title back in via the
   `@media (max-width: 640px)` block at the bottom of this file. */
.page-dashboard .app-title {
    display: none;
}

.lead-badge {
    background: var(--accent-green-dim);
    color: var(--accent-green);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.topbar-row-filters select,
.topbar-row-filters input {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: var(--font-family);
}

.topbar-row-filters select {
    min-width: 120px;
}

.topbar-row-filters input[type="text"] {
    min-width: 180px;
    flex: 1;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Global "+ New Delivery" button — pill on desktop, FAB on mobile */
.btn-new-delivery {
    font-size: 0.8rem;
    padding: 6px 12px;
}
.btn-new-delivery .btn-new-delivery-icon {
    display: none;
}

.refresh-time {
    color: var(--text-muted);
    font-size: 0.7rem;
    white-space: nowrap;
}

/* ---- Buttons ---- */
.btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    border: none;
    font-family: var(--font-family);
    transition: filter 0.15s;
    white-space: nowrap;
}

.btn:hover {
    filter: brightness(1.1);
}

.btn:active {
    filter: brightness(0.95);
}

.btn-primary {
    background: var(--green-dark);
    color: #fff;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-amber {
    background: var(--gold);
    color: var(--green-dark);
    font-weight: 700;
}

.btn-small {
    padding: 4px 10px;
    font-size: 0.75rem;
}

.btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ---- Main Content ---- */
.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.panel-left {
    width: 40%;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    overflow: hidden;
    background: var(--bg-secondary);
}

.panel-right {
    flex: 1;
    position: relative;
}

/* ---- Table ---- */
.table-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
}

.leads-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.leads-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.leads-table th {
    background: var(--bg-primary);
    color: var(--text-secondary);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.leads-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leads-table tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}

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

.leads-table tbody tr.selected {
    background: var(--accent-green-dim);
}

.leads-table tbody tr.contacted-row {
    opacity: 0.5;
}

.col-tier {
    width: 60px;
    text-align: center;
}

.col-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tier-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tier-high {
    background: var(--accent-green-dim);
    color: var(--accent-green);
}

.tier-medium {
    background: var(--accent-amber-dim);
    color: #b07800;
}

.tier-low {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
}

/* ---- Age badges ---- */
.age-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.age-new {
    background: var(--accent-green-dim);
    color: var(--accent-green);
}

.age-active {
    background: var(--accent-blue-dim);
    color: var(--accent-blue);
}

.age-aging {
    background: var(--accent-amber-dim);
    color: #b07800;
}

.age-old {
    background: var(--accent-red-dim);
    color: var(--accent-red);
}

.col-age {
    width: 80px;
    text-align: center;
}

.phone-link {
    color: var(--accent-blue);
    text-decoration: none;
}

.phone-link:hover {
    text-decoration: underline;
}

.value-high {
    color: #b07800;
    font-weight: 700;
}

/* ---- Contacted Section ---- */
.contacted-section {
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.contacted-toggle {
    width: 100%;
    background: var(--bg-primary);
    border: none;
    color: var(--text-secondary);
    padding: 10px 16px;
    font-size: 0.82rem;
    font-family: var(--font-family);
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contacted-toggle:hover {
    background: var(--bg-tertiary);
}

.toggle-icon {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.toggle-icon.open {
    transform: rotate(90deg);
}

.contacted-list {
    max-height: 200px;
    overflow-y: auto;
}

.contacted-table tbody tr {
    opacity: 0.5;
}

/* ---- Map ---- */
#map {
    width: 100%;
    height: 100%;
}

.leaflet-popup-content-wrapper {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}

.leaflet-popup-tip {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border) !important;
}

.leaflet-popup-close-button {
    color: var(--text-secondary) !important;
}

.popup-content {
    min-width: 250px;
    font-family: var(--font-family);
}

.popup-content h4 {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.popup-content .popup-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.popup-content .popup-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.popup-content .popup-fields {
    font-size: 0.8rem;
    line-height: 1.6;
}

.popup-content .popup-fields label {
    color: var(--text-secondary);
    font-weight: 600;
}

.popup-content .popup-actions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* ---- Lead Detail Panel ---- */
.lead-detail-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    height: 100%;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    z-index: 1000;
    overflow-y: auto;
    padding: 24px;
    box-shadow: -4px 0 24px rgba(0,0,0,0.08);
}

.detail-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
}

.detail-close:hover {
    color: var(--text-primary);
}

.lead-detail-panel h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    padding-right: 30px;
    color: var(--green-dark);
}

.detail-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.detail-meta span {
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 600;
}

.detail-jurisdiction {
    background: var(--accent-green-dim);
    color: var(--accent-green);
}

.detail-type {
    background: var(--accent-amber-dim);
    color: #b07800;
}

.detail-fields {
    margin-bottom: 20px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.85rem;
}

.detail-row label {
    color: var(--text-secondary);
    font-weight: 600;
    flex-shrink: 0;
    margin-right: 12px;
}

.detail-row span {
    text-align: right;
    word-break: break-word;
}

.detail-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.note-field label,
.salesperson-field label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 6px;
}

.note-field textarea,
.salesperson-field input {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 10px 12px;
    font-family: var(--font-family);
    font-size: 0.85rem;
    resize: vertical;
    margin-bottom: 8px;
}

/* ---- Jurisdiction colors ---- */
.jurisdiction-lake-country  { background: rgba(74, 222, 128, 0.12); color: #16a34a; }
.jurisdiction-west-kelowna  { background: rgba(96, 165, 250, 0.12); color: #2563eb; }
.jurisdiction-kelowna       { background: rgba(251, 146, 60, 0.12); color: #c2410c; }
.jurisdiction-vernon        { background: rgba(192, 132, 252, 0.12); color: #7c3aed; }
.jurisdiction-rdco          { background: rgba(45, 212, 191, 0.12); color: #0d9488; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ---- Mobile Tab Toggle (hidden on desktop) ---- */
.mobile-tabs {
    display: none;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    /* -- Sidebar: off-canvas -- */
    .sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        height: 100%;
        width: 260px;
        z-index: 2000;
        transition: left 0.25s ease;
    }
    .sidebar.open {
        left: 0;
    }
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 1999;
        display: none;
    }
    .sidebar-overlay.open {
        display: block;
    }

    /* -- Hamburger visible -- */
    .hamburger {
        display: flex;
    }

    /* -- Header -- */
    .topbar-row-top {
        padding-top: 12px;
        padding-bottom: 10px;
    }
    .app-title {
        font-size: 0.95rem;
    }
    /* Dashboard title re-shown on mobile: sidebar is hidden behind the
       hamburger so the page identifier would otherwise be invisible. */
    .page-dashboard .app-title {
        display: inline;
    }
    .lead-badge {
        font-size: 0.65rem;
        padding: 2px 8px;
    }
    .refresh-time {
        display: none;
    }
    .topbar-actions {
        gap: 6px;
    }
    .topbar-actions .btn {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    /* -- Global "+ New Delivery" becomes a floating FAB on mobile -- */
    .topbar-actions .btn-new-delivery {
        position: fixed;
        right: 16px;
        /* Sit above the 56px bottom-nav + safe-area */
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
        width: 56px;
        height: 56px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        box-shadow: 0 6px 20px rgba(0, 66, 55, 0.35);
        z-index: 90;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-new-delivery .btn-new-delivery-label {
        display: none;
    }
    .btn-new-delivery .btn-new-delivery-icon {
        display: inline-block;
        font-size: 2rem;
        font-weight: 400;
        line-height: 1;
    }

    /* -- Filters: 2-column grid -- */
    .topbar-row-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 0 10px 8px;
    }
    .topbar-row-filters select,
    .topbar-row-filters input {
        padding: 10px 12px;
        font-size: 0.85rem;
        min-width: 0;
        width: 100%;
    }
    .topbar-row-filters input[type="text"] {
        grid-column: 1 / -1;
        min-width: 0;
    }

    /* -- Mobile tab bar -- */
    .mobile-tabs {
        display: flex;
        flex-shrink: 0;
        border-bottom: 1px solid var(--border);
        background: var(--bg-secondary);
    }
    .mobile-tab {
        flex: 1;
        padding: 10px;
        background: var(--bg-primary);
        border: none;
        color: var(--text-secondary);
        font-family: var(--font-family);
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: all 0.15s;
    }
    .mobile-tab.active {
        background: var(--bg-secondary);
        color: var(--green-dark);
        border-bottom-color: var(--green-dark);
    }

    /* -- Main layout: tab-switched panels -- */
    .main-content {
        flex-direction: column;
        position: relative;
        flex: 1;
        overflow: hidden;
    }
    .panel-left,
    .panel-right {
        width: 100%;
        min-width: 0;
        border-right: none;
        display: none;
        flex: 1;
        overflow: auto;
    }
    .panel-left.active {
        display: flex;
        flex-direction: column;
    }
    .panel-right.active {
        display: block;
        flex: 1;
    }
    .panel-right #map {
        height: 100%;
    }

    /* -- Table: hide extra columns -- */
    .col-jurisdiction,
    .col-type,
    .col-applicant,
    .col-phone {
        display: none;
    }
    .leads-table td {
        padding: 12px 8px;
    }
    .leads-table th {
        padding: 10px 8px;
    }
    .col-address {
        max-width: 140px;
    }

    /* -- Detail panel: full-screen overlay -- */
    .lead-detail-panel {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 2000;
        border-left: none;
        padding: 20px 16px;
    }
    .detail-close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        top: 8px;
        right: 8px;
    }

    /* -- Login box -- */
    .login-box {
        width: 90%;
        max-width: 360px;
        padding: 30px 24px;
    }
}

/* ---- Empty state ---- */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.empty-state p {
    font-size: 0.9rem;
}

/* ---- Loading spinner ---- */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--green-dark);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}