/* =============================================================
OCR Strategy Console — "Workshop" design system
Dark graphite, electric amber, IBM Plex.
============================================================= */
:root {
/* Surface scale — atelier light, warm paper → raised white */
--bg-0: #fbfaf6;
--bg-1: #ffffff;
--bg-2: #f4f1ea;
--bg-3: #e8e3d7;
--bg-4: #d9d3c4;
/* Ink scale — graphite on paper */
--fg-0: #141619;
--fg-1: #2f343c;
--fg-2: #5a6068;
--fg-3: #8a909a;
--fg-4: #b5bac0;
/* Signature accent — burnt amber, construction signage */
--accent: #b45309;
--accent-dim: #92400e;
--accent-bg: rgba(180, 83, 9, 0.07);
--accent-border: rgba(180, 83, 9, 0.32);
/* Semantic */
--ok: #16a34a;
--warn: #d97706;
--err: #dc2626;
--info: #0284c7;
/* Lines */
--line: rgba(20, 22, 25, 0.08);
--line-strong: rgba(20, 22, 25, 0.14);
--line-hot: rgba(180, 83, 9, 0.22);
/* Type */
--font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
--font-display: 'Fraunces', 'IBM Plex Sans', serif;
/* Shape + rhythm */
--radius: 4px;
--radius-lg: 8px;
--rail: 240px;
--rail-collapsed: 64px;
--header-h: 56px;
}
/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.55;
color: var(--fg-1);
background: var(--bg-0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'ss01', 'cv11';
}
/* Layered atmospheric background: warm amber + cool wash, very quiet */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(1100px 700px at 88% -10%, rgba(180, 83, 9, 0.05), transparent 60%),
radial-gradient(900px 600px at 8% 110%, rgba(2, 132, 199, 0.025), transparent 55%);
}
/* Paper grain */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.035;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
color: var(--fg-0);
font-weight: 500;
letter-spacing: -0.01em;
margin: 0;
}
h1 { font-family: var(--font-display); font-weight: 400; font-size: 2.25rem; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
code, pre, .mono { font-family: var(--font-mono); font-variant-ligatures: none; }
/* Technical meta line — small uppercase */
.meta-line {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--fg-3);
display: inline-flex;
align-items: center;
gap: 0.75rem;
}
.meta-line .sep { color: var(--fg-4); }
.meta-line .hot { color: var(--accent); }
/* Strategy workspace tab strip */
.strategy-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--line-strong);
margin: 0 0 1.75rem;
padding: 0;
overflow-x: auto;
}
.strategy-tab {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
color: var(--fg-2);
text-decoration: none;
font-size: 13px;
font-weight: 500;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
white-space: nowrap;
}
.strategy-tab:hover {
color: var(--fg-0);
background: var(--bg-2);
}
.strategy-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.strategy-tab .material-icons { font-size: 18px; opacity: 0.85; }
/* Page header block */
.page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
padding: 1.5rem 0 1.25rem;
border-bottom: 1px solid var(--line);
margin-bottom: 1.5rem;
}
.page-head .title-block h1 {
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
.page-head .title-block h1::before {
content: "// ";
color: var(--accent);
font-family: var(--font-mono);
font-size: 0.85em;
font-weight: 600;
}
.page-head .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* ---------- Layout: shell + rail + body ---------- */
.shell {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: var(--rail) 1fr;
min-height: 100vh;
}
.rail {
position: sticky;
top: 0;
height: 100vh;
border-right: 1px solid var(--line-strong);
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
z-index: 20;
box-shadow: 1px 0 0 rgba(20, 22, 25, 0.02);
}
.rail-brand {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 1.25rem 1.25rem 1.5rem;
border-bottom: 1px solid var(--line);
}
.rail-brand .mark {
width: 32px; height: 32px;
display: grid; place-items: center;
background: var(--accent);
color: #fff;
font-family: var(--font-mono);
font-weight: 600;
font-size: 14px;
border-radius: 3px;
box-shadow: 0 0 0 1px var(--accent-dim) inset, 0 8px 22px -10px rgba(180, 83, 9, 0.55);
}
.rail-brand .wordmark {
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--fg-0);
line-height: 1.2;
}
.rail-brand .wordmark span {
display: block;
color: var(--fg-3);
font-size: 10px;
letter-spacing: 0.18em;
margin-top: 2px;
}
.rail-section {
padding: 1.25rem 1rem 0.5rem;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--fg-3);
}
.rail-nav { display: flex; flex-direction: column; padding: 0.25rem 0.75rem; gap: 2px; }
.rail-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0.75rem;
color: var(--fg-2);
font-size: 13px;
font-weight: 400;
text-decoration: none;
border-radius: var(--radius);
border-left: 2px solid transparent;
transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.rail-link:hover {
color: var(--fg-0);
background: var(--bg-3);
}
.rail-link.active {
color: var(--fg-0);
background: linear-gradient(90deg, var(--accent-bg), transparent);
border-left-color: var(--accent);
}
.rail-link.disabled {
opacity: 0.4;
pointer-events: none;
}
.rail-link .material-icons { font-size: 18px; opacity: 0.85; }
/* Strategy dropdown inside rail */
.rail-select {
padding: 0.75rem 1rem 1rem;
border-bottom: 1px solid var(--line);
}
.rail-select .rail-section {
padding: 0 0 0.4rem;
display: block;
}
.rail-select .rz-dropdown {
width: 100% !important;
background: var(--bg-1) !important;
border: 1px solid var(--line-strong) !important;
border-radius: var(--radius) !important;
min-height: 34px;
}
.rail-select .rz-dropdown:hover { border-color: var(--accent-border) !important; }
.rail-select .rz-dropdown .rz-inputtext {
font-family: var(--font-mono) !important;
font-size: 12px !important;
color: var(--fg-0) !important;
padding: 6px 10px !important;
}
.rz-dropdown-panel {
background: var(--bg-1) !important;
border: 1px solid var(--line-strong) !important;
box-shadow: 0 20px 50px -20px rgba(20, 22, 25, 0.18) !important;
}
.rz-dropdown-panel .rz-dropdown-item {
font-family: var(--font-mono) !important;
font-size: 12px !important;
color: var(--fg-1) !important;
padding: 6px 10px !important;
}
.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight,
.rz-dropdown-panel .rz-dropdown-item:hover {
background: var(--accent-bg) !important;
color: var(--accent) !important;
}
.rail-foot {
margin-top: auto;
padding: 1rem 1rem 1.25rem;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-3);
}
.rail-foot .user-chip {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.rail-foot .user-chip .u { color: var(--fg-0); font-size: 12px; }
.rail-foot .user-chip .r { text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); font-size: 9px; }
.rail-foot .avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--bg-3);
border: 1px solid var(--line-strong);
display: grid; place-items: center;
color: var(--fg-0);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.rail-foot button {
background: transparent;
border: 1px solid var(--line-strong);
color: var(--fg-2);
padding: 5px 8px;
border-radius: var(--radius);
cursor: pointer;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: color 120ms ease, border-color 120ms ease;
}
.rail-foot button:hover { color: var(--accent); border-color: var(--accent); }
/* Rail collapse toggle */
.rail-collapse-btn {
padding: 0.5rem 0.75rem;
display: flex;
justify-content: flex-end;
}
.rail-collapse-btn button {
background: transparent;
border: 1px solid var(--line);
color: var(--fg-3);
width: 28px; height: 28px;
border-radius: var(--radius);
cursor: pointer;
display: grid; place-items: center;
transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.rail-collapse-btn button:hover {
color: var(--accent);
border-color: var(--accent);
background: rgba(180, 83, 9, 0.06);
}
/* Collapsed rail state */
.shell.rail-collapsed {
grid-template-columns: var(--rail-collapsed) 1fr;
}
.shell.rail-collapsed .rail {
width: var(--rail-collapsed);
}
.shell.rail-collapsed .rail-brand .wordmark,
.shell.rail-collapsed .rail-select,
.shell.rail-collapsed .rail-section,
.shell.rail-collapsed .rail-foot .user-chip,
.shell.rail-collapsed .rail-foot button {
display: none;
}
.shell.rail-collapsed .rail-brand {
justify-content: center;
padding: 1.25rem 0.5rem 1.5rem;
}
.shell.rail-collapsed .rail-nav {
padding: 0.25rem 0;
align-items: center;
}
.shell.rail-collapsed .rail-link {
justify-content: center;
padding: 0.6rem;
gap: 0;
border-radius: var(--radius);
width: 42px;
margin: 0 auto;
}
.shell.rail-collapsed .rail-link span:not(.material-icons) {
display: none;
}
.shell.rail-collapsed .rail-foot {
justify-content: center;
padding: 0.75rem 0.5rem;
}
.shell.rail-collapsed .rail-collapse-btn {
justify-content: center;
}
.rail {
transition: width 200ms ease;
}
.shell {
transition: grid-template-columns 200ms ease;
}
.main {
position: relative;
min-width: 0;
padding: 1.5rem 2rem 3rem;
}
/* ---------- Top bar (mobile only) ---------- */
.topbar {
display: none;
position: sticky;
top: 0;
z-index: 15;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: rgba(251, 250, 246, 0.88);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line-strong);
}
.topbar .burger {
background: transparent;
border: 1px solid var(--line-strong);
color: var(--fg-0);
width: 36px; height: 36px;
border-radius: var(--radius);
display: grid; place-items: center;
cursor: pointer;
}
.topbar .wordmark-mobile {
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--fg-0);
}
.topbar .spacer { flex: 1; }
.topbar .role-pill {
font-family: var(--font-mono);
font-size: 10px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 3px 8px;
border: 1px solid var(--accent-border);
border-radius: 2px;
}
/* ---------- Belt-and-braces text/surface overrides ----------
Force Radzen's default text + surfaces to our tokens so no component
slips through with inherited white/transparent backgrounds or white text. */
.rz-body, .rz-content, .rz-layout, .rz-card, .rz-panel, .rz-fieldset,
.rz-sidebar, .rz-header, .rz-footer, .rz-dialog-content, .rz-dialog-titlebar,
.rz-datalist, .rz-data-grid, .rz-grid-table,
.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6,
.rz-text-subtitle1, .rz-text-subtitle2, .rz-text-body1, .rz-text-body2,
.rz-label, .rz-form-field-label, .rz-listbox-item {
color: var(--fg-1);
}
/* Headings specifically */
.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6 {
color: var(--fg-0) !important;
}
/* Generic button (no variant class) — default to Light styling so nothing
renders as transparent-on-transparent */
.rz-button:not(.rz-primary):not(.rz-secondary):not(.rz-light):not(.rz-danger):not(.rz-success):not(.rz-warning):not(.rz-info) {
background: var(--bg-1) !important;
color: var(--fg-1) !important;
border: 1px solid var(--line-strong) !important;
}
/* Info button variant (I originally missed this one) */
.rz-button.rz-info {
background: transparent !important;
color: var(--info) !important;
border: 1px solid rgba(2, 132, 199, 0.4) !important;
}
.rz-button.rz-info:hover { background: rgba(2, 132, 199, 0.08) !important; }
/* Radzen numeric + checkbox — ensure visible on cream */
.rz-spinner, .rz-spinner-input {
background: var(--bg-1) !important;
color: var(--fg-0) !important;
border-color: var(--line-strong) !important;
}
.rz-chkbox-box {
border: 1px solid var(--line-strong) !important;
background: var(--bg-1) !important;
}
.rz-chkbox-box.rz-state-active {
background: var(--accent) !important;
border-color: var(--accent-dim) !important;
}
.rz-chkbox-icon { color: #fff !important; }
/* Remove any lingering white body text fallback from Radzen dark presets */
body, .rz-body-content { color: var(--fg-1); background: var(--bg-0); }
/* Material Icons normalization — Radzen renders , browser italicizes by default */
i.material-icons, .material-icons, .rzi {
font-style: normal !important;
font-family: 'Material Icons', 'Material Icons Outlined' !important;
font-weight: normal;
font-variant-ligatures: none;
text-transform: none;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* ---------- Buttons — override Radzen ---------- */
.rz-button, button.rz-button {
font-family: var(--font-sans) !important;
font-weight: 500 !important;
letter-spacing: 0.01em;
border-radius: var(--radius) !important;
text-transform: none !important;
transition: transform 100ms ease, box-shadow 120ms ease, background 120ms ease;
}
.rz-button.rz-primary {
background: var(--accent) !important;
color: #fff !important;
border: 1px solid var(--accent-dim) !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 16px -10px rgba(180, 83, 9, 0.55);
}
.rz-button.rz-primary:hover {
background: #c2410c !important;
transform: translateY(-1px);
}
.rz-button.rz-light, .rz-button.rz-secondary {
background: var(--bg-2) !important;
color: var(--fg-1) !important;
border: 1px solid var(--line-strong) !important;
}
.rz-button.rz-light:hover, .rz-button.rz-secondary:hover {
background: var(--bg-3) !important;
color: var(--fg-0) !important;
border-color: var(--accent-border) !important;
}
.rz-button.rz-danger {
background: transparent !important;
color: var(--err) !important;
border: 1px solid rgba(244, 63, 94, 0.4) !important;
}
.rz-button.rz-danger:hover {
background: rgba(244, 63, 94, 0.1) !important;
}
.rz-button.rz-success {
background: transparent !important;
color: var(--ok) !important;
border: 1px solid rgba(132, 204, 22, 0.4) !important;
}
.rz-button.rz-success:hover { background: rgba(132, 204, 22, 0.1) !important; }
.rz-button.rz-warning {
background: transparent !important;
color: var(--warn) !important;
border: 1px solid rgba(234, 179, 8, 0.4) !important;
}
/* ---------- Cards / containers ---------- */
.rz-card, .rz-panel {
background: var(--bg-1) !important;
border: 1px solid var(--line) !important;
border-radius: var(--radius-lg) !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 10px 30px -18px rgba(20, 22, 25, 0.12) !important;
}
/* ---------- Inputs ---------- */
.rz-textbox, .rz-password, .rz-dropdown, .rz-textarea, input.rz-textbox, input.rz-password {
background: var(--bg-1) !important;
color: var(--fg-0) !important;
border: 1px solid var(--line-strong) !important;
border-radius: var(--radius) !important;
font-family: var(--font-sans) !important;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.rz-textbox:focus, .rz-password:focus, input.rz-textbox:focus, input.rz-password:focus,
.rz-textbox:focus-within, .rz-textarea:focus-within, .rz-dropdown:focus-within {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.12) !important;
outline: none !important;
}
.rz-textarea textarea { font-family: var(--font-mono) !important; font-size: 12px !important; }
/* ---------- Data grids ---------- */
.rz-data-grid, .rz-grid-table {
background: var(--bg-1) !important;
border: 1px solid var(--line) !important;
border-radius: var(--radius-lg) !important;
overflow: hidden;
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px -16px rgba(20, 22, 25, 0.1) !important;
}
.rz-grid-table thead tr, .rz-data-grid thead tr {
background: var(--bg-2) !important;
border-bottom: 1px solid var(--line-strong) !important;
}
.rz-grid-table th {
font-family: var(--font-mono) !important;
font-size: 10px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
color: var(--fg-3) !important;
padding: 0.75rem 0.875rem !important;
border-color: var(--line) !important;
}
.rz-grid-table td {
border-color: var(--line) !important;
padding: 0.75rem 0.875rem !important;
color: var(--fg-1) !important;
font-variant-numeric: tabular-nums;
}
.rz-grid-table tbody tr {
background: var(--bg-1) !important;
}
.rz-grid-table tbody tr:hover {
background: var(--bg-2) !important;
cursor: pointer;
}
.rz-grid-table tbody tr.rz-selected {
background: var(--accent-bg) !important;
box-shadow: inset 2px 0 0 var(--accent);
}
/* ---------- Badges ---------- */
.rz-badge {
font-family: var(--font-mono) !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
font-weight: 500 !important;
padding: 3px 8px !important;
border-radius: 2px !important;
border: 1px solid transparent;
}
.rz-badge.rz-badge-info { background: rgba(56, 189, 248, 0.12) !important; color: var(--info) !important; border-color: rgba(56, 189, 248, 0.3); }
.rz-badge.rz-badge-success { background: rgba(132, 204, 22, 0.12) !important; color: var(--ok) !important; border-color: rgba(132, 204, 22, 0.3); }
.rz-badge.rz-badge-danger { background: rgba(244, 63, 94, 0.12) !important; color: var(--err) !important; border-color: rgba(244, 63, 94, 0.3); }
.rz-badge.rz-badge-warning { background: rgba(234, 179, 8, 0.12) !important; color: var(--warn) !important; border-color: rgba(234, 179, 8, 0.3); }
.rz-badge.rz-badge-light { background: var(--bg-3) !important; color: var(--fg-3) !important; border-color: var(--line-strong); }
/* ---------- Alerts ---------- */
.rz-alert {
border-radius: var(--radius-lg) !important;
border: 1px solid var(--line-strong) !important;
background: var(--bg-2) !important;
color: var(--fg-0) !important;
}
.rz-alert .rz-alert-message,
.rz-alert .rz-alert-title,
.rz-alert .rz-alert-text {
background: transparent !important;
color: inherit !important;
}
.rz-alert .rz-alert-close-icon,
.rz-alert .rz-icon { color: inherit !important; }
.rz-alert.rz-alert-danger { background: rgba(220, 38, 38, 0.08) !important; border-color: rgba(220, 38, 38, 0.32) !important; color: #8b1a1a !important; }
.rz-alert.rz-alert-info { background: rgba(2, 132, 199, 0.07) !important; border-color: rgba(2, 132, 199, 0.28) !important; color: #0b4a6f !important; }
.rz-alert.rz-alert-warning { background: rgba(217, 119, 6, 0.08) !important; border-color: rgba(217, 119, 6, 0.32) !important; color: #783f04 !important; }
.rz-alert.rz-alert-success { background: rgba(22, 163, 74, 0.08) !important; border-color: rgba(22, 163, 74, 0.32) !important; color: #166534 !important; }
/* ---------- Dialogs ---------- */
.rz-dialog {
background: var(--bg-1) !important;
border: 1px solid var(--line-strong) !important;
border-radius: var(--radius-lg) !important;
box-shadow: 0 40px 120px -30px rgba(20, 22, 25, 0.35), 0 0 0 1px rgba(180, 83, 9, 0.06) !important;
}
.rz-dialog-titlebar {
background: var(--bg-2) !important;
border-bottom: 1px solid var(--line) !important;
}
.rz-dialog-titlebar .rz-dialog-title {
font-family: var(--font-mono) !important;
font-size: 11px !important;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--fg-0) !important;
}
.rz-dialog-mask { background: rgba(20, 22, 25, 0.35) !important; backdrop-filter: blur(4px); }
/* ---------- Notifications ---------- */
.rz-notification .rz-notification-item {
background: var(--bg-1) !important;
border: 1px solid var(--line-strong) !important;
border-left: 3px solid var(--accent) !important;
border-radius: var(--radius) !important;
color: var(--fg-0) !important;
box-shadow: 0 20px 50px -20px rgba(20, 22, 25, 0.25) !important;
}
.rz-notification .rz-notification-item-success { border-left-color: var(--ok) !important; }
.rz-notification .rz-notification-item-error { border-left-color: var(--err) !important; }
.rz-notification .rz-notification-item-warning { border-left-color: var(--warn) !important; }
/* ---------- Legacy small bits ---------- */
.meta-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 2px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 1px solid var(--line-strong);
}
.meta-badge.seed { background: rgba(132, 204, 22, 0.1); color: var(--ok); border-color: rgba(132, 204, 22, 0.3); }
.meta-badge.user { background: rgba(245, 165, 36, 0.1); color: var(--accent); border-color: var(--accent-border); }
.meta-badge.dirty { background: rgba(234, 179, 8, 0.1); color: var(--warn); }
.meta-badge.pristine { background: var(--bg-3); color: var(--fg-3); }
.hash-chip {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-3);
background: var(--bg-2);
padding: 2px 6px;
border-radius: 2px;
border: 1px solid var(--line);
}
/* ---------- Login page ---------- */
.login-wrap {
min-height: 100vh;
display: grid;
place-items: center;
padding: 2rem 1rem;
position: relative;
overflow: hidden;
}
.login-wrap::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(800px 500px at 50% 20%, rgba(180, 83, 9, 0.08), transparent 60%),
linear-gradient(180deg, transparent 50%, rgba(180, 83, 9, 0.02));
pointer-events: none;
}
/* Ruled paper scan-lines */
.login-wrap::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
180deg,
transparent 0 22px,
rgba(20, 22, 25, 0.025) 22px 23px
);
}
.login-card {
position: relative;
z-index: 2;
width: 100%;
max-width: 420px;
padding: 2.25rem;
background: var(--bg-1);
border: 1px solid var(--line-strong);
border-radius: var(--radius-lg);
box-shadow:
0 1px 0 rgba(255,255,255,0.8) inset,
0 40px 100px -30px rgba(20, 22, 25, 0.22),
0 0 0 1px rgba(180, 83, 9, 0.04);
animation: cardRise 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cardRise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.login-mark {
display: flex;
align-items: center;
gap: 0.625rem;
margin-bottom: 1.75rem;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--fg-3);
}
.login-mark .tag { color: var(--accent); }
.login-mark .caret {
display: inline-block;
width: 7px; height: 12px;
background: var(--accent);
animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.login-card h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: 2rem;
line-height: 1.1;
margin-bottom: 0.5rem;
color: var(--fg-0);
}
.login-card h1 em { font-style: italic; color: var(--accent); font-weight: 400; }
.login-card .sub {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--fg-3);
margin-bottom: 2rem;
}
.login-card .field { margin-bottom: 1.125rem; }
.login-card .field label {
display: block;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--fg-3);
margin-bottom: 0.4rem;
}
.login-card .field .rz-textbox,
.login-card .field .rz-password {
width: 100%;
}
.login-card .login-card-footer {
margin-top: 1.25rem;
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--fg-4);
}
.login-card .login-card-footer .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 8px var(--ok);
}
/* ---------- Utilities ---------- */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-sm { gap: 0.5rem; } .gap-md { gap: 1rem; } .gap-lg { gap: 1.5rem; }
.grow { flex: 1; }
.kbd {
display: inline-block;
font-family: var(--font-mono);
font-size: 10px;
padding: 2px 5px;
background: var(--bg-3);
color: var(--fg-2);
border: 1px solid var(--line-strong);
border-radius: 3px;
border-bottom-width: 2px;
}
/* Selection */
::selection { background: var(--accent); color: var(--bg-0); }
/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 0; border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* ---------- Debug inspector page ---------- */
.debug-grid {
display: grid;
grid-template-columns: 1.2fr 2fr 1.4fr;
gap: 1.5rem;
align-items: start;
}
.debug-col {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
opacity: 0;
transform: translateY(16px);
animation: debugColRise 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.debug-col:nth-child(1) { animation-delay: 80ms; }
.debug-col:nth-child(2) { animation-delay: 40ms; } /* image first */
.debug-col:nth-child(3) { animation-delay: 160ms; }
@keyframes debugColRise {
to { opacity: 1; transform: translateY(0); }
}
.debug-col-center { align-items: center; }
/* Image stage — corner bracket frame, drafting-table style */
.debug-image-stage {
position: relative;
padding: 14px;
width: 100%;
display: flex;
justify-content: center;
}
.debug-image-stage::before,
.debug-image-stage::after,
.debug-image-stage > .bracket-tr,
.debug-image-stage > .bracket-bl {
content: "";
position: absolute;
width: 22px;
height: 22px;
border: 1.5px solid var(--accent);
pointer-events: none;
}
.debug-image-stage::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.debug-image-stage::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.debug-image-stage .bracket-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.debug-image-stage .bracket-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.debug-image {
max-width: 100%;
max-height: 560px;
border: 1px solid var(--line-strong);
background: var(--bg-1);
padding: 4px;
border-radius: 2px;
box-shadow:
0 1px 0 rgba(255,255,255,0.85) inset,
0 24px 72px -34px rgba(20, 22, 25, 0.28),
0 2px 0 rgba(180, 83, 9, 0.06);
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.debug-image:hover { transform: scale(1.01); }
.debug-panel {
width: 100%;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 1rem 1.25rem;
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px -18px rgba(20, 22, 25, 0.1);
}
.debug-panel-head {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--accent);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.debug-panel dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.4rem 0.75rem;
margin: 0;
}
.debug-panel dt {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--fg-3);
align-self: center;
}
.debug-panel dd {
margin: 0;
color: var(--fg-0);
font-size: 13px;
word-break: break-word;
}
.debug-panel dd.num { font-variant-numeric: tabular-nums; color: var(--accent-dim); font-weight: 500; }
/* Oversized weight-card grid — the page's signature "hero" moment */
.weight-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 0.875rem;
}
.weight-card {
position: relative;
padding: 0.875rem 1rem 0.75rem;
background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
}
.weight-card::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--accent);
opacity: 0.55;
}
.weight-card .wc-label {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--fg-3);
}
.weight-card .wc-value {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.75rem;
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--fg-0);
font-variant-numeric: tabular-nums;
margin-top: 0.15rem;
}
.weight-card .wc-unit {
font-family: var(--font-mono);
font-size: 10px;
color: var(--fg-3);
margin-left: 0.25rem;
}
.weight-card.wc-empty .wc-value { color: var(--fg-4); font-style: italic; }
.weight-card.wc-total { grid-column: 1 / -1; }
.weight-card.wc-total .wc-value { font-size: 2.25rem; color: var(--accent); }
.weight-card.wc-total::before { width: 3px; opacity: 1; }
/* Role-colored left accent bars */
.weight-card.wc-vehicle::before { background: #22c55e; }
.weight-card.wc-cargo::before { background: #f97316; }
.weight-card.wc-tare::before { background: #a855f7; }
.weight-card.wc-total::before { background: #3b82f6; }
/* Position coordinates shown under weight value */
.weight-card .wc-pos {
font-family: var(--font-mono);
font-size: 10px;
color: var(--fg-3);
margin-top: 0.125rem;
}
/* Trace bar between weight cards and other fields */
.wt-trace-bar {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.5rem;
background: var(--bg-2);
border-radius: var(--radius);
margin-bottom: 0.5rem;
font-size: 11px;
color: var(--fg-2);
flex-wrap: wrap;
}
.wt-trace-bar .sep { color: var(--fg-4); }
/* Detection candidate cards — mirrors the weight-card visual language */
.detection-summary {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.35rem 0.75rem;
margin: 0 0 0.875rem;
padding-bottom: 0.75rem;
border-bottom: 1px dashed var(--line);
}
.detection-summary dt {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--fg-3);
align-self: center;
}
.detection-summary dd { margin: 0; color: var(--fg-0); font-size: 13px; }
.det-source {
font-family: var(--font-mono);
font-size: 10px;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-left: 0.35rem;
}
.detect-cards {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.detect-card {
position: relative;
padding: 0.6rem 0.875rem 0.7rem 1rem;
background: var(--bg-1);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
transition: border-color 120ms ease, transform 120ms ease;
}
.detect-card::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--fg-4);
}
.detect-card:hover {
border-color: var(--line-strong);
transform: translateX(1px);
}
.detect-card.det-winner { background: linear-gradient(90deg, var(--accent-bg), var(--bg-1) 60%); border-color: var(--accent-border); }
.detect-card.det-winner::before { background: var(--accent); width: 3px; }
.detect-card.det-current { border-color: rgba(22, 163, 74, 0.35); }
.detect-card.det-current::before { background: var(--ok); }
.detect-card.det-winner.det-current::before { background: linear-gradient(180deg, var(--accent), var(--ok)); }
.dc-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
}
.dc-case {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.15rem;
letter-spacing: -0.01em;
color: var(--fg-0);
line-height: 1.1;
}
.dc-tags { display: flex; gap: 0.25rem; flex-shrink: 0; }
.dc-tag {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 2px 6px;
border-radius: 2px;
border: 1px solid transparent;
}
.dc-tag-winner {
background: var(--accent-bg);
color: var(--accent);
border-color: var(--accent-border);
}
.dc-tag-current {
background: rgba(22, 163, 74, 0.08);
color: var(--ok);
border-color: rgba(22, 163, 74, 0.3);
}
.dc-match {
font-family: var(--font-mono);
font-size: 10px;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 0.3rem;
}
.dc-match code {
font-family: var(--font-mono);
background: var(--bg-2);
padding: 1px 5px;
border: 1px solid var(--line);
border-radius: 2px;
color: var(--accent);
text-transform: none;
letter-spacing: 0;
font-size: 11px;
margin-left: 0.25rem;
}
.dc-snippet {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--fg-2);
margin-top: 0.4rem;
padding: 0.35rem 0.5rem;
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: 2px;
line-height: 1.4;
word-break: break-word;
}
/* Trigger pills (case-detection keyword editor) */
.trigger-list {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.875rem;
}
.trigger-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 4px 4px 4px 8px;
background: var(--bg-2);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
transition: border-color 120ms ease;
}
.trigger-pill:hover { border-color: var(--accent-border); }
.trigger-pill .tp-prio {
font-family: var(--font-mono);
font-size: 9px;
color: var(--fg-3);
background: var(--bg-1);
padding: 1px 5px;
border: 1px solid var(--line);
border-radius: 2px;
}
.trigger-pill .tp-kw {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-0);
background: transparent;
padding: 0;
border: 0;
}
.trigger-pill .tp-x {
width: 18px; height: 18px;
border: 1px solid var(--line-strong);
background: var(--bg-1);
color: var(--fg-3);
border-radius: 2px;
font-size: 14px;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
padding: 0;
transition: color 100ms ease, border-color 100ms ease, background 100ms ease;
}
.trigger-pill .tp-x:hover {
color: var(--err);
border-color: var(--err);
background: rgba(220, 38, 38, 0.06);
}
.trigger-add {
display: flex;
gap: 0.4rem;
align-items: center;
padding-top: 0.625rem;
border-top: 1px dashed var(--line);
}
.trigger-add .tp-input {
flex: 1;
min-width: 0;
background: var(--bg-1);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 6px 8px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-0);
outline: none;
}
.trigger-add .tp-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(180,83,9,0.12); }
.trigger-add .tp-input-num { flex: 0 0 56px; text-align: right; }
.trigger-add .tp-add {
background: var(--accent);
color: #fff;
border: 1px solid var(--accent-dim);
padding: 6px 12px;
font-family: var(--font-sans);
font-weight: 500;
font-size: 11px;
border-radius: var(--radius);
cursor: pointer;
transition: background 100ms ease;
}
.trigger-add .tp-add:hover { background: #c2410c; }
.trigger-add .tp-add:disabled { background: var(--bg-3); color: var(--fg-4); border-color: var(--line-strong); cursor: not-allowed; }
.config-pre, .ocr-pre {
font-family: var(--font-mono);
font-size: 11px;
white-space: pre-wrap;
max-height: 320px;
overflow: auto;
background: var(--bg-0);
padding: 0.75rem;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--fg-1);
margin: 0;
}
.dup-list { list-style: none; padding: 0; margin: 0; }
.dup-list li {
padding: 0.5rem 0;
border-bottom: 1px dashed var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.dup-list li:last-child { border-bottom: none; }
.dup-list li a {
color: var(--fg-0);
text-decoration: none;
font-family: var(--font-mono);
font-size: 12px;
}
.dup-list li a:hover { color: var(--accent); }
.dup-reason {
font-family: var(--font-mono);
font-size: 9px;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 2px 6px;
border: 1px solid var(--line);
border-radius: 2px;
}
.empty-note {
font-size: 12px;
color: var(--fg-3);
font-style: italic;
padding: 0.25rem 0;
}
@media (max-width: 1100px) {
.debug-grid { grid-template-columns: 1fr; }
.debug-col-center { order: -1; }
}
/* ---------- Responsive ---------- */
@media (max-width: 880px) {
.shell { grid-template-columns: 1fr; }
.rail {
position: fixed;
top: 0; left: 0;
width: min(84vw, 300px);
transform: translateX(-100%);
transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 40px 0 80px -20px rgba(0,0,0,0.75);
}
.shell.rail-open .rail { transform: translateX(0); }
.shell.rail-open::before {
content: "";
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(2px);
z-index: 19;
}
.topbar { display: flex; }
.main { padding: 1rem 1.125rem 3rem; }
.page-head { flex-direction: column; gap: 1rem; }
.page-head .actions { width: 100%; }
.page-head .actions .rz-button { flex: 1; }
/* Data grid → card-ish stacked rows on narrow */
.rz-grid-table { font-size: 12px; }
.rz-grid-table th, .rz-grid-table td { padding: 0.5rem 0.5rem !important; }
.login-card { padding: 1.75rem 1.25rem; }
}
@media (max-width: 520px) {
h1 { font-size: 1.5rem; }
.page-head .title-block h1 { font-size: 1.375rem; }
.main { padding: 1rem 0.875rem 3rem; }
}
/* ===== OCR overlay ===== */
.overlay-toggle { margin-bottom: 0.5rem; }
.debug-image-container {
position: relative;
display: inline-block;
max-width: 100%;
}
.debug-image-container .debug-image {
display: block;
max-width: 100%;
}
.ocr-overlay-svg {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
}
.ocr-overlay-svg rect {
fill: rgba(180, 83, 9, 0.08);
stroke: var(--accent);
stroke-width: 1.5;
pointer-events: all;
cursor: crosshair;
}
.ocr-overlay-svg .ocr-word-box:hover {
fill: rgba(180, 83, 9, 0.3);
stroke-width: 2;
}
.ocr-overlay-svg .ocr-word-highlight {
fill: rgba(59, 130, 246, 0.4);
stroke: #3b82f6;
stroke-width: 3;
animation: wordPulse 800ms ease-in-out infinite alternate;
}
@keyframes wordPulse {
from { fill: rgba(59, 130, 246, 0.3); }
to { fill: rgba(59, 130, 246, 0.55); }
}
/* Weight position boxes — role-colored */
.ocr-overlay-svg .wt-box {
stroke-width: 2.5;
pointer-events: all;
cursor: help;
}
.ocr-overlay-svg .wt-box.wt-total { fill: rgba(59, 130, 246, 0.15); stroke: #3b82f6; }
.ocr-overlay-svg .wt-box.wt-vehicle { fill: rgba(34, 197, 94, 0.15); stroke: #22c55e; }
.ocr-overlay-svg .wt-box.wt-cargo { fill: rgba(249, 115, 22, 0.15); stroke: #f97316; }
.ocr-overlay-svg .wt-box.wt-tare { fill: rgba(168, 85, 247, 0.15); stroke: #a855f7; }
.ocr-overlay-svg .wt-box:not(.wt-total):not(.wt-vehicle):not(.wt-cargo):not(.wt-tare) {
fill: rgba(107, 114, 128, 0.15); stroke: #6b7280;
}
.ocr-overlay-svg .wt-label {
pointer-events: none;
font-family: var(--font-mono);
font-weight: 700;
}
.ocr-overlay-svg .wt-box.wt-total + .wt-label { color: #3b82f6; }
.ocr-overlay-svg .wt-box.wt-vehicle + .wt-label { color: #22c55e; }
.ocr-overlay-svg .wt-box.wt-cargo + .wt-label { color: #f97316; }
.ocr-overlay-svg .wt-box.wt-tare + .wt-label { color: #a855f7; }
.layout-badge {
margin-top: 0.375rem;
font-size: 11px;
color: var(--fg-3);
text-align: center;
}
/* ===== Weight resolution trace ===== */
.trace-summary {
font-size: 11px;
color: var(--fg-2);
padding: 0.5rem 0.625rem;
background: var(--bg-2);
border-radius: var(--radius);
margin-bottom: 0.5rem;
line-height: 1.5;
word-break: break-word;
}
.trace-grid {
display: grid;
grid-template-columns: 2rem 1fr 3.5rem 3.5rem 4.5rem;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
margin-bottom: 0.5rem;
}
.trace-hdr {
padding: 0.3rem 0.4rem;
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-3);
background: var(--bg-2);
}
.trace-cell {
padding: 0.35rem 0.4rem;
font-size: 12px;
background: var(--bg-1);
}
.trace-role-total { color: #3b82f6; font-weight: 700; }
.trace-role-vehicle { color: #22c55e; font-weight: 700; }
.trace-role-cargo { color: #f97316; font-weight: 700; }
.trace-role-tare { color: #a855f7; font-weight: 700; }
.trace-meta { margin-top: 0.25rem; }
.trace-meta dt { font-size: 11px; }
.trace-meta dd { font-size: 11px; }
/* ===== Rotation toolbar (above image) ===== */
.rot-toolbar {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 10px;
background: var(--bg-2);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 3px;
width: fit-content;
}
.rot-toolbar .rot-label {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--fg-3);
padding: 0 8px 0 6px;
white-space: nowrap;
}
.rot-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 5px 12px;
background: transparent;
border: 1px solid transparent;
border-radius: 2px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--fg-2);
cursor: pointer;
transition: all 120ms ease;
white-space: nowrap;
}
.rot-btn:hover {
color: var(--fg-0);
background: var(--bg-1);
}
.rot-btn.active {
background: var(--bg-1);
color: var(--accent);
border-color: var(--line-strong);
box-shadow: 0 1px 3px rgba(20, 22, 25, 0.08);
}
/* Dot indicator: green = sample exists, empty = no sample */
.rot-btn .rot-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--fg-4);
flex-shrink: 0;
}
.rot-btn .rot-dot.has-sample { background: var(--ok); box-shadow: 0 0 4px rgba(22, 163, 74, 0.4); }
/* Action row below the rotation selector */
.rot-actions {
display: flex;
align-items: center;
gap: 0.375rem;
margin-top: 4px;
margin-bottom: 8px;
min-height: 26px;
}
.rot-action-btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 3px 10px;
background: transparent;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
color: var(--fg-2);
cursor: pointer;
transition: all 120ms ease;
text-decoration: none;
}
.rot-action-btn:hover { color: var(--fg-0); border-color: var(--accent-border); }
.rot-action-btn.rot-go {
color: var(--ok);
border-color: rgba(22, 163, 74, 0.35);
}
.rot-action-btn.rot-go:hover { background: rgba(22, 163, 74, 0.06); }
.rot-action-btn.rot-create {
color: var(--warn);
border-color: rgba(234, 179, 8, 0.35);
}
.rot-action-btn.rot-create:hover { background: rgba(234, 179, 8, 0.06); }
.rot-action-btn.rot-create:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.rot-action-btn .material-icons { font-size: 13px; }
/* ===== Orientation panel ===== */
/* Orientation tag selector — compass-inspired direction buttons */
.ori-tags {
display: flex;
align-items: center;
gap: 0.375rem;
flex-wrap: wrap;
margin-bottom: 0.75rem;
}
.ori-tag-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 5px 10px 5px 8px;
background: var(--bg-2);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--fg-2);
cursor: pointer;
transition: all 140ms ease;
letter-spacing: 0.02em;
}
.ori-tag-btn:hover {
border-color: var(--accent-border);
color: var(--fg-0);
background: var(--bg-3);
}
.ori-tag-btn.active {
background: var(--accent-bg);
border-color: var(--accent-border);
color: var(--accent);
box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.08);
}
/* Direction arrow icon inside button */
.ori-tag-btn .ori-arrow {
display: inline-flex;
font-size: 14px;
line-height: 1;
opacity: 0.6;
}
.ori-tag-btn.active .ori-arrow { opacity: 1; }
.ori-tag-btn.ori-correct { border-left: 2px solid var(--ok); }
.ori-tag-btn.ori-flipped { border-left: 2px solid var(--err); }
.ori-tag-btn.active.ori-correct { border-left-color: var(--ok); }
.ori-tag-btn.active.ori-flipped { border-left-color: var(--err); }
/* Auto-detect result badge */
.ori-auto-result {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 4px 10px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fg-2);
}
.ori-auto-result.ori-auto-ok {
background: rgba(22, 163, 74, 0.06);
border-color: rgba(22, 163, 74, 0.25);
color: var(--ok);
}
.ori-auto-result.ori-auto-bad {
background: rgba(220, 38, 38, 0.06);
border-color: rgba(220, 38, 38, 0.25);
color: var(--err);
}
.ori-auto-result .ori-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
}
/* Trigger match pills — show keyword position on the ticket */
.ori-match {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 3px 8px;
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius);
font-size: 11px;
}
.ori-match code {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
background: var(--bg-2);
padding: 0 4px;
border-radius: 2px;
}
.ori-match .ori-pos {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fg-3);
}
.ori-match .ori-coords {
font-family: var(--font-mono);
font-size: 9px;
color: var(--fg-4);
}
/* Keyword adder panel */
.ori-adder {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px dashed var(--line);
}
.ori-adder-head {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--fg-3);
margin-bottom: 0.5rem;
}
.ori-adder-row {
display: flex;
gap: 0.375rem;
align-items: center;
margin-bottom: 0.625rem;
}
.ori-adder-input {
flex: 1;
min-width: 0;
background: var(--bg-1);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 5px 8px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-0);
outline: none;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ori-adder-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.12);
}
.ori-dir-btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 5px 10px;
background: var(--bg-2);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-2);
cursor: pointer;
transition: all 120ms ease;
}
.ori-dir-btn:hover:not(:disabled) {
border-color: var(--accent-border);
color: var(--accent);
background: var(--accent-bg);
}
.ori-dir-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.ori-dir-btn .material-icons { font-size: 14px; }
/* OCR word picker cloud */
.ori-wordcloud {
max-height: 140px;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
gap: 3px;
padding: 0.5rem;
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.ori-word {
display: inline-block;
padding: 2px 6px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--fg-2);
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: 2px;
cursor: pointer;
transition: all 100ms ease;
line-height: 1.3;
}
.ori-word:hover {
border-color: var(--accent-border);
color: var(--accent);
background: var(--accent-bg);
}
.ori-word.selected {
background: var(--accent);
color: #fff;
border-color: var(--accent-dim);
}
/* Position-aware coloring: top-half words get a subtle green dot, bottom gets amber */
.ori-word.pos-top::before,
.ori-word.pos-bottom::before {
content: "";
display: inline-block;
width: 4px; height: 4px;
border-radius: 50%;
margin-right: 3px;
vertical-align: middle;
}
.ori-word.pos-top::before { background: var(--ok); }
.ori-word.pos-bottom::before { background: var(--warn); }
/* ===== Weight order orientation diagram ===== */
.ori-diagram {
margin-top: 0.75rem;
padding: 0.75rem;
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 0.75rem 1.25rem;
}
/* Each ticket mockup */
.ori-ticket {
position: relative;
border: 1.5px solid var(--line-strong);
border-radius: var(--radius);
padding: 0.5rem 0.625rem;
background: var(--bg-1);
transition: all 160ms ease;
}
.ori-ticket.ori-active {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.1), 0 4px 12px -4px rgba(180, 83, 9, 0.15);
}
.ori-ticket.ori-active::after {
content: "\2605";
position: absolute;
top: 4px; right: 6px;
color: var(--accent);
font-size: 12px;
}
.ori-ticket-head {
display: flex;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.4rem;
}
.ori-ticket-arrow {
font-size: 14px;
line-height: 1;
}
.ori-ticket.ori-correct .ori-ticket-arrow { color: var(--ok); }
.ori-ticket.ori-flipped .ori-ticket-arrow { color: var(--err); }
.ori-ticket-label {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--fg-3);
}
/* Vertical ticket: roles stacked top→bottom */
.ori-ticket-v .ori-ticket-roles {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Horizontal ticket: roles in a row left→right */
.ori-ticket-h .ori-ticket-roles {
display: flex;
align-items: center;
gap: 0.25rem;
}
.ori-role-pill {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: 2px;
border: 1px solid var(--line);
background: var(--bg-2);
text-align: center;
}
.ori-role-pill.r-total { color: #3b82f6; border-color: rgba(59, 130, 246, 0.25); background: rgba(59, 130, 246, 0.06); }
.ori-role-pill.r-vehicle { color: #22c55e; border-color: rgba(34, 197, 94, 0.25); background: rgba(34, 197, 94, 0.06); }
.ori-role-pill.r-cargo { color: #f97316; border-color: rgba(249, 115, 22, 0.25); background: rgba(249, 115, 22, 0.06); }
.ori-role-sep {
font-family: var(--font-mono);
font-size: 9px;
color: var(--fg-4);
}
.ori-ticket-h .ori-role-pill { flex: 1; }
/* Legend row */
.ori-diagram-legend {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 0.75rem;
padding-top: 0.25rem;
border-top: 1px dashed var(--line);
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fg-3);
}
.ori-diagram-legend .leg-ok { color: var(--ok); }
.ori-diagram-legend .leg-bad { color: var(--err); }
.ori-diagram-legend .leg-star { color: var(--accent); }
/* ===== Review run page ===== */
.review-stats {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
padding: 0.75rem;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px -18px rgba(20, 22, 25, 0.1);
}
.review-stat {
padding: 0.375rem 0.75rem;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius);
text-align: center;
min-width: 70px;
}
.review-stat-main { border-left: 3px solid var(--accent); }
.review-stat.rs-ok { border-color: rgba(22, 163, 74, 0.3); background: rgba(22, 163, 74, 0.05); }
.review-stat.rs-warn { border-color: rgba(234, 179, 8, 0.3); background: rgba(234, 179, 8, 0.05); }
.review-stat.rs-bad { border-color: rgba(220, 38, 38, 0.3); background: rgba(220, 38, 38, 0.05); }
.rs-label {
display: block;
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--fg-3);
}
.rs-value {
display: block;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 400;
color: var(--fg-0);
font-variant-numeric: tabular-nums;
}
.review-stat.rs-ok .rs-value { color: var(--ok); }
.review-stat.rs-warn .rs-value { color: var(--warn); }
.review-stat.rs-bad .rs-value { color: var(--err); }
.review-stat.rs-active {
outline: 2px solid var(--accent);
outline-offset: -2px;
background: rgba(99, 102, 241, 0.08);
}
.rs-filter-count {
display: block;
font-size: 9px;
font-family: var(--font-mono);
color: var(--accent);
margin-top: 1px;
}
.review-filter-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.75rem;
background: rgba(99, 102, 241, 0.06);
border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: var(--radius);
font-size: 12px;
color: var(--fg-1);
margin-bottom: 0.25rem;
}
.review-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
margin-bottom: 1rem;
overflow: hidden;
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px -18px rgba(20, 22, 25, 0.1);
}
.review-card-head {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 1rem;
background: var(--bg-2);
border-bottom: 1px solid var(--line);
}
/* Navigation bar */
.review-nav {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.5rem 0.75rem;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
outline: none;
}
.review-nav:focus { border-color: var(--accent-border); }
.review-nav-btn {
display: grid;
place-items: center;
width: 36px; height: 36px;
background: var(--bg-2);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
color: var(--fg-1);
cursor: pointer;
transition: all 120ms ease;
}
.review-nav-btn:hover:not(:disabled) { background: var(--bg-3); border-color: var(--accent-border); color: var(--accent); }
.review-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.review-nav-btn .material-icons { font-size: 20px; }
.review-nav-center {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1;
justify-content: center;
}
.review-nav-pos {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: var(--fg-0);
}
.review-nav-id {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-3);
}
.review-nav-url {
font-family: var(--font-mono);
font-size: 10px;
color: var(--accent);
text-decoration: none;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 2px;
}
.review-nav-url:hover { text-decoration: underline; }
/* Single-sample body layout — image left, fields right */
.review-single-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
padding: 1rem;
}
.review-single-img {
display: flex;
justify-content: center;
align-items: flex-start;
}
.review-single-img .debug-image {
max-height: 480px;
}
.review-single-fields {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
/* Dot progress indicator */
.review-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 0.75rem;
padding: 0.5rem;
}
.review-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--bg-4);
border: 1.5px solid var(--line-strong);
cursor: pointer;
transition: all 120ms ease;
}
.review-dot:hover { border-color: var(--accent); transform: scale(1.3); }
.review-dot.dot-active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.2); transform: scale(1.2); }
.review-dot.dot-ok { background: var(--ok); border-color: var(--ok); }
.review-dot.dot-bad { background: var(--err); border-color: var(--err); }
.review-dot.dot-skip { background: var(--warn); border-color: var(--warn); }
/* Keep old card body for backward compat but hide */
.review-card-body {
display: grid;
grid-template-columns: 140px 1fr;
gap: 1rem;
padding: 1rem;
}
.review-img img {
max-width: 120px;
max-height: 160px;
object-fit: contain;
border: 1px solid var(--line-strong);
border-radius: 2px;
}
.review-fields {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.review-field {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0.5rem;
border-radius: var(--radius);
border-left: 2px solid transparent;
transition: background 120ms ease;
}
.review-field.rf-ok { border-left-color: var(--ok); background: rgba(22, 163, 74, 0.04); }
.review-field.rf-bad { border-left-color: var(--err); background: rgba(220, 38, 38, 0.04); }
.rf-label {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fg-3);
width: 100px;
flex-shrink: 0;
}
.rf-value {
font-family: var(--font-mono);
font-size: 13px;
color: var(--fg-0);
font-weight: 500;
font-variant-numeric: tabular-nums;
flex: 1;
}
.rf-actions {
display: flex;
gap: 0.2rem;
flex-shrink: 0;
}
/* Verdict micro-buttons */
.rv-btn {
width: 24px; height: 24px;
border: 1px solid var(--line-strong);
background: var(--bg-1);
border-radius: 2px;
font-size: 13px;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
transition: all 100ms ease;
color: var(--fg-3);
}
.rv-btn:hover { border-color: var(--accent-border); }
.rv-btn.rv-ok.active { background: var(--ok); color: #fff; border-color: var(--ok); }
.rv-btn.rv-bad.active { background: var(--err); color: #fff; border-color: var(--err); }
.rv-btn.rv-skip.active { background: var(--warn); color: #fff; border-color: var(--warn); }
/* ===== Image zoom popup ===== */
.img-popup-mask {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(20, 22, 25, 0.85);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-out;
animation: popupFadeIn 200ms ease;
}
@keyframes popupFadeIn { from { opacity: 0; } to { opacity: 1; } }
.img-popup-close {
position: fixed;
top: 16px; right: 20px;
z-index: 1001;
width: 36px; height: 36px;
display: grid; place-items: center;
background: var(--bg-2);
border: 1px solid var(--line-strong);
border-radius: 50%;
color: var(--fg-0);
font-size: 18px;
cursor: pointer;
transition: background 120ms ease;
}
.img-popup-close:hover { background: var(--err); color: #fff; }
.img-popup-container {
max-width: 95vw;
max-height: 95vh;
overflow: auto;
cursor: grab;
}
.img-popup-img {
max-width: none;
max-height: 90vh;
border: 2px solid var(--line-strong);
border-radius: var(--radius);
box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.6);
transform-origin: center center;
}
/* ===== Extraction rules panel ===== */
.er-section { margin-bottom: 0.75rem; }
.er-label {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-3);
margin-bottom: 0.25rem;
}
.er-textarea, .er-input, .er-select {
width: 100%;
font-family: var(--font-mono);
font-size: 12px;
padding: 0.3rem 0.5rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--bg-0);
color: var(--fg-1);
box-sizing: border-box;
resize: vertical;
}
.er-textarea:focus, .er-input:focus, .er-select:focus {
border-color: var(--accent);
outline: none;
box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.12);
}
.er-textarea:disabled, .er-input:disabled, .er-select:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.er-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.er-textarea::placeholder, .er-input::placeholder {
color: var(--fg-4);
font-style: italic;
}
.er-divider {
border-top: 1px solid var(--line);
margin: 0.75rem 0;
}
.wl-order {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.wl-slot {
display: flex;
align-items: center;
gap: 0.375rem;
}
.wl-pos {
font-family: var(--font-mono);
font-size: 10px;
color: var(--fg-3);
width: 1rem;
text-align: center;
}
.wl-slot .er-select {
flex: 1;
font-size: 11px;
padding: 0.2rem 0.375rem;
}
/* ─── Test runs page ─── */
.tr-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 4rem 2rem;
color: var(--fg-3);
}
.tr-empty p { margin: 0; font-size: 14px; font-weight: 500; color: var(--fg-2); }
.tr-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 0.75rem;
margin-top: 0.5rem;
}
.tr-card {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
cursor: pointer;
transition: border-color 150ms ease, box-shadow 150ms ease;
overflow: hidden;
}
.tr-card:hover {
border-color: var(--accent-border);
box-shadow: 0 4px 20px -8px rgba(180, 83, 9, 0.12);
}
.tr-card-active {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent-border), 0 6px 24px -8px rgba(180, 83, 9, 0.18);
}
.tr-card-head {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 0.875rem;
border-bottom: 1px solid var(--line);
background: var(--bg-2);
}
.tr-run-id {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--accent);
}
.tr-run-ver {
font-family: var(--font-mono);
font-size: 10px;
color: var(--fg-3);
background: var(--bg-3);
padding: 1px 5px;
border-radius: 3px;
}
.tr-run-name {
font-size: 12px;
color: var(--fg-1);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
.tr-unnamed { color: var(--fg-4); font-style: italic; font-weight: 400; }
.tr-run-date {
font-family: var(--font-mono);
font-size: 10px;
color: var(--fg-3);
letter-spacing: 0.02em;
}
.tr-spacer { flex: 1; }
.tr-card-body {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1rem 0.875rem;
}
.tr-score-ring {
position: relative;
width: 56px;
height: 56px;
flex-shrink: 0;
}
.tr-score-ring svg {
width: 100%;
height: 100%;
transform: scaleX(-1);
}
.tr-score-ring circle:last-child {
transition: stroke-dasharray 600ms ease;
}
.tr-score-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
color: var(--fg-0);
}
.tr-score-label small {
font-size: 9px;
font-weight: 400;
color: var(--fg-3);
margin-left: 1px;
}
.tr-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.25rem;
flex: 1;
}
.tr-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
}
.tr-stat-n {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 600;
color: var(--fg-1);
line-height: 1;
}
.tr-stat-n.tr-ok { color: var(--ok); }
.tr-stat-n.tr-bad { color: var(--err); }
.tr-stat-n.tr-skip { color: var(--warn); }
.tr-stat-l {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fg-3);
}
.tr-card-foot {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.875rem;
border-top: 1px solid var(--line);
}
.tr-by {
font-family: var(--font-mono);
font-size: 10px;
color: var(--fg-3);
}
.tr-btn {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 4px 10px;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: transparent;
color: var(--fg-2);
font-family: var(--font-mono);
font-size: 11px;
cursor: pointer;
transition: all 120ms ease;
}
.tr-btn .material-icons { font-size: 14px; }
.tr-btn:hover { color: var(--fg-0); border-color: var(--fg-3); }
.tr-btn-review:hover { color: var(--accent); border-color: var(--accent); }
.tr-btn-del:hover { color: var(--err); border-color: var(--err); }
/* Detail panel */
.tr-detail {
margin-top: 1rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius-lg);
background: var(--bg-1);
overflow: hidden;
}
.tr-detail-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.625rem 0.875rem;
background: var(--bg-2);
border-bottom: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--fg-1);
}
.tr-result-list {
max-height: 400px;
overflow-y: auto;
}
.tr-result-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.375rem 0.875rem;
border-bottom: 1px solid var(--line);
font-size: 12px;
transition: background 100ms ease;
}
.tr-result-row:hover { background: var(--accent-bg); }
.tr-result-row:last-child { border-bottom: none; }
.tr-result-row.vr-ok { border-left: 3px solid var(--ok); }
.tr-result-row.vr-bad { border-left: 3px solid var(--err); }
.tr-result-row.vr-skip { border-left: 3px solid var(--warn); }
.tr-result-id {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--fg-1);
min-width: 60px;
}
.tr-result-method {
font-family: var(--font-mono);
font-size: 10px;
color: var(--fg-3);
min-width: 70px;
}
.tr-result-verdict {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
min-width: 60px;
}
.vr-ok .tr-result-verdict { color: var(--ok); }
.vr-bad .tr-result-verdict { color: var(--err); }
.vr-skip .tr-result-verdict { color: var(--warn); }
.tr-result-actions {
display: flex;
gap: 3px;
}
/* Report column colors — ETransport (blue) vs AI/Phiếu cân (amber) */
.col-et { background: rgba(2, 132, 199, 0.04); }
.col-et-head { background: rgba(2, 132, 199, 0.10) !important; color: #0369a1 !important; }
.col-ai { background: rgba(180, 83, 9, 0.04); }
.col-ai-head { background: rgba(180, 83, 9, 0.10) !important; color: var(--accent-dim) !important; }
.er-copy-btn {
background: transparent;
border: 1px solid var(--line-strong);
color: var(--fg-3);
font-family: var(--font-mono);
font-size: 9px;
padding: 1px 6px;
border-radius: 3px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-left: 4px;
transition: all 120ms ease;
}
.er-copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.er-sublabel {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fg-3);
margin-bottom: 2px;
}
/* ===== Commodity override — structured row editor =====
Replaces the raw JSON textarea so reviewers can add per-row keyword/result/SAP
triples without hand-writing JSON. Save serializes the rows back to JSON for
the wire format. */
.commodity-rows {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.commodity-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1.4fr auto;
gap: 0.4rem;
align-items: start;
}
.commodity-row .row-cell {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.commodity-row .row-cell-label {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-3);
}
.commodity-row .row-remove {
align-self: end;
height: 28px;
width: 28px;
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--bg-0);
color: var(--fg-2);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.commodity-row .row-remove:hover {
background: rgba(220, 38, 38, 0.08);
color: var(--err);
border-color: rgba(220, 38, 38, 0.3);
}
.commodity-row .row-remove:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.commodity-add-row {
align-self: flex-start;
font-family: var(--font-mono);
font-size: 11px;
padding: 0.3rem 0.6rem;
border: 1px dashed var(--line-strong);
border-radius: var(--radius);
background: transparent;
color: var(--fg-2);
cursor: pointer;
margin-top: 0.25rem;
}
.commodity-add-row:hover {
border-color: var(--accent);
color: var(--accent);
}
.commodity-add-row:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Radzen dropdown inside the row needs to match the er-input height */
.commodity-row .rz-dropdown {
min-height: 28px;
font-size: 12px;
}
/* Regex live match preview */
.er-regex-matches {
font-family: var(--font-mono);
font-size: 10px;
color: var(--ok);
background: rgba(22, 163, 74, 0.06);
border: 1px solid rgba(22, 163, 74, 0.15);
border-radius: var(--radius);
padding: 3px 8px;
margin-top: 3px;
max-height: 60px;
overflow-y: auto;
word-break: break-all;
}
/* Report row type badge */
.rpt-type {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
padding: 1px 6px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rpt-type-lay { background: rgba(2, 132, 199, 0.12); color: #0369a1; }
.rpt-type-giao { background: rgba(22, 163, 74, 0.12); color: #15803d; }
/* Report stacked rows (lấy/giao in one cell) */
.rpt-stack { display: flex; flex-direction: column; gap: 2px; }
.rpt-stack-row {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
}
.rpt-stack-label {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-3);
min-width: 28px;
}
.rpt-stack-val {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-1);
min-width: 40px;
}
.rpt-stack-img {
height: 24px;
max-width: 36px;
object-fit: contain;
cursor: pointer;
border-radius: 2px;
border: 1px solid var(--line);
}
.rpt-stack-img:hover { border-color: var(--accent); }
/* Batch form — compact inline bar */
.batch-bar-form {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
padding: 0.5rem 0.75rem;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
}
.batch-sep {
color: var(--fg-4);
font-size: 12px;
}
.batch-fields {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-left: 0.25rem;
}
.batch-chip {
padding: 2px 8px;
border-radius: 10px;
border: 1px solid var(--line);
background: transparent;
color: var(--fg-3);
font-family: var(--font-mono);
font-size: 10px;
cursor: pointer;
transition: all 120ms ease;
}
.batch-chip:hover { border-color: var(--accent-border); color: var(--fg-1); }
.batch-chip-on {
background: var(--accent-bg);
border-color: var(--accent-border);
color: var(--accent);
font-weight: 600;
}
/* Batch job styles */
.batch-status {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.batch-queued { background: rgba(99, 102, 241, 0.12); color: #4338ca; }
.batch-running { background: rgba(180, 83, 9, 0.12); color: var(--accent); animation: batch-pulse 2s ease-in-out infinite; }
.batch-completed { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.batch-failed { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.batch-cancelled { background: rgba(100, 116, 139, 0.12); color: #475569; }
@keyframes batch-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.batch-bar {
flex: 1;
height: 6px;
background: var(--bg-3);
border-radius: 3px;
overflow: hidden;
min-width: 60px;
}
.batch-bar-fill {
height: 100%;
background: var(--accent);
border-radius: 3px;
transition: width 300ms ease;
}
.batch-test-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--fg-2);
cursor: pointer;
user-select: none;
padding: 0 4px;
}
.batch-test-toggle input { margin: 0; cursor: pointer; }
.batch-test-badge {
display: inline-block;
margin-left: 6px;
font-size: 9px;
font-weight: 700;
padding: 1px 5px;
border-radius: 3px;
background: rgba(180, 83, 9, 0.15);
color: var(--accent);
letter-spacing: 0.05em;
vertical-align: middle;
}
/* Strategy settings page */
.settings-section {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
margin-top: 0.5rem;
}
.settings-section-head {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: var(--bg-2);
border-bottom: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--fg-1);
}
.settings-mapping-list {
padding: 0.25rem 0;
}
.settings-mapping-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--line);
font-size: 12px;
}
.settings-mapping-row:last-child { border-bottom: none; }
.settings-mapping-row:hover { background: var(--accent-bg); }
.settings-mapping-type {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.04em;
min-width: 55px;
text-align: center;
}
.smt-kho { background: rgba(2, 132, 199, 0.12); color: #0369a1; }
.smt-cty { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.settings-mapping-value {
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-1);
flex: 1;
}
.settings-add-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-top: 1px solid var(--line);
background: var(--bg-2);
}
/* Report check columns */
.ck-ok { color: var(--ok, #16a34a); font-weight: 700; }
.ck-bad { color: var(--err, #dc2626); font-weight: 700; }
/* ===== Report page redesign ===== */
/* ================================================================
Report toolbar — compact sticky bar that replaces page-head + 2
filter rows + summary card grid. Targets ~88px tall (vs ~280px).
================================================================ */
.rpt-tb {
position: sticky;
top: 0;
z-index: 30;
margin: -0.75rem -1rem 0.5rem;
padding: 0;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--line);
}
.rpt-tb-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 6px 1rem;
flex-wrap: wrap;
}
.rpt-tb-main + .rpt-tb-row { border-top: 1px dashed var(--line); }
.rpt-brand {
display: inline-flex;
align-items: baseline;
gap: 6px;
margin-right: 0.5rem;
flex: 0 0 auto;
}
.rpt-brand-ico {
font-size: 18px !important;
color: var(--accent);
transform: translateY(2px);
}
.rpt-brand-name {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--fg-1);
}
.rpt-brand-meta {
font-size: 10px;
color: var(--fg-3);
letter-spacing: 0.02em;
margin-left: 4px;
}
.rpt-meta-num {
font-family: var(--font-mono, ui-monospace, monospace);
color: var(--fg-1);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.rpt-meta-dot { color: var(--fg-4); padding: 0 2px; }
.rpt-tb-strip {
display: flex;
align-items: center;
gap: 4px;
flex: 1 1 auto;
min-width: 0;
flex-wrap: wrap;
}
.rpt-tb-field {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--bg-1, #fff);
border: 1px solid var(--line);
border-radius: var(--radius, 6px);
padding: 0 4px;
}
.rpt-tb-field-date { padding: 0 4px 0 8px; }
.rpt-tb-prefix {
font-size: 14px !important;
color: var(--fg-3);
}
.rpt-tb-arrow {
color: var(--fg-4);
font-size: 11px;
padding: 0 2px;
}
/* Tighter input styling within the toolbar */
.rpt-tb-strip .rz-dropdown,
.rpt-tb-strip .rz-textbox,
.rpt-tb-strip .rz-datepicker {
height: 28px !important;
font-size: 12px !important;
}
.rpt-tb-strip .rz-textbox { padding: 4px 8px !important; }
/* Pill group — used for Loại + advanced check pills */
.rpt-pillgroup {
display: inline-flex;
border: 1px solid var(--line-strong, #d1d5db);
border-radius: var(--radius, 6px);
overflow: hidden;
background: var(--bg-1, #fff);
}
.rpt-pill {
background: transparent;
border: none;
padding: 4px 10px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
color: var(--fg-3);
transition: all 120ms ease;
border-right: 1px solid var(--line);
}
.rpt-pill:last-child { border-right: none; }
.rpt-pill:hover { background: var(--bg-2, #f8fafc); }
.rpt-pill-on { background: var(--fg-1, #1f2937) !important; color: #fff !important; }
.rpt-pill-ok.rpt-pill-on { background: var(--ok, #16a34a) !important; }
.rpt-pill-bad.rpt-pill-on { background: var(--err, #dc2626) !important; }
/* Right-side toolbar actions */
.rpt-tb-actions {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
}
.rpt-tb-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 28px;
border: 1px solid var(--line);
border-radius: var(--radius, 6px);
background: var(--bg-1, #fff);
color: var(--fg-2);
cursor: pointer;
transition: all 120ms ease;
}
.rpt-tb-toggle:hover { background: var(--bg-2, #f8fafc); border-color: var(--line-strong); }
.rpt-tb-toggle .material-icons { font-size: 16px; }
.rpt-tb-toggle-on {
background: var(--fg-1, #1f2937);
color: #fff;
border-color: var(--fg-1, #1f2937);
}
.rpt-tb-dot {
position: absolute;
top: 4px; right: 4px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent, #b45309);
box-shadow: 0 0 0 2px var(--bg-1, #fff);
}
.rpt-tb-search {
display: inline-flex;
align-items: center;
gap: 4px;
height: 28px;
padding: 0 12px;
border: none;
border-radius: var(--radius, 6px);
background: var(--accent, #b45309);
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: filter 120ms ease;
}
.rpt-tb-search:hover { filter: brightness(1.08); }
.rpt-tb-search:disabled { opacity: 0.6; cursor: not-allowed; }
.rpt-tb-search .material-icons { font-size: 14px; }
.rpt-tb-spin { animation: rpt-tb-spin 900ms linear infinite; }
@keyframes rpt-tb-spin { to { transform: rotate(360deg); } }
/* Reset-all button — appears in the toolbar actions only when some filter is active */
.rpt-tb-reset {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 28px;
border: 1px solid var(--line);
border-radius: var(--radius, 6px);
background: var(--bg-1, #fff);
color: var(--fg-3);
cursor: pointer;
transition: all 120ms ease;
}
.rpt-tb-reset:hover {
color: #dc2626;
border-color: #fca5a5;
background: #fef2f2;
}
.rpt-tb-reset .material-icons { font-size: 16px; }
/* Active-filter chip bar — sticky row beneath the toolbar listing every active filter */
.rpt-tb-active {
background: rgba(255, 255, 255, 0.85);
padding: 5px 1rem 7px;
gap: 6px;
}
.rpt-active-label {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--fg-3);
margin-right: 2px;
align-self: center;
}
.rpt-active-chip {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 2px 2px 8px;
background: var(--bg-2, #f8fafc);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11px;
color: var(--fg-1, #1f2937);
white-space: nowrap;
}
.rpt-active-chip-text {
font-variant-numeric: tabular-nums;
}
.rpt-active-chip-x {
width: 18px; height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
color: var(--fg-3);
border-radius: 50%;
font-size: 16px;
line-height: 1;
transition: background 120ms ease, color 120ms ease;
}
.rpt-active-chip-x:hover {
background: #fee2e2;
color: #dc2626;
}
/* Advanced row */
.rpt-tb-adv {
background: var(--bg-2, #f8fafc);
padding: 6px 1rem;
}
.rpt-adv-cluster {
display: inline-flex;
align-items: center;
gap: 4px;
}
.rpt-adv-label {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-3);
margin-right: 4px;
}
.rpt-adv-mini {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 10px;
color: var(--fg-2);
padding: 0 4px 0 6px;
}
.rpt-adv-sep {
width: 1px;
height: 18px;
background: var(--line);
margin: 0 4px;
}
.rpt-adv-clear {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: auto;
height: 24px;
padding: 0 8px;
border: 1px solid var(--line-strong, #d1d5db);
border-radius: var(--radius, 6px);
background: transparent;
color: var(--fg-2);
font-size: 11px;
cursor: pointer;
transition: all 120ms ease;
}
.rpt-adv-clear:hover { color: var(--err, #dc2626); border-color: var(--err, #dc2626); }
/* Inline summary chip strip — replaces the card-grid summary panel */
.rpt-strip {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 1rem;
background: var(--bg-1, #fff);
border-top: 1px dashed var(--line);
flex-wrap: wrap;
}
.rpt-strip-total {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11px;
color: var(--fg-3);
margin-right: 4px;
}
.rpt-strip-total strong {
font-size: 13px;
color: var(--fg-1);
font-variant-numeric: tabular-nums;
margin-left: 2px;
}
.rpt-strip-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px 2px 2px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg-1, #fff);
cursor: pointer;
transition: all 120ms ease;
font-size: 11px;
color: var(--fg-2);
}
.rpt-strip-chip:hover {
background: var(--bg-2, #f8fafc);
border-color: var(--line-strong, #cbd5e1);
}
.rpt-strip-chip strong {
font-family: var(--font-mono, ui-monospace, monospace);
font-variant-numeric: tabular-nums;
color: var(--fg-1);
font-weight: 700;
min-width: 14px;
text-align: right;
}
.rpt-strip-chip .rpt-err {
cursor: pointer;
pointer-events: none;
}
.rpt-strip-pct {
font-size: 10px;
color: var(--fg-3, #94a3b8);
font-variant-numeric: tabular-nums;
}
.rpt-strip-pct:empty { display: none; }
.rpt-strip-ok strong { color: #16a34a; }
.rpt-strip-bad strong { color: #dc2626; }
.rpt-strip-warn strong { color: #d97706; }
.rpt-strip-auto strong { color: var(--fg-2); }
.rpt-strip-sep {
width: 1px;
height: 16px;
background: var(--line);
margin: 0 2px;
}
.rpt-strip-faded {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-4);
}
.rpt-strip-fieldtag {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
color: var(--fg-2);
padding: 1px 6px;
border-radius: 4px;
background: rgba(220, 38, 38, 0.08);
}
.rpt-strip-fieldtag strong {
color: #b91c1c;
font-family: var(--font-mono, ui-monospace, monospace);
font-variant-numeric: tabular-nums;
}
/* Sticky stack: action bar tucked under summary */
.rpt-action-bar { padding: 6px 1rem; }
/* Loading & empty states */
.rpt-loading {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 3rem 0;
justify-content: center;
color: var(--fg-3);
font-size: 13px;
}
.rpt-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 4rem 0;
color: var(--fg-3);
font-size: 13px;
}
.rpt-empty p { margin: 0; }
/* Stats bar */
.rpt-stats-bar {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 0.75rem 1.25rem;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
margin-bottom: 0.75rem;
}
.rpt-stat {
display: flex;
flex-direction: column;
align-items: center;
min-width: 56px;
}
.rpt-stat-val {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
line-height: 1.1;
color: var(--fg-0);
}
.rpt-stat-ok .rpt-stat-val { color: var(--ok); }
.rpt-stat-bad .rpt-stat-val { color: var(--err); }
.rpt-stat-label {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--fg-3);
margin-top: 2px;
}
/* Accuracy ring */
.rpt-stat-pct {
display: flex;
flex-direction: column;
align-items: center;
margin-left: auto;
}
.rpt-pct-ring {
position: relative;
width: 44px;
height: 44px;
}
.rpt-pct-svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.rpt-pct-track {
fill: none;
stroke: var(--bg-3);
stroke-width: 3;
}
.rpt-pct-fill {
fill: none;
stroke: var(--ok);
stroke-width: 3;
stroke-linecap: round;
transition: stroke-dasharray 600ms ease;
}
.rpt-pct-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--ok);
}
/* Data table */
.rpt-table-wrap {
/* Bounded height + overflow:auto makes the wrap the vertical scroll context
so the sticky | below has somewhere to stick to. The toolbar above
(.rpt-tb) already owns the page-level sticky band. */
overflow: auto;
max-height: calc(100vh - 140px);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--bg-1);
}
.rpt-table {
width: 100%;
min-width: 1500px;
border-collapse: separate;
border-spacing: 0;
font-size: 11px;
line-height: 1.4;
}
/* Header */
.rpt-th {
padding: 6px 8px;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--fg-2);
background: var(--bg-2);
border-bottom: 2px solid var(--line-strong);
text-align: left;
white-space: nowrap;
position: sticky;
/* First header row sits at the wrap top; the sub-header row (rpt-th-sub)
drops down by the height of the first row so both stay frozen. */
top: 0;
z-index: 3;
}
.rpt-th.rpt-th-sub {
/* Second-row headers (sub-headers under the colspan groups). 28px ≈ height
of the first thead row at the current font-size + padding. */
top: 28px;
z-index: 2;
}
.rpt-th-sub { font-weight: 600; border-bottom-width: 1px; font-size: 8.5px; }
/* Sticky headers must be OPAQUE — translucent rgba() backgrounds let rows
bleed through when the table scrolls underneath. Layer a solid var(--bg-2)
base + linear-gradient tint to keep the colored look without transparency. */
.rpt-th-et {
background-color: var(--bg-2);
background-image: linear-gradient(rgba(2, 132, 199, 0.08), rgba(2, 132, 199, 0.08));
color: #0369a1;
border-bottom-color: rgba(2, 132, 199, 0.25);
}
.rpt-th-ai {
background-color: var(--bg-2);
background-image: linear-gradient(rgba(180, 83, 9, 0.08), rgba(180, 83, 9, 0.08));
color: var(--accent-dim);
border-bottom-color: rgba(180, 83, 9, 0.25);
}
.rpt-th-ck {
background-color: var(--bg-2);
background-image: linear-gradient(rgba(107, 114, 128, 0.08), rgba(107, 114, 128, 0.08));
color: var(--fg-2);
text-align: center;
}
/* Cells */
.rpt-td {
padding: 5px 8px;
border-bottom: 1px solid var(--line);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
vertical-align: middle;
}
.rpt-td-et { background: rgba(2, 132, 199, 0.02); }
.rpt-td-ai { background: rgba(180, 83, 9, 0.02); }
.rpt-td-ck { text-align: center; font-size: 12px; }
.rpt-td-note {
cursor: pointer;
max-width: 140px;
color: var(--fg-3);
font-size: 10px;
}
.rpt-td-note:hover { color: var(--accent); }
.rpt-num {
text-align: right;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* Merged trip-level cells */
.rpt-td-merged {
vertical-align: middle;
border-bottom: 2px solid var(--line-strong);
background: var(--bg-1);
}
.rpt-td-trip {
font-family: var(--font-mono);
font-weight: 700;
font-size: 11px;
color: var(--fg-0);
}
.rpt-td-stt {
font-family: var(--font-mono);
font-size: 10px;
color: var(--fg-3);
text-align: center;
}
/* Row states */
.rpt-row:hover td { background: var(--accent-bg) !important; }
.rpt-row-bad td:first-child { border-left: 2px solid var(--err); }
/* Alternating trip groups */
.rpt-group-alt td { background-color: rgba(0,0,0,0.015); }
.rpt-group-alt .rpt-td-et { background: rgba(2, 132, 199, 0.04); }
.rpt-group-alt .rpt-td-ai { background: rgba(180, 83, 9, 0.04); }
.rpt-group-alt .rpt-td-merged { background: var(--bg-2); }
/* Image thumbnail */
.rpt-thumb {
height: 28px;
max-width: 42px;
object-fit: contain;
border-radius: 2px;
border: 1px solid var(--line);
cursor: pointer;
}
.rpt-thumb:hover { border-color: var(--accent); }
/* Wrapper that places the open-sample button next to the thumbnail */
.rpt-thumb-wrap {
display: inline-flex;
align-items: center;
gap: 4px;
}
.rpt-open-sample {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: 1px solid var(--line);
background: var(--bg-1);
border-radius: 3px;
cursor: pointer;
color: var(--fg-2);
}
.rpt-open-sample:hover {
color: var(--accent);
border-color: var(--accent);
}
.cc-tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.cc-search {
width: min(420px, 100%);
height: 34px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--bg-1);
}
.cc-search .material-icons {
font-size: 17px;
color: var(--fg-3);
}
.cc-search input {
min-width: 0;
flex: 1;
border: 0;
outline: 0;
background: transparent;
color: var(--fg-0);
font-size: 12px;
}
.cc-search button {
width: 22px;
height: 22px;
border: 0;
padding: 0;
border-radius: 4px;
background: transparent;
cursor: pointer;
}
.cc-search button:hover {
background: var(--bg-2);
}
.cc-count {
color: var(--fg-3);
font-size: 12px;
white-space: nowrap;
}
.cc-wrap {
overflow: auto;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--bg-1);
}
.cc-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.cc-table th,
.cc-table td {
border-bottom: 1px solid var(--line);
padding: 8px 10px;
text-align: center;
white-space: nowrap;
}
.cc-table th {
position: sticky;
top: 0;
z-index: 1;
background: var(--bg-2);
color: var(--fg-2);
font-weight: 700;
}
.cc-table tr:hover td { background: rgba(15, 23, 42, 0.025); }
.cc-table .cc-default td {
background: rgba(37, 99, 235, 0.045);
}
.cc-strategy {
min-width: 220px;
text-align: left !important;
}
.cc-strategy strong {
display: block;
color: var(--fg-0);
}
.cc-strategy span {
display: block;
margin-top: 2px;
color: var(--fg-3);
font-size: 11px;
}
.cc-updated {
min-width: 150px;
color: var(--fg-3);
font-size: 11px;
}
.cc-toggle {
width: 30px;
height: 30px;
border-radius: 6px;
border: 1px solid var(--line);
background: var(--bg-1);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
cursor: pointer;
}
.cc-toggle:disabled {
opacity: 0.55;
cursor: wait;
}
.cc-toggle.cc-on {
color: #16a34a;
border-color: rgba(22, 163, 74, 0.35);
background: rgba(22, 163, 74, 0.08);
}
.cc-toggle.cc-off {
color: #94a3b8;
background: #f8fafc;
}
.cc-toggle .material-icons {
font-size: 17px;
}
/* Import button in report */
.rpt-import-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: var(--radius);
border: 1px solid var(--line);
background: transparent;
color: var(--fg-3);
cursor: pointer;
transition: all 120ms ease;
}
.rpt-import-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
/* Action bar above table */
.rpt-action-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0;
}
/* Conclusion badge */
.rpt-kl {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 11px;
font-weight: 800;
line-height: 1;
}
.rpt-kl-ok { background: rgba(22, 163, 74, 0.12); color: var(--ok); }
.rpt-kl-bad { background: rgba(220, 38, 38, 0.10); color: var(--err); }
/* Pagination */
.rpt-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 0.75rem 0;
}
.rpt-page-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius);
border: 1px solid var(--line-strong);
background: var(--bg-1);
color: var(--fg-2);
cursor: pointer;
transition: all 120ms ease;
}
.rpt-page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rpt-page-btn:disabled { opacity: 0.35; cursor: default; }
.rpt-page-info {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-3);
min-width: 60px;
text-align: center;
}
/* Note dialog */
.rpt-note-dialog {
background: var(--bg-1);
border: 1px solid var(--line-strong);
border-radius: var(--radius-lg);
padding: 1.25rem;
min-width: 360px;
max-width: 480px;
box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}
.rpt-note-head {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--fg-1);
}
.rpt-note-actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
margin-top: 0.75rem;
}
/* ============================================================
Report Overview (BÁO CÁO TỔNG QUAN) — /overview
============================================================ */
.rov-page {
padding: 1.25rem 1.5rem;
max-width: 1400px;
margin: 0 auto;
color: var(--fg-1);
}
.rov-head {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 1rem;
align-items: center;
margin-bottom: 0.75rem;
}
.rov-title-block { display: flex; align-items: center; gap: 0.75rem; }
.rov-title-icon {
width: 44px; height: 44px;
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: #fff;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 24px;
}
.rov-title {
margin: 0;
color: #1d4ed8;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.02em;
}
.rov-subtitle {
font-size: 11px;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.rov-filter-card {
background: #fff;
border: 1px solid var(--border-1, #e5e7eb);
border-radius: 10px;
padding: 0.5rem 0.75rem;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.rov-filter-label {
font-size: 10px;
color: var(--fg-3);
letter-spacing: 0.08em;
margin-bottom: 0.25rem;
}
.rov-filter-label-secondary {
margin-top: 0.5rem;
}
.rov-filter-row { display: flex; align-items: center; gap: 0.5rem; }
.rov-arrow { color: var(--fg-3); font-size: 14px; }
.rov-apply-btn {
background: #2563eb;
color: #fff;
border: none;
border-radius: 6px;
padding: 4px 14px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 120ms;
}
.rov-apply-btn:hover { background: #1d4ed8; }
.rov-apply-btn:disabled { background: #94a3b8; cursor: not-allowed; }
.rov-export-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 14px;
border: 1px solid var(--border-1, #e5e7eb);
background: #fff;
border-radius: 8px;
color: var(--fg-1);
font-size: 13px;
cursor: pointer;
transition: background 120ms, border-color 120ms;
}
.rov-export-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.rov-export-btn:disabled { color: var(--fg-3); cursor: not-allowed; }
.rov-quick-row {
display: flex;
justify-content: flex-end;
gap: 0.4rem;
margin-bottom: 1rem;
}
.rov-chip {
font-size: 12px;
padding: 4px 12px;
border-radius: 14px;
border: 1px solid var(--border-1, #e5e7eb);
background: #fff;
color: var(--fg-2);
cursor: pointer;
transition: all 120ms;
}
.rov-chip:hover { background: #f1f5f9; }
.rov-chip-on { background: #dbeafe; border-color: #3b82f6; color: #1d4ed8; font-weight: 600; }
/* KPI cards */
.rov-kpi-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.75rem;
margin-bottom: 1rem;
}
.rov-kpi {
background: #fff;
border: 1px solid var(--border-1, #e5e7eb);
border-radius: 12px;
padding: 0.85rem 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
min-width: 0;
}
.rov-kpi-icon {
width: 40px; height: 40px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.rov-kpi-blue .rov-kpi-icon { background: #dbeafe; color: #2563eb; }
.rov-kpi-green .rov-kpi-icon { background: #dcfce7; color: #16a34a; }
.rov-kpi-red .rov-kpi-icon { background: #fee2e2; color: #dc2626; }
.rov-kpi-greenlite .rov-kpi-icon { background: #dcfce7; color: #16a34a; }
.rov-kpi-redlite .rov-kpi-icon { background: #fee2e2; color: #dc2626; }
.rov-kpi-body { min-width: 0; flex: 1; }
.rov-kpi-label {
font-size: 10px;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rov-kpi-value {
font-size: 22px;
font-weight: 700;
line-height: 1.2;
margin: 2px 0;
}
.rov-kpi-value-blue { color: #2563eb; }
.rov-kpi-value-green { color: #16a34a; }
.rov-kpi-value-red { color: #dc2626; }
.rov-kpi-sub {
font-size: 11px;
color: var(--fg-3);
display: flex; align-items: center; gap: 2px;
}
.rov-delta-up { color: #16a34a; }
.rov-delta-down { color: #dc2626; }
/* Charts */
.rov-chart-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.rov-chart-card {
background: #fff;
border: 1px solid var(--border-1, #e5e7eb);
border-radius: 12px;
padding: 1rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.rov-chart-title {
font-size: 13px;
font-weight: 700;
color: var(--fg-1);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rov-svg { width: 100%; height: auto; display: block; }
.rov-chart-empty {
height: 220px;
display: flex; align-items: center; justify-content: center;
color: var(--fg-3);
font-size: 12px;
}
.rov-axis-label { font-size: 10px; fill: #64748b; font-family: var(--font-sans, sans-serif); }
.rov-point-label { font-size: 10px; fill: #1f2937; font-weight: 600; font-family: var(--font-sans, sans-serif); }
.rov-legend {
margin-top: 0.5rem;
font-size: 11px;
color: var(--fg-2);
text-align: center;
}
.rov-legend-dot {
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
margin-right: 4px;
vertical-align: middle;
}
.rov-legend-red { background: #dc2626; }
.rov-legend-green { background: #16a34a; }
/* Detail table */
.rov-table-card {
background: #fff;
border: 1px solid var(--border-1, #e5e7eb);
border-radius: 12px;
padding: 1rem;
margin-bottom: 1rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.rov-table-title {
font-size: 13px;
font-weight: 700;
color: var(--fg-1);
margin-bottom: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rov-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.rov-table thead th {
background: #2563eb;
color: #fff;
text-align: left;
padding: 8px 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 11px;
}
.rov-table thead th.rov-num { text-align: right; }
.rov-table tbody td {
padding: 8px 10px;
border-bottom: 1px solid #f1f5f9;
}
.rov-table tbody tr:hover { background: #f8fafc; }
.rov-table .rov-stt { text-align: center; color: var(--fg-3); }
.rov-table .rov-num { text-align: right; font-variant-numeric: tabular-nums; }
.rov-total-row {
background: #eff6ff;
}
.rov-total-row td { border-top: 2px solid #2563eb; }
.rov-rate-cell { display: flex; align-items: center; gap: 0.5rem; min-width: 160px; }
.rov-rate-pct { font-weight: 600; color: #dc2626; min-width: 50px; }
.rov-rate-bar {
flex: 1;
height: 5px;
background: #fee2e2;
border-radius: 3px;
overflow: hidden;
}
.rov-rate-fill {
height: 100%;
background: linear-gradient(90deg, #f87171, #dc2626);
border-radius: 3px;
}
.rov-rate-fill-good {
background: linear-gradient(90deg, #86efac, #16a34a);
}
.rov-mono {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
font-size: 10px;
color: var(--fg-3, #6b7280);
background: var(--bg-2, #f8fafc);
padding: 1px 6px;
border-radius: 3px;
}
/* Strategy table meta pills (detection summary in card title) */
.rov-table-card .rov-table-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
}
.rov-strat-meta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
text-transform: none;
letter-spacing: 0;
}
.rov-strat-meta-pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 500;
color: var(--fg-2, #4b5563);
background: var(--bg-2, #f8fafc);
border: 1px solid var(--border-1, #e5e7eb);
padding: 2px 8px;
border-radius: 999px;
}
.rov-strat-meta-pill strong {
color: var(--fg-1, #1f2937);
font-variant-numeric: tabular-nums;
}
.rov-strat-meta-detected {
background: #dcfce7;
border-color: #86efac;
color: #15803d;
}
.rov-strat-meta-detected strong { color: #15803d; }
.rov-strat-meta-warn {
background: #fef3c7;
border-color: #fcd34d;
color: #b45309;
}
.rov-strat-meta-warn strong { color: #b45309; }
.rov-footer {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--fg-3);
padding: 0.5rem 0.25rem;
}
.rov-loading, .rov-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem;
gap: 0.75rem;
color: var(--fg-3);
}
@media (max-width: 1100px) {
.rov-kpi-grid { grid-template-columns: repeat(2, 1fr); }
.rov-chart-row { grid-template-columns: 1fr; }
.rov-head { grid-template-columns: 1fr; }
}
/* Clickable bucket rows on the Overview detail table */
.rov-row-click { cursor: pointer; transition: background 120ms; }
.rov-row-click:hover { background: #eff6ff; }
.rov-row-warn { background: #fef3c7; }
.rov-row-warn:hover { background: #fde68a; }
.rov-row-warn .rov-stt {
color: #b45309;
font-weight: 700;
}
/* ============================================================
Error-cause label badges + dialog (TX/PC/AI manual labelling)
============================================================ */
.rpt-err {
display: inline-block;
min-width: 28px;
padding: 1px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-align: center;
color: #fff;
border: none;
cursor: pointer;
user-select: none;
transition: filter 120ms;
}
.rpt-err:hover { filter: brightness(1.1); }
.rpt-err:disabled { cursor: not-allowed; opacity: 0.4; filter: none; }
.rpt-err-ok { background: #16a34a; } /* green — reviewer confirmed correct */
.rpt-err-tx { background: #fb7185; } /* pink — driver */
.rpt-err-pc { background: #f59e0b; } /* amber — physical ticket */
.rpt-err-ai { background: #8b5cf6; } /* violet — AI */
.rpt-err-blank { background: #e5e7eb; color: #94a3b8; }
.rpt-note-cell {
display: flex;
align-items: flex-start;
gap: 6px;
min-height: 16px;
}
.rpt-note-text {
flex: 1;
font-size: 11px;
color: var(--fg-2);
cursor: text;
word-break: break-word;
}
.rpt-label-radios {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0.5rem 0 0.25rem 0;
}
.rpt-label-radio {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 12px;
color: var(--fg-1);
}
/* Dialog: per-field "Field sai" checkbox grid */
.rpt-issue-fields {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px dashed var(--border-1, #e5e7eb);
}
.rpt-issue-fields-label {
font-size: 11px;
color: var(--fg-3);
margin-bottom: 4px;
}
.rpt-issue-fields-grid {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.rpt-issue-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 12px;
border: 1px solid var(--border-1, #e5e7eb);
background: #fff;
font-size: 11px;
cursor: pointer;
user-select: none;
transition: all 120ms;
}
.rpt-issue-chip input { margin: 0; cursor: pointer; }
.rpt-issue-chip:hover { background: #f1f5f9; }
.rpt-issue-chip-on { background: #fee2e2; border-color: #f87171; color: #b91c1c; font-weight: 600; }
.rpt-bulk-apply-toggle {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--fg-2);
cursor: pointer;
margin-bottom: 4px;
}
.rpt-bulk-apply-toggle input { margin: 0; cursor: pointer; }
/* Inline issue tags shown next to label badge on each row */
.rpt-issue-tags {
display: inline-flex;
flex-wrap: wrap;
gap: 2px;
margin-left: 2px;
}
.rpt-issue-tag {
display: inline-block;
font-size: 9px;
padding: 1px 4px;
border-radius: 3px;
background: #fee2e2;
color: #b91c1c;
font-weight: 600;
line-height: 1.4;
}
.rpt-issue-tag-count {
background: #f1f5f9;
color: var(--fg-2);
font-weight: 500;
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
}
.rpt-issue-tag-count strong { color: var(--fg-1); }
/* Report summary panel — counts by label + field issues, click to filter */
.rpt-summary {
display: flex;
align-items: stretch;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: #fff;
border: 1px solid var(--border-1, #e5e7eb);
border-radius: 8px;
margin-bottom: 0.5rem;
flex-wrap: wrap;
}
.rpt-summary-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 4px 8px;
border-radius: 6px;
background: transparent;
border: none;
cursor: default;
min-width: 0;
}
.rpt-summary-click { cursor: pointer; transition: background 120ms; }
.rpt-summary-click:hover { background: #f1f5f9; }
.rpt-summary-h {
font-size: 10px;
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.rpt-summary-v {
font-size: 18px;
font-weight: 700;
color: var(--fg-1);
font-variant-numeric: tabular-nums;
}
.rpt-v-ok { color: #16a34a; }
.rpt-v-bad { color: #dc2626; }
.rpt-v-warn { color: #d97706; }
.rpt-summary-divider {
width: 1px;
background: var(--border-1, #e5e7eb);
align-self: stretch;
}
.rpt-summary-fields {
flex: 1 1 auto;
min-width: 200px;
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 8px;
}
.rpt-summary-fields-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.rpt-summary-empty { color: var(--fg-4); font-size: 11px; }
/* Second filter row on Report page */
.rpt-filter-bar-2 {
margin-top: -0.25rem;
border-top: 1px dashed var(--border-1, #e5e7eb);
padding-top: 0.5rem;
}
/* Strategy page (/) quick-filter bar — "Tất cả" / "Chưa map SAP" toggles */
.strat-quickbar {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 0.6rem;
}
.strat-quickbar-label {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--fg-3, #6b7280);
margin-right: 4px;
}
.strat-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
color: var(--fg-2, #4b5563);
background: var(--bg-1, #fff);
border: 1px solid var(--line, #e5e7eb);
border-radius: 999px;
cursor: pointer;
transition: all 120ms ease;
}
.strat-pill:hover { background: var(--bg-2, #f8fafc); }
.strat-pill-on {
background: var(--fg-1, #1f2937);
border-color: var(--fg-1, #1f2937);
color: #fff;
font-weight: 600;
}
.strat-pill-count {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 10px;
padding: 1px 6px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.06);
color: inherit;
font-variant-numeric: tabular-nums;
}
.strat-pill-on .strat-pill-count {
background: rgba(255, 255, 255, 0.18);
}
/* Strategy tag inside Đối chiếu rows — small mono pill with the case_id */
.rpt-strat-tag {
display: inline-block;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 10px;
font-weight: 600;
padding: 1px 6px;
border-radius: 4px;
background: #eef2ff;
color: #4338ca;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
/* ================================================================
Samples filter strip — số xe / ngày phiếu cân
================================================================ */
.smp-filter-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 8px 10px;
margin-bottom: 8px;
background: #f8fafc;
border: 1px solid var(--line);
border-radius: 6px;
flex-wrap: wrap;
}
.smp-filter-ico {
color: #64748b;
font-size: 18px;
}
.smp-filter-label {
color: #475569;
font-size: 12px;
font-weight: 500;
margin-left: 4px;
}
.smp-filter-arrow {
color: #94a3b8;
}
.smp-filter-count {
margin-left: auto;
color: #64748b;
font-size: 12px;
font-variant-numeric: tabular-nums;
}
/* AI re-read button on Đối chiếu rows — small icon button overlaid near the image */
.rpt-reread-btn {
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--line);
border-radius: 4px;
padding: 2px 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 11px;
color: #2563eb;
transition: background 120ms ease;
}
.rpt-reread-btn:hover:not(:disabled) {
background: #eff6ff;
}
.rpt-reread-btn:disabled {
opacity: 0.55;
cursor: progress;
}
.rpt-reread-btn .material-icons {
font-size: 14px;
}
|