/* Self-hosted Noto Sans variable fonts (SIL Open Font License) — ported
1:1 from pgas-platform/frontend/src/styles/fonts.css. Same files, same
@font-face declarations, so text metrics match exactly. */
@font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/NotoSans-Variable.ttf") format("truetype-variations");
}
@font-face {
font-family: "Noto Sans";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/NotoSans-Italic-Variable.ttf") format("truetype-variations");
}
@font-face {
font-family: "Noto Sans Devanagari";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/NotoSansDevanagari-Variable.ttf") format("truetype-variations");
}
@font-face {
font-family: "Noto Sans Gujarati";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/NotoSansGujarati-Variable.ttf") format("truetype-variations");
}
/* Design tokens ported 1:1 from pgas-platform/frontend/src/theme/tokens.ts */
:root {
--color-primary: #162f6a;
--color-primary-light: #d2dfff;
--color-info: #0d6efd;
--color-success: #198754;
--color-success-light: #e6f4ec;
--color-warning: #ffc107;
--color-warning-light: #fff6dd;
--color-error: #dc3545;
--color-error-light: #fbe4e7;
--color-bg: #ffffff;
--color-text: #150202;
--color-text-secondary: #606060;
--color-divider: #c6c6c6;
--color-divider-strong: #8e8e8e;
--color-neutral-bg: #ebeaea;
--radius: 3px;
--container-max-width: 1400px;
--touch-target-min: 44px;
/* fontStackByScript from tokens.ts — per-script fallback stacks, never
falling back to a non-Unicode font. */
--font-en: "Noto Sans", sans-serif;
--font-hi: "Noto Sans Devanagari", "Noto Sans", sans-serif;
--font-gu: "Noto Sans Gujarati", "Noto Sans", sans-serif;
--font-family: var(--font-en);
}
/* The active selects the per-script stack, matching
buildTheme(step, highContrast, language)'s fontFamily selection. */
html[lang="hi"] {
--font-family: var(--font-hi);
}
html[lang="gu"] {
--font-family: var(--font-gu);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-family);
color: var(--color-text);
background: var(--color-bg);
/* MUI CssBaseline's global default — inherited by everything that
doesn't set its own line-height (links, paragraphs, table body cells,
footer text, badges...), which is most of the app. Elements with their
own explicit variant override (headings, buttons, table head cells,
etc.) still win over this via normal cascade specificity. */
line-height: 1.5;
}
a {
color: inherit;
}
.container {
width: 100%;
max-width: var(--container-max-width);
margin-inline: auto;
padding-inline: 16px;
}
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ---------- Skip link ---------- */
.skip-link {
position: fixed;
z-index: 1500;
top: 12px;
left: 12px;
transform: translateY(-170%);
padding: 6px 8px;
background: var(--color-bg);
color: var(--color-text);
border: 2px solid var(--color-text);
font-weight: 800;
text-decoration: underline;
transition: transform 0.2s ease;
}
.skip-link:focus {
transform: translateY(0);
outline: 3px solid var(--color-warning);
outline-offset: 2px;
}
/* ---------- Header ---------- */
.header-topbar {
background: var(--color-bg);
border-bottom: 1px solid var(--color-divider);
padding-block: 6px;
}
.header-topbar .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-height: 40px;
}
.header-gov-line {
display: flex;
align-items: center;
gap: 8px;
}
.header-gov-line-text {
display: flex;
flex-direction: column;
gap: 2px;
padding-left: 10px;
border-left: 1px solid var(--color-divider);
}
.header-flag-icon {
width: 48px;
height: auto;
flex-shrink: 0;
}
.header-gov-line span {
font-size: 0.75rem;
font-weight: 700;
color: var(--color-text-secondary);
line-height: 1.3;
}
.header-gov-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 800;
text-decoration: none;
font-size: 0.875rem;
color: var(--color-text);
}
.header-icon-buttons {
display: flex;
gap: 8px;
}
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--touch-target-min);
min-height: var(--touch-target-min);
border: 1px solid var(--color-divider);
border-radius: var(--radius);
background: var(--color-bg);
color: var(--color-primary);
cursor: pointer;
}
.icon-btn:hover {
background: var(--color-neutral-bg);
}
.header-main {
background: var(--color-bg);
border-bottom: 1px solid var(--color-divider);
}
.header-main .container {
display: flex;
padding-block: 12px;
min-height: 90px;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.header-org {
display: flex;
align-items: center;
gap: 16px;
}
.header-org-logo {
height: 56px;
width: auto;
flex-shrink: 0;
}
.header-org-name {
font-size: 1rem;
font-weight: 900;
line-height: 1.35;
color: var(--color-primary);
margin: 0;
}
.header-org-authority {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary);
margin: 2px 0 0;
}
.header-right {
display: flex;
align-items: center;
gap: 16px;
}
.header-secondary-logo {
height: 40px;
width: 40px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
}
.header-mopsw-logo {
height: 40px;
width: auto;
flex-shrink: 0;
}
.header-clock {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-primary-light);
border: 1px solid var(--color-primary);
color: var(--color-primary);
font-weight: 800;
font-size: 0.875rem;
border-radius: var(--radius);
padding: 8px 16px;
}
.header-user-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: var(--color-primary-light);
color: var(--color-primary);
cursor: pointer;
}
.header-user-btn:hover {
filter: brightness(0.95);
}
.header-user-menu-wrap {
position: relative;
}
.header-user-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 220px;
background: var(--color-bg);
border: 1px solid var(--color-divider);
border-radius: var(--radius);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
z-index: 1200;
padding: 8px 0;
}
.header-user-menu-info {
padding: 8px 16px;
}
.header-user-menu-name {
font-weight: 700;
font-size: 0.875rem;
margin: 0;
}
.header-user-menu-role,
.header-user-menu-org {
font-size: 0.75rem;
color: var(--color-text-secondary);
margin: 2px 0 0;
}
.header-user-menu-divider {
border: none;
border-top: 1px solid var(--color-divider);
margin: 8px 0;
}
.header-user-menu-item {
display: block;
width: 100%;
text-align: left;
padding: 10px 16px;
background: none;
border: none;
font-family: inherit;
font-size: 0.875rem;
cursor: pointer;
}
.header-user-menu-item:hover {
background: var(--color-neutral-bg);
}
/* ---------- Weighbridge nav bar ---------- */
.wb-nav {
background: var(--color-primary);
width: 100%;
margin: 0;
border-radius: 0;
}
.wb-nav .container.wb-nav-row {
min-height: 116px;
padding-block: 28px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: 12px;
}
.wb-nav-identity {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #fff;
flex-shrink: 0;
}
.wb-nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.14);
flex-shrink: 0;
overflow: hidden;
}
.wb-nav-identity-text {
display: flex;
flex-direction: column;
line-height: 1.3;
white-space: nowrap;
}
.wb-nav-title {
font-size: 1.5rem;
font-weight: 800;
}
.wb-nav-subtitle {
font-size: 1rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
}
.wb-nav-right {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
.wb-nav-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 13px 20px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
color: #fff;
font-size: 0.92rem;
font-weight: 700;
white-space: nowrap;
}
.wb-nav-case {
min-width: 0;
border-radius: 999px;
border: none;
padding: 13px 20px;
font-family: inherit;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.4375;
}
.wb-nav-case.is-success {
background: var(--color-primary);
border: 1px solid rgba(255, 255, 255, 0.35);
color: #fff;
}
.wb-nav-case.is-alert {
background: var(--color-primary);
border: 1px solid rgba(255, 255, 255, 0.35);
color: #fff;
}
.wb-nav-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.14);
color: #fff;
cursor: pointer;
flex-shrink: 0;
}
.wb-nav-icon-btn:hover {
background: rgba(255, 255, 255, 0.24);
}
.wb-nav .header-user-menu-wrap {
position: relative;
}
.wb-nav .header-user-menu {
color: var(--color-text, #1a1a1a);
}
/* ---------- Footer ---------- */
.footer {
margin-top: auto;
background: var(--color-primary);
color: #fff;
}
.footer-compact .footer-compact-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding-block: 20px;
font-size: 0.95rem;
}
.footer-compact-copyright {
white-space: nowrap;
color: rgba(255, 255, 255, 0.85);
}
.footer-compact-links {
display: flex;
align-items: center;
gap: 32px;
}
.footer-compact-links a {
color: #fff;
text-decoration: none;
white-space: nowrap;
}
.footer-compact-updated {
white-space: nowrap;
color: rgba(255, 255, 255, 0.85);
}
.footer:not(.footer-compact) .container {
padding-block: 24px;
}
.footer h2 {
font-size: 0.875rem;
font-weight: 800;
line-height: 1.57;
letter-spacing: 0.5px;
margin: 0 0 12px;
}
.footer-links-block h2 {
border-left: 3px solid var(--color-info);
padding-left: 8px;
}
.footer-top {
display: flex;
gap: 32px;
flex-wrap: wrap;
}
.footer-links-block {
flex: 2;
min-width: 260px;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 24px;
row-gap: 12px;
}
.footer-links a {
font-weight: 700;
font-size: 0.9rem;
text-decoration: none;
color: #fff;
}
.footer-links a:hover {
text-decoration: underline;
}
.footer-map-block {
flex: 1;
min-width: 260px;
}
.footer-map-frame {
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: var(--radius);
overflow: hidden;
height: 160px;
}
.footer-map-frame iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.footer-map-link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
font-size: 0.85rem;
font-weight: 700;
color: #fff;
text-decoration: none;
}
.footer-map-link:hover {
text-decoration: underline;
}
.footer-divider {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.2);
margin: 24px 0;
}
.footer-badges {
display: flex;
justify-content: flex-end;
gap: 12px;
}
.footer-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: #fff;
color: var(--color-text);
border-radius: var(--radius);
padding: 8px 14px;
font-weight: 800;
font-size: 0.8rem;
text-decoration: none;
}
.footer-caption {
display: block;
opacity: 0.85;
font-size: 0.75rem;
line-height: 1.4;
}
.footer-ownership {
font-weight: 700;
margin-top: 8px;
font-size: 0.875rem;
line-height: 1.5;
}
/* ---------- Breadcrumb ---------- */
.breadcrumb {
display: flex;
gap: 8px;
align-items: center;
font-size: 1rem;
line-height: 1.5;
color: var(--color-text-secondary);
margin-bottom: 8px;
}
.breadcrumb a {
text-decoration: none;
color: var(--color-text-secondary);
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb .current {
color: var(--color-text);
}
/* ---------- Buttons ----------
Ported from the app's MuiButton theme override (theme/components.ts),
not MUI's own library defaults — the app's own override wins for every
value below (weight, heights, outlined colors). */
.btn {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: inherit;
font-weight: 800;
font-size: 0.875rem;
line-height: 1.75;
border-radius: var(--radius);
padding: 0 20px;
min-height: 44px;
cursor: pointer;
border: 1px solid transparent;
text-decoration: none;
transition: background-color 0.15s ease;
}
.btn:disabled {
cursor: not-allowed;
opacity: 1;
background: var(--color-neutral-bg) !important;
/* MUI Button disabled text is always action.disabledText (rgba(0,0,0,.26)),
not the theme's secondary text color. */
color: rgba(0, 0, 0, 0.26) !important;
border-color: var(--color-divider) !important;
}
.btn-contained {
background: var(--color-primary);
color: #fff;
}
.btn-contained:hover:not(:disabled) {
background: var(--color-primary);
}
/* outlined + color="primary" (the default) */
.btn-outlined {
background: var(--color-bg);
color: var(--color-primary);
border-color: var(--color-divider-strong);
}
.btn-outlined:hover:not(:disabled) {
background: var(--color-primary-light);
border-color: var(--color-divider-strong);
}
/* outlined + color="error" (the CGP-lookup Retry button) */
.btn-outlined-error {
background: var(--color-error-light);
color: var(--color-error);
border-color: var(--color-error);
}
.btn-small {
min-height: 40px;
font-size: 0.82rem;
padding: 0 12px;
}
.btn-large {
min-height: 58px;
font-size: 1.15rem;
font-weight: 800;
width: 100%;
}
/* ---------- Card ---------- */
.card {
border: 1px solid var(--color-divider);
border-radius: var(--radius);
background: var(--color-bg);
height: 100%;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px 0;
}
/* Keeps the Captured Images badge the same pill size regardless of whether
the case renders the shorter "No Image Captured" or longer "Images from
Live Cameras" text, so the card header looks identical across scenarios. */
.card-header .status-badge {
white-space: nowrap;
}
.card-header h3 {
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
margin: 0;
}
.card-content {
padding: 16px;
flex: 1;
min-height: 0;
}
/* ---------- Field label / inputs ---------- */
.field-label {
display: flex;
align-items: center;
gap: 4px;
font-weight: 700;
font-size: 0.875rem;
line-height: 1.4375;
margin-bottom: 6px;
}
.field-label.required::after {
content: "*";
color: var(--color-error);
}
.text-input {
font-family: inherit;
font-size: 1rem;
padding: 10px 12px;
border: 1px solid var(--color-divider);
border-radius: var(--radius);
background: var(--color-bg);
color: var(--color-text);
width: 100%;
min-height: var(--touch-target-min);
}
.text-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 1px var(--color-primary);
}
.text-input:disabled {
background: var(--color-neutral-bg);
color: var(--color-text-secondary);
}
select.text-input {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 0 32px 0 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
}
.weight-input {
height: 72px;
font-size: 1.25rem;
font-weight: 700;
}
#override-reason-code {
height: 40px;
min-height: 40px;
padding: 8.5px 14px;
}
#override-remarks {
height: 150px;
min-height: 0;
padding: 10px 14px;
line-height: 1.4375;
resize: none;
}
/* ---------- Grid helpers ---------- */
.grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 900px) {
.grid-2 {
grid-template-columns: 1fr;
}
}
.stack {
display: flex;
flex-direction: column;
gap: 12px;
}
/* ---------- Dashboard page ----------
The page scrolls like any normal page (min-height, not a fixed/clipped
viewport) — every case (success / no-cgp / no-anpr / no-truck) renders at
its natural height and the browser scrolls if a case's content runs
longer than the viewport, instead of clipping anything. */
.dashboard-page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.dashboard-main {
padding-block: 14px 16px;
flex: 1;
display: flex;
flex-direction: column;
}
.dashboard-grid {
display: grid;
flex: 1;
min-height: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
/* Minimums measured from actual rendered content across all four scenarios
(via headless-browser measurement, not guessed): row 1 needs 471px to
fit the "Manual Entry" case's weight-capture form without it being the
odd one out; row 2 needs 136px to fit the CGP-validation alert+badges
row. Every other scenario now gets that same floor instead of shrinking
to its own lighter content. Row 1 caps at 1fr (fills remaining space);
row 2 stays content-sized above its floor. */
grid-template-rows: minmax(471px, 1fr) minmax(136px, auto);
gap: 16px;
}
@media (max-width: 900px) {
.dashboard-grid {
grid-template-columns: 1fr;
grid-template-rows: repeat(4, minmax(128px, auto));
}
}
.dashboard-cell {
min-height: 0;
}
/* Weight-capture card: left side (input, mode toggle, submit) sits at its
natural height, top-aligned; right side (Tare/Gross) is a 2-row `fr` grid
that fills the card's full height evenly — same technique as the source's
WeightCaptureCard (Grid + Stack with gridTemplateRows: repeat(n, 1fr)). */
.capture-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
height: 100%;
min-height: 0;
}
.capture-left {
height: 100%;
display: flex;
align-items: stretch;
}
.capture-stack {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
.capture-stack > .btn-large {
margin-top: auto;
}
.capture-right {
height: 100%;
min-height: 0;
}
.capture-right-grid {
height: 100%;
min-height: 0;
display: grid;
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.cell-fill {
height: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
.cell-fill .cgp-placeholder {
flex: 1;
min-height: 0;
}
.validation-wrap,
.detail-wrap {
height: 100%;
min-height: 60px;
display: flex;
align-items: center;
}
.validation-wrap > *,
.detail-wrap > * {
width: 100%;
}
/* ---------- KPI cards ---------- */
.kpi-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
@media (max-width: 800px) {
.kpi-row {
grid-template-columns: 1fr;
}
}
.kpi-card {
border: 1px solid var(--color-divider);
border-radius: var(--radius);
padding: 20px;
border-left: 4px solid var(--kpi-color, var(--color-primary));
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.kpi-card .kpi-value {
font-size: 1.25rem;
font-weight: 800;
color: var(--kpi-color, var(--color-primary));
margin: 0;
}
.kpi-card .kpi-label {
font-size: 0.875rem;
font-weight: 700;
line-height: 1.5;
margin: 2px 0 0;
}
.kpi-card .kpi-subtext {
color: var(--color-text-secondary);
font-size: 0.75rem;
line-height: 1.4;
margin: 2px 0 0;
}
.kpi-card .kpi-icon {
color: var(--kpi-color, var(--color-primary));
font-size: 32px;
}
/* ---------- Status badge ---------- */
.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 10px;
border-radius: var(--radius);
font-size: 0.8rem;
font-weight: 800;
border: 1px solid transparent;
}
.status-badge.tone-success {
background: var(--color-success-light);
color: var(--color-success);
border-color: var(--color-success);
}
.status-badge.tone-warning {
background: var(--color-warning-light);
color: #6b5200;
border-color: var(--color-warning);
}
.status-badge.tone-error {
background: var(--color-error-light);
color: var(--color-error);
border-color: var(--color-error);
}
.status-badge.tone-default {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.status-badge.badge-large {
height: 68px;
width: 100%;
font-size: 1.05rem;
justify-content: flex-start;
padding-inline: 12px;
}
/* ---------- Alert ---------- */
.alert {
display: flex;
align-items: center;
gap: 10px;
height: 68px;
border-radius: var(--radius);
padding: 0 16px;
font-size: 1.125rem;
font-weight: 800;
color: #fff;
}
.alert svg {
flex-shrink: 0;
}
.alert.success {
background: var(--color-success);
}
.alert.error {
background: var(--color-error);
}
.alert.subtle {
height: auto;
min-height: 56px;
padding: 12px 16px;
font-size: 0.875rem;
font-weight: 500;
align-items: flex-start;
}
.alert.error.subtle {
background: var(--color-error-light);
color: var(--color-error);
}
.alert.success.subtle {
background: var(--color-success-light);
color: var(--color-success);
}
.alert.subtle span {
color: var(--color-text-secondary);
font-weight: 500;
}
/* ---------- Detail tile ---------- */
.detail-tile {
border: 1px solid var(--color-divider);
border-radius: var(--radius);
background: var(--color-neutral-bg);
padding: 10px 12px;
height: 100%;
min-width: 0;
}
.detail-tile .label {
display: block;
color: var(--color-text-secondary);
font-weight: 700;
font-size: 0.75rem;
line-height: 1.4;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.detail-tile .value {
display: block;
font-weight: 700;
font-size: 0.875rem;
line-height: 1.5;
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.detail-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
@media (max-width: 900px) {
.detail-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ---------- Empty / error states ---------- */
.empty-state,
.error-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 48px 0;
color: var(--color-text-secondary);
font-size: 0.875rem;
line-height: 1.5;
}
.error-state {
color: var(--color-error);
}
/* ---------- CGP lookup panel ----------
Base state is a neutral empty-state box (icon + caption, normal weight/size).
The giant red "NO CGP"/"NO ANPR" text only applies when `.active` is set —
it must NOT leak onto the plain "No truck detected" empty state. */
.cgp-placeholder {
min-height: 260px;
display: grid;
place-items: center;
border: 2px dashed var(--color-divider);
background: var(--color-neutral-bg);
text-align: center;
}
.cgp-placeholder.active {
color: var(--color-error);
font-size: clamp(3rem, 5vw, 5rem);
line-height: 1;
font-weight: 900;
border-color: var(--color-error);
background: var(--color-error-light);
}
/* ---------- Captured images ----------
Every ancestor down to the image needs an explicit (not just min-) height,
otherwise `height: 100%` on the ![]()
can't resolve and it falls back to
its natural aspect ratio — leaving visible background gaps instead of
actually filling the tile. */
.evidence-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 16px;
height: 100%;
}
.evidence-item {
border: 1px solid var(--color-divider);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.evidence-caption {
display: flex;
justify-content: space-between;
padding: 8px 12px;
background: var(--color-success);
color: #fff;
font-weight: 800;
font-size: 0.875rem;
line-height: 1.5;
flex-shrink: 0;
}
.evidence-caption.failed {
background: var(--color-error);
}
.evidence-body {
position: relative;
flex: 1;
min-height: 0;
display: grid;
place-items: center;
background: var(--color-neutral-bg);
color: var(--color-text-secondary);
font-size: 0.875rem;
}
.evidence-body.filled {
background: var(--color-primary);
color: #fff;
}
.evidence-body img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.evidence-zoom {
position: absolute;
top: 6px;
right: 6px;
min-width: var(--touch-target-min);
min-height: var(--touch-target-min);
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
}
.evidence-zoom:hover {
background: rgba(0, 0, 0, 0.75);
}
/* ---------- Data table ---------- */
.table-toolbar {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 16px;
}
.search-field {
position: relative;
display: flex;
align-items: center;
}
.search-field svg {
position: absolute;
left: 12px;
color: var(--color-text-secondary);
pointer-events: none;
}
.search-field .text-input {
padding-left: 38px;
}
.password-field {
position: relative;
display: flex;
align-items: center;
}
.password-field .text-input {
padding-right: 40px;
}
.password-toggle-btn {
position: absolute;
right: 8px;
background: none;
border: none;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
cursor: pointer;
}
.password-toggle-btn:hover {
color: var(--color-text);
}
.table-wrap {
border: 1px solid var(--color-divider);
border-radius: var(--radius);
overflow-x: auto;
}
table.data-table {
width: 100%;
border-collapse: collapse;
}
table.data-table thead th {
background: var(--color-primary);
color: #fff;
font-weight: 700;
font-size: 0.875rem;
line-height: 24px;
text-align: left;
padding: 16px;
white-space: nowrap;
}
table.data-table thead th:first-child,
table.data-table tbody td:first-child {
border-right: 1px solid var(--color-divider-strong);
}
table.data-table thead th[data-sort-key] {
cursor: pointer;
user-select: none;
}
.th-label {
display: inline-flex;
align-items: center;
gap: 2px;
}
.sort-icon {
opacity: 0;
transition: opacity 0.15s ease, transform 0.15s ease;
}
th[data-sort-key]:hover .sort-icon {
opacity: 0.6;
}
th.sort-asc .sort-icon,
th.sort-desc .sort-icon {
opacity: 1 !important;
}
th.sort-desc .sort-icon {
transform: rotate(180deg);
}
table.data-table tbody tr {
border-bottom: 1px solid var(--color-divider-strong);
}
table.data-table tbody td {
padding: 16px;
font-size: 0.875rem;
white-space: nowrap;
}
table.data-table tbody tr:hover {
background: var(--color-neutral-bg);
}
/* ---------- Table pagination ---------- */
.table-pagination {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 16px;
}
.pagination-info {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 0.875rem;
}
.pagination-rows-label {
margin-left: 10px;
}
#page-size-select {
width: 72px;
padding: 4px 8px;
min-height: 32px;
line-height: 1.4375;
}
.pagination-controls {
display: flex;
align-items: center;
gap: 6px;
}
.pagination-controls .page-number-btn {
min-width: 36px;
padding-inline: 0;
}
/* ---------- Modal ---------- */
.modal-overlay {
position: fixed;
inset: 0;
background: rgb(0 0 0 / 72%);
display: none;
align-items: center;
justify-content: center;
z-index: 1300;
padding: 16px;
}
.modal-overlay.open {
display: flex;
}
.modal-panel {
background: var(--color-bg);
border-radius: var(--radius);
width: 100%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
}
.modal-panel.modal-large {
max-width: 900px;
}
.modal-panel.modal-small {
max-width: 444px;
}
.modal-title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
font-weight: 800;
font-size: 0.9375rem;
line-height: 1.4;
}
.modal-close {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
border: none;
border-radius: 50%;
background: none;
cursor: pointer;
color: var(--color-text-secondary);
padding: 4px;
}
.modal-close:hover {
background: rgba(0, 0, 0, 0.04);
}
.modal-content {
padding: 0 24px 24px;
}
.modal-actions {
padding: 16px 24px;
display: flex;
justify-content: flex-end;
gap: 8px;
border-top: 1px solid var(--color-divider);
}
/* ---------- Toast ---------- */
.toast-region {
position: fixed;
top: 24px;
right: 24px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 1600;
}
.toast {
min-width: 260px;
max-width: 360px;
padding: 12px 16px;
border-radius: var(--radius);
font-weight: 700;
font-size: 0.875rem;
color: #fff;
box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
}
.toast.error {
background: var(--color-error);
}
.toast.success {
background: var(--color-success);
}
/* ---------- Utility ---------- */
.text-secondary {
color: var(--color-text-secondary);
}
.mt-0 {
margin-top: 0;
}
.flex-end {
display: flex;
justify-content: flex-end;
gap: 16px;
}
.hidden {
display: none !important;
}
/* ---------- High contrast palette (DBIM high-contrast branch) ---------- */
:root.high-contrast {
--color-primary: #ffff00;
--color-primary-light: #332b00;
--color-info: #00ffff;
--color-success: #00ff66;
--color-success-light: #000000;
--color-warning: #ffbf00;
--color-warning-light: #000000;
--color-error: #ff8080;
--color-error-light: #000000;
--color-bg: #000000;
--color-text: #ffffff;
--color-text-secondary: #ffffff;
--color-divider: #ffffff;
--color-divider-strong: #ffffff;
--color-neutral-bg: #000000;
}
:root.high-contrast body {
background: var(--color-bg);
color: var(--color-text);
}
/* ---------- Accessibility Controls panel toggles ----------
Ported from the source's global.css (invert/low-saturation/highlight-links/
hide-images/default-cursor) — applied via classes on . */
html.a11y-invert {
filter: invert(1) hue-rotate(180deg);
}
html.a11y-low-saturation {
filter: saturate(0.25);
}
html.a11y-invert.a11y-low-saturation {
filter: invert(1) hue-rotate(180deg) saturate(0.25);
}
html.a11y-highlight-links a {
text-decoration: underline;
outline: 1px solid currentcolor;
outline-offset: 1px;
}
html.a11y-hide-images img {
visibility: hidden;
}
html.a11y-default-cursor,
html.a11y-default-cursor * {
cursor: default;
}
/* ---------- Side panel (language / accessibility drawers) ---------- */
.side-panel-overlay {
position: fixed;
inset: 0;
background: rgb(0 0 0 / 50%);
display: none;
justify-content: flex-end;
z-index: 1700;
}
.side-panel-overlay.open {
display: flex;
}
.side-panel {
width: 100%;
max-width: 400px;
height: 100%;
background: var(--color-bg);
color: var(--color-text);
display: flex;
flex-direction: column;
box-shadow: -4px 0 24px rgb(0 0 0 / 20%);
}
.side-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--color-divider);
}
.side-panel-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
font-size: 1.05rem;
}
.side-panel-close {
display: flex;
align-items: center;
justify-content: center;
border: none;
background: none;
color: var(--color-text-secondary);
cursor: pointer;
padding: 4px;
}
.side-panel-body {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.side-panel-footer {
padding: 16px 20px;
border-top: 1px solid var(--color-divider);
font-size: 0.875rem;
color: var(--color-text-secondary);
}
.language-option-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.language-option {
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 16px;
border: 1px solid var(--color-divider);
border-radius: var(--radius);
background: var(--color-bg);
color: var(--color-text);
text-decoration: none;
cursor: pointer;
}
.language-option:hover {
background: var(--color-neutral-bg);
}
.language-option.selected {
border-color: var(--color-primary);
background: var(--color-primary-light);
}
.language-code-badge {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 800;
flex-shrink: 0;
}
.language-name {
font-weight: 700;
flex: 1;
}
.language-option.selected::after {
content: "✓";
color: var(--color-primary);
font-weight: 800;
}
.a11y-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.a11y-toggle {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 16px;
border: 1px solid var(--color-divider);
border-radius: var(--radius);
background: var(--color-bg);
color: var(--color-text);
cursor: pointer;
font-family: inherit;
}
.a11y-toggle span {
font-weight: 800;
font-size: 0.75rem;
text-align: center;
line-height: 1.3;
}
.a11y-toggle:hover {
background: var(--color-neutral-bg);
}
.a11y-toggle.pressed {
border-color: var(--color-primary);
background: var(--color-primary-light);
color: var(--color-primary);
}
/* ---------- Auth (login) nav ---------- */
.auth-nav {
background: var(--color-primary);
border-bottom: 3px solid var(--color-primary);
}
.auth-nav-inner {
min-height: 44px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.auth-nav-item {
display: block;
white-space: nowrap;
padding: 10px 18px;
color: #fff;
font-weight: 700;
font-size: 0.92rem;
text-decoration: none;
}
.auth-nav-item.disabled {
opacity: 0.6;
cursor: default;
}
/* ---------- Login page ---------- */
.auth-page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.auth-main {
flex: 1;
padding-block: 32px;
}
.auth-grid {
display: grid;
grid-template-columns: 1fr 480px;
gap: 36px;
align-items: start;
}
@media (max-width: 900px) {
.auth-grid {
grid-template-columns: 1fr;
}
}
.info-panel {
border: 1px solid var(--color-divider);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(16, 42, 67, 0.06);
padding: 24px;
display: flex;
flex-direction: column;
gap: 18px;
min-height: 530px;
}
.info-panel-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
border-bottom: 2px solid var(--color-primary-light);
padding-bottom: 12px;
}
.info-panel-title {
font-size: 1.2rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1.25;
margin: 0 0 4px;
}
.info-panel-desc {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-secondary);
line-height: 1.5;
margin: 0;
}
.status-pill {
display: flex;
align-items: center;
gap: 8px;
background: var(--color-success-light);
color: var(--color-success);
border: 1px solid var(--color-success);
border-radius: 20px;
padding: 4px 12px;
font-size: 0.78rem;
font-weight: 800;
white-space: nowrap;
}
.status-pill-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-success);
}
.gate-sim-box {
background: var(--color-primary-light);
border: 2px solid var(--color-primary);
border-radius: var(--radius);
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
}
.gate-sim-head {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-divider);
padding-bottom: 8px;
margin-bottom: 12px;
}
.gate-sim-label {
font-weight: 800;
font-size: 0.88rem;
color: var(--color-primary);
}
.gate-sim-badge {
background: var(--color-success-light);
color: var(--color-success);
border: 1px solid var(--color-success);
border-radius: 12px;
padding: 3px 10px;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.5px;
white-space: nowrap;
}
.gate-sim-body {
flex: 1;
min-height: 300px;
background: var(--color-bg);
border-radius: var(--radius);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--color-text-secondary);
}
.login-card {
border: 2px solid var(--color-primary);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 8px 24px rgba(22, 79, 130, 0.08);
background: var(--color-bg);
display: flex;
flex-direction: column;
}
.login-card-header {
background: var(--color-primary);
color: #fff;
padding: 18px 24px;
}
.login-card-header h2 {
font-size: 1.2rem;
font-weight: 800;
margin: 0;
}
.login-card-body {
padding: 24px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.login-card-body .stack {
display: flex;
flex-direction: column;
gap: 20px;
}