/* ═══════════════════════════════════════════════════════════════ FIVE STAR — Dispatch Sidebar (shared CSS) ─────────────────────────────────────────────────────────────── Used by: - dispatch/index.html (Dashboard / Map / Alerts / Vehicles / Reports / Ratings views) - dispatch/drivers.html (Driver roster) - dispatch/fleet.html (Vehicle fleet) - dispatch/partners.html (Partner network) - any future dispatch/* sub-page Each consuming page sets where X is the nav key (drivers, fleet, partners, dashboard, etc). ═══════════════════════════════════════════════════════════════ */ /* Sidebar-scoped tokens (don't conflict with each page's own theme) */ .sb-layout{ --sb-bg:#111318; --sb-bg-2:#181c23; --sb-bg-3:#1e2330; --sb-border:rgba(255,255,255,.07); --sb-border-2:rgba(255,255,255,.12); --sb-text:#7c8899; --sb-text-strong:#f0f3f8; --sb-text-active:#f0d07a; --sb-gold:#c9a24d; --sb-gold-grad:linear-gradient(135deg,#6b4e1a 0%,#c9a24d 50%,#f0d07a 100%); --sb-active-bg:rgba(201,162,77,.12); --sb-active-border:rgba(201,162,77,.22); --sb-ok:#00b341; --sb-red:#f04747; --sb-shadow:0 6px 24px rgba(0,0,0,.4); --sb-topbar-bg:rgba(10,11,13,.94); } /* App shell: body doesn't scroll, viewport is fixed-height. * Sidebar and main content each scroll independently so the * sidebar stays pinned regardless of page length. */ body.sb-layout{height:100vh;overflow:hidden;margin:0} .sb-layout #app, .sb-layout .sb-app{display:grid;grid-template-columns:240px 1fr;height:100vh;overflow:hidden} /* ══ SIDEBAR ══════════════════════════════════════════════════ */ .sb-layout .sidebar{ background:var(--sb-bg); border-right:1px solid var(--sb-border); display:flex;flex-direction:column; height:100vh; overflow-y:auto;overflow-x:hidden; } .sb-layout .sidebar-header{ padding:18px 18px 16px;display:flex;align-items:center;gap:12px; border-bottom:1px solid var(--sb-border);flex-shrink:0; } .sb-layout .sidebar-logo{height:44px;width:auto;max-width:140px;object-fit:contain;flex-shrink:0;display:block} .sb-layout .sidebar-brand-mark{ display:none;width:36px;height:36px;background:var(--sb-gold-grad); color:#000;border-radius:10px;align-items:center;justify-content:center; font-family:'Bebas Neue',sans-serif;font-size:15px;font-weight:900; letter-spacing:.5px;flex-shrink:0;box-shadow:0 2px 8px rgba(201,162,77,.3); } .sb-layout .sidebar-brand{ font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:.4px; color:var(--sb-text-strong);line-height:1; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .sb-layout .sidebar-brand-sub{ font-size:9.5px;font-weight:600;color:var(--sb-text); margin-top:4px;letter-spacing:.12em;text-transform:uppercase; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .sb-layout .sidebar-section-title{ padding:16px 22px 7px;font-size:10px;font-weight:700; letter-spacing:.16em;color:var(--sb-text);text-transform:uppercase;opacity:.72; } .sb-layout .sidebar-nav{display:flex;flex-direction:column;gap:2px;padding:0 10px} .sb-layout .sb-item{ display:flex;align-items:center;gap:12px;padding:10px 12px; background:transparent;border:1px solid transparent;border-radius:10px; color:var(--sb-text);font-size:13px;font-weight:600;text-align:left; cursor:pointer;text-decoration:none; transition:background .15s ease,color .15s ease,border-color .15s ease; position:relative;width:100%; font-family:'IBM Plex Sans',system-ui,sans-serif; } .sb-layout .sb-item:hover{background:var(--sb-bg-2);color:var(--sb-text-strong);transform:none} .sb-layout .sb-item.active{ background:var(--sb-active-bg);color:var(--sb-text-active); border-color:var(--sb-active-border); } .sb-layout .sb-item.active::before{ content:'';position:absolute;left:-10px;top:9px;bottom:9px;width:3px; background:var(--sb-gold);border-radius:0 3px 3px 0; box-shadow:0 0 8px rgba(201,162,77,.5); } .sb-layout .sb-icon{ font-size:14px;width:18px;text-align:center;flex-shrink:0;line-height:1; font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji','IBM Plex Sans',system-ui,sans-serif; } .sb-layout .sb-label{flex:1;line-height:1} .sb-layout .sb-badge{ background:var(--sb-gold);color:#000;font-size:9px;font-weight:900; border-radius:999px;padding:2px 6px;min-width:16px;text-align:center;line-height:1.2; } /* Sidebar footer (user + actions) */ .sb-layout .sidebar-footer{ margin-top:auto;padding:14px 12px;border-top:1px solid var(--sb-border); display:flex;flex-direction:column;gap:12px;flex-shrink:0; } .sb-layout .sidebar-user{display:flex;align-items:center;gap:10px;padding:6px 4px} .sb-layout .sidebar-user-avatar{ width:34px;height:34px;border-radius:50%;background:var(--sb-gold-grad); color:#000;display:grid;place-items:center;font-weight:900;font-size:13px; flex-shrink:0;box-shadow:0 2px 8px rgba(201,162,77,.25); } .sb-layout .sidebar-user-info{flex:1;min-width:0} .sb-layout .sidebar-user-name{ font-size:12.5px;font-weight:700;color:var(--sb-text-strong); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2; } .sb-layout .sidebar-user-role{ font-size:10px;color:var(--sb-text);letter-spacing:.4px;margin-top:2px; } .sb-layout .sidebar-actions{display:flex;gap:8px} .sb-layout .sidebar-actions button{ flex:1;height:38px;border-radius:10px;border:1px solid var(--sb-border-2); cursor:pointer;font-size:14px;display:grid;place-items:center;line-height:1; font-family:inherit;padding:0;transition:all .15s ease; } .sb-layout .sb-btn-theme{background:var(--sb-bg-2);color:var(--sb-text)} .sb-layout .sb-btn-theme:hover{background:var(--sb-bg-3);color:var(--sb-text-strong)} .sb-layout .sb-btn-logoff{background:rgba(240,71,71,.08);color:var(--sb-red);border-color:rgba(240,71,71,.25)} .sb-layout .sb-btn-logoff:hover{background:rgba(240,71,71,.18);border-color:var(--sb-red)} /* ══ MAIN COLUMN ══════════════════════════════════════════════ */ .sb-layout .sb-main{display:flex;flex-direction:column;height:100vh;min-width:0;overflow:hidden} /* ══ SLIM TOPBAR ══════════════════════════════════════════════ */ .sb-layout .topbar-slim{ position:sticky;top:0;z-index:100;height:56px; display:flex;align-items:center;justify-content:space-between; padding:0 24px;background:var(--sb-topbar-bg);backdrop-filter:blur(20px); border-bottom:1px solid var(--sb-border);transition:background .2s; } .sb-layout .topbar-slim::after{ content:'';position:absolute;bottom:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--sb-gold),transparent);opacity:.3; } .sb-layout .topbar-title{display:flex;align-items:baseline;gap:10px;min-width:0} .sb-layout .topbar-title-main{ font-size:15px;font-weight:700;color:var(--sb-text-strong); letter-spacing:.2px;line-height:1; } .sb-layout .topbar-title-divider{color:var(--sb-text);font-size:12px;opacity:.5} .sb-layout .topbar-title-sub{ font-size:11.5px;font-weight:500;color:var(--sb-text); letter-spacing:.3px;line-height:1; } .sb-layout .topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .sb-layout .topbar-status{ display:flex;align-items:center;gap:7px;padding:6px 11px; background:rgba(0,179,65,.08);border:1px solid rgba(0,179,65,.22); border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.15em;color:var(--sb-ok); } .sb-layout .topbar-status-dot{ width:7px;height:7px;border-radius:50%;background:var(--sb-ok); animation:sbTbPulse 2s ease-in-out infinite;flex-shrink:0; } @keyframes sbTbPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}} .sb-layout .topbar-time{ font-size:12px;font-weight:600;color:var(--sb-text); font-variant-numeric:tabular-nums;letter-spacing:.3px; } /* Hamburger / collapse button */ .sb-layout .sb-hamburger{ display:grid;place-items:center;width:38px;height:38px; background:var(--sb-bg-2);border:1px solid var(--sb-border-2); border-radius:10px;color:var(--sb-text-strong);cursor:pointer; flex-shrink:0;padding:0;line-height:1;font-family:inherit; transition:all .15s ease; } .sb-layout .sb-hamburger:hover{ background:var(--sb-bg-3);color:var(--sb-text-active); border-color:rgba(201,162,77,.4);transform:translateY(-1px); } .sb-layout .sb-hamburger:active{transform:scale(.95)} .sb-layout .sb-hamburger-icon{ display:inline-block;position:relative;width:16px;height:2px; background:currentColor;border-radius:1px;font-size:0; transition:background .2s ease; } .sb-layout .sb-hamburger-icon::before, .sb-layout .sb-hamburger-icon::after{ content:'';position:absolute;left:0;width:100%;height:2px; background:currentColor;border-radius:1px; transition:transform .25s ease,top .25s ease,width .25s ease; } .sb-layout .sb-hamburger-icon::before{top:-5px} .sb-layout .sb-hamburger-icon::after{top:5px} /* ══ APP CONTENT WRAPPER (where each page's body goes) ════════ */ .sb-layout .topbar-slim{flex-shrink:0} .sb-layout .app-content{flex:1;min-width:0;min-height:0;overflow-y:auto} /* Each consuming page has its own .content { max-width:1100-1400px; * margin:0 auto } from when it ran full-width with its own topbar. * With the sidebar taking 240px, that cap leaves big empty space on * wide screens. Override to use the full available width with a * generous side-padding so cards have room to breathe. */ .sb-layout .content{max-width:none !important;margin:0 !important;padding:24px 32px 60px !important} @media (max-width:900px){ .sb-layout .content{padding:18px 16px 40px !important} } /* ══ MOBILE DRAWER (≤ 900px) ══════════════════════════════════ */ .sb-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:150} .sb-scrim.open{display:block} @media (max-width:900px){ .sb-layout #app, .sb-layout .sb-app{grid-template-columns:1fr} .sb-layout .sidebar{ position:fixed;left:0;top:0;bottom:0;width:240px;z-index:200; transform:translateX(-100%);transition:transform .25s ease; box-shadow:0 0 40px rgba(0,0,0,.5); } .sb-layout .sidebar.open{transform:translateX(0)} .sb-layout .topbar-slim{padding-left:14px} } /* ══ COLLAPSED SIDEBAR (desktop > 900px) ══════════════════════ */ @media (min-width:901px){ body.sb-layout.sb-collapsed #app, body.sb-layout.sb-collapsed .sb-app{grid-template-columns:64px 1fr} body.sb-layout.sb-collapsed .sidebar-header{padding:18px 8px;justify-content:center;gap:0} body.sb-layout.sb-collapsed .sidebar-brand-text{display:none} body.sb-layout.sb-collapsed .sidebar-logo{display:none} body.sb-layout.sb-collapsed .sidebar-brand-mark{display:flex} body.sb-layout.sb-collapsed .sidebar-section-title{padding:14px 0 6px;font-size:8px;text-align:center;letter-spacing:.1em;opacity:.45} body.sb-layout.sb-collapsed .sidebar-nav{padding:0 8px} body.sb-layout.sb-collapsed .sb-item{justify-content:center;padding:11px 0;gap:0;position:relative} body.sb-layout.sb-collapsed .sb-label{display:none} body.sb-layout.sb-collapsed .sb-icon{font-size:16px;width:auto} body.sb-layout.sb-collapsed .sb-badge{position:absolute;top:4px;right:4px;font-size:8px;padding:1px 4px;min-width:14px} body.sb-layout.sb-collapsed .sb-item.active::before{left:-8px} body.sb-layout.sb-collapsed .sidebar-footer{padding:12px 8px} body.sb-layout.sb-collapsed .sidebar-user{justify-content:center;padding:0} body.sb-layout.sb-collapsed .sidebar-user-info{display:none} body.sb-layout.sb-collapsed .sidebar-actions{flex-direction:column} body.sb-layout.sb-collapsed .sidebar-actions button{height:36px} /* Tooltip on hover when collapsed */ body.sb-layout.sb-collapsed .sb-item::after{ content:attr(data-label);position:absolute;left:calc(100% + 12px);top:50%; transform:translateY(-50%);background:var(--sb-bg-2);color:var(--sb-text-strong); font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px; border:1px solid var(--sb-border-2);white-space:nowrap;opacity:0; pointer-events:none;transition:opacity .15s ease;z-index:300; box-shadow:0 6px 24px rgba(0,0,0,.4); } body.sb-layout.sb-collapsed .sb-item:hover::after{opacity:1} /* Hamburger icon morphs into chevron when collapsed */ body.sb-layout.sb-collapsed .sb-hamburger-icon{background:transparent} body.sb-layout.sb-collapsed .sb-hamburger-icon::before{top:0;width:11px;transform:rotate(45deg) translate(3px,-3px);transform-origin:right center} body.sb-layout.sb-collapsed .sb-hamburger-icon::after{top:0;width:11px;transform:rotate(-45deg) translate(3px,3px);transform-origin:right center} } /* Light theme support */ body.sb-layout.light{ --sb-bg:#ffffff;--sb-bg-2:#f5f6f8;--sb-bg-3:#ebedf0; --sb-border:rgba(0,0,0,.08);--sb-border-2:rgba(0,0,0,.14); --sb-text:#6b7280;--sb-text-strong:#111827; --sb-topbar-bg:rgba(255,255,255,.96); } /* ═══════════════════════════════════════════════════════════════ PAGE TRANSITIONS ─────────────────────────────────────────────────────────────── 1) Native cross-document view transitions on Chrome 126+ 2) CSS fade+slide fallback on every browser (incl. Firefox/Safari) 3) Top loading bar — gold sweep while navigation is in flight ═══════════════════════════════════════════════════════════════ */ @view-transition{navigation:auto} /* Sidebar persists across navigations (Chrome view-transition) */ .sb-layout .sidebar{view-transition-name:fsc-sidebar} /* Fallback fade — runs on initial page paint after navigation. * Skipped automatically when @view-transition is in play because * Chrome handles the transition itself, but harmless if it does run. */ .sb-layout .sb-main{animation:sbPageIn .28s cubic-bezier(.22,1,.36,1) both} @keyframes sbPageIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} } /* Top loading bar — added to body by dispatch-sidebar.js. * .active during in-flight navigation; clears on pageshow. */ .sb-progress{ position:fixed;top:0;left:0;right:0;height:2.5px;z-index:99999; pointer-events:none;background:rgba(201,162,77,.08); opacity:0;transition:opacity .12s ease; } .sb-progress.active{opacity:1} .sb-progress::before{ content:'';position:absolute;top:0;bottom:0;left:0;width:30%; background:linear-gradient(90deg,transparent,#c9a24d 40%,#f0d07a 60%,transparent); box-shadow:0 0 12px rgba(240,208,122,.7); animation:sbProgressSlide 1.1s cubic-bezier(.22,1,.36,1) infinite; } @keyframes sbProgressSlide{ 0% {transform:translateX(-110%)} 100%{transform:translateX(440%)} } /* Respect prefers-reduced-motion */ @media (prefers-reduced-motion:reduce){ .sb-layout .sb-main{animation:none} .sb-progress::before{animation:none} }