/* =========================================================================== Doha Commercial Bank — operations console --------------------------------------------------------------------------- Direction handling: every spatial property in this file is logical (inline-start, padding-inline, border-inline-start, margin-block). Switching the attribute mirrors the entire interface with no RTL override block and no duplicated stylesheet. The only physical properties used are for things that genuinely do not mirror, such as the severity dot. =========================================================================== */ /* --- Tokens -------------------------------------------------------------- */ :root { /* Brand. Qatar maroon, used for chrome and identity only — never for severity, so state colour never competes with brand colour. */ --brand: #7B1428; --brand-deep: #5A0E1D; --brand-tint: #F4E8EB; /* Neutrals */ --ink: #14181D; --ink-soft: #4A5259; --ink-faint: #78838C; --surface: #FFFFFF; --canvas: #EEF1F4; --canvas-deep: #E2E7EC; --border: #D4DAE0; --border-soft: #E6EAEE; /* Severity ramp. Deliberately desaturated at the low end so quiet alerts recede rather than competing for attention. */ --sev-critical: #B3261E; --sev-critical-bg: #FBEAE9; --sev-high: #CC6B00; --sev-high-bg: #FCF0E4; --sev-medium: #9A7B00; --sev-medium-bg: #FAF5E2; --sev-low: #52707E; --sev-low-bg: #EDF2F4; /* Functional */ --ok: #1D6B4F; --ok-bg: #E7F2ED; --domestic: #1D4E6B; --domestic-bg: #E6EFF4; /* Type scale, 1.25 ratio from a 15px base. Tight enough for dense operational tables without dropping below comfortable reading size. */ --t-xs: 0.6875rem; /* 11px — meta, counts */ --t-sm: 0.8125rem; /* 13px — table body */ --t-base: 0.9375rem; /* 15px — body copy */ --t-md: 1.125rem; /* 18px — section headings */ --t-lg: 1.5rem; /* 24px — page title */ --t-xl: 2.25rem; /* 36px — metric values */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --radius: 4px; --radius-lg: 6px; --rail-width: 15rem; --font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* Arabic uses the Arabic member of the same superfamily first, so metrics, weights and colour stay consistent across the two scripts. */ [dir="rtl"] { --font-sans: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; } /* --- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: var(--t-base); line-height: 1.5; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; } h1, h2, h3, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } button, input, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; width: 100%; } /* Numerals in data contexts line up column to column. */ .numeric, .amount, .score__value, .sla, .metric__value { font-variant-numeric: tabular-nums; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; inset-block-start: -100%; inset-inline-start: var(--space-3); z-index: 100; padding: var(--space-2) var(--space-3); background: var(--brand); color: #fff; border-radius: 0 0 var(--radius) var(--radius); } .skip-link:focus { inset-block-start: 0; } /* Visible, consistent focus for keyboard users. */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* --- Frame --------------------------------------------------------------- */ .console__frame { display: grid; grid-template-columns: var(--rail-width) 1fr; min-height: 100vh; } .console__body { display: flex; flex-direction: column; min-width: 0; /* allows the table to scroll rather than blow out the grid */ } .console__main { flex: 1; padding: var(--space-5) var(--space-6); min-width: 0; } /* --- Rail ---------------------------------------------------------------- */ .rail { background: var(--brand-deep); color: #fff; padding: var(--space-5) 0; display: flex; flex-direction: column; gap: var(--space-6); } .rail__brand { display: flex; align-items: flex-start; gap: var(--space-3); padding-inline: var(--space-4); } .rail__mark { color: #fff; flex-shrink: 0; } .rail__brandtext { display: flex; flex-direction: column; min-width: 0; } .rail__bankname { font-size: var(--t-base); font-weight: 600; letter-spacing: -0.01em; } .rail__tagline { font-size: var(--t-xs); color: rgba(255, 255, 255, 0.62); line-height: 1.35; margin-block-start: 2px; } .rail__grouptitle { font-size: var(--t-xs); font-weight: 600; color: rgba(255, 255, 255, 0.5); padding-inline: var(--space-4); margin-block-end: var(--space-2); } .rail__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-size: var(--t-sm); color: rgba(255, 255, 255, 0.86); /* The active marker sits on the inline start edge and mirrors with dir. */ border-inline-start: 3px solid transparent; } .rail__link:hover { background: rgba(255, 255, 255, 0.07); text-decoration: none; } .rail__link.is-active { background: rgba(255, 255, 255, 0.11); border-inline-start-color: #fff; font-weight: 600; color: #fff; } .rail__link--disabled { color: rgba(255, 255, 255, 0.36); cursor: default; } .rail__link--disabled:hover { background: none; } .rail__pill { font-size: 0.625rem; padding: 1px var(--space-2); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px; white-space: nowrap; } /* --- Status bar ---------------------------------------------------------- */ .statusbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-6); background: var(--surface); border-block-end: 1px solid var(--border); } .personaswitch { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .personaswitch__label { font-size: var(--t-xs); color: var(--ink-faint); white-space: nowrap; } .personaswitch__control { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .personaswitch__avatar { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-size: var(--t-xs); font-weight: 600; flex-shrink: 0; } .personaswitch__select { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-1) var(--space-2); background: var(--surface); font-size: var(--t-sm); max-inline-size: 22rem; } .statusbar__right { display: flex; align-items: center; gap: var(--space-4); } .clock { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--t-sm); } .clock__time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .clock__zone { font-size: var(--t-xs); color: var(--ink-faint); } .langtoggle { font-size: var(--t-sm); padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); } .langtoggle:hover { background: var(--canvas); text-decoration: none; } /* --- Flash messages ------------------------------------------------------ */ .flashes { padding: var(--space-3) var(--space-6) 0; } .flash { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius); font-size: var(--t-sm); border-inline-start: 3px solid var(--ok); background: var(--ok-bg); margin-block-end: var(--space-2); } .flash--error { border-inline-start-color: var(--sev-critical); background: var(--sev-critical-bg); } .flash__dismiss { border: 0; background: none; cursor: pointer; font-size: var(--t-md); line-height: 1; color: var(--ink-soft); } /* --- Queue header -------------------------------------------------------- */ .queue__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-5); } .queue__title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.02em; } .queue__lead { font-size: var(--t-sm); color: var(--ink-soft); max-inline-size: 60ch; margin-block-start: var(--space-1); } .livetoggle { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: var(--t-sm); cursor: pointer; white-space: nowrap; } .livetoggle__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--ink-faint); } .livetoggle.is-live .livetoggle__dot { background: var(--ok); /* The one piece of ambient motion in the interface. It earns its place by signalling that the queue is genuinely polling. */ animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @media (prefers-reduced-motion: reduce) { .livetoggle.is-live .livetoggle__dot { animation: none; } * { transition-duration: 0.01ms !important; } } /* --- Metrics strip ------------------------------------------------------- */ .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--border-soft); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-block-end: var(--space-5); } .metric { background: var(--surface); padding: var(--space-4); } .metric__value { font-size: var(--t-xl); font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; } .metric__label { font-size: var(--t-sm); color: var(--ink-soft); margin-block-start: var(--space-1); } .metric__hint { font-size: var(--t-xs); color: var(--ink-faint); margin-block-start: 2px; } .metric--critical .metric__value { color: var(--sev-critical); } .metric--breached .metric__value { color: var(--sev-high); } /* --- Filters ------------------------------------------------------------- */ .filters { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); margin-block-end: var(--space-5); } .filters__row { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; } .filters__field { border: 0; padding: 0; margin: 0; min-width: 0; } .filters__field--search { flex: 1 1 16rem; } .filters__label { display: block; font-size: var(--t-xs); color: var(--ink-faint); margin-block-end: var(--space-2); padding: 0; } .filters__input { inline-size: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--t-sm); } .chipset { display: flex; flex-wrap: wrap; gap: var(--space-2); } .chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: 999px; font-size: var(--t-sm); cursor: pointer; background: var(--surface); user-select: none; } .chip input { margin: 0; accent-color: var(--brand); } .chip:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-deep); } .chip--critical:has(input:checked) { border-color: var(--sev-critical); background: var(--sev-critical-bg); color: var(--sev-critical); } .chip--high:has(input:checked) { border-color: var(--sev-high); background: var(--sev-high-bg); color: var(--sev-high); } .chip--medium:has(input:checked) { border-color: var(--sev-medium); background: var(--sev-medium-bg); color: var(--sev-medium); } .chip--low:has(input:checked) { border-color: var(--sev-low); background: var(--sev-low-bg); color: var(--sev-low); } .filters__actions { display: flex; gap: var(--space-2); margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border-soft); } /* --- Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: var(--t-sm); cursor: pointer; transition: background-color 0.12s ease, border-color 0.12s ease; } .btn:hover { background: var(--canvas); text-decoration: none; } .btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn--primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); } .btn--ghost { border-color: transparent; background: none; color: var(--ink-soft); } .btn--ghost:hover { background: var(--canvas-deep); } .btn--small { padding: var(--space-1) var(--space-3); font-size: var(--t-xs); } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* --- Alert table --------------------------------------------------------- */ .queue__tablewrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto; } .alerttable { font-size: var(--t-sm); } .alerttable thead th { text-align: start; font-size: var(--t-xs); font-weight: 600; color: var(--ink-faint); padding: var(--space-3) var(--space-3); border-block-end: 1px solid var(--border); white-space: nowrap; position: sticky; inset-block-start: 0; background: var(--surface); z-index: 1; } .alerttable thead th.numeric { text-align: end; } .alerttable thead a { color: inherit; } .alerttable thead a:hover { color: var(--brand); } .alerttable tbody td { padding: var(--space-3); border-block-end: 1px solid var(--border-soft); vertical-align: top; } .alerttable tbody td.numeric { text-align: end; } .alertrow:hover { background: var(--canvas); } /* A breached SLA marks the whole row on the inline start edge, which reads at a glance when scanning a long queue. */ .alertrow.is-breached { box-shadow: inset 3px 0 0 0 var(--sev-critical); } [dir="rtl"] .alertrow.is-breached { box-shadow: inset -3px 0 0 0 var(--sev-critical); } .alertrow__meta { display: block; font-size: var(--t-xs); color: var(--ink-faint); margin-block-start: 2px; } .alertref, .customer, .typology, .owner { font-weight: 500; } .alertref { font-family: var(--font-mono); font-size: var(--t-xs); } .owner--none, .amount--none, .rail-tag--none { color: var(--ink-faint); font-weight: 400; } /* Severity ----------------------------------------------------------------- */ .sev { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--t-xs); font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius); white-space: nowrap; } .sev__dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; } .sev--critical { color: var(--sev-critical); background: var(--sev-critical-bg); } .sev--high { color: var(--sev-high); background: var(--sev-high-bg); } .sev--medium { color: var(--sev-medium); background: var(--sev-medium-bg); } .sev--low { color: var(--sev-low); background: var(--sev-low-bg); } /* Rail tag ----------------------------------------------------------------- */ .rail-tag { font-size: var(--t-xs); padding: 2px var(--space-2); border-radius: var(--radius); background: var(--canvas-deep); color: var(--ink-soft); white-space: nowrap; } /* Domestic rails — Himyan, NAPS, Fawran — are visually distinguished because the fraud profile of a locally switched transaction differs from an international scheme transaction. */ .rail-tag--domestic { background: var(--domestic-bg); color: var(--domestic); font-weight: 500; } .kycflag { display: inline-block; font-size: 0.625rem; font-weight: 600; padding: 0 4px; border-radius: 2px; background: var(--sev-high-bg); color: var(--sev-high); margin-inline-start: var(--space-1); } /* Risk score --------------------------------------------------------------- */ .score { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; min-inline-size: 3rem; } .score__value { font-weight: 600; font-size: var(--t-sm); } .score__bar { display: block; inline-size: 100%; block-size: 3px; border-radius: 2px; background: var(--canvas-deep); position: relative; overflow: hidden; } .score__bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--score) * 1%); background: var(--sev-low); } .score:has(.score__value):is([style*="--score: 7"], [style*="--score: 8"], [style*="--score: 9"]) .score__bar::after { background: var(--sev-critical); } /* SLA countdown ------------------------------------------------------------ The loudest element on the page, deliberately. Everything else is quiet so attention lands on the clock that is running out. */ .sla { font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius); background: var(--canvas-deep); /* Latin digits keep a fixed advance width; the clock never jitters. */ font-variant-numeric: tabular-nums; direction: ltr; display: inline-block; unicode-bidi: isolate; } .sla--warning { background: var(--sev-high-bg); color: var(--sev-high); } .sla--breached { background: var(--sev-critical); color: #fff; } /* Empty state --------------------------------------------------------------- */ .alerttable__empty td { padding: var(--space-6); text-align: center; } .empty__title { font-weight: 500; } .empty__hint { font-size: var(--t-sm); color: var(--ink-faint); margin-block-start: var(--space-1); } /* Pager --------------------------------------------------------------------- */ .pager { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-block-start: var(--space-4); font-size: var(--t-sm); } .pager__link { padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .pager__status { color: var(--ink-faint); font-variant-numeric: tabular-nums; } /* --- Technical panel ------------------------------------------------------- */ .techpanel { border-block-start: 1px solid var(--border); background: var(--surface); } .techpanel__toggle { display: flex; align-items: center; gap: var(--space-2); inline-size: 100%; padding: var(--space-2) var(--space-6); border: 0; background: none; font-size: var(--t-xs); color: var(--ink-faint); cursor: pointer; text-align: start; } .techpanel__badge { padding: 0 var(--space-2); border-radius: 999px; background: var(--canvas-deep); font-variant-numeric: tabular-nums; } .techpanel__body { padding: 0 var(--space-6) var(--space-4); max-block-size: 22rem; overflow-y: auto; } .techpanel__meta, .techpanel__heading { font-size: var(--t-xs); color: var(--ink-soft); margin-block-end: var(--space-2); } .techpanel__query { margin-block-end: var(--space-2); font-size: var(--t-xs); } .techpanel__query summary { display: flex; justify-content: space-between; gap: var(--space-3); cursor: pointer; padding: var(--space-1) 0; } .techpanel__query code { font-family: var(--font-mono); color: var(--ink-soft); } .techpanel__ms { color: var(--ink-faint); font-variant-numeric: tabular-nums; } .techpanel__sql, .techpanel__params { font-family: var(--font-mono); font-size: var(--t-xs); background: var(--canvas); padding: var(--space-3); border-radius: var(--radius); overflow-x: auto; direction: ltr; text-align: left; white-space: pre-wrap; } /* --- Error page ------------------------------------------------------------ */ .errorpage { display: grid; place-items: center; min-block-size: 100vh; padding: var(--space-5); } .errorpage__panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); max-inline-size: 32rem; text-align: center; } .errorpage__code { font-size: var(--t-xl); font-weight: 300; color: var(--brand); font-variant-numeric: tabular-nums; } .errorpage__heading { font-size: var(--t-md); font-weight: 600; margin-block: var(--space-2); } .errorpage__message { color: var(--ink-soft); margin-block-end: var(--space-4); } .errorpage__detail { font-family: var(--font-mono); font-size: var(--t-xs); background: var(--canvas); padding: var(--space-3); border-radius: var(--radius); text-align: start; overflow-x: auto; margin-block-end: var(--space-4); } /* --- Responsive ------------------------------------------------------------ */ @media (max-width: 60rem) { .console__frame { grid-template-columns: 1fr; } .rail { flex-direction: row; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); overflow-x: auto; } .rail__group { display: flex; align-items: center; gap: var(--space-3); } .rail__grouptitle { display: none; } .rail__list { display: flex; gap: var(--space-1); } .rail__link { border-inline-start: 0; border-block-end: 3px solid transparent; white-space: nowrap; } .rail__link.is-active { border-inline-start: 0; border-block-end-color: #fff; } .rail__pill { display: none; } .console__main { padding: var(--space-4); } .statusbar { flex-wrap: wrap; padding: var(--space-3) var(--space-4); } } /* =========================================================================== Alert detail =========================================================================== */ .detail__crumb { font-size: var(--t-sm); margin-block-end: var(--space-3); } .detail__crumb a { color: var(--ink-soft); } .detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-block-end: var(--space-5); } .detail__ref { font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 600; margin-block: var(--space-2) var(--space-1); } .detail__typology { font-size: var(--t-base); color: var(--ink-soft); } .detail__slabox { text-align: end; } .detail__slalabel { font-size: var(--t-xs); color: var(--ink-faint); margin-block-end: var(--space-1); } .sla--large { font-size: var(--t-md); padding: var(--space-2) var(--space-3); } /* Panel grid. The score panel spans two rows because its content is the longest and the tallest — letting it set the rhythm avoids a ragged column. */ .detail__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); } .panel__head { margin-block-end: var(--space-4); } .panel__title { font-size: var(--t-md); font-weight: 600; } .panel__lead { font-size: var(--t-sm); color: var(--ink-soft); margin-block-start: var(--space-1); } .panel__empty { font-size: var(--t-sm); color: var(--ink-faint); } .panel--score { grid-row: span 2; } .panel--timeline { grid-row: span 2; } /* --- Score breakdown ----------------------------------------------------- */ .scoreboard { display: flex; flex-direction: column; gap: var(--space-4); } .scoreboard__total { display: flex; align-items: baseline; gap: var(--space-2); padding-block-end: var(--space-3); border-block-end: 1px solid var(--border-soft); } .scoreboard__number { font-size: 3.5rem; font-weight: 200; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .scoreboard__outof { font-size: var(--t-base); color: var(--ink-faint); } .signals { display: flex; flex-direction: column; gap: var(--space-4); } .signals__empty { font-size: var(--t-sm); color: var(--ink-faint); } .signal { display: flex; flex-direction: column; gap: var(--space-2); } .signal__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .signal__name { font-size: var(--t-sm); font-weight: 500; } .signal__points { font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; } .signal__bar { block-size: 6px; border-radius: 3px; background: var(--canvas-deep); overflow: hidden; } .signal__fill { display: block; block-size: 100%; inline-size: calc(var(--share) * 1%); background: var(--brand); border-radius: 3px; } .signal__evidence { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.45; } .signal__meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--t-xs); color: var(--ink-faint); } .signal__code { font-family: var(--font-mono); padding: 1px var(--space-2); background: var(--canvas); border-radius: 2px; } /* --- Customer card -------------------------------------------------------- */ .customercard__name { font-size: var(--t-base); font-weight: 600; } .customercard__ref { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-faint); } .pepflag { display: inline-block; font-size: var(--t-xs); font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius); background: var(--sev-high-bg); color: var(--sev-high); margin-block-start: var(--space-2); } .facts { margin-block-start: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .facts__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--t-sm); padding-block-end: var(--space-2); border-block-end: 1px solid var(--border-soft); } .facts__row dt { color: var(--ink-faint); } .facts__row dd { margin: 0; text-align: end; font-weight: 500; } .facts__row code { font-family: var(--font-mono); font-size: var(--t-xs); } .facts__row--warn dd { color: var(--sev-critical); } .kycband { font-size: var(--t-xs); font-weight: 600; padding: 1px var(--space-2); border-radius: var(--radius); text-transform: capitalize; } .kycband--low { background: var(--ok-bg); color: var(--ok); } .kycband--medium { background: var(--sev-medium-bg); color: var(--sev-medium); } .kycband--high { background: var(--sev-critical-bg); color: var(--sev-critical); } /* --- Timeline ------------------------------------------------------------- */ .timeline { display: flex; flex-direction: column; } .timeline__item { display: grid; grid-template-columns: 3.5rem 1rem 1fr; gap: var(--space-2); padding-block: var(--space-3); position: relative; } /* Connector line between markers. Uses inset-inline so it follows direction. */ .timeline__item:not(:last-child)::before { content: ""; position: absolute; inset-block-start: 1.6rem; inset-block-end: -0.4rem; inset-inline-start: 4.0rem; inline-size: 1px; background: var(--border); } .timeline__time { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; padding-block-start: 2px; direction: ltr; unicode-bidi: isolate; } .timeline__marker { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); margin-block-start: 5px; justify-self: center; z-index: 1; } .timeline__item.is-trigger .timeline__marker { background: var(--sev-critical); border-color: var(--sev-critical); box-shadow: 0 0 0 3px var(--sev-critical-bg); } .timeline__line { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; } .timeline__amount { font-weight: 600; font-size: var(--t-sm); font-variant-numeric: tabular-nums; } .timeline__merchant { font-size: var(--t-sm); color: var(--ink-soft); } .timeline__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-faint); margin-block-start: var(--space-1); } .timeline__country { font-family: var(--font-mono); } .timeline__trigger { font-size: var(--t-xs); font-weight: 600; color: var(--sev-critical); margin-block-start: var(--space-1); } .txnstatus { font-size: var(--t-xs); padding: 0 var(--space-2); border-radius: 2px; text-transform: capitalize; } .txnstatus--declined { background: var(--sev-critical-bg); color: var(--sev-critical); } .txnstatus--reversed { background: var(--sev-medium-bg); color: var(--sev-medium); } /* --- Action form ---------------------------------------------------------- */ .actform { display: flex; flex-direction: column; gap: var(--space-3); } .actform__field { display: flex; flex-direction: column; gap: var(--space-1); } .actform__label { font-size: var(--t-xs); color: var(--ink-faint); } .actform__select, .actform__textarea { inline-size: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--t-sm); background: var(--surface); } .actform__textarea { resize: vertical; font-family: inherit; } .actform__hint { font-size: var(--t-xs); color: var(--ink-faint); } .actform__approval { font-size: var(--t-sm); padding: var(--space-2) var(--space-3); border-inline-start: 3px solid var(--sev-high); background: var(--sev-high-bg); color: var(--sev-high); border-radius: var(--radius); } /* --- Decision history ----------------------------------------------------- */ .decisions { display: flex; flex-direction: column; gap: var(--space-3); } .decision { padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--border); } .decision.is-pending { border-inline-start-color: var(--sev-high); } .decision__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); } .decision__action { font-size: var(--t-sm); font-weight: 600; } .decision__state { font-size: var(--t-xs); color: var(--ink-faint); } .decision.is-pending .decision__state { color: var(--sev-high); font-weight: 600; } .decision__reason { font-size: var(--t-sm); color: var(--ink-soft); } .decision__note { font-size: var(--t-sm); color: var(--ink-soft); font-style: italic; margin-block-start: var(--space-1); } .decision__meta { font-size: var(--t-xs); color: var(--ink-faint); margin-block-start: var(--space-1); } /* --- Prior alerts --------------------------------------------------------- */ .priorlist { display: flex; flex-direction: column; gap: var(--space-2); } .prior__link { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2); border-radius: var(--radius); } .prior__link:hover { background: var(--canvas); text-decoration: none; } .prior__typology { font-size: var(--t-sm); font-weight: 500; } .prior__meta { font-size: var(--t-xs); color: var(--ink-faint); margin-inline-start: auto; } @media (max-width: 72rem) { .detail__grid { grid-template-columns: 1fr; } .panel--score, .panel--timeline { grid-row: auto; } } /* =========================================================================== Module placeholder =========================================================================== */ .placeholder { max-inline-size: 58rem; } .placeholder__head { margin-block-end: var(--space-6); } .placeholder__title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.02em; } .placeholder__lead { font-size: var(--t-base); color: var(--ink-soft); margin-block-start: var(--space-2); max-inline-size: 60ch; } .placeholder__status { display: inline-block; font-size: var(--t-sm); padding: var(--space-2) var(--space-3); border-inline-start: 3px solid var(--sev-medium); background: var(--sev-medium-bg); color: var(--sev-medium); border-radius: var(--radius); margin-block-start: var(--space-4); } .placeholder__subtitle { font-size: var(--t-md); font-weight: 600; margin-block-end: var(--space-4); } .scopelist { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1px; background: var(--border-soft); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .scopeitem { display: flex; gap: var(--space-3); padding: var(--space-4); background: var(--surface); } .scopeitem__icon { font-size: var(--t-md); color: var(--brand); line-height: 1.2; flex-shrink: 0; } .scopeitem__name { font-size: var(--t-sm); font-weight: 600; } .scopeitem__desc { font-size: var(--t-sm); color: var(--ink-soft); margin-block-start: var(--space-1); line-height: 1.45; } .placeholder__context { margin-block-start: var(--space-6); } .placeholder__text { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.6; max-inline-size: 72ch; } /* Reporting rail items are reachable but unbuilt: dimmer than active items, brighter than genuinely disabled ones. */ .rail__link--pending { color: rgba(255, 255, 255, 0.62); } .rail__link--pending:hover { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.86); } /* =========================================================================== Regulatory reporting =========================================================================== */ /* --- Filing calendar ------------------------------------------------------ */ .filings { display: flex; flex-direction: column; gap: var(--space-2); } .filing { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); /* Urgency reads on the inline start edge so a long calendar scans quickly. */ border-inline-start: 3px solid var(--border); overflow: hidden; } .filing--overdue { border-inline-start-color: var(--sev-critical); } .filing--critical { border-inline-start-color: var(--sev-high); } .filing--soon { border-inline-start-color: var(--sev-medium); } .filing--normal { border-inline-start-color: var(--border); } .filing--closed { border-inline-start-color: var(--ok); opacity: 0.72; } .filing__link { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); } .filing__link:hover { background: var(--canvas); text-decoration: none; } .filing__name { font-size: var(--t-sm); font-weight: 600; } .filing__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-faint); margin-block-start: var(--space-1); } .filing__period { font-family: var(--font-mono); } .reg-tag { font-size: var(--t-xs); font-weight: 600; padding: 1px var(--space-2); border-radius: var(--radius); background: var(--brand-tint); color: var(--brand); } .reg-tag--large { font-size: var(--t-sm); padding: 2px var(--space-3); } .filing__duelabel { font-size: var(--t-sm); font-variant-numeric: tabular-nums; } .filing__urgency { font-size: var(--t-xs); font-weight: 600; margin-block-start: 2px; } .filing__urgency--overdue { color: var(--sev-critical); } .filing__urgency--critical { color: var(--sev-high); } .filing__urgency--soon { color: var(--sev-medium); } .filing__urgency--normal { color: var(--ink-faint); font-weight: 400; } .filing__urgency--closed { color: var(--ok); } .filing__breaks { display: flex; gap: var(--space-2); flex-wrap: wrap; } .breakpill { font-size: var(--t-xs); font-weight: 600; padding: 1px var(--space-2); border-radius: 999px; white-space: nowrap; } .breakpill--blocker { background: var(--sev-critical-bg); color: var(--sev-critical); } .breakpill--warning { background: var(--sev-high-bg); color: var(--sev-high); } .breakpill--pending { background: var(--canvas-deep); color: var(--ink-soft); } .filing__status { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .statustag { font-size: var(--t-xs); padding: 1px var(--space-2); border-radius: var(--radius); background: var(--canvas-deep); color: var(--ink-soft); white-space: nowrap; } .statustag--submitted { background: var(--ok-bg); color: var(--ok); } .statustag--approved { background: var(--ok-bg); color: var(--ok); } .statustag--rejected { background: var(--sev-critical-bg); color: var(--sev-critical); } .statustag--validating { background: var(--sev-medium-bg); color: var(--sev-medium); } .filing__owner { font-size: var(--t-xs); color: var(--ink-faint); } /* --- Filing header -------------------------------------------------------- */ .detail__ref--text { font-family: var(--font-sans); letter-spacing: -0.02em; } .filingmeta { display: flex; gap: var(--space-5); flex-wrap: wrap; } .filingmeta__label { font-size: var(--t-xs); color: var(--ink-faint); } .filingmeta__value { font-size: var(--t-sm); font-weight: 600; margin-block-start: 2px; } /* --- The return table ----------------------------------------------------- */ .panel--return { grid-row: span 2; } .returnsection { font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); margin-block: var(--space-4) var(--space-2); padding-block-end: var(--space-2); border-block-end: 1px solid var(--border-soft); } .returnsection:first-of-type { margin-block-start: 0; } .returntable { font-size: var(--t-sm); } .returntable thead th { text-align: start; font-size: var(--t-xs); font-weight: 600; color: var(--ink-faint); padding: var(--space-2); border-block-end: 1px solid var(--border-soft); } .returntable thead th.numeric { text-align: end; } .returntable td, .returntable th[scope="row"] { padding: var(--space-2); border-block-end: 1px solid var(--border-soft); vertical-align: top; } .returnrow__label { text-align: start; font-weight: 400; } /* Totals and ratios carry more weight than their components. */ .returnrow.is-computed .returnrow__label, .returnrow.is-computed .returnrow__current { font-weight: 600; } .returnrow.is-computed { background: var(--canvas); } .returnrow.has-break { background: var(--sev-critical-bg); } .returnrow__current { font-variant-numeric: tabular-nums; } .returnrow__prior { font-variant-numeric: tabular-nums; color: var(--ink-faint); } .returnrow__threshold { display: block; font-size: var(--t-xs); color: var(--ink-faint); font-weight: 400; margin-block-start: 2px; } .breakflag { display: inline-block; font-size: var(--t-xs); font-weight: 600; padding: 1px var(--space-2); border-radius: var(--radius); margin-inline-start: var(--space-2); } .breakflag--blocker { background: var(--sev-critical); color: #fff; } .breakflag--warning { background: var(--sev-high); color: #fff; } .breakflag:hover { text-decoration: none; opacity: 0.88; } .floorflag { display: inline-block; font-size: var(--t-xs); font-weight: 600; color: var(--sev-critical); margin-inline-start: var(--space-2); } .movement { font-size: var(--t-sm); font-variant-numeric: tabular-nums; } .movement--up { color: var(--ink); } .movement--down { color: var(--ink-soft); } /* --- Break list ----------------------------------------------------------- */ .breaklist { display: flex; flex-direction: column; gap: var(--space-2); } .breakitem { border: 1px solid var(--border); border-radius: var(--radius); border-inline-start-width: 3px; } .breakitem--blocker { border-inline-start-color: var(--sev-critical); } .breakitem--warning { border-inline-start-color: var(--sev-high); } .breakitem--info { border-inline-start-color: var(--sev-low); } .breakitem__link { display: block; padding: var(--space-3); } .breakitem__link:hover { background: var(--canvas); text-decoration: none; } .breakitem__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .breakitem__rule { font-size: var(--t-sm); font-weight: 600; } .breakitem__detail { font-size: var(--t-sm); color: var(--ink-soft); margin-block-start: var(--space-2); line-height: 1.45; } .breakitem__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-faint); margin-block-start: var(--space-2); } .breakitem__meta code { font-family: var(--font-mono); background: var(--canvas); padding: 1px var(--space-2); border-radius: 2px; } .breakitem__records::after { content: " records"; } [lang="ar"] .breakitem__records::after { content: " سجل"; } .breakitem__status { margin-inline-start: auto; } /* --- Source data ---------------------------------------------------------- */ .sources { display: flex; flex-direction: column; gap: var(--space-3); } .source { display: flex; gap: var(--space-3); align-items: flex-start; } .source__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; margin-block-start: 6px; background: var(--border); flex-shrink: 0; } .source--complete .source__dot { background: var(--ok); } .source--pending .source__dot { background: var(--sev-medium); } .source--failed .source__dot { background: var(--sev-critical); } .source__name { font-size: var(--t-sm); font-weight: 500; } .source__meta { font-size: var(--t-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; } .source__warn { font-size: var(--t-xs); color: var(--sev-high); margin-block-start: 2px; } /* --- Approval chain ------------------------------------------------------- */ .chain { display: flex; flex-direction: column; } .chainstep { display: flex; gap: var(--space-3); padding-block: var(--space-2); position: relative; } .chainstep:not(:last-child)::before { content: ""; position: absolute; inset-block-start: 1.5rem; inset-block-end: -0.25rem; inset-inline-start: 4px; inline-size: 1px; background: var(--border); } .chainstep__marker { inline-size: 9px; block-size: 9px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); margin-block-start: 5px; flex-shrink: 0; z-index: 1; } .chainstep--completed .chainstep__marker { background: var(--ok); border-color: var(--ok); } .chainstep--rejected .chainstep__marker { background: var(--sev-critical); border-color: var(--sev-critical); } .chainstep__name { font-size: var(--t-sm); font-weight: 500; } .chainstep__meta { font-size: var(--t-xs); color: var(--ink-faint); } .chainstep__note { font-size: var(--t-xs); color: var(--ink-soft); font-style: italic; margin-block-start: 2px; } /* --- Break drill-down ----------------------------------------------------- */ .panel--records { grid-column: 1 / -1; } .variance__detail { font-size: var(--t-base); line-height: 1.55; margin-block-end: var(--space-4); } .variance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .variance__cell { background: var(--surface); padding: var(--space-3); } .variance__label { font-size: var(--t-xs); color: var(--ink-faint); } .variance__value { font-size: var(--t-md); font-weight: 600; font-variant-numeric: tabular-nums; margin-block-start: var(--space-1); } .variance__cell--diff { background: var(--sev-critical-bg); } .variance__cell--diff .variance__value { color: var(--sev-critical); } .variance__pct { font-size: var(--t-xs); color: var(--sev-critical); font-variant-numeric: tabular-nums; } .variance__meta { font-size: var(--t-xs); color: var(--ink-faint); margin-block-start: var(--space-3); } .recordtable { font-size: var(--t-sm); } .recordtable thead th { text-align: start; font-size: var(--t-xs); font-weight: 600; color: var(--ink-faint); padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--border); } .recordtable thead th.numeric { text-align: end; } .recordtable td { padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--border-soft); } .recordtable td.numeric { text-align: end; font-variant-numeric: tabular-nums; } .recordref { font-family: var(--font-mono); font-size: var(--t-xs); } .recordfield { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-soft); } .recordexpected { color: var(--ok); font-size: var(--t-xs); font-family: var(--font-mono); } .recordactual { color: var(--sev-critical); font-size: var(--t-xs); font-family: var(--font-mono); } .recordnote td { font-size: var(--t-xs); color: var(--ink-faint); padding-block-start: 0; border-block-end: 1px solid var(--border-soft); } .recordtable tfoot td { padding: var(--space-3); font-size: var(--t-sm); border-block-start: 1px solid var(--border); color: var(--ink-soft); } @media (max-width: 72rem) { .filing__link { grid-template-columns: 1fr; gap: var(--space-2); } .filing__status { align-items: flex-start; } .panel--return { grid-row: auto; } .variance { grid-template-columns: 1fr; } } /* --- No accessible module -------------------------------------------------- */ .noaccess { max-inline-size: 42rem; padding-block-start: var(--space-6); } .noaccess__heading { font-size: var(--t-md); font-weight: 600; } .noaccess__body { font-size: var(--t-base); color: var(--ink-soft); margin-block-start: var(--space-2); } .noaccess__hint { font-size: var(--t-sm); color: var(--ink-faint); margin-block-start: var(--space-3); } /* =========================================================================== Entity link analysis =========================================================================== */ .detail__crumb--split { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .network__controls { display: flex; gap: var(--space-2); } .metrics--compact { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } .metrics--compact .metric__value { font-size: var(--t-lg); } .network__stage { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--space-4); align-items: stretch; } .graph { block-size: min(62vh, 40rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); /* Cytoscape sizes to its container, so the container must have a resolved height before the library initialises. */ min-block-size: 24rem; } .inspector { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); overflow-y: auto; } .inspector__placeholder { font-size: var(--t-sm); color: var(--ink-faint); } .inspector__type { font-size: var(--t-xs); color: var(--ink-faint); } .inspector__name { font-size: var(--t-base); font-weight: 600; margin-block-start: 2px; } .inspector__sub { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-faint); } .inspector .facts { margin-block-start: var(--space-3); } .legend { margin-block-start: auto; padding-block-start: var(--space-3); border-block-start: 1px solid var(--border-soft); } .legend__title { font-size: var(--t-xs); color: var(--ink-faint); margin-block-end: var(--space-2); } .legend__list { display: flex; flex-direction: column; gap: var(--space-2); } .legend__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--t-xs); color: var(--ink-soft); } .legend__swatch { inline-size: 10px; block-size: 10px; border-radius: 50%; flex-shrink: 0; } .legend__swatch--customer { background: #52707E; } .legend__swatch--subject { background: #7B1428; } .legend__swatch--device { background: #CC6B00; border-radius: 2px; transform: rotate(45deg); } .legend__swatch--beneficiary { background: #1D4E6B; border-radius: 2px; } @media (max-width: 72rem) { .network__stage { grid-template-columns: 1fr; } .graph { block-size: 55vh; } .legend { margin-block-start: var(--space-3); } }