:root { --border: #e1e0d9; --text-primary: #0b0b0b; --text-secondary: #52514e; --text-muted: #898781; --surface-1: #f1efe8; --surface-2: #ffffff; --accent: #2a78d6; color-scheme: light; } /* Dark mode - same token names, dark-appropriate values. Applied via a data-theme attribute on , set by the inline script in templates/header.php before first paint (avoids a flash of the wrong theme), and toggled by the switch in the sidebar. Defaults to the OS's prefers-color-scheme on a person's first visit; once they use the toggle, their explicit choice (in localStorage) always wins after that, regardless of OS setting. */ html[data-theme="dark"] { --border: #35342f; --text-primary: #f2f1ec; --text-secondary: #b8b6af; --text-muted: #837f77; --surface-1: #131211; --surface-2: #1e1d1b; --accent: #5b9be0; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--text-primary); background: var(--surface-1); } h1 { font-size: 22px; font-weight: 500; margin: 0 0 1rem; } .muted { color: var(--text-secondary); } .text-warning { color: #93630a; } html[data-theme="dark"] .text-warning { color: #eab362; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } input, select, textarea, button { font-family: inherit; font-size: 14px; padding: 8px 10px; border: 0.5px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text-primary); } ::placeholder { color: var(--text-muted); opacity: 1; } button { cursor: pointer; } button:hover { background: var(--surface-1); } .card { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; } /* App shell / sidebar navigation */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 220px; flex-shrink: 0; background: var(--surface-2); border-right: 0.5px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 50; transition: transform 0.2s ease; } .sidebar-brand { padding: 18px 16px; font-weight: 500; font-size: 15px; border-bottom: 0.5px solid var(--border); } .sidebar-nav { flex: 1; padding: 14px 0; } .nav-section { margin-bottom: 20px; border-left: 3px solid transparent; } .nav-section--reporting { border-left-color: #2a78d6; } .nav-section--warehouse { border-left-color: #1e9c6b; } .nav-section--drivers { border-left-color: #c98a1f; } .nav-section--settings { border-left-color: #8a5ac9; } .nav-section--danger { border-left-color: #a32d2d; } .nav-section--reporting .sidebar-nav a i, .nav-section--reporting a i { color: #2a78d6; } .nav-section--warehouse .sidebar-nav a i, .nav-section--warehouse a i { color: #1e9c6b; } .nav-section--drivers .sidebar-nav a i, .nav-section--drivers a i { color: #c98a1f; } .nav-section--settings .sidebar-nav a i, .nav-section--settings a i { color: #8a5ac9; } .nav-section--danger .sidebar-nav a, .nav-section--danger a { color: #a32d2d; } .nav-section--danger .sidebar-nav a i, .nav-section--danger a i { color: #a32d2d; } .nav-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 0 16px; margin: 0 0 6px; } .sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 13px; color: var(--text-secondary); border-radius: 0 20px 20px 0; margin-right: 12px; } .sidebar-nav a:hover { background: var(--surface-1); text-decoration: none; } .sidebar-nav a.active { color: var(--text-primary); font-weight: 500; background: var(--surface-1); } .sidebar-nav a i { font-size: 15px; width: 16px; text-align: center; flex-shrink: 0; } .sidebar-user { padding: 14px 16px; border-top: 0.5px solid var(--border); font-size: 12px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 4px; } .theme-toggle-btn { display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; font-size: 12px; color: var(--accent); cursor: pointer; width: fit-content; } .theme-toggle-btn i { font-size: 14px; } .sidebar-toggle-btn { display: none; position: fixed; top: 12px; left: 12px; z-index: 60; width: 42px; height: 42px; align-items: center; justify-content: center; background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 8px; font-size: 18px; } /* Hidden while the menu is open - it was sitting on top of the sidebar and, being fixed-position, stayed in the way while scrolling any page behind an open menu. The JS already toggles aria-expanded, so this needs no script changes. */ .sidebar-toggle-btn[aria-expanded="true"] { display: none !important; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 40; } .page { margin-left: 220px; padding: 24px; max-width: 1000px; width: 100%; } /* Mobile bottom tab bar - Salesman role only, their 4 most-used pages, a more native-app-like alternative to the hamburger sidebar for whoever lives on this screen all day. Sidebar still works alongside it for anything else (Customers, Payments). Hidden above the same 860px breakpoint the sidebar itself collapses at (see that media query below, which turns this to display:flex on mobile - this rule must come first in the file so that later, more specific rule wins). */ .bottom-tabs { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface-2); border-top: 0.5px solid var(--border); z-index: 40; padding-bottom: env(safe-area-inset-bottom, 0); } .bottom-tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px 6px; font-size: 11px; color: var(--text-secondary); text-decoration: none; } .bottom-tabs a i { font-size: 20px; } .bottom-tabs a.active { color: var(--accent); font-weight: 500; } @media (max-width: 860px) { .sidebar { transform: translateX(-100%); width: 250px; } .sidebar.open { transform: translateX(0); } .sidebar-toggle-btn { display: flex; } .sidebar-backdrop.open { display: block; } .page { margin-left: 0; padding: 64px 16px 24px; } .page.has-bottom-tabs { padding-bottom: 84px; } .bottom-tabs { display: flex; } } /* Login page */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } .login-card { display: flex; flex-direction: column; gap: 10px; width: 320px; padding: 2rem; background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; } .login-card label { font-size: 13px; color: var(--text-secondary); margin-top: 4px; } .login-card button { margin-top: 12px; background: var(--accent); color: #fff; border: none; } .form-error { color: #a32d2d; font-size: 13px; margin: 0; } html[data-theme="dark"] .form-error { color: #e58a8a; } /* Page layout helpers */ .page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 1.25rem; } .filters { display: flex; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap; } .filters input[type="text"] { flex: 1; min-width: 180px; } .btn-primary { background: var(--accent); color: #fff; border: none; } .btn-primary:hover { filter: brightness(0.85); } /* Flash messages */ .alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 1rem; } .alert-success { background: #e6f4ea; color: #1e6b3c; } .alert-error { background: #fbe9e9; color: #a32d2d; } .alert-warning { background: #fdf1da; color: #93630a; } html[data-theme="dark"] .alert-success { background: #1c3324; color: #7cd9a3; } html[data-theme="dark"] .alert-error { background: #3a1f1f; color: #e58a8a; } html[data-theme="dark"] .alert-warning { background: #3a2f15; color: #eab362; } /* Row-based list (mirrors the mockups) */ .list { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; margin-bottom: 1.5rem; overflow-x: auto; } .list-head, .list-row { display: grid; gap: 8px; align-items: center; padding: 10px 14px; min-width: 480px; } .list-head { font-size: 11px; color: var(--text-muted); border-bottom: 0.5px solid var(--border); } .list-row { border-bottom: 0.5px solid var(--border); font-size: 13px; } .list-row:last-child { border-bottom: none; } .list-row .sub { font-size: 11px; color: var(--text-muted); } .empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; text-align: center; width: 100%; } .empty-state p { margin: 0; } .list-actions { display: flex; justify-content: flex-end; gap: 4px; } /* Narrow lists (e.g. display-order.php's reorder columns: name + two small buttons) don't need the wide min-width meant for multi-column data tables elsewhere - forcing it here just pushes the buttons off to the right, requiring horizontal scroll to even see them. */ .list--compact { overflow-x: visible; } .list--compact .list-row, .list--compact .list-head { min-width: 0; } .icon-btn { padding: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--surface-1); border: 0.5px solid var(--border); border-radius: 6px; } .icon-btn:hover { background: var(--surface-2); } .badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; } .badge-success { background: #e6f4ea; color: #1e6b3c; } .badge-warning { background: #fdf1da; color: #93630a; } .badge-danger { background: #fbe9e9; color: #a32d2d; } .badge-muted { background: var(--surface-1); color: var(--text-muted); } html[data-theme="dark"] .badge-success { background: #1c3324; color: #7cd9a3; } html[data-theme="dark"] .badge-warning { background: #3a2f15; color: #eab362; } html[data-theme="dark"] .badge-danger { background: #3a1f1f; color: #e58a8a; } /* Expandable invoice history cards - visit.php's "Previous invoices" section and customer-view.php's history list (see renderInvoiceHistoryCards()). */ .history-card > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 13px; } .history-card > summary::-webkit-details-marker { display: none; } .history-card > summary::before { content: "\203A"; /* chevron, rotates open */ display: inline-block; margin-right: 8px; transition: transform 0.15s ease; color: var(--text-muted); } .history-card[open] > summary::before { transform: rotate(90deg); } /* Route sheet stop cards - visit.php landing screen */ .route-stop { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px; text-decoration: none; color: inherit; } .route-stop:hover { background: var(--surface-1); } .route-stop-name { font-size: 15px; font-weight: 500; } .route-stop-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .route-stop-balance { font-size: 15px; font-weight: 500; text-align: right; white-space: nowrap; } /* Balance banner + Sell/Payment-only mode toggle - visit.php (section 4) */ .balance-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .balance-banner-amount { font-size: 28px; font-weight: 600; } .mode-toggle { display: flex; background: var(--surface-1); border: 0.5px solid var(--border); border-radius: 10px; padding: 3px; gap: 3px; } .mode-btn { border: none; background: transparent; padding: 8px 14px; font-size: 13px; border-radius: 8px; color: var(--text-secondary); } .mode-btn.active { background: var(--accent); color: #fff; } /* "What's on the van" product grid - visit.php (section 5) */ .grid-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-muted); margin: 16px 0 8px; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .grid-cell { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; } .grid-cell.has-qty { border-color: var(--accent); } .grid-cell-name { font-size: 13px; font-weight: 500; line-height: 1.3; } .grid-cell-stock { font-size: 11px; margin: 0; } .unit-toggle { display: flex; gap: 4px; } .unit-btn { flex: 1; border: 0.5px solid var(--border); background: transparent; border-radius: 6px; padding: 5px 4px; font-size: 11px; color: var(--text-secondary); } .unit-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } .grid-stepper { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; } .stepper-btn { width: 40px; height: 40px; border-radius: 8px; border: 0.5px solid var(--border); background: var(--surface-1); font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; } .grid-qty { font-size: 16px; font-weight: 500; min-width: 32px; text-align: center; cursor: pointer; } /* Cart line rows - the compact "Your order" list under the grid */ .cart-list { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; overflow: hidden; } .cart-line { display: grid; grid-template-columns: minmax(0,1fr) 60px 70px 60px 32px; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 0.5px solid var(--border); } .cart-line:last-child { border-bottom: none; } .cart-line-main { min-width: 0; } .cart-line .sale-name { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cart-line .sale-van-stock { display: block; } .cart-line .sale-qty, .cart-line .sale-price { width: 100%; padding: 6px; font-size: 13px; } .cart-line .sale-line-total { font-size: 13px; text-align: right; white-space: nowrap; } @media (max-width: 480px) { .cart-line { grid-template-columns: minmax(0,1fr) 50px 60px 50px 28px; } } /* Simpler cart line for request-stock.php - just name, qty, remove; no price/total columns since this is a request, not a sale. */ .request-cart-line { grid-template-columns: minmax(0,1fr) 70px 32px; } .request-cart-line .sale-qty { width: 100%; padding: 6px; font-size: 13px; } /* Forms */ .form-card { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: 12px; padding: 1.25rem; } .form-card h3 { margin: 0 0 1rem; font-size: 15px; font-weight: 500; } .form-grid { display: grid; gap: 12px; margin-bottom: 14px; } .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } .form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } .form-field label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; } .form-field input, .form-field select { width: 100%; } .form-actions { display: flex; justify-content: flex-end; gap: 8px; } .checkbox-field { display: flex; align-items: center; gap: 6px; font-size: 13px; } /* Driver-facing screens (Drivers nav section) get larger tap targets and text unconditionally - not just below the mobile breakpoint - since these are used one-handed, standing up, often in poor light. See the driver-flow notes, section 9. The exclusions below leave the compact grid/cart controls (sized deliberately for those tight layouts) alone. */ body.driver-page input:not(.sale-qty):not(.sale-price):not(.sale-product-id):not(.sale-sold-as), body.driver-page select, body.driver-page textarea { font-size: 16px; padding: 12px 14px; } body.driver-page button:not(.icon-btn):not(.stepper-btn):not(.unit-btn):not(.mode-btn):not(.cart-remove) { font-size: 15px; padding: 12px 16px; min-height: 44px; } body.driver-page .icon-btn { width: 40px; height: 40px; } body.driver-page .stepper-btn { width: 44px; height: 44px; font-size: 20px; } body.driver-page .checkbox-field { gap: 10px; padding: 4px 0; } body.driver-page .checkbox-field input[type="checkbox"] { width: 20px; height: 20px; } @media (max-width: 600px) { .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; } .icon-btn { width: 36px; height: 36px; } input, select, textarea, button { font-size: 16px; } /* prevents iOS auto-zoom on focus */ } /* --------------------------------------------------------------------- Print - currently used by invoice-view.php ("Print invoice" button). Any element with class "no-print" is hidden on any page when printed; the invoice-specific card widening only applies within invoice-view.php. --------------------------------------------------------------------- */ @media print { .sidebar, .sidebar-toggle-btn, .sidebar-backdrop, .no-print { display: none !important; } .page { margin-left: 0; padding: 0; max-width: none; } body { background: #fff; } .invoice-info-card, .invoice-totals-card { max-width: none !important; width: 100%; border: none; box-shadow: none; padding: 0; } .invoice-totals-card > div { font-size: 14px !important; } .invoice-totals-card .invoice-total-row { font-size: 16px !important; } .list { border: 0.5px solid #000; } .list-row, .list-head { border-bottom: 0.5px solid #000; } .badge { border: 0.5px solid #000; background: none !important; color: #000 !important; } }