@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #701e7d;
    border-color: #701e7d;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }
/* Reconnect UI */
#components-reconnect-modal {
    display: flex !important;
    opacity: 1 !important;
    background-color: rgb(255 255 255 /80%) !important;
}

    #components-reconnect-modal::before {
        content: "";
        width: 350px;
        height: 65px;
        background: #ac92ec;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 20px 20px 0px 0px;
    }

    #components-reconnect-modal h5 {
        width: 350px;
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 1050;
        background-color: #ac92ec;
        padding: .75rem 1.25rem;
        transform: translate(-50%, -50%);
        border-radius: 0px 0px 20px 20px;
        color: #444;
        margin-top: 60px !important;
        box-shadow: 4px 10px 10px 0px hsl(0deg 0% 0% / 20%);
    }

    #components-reconnect-modal div {
        margin: auto;
        z-index: 1050;
        border-color: #00dd9b #ff00ed #0c5578 #ffb600 !important;
    }

    #components-reconnect-modal button {
        z-index: 1500;
        border: 0px;
        font-size: 14px;
        padding: 5px 25px;
        border-radius: 4px;
        box-shadow: 5px 5px 5px 0px hsl(0deg 0% 40%);
        margin: auto !important;
        transition: .5s;
    }

        #components-reconnect-modal button:hover {
            background-color: #3d4c53;
            color: #fff;
        }
/* Reconnect UI End*/

/* =========================================================================
   PORTAL SHELL + DASHBOARD  — ported from einv_git_108_199 (frontend/src)
   3-panel sidebar layout (top bar / module rail / submenu) + dashboard look.
   ========================================================================= */

/* ----- design tokens (subset of source styles.css :root) ----------------- */
:root {
  --bg:        #f8fafc;
  --surface:   #ffffff;
  --border:    #e5e7eb;
  --border-2:  #f1f5f9;
  --text:      #0f172a;
  --text-2:    #475569;
  --text-3:    #94a3b8;
  --primary:   #4f46e5;
  --logo-blue: #0D7DF8;
  --radius:    10px;
  --radius-sm: 6px;
}

/* ----- portal frame ------------------------------------------------------ */
.portal { min-height: 100vh; display: flex; flex-direction: column; background: #f1f5f9; }

.portal-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 0.65rem 1.5rem; background: #fff;
  border-bottom: 1px solid var(--border); box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.portal-brand { display: flex; align-items: center; gap: 12px; }
.portal-brand .app-logo { height: 42px; }
.portal-brand-title { font-size: 1.05rem; font-weight: 600; color: var(--logo-blue); letter-spacing: .01em; }

.portal-user { display: flex; align-items: center; gap: 0.7rem; position: relative; }

/* API usage + expiry (header) — ported from BlazorSMD api-info-box */
.portal-usage { text-align: right; line-height: 1.25; font-size: .72rem; }
.portal-usage .pu-api { color: #DC4c64; font-weight: 700; }
.portal-usage .pu-api i { color: #3b71ca; margin-right: 4px; }
.portal-usage .pu-exp { color: #d99400; font-weight: 700; font-size: .68rem; }
/* Ask + Support + Screen — plain clickable text (no box), grey by default, colour on hover. */
.portal-print, .portal-ask, .portal-support { display: inline-flex; align-items: center; gap: .35rem; border: 0;
  background: transparent; padding: .4rem .3rem; font-size: .8rem; font-weight: 600; color: #475569;
  text-decoration: none; cursor: pointer; }
.portal-print:hover { color: var(--logo-blue); }
.portal-ask:hover { color: #4f46e5; }
.portal-support:hover { color: #0369a1; }
@media (max-width: 720px) { .portal-support span { display: none; } }
/* language picker (top bar) */
.portal-lang { border: 1px solid var(--border); background: #fff; border-radius: 8px;
  padding: .35rem .5rem; font-size: .78rem; color: #475569; cursor: pointer; font-family: inherit; }
.portal-lang:hover { border-color: var(--logo-blue); color: var(--logo-blue); }
.kyc-lang { border: 1px solid #e2e8f0; background: #fff; border-radius: 6px; padding: 4px 8px;
  font-size: .8rem; color: #334155; cursor: pointer; font-family: inherit; margin-left: .5rem; }
@media (max-width: 720px) { .portal-usage, .portal-print span, .portal-ask span { display: none; } }

/* ===== RTL (Arabic / Urdu) — flip text + sidebar side ===== */
[dir="rtl"] .portal-usage { text-align: left; }
[dir="rtl"] .portal-usage .pu-api i { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .user-menu { left: 0; right: auto; }
[dir="rtl"] .user-menu-hint { margin-left: 0; margin-right: auto; }

/* ===== Print: only the page content, no header / sidebar ===== */
@media print {
  .portal-top, .portal-side, .portal-build, .portal-print, .side-search,
  .modal, .modal-backdrop { display: none !important; }
  .portal-body { display: block !important; padding: 0 !important; }
  .portal-main { border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; }
  body, .portal, .portal-body { background: #fff !important; }
  a[href]::after { content: ""; }  /* don't append URLs */
}

/* body — sidebar + main */
.portal-body {
  display: grid; grid-template-columns: 240px 1fr; gap: 1rem;
  padding: 1rem; flex: 1; align-items: stretch;
}

/* avatar */
.avatar-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.avatar-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--border-2); color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font: inherit;
}
.avatar-btn:hover { background: #e2e8f0; }
/* Individual / Business search-type segmented toggle (top of the screen) */
.scr2-typeseg { display: inline-flex; background: #eef2f8; border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px; padding: 4px; gap: 4px; margin: 0 0 1rem; }
.scr2-typeseg-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1.3rem;
  border-radius: 9px; font-size: .9rem; font-weight: 600; color: #475569; text-decoration: none; transition: .15s; }
.scr2-typeseg-btn:hover { color: #1e40af; }
.scr2-typeseg-btn.active { background: #fff; color: #1e40af; box-shadow: 0 1px 4px rgba(15,23,42,.14); }
.scr2-typeseg-btn i { font-size: 1rem; }
/* Business screen — lighter green panels (distinguishes Business from Individual) */
.biz-screen .scr-card { background: #f0fdf4; border-color: #bbf7d0; }
.biz-screen .scr-card-head { color: #166534; border-bottom-color: #bbf7d0; }
.biz-screen .scr2-typeseg-btn.active { color: #166534; }
/* Individual screen — lighter blue panels */
.ind-screen .scr2-panel, .ind-screen .scr2-dsbar { background: #eff6ff; border-color: #bfdbfe; }
.ind-screen .scr2-panel-head { color: #1e40af; }
/* filter input + execute button group (quick/result filters) */
.scr-filter-group { display: flex; gap: 6px; margin-left: auto; max-width: 380px; }
.scr-filter-group .scr-filter { margin-left: 0; }
.scr-filter-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.avatar-btn.has-img { padding: 0; overflow: hidden; border-color: var(--primary, #2563eb); }
.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar-timer { font-size: 0.65rem; color: #64748b; white-space: nowrap; }

/* user dropdown */
.user-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 260px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,23,42,.12); z-index: 90; padding: 0.6rem 0.55rem;
}
.user-menu[hidden] { display: none; }
.user-menu-head { padding: 0.2rem 0.45rem 0.5rem; border-bottom: 1px solid var(--border-2); margin-bottom: 0.45rem; }
.user-menu-name { font-size: 0.9rem; font-weight: 500; color: #0f172a; }
.user-menu-sub  { font-size: 0.7rem; color: #94a3b8; letter-spacing: .04em; text-transform: uppercase; }
.user-menu-list { list-style: none; margin: 0; padding: 0 0.45rem; }
.user-menu-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 0.18rem 0; }
.user-menu-row .user-menu-k { color: #64748b; }
.user-menu-row .user-menu-v { color: #0f172a; }
.user-menu-divider { height: 1px; background: var(--border-2); margin: 0.5rem 0.2rem; }
.user-menu-item {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.45rem 0.55rem; background: transparent; border: 0; text-align: left;
  color: #1f2937; font-size: 0.85rem; cursor: pointer; border-radius: 6px; text-decoration: none;
}
.user-menu-item:hover { background: #f1f5f9; color: var(--logo-blue); }
.user-menu-danger { color: #dc2626; }
.user-menu-danger:hover { background: #fef2f2; color: #dc2626; }
.user-menu-section { padding: 0.45rem 0.6rem 0.2rem; font-size: 0.62rem; letter-spacing: 0.06em;
  font-weight: 700; text-transform: uppercase; color: #94a3b8; }
.user-menu-hint { margin-left: auto; color: #94a3b8; font-size: 0.68rem; }
.user-menu-item .ue-lead { width: 1.1rem; text-align: center; font-size: .95rem; line-height: 1; }
/* avatar emoji */
.avatar-emoji { font-size: 1.15rem; line-height: 1; }
/* emoji picker grid */
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; padding: 4px 10px 8px; }
.emoji-cell { background: transparent; border: 1px solid var(--border-2, #f1f5f9); border-radius: 6px;
  cursor: pointer; padding: 3px; font-size: 1.05rem; line-height: 1; font-family: inherit; }
.emoji-cell:hover { border-color: var(--logo-blue, #2563eb); background: #f8fafc; }
/* interface-theme rows */
.theme-item { position: relative; }
.theme-item .ti-label { flex: 1; }
.theme-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.theme-sw-default  { background: linear-gradient(135deg, #2563eb 50%, #ffffff 50%); }
.theme-sw-dark     { background: linear-gradient(135deg, #38bdf8 50%, #0b1220 50%); }
.theme-sw-sepia    { background: linear-gradient(135deg, #8b5a2b 50%, #faf3e3 50%); }
.theme-sw-contrast { background: linear-gradient(135deg, #facc15 50%, #000000 50%); }
.theme-check { margin-left: auto; color: var(--logo-blue, #2563eb); opacity: 0; }
.theme-item.active .theme-check { opacity: 1; }
.theme-item.active { background: #f1f5f9; }
/* change-password modal */
.cpw-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 2000;
  display: none; align-items: center; justify-content: center; }
.cpw-overlay.open { display: flex; }
.cpw-box { width: 360px; max-width: calc(100vw - 2rem); background: #fff; border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15,23,42,.3); overflow: hidden; }
.cpw-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem;
  border-bottom: 1px solid var(--border, #e2e8f0); font-weight: 700; color: #1e293b; }
.cpw-head i { color: var(--logo-blue, #2563eb); }
.cpw-x { border: 0; background: transparent; font-size: 1.3rem; line-height: 1; color: #64748b; cursor: pointer; }
.cpw-body { padding: 1rem; }
.cpw-banner { display: flex; align-items: center; gap: .5rem; margin-bottom: .85rem; padding: .55rem .7rem;
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.cpw-banner i { font-size: .95rem; }
.cpw-lbl { display: block; font-size: .72rem; font-weight: 600; color: #475569; margin: .5rem 0 .2rem; }
.cpw-lbl:first-child { margin-top: 0; }
.cpw-input { width: 100%; border: 1.5px solid var(--line, #e2e8f0); border-radius: 8px; padding: .5rem .65rem;
  font-size: .9rem; color: #1e2235; background: #fbfbfe; outline: 0; }
.cpw-input:focus { border-color: var(--logo-blue, #2563eb); }
.cpw-msg { min-height: 1.1rem; margin-top: .6rem; font-size: .8rem; }
.cpw-msg.err { color: #dc2626; }
.cpw-msg.ok { color: #16a34a; }
.cpw-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--border, #e2e8f0); }

/* =========================================================================
   Interface themes — activated by data-theme on <html> (avatar menu).
   Each theme just re-points the design tokens; one shared block of element
   overrides (html[data-theme] …) repaints the shell, panels, tables, inputs
   and modals so the whole UI follows. Ported from the source styles.css.
   ========================================================================= */
html[data-theme="dark"] {
  --bg: #0b1220; --surface: #111827; --border: #1f2937; --border-2: #1e293b; --line: #1f2937;
  --text: #e2e8f0; --text-2: #cbd5e1; --text-3: #94a3b8; --ink: #e2e8f0;
  --primary: #38bdf8; --logo-blue: #38bdf8; color-scheme: dark;
}
html[data-theme="sepia"] {
  --bg: #faf3e3; --surface: #fffaf0; --border: #e7d8b6; --border-2: #f1e6c8; --line: #e7d8b6;
  --text: #3b2e1c; --text-2: #6b563a; --text-3: #a18a64; --ink: #3b2e1c;
  --primary: #8b5a2b; --logo-blue: #8b5a2b;
}
html[data-theme="contrast"] {
  --bg: #000000; --surface: #0a0a0a; --border: #ffffff; --border-2: #1a1a1a; --line: #ffffff;
  --text: #ffffff; --text-2: #ffffff; --text-3: #e5e5e5; --ink: #ffffff;
  --primary: #facc15; --logo-blue: #facc15; color-scheme: dark;
}
html[data-theme] body, html[data-theme] .portal { background: var(--bg) !important; color: var(--text); }
html[data-theme] .portal-top { background: var(--surface) !important; border-bottom-color: var(--border) !important; color: var(--text); }
html[data-theme] .portal-side { background: var(--surface) !important; border-right-color: var(--border) !important; }
html[data-theme] .portal-main { background: var(--surface) !important; color: var(--text); border-color: var(--border) !important; }
html[data-theme] .portal-build { color: var(--text-3); }
html[data-theme] .portal-brand-title { color: var(--text); }
html[data-theme] .side-pane-head { color: var(--text-3) !important; }
html[data-theme] .side-top-link, html[data-theme] .side-bot-link { color: var(--text) !important; }
html[data-theme] .side-top-link:hover, html[data-theme] .side-bot-link:hover { background: rgba(127,127,127,.12); }
html[data-theme] .side-top-link.active, html[data-theme] .side-bot-link.active { background: rgba(127,127,127,.18); color: var(--primary) !important; }
html[data-theme] .side-search input, html[data-theme] .scr2-ig input, html[data-theme] .scr2-ig select,
html[data-theme] .scr2-ig textarea, html[data-theme] .cpw-input, html[data-theme] .form-control,
html[data-theme] textarea, html[data-theme] input[type="text"], html[data-theme] input[type="date"],
html[data-theme] input[type="password"], html[data-theme] input[type="email"], html[data-theme] input[type="number"], html[data-theme] select {
  background: var(--bg) !important; color: var(--text) !important; border-color: var(--border) !important; }
html[data-theme] .user-menu, html[data-theme] .cpw-box, html[data-theme] .dash-card, html[data-theme] .scr2-panel,
html[data-theme] .scr2-head, html[data-theme] .modal-content, html[data-theme] .kyc-palette,
html[data-theme] .scr-toolbar, html[data-theme] .cm-pager-wrap, html[data-theme] .card {
  background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
html[data-theme] .user-menu-item, html[data-theme] .user-menu-name, html[data-theme] .user-menu-v { color: var(--text); }
html[data-theme] .user-menu-item:hover { background: rgba(127,127,127,.14); }
html[data-theme] .table, html[data-theme] .scr-table { color: var(--text); }
html[data-theme] .table td, html[data-theme] .table th, html[data-theme] .scr-table td, html[data-theme] .scr-table th { border-color: var(--border) !important; }
html[data-theme] .table tbody tr:nth-child(even), html[data-theme] .scr-table tbody tr:nth-child(even) { background: rgba(127,127,127,.06); }
html[data-theme] .avatar-btn { background: var(--bg); color: var(--text); border-color: var(--border); }
html[data-theme] .portal-print, html[data-theme] .portal-lang { background: var(--surface); color: var(--text); border-color: var(--border); }
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3, html[data-theme] h4, html[data-theme] h5, html[data-theme] h6,
html[data-theme] .cp-v, html[data-theme] .cd-prev, html[data-theme] .cd-name { color: var(--text); }
html[data-theme] .text-muted, html[data-theme] .scr2-sub, html[data-theme] .cp-k, html[data-theme] .small.text-muted { color: var(--text-3) !important; }
/* Dashboard numbers/labels hardcode dark colors (#0f172a/#334155/#475569) that
   vanish on dark surfaces — repoint them to the theme tokens (fixes Workload &
   API Usage percentages reading as invisible). */
html[data-theme] .dash-count, html[data-theme] .dash-donut-hole b,
html[data-theme] .dash-mini-row b, html[data-theme] .dash-card-h > span:first-child,
html[data-theme] .dash-bar-v { color: var(--text) !important; }
html[data-theme] .dash-bar-l, html[data-theme] .dash-mini, html[data-theme] .dash-mini b,
html[data-theme] .dash-gauge-top, html[data-theme] .dash-kpi-lbl { color: var(--text-2) !important; }
html[data-theme] .dash-chip { background: rgba(127,127,127,.16); color: var(--text-2); }
html[data-theme] .dash-prog, html[data-theme] .dash-gauge { background: rgba(127,127,127,.18); }

/* sidebar */
.portal-side {
  display: flex; flex-direction: column; position: sticky; top: 1rem;
  align-self: flex-start; height: calc(100vh - 90px);
  padding: 0.5rem 0.5rem 0;
  /* Scroll the menu when it is taller than the viewport (large menu font at
     high-DPI / zoom, or many MIS items) — otherwise items were clipped/hidden. */
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(13,125,248,.35) transparent;
}
/* slim, on-brand scrollbar (WebKit/Chromium) */
.portal-side::-webkit-scrollbar { width: 8px; }
.portal-side::-webkit-scrollbar-track { background: transparent; }
.portal-side::-webkit-scrollbar-thumb { background: rgba(13,125,248,.25); border-radius: 4px; }
.portal-side::-webkit-scrollbar-thumb:hover { background: rgba(13,125,248,.45); }
.side-pane { padding: 0.75rem 0.4rem; }
.side-pane-head {
  font-size: 0.62rem; font-weight: 400; text-transform: uppercase; letter-spacing: .06em;
  color: var(--logo-blue); padding: 0.2rem 0.5rem 0.45rem;
  border-bottom: 1px solid rgba(13,125,248,.18); margin-bottom: 0.35rem;
}
/* Modules panel sits snug under the search box (no gap) */
.portal-side > .side-pane:nth-child(2) { margin-top: 0; padding-top: .25rem; }
.portal-side > .side-pane:last-child { margin-top: auto; }
/* keep a visual gap before the sub-menu panel instead */
.side-pane-middle { flex: 1 1 auto; min-height: 80px; overflow-y: auto; margin-top: 1.75rem; }

.side-top-link {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left;
  background: transparent; border: 0; padding: 0.45rem 0.65rem; border-radius: var(--radius-sm);
  /* Stable menu font size (follows einv_git_108_199 .sidebar-link): one consistent
     size at every resolution — no width-band jumps that blew up to 18.4px on wide/
     uncovered screens. 0.68rem = 20% down from 0.85rem (2.28.2). */
  color: var(--text-2); font-size: 0.68rem; cursor: pointer;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin-bottom: 1px; text-decoration: none; transition: background .12s, color .12s;
}
.side-top-link:hover { background: #f8fafc; color: var(--text); }

/* ---- Screening: the headline module -------------------------------------
   One item in the sidebar is the product; the rest support it. Maroon, 20%
   larger than the 0.68rem base (0.68 * 1.2 = 0.816rem), and a slow breathing
   glow so the eye lands on it without the page feeling busy. The animation is
   decoration only -- switched off for anyone who asks for reduced motion. */
.side-top-link.side-main {
  font-size: 0.816rem; font-weight: 800; letter-spacing: .01em;
  /* !important: a blanket `.side-top-link { color:#001d43 !important }` further
     down this file would otherwise repaint this navy. */
  color: #800000 !important; margin: 2px 0 3px;
  border-left: 3px solid #800000; padding-left: calc(0.65rem - 3px);
  border-radius: var(--radius-sm);
  /* A standing highlight, not only on hover: this item should read as
     highlighted at rest, which is the whole point of singling it out. Kept as a
     tint rather than a solid fill so it does not compete with the ACTIVE state
     of whichever page the user is actually on. */
  background: linear-gradient(90deg, rgba(128,0,0,.10), rgba(128,0,0,.03));
  animation: sideMainGlow 3.2s ease-in-out infinite;
}
.side-top-link.side-main .side-icon i { font-size: 1.05em; color: #800000 !important; }
.side-top-link.side-main:hover { background: rgba(128,0,0,.16); color: #5c0000 !important; }
.side-top-link.side-main.active { background: rgba(128,0,0,.20); color: #5c0000 !important; }
@keyframes sideMainGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(128,0,0,0); }
  50%      { box-shadow: 0 0 10px 0 rgba(128,0,0,.22); }
}
@media (prefers-reduced-motion: reduce) {
  .side-top-link.side-main { animation: none; }
}
html[data-theme="dark"] .side-top-link.side-main,
html[data-theme="high-contrast"] .side-top-link.side-main {
  color: #e08a8a !important; border-left-color: #e08a8a;
  background: linear-gradient(90deg, rgba(224,138,138,.16), rgba(224,138,138,.05));
}
html[data-theme="dark"] .side-top-link.side-main .side-icon i,
html[data-theme="high-contrast"] .side-top-link.side-main .side-icon i { color: #e08a8a !important; }

/* ---- Insight in the top bar ----------------------------------------------
   Maroon, to match Screening in the sidebar: the two are the same family of
   thing, so they should read as the same family on screen.

   Every declaration here needs !important, and the reason is worth recording.
   Further down this file a blanket `.portal-print, .portal-ask, .portal-support`
   rule sets font-weight, font-size and (on hover) colour with !important. An
   important declaration beats a more specific normal one, so the extra class in
   `.portal-ask.portal-insight` counts for nothing on its own. With !important on
   both sides, specificity decides again and the two-class selector wins --
   whatever order the rules appear in. */
.portal-ask.portal-insight {
  color: #800000 !important; font-weight: 800 !important; font-size: .864rem !important;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(128,0,0,.10), rgba(128,0,0,.03));
  animation: insightGlow 3.2s ease-in-out infinite;
}
.portal-ask.portal-insight i { color: #800000 !important; font-size: 1.05em; }
.portal-ask.portal-insight:hover,
.portal-ask.portal-insight:hover i { color: #5c0000 !important; }
.portal-ask.portal-insight:hover { background: rgba(128,0,0,.16); }
.portal-ask.portal-insight.active { background: rgba(128,0,0,.20); color: #5c0000 !important; }
@keyframes insightGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(128,0,0,0); }
  50%      { box-shadow: 0 0 10px 0 rgba(128,0,0,.22); }
}
@media (prefers-reduced-motion: reduce) {
  .portal-ask.portal-insight { animation: none; }
}
html[data-theme="dark"] .portal-ask.portal-insight,
html[data-theme="high-contrast"] .portal-ask.portal-insight,
html[data-theme="dark"] .portal-ask.portal-insight i,
html[data-theme="high-contrast"] .portal-ask.portal-insight i {
  color: #e08a8a !important;
}
html[data-theme="dark"] .portal-ask.portal-insight,
html[data-theme="high-contrast"] .portal-ask.portal-insight {
  background: linear-gradient(90deg, rgba(224,138,138,.16), rgba(224,138,138,.05));
}

.side-top-link.active { background: rgba(13,125,248,.10); color: var(--logo-blue); }

.side-bot-link {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.6rem;
  /* Stable menu font size (same as .side-top-link) — no per-width breakpoints. */
  border-radius: var(--radius-sm); color: var(--text-2); font-size: 0.68rem;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin-bottom: 1px; text-decoration: none; transition: background .12s, color .12s;
}
.side-bot-link:hover { background: #f8fafc; color: var(--text); }
.side-bot-link.active { background: rgba(13,125,248,.10); color: var(--logo-blue); }
.side-bot-dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; }
.side-bot-link.active .side-bot-dot { background: var(--logo-blue); }

.side-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; color: #64748b; }
.side-top-link.active .side-icon { color: var(--logo-blue); }
.side-empty { padding: 0.4rem 0.5rem; color: var(--text-3); font-size: 0.8rem; font-style: italic; }
.side-submenu[hidden] { display: none; }

/* MIS panel — laid out like the Modules panel (header with underline, links
   always visible; no collapse / toggle). */

/* bottom "General" panel: title above its own underline (same blue as Modules) */
.side-pane-general { padding-top: .6rem; }

.portal-main {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(15,23,42,.04); padding: 1.5rem 1.75rem; min-height: calc(100vh - 100px);
}
.portal-build {
  margin-top: 1.5rem; padding-top: .75rem; border-top: 1px solid var(--border-2);
  text-align: center; font-size: .68rem; letter-spacing: .04em; color: #94a3b8;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}
/* Per-screen helper note — small + grey, darkens to black on hover. */
.page-note {
  font-size: .72rem; line-height: 1.45; color: #94a3b8; margin: -.25rem 0 1rem;
  display: flex; align-items: flex-start; gap: .35rem; transition: color .15s; cursor: default;
}
.page-note .bi { font-size: .8rem; margin-top: .08rem; flex: 0 0 auto; }
.page-note:hover { color: #000; }
html[data-theme] .page-note { color: var(--text-3); }
html[data-theme] .page-note:hover { color: var(--text); }

@media (max-width: 880px) {
  .portal-body { grid-template-columns: 1fr; }
  .portal-side { position: static; height: auto; }
}

/* sidebar collapse / open */
.portal-burger { border: 0; background: transparent; cursor: pointer; font-size: 1.2rem; color: #475569;
  padding: 4px 8px; border-radius: 8px; line-height: 1; }
.portal-burger:hover { background: #f1f5f9; color: var(--logo-blue); }
.portal.side-collapsed .portal-body { grid-template-columns: 1fr; }
.portal.side-collapsed .portal-side { display: none; }

/* menu command palette (search modal) */
.kyc-palette { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(15,23,42,.25); }
.kyc-palette-search { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.kyc-palette-search > i { color: #94a3b8; font-size: 1.05rem; }
.kyc-palette-search input { flex: 1; border: 0; outline: 0; font-size: 1rem; color: var(--text); background: transparent; }
.kyc-palette-list { list-style: none; margin: 0; padding: .4rem; height: 360px; overflow-y: auto; }
.kyc-pl-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 8px;
  cursor: pointer; color: var(--text-2); font-size: .9rem; }
.kyc-pl-item > i { color: #94a3b8; width: 18px; text-align: center; }
.kyc-pl-item:hover, .kyc-pl-item.active { background: rgba(13,125,248,.10); color: var(--logo-blue); }
.kyc-pl-item.active > i, .kyc-pl-item:hover > i { color: var(--logo-blue); }
.kyc-pl-trail { color: #94a3b8; font-size: .8rem; }
.kyc-pl-empty { padding: .8rem; text-align: center; color: #94a3b8; font-size: .85rem; font-style: italic; }

/* menu search + mic */
.side-search { display: flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--border);
  border-radius: 9px; padding: .35rem .5rem; margin: 0 .4rem; }
.side-search > i { color: #94a3b8; font-size: .85rem; }
.side-search input { flex: 1; border: 0; outline: 0; font-size: .8rem; background: transparent; color: var(--text); min-width: 0; }
.side-mic { border: 0; background: transparent; cursor: pointer; color: #94a3b8; padding: 2px 4px; border-radius: 6px; }
.side-mic:hover { color: var(--logo-blue); background: #eef2ff; }
/* Collapse button now lives beside the menu-search box. The top-bar burger only
   shows when the menu is collapsed (so it stays reachable to expand again). */
.side-collapse { border: 0; background: transparent; cursor: pointer; color: #94a3b8; padding: 2px 4px; border-radius: 6px; }
.side-collapse:hover { color: var(--logo-blue); background: #eef2ff; }
.portal-burger { display: none; }
.portal.side-collapsed .portal-burger { display: inline-flex; align-items: center; justify-content: center; }
.side-mic.listening { color: #dc2626; animation: side-mic-pulse 1s ease-in-out infinite; }
@keyframes side-mic-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* ----- dashboard (dh) ---------------------------------------------------- */
.dh { max-width: 920px; padding-top: 0.25rem; }
.dh-hero { margin: 0 0 1.5rem; }
.dh-hero h1 { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 500; color: #0f172a; letter-spacing: -0.01em; }
.dh-hero p { margin: 0; color: #64748b; font-size: 0.92rem; }

.dh-section { padding: 1.05rem 0 1.25rem; border-top: 1px solid #e2e8f0; }
.dh-section:first-of-type { border-top-color: transparent; padding-top: 0.25rem; }
.dh-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.55rem; }
.dh-eyebrow { font-size: 0.7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #94a3b8; }
.dh-jump { font-size: 0.78rem; color: var(--logo-blue); text-decoration: none; }
.dh-jump:hover { text-decoration: underline; }

.dh-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.55rem; margin: 0.4rem 0 0.2rem; }
.dh-block {
  background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.1rem; position: relative;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.dh-block::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 8px 0 0 8px; }
.dh-block-num { font-size: 1.5rem; font-weight: 500; color: #0f172a; letter-spacing: -0.01em; line-height: 1.15; }
.dh-block-label { font-size: 0.72rem; color: #64748b; letter-spacing: .04em; }
.dh-block-link { text-decoration: none; color: inherit; display: block; }
.dh-block-link:hover .dh-block { border-color: #cbd5e1; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15,23,42,.04); }
.dh-block-blue::before   { background: #0D7DF8; }
.dh-block-green::before  { background: #16a34a; }
.dh-block-amber::before  { background: #f59e0b; }
.dh-block-red::before    { background: #dc2626; }
.dh-block-grey::before   { background: #94a3b8; }
.dh-block-indigo::before { background: #6366f1; }
.dh-block-amber .dh-block-num { color: #b45309; }
.dh-block-red   .dh-block-num { color: #dc2626; }

.dh-hbars { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.25rem; }
.dh-hbar-row { display: grid; grid-template-columns: 150px 1fr 40px; align-items: center; gap: 0.55rem; }
.dh-hbar-label { font-size: 0.78rem; color: #64748b; }
.dh-hbar-track { height: 10px; background: #f8fafc; border-radius: 999px; overflow: hidden; }
.dh-hbar-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; min-width: 2px; }
.dh-hbar-value { font-size: 0.8rem; color: #0f172a; font-weight: 500; text-align: right; }

.dh-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.dh-action {
  display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem 0.9rem; color: var(--text); font-size: 0.85rem; transition: border-color .12s, transform .12s;
}
.dh-action:hover { border-color: var(--logo-blue); color: var(--logo-blue); transform: translateY(-1px); }

@keyframes dh-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.anim-fade-up { animation: dh-fade-up .5s ease both; }

/* =========================================================================
   DASHBOARD v2 — lighter + animated (rebuilt from Dashboard_KYC.razor)
   ========================================================================= */
.dash { max-width: 1100px; }
.dash-hero { margin: 0 0 1.2rem; }
.dash-hero h1 { font-size: 1.5rem; font-weight: 600; color: #0f172a; margin: 0 0 .2rem; letter-spacing: -.01em; }
.dash-hero p { color: #64748b; font-size: .9rem; margin: 0; }

.dash-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }
@media (max-width: 820px) { .dash-tiles { grid-template-columns: repeat(2, 1fr); } }
.dash-tile { position: relative; background: #fff; border: 1px solid #eef1f7; border-radius: 14px; padding: 1rem 1.1rem; overflow: hidden; }
.dash-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.dash-tile-ico { position: absolute; right: .9rem; top: .9rem; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.05rem; }
.dash-count { font-size: 1.9rem; font-weight: 800; color: #0f172a; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dash-tile-lbl { font-size: .76rem; color: #64748b; margin-top: .15rem; letter-spacing: .03em; }
.dash-tile-blue::before { background: #60a5fa; } .dash-tile-blue .dash-tile-ico { background: #eff6ff; color: #2563eb; }
.dash-tile-green::before { background: #34d399; } .dash-tile-green .dash-tile-ico { background: #ecfdf5; color: #059669; }
.dash-tile-amber::before { background: #fbbf24; } .dash-tile-amber .dash-tile-ico { background: #fffbeb; color: #d97706; }
.dash-tile-violet::before { background: #a78bfa; } .dash-tile-violet .dash-tile-ico { background: #f5f3ff; color: #7c3aed; }

.dash-card { background: #fff; border: 1px solid #eef1f7; border-radius: 14px; padding: 1rem 1.15rem; }
/* whole-card link (dashboard report shortcuts) */
a.dash-card-link { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s, border-color .15s; }
a.dash-card-link:hover { border-color: #c7d2fe; box-shadow: 0 6px 18px rgba(30,58,138,.10); transform: translateY(-2px); }
a.dash-card-link:hover .dash-chip { background: #4f46e5; color: #fff; }
/* light tints for the three report cards (first row) */
.dash-tint { border-width: 1px; border-style: solid; }
.dash-tint-blue  { background: #eef4ff; border-color: #d7e4ff; }
.dash-tint-blue  .dash-card-h > span:first-child, .dash-tint-blue  .dash-kpi b { color: #2552c9; }
.dash-tint-green { background: #ecfbf2; border-color: #cdeedb; }
.dash-tint-green .dash-card-h > span:first-child, .dash-tint-green .dash-kpi b { color: #0f9d6a; }
.dash-tint-amber { background: #fff6ea; border-color: #fbe4c6; }
.dash-tint-amber .dash-card-h > span:first-child, .dash-tint-amber .dash-kpi b { color: #c47d12; }
.dash-tint .dash-chip { background: rgba(255,255,255,.7); }
.dash-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.dash-card-h > span:first-child { font-size: .8rem; font-weight: 700; color: #334155; display: inline-flex; align-items: center; gap: .45rem; }
.dash-chip { font-size: .66rem; font-weight: 600; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: .15rem .55rem; }

/* collapsible graph panels (NOT dashboard) */
.gpanel-toggle { border: 0; background: transparent; cursor: pointer; color: #94a3b8; padding: 2px 7px; border-radius: 6px; line-height: 1; }
.gpanel-toggle:hover { color: #4f46e5; background: #f1f5f9; }
.gpanel-toggle i { transition: transform .2s; display: inline-block; }
.gpanel.collapsed .gpanel-toggle i { transform: rotate(180deg); }
.gpanel.collapsed > *:not(:first-child) { display: none !important; }
.gpanel.collapsed { padding-bottom: .6rem; }
/* scr-chart header needs to host the toggle inline */
.scr-chart-h { display: flex; align-items: center; justify-content: space-between; }

/* horizontal line graph (Most Hit DataSets) */
.dash-line { width: 100%; height: 200px; display: block; }
.dash-line-path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: dash-line-draw 1.2s ease forwards; }
@keyframes dash-line-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .dash-line-path { animation: none; stroke-dashoffset: 0; } }

/* animated bars — label sizes to its content (some pages set width:150px),
   track flexes, value fits; minmax(0,1fr) lets the track shrink so the row
   never overflows at higher browser zoom. */
.dash-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.dash-bar-l { font-size: .76rem; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.dash-bar-t { height: 12px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.dash-bar-f { display: block; height: 100%; width: 0; border-radius: 999px; animation: dash-grow 1s cubic-bezier(.2,.7,.2,1) forwards; }
.dash-bar-v { font-size: .78rem; font-weight: 700; color: #334155; text-align: right; font-variant-numeric: tabular-nums; }
@keyframes dash-grow { to { width: var(--w); } }

/* donut */
.dash-donut-wrap { display: flex; align-items: center; gap: 1.3rem; justify-content: center; }
.dash-donut { width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  animation: dash-pop .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dash-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dash-donut-hole { width: 84px; height: 84px; background: #fff; border-radius: 50%; display: grid; place-items: center; text-align: center; }
.dash-donut-hole b { font-size: 1.5rem; color: #0f172a; line-height: 1; }
.dash-donut-hole small { font-size: .62rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .08em; }
.dash-legend { list-style: none; margin: 0; padding: 0; font-size: .82rem; color: #475569; }
.dash-legend li { display: flex; align-items: center; gap: .45rem; padding: .2rem 0; }
.dash-legend .dot { width: 11px; height: 11px; border-radius: 3px; }
.dash-legend b { margin-left: auto; color: #0f172a; }

/* usage gauge */
.dash-gauge-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; color: #475569; margin-bottom: .4rem; }
.dash-gauge { height: 16px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.dash-gauge-f { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #93c5fd, #6366f1); animation: dash-grow 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
.dash-gauge-foot { font-size: .76rem; margin-top: .45rem; }

/* dashboard toolbar: period filter + auto-refresh
   (own class — must NOT reuse .dash-bar, which is the animated chart bar above) */
.dash-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.dash-period { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid #eef1f7; border-radius: 999px; padding: .25rem .35rem; }
.dash-period-lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; padding: 0 .5rem; }
.dash-period-btn { font-size: .8rem; font-weight: 600; color: #475569; text-decoration: none; padding: .3rem .8rem; border-radius: 999px; }
.dash-period-btn:hover { background: #f1f5f9; color: #4f46e5; }
.dash-period-btn.active { background: #eef2ff; color: #4f46e5; }
.dash-refresh { font-size: .8rem; color: #64748b; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.dash-refresh input { accent-color: #6366f1; }
.dash-chip-link { color: #4f46e5; text-decoration: none; }
.dash-chip-link:hover { text-decoration: underline; }
/* Case Statistics is a link to the pending queue, so it has to read as one:
   inherit the card's text colour rather than link blue, and lift on hover. */
.dash-pend-link { text-decoration: none; color: inherit; border-radius: 10px;
  padding: 2px; transition: background .12s, transform .12s; }
.dash-pend-link:hover { background: rgba(251,191,36,.10); transform: translateY(-1px); }
.dash-pend-link:hover .dash-count { color: #b45309; }
.dash-legend .dash-legend-sub { color: #94a3b8; font-size: .68rem; margin-left: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .dash-pend-link:hover { transform: none; } }

/* mini metrics (risk panel) */
.dash-mini { font-size: .82rem; color: #475569; }
.dash-mini-row { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; border-bottom: 1px dashed #eef1f7; }
.dash-mini-row b { color: #0f172a; }
.dash-mini-note { font-size: .68rem; color: #94a3b8; margin-top: .4rem; }

/* workload KPI */
.dash-kpi { font-size: 2.1rem; font-weight: 800; color: #4f46e5; line-height: 1; }
.dash-kpi span { font-size: 1rem; color: #94a3b8; font-weight: 700; }
.dash-kpi-lbl { font-size: .76rem; color: #64748b; }
.dash-kpi-sub { font-size: .72rem; color: #94a3b8; margin-top: .3rem; }
.dash-prog { height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.dash-prog-f { display: block; height: 100%; width: 0; border-radius: 999px; animation: dash-grow 1s ease forwards; }

/* pending cases list */
.dash-pend { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #334155; padding: .5rem .4rem; border-bottom: 1px solid #f1f5f9; font-size: .85rem; }
.dash-pend:hover { background: #fafbff; color: #4f46e5; }
.dash-pend-dot { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; flex: 0 0 auto; }
.dash-pend-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-pend-id { font-size: .72rem; color: #94a3b8; font-family: 'JetBrains Mono','Consolas',monospace; }

/* quick actions */
.dash-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
/* The screening allowance, sitting with the actions that consume it. */
.dash-usage { display:inline-flex; align-items:center; gap:.4rem; margin-left:auto;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px;
  padding:.45rem .8rem; font-size:.78rem; color:#475569; white-space:nowrap; }
.dash-usage b { color:#0f172a; font-weight:700; }
.dash-usage small { color:#94a3b8; font-size:.72rem; }
.dash-usage i.bi { color:#0b64b5; }
.dash-usage-sep { color:#cbd5e1; }
.dash-usage-bar { display:inline-block; width:62px; height:5px; border-radius:3px;
  background:#e2e8f0; overflow:hidden; margin-left:.25rem; }
.dash-usage-bar > i { display:block; height:100%; background:#22c55e; }
.dash-usage.is-warn { border-color:#fde68a; background:#fffbeb; }
.dash-usage.is-warn .dash-usage-bar > i { background:#f59e0b; }
.dash-usage.is-low  { border-color:#fecaca; background:#fef2f2; }
.dash-usage.is-low  .dash-usage-bar > i { background:#dc2626; }
.dash-usage.is-low b { color:#b91c1c; }
@media (max-width: 720px) { .dash-usage { margin-left:0; } }
html[data-theme="dark"] .dash-usage, html[data-theme="high-contrast"] .dash-usage {
  background:rgba(127,127,127,.12); border-color:rgba(127,127,127,.3); color:var(--text-2); }
html[data-theme="dark"] .dash-usage b, html[data-theme="high-contrast"] .dash-usage b { color:var(--text-1); }
.dash-action { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; background: #fff;
  border: 1px solid #eef1f7; border-radius: 10px; padding: .6rem .95rem; color: #334155; font-size: .85rem; font-weight: 500; transition: border-color .12s, transform .12s; }
.dash-action:hover { border-color: #6366f1; color: #4f46e5; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .dash-bar-f, .dash-gauge-f, .dash-donut, .scr2-anim { animation: none; width: var(--w); } }

/* =========================================================================
   LOGIN  — ported from einv_git_108_199 (frontend/src/pages/Login.tsx)
   Animated orb background + frosted card + branded header.
   ========================================================================= */
.auth-shell {
  min-height: 100vh; display: grid; place-items: center;
  background:
    radial-gradient(circle at 20% 10%, #c7e0ff 0%, transparent 35%),
    radial-gradient(circle at 80% 90%, #e9d5ff 0%, transparent 40%),
    linear-gradient(135deg, #f8fafc 0%, #eff6ff 60%, #faf5ff 100%);
  padding: 24px; position: relative; overflow: hidden;
}
.auth-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.auth-bg-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.45; animation: orb-float 14s ease-in-out infinite; }
.auth-bg-orb-1 { width: 380px; height: 380px; background: #0D7DF8; top: -120px; left: -120px; }
.auth-bg-orb-2 { width: 460px; height: 460px; background: #7c3aed; bottom: -180px; right: -160px; animation-delay: -7s; }
@keyframes orb-float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,30px) scale(1.06); } }

.auth-card {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(14px);
  border: 1px solid #e2e8f0; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(15,23,42,0.12); padding: 1.6rem 1.6rem 1.2rem;
}
.auth-header { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.auth-logo { height: 44px; width: auto; display: block; object-fit: contain; }
.auth-pill {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem;
  background: #eff6ff; color: #0D7DF8; border: 1px solid #bfdbfe; border-radius: 999px;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em;
}
.auth-title { font-size: 1.5rem; font-weight: 600; color: #0f172a; margin: 0 0 0.2rem; letter-spacing: -0.01em; }
.auth-subtitle { font-size: 0.85rem; color: #64748b; margin: 0 0 1rem; line-height: 1.5; }

.auth-banner { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.7rem; border-radius: 8px; font-size: 0.8rem; margin-bottom: 0.75rem; }
.auth-banner-err  { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.auth-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.65rem; align-items: center; }
.auth-field { display: flex; flex-direction: column; margin-bottom: 0.65rem; }
.auth-field label { font-size: 0.7rem; color: #64748b; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.2rem; font-weight: 500; }
.auth-field input {
  padding: 0.55rem 0.7rem; border: 1px solid #cbd5e1; border-radius: 8px;
  font-size: 0.92rem; font-family: inherit; background: white;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.auth-field input:focus { outline: 0; border-color: #0D7DF8; box-shadow: 0 0 0 3px rgba(13,125,248,0.15); }
.auth-input-wrap { position: relative; }
.auth-input-wrap input { padding-right: 56px; width: 100%; box-sizing: border-box; }
.auth-eye {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  background: transparent; border: 0; cursor: pointer; font-size: 0.7rem; color: #64748b;
  padding: 0.2rem 0.4rem; border-radius: 4px; font-family: inherit;
}
.auth-eye:hover { color: #0D7DF8; }

.auth-lookup { display: block; font-size: .7rem; margin-top: .2rem; min-height: 1em; color: #94a3b8; }
.auth-lookup.ok { color: #16a34a; }
.auth-lookup.bad { color: #dc2626; }
.auth-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: #475569; cursor: pointer; }
.auth-check input { accent-color: #0D7DF8; }
.auth-link { font-size: 0.78rem; color: #0D7DF8; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

.auth-human {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px;
  padding: 0.55rem 0.7rem; cursor: pointer; font-family: inherit;
  transition: background 0.12s, border-color 0.12s; margin-bottom: 0.65rem;
}
.auth-human:hover { background: #eff6ff; border-color: #93c5fd; }
.auth-human-box {
  width: 22px; height: 22px; border: 2px solid #cbd5e1; border-radius: 4px; background: white;
  display: inline-grid; place-items: center; flex-shrink: 0; color: white;
  transition: border-color 0.12s, background 0.12s; font-size: 14px; font-weight: 700;
}
.auth-human.checked .auth-human-box { background: #16a34a; border-color: #16a34a; }
.auth-human.checked { background: #f0fdf4; border-color: #86efac; }
.auth-human-label { flex: 1; text-align: left; font-size: 0.88rem; color: #1f2937; font-weight: 500; }
.auth-human-mark { font-size: 0.62rem; color: #94a3b8; letter-spacing: 0.1em; font-weight: 500; }

.auth-submit {
  width: 100%; padding: 0.7rem 1rem;
  background: linear-gradient(135deg, #0D7DF8 0%, #0a66c8 100%);
  color: white; border: 0; border-radius: 10px; font-size: 0.95rem; font-weight: 600;
  cursor: pointer; font-family: inherit; letter-spacing: 0.01em; margin-top: 0.4rem;
  box-shadow: 0 4px 12px rgba(13,125,248,0.3); transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.auth-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(13,125,248,0.4); }
.auth-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.auth-dev {
  display: block; margin: 0.6rem auto 0; background: none; border: 1px dashed #cbd5e1;
  color: #0D7DF8; font-family: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer;
  padding: 5px 14px; border-radius: 999px; letter-spacing: 0.05em;
}
.auth-dev:hover { background: #eff6ff; border-color: #93c5fd; }

.auth-default-hint {
  display: flex; align-items: center; gap: 0.3rem; margin-top: 0.85rem; font-size: 0.7rem; color: #64748b;
  background: #fffbeb; padding: 0.4rem 0.6rem; border-radius: 6px; border: 1px dashed #fcd34d; box-sizing: border-box;
}
.auth-default-hint code { background: white; padding: 0 0.25rem; border-radius: 3px; border: 1px solid #fde68a; color: #92400e; font-size: 0.7rem; }

.auth-trust-row {
  display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center;
  margin: 1rem 0 0.85rem; padding-top: 0.85rem; border-top: 1px solid #e2e8f0;
}
.auth-trust-pill {
  font-size: 0.65rem; font-weight: 500; color: #475569; background: #f1f5f9;
  border: 1px solid #e2e8f0; padding: 0.18rem 0.55rem; border-radius: 999px; letter-spacing: 0.04em;
}
.auth-footer {
  display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem;
  padding-top: 0.6rem; border-top: 1px solid #f1f5f9; font-size: 0.7rem; color: #94a3b8;
}
.auth-footer-links { display: inline-flex; gap: 0.7rem; }
.auth-footer-links a { color: #64748b; font-size: 0.7rem; }

/* =========================================================================
   SCREENING  — friendlier form + source-style summary panels & result set
   ========================================================================= */
.scr-head { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; color: #314AFF; }

.scr-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem 1.1rem; }
.scr-card-head { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #64748b; margin-bottom: .75rem; }
.scr-card-tools { font-size: .75rem; }
.scr-card-tools .btn-link { font-size: .75rem; text-decoration: none; }

/* dataset chips (toggle) */
.scr-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.scr-chip-btn {
  --chip: #64748b; display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  padding: .35rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  color: var(--chip); background: #fff; border: 1.5px solid var(--chip); opacity: .55;
  transition: all .12s;
}
.scr-chip-btn:hover { opacity: .85; }
.btn-check:checked + .scr-chip-btn { background: var(--chip); color: #fff; opacity: 1; }
.btn-check:checked + .scr-chip-btn::before { content: "\2713"; font-weight: 700; }

/* segmented precision control */
.scr-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.scr-seg-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .5rem .3rem;
  border: 1.5px solid #e5e7eb; background: #fff; border-radius: 10px; cursor: pointer;
  font-size: .85rem; font-weight: 600; color: #475569; font-family: inherit; transition: all .12s;
}
.scr-seg-btn small { font-size: .65rem; font-weight: 500; color: #94a3b8; }
.scr-seg-btn:hover { border-color: #c7d2fe; }
.scr-seg-btn.active { border-color: #314AFF; background: #eef2ff; color: #314AFF; }
.scr-seg-btn.active small { color: #6366f1; }
.scr-range { accent-color: #314AFF; }

/* result summary ribbon */
.scr-ribbon {
  background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px; padding: .55rem .85rem;
  font-size: .82rem; color: #334155; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
}
.scr-ribbon-sep { width: 1px; height: 14px; background: #c7d2fe; margin: 0 .5rem; }

/* summary panels */
.scr-panel { border-radius: 12px; padding: .85rem 1rem; border: 1px solid #e5e7eb; }
.scr-panel-amber { background: #fffaf0; border-color: #fde68a; }
.scr-panel-green { background: #f0fdf4; border-color: #bbf7d0; }
.scr-panel-blue  { background: #eff6ff; border-color: #bfdbfe; }
.scr-panel-head { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #475569; margin-bottom: .5rem; border-bottom: 1px solid rgba(100,116,139,.18); padding-bottom: .3rem; }
.scr-row { display: flex; align-items: center; gap: .5rem; padding: .22rem 0; font-size: .82rem; color: #334155; }
.scr-row-label { flex: 1; min-width: 0; }
.scr-flag { font-size: 1rem; }
.scr-badge { background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; min-width: 26px; text-align: center;
  font-size: .72rem; font-weight: 700; color: #334155; padding: 0 .45rem; }
.scr-empty { color: #94a3b8; font-size: .8rem; font-style: italic; padding: .2rem 0; }

/* ---- graphic charts (light, 3 per row) ---- */
.scr-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 1rem; }
@media (max-width: 820px) { .scr-charts { grid-template-columns: 1fr; } }
.scr-chart { background: #fcfdff; border: 1px solid #eef1f7; border-radius: 12px; padding: .8rem .9rem; }
.scr-chart-h { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #94a3b8; margin-bottom: .65rem; }
.scr-cbar { display: grid; grid-template-columns: 48px 1fr 26px; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.scr-cbar-l { font-size: .72rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-cbar-t { height: 9px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.scr-cbar-f { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; min-width: 3px; }
.scr-cbar-v { font-size: .74rem; font-weight: 700; color: #475569; text-align: right; }
.scr-donut-wrap { display: flex; align-items: center; gap: 1rem; }
.scr-donut { width: 96px; height: 96px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; }
.scr-donut-hole { width: 60px; height: 60px; background: #fcfdff; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; color: #334155; font-size: 1.05rem; }
.scr-donut-lg { list-style: none; margin: 0; padding: 0; font-size: .78rem; color: #475569; }
.scr-donut-lg li { display: flex; align-items: center; gap: .4rem; padding: .12rem 0; }
.scr-donut-lg .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.scr-donut-lg b { margin-left: auto; color: #1e2235; }

/* charts embedded in the AI report */
.ai-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1rem;
  padding-bottom: 1rem; border-bottom: 1px dashed #e2e8f0; }
.ai-charts .scr-chart { background: #fcfdff; }
@media (max-width: 700px) { .ai-charts { grid-template-columns: 1fr; } }

/* result set toolbar + table */
.scr-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.scr-toolbar-title { font-weight: 600; color: #334155; display: inline-flex; align-items: center; gap: .4rem; }
.scr-filter { max-width: 360px; }
.scr-table thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; border-bottom: 2px solid #e5e7eb; }
/* ===== Dataview tables — 20% smaller fonts, project-wide =====
   Base set to 0.8em so body cells + .small + Bootstrap .badge (all em-based)
   shrink 20% automatically; the rem-based accents are reduced explicitly. */
.scr-table { font-size: 0.8em; }
.scr-table thead th { font-size: 0.55rem; }                        /* was .68rem */
.scr-table .cm-badge { font-size: 0.6rem; padding: .15rem .5rem; } /* status pills (was .74rem) */
.scr-table .scr-badge { font-size: 0.58rem; min-width: 22px; }     /* count pill (was .72rem) */
.scr-main-row { cursor: pointer; }
.scr-main-row:hover { background: #f8fafc; }
.scr-chev { transition: transform .15s; color: #94a3b8; }
.scr-main-row[aria-expanded="true"] .scr-chev { transform: rotate(90deg); }
.scr-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid #e2e8f0; }
.scr-photo-blank { display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9; color: #94a3b8; }
.scr-ds { display: inline-block; color: #fff; font-size: .62rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin: 1px; }

/* detail expansion */
.scr-detail-row td { background: #f8fafc; }
.scr-detail { padding: 1rem 1.25rem; }
.scr-detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.scr-print-btn { white-space: nowrap; }
.scr-detail-photo { width: 120px; height: 120px; border-radius: 10px; object-fit: cover; border: 1px solid #e2e8f0; }
.scr-detail-block { margin-bottom: .9rem; }
.scr-detail-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #475569; margin-bottom: .35rem; }

/* "Why this record matched" — explainability chart + flow + conclusion */
.scr-why { background: #f8fafc; border: 1px solid #e6ebf3; border-radius: 12px; padding: .8rem 1rem; }
.scr-why-grid { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.scr-why-gauge { display: flex; flex-direction: column; align-items: center; gap: .35rem; flex: 0 0 auto; }
.scr-gauge { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.scr-gauge-hole { width: 70px; height: 70px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; color: #1e293b; box-shadow: inset 0 0 0 1px #eef2f7; }
.scr-gauge-hole small { font-size: .56rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.scr-gauge-band { font-size: .68rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.scr-why-bars { flex: 1 1 280px; min-width: 240px; }
.scr-why-method { font-size: .68rem; color: #94a3b8; margin-top: .4rem; }
.scr-flow { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed #e2e8f0; }
.scr-flow-lbl { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; }
.scr-flow-arr { color: #cbd5e1; }
.scr-flow-name { font-weight: 700; color: #0f172a; }
.scr-flow-via { font-size: .7rem; color: #64748b; font-style: italic; }
.scr-tok { font-size: .76rem; font-weight: 600; padding: 2px 9px; border-radius: 6px; border: 1px solid transparent; }
.scr-tok-exact { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.scr-tok-fuzzy { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.scr-tok-missing { background: #fee2e2; color: #b91c1c; border-color: #fecaca; text-decoration: line-through; }
.scr-why-concl { margin-top: .7rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px; padding: .55rem .75rem; font-size: .83rem; color: #5b4a14; line-height: 1.5; }
.scr-why-concl i { color: #d97706; }

/* ===== Full profile (UID lookup) detail ===== */
.uid-wrap { margin-top: .4rem; }
.uid-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.uid-chart { background: #fff; border: 1px solid #eef2f7; border-radius: 10px; padding: .6rem .75rem; }
.uid-chart-h { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin-bottom: .45rem; }
.uid-bar { display: flex; align-items: center; gap: .5rem; margin: 3px 0; }
.uid-bar-l { flex: 0 0 42%; font-size: .72rem; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uid-bar-t { flex: 1; height: 8px; background: #f1f5f9; border-radius: 5px; overflow: hidden; }
.uid-bar-f { display: block; height: 100%; border-radius: 5px; transition: width .6s ease; }
.uid-bar-v { flex: 0 0 26px; text-align: right; font-size: .72rem; font-weight: 700; color: #334155; }

.uid-sec { border: 1px solid #e8edf5; border-radius: 11px; margin-bottom: .8rem; overflow: hidden; }
.uid-sec-h { font-size: .8rem; font-weight: 700; padding: .5rem .8rem; border-bottom: 1px solid #eef2f7; display: flex; align-items: center; gap: .45rem; }
.uid-sec-b { padding: .7rem .8rem; }
.uid-count { background: #fff; border: 1px solid currentColor; opacity: .9; font-size: .66rem; font-weight: 700; padding: 0 7px; border-radius: 999px; margin-left: auto; }
.uid-red    .uid-sec-h { background: #fef2f2; color: #b91c1c; } .uid-red    { border-color: #fecaca; }
.uid-purple .uid-sec-h { background: #faf5ff; color: #7c3aed; } .uid-purple { border-color: #e9d5ff; }
.uid-blue   .uid-sec-h { background: #eff6ff; color: #1d4ed8; } .uid-blue   { border-color: #bfdbfe; }
.uid-amber  .uid-sec-h { background: #fffbeb; color: #b45309; } .uid-amber  { border-color: #fde68a; }
.uid-green  .uid-sec-h { background: #ecfdf5; color: #047857; } .uid-green  { border-color: #a7f3d0; }
.uid-slate  .uid-sec-h { background: #f8fafc; color: #475569; } .uid-slate  { border-color: #e2e8f0; }

.uid-entry { border-left: 3px solid #e2e8f0; padding: .25rem 0 .4rem .7rem; margin-bottom: .5rem; }
.uid-entry:last-child { margin-bottom: 0; }
.uid-entry-h { font-weight: 700; font-size: .84rem; color: #1e293b; }
.uid-origin { font-weight: 600; font-size: .68rem; color: #64748b; background: #f1f5f9; padding: 0 6px; border-radius: 5px; }
.uid-entry-sub { font-size: .78rem; color: #475569; margin-top: 1px; }
.uid-meas { margin-top: .35rem; display: flex; flex-wrap: wrap; gap: 4px; }
.uid-evs { margin-top: .35rem; display: flex; flex-wrap: wrap; gap: 5px; }
.uid-ev { font-size: .68rem; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; border-radius: 5px; padding: 1px 7px; }
.uid-chip { display: inline-block; font-size: .72rem; padding: 1px 8px; border-radius: 6px; margin: 2px; background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; }
.uid-chip-red { background: #fef2f2; border-color: #fecaca; color: #b91c1c; font-weight: 600; }
.uid-grp { margin-bottom: .55rem; }
.uid-grp-t { font-size: .72rem; font-weight: 700; color: #64748b; margin-bottom: .25rem; }
.uid-ul { margin: 0; padding-left: 1.1rem; }
.uid-ul li { font-size: .8rem; color: #334155; margin: 2px 0; }
.uid-muted { color: #94a3b8; font-size: .72rem; }
.uid-link { display: inline-flex; flex-direction: column; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; padding: .3rem .6rem; margin: 3px; max-width: 100%; }
.uid-link-n { font-weight: 600; font-size: .8rem; color: #1e293b; }
.uid-link-r { font-size: .7rem; color: #64748b; }
.uid-link-meta { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: 3px; }
.uid-scroll { max-height: 340px; overflow-y: auto; padding-right: .35rem; }
.uid-scroll::-webkit-scrollbar { width: 8px; } .uid-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.uid-note { display: flex; gap: .55rem; align-items: flex-start; padding: .35rem 0; border-bottom: 1px dashed #eef2f7; font-size: .82rem; color: #334155; line-height: 1.45; }
.uid-note:last-child { border-bottom: 0; }
.uid-note-n { flex: 0 0 22px; height: 22px; border-radius: 50%; background: #eff6ff; color: #1d4ed8; font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.uid-evi { display: flex; align-items: center; gap: .4rem; font-size: .78rem; padding: 2px 0; }
.uid-cred { font-size: .62rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; }
.uid-cred-high { background: #dcfce7; color: #166534; } .uid-cred-medium { background: #fef9c3; color: #854d0e; } .uid-cred-low { background: #fee2e2; color: #b91c1c; }

/* overview facts + generic key/values + raw JSON */
.uid-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.uid-fact { background: #fff; border: 1px solid #eef2f7; border-radius: 8px; padding: 6px 10px; }
.uid-fact-l { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; font-weight: 700; }
.uid-fact-v { font-size: .82rem; color: #1e293b; font-weight: 600; word-break: break-word; }
.uid-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.uid-thumb { width: 64px; height: 76px; object-fit: cover; border-radius: 8px; border: 1px solid #cbd5e1; }
.uid-kv { display: flex; gap: 8px; padding: 2px 0; font-size: .78rem; }
.uid-kv-k { flex: 0 0 38%; color: #64748b; font-weight: 600; word-break: break-word; }
.uid-kv-v { flex: 1; color: #1e293b; word-break: break-word; }
.uid-raw { margin-top: .9rem; border: 1px solid #e2e8f0; border-radius: 10px; background: #0f172a; }
.uid-raw > summary { cursor: pointer; padding: .55rem .8rem; font-size: .8rem; font-weight: 700; color: #e2e8f0; list-style: none; display: flex; align-items: center; gap: .45rem; }
.uid-raw > summary::-webkit-details-marker { display: none; }
.uid-raw[open] > summary { border-bottom: 1px solid #1e293b; }
.uid-raw pre { margin: 0; padding: .8rem; max-height: 420px; overflow: auto; font-size: .72rem; line-height: 1.5; color: #a5f3fc; white-space: pre-wrap; word-break: break-word; }
.scr-sanction-list { margin: 0; padding-left: 1.2rem; font-size: .82rem; color: #334155; columns: 2; }
.scr-sanction-list li { margin-bottom: .15rem; break-inside: avoid; }
.scr-detail-ul { margin: 0; padding-left: 1.2rem; font-size: .82rem; color: #334155; }
.scr-chip { display: inline-block; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px 8px;
  font-size: .75rem; color: #475569; margin: 2px; }
@media (max-width: 700px) { .scr-sanction-list { columns: 1; } }

/* =========================================================================
   SCREENING v2 — advanced Individual input panel (scr2)
   ========================================================================= */
.scr2 { --ac: #314AFF; --line: #e6e8f0; --ink: #1e2235; --muted: #6b7280; }

.scr2-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }
.scr2-head-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, #314AFF, #5b6bff); color: #fff; font-size: 1.25rem;
  box-shadow: 0 6px 16px rgba(49,74,255,.3); }
.scr2-head h5 { color: var(--ink); font-weight: 700; }
.scr2-sub { font-size: .8rem; color: var(--muted); }

/* hero search bar */
.scr2-hero { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1.5px solid var(--line);
  border-radius: 14px; padding: .5rem .5rem .5rem 1rem; box-shadow: 0 6px 22px rgba(15,18,48,.06);
  transition: border-color .15s, box-shadow .15s; }
.scr2-hero:focus-within { border-color: var(--ac); box-shadow: 0 8px 26px rgba(49,74,255,.16); }
.scr2-hero-ico { font-size: 1.15rem; color: var(--ac); }
.scr2-hero-input { flex: 1; border: 0; outline: 0; font-size: 1.05rem; background: transparent; color: var(--ink); padding: .5rem .2rem; }
.scr2-go { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 0; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, #314AFF, #2a3ad6); color: #fff; font-weight: 600; font-size: .92rem;
  padding: .7rem 1.4rem; min-width: 200px; border-radius: 10px; box-shadow: 0 4px 12px rgba(49,74,255,.32); transition: transform .12s, box-shadow .12s; }
.scr2-go:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(49,74,255,.42); }

/* ===== animated light "shine" sweep (Create Case + Start Search) ===== */
.fx-shine, .scr2-go { position: relative; overflow: hidden; }
.fx-shine::after, .scr2-go::after {
  content: ""; position: absolute; top: 0; left: -160%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); pointer-events: none;
  animation: fx-shine-sweep 3s ease-in-out infinite;
}
@keyframes fx-shine-sweep { 0% { left: -160%; } 55%, 100% { left: 160%; } }

/* Uniform action-button size — identical to "Start Search" (.scr2-go) */
.scr-case-btn, .scr-ai-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; flex: 0 0 auto;
  white-space: nowrap; border: 0; cursor: pointer; color: #fff; font-weight: 600; font-size: .92rem;
  padding: .7rem 1.4rem; min-width: 200px; border-radius: 10px; font-family: inherit;
}
/* Create Case — red gradient + soft glow pulse */
.scr-case-btn { background: linear-gradient(135deg, #e11d48, #be123c); animation: fx-glow-red 2.4s ease-in-out infinite; }
.scr-case-btn:hover { filter: brightness(1.06); }
@keyframes fx-glow-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,.0); }
  50% { box-shadow: 0 0 0 4px rgba(220,53,69,.18); }
}
/* AI Report — purple gradient */
.scr-ai-btn { background: linear-gradient(135deg, #7c3aed, #6d28d9); animation: fx-glow-violet 2.4s ease-in-out infinite; }
.scr-ai-btn:hover { filter: brightness(1.08); }
@keyframes fx-glow-violet {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,.0); }
  50% { box-shadow: 0 0 0 4px rgba(124,58,237,.22); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-shine::after, .scr2-go::after, .scr-case-btn, .scr-ai-btn { animation: none; }
}

/* Create Case modal — summary + highlights */
.case-summary { border: 1px solid #e5e7eb; border-radius: 10px; padding: .8rem .9rem; background: #f8fafc; }
.case-summary-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #64748b; margin-bottom: .6rem; }
.case-hl { display: flex; flex-wrap: wrap; gap: .4rem; }
.case-pill { font-size: .74rem; font-weight: 600; color: #334155; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: .15rem .6rem; }
.case-pill-total { background: #eef2ff; color: #314AFF; border-color: #c7d2fe; }
.case-pill-precise { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.case-pill-near { background: #eff6ff; color: #0d6efd; border-color: #bfdbfe; }
.case-pill-broad { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.case-ds { font-size: .7rem; font-weight: 700; color: #fff; background: #64748b; border-radius: 4px; padding: 1px 7px; }
.case-sub { font-size: .8rem; color: #475569; }

/* AI report modal */
.ai-loading { text-align: center; padding: 2rem 1rem; color: #475569; }
.ai-spinner { width: 38px; height: 38px; margin: 0 auto .8rem; border: 3px solid #e9d5ff; border-top-color: #7c3aed; border-radius: 50%; animation: ai-spin .8s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-report { font-size: .9rem; color: #1e2235; line-height: 1.6; }
.ai-report h4 { font-size: 1rem; color: #5b21b6; margin: 1rem 0 .4rem; font-weight: 700; }
.ai-report h4:first-child { margin-top: 0; }
.ai-report ul { margin: .3rem 0 .6rem; padding-left: 1.3rem; }
.ai-report p { margin: .3rem 0 .6rem; }
.ai-foot { border-top: 1px dashed #e2e8f0; padding-top: .6rem; }

/* panel */
.scr2-panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.15rem; margin-top: .9rem; }
.scr2-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .85rem; }
.scr2-panel-head > span { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; }
.scr2-tools button { border: 0; background: none; color: var(--ac); font-size: .76rem; font-weight: 600; cursor: pointer; padding: 0 2px; }
.scr2-tools i { color: #cbd5e1; font-style: normal; }

/* dataset chips */
.scr2-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.scr2-ds-check { position: absolute; opacity: 0; pointer-events: none; }
/* Soft tinted pill: OFF = plain light-grey outline (no fade);
   ON = soft colour-tinted fill + colour text + ✓  */
.scr2-chip { --chip: #64748b; display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; user-select: none;
  padding: .4rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #334155;
  background: #fff; border: 1.5px solid #e2e8f0; opacity: 1; transition: all .14s; }
.scr2-chip:hover { border-color: #cbd5e1; background: #f8fafc; transform: translateY(-1px); }
.scr2-chip-tick { width: 0; overflow: hidden; display: inline-flex; transition: width .14s; }
.scr2-ds-check:checked + .scr2-chip {
  color: #1e293b;                                           /* fallback */
  color: color-mix(in srgb, var(--chip) 65%, #0f172a);      /* darker tint of the dataset colour */
  background: #eef2ff;                                       /* fallback */
  background: color-mix(in srgb, var(--chip) 12%, #fff);
  border-color: #c7d2fe;                                     /* fallback */
  border-color: color-mix(in srgb, var(--chip) 42%, #fff);
  box-shadow: none;
}
.scr2-ds-check:checked + .scr2-chip:hover {
  background: color-mix(in srgb, var(--chip) 18%, #fff);
  border-color: color-mix(in srgb, var(--chip) 55%, #fff);
}
.scr2-ds-check:checked + .scr2-chip .scr2-chip-tick { width: 16px; }
.scr2-ds-check:focus-visible + .scr2-chip { outline: 2px solid var(--ac); outline-offset: 2px; }

/* labels + icon inputs */
.scr2-lbl { display: block; font-size: .76rem; font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.scr2-hint { color: var(--muted); font-weight: 400; font-size: .7rem; }
.scr2-ig { position: relative; }
.scr2-ig > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .8rem; pointer-events: none; }
.scr2-ig input, .scr2-ig select { width: 100%; border: 1.5px solid var(--line); border-radius: 9px; padding: .42rem .6rem .42rem 1.95rem;
  font-size: .68rem; line-height: 1.2; color: var(--ink); background: #fbfbfe; transition: border-color .15s, box-shadow .15s, background .15s; outline: 0; appearance: none; }
.scr2-ig select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 2rem; }
.scr2-ig input:focus, .scr2-ig select:focus { border-color: var(--ac); background: #fff; box-shadow: 0 0 0 3px rgba(49,74,255,.14); }

/* segmented precision */
.scr2-seg { display: grid; grid-template-columns: repeat(3,1fr); gap: .4rem; background: #f1f3fb; padding: 4px; border-radius: 12px; }
.scr2-seg-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: transparent;
  border-radius: 9px; padding: .55rem .3rem; cursor: pointer; font-family: inherit; transition: all .14s; }
.scr2-seg-btn .t { font-size: .86rem; font-weight: 700; color: #475569; }
.scr2-seg-btn .p { font-size: .66rem; color: #94a3b8; font-weight: 600; }
.scr2-seg-btn:hover { background: #e9ecfb; }
.scr2-seg-btn.active { background: #fff; box-shadow: 0 2px 8px rgba(49,74,255,.18); }
.scr2-seg-btn.active .t { color: var(--ac); }
.scr2-seg-btn.active .p { color: #6b7bff; }

/* threshold range */
.scr2-thwrap { margin-top: 1rem; }
.scr2-thtop { display: flex; justify-content: space-between; font-size: .78rem; color: var(--ink); font-weight: 600; margin-bottom: .35rem; }
.scr2-thtop strong { color: var(--ac); }
.scr2-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #314AFF 50%, #e5e7eb 50%); outline: 0; }
.scr2-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 3px solid var(--ac); cursor: pointer; box-shadow: 0 2px 6px rgba(49,74,255,.35); transition: transform .1s; }
.scr2-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.scr2-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--ac); cursor: pointer; }
.scr2-ticks { display: flex; justify-content: space-between; font-size: .64rem; color: #b6bccc; margin-top: 3px; }
.scr2-foot-note { font-size: .74rem; color: var(--muted); margin-top: .9rem; display: flex; align-items: center; gap: .35rem; }

/* === Match Precision (redesigned) — inline icon chips + live slider === */
.mp-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.mp-chip { display: inline-flex; align-items: center; gap: .4rem; border: 1.5px solid #e2e6f3;
  background: #fff; border-radius: 999px; padding: .42rem .85rem; cursor: pointer; font-family: inherit;
  font-size: .8rem; color: #475569; transition: all .15s ease; }
.mp-chip i { font-size: .92rem; color: var(--mpc, #94a3b8); transition: color .15s; }
.mp-chip .mp-t { font-weight: 700; }
.mp-chip .mp-p { font-weight: 800; color: var(--mpc, #64748b); font-size: .78rem; }
.mp-chip:hover { border-color: var(--mpc, #c7cdec); background: var(--mpb, #f6f8ff); transform: translateY(-1px); }
.mp-chip.active { background: var(--mpc); border-color: var(--mpc); color: #fff;
  box-shadow: 0 4px 12px var(--mps, rgba(49, 74, 255, .28)); }
.mp-chip.active i, .mp-chip.active .mp-p { color: #fff; }
.mp-broad   { --mpc: #d97706; --mpb: #fff7ed; --mps: rgba(217, 119, 6, .25); }
.mp-near    { --mpc: #2563eb; --mpb: #eff5ff; --mps: rgba(37, 99, 235, .25); }
.mp-precise { --mpc: #16a34a; --mpb: #f0fdf4; --mps: rgba(22, 163, 74, .25); }

.mp-slider { margin-top: 1.15rem; }
.mp-slider-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
.mp-slider-lbl { font-size: .78rem; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: .35rem; }
.mp-band { font-size: .7rem; font-weight: 800; padding: .16rem .6rem; border-radius: 999px; background: #eef2ff;
  color: #314AFF; letter-spacing: .03em; text-transform: uppercase; transition: color .16s, background .16s; }
.mp-track-wrap { position: relative; padding-top: 1.7rem; }
.mp-bubble { position: absolute; top: 0; transform: translateX(-50%); background: #0b2545; color: #fff;
  font-size: .7rem; font-weight: 800; padding: .12rem .45rem; border-radius: 7px; white-space: nowrap; pointer-events: none; }
.mp-bubble::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #0b2545; }
.mp-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ac) 50%, #e5e7eb 50%); outline: 0; cursor: pointer; }
.mp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 4px solid var(--th, var(--ac)); cursor: pointer; box-shadow: 0 2px 8px rgba(49, 74, 255, .4); transition: transform .12s, border-color .16s; }
.mp-range::-webkit-slider-thumb:hover { transform: scale(1.16); }
.mp-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 4px solid var(--th, var(--ac)); cursor: pointer; box-shadow: 0 2px 8px rgba(49, 74, 255, .4); }
.mp-ticks { display: flex; justify-content: space-between; font-size: .62rem; color: #aab2c8; margin-top: 7px; font-weight: 700; }

/* accordion (advanced filters) */
.scr2-acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; background: none;
  cursor: pointer; padding: 0; font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.scr2-acc-head > span { display: inline-flex; align-items: center; gap: .4rem; }
.scr2-acc-chev { transition: transform .2s; }
.scr2-acc-head[aria-expanded="true"] .scr2-acc-chev { transform: rotate(180deg); color: var(--ac); }
.scr2-acc-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; padding-top: 1rem; margin-top: .9rem; border-top: 1px dashed var(--line); }
@media (max-width: 800px) { .scr2-acc-body { grid-template-columns: 1fr; } }

/* toggle switches */
.scr2-switches { display: flex; flex-direction: column; gap: .55rem; }
.scr2-switch { display: flex; align-items: center; gap: .7rem; cursor: pointer; }
.scr2-switch input { position: absolute; opacity: 0; pointer-events: none; }
.scr2-switch-ui { flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; background: #d4d8e6; position: relative; transition: background .18s; }
.scr2-switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; }
.scr2-switch input:checked + .scr2-switch-ui { background: var(--ac); }
.scr2-switch input:checked + .scr2-switch-ui::after { transform: translateX(16px); }
.scr2-switch input:focus-visible + .scr2-switch-ui { outline: 2px solid var(--ac); outline-offset: 2px; }
.scr2-switch-txt { display: flex; flex-direction: column; line-height: 1.2; }
.scr2-switch-txt b { font-size: .82rem; color: var(--ink); font-weight: 600; }
.scr2-switch-txt small { font-size: .7rem; color: var(--muted); }

/* country multi-select trigger + rows */
.scr2-country-trigger { display: flex; align-items: center; gap: .5rem; width: 100%; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 9px; background: #fbfbfe; color: var(--ink);
  padding: .42rem .6rem; font-size: .68rem; line-height: 1.2; font-family: inherit; text-align: left; }
.scr2-country-trigger > i:first-child { color: #94a3b8; }
.scr2-country-trigger:hover { border-color: #c7d2fe; }
.scr2-country-trigger #natLabel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctry-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 8px; cursor: pointer; font-size: .88rem; color: var(--text-2); }
.ctry-item:hover { background: #f1f5f9; }
.ctry-flag { font-size: 1.1rem; width: 22px; text-align: center; }
.ctry-flag-img { width: 24px; height: 18px; object-fit: cover; border-radius: 2px; border: 1px solid #e2e8f0; flex: 0 0 auto; }
.ctry-name { flex: 1; color: #1e2235; }
.ctry-code { font-size: .72rem; color: #94a3b8; font-family: 'JetBrains Mono','Consolas',monospace;
  background: #f1f5f9; border-radius: 4px; padding: 1px 6px; }
.ctry-tick { color: transparent; }
.ctry-item.selected { background: rgba(49,74,255,.08); }
.ctry-item.selected .ctry-tick { color: #314AFF; }
.ctry-item.selected .ctry-code { background: #e0e7ff; color: #314AFF; }

/* coming-soon placeholder */
.cs-wrap { text-align: center; max-width: 460px; margin: 3rem auto; background: #fff; border: 1px solid #eef1f7;
  border-radius: 16px; padding: 2.2rem 1.5rem; }
.cs-icon { font-size: 2.4rem; color: #f59e0b; margin-bottom: .6rem; }
.cs-title { color: #1e2235; font-weight: 700; }
.cs-sub { color: #64748b; font-size: .9rem; margin-bottom: 1.2rem; }
.cs-sub code { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; color: #4f46e5; }

/* case manager */
.cm-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: .9rem; }
@media (max-width: 760px) { .cm-summary { grid-template-columns: repeat(2, 1fr); } }
.cm-stat { background: #fff; border: 1px solid #eef1f7; border-left: 4px solid #cbd5e1; border-radius: 12px; padding: .8rem 1rem; }
.cm-num { font-size: 1.7rem; font-weight: 800; color: #0f172a; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cm-lbl { font-size: .74rem; color: #64748b; letter-spacing: .03em; }
.cm-stat-total { border-left-color: #6366f1; } .cm-stat-total .cm-num { color: #4f46e5; }
.cm-stat-pending { border-left-color: #f59e0b; } .cm-stat-pending .cm-num { color: #b45309; }
.cm-stat-cleared { border-left-color: #10b981; } .cm-stat-cleared .cm-num { color: #059669; }
.cm-stat-reject { border-left-color: #ef4444; } .cm-stat-reject .cm-num { color: #dc2626; }
/* case aging cards */
.cm-aging { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: .9rem; }
@media (max-width: 760px) { .cm-aging { grid-template-columns: 1fr; } }
.cm-age { background: #fff; border: 1px solid #eef1f7; border-radius: 12px; padding: .85rem 1rem; display: flex; align-items: center; justify-content: space-between; border-left: 4px solid #cbd5e1; }
.cm-age-num { font-size: 1.8rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cm-age-lbl { font-size: .78rem; color: #64748b; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; text-align: right; }
.cm-age-1 { border-left-color: #34d399; } .cm-age-1 .cm-age-num { color: #059669; }
.cm-age-3 { border-left-color: #fbbf24; } .cm-age-3 .cm-age-num { color: #b45309; }
.cm-age-o { border-left-color: #f87171; } .cm-age-o .cm-age-num { color: #dc2626; }

/* pager */
.cm-pager-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.cm-showing { font-size: .78rem; color: #64748b; }
.cm-pager { display: inline-flex; align-items: center; gap: .25rem; }
.cm-page-btn { min-width: 30px; height: 30px; padding: 0 .5rem; border: 1px solid #e2e8f0; background: #fff; color: #475569;
  border-radius: 8px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.cm-page-btn:hover:not(:disabled):not(.active) { border-color: #c7d2fe; color: #4f46e5; }
.cm-page-btn.active { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.cm-page-btn:disabled { opacity: .4; cursor: default; }
.cm-ell { color: #94a3b8; padding: 0 .2rem; }
.cm-pageinfo { font-size: .78rem; color: #64748b; }
.cd-pagewrap, .scr-pagewrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; }

/* inline case detail panel (under the cases list) */
.cd-panel { margin-top: 1rem; border: 1px solid #e5e7eb; border-radius: 14px; padding: 0; overflow: hidden; }
.cd-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.1rem; background: #fafbff; border-bottom: 1px solid #eef1f7; }
.cd-panel-title { font-weight: 700; color: #1e2235; font-size: 1rem; }
.cd-panel #cdBody { padding: 1.1rem; }

/* case detail / management pane */
.cd-mgmt { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.cd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cd-name { font-size: 1.1rem; font-weight: 700; color: #0f172a; }
.cd-meta { font-size: .78rem; color: #64748b; margin-top: .15rem; }
.cd-ds { margin-top: .5rem; font-size: .74rem; color: #475569; }
.cd-remarks { width: 100%; min-height: 70px; border: 1.5px solid #e5e7eb; border-radius: 10px; padding: .55rem .7rem; font-size: .88rem; outline: 0; resize: vertical; }
.cd-remarks:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.14); }
.cd-actions { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
.cd-msg { font-size: .8rem; color: #64748b; }
.cd-msg-ok { color: #16a34a; font-weight: 600; }
.cd-msg-err { color: #dc2626; font-weight: 600; }
.cd-subhead { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin: .5rem 0 .4rem; }
.cd-photo { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid #e2e8f0; }
.cd-photo-blank { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #f1f5f9; color: #94a3b8; }
.cd-ds-b { display: inline-block; color: #fff; font-size: .6rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; margin: 1px; }
.cd-mediarow { display: flex; gap: .5rem; flex-wrap: wrap; margin: .9rem 0; }
.cd-prev { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: .55rem .7rem; font-size: .84rem; min-height: 70px; color: #475569; }
/* corroboration + weighted risk badges */
.cd-corr { display: inline-block; font-size: .66rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin: 1px; }
.cd-corr-ok { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.cd-corr-bad { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.cd-risk { display: inline-block; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.cd-risk-h { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.cd-risk-m { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.cd-risk-l { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

/* per-match disposition */
.cd-disp-btns { display: flex; flex-direction: column; gap: 4px; min-width: 132px; }
.cd-disp-b { font-size: .68rem; font-weight: 700; line-height: 1.1; padding: 5px 9px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; background: #f1f5f9; color: #475569; display: inline-flex; align-items: center; gap: 5px; text-align: left; white-space: nowrap; transition: filter .12s, transform .12s; }
.cd-disp-b i { font-size: .8rem; }
.cd-disp-b:hover { transform: translateY(-1px); }
.cd-disp-b:hover { filter: brightness(.96); }
.cd-disp-b.cd-disp-tp { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.cd-disp-b.cd-disp-fp { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.cd-disp-b.cd-disp-inc { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.cd-disp-set { display: inline-block; font-size: .64rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-bottom: 2px; }
.cd-disp-set.cd-disp-tp { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.cd-disp-set.cd-disp-fp { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.cd-disp-set.cd-disp-inc { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.cd-disp-change-lbl { font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; margin: 5px 0 2px; }
/* per-matched-profile remark box (Case Manager) */
.cd-prem { width: 100%; min-width: 150px; font-size: .76rem; font-family: inherit; border: 1px solid #d6e0ea; border-radius: 7px;
  padding: 4px 7px; resize: vertical; min-height: 30px; line-height: 1.35; background: #fbfdff; color: #1f2937; transition: border-color .15s, box-shadow .15s; }
.cd-prem:focus { outline: 0; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.cd-prem.cd-prem-saving { border-color: #f59e0b; }
.cd-prem.cd-prem-ok { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.15); }
.cd-prem.cd-prem-err { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,.15); }
/* disposition as single-select radios (one verdict at a time) */
.cd-disp-radios { display: flex; flex-direction: column; gap: 4px; min-width: 132px; }
.cd-radio { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 700; padding: 4px 8px;
  border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; color: #475569; background: #f8fafc;
  transition: background .12s, border-color .12s; }
.cd-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.cd-radio-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #cbd5e1; flex: 0 0 auto; position: relative; transition: border-color .12s; }
.cd-radio.sel .cd-radio-dot::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: currentColor; }
.cd-radio:hover { border-color: #94a3b8; }
.cd-radio.cd-disp-tp.sel  { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }
.cd-radio.cd-disp-tp.sel .cd-radio-dot { border-color: #b91c1c; }
.cd-radio.cd-disp-fp.sel  { background: #ecfdf5; color: #059669; border-color: #6ee7b7; }
.cd-radio.cd-disp-fp.sel .cd-radio-dot { border-color: #059669; }
.cd-radio.cd-disp-inc.sel { background: #fffbeb; color: #b45309; border-color: #fcd34d; }
.cd-radio.cd-disp-inc.sel .cd-radio-dot { border-color: #b45309; }
.cd-disp-reason { font-size: .62rem; color: #94a3b8; margin-bottom: 3px; max-width: 150px; }

/* jurisdiction requirements checklist */
.cd-jur { background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #2563eb; border-radius: 8px; padding: .7rem .9rem; margin-bottom: .9rem; }
.cd-jur-head { font-weight: 700; font-size: .9rem; color: #1e293b; }
.cd-jur-reg { font-weight: 600; font-size: .72rem; color: #2563eb; margin-left: .35rem; }
.cd-jur-note { font-size: .72rem; color: #64748b; margin: .15rem 0 .5rem; }
.cd-jur-item { display: flex; gap: .5rem; align-items: flex-start; font-size: .8rem; color: #334155; padding: 3px 0; cursor: pointer; }
.cd-jur-item input { margin-top: 3px; flex: 0 0 auto; }

/* case activity timeline */
.cd-timeline { position: relative; margin: .4rem 0 .2rem .4rem; padding-left: 1.1rem; border-left: 2px solid #e2e8f0; }
.cd-tl-item { position: relative; padding: 0 0 .8rem 0; }
.cd-tl-dot { position: absolute; left: -1.6rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; display: flex; align-items: center; justify-content: center; font-size: .58rem; }
.cd-tl-act { font-weight: 700; font-size: .78rem; color: #1e293b; display: flex; justify-content: space-between; gap: .6rem; }
.cd-tl-date { font-weight: 500; font-size: .68rem; color: #94a3b8; white-space: nowrap; }
.cd-tl-detail { font-size: .76rem; color: #475569; }

/* comments */
.cd-clog { max-height: 220px; overflow-y: auto; border: 1px solid #eef1f7; border-radius: 10px; padding: .6rem; background: #fafbff; }
.cd-clog-empty { color: #94a3b8; font-size: .85rem; text-align: center; padding: .6rem; }
.cd-clog-item { background: #fffdf2; border: 1px solid #f1ead0; border-left: 3px solid #fcd34d; border-radius: 8px; padding: .5rem .7rem; margin-bottom: .5rem; font-size: .85rem; color: #1e2235; }
.cd-clog-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .7rem; color: #94a3b8; margin-bottom: .2rem; }
.cd-clog-dt { color: #64748b; font-weight: 600; white-space: nowrap; }
.cd-clog-dt i { font-size: .9em; margin-right: 1px; }
.cd-cinput { display: flex; gap: .5rem; margin-top: .6rem; }
.cd-cinput input { flex: 1; border: 1.5px solid #e5e7eb; border-radius: 10px; padding: .5rem .7rem; font-size: .88rem; outline: 0; }
.cd-cinput input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.14); }
/* documents form */
.cd-docform { margin-top: .7rem; }
.cm-caseid { color: #4f46e5; font-weight: 700; text-decoration: none; cursor: pointer; }
.cm-caseid:hover { text-decoration: underline; color: #312e81; }
.cm-filters { padding: 1rem 1.15rem; }
/* Load button must fit its column (override the 200px min-width of .scr2-go) */
.cm-load { min-width: 0 !important; width: 100%; padding: .6rem .5rem; }
.cm-row { animation: scr2-rise .45s ease both; }
.cm-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; }
.cm-b-pending { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.cm-b-cleared { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.cm-b-reject { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.cm-b-other { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

/* 3-field DOB */
.scr2-dob { display: grid; grid-template-columns: 1fr 1.25fr 1.35fr; gap: .35rem; }
.scr2-dob input, .scr2-dob select { min-width: 0; border: 1.5px solid var(--line); border-radius: 9px; padding: .42rem .45rem;
  font-size: .68rem; line-height: 1.2; color: var(--ink); background: #fbfbfe; outline: 0; text-align: center; appearance: none; }
.scr2-dob select { text-align: left; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 1.6rem; }
.scr2-dob input:focus, .scr2-dob select:focus { border-color: var(--ac); background: #fff; box-shadow: 0 0 0 3px rgba(49,74,255,.14); }
.scr2-dob-err { color: #dc2626; font-size: .74rem; margin-top: .35rem; min-height: 1em; }

/* company profile */
.cp-logo { text-align: center; margin-bottom: .9rem; }
.cp-logo img { max-height: 80px; max-width: 100%; border-radius: 10px; border: 1px solid var(--line); padding: 6px; background: #fff; }
.cp-logo-blank { width: 80px; height: 80px; margin: 0 auto; border-radius: 12px; display: grid; place-items: center;
  background: #eef2ff; color: #94a3b8; font-size: 1.6rem; }
.cp-logo-upload { text-align: center; margin: 0 0 1rem; }
.cp-logo-name { font-size: .72rem; color: #475569; margin-top: .35rem; word-break: break-all; }
.cp-logo-hint { font-size: .66rem; color: #94a3b8; margin-top: .15rem; }
.cp-kv { display: flex; justify-content: space-between; gap: .75rem; padding: .4rem 0; border-bottom: 1px dashed var(--line); font-size: .84rem; }
.cp-kv:last-child { border-bottom: 0; }
.cp-k { color: #6b7280; }
.cp-v { color: #1e2235; font-weight: 600; text-align: right; }
.scr2 textarea.form-control, .scr2-ig textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 10px;
  font-size: .63rem; color: var(--ink); background: #fbfbfe; outline: 0; padding: .6rem .7rem; resize: vertical; }
.scr2-ig textarea:focus { border-color: var(--ac); background: #fff; box-shadow: 0 0 0 3px rgba(49,74,255,.14); }

/* entrance animation */
.scr2-anim { animation: scr2-rise .5s ease both; animation-delay: var(--d, 0s); }
@keyframes scr2-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .scr2-anim { animation: none; } }

/* =========================================================================
   LOGIN v2 — styled after the kycrightsource.com marketing site
   (Inter / Manrope fonts, indigo #3A3AE6 palette, split brand panel).
   ========================================================================= */
.kyc-login {
  --kp: #3A3AE6; --kp-dark: #2828B8; --kp-darker: #1B1B7F; --kp-light: #5B5BFF;
  --kink: #0F1230; --kink2: #3A3D5A; --kmuted: #6B6F8A; --kline: #E2E2F0;
  --kacc-bg: #F4F4FC;
  min-height: 74vh; display: grid; grid-template-columns: 1.05fr 0.95fr;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--kink);
}
@media (max-width: 900px) { .kyc-login { grid-template-columns: 1fr; } .kyc-brandpane { display: none; } }

/* ---- left brand / AI panel ---- */
.kyc-brandpane {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(circle at 18% 12%, rgba(20,66,130,.55) 0%, transparent 40%),
    radial-gradient(circle at 85% 88%, rgba(0,16,40,.6) 0%, transparent 45%),
    #001d43;
  padding: 3rem 3.25rem;
  display: flex; align-items: center;
}
.kyc-brandpane::after {
  content: ""; position: absolute; inset: -40px;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .6; pointer-events: none;
  animation: kyc-grid-move 7s linear infinite;
}
@keyframes kyc-grid-move {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 40px 40px, 40px 40px; }
}
@media (prefers-reduced-motion: reduce) { .kyc-brandpane::after { animation: none; } }
.kyc-brandpane-inner { position: relative; z-index: 1; max-width: 520px; }
.kyc-brand-logo { height: 46px; background: #fff; padding: 6px 10px; border-radius: 10px; margin-bottom: 1.6rem; }
.kyc-pill {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  padding: .3rem .8rem; border-radius: 999px; backdrop-filter: blur(4px);
}
.kyc-h1 {
  font-family: 'Manrope', 'Inter', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: 2.05rem; line-height: 1.15; margin: 1rem 0 .6rem; color: #fff;
}
.kyc-h1 em { font-style: italic; color: #C5C5F0; }
.kyc-lead { color: #dcdcfb; font-size: .95rem; line-height: 1.6; margin-bottom: 1.4rem; }
.kyc-ailist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.kyc-ailist a {
  display: flex; gap: .6rem; align-items: flex-start; text-decoration: none; color: #eef0ff;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: .6rem .8rem; font-size: .85rem; line-height: 1.4;
  transition: background .15s, transform .15s, border-color .15s;
}
.kyc-ailist a:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); transform: translateX(2px); }
.kyc-ailist i { color: #9CF6C2; margin-top: 2px; flex-shrink: 0; }
.kyc-ailist b { color: #fff; font-weight: 700; }
.kyc-ailist .arr { margin-left: auto; opacity: .6; align-self: center; }
.kyc-learn {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.4rem; color: #fff;
  font-weight: 600; font-size: .88rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5);
  padding-bottom: 2px;
}
.kyc-learn:hover { color: #C5C5F0; }

/* ---- right login pane ---- */
.kyc-loginpane {
  display: flex; align-items: center; justify-content: center; padding: 2.5rem 2rem;
  background:
    radial-gradient(520px 360px at 80% -10%, rgba(58,58,230,.10), transparent 60%),
    radial-gradient(460px 320px at -10% 110%, rgba(197,197,240,.30), transparent 60%),
    var(--kacc-bg);
}
.kyc-card {
  width: 100%; max-width: 410px;
  background: #fff; border: 1px solid var(--kline); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15,18,48,.10); padding: 1.7rem 1.6rem 1.4rem;
  animation: kyc-card-in .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes kyc-card-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

/* staggered entrance for the form rows */
.kyc-card .auth-header, .kyc-card .auth-title, .kyc-card .auth-subtitle,
.kyc-card form > *, .kyc-card .auth-trust-row {
  animation: kyc-rise .5s ease both;
}
.kyc-card .auth-title { animation-delay: .06s; }
.kyc-card .auth-subtitle { animation-delay: .10s; }
.kyc-card form { animation: none; }
.kyc-card form > * { animation-delay: .14s; }
.kyc-card .auth-trust-row { animation-delay: .22s; }
@keyframes kyc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* inputs: lift + glow on focus */
.kyc-login .auth-field input { transition: border-color .15s, box-shadow .15s, transform .15s; }
.kyc-login .auth-field input:focus { transform: translateY(-1px); }

/* submit: gradient sheen sweep on hover */
.kyc-login .auth-submit { position: relative; overflow: hidden; }
.kyc-login .auth-submit::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .55s ease;
}
.kyc-login .auth-submit:hover:not(:disabled)::after { left: 130%; }

/* robot check: gentle pulse until verified */
.kyc-login .auth-human:not(.checked) .auth-human-box { animation: kyc-pulse 1.8s ease-in-out infinite; }
@keyframes kyc-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(58,58,230,.0); } 50% { box-shadow: 0 0 0 4px rgba(58,58,230,.12); } }

@media (prefers-reduced-motion: reduce) {
  .kyc-card, .kyc-card .auth-header, .kyc-card .auth-title, .kyc-card .auth-subtitle,
  .kyc-card form > *, .kyc-card .auth-trust-row, .kyc-login .auth-human-box { animation: none; }
}
.kyc-card .auth-logo { height: 44px; margin-bottom: 1rem; }
.kyc-card .auth-title { font-family: 'Manrope', sans-serif; font-weight: 800; color: var(--kink); }
.kyc-card .auth-subtitle { color: var(--kmuted); }

/* retheme the shared auth controls to the marketing palette */
.kyc-login .auth-field input:focus { border-color: var(--kp); box-shadow: 0 0 0 3px rgba(58,58,230,.15); }
.kyc-login .auth-eye:hover, .kyc-login .auth-link { color: var(--kp); }
.kyc-login .auth-submit { background: #001d43; box-shadow: 0 4px 12px rgba(0,29,67,.35); border-radius: 10px; }
.kyc-login .auth-submit:hover:not(:disabled) { background: #002a5c; box-shadow: 0 6px 18px rgba(0,29,67,.5); }
.kyc-login .auth-dev { color: var(--kp); }
.kyc-login .auth-dev:hover { background: #ececfb; border-color: var(--kp-light); }
.kyc-login .auth-check input { accent-color: var(--kp); }
.kyc-login .auth-trust-pill { background: #fff; border-color: var(--kline); color: var(--kink2); }
.kyc-login .auth-pill { background: var(--kacc-bg); color: var(--kp); border-color: #d6d6f5; }

/* ---- compact login card: ~30% shorter panel (vertical rhythm trimmed, not a
       fixed height — so nothing clips). Scoped to .kyc-login so the shared
       .auth-* styles used on other pages (google_link, bulk_case) are untouched. */
.kyc-login .kyc-card { padding: 1.15rem 1.6rem 0.95rem; }
.kyc-login .auth-header { margin-bottom: 0.55rem; }
.kyc-login .auth-title { font-size: 1.35rem; margin-bottom: 0.1rem; }
.kyc-login .auth-subtitle { margin-bottom: 0.6rem; line-height: 1.35; }
.kyc-login .auth-banner { margin-bottom: 0.5rem; padding: 0.4rem 0.6rem; }
.kyc-login .auth-field { margin-bottom: 0.42rem; }
.kyc-login .auth-row.two { margin-bottom: 0.42rem; }
.kyc-login .auth-field input { padding: 0.42rem 0.65rem; }
.kyc-login .auth-human { margin-bottom: 0.42rem; padding: 0.42rem 0.65rem; }
.kyc-login .auth-submit { margin-top: 0.28rem; padding: 0.5rem 1rem; }
.kyc-login .auth-dev { margin-top: 0.42rem; }
/* smaller footer stamp (© 2026 …, version, published date/time) */
.kyc-login .auth-footer { font-size: 0.58rem; }
.kyc-login .auth-footer-links span { font-size: 0.58rem; }

/* ---- Sign-in panel always fully visible, any resolution ----
   The card was vertically CENTRED inside the tall brand column, which pushed its
   lower half (Google button / footer) below the fold. Top-align it instead so the
   whole card sits right under the header — on any normal laptop the entire sign-in
   (incl. the Google button) is visible without scrolling; the pane keeps its full
   height so there is no background gap, and on unusually short windows the page
   simply scrolls to reveal the rest (never clipped). */
.kyc-loginpane { align-items: flex-start; padding-top: 1.5rem; }
@media (max-height: 820px) {
  .kyc-loginpane { padding-top: 1rem; padding-bottom: 1rem; }
  .kyc-login .kyc-card { padding: 0.9rem 1.5rem 0.8rem; }
  .kyc-login .auth-field { margin-bottom: 0.34rem; }
  .kyc-login .auth-human { margin-bottom: 0.34rem; }
  .kyc-login .auth-title { font-size: 1.25rem; }
}

/* ---- public page header + footer (ported from KYC_RS_APP signup_wizard) ---- */
.kyc-page { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #0F1230; background: #fff; }

.kyc-header { background: #001d43; border-bottom: 1px solid #00142f; padding: 12px 0; position: sticky; top: 0; z-index: 30; }
.kyc-header .wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.kyc-header .logo { display: flex; align-items: center; text-decoration: none; }
.kyc-header .logo img { height: 60px; width: auto; display: block; }
.kyc-header nav { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: .92rem; }
.kyc-header nav a { color: #cbd2dd; text-decoration: none; font-weight: 600; transition: color .15s; }
.kyc-header nav a:hover { color: #fff; }
.kyc-header nav a.active { color: #fff; }
.kyc-header nav a.howto { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  border: 1.5px solid rgba(255,255,255,.35); border-radius: 99px; background: rgba(255,255,255,.06); color: #fff; font-size: .86rem; }
.kyc-header nav a.howto::before { content: "\25B6"; color: #8ab4ff; font-size: .7rem; }
.kyc-header nav a.howto:hover { border-color: #fff; background: rgba(255,255,255,.14); }
@media (max-width: 760px) { .kyc-header nav a.howto span { display: none; } }

/* footer */
.kyc-footer { background: #001d43; color: rgba(255,255,255,.82); padding: 34px 0 16px; font-size: .9rem; }
.kyc-footer .wrap { max-width: 1020px; margin: 0 auto; padding: 0 18px; }
.kyc-footer .frow { display: grid; grid-template-columns: 1.05fr 2fr; gap: 28px; align-items: start; }
.kyc-footer .brand-block img { height: 56px; background: none; border-radius: 0; padding: 0; }
.kyc-footer .brand-block p { margin: 14px 0 0; color: rgba(255,255,255,.65); font-size: .83rem; max-width: 300px; }
.kyc-footer .brand-block a { color: #C5C5F0; text-decoration: none; }
.kyc-footer h5 { color: #fff; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 14px; font-weight: 700; }
.kyc-footer ul.offices { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.kyc-footer .office { display: flex; align-items: flex-start; gap: 8px; }
.kyc-footer .office .pin { color: #C5C5F0; flex: 0 0 auto; margin-top: 2px; font-size: .7rem; }
.kyc-footer .office .body { font-size: .82rem; }
.kyc-footer .office .city { font-weight: 700; color: #fff; }
.kyc-footer .office .city em { color: #C5C5F0; font-style: normal; font-size: .7rem; letter-spacing: .06em; margin-left: 6px; }
.kyc-footer .office .addr { color: rgba(255,255,255,.62); font-size: .76rem; margin-top: 2px; line-height: 1.4; }
.kyc-footer .office .tel { color: rgba(255,255,255,.78); font-size: .76rem; margin-top: 2px; }
.kyc-footer .office .tel a { color: rgba(255,255,255,.78); text-decoration: none; }
.kyc-footer .office .tel a:hover { color: #C5C5F0; }
.kyc-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 22px; padding-top: 14px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: .76rem; color: rgba(255,255,255,.5); }
.kyc-footer-bottom a { color: rgba(255,255,255,.5); margin-left: 8px; text-decoration: none; }
.kyc-footer-bottom a:hover { color: #C5C5F0; }
@media (max-width: 680px) { .kyc-footer .frow { grid-template-columns: 1fr; } .kyc-footer ul.offices { grid-template-columns: 1fr; } }

/* =========================================================================
   Action buttons (project-wide): NO background — a blue icon + blue text with
   an ANIMATED underline (a soft sheen travels along it; on hover it thickens,
   the button lifts and the icon nudges). Used for every command/action button
   (Load, Filter, Create Case, AI Report, Save, Cancel/Done, PDF/CSV/XML, etc.).
   The only exception is the primary "Search" button (.btn-search) — solid blue.
   Pagination (.cm-page-btn), close buttons and collapse toggles are left alone.
   ========================================================================= */
:is(.btn-primary,.btn-success,.btn-danger,.btn-warning,.btn-info,.btn-secondary,
    .btn-outline-primary,.btn-outline-success,.btn-outline-danger,.btn-outline-secondary,.btn-outline-warning,.btn-outline-info,
    .scr2-go,.scr-case-btn,.scr-ai-btn,.cm-load,.scr-uid-btn,.scr-print-btn):not(.btn-search) {
  position: relative !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  padding: .3rem .25rem !important;
  color: #2563eb !important;
  font-weight: 600 !important;
  font-size: .8rem !important;
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
  overflow: visible !important;        /* let the underline show (scr2-go clips by default) */
  text-decoration: none !important;    /* the underline is the animated ::after below */
  animation: none !important;
  transition: color .2s ease, transform .2s ease;
}
/* the animated blue underline */
:is(.btn-primary,.btn-success,.btn-danger,.btn-warning,.btn-info,.btn-secondary,
    .btn-outline-primary,.btn-outline-success,.btn-outline-danger,.btn-outline-secondary,.btn-outline-warning,.btn-outline-info,
    .scr2-go,.scr-case-btn,.scr-ai-btn,.cm-load,.scr-uid-btn,.scr-print-btn):not(.btn-search)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, #93c5fd, #2563eb 40%, #2563eb 60%, #93c5fd);
  background-size: 220% 100%;
  animation: act-uline 2.8s linear infinite;
  transition: height .2s ease, filter .2s ease;
}
@keyframes act-uline { 0% { background-position: 0% 0; } 100% { background-position: 220% 0; } }
/* icon: inherit the blue, no underline, nudges on hover */
:is(.btn-primary,.btn-success,.btn-danger,.btn-warning,.btn-info,.btn-secondary,
    .btn-outline-primary,.btn-outline-success,.btn-outline-danger,.btn-outline-secondary,.btn-outline-warning,.btn-outline-info,
    .scr2-go,.scr-case-btn,.scr-ai-btn,.cm-load,.scr-uid-btn,.scr-print-btn):not(.btn-search) > i {
  color: inherit !important;
  text-decoration: none !important;
  display: inline-block;
  transition: transform .2s ease;
}
/* hover: lift + darker blue + thicker underline + icon nudge */
:is(.btn-primary,.btn-success,.btn-danger,.btn-warning,.btn-info,.btn-secondary,
    .btn-outline-primary,.btn-outline-success,.btn-outline-danger,.btn-outline-secondary,.btn-outline-warning,.btn-outline-info,
    .scr2-go,.scr-case-btn,.scr-ai-btn,.cm-load,.scr-uid-btn,.scr-print-btn):not(.btn-search):hover {
  color: #1e40af !important;
  transform: translateY(-1px);
}
:is(.btn-primary,.btn-success,.btn-danger,.btn-warning,.btn-info,.btn-secondary,
    .btn-outline-primary,.btn-outline-success,.btn-outline-danger,.btn-outline-secondary,.btn-outline-warning,.btn-outline-info,
    .scr2-go,.scr-case-btn,.scr-ai-btn,.cm-load,.scr-uid-btn,.scr-print-btn):not(.btn-search):hover::after {
  height: 3px; filter: brightness(1.05);
}
:is(.btn-primary,.btn-success,.btn-danger,.btn-warning,.btn-info,.btn-secondary,
    .btn-outline-primary,.btn-outline-success,.btn-outline-danger,.btn-outline-secondary,.btn-outline-warning,.btn-outline-info,
    .scr2-go,.scr-case-btn,.scr-ai-btn,.cm-load,.scr-uid-btn,.scr-print-btn):not(.btn-search):hover > i {
  transform: translateX(2px);
}
/* disabled: muted, no motion */
:is(.btn-primary,.btn-success,.btn-danger,.btn-warning,.btn-info,.btn-secondary,
    .btn-outline-primary,.btn-outline-success,.btn-outline-danger,.btn-outline-secondary,.btn-outline-warning,.btn-outline-info,
    .scr2-go,.scr-case-btn,.scr-ai-btn,.cm-load,.scr-uid-btn,.scr-print-btn):not(.btn-search):disabled {
  opacity: .5 !important;
  transform: none !important;
}
:is(.btn-primary,.btn-success,.btn-danger,.btn-warning,.btn-info,.btn-secondary,
    .btn-outline-primary,.btn-outline-success,.btn-outline-danger,.btn-outline-secondary,.btn-outline-warning,.btn-outline-info,
    .scr2-go,.scr-case-btn,.scr-ai-btn,.cm-load,.scr-uid-btn,.scr-print-btn):not(.btn-search):disabled::after {
  animation: none; opacity: .4;
}
@media (prefers-reduced-motion: reduce) {
  :is(.btn-primary,.btn-success,.btn-danger,.btn-warning,.btn-info,.btn-secondary,
      .btn-outline-primary,.btn-outline-success,.btn-outline-danger,.btn-outline-secondary,.btn-outline-warning,.btn-outline-info,
      .scr2-go,.scr-case-btn,.scr-ai-btn,.cm-load,.scr-uid-btn,.scr-print-btn):not(.btn-search)::after {
    animation: none;
  }
}

/* ---- the one exception: "Search" stays a solid blue filled button ------- */
.btn-search {
  background: linear-gradient(135deg, #314AFF, #2a3ad6) !important;
  background-image: linear-gradient(135deg, #314AFF, #2a3ad6) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(49,74,255,.32) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-search > i { color: #fff !important; }
.btn-search:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 7px 18px rgba(49,74,255,.42) !important; }

/* "Create Case" + "OpenAML & KYCRS - AI Report" now use the shared light
   action-button style above (no special tint) — kept uniform across the app. */

/* =========================================================================
   "Dataset Filter" — compact light bar, placed ABOVE the search box on the
   Individual screening page. Label + chips + Select-all/Clear on one row.
   ========================================================================= */
.scr2-dsbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .7rem;
  background: #f6f8fe; border: 1px solid #e6ecf9; border-radius: 12px;
  padding: .5rem .85rem; margin-bottom: .75rem;
}
.scr2-dsbar-lbl {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
}
.scr2-dsbar-lbl i { color: var(--ac); }
.scr2-dsbar .scr2-chips { gap: .4rem; }
/* slimmer chips inside the compact bar */
.scr2-dsbar .scr2-chip { padding: .25rem .6rem; font-size: .72rem; }
.scr2-dsbar .scr2-chip-tick { transition: width .14s; }
.scr2-dsbar .scr2-tools { white-space: nowrap; }
.scr2-dsbar .scr2-tools button { font-size: .72rem; }
@media (max-width: 680px) {
  .scr2-dsbar .scr2-tools.ms-auto { margin-left: 0 !important; }
}

/* Export buttons (PDF / CSV / XML) use the shared flat animated-underline
   action-button style above — no separate override needed. */

/* ---- "Choose file" label (Case Manager documents) — icon + blue underlined text ---- */
.cd-file-btn {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  background: none; border: 0; padding: 0; margin: 0;
  color: #2563eb; font-weight: 600; font-size: .8rem; white-space: nowrap;
  text-decoration: underline; text-decoration-color: currentColor;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  transition: color .15s ease, text-decoration-thickness .15s ease;
}
.cd-file-btn:hover { color: #1e40af; text-decoration-thickness: 3px; }
.cd-file-btn > i { text-decoration: none; }
.cd-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }

/* ============================================================
   Left menu — navy #001d43 TEXT on the original (light) background.
   (Background left as the default; only the font/icon colour changes.)
   ============================================================ */
.side-top-link, .side-bot-link { color: #001d43 !important; }
.side-top-link:hover, .side-bot-link:hover { color: #001d43 !important; }
.side-top-link.active, .side-bot-link.active { color: #001d43 !important; }
.side-icon, .side-icon-thin { color: #001d43 !important; }
.side-top-link.active .side-icon, .side-bot-link.active .side-icon { color: #001d43 !important; }

/* Top header — company name navy; usage hidden; action buttons normal + 10% smaller;
   navy + underline + shine on hover. */
.portal-brand-title { color: #001d43 !important; }
.portal-usage { display: none !important; }
.portal-print, .portal-ask, .portal-support { font-weight: 400 !important; font-size: .72rem !important; }
@keyframes portalShine {
  0%, 100% { text-shadow: 0 0 2px rgba(0,29,67,.18); }
  50%      { text-shadow: 0 0 10px rgba(0,29,67,.55); }
}
.portal-print:hover, .portal-ask:hover, .portal-support:hover {
  color: #001d43 !important; text-decoration: underline !important;
  animation: portalShine 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .portal-print:hover, .portal-ask:hover, .portal-support:hover { animation: none; }
}
/* Page-header icon badge (scr2-head-icon) -> navy #001d43 on every page.
   (Sidebar menu icons and top-header icons are intentionally NOT changed.) */
.scr2-head-icon { background: #001d43 !important; }
/* Page-header title + subtitle text -> navy #001d43 on every page. */
.scr2-head h5, .scr2-head .scr2-sub { color: #001d43 !important; }

/* =========================================================================
   SHARED UI LAYER (static/js/kyc_ui.js) — toasts, sortable grids, sticky
   table headers. Applies project-wide; no per-page markup.
   ========================================================================= */

/* ----- toasts (non-blocking notices; kycMsg keeps the modal for errors) --- */
.kyc-toast-wrap {
  position: fixed; top: 74px; right: 18px; z-index: 20050;
  display: flex; flex-direction: column; gap: .55rem;
  width: min(360px, calc(100vw - 36px)); pointer-events: none;
}
[dir="rtl"] .kyc-toast-wrap { right: auto; left: 18px; }

.kyc-toast {
  display: flex; align-items: flex-start; gap: .6rem; pointer-events: auto;
  background: #fff; border: 1px solid var(--border); border-left: 4px solid #94a3b8;
  border-radius: var(--radius); padding: .65rem .7rem;
  box-shadow: 0 10px 30px rgba(15,23,42,.13), 0 2px 6px rgba(15,23,42,.06);
  opacity: 0; transform: translateX(14px);
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,.8,.3,1);
}
.kyc-toast.show { opacity: 1; transform: none; }
[dir="rtl"] .kyc-toast { border-left: 1px solid var(--border); border-right: 4px solid #94a3b8; transform: translateX(-14px); }
[dir="rtl"] .kyc-toast.show { transform: none; }

.kyc-toast-ico   { font-size: 1rem; line-height: 1.25; color: #94a3b8; }
.kyc-toast-body  { flex: 1; min-width: 0; }
.kyc-toast-title { font-size: .78rem; font-weight: 700; color: var(--text); letter-spacing: .01em; }
.kyc-toast-text  { font-size: .78rem; color: var(--text-2); line-height: 1.35; word-wrap: break-word; }
.kyc-toast-x {
  border: 0; background: transparent; color: var(--text-3); cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: 0 .1rem;
}
.kyc-toast-x:hover { color: var(--text); }

.kyc-toast.t-success { border-left-color: #16a34a; }
.kyc-toast.t-success .kyc-toast-ico { color: #16a34a; }
.kyc-toast.t-info    { border-left-color: #0d7df8; }
.kyc-toast.t-info .kyc-toast-ico    { color: #0d7df8; }
.kyc-toast.t-warning { border-left-color: #d97706; }
.kyc-toast.t-warning .kyc-toast-ico { color: #d97706; }
.kyc-toast.t-error   { border-left-color: #dc2626; }
.kyc-toast.t-error .kyc-toast-ico   { color: #dc2626; }
[dir="rtl"] .kyc-toast.t-success { border-right-color: #16a34a; }
[dir="rtl"] .kyc-toast.t-info    { border-right-color: #0d7df8; }
[dir="rtl"] .kyc-toast.t-warning { border-right-color: #d97706; }
[dir="rtl"] .kyc-toast.t-error   { border-right-color: #dc2626; }

@media (max-width: 680px) {
  .kyc-toast-wrap { top: auto; bottom: 14px; right: 12px; left: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .kyc-toast { transition: none; }
}

/* ----- sortable column headers ------------------------------------------- */
th.kyc-sort {
  cursor: pointer; user-select: none; position: relative;
  /* logical, so Arabic/Urdu (RTL) get the room on the correct side without a
     separate override — an explicit padding-right there collapsed to 0. */
  padding-inline-end: 1.35em !important;
  transition: background-color .12s ease, color .12s ease;
}
th.kyc-sort:hover { color: var(--logo-blue); background-color: rgba(13,125,248,.09); }
th.kyc-sort:focus-visible { outline: 2px solid var(--logo-blue); outline-offset: -2px; }
th.kyc-sort::after {
  content: "\F282";                       /* bi-chevron-expand */
  font-family: bootstrap-icons !important; font-weight: normal;
  position: absolute; inset-inline-end: .28em; top: 50%; transform: translateY(-50%);
  font-size: .95em; opacity: .62; transition: opacity .15s ease;
}
th.kyc-sort:hover::after { opacity: 1; }
th.kyc-sort[data-dir="asc"]::after  { content: "\F235"; opacity: 1; }   /* bi-caret-up-fill */
th.kyc-sort[data-dir="desc"]::after { content: "\F229"; opacity: 1; }   /* bi-caret-down-fill */
th.kyc-sorted { color: var(--logo-blue); }
/* (no [dir="rtl"] overrides needed — the logical properties above handle it) */

/* ----- sticky table headers (long grids only — applied by kyc_ui.js) ------ */
/* thead cells are transparent by default — they need a background colour of
   their own or the body rows show through while scrolling under them. */
table.kyc-sticky thead th {
  position: sticky; top: 0; z-index: 5;
  background-color: #fff; background-clip: padding-box;
  box-shadow: inset 0 -1px 0 var(--border);
}
table.kyc-sticky.table-light thead th,
table.kyc-sticky thead th.table-light { background-color: #f8fafc; }
/* A .table-responsive is its own scroll box, so the header can only stick once
   that box is bounded. Only a max-height (no min-height) — a paginated grid
   showing 10 rows stays exactly as tall as its rows, with no inner scrollbar. */
.table-responsive.kyc-stickbox { max-height: calc(100vh - 230px); overflow-y: auto; }
/* The other mode: the wrapper isn't needed for horizontal scrolling, so let it
   overflow visibly and the header pins to the top of the VIEWPORT as the page
   scrolls — which is what actually helps on a 10-rows-per-page grid. */
.table-responsive.kyc-stickpage { overflow: visible; }

/* No !important: pages that paint their own header (#unTable, #slTable, #misTable …
   use an opaque gradient) keep it, so a themed header never clashes with the rows
   beneath it. This only fills in for grids that have no header colour of their own. */
html[data-theme] table.kyc-sticky thead th { background-color: var(--surface); }
html[data-theme] .kyc-toast { background: var(--surface); border-color: var(--border); }
html[data-theme] .kyc-toast-title { color: var(--text); }
html[data-theme] .kyc-toast-text  { color: var(--text-2); }

@media print {
  .kyc-toast-wrap { display: none !important; }
  .table-responsive.kyc-stickbox { max-height: none !important; overflow: visible !important; }
  table.kyc-sticky thead th { position: static !important; box-shadow: none !important; }
  table.kyc-sticky { overflow: visible !important; }   /* undo the clip we set inline */
  th.kyc-sort::after { content: "" !important; }
}

/* =========================================================================
   MATCH EXPLAINABILITY — corroborating / distinguishing checks + verdict.
   Rendered under "Why this record matched" on the screening results and in
   the Case Manager profile panels (see services/datafeed.py `_explain`).
   ========================================================================= */
.scr-checks { display: flex; flex-direction: column; gap: .3rem; margin: .55rem 0; }
.scr-check {
  display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
  font-size: .78rem; line-height: 1.45; padding: .4rem .6rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: #f8fafc;
}
.scr-check i { font-size: .85rem; position: relative; top: 1px; color: #94a3b8; }
.scr-check-l { font-weight: 700; color: #334155; }
.scr-check-d { color: #475569; }

.scr-check-match   { background: #f0fdf4; border-color: #bbf7d0; }
.scr-check-match i { color: #16a34a; }
.scr-check-match .scr-check-l { color: #14532d; }
.scr-check-near    { background: #eff6ff; border-color: #bfdbfe; }
.scr-check-near i  { color: #2563eb; }
.scr-check-near .scr-check-l { color: #1e3a8a; }
/* the false-positive signal — deliberately the loudest row in the panel */
.scr-check-differs { background: #fef2f2; border-color: #fecaca; }
.scr-check-differs i { color: #dc2626; }
.scr-check-differs .scr-check-l { color: #7f1d1d; }
.scr-check-unknown { background: #f8fafc; border-style: dashed; }

.scr-verdict {
  margin: .55rem 0; padding: .55rem .7rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: #f8fafc; font-size: .79rem; line-height: 1.5;
}
.scr-verdict-t { font-weight: 700; display: flex; align-items: center; gap: .4rem; margin-bottom: .15rem; }
.scr-verdict-b { color: #475569; }
.scr-verdict-distinguishing { background: #fef2f2; border-color: #fca5a5; }
.scr-verdict-distinguishing .scr-verdict-t { color: #b91c1c; }
.scr-verdict-distinguishing .scr-verdict-b { color: #7f1d1d; }
.scr-verdict-corroborated { background: #f0fdf4; border-color: #86efac; }
.scr-verdict-corroborated .scr-verdict-t { color: #15803d; }
.scr-verdict-corroborated .scr-verdict-b { color: #14532d; }
.scr-verdict-partial { background: #eff6ff; border-color: #93c5fd; }
.scr-verdict-partial .scr-verdict-t { color: #1d4ed8; }
.scr-verdict-partial .scr-verdict-b { color: #1e3a8a; }
.scr-verdict-name-only { background: #fffbeb; border-color: #fde68a; }
.scr-verdict-name-only .scr-verdict-t { color: #b45309; }
.scr-verdict-name-only .scr-verdict-b { color: #78350f; }

html[data-theme] .scr-check   { background: var(--surface); border-color: var(--border); }
html[data-theme] .scr-check-l { color: var(--text); }
html[data-theme] .scr-check-d { color: var(--text-2); }
html[data-theme] .scr-verdict { background: var(--surface); border-color: var(--border); }
html[data-theme] .scr-verdict-b { color: var(--text-2); }

/* ===========================================================================
   Compact sign-in card
   ---------------------------------------------------------------------------
   The card began at 410x550 — sized for a marketing splash, filling most of the
   right-hand pane on a laptop. It is now ~205x285, about a quarter of that.

   Height, not width, was the work: the card is a stack of a dozen rows, so the
   savings came from the row rhythm, type scale and control heights, plus
   dropping "remember me" and the robot tick box and collapsing the two
   company-lookup hint lines until they actually have something to say.

   Scoped under .kyc-login throughout: the same .auth-* classes dress the signup
   and password-reset screens, which are NOT meant to change.
   =========================================================================== */
.kyc-login .kyc-loginpane { padding: 1rem .8rem; }

.kyc-login .kyc-card {
  max-width: 205px;
  border-radius: 10px;
  padding: .5rem .55rem .45rem;
  box-shadow: 0 8px 20px rgba(15,18,48,.10);
}

.kyc-login .auth-header { margin-bottom: .2rem; }
.kyc-login .auth-pill { padding: .04rem .3rem; font-size: .46rem; gap: .15rem; border-radius: 999px; }
.kyc-login .kyc-card .auth-logo { height: 18px; margin-bottom: .25rem; }

.kyc-login .auth-title { font-size: .82rem; margin-bottom: .06rem; letter-spacing: -.01em; }
.kyc-login .auth-subtitle { font-size: .58rem; margin-bottom: .3rem; }

.kyc-login .auth-banner { padding: .22rem .34rem; font-size: .56rem; margin-bottom: .26rem; gap: .25rem; }

/* fields ------------------------------------------------------------------ */
.kyc-login .auth-field { margin-bottom: .18rem; }
.kyc-login .auth-field label {
  font-size: .48rem; line-height: 1.2; margin-bottom: .04rem; letter-spacing: .03em;
}
.kyc-login .auth-field input {
  padding: .2rem .38rem; font-size: .66rem; line-height: 1.25; border-radius: 5px;
}
.kyc-login .auth-input-wrap input { padding-right: 34px; }
.kyc-login .auth-eye { font-size: .5rem; padding: .06rem .2rem; right: 3px; }

/* The company / e-mail lookup hints are empty until the server answers, but
   still reserved a line each. Collapse them until they have content. */
.kyc-login .auth-lookup { font-size: .5rem; line-height: 1.25; }
.kyc-login .auth-lookup:empty { display: none; }

/* forgot-password: kept, but as small as it can be and still be a target */
.kyc-login .auth-forgot { display: flex; justify-content: flex-end; margin: 0 0 .2rem; }
.kyc-login .auth-forgot .auth-link { font-size: .5rem; line-height: 1.3; }

.kyc-login .auth-submit {
  padding: .28rem .6rem; font-size: .7rem; border-radius: 6px; margin-top: .1rem;
  box-shadow: 0 2px 6px rgba(13,125,248,.24);
}
.kyc-login .auth-submit:hover:not(:disabled) { box-shadow: 0 3px 9px rgba(13,125,248,.32); }

.kyc-login .auth-or { margin: .26rem 0 .22rem; font-size: .48rem; gap: .3rem; letter-spacing: .06em; }
.kyc-login .auth-google { padding: .22rem .45rem; font-size: .62rem; border-radius: 6px; gap: .28rem; }
.kyc-login .auth-google svg { flex: 0 0 11px; width: 11px; height: 11px; }
.kyc-login .auth-google-hint { font-size: .48rem; margin-top: .16rem; line-height: 1.25; }

.kyc-login .auth-trust-row { font-size: .48rem; margin-top: .22rem; gap: .3rem; }

/* At this width the footer's left/right split wrapped to four lines. Stack it
   centred instead: two short lines, tight leading. */
.kyc-login .auth-footer {
  flex-direction: column; align-items: center; justify-content: center; gap: 0;
  margin-top: .18rem; padding-top: .2rem; font-size: .44rem; line-height: 1.25;
  text-align: center;
}
.kyc-login .auth-footer-links { gap: .3rem; font-size: .44rem; line-height: 1.25; }

/* ---- local-only one-click sign-in (see routers/dev_login.py) ---------------
   Deliberately understated and labelled: it must never be mistaken for a
   normal way in, and it only renders when KYCRS_DEV_AUTOLOGIN=1.            */
.kyc-login .auth-devwrap {
  display: flex; align-items: center; justify-content: center; gap: .25rem;
  margin-top: .24rem; padding-top: .22rem; border-top: 1px dashed #e2e8f0;
}
.kyc-login .auth-dev {
  display: inline-flex; align-items: center; gap: .2rem; margin: 0;
  padding: .12rem .34rem; border: 1px dashed #cbd5e1; border-radius: 5px;
  background: #f8fafc; color: #0D7DF8; font-size: .54rem; font-weight: 600;
  text-decoration: none; transition: background .12s, border-color .12s;
}
.kyc-login .auth-dev:hover { background: #eff6ff; border-color: #93c5fd; }
.kyc-login .auth-dev-note { font-size: .44rem; color: #94a3b8; letter-spacing: .05em; text-transform: uppercase; }

/* ===========================================================================
   Login right pane: background clips
   ---------------------------------------------------------------------------
   The pane behind the sign-in card plays two clips that crossfade into each
   other (script in pages/index.html). Cut from 4072x2036 originals down to
   1080x1080 squares, each cropped toward its subject, audio removed:
   12.0 MB -> 0.47 MB and 30.5 MB -> 1.16 MB.

   The pane is roughly square, so object-fit: cover trims little, and
   object-position keeps each subject's side when it does. The card sits on
   top at z-index 1.
   =========================================================================== */
.kyc-login .kyc-loginpane { position: relative; overflow: hidden; isolation: isolate; }

.kyc-login .kyc-loginpane-media {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #0b1530;              /* shown only until the first poster paints */
}
.kyc-login .kyc-bgclip {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out;
}
.kyc-login .kyc-bgclip.is-on { opacity: 1; }
.kyc-login .kyc-bgclip-01 { object-position: 100% 28%; }
.kyc-login .kyc-bgclip-02 { object-position: 100% 32%; }
/* Clip 03 has no single subject: a full-frame crowd under data-wave graphics.
   Centred, biased toward the lower half where the figures stand, so wide
   screens that trim top and bottom keep the people rather than the sky. */
.kyc-login .kyc-bgclip-03 { object-position: 50% 60%; }

/* A light tint so the bright office clip and the dark circuit clip sit at a
   similar weight behind the white card. */
.kyc-login .kyc-loginpane-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(9,16,38,.30) 0%, rgba(9,16,38,0) 60%),
    linear-gradient(180deg, rgba(9,16,38,.22) 0%, rgba(9,16,38,.08) 45%, rgba(9,16,38,.30) 100%);
}
.kyc-login .kyc-loginpane > .kyc-card { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .kyc-login .kyc-bgclip { transition: none; }
}

/* ===========================================================================
   One full-width sign-in area (2.16.0)
   ---------------------------------------------------------------------------
   The left brand panel ("How AI changes name screening, live") was removed.
   The grid collapses to one column, the clips span the full width, and the
   card sits on the LEFT with its left edge on the header's content edge
   (.kyc-header .wrap: max 1180px, 22px padding).

   The clips are 2:1 like the pane and used exactly as supplied. In 01 and 02
   the subject sits on the RIGHT and faces left, toward the card, so the card
   never covers either of them; object-position keeps their right side,
   biased toward the upper frame where the heads are. Clip 03 is a full-frame
   crowd with no single subject, so it is centred (see its rule above).
   =========================================================================== */
.kyc-login { grid-template-columns: 1fr; }
.kyc-login .kyc-loginpane {
  justify-content: flex-start;
  padding-left: max(22px, calc((100% - 1180px) / 2 + 22px));
  padding-right: max(22px, calc((100% - 1180px) / 2 + 22px));
}
@media (max-width: 900px) {
  .kyc-login .kyc-loginpane { justify-content: center; padding-left: 1rem; padding-right: 1rem; }
}

/* ===========================================================================
   Sign-in card scale (2.16.1)
   ---------------------------------------------------------------------------
   The card is 30% larger than the compact design above. Rather than re-derive
   thirty hand-tuned values, the whole card is scaled with zoom. Unlike
   transform, zoom scales layout, not just paint: every size, gap, icon and
   border grows in proportion AND the card occupies its real enlarged footprint,
   so alignment and hit-testing stay correct. To resize again, change this one
   number. zoom is standard CSS (CSS Viewport) in current Chromium, Safari and
   Firefox.
   =========================================================================== */
.kyc-login .kyc-card { zoom: 1.3; }

/* ===========================================================================
   Sign-in card translucency (2.16.2)
   ---------------------------------------------------------------------------
   The card is 50% transparent white instead of solid, so the background clips
   show through it. Only the panel itself: the input boxes and the Google
   button keep their own solid white backgrounds, so typed text and controls
   stay fully legible whatever the clip behind them is doing.
   =========================================================================== */
.kyc-login .kyc-card { background: rgba(255, 255, 255, .5); }

/* ---- Text on the translucent card (2.16.2) ---------------------------------
   Why these colours are dark, with the arithmetic, so nobody lightens them:
   a 50% white panel composited (sRGB) over ANY frame is at least mid-grey —
   every channel >= 127.5, relative luminance >= 0.212 even when the clip behind
   is pure black. To keep WCAG 4.5:1 on that worst possible frame, text must
   have luminance <= 0.0082. The brand ink #0F1230 (0.0075) clears it at 4.56:1
   on every frame, not just the frames measured. The original slate labels
   (#64748b, 0.166) fell to ~1.2:1, and any mid blue fails, so the link is ink
   plus an underline instead of a lighter blue. */
.kyc-login .kyc-card .auth-field label,
.kyc-login .kyc-card .auth-or,
.kyc-login .kyc-card .auth-footer,
.kyc-login .kyc-card .auth-footer span,
.kyc-login .kyc-card .auth-footer-links,
.kyc-login .kyc-card .auth-dev-note { color: #0F1230; }
.kyc-login .kyc-card .auth-forgot .auth-link {
  color: #0F1230; text-decoration: underline; text-underline-offset: 2px;
}

/* ---- Label spacing on the translucent card (2.16.2) ------------------------
   The focused input's 3px glow ring overlapped the bottom of the letters of the
   label directly above it: the gap was 0.04rem (<1px). On the darkest clip
   frame that pulled the measured contrast behind "COMPANY CODE" to 4.32:1, under
   the 4.5:1 minimum; blurring the input restored it (3.49 -> 4.76 on the line
   box), so the gap, not the colour, was the cause. 0.25rem (4px) keeps the ring
   clear of the letters with a pixel to spare. The ring itself stays: it shows
   which field is active. */
.kyc-login .kyc-card .auth-field label { margin-bottom: .25rem; }

/* ===========================================================================
   Empowered by + Certified strips (2.16.3)
   ---------------------------------------------------------------------------
   Ported from the KYC Right Source website (index.html inline style and
   style.css) so the app's login page matches the site. Differences, all
   deliberate: the website's CSS variables are resolved to their values
   (--line #E2E2F0, --line-2 #cbd5e1, --muted #6B6F8A); the .lx-cert* rules,
   global on the website, are scoped under .cert-strip here so they cannot
   touch anything else in the app. Share Tech Mono is loaded by pages/index.html.
   =========================================================================== */
.empowered-by { padding: 1.6rem 0; background: #FFFFFF; border-top: 1px solid #E2E2F0; border-bottom: 1px solid #E2E2F0; position: relative; }
.empowered-by .eb-tag {
  text-align: center;
  font-family: 'Share Tech Mono', monospace; font-size: .66rem; letter-spacing: .22em; font-weight: 700;
  color: #6B6F8A; text-transform: uppercase; margin-bottom: 1rem;
}
.empowered-by .eb-tag:before, .empowered-by .eb-tag:after {
  content: ''; display: inline-block; width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
  vertical-align: middle; margin: 0 12px;
}
.empowered-by .eb-marquee {
  position: relative; width: 100%; overflow: hidden; padding: 6px 0;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.empowered-by .eb-track {
  display: flex; align-items: center; gap: 3rem;
  width: max-content;
  animation: eb-scroll 35s linear infinite;
}
.empowered-by .eb-marquee:hover .eb-track { animation-play-state: paused; }
@keyframes eb-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.empowered-by .eb-logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; flex-shrink: 0;
  opacity: .65; filter: grayscale(100%);
  transition: opacity .25s ease, filter .25s ease, transform .25s ease;
  text-decoration: none;
}
.empowered-by .eb-logo img {
  max-height: 100%; max-width: 140px; width: auto; height: auto; display: block;
  object-fit: contain;
}
.empowered-by .eb-logo:hover { opacity: 1; filter: grayscale(0%); transform: scale(1.06); }
@media (max-width: 780px) {
  .empowered-by .eb-track { gap: 2rem; }
  .empowered-by .eb-logo { height: 32px; }
  .empowered-by .eb-logo img { max-width: 110px; }
  .empowered-by .eb-tag:before, .empowered-by .eb-tag:after { width: 20px; margin: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .empowered-by .eb-track { animation: none; }
}

/* Certified strip: white panel just above the footer */
.cert-strip { background: #ffffff; padding: 26px 0; border-top: 1px solid #e5e7eb; }
.cert-strip .container { display: flex; justify-content: center; }
.cert-strip .lx-cert-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 10px;
  justify-content: center;
}
.cert-strip .lx-cert-label {
  color: #475569;
  font-family: 'Share Tech Mono', 'Inter', monospace, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; white-space: nowrap; margin-right: 4px;
}
.cert-strip .lx-cert {
  display: inline-block; vertical-align: middle;
  background: transparent; padding: 0; border-radius: 4px;
  transition: transform .25s ease;
}
.cert-strip .lx-cert:hover { transform: translateY(-2px); }

/* ===========================================================================
   Sign-in card placement (2.16.5)
   ---------------------------------------------------------------------------
   1. Vertically centred in the clip pane (it was pinned near the top).
   2. A FIXED 64px from the left edge at every desktop width. Before, the left
      offset followed the header's 1180px content column, so on wider monitors
      the card drifted right: 152px at 1440, 392px at 1920, 712px at 2560.
   Equal top and bottom padding keep the centring exact. Mobile (<=900px) still
   centres the card horizontally, re-stated below because this rule comes later.
   =========================================================================== */
.kyc-login .kyc-loginpane {
  align-items: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 64px;
}
@media (max-width: 900px) {
  .kyc-login .kyc-loginpane { padding-left: 1rem; padding-right: 1rem; }
}

/* ===========================================================================
   Left menu hover: light blue (2.16.9)
   ---------------------------------------------------------------------------
   The hover was #f8fafc (near-white), so it barely showed. A menu item now turns
   light blue under the mouse, a shade stronger than the current-page highlight
   so the two stay distinguishable. Themed modes get a translucent blue that
   reads on light and dark backgrounds alike.
   =========================================================================== */
.side-top-link, .side-bot-link { transition: background-color .15s ease; }
.side-top-link:hover, .side-bot-link:hover { background: #e0efff; }
html[data-theme] .side-top-link:hover, html[data-theme] .side-bot-link:hover { background: rgba(13,125,248,.16); }

/* ===========================================================================
   CRR grid column (2.24.0) — Case Manager, Screening Log, Unique Name Log
   =========================================================================== */
.crr-cell { white-space: nowrap; }
.crr-pill { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .01em; border-radius: 999px;
    padding: .1rem .55rem; color: #fff; background: #64748b; cursor: help; }
.crr-pill.crr-low { background: #16a34a; }
.crr-pill.crr-medium { background: #d97706; }
.crr-pill.crr-high { background: #dc2626; }
.crr-none { color: #94a3b8; font-weight: 700; }