/** * DriversHub — theme tokens, shell, tables, job detail. * * CSS stack (see Theme.php → hub_theme_stylesheets()): * 1. main.css — [data-theme="…"] tokens + layout + hub-card/buttons * 2. command-center.css — shared HUD widgets (dash-hud-card, welcome hero, metrics, …) * 3. pages.css — page-specific overrides (profile, events, statistics) * * Active theme: (or light-corporate). */ /* -------------------------------------------------------------------------- */ /* Global typography — Inter (legacy hub) */ /* -------------------------------------------------------------------------- */ html[data-theme] { --hub-font-sans: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif; --bs-body-font-family: var(--hub-font-sans); --bs-font-sans-serif: var(--hub-font-sans); font-family: var(--hub-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100%; min-height: 100%; background-color: var(--bg-main); } /* Server-rendered uppercase (te/te_en): avoid browser Turkish i→İ under lang="tr". */ .hub-text-preupper { text-transform: none !important; } body.hub-command-center, .hub-app, .hub-sidebar, .hub-main, .hub-mobile-top, .hub-mobile-bottom, .hub-dashboard-page, .hub-profile-page, .hub-events-page, .hub-stats-page, .dash-hud-card, .hub-card, .hub-table, .hub-table-wrap, .hub-sidebar-user-card, .hub-nav-link, .hub-brand, .dashboard-welcome-section, .dash-welcome-title, .dash-metric-value, .dash-stat-label, .hub-btn-primary, .hub-btn-outline, .btn, .form-control, .form-select, .form-label, .form-check-label, .table, .alert, .modal, .dropdown-menu, input:not(.font-monospace), select:not(.font-monospace), textarea:not(.font-monospace) { font-family: var(--hub-font-sans); } /* -------------------------------------------------------------------------- */ /* Theme: default-dark (glass / command center) */ /* -------------------------------------------------------------------------- */ :root[data-theme="default-dark"] { /* Operation Command Center — Dark HUD */ --bg-main: #020617; --bg-soft: #0f172a; --bg-gradient-top: #0f172a; --bg-sidebar: rgba(30, 41, 59, 0.55); --bg-sidebar-edge: rgba(255, 255, 255, 0.08); --bg-mobile-bar: rgba(15, 23, 42, 0.88); --bg-mobile-bar-bottom: rgba(15, 23, 42, 0.92); --card-bg-glass: rgba(30, 41, 59, 0.6); --surface-raised: rgba(30, 41, 59, 0.6); --surface-input: rgba(15, 23, 42, 0.85); --surface-input-focus: rgba(15, 23, 42, 0.95); --surface-filter: rgba(30, 41, 59, 0.55); --surface-table: rgba(30, 41, 59, 0.45); --surface-table-head: rgba(30, 41, 59, 0.75); --surface-row-hover: rgba(28, 96, 113, 0.18); --surface-plate-inner: rgba(15, 23, 42, 0.5); --text-primary: #f8fafc; --text-muted: #94a3b8; --text-heading: #f8fafc; --text-brand: #f8fafc; --text-profile-name: #f8fafc; --text-nav: #cbd5e1; --text-nav-icon: #4ade80; --text-nav-active: #f8fafc; --text-nav-section: #64748b; --text-section-label: #94a3b8; --text-accent-soft: #4ade80; --text-stat-value: #f8fafc; --text-caption: #94a3b8; --text-placeholder: #64748b; --text-btn-outline: #e2e8f0; --text-btn-outline-hover: #f8fafc; --text-danger: #fca5a5; --text-logout: #fca5a5; --text-logout-hover: #fecaca; --accent-primary: #1c6071; --accent-secondary: #255f75; --accent-progress-end: #4ade80; --accent-on-primary: #f8fafc; --accent-rgb: 28, 96, 113; --accent-2-rgb: 74, 222, 128; --accent-glow: 0 0 16px rgba(74, 222, 128, 0.35); --border-default: rgba(255, 255, 255, 0.08); --border-medium: rgba(255, 255, 255, 0.12); --border-soft: rgba(255, 255, 255, 0.06); --border-table-row: rgba(255, 255, 255, 0.06); --border-danger: rgba(248, 113, 113, 0.35); --shadow-card: 0 4px 24px rgba(2, 6, 23, 0.45); --shadow-sidebar-inset: inset -1px 0 0 rgba(255, 255, 255, 0.06); --radius-card: 12px; --gap-grid: 24px; --blur-glass: 12px; --scrollbar-track: rgba(10, 18, 34, 0.55); --scrollbar-thumb-border: rgba(10, 18, 34, 0.7); --bg-danger-soft: rgba(70, 20, 25, 0.75); --bg-logout: rgba(37, 14, 20, 0.56); --bg-logout-hover: rgba(55, 14, 24, 0.85); --bg-nav-hover: rgba(14, 32, 54, 0.68); --bg-nav-active: rgba(11, 33, 55, 0.9); --bg-mobile-link-active: rgba(11, 33, 55, 0.9); --profile-meta-strong: #c8e8ff; --profile-hero-tint-a: rgba(28, 96, 113, 0.2); --profile-hero-tint-b: rgba(74, 222, 128, 0.1); --profile-hero-bg-a: rgba(30, 41, 59, 0.75); --profile-hero-bg-b: rgba(15, 23, 42, 0.55); --profile-card-inner: rgba(30, 41, 59, 0.6); --profile-progress-track: rgba(15, 23, 42, 0.75); --profile-progress-border: rgba(255, 255, 255, 0.08); --profile-badge-bg: rgba(15, 23, 42, 0.5); --profile-badge-border: rgba(255, 255, 255, 0.08); --profile-job-row-bg: rgba(15, 23, 42, 0.45); --profile-convoy-cap-bg: rgba(2, 6, 23, 0.92); --progress-track: rgba(15, 23, 42, 0.75); --btn-outline-bg: rgba(30, 41, 59, 0.45); --btn-outline-bg-hover: rgba(28, 96, 113, 0.25); /* Legacy hub-* (existing views) → semantic */ --hub-bg: var(--bg-main); --hub-bg-soft: var(--bg-soft); --hub-card: var(--card-bg-glass); --hub-text: var(--text-primary); --hub-muted: var(--text-muted); --hub-primary: var(--accent-primary); --hub-primary-2: var(--accent-secondary); --hub-border: var(--border-default); --hub-glow: var(--shadow-card); } :root[data-theme="default-dark"] body { font-family: var(--hub-font-sans); background: radial-gradient(circle at top, var(--bg-gradient-top), var(--bg-main)); background-attachment: fixed; color: var(--text-primary); min-height: 100vh; margin: 0; overflow: hidden; } :root[data-theme="default-dark"] body.hub-command-center { display: flex; flex-direction: column; } :root[data-theme="default-dark"] body.hub-command-center:not(.hub-public-browse) { height: 100vh; height: 100dvh; overflow: hidden; } /* -------------------------------------------------------------------------- */ /* Theme: light-corporate (skeleton — tune later) */ /* -------------------------------------------------------------------------- */ :root[data-theme="light-corporate"] { --bg-main: #eef1f6; --bg-soft: #e2e7ef; --bg-gradient-top: #ffffff; --bg-sidebar: rgba(255, 255, 255, 0.92); --bg-sidebar-edge: rgba(15, 40, 80, 0.12); --bg-mobile-bar: rgba(255, 255, 255, 0.95); --bg-mobile-bar-bottom: rgba(255, 255, 255, 0.96); --card-bg-glass: rgba(255, 255, 255, 0.78); --surface-raised: rgba(248, 250, 252, 0.95); --surface-input: #ffffff; --surface-input-focus: #ffffff; --surface-filter: rgba(248, 250, 252, 0.9); --surface-table: rgba(255, 255, 255, 0.65); --surface-table-head: rgba(230, 236, 245, 0.95); --surface-row-hover: rgba(220, 230, 245, 0.55); --surface-plate-inner: rgba(240, 244, 250, 0.9); --text-primary: #1a2332; --text-muted: #5a6b82; --text-heading: #0f172a; --text-brand: #0f172a; --text-profile-name: #1e293b; --text-nav: #334155; --text-nav-icon: #2563eb; --text-nav-active: #0f172a; --text-nav-section: #64748b; --text-section-label: #475569; --text-accent-soft: #0369a1; --text-stat-value: #0f172a; --text-caption: #334155; --text-placeholder: #94a3b8; --text-btn-outline: #1e40af; --text-btn-outline-hover: #172554; --text-danger: #7f1d1d; --text-logout: #7f1d1d; --text-logout-hover: #450a0a; --accent-primary: #2563eb; --accent-secondary: #0ea5e9; --accent-on-primary: #f8fafc; --accent-rgb: 37, 99, 235; --accent-2-rgb: 14, 165, 233; --accent-glow: 0 0 12px rgba(37, 99, 235, 0.25); --border-default: rgba(15, 40, 80, 0.12); --border-medium: rgba(15, 40, 80, 0.18); --border-soft: rgba(15, 40, 80, 0.1); --border-table-row: rgba(15, 40, 80, 0.08); --border-danger: rgba(185, 28, 28, 0.35); --shadow-card: 0 1px 0 rgba(15, 40, 80, 0.06), 0 12px 40px rgba(15, 40, 80, 0.08); --shadow-sidebar-inset: inset -1px 0 0 rgba(15, 40, 80, 0.08); --scrollbar-track: rgba(226, 232, 240, 0.9); --scrollbar-thumb-border: rgba(255, 255, 255, 0.8); --bg-danger-soft: rgba(254, 226, 226, 0.95); --bg-logout: rgba(254, 226, 226, 0.6); --bg-logout-hover: rgba(254, 202, 202, 0.85); --bg-nav-hover: rgba(241, 245, 249, 0.95); --bg-nav-active: rgba(226, 232, 240, 0.95); --bg-mobile-link-active: rgba(226, 232, 240, 0.95); --profile-meta-strong: #334155; --profile-hero-tint-a: rgba(var(--accent-rgb), 0.08); --profile-hero-tint-b: rgba(var(--accent-2-rgb), 0.06); --profile-hero-bg-a: rgba(255, 255, 255, 0.85); --profile-hero-bg-b: rgba(248, 250, 252, 0.75); --profile-card-inner: rgba(255, 255, 255, 0.72); --profile-progress-track: rgba(226, 232, 240, 0.95); --profile-progress-border: rgba(15, 40, 80, 0.1); --profile-badge-bg: rgba(248, 250, 252, 0.9); --profile-badge-border: rgba(15, 40, 80, 0.1); --profile-job-row-bg: rgba(248, 250, 252, 0.75); --profile-convoy-cap-bg: rgba(248, 250, 252, 0.92); --progress-track: rgba(226, 232, 240, 0.95); --btn-outline-bg: rgba(37, 99, 235, 0.08); --btn-outline-bg-hover: rgba(37, 99, 235, 0.14); --hub-bg: var(--bg-main); --hub-bg-soft: var(--bg-soft); --hub-card: var(--card-bg-glass); --hub-text: var(--text-primary); --hub-muted: var(--text-muted); --hub-primary: var(--accent-primary); --hub-primary-2: var(--accent-secondary); --hub-border: var(--border-default); --hub-glow: var(--shadow-card); } :root[data-theme="light-corporate"] body { font-family: var(--hub-font-sans); background: radial-gradient(900px 500px at 10% 0%, rgba(var(--accent-rgb), 0.06), transparent 55%), linear-gradient(180deg, var(--bg-gradient-top) 0%, var(--hub-bg) 100%); background-attachment: fixed; color: var(--hub-text); min-height: 100vh; margin: 0; overflow: hidden; } :root[data-theme="light-corporate"] body.hub-command-center { display: flex; flex-direction: column; } :root[data-theme="light-corporate"] body.hub-command-center:not(.hub-public-browse) { height: 100vh; height: 100dvh; overflow: hidden; } /* -------------------------------------------------------------------------- */ /* Layout shell */ /* -------------------------------------------------------------------------- */ .hub-app { display: flex; flex: 1 1 0%; min-height: 0; width: 100%; overflow: hidden; } body.hub-command-center:not(.hub-public-browse) > .hub-public-top, body.hub-command-center:not(.hub-public-browse) > .hub-mobile-top, body.hub-command-center:not(.hub-public-browse) > .hub-impersonation-banner { flex-shrink: 0; } body.hub-command-center:not(.hub-public-browse) > .hub-mobile-bottom { flex-shrink: 0; } .hub-sidebar { position: sticky; top: 0; left: 0; width: 280px; min-width: 280px; max-width: 280px; flex-shrink: 0; flex-grow: 0; z-index: 30; border-right: 1px solid var(--border-default); background: var(--bg-sidebar); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); } .hub-sidebar-inner { height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 16px; box-shadow: var(--shadow-sidebar-inset); overflow-y: auto; gap: 16px; } /* Hub scrollbars — sidebar, main content, and page shell */ html[data-theme], .hub-sidebar-inner, .hub-main, body.hub-command-center { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.55) var(--scrollbar-track); } html[data-theme]::-webkit-scrollbar, .hub-sidebar-inner::-webkit-scrollbar, .hub-main::-webkit-scrollbar, body.hub-command-center::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme]::-webkit-scrollbar-track, .hub-sidebar-inner::-webkit-scrollbar-track, .hub-main::-webkit-scrollbar-track, body.hub-command-center::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 12px; } html[data-theme]::-webkit-scrollbar-thumb, .hub-sidebar-inner::-webkit-scrollbar-thumb, .hub-main::-webkit-scrollbar-thumb, body.hub-command-center::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.75), rgba(var(--accent-2-rgb), 0.7)); border: 2px solid var(--scrollbar-thumb-border); border-radius: 12px; } html[data-theme]::-webkit-scrollbar-thumb:hover, .hub-sidebar-inner::-webkit-scrollbar-thumb:hover, .hub-main::-webkit-scrollbar-thumb:hover, body.hub-command-center::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-2-rgb), 0.9)); } .hub-brand { font-weight: 800; letter-spacing: 0.4px; color: var(--text-brand) !important; font-size: 1.1rem; } .hub-brand-logo { width: 1.5rem; height: 1.5rem; object-fit: contain; flex-shrink: 0; } /* Sidebar mini-profile only — never share names with profile view page cards */ .hub-sidebar-user-card { border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--card-bg-glass); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); padding: 12px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-card); min-width: 0; } .hub-sidebar-user-avatar { width: 46px; height: 46px; min-width: 46px; min-height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(var(--accent-rgb), 0.45); flex-shrink: 0; } .hub-sidebar-user-name { color: var(--text-profile-name); font-weight: 700; font-size: 0.95rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hub-sidebar-user-role { color: var(--hub-muted); font-size: 0.78rem; line-height: 1.2; margin-top: 2px; } .hub-sidebar-user-role .hub-sidebar-role-badge { font-size: 0.68rem !important; padding: 2px 9px !important; border-radius: 999px !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; line-height: 1.35 !important; } .hub-nav { display: flex; flex-direction: column; gap: 6px; } .hub-nav-section { color: var(--text-nav-section); font-size: 0.72rem; letter-spacing: 0.9px; text-transform: uppercase; margin-top: 10px; margin-bottom: 2px; padding: 0 8px; font-weight: 700; } .hub-nav-link { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 10px 12px; color: var(--text-nav); text-decoration: none; border: 1px solid transparent; transition: all 0.2s ease; } .hub-nav-link i { color: var(--text-nav-icon); } .hub-nav-link:hover { color: var(--text-nav-active); border-color: rgba(var(--accent-rgb), 0.45); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.2); background: var(--bg-nav-hover); } .hub-nav-link.active { color: var(--text-nav-active); border-color: rgba(var(--accent-rgb), 0.55); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); background: var(--bg-nav-active); } .hub-logout-btn { border-color: rgba(255, 126, 154, 0.45); color: var(--text-logout); background: var(--bg-logout); } .hub-logout-btn:hover { border-color: rgba(255, 126, 154, 0.75); background: var(--bg-logout-hover); color: var(--text-logout-hover); } .hub-main { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 2rem; } .hub-shell { max-width: 1260px; margin: 0 auto; } .hub-shell-wide { max-width: 1400px; margin: 0 auto; } .hub-card { border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--card-bg-glass); box-shadow: var(--shadow-card); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); } .hub-kpi-value { font-family: var(--hub-font-sans); font-size: 2.25rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--text-heading); } .hub-section-title { margin: 0 0 12px; font-size: 1.125rem; font-weight: 600; color: var(--text-heading); letter-spacing: 0.02em; } .hub-metric-label { font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .hub-grid { display: grid; gap: var(--gap-grid); } .hub-grid--3 { grid-template-columns: repeat(3, 1fr); } .hub-grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 768px) { .hub-grid--3, .hub-grid--2 { grid-template-columns: 1fr; } } .hub-muted { color: var(--hub-muted); } .hub-subtitle { text-transform: uppercase; letter-spacing: 1.2px; font-size: 0.74rem; color: var(--accent-primary); font-weight: 600; } .hub-icon-accent { color: var(--accent-primary); } .hub-btn-primary { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border: 1px solid rgba(var(--accent-rgb), 0.45); color: var(--accent-on-primary); font-weight: 600; border-radius: var(--radius-card); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2), 0 4px 16px rgba(2, 6, 23, 0.35); transition: filter 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .hub-btn-primary:hover { color: var(--accent-on-primary); filter: brightness(1.08); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.45), 0 4px 20px rgba(2, 6, 23, 0.4); } .hub-btn-outline { border: 1px solid rgba(var(--accent-rgb), 0.4); color: var(--text-btn-outline); background: var(--btn-outline-bg); font-weight: 600; border-radius: var(--radius-card); backdrop-filter: blur(var(--blur-glass)); transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; } .hub-btn-outline:hover { border-color: rgba(var(--accent-rgb), 0.65); background: var(--btn-outline-bg-hover); color: var(--text-btn-outline-hover); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25); } .progress { height: 8px; border-radius: 999px; background-color: var(--progress-track) !important; overflow: hidden; border: 1px solid var(--border-soft); } .progress-bar { background: linear-gradient(90deg, var(--accent-primary), var(--accent-progress-end)) !important; box-shadow: 0 0 12px rgba(var(--accent-2-rgb), 0.45); border-radius: 999px; } .hub-progress { width: 100%; height: 8px; border-radius: 999px; background: var(--progress-track); overflow: hidden; border: 1px solid var(--border-soft); } .hub-progress__fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-primary), var(--accent-progress-end)); box-shadow: 0 0 12px rgba(var(--accent-2-rgb), 0.45); transition: width 0.35s ease; } .hub-mobile-top, .hub-mobile-bottom { display: none; } .alert-danger { background: var(--bg-danger-soft); color: var(--text-danger); border: 1px solid var(--border-danger) !important; border-radius: var(--radius-card); backdrop-filter: blur(var(--blur-glass)); } .alert-warning { background: rgba(30, 41, 59, 0.6); color: #fcd34d; border: 1px solid rgba(252, 211, 77, 0.25) !important; border-radius: var(--radius-card); backdrop-filter: blur(var(--blur-glass)); } .alert-success { background: rgba(28, 96, 113, 0.2); color: #86efac; border: 1px solid rgba(74, 222, 128, 0.25) !important; border-radius: var(--radius-card); backdrop-filter: blur(var(--blur-glass)); } .hub-rank-color-swatch { width: 14px; height: 14px; } .hub-login-card { max-width: 620px; } .form-control, .form-select { background-color: var(--surface-input); border-color: var(--border-medium); color: var(--text-primary); } .form-control:focus, .form-select:focus { background-color: var(--surface-input-focus); border-color: rgba(var(--accent-rgb), 0.75); box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.18); color: var(--text-primary); } .form-control::placeholder { color: var(--text-placeholder); } .hub-filter-wrap { border: 1px solid var(--border-medium); border-radius: 14px; background: var(--surface-filter); padding: 10px; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.06); } .hub-jobs-filter-bar { border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--card-bg-glass); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); padding: 1rem 1.1rem; box-shadow: var(--shadow-card); } .hub-jobs-filter-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.85rem 1rem; } .hub-jobs-filter-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 10rem; } .hub-jobs-filter-field--driver { min-width: 13rem; flex: 1 1 14rem; max-width: 22rem; } .hub-jobs-filter-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--hub-muted); } .hub-jobs-filter-select { appearance: none; min-width: 10rem; padding: 0.55rem 2rem 0.55rem 0.85rem; border-radius: var(--radius-card); border: 1px solid rgba(var(--accent-rgb), 0.35); background: var(--surface-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.85rem center; color: var(--text-primary); font-size: 0.92rem; } .hub-jobs-filter-select:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.65); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18); } .hub-jobs-filter-btn { padding: 0.55rem 1.1rem; border-radius: var(--radius-card); border: 1px solid rgba(var(--accent-rgb), 0.45); background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.2)); color: var(--text-primary); font-weight: 600; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .hub-jobs-filter-btn:hover { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.5), rgba(var(--accent-rgb), 0.35)); border-color: rgba(var(--accent-rgb), 0.65); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25); } .hub-jobs-pagination-footer { display: flex; flex-direction: column; gap: var(--gap-grid); margin-top: var(--gap-grid); padding: 1rem 1.1rem; border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--card-bg-glass); backdrop-filter: blur(var(--blur-glass)); } @media (min-width: 768px) { .hub-jobs-pagination-footer { flex-direction: row; justify-content: space-between; align-items: center; } } .hub-jobs-pagination-summary { color: var(--hub-muted); font-size: 0.92rem; } .hub-jobs-pagination-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; } .hub-jobs-page-numbers { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .hub-jobs-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.65rem; border-radius: 10px; border: 1px solid rgba(55, 65, 81, 0.9); background: rgba(31, 41, 55, 0.65); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } a.hub-jobs-page-btn:hover { background: rgba(55, 65, 81, 0.85); border-color: rgba(148, 163, 184, 0.35); color: var(--text-primary); } .hub-jobs-page-btn.is-active { background: var(--accent-primary); border-color: rgba(var(--accent-rgb), 0.65); color: #fff; box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.45); } .hub-event-mgmt-meta { min-width: 11rem; } .hub-event-mgmt-meta-label { display: block; font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .hub-code-preview { max-height: 8rem; overflow: auto; } .hub-jobs-page-btn.is-disabled { opacity: 0.45; cursor: not-allowed; } .hub-jobs-page-ellipsis { color: var(--hub-muted); padding: 0 0.25rem; } .hub-drivers-rank-badge { display: inline-block; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .hub-table-wrap { border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-table); backdrop-filter: blur(var(--blur-glass)); overflow: hidden; } .hub-table { margin: 0; color: var(--text-primary); --bs-table-bg: transparent; --bs-table-striped-bg: transparent; --bs-table-striped-color: var(--text-primary); --bs-table-hover-bg: transparent; --bs-table-hover-color: var(--text-primary); } .hub-table thead th { background: var(--surface-table-head); color: var(--hub-primary); border: none; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 14px; } .hub-table tbody tr { position: relative; transition: background-color 0.18s ease, box-shadow 0.18s ease; } .hub-table tbody tr:hover { background: var(--surface-row-hover); box-shadow: inset 3px 0 0 rgba(var(--accent-rgb), 0.7); } .hub-table tbody td { color: var(--text-caption); border-top: none; border-bottom: 1px solid var(--border-table-row); padding: 12px 14px; background: transparent; } .hub-table tbody tr:last-child td { border-bottom: none; } /* Event management — numbered list (Bootstrap list-group defaults to white) */ .hub-event-mgmt-list-wrap { border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface-table); overflow: hidden; } .hub-event-mgmt-list { --bs-list-group-color: var(--text-primary); --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--border-table-row); --bs-list-group-action-hover-color: var(--text-primary); --bs-list-group-action-hover-bg: var(--surface-row-hover); --bs-list-group-action-active-color: var(--text-primary); --bs-list-group-action-active-bg: var(--surface-row-hover); } .hub-event-mgmt-list > .list-group-item { background: transparent; color: var(--text-primary); border-color: var(--border-table-row); } .hub-event-mgmt-list > .list-group-item .fw-semibold { color: var(--text-heading); } .hub-event-mgmt-list.list-group-numbered > .list-group-item::before { color: var(--hub-muted); } .hub-event-mgmt-list > .list-group-item a { color: var(--hub-primary); font-weight: 600; } .hub-event-mgmt-list > .list-group-item a:hover { color: var(--hub-primary-2); } .hub-event-mgmt-timeval { color: var(--text-heading); } .hub-manual-event-panel { border: 1px solid rgba(139, 92, 246, 0.25); background: rgba(15, 23, 42, 0.45); } .hub-manual-event-badge { background: rgba(139, 92, 246, 0.2); color: #ddd6fe; border: 1px solid rgba(139, 92, 246, 0.35); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; } .hub-event-cc-badge { background: rgba(34, 197, 94, 0.15); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.35); font-size: 0.68rem; letter-spacing: 0.03em; } .hub-events-section-title--manual { color: #ddd6fe; } .hub-events-past-fold--manual summary { color: #c4b5fd; } .hub-event-catalog-sync-panel { padding: 1rem 1.25rem; border-radius: 0.75rem; border: 1px solid rgba(94, 234, 212, 0.25); background: rgba(15, 23, 42, 0.55); } .hub-event-catalog-sync-progress { height: 0.65rem; background: rgba(255, 255, 255, 0.08); } .hub-event-catalog-sync-progress .progress-bar { background: linear-gradient(90deg, #14b8a6, #5eead4); } .hub-event-catalog-sync-badge { background: rgba(94, 234, 212, 0.15); color: #5eead4; font-weight: 600; } .hub-event-catalog-sync-badge.is-completed { background: rgba(34, 197, 94, 0.15); color: #86efac; } body.hub-participants-modal-open { overflow: hidden; } .hub-participants-modal { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(3, 10, 18, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hub-participants-modal__card { position: relative; width: min(960px, 100%); max-height: min(88vh, 760px); display: flex; flex-direction: column; padding: 1.25rem 1.25rem 1rem; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(28, 96, 113, 0.55); border-radius: 0.85rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .hub-participants-modal__close { position: absolute; top: 0.85rem; right: 0.85rem; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; color: var(--hub-muted); background: rgba(28, 96, 113, 0.12); border: 1px solid rgba(28, 96, 113, 0.35); border-radius: 0.5rem; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .hub-participants-modal__close:hover { color: #fff; background: rgba(28, 96, 113, 0.28); border-color: rgba(28, 96, 113, 0.55); } .hub-participants-modal__header h2 { color: #e2f3f7; padding-right: 2rem; } .hub-participants-search-input { background: rgba(8, 20, 28, 0.75); border-color: rgba(28, 96, 113, 0.35); color: #e5eef5; } .hub-participants-search-input:focus { background: rgba(8, 20, 28, 0.9); border-color: rgba(28, 96, 113, 0.65); box-shadow: 0 0 0 0.2rem rgba(28, 96, 113, 0.2); color: #fff; } .hub-participants-grid-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid rgba(28, 96, 113, 0.22); border-radius: 0.65rem; background: rgba(4, 14, 20, 0.55); } .hub-participants-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; padding: 0.75rem; } .hub-participants-item { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0; padding: 0.55rem 0.65rem; border: 1px solid rgba(28, 96, 113, 0.22); border-radius: 0.55rem; background: rgba(30, 41, 59, 0.45); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .hub-participants-item:hover { border-color: rgba(28, 96, 113, 0.45); background: rgba(28, 96, 113, 0.12); } .hub-participants-item:has(.hub-participants-check:checked) { border-color: rgba(28, 96, 113, 0.75); background: rgba(28, 96, 113, 0.18); box-shadow: inset 0 0 0 1px rgba(28, 96, 113, 0.25); } .hub-participants-name { font-size: 0.875rem; font-weight: 600; color: #e8f4f8; line-height: 1.25; } .hub-participants-role { margin-left: auto; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(28, 96, 113, 0.95); } .hub-participants-role--trainee { color: rgba(251, 191, 36, 0.95); } .hub-participants-check { flex-shrink: 0; margin-top: 0.15rem; } .hub-participants-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; } .hub-participants-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; } .hub-participants-verified-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #ecfeff; padding: 0.18rem 0.45rem; border-radius: 999px; background: linear-gradient(135deg, rgba(28, 96, 113, 0.95), rgba(56, 189, 248, 0.75)); box-shadow: 0 0 14px rgba(56, 189, 248, 0.35); } .hub-participants-checkpoints { display: inline-flex; align-items: center; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: #a5f3fc; padding: 0.18rem 0.45rem; border-radius: 999px; background: rgba(28, 96, 113, 0.22); border: 1px solid rgba(28, 96, 113, 0.45); } .hub-participants-item--locked { border-color: rgba(56, 189, 248, 0.45); background: rgba(28, 96, 113, 0.16); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.18); cursor: default; } .hub-participants-item--locked:has(.hub-participants-check:checked) { border-color: rgba(56, 189, 248, 0.65); } /* Job detail (standalone page) */ .hub-error { border: 1px solid var(--border-danger); background: var(--bg-danger-soft); color: var(--text-danger); border-radius: 16px; padding: 14px 16px; } .hub-denied-wrap { min-height: calc(100vh - 130px); display: flex; align-items: center; justify-content: center; } .hub-denied-card { max-width: 680px; text-align: center; padding: 2.25rem; } .hub-denied-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.6rem; color: var(--text-heading); } .hub-denied-sub { color: var(--hub-muted); margin-bottom: 0.9rem; } /* Job detail — operational grade & Calm Credits */ .hub-grade-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 5.5rem; padding: 0.65rem 1rem; border-radius: 14px; border: 1px solid rgba(84, 114, 153, 0.35); background: rgba(8, 14, 28, 0.65); text-align: center; } .hub-grade-badge__letter { font-family: var(--hub-font-sans); font-size: 2.35rem; font-weight: 700; line-height: 1; letter-spacing: 0.04em; } .hub-grade-badge__sub { margin-top: 0.25rem; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hub-muted); } .hub-grade--s .hub-grade-badge__letter { color: #ffe08a; text-shadow: 0 0 12px rgba(255, 215, 100, 0.85), 0 0 28px rgba(255, 180, 60, 0.55), 0 0 48px rgba(255, 140, 40, 0.35); } .hub-grade--a .hub-grade-badge__letter { color: #d8f4ff; text-shadow: 0 0 10px rgba(160, 220, 255, 0.75), 0 0 24px rgba(120, 200, 255, 0.45); } .hub-grade--b .hub-grade-badge__letter { color: #e8edf5; text-shadow: 0 0 8px rgba(200, 210, 230, 0.25); } .hub-grade--c .hub-grade-badge__letter, .hub-grade--d .hub-grade-badge__letter { color: #ff8a8a; text-shadow: 0 0 10px rgba(255, 90, 90, 0.7), 0 0 22px rgba(220, 50, 50, 0.4); } .hub-grade--s { border-color: rgba(255, 200, 87, 0.45); box-shadow: 0 0 24px rgba(255, 180, 60, 0.15); } .hub-grade--a { border-color: rgba(120, 200, 255, 0.4); } .hub-grade--c, .hub-grade--d { border-color: rgba(255, 100, 100, 0.35); } /* Job listing tables — inline grade badge */ .distance-wrapper { display: flex; align-items: center; gap: 8px; } .distance-text { min-width: 75px; display: inline-block; flex-shrink: 0; } .distance-wrapper .grade-badge { margin-left: 0; flex-shrink: 0; } .grade-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; line-height: 1; padding: 3px 6px; border-radius: 4px; margin-left: 8px; vertical-align: middle; letter-spacing: 0.5px; } .grade-badge.grade-s { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.4); color: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, 0.2); } .grade-badge.grade-a { background: rgba(26, 188, 156, 0.15); border: 1px solid rgba(26, 188, 156, 0.4); color: #1abc9c; } .grade-badge.grade-b { background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.4); color: #3b82f6; } .grade-badge.grade-c { background: rgba(249, 115, 22, 0.15); border: 1px solid rgba(249, 115, 22, 0.4); color: #f97316; } .grade-badge.grade-d { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.4); color: #ef4444; } .jd-hero { overflow: hidden; } .jd-hero--topbar .jd-hero__bar { width: 100%; } .jd-hero__earnings { min-width: 10rem; } .jd-hero__cc-value { display: inline-block; font-size: clamp(1.25rem, 2.2vw, 1.65rem); } .jd-hero-session-capsule { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 500; line-height: 1.35; border-radius: 999px; } .jd-hero-session-capsule--tmp { color: #86efac; background: rgba(20, 83, 45, 0.3); border: 1px solid rgba(21, 128, 61, 0.5); } .jd-hero-session-capsule--sp { color: #b8c5d6; background: rgba(84, 114, 153, 0.14); border: 1px solid rgba(84, 114, 153, 0.35); } .jd-damage-card .jd-damage-row { margin-bottom: 1rem; } .jd-damage-card .jd-damage-row--last { margin-bottom: 0; } .jd-damage-row__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4rem; font-size: 0.875rem; } .jd-damage-row__label { color: var(--hub-muted); } .jd-damage-row__pct { color: #e8edf5; font-weight: 600; } .jd-damage-row__pct--warn { color: #fb923c; } .jd-damage-bar { height: 0.5rem; border-radius: 999px; overflow: hidden; background: rgba(31, 41, 55, 0.8); } .jd-damage-bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-progress-end)); box-shadow: 0 0 12px rgba(var(--accent-2-rgb), 0.45); transition: width 0.35s ease; } .jd-hero__parking { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .jd-park-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; } .jd-park-badge--manual { color: #8dffb8; background: rgba(46, 160, 95, 0.14); border-color: rgba(90, 220, 140, 0.45); box-shadow: 0 0 12px rgba(70, 220, 130, 0.25), 0 0 28px rgba(50, 180, 100, 0.12); } .jd-park-badge--auto { color: #c9b08a; background: rgba(120, 90, 50, 0.12); border-color: rgba(160, 130, 80, 0.35); } /* CC transparency ledger */ .jd-cc-ledger { background: rgba(13, 21, 38, 0.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .jd-cc-ledger__title { letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem; } .jd-cc-ledger__list { display: flex; flex-direction: column; gap: 0.55rem; } .jd-cc-ledger__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.9rem; } .jd-cc-ledger__label { color: var(--hub-muted); flex: 1; min-width: 0; } .jd-cc-ledger__value { font-family: var(--hub-font-sans); font-weight: 600; white-space: nowrap; } .jd-cc-line--muted { color: #c5ced9; } .jd-cc-line--soft { color: #9aa8b8; } .jd-cc-line--cyan { color: #7ee8ff; text-shadow: 0 0 10px rgba(100, 220, 255, 0.35); } .jd-cc-line--orange-light { color: #fdba74; } .jd-cc-line--orange { color: #fb923c; } .jd-cc-line--red { color: #ff8a8a; } .jd-cc-line--red-critical { color: #ff6b6b; font-weight: 700; } .jd-cc-line--green { color: #8dffb8; text-shadow: 0 0 10px rgba(70, 220, 130, 0.3); } .jd-cc-ledger__divider { border: 0; border-top: 1px solid rgba(84, 114, 153, 0.45); margin: 1rem 0 0.85rem; opacity: 1; } .jd-cc-ledger__total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .jd-cc-ledger__total-label { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hub-muted); font-weight: 600; } .jd-cc-ledger__total-value { font-family: var(--hub-font-sans); font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: 700; color: #ffe08a; text-shadow: 0 0 12px rgba(255, 215, 100, 0.65), 0 0 24px rgba(255, 180, 60, 0.35); } .jd-cc-ledger__total-value--penalty { color: #ff8a8a; text-shadow: 0 0 12px rgba(255, 90, 90, 0.55); } .hidden { display: none !important; } body.jd-modal-open { overflow: hidden; } .jd-cc-summary .jd-cc-ledger__total-value { font-size: clamp(1.2rem, 2vw, 1.55rem); } .jd-breakdown-open-btn { padding: 0.5rem 1rem; font-size: 0.875rem; color: #7ee8ff; background: rgba(6, 78, 99, 0.5); border: 1px solid rgba(14, 116, 144, 0.5); border-radius: 0.5rem; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 0 10px rgba(6, 182, 212, 0.2); } .jd-breakdown-open-btn:hover { color: #a5f3fc; background: rgba(8, 94, 120, 0.8); border-color: rgba(34, 211, 238, 0.45); box-shadow: 0 0 16px rgba(6, 182, 212, 0.35); } .jd-breakdown-modal { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .jd-breakdown-modal__card { position: relative; width: 100%; max-width: 28rem; max-height: min(85vh, 520px); overflow-y: auto; padding: 1.5rem; background: rgba(17, 24, 39, 0.92); border: 1px solid rgba(55, 65, 81, 0.9); border-radius: 0.75rem; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .jd-breakdown-modal__close { position: absolute; top: 0.85rem; right: 0.85rem; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; color: var(--hub-muted); background: transparent; border: 1px solid rgba(84, 114, 153, 0.35); border-radius: 0.5rem; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .jd-breakdown-modal__close:hover { color: #fff; background: rgba(84, 114, 153, 0.15); border-color: rgba(84, 114, 153, 0.55); } .jd-cc-earned__value { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 1.35rem; font-weight: 700; color: #ffe08a; text-shadow: 0 0 12px rgba(255, 200, 87, 0.35); } .jd-cc-earned__value--penalty { color: #ff8a8a; text-shadow: 0 0 10px rgba(255, 90, 90, 0.4); } .jd-grading-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 0.75rem; } .jd-grading-metric { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.85rem 1rem; border-radius: 12px; background: rgba(8, 14, 28, 0.5); border: 1px solid rgba(84, 114, 153, 0.28); } .jd-grading-metric__label { font-size: 0.78rem; color: var(--hub-muted); text-transform: uppercase; letter-spacing: 0.05em; } .jd-grading-metric__value { font-size: 1.25rem; font-weight: 600; } .jd-grading-metric__value--warn { color: #ff9a7a; } .jd-tmp-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; } .jd-tmp-badge--verified { color: #7ee0b8; } .jd-tmp-badge--solo { color: var(--hub-muted); } .jd-title { color: var(--hub-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; font-size: 0.82rem; margin-bottom: 10px; } .jd-profile-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(var(--accent-rgb), 0.5); box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.24); } .jd-grid { display: grid; grid-template-columns: 370px minmax(0, 1fr); gap: 14px; } .jd-left-col, .jd-right-col { display: grid; gap: 14px; align-content: start; } .jd-stat-list { display: grid; gap: 8px; } .jd-stat-item { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border-table-row); padding-bottom: 8px; } .jd-stat-item:last-child { border-bottom: none; padding-bottom: 0; } .jd-stat-label { color: var(--hub-muted); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 7px; } .jd-stat-value { color: var(--text-stat-value); font-weight: 600; text-align: right; } .jd-route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .jd-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; } .jd-k { color: var(--hub-muted); font-size: 0.86rem; } .jd-v { color: var(--text-stat-value); font-weight: 600; word-break: break-word; } .jd-vehicles-plates { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.35rem 2rem; } .jd-vehicles-plates__models { flex: 1 1 220px; min-width: 0; } .jd-vehicles-plates__models .jd-kv { margin: 0; } .jd-vehicles-plates__plates { flex: 1 1 260px; min-width: 0; display: flex; justify-content: flex-end; align-items: center; } .jd-vehicles-plates__plates-inner { width: 100%; max-width: 300px; padding: 12px 14px; border-radius: 14px; background: var(--surface-plate-inner); border: 1px solid var(--border-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); backdrop-filter: blur(8px); } @media (min-width: 768px) { .jd-vehicles-plates__plates { padding-left: 1.35rem; margin-left: 0.25rem; border-left: 1px solid var(--border-default); } } @media (max-width: 767px) { .jd-vehicles-plates { flex-direction: column; align-items: stretch; } .jd-vehicles-plates__plates { justify-content: flex-start; padding-left: 0; margin-left: 0; border-left: none; border-top: 1px solid var(--border-default); padding-top: 1.2rem; } .jd-vehicles-plates__plates-inner { max-width: none; } } .jd-plate-stack { display: flex; flex-direction: column; gap: 1.1rem; } .jd-plate-block-title { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hub-muted); font-weight: 700; margin-bottom: 10px; } .jd-plate-imgs { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .jd-plate-imgs img { max-width: 100%; width: auto; height: auto; border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); background: rgba(0, 0, 0, 0.25); } .jd-plate-img--pending { display: block; min-height: 52px; min-width: 180px; opacity: 0.35; background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%); } .jd-plate-img--loaded { opacity: 1; transition: opacity 0.25s ease; background: rgba(0, 0, 0, 0.25); } @media (max-width: 1200px) { .jd-grid { grid-template-columns: 1fr; } } @media (max-width: 992px) { body { overflow: auto; } body.hub-command-center:not(.hub-public-browse) { height: auto; min-height: 100vh; overflow: auto; } .hub-app { display: block; overflow: visible; flex: none; min-height: 0; } .hub-sidebar { position: fixed; inset: 0 auto 0 0; min-width: 280px; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, 0.45); } .hub-sidebar.open { transform: translateX(0); } .hub-main { margin-left: 0; height: auto; min-height: 100vh; overflow: visible; padding: 80px 14px 84px; } .hub-mobile-top { display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 20; border-bottom: 1px solid var(--border-default); background: var(--bg-mobile-bar); backdrop-filter: blur(10px); padding: 10px 12px; } .hub-mobile-bottom { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 20; padding: 8px; border-radius: var(--radius-card); border: 1px solid var(--border-default); background: var(--bg-mobile-bar-bottom); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); } .hub-mobile-link { color: var(--text-nav); text-decoration: none; font-size: 0.72rem; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: 10px; } .hub-mobile-link.active { background: var(--bg-mobile-link-active); color: var(--text-nav-active); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35); } .jd-route-grid { grid-template-columns: 1fr; } .jd-kv { grid-template-columns: 1fr; gap: 2px; } } /* Standalone job detail page: no mobile nav shell — hide sidebar on small screens */ @media (max-width: 992px) { .hub-app--job-detail .hub-sidebar { display: none; } .hub-app--job-detail .hub-main { padding: 1rem; height: auto; min-height: 100vh; overflow: visible; } } /* Personal statistics page overrides — see pages.css (.hub-stats-page) + command-center.css */