/* ========================================================================== Grovixo Transport — Fleet Ops theme Logistics/fleet-ops identity: highway-blue + amber, permanent dark "control tower" sidebar, route/timeline motifs for a transport-specific feel. Light by default, dark via [data-theme="dark"] on . ========================================================================== */ :root { --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --primary: #155eef; --primary-dark: #0d3fb0; --primary-light: #e8f0ff; --primary-rgb: 21, 94, 239; --success: #16a34a; --success-light: #e9f9ee; --warning: #f59e0b; --warning-light: #fef3e2; --danger: #e11d48; --danger-light: #fdecef; --info: #0891b2; --info-light: #e7f8fb; --neutral-light: #f1f2f6; --bg: #f5f6fa; --surface: #ffffff; --surface-hover: #fafbff; --border: #e7e9f2; --text: #14162b; --text-muted: #6b7086; --text-faint: #9297ac; --shadow-sm: 0 1px 2px rgba(20, 22, 43, 0.04), 0 1px 1px rgba(20, 22, 43, 0.03); --shadow-md: 0 4px 14px rgba(20, 22, 43, 0.06), 0 1px 3px rgba(20, 22, 43, 0.04); --shadow-lg: 0 12px 32px rgba(20, 22, 43, 0.10), 0 2px 6px rgba(20, 22, 43, 0.05); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --sidebar-w: 264px; /* Control-tower sidebar — deliberately constant across light/dark theme so the app always reads as a fleet-ops console, not a plain content toggle. */ --sb-bg: #0a1224; --sb-bg-elevated: #121d38; --sb-border: rgba(255, 255, 255, 0.07); --sb-text: #a9b2c9; --sb-text-active: #f5f7fc; --sb-muted: #64708c; --sb-active-bg: rgba(245, 158, 11, 0.14); --sb-active-text: #f5a524; --sb-accent: #f5a524; } :root[data-theme="dark"] { --primary: #6f9bff; --primary-dark: #9db8ff; --primary-light: #172550; --primary-rgb: 111, 155, 255; --success: #34d980; --success-light: #123123; --warning: #f2ab3d; --warning-light: #362508; --danger: #ff5c7c; --danger-light: #3a1420; --info: #38c6e6; --info-light: #0c2a30; --neutral-light: #23263b; --bg: #0f1120; --surface: #171a2e; --surface-hover: #1d2038; --border: #2a2d47; --text: #f1f2fb; --text-muted: #a4a8c3; --text-faint: #6d7191; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.32); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --primary: #6f9bff; --primary-dark: #9db8ff; --primary-light: #172550; --primary-rgb: 111, 155, 255; --success: #34d980; --success-light: #123123; --warning: #f2ab3d; --warning-light: #362508; --danger: #ff5c7c; --danger-light: #3a1420; --info: #38c6e6; --info-light: #0c2a30; --neutral-light: #23263b; --bg: #0f1120; --surface: #171a2e; --surface-hover: #1d2038; --border: #2a2d47; --text: #f1f2fb; --text-muted: #a4a8c3; --text-faint: #6d7191; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.32); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } body { font-size: 14.5px; line-height: 1.5; transition: background-color .25s var(--ease), color .25s var(--ease); } a { color: var(--primary); text-decoration: none; } ::selection { background: rgba(var(--primary-rgb), .22); } /* Scrollbars */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } /* ========================================================================== App shell ========================================================================== */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--sb-bg); background-image: radial-gradient(circle at 0% 0%, rgba(21, 94, 239, 0.18), transparent 55%); border-right: 1px solid var(--sb-border); position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; display: flex; flex-direction: column; transition: transform .3s var(--ease); } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 22px 22px 18px; font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; color: var(--sb-text-active); } .brand-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 15px; box-shadow: var(--shadow-sm); position: relative; flex-shrink: 0; overflow: hidden; } /* Small amber "on-road" beacon on the brand mark — a quiet nod to fleet telemetry lights rather than a literal truck icon everywhere. */ .sidebar-brand .brand-mark::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--sb-accent); border: 2px solid var(--sb-bg); } .sidebar-nav { padding: 8px 12px; flex: 1; overflow-y: auto; } .sidebar-section-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sb-muted); padding: 16px 12px 6px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--sb-text); font-weight: 500; font-size: 13.6px; cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); margin-bottom: 2px; border-left: 2.5px solid transparent; } .nav-item i { font-size: 16px; width: 18px; text-align: center; } .nav-item:hover { background: var(--sb-bg-elevated); color: var(--sb-text-active); } .nav-item.active { background: var(--sb-active-bg); color: var(--sb-active-text); font-weight: 600; border-left-color: var(--sb-accent); } .sidebar-footer { padding: 14px; border-top: 1px solid var(--sb-border); } .sidebar-footer .btn-outline { background: transparent; border-color: var(--sb-border); color: var(--sb-text); } .sidebar-footer .btn-outline:hover { border-color: var(--sb-accent); color: var(--sb-active-text); } /* Faint diagonal "road markings" along the bottom of the nav rail — decorative only, reinforces the transport identity without competing with nav labels. */ .sidebar::after { content: ''; display: block; height: 3px; margin: 0 12px 14px; background: repeating-linear-gradient(to right, var(--sb-accent) 0 10px, transparent 10px 20px); opacity: .3; border-radius: 2px; } /* Main column */ .main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; background: rgba(var(--primary-rgb), 0); background: var(--surface); border-bottom: 1px solid var(--border); backdrop-filter: saturate(1.6) blur(8px); } .topbar-search { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; width: 320px; max-width: 40vw; color: var(--text-faint); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .topbar-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); } .topbar-search input { border: none; background: none; outline: none; color: var(--text); width: 100%; font-size: 13.5px; } .icon-btn { width: 38px; height: 38px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; position: relative; transition: all .15s var(--ease); } .icon-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--primary); } .icon-btn .dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); border: 1.5px solid var(--surface); } .user-chip { height: 42px; display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); max-width: 220px; } .user-chip-icon { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-light); color: var(--primary); font-size: 15px; flex-shrink: 0; } .user-chip-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.12; } .user-chip-name { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-chip-role { margin-top: 3px; font-size: 10.5px; font-weight: 650; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 640px) { .user-chip { width: 42px; padding: 5px; justify-content: center; } .user-chip-meta { display: none; } } .content { padding: 24px 28px 48px; flex: 1; } /* Breadcrumb trail — rendered centrally in layouts/main.php from $activeNav + $pageTitle (already passed by every controller), so no per-view markup. */ .breadcrumb-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--text-faint); margin-bottom: 14px; } .breadcrumb-bar a { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); transition: color .15s var(--ease); } .breadcrumb-bar a:hover { color: var(--primary); } .breadcrumb-bar .crumb-sep { font-size: 9px; color: var(--text-faint); } .breadcrumb-bar .crumb-current { color: var(--text); font-weight: 600; } .page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; } .page-header h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 4px; } .page-header h1 i { color: var(--primary); margin-right: 9px; font-size: 0.85em; vertical-align: -0.03em; } .page-header p { margin: 0; color: var(--text-muted); font-size: 13.5px; } /* ========================================================================== Cards ========================================================================== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: var(--text); transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); } .card:hover { box-shadow: var(--shadow-md); } .card-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap; } .card-header h3 { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: -0.01em; } .card-header h3 i { color: var(--primary); margin-right: 7px; font-size: 0.95em; } .card-header p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); } .card-body { padding: 20px; } .card-body.no-pad { padding: 0; } /* Grid */ .grid { display: grid; gap: 18px; } .grid-stats { grid-template-columns: repeat(4, 1fr); } .grid-2 { grid-template-columns: 2fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-charts-2 { grid-template-columns: 1.4fr 1fr; } @media (max-width: 1200px) { .grid-stats { grid-template-columns: repeat(2, 1fr); } .grid-2, .grid-charts-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-stats, .grid-3 { grid-template-columns: 1fr; } } /* Stat card */ .stat-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; animation: fade-up .45s var(--ease) both; border-top: 3px solid var(--stat-accent, transparent); } .stat-card .stat-top { display: flex; align-items: center; justify-content: space-between; } .stat-card .stat-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; } .stat-card .stat-value { font-size: 29px; font-weight: 800; letter-spacing: -0.02em; } /* Top accent derives straight from whichever .tone-* the card's own icon already carries (:has(), no markup change needed) so the icon/accent tone stays a single source of truth defined once per card in stat-cards.php / *-show.php. */ .stat-card:has(.tone-primary) { --stat-accent: var(--primary); } .stat-card:has(.tone-success) { --stat-accent: var(--success); } .stat-card:has(.tone-warning) { --stat-accent: var(--warning); } .stat-card:has(.tone-danger) { --stat-accent: var(--danger); } .stat-card:has(.tone-info) { --stat-accent: var(--info); } .stat-card .stat-label { color: var(--text-muted); font-size: 12.8px; font-weight: 500; } .stat-card .stat-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; } .stat-card .stat-meta.up { color: var(--success); } .stat-card .stat-meta.down { color: var(--danger); } .stat-card .stat-meta.neutral { color: var(--text-faint); font-weight: 500; } .stat-card .stat-meta span.note { color: var(--text-faint); font-weight: 500; } /* Stat cards read as "alive"/clickable summary tiles, so they get a lift + primary-tinted border on hover instead of the plain shadow-only bump every other .card gets — transform/border-color transitions already come from the base .card rule since every stat card also carries the .card class. */ .stat-card:hover { transform: translateY(-2px); border-color: rgba(var(--primary-rgb), .35); box-shadow: var(--shadow-md); } .tone-primary { background: var(--primary-light); color: var(--primary); } .tone-success { background: var(--success-light); color: var(--success); } .tone-warning { background: var(--warning-light); color: var(--warning); } .tone-danger { background: var(--danger-light); color: var(--danger); } .tone-info { background: var(--info-light); color: var(--info); } .tone-neutral { background: var(--neutral-light); color: var(--text-muted); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.4px; font-weight: 600; border-radius: var(--radius-sm); padding: 9px 16px; border: 1px solid transparent; cursor: pointer; transition: all .15s var(--ease); white-space: nowrap; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 10px rgba(var(--primary-rgb), .28); } .btn-primary:hover { background: var(--primary-dark); } .btn-outline { background: var(--surface); border-color: var(--border); color: var(--text); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); } .btn-ghost { background: transparent; color: var(--text-muted); } .btn-ghost:hover { background: var(--surface-hover); color: var(--text); } .btn-sm { padding: 6px 11px; font-size: 12.5px; } .btn:disabled { opacity: .55; cursor: not-allowed; } .quick-action-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); cursor: pointer; text-align: left; width: 100%; transition: all .18s var(--ease); } .quick-action-btn:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .quick-action-btn .qa-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 16px; } .quick-action-btn strong { font-size: 13.4px; font-weight: 650; } /* ========================================================================== Badges ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3.5px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; text-transform: capitalize; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.success { background: var(--success-light); color: var(--success); } .badge.warning { background: var(--warning-light); color: var(--warning); } .badge.danger { background: var(--danger-light); color: var(--danger); } .badge.info { background: var(--info-light); color: var(--info); } .badge.neutral { background: var(--neutral-light); color: var(--text-muted); } /* ========================================================================== Tables ========================================================================== */ .table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; flex-wrap: wrap; border-bottom: 1px solid var(--border); } .table-toolbar .search-box { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 11px; min-width: 220px; color: var(--text-faint); } .table-toolbar .search-box input { border: none; background: none; outline: none; color: var(--text); width: 100%; font-size: 13px; } .table-toolbar select { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 7px 10px; font-size: 13px; outline: none; } /* Horizontally-scrollable table wrapper used on every list/report page. Fade hints (pure CSS "scroll shadow" trick) appear only on the side(s) that still have hidden content, so mobile users know there's more without JS. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(to right, var(--surface) 50%, rgba(0, 0, 0, 0)) 0 0, linear-gradient(to left, var(--surface) 50%, rgba(0, 0, 0, 0)) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(20, 22, 43, .16), rgba(0, 0, 0, 0)) 0 0, radial-gradient(farthest-side at 100% 50%, rgba(20, 22, 43, .16), rgba(0, 0, 0, 0)) 100% 0; background-repeat: no-repeat; background-color: var(--surface); background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%; background-attachment: local, local, scroll, scroll; } table.data-table { width: 100%; border-collapse: collapse; font-size: 13.3px; } table.data-table thead th { text-align: left; padding: 11px 20px; color: var(--text-faint); font-weight: 650; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap; } table.data-table tbody td { padding: 13px 20px; border-bottom: 1px solid var(--border); vertical-align: middle; } table.data-table tbody tr:last-child td { border-bottom: none; } table.data-table tbody tr { transition: background-color .12s var(--ease); } table.data-table tbody tr:hover { background: var(--surface-hover); } table.data-table tbody tr:hover td:first-child { box-shadow: 2px 0 0 var(--primary) inset; } table.data-table th.col-actions, table.data-table td.col-actions { width: 1%; min-width: 96px; text-align: center; white-space: nowrap; } .table-actions { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 74px; } .table-action { position: relative; width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); background: transparent; cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); } .table-action:hover { color: var(--primary); background: var(--primary-light); border-color: rgba(var(--primary-rgb), .24); transform: translateY(-1px); } .table-action.is-danger:hover { color: var(--danger); background: var(--danger-light); border-color: rgba(225, 29, 72, .22); } .table-action.is-success:hover { color: var(--success); background: var(--success-light); border-color: rgba(22, 163, 74, .22); } .table-action::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); background: #2f3138; color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1; padding: 7px 9px; border-radius: 6px; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s var(--ease), transform .12s var(--ease), visibility .12s var(--ease); z-index: 20; } .table-action::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 3px); width: 8px; height: 8px; background: #2f3138; transform: translateX(-50%) rotate(45deg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s var(--ease), visibility .12s var(--ease); z-index: 19; } .table-action:hover::after, .table-action:focus-visible::after, .table-action:hover::before, .table-action:focus-visible::before { opacity: 1; visibility: visible; } .table-action:hover::after, .table-action:focus-visible::after { transform: translateX(-50%) translateY(0); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Keep the identifying first column in view while scrolling right on narrow screens. */ @media (max-width: 900px) { table.data-table th:first-child, table.data-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); } table.data-table tbody tr:hover td:first-child { background: var(--surface-hover); } } .cell-muted { color: var(--text-muted); } .cell-strong { font-weight: 650; } .table-pagination { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 10px; } .table-pagination .pg-info { font-size: 12.5px; color: var(--text-muted); } .table-pagination .pg-controls { display: flex; gap: 6px; } .pg-btn { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 12.5px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s var(--ease); } .pg-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .pg-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } .pg-btn:disabled { opacity: .4; cursor: not-allowed; } /* ========================================================================== Lists (activity / notifications / payments / expenses / alerts) ========================================================================== */ .item-list { list-style: none; margin: 0; padding: 0; } .item-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--border); animation: fade-up .35s var(--ease) both; } .item-list .item-row:last-child { border-bottom: none; } .item-icon { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; } .item-content { flex: 1; min-width: 0; } .item-title { font-size: 13.2px; font-weight: 600; margin: 0 0 2px; } .item-sub { font-size: 12.3px; color: var(--text-muted); margin: 0; } .item-time { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; flex-shrink: 0; } .item-amount { font-weight: 700; font-size: 13.4px; white-space: nowrap; } .alert-row { border-left: 3px solid transparent; } .alert-row.danger { border-left-color: var(--danger); } .alert-row.warning { border-left-color: var(--warning); } .alert-row.info { border-left-color: var(--info); } /* ========================================================================== Skeleton loading states ========================================================================== */ .skeleton { position: relative; overflow: hidden; background: var(--neutral-light); border-radius: 6px; } .skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: shimmer 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; } :root[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); } } .skeleton-text { height: 12px; margin-bottom: 8px; } .skeleton-title { height: 22px; width: 60%; margin-bottom: 10px; } .skeleton-circle { border-radius: 50%; } @keyframes shimmer { 100% { transform: translateX(100%); } } /* ========================================================================== Empty states ========================================================================== */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 44px 20px; color: var(--text-muted); animation: fade-up .4s var(--ease) both; } .empty-state .empty-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--neutral-light); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--text-faint); margin-bottom: 14px; } .empty-state strong { color: var(--text); font-size: 13.8px; display: block; margin-bottom: 3px; } .empty-state span { font-size: 12.6px; } /* ========================================================================== Modals ========================================================================== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(10, 12, 26, .48); backdrop-filter: blur(2px); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); } .modal-backdrop.open { opacity: 1; pointer-events: all; } .modal { display: block; position: relative; top: auto; left: auto; height: auto; max-height: 88vh; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 480px; border: 1px solid var(--border); color: var(--text); overflow: hidden; transform: translateY(14px) scale(.98); opacity: 0; transition: transform .25s var(--ease), opacity .25s var(--ease); } .modal-backdrop.open .modal { transform: translateY(0) scale(1); opacity: 1; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); } .modal-header h3 { margin: 0; font-size: 15.5px; font-weight: 700; } .modal-body { padding: 20px 22px; max-height: 62vh; overflow-y: auto; } .modal-footer { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; } /* ========================================================================== Command palette (Ctrl+K) — shell reuses .modal-backdrop/.modal, this is just the search-input row + results list inside it. ========================================================================== */ .kbd { font-family: inherit; font-size: 11px; font-weight: 650; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text-faint); line-height: 1.5; } #cmdkModal { max-width: 600px; } .cmdk-input-row { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); color: var(--text-faint); font-size: 16px; } .cmdk-input-row input { flex: 1; border: none; background: none; outline: none; color: var(--text); font-size: 14.5px; font-family: inherit; } .cmdk-results { max-height: 60vh; overflow-y: auto; padding: 6px 0; } .cmdk-group-label { padding: 10px 20px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); } .cmdk-row { display: flex; align-items: center; gap: 12px; padding: 9px 20px; cursor: pointer; transition: background-color .1s var(--ease); } .cmdk-row:hover, .cmdk-row.active { background: var(--surface-hover); } .cmdk-row .item-content { flex: 1; min-width: 0; } .form-group { margin-bottom: 15px; } .form-group label { display: block; font-size: 12.6px; font-weight: 650; margin-bottom: 6px; color: var(--text-muted); } .form-control { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: 13.4px; font-family: inherit; outline: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .14); background: var(--surface); } .form-error { color: var(--danger); font-size: 11.6px; margin-top: 5px; display: none; } .form-group.has-error .form-control { border-color: var(--danger); } .form-group.has-error .form-error { display: block; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } } /* ========================================================================== Toasts ========================================================================== */ .toast-stack { position: fixed; top: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 12px 16px; display: flex; align-items: center; gap: 10px; min-width: 260px; transform: translateX(20px); opacity: 0; transition: all .25s var(--ease); border-left: 3px solid var(--primary); } .toast.show { transform: translateX(0); opacity: 1; } .toast.success { border-left-color: var(--success); } .toast.error { border-left-color: var(--danger); } .toast strong { font-size: 13px; } /* ========================================================================== Theme toggle ========================================================================== */ .theme-toggle { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s var(--ease); } .theme-toggle:hover { color: var(--primary); border-color: var(--primary); } /* ========================================================================== Utility + animation ========================================================================== */ .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } /* !important: Bootstrap ships its own same-named .gap-2/.gap-3 spacing utilities (0.5rem/1rem), which otherwise win over this file's slightly different values - same class-collision category as .text-muted above. */ .gap-2 { gap: 8px !important; } .gap-3 { gap: 12px !important; } /* !important: Bootstrap ships its own same-named `.text-muted` utility with !important (color: var(--bs-secondary-color)), which otherwise wins over this rule regardless of source order/specificity - same class-collision category as the .card/.modal fix elsewhere in this file. */ .text-muted { color: var(--text-muted) !important; } .text-sm { font-size: 12.5px; } .mt-0 { margin-top: 0; } .chart-canvas-wrap { position: relative; height: 260px; } .chart-canvas-wrap.sm { height: 220px; } @keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fade-up .4s var(--ease) both; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(10,12,26,.45); z-index: 39; } @media (max-width: 992px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); } .main { margin-left: 0; } .sidebar-overlay.open { display: block; } .grid-stats { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== Tabs (Customer detail page) ========================================================================== */ .tabs { display: flex; gap: 4px; padding: 6px; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .tab-item { display: flex; align-items: center; gap: 7px; white-space: nowrap; padding: 9px 15px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all .15s var(--ease); border: none; background: none; } .tab-item:hover { background: var(--surface-hover); color: var(--text); } .tab-item.active { background: var(--primary-light); color: var(--primary); } .tab-panel { display: none; } .tab-panel.active { display: block; animation: fade-up .3s var(--ease) both; } /* ========================================================================== Progress bar (credit limit vs outstanding) ========================================================================== */ .progress-track { width: 100%; height: 8px; border-radius: 999px; background: var(--neutral-light); overflow: hidden; } .progress-fill { height: 100%; border-radius: 999px; background: var(--primary); transition: width .4s var(--ease); } .progress-fill.warning { background: var(--warning); } .progress-fill.danger { background: var(--danger); } /* ========================================================================== Customer type pill toggle (form page) ========================================================================== */ .pill-toggle { display: inline-flex; padding: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); gap: 4px; } .pill-toggle input { display: none; } .pill-toggle label { padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all .15s var(--ease); } .pill-toggle input:checked + label { background: var(--primary); color: #fff; } /* ========================================================================== Status stepper (Booking / Trip detail progress row) ========================================================================== */ /* Each step is a flex:1 child carrying its own connector line. On narrow screens they'd otherwise be crushed illegibly; give them a floor width and let the row scroll horizontally instead of overflowing the card. */ .stepper-row { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; padding-top: 22px; margin-top: -22px; } @media (max-width: 720px) { .stepper-row > div { flex: 0 0 auto !important; min-width: 132px; } } /* Step circle — done (checkmark), current (truck + pulsing ring, the one place this should feel like a shipment mid-journey), or upcoming (number). */ .step-circle { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); } .step-circle.is-done { background: var(--success); color: #fff; } .step-circle.is-current { background: var(--primary); color: #fff; font-size: 14px; box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .18); animation: step-pulse 1.8s ease-in-out infinite; } .step-circle.is-upcoming { background: var(--neutral-light); color: var(--text-faint); } @keyframes step-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .18); } 50% { box-shadow: 0 0 0 8px rgba(var(--primary-rgb), .10); } } .step-label.is-current { color: var(--primary); font-weight: 700; } .step-connector { flex: 1; height: 3px; border-radius: 2px; background: var(--border); } .step-connector.is-done { background: var(--success); } /* ========================================================================== Route line — origin → destination visual used on booking/trip/LR detail pages in place of a plain "A → B" text line. ========================================================================== */ .route-line { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; } .route-line .route-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .route-line .route-dot.end { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-light); } .route-line .route-label { font-size: 13.5px; font-weight: 600; color: var(--text); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .route-line .route-path { position: relative; flex: 1; min-width: 36px; height: 2px; background-image: repeating-linear-gradient(to right, var(--border) 0 6px, transparent 6px 12px); } .route-line .route-path i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); color: var(--primary); font-size: 13px; line-height: 1; } .page-header .route-line { margin-top: 4px; max-width: 380px; } /* ========================================================================== Detail page header card ========================================================================== */ .detail-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 24px; } .detail-header .detail-avatar { width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; } .detail-header h2 { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } .detail-header .detail-meta { color: var(--text-muted); font-size: 13px; } /* ========================================================================== Accessibility: keyboard focus + reduced motion ========================================================================== */ /* Native :focus-visible only shows for keyboard/programmatic focus, not mouse clicks, so this doesn't add a visible ring to every click. .form-control and the search inputs already have their own deliberate focus treatment (border-color + box-shadow / focus-within), so they opt out here to avoid a doubled-up outline-plus-glow look. */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); } .form-control:focus-visible, .topbar-search input:focus-visible, .search-box input:focus-visible { outline: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Login — split screen: fleet-ops brand panel + sign-in form. ========================================================================== */ .login-shell { display: flex; min-height: 100vh; } .login-aside { flex: 1.1; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; color: #eef2ff; background: radial-gradient(circle at 15% 20%, rgba(21, 94, 239, 0.35), transparent 45%), radial-gradient(circle at 85% 85%, rgba(245, 158, 11, 0.18), transparent 40%), linear-gradient(160deg, var(--sb-bg), #0c1b3a 65%, #0a2a52); } /* Diagonal "road markings" sweeping across the panel — same motif as the sidebar footer, scaled up as the hero's dominant texture. */ .login-aside::before { content: ''; position: absolute; inset: -20% -10%; background-image: repeating-linear-gradient(-35deg, rgba(255,255,255,.05) 0 2px, transparent 2px 46px); pointer-events: none; } .login-aside > * { position: relative; z-index: 1; } .login-aside .login-brand-row { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 17px; } .login-aside h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.22; margin: 0 0 12px; max-width: 420px; } .login-aside .login-tagline { font-size: 14.5px; color: #c7d1f0; max-width: 380px; line-height: 1.6; } .login-highlights { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .login-highlights li { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; color: #dbe2f7; } .login-highlights .lh-icon { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: var(--sb-accent); font-size: 15px; } /* Big decorative route line at the base of the hero panel. */ .login-route { margin-top: auto; padding-top: 36px; } .login-route .route-line .route-label { color: #eef2ff; } .login-route .route-line .route-path { background-image: repeating-linear-gradient(to right, rgba(255,255,255,.28) 0 6px, transparent 6px 12px); } .login-route .route-line .route-path i { background: transparent; color: var(--sb-accent); font-size: 16px; } .login-route .route-meta { font-size: 11.5px; color: #8b98c2; margin-top: 8px; } .login-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); } .login-card { width: 100%; max-width: 380px; padding: 8px 4px; animation: fade-up .5s var(--ease) both; } .login-card .login-brand { display: none; } /* Icon-prefixed inputs + password show/hide toggle (login form only). */ .input-icon-wrap { position: relative; } .input-icon-wrap .field-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 14px; pointer-events: none; } .input-icon-wrap .form-control { padding-left: 36px; } .input-icon-wrap .toggle-pass { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: none; background: none; border-radius: 7px; color: var(--text-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s var(--ease); } .input-icon-wrap .toggle-pass:hover { color: var(--primary); background: var(--surface-hover); } .login-trust { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 0; font-size: 11.5px; color: var(--text-faint); } .login-trust i { color: var(--success); } /* Truck riding back and forth along the big hero route line only - the compact route-lines reused on booking/trip/LR pages stay static. */ .login-route .route-path i { animation: login-route-drive 3.6s ease-in-out infinite; } @keyframes login-route-drive { 0%, 100% { left: 8%; } 50% { left: 92%; } } @media (max-width: 920px) { .login-aside { display: none; } .login-card .login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-weight: 700; font-size: 18px; } }