/* ===================================================== Capwell Route Optimization System — Brand Theme Matching capwell.co.ke: charcoal header · gray sidebar · white pages · yellow accent ===================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ── Page backgrounds ── */ --bg-primary: #FFFFFF; --bg-secondary: #F2F4F6; --bg-card: #FFFFFF; --bg-hover: #F8F9FB; --border: #E0E4EA; /* ── Navbar — dark charcoal (capwell.co.ke header) ── */ --navbar-bg: #2C2C2C; --navbar-text: #D4D4D4; --navbar-text-dim: #999999; --navbar-border: rgba(250,204,21,0.5); /* ── Capwell golden yellow accent ── --accent is the brand fill (buttons, borders, active backgrounds). --accent-dark is the same hue darkened for use as TEXT/icon color — raw --accent is too light to read as foreground text on white. ── */ --accent: #facc15; --accent-dark: #8A6D07; --accent-dim: #fefce8; /* ── Status ── */ --red: #B3423A; --red-dim: #FDEEF0; --amber: #C07A17; --amber-dim: #FEF3E2; --green: #2E7D54; --green-dim: #E6F7EF; --info: #3D6FA8; --info-dim: #EBF2F9; --purple: #7055A8; --purple-dim: #F0EBF9; /* ── Typography ── */ --text-primary: #1A1A1A; --text-secondary: #555555; --text-muted: #888888; /* ── Misc ── */ --capwell-red: #C0392B; --shadow: 0 2px 16px rgba(0,0,0,0.10); /* ── Login page ── */ --login-bg: linear-gradient(180deg, #fefce8 0%, #facc15 100%); --input-bg: #F8F9FA; } /* ===================================================== DARK THEME — overrides the same tokens above. Applied via [data-theme="dark"] on (see nav.js). Default (no saved preference) is always light — dark is opt-in only, via the theme switcher in the user menu. ===================================================== */ :root[data-theme="dark"] { /* ── Page backgrounds ── */ --bg-primary: #16181D; --bg-secondary: #1C1F26; --bg-card: #20242C; --bg-hover: #262B34; --border: #333944; /* ── Navbar stays the same dark charcoal in both themes — it's already the brand's dark header, not something that needs to "go dark" ── */ /* ── Accent — keep the bright brand gold as fill; lighten the text variant so it still reads clearly against dark backgrounds ── */ --accent: #facc15; --accent-dark: #F2C94C; --accent-dim: rgba(250,204,21,0.14); /* ── Status — brightened for contrast against dark cards ── */ --red: #E0685D; --red-dim: rgba(224,104,93,0.16); --amber: #E0A23D; --amber-dim: rgba(224,162,61,0.16); --green: #55B786; --green-dim: rgba(85,183,134,0.16); --info: #6E9FD6; --info-dim: rgba(110,159,214,0.16); --purple: #9C89D6; --purple-dim: rgba(156,137,214,0.16); /* ── Typography ── */ --text-primary: #ECEEF1; --text-secondary: #B4BAC4; --text-muted: #7C838F; /* ── Misc ── */ --shadow: 0 4px 20px rgba(0,0,0,0.45); --input-bg: #1A1D23; } html, body { height: 100%; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg-primary); color: var(--text-primary); font-size: 14px; } /* ── Sidebar layout vars ── */ :root { --navbar-h: 52px; --sidebar-w: 200px; --sidebar-w-icon: 52px; } html.sidebar-collapsed { --sidebar-w: var(--sidebar-w-icon); } body { padding-top: var(--navbar-h); padding-left: var(--sidebar-w); transition: padding-left .2s ease; display: flex; flex-direction: column; min-height: 100vh; } /* ===================================================== NAVBAR — dark charcoal matching capwell.co.ke header ===================================================== */ .navbar { background: var(--navbar-bg); border-bottom: 2px solid var(--accent); padding: 0 20px; height: var(--navbar-h); display: flex; align-items: center; gap: 0; flex-shrink: 0; position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 2000; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; color: var(--accent); text-decoration: none; margin-right: 24px; flex-shrink: 0; } .nav-brand .brand-icon { font-size: 1.3rem; } /* Right-side nav elements — light on dark charcoal background */ .nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; } .nav-time { font-size: 0.82rem; color: var(--navbar-text); font-variant-numeric: tabular-nums; } .nav-clock { font-size: 0.82rem; color: var(--navbar-text); font-variant-numeric: tabular-nums; } .nav-user { font-size: 0.82rem; color: var(--navbar-text-dim); } .nav-logout { font-size: 0.8rem; padding: 4px 10px; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; color: var(--navbar-text); text-decoration: none; transition: all 0.15s; } .nav-logout:hover { background: var(--red-dim); color: var(--red); border-color: var(--red); } /* Brand logo text */ .nav-logo-img { height: 30px; width: auto; object-fit: contain; margin-right: 4px; } .nav-brand-text { font-weight: 700; font-size: 0.95rem; } /* ── Notification Bell ── */ .nav-bell-wrap { position: relative; } .nav-bell-btn { display: flex; align-items: center; justify-content: center; position: relative; width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: var(--navbar-text); cursor: pointer; transition: all 0.15s; } .nav-bell-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(250,204,21,0.12); } .bell-badge { position: absolute; top: -4px; right: -4px; background: var(--red); color: #fff; font-size: 0.6rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; border: 2px solid var(--navbar-bg); } .bell-badge[hidden] { display: none; } .notif-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 280px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); z-index: 3000; overflow: hidden; } .notif-dropdown[hidden] { display: none; } .notif-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 0.82rem; font-weight: 600; border-bottom: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); } .notif-count { font-size: 0.72rem; color: var(--accent-dark); font-weight: 600; } .notif-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 0.82rem; } .notif-body { max-height: 360px; overflow-y: auto; } .notif-item { display: flex; gap: 9px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.12s; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--bg-secondary); } .notif-item-unread { background: rgba(250,204,21,0.07); } .notif-sev-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; } .notif-sev-info { background: var(--accent); } .notif-sev-warning { background: var(--amber, #c07a17); } .notif-sev-critical { background: var(--red); } .notif-item-body { flex: 1; min-width: 0; } .notif-item-title { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; } .notif-item-msg { font-size: 0.74rem; color: var(--text-muted); line-height: 1.4; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notif-item-time { font-size: 0.68rem; color: var(--text-muted); margin-top: 4px; } .notif-footer { padding: 8px 14px; text-align: center; border-top: 1px solid var(--border); background: var(--bg-secondary); } .notif-footer button { background: none; border: none; color: var(--accent-dark); font-size: 0.76rem; font-weight: 600; cursor: pointer; padding: 2px; } .notif-footer button:hover { text-decoration: underline; } /* ── User Profile Button ── */ .nav-user-wrap { position: relative; } .nav-user-btn { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: var(--navbar-text); cursor: pointer; transition: all 0.15s; white-space: nowrap; } .nav-user-btn:hover { border-color: var(--accent); background: rgba(250,204,21,0.12); color: #fff; } .user-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 0.7rem; color: #fff; object-fit: cover; } .user-avatar-img { object-fit: cover; } .user-fullname { font-size: 0.82rem; font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; color: var(--navbar-text); } .user-caret { color: var(--navbar-text-dim); flex-shrink: 0; transition: transform 0.2s; } .user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 220px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); z-index: 3000; overflow: hidden; } .user-dropdown[hidden] { display: none; } .user-dropdown-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); } .user-avatar-lg { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 0.9rem; color: #fff; object-fit: cover; } .ud-name { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); } .ud-role { font-size: 0.72rem; color: var(--text-muted); text-transform: capitalize; } .user-dropdown-items { padding: 4px 0; } .dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; } .dropdown-item { display: flex; align-items: center; gap: 9px; padding: 8px 14px; font-size: 0.82rem; color: var(--text-secondary); text-decoration: none; cursor: pointer; transition: all 0.12s; background: none; border: none; width: 100%; text-align: left; } .dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); } .dropdown-item-danger { color: var(--red); } .dropdown-item-danger:hover { background: var(--red-dim); color: var(--red); } /* Theme switcher row */ .theme-row { justify-content: space-between; cursor: default; } .theme-row:hover { background: none; color: var(--text-secondary); } .theme-btns { display: flex; gap: 4px; } .theme-btn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-secondary); cursor: pointer; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; transition: all 0.12s; color: var(--text-secondary); } .theme-btn:hover { border-color: var(--accent); } .theme-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-dark); } /* ===================================================== SIDEBAR — light gray matching capwell.co.ke sidebar ===================================================== */ .app-sidebar { position: fixed; left: 0; top: var(--navbar-h); width: var(--sidebar-w); height: calc(100vh - var(--navbar-h)); z-index: 1500; background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; transition: width .2s ease; box-shadow: 2px 0 8px rgba(0,0,0,0.05); } .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 0 4px; scrollbar-width: none; } .sidebar-nav::-webkit-scrollbar { display: none; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; color: var(--text-secondary); font-size: 0.86rem; font-weight: 500; white-space: nowrap; overflow: hidden; transition: background .12s, color .12s, border-color .12s; border-left: 3px solid transparent; position: relative; } .sidebar-link:hover { background: var(--bg-hover); color: var(--text-primary); border-left-color: var(--border); } .sidebar-link.active { background: var(--accent-dim); color: var(--accent-dark); border-left-color: var(--accent); font-weight: 600; } .slink-icon { flex-shrink: 0; width: 22px; text-align: center; font-size: 1rem; line-height: 1; } .slink-text { flex: 1; overflow: hidden; text-overflow: ellipsis; transition: opacity .15s, max-width .2s; max-width: 140px; } html.sidebar-collapsed .slink-text { opacity: 0; max-width: 0; pointer-events: none; } /* Tooltip on collapsed links */ html.sidebar-collapsed .sidebar-link[title]:hover::after { content: attr(title); position: absolute; left: calc(var(--sidebar-w-icon) + 6px); top: 50%; transform: translateY(-50%); background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); padding: 4px 10px; border-radius: 5px; font-size: .8rem; white-space: nowrap; box-shadow: var(--shadow); z-index: 3000; pointer-events: none; } /* Hamburger toggle */ .sidebar-hamburger { flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 100%; height: 44px; border: none; border-bottom: 1px solid var(--border); background: transparent; cursor: pointer; padding: 0; transition: background .12s; } .sidebar-hamburger:hover { background: var(--bg-hover); } .ham-line { display: block; width: 18px; height: 2px; background: var(--text-secondary); border-radius: 2px; transition: background .12s; } .sidebar-hamburger:hover .ham-line { background: var(--accent); } /* Legacy nav-link */ .nav-link { padding: 6px 14px; border-radius: 5px; text-decoration: none; color: var(--text-secondary); font-size: 0.88rem; font-weight: 500; transition: all 0.15s; } .nav-link:hover { background: var(--bg-hover); color: var(--text-primary); } .nav-link.active { background: var(--accent-dim); color: var(--accent-dark); } .nav-links a { padding: 6px 14px; border-radius: 5px; text-decoration: none; color: var(--navbar-text); font-size: 0.88rem; font-weight: 500; transition: all 0.15s; } .nav-links a:hover { color: var(--accent-dark); } .nav-links a.active { color: var(--accent-dark); } /* ===================================================== KPI CARDS ===================================================== */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 10px 14px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); flex-shrink: 0; } .kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; transition: border-color 0.15s; box-shadow: 0 1px 4px rgba(0,0,0,0.05); } .kpi-card:hover { border-color: var(--accent); } .kpi-card.accent { border-left: 3px solid var(--accent); } .kpi-card.red { border-left: 3px solid var(--red); } .kpi-card.green { border-left: 3px solid var(--green); } .kpi-card.amber { border-left: 3px solid var(--amber); } .kpi-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--text-primary); } .kpi-value.green { color: var(--green); } .kpi-value.red { color: var(--red); } .kpi-value.accent { color: var(--accent-dark); } .kpi-value.amber { color: var(--amber); } .kpi-sub { font-size: 0.72rem; color: var(--text-muted); } /* ===================================================== MAIN LAYOUT ===================================================== */ .main-layout { display: flex; flex: 1; overflow: hidden; min-height: 0; } .page-body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .map-container { flex: 1; position: relative; min-width: 0; } #map { width: 100%; height: 100%; } .map-overlay-btn { position: absolute; z-index: 800; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); padding: 6px 12px; border-radius: 5px; cursor: pointer; font-size: 0.8rem; transition: all 0.15s; box-shadow: 0 1px 4px rgba(0,0,0,0.1); } .map-overlay-btn:hover { background: var(--accent); border-color: var(--accent); color: #000; } .map-overlay-btn.top-left { top: 10px; left: 10px; } .map-overlay-btn.top-right { top: 10px; right: 10px; } .delay-banner { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: var(--capwell-red); color: #fff; padding: 7px 18px; border-radius: 20px; font-size: 0.82rem; font-weight: 600; z-index: 900; max-width: 70%; text-align: center; box-shadow: var(--shadow); animation: pulse-red 2s ease-in-out infinite; } @keyframes pulse-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.6); } 50% { box-shadow: 0 0 0 8px rgba(192,57,43,0); } } /* ===================================================== RIGHT SIDEBAR (route list on dashboard) ===================================================== */ .sidebar { width: 360px; flex-shrink: 0; background: var(--bg-secondary); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .sidebar-header { padding: 10px 14px; background: var(--bg-card); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .sidebar-header span { font-weight: 600; font-size: 0.9rem; } .sidebar-controls { padding: 8px 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; } .sidebar-controls select, .sidebar-controls button { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; flex: 1; min-width: 80px; } .sidebar-controls button:hover { background: var(--accent); border-color: var(--accent); color: #000; } #route-list { overflow-y: auto; flex: 1; } /* ===================================================== ROUTE CARDS ===================================================== */ .route-card { padding: 11px 13px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.12s; background: var(--bg-card); } .route-card:hover { background: var(--bg-hover); } .route-card.selected { background: var(--bg-hover); border-left: 3px solid var(--accent); } .route-header { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; } .color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .plate { font-weight: 700; font-size: 0.92rem; flex: 1; color: var(--text-primary); } .badge { font-size: 0.68rem; padding: 2px 8px; border-radius: 10px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } .badge-green { background: var(--green-dim); color: var(--green); } .badge-red { background: var(--red-dim); color: var(--red); } .badge-amber { background: var(--amber-dim); color: var(--amber); } .badge-blue { background: var(--info-dim); color: var(--info); } .badge-muted { background: var(--bg-secondary); color: var(--text-secondary); } .badge-grey { background: var(--bg-secondary); color: var(--text-secondary); } .route-driver { font-size: 0.78rem; color: var(--accent-dark); margin-bottom: 3px; font-weight: 600; } .route-meta { font-size: 0.76rem; color: var(--text-secondary); margin-bottom: 6px; display: flex; gap: 12px; flex-wrap: wrap; } .route-meta span { white-space: nowrap; } .progress-track { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 2px; } .progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s ease; } .progress-fill.delayed { background: var(--red); } .progress-label { font-size: 0.68rem; color: var(--text-muted); text-align: right; } .route-actions { display: flex; gap: 5px; margin-top: 7px; } .route-actions button { flex: 1; padding: 4px 6px; font-size: 0.72rem; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 3px; cursor: pointer; transition: all 0.12s; } .route-actions button:hover { background: var(--accent); color: #000; border-color: var(--accent); } /* ── Stop list ── */ .stop-list { padding-top: 6px; } .stop-row { display: grid; grid-template-columns: 22px 1fr 50px 58px; gap: 4px; font-size: 0.73rem; padding: 3px 4px; align-items: center; border-radius: 3px; } .stop-row:hover { background: var(--bg-hover); } .stop-row.delayed { background: rgba(220,53,69,0.06); } .stop-row.delivered { opacity: 0.45; } .stop-seq { color: var(--text-muted); text-align: center; } .stop-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stop-eta { text-align: right; font-variant-numeric: tabular-nums; } .stop-eta.late { color: var(--red); font-weight: 600; } .stop-status { text-align: right; color: var(--text-muted); font-size: 0.68rem; } /* ── Traffic bar (bottom of sidebar) ── */ .traffic-bar { display: flex; align-items: center; gap: 8px; padding: 5px 14px; background: var(--bg-card); border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-secondary); flex-shrink: 0; } .traffic-dot { width: 8px; height: 8px; border-radius: 50%; } .traffic-label { font-weight: 600; } /* ===================================================== BUTTONS ===================================================== */ .btn-primary { width: 100%; background: var(--accent); color: #000; border: none; padding: 10px; border-radius: 6px; font-size: 0.95rem; font-weight: 700; cursor: pointer; margin-top: 4px; transition: background 0.15s; } .btn-primary:hover { background: #eab308; } .btn-outline { padding: 5px 12px; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 4px; cursor: pointer; font-size: 0.82rem; transition: all 0.15s; } .btn-outline:hover { border-color: var(--accent); color: var(--accent-dark); } /* ===================================================== GLOBAL INTERACTION STATE Accent border + soft glow ring — the same treatment the login page applies to its inputs on click/focus (see the LOGIN section below: #facc15 border + rgba(250,204,21,.25) ring). Defined once here, with !important, so it applies to every input/select/textarea and every neutral (gray) button on every page — including pages/components added later — with no per-page CSS required. ===================================================== */ :root { --focus-ring: 0 0 0 3px rgba(250,204,21,.25); } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), select, textarea { transition: border-color .15s, box-shadow .15s; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):hover, select:hover, textarea:hover, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus, select:focus, textarea:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):active, select:active { border-color: var(--accent) !important; box-shadow: var(--focus-ring) !important; outline: none !important; } /* Neutral / gray-background buttons — same ring on hover. Filled accent/confirm/danger/primary buttons keep their own bespoke hover treatment and are excluded. */ .btn-outline:hover, .btn-sm:not(.primary):hover, .btn-reset:hover, .row-btn:hover, .modal-btn:not(.confirm):not(.danger):hover, .toggle-inactive-btn:hover, .view-btn:not(.active):hover, .ms-btn:hover, .btn-edit:hover, .btn-action:not(.primary):hover, .page-btn:not(.active):hover, .st-dl-btn:hover { border-color: var(--accent) !important; box-shadow: var(--focus-ring) !important; } /* ===================================================== FORMS ===================================================== */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 5px; font-weight: 600; } .form-group input { width: 100%; background: var(--input-bg); border: 1px solid var(--border); color: var(--text-primary); padding: 9px 12px; border-radius: 6px; font-size: 0.9rem; transition: border-color 0.15s; } .form-group input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(250,204,21,0.15); } /* ===================================================== LOGIN / REGISTER PAGE ===================================================== */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 0; background: linear-gradient(180deg, #fefce8 0%, #facc15 100%); /* Override the body padding set for dashboard layout */ padding-top: 0 !important; padding-left: 0 !important; } .login-card { background: #FFFFFF; border-radius: 14px; padding: 40px 36px; width: 400px; max-width: 95vw; box-shadow: 0 8px 40px rgba(0,0,0,0.20); } /* ── Login card inputs — warm golden border to match gradient theme ── */ .login-card .form-group input { background: #FFFFFF; border: 1.5px solid #e5d87a; border-radius: 8px; padding: 11px 14px; font-size: 0.95rem; transition: border-color 0.15s, box-shadow 0.15s; } .login-card .form-group input:focus { border-color: #facc15; box-shadow: 0 0 0 3px rgba(250,204,21,0.25); } .login-card .form-group label { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } /* ── Login card button ── */ .login-card .btn-primary { background: #facc15; color: #000; font-size: 1rem; font-weight: 700; padding: 13px; border-radius: 8px; letter-spacing: 0.2px; box-shadow: 0 2px 8px rgba(250,204,21,0.4); transition: background 0.15s, box-shadow 0.15s; } .login-card .btn-primary:hover { background: #eab308; box-shadow: 0 4px 14px rgba(234,179,8,0.45); } .login-logo-area { text-align: center; padding: 16px 0 18px; margin-bottom: 20px; border-bottom: 1px solid var(--border); } .login-logo-img { width: 80px; height: 80px; object-fit: contain; margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto; } .login-logo-fallback { font-size: 3rem; line-height: 1; margin-bottom: 8px; } .login-logo-area h1 { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .login-logo-area p { font-size: 0.78rem; color: var(--text-muted); } .login-error { background: var(--red-dim); color: var(--red); border: 1px solid rgba(220,53,69,0.3); border-radius: 5px; padding: 8px 12px; font-size: 0.82rem; margin-bottom: 14px; text-align: center; } .login-hint { text-align: center; font-size: 0.75rem; color: var(--text-muted); margin-top: 18px; } .login-hint code { background: var(--bg-secondary); padding: 2px 5px; border-radius: 3px; font-family: monospace; } /* ===================================================== GLOBAL MODALS — available on every page via nav macro ===================================================== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 5000; display: none; align-items: center; justify-content: center; } .modal-overlay.open { display: flex; } .modal-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 26px; width: 440px; max-width: 94vw; } .modal-box h3 { margin: 0 0 16px; font-size: 1rem; font-weight: 700; color: var(--text-primary); } .modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; } .modal-field { margin-bottom: 14px; } .modal-field label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; } .modal-field input, .modal-field textarea { width: 100%; box-sizing: border-box; background: var(--input-bg); border: 1.5px solid var(--border); color: var(--text-primary); padding: 10px 12px; border-radius: 8px; font-size: .9rem; transition: border-color .15s, box-shadow .15s; } .modal-field input:focus, .modal-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(250,204,21,.2); } .modal-field textarea { resize: vertical; min-height: 80px; } /* ===================================================== ANALYTICS PAGE ===================================================== */ .analytics-body { padding: 16px; overflow-y: auto; flex: 1; } .analytics-filter-bar { background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 8px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex-shrink: 0; } .filter-group { display: flex; align-items: center; gap: 6px; } .filter-group label { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; } .filter-group select, .filter-group input[type="date"] { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); padding: 5px 9px; border-radius: 4px; font-size: 0.82rem; cursor: pointer; } .filter-group select:focus, .filter-group input:focus { outline: none; border-color: var(--accent); } .filter-actions { display: flex; gap: 6px; margin-left: auto; } .analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; padding: 14px 16px; } .analytics-kpi-strip { display: flex; gap: 0; background: var(--bg-secondary); border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; } .strip-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 20px; border-right: 1px solid var(--border); min-width: 110px; white-space: nowrap; } .strip-label { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .strip-value { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); } .strip-value.accent { color: var(--accent-dark); } .strip-value.green { color: var(--green); } .strip-value.red { color: var(--red); } .strip-value.amber { color: var(--amber); } .chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); } .chart-card h3 { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 12px; font-weight: 600; } .chart-card.wide { grid-column: 1 / -1; } .chart-full { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 14px; } .chart-full h3 { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 12px; font-weight: 600; } .chart-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .chart-title { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); } .chart-sub { font-size: 0.73rem; color: var(--text-muted); } .chart-legend { display: flex; align-items: center; gap: 10px; font-size: 0.73rem; color: var(--text-secondary); white-space: nowrap; } .legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .legend-dot.green { background: var(--green); } .legend-dot.red { background: var(--red); } .legend-dot.amber { background: var(--amber); } .chart-body { position: relative; height: 220px; } .chart-body.donut-wrap { display: flex; align-items: center; justify-content: center; height: 220px; } .donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.3rem; font-weight: 700; text-align: center; white-space: pre-line; pointer-events: none; line-height: 1.2; color: var(--text-primary); } /* ── Data tables ── */ .data-table-section { margin: 0 16px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .section-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); } .section-title { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); } .table-search { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); padding: 4px 9px; border-radius: 4px; font-size: 0.8rem; width: 180px; } .table-search:focus { outline: none; border-color: var(--accent); } .table-wrap { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .data-table th { text-align: left; padding: 7px 12px; color: var(--text-muted); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; user-select: none; background: var(--bg-secondary); } .data-table th:hover { color: var(--text-primary); } .data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text-primary); } .data-table tbody tr:hover td { background: var(--bg-hover); } .data-table code { background: var(--bg-secondary); padding: 1px 5px; border-radius: 3px; font-size: 0.78rem; font-family: monospace; color: var(--accent-dark); } .table-empty { text-align: center; color: var(--text-muted); padding: 20px !important; } /* Driver performance table */ .driver-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .driver-table th { text-align: left; padding: 7px 10px; color: var(--text-muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); background: var(--bg-secondary); } .driver-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); } .driver-table tr:hover td { background: var(--bg-hover); } .perf-bar-wrap { height: 6px; background: var(--border); border-radius: 3px; width: 100px; display: inline-block; } .perf-bar { height: 100%; border-radius: 3px; background: var(--accent); } .perf-bar.low { background: var(--red); } .perf-bar.mid { background: var(--amber); } /* Inline KPI in sidebar header */ .kpi-inline { font-size: 0.75rem; color: var(--accent-dark); margin-left: auto; font-weight: 600; } /* ===================================================== SIMULATION PAGE ===================================================== */ .sim-controls { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 8px 16px; display: flex; align-items: center; gap: 16px; flex-shrink: 0; flex-wrap: wrap; } .sim-ctrl-left { display: flex; gap: 6px; } .sim-btn { padding: 6px 16px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: all 0.15s; } .sim-btn.start { background: var(--green-dim); color: var(--green); border-color: var(--green); } .sim-btn.stop { background: var(--red-dim); color: var(--red); border-color: var(--red); } .sim-btn.green { background: var(--green-dim); color: var(--green); border-color: var(--green); } .sim-btn.amber { background: var(--amber-dim); color: var(--amber); border-color: var(--amber); } .sim-btn.red { background: var(--red-dim); color: var(--red); border-color: var(--red); } .sim-btn.reset { background: var(--bg-secondary); } .sim-btn:hover { filter: brightness(0.92); } .sim-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; } .sim-speed-group { display: flex; align-items: center; gap: 6px; } .sim-speed-label { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; } .sim-speed-btn { padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; font-size: 0.8rem; font-weight: 600; transition: all 0.15s; } .sim-speed-btn.active { background: var(--accent-dim); color: var(--accent-dark); border-color: var(--accent); } .sim-speed-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent-dark); } .sim-status-area { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; } .sim-label { color: var(--text-muted); } .sim-value { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); } .sim-value.red { color: var(--red); } .sim-status-chip { font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 10px; letter-spacing: 0.06em; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-muted); } .sim-status-chip.running { background: var(--green-dim); color: var(--green); border-color: var(--green); } .sim-status-chip.paused { background: var(--amber-dim); color: var(--amber); border-color: var(--amber); } .sim-status-chip.idle { background: var(--bg-secondary); color: var(--text-muted); } .sim-time { font-size: 0.88rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-dark); letter-spacing: 0.04em; } .sim-time-display { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-dark); letter-spacing: 0.05em; } .sim-date-display { font-size: 0.78rem; color: var(--text-muted); } .sim-status { font-size: 0.78rem; color: var(--text-muted); padding: 2px 8px; border-radius: 10px; background: var(--bg-secondary); border: 1px solid var(--border); } .sim-status.running { color: var(--green); background: var(--green-dim); border-color: var(--green); } .sim-status.paused { color: var(--amber); background: var(--amber-dim); border-color: var(--amber); } .traffic-status-bar { background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 5px 14px; display: flex; align-items: center; gap: 20px; font-size: 0.75rem; flex-shrink: 0; } .sim-traffic-strip { background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 5px 16px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; font-size: 0.75rem; } .traffic-label { color: var(--text-muted); font-weight: 600; } .corridor-pill { display: flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border); } .corridor-dot { width: 6px; height: 6px; border-radius: 50%; } .corridor-chip { padding: 2px 9px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; transition: all 0.4s; } .corridor-chip.clear { color: var(--green); border-color: var(--green-dim); background: var(--green-dim); } .corridor-chip.moderate { color: var(--amber); border-color: var(--amber-dim); background: var(--amber-dim); } .corridor-chip.busy { color: var(--amber); border-color: var(--amber-dim); background: var(--amber-dim); } .corridor-chip.jammed { color: var(--red); border-color: var(--red-dim); background: var(--red-dim); } #simMap { width: 100%; height: 100%; } .sim-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); flex-shrink: 0; } .sim-kpi { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-right: 1px solid var(--border); background: var(--bg-card); } .sim-kpi:last-child { border-right: none; } .sk-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; } .sk-val { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); } .sk-val.green { color: var(--green); } .sk-val.red { color: var(--red); } .route-list { overflow-y: auto; flex: 1; } .route-card-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .route-color-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .route-plate { font-weight: 700; font-size: 0.88rem; flex: 1; color: var(--text-primary); } .route-territory { font-size: 0.7rem; color: var(--text-muted); } .route-status-badge { font-size: 0.65rem; padding: 1px 7px; border-radius: 8px; font-weight: 600; } .route-driver { font-size: 0.76rem; color: var(--accent-dark); margin-bottom: 3px; } .route-meta { display: flex; justify-content: space-between; font-size: 0.73rem; color: var(--text-secondary); margin-bottom: 5px; } .route-progress-bar { height: 3px; background: var(--border); border-radius: 2px; margin-bottom: 4px; overflow: hidden; } .route-progress-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; } .stop-num { color: var(--text-muted); text-align: center; } .stop-info { flex: 1; } .stop-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); } .stop-eta { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); } .stop-status-pill { text-align: right; font-size: 0.65rem; font-weight: 600; } .stop-status-pill.pending { color: var(--text-muted); } .stop-status-pill.offloading { color: var(--accent-dark); } .stop-status-pill.delivered { color: var(--green); } .stop-status-pill.delayed { color: var(--red); } /* ===================================================== INTEGRATION GUIDE (simulation page) ===================================================== */ .integration-guide { background: var(--bg-secondary); border-top: 2px solid var(--border); padding: 24px 20px; } .ig-header { margin-bottom: 18px; } .ig-title { font-size: 1rem; font-weight: 700; color: var(--accent-dark); margin-bottom: 4px; } .ig-sub { font-size: 0.8rem; color: var(--text-muted); } .ig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; } .ig-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .ig-card-header { padding: 8px 14px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; } .ig-card-header.sap { background: #E6F7EF; color: #2E7D54; border-bottom: 1px solid #C3EDD9; } .ig-card-header.worldfleet { background: var(--info-dim); color: var(--info); border-bottom: 1px solid var(--info); } .ig-card-header.gmaps { background: #F5FBE6; color: #4D7A0A; border-bottom: 1px solid #D8ECA0; } .ig-card-header.at { background: var(--amber-dim); color: var(--amber); border-bottom: 1px solid #FAD9A0; } .ig-card-header.ortools { background: var(--purple-dim); color: var(--purple); border-bottom: 1px solid var(--purple); } .ig-card-header.env { background: var(--bg-secondary); color: var(--text-secondary); border-bottom: 1px solid var(--border); } .ig-card-body { padding: 12px 14px; } .ig-card-body p { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.5; } .ig-card-body code { background: var(--bg-secondary); padding: 1px 5px; border-radius: 3px; font-size: 0.78rem; font-family: monospace; color: var(--accent-dark); } /* Code blocks — keep dark for readability */ .api-code, .api-code-block { background: #1E1E1E; border: 1px solid #333; border-radius: 6px; padding: 12px; font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 0.76rem; color: #D4D4D4; overflow-x: auto; white-space: pre; line-height: 1.55; max-height: 280px; } .api-code .kw { color: #C586C0; } .api-code .str { color: #CE9178; } .api-code .key { color: #9CDCFE; } .api-code .num { color: #B5CEA8; } .code-comment { color: #6A9955; font-style: italic; } .api-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; } .api-tab { padding: 4px 12px; border-radius: 4px; font-size: 0.78rem; background: var(--bg-secondary); border: 1px solid var(--border); cursor: pointer; color: var(--text-secondary); } .api-tab.active { background: var(--accent-dim); color: var(--accent-dark); border-color: var(--accent); } .ig-env-vars { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .env-var { font-size: 0.72rem; font-family: monospace; background: var(--amber-dim); color: var(--amber); padding: 2px 7px; border-radius: 4px; border: 1px solid #FAD9A0; } /* ===================================================== LEAFLET MAP OVERRIDES ===================================================== */ .leaflet-popup-content-wrapper { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; } .leaflet-popup-tip { background: var(--bg-card) !important; } .leaflet-popup-content { font-family: 'Segoe UI', sans-serif !important; font-size: 0.82rem !important; } .truck-icon { font-size: 20px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } .depot-icon { font-size: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); } .stop-marker { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.8); } /* ===================================================== UTILITY ===================================================== */ .hidden { display: none !important; } .flex { display: flex; } .gap-8 { gap: 8px; } .ml-auto { margin-left: auto; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ===================================================== RESPONSIVE — collapse sidebar on narrow viewports ===================================================== */ @media (max-width: 900px) { .main-layout { flex-direction: column; } .sidebar { width: 100% !important; max-width: 100%; max-height: 40vh; overflow-y: auto; border-right: none !important; border-bottom: 1px solid var(--border); } .map-area { height: 50vh; min-height: 260px; } .order-alloc-bar { overflow-x: auto; flex-wrap: nowrap; } .traffic-panel { display: none; /* collapse traffic panel on mobile to save vertical space */ } .kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .kpi-grid { grid-template-columns: 1fr 1fr; } .kpi-value { font-size: 1.5rem; } .kpi-label { font-size: 0.65rem; } .navbar-brand { font-size: 0.9rem; } .alloc-chip { font-size: 0.7rem; padding: 3px 7px; } } /* ===================================================== ACCESSIBILITY ===================================================== */ /* High-contrast focus ring for keyboard navigation */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* Skip-nav link for screen-reader / keyboard users */ .skip-nav { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-nav:focus { position: fixed; left: 8px; top: 8px; width: auto; height: auto; padding: 8px 16px; background: var(--accent); color: #000; font-weight: 700; border-radius: 6px; z-index: 99999; } /* ===================================================== LOADING SKELETON ===================================================== */ @keyframes shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .skeleton { background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%); background-size: 600px 100%; animation: shimmer 1.4s infinite linear; border-radius: 4px; } .skeleton-line { height: 14px; margin: 6px 0; border-radius: 3px; } .skeleton-card { height: 64px; border-radius: 8px; margin: 8px 0; } /* ===================================================== MATRIX SOURCE BADGE ===================================================== */ .matrix-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: 10px; vertical-align: middle; letter-spacing: 0.03em; } .matrix-badge.tomtom { background: #E8F5FF; color: #0055A5; border: 1px solid var(--info); } .matrix-badge.haversine { background: var(--amber-dim); color: var(--amber); border: 1px solid var(--amber); } /* Password field with show/hide toggle — wrap an in
with a sibling