/* ============================================================================= Mycroft — thin bridge on top of the Tabler design system. Tabler (loaded before this file) now owns the palette, the shell and every core component. This file does three small things and nothing else: 1. BRIDGE — re-expresses the app's semantic design tokens (--surface, --border, --critical, …) in terms of Tabler's own CSS variables (--tblr-*). Because those Tabler variables flip with `data-bs-theme=light|dark`, everything below inherits light/dark for free — there is no second palette to keep in step. 2. KEEP — the bespoke pieces Tabler has no equivalent for: the KYB ownership graph, the change-event feed rail, empty states, the auth/landing chrome, and a few page helpers still used by pages not yet converted to native Tabler markup. 3. ALIAS — severity helpers (.sev-* and the badge severities) so a page mid-migration keeps its meaning while the second agent converts the rest to native Tabler. The old app-shell / sidebar / topbar rules are GONE — Tabler's navbar-vertical layout replaces them (see _Layout.cshtml). ============================================================================= */ /* ---------------------------------------------------------------- token bridge Each token points at a Tabler variable (with a light-theme literal fallback so a layout that has not linked Tabler still resolves). Tabler swaps the --tblr-* values per data-bs-theme, so these follow the active theme automatically. */ :root{ --bg:var(--tblr-body-bg,#f9fafb); --surface:var(--tblr-bg-surface,#ffffff); --surface-2:var(--tblr-bg-surface-secondary,#f3f4f6); --border:var(--tblr-border-color,#e5e7eb); --border-strong:var(--tblr-border-color,#d1d5db); --text:var(--tblr-body-color,#1f2937); --muted:var(--tblr-secondary-color,#6b7280); --faint:color-mix(in srgb, var(--tblr-body-color,#1f2937) 55%, transparent); --accent:var(--tblr-primary,#066fd1); --accent-soft:rgba(var(--tblr-primary-rgb,6,111,209),.12); --accent-border:rgba(var(--tblr-primary-rgb,6,111,209),.30); --critical:var(--tblr-danger,#d63939); --critical-soft:rgba(var(--tblr-danger-rgb,214,57,57),.12); --critical-border:rgba(var(--tblr-danger-rgb,214,57,57),.32); --notable:var(--tblr-warning,#f59f00); --notable-soft:rgba(var(--tblr-warning-rgb,245,159,0),.14); --notable-border:rgba(var(--tblr-warning-rgb,245,159,0),.34); --ok:var(--tblr-success,#2fb344); --ok-soft:rgba(var(--tblr-success-rgb,47,179,68),.12); --ok-border:rgba(var(--tblr-success-rgb,47,179,68),.30); --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05); --radius:var(--tblr-border-radius,6px); --sans:var(--tblr-font-sans-serif); --mono:var(--tblr-font-monospace); } /* IDs, timestamps and figures line up under the eye. */ .font-monospace,code,kbd,samp,pre{font-family:var(--mono);} .font-monospace{font-variant-numeric:tabular-nums;} .tabular{font-variant-numeric:tabular-nums;} /* ---------------------------------------------------------------- inline SVG icons The _Icons.cshtml sprite is still used by pages not yet on Tabler icons; keep the sizing helper so `` renders correctly. */ .ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em;flex-shrink:0;} /* ---------------------------------------------------------------- light/dark toggle The topbar button (Tabler icons). Show the moon in light mode (click → dark), the sun in dark mode (click → light). Tabler themes off [data-bs-theme] on . */ .theme-toggle{cursor:pointer;} .theme-toggle .ti-sun{display:none;} .theme-toggle .ti-moon{display:inline-block;} [data-bs-theme="dark"] .theme-toggle .ti-sun{display:inline-block;} [data-bs-theme="dark"] .theme-toggle .ti-moon{display:none;} /* ============================================================ severity aliases Native-Tabler pages use .text-bg-danger / -warning / -success directly. Until the remaining pages are converted, keep the app's severity vocabulary meaningful. */ .sev-critical{--sev:var(--critical);--sev-soft:var(--critical-soft);--sev-border:var(--critical-border);} .sev-notable{--sev:var(--notable);--sev-soft:var(--notable-soft);--sev-border:var(--notable-border);} .sev-ok{--sev:var(--ok);--sev-soft:var(--ok-soft);--sev-border:var(--ok-border);} /* ============================================================ KPI tiles Still used by pages not yet on native Tabler stat cards (Admin ▸ Deliveries). The flagship pages use Tabler's .card card-sm; the second agent can convert the rest and then drop this. */ .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem 1.1rem;position:relative;overflow:hidden;} .kpi-label{color:var(--muted);font-size:.8rem;font-weight:500;margin-bottom:.35rem;} .kpi-value{font-size:2rem;line-height:1.05;font-weight:650;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.02em;} .kpi-link{color:inherit;text-decoration:none;} .kpi-link:hover{color:var(--accent);text-decoration:underline;} .kpi.sev-critical,.kpi.sev-notable,.kpi.sev-ok{border-color:var(--sev-border);background:var(--sev-soft);} .kpi.sev-critical::before,.kpi.sev-notable::before,.kpi.sev-ok::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--sev);} .kpi.sev-critical .kpi-value,.kpi.sev-notable .kpi-value,.kpi.sev-ok .kpi-value{color:var(--sev);} .kpi.sev-critical .kpi-label,.kpi.sev-notable .kpi-label,.kpi.sev-ok .kpi-label{color:var(--sev);opacity:.85;} /* ============================================================ page-header helper A lightweight header used by pages still on the pre-Tabler markup (Portfolio, Screening, Settings, Admin, landing). Flagship pages use Tabler's own .page-header. */ .page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.25rem;} .page-head h1{font-size:1.4rem;font-weight:650;letter-spacing:-.01em;margin:0 0 .25rem;} .page-head .page-sub{color:var(--muted);font-size:.9rem;margin:0;max-width:60ch;} /* ============================================================ change-event feed rail Shared by the dashboard feed and the entity timeline: a coloured rail keyed off the row's data-sev, echoing the severity badge. */ .feed-row{position:relative;padding-left:1.1rem;--stripe:var(--border-strong);} .feed-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--stripe);} .feed-row[data-sev="danger"]{--stripe:var(--critical);} .feed-row[data-sev="warning"]{--stripe:var(--notable);} .feed-row[data-sev="success"]{--stripe:var(--ok);} .feed-row[data-sev="info"]{--stripe:var(--accent);} .feed-row[data-sev="primary"]{--stripe:var(--accent);} .feed-row[data-sev="dark"]{--stripe:var(--text);} .feed-head{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;} .feed-name{font-weight:600;color:var(--text);} .feed-ref{color:var(--muted);font-size:.8rem;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:.02rem .35rem;} .feed-desc{margin-top:.3rem;} .feed-meta{color:var(--muted);} /* ============================================================ row severity rail A coloured rail on a table row's leading cell — same severity language as the feed. */ .table tbody tr.sev-critical > *:first-child{box-shadow:inset 3px 0 0 var(--critical);} .table tbody tr.sev-notable > *:first-child{box-shadow:inset 3px 0 0 var(--notable);} .table tbody tr.sev-ok > *:first-child{box-shadow:inset 3px 0 0 var(--ok);} .table tbody tr.sev-muted > *:first-child{box-shadow:inset 3px 0 0 var(--border-strong);} /* ============================================================ confidence chip A badge with a leading status dot, so a Strong/Moderate/Weak band reads as an object. */ .conf-chip{display:inline-flex;align-items:center;gap:.4em;} .conf-chip::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor;flex-shrink:0;} /* ============================================================ long tables: scroll + sticky head A table that can grow unbounded (queues, ingest, dead-letters) gets its own scroll container so the header can stick. */ .table-scroll{overflow:auto;max-height:70vh;} .table-scroll > .table{margin-bottom:0;} .table-scroll > .table > thead th{position:sticky;top:0;z-index:2;background:var(--surface);box-shadow:inset 0 -1px 0 var(--border-strong);} .card > .table-scroll:last-child{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);} /* ============================================================ empty states */ .empty-state{text-align:center;padding:2.4rem 1.5rem;color:var(--muted);} .empty-state .empty-ic{width:44px;height:44px;margin:0 auto .7rem;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;color:var(--faint);} .empty-state .empty-ic .ic{width:22px;height:22px;} .empty-state .empty-title{font-weight:600;color:var(--text);margin-bottom:.3rem;font-size:.95rem;} .empty-state p{max-width:54ch;margin:0 auto;} /* ============================================================ feature tiles / hero mark Accent icon chips for the admin console cards and the landing hero. */ .feature-tile{display:flex;flex-direction:column;height:100%;} .feature-ic{width:38px;height:38px;flex-shrink:0;margin-bottom:.75rem;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border);border-radius:9px;} .feature-ic .ic{width:20px;height:20px;} .hero-mark{width:46px;height:46px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border);border-radius:12px;} .hero-mark .ic{width:26px;height:26px;} /* ============================================================ auth (identity) pages The default ASP.NET Identity UI on a minimal centred-card layout (_AuthLayout.cshtml), which links Tabler too so these tokens resolve. */ .auth-body{min-height:100vh;display:flex;background:var(--bg);} .auth-wrap{margin:auto;width:100%;max-width:440px;padding:2rem 1.25rem;} .auth-brand{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:1.25rem;font-weight:600;font-size:1.15rem;letter-spacing:-.01em;color:var(--text);text-decoration:none;} .auth-brand:hover{color:var(--text);} .auth-brand .brand-mark{width:34px;height:34px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border);border-radius:9px;} .auth-brand .brand-mark .ic{width:20px;height:20px;} .auth-foot{text-align:center;color:var(--faint);font-size:.8rem;margin:1rem 0 0;} /* ============================================================ KYB ownership graph The interactive SVG in the report's "Ownership & control" section. Progressive enhancement: hidden until ownership-graph.js reveals it (.is-ready), never printed. Every colour is a bridged token, so the graph re-themes with the toggle for free. The renderer (wwwroot/js/ownership-graph.js) drives these class names — keep them. */ .kyb-graph{display:none;position:relative;margin:0 0 .75rem;} .kyb-graph.is-ready{display:block;} .kyb-graph__canvas{position:relative;overflow-x:auto;max-width:100%;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);padding:.25rem;} .kyb-graph__svg{display:block;} /* edges: connectors + a relationship label on a small surface plate for legibility */ .kyb-edge{fill:none;stroke:var(--border-strong);stroke-width:1.5;} .kyb-edge__labelbg{fill:var(--surface);stroke:var(--border);stroke-width:1;} .kyb-edge__label{fill:var(--muted);font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.02em;} /* nodes */ .kyb-node{cursor:default;outline:none;} .kyb-node__box{fill:var(--surface);stroke:var(--border-strong);stroke-width:1.5;} .kyb-node__focus{fill:none;stroke:none;} .kyb-node__name{fill:var(--text);font-family:var(--sans);font-size:13px;font-weight:600;} .kyb-node__jur{fill:var(--muted);font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;} .kyb-node__eyebrow{fill:var(--accent);font-family:var(--sans);font-size:8.5px;font-weight:700;letter-spacing:.09em;} /* per-node risk colouring — one variant class per node, so no override conflicts */ .kyb-node--root .kyb-node__box{fill:var(--accent-soft);stroke:var(--accent-border);} .kyb-node--neutral .kyb-node__box{fill:var(--surface);stroke:var(--border-strong);} .kyb-node--notable .kyb-node__box{fill:var(--notable-soft);stroke:var(--notable-border);} .kyb-node--notable .kyb-node__eyebrow{fill:var(--notable);} .kyb-node--critical .kyb-node__box{fill:var(--critical-soft);stroke:var(--critical);stroke-width:2;} .kyb-node--critical .kyb-node__name{fill:var(--critical);} .kyb-node--critical .kyb-node__eyebrow{fill:var(--critical);} /* keyboard focus ring in the app accent */ .kyb-node:focus-visible .kyb-node__focus{stroke:var(--accent);stroke-width:2.5;} .kyb-node:focus-visible .kyb-node__box{stroke:var(--accent);} /* hover / focus tooltip — anchored to the figure so the canvas scroll never clips it */ .kyb-graph__tooltip{position:absolute;z-index:5;pointer-events:none;max-width:15rem;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:8px;box-shadow:var(--shadow);padding:.4rem .55rem;font-size:.78rem;line-height:1.35;} .kyb-graph__tooltip[hidden]{display:none;} .kyb-graph__tooltip strong{color:var(--text);} /* caption + legend */ .kyb-graph__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;margin-top:.5rem;font-size:.78rem;color:var(--muted);} .kyb-graph__legend{display:flex;flex-wrap:wrap;gap:.2rem 1rem;} .kyb-graph__key{display:inline-flex;align-items:center;gap:.35rem;} .kyb-graph__dot{width:.72rem;height:.72rem;border-radius:3px;border:1px solid var(--border-strong);flex-shrink:0;} .kyb-graph__dot--critical{background:var(--critical-soft);border-color:var(--critical);} .kyb-graph__dot--notable{background:var(--notable-soft);border-color:var(--notable-border);} .kyb-graph__dot--neutral{background:var(--surface);border-color:var(--border-strong);} /* regulatory impact brief — the collapsible "what changes for you" disclosure */ .kyb-brief > summary{cursor:pointer;list-style:none;user-select:none;color:var(--text);} .kyb-brief > summary::-webkit-details-marker{display:none;} .kyb-brief > summary::before{content:"\203A";display:inline-block;margin-right:.4rem;color:var(--muted);transition:transform .15s ease;} .kyb-brief[open] > summary::before{transform:rotate(90deg);} .kyb-brief__note{font-size:.72rem;} /* once the graph is drawn, the nested list is redundant on screen but stays for print / no-JS */ .kyb-ownership-list--graphed{display:none;} /* On-screen report readability. The report is dense and leans on .small everywhere, which compounds against Tabler's ~14px base into hard-to-read body text. Lift the whole report one step and give it more line-height. The standalone print view (KybPrint) links only Bootstrap, not this sheet, and the downloadable PDF is composed separately — so both are unaffected. */ .kyb-report{font-size:1.03rem;line-height:1.6;} /* The platform-admin console, same readability bump as the report — its dense status tables and forms otherwise sit at Tabler's ~14px base. Scoped to /Admin via the .admin-area class the layout adds on those routes, so the tenant pages are untouched. */ .admin-area{font-size:1.03rem;line-height:1.55;} .admin-area .table{font-size:.95rem;} /* Admin index tiles: the .h6 title and .small description are pinned below the bumped body size — lift them so the landing tiles read at the same comfortable scale as the rest of the console. */ .admin-area .feature-tile h2{font-size:1.15rem;} .admin-area .feature-tile p{font-size:1rem;} /* a soft stroke/fill transition only when the viewer allows motion */ @media (prefers-reduced-motion:no-preference){ .kyb-node__box,.kyb-node__focus{transition:stroke .14s ease,fill .14s ease,stroke-width .14s ease;} } /* the SVG graph never prints; the nested list returns for paper */ @media print{ .kyb-graph{display:none!important;} .kyb-ownership-list--graphed{display:block!important;} } /* ---- multi-year financial-trend chart (ApexCharts, self-hosted) ------------ Progressive enhancement: the figure is hidden until financial-trend-chart.js renders ApexCharts into the mount and adds .is-ready; the server-rendered year-by-year table is the print / no-JS / render-failure fallback. ApexCharts draws its own SVG, legend and tooltip and reads the theme via CSS-var colours. */ .kyb-trendchart{display:none;position:relative;margin:.25rem 0 .75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);padding:.25rem .5rem;} .kyb-trendchart.is-ready{display:block;} .kyb-trendchart__mount{min-height:300px;} .kyb-trend-grade{font-variant-numeric:tabular-nums;} /* fallback table: shown by default (print / no-JS), hidden on screen once the chart draws */ .kyb-trendchart-fallback--charted{display:none;} @media print{ .kyb-trendchart{display:none!important;} .kyb-trendchart-fallback--charted{display:table!important;} } /* ---- dashboard change-event volume chart (ApexCharts, self-hosted) --------- */ .kyb-eventschart{display:none;} .kyb-eventschart.is-ready{display:block;} .kyb-eventschart__mount{min-height:240px;} .kyb-eventschart-fallback--charted{display:none;} @media print{ .kyb-eventschart{display:none!important;} } /* ============================================================ print Browser-printing the on-screen report: drop the Tabler shell chrome, black on white. (The dedicated /Reports/KybPrint page has no shell and its own print rules.) */ @media print{ .navbar,.navbar-vertical,.footer,.theme-toggle{display:none!important;} .page-wrapper{margin:0!important;} body{background:#fff!important;color:#000!important;} a{color:#000!important;text-decoration:none!important;} .kyb-report section > h2{color:#000!important;border-color:#000!important;} .kyb-report .badge{background:#fff!important;color:#000!important;border:1px solid #999!important;} }