/* ============================================================ Dubai Bus Rental SaaS - Shared Stylesheet Design system extracted from HTML prototypes ============================================================ */ /* ── Google Fonts (loaded via PHP layout) ────────────────── */ :root { --navy: #0B1E3D; --navy-mid: #112952; --navy-light: #1A3A6B; --blue: #1D6FE8; --blue-hover: #1558C8; --gold: #F59E0B; --gold-light: #FEF3C7; --red: #EF4444; --green: #10B981; --teal: #0EA5E9; --purple: #8B5CF6; --sidebar-w: 260px; --topbar-h: 64px; --bg: #F0F4FA; --card: #FFFFFF; --text: #1E293B; --text-muted: #64748B; --border: #E2E8F0; --font: 'Plus Jakarta Sans', sans-serif; --mono: 'JetBrains Mono', monospace; /* semantic tokens (light) - every component/inline style uses these, so dark mode only swaps the values below */ --text-faint: #94A3B8; --border-2: #CBD5E1; --surface-2: #F8FAFC; /* row hover */ --surface-3: #FAFBFD; /* idle lanes, calendar weekends, legend */ --surface-4: #F3F5F9; /* kanban column, counters */ --tint-slate: #F1F5F9; --on-slate: #475569; --tint-blue: #EFF6FF; --tint-blue-2: #DBEAFE; --on-blue: #1E40AF; --border-blue: #BFDBFE; --blue-soft: #93C5FD; --tint-teal: #E0F2FE; --tint-green: #ECFDF5; --tint-green-2: #D1FAE5; --on-green: #065F46; --border-green: #A7F3D0; --green-2: #22C55E; --tint-gold: #FEF3C7; --tint-gold-soft: #FFFBEB; --on-gold: #92400E; --border-gold: #FDE68A; --tint-orange: #FFEDD5; --tint-red: #FEE2E2; --tint-red-soft: #FEF2F2; --on-red: #991B1B; --border-red: #FECACA; --red-hover: #B91C1C; --tint-purple: #F5F3FF; --on-purple: #6D28D9; --tint-sky: #E0F2FE; --on-sky: #0369A1; --skel-a: #E9EEF5; --skel-b: #F5F7FA; --skel-c: #E3E8F0; --shadow-color: 0,0,0; color-scheme: light; } /* ── Dark theme (html[data-theme="dark"]; toggled by toggleTheme() in app.js, pre-painted by the layout script) ── */ html[data-theme="dark"] { color-scheme: dark; --navy: #0A1730; --bg: #0F172A; --card: #1A2236; --text: #E5EAF3; --text-muted: #94A3B8; --text-faint: #64748B; --border: #2A3549; --border-2: #3B475C; --gold-light: #3A2A0C; --surface-2: #202A3F; --surface-3: #161E31; --surface-4: #222C42; --tint-slate: #273247; --on-slate: #CBD5E1; --tint-blue: #172A4A; --tint-blue-2: #1B3560; --on-blue: #93C5FD; --border-blue: #1E40AF; --tint-teal: #0F2A3F; --tint-green: #0F2E25; --tint-green-2: #123B2E; --on-green: #6EE7B7; --border-green: #065F46; --tint-gold: #3A2A0C; --tint-gold-soft: #2B220C; --on-gold: #FCD34D; --border-gold: #854D0E; --tint-orange: #3A2212; --tint-red: #3B1616; --tint-red-soft: #2C1414; --on-red: #FCA5A5; --border-red: #7F1D1D; --red-hover: #DC2626; --tint-purple: #2A2146; --on-purple: #C4B5FD; --tint-sky: #0F2A3A; --on-sky: #7DD3FC; --skel-a: #232D42; --skel-b: #2B364D; --skel-c: #1E2739; --shadow-color: 0,0,0; } html[data-theme="dark"] .modal-content, html[data-theme="dark"] .offcanvas, html[data-theme="dark"] .dropdown-menu { background: var(--card); color: var(--text); } html[data-theme="dark"] .modal-content { box-shadow: 0 20px 60px rgba(0,0,0,0.5); border: 1px solid var(--border); } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] input::placeholder { color: var(--text-faint); } html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-select:disabled, html[data-theme="dark"] .form-control[readonly] { background: var(--surface-3); } html[data-theme="dark"] .form-check-input { background-color: var(--surface-4); border-color: var(--border-2); } html[data-theme="dark"] .form-check-input:checked { background-color: var(--blue); border-color: var(--blue); } html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } html[data-theme="dark"] .btn-outline-secondary { color: var(--text-muted); border-color: var(--border-2); } html[data-theme="dark"] .btn-outline-secondary:hover { background: var(--surface-4); color: var(--text); } html[data-theme="dark"] .btn-light, html[data-theme="dark"] .bg-light { background: var(--surface-4) !important; color: var(--text) !important; border-color: var(--border) !important; } html[data-theme="dark"] .bg-white { background: var(--card) !important; } html[data-theme="dark"] .text-dark { color: var(--text) !important; } html[data-theme="dark"] .text-secondary, html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; } html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); } html[data-theme="dark"] .nav-badge.warn { color: #1E293B; } html[data-theme="dark"] .stat-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.35); } html[data-theme="dark"] .dp-blk:hover, html[data-theme="dark"] .kb-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.45); } html[data-theme="dark"] .dp-cal-chip:hover { filter: brightness(1.15); } html[data-theme="dark"] .onb-step.next .onb-step-ico { background: var(--tint-blue); color: var(--on-blue); } html[data-theme="dark"] .login-tab.active { box-shadow: 0 1px 4px rgba(0,0,0,0.4); } html[data-theme="dark"] img.invert-dark, html[data-theme="dark"] .invert-dark { filter: invert(1) hue-rotate(180deg); } /* theme toggle button (topbar) */ #themeToggle i::before { content: "\f496"; } /* bi-moon-stars */ html[data-theme="dark"] #themeToggle i::before { content: "\f5a2"; } /* bi-sun */ html[data-theme="dark"] .toast-dark-fix { color: #fff; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; } /* ── Sidebar ─────────────────────────────────────────────── */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background: var(--navy); display: flex; flex-direction: column; z-index: 1000; transition: transform 0.3s ease; } .sidebar-brand { padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); } .sidebar-brand .brand-icon { width: 40px; height: 40px; background: var(--blue); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; margin-bottom: 10px; } .sidebar-brand .brand-name { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.2; } .sidebar-brand .brand-sub { font-size: 11px; color: rgba(255,255,255,0.45); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; } .sidebar-brand .company-pill { margin-top: 10px; background: rgba(29,111,232,0.2); border: 1px solid rgba(29,111,232,0.35); border-radius: 6px; padding: 4px 10px; font-size: 11px; color: var(--blue-soft); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 16px 0; scrollbar-width: none; } .sidebar-nav::-webkit-scrollbar { display: none; } .nav-section-label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.3); padding: 14px 24px 6px; } .nav-item-link { display: flex; align-items: center; gap: 12px; padding: 10px 24px; color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.2s; position: relative; cursor: pointer; } .nav-item-link:hover { color: #fff; background: rgba(255,255,255,0.06); } .nav-item-link.active { color: #fff; background: rgba(29,111,232,0.2); } .nav-item-link.active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: var(--blue); border-radius: 0 3px 3px 0; } .nav-item-link i { font-size: 17px; width: 20px; text-align: center; } .nav-badge { margin-left: auto; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; } .nav-badge.warn { background: var(--gold); color: #1E293B; } .nav-badge.success { background: var(--green); } .sidebar-footer { padding: 16px 24px; border-top: 1px solid rgba(255,255,255,0.08); } .sidebar-user { display: flex; align-items: center; gap: 10px; } .sidebar-user .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), #6366F1); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; font-weight: 700; } .sidebar-user .user-info .name { font-size: 13px; font-weight: 600; color: #fff; } .sidebar-user .user-info .role { font-size: 11px; color: rgba(255,255,255,0.4); } /* ── Topbar ──────────────────────────────────────────────── */ .topbar { position: fixed; top: 0; left: var(--sidebar-w); right: 0; height: var(--topbar-h); background: var(--card); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 28px; gap: 16px; z-index: 999; } .topbar-title { flex: 1; } .topbar-search { position: relative; } .topbar-search input { border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px 7px 36px; font-size: 13px; width: 220px; background: var(--bg); color: var(--text); outline: none; font-family: var(--font); } .topbar-search input:focus { border-color: var(--blue); } .topbar-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; } .topbar-btn { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); position: relative; transition: all 0.2s; } .topbar-btn:hover { background: var(--bg); color: var(--text); } .topbar-btn .dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; background: var(--red); border-radius: 50%; border: 2px solid var(--card); } /* ── Notification center (bell dropdown) ─────────────────── */ .notif-wrap { position: relative; } .notif-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--card); line-height: 1; } .notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 400px; max-width: calc(100vw - 24px); background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.16); z-index: 1050; overflow: hidden; } .notif-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; } .notif-sub { font-size: 11.5px; color: var(--text-muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notif-refresh { border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 2px 4px; border-radius: 6px; } .notif-refresh:hover { background: var(--bg); color: var(--text); } .notif-body { max-height: min(70vh, 560px); overflow-y: auto; } .notif-loading, .notif-empty { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 8px; } .notif-empty i { font-size: 20px; color: var(--green); } .notif-section { border-bottom: 1px solid var(--border); } .notif-section:last-child { border-bottom: none; } .notif-sec-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px 6px; text-decoration: none; color: var(--text); } .notif-sec-head:hover .notif-sec-title { color: var(--blue); } .notif-ico { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .notif-ico.blue { background: var(--tint-blue); color: var(--blue); } .notif-ico.gold { background: var(--tint-gold); color: var(--on-gold); } .notif-ico.red { background: var(--tint-red); color: var(--red); } .notif-ico.purple { background: var(--tint-purple); color: var(--on-purple); } .notif-ico.teal { background: var(--tint-teal); color: var(--teal); } .notif-sec-title { font-size: 13px; font-weight: 700; flex: 1; min-width: 0; display: flex; flex-direction: column; } .notif-sec-title small { font-size: 11px; font-weight: 500; color: var(--text-muted); } .notif-sec-cnt { font-family: var(--mono); font-size: 11px; font-weight: 700; background: var(--bg); color: var(--text-muted); padding: 2px 8px; border-radius: 10px; } .notif-item { display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 54px; text-decoration: none; color: var(--text); border-left: 3px solid transparent; transition: background .15s; } .notif-item:hover { background: var(--surface-2); color: var(--text); } .notif-item.warn { border-left-color: var(--gold); } .notif-item.critical { border-left-color: var(--red); } .notif-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .notif-item-main .t { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notif-item-main .s { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notif-item-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; font-weight: 600; } .notif-item.critical .notif-item-meta { color: var(--red); } .notif-item.warn .notif-item-meta { color: var(--on-gold); } .notif-more { display: block; padding: 6px 16px 10px 54px; font-size: 12px; font-weight: 700; color: var(--blue); text-decoration: none; } @media (max-width: 480px) { .notif-panel { position: fixed; top: var(--topbar-h); left: 12px; right: 12px; width: auto; } } /* ── Main Content ────────────────────────────────────────── */ .main { margin-left: var(--sidebar-w); margin-top: var(--topbar-h); padding: 28px; min-height: calc(100vh - var(--topbar-h)); } /* ── Stat Cards ──────────────────────────────────────────── */ .stat-card { background: var(--card); border-radius: 14px; padding: 22px 24px; border: 1px solid var(--border); position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.07); } .stat-card .stat-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; } .stat-card .stat-value { font-size: 32px; font-weight: 800; color: var(--text); font-family: var(--mono); line-height: 1; margin-bottom: 8px; } .stat-card .stat-change { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; } .stat-card .stat-change.up { color: var(--green); } .stat-card .stat-change.down { color: var(--red); } .stat-card .stat-change.warn { color: var(--gold); } .stat-card .stat-icon { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .stat-card .accent-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; border-radius: 0 0 14px 14px; } /* ── Card Box ────────────────────────────────────────────── */ .card-box { background: var(--card); border-radius: 14px; border: 1px solid var(--border); padding: 22px 24px; } /* ── Section Header ──────────────────────────────────────── */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .section-header h6 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; } .section-header a { font-size: 13px; color: var(--blue); text-decoration: none; font-weight: 500; } /* ── Tables ──────────────────────────────────────────────── */ .dash-table { width: 100%; border-collapse: collapse; } .dash-table th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); padding: 0 12px 12px; text-align: left; border-bottom: 1px solid var(--border); } .dash-table td { padding: 13px 12px; font-size: 13.5px; color: var(--text); border-bottom: 1px solid var(--border); vertical-align: middle; } .dash-table tr:last-child td { border-bottom: none; } .dash-table tr:hover td { background: var(--surface-2); } /* ── Badges ──────────────────────────────────────────────── */ .badge-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; } .badge-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; } .badge-pill.confirmed { background: var(--tint-green-2); color: var(--on-green); } .badge-pill.confirmed::before { background: var(--green); } .badge-pill.pending { background: var(--tint-gold); color: var(--on-gold); } .badge-pill.pending::before { background: var(--gold); } .badge-pill.inprogress { background: var(--tint-blue-2); color: var(--on-blue); } .badge-pill.inprogress::before { background: var(--blue); } .badge-pill.cancelled { background: var(--tint-red); color: var(--on-red); } .badge-pill.cancelled::before { background: var(--red); } .badge-pill.completed { background: var(--tint-green); color: var(--on-green); } .badge-pill.completed::before { background: var(--green-2); } .badge-pill.available { background: var(--tint-green-2); color: var(--on-green); } .badge-pill.available::before { background: var(--green); } .badge-pill.ontrip { background: var(--tint-blue-2); color: var(--on-blue); } .badge-pill.ontrip::before { background: var(--blue); } .badge-pill.offduty { background: var(--tint-slate); color: var(--on-slate); } .badge-pill.offduty::before { background: var(--text-faint); } .badge-pill.active { background: var(--tint-green-2); color: var(--on-green); } .badge-pill.active::before { background: var(--green); } .badge-pill.suspended { background: var(--tint-red); color: var(--on-red); } .badge-pill.suspended::before { background: var(--red); } .badge-pill.trial { background: var(--tint-gold); color: var(--on-gold); } .badge-pill.trial::before { background: var(--gold); } /* ── Plan Tags ───────────────────────────────────────────── */ .plan-tag { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .plan-tag.basic { background: var(--tint-sky); color: var(--on-sky); } .plan-tag.pro { background: var(--tint-purple); color: var(--on-purple); } .plan-tag.enterprise { background: var(--tint-gold); color: var(--on-gold); } /* ── Vehicle Type Tags ───────────────────────────────────── */ .type-tag { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .type-tag.bus { background: var(--tint-blue); color: var(--on-blue); } .type-tag.coaster { background: var(--tint-green); color: var(--on-green); } .type-tag.van { background: var(--tint-purple); color: var(--on-purple); } .type-tag.minibus { background: var(--tint-gold); color: var(--on-gold); } /* ── Alert Banners ───────────────────────────────────────── */ .alert-banner { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 500; margin-bottom: 10px; } .alert-banner.warning { background: var(--tint-gold); color: var(--on-gold); border: 1px solid var(--border-gold); } .alert-banner.danger { background: var(--tint-red); color: var(--on-red); border: 1px solid var(--border-red); } .alert-banner.info { background: var(--tint-blue); color: var(--on-blue); border: 1px solid var(--border-blue); } .alert-banner i { font-size: 17px; } .alert-banner .btn-dismiss { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; opacity: 0.5; font-size: 16px; padding: 0; } .alert-banner .btn-dismiss:hover { opacity: 1; } /* ── Progress Bar ────────────────────────────────────────── */ .progress-mini { height: 6px; border-radius: 10px; background: var(--border); overflow: hidden; } .progress-mini .fill { height: 100%; border-radius: 10px; } /* ── Timeline ────────────────────────────────────────────── */ .timeline-item { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); } .timeline-item:last-child { border-bottom: none; } .timeline-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .timeline-item .t-title { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .timeline-item .t-meta { font-size: 12px; color: var(--text-muted); } .timeline-item .t-time { margin-left: auto; font-size: 11px; color: var(--text-muted); white-space: nowrap; } /* ── Donut Chart ─────────────────────────────────────────── */ .donut { position: relative; width: 100px; height: 100px; margin: 0 auto; } .donut svg { transform: rotate(-90deg); } .donut .donut-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; } .donut .donut-label .num { font-size: 22px; font-weight: 800; font-family: var(--mono); color: var(--text); } .donut .donut-label .sub { font-size: 10px; color: var(--text-muted); font-weight: 600; } /* ── Bar Chart ───────────────────────────────────────────── */ .bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 100px; padding-top: 8px; } .bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; } .bar { width: 100%; border-radius: 6px 6px 0 0; background: var(--blue); opacity: 0.8; transition: opacity 0.2s; cursor: pointer; } .bar:hover { opacity: 1; } .bar.gold { background: var(--gold); } .bar-label { font-size: 10px; color: var(--text-muted); font-weight: 600; } /* ── Page Header (filter bar) ────────────────────────────── */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .page-header h4 { font-size: 20px; font-weight: 800; margin: 0; } .filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .filter-bar input[type="text"], .filter-bar input[type="date"], .filter-bar select { border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; font-size: 13px; background: var(--card); color: var(--text); outline: none; font-family: var(--font); } .filter-bar input:focus, .filter-bar select:focus { border-color: var(--blue); } /* ── Status Tabs ─────────────────────────────────────────── */ .status-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; } .status-tab { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text-muted); text-decoration: none; transition: all 0.2s; } .status-tab:hover, .status-tab.active { background: var(--blue); color: #fff; border-color: var(--blue); } .status-tab .cnt { background: rgba(255,255,255,0.25); padding: 1px 6px; border-radius: 10px; font-size: 11px; margin-left: 4px; } .status-tab:not(.active) .cnt { background: var(--bg); color: var(--text-muted); } /* ── Action Buttons (table row) ──────────────────────────── */ .btn-action { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-muted); transition: all 0.15s; text-decoration: none; } .btn-action:hover { background: var(--bg); color: var(--text); text-decoration: none; } .btn-action.danger:hover { background: var(--tint-red); color: var(--red); border-color: var(--border-red); } /* ── Modals (Bootstrap override) ────────────────────────── */ .modal-content { border-radius: 16px; border: none; box-shadow: 0 20px 60px rgba(0,0,0,0.15); } .modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); } .modal-title { font-size: 16px; font-weight: 700; } .modal-body { padding: 20px 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); gap: 8px; } .form-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; } .form-control, .form-select { border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; font-family: var(--font); color: var(--text); background: var(--card); } .form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,111,232,0.1); } .form-select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 10px; padding-right: 34px; } html[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } textarea.form-control { resize: vertical; min-height: 80px; } /* ── Off-canvas Drawer ───────────────────────────────────── */ .offcanvas { width: 480px !important; } .offcanvas-header { padding: 20px 24px; border-bottom: 1px solid var(--border); } .offcanvas-title { font-size: 16px; font-weight: 700; } .offcanvas-body { padding: 20px 24px; } /* ── Booking detail drawer ───────────────────────────────── */ .dash-table tr.row-link td { cursor: pointer; } /* Soft-deleted ("Deleted" tab) rows */ .dash-table tr.row-deleted td:not(:last-child) { opacity: .55; } .dash-table tr.row-deleted td:first-child { text-decoration: line-through; } .badge-deleted { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: var(--tint-slate); color: var(--text-muted); border: 1px dashed var(--border-2); } .status-tab-trash:not(.active) { color: var(--text-muted); border-style: dashed; } /* Double-booking warning (booking modal + drawer) */ .bk-conflict { background: var(--tint-gold-soft); border: 1px solid var(--border-gold); color: var(--on-gold); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; } .bk-conflict-title { font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .bk-conflict ul { margin: 0 0 4px; padding-left: 18px; } .bk-conflict li { margin: 2px 0; } .bk-conflict a { color: var(--blue); font-family: var(--mono); font-weight: 600; } .bk-conflict-hint { font-size: 12px; color: var(--on-gold); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .bk-conflict-hint .btn-sm { padding: 4px 10px; font-size: 12px; color: var(--on-gold); border-color: var(--border-gold); background: var(--card); } select option.opt-busy { color: var(--on-gold); } #bookingDrawer.offcanvas { width: 540px !important; } @media (max-width: 600px) { #bookingDrawer.offcanvas { width: 100% !important; } } #bookingDrawer .offcanvas-body { background: var(--bg); } .bk-section { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--card); } .bk-section .bk-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .bk-route { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; margin-bottom: 12px; flex-wrap: wrap; } .bk-route i { color: var(--blue); } .bk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .bk-kv .k { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } .bk-kv .v { font-size: 13.5px; font-weight: 600; margin-top: 2px; } .bk-kv .v.mono { font-family: var(--mono); } .bk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .bk-actions .btn-outline-custom, .bk-actions .btn-primary-custom { display: inline-flex; align-items: center; gap: 6px; } .bk-person { display: flex; align-items: center; gap: 12px; } .bk-person .meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .bk-person .meta a { color: inherit; text-decoration: none; } .bk-person .meta a:hover { color: var(--blue); } .bk-note { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .bk-note:last-child { border-bottom: none; } .bk-note .n-body { font-size: 13px; white-space: pre-wrap; word-break: break-word; } .bk-note .n-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; } .bk-instructions { background: var(--tint-gold-soft); border: 1px solid var(--border-gold); color: var(--on-gold); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-top: 12px; } .bk-empty { font-size: 13px; color: var(--text-muted); padding: 4px 0; } .bk-empty a { color: var(--blue); text-decoration: none; font-weight: 600; } /* ── Document expiry alerts (dashboard) ──────────────────── */ .exp-sub { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 8px; } .exp-pills { display: flex; gap: 6px; flex-wrap: wrap; } .exp-pill { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; } .exp-pill.expired { background: var(--tint-red); color: var(--on-red); } .exp-pill.critical { background: var(--tint-orange); color: var(--on-gold); } .exp-pill.soon { background: var(--tint-gold); color: var(--on-gold); } .exp-pill.zero { background: var(--bg); color: var(--text-muted); } .exp-icon { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } .exp-icon.vehicle { background: var(--tint-gold); color: var(--on-gold); } .exp-icon.driver { background: var(--tint-purple); color: var(--on-purple); } .exp-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; } .exp-badge.expired { background: var(--tint-red); color: var(--on-red); } .exp-badge.critical { background: var(--tint-orange); color: var(--on-gold); } .exp-badge.soon { background: var(--tint-gold); color: var(--on-gold); } .exp-table tr.exp-expired td { background: var(--tint-red-soft); } .exp-btn { padding: 4px 10px; font-size: 12px; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } /* ── Dispatch board / calendar ───────────────────────────── */ .dp-seg { display: inline-flex; background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; } .dp-seg a, .dp-seg button { border: none; background: transparent; border-radius: 7px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; font-family: var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .15s; white-space: nowrap; } .dp-seg a:hover, .dp-seg button:hover { color: var(--text); } .dp-seg a.active, .dp-seg button.active { background: var(--blue); color: #fff; } .dp-seg.sm a, .dp-seg.sm button { padding: 5px 10px; font-size: 12.5px; } .dp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .dp-toolbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .dp-datenav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dp-nav-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: all .15s; } .dp-nav-btn:hover { background: var(--bg); color: var(--text); } .dp-date-input { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-family: var(--font); color: var(--text); background: var(--card); outline: none; } .dp-date-input:focus { border-color: var(--blue); } .dp-today-on { background: var(--bg); border-color: var(--blue); color: var(--blue); } .dp-daytitle { font-size: 15px; font-weight: 700; margin-left: 6px; } .dp-check { font-size: 13px; font-weight: 500; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; } .dp-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .dp-chip { display: inline-flex; align-items: baseline; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 6px 12px; } .dp-chip .v { font-family: var(--mono); font-weight: 800; font-size: 17px; color: var(--text); line-height: 1; } .dp-chip .l { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; } .dp-chip.info .v { color: var(--blue); } .dp-chip.warn .v { color: var(--on-gold); } .dp-chip.danger .v { color: var(--red); } .dp-chip.ok .v { color: var(--on-green); } .dp-chip.danger:not(.is-zero) { background: var(--tint-red-soft); border-color: var(--border-red); } .dp-chip.is-zero .v { color: var(--text-muted); opacity: .6; } .dp-card { padding: 0; overflow: hidden; } .dp-scroll { overflow-x: auto; overflow-y: hidden; } .dp-board { display: inline-block; min-width: 100%; } .dp-row { display: flex; border-bottom: 1px solid var(--border); min-width: 100%; } .dp-row:last-child { border-bottom: none; } .dp-label { position: sticky; left: 0; z-index: 2; width: 220px; flex: 0 0 220px; background: var(--card); border-right: 1px solid var(--border); padding: 8px 12px; display: flex; align-items: center; gap: 8px; } .dp-row-idle .dp-label { background: var(--surface-3); } .dp-row-idle .dp-res { opacity: .7; } .dp-row-un .dp-label { background: var(--tint-gold-soft); } .dp-head { position: sticky; top: 0; z-index: 3; background: var(--card); } .dp-head .dp-label { padding: 10px 12px; } .dp-head-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--text-muted); } .dp-head-cnt { font-size: 11px; font-weight: 700; background: var(--bg); color: var(--text-muted); padding: 1px 7px; border-radius: 10px; } .dp-head .dp-track { height: 36px; } .dp-hour { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 11px 0 0 6px; font-family: var(--mono); } .dp-track { position: relative; flex: 0 0 auto; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px); } .dp-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 1; pointer-events: none; } .dp-now::before { content: ''; position: absolute; top: -1px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); } .dp-res { min-width: 0; flex: 1; } .dp-res-main { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dp-res-main.mono, .mono { font-family: var(--mono); } .dp-res-name { overflow: hidden; text-overflow: ellipsis; } .dp-res-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .dp-res-meta .type-tag { padding: 1px 6px; font-size: 9.5px; } .dp-res-un .dp-res-main { color: var(--on-gold); } .dp-mini { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .3px; } .dp-mini.ok { background: var(--tint-green-2); color: var(--on-green); } .dp-mini.info { background: var(--tint-blue-2); color: var(--on-blue); } .dp-mini.warn { background: var(--tint-gold); color: var(--on-gold); } .dp-mini.muted { background: var(--tint-slate); color: var(--on-slate); } .dp-lane-cnt { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg); min-width: 22px; text-align: center; padding: 2px 5px; border-radius: 8px; } .dp-lane-cnt:empty { display: none; } .dp-blk { position: absolute; height: 32px; border-radius: 7px; border: 1px solid transparent; border-left-width: 4px; padding: 2px 8px; text-align: left; font-family: var(--font); cursor: pointer; overflow: hidden; display: flex; flex-direction: column; justify-content: center; line-height: 1.15; transition: box-shadow .15s, transform .15s; background: var(--card); } .dp-blk:hover { box-shadow: 0 4px 14px rgba(0,0,0,.14); transform: translateY(-1px); z-index: 2; } .dp-blk .b-time { font-family: var(--mono); font-size: 10px; font-weight: 700; opacity: .85; white-space: nowrap; } .dp-blk .b-main { font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dp-blk .b-sub { display: none; } .dp-blk.no-end { border-right-style: dashed; } .dp-blk.st-pending { background: var(--tint-gold); border-color: var(--border-gold); border-left-color: var(--gold); color: var(--on-gold); } .dp-blk.st-confirmed { background: var(--tint-green-2); border-color: var(--border-green); border-left-color: var(--green); color: var(--on-green); } .dp-blk.st-in_progress { background: var(--tint-blue-2); border-color: var(--border-blue); border-left-color: var(--blue); color: var(--on-blue); } .dp-blk.st-completed { background: var(--tint-slate); border-color: var(--border); border-left-color: var(--green-2); color: var(--on-slate); } .dp-blk.st-cancelled { background: var(--tint-red); border-color: var(--border-red); border-left-color: var(--red); color: var(--on-red); opacity: .65; } .dp-blk.st-cancelled .b-main { text-decoration: line-through; } .dp-blk.is-conflict { box-shadow: 0 0 0 2px var(--red); } .dp-blk.is-conflict .b-main::before { content: '⚠ '; } .dp-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13.5px; } .dp-empty i { font-size: 26px; display: block; margin-bottom: 6px; opacity: .5; } .dp-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); background: var(--surface-3); } .dp-legend span { display: inline-flex; align-items: center; gap: 5px; } .dp-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .dp-legend i.st-pending { background: var(--gold); } .dp-legend i.st-confirmed { background: var(--green); } .dp-legend i.st-in_progress { background: var(--blue); } .dp-legend i.st-completed { background: var(--green-2); opacity: .55; } .dp-legend i.st-cancelled { background: var(--red); opacity: .5; } .dp-legend i.st-conflict { background: var(--card); box-shadow: 0 0 0 2px var(--red); } /* trip popover */ .dp-pop { position: fixed; z-index: 1060; width: 360px; max-width: calc(100vw - 24px); background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.18); padding: 14px 16px; font-size: 13px; } .dp-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .dp-pop-route { font-weight: 700; font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dp-pop-route i { color: var(--blue); } .dp-pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; } .dp-pop-grid .k { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); } .dp-pop-grid .v { display: block; font-weight: 600; margin-top: 1px; } .dp-pop-grid .v.dp-missing { color: var(--on-gold); font-weight: 600; } .dp-tel { color: var(--blue); text-decoration: none; font-size: 12px; margin-left: 2px; } .dp-pop-notes { margin-top: 10px; background: var(--tint-gold-soft); border: 1px solid var(--border-gold); color: var(--on-gold); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; } .dp-pop-warn { margin-top: 10px; background: var(--tint-red-soft); border: 1px solid var(--border-red); color: var(--on-red); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; } .dp-pop-warn a { color: var(--blue); font-weight: 700; } .dp-pop-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .dp-pop-actions .btn-sm { padding: 5px 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; } .dp-pop-actions .dp-danger { color: var(--red); border-color: var(--border-red); } .dp-pop-actions .dp-danger:hover { background: var(--tint-red-soft); } .dp-pop-open { font-size: 12.5px; font-weight: 700; color: var(--blue); text-decoration: none; white-space: nowrap; } /* month calendar */ .dp-cal { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); min-width: 840px; } .dp-cal-wd { padding: 10px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--text-muted); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--surface-3); } .dp-cal-wd:nth-child(7n) { border-right: none; } .dp-cal-day { min-height: 112px; padding: 8px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; background: var(--card); } .dp-cal-day:nth-child(7n) { border-right: none; } .dp-cal-day.is-weekend { background: var(--surface-3); } .dp-cal-day.is-out { background: var(--surface-3); } .dp-cal-day.is-out .dp-cal-num, .dp-cal-day.is-out .dp-cal-chip { opacity: .5; } .dp-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--blue); } .dp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } .dp-cal-num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--text); text-decoration: none; transition: background .15s; } .dp-cal-num:hover { background: var(--bg); color: var(--blue); } .dp-cal-day.is-today .dp-cal-num { background: var(--blue); color: #fff; } .dp-cal-cnt { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg); padding: 1px 7px; border-radius: 10px; } .dp-cal-chip { display: flex; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 5px; font-size: 11.5px; text-decoration: none; color: var(--text); border-left: 3px solid transparent; min-width: 0; transition: filter .15s; } .dp-cal-chip:hover { filter: brightness(.95); color: var(--text); } .dp-cal-chip .c-time { font-family: var(--mono); font-weight: 700; font-size: 10.5px; flex-shrink: 0; } .dp-cal-chip .c-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .dp-cal-chip.st-pending { background: var(--tint-gold); border-left-color: var(--gold); color: var(--on-gold); } .dp-cal-chip.st-confirmed { background: var(--tint-green-2); border-left-color: var(--green); color: var(--on-green); } .dp-cal-chip.st-in_progress { background: var(--tint-blue-2); border-left-color: var(--blue); color: var(--on-blue); } .dp-cal-chip.st-completed { background: var(--tint-slate); border-left-color: var(--green-2); color: var(--on-slate); } .dp-cal-chip.st-cancelled { background: var(--tint-red); border-left-color: var(--red); color: var(--on-red); opacity: .6; } .dp-cal-chip.st-cancelled .c-text { text-decoration: line-through; } .dp-cal-more { font-size: 11px; font-weight: 700; color: var(--blue); text-decoration: none; padding-left: 6px; } @media (max-width: 600px) { .dp-label { width: 150px; flex-basis: 150px; } .dp-pop { width: calc(100vw - 24px); } } /* ── Kanban board (dispatch.php?view=kanban) ─────────────── */ .kb-range { gap: 8px; } .kb-range-lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin: 0; } .kb-search { position: relative; } .kb-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; } .kb-search input { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px 6px 30px; font-size: 13px; font-family: var(--font); background: var(--card); color: var(--text); width: 240px; outline: none; } .kb-search input:focus { border-color: var(--blue); } .kb-wrap { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; } .kb-col { background: var(--surface-4); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; min-height: 320px; max-height: calc(100vh - 290px); transition: box-shadow .15s, background .15s, opacity .15s; } .kb-col-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--border); border-top: 3px solid transparent; border-radius: 14px 14px 0 0; background: var(--card); position: sticky; top: 0; z-index: 1; } .kb-col.st-pending .kb-col-head { border-top-color: var(--gold); } .kb-col.st-confirmed .kb-col-head { border-top-color: var(--green); } .kb-col.st-in_progress .kb-col-head { border-top-color: var(--blue); } .kb-col.st-completed .kb-col-head { border-top-color: var(--green-2); } .kb-col.st-cancelled .kb-col-head { border-top-color: var(--red); } .kb-col-title { font-weight: 800; font-size: 13.5px; display: flex; align-items: center; gap: 7px; } .kb-col-title i { color: var(--text-muted); } .kb-col-cnt { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 700; background: var(--surface-4); border-radius: 999px; padding: 2px 9px; color: var(--text); } .kb-col-sub { font-size: 11.5px; color: var(--text-muted); font-weight: 600; margin-top: 2px; min-height: 15px; } .kb-col-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; } .kb-empty { text-align: center; font-size: 12.5px; color: var(--text-muted); padding: 28px 8px; border: 1px dashed var(--border); border-radius: 10px; } .kb-card { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 10px; padding: 10px 11px; font-size: 12.5px; cursor: pointer; transition: box-shadow .15s, transform .15s, opacity .15s; user-select: none; } .kb-card.is-draggable { cursor: grab; } .kb-card:hover { box-shadow: 0 6px 18px rgba(15,23,42,.10); transform: translateY(-1px); } .kb-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; } .kb-card.is-dragging { opacity: .35; transform: rotate(1.5deg) scale(.98); cursor: grabbing; } .kb-card.is-busy { opacity: .45; pointer-events: none; } .kb-card.st-pending { border-left-color: var(--gold); } .kb-card.st-confirmed { border-left-color: var(--green); } .kb-card.st-in_progress { border-left-color: var(--blue); } .kb-card.st-completed { border-left-color: var(--green-2); opacity: .9; } .kb-card.st-cancelled { border-left-color: var(--red); opacity: .65; } .kb-card.st-cancelled .kb-cust { text-decoration: line-through; } .kb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; } .kb-ref { font-size: 11.5px; font-weight: 700; color: var(--text-muted); } .kb-when { font-size: 11.5px; font-weight: 700; color: var(--text); white-space: nowrap; } .kb-when.danger { color: var(--red); } .kb-cust { font-weight: 700; font-size: 13.5px; color: var(--text); margin-bottom: 2px; } .kb-route { color: var(--text-muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; line-height: 1.3; } .kb-route i { font-size: 11px; } .kb-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; } .kb-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--tint-slate); border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 600; color: var(--on-slate); max-width: 100%; } .kb-chip i { font-size: 11px; opacity: .7; } .kb-chip.miss { background: var(--tint-orange); color: var(--on-gold); } .kb-card-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--border); font-size: 11.5px; color: var(--text-muted); } .kb-amt { color: var(--text); font-weight: 700; } .kb-tags { margin-left: auto; display: inline-flex; gap: 4px; } .kb-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; border-radius: 5px; padding: 2px 6px; background: var(--surface-4); color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; } .kb-tag.ok { background: var(--tint-green-2); color: var(--on-green); } .kb-tag.warn { background: var(--tint-gold); color: var(--on-gold); } .kb-tag.info { background: var(--tint-blue-2); color: var(--on-blue); } .kb-tag.danger { background: var(--tint-red); color: var(--red-hover); } /* drag feedback */ .kb-drop-hint { display: none; text-align: center; font-size: 12px; font-weight: 600; color: var(--blue); border: 2px dashed var(--blue-soft); border-radius: 10px; padding: 12px 8px; background: rgba(219,234,254,.5); margin-top: auto; } .kb-col.can-drop { box-shadow: inset 0 0 0 2px var(--blue-soft); } .kb-col.can-drop .kb-drop-hint { display: block; } .kb-col.can-drop.is-over { background: var(--tint-blue-2); box-shadow: inset 0 0 0 2px var(--blue); } .kb-col.can-drop.is-over .kb-drop-hint { border-color: var(--blue); background: var(--card); } .kb-col.no-drop { opacity: .45; } .kb-col.no-drop .kb-card { pointer-events: none; } .kb-legend { border: 1px solid var(--border); border-radius: 10px; margin-top: 12px; } .kb-legend i { width: auto; height: auto; background: none; border-radius: 0; font-size: 13px; } @media (max-width: 900px) { .kb-wrap { grid-auto-columns: minmax(240px, 280px); } .kb-col { max-height: none; } .kb-search input { width: 180px; } } /* ── Buttons ─────────────────────────────────────────────── */ .btn-primary-custom { background: var(--blue); color: #fff; border: none; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.2s; text-decoration: none; } .btn-primary-custom:hover { background: var(--blue-hover); color: #fff; text-decoration: none; } .btn-outline-custom { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 7px 16px; font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all 0.2s; text-decoration: none; } .btn-outline-custom:hover { background: var(--bg); color: var(--text); text-decoration: none; } .btn-danger-custom { background: var(--red); color: #fff; border: none; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.2s; text-decoration: none; } .btn-danger-custom:hover { background: var(--red-hover); color: #fff; text-decoration: none; } /* ── Onboarding checklist (render_onboarding_card() in functions.php) ── */ .onb { position: relative; background: linear-gradient(135deg, #0F2A5C 0%, #1D4ED8 60%, #2563EB 100%); color: #fff; border-radius: 16px; padding: 22px 24px 18px; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(29,78,216,0.22); overflow: hidden; } .onb::before { content: ''; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,0.06); pointer-events: none; } .onb.is-complete { background: linear-gradient(135deg, #064E3B 0%, #059669 60%, #10B981 100%); box-shadow: 0 10px 30px rgba(5,150,105,0.22); } .onb-head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; padding-right: 36px; } .onb-head-main { flex: 1 1 320px; min-width: 0; } .onb-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; opacity: .8; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; } .onb-title { font-size: 19px; font-weight: 800; margin: 0 0 4px; color: #fff; } .onb-sub { font-size: 13px; opacity: .85; margin: 0; max-width: 640px; line-height: 1.5; } .onb-progress { flex: 0 0 200px; padding-top: 6px; } .onb-progress-lbl { font-size: 12.5px; opacity: .9; margin-bottom: 6px; text-align: right; } .onb-progress-lbl b { font-family: var(--mono); font-size: 14px; } .onb-bar { height: 8px; border-radius: 8px; background: rgba(255,255,255,0.22); overflow: hidden; } .onb-bar span { display: block; height: 100%; border-radius: 8px; background: #fff; transition: width .4s ease; } .onb-dismiss { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 8px; border: none; background: rgba(255,255,255,0.14); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; transition: background .15s; } .onb-dismiss:hover { background: rgba(255,255,255,0.28); } .onb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 10px; } .onb-step { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 12px 14px; backdrop-filter: blur(2px); min-width: 0; } .onb-step.next { background: var(--card); color: var(--text); border-color: var(--card); box-shadow: 0 6px 18px rgba(0,0,0,0.15); } .onb-step.done { opacity: .85; } .onb-step-ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; background: rgba(255,255,255,0.16); color: #fff; } .onb-step.next .onb-step-ico { background: var(--tint-blue); color: var(--blue); } .onb-step.done .onb-step-ico { background: #10B981; color: #fff; } .onb.is-complete .onb-step.done .onb-step-ico { background: rgba(255,255,255,0.25); } .onb-step-body { flex: 1; min-width: 0; } .onb-step-title { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .onb-step-n { font-family: var(--mono); font-size: 10.5px; font-weight: 700; opacity: .7; } .onb-step.done .onb-step-title { text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.5); } .onb-next-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; background: var(--blue); color: #fff; padding: 2px 7px; border-radius: 20px; } .onb-step-desc { font-size: 12px; opacity: .8; margin-top: 2px; line-height: 1.4; } .onb-step.next .onb-step-desc { opacity: 1; color: var(--text-muted); } .onb-step-cta { flex-shrink: 0; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 7px 12px; white-space: nowrap; } .onb-step .onb-step-cta.btn-outline-custom { color: #fff; border-color: rgba(255,255,255,0.45); background: transparent; } .onb-step .onb-step-cta.btn-outline-custom:hover { background: rgba(255,255,255,0.14); } .onb-step.next .onb-step-cta.btn-outline-custom { color: var(--text); border-color: var(--border); } .onb-resume { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); margin: -4px 0 16px; } .onb-resume b { font-family: var(--mono); color: var(--text); } .onb-resume a { color: var(--blue); font-weight: 600; text-decoration: none; } @media (max-width: 600px) { .onb { padding: 18px 16px 14px; } .onb-progress { flex-basis: 100%; padding-top: 0; } .onb-progress-lbl { text-align: left; } .onb-step { flex-wrap: wrap; } .onb-step-cta { width: 100%; justify-content: center; } } /* ── Pagination (pagination_links() in functions.php) ─────── */ .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; } .pager-info { font-size: 12.5px; color: var(--text-muted); } .pager-info b { color: var(--text); font-weight: 600; font-family: var(--mono); } .pager .pagination { gap: 4px; } .pager .page-link { border: 1px solid var(--border); border-radius: 8px !important; color: var(--text); font-size: 12.5px; font-weight: 600; padding: 5px 10px; min-width: 32px; text-align: center; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; } .pager .page-link:hover { background: var(--bg); border-color: var(--border-2); } .pager .page-link:focus { box-shadow: 0 0 0 3px rgba(29,111,232,0.18); } .pager .page-item.active .page-link { background: var(--blue); border-color: var(--blue); color: #fff; } .pager .page-item.disabled .page-link { color: var(--text-faint); background: transparent; } .pager .pager-gap .page-link { border-color: transparent; background: transparent; min-width: 20px; padding-left: 2px; padding-right: 2px; } @media (max-width: 480px) { .pager { justify-content: center; } .pager-info { width: 100%; text-align: center; } } /* ── Topbar heading: breadcrumbs + title + description ────── */ .topbar-title { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 1px; line-height: 1.2; } .tb-crumbs { display: flex; align-items: center; gap: 10px; min-width: 0; } .tb-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; } .tb-crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .tb-crumbs li + li::before { content: '›'; opacity: .6; font-size: 12px; } .tb-crumbs a { color: var(--text-muted); text-decoration: none; } .tb-crumbs a:hover { color: var(--blue); } .tb-crumbs li[aria-current] { color: var(--text); font-weight: 600; } .tb-date { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; } .tb-date:not(:empty)::before { content: '·'; margin-right: 8px; opacity: .6; } .tb-title-row { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .tb-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; white-space: nowrap; line-height: 1.25; } .tb-desc { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } @media (max-width: 1199px) { .tb-desc { display: none; } } @media (max-width: 767px) { .tb-crumbs ol { display: none; } .tb-date { display: none; } .tb-title { font-size: 16px; } } /* ── Collapsible sidebar (desktop, html.sb-collapsed) ──────── */ .sidebar, .topbar, .main { transition: width .25s ease, left .25s ease, margin-left .25s ease, transform 0.3s ease; } .nav-item-link .nav-text { white-space: nowrap; overflow: hidden; } #sidebarCollapse.on i::before { content: "\f45c"; } /* bi-layout-sidebar-inset-reverse when collapsed */ @media (min-width: 992px) { html.sb-collapsed { --sidebar-w: 72px; } html.sb-collapsed .sidebar-brand { padding: 16px 0 14px; text-align: center; } html.sb-collapsed .brand-name, html.sb-collapsed .brand-sub, html.sb-collapsed .company-pill, html.sb-collapsed .nav-section-label, html.sb-collapsed .nav-text, html.sb-collapsed .sidebar-user .user-info { display: none; } html.sb-collapsed .sidebar-brand .brand-icon { margin: 0 auto; } html.sb-collapsed .nav-section-label + .nav-item-link { margin-top: 10px; } html.sb-collapsed .nav-item-link { justify-content: center; padding: 11px 0; gap: 0; font-size: 0; } /* font-size:0 hides the bare text node */ html.sb-collapsed .nav-item-link i { font-size: 19px; width: auto; } html.sb-collapsed .nav-badge { position: absolute; top: 6px; right: 14px; min-width: 8px; height: 8px; padding: 0; font-size: 0; border-radius: 50%; } html.sb-collapsed .sidebar-footer { padding: 12px 0; } html.sb-collapsed .sidebar-user { flex-direction: column; gap: 8px; justify-content: center; } html.sb-collapsed .sidebar-user > a { margin-left: 0 !important; } /* tooltip with the label on hover */ html.sb-collapsed .nav-item-link::after { content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px); background: #0F172A; color: #fff; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 1100; box-shadow: 0 4px 14px rgba(0,0,0,0.25); } html.sb-collapsed .nav-item-link:hover::after, html.sb-collapsed .nav-item-link:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); } } /* ── Form UX (markRequiredFields / validateFormInline in app.js) ── */ .form-label.required::after, label.required::after { content: " *"; color: var(--red); font-weight: 700; } .req-legend { margin-right: auto; font-size: 12px; color: var(--text-muted); align-self: center; } .req-star { color: var(--red); font-weight: 700; } .form-control.is-invalid, .form-select.is-invalid { border-color: var(--red); background-image: none; box-shadow: none; } .form-control.is-invalid:focus, .form-select.is-invalid:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); } .invalid-feedback { font-size: 12px; margin-top: 4px; color: var(--red-hover); } .modal.cfm { z-index: 1070; } /* confirm dialog stacks above an open form modal */ .modal-backdrop ~ .modal-backdrop { z-index: 1060; } /* ── Confirm dialog (confirmDialog() in app.js) ───────────── */ .cfm .modal-dialog.modal-sm { max-width: 400px; } .cfm .modal-content { border-radius: 16px; } .cfm-body { padding: 28px 24px 8px; text-align: center; } .cfm-ico { width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--tint-blue); color: var(--blue); } .cfm-danger .cfm-ico { background: var(--tint-red); color: var(--red); } .cfm-warning .cfm-ico { background: var(--tint-gold); color: var(--on-gold); } .cfm-title { font-size: 16px; font-weight: 800; color: var(--text); margin: 0 0 8px; } .cfm-item { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; font-weight: 700; background: var(--bg); color: var(--text); padding: 4px 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--border); } .cfm-danger .cfm-item { background: var(--tint-red-soft); border-color: var(--border-red); color: var(--on-red); } .cfm-msg { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin: 0; white-space: pre-line; } .cfm-input { text-align: left; margin-top: 14px; } .cfm-input .form-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; } .cfm-err { font-size: 12px; margin-top: 4px; } .cfm-foot { display: flex; gap: 8px; padding: 16px 24px 22px; } .cfm-foot > button { flex: 1; justify-content: center; } .cfm-foot .btn-outline-custom { display: inline-flex; align-items: center; } /* ── Staff Avatar ────────────────────────────────────────── */ .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), #6366F1); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; } .user-avatar.sm { width: 28px; height: 28px; font-size: 11px; } .user-avatar.lg { width: 52px; height: 52px; font-size: 18px; } /* ── Scrollbar ───────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 10px; } /* ── Empty states (see empty_state() in functions.php / emptyStateHTML() in app.js) ── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 44px 20px; gap: 6px; } .empty-state.compact { padding: 22px 12px; } .empty-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--tint-blue); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 8px; } .empty-state.compact .empty-ico { width: 42px; height: 42px; font-size: 18px; border-radius: 12px; margin-bottom: 4px; } .empty-state.ok .empty-ico { background: var(--tint-green); color: var(--green); } .empty-state.search .empty-ico { background: var(--bg); color: var(--text-muted); } .empty-state.warn .empty-ico { background: var(--tint-gold); color: var(--on-gold); } .empty-title { font-size: 15px; font-weight: 700; color: var(--text); } .empty-state.compact .empty-title { font-size: 13.5px; } .empty-hint { font-size: 13px; color: var(--text-muted); max-width: 380px; line-height: 1.5; } .empty-state.compact .empty-hint { font-size: 12px; } .empty-act { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .empty-act .btn-outline-custom, .empty-act .btn-primary-custom { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .empty-act .btn-sm { padding: 6px 12px; font-size: 12.5px; } .dash-table tr.js-empty-row td { padding: 0; } .dash-table tr.js-empty-row:hover td { background: transparent; } /* ── Skeleton loaders ────────────────────────────────────── */ @keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skel { display: inline-block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 45%, var(--skel-a) 65%); background-size: 200% 100%; animation: skel-shimmer 1.3s ease-in-out infinite; vertical-align: middle; } .skel.circle { width: 28px; height: 28px; border-radius: 50%; } .skel.pill { height: 20px; width: 72px; border-radius: 20px; } .skel.block { display: block; height: 64px; border-radius: 12px; } .skel.w-20 { width: 20%; } .skel.w-35 { width: 35%; } .skel.w-50 { width: 50%; } .skel.w-65 { width: 65%; } .skel.w-80 { width: 80%; } .skel.w-100 { width: 100%; } .skel-row td { pointer-events: none; } .skel-row:hover td { background: transparent !important; } .skel-stack { display: flex; flex-direction: column; gap: 8px; } .skel-line { display: flex; align-items: center; gap: 10px; } .skel-list { padding: 8px 0; } .skel-list .skel-line { padding: 10px 16px; } .skel-list .skel-line > div { flex: 1; display: flex; flex-direction: column; gap: 7px; } .skel-detail { padding: 4px 0; } .skel-detail .skel-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 18px 0; } .skel-detail .skel-kv > div { display: flex; flex-direction: column; gap: 7px; } .skel-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; } .skel-cols > div { background: var(--surface-4); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 240px; } .skel-cols .skel.block { height: 84px; background: linear-gradient(90deg, var(--skel-c) 25%, var(--skel-b) 45%, var(--skel-c) 65%); background-size: 200% 100%; } .skel-board { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; } .skel-board .skel-line { gap: 14px; } .skel-board .skel-line .skel.block { height: 44px; flex: 1; } [aria-busy="true"] { cursor: progress; } @media (prefers-reduced-motion: reduce) { .skel { animation: none; } } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 991px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .topbar, .main { left: 0; margin-left: 0; } } /* ── Mobile: list tables become stacked cards ───────────── app.js cardifyTables() adds .is-cardable to tables with ≥4 columns (opt out with .no-cards) and stamps each from the header, so no markup changes are needed per page. */ @media (max-width: 767px) { .filter-bar form { flex-wrap: wrap; width: 100%; } .filter-bar input[type="text"], .filter-bar input[type="date"], .filter-bar select { flex: 1 1 150px; min-width: 0; } .card-box { padding: 16px; } .card-box > div[style*="overflow-x"] { overflow-x: visible !important; } .dash-table.is-cardable { border-collapse: separate; border-spacing: 0; } .dash-table.is-cardable thead { display: none; } .dash-table.is-cardable tbody, .dash-table.is-cardable tr, .dash-table.is-cardable td { display: block; width: 100%; } .dash-table.is-cardable tbody tr { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); } .dash-table.is-cardable tbody tr:last-child { margin-bottom: 0; } .dash-table.is-cardable tbody tr:hover td { background: transparent; } .dash-table.is-cardable td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13px; text-align: right; } .dash-table.is-cardable td:last-child { border-bottom: none; } .dash-table.is-cardable td::before { content: attr(data-label); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); text-align: left; flex: 0 0 auto; max-width: 42%; } .dash-table.is-cardable td:first-child { font-size: 14px; } .dash-table.is-cardable td > div[style*="display:flex"] { justify-content: flex-end; } .dash-table.is-cardable td[data-label=""]::before, .dash-table.is-cardable td:not([data-label])::before { content: none; } .dash-table.is-cardable td[data-label=""], .dash-table.is-cardable td:not([data-label]) { justify-content: flex-end; } .dash-table.is-cardable td[colspan] { display: block; text-align: center; } .dash-table.is-cardable td[colspan]::before { content: none; } .dash-table.is-cardable tr.js-empty-row, .dash-table.is-cardable tr.skel-row { border: none; box-shadow: none; padding: 0; background: transparent; } .dash-table.is-cardable tr.skel-row td { justify-content: flex-start; } .dash-table.is-cardable tr.row-deleted td:first-child { text-decoration: none; } .dash-table.is-cardable tr.row-deleted td:first-child > * { text-decoration: line-through; } .dash-table.is-cardable .btn-action { width: 34px; height: 34px; } } /* ── Login Page ──────────────────────────────────────────── */ .login-page { min-height: 100vh; background: var(--navy); display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { background: var(--card); border-radius: 20px; padding: 40px; width: 100%; max-width: 420px; box-shadow: 0 24px 64px rgba(0,0,0,0.3); } .login-logo { text-align: center; margin-bottom: 28px; } .login-logo .icon { width: 60px; height: 60px; background: var(--blue); border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; margin-bottom: 14px; } .login-logo h1 { font-size: 20px; font-weight: 800; color: var(--text); } .login-logo p { font-size: 13px; color: var(--text-muted); } .login-tabs { display: flex; background: var(--bg); border-radius: 10px; padding: 4px; margin-bottom: 24px; } .login-tab { flex: 1; padding: 8px; text-align: center; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-muted); transition: all 0.2s; text-decoration: none; } .login-tab.active { background: var(--card); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.1); } .login-error { background: var(--tint-red); color: var(--on-red); border: 1px solid var(--border-red); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } /* ── In-content vertical nav (settings.php sidebar-style links inside a card) ── */ .main .nav-item-link { color: var(--text-muted); } .main .nav-item-link:hover { color: var(--text); background: var(--bg); } .main .nav-item-link.active { color: var(--blue); background: var(--tint-blue); } .main .nav-item-link.active::before { display: none; } /* ── Recurring contracts (contracts.php) ───────────────────── */ .rc-cell { display: block; text-decoration: none; color: inherit; line-height: 1.35; } .rc-cell:hover .rc-badge { background: var(--tint-blue-2); } .rc-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; background: var(--tint-blue); color: var(--on-blue); white-space: nowrap; } .rc-badge.paused { background: var(--tint-slate); color: var(--text-muted); } .rc-sub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 3px; } .rc-done { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-muted); margin-top: 3px; } .rc-setup { font-size: 12px; font-weight: 600; color: var(--blue); text-decoration: none; white-space: nowrap; } .rc-setup:hover { text-decoration: underline; } .rc-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .rc-links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; } .rc-links a { color: var(--blue); text-decoration: none; font-weight: 600; } .rc-links a:hover { text-decoration: underline; } .rc-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border); } .rc-item:first-child { border-top: 0; padding-top: 2px; } .rc-item.is-off .rc-item-main, .rc-item.is-off .rc-item-time { opacity: .55; } .rc-item-time { min-width: 74px; text-align: right; } .rc-item-time .t { font-size: 13px; font-weight: 700; } .rc-item-time .te { font-size: 11px; color: var(--text-muted); } .rc-item-main { flex: 1; min-width: 0; } .rc-item-title { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rc-days { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; background: var(--tint-purple); color: var(--on-purple); padding: 1px 7px; border-radius: 10px; } .rc-off-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; background: var(--tint-gold); color: var(--on-gold); padding: 1px 7px; border-radius: 10px; } .rc-item-route { font-size: 12.5px; color: var(--text); margin-top: 2px; } .rc-item-route .bi { color: var(--text-faint); font-size: 11px; } .rc-item-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; } .rc-item-meta em { color: var(--text-muted); } .rc-item-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; margin-top: 4px; } .rc-item-stats .ok { color: var(--on-green); font-weight: 600; } .rc-item-stats .muted { color: var(--text-muted); } .rc-item-actions { display: flex; gap: 4px; flex-shrink: 0; } .rc-help { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .rc-help .bi { color: var(--gold); font-size: 15px; } .rc-help a { color: var(--blue); font-weight: 600; text-decoration: none; } /* toggle switch (label > input + .rc-switch-ui + text) */ .rc-switch { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13px; margin: 0; } .rc-switch input { position: absolute; opacity: 0; pointer-events: none; } .rc-switch-ui { flex-shrink: 0; width: 36px; height: 20px; border-radius: 20px; background: var(--border-2); position: relative; transition: background .15s; margin-top: 1px; } .rc-switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); } .rc-switch input:checked + .rc-switch-ui { background: var(--green); } .rc-switch input:checked + .rc-switch-ui::after { transform: translateX(16px); } .rc-switch input:focus-visible + .rc-switch-ui { outline: 2px solid var(--blue); outline-offset: 2px; } /* weekday pills (label > hidden checkbox + span) */ .dow-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .dow-pill { margin: 0; cursor: pointer; } .dow-pill input { position: absolute; opacity: 0; pointer-events: none; } .dow-pill span { display: inline-block; min-width: 44px; text-align: center; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); font-size: 12.5px; font-weight: 600; color: var(--text-muted); user-select: none; transition: all .12s; } .dow-pill:hover span { border-color: var(--blue-soft); color: var(--text); } .dow-pill input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; } .dow-pill input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; } .dow-presets { font-size: 11.5px; color: var(--text-muted); margin-left: 6px; } .dow-presets a { color: var(--blue); text-decoration: none; font-weight: 600; } /* "from contract" marker on booking rows / drawer */ .bk-recurring { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--on-purple); background: var(--tint-purple); padding: 1px 6px; border-radius: 10px; vertical-align: middle; text-decoration: none; white-space: nowrap; } .bk-recurring:hover { text-decoration: underline; color: var(--on-purple); } /* ── Invoices / payments / expenses (Phase 1 billing) ─────── */ .inv-amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; } .inv-amounts > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; } .inv-amounts .k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); } .inv-amounts .v { font-size: 15px; font-weight: 800; margin-top: 2px; } .inv-amounts .v small { font-size: 11px; font-weight: 600; } .inv-share { display: flex; gap: 6px; align-items: center; } .inv-share .form-control { font-size: 12px; font-family: var(--mono); } .inv-share .btn-outline-custom { padding: 8px 10px; } .inv-share .wa { color: #128C7E; } .inv-lines { width: 100%; border-collapse: collapse; font-size: 13px; } .inv-lines td { padding: 7px 4px; border-bottom: 1px solid var(--border); vertical-align: top; } .inv-lines td.r { text-align: right; white-space: nowrap; } .inv-lines .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .inv-lines .sub a { color: var(--blue); text-decoration: none; } .inv-lines tr.tot td { border-bottom: 0; padding: 4px; color: var(--text-muted); font-size: 12.5px; } .inv-lines tr.tot td:first-child { text-align: right; } .inv-lines tr.grand td { color: var(--text); font-weight: 800; font-size: 14px; border-top: 2px solid var(--border-2); padding-top: 8px; } .inv-pay { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; } .inv-pay:first-of-type { border-top: 0; } .inv-pay > div:first-child { flex: 1; min-width: 0; } .inv-pay .sub { font-size: 11.5px; color: var(--text-muted); } .inv-pay a { text-decoration: none; color: var(--blue); } /* editor */ .inv-picker { border: 1px dashed var(--border-2); border-radius: 10px; background: var(--surface-3); padding: 10px 12px; } .inv-picker-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; } .inv-pick-list { max-height: 220px; overflow: auto; border-radius: 8px; background: var(--card); border: 1px solid var(--border); } .inv-pick { display: grid; grid-template-columns: 96px 110px 1fr 100px; gap: 10px; align-items: center; padding: 7px 10px; margin: 0; border-bottom: 1px solid var(--border); font-size: 12.5px; cursor: pointer; } .inv-pick:last-child { border-bottom: 0; } .inv-pick:hover { background: var(--surface-2); } .inv-pick input { grid-column: 1; justify-self: start; margin: 0 4px 0 0; } .inv-pick .d { grid-column: 1; margin-left: 22px; font-size: 11.5px; color: var(--text-muted); } .inv-pick .r { font-size: 12px; color: var(--on-blue); font-weight: 600; } .inv-pick .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inv-pick .t small { display: block; color: var(--text-muted); font-size: 11px; } .inv-pick .a { text-align: right; font-weight: 700; } .inv-pick input:checked ~ .r { color: var(--on-green); } .inv-picker-foot { font-size: 12px; color: var(--text-muted); margin-top: 6px; } .inv-edit { width: 100%; border-collapse: collapse; } .inv-edit th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); padding: 4px 6px; text-align: left; } .inv-edit td { padding: 4px 6px; vertical-align: middle; } .inv-edit td.r { text-align: right; font-weight: 700; white-space: nowrap; } .inv-edit tr.trip td:first-child { position: relative; } .inv-line-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; background: var(--tint-blue); color: var(--on-blue); padding: 1px 6px; border-radius: 8px; margin-top: 3px; } .inv-line-tag.charge { background: var(--tint-gold); color: var(--on-gold); } .inv-quick { font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 20px; border: 1px solid var(--border); background: var(--card); color: var(--text-muted); cursor: pointer; } .inv-quick:hover { border-color: var(--gold); color: var(--on-gold); background: var(--tint-gold-soft); } .inv-totals { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 13px; } .inv-totals > div { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border); } .inv-totals > div:last-child { border-bottom: 0; } .inv-totals .grand { font-weight: 800; font-size: 16px; padding-top: 8px; } /* ageing bar (customers) */ .age-bar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: var(--border); width: 120px; } .age-bar span { display: block; height: 100%; } .age-bar .c0 { background: var(--green); } .age-bar .c1 { background: var(--gold); } .age-bar .c2 { background: #F97316; } .age-bar .c3 { background: var(--red); } .age-bar .c4 { background: #7F1D1D; } .exp-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; } .exp-cat i { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-slate); color: var(--on-slate); font-size: 13px; } .doc-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; } .doc-item:first-child { border-top: 0; } .doc-item .ico { width: 32px; height: 32px; border-radius: 8px; background: var(--tint-blue); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .doc-item .meta { font-size: 11.5px; color: var(--text-muted); } /* ── Phase 2: trip costing, suppliers, job cards ── */ .bk-supplier { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; background: var(--tint-purple); color: var(--on-purple); padding: 2px 8px; border-radius: 10px; font-family: var(--mono); } .bk-share { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 14px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-2); } .bk-share-btn { font: inherit; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 20px; border: 1px solid var(--border); background: var(--card); color: var(--text); text-decoration: none; cursor: pointer; } .bk-share-btn:hover { border-color: var(--blue); color: var(--blue); } .bk-share-btn.wa { border-color: #25D366; color: #128C7E; } .bk-share-btn.wa:hover { background: #25D366; color: #fff; border-color: #25D366; } .bk-share-btn.wa.muted { opacity: .6; } .bk-share-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; } .bk-share-meta { font-size: 11px; color: var(--text-muted); flex-basis: 100%; } [data-theme="dark"] .bk-share-btn.wa { color: #4ADE80; } .bk-cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 640px) { .bk-cost-grid { grid-template-columns: 1fr; } } .bk-cost-col .h { font-size: 11.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; } .bk-cost-col .h .text-muted { font-weight: 500; font-size: 11px; } .bk-cost-line { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 12.5px; } .bk-cost-line .d { flex: 1; min-width: 0; } .bk-cost-line .d .cat { display: block; font-size: 10.5px; color: var(--text-muted); } .bk-cost-line .a { font-weight: 700; white-space: nowrap; } .bk-cost-line.total { border-top: 2px solid var(--border); font-weight: 700; } .bk-cost-line .btn-action { width: 24px; height: 24px; font-size: 12px; } .bk-cost-add { font: inherit; font-size: 12px; font-weight: 600; color: var(--blue); background: none; border: 1px dashed var(--border-blue, var(--border)); border-radius: 8px; padding: 6px 10px; margin-top: 8px; width: 100%; cursor: pointer; text-align: left; } .bk-cost-add:hover { background: var(--tint-blue); } .bk-profit-bar { height: 6px; border-radius: 4px; background: var(--tint-green); overflow: hidden; margin-top: 12px; } .bk-profit-bar .fill { height: 100%; } .bk-opby { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; } .bk-opby label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--card); color: var(--text-muted); margin: 0; } .bk-opby label.active { border-color: var(--blue); color: var(--blue); background: var(--tint-blue); } .bk-opby input { position: absolute; opacity: 0; pointer-events: none; } .bk-range { display: inline-flex; align-items: center; gap: 4px; } .bk-range span { color: var(--text-muted); } .bk-colmenu { padding: 10px 14px; min-width: 200px; font-size: 13px; } .bk-colmenu label { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; margin: 0; } #bookingsTable[data-hide~="ref"] [data-col="ref"], #bookingsTable[data-hide~="customer"] [data-col="customer"], #bookingsTable[data-hide~="route"] [data-col="route"], #bookingsTable[data-hide~="type"] [data-col="type"], #bookingsTable[data-hide~="source"] [data-col="source"], #bookingsTable[data-hide~="pax"] [data-col="pax"], #bookingsTable[data-hide~="vehicle"] [data-col="vehicle"], #bookingsTable[data-hide~="driver"] [data-col="driver"], #bookingsTable[data-hide~="supplier"] [data-col="supplier"], #bookingsTable[data-hide~="datetime"] [data-col="datetime"], #bookingsTable[data-hide~="amount"] [data-col="amount"], #bookingsTable[data-hide~="payment"] [data-col="payment"], #bookingsTable[data-hide~="profit"] [data-col="profit"], #bookingsTable[data-hide~="created"] [data-col="created"], #bookingsTable[data-hide~="status"] [data-col="status"] { display: none; } /* suppliers page */ .sup-bal { font-family: var(--mono); font-weight: 700; } .sup-bal.owe { color: var(--red); } .sup-bal.ok { color: var(--green); } .sup-bill { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); font-size: 12.5px; } .sup-bill:first-child { border-top: 0; } .sup-bill .m { grid-column: 1 / -1; font-size: 11px; color: var(--text-muted); } /* ── Phase 3: drivers & fleet depth (documents, attendance, payroll, fuel, incidents, inspections) ── */ .hr-form-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin: 14px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .hr-form-title:first-child { margin-top: 0; } /* attendance grid */ .att-grid { border-collapse: separate; border-spacing: 2px; font-size: 12px; width: 100%; } .att-grid th { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-align: center; padding: 2px 0 4px; white-space: nowrap; min-width: 26px; } .att-grid th small { display: block; font-size: 9px; font-weight: 500; text-transform: uppercase; } .att-grid th.is-today { color: var(--blue); } .att-grid th.is-wkend { color: var(--text-faint); } .att-grid td { padding: 0; text-align: center; } .att-grid .att-name { text-align: left; white-space: nowrap; padding: 4px 8px 4px 2px; min-width: 140px; position: sticky; left: 0; background: var(--card); z-index: 1; } .att-grid th.att-name { top: auto; } .att-cell { width: 100%; min-width: 26px; height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; padding: 0; position: relative; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .att-cell:hover { border-color: var(--blue); } .att-cell.is-today { box-shadow: inset 0 0 0 2px var(--blue); } .att-cell.is-future { opacity: .45; } .att-cell.is-weekoff { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 3px, var(--border) 3px, var(--border) 4px); } .att-cell.is-ok { background: var(--tint-green-2); color: var(--on-green); border-color: transparent; } .att-cell.is-warn { background: var(--tint-gold); color: var(--on-gold); border-color: transparent; } .att-cell.is-danger { background: var(--tint-red); color: var(--on-red); border-color: transparent; } .att-cell.is-info { background: var(--tint-blue-2); color: var(--on-blue); border-color: transparent; } .att-cell.is-muted { background: var(--tint-slate); color: var(--on-slate); border-color: transparent; } .att-cell .ot, i.ot { position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } .att-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--text-muted); margin-bottom: 10px; align-items: center; } .att-legend span { display: inline-flex; align-items: center; gap: 4px; } .att-legend i.att-cell { font-style: normal; cursor: default; } .att-sum { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; } .att-sum b { font-family: var(--mono); margin-left: 3px; } .att-sum b.ok { color: var(--green); } .att-sum b.danger { color: var(--red); } .att-sum b.info { color: var(--blue); } .att-sum b.warn { color: var(--gold); } .att-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 6px; font-size: 10.5px; font-weight: 700; } .att-tag.ok { background: var(--tint-green-2); color: var(--on-green); } .att-tag.warn { background: var(--tint-gold); color: var(--on-gold); } .att-tag.danger { background: var(--tint-red); color: var(--on-red); } .att-tag.info { background: var(--tint-blue-2); color: var(--on-blue); } .att-tag.muted { background: var(--tint-slate); color: var(--on-slate); } .att-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .att-opt { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; margin: 0; background: var(--card); } .att-opt input { accent-color: var(--blue); margin: 0; } .att-opt:has(input:checked) { border-color: var(--blue); background: var(--tint-blue); color: var(--blue); } /* payslip modal */ .slip-kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 13px; } .slip-kv:first-of-type { border-top: 0; } .slip-kv small { color: var(--text-muted); font-size: 11px; display: block; } .slip-kv.total { border-top: 2px solid var(--border); font-weight: 700; } .slip-kv.net { background: var(--tint-green-2); color: var(--on-green); font-weight: 800; border-radius: 8px; padding: 8px 10px; margin-top: 6px; border: 0; font-size: 14px; } /* inspection checklist */ .insp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; } @media (max-width: 640px) { .insp-grid { grid-template-columns: 1fr; } } .insp-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; } .insp-opts { display: inline-flex; gap: 6px; } .insp-opts label { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; margin: 0; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border); } .insp-opts label:has(input:checked) { background: var(--tint-blue); color: var(--blue); border-color: var(--blue); } .insp-opts label:has(input[value="issue"]:checked) { background: var(--tint-red); color: var(--on-red); border-color: var(--red); } .insp-opts input { width: 0; height: 0; opacity: 0; position: absolute; }