/* ---------- theme tokens ---------- Light is the default. switches every token below; index.html sets the attribute from localStorage before first paint and js/core/theme.js owns the toggle. Add colours here, not in rules. */ :root { color-scheme: light; --bg: #eef1f5; --panel: #ffffff; --panel-2: #f3f5f9; --surface-0: #e4e8ee; --surface-1: #f7f9fb; --border: #d5dbe4; --border-strong: #aeb8c6; --text: #141a23; --text-secondary: rgba(20, 26, 35, 0.68); --muted: #5b6676; --accent: #2b6de0; --accent-dim: rgba(43, 109, 224, 0.10); --green: #1e9a4c; --green-dim: rgba(30, 154, 76, 0.12); --amber: #b27612; --amber-dim: rgba(178, 118, 18, 0.12); --red: #d63b35; --red-dim: rgba(214, 59, 53, 0.10); --purple: #6d4fd1; --purple-dim: rgba(109, 79, 209, 0.10); --green-border: rgba(30, 154, 76, 0.35); --amber-border: rgba(178, 118, 18, 0.35); --accent-border: rgba(43, 109, 224, 0.35); --red-border: rgba(214, 59, 53, 0.35); --on-accent: #ffffff; --on-amber: #ffffff; --wash: rgba(20, 26, 35, 0.04); --wash-strong: rgba(20, 26, 35, 0.07); --row-alt: rgba(20, 26, 35, 0.02); --row-hover: rgba(20, 26, 35, 0.045); --divider: rgba(20, 26, 35, 0.08); --chart-grid: rgba(20, 26, 35, 0.08); --shadow-sm: 0 1px 2px rgba(20, 26, 35, 0.05), 0 4px 12px rgba(20, 26, 35, 0.06); --shadow-md: 0 10px 28px rgba(20, 26, 35, 0.10); --shadow-lg: 0 24px 60px rgba(20, 26, 35, 0.18); --scrim: rgba(20, 26, 35, 0.45); --autofill-bg: #ffffff; --focus-ring: rgba(43, 109, 224, 0.22); --login-side: #e3ebf8; --login-side-2: #d3dff3; --login-belt: #b9c7dd; --login-box: #f4e7d3; --login-box-edge: #cfae82; --login-tape: #b58a5a; --radius: 10px; /* ---- fluid scale (drives the responsive system at the end of this file) ---- Type and spacing interpolate with the viewport instead of stepping at breakpoints, so there is no size that looks broken between two widths. clamp(min, preferred, max): min holds on a 320px phone, max on desktop. */ --fs-xs: clamp(11px, 0.66rem + 0.13vw, 12.5px); --fs-sm: clamp(12px, 0.72rem + 0.17vw, 13.5px); --fs-base: clamp(13px, 0.78rem + 0.22vw, 15px); --fs-md: clamp(14.5px, 0.86rem + 0.30vw, 17px); --fs-lg: clamp(16.5px, 0.95rem + 0.55vw, 21px); --fs-xl: clamp(19px, 1.05rem + 0.95vw, 27px); --fs-2xl: clamp(23px, 1.20rem + 1.60vw, 36px); --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: clamp(16px, 12px + 1.2vw, 20px); --sp-6: clamp(18px, 12px + 2.0vw, 28px); /* page gutter: 14px on a phone, 36px on a wide desktop */ --gutter: clamp(14px, 3.2vw, 36px); --page-max: 1280px; --tap: 44px; /* minimum comfortable touch target */ } :root[data-theme="dark"] { color-scheme: dark; --bg: #0f1115; --panel: #171a21; --panel-2: #1e222b; --surface-0: #0d1117; --surface-1: #131720; --border: #2a2f3a; --border-strong: #3a4453; --text: #e6e8ec; --text-secondary: rgba(230, 232, 236, 0.65); --muted: #8b93a1; --accent: #4c8dff; --accent-dim: rgba(76, 141, 255, 0.12); --green: #46c46a; --green-dim: rgba(70, 196, 106, 0.12); --amber: #f0b347; --amber-dim: rgba(240, 179, 71, 0.12); --red: #f0625d; --red-dim: rgba(240, 98, 93, 0.12); --purple: #a78bfa; --purple-dim: rgba(167, 139, 250, 0.12); --green-border: #2c5e3a; --amber-border: #5e4f2c; --accent-border: #2c3f5e; --red-border: #5e2c2c; --on-accent: #ffffff; --on-amber: #000000; --wash: rgba(255, 255, 255, 0.04); --wash-strong: rgba(255, 255, 255, 0.07); --row-alt: rgba(255, 255, 255, 0.015); --row-hover: rgba(255, 255, 255, 0.035); --divider: rgba(255, 255, 255, 0.06); --chart-grid: rgba(255, 255, 255, 0.05); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.32); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.65); --scrim: rgba(0, 0, 0, 0.72); --autofill-bg: #14161a; --focus-ring: rgba(76, 141, 255, 0.25); --login-side: #121a2b; --login-side-2: #0d1320; --login-belt: #2a3446; --login-box: #e8d2b0; --login-box-edge: #b48a5c; --login-tape: #8a6a44; } * { box-sizing: border-box; } /* Custom Scrollbars */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } body { margin: 0; font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; letter-spacing: -0.006em; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; } h1, h2, h3, h4 { font-weight: 600; margin: 0; letter-spacing: -0.01em; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--muted); } /* ---------- login ---------- */ .login-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--bg); position: relative; } .login-theme { position: absolute; top: 18px; right: 20px; z-index: 2; } /* Left: the product, drawn as the thing it watches - cartons on a belt. */ .login-side { position: relative; overflow: hidden; padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; background: linear-gradient(160deg, var(--login-side) 0%, var(--login-side-2) 100%); border-right: 1px solid var(--border); } .login-side .brand { padding: 0; font-size: 18px; } .login-side .brand .brand-logo { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--panel); box-shadow: var(--shadow-sm); font-size: 18px; } .login-hero h2 { font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; max-width: 14ch; color: var(--text); } .login-hero p { margin: 16px 0 0; max-width: 44ch; font-size: 15px; color: var(--text-secondary); } .login-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .login-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text-secondary); } .login-points li b { color: var(--text); font-weight: 600; } .login-points .pt-icon { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--panel); box-shadow: var(--shadow-sm); font-size: 15px; } /* CSS-drawn conveyor: five cartons, the third one inside a detection frame. */ .belt-scene { position: relative; height: 150px; margin: 8px 0 4px; } .belt-scene .belt { position: absolute; left: -64px; right: -64px; bottom: 26px; height: 14px; background: var(--login-belt); border-radius: 7px; } .belt-scene .belt::after { content: ""; position: absolute; inset: 4px 0; background: repeating-linear-gradient(90deg, transparent 0 22px, var(--login-side) 22px 26px); opacity: .7; border-radius: 7px; } .belt-scene .roller { position: absolute; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--login-side-2); border: 3px solid var(--login-belt); } .belt-scene .roller.r1 { left: 6%; } .belt-scene .roller.r2 { left: 36%; } .belt-scene .roller.r3 { left: 66%; } .belt-scene .roller.r4 { left: 92%; } .belt-scene .carton { position: absolute; bottom: 40px; width: 66px; height: 54px; background: var(--login-box); border: 2px solid var(--login-box-edge); border-radius: 6px; } .belt-scene .carton::before { content: ""; position: absolute; top: -2px; bottom: -2px; left: 50%; width: 10px; margin-left: -5px; background: var(--login-tape); opacity: .55; } .belt-scene .carton.c1 { left: 0; } .belt-scene .carton.c2 { left: 18%; height: 46px; } .belt-scene .carton.c3 { left: 40%; width: 74px; height: 60px; } .belt-scene .carton.c4 { left: 64%; height: 50px; } .belt-scene .carton.c5 { left: 84%; width: 58px; height: 44px; } .belt-scene .frame { position: absolute; left: calc(40% - 10px); bottom: 30px; width: 94px; height: 80px; border: 2px solid var(--accent); border-radius: 8px; box-shadow: 0 0 0 4px var(--accent-dim); } .belt-scene .frame i { position: absolute; width: 10px; height: 10px; border: 2px solid var(--accent); border-radius: 2px; background: var(--panel); } .belt-scene .frame i:nth-child(1) { left: -6px; top: -6px; } .belt-scene .frame i:nth-child(2) { right: -6px; top: -6px; } .belt-scene .frame i:nth-child(3) { left: -6px; bottom: -6px; } .belt-scene .frame i:nth-child(4) { right: -6px; bottom: -6px; } .belt-scene .tag { position: absolute; left: calc(40% - 10px); bottom: 118px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 6px; white-space: nowrap; box-shadow: var(--shadow-sm); } .belt-scene .tag::after { content: ""; position: absolute; left: 12px; bottom: -5px; border: 5px solid transparent; border-top-color: var(--accent); border-bottom: 0; } /* Right: the form. */ .login-main { display: grid; place-items: center; padding: 48px 24px; } .login-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 34px 32px 30px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-lg); } .login-card h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .login-card .sub { color: var(--muted); margin: -12px 0 0; font-size: 14px; } .login-card .field { gap: 6px; } .login-card .field > span { font-size: 13px; font-weight: 500; color: var(--text-secondary); } .login-input { position: relative; display: flex; align-items: center; } .login-input .in-icon { position: absolute; left: 12px; width: 18px; text-align: center; color: var(--muted); font-size: 14px; pointer-events: none; } .login-input input { width: 100%; padding: 12px 14px 12px 40px; font-size: 15px; background: var(--surface-1); } .login-input input.has-trailing { padding-right: 76px; } .login-input .peek { position: absolute; right: 8px; background: transparent; border: 1px solid transparent; color: var(--muted); font-size: 12px; font-weight: 600; padding: 5px 8px; border-radius: 6px; cursor: pointer; } .login-input .peek:hover { color: var(--text); background: var(--wash); } .login-input .peek:focus-visible { outline: none; border-color: var(--accent); } .login-error { display: none; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--red-dim); border: 1px solid var(--red-border); color: var(--red); font-size: 13px; line-height: 1.45; } .login-error.show { display: flex; } .login-card .btn.primary { width: 100%; padding: 12px 16px; font-size: 15px; font-weight: 600; border-radius: 10px; } .login-card .btn.primary[disabled] { opacity: .75; cursor: progress; } .login-foot { margin: 0; text-align: center; font-size: 12px; color: var(--muted); } /* Theme switch (login page and sidebar footer). */ .theme-toggle { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: var(--shadow-sm); transition: background .15s ease, color .15s ease, border-color .15s ease; } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); } .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); } .theme-toggle-icon { font-size: 15px; line-height: 1; } .theme-toggle.compact { padding: 0; width: 34px; justify-content: center; gap: 0; } @media (max-width: 900px) { .login-wrap { grid-template-columns: 1fr; } .login-side { padding: 72px 24px 32px; border-right: none; border-bottom: 1px solid var(--border); gap: 28px; } .login-hero h2 { max-width: none; } .login-points { display: none; } .belt-scene { height: 120px; margin-top: 48px; } .login-main { padding: 32px 16px 48px; } } @media (prefers-reduced-motion: no-preference) { .login-card { animation: login-in .32s cubic-bezier(.22,1,.36,1); } @keyframes login-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } } /* ---------- shell ---------- */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 240px; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 20px 14px; gap: 6px; position: sticky; top: 0; height: 100vh; } .brand { font-size: 17px; font-weight: 700; padding: 4px 10px 18px; display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; } .brand span { color: var(--accent); font-weight: 800; } .brand .brand-logo { font-size: 20px; line-height: 1; } .sidebar nav { display: flex; flex-direction: column; gap: 5px; } .nav-item { text-align: left; background: transparent; border: none; border-left: 3px solid transparent; color: var(--muted); padding: 10px 14px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; width: 100%; display: flex; align-items: center; gap: 10px; transition: all 0.15s ease; } .nav-item:hover { background: var(--panel-2); color: var(--text); transform: translateX(2px); } .nav-item.active { background: var(--accent-dim); color: var(--accent); border-left-color: var(--accent); font-weight: 600; box-shadow: none; } .nav-item .nav-icon { font-size: 16px; line-height: 1; display: inline-block; opacity: 0.85; } .nav-item.active .nav-icon { opacity: 1; } .sidebar-foot { margin-top: auto; border-top: 1px solid var(--border); padding-top: 14px; } .sidebar-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .sidebar-actions .btn { flex: 1; } .user-line { padding: 8px 10px; border-radius: 8px; color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; border: 1px solid transparent; } .user-line:hover { background: var(--panel-2); border-color: var(--border); } .user-line.active { background: var(--accent-dim); border-color: var(--accent); } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent); font-weight: 700; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; text-transform: uppercase; } .user-details { min-width: 0; flex: 1; overflow: hidden; } .user-details b { color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .role-pill { display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; color: var(--muted); } .content { flex: 1; padding: 28px 36px; overflow: auto; } .page { display: flex; flex-direction: column; gap: 20px; max-width: 1280px; } .page > .page-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .page > .page-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } /* ---------- cards ---------- */ .cards, .dashboard-stats-grid, .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; } .stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; position: relative; overflow: hidden; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .stat-card:hover { border-color: var(--border-strong); transform: translateY(-1px); } .stat-card.blue { background: linear-gradient(180deg, var(--panel) 0%, rgba(76, 141, 255, 0.05) 100%); border-left: 3px solid var(--accent); } .stat-card.green { background: linear-gradient(180deg, var(--panel) 0%, rgba(70, 196, 106, 0.05) 100%); border-left: 3px solid var(--green); } .stat-card.amber { background: linear-gradient(180deg, var(--panel) 0%, rgba(240, 179, 71, 0.05) 100%); border-left: 3px solid var(--amber); } .stat-card.red { background: linear-gradient(180deg, var(--panel) 0%, rgba(240, 98, 93, 0.05) 100%); border-left: 3px solid var(--red); } .stat-card.purple { background: linear-gradient(180deg, var(--panel) 0%, rgba(167, 139, 250, 0.05) 100%); border-left: 3px solid var(--purple); } .stat-card .label { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 6px; } .stat-card .value { font-size: 26px; font-weight: 700; margin-top: 6px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .section { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; } .section > h3 { padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 16px; font-size: 15px; font-weight: 600; color: var(--text); } .section > .muted { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; } /* ---------- dashboard visualisations ---------- */ .viz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; } .viz-block { min-width: 0; } .viz-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .viz-title h4 { margin: 0; font-size: 13px; font-weight: 600; } .viz-title span { color: var(--muted); font-size: 12px; text-align: right; } .viz-title.compact { margin: 12px 0 8px; } .viz-empty { min-height: 126px; display: grid; place-items: center; } .bar-chart, .health-chart { display: flex; flex-direction: column; gap: 9px; } .bar-row { display: grid; grid-template-columns: minmax(88px, 1fr) minmax(120px, 2fr) 58px; gap: 10px; align-items: center; } .bar-label, .health-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13px; } .bar-track, .health-track { height: 11px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .bar-fill, .health-fill { height: 100%; background: var(--accent); border-radius: inherit; } .bar-fill.running, .health-fill.running { background: var(--green); } .bar-fill.paused, .health-fill.paused { background: var(--amber); } .bar-fill.error, .bar-fill.no-model, .health-fill.error, .health-fill.no-model { background: var(--red); } .bar-fill.stopped, .health-fill.stopped { background: var(--muted); } .bar-value { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; } .donut-layout { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .donut { width: 190px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--border); flex-shrink: 0; } .donut-hole { width: 110px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--border); } .donut-hole b { font-size: 28px; line-height: 1; } .donut-hole span { color: var(--muted); font-size: 11px; margin-top: -12px; } .viz-legend { display: flex; flex-wrap: wrap; gap: 7px 12px; color: var(--muted); font-size: 12px; } .viz-legend span { display: inline-flex; align-items: center; gap: 6px; } .viz-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .brand-legend-card { display: flex; flex-direction: column; gap: 9px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; flex: 1; min-width: 220px; max-width: 800px; max-height: 220px; overflow-y: auto; } .brand-legend-row { display: flex; align-items: center; gap: 10px; font-size: 13px; } .brand-legend-row .swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .brand-legend-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .brand-legend-row .count { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 16px; } .health-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(160px, 2fr); gap: 10px; align-items: center; } .health-main { min-width: 0; } .health-meta { display: flex; gap: 10px; margin-top: 4px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; } .health-meta span { white-space: nowrap; } .source-mix, .recon-breakdown { display: flex; flex-direction: column; gap: 10px; } .source-stack { display: flex; width: 100%; min-height: 18px; overflow: hidden; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); } .source-segment { min-width: 4px; } .source-rtsp { background: var(--accent); } .source-video, .breakdown-completed { background: var(--green); } .source-webcam, .breakdown-unidentified { background: var(--amber); } .breakdown-missing { background: var(--red); } /* ---------- tables ---------- */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid var(--border); white-space: nowrap; } tbody tr:nth-child(even) td { background: var(--row-alt); } tbody tr:hover td { background: var(--row-hover); } tr:last-child td { border-bottom: none; } .empty { color: var(--muted); padding: 32px 16px; text-align: center; font-size: 13px; opacity: 0.85; } .empty::before { content: '📭'; display: block; font-size: 28px; margin-bottom: 8px; opacity: 0.6; } /* ---------- badges ---------- */ .badge { font-size: 12px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 999px; border: 1px solid var(--border); text-transform: capitalize; display: inline-flex; align-items: center; gap: 6px; } .badge.running { color: var(--green); border-color: var(--green-border); background: var(--green-dim); } .badge.paused { color: var(--amber); border-color: var(--amber-border); background: var(--amber-dim); } .badge.reconnecting, .badge.starting, .badge.waiting { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim); } .badge.error, .badge.no-model { color: var(--red); border-color: var(--red-border); background: var(--red-dim); } .badge.stopped { color: var(--muted); background: var(--panel-2); } /* ---------- forms / buttons ---------- */ input, select { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 9px 12px; border-radius: 8px; font-size: 14px; width: 100%; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } select { cursor: pointer; } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } label.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); } .btn { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 9px 15px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; font-family: inherit; transition: all 0.15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn:not(.primary):hover { background: var(--panel); border-color: var(--accent); } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 2px 10px rgba(76, 141, 255, .28); } .btn.primary:hover { filter: brightness(1.1); transform: translateY(-1px); } .btn.danger { color: var(--red); } .btn.danger:hover { border-color: var(--red); background: var(--red-dim); } .btn.warning { color: var(--amber); border-color: rgba(240, 179, 71, 0.4); } .btn.warning:hover { border-color: var(--amber); background: rgba(240, 179, 71, 0.15); } .btn.sm { padding: 5px 11px; font-size: 13px; } .btn.xs { padding: 3px 8px; font-size: 11.5px; border-radius: 6px; font-weight: 500; height: 26px; line-height: 1; gap: 4px; white-space: nowrap; } .btn.secondary { background: var(--panel); border-color: var(--border); color: var(--text); } .btn.secondary:hover { background: var(--panel-2); border-color: var(--accent); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .table-actions { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; } .err { color: var(--red); font-size: 13px; min-height: 16px; } /* Filter Container Styling */ .filters, .filter-bar { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 16px; } .filter-field span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .filter-field select, .filter-field input { padding: 6px 10px; font-size: 13px; } /* ---------- streams grid ---------- */ .stream-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } .stream-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; box-shadow: var(--shadow-md); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .stream-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); transform: translateY(-2px); } .stream-media { position: relative; background: #050608; border-bottom: 1px solid var(--border); } .stream-feed { width: 100%; aspect-ratio: 16 / 10; background: #000; object-fit: contain; display: block; } .stream-feed.no-signal { opacity: 0; } .stream-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; color: var(--muted); font-size: 13px; pointer-events: none; } .fs-btn { position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; line-height: 1; border-radius: 6px; opacity: .7; color: #fff; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .25); transition: all 0.15s ease; } .fs-btn:hover { opacity: 1; background: rgba(0, 0, 0, .85); transform: scale(1.05); } .stream-media:fullscreen { background: #000; display: flex; align-items: center; justify-content: center; } .stream-media:fullscreen .stream-feed, .stream-media:-webkit-full-screen .stream-feed { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; } .cam-hidden { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .stream-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; } .stream-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .stream-title b { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stream-title-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .fps-chip { color: var(--muted); font-weight: 500; font-size: 12px; } .stream-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .stream-stats .stat { min-width: 0; background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; } .stream-stats .stat-k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .stream-stats b { color: var(--text); font-size: 18px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .stream-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .stream-actions select { width: auto; padding: 5px 8px; font-size: 13px; flex: 1; } .stream-actions .btn { flex: 1; } .stream-actions .btn.danger { flex: 0 0 auto; } .stream-toolbar { padding-top: 2px; } .stream-toolbar .btn { min-width: 86px; } .stream-toolbar .btn.danger { min-width: 0; } .cam-pick-field { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 12px; } .cam-pick-field > span { flex: 0 0 auto; } .cam-pick-field select { flex: 1; } /* ---------- Modern Segmented Tab Bar ---------- */ .tabs { display: inline-flex !important; align-items: center !important; background: var(--panel-2, #161b22) !important; border: 1px solid var(--border, rgba(255,255,255,0.08)) !important; border-radius: 10px !important; padding: 4px !important; gap: 4px !important; margin-bottom: 16px !important; } .tab-btn { height: 36px !important; padding: 0 16px !important; border-radius: 7px !important; border: none !important; font-size: 13px !important; font-weight: 600 !important; color: var(--muted, #8b949e) !important; background: transparent !important; cursor: pointer !important; transition: all 0.15s ease !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .tab-btn:hover { color: var(--text, #f0f6fc) !important; background: var(--wash) !important; } .tab-btn.active { background: var(--accent, #3b82f6) !important; color: var(--on-accent) !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35) !important; } .config-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .stream-config { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); max-height: 420px; overflow-y: auto; } .cfg-chip { margin-left: 6px; font-size: 11px; color: var(--amber); } .config-group { margin-bottom: 8px; } .config-group > h4 { margin: 6px 0 10px; color: var(--accent); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; } .config-advanced { margin: 6px 0 10px; border-top: 1px solid var(--border, #2a2a2a); padding-top: 10px; } .config-advanced > summary { cursor: pointer; color: var(--muted); font-size: 13px; user-select: none; margin-bottom: 10px; } /* ═══════════════════════════════════════════════════════════════════ Modern Config Panel — Sidebar + Content split ═══════════════════════════════════════════════════════════════════ */ .cfg-root { padding: 0 !important; } .cfg-layout { display: flex; min-height: 340px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel); } /* ── Left sidebar navigation ── */ .cfg-sidebar { width: 190px; flex: 0 0 190px; background: var(--bg); border-right: 1px solid var(--border); padding: 8px 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .cfg-nav-item { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 10px 16px; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; transition: all 0.12s ease; border-left: 3px solid transparent; line-height: 1.35; } .cfg-nav-item:hover { background: var(--wash); color: var(--text); } .cfg-nav-item.active { background: var(--wash-strong); color: var(--text); font-weight: 600; border-left-color: var(--accent); } /* ── Right content area ── */ .cfg-content { flex: 1; padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .cfg-divider { height: 1px; background: var(--border); margin: 4px 0; } /* ── Switch rows (for booleans) ── */ .cfg-sw-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; transition: border-color 0.15s; } .cfg-sw-row:hover { border-color: var(--accent); } .cfg-sw-info { flex: 1; min-width: 0; } .cfg-sw-label { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; } .cfg-sw-desc { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.35; } /* Toggle switch track + knob */ .cfg-sw-track { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 40px; cursor: pointer; } .cfg-sw-input { opacity: 0; width: 0; height: 0; position: absolute; } .cfg-sw-knob { position: absolute; inset: 0; background: var(--border); border-radius: 22px; transition: background 0.2s; } .cfg-sw-knob::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: var(--on-accent); border-radius: 50%; transition: transform 0.2s; } .cfg-sw-input:checked + .cfg-sw-knob { background: var(--accent); } .cfg-sw-input:checked + .cfg-sw-knob::before { transform: translateX(18px); } /* ── Compact field grid (for numbers, text, enums) ── */ .cfg-fields-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .cfg-cell { display: flex; flex-direction: column; gap: 4px; } .cfg-cell-label { font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; } .cfg-cell input, .cfg-cell select { width: 100%; padding: 7px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; transition: border-color 0.15s; } .cfg-cell input:focus, .cfg-cell select:focus { border-color: var(--accent); outline: none; } /* ── Action bar ── */ .cfg-actions { display: flex; gap: 8px; padding: 12px 0 0; align-items: center; } /* ---------- toast ---------- */ #toast { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 8px; z-index: 100; } .toast { background: var(--panel-2); border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: 12px 18px; border-radius: 8px; box-shadow: var(--shadow-lg); max-width: 360px; animation: toast-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); font-weight: 500; } .toast.ok { border-left-color: var(--green); } .toast.error { border-left-color: var(--red); } .toast.leaving { animation: toast-out 0.25s cubic-bezier(0.4, 0, 1, 1) forwards; } @keyframes toast-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateY(-10px); } } /* ---------- stream card detail chips ---------- */ .stream-det { display: flex; flex-wrap: wrap; gap: 6px; } .chip { font-size: 11px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; font-weight: 500; } /* ---------- log table ---------- */ .log-table td.mono, .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--muted); } .lvl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .lvl.warning { color: var(--amber); } .lvl.error { color: var(--red); } .lvl.info { color: var(--muted); } .log-row.error td { background: rgba(240, 98, 93, .07); } .log-row.warning td { background: rgba(240, 179, 71, .06); } /* ---------- modal ---------- */ .modal-backdrop { position: fixed; inset: 0; z-index: 90; background: var(--scrim); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; animation: modal-backdrop-in 0.2s ease; transition: opacity 0.15s ease; } .modal-backdrop.closing { opacity: 0; } .modal-dialog { width: min(640px, 96vw); max-height: 88vh; overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); animation: modal-dialog-in 0.25s cubic-bezier(0.22, 1, 0.36, 1); display: flex; flex-direction: column; } .modal-dialog.modal-sm { width: min(480px, 96vw); } .modal-dialog.modal-md { width: min(640px, 96vw); } .modal-dialog.modal-lg { width: min(800px, 96vw); } .modal-dialog.modal-xl { width: min(980px, 96vw); } @keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-dialog-in { from { transform: translateY(14px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); z-index: 2; gap: 12px; } .modal-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--text); } .modal-x { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; transition: all 0.15s ease; flex-shrink: 0; } .modal-x:hover { background: var(--border); color: var(--text); transform: scale(1.05); } .modal-body { padding: 22px; overflow-y: auto; } .modal-body .section { background: transparent; border: none; padding: 0; } /* ---------- dashboard inline sparkline ---------- */ .dash-spark { display: flex; align-items: center; } .dash-spark svg { display: block; } /* ---------- analytics page ---------- */ .an-spark-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .an-spark-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .an-spark-head { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; } .an-spark-head b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 13px; } .an-spark-val { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; } .an-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .spark-empty { color: var(--muted); font-size: 12px; padding: 14px 0; } .an-gauge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } .an-gauge-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .an-gauge-card .an-spark-head { width: 100%; } .an-gauge-labels { display: flex; justify-content: space-around; width: 100%; font-size: 11px; color: var(--muted); } .an-bar-track { height: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; flex: 1; } .an-bar-fill { height: 100%; border-radius: inherit; transition: width 0.3s ease; } .an-compare { display: flex; flex-direction: column; gap: 10px; } .an-compare-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(160px, 3fr) 64px 80px; gap: 12px; align-items: center; } .an-compare-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .an-compare-track { display: flex; align-items: center; } .an-compare-val { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; } .an-heatmap { display: flex; gap: 6px; align-items: stretch; flex-wrap: wrap; } .an-heat-cell { flex: 1 1 52px; min-height: 52px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: default; border: 1px solid var(--border); transition: opacity 0.15s; } .an-heat-cell:hover { opacity: 0.85; } .an-heat-label { font-size: 10px; color: var(--muted); } .an-heat-count { font-size: 14px; font-weight: 700; } /* Responsive adjustments */ @media (max-width: 980px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .viz-grid { grid-template-columns: 1fr; } .an-compare-row { grid-template-columns: 1fr 2fr 48px; } .an-compare-row .badge { display: none; } .brand-legend-card { min-width: 100%; } } /* Streams page additions */ .stream-toolbar-row { margin-bottom: 10px; } .stream-search { min-width: 220px; flex: 1; padding: 7px 10px; } .stream-select-wrap { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(0, 0, 0, .55); border-radius: 6px; padding: 4px; display: flex; align-items: center; justify-content: center; } .stream-select-box { width: 18px; height: 18px; cursor: pointer; margin: 0; } .bulk-bar { background: var(--panel, #12151b); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; } .rec-indicator { position: absolute; top: 8px; right: 44px; z-index: 2; display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .6); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: #ff5c5c; letter-spacing: .03em; } .rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; animation: rec-pulse 1.4s ease-in-out infinite; } @keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .health-badge { font-size: 11px; color: var(--amber); border: 1px solid var(--amber-border); border-radius: 999px; padding: 1px 8px; white-space: nowrap; } .stream-bulk-add-form textarea { width: 100%; min-height: 140px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; padding: 10px; resize: vertical; } .stream-bulk-add-form code { background: var(--wash-strong); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; } /* Pagination */ .pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .pager span { margin-right: auto; } .pager select { padding: 5px 8px; width: auto; } /* ---------- View Transition & Animations ---------- */ .view-transition { animation: view-fade-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); } @keyframes view-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Table Container Wrapper ---------- */ .table-container { width: 100%; overflow-x: auto; border-radius: var(--radius); } /* ---------- Recording Video Overlays & Badges ---------- */ .rec-play-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.38); display: grid; place-items: center; opacity: 0; transition: opacity 0.18s ease; } .rec-play-overlay:hover { opacity: 1; } .rec-play-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 18px; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(76, 141, 255, 0.5); transform: scale(0.9); transition: transform 0.15s ease; } .rec-play-overlay:hover .rec-play-icon { transform: scale(1); } .rec-duration-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.8); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; backdrop-filter: blur(4px); font-variant-numeric: tabular-nums; border: 1px solid rgba(255,255,255,0.15); } /* ---------- Mobile Drawer Navigation ---------- */ .mobile-header { display: none; background: var(--panel); border-bottom: 1px solid var(--border); padding: 12px 18px; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 80; } .mobile-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; } .mobile-toggle { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 6px 12px; border-radius: 8px; font-size: 18px; cursor: pointer; transition: all 0.15s ease; } .mobile-toggle:hover { background: var(--border); } .sidebar-backdrop { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); z-index: 95; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .sidebar-backdrop.open { opacity: 1; pointer-events: auto; } @media (max-width: 768px) { .mobile-header { display: flex; } .shell { flex-direction: column; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 100; transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1); box-shadow: var(--shadow-lg); height: 100vh; } .sidebar.open { transform: translateX(0); } .sidebar nav { flex-direction: column; overflow-x: visible; } .nav-item { white-space: normal; border-left: 3px solid transparent; border-bottom: none; } } /* ---------- Truck Dispatch Styles ---------- */ .dispatch-notif-banner { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel); margin-bottom: 12px; transition: all 0.2s ease; } .dispatch-notif-banner.active { background: linear-gradient(135deg, rgba(240, 179, 71, 0.12) 0%, var(--panel) 100%); border-color: rgba(240, 179, 71, 0.4); } .dispatch-notif-banner.clear { background: linear-gradient(135deg, rgba(70, 196, 106, 0.08) 0%, var(--panel) 100%); border-color: rgba(70, 196, 106, 0.3); } .dispatch-notif-banner .notif-icon { font-size: 28px; line-height: 1; } .dispatch-notif-banner .notif-body { flex: 1; } .dispatch-notif-banner .notif-body h4 { font-size: 15px; margin: 0 0 2px; } .dispatch-notif-banner .notif-body p { margin: 0; font-size: 13px; color: var(--text-secondary); } .dispatch-notif-banner .notif-badge { background: var(--amber); color: var(--on-amber); font-weight: 800; font-size: 14px; padding: 4px 12px; border-radius: 999px; } .dispatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .dispatch-item-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: transform 0.15s ease, border-color 0.15s ease; } .dispatch-item-card:hover { border-color: var(--accent); transform: translateY(-2px); } .dispatch-item-card.pending { border-left: 4px solid var(--amber); } .dispatch-item-card.active-delivery { border-left: 4px solid var(--accent); background: linear-gradient(135deg, rgba(76, 141, 255, 0.05) 0%, var(--panel-2) 100%); } .dispatch-item-card .item-header { display: flex; align-items: center; justify-content: space-between; } .dispatch-item-card .truck-badge { font-weight: 700; font-size: 15px; color: var(--text); letter-spacing: -0.01em; } .dispatch-item-card .item-body { display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .dispatch-item-card .item-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); } .challan-preview-box { min-height: 50px; border: 1px dashed var(--border); border-radius: 8px; padding: 6px 14px; display: flex; align-items: center; gap: 12px; background: var(--surface-0); } .challan-img-preview { height: 40px; width: 68px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; transition: transform 0.15s ease; } .challan-img-preview:hover { transform: scale(1.05); } .form-control { width: 100% !important; height: 40px !important; background: var(--surface-0) !important; border: 1px solid var(--border) !important; color: var(--text) !important; padding: 0 12px !important; border-radius: 8px !important; font-family: inherit !important; font-size: 14px !important; outline: none !important; box-sizing: border-box !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; } .form-control:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--focus-ring) !important; } select.form-control { cursor: pointer; } textarea.form-control { height: auto !important; min-height: 80px !important; padding: 10px 12px !important; resize: vertical !important; line-height: 1.5 !important; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 40px var(--autofill-bg) inset !important; -webkit-text-fill-color: var(--text) !important; box-shadow: 0 0 0 40px var(--autofill-bg) inset !important; color: var(--text) !important; transition: background-color 5000s ease-in-out 0s; } /* Compact Quantity Input Group - Strictly 1-Row Inline */ .qty-input-group { display: flex !important; flex-direction: row !important; align-items: stretch !important; width: 100% !important; height: 40px !important; background: var(--surface-0) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; overflow: hidden !important; box-sizing: border-box !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; } .qty-input-group:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--focus-ring) !important; } .qty-input-group input { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; height: 100% !important; border: none !important; background: transparent !important; padding: 0 12px !important; color: var(--text) !important; font-family: inherit !important; font-size: 14px !important; font-weight: 600 !important; outline: none !important; box-sizing: border-box !important; } .qty-input-group select { flex: 0 0 115px !important; width: 115px !important; height: 100% !important; border: none !important; border-left: 1px solid var(--border) !important; background: var(--panel-2) !important; color: var(--text) !important; padding: 0 8px !important; font-family: inherit !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; outline: none !important; box-sizing: border-box !important; } /* Multi-Brand Builder Grid Layout */ .brand-builder-section { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .brand-builder-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--divider); } .brand-builder-head h4 { margin: 0; font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: 0.04em; text-transform: uppercase; } .brand-builder-row { display: grid !important; grid-template-columns: minmax(170px, 1.8fr) 255px 140px 40px !important; gap: 10px !important; align-items: end !important; background: var(--surface-0); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; box-sizing: border-box; transition: border-color 0.15s ease; } .brand-builder-row:hover { border-color: rgba(76, 141, 255, 0.4); } .b-col { display: flex !important; flex-direction: column !important; gap: 6px !important; min-width: 0 !important; } .b-label { font-size: 11px !important; font-weight: 700 !important; color: var(--text-secondary) !important; text-transform: uppercase !important; letter-spacing: 0.03em !important; margin: 0 !important; white-space: nowrap !important; } .b-action { display: flex !important; align-items: flex-end !important; justify-content: center !important; } .b-remove-btn { height: 40px !important; width: 40px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; font-size: 15px !important; } @media (max-width: 720px) { .brand-builder-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .brand-builder-row .b-col:first-child { grid-column: 1 / -1; } .brand-builder-row .b-action { grid-column: 1 / -1; justify-content: flex-end; } } /* Package Type Toggle Buttons (Bottle vs Pouch vs Jar) */ .pkg-type-group { display: inline-flex !important; align-items: center !important; height: 40px !important; width: 100% !important; background: var(--panel-2) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding: 2px !important; gap: 2px !important; box-sizing: border-box !important; } .pkg-type-btn { flex: 1 1 33.3% !important; height: 34px !important; border: none !important; background: transparent !important; color: var(--text-secondary) !important; font-size: 12px !important; font-weight: 600 !important; padding: 0 6px !important; border-radius: 6px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 3px !important; transition: all 0.15s ease !important; white-space: nowrap !important; } .pkg-type-btn.active.bottle { background: rgba(16, 185, 129, 0.18) !important; color: #10b981 !important; font-weight: 700 !important; } .pkg-type-btn.active.pouch { background: rgba(245, 158, 11, 0.18) !important; color: #f59e0b !important; font-weight: 700 !important; } .pkg-type-btn.active.jar { background: rgba(20, 184, 166, 0.2) !important; color: #2dd4bf !important; font-weight: 700 !important; } /* Brand Tags & Packaging Badges */ .brand-tag-list { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; } .brand-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; } .brand-tag.bottle { background: rgba(16, 185, 129, 0.12); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.25); } .brand-tag.pouch { background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.25); } .brand-tag.jar { background: rgba(20, 184, 166, 0.12); color: #2dd4bf; border: 1px solid rgba(20, 184, 166, 0.25); } /* Supervisor Action Buttons */ .btn-start-delivery { background: #10b981 !important; color: var(--on-accent) !important; border: none !important; font-weight: 700 !important; font-size: 13px !important; padding: 9px 18px !important; border-radius: 8px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; transition: all 0.15s ease !important; box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3) !important; } .btn-start-delivery:hover { background: #059669 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4) !important; } .btn-start-delivery:active { transform: translateY(0) !important; } .btn-end-delivery { background: #3b82f6 !important; color: var(--on-accent) !important; border: none !important; font-weight: 700 !important; font-size: 13px !important; padding: 9px 18px !important; border-radius: 8px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; transition: all 0.15s ease !important; box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3) !important; } .btn-end-delivery:hover { background: #2563eb !important; transform: translateY(-1px) !important; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4) !important; } .btn-end-delivery:active { transform: translateY(0) !important; } /* Modal Detail Cards */ .detail-card { background: var(--surface-0) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding: 12px 16px !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 12px !important; } .detail-card-item { display: flex !important; flex-direction: column !important; gap: 3px !important; } .detail-card-val { font-size: 14px !important; font-weight: 700 !important; color: var(--text) !important; } /* Dispatch Hub Toolbar & Tabs */ .dispatch-tab-bar { display: inline-flex !important; background: var(--surface-0) !important; padding: 4px !important; border-radius: 10px !important; border: 1px solid var(--border) !important; gap: 4px !important; flex-wrap: wrap !important; max-width: 100% !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .dispatch-tab-bar::-webkit-scrollbar { display: none !important; } .dispatch-tab-btn { height: 36px !important; padding: 0 14px !important; border-radius: 7px !important; border: none !important; font-size: 13px !important; font-weight: 600 !important; color: var(--text-secondary) !important; background: transparent !important; cursor: pointer !important; transition: all 0.15s ease !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .dispatch-tab-btn:hover { color: var(--text) !important; background: var(--wash-strong) !important; } .dispatch-tab-btn.active { background: var(--accent) !important; color: var(--on-accent) !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(76, 141, 255, 0.35) !important; } .dispatch-toolbar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-top: 20px !important; margin-bottom: 20px !important; flex-wrap: wrap !important; } .dispatch-toolbar-left { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; flex-wrap: wrap; } .dispatch-toolbar-right { display: flex; align-items: center; gap: 8px; } /* Accidental Touch Confirmation Modal Card */ .confirm-dialog-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .confirm-dialog-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding-bottom: 8px; border-bottom: 1px solid var(--divider); } .confirm-dialog-row:last-child { border-bottom: none; padding-bottom: 0; } .confirm-dialog-row .muted { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; } .time-auto-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #10b981; background: rgba(16, 185, 129, 0.1); padding: 5px 12px; border-radius: 6px; border: 1px solid rgba(16, 185, 129, 0.25); } /* Challan Photo Preview Modal */ .challan-modal-body { display: flex; flex-direction: column; gap: 14px; } .challan-modal-info { display: flex; align-items: center; justify-content: space-between; background: var(--surface-0); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 13px; flex-wrap: wrap; gap: 8px; } .challan-modal-img-wrap { background: #090d16; border: 1px solid var(--border); border-radius: 10px; min-height: 220px; max-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 12px; overflow: hidden; } .challan-modal-img { max-width: 100%; max-height: 56vh; object-fit: contain; border-radius: 6px; box-shadow: var(--shadow-lg); } .challan-modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding-top: 4px; } /* ---------- Smart Auto-Lighting Badges & HUD ---------- */ .lighting-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; cursor: help; transition: all 0.2s ease; user-select: none; } .lighting-badge.active { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.35); box-shadow: 0 0 8px rgba(16, 185, 129, 0.2); } .lighting-badge.active:hover { background: rgba(16, 185, 129, 0.25); border-color: #10b981; } .lighting-badge.manual { background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); } .stream-float-lighting { position: absolute; top: 10px; right: 10px; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(16, 185, 129, 0.4); color: #e2e8f0; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; z-index: 10; display: inline-flex; align-items: center; gap: 8px; pointer-events: auto; cursor: help; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); transition: opacity 0.2s ease, transform 0.2s ease; } .stream-float-lighting span b { color: #10b981; } .stream-float-lighting .light-metrics { color: #94a3b8; font-size: 10px; border-left: 1px solid rgba(255, 255, 255, 0.15); padding-left: 6px; } /* --- Workflow Stepper & Context Pill --- */ .workflow-stepper { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); padding: 8px 14px; border-radius: 10px; margin-bottom: 16px; overflow-x: auto; } .workflow-step { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel-2); border: 1px solid transparent; white-space: nowrap; } .workflow-step.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); font-weight: 700; } .workflow-arrow { color: var(--muted); font-size: 11px; opacity: 0.6; } .company-context-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--border); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--text); } .badge.purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); } /* Modern Dispatch Hub Table Row Polish */ .dispatch-page table tbody tr, .dispatch-tab-content table tbody tr { transition: background 0.15s ease, transform 0.1s ease; } .dispatch-page table tbody tr:hover, .dispatch-tab-content table tbody tr:hover { background: var(--row-hover); } .table-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; } /* ========================================================================== Testing Hub & Detection Tests Styles ========================================================================== */ .testing-page { animation: fadeIn 0.2s ease; } .testing-filters select, .testing-filters input { min-height: 34px; } .testing-table { width: 100%; border-collapse: collapse; } .testing-table th { background: var(--panel-2); padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); text-align: left; } .testing-table td { padding: 10px 14px; border-bottom: 1px solid var(--divider); vertical-align: middle; font-size: 13px; } .testing-table tbody tr { transition: background 0.15s ease; } .testing-table tbody tr:hover { background: var(--row-hover); } .testing-table tbody tr.tr-new-run { border-left: 3px solid var(--accent); background: rgba(76, 141, 255, 0.02); } /* Test ID Pills */ .test-id-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 3px 8px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); font-family: monospace; font-size: 13px; font-weight: 700; color: var(--text); } .test-id-pill.new-run { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 8px rgba(76, 141, 255, 0.2); } .badge.new-run-badge { background: rgba(76, 141, 255, 0.15); color: var(--accent); border: 1px solid rgba(76, 141, 255, 0.4); font-size: 10px; font-weight: 800; padding: 2px 6px; letter-spacing: 0.05em; } /* Conveyor Pills */ .conveyor-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; } .conveyor-pill.conveyor-1 { background: rgba(70, 196, 106, 0.12); color: #4ade80; border: 1px solid rgba(70, 196, 106, 0.3); } .conveyor-pill.conveyor-2 { background: rgba(168, 85, 247, 0.12); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); } /* Table Thumbnail */ .table-thumb-wrap { width: 58px; height: 42px; border-radius: 6px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .table-thumb-wrap:hover { transform: scale(1.1); border-color: var(--accent); box-shadow: var(--shadow-md); } .table-thumb-img { width: 100%; height: 100%; object-fit: cover; } .table-thumb-fallback { font-size: 10px; color: var(--muted); text-align: center; } /* Grid Cards View */ .testing-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 12px; } .testing-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.15s ease, border-color 0.15s ease; } .testing-card:hover { transform: translateY(-2px); border-color: var(--border-strong); } .testing-card.new-run-card { border-color: rgba(76, 141, 255, 0.4); box-shadow: 0 0 12px rgba(76, 141, 255, 0.08); } .testing-card-media { width: 100%; height: 150px; background: #000; position: relative; overflow: hidden; cursor: pointer; } .testing-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; } .testing-card-media:hover .testing-card-img { transform: scale(1.04); } .testing-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; } .testing-card-badge-overlay { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; } .testing-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .testing-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--panel-2); padding: 8px 10px; border-radius: 6px; } .stat-item { display: flex; flex-direction: column; gap: 2px; } .stat-item .stat-k { font-size: 10px; color: var(--muted); text-transform: uppercase; } /* Lightbox Modal */ .lightbox-body { display: flex; flex-direction: column; gap: 16px; } .lightbox-media-container { width: 100%; max-height: 440px; min-height: 240px; background: #06080c; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .lightbox-img { max-width: 100%; max-height: 440px; object-fit: contain; } .lightbox-fallback { color: var(--muted); font-size: 14px; padding: 40px; } .lightbox-details-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .lightbox-detail-cell { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .detail-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .detail-val { font-size: 13px; font-weight: 600; color: var(--text); } /* ========================================================================== A11Y REMEDIATION BLOCK Appended by /tmp/patch_a11y.py. Append-only: nothing above this line was modified. All colours come from the existing :root / [data-theme="dark"] tokens (--accent, --focus-ring) -- no parallel colour system. A11Y-03 WCAG 2.4.7 (AA) visible focus A11Y-05 WCAG 2.5.8 (AA) target size A11Y-07 reduced-motion guard ========================================================================== */ /* -------------------------------------------------------------------------- A11Y-03 Visible keyboard focus. Baseline ring for every natively focusable control. :focus-visible means mouse/touch users see nothing new -- only keyboard traversal shows the ring. -------------------------------------------------------------------------- */ a[href]:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* The four pre-existing `outline: none` sites, each given a real ring back while keeping whatever that rule was actually there to do. */ /* 1. login password reveal -- kept its accent border, gains a ring. Sits absolutely inside .login-input, so a 1px offset stays in bounds. */ .login-input .peek:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* 2. theme toggle -- had a --focus-ring halo only (0.22 alpha, very faint). Halo kept, solid ring added. */ .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 3px var(--focus-ring); } /* 3. global input/select -- had accent border + halo. Ring added. (Handled by the baseline rule above; restated for the halo pairing.) */ input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } /* 4. .cfg-cell inputs -- had a border-colour change and NOTHING else. Specificity 0,2,1 == the outline:none rule, and this comes later. */ .cfg-cell input:focus-visible, .cfg-cell select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 3px var(--focus-ring); } /* `outline: none !important` sites need !important to beat. We do not delete the originals -- they also suppress the UA ring on mouse focus, which is what the author wanted; we only restore it for :focus-visible. */ .form-control:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; } /* .qty-input-group has `overflow: hidden !important`, so an OUTSET ring would be clipped away. Inset it instead. */ .qty-input-group input:focus-visible, .qty-input-group select:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: -2px !important; } /* Controls that live in scrolling / clipping parents: draw the ring inside the border box so it can never be cut off or trigger a scrollbar. .sidebar nav becomes overflow-x:auto under the tablet media query, and .cfg-sidebar is overflow-y:auto (which makes overflow-x auto too). */ .nav-item:focus-visible, .cfg-nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* The config toggle switch: the real is opacity:0 / 0x0, so its ring would be invisible. Put the ring on the knob the user can actually see. */ .cfg-sw-input:focus-visible + .cfg-sw-knob { outline: 2px solid var(--accent); outline-offset: 2px; } /* Sidebar user row -- focusable in some builds, inert otherwise. */ .user-line:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Windows High Contrast / forced-colors: system colours only. */ @media (forced-colors: active) { a[href]:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 3px solid Highlight; outline-offset: 2px; } } /* -------------------------------------------------------------------------- A11Y-05 Target size (WCAG 2.5.8 AA = 24x24 CSS px). .btn.sm -> min-height floor. It is used in toolbars and in the recordings/streams/logs tables, all of which are flex or table rows that absorb a taller child. This is the ONE change in this patch that can visibly move pixels. .btn.xs -> visual size left EXACTLY as-is (26px). These sit 5-6 to a row in the dispatch tables; growing them would reflow those rows. Instead a transparent pseudo-element extends the HIT area vertically only, which is explicitly allowed by 2.5.8. Clearance maths, from the asserted anchors above: td padding 8px + 1px border + td padding 8px = 17px between the bottom edge of one row's button and the top edge of the next row's button. Two 7px expanders consume 14px, leaving 3px of dead space. No expander ever overlaps another. Horizontal expansion is deliberately NOT done: .table-actions has only a 4-6px gap, so a horizontal expander WOULD overlap the neighbouring button and steal its taps. -------------------------------------------------------------------------- */ .btn.sm { min-height: 32px; } .btn.xs { position: relative; min-width: 24px; /* WCAG 2.5.8 floor; today's buttons already exceed it */ } .btn.xs::after { content: ""; position: absolute; left: 0; right: 0; top: -7px; /* 26px visual -> 40px tap target */ bottom: -7px; background: transparent; } /* -------------------------------------------------------------------------- A11Y-07 Reduced motion. The sheet has 42 transitions and 8 animations; only .login-card was guarded. This neutralises all of them for users who asked for it. 0.01ms rather than 0s so transitionend/animationend still fire for any JS that waits on them. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* Exception: the 5000s transition on autofill is not motion, it is the standard hack that stops Chrome repainting its yellow autofill wash. Restore it or login/dispatch inputs flash yellow. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition-duration: 5000s !important; transition-delay: 0s !important; } } /* -------------------------------------------------------------------------- A11Y-06 px -> rem type scaling: DEFERRED, NOT SHIPPED HERE. All 127 `font-size` declarations in this file are px. Converting them is arithmetically free at the default 16px root (13px == 0.8125rem exactly), BUT roughly 250 more `font-size:NNpx` declarations live in inline style="" strings inside web/js/**, which this patch does not own. Inline styles win over the stylesheet, so a stylesheet-only conversion means that as soon as an operator raises their browser font size, half the type grows and half does not -- labels detach from their values, table headers detach from their cells. Several fixed px heights would also clip their text: .btn.xs height: 26px .tab-btn height: 36px !important .form-control height: 40px !important .qty-input-group height: 40px !important Ship A11Y-06 as its own change, together with the JS owners, with a human looking at the screens at 100% / 150% / 200% browser text size. -------------------------------------------------------------------------- */ /* ========================================================================= RESPONSIVE SYSTEM Appended last on purpose: these rules are the single source of truth for layout padding, gutters and type size at every viewport, and they must win over the older per-component values above. Breakpoints (mobile-first reading order, written max-width for continuity with the existing sheet): >= 1600 wide desktop / 4K <= 1400 laptop <= 1180 small laptop, tablet landscape <= 980 tablet <= 768 phone landscape + drawer nav takes over <= 600 phone <= 400 small phone Plus: coarse-pointer, short-landscape, and safe-area handling. ========================================================================= */ /* ---------- global overflow + text sizing guards ---------- */ html { -webkit-text-size-adjust: 100%; /* stop iOS inflating text in landscape */ text-size-adjust: 100%; } body { font-size: var(--fs-base); } /* Nothing may push the page sideways. Flex/grid children need min-width:0 (and min-height:0) or long text and wide tables blow the layout open. */ #app, .shell, .content, .page, .section, .stream-card, .viz-block, .cfg-content, .modal-dialog, .health-main, .stat-card { min-width: 0; } img, video, canvas, svg { max-width: 100%; } /* ---------- shell ---------- */ /* dvh keeps the sidebar/backdrop correct while mobile browser chrome hides. */ .shell { min-height: 100vh; min-height: 100dvh; } .sidebar { height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; } .content { padding: var(--sp-6) var(--gutter); padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); } .page { max-width: var(--page-max); width: 100%; gap: var(--sp-5); } /* ---------- fluid type on the pieces that carry the page ---------- */ .page > .page-head h2 { font-size: var(--fs-xl); } .section > h3 { font-size: var(--fs-md); } .stat-card .value { font-size: var(--fs-2xl); line-height: 1.1; } .stat-card .label { font-size: var(--fs-xs); } .modal-head h3 { font-size: var(--fs-md); } .brand { font-size: var(--fs-md); } /* ---------- grids: never let a fixed minmax() exceed the viewport ---------- */ /* min(100%, Npx) is what stops `minmax(340px, …)` overflowing a 320px phone. Only the track sizing is restated here — the original gaps are left alone so desktop spacing is unchanged. */ .stream-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); } .config-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); } .cfg-fields-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } .cards, .dashboard-stats-grid, .stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } /* ---------- tables: scroll the table, not the page ---------- */ .table-scroll, .section > table, .modal-body > table { max-width: 100%; } table { max-width: 100%; } /* ---------- horizontal strips that should scroll, not wrap ugly ---------- */ .tabs { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; flex-wrap: nowrap; } .tabs::-webkit-scrollbar { display: none; } .tab-btn { flex: 0 0 auto; } /* ========================================================================== >= 1600px — wide desktop. Give the content room instead of a narrow column. ========================================================================== */ @media (min-width: 1600px) { :root { --page-max: 1520px; } .stream-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); } } /* ========================================================================== <= 1180px — tablet landscape / small laptop ========================================================================== */ @media (max-width: 1180px) { .viz-grid { grid-template-columns: 1fr; } } /* ========================================================================== <= 980px — tablet. Config split-view stacks; charts go full width. ========================================================================== */ @media (max-width: 980px) { .cards, .dashboard-stats-grid, .stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); } /* .cfg-layout is a flex row on desktop; blocking it stacks nav above content and the nav itself becomes a scrollable chip strip. */ .cfg-layout { display: block; min-height: 0; } .cfg-sidebar { position: static; width: auto; display: flex; flex-direction: row; overflow-x: auto; gap: 6px; border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 14px; scrollbar-width: none; } .cfg-sidebar::-webkit-scrollbar { display: none; } .cfg-nav-item { flex: 0 0 auto; white-space: nowrap; } .brand-legend-card { min-width: 100%; } } /* ========================================================================== <= 768px — drawer nav is active (see the block above). Phone layout. ========================================================================== */ @media (max-width: 768px) { /* The drawer needs to clear notches and be scrollable on short screens. */ .sidebar { padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); width: min(300px, 86vw); } .mobile-header { padding: 10px var(--gutter); padding-top: calc(10px + env(safe-area-inset-top)); } .mobile-brand { font-size: var(--fs-md); } .page { max-width: none; } .page > .page-head { align-items: flex-start; flex-wrap: wrap; gap: var(--sp-3); } .page > .page-head .row { width: 100%; } .section { padding: var(--sp-4); } .stat-card { padding: var(--sp-4); } /* Filters and action rows: full-width controls beat cramped inline ones. */ .filters, .filter-bar { gap: var(--sp-3); } .filter-field { flex: 1 1 160px; min-width: 0; } .filter-field select, .filter-field input { width: 100%; } .bar-row, .health-row { grid-template-columns: 1fr; gap: 5px; } .bar-value { text-align: left; } .donut-layout { flex-direction: column; align-items: flex-start; gap: var(--sp-4); } /* Tables scroll horizontally inside their own box. */ table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } th, td { padding: 8px 10px; } /* Modals become near-full-screen sheets. dvh avoids the iOS clipped-footer bug. */ .modal-backdrop { padding: 0; place-items: end stretch; } .modal-dialog, .modal-dialog.modal-sm, .modal-dialog.modal-md, .modal-dialog.modal-lg, .modal-dialog.modal-xl { width: 100%; max-height: 92dvh; border-radius: 16px 16px 0 0; border-bottom: none; } .modal-head { padding: var(--sp-4); } .modal-body { padding: var(--sp-4); padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); } #toast { left: var(--sp-3); right: var(--sp-3); bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); } .toast { width: auto; } } /* ========================================================================== <= 600px — phone portrait ========================================================================== */ @media (max-width: 600px) { .cards, .dashboard-stats-grid, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stream-grid { grid-template-columns: 1fr; } .config-grid, .cfg-fields-grid { grid-template-columns: 1fr; } /* Buttons in a card footer read better full-width than squeezed side by side. */ .stream-actions { gap: 6px; } .stream-actions .btn { flex: 1 1 100%; } .stream-actions .btn.danger { flex: 0 0 auto; } .stream-toolbar .btn { min-width: 0; } .page > .page-head .row .btn { flex: 1 1 auto; } .viz-title { flex-direction: column; align-items: flex-start; gap: 2px; } .viz-title span { text-align: left; } .donut { transform: scale(0.92); transform-origin: left center; } .theme-toggle span:not(.theme-toggle-icon) { display: none; } } /* ========================================================================== <= 400px — small phones (iPhone SE, older Androids) ========================================================================== */ @media (max-width: 400px) { .cards, .dashboard-stats-grid, .stats-grid { grid-template-columns: 1fr; } .section { padding: var(--sp-3); } .badge { font-size: 10.5px; } .table-actions { gap: 2px; } .btn.xs { padding: 3px 6px; } } /* ========================================================================== Coarse pointer (touch): hit targets and the iOS focus-zoom fix. Keyed on pointer type, not width, so it also covers touch laptops/kiosks. ========================================================================== */ @media (pointer: coarse) { .btn, .nav-item, .tab-btn, .cfg-nav-item, .mobile-toggle, .theme-toggle, .fs-btn { min-height: var(--tap); } .btn.sm { min-height: 38px; } .btn.xs { min-height: 32px; } .modal-x { width: var(--tap); height: var(--tap); } .user-line { min-height: var(--tap); } /* iOS Safari zooms the page when a focused input is under 16px. */ input, select, textarea { font-size: 16px; } .filter-field select, .filter-field input, .cfg-cell input, .cfg-cell select, .stream-actions select { font-size: 16px; } /* Hover transforms feel broken on touch — they stick after tap. */ .btn:hover, .btn.primary:hover, .stat-card:hover, .modal-x:hover, .fs-btn:hover { transform: none; } } /* ========================================================================== Short landscape (phone rotated): reclaim vertical space. ========================================================================== */ @media (max-height: 500px) and (orientation: landscape) { .mobile-header { position: static; } .content { padding-top: var(--sp-3); padding-bottom: var(--sp-3); } .modal-dialog { max-height: 96dvh; border-radius: 12px; } .modal-backdrop { place-items: center; padding: var(--sp-2); } .belt-scene { display: none; } } /* ========================================================================== Login screen — tuned separately, it has its own two-column shell. ========================================================================== */ @media (max-width: 600px) { .login-side { padding: calc(56px + env(safe-area-inset-top)) var(--gutter) 24px; gap: 20px; } .login-main { padding: 24px var(--gutter) calc(36px + env(safe-area-inset-bottom)); } .login-card { padding: var(--sp-5); } .login-card h1 { font-size: var(--fs-lg); } .login-theme { top: calc(12px + env(safe-area-inset-top)); right: 12px; } .belt-scene { height: 96px; margin-top: 32px; } }