:root {
    --bg-primary: #f4f6f9;
    --sidebar-bg: #1e293b;
    --sidebar-text: #94a3b8;
    --sidebar-hover: #334155;
    --text-main: #1e293b;
    --card-bg: #ffffff;
    --accent: #2563eb;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-main);
    overflow-x: hidden;
}

.app-container {
    display: flex;
    min-height: 100vh;
}

/* SIDEBAR LAYOUT */
.sidebar {
    width: 260px;
    background-color: var(--sidebar-bg);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-brand {
    padding: 20px;
    border-bottom: 1px solid #334155;
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-box {
    background-color: var(--accent);
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
}

.sidebar-brand h2 {
    font-size: 18px;
    font-weight: 600;
}

.sidebar-menu {
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-item, .dropdown-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 12px 20px;
    color: var(--sidebar-text);
    text-align: left;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.menu-item:hover, .dropdown-btn:hover, .menu-item.active {
    background-color: var(--sidebar-hover);
    color: #ffffff;
}

.dropdown-btn {
    justify-content: space-between;
}

.dropdown-btn .arrow {
    font-size: 12px;
    transition: transform 0.2s;
}

.dropdown-btn.active .arrow {
    transform: rotate(180deg);
}

.dropdown-container {
    display: none;
    background-color: #0f172a;
    padding: 5px 0;
}

.dropdown-container a {
    display: block;
    padding: 8px 20px 8px 48px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.dropdown-container a:hover {
    color: #ffffff;
}

/* MAIN CONTENT AREA */
.main-content {
    flex-grow: 1;
    padding: 25px;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 25px;
}

.page-title {
    font-size: 24px;
    font-weight: 600;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-profile span {
    font-weight: 600;
    background: #e2e8f0;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 14px;
}

.notif-bell {
    position: relative;
}
.notif-bell-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 19px;
    color: #475569;
    padding: 6px;
    line-height: 1;
}
.notif-bell-btn:hover {
    color: #1e293b;
}
.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 999px;
    min-width: 16px;
    text-align: center;
}
.notif-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 300px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15,23,42,0.12);
    padding: 8px;
    z-index: 50;
}
.notif-dropdown.open {
    display: block;
}
.notif-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #334155;
    text-decoration: none;
    font-size: 13px;
}
.notif-dropdown a:hover {
    background: #f1f5f9;
}
.notif-empty {
    padding: 12px 10px;
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
}
.notif-test-btn {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: none;
    color: #475569;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
}
.notif-test-btn:hover {
    background: #f1f5f9;
}

.logout-btn {
    background: none;
    border: 1px solid #cbd5e1;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.logout-btn:hover {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
}

/* DASHBOARD METRIC CARDS */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.card {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.card h3 {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-value {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}

.card.highlight {
    border-left: 4px solid var(--accent);
}

/* ==========================================================
   ADDITIONS: forms, tables, buttons, alerts, login (app extensions)
   ========================================================== */

.dropdown-btn { justify-content: space-between; }
.dropdown-container a.sublink-active { color: #ffffff; font-weight: 600; }

a.logout-btn { text-decoration: none; display: inline-block; }

.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-size: 14px;
    border: 1px solid transparent;
}
.alert-success { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.alert-danger  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.alert-info    { background: #dbeafe; color: #1e3a8a; border-color: #bfdbfe; }

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}
.btn:hover { background: #1d4ed8; }
.btn-secondary { background: #64748b; }
.btn-secondary:hover { background: #475569; }
.btn-danger { background: #ef4444; }
.btn-danger:hover { background: #dc2626; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.panel {
    background: var(--card-bg);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.panel + .panel { margin-top: 20px; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 13px; font-weight: 600; color: #475569; }
.form-group input,
.form-group select,
.form-group textarea {
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    color: var(--text-main);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.form-actions { margin-top: 20px; display: flex; gap: 10px; }

table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
table.data-table th, table.data-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
}
table.data-table th {
    background: #f8fafc;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}
table.data-table tr:hover td { background: #f8fafc; }
.table-wrap { overflow-x: auto; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.badge-green { background: #dcfce7; color: #166534; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-gray { background: #e2e8f0; color: #334155; }
.badge-blue { background: #dbeafe; color: #1e3a8a; }

.line-items-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.line-items-table th, .line-items-table td { padding: 8px; border-bottom: 1px solid #e2e8f0; font-size: 13px; }
.line-items-table td input, .line-items-table td select { width: 100%; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 4px; }

/* LOGIN PAGE */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sidebar-bg), #0f172a);
}
.login-box {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.login-box .logo-box { width: fit-content; margin-bottom: 10px; }
.login-box h2 { margin-bottom: 4px; }
.login-box p.sub { color: #64748b; font-size: 14px; margin-bottom: 24px; }
.login-box .form-group { margin-bottom: 16px; }
.login-box .btn { width: 100%; padding: 11px; font-size: 15px; }

.text-muted { color: #64748b; font-size: 13px; }
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
/* ==========================================================
   RESPONSIVE UTILITY CLASSES (used by specific pages instead
   of inline styles, so they can be overridden on mobile below)
   ========================================================== */

.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
/* Chart.js with maintainAspectRatio:false needs its canvas inside a
   container that has its OWN fixed height. Without this, the container
   auto-sizes to the canvas, Chart.js's resize observer sees the container
   change and resizes the canvas to match, the container grows again to
   match that... and the chart grows taller forever. This fixed height
   breaks that loop by giving Chart.js a stable reference to resize against. */
.chart-frame {
    position: relative;
    height: 280px;
}
.chart-frame canvas {
    max-height: 100%;
}
.gps-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    align-items: start;
}
.gps-map {
    height: 520px;
    border-radius: 8px;
    background: #f1f5f9;
}
.customer-header-flex {
    display: flex;
    align-items: center;
    gap: 14px;
}
.customer-header-photo {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Smoother momentum scrolling for horizontally-scrollable tables on iOS */
.table-wrap { -webkit-overflow-scrolling: touch; }

/* ==========================================================
   MOBILE NAVIGATION (hamburger + off-canvas sidebar)
   Hidden/inert on desktop; activated at the 900px breakpoint below.
   ========================================================== */

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-main);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    flex-shrink: 0;
}
.menu-toggle:hover { background: #e2e8f0; }

.sidebar-close {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    margin-left: auto;
    padding: 0 4px;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 900;
    opacity: 0;
    transition: opacity 0.2s;
}
.sidebar-overlay.visible {
    display: block;
    opacity: 1;
}

/* ==========================================================
   MOBILE / TABLET BREAKPOINT
   ========================================================== */
@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 950;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 280px;
        max-width: 82vw;
        overflow-y: auto;
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.25);
    }
    .sidebar-close { display: block; }
    .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
    body.sidebar-locked { overflow: hidden; }

    .main-content { padding: 14px; width: 100%; min-width: 0; }

    .top-bar {
        flex-wrap: wrap;
        gap: 10px;
        padding-bottom: 14px;
        margin-bottom: 16px;
    }
    .page-title { font-size: 19px; }
    .user-profile { gap: 8px; flex-wrap: wrap; }
    .user-profile span { font-size: 12px; padding: 4px 9px; }

    .panel { padding: 14px; }
    .panel + .panel { margin-top: 14px; }

    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .card { padding: 14px; }
    .card-value { font-size: 18px; word-break: break-word; }

    .form-grid { grid-template-columns: 1fr; gap: 12px; }
    .two-col-grid { grid-template-columns: 1fr; gap: 16px; }
    .gps-layout { grid-template-columns: 1fr; }
    .gps-map { height: 320px; }

    /* Prevent iOS Safari from auto-zooming the page when a field is focused
       (it does this automatically for any input with font-size under 16px) */
    .form-group input,
    .form-group select,
    .form-group textarea,
    .login-box input {
        font-size: 16px;
    }

    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar > div { display: flex; flex-wrap: wrap; gap: 8px; }
    .toolbar .btn, .toolbar .btn-secondary { flex: 1 1 auto; text-align: center; }
    .form-actions { flex-wrap: wrap; }

    table.data-table th, table.data-table td { padding: 8px; font-size: 13px; }
    .line-items-table th, .line-items-table td { padding: 6px; font-size: 12px; }

    .customer-header-photo { width: 48px; height: 48px; }

    .login-box { max-width: 90vw; }
}

@media (max-width: 480px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .page-title { font-size: 17px; }
    .card-value { font-size: 16px; }
    .login-box { padding: 26px 20px; }
    .panel { padding: 12px; }
    .form-actions .btn, .form-actions .btn-secondary { flex: 1 1 auto; text-align: center; }
}