/* ===================================================================== Mobile EPS Detector — core styles Mobile first. Dark field interface, high contrast, large status states. ===================================================================== */ :root { --ink: #0A1017; --ink-rgb: 10, 16, 23; --surface: #121C27; --surface-2: #17232F; --line: #24323F; --line-soft: #1B2833; --text: #E9F0F6; --muted: #93A6B8; --signal: #FFC72C; --signal-deep: #4A3A05; --signal-ink: #FFC72C; --alert: #FF4A3D; --alert-deep: #46100C; --alert-ink: #FF7A70; --clear: #21C07A; --clear-deep: #0B3A28; --clear-ink: #58D6A0; --radius: 12px; --radius-sm: 8px; --tap: 48px; --pad: 16px; --shell-max: 1180px; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --plate-face: "Arial Narrow", "Helvetica Neue", Impact, var(--sans); --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* Light mode. Applied by JS on , chosen from the toggle in the top bar and remembered per device. Same structure, same status colours by role — just re-pointed for a white field. The camera stage and the plate chip stay fixed-dark regardless: see mobile.css. */ [data-theme="light"] { --ink: #F5F7FA; --ink-rgb: 245, 247, 250; --surface: #FFFFFF; --surface-2: #EDF1F5; --line: #C7D0DA; --line-soft: #DCE2E8; --text: #10161D; --muted: #5B6B78; --signal-deep: #FFF3D2; --signal-ink: #8A5A00; --alert: #E5352B; --alert-deep: #FDE8E6; --alert-ink: #B42318; --clear: #178A55; --clear-deep: #E3F6EC; --clear-ink: #0F6B41; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.5; padding-top: var(--safe-top); overflow-x: hidden; } h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; font-weight: 650; letter-spacing: -0.01em; } h1 { font-size: 1.45rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } p { margin: 0 0 .75rem; } a { color: var(--signal-ink); } .muted { color: var(--muted); } .small { font-size: .85rem; } .nowrap { white-space: nowrap; } .tnum { font-variant-numeric: tabular-nums; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--signal); color: #1A1300; padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; border-radius: 4px; } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: .75rem; height: 56px; padding: 0 var(--pad); background: rgba(var(--ink-rgb), .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); } .topbar__menu { width: 40px; height: 40px; flex: 0 0 auto; display: grid; align-content: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .topbar__menu span { display: block; height: 2px; background: var(--text); border-radius: 2px; } .topbar__brand { display: flex; align-items: center; gap: .55rem; color: var(--text); text-decoration: none; min-width: 0; } .topbar__mark { font-family: var(--plate-face); font-weight: 700; font-size: .8rem; letter-spacing: .08em; background: var(--signal); color: #14100A; padding: .2rem .38rem; border-radius: 4px; } .topbar__name { font-weight: 650; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar__right { margin-left: auto; display: flex; align-items: center; gap: .6rem; } .mode-badge { font-size: .68rem; font-weight: 650; letter-spacing: .02em; padding: .22rem .5rem; border-radius: 999px; background: var(--signal-deep); color: var(--signal-ink); border: 1px solid rgba(255,199,44,.35); } .mode-badge--live { background: var(--clear-deep); color: var(--clear); border-color: rgba(33,192,122,.35); } .net-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--clear); } .net-dot.is-offline { background: var(--alert); } .topbar__theme { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: var(--muted); cursor: pointer; padding: 0; } .topbar__theme:hover { background: var(--surface-2); color: var(--text); } .topbar__theme svg { width: 20px; height: 20px; } .topbar__theme .icon-moon { display: none; } [data-theme="light"] .topbar__theme .icon-sun { display: none; } [data-theme="light"] .topbar__theme .icon-moon { display: block; } .avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); } .topbar__user { text-decoration: none; } /* ---------- Layout ---------- */ .layout { display: block; max-width: var(--shell-max); margin: 0 auto; } .main { padding: var(--pad); padding-bottom: calc(76px + var(--safe-bottom)); min-height: 60vh; } /* ---------- Side navigation (drawer on small screens) ---------- */ .sidenav { position: fixed; inset: 0 auto 0 0; z-index: 60; width: 264px; max-width: 84vw; transform: translateX(-100%); transition: transform .18s ease; background: var(--surface); border-right: 1px solid var(--line); padding: calc(var(--pad) + var(--safe-top)) var(--pad) var(--pad); display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; } .sidenav.is-open { transform: translateX(0); } .sidenav__who { border-bottom: 1px solid var(--line); padding-bottom: .75rem; } .sidenav__name { margin: 0; font-weight: 650; } .sidenav__role { margin: 0; color: var(--muted); font-size: .82rem; } .sidenav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .sidenav__link { display: flex; align-items: center; gap: .7rem; min-height: var(--tap); padding: 0 .7rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: .95rem; } .sidenav__link:hover { background: var(--surface-2); } .sidenav__link.is-current { background: var(--signal-deep); color: var(--signal-ink); } .sidenav__link--quiet { color: var(--muted); } .sidenav__foot { margin-top: auto; display: grid; gap: .4rem; } .icon { width: 20px; height: 20px; flex: 0 0 auto; } .scrim { position: fixed; inset: 0; z-index: 50; background: rgba(4, 8, 12, .6); border: 0; } /* ---------- Bottom tab bar ---------- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; justify-content: space-around; background: rgba(var(--ink-rgb), .96); border-top: 1px solid var(--line); padding-bottom: var(--safe-bottom); backdrop-filter: blur(8px); } .tabbar__item { flex: 1; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); text-decoration: none; font-size: .68rem; font-weight: 600; } .tabbar__item.is-current { color: var(--signal-ink); } /* ---------- Panels & cards ---------- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); margin-bottom: 1rem; } .panel--center { text-align: center; padding: 2rem var(--pad); } .panel__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; flex-wrap: wrap; } .panel__head h1, .panel__head h2 { margin: 0; } .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin-bottom: 1rem; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem; } .stat__label { color: var(--muted); font-size: .76rem; margin: 0 0 .25rem; } .stat__value { margin: 0; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .stat--alert { border-color: rgba(255,74,61,.45); } .stat--alert .stat__value { color: var(--alert); } .stat--clear .stat__value { color: var(--clear); } .stat--money .stat__value { font-size: 1.15rem; } .stat--wide { grid-column: 1 / -1; } /* ---------- Number plate ---------- */ .plate { display: inline-block; background: #F2F1EC; color: #101010; border: 2px solid #0D0D0D; border-radius: 5px; padding: .18em .5em; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); } .plate__text { font-family: var(--plate-face); font-weight: 700; letter-spacing: .06em; font-size: 1.05rem; white-space: nowrap; } .plate--lg { padding: .22em .6em; } .plate--lg .plate__text { font-size: 2rem; } .plate--xl { padding: .25em .7em; border-width: 3px; border-radius: 7px; } .plate--xl .plate__text { font-size: 2.6rem; } .plate--sm .plate__text { font-size: .86rem; } /* ---------- EPS status cards ---------- */ .status-card { border-radius: var(--radius); padding: 1.1rem var(--pad); border: 2px solid var(--line); background: var(--surface); display: grid; gap: .7rem; justify-items: center; text-align: center; } .status-card__head { display: flex; align-items: center; gap: .5rem; font-weight: 750; font-size: 1.05rem; } .status-card__figure { font-size: 2rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin: 0; } .status-card__meta { margin: 0; color: var(--muted); font-size: .9rem; } .status-card--alert { border-color: var(--alert); background: linear-gradient(180deg, var(--alert-deep), var(--surface) 70%); } .status-card--alert .status-card__head, .status-card--alert .status-card__figure { color: var(--alert-ink); } .status-card--clear { border-color: var(--clear); background: linear-gradient(180deg, var(--clear-deep), var(--surface) 70%); } .status-card--clear .status-card__head { color: var(--clear-ink); } .status-card--warn { border-color: var(--signal); background: linear-gradient(180deg, var(--signal-deep), var(--surface) 70%); } .status-card--warn .status-card__head { color: var(--signal-ink); } .status-card--muted { border-color: var(--line); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tap); padding: 0 1.1rem; border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; background: var(--surface-2); color: var(--text); } .btn:hover { filter: brightness(1.08); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn--primary { background: var(--signal); color: #14100A; } .btn--danger { background: var(--alert); color: #fff; } .btn--ghost { background: transparent; border-color: var(--line); color: var(--text); } .btn--block { width: 100%; } .btn--lg { min-height: 56px; font-size: 1.05rem; } .btn--sm { min-height: 38px; padding: 0 .7rem; font-size: .85rem; } .btn-row { display: flex; gap: .6rem; flex-wrap: wrap; } .btn-row .btn { flex: 1 1 auto; } /* ---------- Forms ---------- */ label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .3rem; } input, select, textarea { width: 100%; min-height: var(--tap); padding: .6rem .75rem; background: var(--ink); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; } textarea { min-height: 96px; } input:focus, select:focus, textarea:focus { border-color: var(--signal); outline: none; box-shadow: 0 0 0 3px rgba(255,199,44,.18); } .field { margin-bottom: .85rem; } .field-row { display: grid; gap: .85rem; } .field-hint { font-size: .78rem; color: var(--muted); margin: .3rem 0 0; } .input-plate { font-family: var(--plate-face); font-size: 1.5rem; font-weight: 700; letter-spacing: .1em; text-align: center; text-transform: uppercase; min-height: 60px; } /* ---------- Flash & alerts ---------- */ .flash { border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid var(--line); background: var(--surface); } .flash--success { border-color: rgba(33,192,122,.5); background: var(--clear-deep); } .flash--error { border-color: rgba(255,74,61,.5); background: var(--alert-deep); } .flash--warn { border-color: rgba(255,199,44,.5); background: var(--signal-deep); } .offline-bar { background: var(--alert-deep); border: 1px solid var(--alert); color: #FFC9C4; border-radius: var(--radius-sm); padding: .7rem 1rem; margin-bottom: 1rem; font-size: .9rem; } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: .9rem; } th, td { padding: .65rem .6rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } th { color: var(--muted); font-weight: 600; font-size: .78rem; white-space: nowrap; } tbody tr:hover { background: var(--surface-2); } .pill { display: inline-block; padding: .18rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; } .pill--alert { background: var(--alert-deep); color: var(--alert-ink); border: 1px solid rgba(255,74,61,.4); } .pill--clear { background: var(--clear-deep); color: var(--clear-ink); border: 1px solid rgba(33,192,122,.4); } .pill--warn { background: var(--signal-deep); color: var(--signal-ink); border: 1px solid rgba(255,199,44,.4); } .pill--muted { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); } /* ---------- Detection / record list (mobile friendly) ---------- */ .record-list { display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; } .record { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; background: var(--surface); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); padding: .7rem .8rem; color: inherit; text-decoration: none; } .record--alert { border-left-color: var(--alert); } .record--clear { border-left-color: var(--clear); } .record--warn { border-left-color: var(--signal); } .record--muted { border-left-color: var(--line); } .record__body { min-width: 0; } .record__meta { margin: .2rem 0 0; color: var(--muted); font-size: .78rem; } .record__amount { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9rem; } .empty { text-align: center; color: var(--muted); padding: 2rem 1rem; } .empty h3 { color: var(--text); } /* ---------- Filters & pager ---------- */ .filters { display: grid; gap: .6rem; margin-bottom: 1rem; } .pager { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem 0; color: var(--muted); font-size: .9rem; } .pager a { color: var(--signal-ink); text-decoration: none; font-weight: 650; } /* ---------- Detail lists ---------- */ .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; } .detail-grid > div { min-width: 0; } .detail-grid dt { color: var(--muted); font-size: .76rem; margin-bottom: .15rem; } .detail-grid dd { margin: 0; font-weight: 600; word-break: break-word; } /* ---------- Auth screen ---------- */ .auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--pad); background: radial-gradient(1000px 420px at 50% -10%, rgba(255,199,44,.10), transparent 70%), var(--ink); } .auth__card { width: 100%; max-width: 380px; } .auth__brand { text-align: center; margin-bottom: 1.5rem; } .auth__plate { margin-bottom: .9rem; } .auth__title { font-size: 1.35rem; margin-bottom: .25rem; } .auth__sub { color: var(--muted); font-size: .9rem; margin: 0; } .demo-creds { margin-top: 1rem; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: .8rem; } .demo-creds code { color: var(--signal-ink); } /* ---------- Footer ---------- */ .pagefoot { max-width: var(--shell-max); margin: 0 auto; padding: 1.25rem var(--pad) calc(90px + var(--safe-bottom)); color: var(--muted); font-size: .78rem; border-top: 1px solid var(--line-soft); } .pagefoot p { margin: 0 0 .3rem; } .pagefoot__legal { opacity: .8; } /* ---------- Print ---------- */ @media print { .topbar, .sidenav, .tabbar, .pagefoot, .btn { display: none !important; } body { background: #fff; color: #000; } .panel, .stat { border-color: #ccc; background: #fff; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }