/* ==========================================================================
   1. CORE GLOBAL THEME & VARIABLES (LIGHT WORKSPACE THEME)
   ========================================================================== */
:root {
    --bg-gradient: #f4f6f9;
    --card-bg: #ffffff;
    --glass-border: #e2e8f0;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --accent-color: #00a389;
    --accent-hover: #00bfa1;
    --system-color: #3b82f6;
    --danger-color: #e53e3e;
    --warning-color: #d69e2e;
    --radius-lg: 12px;
    --radius-md: 8px;
    --sidebar-width: 260px;
    --transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --app-font: "Lato", "Aptos", "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--app-font);
    -webkit-font-smoothing: antialiased;
}

body {
    background: transparent;
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ==========================================================================
   2. MOBILE NAV TOGGLE (HAMBURGER BUTTON / THREE-LINE MENU)
   ========================================================================== */
.mobile-nav-toggle {
    display: none; /* Hidden on Desktop */
    position: fixed;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: #ffffff;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    z-index: 1100;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0;
}

.mobile-nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Animated Transform states from 3 lines to X shape when open */
body.nav-open .mobile-nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .mobile-nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .mobile-nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    z-index: 90;
}

/* ==========================================================================
   3. STRUCTURAL PLATFORM LAYOUT
   ========================================================================== */
.dashboard-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.sidebar {
    width: var(--sidebar-width);
    background: #ffffff;
    border-right: 1px solid var(--glass-border);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 100;
    transition: transform var(--transition-fast);
}

.logo-container {
    text-align: center;
    margin-bottom: 32px;
}

.sidebar-logo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--glass-border);
    padding: 4px;
}

.nav-links { list-style: none; }
.nav-links li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-bottom: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}
.nav-links li:hover, .nav-links li.active { color: var(--text-primary); background: #f1f5f9; }
.nav-links li.active { background: rgba(0, 163, 137, 0.1); color: var(--accent-color); border-left: 4px solid var(--accent-color); }
.nav-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-label { font-size: 0.75rem; color: var(--text-secondary); }
.sidebar-auth-footer { padding: 20px 16px; border-top: 1px solid var(--glass-border); margin-top: auto; }

/* Main Content Structural Region */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 40px;
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
}

.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}
.header-titles h2 { font-size: 1.8rem; font-weight: 700; color: var(--text-primary); }

/* ==========================================================================
   4. UI COMPONENT ELEMENTS (NARROW INTAKE FORM REFINEMENTS)
   ========================================================================== */
.card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
}

/* TARGETED FIX: Locks down forms to be narrower and centered on desktop viewports */
.intake-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 520px; /* Perfectly narrows down input entries field lines */
    margin: 0 left;   /* Clean alignment structure */
}

/* Adjust layout tables to take full spacing width out outside form views */
.content-grid.layout-split {
    display: grid;
    grid-template-columns: 1.1fr 1.8fr; /* Responsive side-by-side balancing map */
    gap: 24px;
    align-items: start;
}

.card h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 16px; color: var(--text-primary); }
.upload-btn { background: var(--accent-color); color: #ffffff; border: none; padding: 12px 24px; font-size: 0.95rem; font-weight: 600; border-radius: var(--radius-md); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.upload-btn:hover { background: var(--accent-hover); }
.workflow-btn { width: 100%; margin-top: 12px; padding: 14px; }
.attach-btn { background: #f8fafc; border: 1px solid var(--glass-border); color: var(--text-primary); }
.attach-btn:hover { background: #e2e8f0; }
.report-statement-form {
    width: 100%;
}
.report-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.report-export-btn {
    width: auto !important;
    min-width: 260px;
}
.report-preview-shell {
    max-width: min(1120px, calc(100vw - 32px)) !important;
    width: min(1120px, calc(100vw - 32px)) !important;
    max-height: 92vh !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
.report-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-right: 36px;
}
.report-preview-kicker {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}
.report-preview-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.report-preview-scroll {
    overflow: auto;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: #f8fafc;
    max-height: calc(92vh - 116px);
}
.report-preview-document {
    width: 1100px;
    min-height: 620px;
    padding: 28px;
    background: #ffffff;
    color: #111827;
    font-family: var(--app-font);
}
.report-preview-document-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 20px;
}
.report-preview-document-header h1 {
    font-size: 22px;
    margin: 0 0 6px 0;
    color: #111827;
}
.report-preview-document-header p,
.report-preview-generated {
    font-size: 12px;
    color: #475569;
    margin: 0;
}
.report-preview-generated {
    text-align: right;
}
.report-preview-filter-strip {
    display: flex;
    gap: 12px 20px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #334155;
    margin-bottom: 18px;
}
.report-preview-table-wrap {
    overflow: visible;
}

.sign-out-btn { width: 100%; background: transparent; border: 1px solid rgba(229, 62, 62, 0.2); color: var(--danger-color); padding: 10px; border-radius: var(--radius-md); cursor: pointer; font-weight: 600; }
.sign-out-btn:hover { background: rgba(229, 62, 62, 0.05); }

.input-group { display: flex; flex-direction: column; gap: 8px; }
.input-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.input-group input, .input-group select, .input-group textarea { background: #f8fafc; border: 1px solid var(--glass-border); padding: 12px 16px; color: var(--text-primary); border-radius: var(--radius-md); font-size: 0.95rem; width: 100%; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { outline: none; border-color: var(--accent-color); background: #ffffff; }
.form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ==========================================================================
   5. OPERATIONAL GRIDS & DASHBOARD ANALYTICS SETS
   ========================================================================== */
.dashboard-analytics-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; }
.analytics-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.metric-segment { background: #f8fafc; border: 1px solid var(--glass-border); padding: 16px; border-radius: var(--radius-md); }
.segment-number { font-size: 1.8rem; font-weight: 700; color: var(--text-primary); }
.trend-badge.positive { background: rgba(0, 163, 137, 0.1); color: var(--accent-color); }
.trend-badge.processing { background: rgba(59, 130, 246, 0.1); color: var(--system-color); }
.progress-track { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.progress-fill.accent-color { background: var(--accent-color); }
.progress-fill.system-color { background: var(--system-color); }

.dashboard-charts-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; margin-top: 16px; }
.chart-container-block { background: #f8fafc; border: 1px solid var(--glass-border); padding: 16px; border-radius: var(--radius-md); }
.pie-chart-graphic { width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(var(--accent-color) 0% 0%, var(--danger-color) 0% 100%); }
.bar-track { flex: 1; height: 12px; background: #e2e8f0; border-radius: 6px; overflow: hidden; }
.bar-fill.vehicles-bar { background: var(--accent-color); }
.bar-fill.services-bar { background: var(--system-color); }
.bar-fill.expenses-bar { background: var(--warning-color); }

.financial-summary-banner { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.mini-financial-card { background: #f8fafc; border: 1px solid var(--glass-border); border-radius: var(--radius-md); display: flex; overflow: hidden; }
.status-paid-theme .mini-card-decorator { background: var(--accent-color); }
.status-unpaid-theme .mini-card-decorator { background: var(--danger-color); }
.mini-card-content { padding: 14px 16px; }
.mini-value { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); }

.filter-dashboard-bar { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; background: #f8fafc; border: 1px solid var(--glass-border); padding: 16px; border-radius: var(--radius-md); }
.filter-control-element select, .filter-control-element input { padding: 8px 12px; font-size: 0.85rem; background: #ffffff; border: 1px solid var(--glass-border); color: var(--text-primary); border-radius: 6px; }
.search-grow { flex: 1; min-width: 180px; }
.filter-label { display: block; font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }

/* ==========================================================================
   6. LEDGER HIGH-DENSITY GRID SYSTEM (DESKTOP WORKSPACE TABLES)
   ========================================================================== */
.table-container { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.table-header { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: var(--text-secondary); padding: 12px 16px; }
.table-row { background: #ffffff; border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 14px 16px; align-items: center; font-size: 0.9rem; }
.table-row:hover { background: #f8fafc; }

.expenditure-grid { display: grid; grid-template-columns: 1.1fr 1.8fr 0.7fr 1.5fr 1.2fr 1.1fr; gap: 12px; }
.registry-grid { display: grid; grid-template-columns: 1.2fr 1.2fr 1.5fr 1.8fr 1.1fr 1.5fr; gap: 12px; }
.service-grid { display: grid; grid-template-columns: 1fr 1.1fr 1.3fr 1.1fr 1.2fr 1.1fr 1.1fr 2fr 1.1fr; gap: 12px; }
.amount-cell-text { font-weight: 700; color: var(--text-primary); }
.inline-select-paid { background: rgba(0, 163, 137, 0.1); border: 1px solid var(--accent-color); color: var(--accent-color); }
.inline-select-unpaid { background: rgba(229, 62, 62, 0.1); border: 1px solid var(--danger-color); color: var(--danger-color); }
#serviceIntakeSection .inline-status-dropdown {
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.icon-btn.scan-active-badge { background: rgba(0, 163, 137, 0.1); color: var(--accent-color); }
.icon-btn.share-accent { background: rgba(0, 163, 137, 0.1); color: var(--accent-color); }
.icon-btn.edit-accent { background: rgba(59, 130, 246, 0.1); color: var(--system-color); }
.icon-btn.delete-accent { background: rgba(229, 62, 62, 0.1); color: var(--danger-color); }

/* Modals overlays config */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(30, 41, 59, 0.4); backdrop-filter: blur(4px); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-content { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.3); padding: 24px; border-radius: var(--radius-lg); width: 100%; max-width: 500px; position: relative; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); }

/* ==========================================================================
   7. HARDWARE MEDIA CORE UPDATES (MOBILE RESPONSIVE HAMBURGER SWITCH ENGINE)
   ========================================================================== */
@media (max-width: 1024px) {
    .dashboard-analytics-grid, .content-grid.layout-split { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    /* Reveal Hamburger Navigation System Controls */
    .mobile-nav-toggle { display: flex; }
    
    /* Reveal overlay only when sidebar dashboard menu is activated */
    body.nav-open .sidebar-overlay { display: block; }

    /* Transform Left Sidebar into a Hidden Side Drawer Panel */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 270px;
        z-index: 1000;
        box-shadow: 4px 0 24px rgba(15, 23, 42, 0.15);
        transform: translateX(-105%); /* Securely hidden off-screen by default */
    }

    /* Pull Sidebar Drawer out into view when toggle button triggers state */
    body.nav-open .sidebar {
        transform: translateX(0);
    }

    /* Restore full sidebar elements inside the hidden mobile panel drawer */
    .logo-container, .sidebar-auth-footer {
        display: block !important;
    }
    
    .sidebar-logo {
        width: 90px;
        height: 90px;
    }

    .nav-links {
        display: block !important;
        width: 100%;
    }

    .nav-links li {
        margin-bottom: 8px;
        padding: 12px 16px;
        flex-direction: row; /* Aligns description text cleanly next to icons */
        font-size: 0.9rem;
        text-align: left;
    }
    
    .nav-links li.active {
        border-bottom: none;
        border-left: 4px solid var(--accent-color);
    }

    /* Main Content Padding Adjustments */
    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 72px 16px 40px 16px; /* High top padding avoids overlapping with the fixed menu button */
    }

    /* Mobile Intakes Form Scaling Rules */
    .intake-form {
        max-width: 100%; /* Spans naturally on compact mobile views */
    }

    .analytics-row, .dashboard-charts-layout, .financial-summary-banner { grid-template-columns: 1fr; gap: 12px; }
    .dashboard-charts-layout { display: flex; flex-direction: column; }
    .report-filter-grid,
    #reportsHubSection .form-row-split {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    #reportsHubSection .report-statement-form .input-group input,
    #reportsHubSection .report-statement-form .input-group select {
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 12px 16px !important;
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
        border-radius: var(--radius-md) !important;
        box-sizing: border-box !important;
        appearance: none;
        -webkit-appearance: none;
    }
    #reportsHubSection .report-statement-form .input-group input[type="date"] {
        display: block;
        vertical-align: middle;
    }
    .report-export-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .report-export-btn {
        width: 100% !important;
        min-width: 0;
    }
    .report-preview-shell {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: 92vh !important;
        padding: 16px !important;
        gap: 12px !important;
    }
    .report-preview-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding-right: 34px;
    }
    .report-preview-actions {
        position: sticky;
        top: 0;
        z-index: 2;
        justify-content: stretch;
    }
    .report-preview-actions button {
        flex: 1;
        white-space: nowrap;
    }
    .report-preview-scroll {
        max-height: calc(92vh - 150px);
    }
    .report-preview-document {
        width: 860px;
        min-height: 560px;
        padding: 22px;
    }
    .report-preview-document-header {
        flex-direction: column;
        gap: 8px;
    }
    .report-preview-generated {
        text-align: left;
    }
    
    /* Transform hard datagrids to clear vertical component cards */
    .table-header { display: none !important; }
    .table-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 16px !important; background: #ffffff !important; border: 1px solid var(--glass-border) !important; }
    .table-row > span, .table-row > div { display: flex; justify-content: space-between; align-items: center; width: 100%; }
    .table-row > span::before { font-size: 0.75rem; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; }

    /* Card Field Title Labels Injection Engine */
    .registry-grid > span:nth-child(1)::before { content: "Reg Number:"; }
    .registry-grid > span:nth-child(2)::before { content: "Owner ID:"; }
    .registry-grid > span:nth-child(3)::before { content: "Address:"; }
    .registry-grid > span:nth-child(4)::before { content: "Email Log:"; }
    .registry-grid > span:nth-child(5)::before { content: "Mobile:"; }

    .service-grid > span:nth-child(1)::before { content: "Log Date:"; }
    .service-grid > span:nth-child(2)::before { content: "Vehicle No:"; }
    .service-grid > span:nth-child(3)::before { content: "Owner Name:"; }
    .service-grid > span:nth-child(4)::before { content: "Mobile:"; }
    .service-grid > span:nth-child(5)::before { content: "Address:"; }
    .service-grid > span:nth-child(6)::before { content: "Amount Base:"; }
    .service-grid > div:nth-child(7)::before { content: "Payment Status:"; }
    .service-grid > span:nth-child(8)::before { content: "Job Summary:"; }

    #serviceIntakeSection #serviceTableBody .service-grid > span:nth-child(7)::before { content: "Billing Reminder:"; }
    #serviceIntakeSection #serviceTableBody .service-grid > div:nth-child(8)::before { content: "Payment Status:"; }
    #serviceIntakeSection #serviceTableBody .service-grid > span:nth-child(9)::before { content: "Job Summary:"; }

    .expenditure-grid > span:nth-child(1)::before { content: "Procure Date:"; }
    .expenditure-grid > span:nth-child(2)::before { content: "Item Name:"; }
    .expenditure-grid > span:nth-child(3)::before { content: "Quantity:"; }
    .expenditure-grid > span:nth-child(4)::before { content: "Vendor Supplier:"; }
    .expenditure-grid > span:nth-child(5)::before { content: "Total Outlay:"; }

    .table-row > .row-actions { border-top: 1px solid var(--glass-border); padding-top: 12px; }
    .filter-dashboard-bar { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   TARGETED FIXES (APPENDED TO THE BOTTOM OF YOUR STYLE.CSS)
   ========================================================================== */

/* 1. Pin Close Buttons to Top-Right Corner of Modals */
.modal-content {
    position: relative; /* Ensures the close button aligns to this box */
    padding-top: 32px;  /* Gives space at the top so text doesn't overlap button */
}

.close-modal-corner {
    position: absolute !important;
    top: 16px !important;
    right: 20px !important;
    font-size: 1.6rem !important;
    font-weight: bold !important;
    color: #64748b !important;
    cursor: pointer !important;
    line-height: 1 !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: background 0.2s, color 0.2s !important;
}

.close-modal-corner:hover {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}

/* 2. Standardize Full Width for Vehicle Registry and Service Intake Cards */
#vehicleRegistrySection .card,
#serviceIntakeSection .card,
.table-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* 3. Align and Style Edit / Delete Action Buttons Uniformly */
.row-actions {
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Beautiful custom style for the Edit button */
.icon-btn.edit-accent {
    background: rgba(59, 130, 246, 0.08) !important;
    color: #3b82f6 !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.icon-btn.edit-accent:hover {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

.icon-btn.share-accent {
    background: rgba(0, 163, 137, 0.08) !important;
    color: var(--accent-color) !important;
    border: 1px solid rgba(0, 163, 137, 0.2) !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.icon-btn.share-accent:hover {
    background: var(--accent-color) !important;
    color: #ffffff !important;
}

.service-share-preview {
    width: 100% !important;
    min-height: 190px !important;
    resize: vertical;
    background: #f8fafc !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 10px !important;
    padding: 12px !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    color: #1d1d1f !important;
    box-sizing: border-box !important;
}

.service-share-actions {
    flex-wrap: wrap;
}

/* ==========================================================================
   UNIFORM GRID MATRIX FIX FOR LOG VIEWS
   ========================================================================== */

/* 1. Force all data wrapper containers to expand to full panel spacing */
#vehicleRegistrySection .table-container,
#serviceIntakeSection .table-container,
#expenditureSection .table-container {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* 2. Standardize Desktop Rows to stretch across the full width of the screen */
#vehicleRegistrySection .table-row,
#serviceIntakeSection .table-row,
#expenditureSection .table-row,
#vehicleRegistrySection .table-header,
#serviceIntakeSection .table-header,
#expenditureSection .table-header {
    width: 100% !important;
    align-items: center !important;
}

/* 3. Explicitly tell the browser how to space out your columns on Desktop screens */
@media (min-width: 769px) {
    
    /* Vehicle Registry Grid: Fits 5 data columns + 1 Action button column */
    .registry-grid {
        display: grid !important;
        grid-template-columns: 1.2fr 1.2fr 1.5fr 1.8fr 1.1fr 1.2fr !important;
        gap: 16px !important;
    }

    /* Service Intake Grid: Fits 7 data columns + 1 Action button column */
    .service-grid {
        display: grid !important;
        grid-template-columns: 1fr 1.1fr 1.3fr 1.1fr 1.1fr 1.2fr 1.8fr 1.2fr !important;
        gap: 16px !important;
    }
}

/* Beautiful custom style for the Delete button */
.icon-btn.delete-accent {
    background: rgba(229, 62, 62, 0.08) !important;
    color: #e53e3e !important;
    border: 1px solid rgba(229, 62, 62, 0.2) !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.icon-btn.delete-accent:hover {
    background: #e53e3e !important;
    color: #ffffff !important;
}

/* ==========================================================================
   PAGE-WIDE LAYOUT EXPANSION OVERRIDE
   ========================================================================== */

/* Forces the Vehicle and Service sections to drop split-screen columns and stretch page-wide */
#vehicleRegistrySection .content-grid.layout-split,
#serviceIntakeSection .content-grid.layout-split {
    display: block !important;
    width: 100% !important;
}

/* Forces the container cards holding the lists to utilize 100% of the workspace area */
#vehicleRegistrySection .card,
#serviceIntakeSection .card {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* Ensures individual entry rows stretch completely from edge to edge */
#vehicleRegistrySection .table-container,
#serviceIntakeSection .table-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================================
   SERVICE INTAKE 9-COLUMN DESKTOP PROFILE ALIGNMENT
   ========================================================================== */
@media (min-width: 769px) {
    /* Precise column math to fit all 9 fields perfectly inline on a single row */
    .service-grid {
        display: grid !important;
        grid-template-columns: 0.9fr 1.1fr 1.2fr 1.1fr 1.2fr 0.9fr 1.1fr 2fr 1.1fr !important;
        gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Wrap summary text neatly so long paragraphs do not distort row alignment */
    .service-grid > span:nth-child(8) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        padding-right: 8px;
    }
}

/* ==========================================================================
   REPORTS HUB REBUILD STYLING SYSTEM
   ========================================================================= */

/* Desktop Grid Blueprint spacing for Reports Logs Row */
@media (min-width: 769px) {
    .reports-log-grid {
        display: grid !important;
        grid-template-columns: 1.1fr 1.4fr 1.5fr 0.8fr !important;
        gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   MODERN DASHBOARD ANIMATION CORE PROPERTIES
   ========================================================================== */
@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 163, 137, 0.5); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(0, 163, 137, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 163, 137, 0); }
}

/* Ensure beautiful grid column adjustments on modern metric hero elements on tablets */
@media (max-width: 1024px) {
    #dashboardSection .analytics-row {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 600px) {
    #dashboardSection .analytics-row {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile responsive fallback definitions for Statement Logs */
@media (max-width: 768px) {
    .reports-log-grid > span:nth-child(1)::before { content: "Extracted On: "; }
    .reports-log-grid > strong:nth-child(2)::before { content: "Report Type: "; }
    .reports-log-grid > span:nth-child(3)::before { content: "Date Constraints: "; }
    
    /* Formatting for the strong element fallback titles on phone viewports */
    .reports-log-grid strong {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   MOBILE-FIRST DASHBOARD & DROPDOWN COMPONENT OVERRIDES
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Force sidebar drawer visibility override based on class injection state */
    body.nav-open .sidebar {
        transform: translateX(0) !important;
        display: flex !important;
        z-index: 9999 !important;
    }

    /* 2. Standardize Header layouts across all operational pages */
    #dashboardSection .top-header,
    #expenditureSection .top-header,
    #vehicleRegistrySection .top-header,
    #serviceIntakeSection .top-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        position: relative !important;
        gap: 12px !important;
        padding-top: 20px !important;
        width: 100% !important;
    }

    /* 3. Position the burger bars cleanly at the top right of every section header grid */
    .mobile-nav-toggle {
        position: absolute !important;
        top: 20px !important;
        right: 0px !important;
        display: block !important;
        cursor: pointer !important;
        z-index: 1000 !important;
    }

    /* 4. Match Button Sizes Perfectly across all forms triggers */
    #expenditureSection .top-header .upload-btn,
    #vehicleRegistrySection .top-header .upload-btn,
    #serviceIntakeSection .top-header .upload-btn {
        width: 100% !important;
        max-width: 240px !important;
        height: 42px !important;
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        border-radius: 6px !important;
        margin-top: 4px !important;
    }
}

/* ==========================================================================
   STANDARDIZED ACTION BUTTON BRANDING REBOOT (#EF3340)
   ========================================================================== */

/* 1. Global Rule: Forces matching color, sizes, and styling across Desktop & Mobile */
#expenditureSection .top-header .upload-btn,
#vehicleRegistrySection .top-header .upload-btn,
#serviceIntakeSection .top-header .upload-btn,
.upload-btn.primary-action-btn {
    background-color: #EF3340 !important;
    color: #ffffff !important;
    border: 1px solid #EF3340 !important;
    
    /* Standardizes desktop sizing properties to match your Service Log button precisely */
    padding: 10px 24px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    height: 42px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    cursor: pointer !important;
}

/* Premium smooth hover effect for the new color profile */
#expenditureSection .top-header .upload-btn:hover,
#vehicleRegistrySection .top-header .upload-btn:hover,
#serviceIntakeSection .top-header .upload-btn:hover,
.upload-btn.primary-action-btn:hover {
    background-color: #d1232f !important;
    border-color: #d1232f !important;
}

/* ==========================================================================
   MOBILE VIEWPORT RESPONSIVE REARRANGEMENT MATCH
   ========================================================================== */
@media (max-width: 768px) {
    /* 2. Forces all headers to structure vertically, providing clean layout room */
    #expenditureSection .top-header,
    #vehicleRegistrySection .top-header,
    #serviceIntakeSection .top-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        position: relative !important;
        padding-top: 16px !important;
        width: 100% !important;
    }

    /* 3. Forces the action buttons down below the title blocks on mobile viewports only */
    #expenditureSection .top-header .upload-btn,
    #vehicleRegistrySection .top-header .upload-btn,
    #serviceIntakeSection .top-header .upload-btn {
        width: 100% !important;
        max-width: 240px !important;
        height: 42px !important;
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
        
        /* Clear ordering layout push: positions buttons directly below title metadata descriptions */
        order: 3 !important;
        margin-top: 12px !important;
    }

    /* Keeps header text descriptions organized above the new button alignment */
    #expenditureSection .top-header .header-titles,
    #vehicleRegistrySection .top-header .header-titles,
    #serviceIntakeSection .top-header .header-titles {
        order: 1 !important;
    }

    /* Ensures the burger sidebar navigation stays anchored top-right safely */
    .mobile-nav-toggle {
        order: 2 !important;
        position: absolute !important;
        top: 16px !important;
        right: 0px !important;
    }
}

/* ==========================================================================
   MOBILE INTERFACE STABILITY & CORRUPTED OVERLAP CLEANUP
   ========================================================================== */

/* 1. Hide the secondary duplicate burger icon block seamlessly */
.top-header .mobile-nav-toggle + .mobile-nav-toggle,
.card .mobile-nav-toggle {
    display: none !important;
}

/* 2. Anchor Authenticated Profile elements safely at the bottom of the navigation drawer */
.sidebar {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0;
    left: 0;
}

/* Targets the profile, email, or logout container component within your sidebar menu structure */
.sidebar .user-profile-section,
.sidebar .auth-status-container,
.sidebar .logout-wrapper-box {
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--glass-border) !important;
    background: inherit !important;
}

/* 3. Universal App Footer Design */
.app-universal-footer {
    width: 100% !important;
    text-align: center !important;
    padding: 24px 16px !important;
    font-size: 0.8rem !important;
    color: var(--text-secondary);
    border-top: 1px solid var(--glass-border);
    margin-top: 48px !important;
    clear: both !important;
}

/* ==========================================================================
   MOBILE-FIRST DASHBOARD CLEAN SYNC MATRIX OVERHAUL
   ========================================================================== */
@media (max-width: 768px) {
    /* Compress Dashboard greeting header margins text */
    #dashboardSection .top-header {
        margin-bottom: 24px !important;
    }
    
    #dashboardSection h2 {
        font-size: 1.6rem !important;
        padding-right: 48px !important; /* Protects burger bar icon clipping space boundaries */
    }

    /* Standardize Metric Cards padding size properties cleanly on smartphones */
    #dashboardSection .analytics-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    #dashboardSection .metric-segment {
        padding: 18px 16px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.01) !important;
    }

    #dashboardSection .segment-number {
        font-size: 1.5rem !important;
        margin-top: 6px !important;
    }

    /* Stack Ratios progress indicators and center pie components beautifully */
    .dashboard-charts-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .pie-chart-graphic {
        width: 100px !important;
        height: 100px !important;
        margin: 0 auto !important;
    }
}

/* ==========================================================================
   RESET MOBILE MENU BURGER BAR SYSTEM
   ========================================================================== */

/* 1. Ensure any old section specific toggle code configurations are completely ignored */
.mobile-nav-toggle,
.top-header .mobile-nav-toggle,
.card .mobile-nav-toggle {
    display: none !important;
}

/* 2. Style the clean, high-visibility Standalone Global Trigger Button */
.universal-mobile-menu-trigger {
    display: none; /* Hidden on desktop screens */
}

/* When any modal is open on mobile, hide the hamburger menu icon */
body.modal-open .universal-mobile-menu-trigger {
    display: none !important;
}

@media (max-width: 768px) {
    .universal-mobile-menu-trigger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 32px !important;
        height: 22px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        position: fixed !important;
        top: 24px !important;
        right: 20px !important;
        z-index: 99999 !important;
        cursor: pointer !important;
    }

    .burger-bar-line {
        width: 100% !important;
        height: 3px !important;
        background-color: var(--text-primary, #1e293b) !important;
        border-radius: 2px !important;
        transition: transform 0.2s ease, opacity 0.2s ease !important;
    }

    /* Shift headers left slightly to make room for the new standalone button */
    #dashboardSection .top-header,
    #expenditureSection .top-header,
    #vehicleRegistrySection .top-header,
    #serviceIntakeSection .top-header,
    #reportsHubSection .top-header {
        padding-right: 48px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   PAYMENT STATUS BUTTON/DROPDOWN WIDTH INCREASE (MOBILE ONLY)
   ========================================================================== */
@media (max-width: 768px) {
    /* Targets "Paid" and "Not Paid" dropdown selections across Service Intake and Live Active Service Ledger */
    #serviceIntakeSection select,
    #dashboardSection select,
    #dashboardLiveServiceLogsContainer select,
    #serviceLogsContainer select,
    .inline-status-dropdown,
    .status-select-element {
        min-width: 150px !important;
        width: 150px !important;
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        text-align: center !important;
        display: inline-block !important;
        height: 38px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   SIDEBAR DISMISS BACKDROP & REFINED SMALER BURGER ENGINE
   ========================================================================== */
.sidebar-dismiss-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.15);
    z-index: 9999;
    transition: opacity 0.25s ease;
}

@media (max-width: 768px) {
    /* Slightly downsized and streamlined high-visibility modern burger layout dimensions */
    .universal-mobile-menu-trigger {
        width: 24px !important;
        height: 16px !important;
        top: 26px !important;
        right: 20px !important;
    }
    
    .burger-bar-line {
        height: 2px !important;
    }

    /* Enforce strict alignment binding layout when mobile sidebar state runs open */
    body.nav-open .sidebar-dismiss-overlay {
        display: block !important;
    }
    
    /* Enforces a full-height column layout context inside the mobile slide-out drawer framework */
    .sidebar {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important; /* Pushes child blocks to opposite layout poles */
        height: 100vh !important;
        box-sizing: border-box !important;
        overflow-y: auto !important; /* Keeps navigation lists scrollable if screens are small */
    }

    /* Let sidebar-nav-body be a plain content wrapper so justify-content: space-between on parent works */
    .sidebar-nav-body {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    /* Keep nav links as normal content (no flex-grow) so auth footer can use margin-top: auto */
    .sidebar .nav-links,
    .sidebar ul {
        margin-bottom: 20px !important;
    }

    /* Auth footer pushes to bottom using margin-top: auto inside display:flex + justify-content:space-between parent */
    .sidebar-auth-footer,
    .sidebar .user-info,
    .sidebar .auth-status,
    .sidebar #userProfileArea {
        padding: 20px 16px !important;
        background: #f8fafc !important;
        border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        bottom: 0 !important;
    }
}

/* ==========================================================================
   HIGH-END EXECUTIVE PREMIUM DASHBOARD OVERHAUL (DESKTOP & MOBILE)
   ========================================================================== */
#dashboardSection {
    padding: 8px 4px;
}

/* Professional Card elevation wrappers with soft ambient dropshadow parameters */
#dashboardSection .metric-segment {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.7) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#dashboardSection .metric-segment:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.01) !important;
}

#dashboardSection .account-label {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
}

#dashboardSection .segment-number {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    margin-top: 8px !important;
    color: #0f172a !important;
}

/* Charts layout rebalancing grids */
.dashboard-charts-layout {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr !important;
    gap: 24px !important;
}

/* Progress ratios alignment spacing tweaks */
.progress-track {
    background: #f1f5f9 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.progress-fill {
    border-radius: 8px !important;
}

/* Mobile framework adaptation styling alignments */
@media (max-width: 768px) {
    #dashboardSection .analytics-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .dashboard-charts-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
}

/* ==========================================================================
   PREMIUM EXECUTIVE DASHBOARD HEADER OVERLAY
   ========================================================================== */
.dashboard-premium-header {
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    /* Stacks title components vertically on small smartphone viewports */
    .dashboard-premium-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
        margin-bottom: 28px !important;
        padding-bottom: 20px !important;
    }

    .dashboard-premium-header h2 {
        font-size: 1.85rem !important; /* Scaled down perfectly to prevent line wrapping issues */
        letter-spacing: -0.5px !important;
    }

    .dashboard-premium-header .sub-text {
        font-size: 0.88rem !important;
        margin-top: 6px !important;
    }

    /* Stretches the live tracking status card to take up full width on screens */
    .dashboard-premium-header .header-meta-badge {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 16px !important;
    }
}

/* ==========================================================================
   APPLE MINIMALIST DESIGN SYSTEM STYLES
   ========================================================================== */

/* Core glassmorphic element profile */
.glass-premium {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px) saturate(190%) contrast(100%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) contrast(100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box;
}

/* Header typography spacing settings */
.apple-header-deck {
    max-width: 1200px;
    margin: 0 auto 32px auto;
    padding: 0 24px;
}
.apple-status-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #86868b;
}
.apple-main-title {
    font-size: 2.8rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    color: #1d1d1f !important;
    margin: 4px 0 0 0 !important;
}
.apple-sub-title {
    font-size: 1rem;
    color: #86868b;
    margin: 6px 0 0 0;
}

/* Service summary outer wrapper — matches .apple-kpi-grid sizing so card aligns with KPI cards */
.apple-card-shell-wrapper {
    max-width: 1200px;
    margin: 0 auto 24px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Four-column premium metrics alignment */
.apple-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto 24px auto;
    padding: 0 24px;
    box-sizing: border-box;
}
.apple-kpi-card {
    padding: 24px !important;
    display: flex;
    flex-direction: column;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
}
.apple-kpi-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.apple-kpi-number {
    font-size: 1.85rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: #1d1d1f !important;
    margin: 12px 0 6px 0 !important;
}
.apple-kpi-trend {
    font-size: 0.75rem;
    font-weight: 500;
}

/* System functional token accent color fills */
.text-green { color: #34c759 !important; }
.text-red { color: #ff3b30 !important; }
.text-muted { color: #86868b !important; }
.bg-apple-blue { background-color: #0071e3 !important; }
.bg-apple-amber { background-color: #ff9500 !important; }
.bg-apple-red { background-color: #ff3b30 !important; }

/* Mid-tier layout alignment tracking structures */
.apple-split-charts-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto 24px auto;
    padding: 0 24px;
    box-sizing: border-box;
}
.apple-card {
    padding: 24px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
}
.apple-card-title {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.01em;
    margin: 0 0 20px 0;
}

/* Rounded sleek pill indicators */
.apple-ratio-stack { display: flex; flex-direction: column; gap: 16px; }
.apple-ratio-meta { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 500; color: #1d1d1f; margin-bottom: 6px;}
.apple-pill-track { background: #e8e8ed !important; height: 6px !important; border-radius: 20px !important; overflow: hidden; }
.apple-pill-fill { height: 100%; border-radius: 20px !important; width: 0%; transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1); }

/* Donut split circle visualization rules */
.apple-center-flex { display: flex; flex-direction: column; }
.apple-chart-wrapper { display: flex; align-items: center; gap: 32px; height: 100%; }
.apple-donut-chart { width: 90px; height: 90px; border-radius: 50%; background: conic-gradient(#0071e3 0% 70%, #ff3b30 70% 100%); transition: background 0.5s ease; }
.apple-legend { display: flex; flex-direction: column; gap: 10px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 500; color: #48484a; }
.legend-item .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Filter dropdown alignment rules */
.apple-filter-strip {
    max-width: 1200px;
    margin: 0 auto 24px auto;
    padding: 12px 24px !important;
    display: flex;
    justify-content: flex-start;
}
.apple-select-input {
    background: transparent !important;
    border: none !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #0071e3 !important;
    cursor: pointer;
    outline: none;
    padding-right: 12px;
}

/* Master full width tracking data board elements */
.apple-ledger-card {
    max-width: 1200px;
    margin: 0 auto 32px auto;
    padding: 0 !important;
    overflow: hidden;
}
.apple-table-scroll-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.apple-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}
.apple-table-header {
    background: rgba(245, 245, 247, 0.6) !important;
    padding: 14px 24px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #86868b !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid #e8e8ed !important;
}
.apple-table-body .table-row {
    padding: 16px 24px !important;
    border-bottom: 1px solid #f5f5f7 !important;
    transition: background 0.2s ease;
}
.apple-table-body .table-row:hover {
    background: rgba(245, 245, 247, 0.5) !important;
}

/* ==========================================================================
   MOBILE VIEWPORT ADAPTIVE OVERRIDES (MOBILE FRIENDLY)
   ========================================================================== */
@media (max-width: 768px) {
    #dashboardSection {
        padding: 12px 0 !important;
        overflow-x: hidden !important;
    }
    .apple-header-deck {
        margin-bottom: 20px !important;
        padding: 0 12px !important;
        max-width: 100% !important;
    }
    .apple-main-title {
        font-size: 2rem !important;
        margin: 0 !important;
        word-break: break-word !important;
    }
    .apple-title-area {
        display: flex;
        flex-direction: column;
    }
    
    /* Stack metrics single column — uses #dashboardSection prefix to override line 1806 ID selector */
    #dashboardSection .apple-kpi-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 12px !important;
        max-width: 100% !important;
    }
    #dashboardSection .apple-kpi-card {
        padding: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Stack charts vertical — uses #dashboardSection prefix to override line 1807 ID selector */
    #dashboardSection .apple-split-charts-layout {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 12px !important;
        max-width: 100% !important;
    }
    #dashboardSection .apple-card {
        padding: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .apple-chart-wrapper { gap: 20px; }
    
    /* Service summary card wrapper — uses #dashboardSection prefix to override line 1808 ID selector */
    #dashboardSection .apple-card-shell-wrapper {
        padding: 0 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    .apple-filter-strip {
        margin: 0 12px 12px 12px !important;
    }
    .apple-ledger-card {
        margin: 0 12px 20px 12px !important;
    }
}

/* ==========================================================================
   WIDESCREEN MAX-WIDTH CONTAINER EXPANSION & HORIZONTAL ALIGNMENT
   ========================================================================== */
@media (min-width: 1025px) {
    /* Expands card grids to full-bleed layout parameters (1400px width alignment benchmark) */
    .apple-header-deck,
    .apple-kpi-grid,
    .apple-split-charts-layout,
    .apple-filter-strip,
    .apple-ledger-card,
    .apple-card-shell,
    .apple-card-shell-wrapper {
        max-width: 1400px !important; /* Increased from 1200px to stretch wide across your monitor */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Standardizes outer edge padding parameters so everything lines up perfectly on the left and right edges */
    .apple-header-deck { padding: 0 12px !important; }
    .apple-kpi-grid { padding: 0 12px !important; }
    .apple-split-charts-layout { padding: 0 12px !important; }
    .apple-card-shell { padding: 12px !important; }
    .apple-card-shell-wrapper { padding: 0 12px !important; }
    
    .apple-filter-strip {
        padding: 14px 24px !important;
        margin-bottom: 24px !important;
    }
}

/* ==========================================================================
   MOBILE ECOSYSTEM REFINEMENTS (ANTI-SCROLL & DOWNSIZED CARDS)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Full-width Overview KPI blocks with balanced internal spacing */
    .apple-kpi-card {
        padding: 16px !important;
    }
    .apple-kpi-label {
        font-size: 0.7rem !important;
    }
    .apple-kpi-number {
        font-size: 1.45rem !important; /* Reduced typography footprint size */
        margin: 6px 0 2px 0 !important;
    }
    .apple-kpi-trend {
        font-size: 0.7rem !important;
    }

    /* 2. Anti-Scroll Fix: Convert table rows into neat stackable cards on mobile viewports */
    .apple-table-scroll-container {
        overflow-x: hidden !important; /* Kills horizontal sideways scrolling completely */
    }
    
    .apple-table {
        min-width: 100% !important;
        display: block !important;
    }
    
    .apple-table-header.service-grid {
        display: none !important; /* Safely hides flat desktop text header headers on mobile */
    }

    #dashboardLiveServiceLogsContainer {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    /* Dashboard rows now use flex-card styling defined in the dedicated mobile responsive block above */
}

/* Desktop layout styling alignment for the newly positioned filter selection element */
.apple-filter-strip-embedded {
    display: inline-block;
}

/* ==========================================================================
   MOBILE ACTION BUTTON CONTAINER COHESION FIX
   ========================================================================== */
@media (max-width: 768px) {
    /* Targets the action column cell container inside mobile stacked cards */
    #dashboardLiveServiceLogsContainer .table-row.service-grid > div:last-child,
    #serviceTableBody .table-row.service-grid > div:last-child {
        display: flex !important;
        justify-content: flex-end !important; /* Pulls both buttons tightly to the right side */
        gap: 8px !important;                 /* Reduces whitespace distance between Edit and Delete */
        width: 100% !important;
        margin-top: 4px !important;
    }

    #dashboardLiveServiceLogsContainer .table-row.service-grid > div:last-child button,
    #serviceTableBody .table-row.service-grid > div:last-child button {
        width: auto !important;              /* Stops button stretching */
        padding: 6px 14px !important;        /* Crisp, compact target sizing */
        font-size: 0.8rem !important;
    }
}

/* ACTIVE SERVICE LOGS HISTORY column alignment */
@media (min-width: 769px) {
    #serviceIntakeSection .table-header.service-grid,
    #serviceIntakeSection #serviceTableBody .table-row.service-grid {
        display: grid !important;
        grid-template-columns: 0.85fr 1fr 1.1fr 1fr 1.15fr 0.9fr 0.95fr 1.05fr 1.55fr 1.65fr !important;
        gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
    }

    #serviceIntakeSection #serviceTableBody .row-actions {
        justify-content: flex-end !important;
        min-width: 0 !important;
    }
}

/* ==========================================================================
   GLOBAL APPS LOGO BRANDING RE-SCALE
   ========================================================================== */
.global-app-branding {
    font-size: 1.8rem !important; /* Increased from 1.4rem to a bolder, more beautiful prominent size */
    font-weight: 900 !important;
    color: #EF3340 !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 24px !important;
    text-align: left !important;
    display: block !important;
    font-family: var(--app-font) !important;
}

@media (max-width: 768px) {
    .global-app-branding {
        font-size: 1.5rem !important; /* Increased from 1.2rem to pop crisply on mobile device headers */
        margin-bottom: 18px !important;
        padding-left: 4px !important;
    }
    
    /* Remove action placeholder cell header constraints on mobile dashboard tracking */
    #dashboardSection .table-header.service-grid span:last-child {
        display: none !important;
    }
}

/* ==========================================================================
   APPLE AUTH SYSTEM - STRICT ZERO-SCROLL CONTAINER MATCH
   ========================================================================== */
.apple-clean-auth-viewport {
    width: 100vw !important;
    height: 100vh !important; /* Locks desktop height strictly to the window frame */
    height: 100dvh !important; /* Dynamic viewport height locks mobile perfectly, ignoring address bars */
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important; /* COMPLETELY BLOCKS ALL VERTICAL AND HORIZONTAL SCROLLING */
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--app-font) !important;
    box-sizing: border-box !important;

    background: transparent !important;
}

/* Ensure the login shell layout handles the zero-scroll boundaries nicely */
.apple-auth-shell {
    width: 100% !important;
    max-width: 380px !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 40px 32px 32px 32px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
    margin: 0 auto !important; /* Centering helper override */
    box-sizing: border-box !important;
    position: relative !important;
}

@media (max-width: 768px) {
    .apple-clean-auth-viewport {
        width: 100% !important;
        padding: 8px !important;
    }
    
    .apple-auth-shell {
        width: calc(100vw - 16px) !important;
        max-width: 376px !important;
        padding: 36px 20px 24px 20px !important;
    }
}

.apple-auth-branding {
    text-align: center !important;
    margin-bottom: 32px !important;
}

.apple-auth-logo {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    color: #EF3340 !important; /* Retains corporate brand primary red indicator colors */
    margin: 0 !important;
}

.apple-auth-welcome {
    font-size: 1.25rem !important;
    color: #1d1d1f !important;
    font-weight: 600 !important;
    margin: 16px 0 4px 0 !important;
    letter-spacing: -0.02em !important;
}

.apple-auth-headline {
    font-size: 1.05rem !important;
    color: #1d1d1f !important;
    font-weight: 400 !important;
    margin: 8px 0 0 0 !important;
    letter-spacing: -0.01em !important;
}

/* Rounded Integrated Input Grouping Pod */
.apple-input-wrapper-deck {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.01) !important;
}

.apple-field-container {
    position: relative !important;
    width: 100% !important;
    height: 54px !important;
}

.apple-minimal-input {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 22px 16px 6px 16px !important;
    font-size: 1rem !important;
    color: #1d1d1f !important;
    font-weight: 400 !important;
    box-sizing: border-box !important;
}

.apple-field-line-separator {
    height: 1px !important;
    background-color: #d2d2d7 !important;
    margin: 0 16px !important;
}

/* Premium Adaptive Floating Text Anchors */
.apple-floating-label {
    position: absolute !important;
    left: 16px !important;
    top: 16px !important;
    color: #86868b !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    pointer-events: none !important;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), font-size 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: top left !important;
}

/* Floating mechanics triggered instantly when inputs gain attention or text resides */
.apple-minimal-input:focus + .apple-floating-label,
.apple-minimal-input:not(:placeholder-shown) + .apple-floating-label {
    transform: translateY(-8px) scale(0.72) !important;
    color: #86868b !important;
}

/* Secondary Operational Options Deck */
.apple-auth-interaction-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.85rem !important;
    color: #86868b !important;
    margin-bottom: 28px !important;
    padding: 0 4px !important;
}

.apple-checkbox-field {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.apple-native-checkbox {
    width: 16px !important;
    height: 16px !important;
    accent-color: #0071e3 !important; /* Soft classic Apple system blue token */
    border-radius: 4px !important;
    cursor: pointer !important;
}

.apple-functional-link {
    color: #0071e3 !important;
    text-decoration: none !important;
}
.apple-functional-link:hover {
    text-decoration: underline !important;
}

/* Monolithic Rounded Pillar Action Button Container */
.apple-auth-primary-btn {
    width: 100% !important;
    height: 48px !important;
    background-color: #1d1d1f !important; /* Solid dark carbon gray capsule look */
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.1s ease !important;
}
.apple-auth-primary-btn:hover {
    background-color: #000000 !important;
}
.apple-auth-primary-btn:active {
    transform: scale(0.98) !important;
}

.apple-auth-footer-disclaimer {
    margin-top: 40px !important;
    text-align: center !important;
    font-size: 0.72rem !important;
    color: #86868b !important;
    line-height: 1.4 !important;
    padding: 0 16px !important;
}

/* Premium System Animations */
@keyframes appleFadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom Overrides for Larger Typography Displays */
.global-app-branding {
    font-size: 2rem !important;
}

/* BBGarage logo inside section headers — replaces BBGARAGE text with the logo image */
/* (See standardized logo sizing in the LOGO SIZE & PLACEMENT section below) */

/* ==========================================================================
   APPLE PREMIUM ELEVATED CIRCULAR LOGO EMBED
   ========================================================================== */
.apple-logo-canvas {
    width: 120px !important;
    height: 120px !important;
    background: #ffffff !important;
    border-radius: 50% !important; /* Forces a perfect circle container */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: -70px auto 24px auto !important; /* Negative margin pulls it up to overlap the card beautifully */
    position: relative !important;
    z-index: 10 !important;
    
    /* Elegant double drop-shadow profile to match the premium reference look */
    border: 4px solid #ffffff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08),
                0 2px 6px rgba(0, 0, 0, 0.04),
                inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.apple-brand-img-fluid {
    width: 94% !important;
    height: 94% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform-origin: center center !important;
    border-radius: 50% !important; /* Keeps image bounds cleanly inside the circle */
}

/* Ensure the login card accommodates the floating circle header cleanly */
.apple-auth-form {
    margin-top: 8px !important;
}

@media (max-width: 768px) {
    .apple-logo-canvas {
        width: 100px !important;
        height: 100px !important;
        margin: -60px auto 20px auto !important; /* Proportional scaling adjustment for mobile views */
        border-width: 3px !important;
    }
}

/* ==========================================================================
HIDE BURGER ON AUTHENTICATION GATEWAY
========================================================================== */
/* Automatically hides the mobile menu trigger button completely as long as the login screen viewport is active */
#loginSection ~ .universal-mobile-menu-trigger,
body:not(.authenticated) .universal-mobile-menu-trigger {
display: none !important;
}

/* ==========================================================================
DESKTOP AUTHENTICATION FIELDS TEXT OVERLAP FIX
========================================================================== */
.apple-field-container {
position: relative !important;
width: 100% !important;
height: 54px !important;
display: flex !important;
}

/* Fixes clipping overlap on widescreen layouts by standardizing line heights and padding bounds */
.apple-minimal-input {
width: 100% !important;
height: 100% !important;
background: #ffffff !important;
border: none !important;
outline: none !important;
padding: 24px 16px 8px 16px !important; /* Premium breathing spacing box alignment */
font-size: 1rem !important;
color: #1d1d1f !important;
font-weight: 400 !important;
line-height: 1.2 !important;
box-sizing: border-box !important;
}

/* Ensures floating text descriptors sit neatly high above typed content */
.apple-floating-label {
position: absolute !important;
left: 16px !important;
top: 18px !important; /* Standardized label alignment height placement */
color: #86868b !important;
font-size: 1rem !important;
font-weight: 400 !important;
pointer-events: none !important;
transition: transform 0.15s ease, font-size 0.15s ease !important;
transform-origin: top left !important;
}

.apple-minimal-input:focus + .apple-floating-label,
.apple-minimal-input:not(:placeholder-shown) + .apple-floating-label {
transform: translateY(-10px) scale(0.72) !important; /* Pushes text descriptor cleanly up away from input */
color: #86868b !important;
}

/* ==========================================================================
BURGER BUTTON TO CLOSE CROSS TRANSFORMATION ANIMATION
========================================================================== */
.universal-mobile-menu-trigger .burger-bar-line {
transition: transform 0.25s ease, opacity 0.25s ease !important;
}

/* Transform mechanics morphing lines cleanly into a close button */
.universal-mobile-menu-trigger.active-cross .burger-bar-line:nth-child(1) {
transform: translateY(7px) rotate(45deg) !important;
}

.universal-mobile-menu-trigger.active-cross .burger-bar-line:nth-child(2) {
opacity: 0 !important; /* Melts mid-bar out of sight seamlessly */
}

.universal-mobile-menu-trigger.active-cross .burger-bar-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg) !important;
}

/* ==========================================================================
   DASHBOARD BOARD COMPONENT UNIFICATION
   ========================================================================== */
/* Hard-locks every separate tracking board layout element to match the Service Summary grid size profile */
.dashboard-section .card,
.dashboard-section .metric-card,
.dashboard-section .analytics-board,
.apple-card-shell {
    width: 100% !important;
    max-width: 1200px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin: 0 auto 24px auto !important;
    box-sizing: border-box !important;
}

/* Widescreen override — must come AFTER base .apple-card-shell rule to beat cascade (max-width: 1400px) */
@media (min-width: 1025px) {
    .apple-card-shell {
        max-width: 1400px !important;
    }
}

/* Ensures KPI grid, charts, and service summary all share identical horizontal spacing */
#dashboardSection .apple-kpi-grid,
#dashboardSection .apple-split-charts-layout,
#dashboardSection .apple-card-shell-wrapper {
    padding: 0 24px !important;
}

/* Retain matching 8-column structural column distribution mapping bounds */
.live-service-header-grid,
#dashboardLiveServiceLogsContainer .table-row {
    display: grid !important;
    grid-template-columns: 1fr 1.1fr 1.3fr 1fr 1.4fr 1.1fr 1.2fr 1.8fr !important;
    gap: 14px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
}

/* Global uppercase typography controller */
.payment-status-label-text {
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

/* Accent design style parameters for modern table badges */
.status-pill-badge {
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.02em !important;
    color: #1d1d1f !important;
}

/* Payment status color highlighting — green for paid, red for unpaid/pending */
.status-pill-badge.status-paid { color: #34c759 !important; }
.status-pill-badge.status-unpaid { color: #ff3b30 !important; }

/* Truncate long text fields with ellipsis on desktop, expand on hover */
.truncate-text-cell {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE: Dashboard Service Summary Card Stack
   ========================================================================== */
@media (max-width: 768px) {
    /* Hide desktop-only header row on mobile */
    .desktop-only-header {
        display: none !important;
    }

    /* Convert grid rows into stacked flex-column cards */
    #dashboardLiveServiceLogsContainer .table-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 16px !important;
        background: #f5f5f7 !important;
        border-radius: 10px !important;
        margin-bottom: 12px !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Each data row span becomes a flex row: label on left, value pushed to right */
    #dashboardLiveServiceLogsContainer .table-row > span {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
        align-items: flex-start !important;
        min-width: 0 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
        text-align: right !important;
    }

    /* Show field labels using ::before with hardcoded content per column position */
    #dashboardLiveServiceLogsContainer .table-row > span::before {
        font-weight: 600 !important;
        color: #86868b !important;
        font-size: 0.7rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
        flex-shrink: 0 !important;
        padding-right: 8px !important;
    }
    #dashboardLiveServiceLogsContainer .table-row > span:nth-child(1)::before { content: "DATE: " !important; }
    #dashboardLiveServiceLogsContainer .table-row > span:nth-child(2)::before { content: "VEHICLE NO: " !important; }
    #dashboardLiveServiceLogsContainer .table-row > span:nth-child(3)::before { content: "OWNER NAME: " !important; }
    #dashboardLiveServiceLogsContainer .table-row > span:nth-child(4)::before { content: "MOBILE: " !important; }
    #dashboardLiveServiceLogsContainer .table-row > span:nth-child(5)::before { content: "ADDRESS: " !important; }
    #dashboardLiveServiceLogsContainer .table-row > span:nth-child(6)::before { content: "AMOUNT: " !important; }
    #dashboardLiveServiceLogsContainer .table-row > span:nth-child(7)::before { content: "PAYMENT STATUS: " !important; }
    #dashboardLiveServiceLogsContainer .table-row > span:nth-child(8)::before { content: "DETAILS OF THE WORK: " !important; }

    /* Expand truncated text cells to show full content on mobile */
    #dashboardLiveServiceLogsContainer .table-row .truncate-text-cell {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* Allow title to wrap naturally on narrow mobile screens */
    .apple-card-shell .apple-dashboard-sub-heading {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Prevent any child content from spilling outside the card */
    .apple-card-shell {
        overflow: hidden !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
        max-width: 100% !important;
    }

    /* Ensure card-shell-wrapper doesn't constrain content incorrectly on mobile */
    .apple-card-shell-wrapper {
        overflow: hidden !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   CLEAN UP UNWANTED MOBILE ACTIVE SERVICE LABELS
   ========================================================================== */
.apple-dashboard-sub-heading {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    letter-spacing: -0.01em !important;
    margin: 24px 0 16px 0 !important;
    font-family: var(--app-font) !important;
    white-space: nowrap !important;
}

/* Hides data headers completely on mobile viewports so rows remain neat */
/* ALSO: overrides #dashboardSection ID selector padding — positioned AFTER line 1806 so same-specificity !important rules win */
/* ALSO: complete KPI overview card redesign for mobile — fresh 2-column clean modern UI */
@media (max-width: 768px) {
    .live-service-header-grid {
        display: none !important;
    }
    
    .apple-dashboard-sub-heading {
        margin: 16px 0 12px 4px !important;
        font-size: 1.05rem !important;
    }

    /* ===== OVERVIEW LAYOUT CONTAINERS — WIDEN ON MOBILE ===== */
    /* Uses #dashboardSection prefix to match specificity of line 1806 override.
       Being AFTER line 1806 in the file, these win the cascade. */
    #dashboardSection .apple-kpi-grid {
        padding: 0 8px !important;
        max-width: 100% !important;
    }
    #dashboardSection .apple-split-charts-layout {
        padding: 0 8px !important;
        max-width: 100% !important;
    }
    #dashboardSection .apple-card-shell-wrapper {
        padding: 0 8px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    #dashboardSection .apple-header-deck {
        padding: 0 8px !important;
        max-width: 100% !important;
    }
    #dashboardSection .apple-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #dashboardSection .apple-card-shell {
        max-width: 100% !important;
    }
    #dashboardSection .apple-card-shell-wrapper {
        max-width: 100% !important;
    }

    /* ===== MOBILE KPI OVERVIEW — COMPLETE VISUAL REDESIGN ===== */
    /* 2-column clean modern stat cards — completely different from desktop glass look */

    /* 2-column grid with tighter gap */
    #dashboardSection .apple-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* Fresh card appearance — clean white, no glass effect, colored top accent */
    #dashboardSection .apple-kpi-card {
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
        padding: 14px 12px 12px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Colored 3px top accent strip per card */
    #dashboardSection .apple-kpi-card::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 3px !important;
        border-radius: 12px 12px 0 0 !important;
    }
    /* Card 1 (Services / Billings) — green accent */
    #dashboardSection .apple-kpi-card:nth-child(1)::before { background: #34c759 !important; }
    /* Card 2 (Total Expenses / Procurement) — amber accent */
    #dashboardSection .apple-kpi-card:nth-child(2)::before { background: #ff9500 !important; }
    /* Card 3 (Outstanding Collection / Pending) — red accent */
    #dashboardSection .apple-kpi-card:nth-child(3)::before { background: #ff3b30 !important; }
    /* Card 4 (Registered Machinery / Fleet) — blue accent */
    #dashboardSection .apple-kpi-card:nth-child(4)::before { background: #0071e3 !important; }

    /* Compact label typography */
    #dashboardSection .apple-kpi-label {
        font-size: 0.6rem !important;
        font-weight: 600 !important;
        color: #86868b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        display: block !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    /* Bold, readable number */
    #dashboardSection .apple-kpi-number {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: #1d1d1f !important;
        margin: 6px 0 2px 0 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
    }

    /* Compact trend text */
    #dashboardSection .apple-kpi-trend {
        font-size: 0.6rem !important;
        font-weight: 500 !important;
        color: #8e8e93 !important;
        display: block !important;
        line-height: 1.3 !important;
    }

    /* Preserve semantic color classes for trend text */
    #dashboardSection .apple-kpi-trend.text-green { color: #34c759 !important; }
    #dashboardSection .apple-kpi-trend.text-red { color: #ff3b30 !important; }
    #dashboardSection .apple-kpi-trend.text-muted { color: #8e8e93 !important; }
}

/* ===== MOBILE SIDEBAR: Plain wrapper — justify-content:space-between on parent handles footer position ===== */
@media (max-width: 768px) {
    .sidebar-nav-body {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }
}

/* ==========================================================================
   APPLE INSPIRED MODAL CONFIGURATIONS - SEAMLESS HIDDEN INITIAL STATE
   ========================================================================== */
.apple-minimal-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.3) !important; /* Soft backdrop blur tint */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
}

.apple-modal-window-shell {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    width: 100% !important;
    max-width: 440px !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    padding: 28px 24px 24px 24px !important;
    box-sizing: border-box !important;
    font-family: var(--app-font) !important;
    position: relative !important;
}

.apple-modal-header-deck {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}

.apple-modal-header-deck h3 {
    margin: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
}

.apple-modal-close-x {
    position: absolute !important;
    top: 14px !important;
    right: 18px !important;
    left: auto !important;
    background: transparent !important;
    border: none !important;
    font-size: 1.5rem !important;
    color: #86868b !important;
    cursor: pointer !important;
    z-index: 10 !important;
    line-height: 1 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
.apple-modal-close-x:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #1d1d1f !important;
}

.apple-modal-input-field input {
    width: 100% !important;
    height: 44px !important;
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.apple-modal-action-row {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: 20px !important;
}

.apple-modal-btn-primary {
    background: #0071e3 !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
}
.apple-modal-btn-primary:hover {
    background: #0062c4 !important;
}
.apple-modal-btn-primary:active {
    transform: scale(0.97) !important;
}

.apple-modal-btn-secondary {
    background: #e8e8ed !important;
    color: #1d1d1f !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
}
.apple-modal-btn-secondary:hover {
    background: #d1d1d6 !important;
}
.apple-modal-btn-secondary:active {
    transform: scale(0.97) !important;
}

/* Ensure close triggers maintain interactive state targets */
.apple-modal-close-x,
.apple-modal-btn-secondary {
    cursor: pointer !important;
    pointer-events: auto !important; /* Prevents parent layout layers from absorbing the click events */
}

/* Form body spacing - consistent gap between fields */
.apple-modal-form-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Labels inside apple modal fields */
.apple-modal-input-field label {
    display: block !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #86868b !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

/* Select elements styled to match apple modal inputs */
.apple-modal-input-field select {
    width: 100% !important;
    height: 44px !important;
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
    outline: none !important;
    color: #1d1d1f !important;
    appearance: auto !important;
}

/* Textarea styled to match apple modal inputs */
.apple-modal-input-field textarea {
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 10px !important;
    padding: 12px !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
    outline: none !important;
    font-family: inherit !important;
    resize: vertical !important;
    color: #1d1d1f !important;
}

/* Upload button within apple modal - matches the input styling */
.apple-modal-upload-btn {
    background: #f5f5f7 !important;
    border: 1px solid #d2d2d7 !important;
    color: #1d1d1f !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE MODAL STYLES
   ========================================================================== */
@media (max-width: 768px) {
    .apple-minimal-modal-overlay {
        padding: 12px !important;
        align-items: center !important;
    }
    .apple-modal-window-shell {
        max-width: 100% !important;
        padding: 20px !important;
        border-radius: 14px !important;
        margin: 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    .apple-modal-header-deck {
        margin-bottom: 16px !important;
    }
    .apple-modal-header-deck h3 {
        font-size: 1.05rem !important;
    }
    .apple-modal-close-x {
        font-size: 1.4rem !important;
    }
    .apple-modal-form-body {
        gap: 14px !important;
    }
    .apple-modal-input-field label {
        font-size: 0.72rem !important;
        margin-bottom: 4px !important;
    }
    .apple-modal-input-field input,
    .apple-modal-input-field select,
    .apple-modal-input-field textarea {
        font-size: 0.9rem !important;
        height: 40px !important;
    }
    #expenseModal #expFieldDate {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        line-height: 40px !important;
        font-size: 0.9rem !important;
        vertical-align: middle !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    .apple-modal-input-field textarea {
        height: auto !important;
        min-height: 60px !important;
    }
    .apple-modal-action-row {
        margin-top: 16px !important;
        gap: 10px !important;
    }
    .apple-modal-btn-primary,
    .apple-modal-btn-secondary {
        padding: 8px 14px !important;
        font-size: 0.85rem !important;
        flex: 1 !important;
        text-align: center !important;
    }
    /* Fix form-row-split inside apple modals on mobile */
    .apple-modal-form-body .form-row-split {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }
    .apple-modal-upload-btn {
        padding: 8px 14px !important;
        font-size: 0.85rem !important;
    }
}

/* ==========================================================================
   FINANCIAL DISTRIBUTION LINE CHART — PREMIUM STYLING
   ========================================================================== */

/* Card housing the financial chart */
.financial-chart-card {
    display: flex;
    flex-direction: column;
    min-height: 340px;
}

/* Main chart container — holds canvas wrapper + legend */
.financial-chart-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Canvas wrapper ensures proper sizing and prevents overflow */
.chart-canvas-wrapper {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 200px;
    padding: 4px 0;
}

.chart-canvas-wrapper canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 220px;
}

/* Premium legend below the chart */
.financial-chart-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 16px 8px 4px 8px;
    border-top: 1px solid rgba(226, 232, 240, 0.5);
    margin-top: 8px;
    flex-wrap: wrap;
}

.fin-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #48484a;
    white-space: nowrap;
}

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

.fin-legend-label {
    color: #86868b;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fin-legend-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.01em;
    margin-left: 2px;
}

/* ==========================================================================
   MOBILE RESPONSIVE — FINANCIAL CHART
   ========================================================================== */
@media (max-width: 768px) {
    .financial-chart-card {
        min-height: 280px;
    }

    .chart-canvas-wrapper {
        min-height: 160px;
        padding: 2px 0;
    }

    .chart-canvas-wrapper canvas {
        max-height: 170px;
    }

    .financial-chart-legend {
        gap: 12px;
        padding: 12px 4px 2px 4px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .fin-legend-item {
        font-size: 0.7rem;
        gap: 5px;
    }

    .fin-legend-label {
        font-size: 0.62rem;
    }

    .fin-legend-value {
        font-size: 0.75rem;
    }

    .fin-legend-dot {
        width: 6px;
        height: 6px;
    }
}

/* Small mobile adjustments */
@media (max-width: 420px) {
    .financial-chart-legend {
        gap: 8px;
        flex-direction: column;
        align-items: center;
    }

    .chart-canvas-wrapper canvas {
        max-height: 140px;
    }
}

/* ==========================================================================
   SETTLEMENT BREAKDOWN — CENTERED DONUT + LEGEND BELOW
   ========================================================================== */

/* Settlement card — stacks title, chart, legend vertically */
.settlement-card {
    display: flex;
    flex-direction: column;
}

/* Donut chart wrapper — perfectly centered horizontally, fills remaining space */
.settlement-chart-area {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex: 1;
    min-height: 90px;
    padding: 8px 0;
}

/* Legend row — centered below the chart with even spacing */
.settlement-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: 16px 8px 4px 8px;
    border-top: 1px solid rgba(226, 232, 240, 0.5);
    margin-top: 12px;
    width: 100%;
    flex-wrap: wrap;
}

.settlement-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #48484a;
}

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

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .settlement-legend {
        gap: 24px;
        padding: 12px 4px 2px 4px;
        margin-top: 10px;
    }

    .settlement-legend-item {
        font-size: 0.78rem;
        gap: 6px;
    }

    .settlement-dot {
        width: 8px;
        height: 8px;
    }
}

@media (max-width: 420px) {
    .settlement-legend {
        gap: 16px;
        padding: 10px 4px 2px 4px;
    }

    .settlement-legend-item {
        font-size: 0.72rem;
    }
}

/* Premium 3D-style Settlement Breakdown donut */
.settlement-chart-area {
    min-height: 150px !important;
    padding: 12px 0 4px 0 !important;
    perspective: 700px;
}

.settlement-donut-3d {
    --settled-pct: 0%;
    --settled-color: #34c759;
    --unsettled-color: #ff3b30;
    width: 128px !important;
    height: 128px !important;
    position: relative;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 52%, #ffffff 0 42%, transparent 43%),
        conic-gradient(from -90deg, var(--settled-color) 0 var(--settled-pct), var(--unsettled-color) var(--settled-pct) 100%) !important;
    border-radius: 50%;
    box-shadow:
        0 18px 28px rgba(15, 23, 42, 0.18),
        0 5px 0 rgba(15, 23, 42, 0.10),
        inset 0 3px 6px rgba(255, 255, 255, 0.65),
        inset 0 -10px 18px rgba(15, 23, 42, 0.16);
    transform: rotateX(12deg);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.settlement-donut-3d::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: conic-gradient(from -90deg, rgba(255,255,255,0.34), rgba(255,255,255,0) 23%, rgba(0,0,0,0.12) 58%, rgba(255,255,255,0.24));
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.settlement-donut-3d::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: -14px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.24), rgba(15, 23, 42, 0));
    filter: blur(3px);
    z-index: -1;
    pointer-events: none;
}

.settlement-donut-3d:hover {
    transform: rotateX(8deg) translateY(-3px) scale(1.03);
    filter: saturate(1.06);
    box-shadow:
        0 22px 34px rgba(15, 23, 42, 0.20),
        0 7px 0 rgba(15, 23, 42, 0.10),
        inset 0 3px 7px rgba(255, 255, 255, 0.72),
        inset 0 -10px 18px rgba(15, 23, 42, 0.14);
}

.settlement-donut-face {
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #f3f4f6);
    box-shadow:
        inset 0 2px 5px rgba(15, 23, 42, 0.08),
        0 2px 6px rgba(255, 255, 255, 0.8);
}

.settlement-donut-center {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform: rotateX(-12deg);
}

.settlement-center-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: 0;
}

.settlement-center-label {
    margin-top: 5px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.settlement-legend {
    gap: 12px !important;
    padding: 14px 4px 2px 4px !important;
    margin-top: 8px !important;
}

.settlement-legend-item {
    gap: 7px !important;
    min-height: 34px;
    padding: 8px 10px;
    background: rgba(248, 250, 252, 0.82);
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    font-size: 0.78rem !important;
    font-weight: 600 !important;
}

.settlement-legend-item strong {
    color: #1d1d1f;
    font-size: 0.78rem;
    font-weight: 700;
    margin-left: 2px;
}

.settlement-dot {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 2px 5px rgba(15, 23, 42, 0.18);
}

@media (max-width: 768px) {
    .settlement-chart-area {
        min-height: 132px !important;
        padding: 8px 0 2px 0 !important;
    }

    .settlement-donut-3d {
        width: 112px !important;
        height: 112px !important;
    }

    .settlement-donut-face {
        inset: 18px;
    }

    .settlement-center-value {
        font-size: 1.18rem;
    }

    .settlement-legend {
        gap: 8px !important;
        padding: 10px 0 2px 0 !important;
        margin-top: 6px !important;
    }

    .settlement-legend-item {
        padding: 7px 9px;
    }
}

@media (max-width: 420px) {
    .settlement-legend {
        gap: 8px !important;
        padding: 8px 0 2px 0 !important;
    }

    .settlement-legend-item {
        flex: 1 1 118px;
        justify-content: center;
        font-size: 0.72rem !important;
    }

    .settlement-legend-item strong {
        font-size: 0.72rem;
    }
}

/* ==========================================================================
   LOGO SIZE & PLACEMENT - STANDARDIZED ACROSS ALL SECTIONS
   ========================================================================== */
.global-app-branding-logo {
    display: inline-block !important;
    height: auto !important;
    max-height: 58px !important;
    width: auto !important;
    max-width: 200px !important;
    vertical-align: middle !important;
}

@media (max-width: 768px) {
    .global-app-branding-logo {
        max-height: 48px !important;
        max-width: 160px !important;
    }
}

/* ==========================================================================
   APP BACKGROUND WALLPAPER
   ========================================================================== */

/* Fixed-position pseudo-element ensures the wallpaper stays stationary on ALL devices,
   including mobile (where `background-attachment: fixed` is notoriously unreliable). */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('app-background.PNG') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* No overlay — let the wallpaper show through clearly */
.dashboard-wrapper {
    background: transparent !important;
}

.main-content {
    background: transparent !important;
}

/* Sidebar keeps full opacity for readability */
.sidebar {
    background: rgba(255, 255, 255, 0.97) !important;
}

/* Ensure all portal pages are transparent so the wallpaper shows through */
.portal-page {
    background: transparent !important;
}

/* ==========================================================================
   DESKTOP LAYOUT STANDARDIZATION - DASHBOARD ALIGNED WITH EXPENDITURES
   ========================================================================== */
@media (min-width: 769px) {
    /* --- DASHBOARD SECTION: Full-match with Expenditures layout --- */
    #dashboardSection {
        padding: 0 !important;
        background: transparent !important;
    }
    /* Remove max-width constraints from Dashboard so it flows full-width like Expenditures */
    #dashboardSection .apple-header-deck {
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 32px !important;
    }
    #dashboardSection .apple-header-deck .apple-main-title {
        font-size: 1.8rem !important;
        font-weight: 700 !important;
        letter-spacing: normal !important;
        color: var(--text-primary) !important;
        margin: 0 !important;
    }
    #dashboardSection .apple-kpi-grid {
        max-width: 100% !important;
        padding: 0 !important;
        gap: 20px !important;
        margin-bottom: 24px !important;
    }
    #dashboardSection .apple-split-charts-layout {
        max-width: 100% !important;
        padding: 0 !important;
        gap: 24px !important;
        margin-bottom: 24px !important;
    }
    #dashboardSection .apple-card-shell-wrapper {
        max-width: 100% !important;
        padding: 0 !important;
    }
    #dashboardSection .apple-card-shell {
        max-width: 100% !important;
        margin-bottom: 24px !important;
    }
    #dashboardSection .apple-dashboard-sub-heading {
        font-size: 1.2rem !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        margin: 0 0 16px 0 !important;
        letter-spacing: normal !important;
    }
    /* Consistent border-radius/shadow on Dashboard cards matching Expenditures .card */
    #dashboardSection .apple-kpi-card {
        border-radius: 12px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    }
    #dashboardSection .apple-card {
        border-radius: 12px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    }
    #dashboardSection .apple-card-shell {
        border-radius: 12px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    }
}

/* Reports Hub preview modal overrides: placed late to beat generic modal sizing. */
.apple-modal-window-shell.report-preview-shell {
    width: min(1400px, calc(100vw - 56px)) !important;
    max-width: min(1400px, calc(100vw - 56px)) !important;
    max-height: 94vh !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24) !important;
}

.report-preview-toolbar {
    padding: 22px 64px 18px 28px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}

.report-preview-actions {
    display: flex !important;
    position: static !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 28px !important;
    border-top: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}

.report-preview-scroll {
    max-height: calc(94vh - 142px) !important;
    padding: 28px !important;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
    border: none !important;
    border-radius: 0 !important;
}

.report-preview-document {
    width: 1120px !important;
    margin: 0 auto !important;
    min-height: 720px !important;
    padding: 38px 42px !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12) !important;
    border: 1px solid #e2e8f0 !important;
}

.report-preview-title-group {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.report-preview-logo {
    width: 46px !important;
    height: 46px !important;
    object-fit: contain !important;
    flex: 0 0 46px !important;
    border-radius: 50% !important;
}

.report-preview-document-header {
    padding-bottom: 18px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.report-preview-filter-strip {
    padding: 12px 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 18px !important;
}

@media (max-width: 768px) {
    .apple-modal-window-shell.report-preview-shell {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: 92vh !important;
        padding: 16px !important;
        gap: 12px !important;
        overflow: auto !important;
        background: rgba(255, 255, 255, 0.88) !important;
    }

    .report-preview-actions {
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
        padding-top: 0 !important;
        padding: 0 !important;
        border-top: none !important;
    }

    .report-preview-actions button {
        flex: 0 1 auto !important;
    }

    .report-preview-scroll {
        max-height: calc(92vh - 158px) !important;
        padding: 0 !important;
        border: 1px solid var(--glass-border) !important;
        border-radius: var(--radius-md) !important;
    }

    .report-preview-document {
        width: 860px !important;
        margin: 0 !important;
        min-height: 560px !important;
        padding: 22px !important;
        box-shadow: none !important;
    }
}

/* UX smoothness/performance pass: lightweight motion only, no workflow changes. */
html {
    scroll-behavior: smooth;
}

body,
.main-content,
.apple-minimal-modal-overlay,
.report-preview-scroll,
.sidebar {
    -webkit-overflow-scrolling: touch;
}

.portal-page {
    animation: bbg-page-enter 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: opacity, transform;
}

@keyframes bbg-page-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.apple-minimal-modal-overlay {
    animation: bbg-modal-fade 0.2s ease-out both;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    will-change: opacity;
}

.apple-modal-window-shell {
    animation: bbg-modal-rise 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

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

@keyframes bbg-modal-rise {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.apple-minimal-modal-overlay.modal-closing {
    animation: bbg-modal-fade-out 0.18s ease-in both;
    pointer-events: none !important;
}

.apple-minimal-modal-overlay.modal-closing .apple-modal-window-shell {
    animation: bbg-modal-scale-out 0.18s ease-in both;
}

@keyframes bbg-modal-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes bbg-modal-scale-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.96);
    }
}

.universal-mobile-menu-trigger,
.sidebar-dismiss-overlay,
.sidebar-overlay {
    backface-visibility: hidden;
    transform: translateZ(0);
}

.sidebar {
    will-change: transform;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar-dismiss-overlay,
.sidebar-overlay {
    will-change: opacity;
}

button,
.upload-btn,
.icon-btn,
.apple-modal-btn-primary,
.apple-modal-btn-secondary,
.apple-modal-upload-btn,
.nav-links li {
    transition-duration: 0.18s !important;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
    .upload-btn:hover,
    .icon-btn:hover,
    .apple-modal-btn-primary:hover,
    .apple-modal-btn-secondary:hover,
    .apple-modal-upload-btn:hover {
        transform: translateY(-2px);
    }

    #dashboardSection .apple-kpi-card {
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    #dashboardSection .apple-kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
    }

    #expenditureSection .table-row,
    #vehicleRegistrySection .table-row,
    #serviceIntakeSection .table-row,
    #reportsHubSection .table-row,
    #dashboardLiveServiceLogsContainer .table-row {
        transition: background-color 0.18s ease, transform 0.18s ease !important;
    }

    #expenditureSection .table-row:hover,
    #vehicleRegistrySection .table-row:hover,
    #serviceIntakeSection .table-row:hover,
    #reportsHubSection .table-row:hover,
    #dashboardLiveServiceLogsContainer .table-row:hover {
        background: #f8fafc !important;
    }
}

button:active,
.upload-btn:active,
.icon-btn:active,
.apple-modal-btn-primary:active,
.apple-modal-btn-secondary:active,
.apple-modal-upload-btn:active {
    transform: translateY(1px) scale(0.99);
}

input,
select,
textarea,
.apple-modal-input-field input,
.apple-modal-input-field select,
.apple-modal-input-field textarea,
.filter-control-element input,
.filter-control-element select {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

input:focus,
select:focus,
textarea:focus,
.apple-modal-input-field input:focus,
.apple-modal-input-field select:focus,
.apple-modal-input-field textarea:focus,
.filter-control-element input:focus,
.filter-control-element select:focus {
    border-color: rgba(0, 113, 227, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.10) !important;
    outline: none !important;
}

.report-preview-scroll,
.table-container,
.sidebar {
    overscroll-behavior: contain;
}

@media (max-width: 768px) {
    body:not(.nav-open) .sidebar {
        transform: translate3d(-105%, 0, 0) !important;
    }

    body.nav-open .sidebar {
        transform: translate3d(0, 0, 0) !important;
    }

    .apple-minimal-modal-overlay {
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    .apple-modal-window-shell {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .portal-page {
        animation-duration: 0.2s;
        will-change: auto;
    }
}

/* Premium polish layer: skeletons, success feedback, empty states, and touch response. */
.bbg-success-feedback {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 12000;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.92);
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, 10px, 0) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.bbg-success-feedback.is-visible {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
}

#serviceIntakeSection .service-history-pagination,
#expenditureSection .service-history-pagination,
#vehicleRegistrySection .service-history-pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.service-pagination-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: #ffffff;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.service-pagination-btn.is-active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #ffffff;
}

.service-pagination-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Static-app premium motion layer: opacity and transform only. */
@keyframes bbg-motion-fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

#dashboardSection.dashboard-motion-ready .apple-kpi-card {
    animation: bbg-motion-fade-up 0.25s ease-out both;
}

#dashboardSection.dashboard-motion-ready .apple-kpi-card:nth-child(1) { animation-delay: 0ms; }
#dashboardSection.dashboard-motion-ready .apple-kpi-card:nth-child(2) { animation-delay: 60ms; }
#dashboardSection.dashboard-motion-ready .apple-kpi-card:nth-child(3) { animation-delay: 120ms; }
#dashboardSection.dashboard-motion-ready .apple-kpi-card:nth-child(4) { animation-delay: 180ms; }

#dashboardSection.dashboard-motion-ready .settlement-card {
    animation: bbg-motion-fade-up 0.25s ease-out 120ms both;
}

#reportsHubSection.reports-motion-ready .report-filter-panel {
    animation: bbg-motion-fade-up 0.25s ease-out both;
}

.report-preview-shell.report-preview-motion-ready {
    animation: bbg-motion-fade-up 0.25s ease-out both;
}

.report-filter-chip.is-removing {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    pointer-events: none;
}

.sidebar.sidebar-content-motion-ready .nav-links li,
.sidebar.sidebar-content-motion-ready .sidebar-auth-footer {
    animation: bbg-motion-fade-up 0.22s ease-out both;
}

.sidebar.sidebar-content-motion-ready .nav-links li:nth-child(1) { animation-delay: 20ms; }
.sidebar.sidebar-content-motion-ready .nav-links li:nth-child(2) { animation-delay: 45ms; }
.sidebar.sidebar-content-motion-ready .nav-links li:nth-child(3) { animation-delay: 70ms; }
.sidebar.sidebar-content-motion-ready .nav-links li:nth-child(4) { animation-delay: 95ms; }
.sidebar.sidebar-content-motion-ready .nav-links li:nth-child(5) { animation-delay: 120ms; }
.sidebar.sidebar-content-motion-ready .sidebar-auth-footer { animation-delay: 145ms; }

@media (max-width: 768px) {
    #serviceIntakeModal #intakeServiceDate {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        font-size: 0.9rem !important;
        line-height: 40px !important;
        vertical-align: middle !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    #serviceIntakeSection .service-history-pagination,
    #expenditureSection .service-history-pagination,
    #vehicleRegistrySection .service-history-pagination {
        justify-content: flex-end;
        gap: 8px;
    }

    .service-pagination-btn {
        min-width: 40px;
        height: 40px;
    }

    body.nav-open .sidebar .nav-links li,
    body.nav-open .sidebar .sidebar-auth-footer {
        animation: bbg-motion-fade-up 0.2s ease-out both;
    }

    body.nav-open .sidebar .nav-links li:nth-child(1) { animation-delay: 30ms; }
    body.nav-open .sidebar .nav-links li:nth-child(2) { animation-delay: 55ms; }
    body.nav-open .sidebar .nav-links li:nth-child(3) { animation-delay: 80ms; }
    body.nav-open .sidebar .nav-links li:nth-child(4) { animation-delay: 105ms; }
    body.nav-open .sidebar .nav-links li:nth-child(5) { animation-delay: 130ms; }
    body.nav-open .sidebar .sidebar-auth-footer { animation-delay: 155ms; }
}

/* Reports Hub custom statement filter workspace. */
#reportsHubSection .report-filter-panel {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05) !important;
}

#reportsHubSection .report-filter-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

#reportsHubSection .report-filter-panel-header h3 {
    margin: 2px 0 0 0 !important;
}

.report-filter-panel-kicker {
    display: block;
    color: var(--accent-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.report-filter-reset {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    padding: 6px 0;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.18s ease, transform 0.18s ease;
}

.report-filter-reset:hover {
    color: var(--accent-color);
    transform: translateY(-1px);
}

#reportsHubSection .report-filter-workspace {
    display: flex;
    flex-direction: column;
    gap: 18px !important;
}

#reportsHubSection .report-filter-grid {
    display: grid;
    gap: 16px;
    width: 100%;
}

#reportsHubSection .report-filter-grid-primary,
#reportsHubSection .report-filter-grid-dates,
#reportsHubSection .report-filter-grid-supporting {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#reportsHubSection .report-filter-grid-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#reportsHubSection .report-filter-workspace .input-group {
    gap: 7px;
}

#reportsHubSection .report-filter-workspace .input-group label {
    color: var(--text-secondary);
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

#reportsHubSection .report-filter-workspace .input-group input,
#reportsHubSection .report-filter-workspace .input-group select {
    height: 46px;
    min-height: 46px;
    padding: 0 14px;
    background: rgba(248, 250, 252, 0.88);
    border-color: rgba(203, 213, 225, 0.95);
    box-sizing: border-box;
}

#reportsHubSection .report-filter-workspace .input-group input:hover,
#reportsHubSection .report-filter-workspace .input-group select:hover {
    border-color: rgba(148, 163, 184, 0.9);
}

.report-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
}

.report-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    border: 1px solid rgba(0, 163, 137, 0.18);
    border-radius: 999px;
    background: rgba(0, 163, 137, 0.08);
    color: var(--accent-color);
    padding: 6px 10px 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    animation: report-filter-chip-in 0.18s ease-out both;
    transition: transform 0.18s ease, background-color 0.18s ease;
}

.report-filter-chip:hover {
    background: rgba(0, 163, 137, 0.13);
    transform: translateY(-1px);
}

.report-filter-chip span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes report-filter-chip-in {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
    #reportsHubSection .report-filter-panel {
        padding: 20px !important;
    }

    #reportsHubSection .report-filter-panel-header {
        align-items: flex-start;
        margin-bottom: 20px;
    }

    #reportsHubSection .report-filter-reset {
        margin-top: 0;
        white-space: nowrap;
    }

    #reportsHubSection .report-filter-grid-primary,
    #reportsHubSection .report-filter-grid-dates,
    #reportsHubSection .report-filter-grid-secondary,
    #reportsHubSection .report-filter-grid-supporting {
        grid-template-columns: 1fr !important;
    }

    #reportsHubSection .report-filter-workspace .input-group input,
    #reportsHubSection .report-filter-workspace .input-group select {
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
    }
}

.bbg-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: bbg-dialog-backdrop-in 0.2s ease-out both;
}

.bbg-dialog-shell {
    width: min(420px, calc(100vw - 32px));
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18);
    padding: 24px;
    text-align: center;
    animation: bbg-dialog-shell-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    backface-visibility: hidden;
}

.bbg-dialog-overlay.dialog-closing {
    animation: bbg-dialog-backdrop-out 0.18s ease-in both;
    pointer-events: none;
}

.bbg-dialog-overlay.dialog-closing .bbg-dialog-shell {
    animation: bbg-dialog-shell-out 0.18s ease-in both;
}

.bbg-dialog-logo {
    display: block;
    width: 54px;
    height: 54px;
    object-fit: contain;
    margin: 0 auto 12px auto;
}

.bbg-dialog-icon {
    width: 42px;
    height: 42px;
    margin: 0 auto 14px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.15rem;
}

.dialog-success .bbg-dialog-icon {
    background: rgba(52, 199, 89, 0.12);
    color: #34c759;
}

.dialog-warning .bbg-dialog-icon,
.dialog-confirm .bbg-dialog-icon {
    background: rgba(255, 149, 0, 0.14);
    color: #ff9500;
}

.dialog-error .bbg-dialog-icon {
    background: rgba(239, 51, 64, 0.12);
    color: #ef3340;
}

.dialog-info .bbg-dialog-icon {
    background: rgba(0, 113, 227, 0.12);
    color: #0071e3;
}

.bbg-dialog-shell h3 {
    margin: 0 0 8px 0;
    color: #1d1d1f;
    font-size: 1.08rem;
    font-weight: 700;
}

.bbg-dialog-shell p {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.5;
}

.bbg-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.bbg-dialog-btn {
    min-width: 104px;
}

@keyframes bbg-dialog-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bbg-dialog-backdrop-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes bbg-dialog-shell-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bbg-dialog-shell-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.96);
    }
}

@media (max-width: 768px) {
    .bbg-dialog-overlay {
        padding: 14px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .bbg-dialog-shell {
        width: min(100%, 380px);
        padding: 22px 18px;
        border-radius: 14px;
    }

    .bbg-dialog-actions {
        flex-direction: column;
    }

    .bbg-dialog-btn {
        width: 100%;
    }
}

.bbg-skeleton-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.bbg-skeleton-row,
body.bbg-data-loading #dashboardSection .apple-kpi-number,
body.bbg-data-loading #reportsHubSection .report-statement-form select,
body.bbg-data-loading #reportsHubSection .report-statement-form input {
    position: relative;
    overflow: hidden;
    background: #f1f5f9 !important;
    color: transparent !important;
}

.bbg-skeleton-row {
    height: 48px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.bbg-skeleton-row::after,
body.bbg-data-loading #dashboardSection .apple-kpi-number::after,
body.bbg-data-loading #reportsHubSection .report-statement-form select::after,
body.bbg-data-loading #reportsHubSection .report-statement-form input::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: bbg-skeleton-pass 0.9s ease-in-out infinite;
}

@keyframes bbg-skeleton-pass {
    to { transform: translateX(100%); }
}

.empty-table-state {
    width: 100%;
    padding: 28px 18px !important;
    text-align: center !important;
    color: var(--text-secondary) !important;
    background: #ffffff;
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

.report-preview-shell {
    animation-duration: 0.22s !important;
}

.report-preview-toolbar {
    padding-bottom: 4px !important;
}

.report-preview-document-header,
.report-preview-filter-strip,
.report-preview-table-wrap {
    animation: bbg-report-preview-soft-in 0.24s ease-out both;
}

@keyframes bbg-report-preview-soft-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (hover: none), (pointer: coarse) {
    button:active,
    .upload-btn:active,
    .icon-btn:active,
    .apple-modal-btn-primary:active,
    .apple-modal-btn-secondary:active,
    .apple-modal-upload-btn:active,
    .apple-kpi-card:active,
    .card:active,
    .nav-links li:active {
        transform: scale(0.99);
        transition-duration: 0.08s !important;
    }
}

.mobile-dashboard-subtitle,
.mobile-financial-bar-chart,
.mobile-chart-title,
.mobile-dashboard-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    #page-dashboard {
        padding-top: 64px !important;
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box !important;
    }

    body:has(#page-dashboard:not([style*="display: none"])) > .universal-mobile-menu-trigger {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99980 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100vw !important;
        height: 64px !important;
        padding: 11px 58px 11px 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        background: rgba(247, 248, 251, 0.98) !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(229, 231, 235, 0.78) !important;
        backdrop-filter: saturate(140%) blur(8px) !important;
        -webkit-backdrop-filter: saturate(140%) blur(8px) !important;
        cursor: pointer !important;
    }

    body:has(#page-dashboard:not([style*="display: none"])) > .universal-mobile-menu-trigger .burger-bar-line {
        position: absolute !important;
        right: 20px !important;
        width: 24px !important;
        height: 2px !important;
        background-color: var(--text-primary, #1e293b) !important;
        border-radius: 2px !important;
        transition: transform 0.2s ease, opacity 0.2s ease !important;
    }

    body:has(#page-dashboard:not([style*="display: none"])) > .universal-mobile-menu-trigger .burger-bar-line:nth-of-type(2) {
        top: 24px !important;
    }

    body:has(#page-dashboard:not([style*="display: none"])) > .universal-mobile-menu-trigger .burger-bar-line:nth-of-type(3) {
        top: 31px !important;
    }

    body:has(#page-dashboard:not([style*="display: none"])) > .universal-mobile-menu-trigger .burger-bar-line:nth-of-type(4) {
        top: 38px !important;
    }

    body.nav-open:has(#page-dashboard:not([style*="display: none"])) > .universal-mobile-menu-trigger .burger-bar-line:nth-of-type(2),
    body:has(#page-dashboard:not([style*="display: none"])) > .universal-mobile-menu-trigger.active-cross .burger-bar-line:nth-of-type(2) {
        top: 31px !important;
        transform: rotate(45deg) !important;
    }

    body.nav-open:has(#page-dashboard:not([style*="display: none"])) > .universal-mobile-menu-trigger .burger-bar-line:nth-of-type(3),
    body:has(#page-dashboard:not([style*="display: none"])) > .universal-mobile-menu-trigger.active-cross .burger-bar-line:nth-of-type(3) {
        opacity: 0 !important;
    }

    body.nav-open:has(#page-dashboard:not([style*="display: none"])) > .universal-mobile-menu-trigger .burger-bar-line:nth-of-type(4),
    body:has(#page-dashboard:not([style*="display: none"])) > .universal-mobile-menu-trigger.active-cross .burger-bar-line:nth-of-type(4) {
        top: 31px !important;
        transform: rotate(-45deg) !important;
    }

    #dashboardSection {
        background: #f7f8fb !important;
        padding: 8px 0 18px 0 !important;
    }

    #dashboardSection .global-app-branding {
        display: none !important;
    }

    body:has(#page-dashboard:not([style*="display: none"])) > .universal-mobile-menu-trigger .global-app-branding {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        height: 34px !important;
    }

    body:has(#page-dashboard:not([style*="display: none"])) > .universal-mobile-menu-trigger .global-app-branding-logo {
        width: auto !important;
        max-width: 132px !important;
        height: 34px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 !important;
    }

    #dashboardSection .apple-header-deck {
        margin-bottom: 10px !important;
        padding: 0 10px !important;
    }

    #dashboardSection .apple-title-area {
        gap: 2px !important;
    }

    #dashboardSection .apple-main-title {
        font-size: 1.36rem !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;
    }

    #dashboardSection .mobile-dashboard-subtitle {
        display: block !important;
        margin: 2px 0 0 0 !important;
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        color: #6b7280 !important;
        font-weight: 500 !important;
    }

    #dashboardSection .apple-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        padding: 0 10px !important;
        margin-bottom: 12px !important;
    }

    #dashboardSection .apple-kpi-card {
        min-height: 104px !important;
        padding: 12px 11px 10px 11px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(229, 231, 235, 0.9) !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055) !important;
        background: #ffffff !important;
    }

    #dashboardSection .apple-kpi-card::before {
        height: 4px !important;
        border-radius: 14px 14px 0 0 !important;
    }

    #dashboardSection .apple-kpi-label {
        font-size: 0.64rem !important;
        line-height: 1.2 !important;
        letter-spacing: 0.04em !important;
    }

    #dashboardSection .apple-kpi-number {
        font-size: clamp(1rem, 4.4vw, 1.22rem) !important;
        line-height: 1.14 !important;
        margin: 7px 0 4px 0 !important;
        letter-spacing: 0 !important;
        overflow-wrap: anywhere !important;
    }

    #dashboardSection .apple-kpi-trend {
        font-size: 0.66rem !important;
        line-height: 1.25 !important;
    }

    #dashboardSection .apple-kpi-card:first-child .apple-kpi-trend {
        display: none !important;
    }

    #dashboardSection .apple-split-charts-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 0 10px !important;
        margin-bottom: 12px !important;
    }

    #dashboardSection .apple-card {
        border-radius: 16px !important;
        padding: 14px !important;
        background: #ffffff !important;
        border: 1px solid rgba(229, 231, 235, 0.9) !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055) !important;
    }

    #dashboardSection .apple-card-title {
        font-size: 0.92rem !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }

    #dashboardSection .desktop-chart-title {
        display: none !important;
    }

    #dashboardSection .mobile-chart-title {
        display: inline !important;
    }

    #dashboardSection .financial-chart-card {
        min-height: 245px !important;
    }

    #dashboardSection .chart-canvas-wrapper,
    #dashboardSection .financial-chart-legend {
        display: none !important;
    }

    #dashboardSection .mobile-financial-bar-chart {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 8px !important;
        height: 176px !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    #dashboardSection .mobile-chart-guides {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 8px 0 22px 0 !important;
        color: #9ca3af !important;
        font-size: 0.56rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    #dashboardSection .mobile-chart-bars {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: end !important;
        gap: 9px !important;
        padding: 8px 2px 20px 2px !important;
        min-width: 0 !important;
        background: linear-gradient(to bottom, rgba(226,232,240,0.9) 1px, transparent 1px) 0 8px / 100% 29px repeat-y !important;
    }

    #dashboardSection .mobile-chart-bar-item {
        height: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
    }

    #dashboardSection .mobile-bar-value {
        max-width: 100% !important;
        padding: 4px 6px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(226, 232, 240, 0.92) !important;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.07) !important;
        font-size: 0.58rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        color: #111827 !important;
        white-space: nowrap !important;
    }

    #dashboardSection .mobile-bar-track {
        width: min(42px, 70%) !important;
        height: 112px !important;
        display: flex !important;
        align-items: flex-end !important;
        border-radius: 16px 16px 8px 8px !important;
        background: rgba(241, 245, 249, 0.95) !important;
        overflow: hidden !important;
    }

    #dashboardSection .mobile-bar-fill {
        width: 100% !important;
        min-height: 8px !important;
        border-radius: 16px 16px 8px 8px !important;
        transition: height 0.24s ease !important;
    }

    #dashboardSection .mobile-chart-bar-item.revenue .mobile-bar-fill {
        background: rgba(0, 113, 227, 0.58) !important;
    }

    #dashboardSection .mobile-chart-bar-item.expenses .mobile-bar-fill {
        background: rgba(255, 149, 0, 0.62) !important;
    }

    #dashboardSection .mobile-chart-bar-item.unpaid .mobile-bar-fill {
        background: rgba(255, 59, 48, 0.58) !important;
    }

    #dashboardSection .mobile-bar-label {
        font-size: 0.62rem !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        color: #6b7280 !important;
        white-space: nowrap !important;
    }

    #dashboardSection .settlement-card {
        min-height: 210px !important;
        grid-column: 1 / -1 !important;
    }

    #dashboardSection .settlement-donut-3d {
        --settled-arc-pct: 0%;
        display: block !important;
        position: relative !important;
        width: min(230px, 100%) !important;
        height: 142px !important;
        margin: 0 auto !important;
        background: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        overflow: visible !important;
    }

    #dashboardSection .settlement-chart-area {
        min-height: 150px !important;
        padding: 2px 0 0 0 !important;
        perspective: none !important;
    }

    #dashboardSection .settlement-donut-3d::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        width: min(220px, 100%) !important;
        height: min(220px, 96vw) !important;
        border-radius: 50% !important;
        transform: translateX(-50%) !important;
        background:
            repeating-conic-gradient(from -90deg, rgba(255,255,255,0) 0deg 3deg, rgba(255,255,255,0.9) 3deg 5deg),
            conic-gradient(from -90deg, #34c759 0 var(--settled-arc-pct), #e5e7eb var(--settled-arc-pct) 50%, transparent 50% 100%) !important;
        -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 59% 70%, transparent 71% 100%) !important;
        mask: radial-gradient(circle, transparent 0 58%, #000 59% 70%, transparent 71% 100%) !important;
        pointer-events: none !important;
    }

    #dashboardSection .settlement-donut-3d::after {
        display: none !important;
    }

    #dashboardSection .settlement-donut-face {
        display: none !important;
    }

    #dashboardSection .settlement-donut-center {
        position: absolute !important;
        left: 50% !important;
        bottom: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        background: transparent !important;
        transform: translateX(-50%) !important;
        z-index: 2 !important;
    }

    #dashboardSection .settlement-center-value {
        font-size: 1.55rem !important;
        line-height: 1 !important;
        color: #111827 !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
    }

    #dashboardSection .settlement-center-label {
        font-size: 0.62rem !important;
        font-weight: 800 !important;
        color: #6b7280 !important;
        letter-spacing: 0.08em !important;
    }

    #dashboardSection .settlement-legend {
        padding-top: 8px !important;
        border-top: 0 !important;
    }

    #dashboardSection .apple-card-shell-wrapper {
        display: none !important;
    }

    #dashboardSection .apple-card-shell {
        border-radius: 16px !important;
        padding: 12px !important;
        background: #ffffff !important;
        border: 1px solid rgba(229, 231, 235, 0.9) !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055) !important;
    }

    #dashboardSection .apple-dashboard-sub-heading {
        margin: 2px 0 10px 0 !important;
        font-size: 0.88rem !important;
        letter-spacing: 0.02em !important;
    }

    #dashboardLiveServiceLogsContainer {
        gap: 8px !important;
        padding: 0 !important;
    }

    #dashboardLiveServiceLogsContainer .table-row {
        border-radius: 12px !important;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.045) !important;
        border: 1px solid rgba(229, 231, 235, 0.85) !important;
        padding: 10px !important;
    }

    #page-dashboard .mobile-dashboard-bottom-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 99970 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0 !important;
        min-height: 70px !important;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)) 6px !important;
        box-sizing: border-box !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border-top: 1px solid rgba(229, 231, 235, 0.95) !important;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08) !important;
    }

    #page-dashboard .mobile-dashboard-nav-item {
        appearance: none !important;
        -webkit-appearance: none !important;
        border: 0 !important;
        background: transparent !important;
        color: #8e8e93 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        padding: 4px 2px !important;
        font-size: 0.58rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        text-align: center !important;
        cursor: pointer !important;
    }

    #page-dashboard .mobile-dashboard-nav-item svg {
        width: 20px !important;
        height: 20px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
        flex: 0 0 auto !important;
    }

    #page-dashboard .mobile-dashboard-nav-item span {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #page-dashboard .mobile-dashboard-nav-item.is-active {
        color: #ef3340 !important;
    }
}

@media (min-width: 390px) and (max-width: 768px) {
    #dashboardSection .apple-split-charts-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    #dashboardSection .financial-chart-card,
    #dashboardSection .settlement-card {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 360px) {
    #dashboardSection .mobile-financial-bar-chart {
        grid-template-columns: 46px minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    #dashboardSection .mobile-chart-bars {
        gap: 6px !important;
    }

    #dashboardSection .mobile-bar-value {
        font-size: 0.52rem !important;
        padding: 4px 5px !important;
    }

    #dashboardSection .mobile-bar-track {
        width: min(36px, 74%) !important;
    }
}

/* Vehicle Registry form expansion: scoped only to Add/Edit Vehicle modals */
@media (min-width: 769px) {
    .vehicle-registry-modal-shell {
        max-width: 920px !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
    }

    .vehicle-registry-form-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .vehicle-registry-form-grid .edit-upload-section,
    .vehicle-registry-form-grid .apple-modal-action-row {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 768px) {
    .vehicle-registry-modal-shell {
        max-height: 92vh !important;
        overflow-y: auto !important;
    }

    .vehicle-registry-form-grid {
        display: flex !important;
        flex-direction: column !important;
    }
}

#vehicleRegistrySection .registry-records-header {
    display: none !important;
}

#vehicleRegistrySection #rcTableBody .registry-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

#vehicleRegistrySection .registry-log-field {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

#vehicleRegistrySection .registry-log-label {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

#vehicleRegistrySection .registry-log-value {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--text-primary) !important;
}

#vehicleRegistrySection .registry-log-actions {
    grid-column: 1 / -1 !important;
    justify-content: flex-end !important;
}

@media (max-width: 768px) {
    #vehicleRegistrySection #rcTableBody .registry-grid {
        grid-template-columns: 1fr !important;
    }

    #vehicleRegistrySection .registry-log-field {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
    }

    #vehicleRegistrySection .registry-log-label {
        flex: 0 0 44% !important;
    }

    #vehicleRegistrySection .registry-log-value {
        flex: 1 1 auto !important;
        text-align: right !important;
        white-space: normal !important;
    }

    #vehicleRegistrySection .registry-log-actions {
        width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Invoice, quotation and settings pages */
.iq-layout{display:grid;gap:22px}.iq-editor,.iq-history,.settings-shell{padding:24px}.iq-type-switch,.settings-tabs{display:flex;gap:8px;margin-bottom:20px}.iq-type-switch button,.settings-tabs button{border:1px solid var(--border-color,#ddd);background:transparent;padding:10px 18px;border-radius:9px;font-weight:700;cursor:pointer}.iq-type-switch button.active,.settings-tabs button.active{background:var(--primary-color,#e53935);color:#fff;border-color:transparent}.iq-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.iq-form-grid label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:700}.iq-form-grid input,.iq-form-grid select,.iq-form-grid textarea,.settings-search,.iq-history-title input,.iq-history-title select{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--border-color,#d9dde3);border-radius:8px;background:var(--surface,#fff);color:inherit}.span-2{grid-column:1/-1}.iq-customer-preview{margin:16px 0;padding:14px;border-radius:10px;background:rgba(127,127,127,.08);line-height:1.55}.iq-items-head,.settings-panel-head,.iq-history-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px}.iq-lines{display:grid;gap:8px}.iq-line{display:grid;grid-template-columns:minmax(180px,3fr) 90px 130px 150px 36px;gap:8px;align-items:center}.iq-line input{min-width:0;padding:10px;border:1px solid var(--border-color,#ddd);border-radius:8px}.iq-line-total{text-align:right}.danger-mini{border:0;background:rgba(200,0,0,.1);color:#b00020;border-radius:8px;height:36px;cursor:pointer}.iq-notes{margin-top:18px}.iq-total-box{margin:20px 0 0 auto;max-width:390px;display:grid;gap:9px}.iq-total-box>div,.iq-total-box>label{display:flex;justify-content:space-between;align-items:center;gap:12px}.iq-total-box input{width:130px;padding:8px;border:1px solid var(--border-color,#ddd);border-radius:7px}.iq-total-box .grand{font-size:1.15rem;border-top:1px solid var(--border-color,#ddd);padding-top:10px}.iq-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.secondary-action-btn{padding:10px 16px;border:1px solid var(--border-color,#ccc);border-radius:8px;background:transparent;color:inherit;font-weight:700;cursor:pointer}.iq-history-scroll{overflow:auto}.iq-table{width:100%;border-collapse:collapse;min-width:850px}.iq-table th,.iq-table td{padding:11px 9px;border-bottom:1px solid var(--border-color,#e5e5e5);text-align:left;font-size:.84rem}.iq-row-actions{white-space:nowrap}.iq-row-actions button,.settings-party-row button{border:0;background:transparent;text-decoration:underline;cursor:pointer;color:inherit;margin-right:6px}.settings-panel{min-height:260px}.settings-search{max-width:420px;margin-bottom:14px}.settings-party-list{display:grid;gap:8px}.settings-party-row{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:13px;border:1px solid var(--border-color,#e2e2e2);border-radius:10px}.settings-party-row div:first-child{display:grid;gap:3px}.settings-party-row span,.settings-party-row small{opacity:.72}.currency-settings-list{display:grid;gap:10px;margin-top:18px}.currency-row{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;padding:14px;border:1px solid var(--border-color,#ddd);border-radius:10px}.currency-row>div{display:grid}.currency-row span{opacity:.7;font-size:.85rem}.party-modal{max-width:720px}.iq-preview-modal{max-width:900px;max-height:94vh;overflow:auto}.iq-paper{background:#fff;color:#161616;padding:42px;min-height:900px;font-family:var(--app-font);font-weight:400;line-height:1.45}.iq-paper-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid #222;padding-bottom:20px}.iq-paper-head img{width:150px;max-height:70px;object-fit:contain}.iq-paper-head h1{margin:0 0 6px;font-size:30px}.iq-paper-meta{display:flex;justify-content:space-between;gap:30px;margin:25px 0;line-height:1.6}.iq-billto{padding:16px;background:#f5f5f5;margin-bottom:20px}.iq-billto small{font-weight:700;letter-spacing:1px}.iq-billto h3{margin:5px 0}.iq-paper-table{width:100%;border-collapse:collapse}.iq-paper-table th{background:#f42f3e;color:#fff;font-weight:600}.iq-paper-table th,.iq-paper-table td{padding:11px;border-bottom:1px solid #ddd;text-align:left}.iq-paper-table th:nth-child(n+2),.iq-paper-table td:nth-child(n+2){text-align:right}.iq-paper-totals{width:330px;margin:20px 0 20px auto}.iq-paper-totals div{display:flex;justify-content:space-between;padding:7px}.iq-paper-totals .grand{border-top:2px solid #222;font-size:1.12rem}.iq-paper-note{margin-top:15px}.iq-paper-note p{white-space:pre-wrap;margin:5px 0}.iq-bank{margin-top:28px;padding-top:15px;border-top:1px solid #bbb;line-height:1.7}.iq-generated{text-align:center;margin-top:30px;font-size:12px;color:#666}
@media(max-width:768px){.iq-editor,.iq-history,.settings-shell{padding:15px}.iq-form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.iq-line{grid-template-columns:1fr 70px}.iq-line .iq-desc{grid-column:1/-1}.iq-line-total{text-align:left}.iq-items-head,.settings-panel-head,.iq-history-title{align-items:stretch;flex-direction:column}.settings-party-row{align-items:flex-start;flex-direction:column}.currency-row{grid-template-columns:1fr 1fr}.currency-row>div{grid-column:1/-1}.iq-paper{padding:24px}.iq-paper-meta{flex-direction:column}.iq-paper-totals{width:100%}}

/* The detached print root also supplies measurement styles before printing. */
#iqPrintRoot{position:absolute;left:0;top:0;width:186mm;background:#fff;color:#161616;page:iq-document}
#iqPrintRoot .iq-paper{width:186mm;min-height:0;height:auto;margin:0;padding:0;box-sizing:border-box;font:400 10pt/1.3 "Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow:visible;overflow-wrap:anywhere}
#iqPrintRoot .iq-paper-head{padding-bottom:3mm}
#iqPrintRoot .iq-paper-head img{width:35mm;height:16mm;object-fit:contain}
#iqPrintRoot .iq-paper-head h1{font-size:22pt;margin:0 0 1mm}
#iqPrintRoot .iq-paper-meta{flex-direction:row;margin:3mm 0;gap:5mm;line-height:1.3}
#iqPrintRoot .iq-billto{padding:2mm;margin-bottom:3mm}
#iqPrintRoot .iq-billto h3{font-size:12pt;margin:1mm 0}
#iqPrintRoot .iq-paper-table{table-layout:fixed;font-size:inherit}
#iqPrintRoot .iq-paper-table th:first-child{width:49%}
#iqPrintRoot .iq-paper-table th:nth-child(2){width:9%}
#iqPrintRoot .iq-paper-table th,#iqPrintRoot .iq-paper-table td{padding:1.5mm 2mm}
#iqPrintRoot .iq-paper-totals{width:78mm;margin:3mm 0 3mm auto}
#iqPrintRoot .iq-paper-totals div{padding:1mm}
#iqPrintRoot .iq-paper-totals .grand{font-size:11pt}
#iqPrintRoot .iq-paper-note{margin-top:2mm}
#iqPrintRoot .iq-paper-note p{margin:1mm 0}
#iqPrintRoot .iq-bank{margin-top:3mm;padding-top:2mm;line-height:1.3}
#iqPrintRoot .iq-generated{margin-top:3mm;font-size:9pt}
@page iq-document{size:A4 portrait;margin:12mm}
@media print{
html:has(body.iq-printing),body.iq-printing{display:block!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible!important;background:#fff!important}
body.iq-printing>*:not(#iqPrintRoot){display:none!important}
html:has(body.iq-printing)::before,html:has(body.iq-printing)::after,body.iq-printing::before,body.iq-printing::after{display:none!important;content:none!important}
body.iq-printing #iqPrintRoot{display:block!important;position:static!important;margin:0!important;padding:0!important}
#iqPrintRoot,#iqPrintRoot *{visibility:visible!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
#iqPrintRoot .iq-paper-table tr,#iqPrintRoot .iq-paper-head,#iqPrintRoot .iq-paper-meta,#iqPrintRoot .iq-billto,#iqPrintRoot .iq-paper-totals,#iqPrintRoot .iq-bank,#iqPrintRoot .iq-paper-note{break-inside:avoid}
}

/* Invoice and quotation document spacing and bottom contact footer. */
.iq-paper{display:flex;flex-direction:column;box-sizing:border-box}
.iq-document-body{flex:none;padding-top:5mm}
.iq-document-footer{flex:none;margin-top:auto;padding-top:6mm;text-align:center;font-size:10px;line-height:1.6;color:#444;overflow-wrap:normal;break-inside:avoid}
.iq-document-footer .iq-generated{margin:0 0 2mm;font-size:11px}
#iqPrintRoot .iq-paper{min-height:271mm}
#iqPrintRoot .iq-document-body{width:186mm;align-self:center}
#iqPrintRoot .iq-paper-meta{margin:7mm 0 5mm}
#iqPrintRoot .iq-document-footer{width:100%;font-size:7.5pt;padding-top:5mm;line-height:1.5}
#iqPrintRoot .iq-document-footer .iq-generated{margin:0 0 2mm;font-size:8pt}
#iqPrintRoot .iq-compact-print .iq-paper-table th,#iqPrintRoot .iq-compact-print .iq-paper-table td{padding-top:0.8mm;padding-bottom:0.8mm}

/* Keep document details together below totals and above the contact footer. */
.iq-document-details{text-align:left;font-size:13px;line-height:1.4;color:#161616;margin-bottom:5mm;clear:both}
.iq-document-details .iq-bank{margin-top:3mm;padding-top:2mm}
#iqPrintRoot .iq-document-details{font-size:9pt;line-height:1.3;margin-bottom:3mm}
#iqPrintRoot .iq-document-footer{padding-top:4mm}
@media screen and (max-width:768px){
 #iqPreviewModal{padding:0;align-items:stretch;z-index:10000}
 #iqPreviewModal .iq-preview-modal{box-sizing:border-box;width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;padding:12px;overflow:auto;-webkit-overflow-scrolling:touch}
 #iqPreviewModal .modal-header{position:sticky;top:0;background:var(--surface,#fff);z-index:1}
 #iqPreviewModal .iq-paper{padding:14px;min-height:0;font-size:12px;overflow-wrap:anywhere}
 #iqPreviewModal .iq-document-body{padding-top:12px;min-width:0}
 #iqPreviewModal .iq-paper-head img{width:100px}
 #iqPreviewModal .iq-paper-head h1{font-size:23px}
 #iqPreviewModal .iq-paper-head strong{font-size:11px}
 #iqPreviewModal .iq-paper-meta{margin:16px 0;gap:8px}
 #iqPreviewModal .iq-paper-table{table-layout:fixed;font-size:11px}
 #iqPreviewModal .iq-paper-table th:first-child{width:40%}
 #iqPreviewModal .iq-paper-table th:nth-child(2){width:10%}
 #iqPreviewModal .iq-paper-table th,#iqPreviewModal .iq-paper-table td{padding:8px 3px;overflow-wrap:anywhere}
 #iqPreviewModal .iq-document-details{font-size:12px}
 #iqPreviewModal .iq-document-footer{font-size:9px;padding-top:18px}
 #iqPreviewModal .iq-actions{position:sticky;bottom:0;background:var(--surface,#fff);padding:10px 0 max(10px,env(safe-area-inset-bottom));z-index:1}
 #iqPreviewModal .iq-actions button{min-height:44px;flex:1}
 #page-invoice .iq-form-grid input,#page-invoice .iq-form-grid select,#page-invoice .iq-form-grid textarea,#page-invoice .iq-line input{font-size:16px}
}

#iqPrintRoot .iq-compact-print .iq-paper-meta{margin:4mm 0 3mm}
#iqPrintRoot .iq-compact-print .iq-paper-table th,#iqPrintRoot .iq-compact-print .iq-paper-table td{padding-top:0.4mm;padding-bottom:0.4mm}

/* Payroll workspace. Kept fully scoped so existing sections remain unchanged. */
.nav-links li.nav-payroll { color: #d92332; }
.nav-links li.nav-payroll:hover,
.nav-links li.nav-payroll.active {
    color: #f42f3e;
    background: rgba(244, 47, 62, 0.09);
    border-left-color: #f42f3e;
}

.payroll-workspace { width: 100%; max-width: 1480px; margin: 0 auto; }
.payroll-page-header { align-items: flex-end; margin-bottom: 22px; }
.payroll-header-controls { display: grid; gap: 6px; min-width: 210px; padding: 12px 14px; border: 1px solid var(--glass-border); border-radius: 10px; background: #fff; }
.payroll-header-controls label { font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); }
.payroll-header-controls input,
.payroll-inline-controls input,
.payroll-table input,
.payroll-table select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: #fff;
    color: var(--text-primary);
    padding: 9px 10px;
    font: inherit;
}

.payroll-header-controls input:focus,
.payroll-inline-controls input:focus,
.payroll-table input:focus,
.payroll-table select:focus {
    outline: none;
    border-color: rgba(244, 47, 62, 0.55);
    box-shadow: 0 0 0 3px rgba(244, 47, 62, 0.08);
}

.payroll-status-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}

.payroll-summary-item { min-width: 0; padding: 13px 14px; border: 1px solid var(--glass-border); border-radius: 10px; background: #fff; }
.payroll-summary-item > span { display: block; margin-bottom: 5px; color: var(--text-secondary); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.payroll-summary-item > strong { display: block; color: var(--text-primary); font-size: 0.9rem; line-height: 1.25; overflow-wrap: anywhere; }
.payroll-summary-item > small { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 0.7rem; }
.payroll-status-text.open { color: #007e6a; }
.payroll-status-text.locked { color: #c53030; }

.payroll-tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 18px;
    padding: 5px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: #fff;
}

.payroll-tabs button {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    padding: 9px 10px;
    text-align: left;
    cursor: pointer;
}

.payroll-tabs button > span:last-child { display: grid; min-width: 0; gap: 2px; }
.payroll-tabs button strong { color: inherit; font-size: 0.76rem; line-height: 1.1; }
.payroll-tabs button small { overflow: hidden; color: var(--text-secondary); font-size: 0.62rem; font-weight: 500; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.payroll-step-number { display: grid; flex: 0 0 26px; width: 26px; height: 26px; place-items: center; border: 1px solid #d9e0e8; border-radius: 50%; background: #fff; color: var(--text-secondary); font-size: 0.7rem; font-weight: 800; }
.payroll-tabs button.active { background: rgba(244, 47, 62, 0.09); color: #d92332; }
.payroll-tabs button.active .payroll-step-number { border-color: #f42f3e; background: #f42f3e; color: #fff; }
.payroll-panel { min-height: 300px; }
.payroll-card { padding: 22px; border-radius: 10px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04); }
.payroll-card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.payroll-card-head h3 { margin: 0 0 4px; font-size: 1rem; }
.payroll-card-head p { margin: 0; color: var(--text-secondary); font-size: 0.82rem; }
.payroll-card-head-wrap { align-items: flex-end; flex-wrap: wrap; }
.payroll-primary-btn { background: #f42f3e; }
.payroll-primary-btn:hover { background: #dc2432; }
.payroll-primary-btn:disabled,
.payroll-card button:disabled { opacity: 0.48; cursor: not-allowed; transform: none; }

.payroll-inline-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.payroll-inline-controls label { display: grid; gap: 5px; color: var(--text-secondary); font-size: 0.75rem; font-weight: 700; }
.payroll-inline-controls input { min-width: 155px; }
.payroll-table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--glass-border); border-radius: 9px; }
.payroll-table { width: 100%; min-width: 880px; border-collapse: collapse; background: #fff; }
.payroll-table th,
.payroll-table td { padding: 11px 10px; border-bottom: 1px solid #edf1f5; text-align: left; vertical-align: middle; font-size: 0.8rem; }
.payroll-table th { background: #f8fafc; color: var(--text-secondary); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.payroll-table tbody tr:last-child td { border-bottom: 0; }
.payroll-table td small { display: block; margin-top: 4px; color: var(--text-secondary); }
.payroll-table tfoot th { background: #f8fafc; color: var(--text-primary); font-size: 0.8rem; text-transform: none; }
.payroll-attendance-table input,
.payroll-attendance-table select { min-width: 126px; padding: 8px; font-size: 0.78rem; }
.payroll-attendance-table td:first-child { min-width: 160px; }
.payroll-empty { padding: 34px !important; color: var(--text-secondary); text-align: center !important; }
.payroll-link-btn { appearance: none; border: 0; background: transparent; color: #d92332; padding: 4px 6px; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.payroll-link-btn.danger { color: var(--danger-color); }

.payroll-status-pill,
.payroll-flag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
}
.payroll-status-pill.open,
.payroll-status-pill.active,
.payroll-status-pill.approved,
.payroll-flag.ok { background: rgba(0, 163, 137, 0.11); color: #007e6a; }
.payroll-status-pill.locked,
.payroll-status-pill.rejected,
.payroll-flag.danger { background: rgba(229, 62, 62, 0.1); color: #c53030; }
.payroll-status-pill.pending,
.payroll-flag.warning { background: rgba(214, 158, 46, 0.13); color: #9b6b09; }
.payroll-status-pill.neutral,
.payroll-status-pill.inactive { background: #eef2f6; color: var(--text-secondary); }
.payroll-notice { margin-bottom: 14px; border-left: 3px solid #f42f3e; background: rgba(244, 47, 62, 0.05); padding: 10px 12px; color: var(--text-secondary); font-size: 0.8rem; }
.payroll-notice.locked { border-left-color: var(--danger-color); }
.payroll-bulk-attendance { margin-bottom: 20px; padding: 18px; border: 1px solid rgba(244, 47, 62, 0.18); border-radius: 10px; background: rgba(244, 47, 62, 0.025); }
.payroll-bulk-heading { margin-bottom: 12px; }
.payroll-bulk-heading h4,
.payroll-day-heading h4 { margin: 0 0 3px; font-size: 0.9rem; }
.payroll-bulk-heading p,
.payroll-day-heading p { margin: 0; color: var(--text-secondary); font-size: 0.76rem; }
.payroll-bulk-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.payroll-bulk-grid label { display: grid; gap: 5px; color: var(--text-secondary); font-size: 0.72rem; font-weight: 700; }
.payroll-bulk-grid input,
.payroll-bulk-grid select { width: 100%; min-width: 0; height: 40px; border: 1px solid var(--glass-border); border-radius: 8px; background: #fff; color: var(--text-primary); padding: 8px 10px; font: inherit; }
.payroll-bulk-grid .upload-btn { min-height: 40px; white-space: nowrap; }
.payroll-day-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
.payroll-review-actions,
.payroll-review-flags { display: flex; flex-wrap: wrap; gap: 8px; }
.payroll-review-flags { margin-bottom: 14px; }
.payroll-calculation-note { margin: -2px 0 14px; color: var(--text-secondary); font-size: 0.76rem; }
.payroll-modal-overlay { display: none; }
.payroll-modal-shell { width: min(760px, calc(100vw - 32px)); max-width: 760px; max-height: 90vh; overflow-y: auto; }
.payroll-modal-logo { display: block; width: 64px; height: 64px; margin: 0 auto 12px; object-fit: contain; }
.payroll-modal-form { max-width: none; }
.payroll-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.payroll-settings-table { min-width: 1180px; }
.payroll-settings-employee { display: grid; gap: 3px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid rgba(244, 47, 62, 0.16); border-radius: 9px; background: rgba(244, 47, 62, 0.04); }
.payroll-settings-employee span { color: var(--text-secondary); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }
.payroll-settings-employee strong { font-size: 0.95rem; }
.payroll-settings-employee small,
.payroll-settings-help { color: var(--text-secondary); font-size: 0.75rem; }
.payroll-settings-help { margin: 14px 0 0; line-height: 1.5; }
.payroll-settings-grid input:disabled { background: #f1f4f7; color: var(--text-secondary); cursor: not-allowed; }

@media (min-width: 769px) {
    .payroll-table tbody tr:hover { background: #fbfcfd; }
}

@media (max-width: 768px) {
    .payroll-page-header { align-items: stretch; gap: 14px; }
    .payroll-header-controls { width: 100%; min-width: 0; }
    .payroll-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
    .payroll-summary-item { padding: 11px 12px; }
    .payroll-summary-item > strong { font-size: 0.8rem; }
    .payroll-tabs { display: flex; margin-inline: -2px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
    .payroll-tabs button { flex: 0 0 148px; min-height: 52px; scroll-snap-align: start; }
    .payroll-card { padding: 14px; }
    .payroll-card-head { align-items: stretch; flex-direction: column; gap: 12px; }
    .payroll-card-head .upload-btn,
    .payroll-card-head .secondary-action-btn { width: 100%; min-height: 42px; }
    .payroll-inline-controls { display: grid; grid-template-columns: 1fr; width: 100%; }
    .payroll-inline-controls input { min-width: 0; min-height: 42px; font-size: 16px; }
    .payroll-table-scroll { overflow: visible; border: 0; border-radius: 0; }
    .payroll-bulk-grid { grid-template-columns: 1fr; }
    .payroll-bulk-grid input,
    .payroll-bulk-grid select { min-height: 44px; font-size: 16px; }
    .payroll-bulk-grid .upload-btn { width: 100%; min-height: 44px; }
    .payroll-day-heading { align-items: stretch; flex-direction: column; }
    .payroll-day-heading .secondary-action-btn { width: 100%; min-height: 42px; }
    .payroll-table,
    .payroll-attendance-table { display: block; min-width: 0; background: transparent; }
    .payroll-table thead { display: none; }
    .payroll-table tbody { display: grid; gap: 10px; }
    .payroll-table tbody tr { display: block; padding: 6px 12px; border: 1px solid var(--glass-border); border-radius: 9px; background: #fff; }
    .payroll-table tbody td { display: grid; grid-template-columns: minmax(104px, 38%) minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; padding: 9px 0; border-bottom: 1px solid #edf1f5; font-size: 0.8rem; overflow-wrap: anywhere; }
    .payroll-table tbody td::before { content: attr(data-label); color: var(--text-secondary); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
    .payroll-table tbody td:last-child { border-bottom: 0; }
    .payroll-table tbody td[colspan] { display: block; padding: 24px 8px !important; }
    .payroll-table tbody td[colspan]::before { content: none; }
    .payroll-table tbody td input,
    .payroll-table tbody td select { width: 100%; min-width: 0; min-height: 42px; font-size: 16px; }
    .payroll-table .payroll-link-btn { min-height: 38px; padding: 8px 10px; border: 1px solid rgba(244, 47, 62, 0.2); border-radius: 7px; text-align: center; }
    .payroll-table tfoot { display: block; margin-top: 10px; }
    .payroll-table tfoot tr { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--glass-border); border-radius: 9px; }
    .payroll-table tfoot th { padding: 10px; }
    .payroll-modal-shell { width: calc(100vw - 20px); max-height: 94dvh; padding: 20px 16px; }
    .payroll-modal-grid { grid-template-columns: 1fr; }
    .payroll-modal-grid input,
    .payroll-modal-grid select { font-size: 16px; }
}

/* BBGarage sidebar polish. Presentation-only; navigation behavior is unchanged. */
.sidebar {
    padding: 18px 14px !important;
    border-right: 1px solid rgba(226, 232, 240, 0.92) !important;
    background: rgba(255, 255, 255, 0.985) !important;
    box-shadow: 8px 0 28px rgba(15, 23, 42, 0.055);
}

.sidebar-nav-body { min-height: 0; }

.sidebar .logo-container {
    display: grid;
    place-items: center;
    margin: 0 0 20px !important;
    padding: 4px 0 14px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.78);
}

.sidebar .sidebar-logo {
    width: 86px;
    height: 86px;
    border: 0;
    background: transparent;
    padding: 0;
    filter: drop-shadow(0 5px 10px rgba(15, 23, 42, 0.08));
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar .nav-links {
    display: grid;
    gap: 4px;
    margin: 0;
}

.sidebar .nav-links li {
    position: relative;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    gap: 12px;
    overflow: hidden;
    border: 1px solid transparent;
    border-left: 0 !important;
    border-radius: 9px;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar .nav-links li::before {
    content: '';
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #f42f3e;
    opacity: 0;
    transform: scaleY(0.45);
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar .nav-links li.active,
.sidebar .nav-links li.nav-payroll.active {
    border-color: rgba(244, 47, 62, 0.12);
    background: rgba(244, 47, 62, 0.075);
    color: #d92332;
}

.sidebar .nav-links li.active::before { opacity: 1; transform: scaleY(1); }

.sidebar .nav-icon {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
    stroke-width: 1.8;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar .nav-text { min-width: 0; line-height: 1.2; }

.sidebar .sidebar-auth-footer {
    margin-top: 18px !important;
    padding: 14px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 11px;
    background: #f8fafc !important;
}

.sidebar .sidebar-auth-footer .user-label {
    color: #94a3b8 !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
}

.sidebar .sidebar-auth-footer .user-email {
    margin: 5px 0 12px !important;
    overflow: hidden;
    color: #334155 !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar .sign-out-btn {
    min-height: 36px;
    border: 1px solid rgba(244, 47, 62, 0.2) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #d92332 !important;
    font-weight: 600 !important;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .sidebar .nav-links li:hover {
        border-color: rgba(226, 232, 240, 0.95);
        background: #f8fafc;
        color: #1e293b;
        transform: translateX(3px);
    }

    .sidebar .nav-links li.active:hover { background: rgba(244, 47, 62, 0.095); color: #d92332; }
    .sidebar .nav-links li:hover .nav-icon { transform: translateX(1px) scale(1.04); }
    .sidebar .sidebar-logo:hover { transform: scale(1.025); }
    .sidebar .sign-out-btn:hover { border-color: rgba(244, 47, 62, 0.32) !important; background: rgba(244, 47, 62, 0.055) !important; transform: translateY(-1px); }
}

.sidebar.sidebar-content-motion-ready .logo-container {
    animation: bbg-motion-fade-up 0.22s ease-out both;
}

.sidebar.sidebar-content-motion-ready .nav-links li:nth-child(6) { animation-delay: 145ms; }
.sidebar.sidebar-content-motion-ready .nav-links li:nth-child(7) { animation-delay: 170ms; }
.sidebar.sidebar-content-motion-ready .nav-links li:nth-child(8) { animation-delay: 195ms; }
.sidebar.sidebar-content-motion-ready .sidebar-auth-footer { animation-delay: 220ms; }

@media (max-width: 768px) {
    .sidebar {
        width: min(86vw, 300px) !important;
        padding: 16px 14px max(16px, env(safe-area-inset-bottom)) !important;
        border-radius: 0 16px 16px 0;
        box-shadow: 18px 0 42px rgba(15, 23, 42, 0.14);
    }

    .sidebar .logo-container { margin-bottom: 14px !important; padding-bottom: 12px; }
    .sidebar .sidebar-logo { width: 74px; height: 74px; }
    .sidebar .nav-links { gap: 3px; margin-bottom: 14px !important; }
    .sidebar .nav-links li { min-height: 45px; padding: 11px 12px; }
    .sidebar .sidebar-auth-footer { width: auto !important; margin-top: auto !important; padding: 13px !important; }
    .sidebar-dismiss-overlay { background: rgba(15, 23, 42, 0.22); }

    body.nav-open .sidebar .nav-links li:nth-child(6) { animation-delay: 155ms; }
    body.nav-open .sidebar .nav-links li:nth-child(7) { animation-delay: 180ms; }
    body.nav-open .sidebar .nav-links li:nth-child(8) { animation-delay: 205ms; }
    body.nav-open .sidebar .sidebar-auth-footer { animation-delay: 230ms; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar *,
    .sidebar *::before { animation: none !important; transition-duration: 0.01ms !important; }
}