body {
    margin: 0;
    min-height: 100vh;
    background: #f4f6fb;
    color: #2a3242;
    font-family: "IBM Plex Sans Arabic", -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Present for assistive tech (e.g. screen-reader heading navigation), invisible on screen - for
   pages with no visible page title (a deliberate design choice) that would otherwise have zero
   <h1> anywhere in their tree, unlike every other page in the app. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Auth/status cards (Login, Home's logged-out state, SetupPassword, Error) self-center
   horizontally via margin: auto rather than the body flex-centering this used to rely on - plain
   top-down block flow is what the app-nav + app-main shell below needs for authenticated pages, and
   align-items: center on a tall scrolling data table causes real overflow/scroll-position problems.

   Shared "white surface" recipe - ReportShell's .rz-sidebar (the filter drawer) and
   .report-shell-content (further down this file) share it too, so a future visual restyle only
   needs to change it once instead of drifting copies. */
.card,
.report-shell .rz-sidebar,
.report-shell-content {
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.card,
.report-shell-content {
    border-radius: 12px;
}

.card {
    padding: 2.5rem 3rem;
    margin: 3rem auto 0;
}

.card h1 {
    margin: 0 0 0.5rem;
    color: #0f172a;
    text-align: center;
}

.auth-brand-logo {
    display: block;
    width: 56px;
    height: 56px;
    /* contain so a non-square tenant logo scales within the 56x56 slot instead of stretching. */
    object-fit: contain;
    margin: 0 auto 0.75rem;
}

.status-card {
    width: 360px;
    max-width: 90vw;
    text-align: center;
}

.status {
    color: #16a34a;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0 0 1rem;
}

.tenant {
    color: #334155;
    margin: 0;
}

.tenant.muted {
    color: #94a3b8;
}

/* Auth pages (login / set-password) */

.auth-card {
    width: 360px;
    max-width: 90vw;
}

.auth-subtitle {
    text-align: center;
    color: #64748b;
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
}

/* Prominent inline alert for a failed action (e.g. a rejected "Activate account" submit). */
.auth-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 1.1rem;
    font-size: 13px;
    line-height: 1.45;
    text-align: start;
}

/* Collapsible live password-requirements checklist (SetupPassword) - a toggle opens/closes the
   list and each rule ticks green as it's met. */
/* Footer-style section pinned below the submit button at the bottom of the card. */
.pw-req {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid #eef0f5;
}

.pw-req-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    /* Accent colour so the toggle reads as a distinct, clickable control. */
    color: #4f46e5;
}

.pw-req-toggle:hover {
    color: #4338ca;
}

.pw-req-chevron {
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}

/* Chevron points down when open; when collapsed it points toward the reading edge -
   right in LTR, left in RTL. */
.pw-req-toggle[aria-expanded="false"] .pw-req-chevron {
    transform: rotate(-90deg);
}

[dir="rtl"] .pw-req-toggle[aria-expanded="false"] .pw-req-chevron {
    transform: rotate(90deg);
}

.pw-rules {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* [hidden] alone loses to display:flex above, so hide the collapsed list explicitly. */
.pw-rules[hidden] {
    display: none;
}

.pw-rule {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    /* Unmet = red, met = green (below) - a clear pass/fail read of each requirement. */
    color: #dc2626;
    transition: color 0.15s ease;
}

/* Unmet: a small neutral bullet dot - a plain list marker, not a hollow ring that reads as a
   radio button. */
.pw-rule::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 7px 7px;
    background-image: radial-gradient(circle, currentColor 45%, transparent 48%);
    transition: background-color 0.15s ease, background-size 0.15s ease;
}

/* Met: the dot fills into a green disc with a white check. */
.pw-rule.met {
    color: #16a34a;
}

.pw-rule.met::before {
    background-color: #16a34a;
    background-size: 10px 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.1rem;
}

.field-row {
    display: flex;
    gap: 1rem;
}

.field-row .field {
    flex: 1 1 0;
    min-width: 0;
}

.field label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #334155;
}

.field label .rzi {
    font-size: 1rem;
    color: #4f46e5;
}

.field input {
    padding: 0.65rem 0.8rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    color: #0f172a;
}

.field input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

/* Blazor's built-in <ValidationMessage>/<ValidationSummary> render this class with no styling of
   their own - previously plain body text, indistinguishable from a label. Same red as
   .error-message, without its background/border box (too heavy for a compact per-field message). */
.validation-message {
    display: block;
    color: #b91c1c;
    font-size: 0.85rem;
}

.field-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    color: #334155;
}

.btn-primary {
    width: 100%;
    padding: 0.75rem;
    background: #4f46e5;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.btn-primary:hover {
    background: #4338ca;
}

.btn-link {
    width: 100%;
    padding: 0.6rem;
    background: transparent;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.btn-link:hover {
    background: #f8fafc;
}

.error-message {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 1.1rem;
}

.helper-text {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: #64748b;
    text-align: center;
}

.helper-text a {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 600;
}

.helper-text a:hover {
    text-decoration: underline;
}

/* Fixed in a corner, out of the body's centering flex flow so the card stays perfectly centered
   regardless of language. inset-inline-end (not "right") so it lands on the correct side
   automatically in both LTR and RTL without any direction-specific override. */
.language-picker {
    position: fixed;
    top: 1rem;
    inset-inline-end: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13.5px;
    background: #ffffff;
    border: 1px solid #e4e8f0;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(30, 40, 70, 0.04);
}

.language-picker.inline {
    position: static;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.language-picker a {
    color: #8a93a6;
    text-decoration: none;
}

.language-picker a:hover,
.language-picker a.lang-active {
    color: #4f46e5;
    font-weight: 600;
}

.language-picker .lang-sep {
    color: #dfe3ec;
}

.btn-danger {
    width: 100%;
    padding: 0.6rem;
    background: #dc2626;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.btn-danger:hover {
    background: #b91c1c;
}

/* Confirm dialog - a native <dialog>, styled directly (no browser-chrome look). Opened/closed via
   plain showModal()/close() calls in ConfirmSubmitForm.razor's markup, no JS framework needed. */
.confirm-dialog {
    border: none;
    border-radius: 12px;
    padding: 1.75rem 2rem;
    width: 360px;
    max-width: 90vw;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    font-family: inherit;
    color: #0f172a;
}

.confirm-dialog::backdrop {
    background: rgba(15, 23, 42, 0.6);
}

.confirm-dialog h2 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.confirm-dialog p {
    margin: 0 0 1.5rem;
    color: #64748b;
    font-size: 0.9rem;
}

.confirm-dialog-actions {
    display: flex;
    gap: 0.75rem;
}

/* Simple confirmations (a single button/link action): equal-width buttons side by side. */
.confirm-dialog-actions > .btn-link,
.confirm-dialog-actions > .btn-danger {
    flex: 1;
}

/* When the confirmed action is a whole form (a rejection/revocation reason textarea + its own
   submit button), a side-by-side row squashes the textarea into a sliver next to a full-height
   Cancel button. Stack instead - the form (label, textarea, submit) on top, full width, with Cancel
   beneath it - and give the dialog a little more room for the textarea. */
.confirm-dialog:has(form) {
    width: 420px;
}

.confirm-dialog-actions:has(form) {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.5rem;
}

.confirm-dialog-actions:has(form) > .btn-link {
    flex: none;
    width: 100%;
    text-align: center;
}

.confirm-dialog-actions form {
    width: 100%;
}

/* The caller's submit-row inside a confirm dialog: tighten the form-page-sized top margin and let
   the danger button fill the width, pairing cleanly with the Cancel button below it. */
.confirm-dialog-actions form .kyc-submit-row {
    margin-top: 14px;
}

.confirm-dialog-actions form .kyc-submit-row .btn-danger {
    flex: 1;
}

/* Flash banner - a one-time "your action succeeded/failed" message shown after a redirect (see
   FlashMessages.cs). Fixed + centered at the top, out of the body's own centering flex flow. */
.flash-banner {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(90vw, 480px);
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.flash-success {
    background: #16a34a;
    color: #ffffff;
}

.flash-error {
    background: #dc2626;
    color: #ffffff;
}

/* Authenticated app shell - full-width top nav + a max-width content column below it. Only
   rendered by MainLayout once a tenant is resolved and the visitor is signed in. */
/* Neomorphic top bar - same soft-UI palette as the page boards (Home/KYC/Accounts), so the
   chrome and the content read as one design. A soft downward shadow lifts the bar off the page. */
.app-nav {
    --neo-bg: #e7eaf0;
    --neo-light: #ffffff;
    --neo-dark: #c5cad6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 72px;
    background: var(--neo-bg);
    padding: 0 30px;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 6px 18px -10px rgba(20, 27, 45, 0.35);
}

.app-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 800;
    font-size: 17px;
    color: #2b3242;
    flex: 0 0 auto;
}

/* Logo sits in an inset neomorphic disc, echoing the card icons. */
.app-nav-logo {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neo-bg);
    box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light);
}

.app-nav-logo img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.app-nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Links are flat by default, gently raise on hover, and press inward (inset) with a teal
   accent when active - the soft-UI equivalent of a selected pill. */
.app-nav-links a {
    color: #5a6478;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 12px;
    transition: color 0.15s ease, box-shadow 0.15s ease;
}

.app-nav-links a:hover {
    color: #0f766e;
    box-shadow: 4px 4px 9px var(--neo-dark), -4px -4px 9px var(--neo-light);
}

.app-nav-links a.active {
    color: #0f766e;
    box-shadow: inset 4px 4px 8px var(--neo-dark), inset -4px -4px 8px var(--neo-light);
}

.app-nav-lang {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Raised soft red pill; presses in when clicked. */
.app-nav-logout {
    background: var(--neo-bg);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #b91c1c;
    padding: 9px 16px;
    border-radius: 12px;
    box-shadow: 4px 4px 9px var(--neo-dark), -4px -4px 9px var(--neo-light);
    transition: box-shadow 0.15s ease;
}

.app-nav-logout:hover {
    box-shadow: 5px 5px 11px var(--neo-dark), -5px -5px 11px var(--neo-light);
}

.app-nav-logout:active {
    box-shadow: inset 4px 4px 8px var(--neo-dark), inset -4px -4px 8px var(--neo-light);
}

/* Flex-column shell so the footer sinks to the viewport bottom on short pages instead of
   floating mid-screen, while the content column still grows to fill the space above it. */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* As a flex-column child, .app-main's `margin: 0 auto` would cancel align-items:stretch and shrink
   the column to its content width (KPIs wrapping, search dropping to its own row). width:100% +
   border-box restores the full max-width:1180 centered column it had in normal block flow. */
.app-shell .app-main {
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Small utilitarian footer - a full-width bar (like the header) stuck to the bottom, with a
   soft upward neomorphic edge tying it to the top chrome. */
.app-footer {
    --neo-bg: #e7eaf0;
    flex: 0 0 auto;
    background: var(--neo-bg);
    padding: 18px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12.5px;
    color: #7a8398;
    box-shadow: 0 -6px 18px -10px rgba(20, 27, 45, 0.35);
}

.app-footer-powered {
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7688;
}

.app-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 40px 44px;
}

/* Placeholder for sections that exist in the nav but aren't built yet (Accounts, Settings, Log). */
.section-placeholder {
    max-width: 460px;
    margin: 9vh auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.section-placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 18px;
    background: #eef0fe;
    color: #4f46e5;
}

.section-placeholder h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #141b2d;
}

.section-placeholder p {
    margin: 0;
    font-size: 14.5px;
    color: #6b7280;
}

/* Investor portal chrome (MainLayout's _showInvestorChrome branch, /investor only) - the "My
   Documents" indigo-accent/white-card design (distinct from .kyc-page's own teal identity, which
   this never touches). Flex-column shell so the footer pins to the viewport bottom on short-
   content pages instead of floating mid-page. Colors/spacing below are taken directly from the
   design spec's own §2/§9 tables. */
.investor-portal-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #eceff6;
}

.investor-portal-main {
    flex: 1;
    max-width: 1080px;
    margin: 0 auto;
    padding: 44px 32px 56px;
    width: 100%;
    box-sizing: border-box;
}

.investor-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #ffffff;
    border-bottom: 1px solid rgba(30, 35, 70, 0.07);
}

/* Full-bleed: brand pinned to the left edge, user menu to the right, with just the page gutter as
   padding - deliberately NOT capped at the .investor-portal-main 1080px content width, so the header
   spans the whole viewport instead of leaving large empty margins beside its content on wide screens. */
.investor-header-bar {
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.investor-header-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.investor-header-brand-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f1f2f8;
    border: 1px solid #e4e6ee;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* The tenant's uploaded logo, sized to the same 30px footprint as the placeholder brand icon so
   the header layout is identical whether or not a logo is set. contain (not cover) keeps a wide
   wordmark or a square emblem fully visible; a light tile behind it gives transparent PNGs a
   consistent edge instead of bleeding into the header. */
.investor-header-logo {
    height: 30px;
    max-width: 128px;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
    flex: 0 0 auto;
}

.investor-header-company {
    font-size: 14px;
    font-weight: 600;
    color: #3a3f5c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.investor-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Re-skins the shared LanguagePicker component (also used, unmodified, by staff AppNav) into the
   pill-toggle look - same scoping trick .auth-toolbar-row .language-picker already established
   for Login/Register, same values, not reinvented. */
.investor-header .language-picker {
    display: flex;
    gap: 2px;
    background: #f1f2f8;
    border-radius: 10px;
    padding: 4px;
}

.investor-header .language-picker .lang-sep {
    display: none;
}

.investor-header .language-picker a {
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #8a8fb0;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.investor-header .language-picker a:hover {
    color: #4f46e5;
}

.investor-header .language-picker a.lang-active {
    background: #ffffff;
    color: #1e2140;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(20, 25, 45, 0.14);
}

.investor-header .language-picker a.lang-active:hover {
    color: #1e2140;
}

.investor-user-menu {
    position: relative;
}

.investor-user-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    padding-inline-end: 8px;
    border-radius: 12px;
    transition: background 0.15s;
}

.investor-user-trigger:hover {
    background: #f1f2f8;
}

.investor-user-chevron {
    flex: 0 0 auto;
    transition: transform 0.15s;
}

.investor-user-chevron.open {
    transform: rotate(180deg);
}

.investor-user-trigger-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
    line-height: 1.3;
}

.investor-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.investor-header-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #17b8a6, #22c55e);
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(23, 184, 166, 0.28);
}

.investor-header-user-name {
    font-weight: 600;
    font-size: 13px;
    color: #14181f;
}

.investor-header-user-email {
    font-size: 12px;
    color: #8a8fa3;
}

.investor-user-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
}

.investor-user-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 40;
    width: 260px;
    background: #ffffff;
    border: 1px solid rgba(30, 35, 70, 0.1);
    border-radius: 14px;
    box-shadow: 0 18px 44px -14px rgba(30, 35, 70, 0.32);
    overflow: hidden;
}

.investor-user-menu-identity {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px;
    border-bottom: 1px solid #eef0f5;
}

.investor-user-menu-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.investor-user-menu-identity-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.investor-user-menu-items {
    padding: 7px;
}

.investor-user-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    background: transparent;
    border-radius: 9px;
    padding: 11px 12px;
    font-size: 14px;
    font-weight: 600;
    text-align: start;
    transition: background 0.15s;
}

.investor-user-menu-item-danger {
    color: #c22a2f;
}

.investor-user-menu-item-danger:hover {
    background: #fef4f4;
}

.investor-footer {
    background: #ffffff;
    border-top: 1px solid rgba(30, 35, 70, 0.07);
}

.investor-footer-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 26px 32px;
    text-align: center;
}

.investor-footer-inner p {
    margin: 0;
}

.investor-footer-copyright {
    font-size: 13px;
    font-weight: 600;
    color: #4a4f66;
}

.investor-footer-disclaimer {
    margin-top: 5px;
    font-size: 12.5px;
    color: #a3a8bd;
    line-height: 1.7;
}

.investor-footer-powered-by {
    margin-top: 5px;
    font-size: 12.5px;
    color: #a3a8bd;
}

.investor-footer-powered-by-brand {
    font-weight: 700;
    color: #5a6078;
}

/* InvestorHome.razor's document list ("My Documents") - its own indigo/white card system, per the
   design spec, deliberately distinct from .kyc-page's teal identity which this never touches.
   .investor-documents-page is a plain flex wrapper - width/padding already come from
   .investor-portal-main (MainLayout's shell, see above). */
.investor-documents-page {
    display: flex;
    flex-direction: column;
}

.investor-documents-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.investor-documents-heading h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: #14181f;
    letter-spacing: -0.02em;
}

.investor-documents-count-pill {
    font-size: 13px;
    font-weight: 600;
    color: #5a6078;
    background: #eceff6;
    border: 1px solid #e4e6ee;
    border-radius: 999px;
    padding: 3px 12px;
}

.investor-documents-subtitle {
    margin: 8px 0 26px;
    font-size: 15px;
    color: #5a6078;
    line-height: 1.6;
    max-width: 520px;
}

.investor-documents-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 20px;
}

.investor-document-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(30, 35, 70, 0.08);
    border-radius: 18px;
    padding: 24px 24px 22px;
    box-shadow: 0 12px 30px -18px rgba(30, 35, 70, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.investor-document-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -20px rgba(30, 35, 70, 0.34);
}

.investor-document-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Status-driven colors (icon bg/stroke, badge bg/dot/text) extend the design spec's given
   (Rejected) + suggested (Approved/Pending) palette to this app's 3 real KycStatus values - see
   InvestorHome.razor's StatusColorClass. SVGs use stroke="currentColor" so the wrapping element's
   own `color` drives them, no per-status inline styles needed. */
.investor-document-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.investor-document-icon-rejected {
    background: #fdecec;
    color: #d13438;
}

.investor-document-icon-approved {
    background: #e9f6ef;
    color: #1f8a5b;
}

.investor-document-icon-submitted {
    background: #fdf3e2;
    color: #b7791f;
}

.investor-document-card-titles {
    flex: 1;
    min-width: 0;
}

.investor-document-card-title {
    font-size: 17px;
    font-weight: 700;
    color: #14181f;
    line-height: 1.35;
}

.investor-document-card-type {
    margin-top: 3px;
    font-size: 13px;
    color: #8a8fa3;
}

.investor-document-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 12px;
    flex: 0 0 auto;
}

.investor-document-badge-rejected {
    background: #fdecec;
    color: #d13438;
}

.investor-document-badge-approved {
    background: #e9f6ef;
    color: #1f8a5b;
}

.investor-document-badge-submitted {
    background: #fdf3e2;
    color: #b7791f;
}

.investor-document-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.investor-document-reason {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 11px;
    background: #fef4f4;
    border: 1px solid #f6d5d6;
    font-size: 13px;
    line-height: 1.6;
    color: #b4373b;
}

.investor-document-meta {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
}

.investor-document-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #5a6078;
}

.investor-document-meta-label {
    color: #8a8fa3;
}

.investor-document-meta-value {
    font-weight: 600;
    color: #3a3f5c;
}

.investor-document-actions {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #eef0f5;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.investor-document-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #4f46e5;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.investor-document-toggle:hover {
    color: #4338ca;
}

.investor-document-toggle-chevron {
    transition: transform 0.15s;
}

.investor-document-toggle-chevron.open {
    transform: rotate(180deg);
}

.investor-document-resubmit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-inline-start: auto;
    border: none;
    cursor: pointer;
    background: #4f46e5;
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.22);
    transition: background 0.15s;
}

.investor-document-resubmit:hover {
    background: #4338ca;
    color: #ffffff;
}

/* Inline "workflow history" timeline (InvestorHome.razor's expand/collapse) - a custom 3-column
   flex recipe per event (date/time column, dot+connector rail, title), not RadzenTimeline (its
   generic structure doesn't map onto this per-event-kind dot/connector recipe). The LAST entry in
   the already-chronologically-sorted list renders "current" (solid ringed dot, colored date/
   title, no connector); every earlier entry renders "past" (hollow grey dot, muted date,
   connector below) - see InvestorHome.razor's own comment on why sorting keeps this correct. */
.investor-timeline {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #eef0f5;
}

.investor-timeline-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #4a4f66;
    margin: 0 0 24px;
}

/* Collapsible variant: the heading is the clickable expand/collapse control with a chevron. */
.investor-timeline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #4a4f66;
}

.investor-timeline-chevron {
    transition: transform 0.15s ease;
    color: #8a8fa3;
}

.investor-timeline-toggle.open .investor-timeline-chevron {
    transform: rotate(180deg);
}

/* Space between the (clickable) heading and the events when expanded. */
.investor-timeline-items {
    margin-top: 24px;
}

.investor-timeline-row {
    display: flex;
    gap: 18px;
}

.investor-timeline-date {
    flex: 0 0 138px;
    text-align: end;
    padding-top: 1px;
    font-size: 12.5px;
    font-weight: 600;
    color: #8a8fa3;
    line-height: 1.4;
}

.investor-timeline-time {
    font-size: 11px;
    font-weight: 500;
    color: #a3a8bd;
    margin-inline-start: 5px;
}

/* The acting staff member's name, on the date/time side (null for the investor's own submissions). */
.investor-timeline-actor {
    font-size: 11.5px;
    font-weight: 600;
    color: #6b7086;
    margin-top: 5px;
    line-height: 1.35;
    word-break: break-word;
}

.investor-timeline-rail {
    position: relative;
    flex: 0 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.investor-timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex: 0 0 auto;
    z-index: 1;
    margin-top: 3px;
    background: #ffffff;
    border: 2px solid #c7cbd8;
}

/* Every dot is tinted by its event kind (not only the current one): submitted = orange,
   rejected = red, approved = green. */
.investor-timeline-dot.investor-timeline-submitted {
    background: #e08214;
    border-color: #e08214;
}

.investor-timeline-dot.investor-timeline-rejected {
    background: #d13438;
    border-color: #d13438;
}

.investor-timeline-dot.investor-timeline-approved {
    background: #1f8a5b;
    border-color: #1f8a5b;
}

/* The current (latest) entry keeps an emphasis ring around its kind-colored dot. */
.investor-timeline-dot.current {
    border: none;
}

.investor-timeline-dot.current.investor-timeline-rejected {
    box-shadow: 0 0 0 4px #fdecec;
}

.investor-timeline-dot.current.investor-timeline-approved {
    box-shadow: 0 0 0 4px #e9f6ef;
}

.investor-timeline-dot.current.investor-timeline-submitted {
    box-shadow: 0 0 0 4px #fdf3e2;
}

.investor-timeline-connector {
    width: 2px;
    flex: 1;
    background: #aab1c4;
    border-radius: 2px;
    margin-top: 3px;
    min-height: 18px;
}

.investor-timeline-content {
    flex: 1;
    padding-bottom: 32px;
    min-width: 0;
}

.investor-timeline-row:last-child .investor-timeline-content {
    padding-bottom: 0;
}

.investor-timeline-event-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #3a3f5c;
    line-height: 1.4;
}

/* The rejection reason (or any per-event detail), on the content side beneath the status - tinted
   to match its dot color (submitted = orange, rejected = red, approved = green). */
.investor-timeline-event-message {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 500;
    color: #5b6070;
    line-height: 1.5;
    word-break: break-word;
}

.investor-timeline-event-message.investor-timeline-submitted {
    color: #e08214;
}

.investor-timeline-event-message.investor-timeline-rejected {
    color: #d13438;
}

.investor-timeline-event-message.investor-timeline-approved {
    color: #1f8a5b;
}

.investor-timeline-event-title.investor-timeline-rejected,
.investor-timeline-date.investor-timeline-rejected {
    color: #d13438;
}

.investor-timeline-event-title.investor-timeline-approved,
.investor-timeline-date.investor-timeline-approved {
    color: #1f8a5b;
}

.investor-timeline-event-title.investor-timeline-submitted,
.investor-timeline-date.investor-timeline-submitted {
    color: #e08214;
}

@media (max-width: 720px) {
    .investor-header-bar {
        padding: 12px 18px;
    }

    /* Avatar + chevron only in the trigger on mobile - identity still shown inside the open
       dropdown panel's own identity header, which isn't touched by this rule. */
    .investor-user-trigger-info {
        display: none;
    }

    .investor-portal-main {
        padding: 28px 18px 40px;
    }

    .investor-footer-inner {
        padding: 26px 18px;
    }

    .investor-documents-list {
        grid-template-columns: 1fr;
    }

    /* The 92px date column + 20px rail + 2x16px gaps (144px of fixed chrome) leaves too little
       room for the event text on a narrow phone - shrink both here rather than restructuring the
       row layout, which is unnecessary at this screen size. */
    .investor-timeline-row {
        gap: 10px;
    }

    .investor-timeline-date {
        flex-basis: 108px;
        font-size: 11.5px;
    }
}

.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.page-heading .page-kicker {
    display: block;
    margin: 0 0 4px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #4f46e5;
}

.page-toolbar h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    color: #141b2d;
}

.page-toolbar .btn-primary {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 22px;
    background: linear-gradient(135deg, #4f46e5, #6d5cfb);
    border-radius: 12px;
    box-shadow: 0 12px 26px -12px rgba(79, 70, 229, 0.7);
    font-size: 14.5px;
    text-decoration: none;
}

.page-toolbar .btn-primary:hover {
    filter: brightness(1.04);
}

.search-box {
    flex: 1 1 auto;
    width: 100%;
    height: 50px;
    padding: 0 46px 0 18px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA3B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat calc(100% - 16px) center;
    background-size: 18px 18px;
    border: 1px solid #e4e8f0;
    border-radius: 12px;
    font-size: 14.5px;
    font-family: inherit;
    color: #1f2637;
    box-sizing: border-box;
}

.search-box::placeholder {
    color: #9aa3b5;
}

.search-box:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.search-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 22px;
}

.page-toolbar .btn-link,
.search-form .btn-link {
    width: auto;
    flex: 0 0 auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid #eaedf4;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(30, 40, 70, 0.04);
}

.data-table th,
.data-table td {
    text-align: start;
    padding: 18px 24px;
    font-size: 14.5px;
    border-bottom: 1px solid #f0f2f7;
}

.data-table th {
    background: #f8fafc;
    color: #6b7280;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    padding: 16px 24px;
    border-bottom: 1px solid #edf0f6;
}

.data-table td {
    color: #2a3242;
}

.data-table tbody tr:hover td {
    background: #f8fafc;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* KycSubmissions.razor's status column - one small badge per KycStatus, distinct enough at a
   glance for a staff member scanning the queue for rejected/awaiting-review rows. */
.kyc-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.kyc-status-submitted {
    background: #eef2ff;
    color: #4338ca;
}

.kyc-status-approved {
    background: #ecfdf5;
    color: #047857;
}

.kyc-status-rejected {
    background: #fef2f2;
    color: #b91c1c;
}

.kyc-status-notstarted {
    background: #eef1f5;
    color: #64748b;
}

.account-muted {
    color: #9aa2b1;
}

/* Activity-log badges (Logs.razor) - same pill shape/palette as the KYC status badges, grouped by
   activity family. */
.activity-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.activity-auth {
    background: #eef2ff;
    color: #4338ca;
}

.activity-submitted {
    background: #fff7ed;
    color: #c2410c;
}

.activity-approved {
    background: #ecfdf5;
    color: #047857;
}

.activity-rejected {
    background: #fef2f2;
    color: #b91c1c;
}

.activity-muted {
    background: #eef1f5;
    color: #64748b;
}

/* ===== KYC submissions board (neomorphism) - the staff list rendered as soft cards, mirroring the
   investor document card, with a search box. Same soft-UI palette as the Home dashboard. ===== */
.kyc-board {
    --neo-bg: #e7eaf0;
    --neo-light: #ffffff;
    --neo-dark: #c5cad6;
    background: var(--neo-bg);
    border-radius: 24px;
    padding: 26px 28px;
    color: #3a4256;
}

.kyc-board-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.kyc-board-toolbar h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #2b3242;
}

.kyc-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--neo-bg);
    border-radius: 999px;
    padding: 0 18px;
    height: 44px;
    flex: 0 1 340px;
    min-width: 220px;
    box-shadow: inset 4px 4px 8px var(--neo-dark), inset -4px -4px 8px var(--neo-light);
}

.kyc-search svg {
    width: 16px;
    height: 16px;
    color: #8a93a6;
    flex: 0 0 auto;
}

.kyc-search input {
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: #2b3242;
    width: 100%;
}

.kyc-board-cards {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.kyc-sub-card {
    background: var(--neo-bg);
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 7px 7px 15px var(--neo-dark), -7px -7px 15px var(--neo-light);
}

.kyc-sub-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.kyc-sub-card-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f766e;
    background: var(--neo-bg);
    box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light);
}

.kyc-sub-card-icon svg {
    width: 20px;
    height: 20px;
}

.kyc-sub-card-heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kyc-sub-card-date {
    font-size: 12px;
    font-weight: 600;
    color: #8a93a6;
}

.kyc-sub-card-title {
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
    color: #2b3242;
    word-break: break-word;
}

.kyc-sub-card-head-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.kyc-sub-card-meta {
    margin-top: 14px;
    font-size: 13px;
    color: #7b8296;
    display: flex;
    gap: 8px 16px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.kyc-sub-card-meta strong {
    color: #3a4256;
    font-weight: 700;
}

.kyc-sub-card-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(150, 160, 180, .2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kyc-sub-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #4f46e5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
}

.kyc-sub-toggle-chevron {
    transition: transform .15s;
}

.kyc-sub-toggle-chevron.open {
    transform: rotate(180deg);
}

.kyc-sub-view {
    font-size: 13px;
    font-weight: 700;
    color: #0f766e;
    text-decoration: none;
    padding: 9px 18px;
    border-radius: 10px;
    background: var(--neo-bg);
    box-shadow: 3px 3px 7px var(--neo-dark), -3px -3px 7px var(--neo-light);
    transition: box-shadow .12s;
}

.kyc-sub-view:active {
    box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light);
}

.kyc-sub-card .investor-timeline {
    margin-top: 16px;
}

.kyc-board-empty {
    color: #7b8296;
    font-size: 14px;
    padding: 18px 2px;
}

@media (max-width: 720px) {
    .kyc-board {
        padding: 20px 16px;
        border-radius: 0;
    }
}

/* ===== Accounts board (neomorphism) - the tenant's users as soft cards. ===== */
.account-board {
    --neo-bg: #e7eaf0;
    --neo-light: #ffffff;
    --neo-dark: #c5cad6;
    background: var(--neo-bg);
    border-radius: 24px;
    padding: 26px 28px;
    color: #3a4256;
}

.account-board-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.account-board-toolbar h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #2b3242;
}

.account-board-empty {
    color: #7b8296;
    font-size: 14px;
    padding: 18px 2px;
}

.account-user-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* A fixed column grid so name / phone / email / status line up across every row - a lightweight
   table that keeps the card look. Every card shares the same track template, so columns are
   vertically aligned; content aligns to the reading start (right in RTL, left in LTR) via
   justify-content/text-align: start, and the grid itself flips column order by writing direction. */
.account-user-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1.5fr);
    align-items: center;
    gap: 16px;
    background: var(--neo-bg);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 6px 6px 13px var(--neo-dark), -6px -6px 13px var(--neo-light);
}

.account-user-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: #0f766e;
    background: var(--neo-bg);
    box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light);
}

.account-user-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: start;
}

.account-user-name {
    font-size: 14px;
    font-weight: 700;
    color: #2b3242;
    word-break: break-word;
}

.account-user-value {
    font-size: 13.5px;
    color: #3a4256;
    word-break: break-word;
    min-width: 0;
}

.account-user-icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: #8a93a6;
}

.account-user-icon svg {
    width: 15px;
    height: 15px;
}

/* Status column: type + status badges (+ the resend control), wrapping within the column. */
.account-user-status {
    flex-wrap: wrap;
    gap: 8px;
}

/* Narrow screens: drop the fixed grid and stack the cells within each card. */
@media (max-width: 880px) {
    .account-user-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
}

.account-resend-btn {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: #0f766e;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 9px;
    border: none;
    background: var(--neo-bg);
    box-shadow: 3px 3px 7px var(--neo-dark), -3px -3px 7px var(--neo-light);
    transition: box-shadow .12s;
}

.account-resend-btn:active:not(:disabled) {
    box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light);
}

.account-resend-btn:disabled {
    opacity: .55;
    cursor: default;
}

@media (max-width: 720px) {
    .account-board {
        padding: 20px 16px;
        border-radius: 0;
    }
}

/* ===== Logs board (neomorphism) - activity entries as soft cards in a fixed column grid, matching
   the Accounts and KYC-submissions boards. ===== */
.logs-board {
    --neo-bg: #e7eaf0;
    --neo-light: #ffffff;
    --neo-dark: #c5cad6;
    background: var(--neo-bg);
    border-radius: 24px;
    padding: 26px 28px;
    color: #3a4256;
}

.logs-board-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.logs-board-toolbar h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #2b3242;
}

.logs-board-empty {
    color: #7b8296;
    font-size: 14px;
    padding: 18px 2px;
}

.log-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.log-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.6fr);
    align-items: center;
    gap: 16px;
    background: var(--neo-bg);
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 5px 5px 11px var(--neo-dark), -5px -5px 11px var(--neo-light);
}

.log-cell {
    min-width: 0;
    text-align: start;
    font-size: 13px;
    color: #3a4256;
    word-break: break-word;
}

.log-when {
    color: #7b8296;
    font-size: 12.5px;
}

.log-user {
    font-weight: 700;
    color: #2b3242;
}

.log-detail {
    color: #5b6070;
}

@media (max-width: 880px) {
    .logs-board {
        padding: 20px 16px;
        border-radius: 0;
    }

    .log-card {
        grid-template-columns: 1fr 1fr;
        row-gap: 8px;
    }
}

/* ===== Settings page (neomorphism) - matches the Accounts / KYC-submissions / Logs boards. ===== */
.settings-board {
    --neo-bg: #e7eaf0;
    --neo-light: #ffffff;
    --neo-dark: #c5cad6;
    background: var(--neo-bg);
    border-radius: 24px;
    padding: 26px 28px;
    color: #3a4256;
}

.settings-board-toolbar {
    margin-bottom: 22px;
}

.settings-board-toolbar h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #2b3242;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 940px;
}

.settings-card {
    background: var(--neo-bg);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 7px 7px 15px var(--neo-dark), -7px -7px 15px var(--neo-light);
}

.settings-card-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: #2b3242;
}

.settings-field {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-field > label {
    font-size: 13px;
    font-weight: 600;
    color: #45506b;
}

.settings-input {
    height: 44px;
    border: none;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: #1f2733;
    background: var(--neo-bg);
    box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light);
}

.settings-input:focus {
    outline: none;
    box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light), 0 0 0 2px rgba(15, 118, 110, .35);
}

.settings-logo-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.settings-logo-preview {
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--neo-bg);
    box-shadow: inset 3px 3px 7px var(--neo-dark), inset -3px -3px 7px var(--neo-light);
}

.settings-logo-preview img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.settings-logo-empty {
    font-size: 12px;
    color: #9aa2b1;
}

.settings-logo-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.settings-upload {
    cursor: pointer;
}

/* The visible control is the <label>; the actual file input is hidden inside it. */
.settings-upload input[type=file] {
    display: none;
}

.settings-remove {
    color: #b91c1c;
}

.settings-actions {
    margin-top: 22px;
}

.settings-saved {
    color: #047857;
    font-weight: 600;
    font-size: 13.5px;
    margin: 12px 0 0;
}

.settings-license {
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-license > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.settings-license dt {
    margin: 0;
    font-size: 13px;
    color: #7b8296;
    font-weight: 600;
}

.settings-license dd {
    margin: 0;
    font-size: 14px;
    color: #2b3242;
    font-weight: 700;
}

@media (max-width: 720px) {
    .settings-board {
        padding: 20px 16px;
        border-radius: 0;
    }
}

.data-table .row-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Account (owner user list): an amber "needs attention" badge for an unverified email (distinct
   from the indigo/green/red KYC-status badges it reuses the base .kyc-status-badge shape from), the
   "verification email sent" confirmation text, and the page subtitle spacing. */
.account-badge-unverified {
    background: #fff7ed;
    color: #c2410c;
}

/* Account-type badges - a distinct colour per type (blue = investor, purple = staff), separate
   from the green/amber/red status palette. */
.account-badge-investor {
    background: #e0f2fe;
    color: #0369a1;
}

.account-badge-staff {
    background: #f3e8ff;
    color: #7e22ce;
}

.account-resent {
    font-size: 12.5px;
    font-weight: 600;
    color: #047857;
}

.account-subtitle {
    margin: -6px 0 18px;
    max-width: 640px;
}

.data-table .row-actions form {
    display: inline;
}

.code-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    background: #eef0fe;
    color: #4f46e5;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.btn-edit,
.btn-delete {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

.btn-edit {
    background: #f4f5fe;
    border: 1px solid #daddf7;
    color: #4f46e5;
}

.btn-edit:hover {
    background: #eceefd;
}

.btn-delete {
    background: #fef1f3;
    border: 1px solid #f2c4cb;
    color: #e11d48;
}

.btn-delete:hover {
    background: #fde5e8;
}

.empty-state {
    background: #ffffff;
    border: 1px solid #eaedf4;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 16px;
    color: #2a3242;
}

.pagination a {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.pagination a.pagination-disabled {
    color: #9aa3b5;
    pointer-events: none;
}

.pagination-status {
    font-size: 12.5px;
    color: #9aa3b5;
}

.pagination-footer {
    margin: 16px 0 0;
}

/* Dimmed row styling for inactive FeeSchedule rows - matches the legacy client's own
   ForeColor = Color.LightGray convention for inactive schedules. */
.inactive-row td {
    color: #94a3b8;
}

/* KYC form - "Serene" direction: a calm institutional-financial look over Radzen form controls
   (RadzenTextBox/DatePicker/RadioButtonList/Numeric/CheckBox/SignaturePad). The whole form sits on
   an off-white "artboard" (.kyc-page), teal accent throughout, a dark declarations panel at the
   end. The --rz-* custom properties are scoped to .kyc-page (not :root) so Symbols.razor's own
   RadzenDataGrid trial keeps its unrelated indigo look - Radzen's components read these variables
   live at the point of use, so redefining them on an ancestor is enough. */
.kyc-page {
    max-width: 900px;
    margin: 40px auto;
    background: #f6f8f8;
    border-radius: 26px;
    padding: 36px;
    box-shadow: 0 24px 60px -28px rgba(15, 42, 40, 0.35);

    --rz-primary: #0f766e;
    --rz-primary-dark: #0b5a54;
    --rz-primary-light: #14a399;
    --rz-primary-lighter: #e9f4f2;
    --rz-text-font-family: "IBM Plex Sans Arabic", -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --rz-border-radius: 12px;
    --rz-base-100: #f6f8f8;
    --rz-base-200: #e6edec;
    --rz-base-300: #dce3e2;
    --rz-checkbox-checked-background-color: #14a399;
    --rz-checkbox-checked-border: none;
    --rz-checkbox-checked-color: #ffffff;
    --rz-checkbox-border-radius: 7px;
    --rz-checkbox-width: 22px;
    --rz-checkbox-height: 22px;
}

/* Blocking "please wait" overlay shown while a KYC submission is in flight (see Kyc.razor's
   _submitting/_verifyingOtp). Fixed and full-viewport so it captures every click/scroll and freezes
   the form beneath, preventing edits or a double-submit until the request resolves. */
.kyc-submit-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 42, 40, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.kyc-submit-overlay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 340px;
    text-align: center;
    background: #f6f8f8;
    border-radius: 20px;
    padding: 30px 38px;
    box-shadow: 0 26px 64px -22px rgba(15, 42, 40, 0.6);
}

.kyc-submit-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid #d4e2e0;
    border-top-color: #0f766e;
    animation: kyc-submit-spin 0.8s linear infinite;
}

@keyframes kyc-submit-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .kyc-submit-spinner { animation-duration: 2.2s; }
}

.kyc-submit-overlay-text {
    font-size: 14.5px;
    font-weight: 600;
    color: #0e2c29;
}

/* Official IDC letterhead - the depository center's own identity (navy #2b2f7a + orange #ef7f1a,
   taken from the logo mark), sitting as a formal masthead on the KYC form's off-white artboard.
   Bilingual (English + Arabic shown together, as on the official paper form). Deliberately distinct
   from the form body's teal accent - this is the issuing authority's header, not input styling.
   direction:ltr is forced so the two groups keep FIXED physical sides - issuer identity always
   left, document title always right - and do NOT swap when the page language switches to Arabic. */
.kyc-letterhead {
    display: flex;
    flex-direction: column;
    gap: 14px;
    direction: ltr;
    /* White band matching the logo's own white background (the logo PNG is opaque white, not
       transparent), so the emblem blends in seamlessly instead of showing a white box on the
       off-white artboard. Full-bleed to the card edges via negative margins (the .kyc-page padding
       is 36px) with the card's top corners, and a downward-biased shadow that lifts the masthead
       off the form content below it. */
    background: #ffffff;
    margin: -36px -36px 26px;
    padding: 30px 36px 24px;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 6px 16px -8px rgba(15, 23, 55, 0.22);
}

/* The two groups at the same level: brand (logo + org) pinned left, form title pinned right. */
.kyc-letterhead-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* Logo + bilingual org name locked up on one row, sized to span the two title lines. */
.kyc-letterhead-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.kyc-letterhead-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
    flex: 0 0 auto;
}

.kyc-letterhead-org {
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* Centered so the (narrower, secondary) English line sits centered under the larger Arabic
       line on top, which anchors the block width. */
    text-align: center;
}

/* Arabic on top is the primary (larger) masthead line; the English line below is the secondary. */
.kyc-letterhead-org-ar {
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #2b2f7a;
}

.kyc-letterhead-org-en {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #5b608c;
}

/* Full-width two-tone divider (navy with an orange center segment) closing off the masthead. */
.kyc-letterhead-rule {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #2b2f7a 0 46%, #ef7f1a 46% 54%, #2b2f7a 54% 100%);
}

.kyc-letterhead-form {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: right;
}

/* Arabic on top is the primary form-title line; the English line below is the secondary. */
.kyc-letterhead-form-ar {
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #3a3f5c;
}

.kyc-letterhead-form-en {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #6b7086;
}

/* Inputs - height/radius/border applied directly to Radzen's rendered elements (more reliable
   than guessing every internal --rz-input-* variable name for every component type). */
.kyc-page .rz-textbox,
.kyc-page .rz-numeric-input,
.kyc-page .rz-datepicker input,
.kyc-page .rz-dropdown {
    height: 46px;
    border-radius: 12px;
    border-color: #dce3e2;
    padding: 0 14px;
    font-size: 14px;
    color: #0f172a;
    box-sizing: border-box;
}

/* Radzen's own .rz-dropdown rule is flex-direction:column with the trigger icon absolutely
   positioned over it - overriding to a row here so align-items/justify-content center the
   label both vertically and horizontally in the box, the way every other kyc-page input looks. */
.kyc-page .rz-dropdown {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.kyc-page .rz-dropdown .rz-helper-hidden-accessible {
    position: absolute;
}

.kyc-page .rz-dropdown-label {
    flex: 0 1 auto;
    text-align: center;
    line-height: normal;
    margin: 0;
    padding-inline-end: 0;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kyc-page .rz-numeric,
.kyc-page .rz-datepicker {
    width: 100%;
}

/* Currency suffix (e.g. "د.ع.") shown beside an amount field - kept as a separate overlay span
   rather than baked into RadzenNumeric's Format string, since a literal-text format round-trips
   badly through Radzen's parser (the value gets wiped out on blur once typed manually). Radzen
   always renders numeric inputs with a physical "rz-text-align-left" class regardless of page
   direction, so the suffix and its padding use physical left/right (not logical inline-start/end)
   to stay on the opposite side from the digits even on this RTL page. */
.kyc-input-suffix-wrap {
    position: relative;
}

.kyc-input-suffix-wrap .rz-numeric-input {
    padding-right: 48px;
}

.kyc-input-suffix {
    position: absolute;
    right: 14px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #7c8c8a;
    pointer-events: none;
}

/* "Is the investor informed/sophisticated?" - the one toggle that sits above the numbered
   sections, its own unnumbered white strip rather than a full card. */
.kyc-toggle-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid #e6edec;
    border-radius: 18px;
    padding: 18px 22px;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.kyc-toggle-strip-text {
    font-size: 14px;
    font-weight: 700;
    color: #0e2c29;
}

.kyc-card {
    background: #e1e2e3;
    border: 1px solid #e6edec;
    border-radius: 18px;
    padding: 26px 28px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.kyc-card + .kyc-card {
    margin-top: 18px;
}

.kyc-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 22px;
    border-bottom: 1px solid #eef2f1;
}

.kyc-card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #0e2c29;
}

.kyc-card-icon {
    display: flex;
    color: #0f766e;
}

.kyc-card-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.7;
    fill: none;
}

.kyc-card-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e9f4f2;
    color: #0f766e;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.kyc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 22px;
}

.kyc-grid-names {
    grid-template-columns: repeat(4, 1fr);
}

.kyc-grid-address,
.kyc-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.kyc-grid + .kyc-grid {
    margin-top: 18px;
}

.kyc-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.kyc-field-full {
    grid-column: 1 / -1;
}

.kyc-inline-error {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: #dc2626;
}

/* Small muted hint above a group of fields inside a KYC section (e.g. the "if you live abroad"
   note before the residence country/city). */
.kyc-section-hint {
    margin: 4px 0 14px;
    font-size: 13px;
    color: #6e8380;
}

/* Guidance listing which documents to attach, above the upload control. */
.kyc-attachments-hint {
    margin: -4px 0 16px;
    font-size: 13px;
    color: #6e8380;
}

.kyc-attachments-hint ul {
    margin: 6px 0 0;
    padding-inline-start: 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Summary of what still needs fixing, shown above the submit button on a failed submit. */
.kyc-validation-summary {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 18px;
    color: #b91c1c;
}

.kyc-validation-summary-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
}

.kyc-validation-summary ul {
    margin: 0;
    padding-inline-start: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

/* Marks a section as not required for the current investor type (e.g. National ID for
   ForeignIndividual, Passport for Iraqi) - sits inside .kyc-card-header, which is already a flex
   row, so margin-inline-start:auto alone pushes it to the row's own end. */
.kyc-section-optional-hint {
    margin-inline-start: auto;
    font-size: 12px;
    font-weight: 600;
    color: #8aa09d;
    background: #eef2f1;
    border-radius: 999px;
    padding: 3px 10px;
}

.kyc-field label {
    font-size: 13px;
    font-weight: 600;
    color: #202322;
}

/* Segmented Yes/No toggle (IsInformedInvestor + the two PEP questions) - a bounded track with a
   solid pill for the selected option, built on RadzenRadioButtonList's own stable structural
   classes (.rz-radio-btn, aria-checked) rather than fighting its default checkbox-list look. */
.kyc-toggle .rz-radio-button-list {
    display: inline-flex;
    background: #eef3f2;
    border-radius: 11px;
    padding: 4px;
}

.kyc-toggle .rz-radio-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #5f7572;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.kyc-toggle .rz-radio-btn[aria-checked="true"] {
    background: #0f766e;
    color: #ffffff;
    box-shadow: 0 2px 6px -1px rgba(15, 118, 110, 0.5);
}

.kyc-toggle .rz-radiobutton {
    display: none;
}

.kyc-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.kyc-toggle-row .kyc-toggle-question {
    font-size: 14px;
    color: #334845;
    line-height: 1.6;
}

.kyc-toggle-row + .kyc-toggle-row {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed #eaf0ef;
}

/* Choice pills (employment type) - same underlying markup as the toggle, but standalone chips
   with gaps rather than a shared track background. */
.kyc-pills .rz-radio-button-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kyc-pills .rz-radio-btn {
    padding: 11px 20px;
    border-radius: 11px;
    background: #f1f5f4;
    border: 1px solid #e3eae9;
    color: #5f7572;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.kyc-pills .rz-radio-btn[aria-checked="true"] {
    background: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
    box-shadow: 0 2px 6px -1px rgba(15, 118, 110, 0.5);
}

.kyc-pills .rz-radiobutton {
    display: none;
}

/* Custom pill group (plain buttons) for the company legal-form choice - RadzenRadioButtonList
   renders no items for a nullable-enum TValue, so this replaces it. Same soft teal pill look as
   the .kyc-pills radios above. */
.kyc-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kyc-pill {
    padding: 11px 20px;
    border-radius: 11px;
    background: #f1f5f4;
    border: 1px solid #e3eae9;
    color: #5f7572;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.kyc-pill:hover {
    border-color: #cdddda;
    color: #0f766e;
}

.kyc-pill-selected,
.kyc-pill-selected:hover {
    background: #0f766e;
    border-color: #0f766e;
    color: #ffffff;
    box-shadow: 0 2px 6px -1px rgba(15, 118, 110, 0.5);
}

.kyc-pill:focus-visible {
    outline: 2px solid #0f766e;
    outline-offset: 2px;
}

/* Shown at the top of the fill-in form when the investor is correcting a rejected submission
   (Kyc.razor's _rejection is not null) - amber/warning palette, distinct from .error-message's red
   (this isn't the investor having done something wrong just now, it's a staff review outcome). */
.kyc-rejection-banner {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 20px;
}

.kyc-rejection-banner-title {
    color: #92400e;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 6px;
}

.kyc-rejection-banner-message {
    color: #92400e;
    font-size: 0.85rem;
    margin: 0 0 10px;
}

.kyc-rejection-banner-reason {
    background: #ffffff;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 12px;
    color: #12332f;
    font-size: 0.9rem;
    white-space: pre-wrap;
}

/* Only InvestorHome.razor's rejection banner has a CTA link after the reason - scoped here
   rather than a margin-bottom on the shared .kyc-rejection-banner-reason, which Kyc.razor's own
   rejection banner also uses without any following element. */
.kyc-rejection-banner-reason + .btn-cta {
    margin-top: 14px;
}

.investor-timeline {
    margin-top: 12px;
    max-width: 640px;
}

/* Declarations - dark panel, the one deliberate accent moment in the form. */
.kyc-card-dark {
    background: #0e2c29;
    border: none;
}

.kyc-card-dark .kyc-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.kyc-card-dark .kyc-card-title {
    color: #ffffff;
}

.kyc-card-dark .kyc-card-number {
    background: rgba(255, 255, 255, 0.12);
    color: #8fe3d8;
}

.kyc-card-dark .kyc-card-icon {
    color: #8fe3d8;
}

/* Dual nationality - a repeatable (country dropdown + free-text note) row, since an investor can
   have more than one additional nationality. */
.kyc-dual-nationality {
    margin-top: 18px;
}

.kyc-dual-nationality > label {
    font-size: 13px;
    font-weight: 600;
    color: #5b6b6a;
    display: block;
    margin-bottom: 10px;
}

.kyc-dual-nationality-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.kyc-dual-nationality-add {
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    background: #e9f4f2;
    border: 1px dashed #0f766e;
    color: #0f766e;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.kyc-dual-nationality-add:hover {
    background: #dcf0ed;
}

.kyc-dual-nationality-remove {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #fef1f3;
    border: 1px solid #f2c4cb;
    color: #e11d48;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.kyc-dual-nationality-remove:hover {
    background: #fde5e8;
}

@media (max-width: 720px) {
    .kyc-dual-nationality-row {
        grid-template-columns: 1fr;
    }
}

/* Additional phone/email - same repeatable-row pattern as dual nationality, but a single
   text field per row instead of a dropdown + note. */
.kyc-additional-contacts {
    margin-top: 18px;
}

.kyc-additional-contacts > label {
    font-size: 13px;
    font-weight: 600;
    color: #5b6b6a;
    display: block;
    margin-bottom: 10px;
}

.kyc-additional-contact-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

/* Attachments - RadzenUpload never gets a Url (handled entirely server-side via Change), so its
   own internal file-list/progress UI is cleared right after each pick; only our own repeatable
   list below (thumbnail + free-text description + remove) is ever shown. */
.kyc-upload-row .rz-fileupload-choose {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    background: #e9f4f2;
    border: 1px dashed #0f766e;
    color: #0f766e;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.kyc-upload-row .rz-fileupload-choose:hover {
    background: #dcf0ed;
}

.kyc-attachments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.kyc-attachment-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 12px;
    align-items: center;
}

.kyc-attachment-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #dce3e2;
    background: #f4f7f6;
}

.kyc-attachment-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kyc-attachment-filename {
    font-size: 12.5px;
    color: #5b6b6a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kyc-consent-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.kyc-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 13.5px;
    color: #cfe3e0;
    line-height: 1.7;
}

/* Light-background variant of .kyc-consent-list/.kyc-consent-row - used for the staff/broker
   undertakings checklist on KycSubmissionDetail.razor's print sheet (white background), unlike
   Kyc.razor's investor checklist which sits on the dark consent card. */
.kyc-broker-consent-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 10px 0 16px;
}

.kyc-broker-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 13px;
    color: #12332f;
    line-height: 1.6;
}

/* Read-only "already agreed to" checklist - the investor's own 3 undertakings (section 13,
   always true once a KycForm exists) and the broker's 4 (section 14, once approved). */
.kyc-print-checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.kyc-print-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #12332f;
    line-height: 1.6;
}

.kyc-print-checklist-item .check {
    color: #0f766e;
    font-weight: 700;
    flex-shrink: 0;
}

.kyc-card-dark .rz-chkbox-box {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
}

/* Used on both the investor's OTP-step card (Kyc.razor, light background) and the staff
   approval section (KycSubmissionDetail.razor, also light) - one style since both signature
   pads now sit on light cards, unlike the pre-e-signature version of this page which had one
   dark-card variant (investor) and one print-sheet variant (staff). */
.kyc-signature-label {
    display: block;
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #45625d;
}

/* Required-field marker (e.g. the rejection reason) - the red asterisk after a label. */
.kyc-required-mark {
    color: #b91c1c;
    margin-inline-start: 3px;
    font-weight: 700;
}

.kyc-signature-frame {
    padding: 10px;
    background: #f4f7f6;
    border: 1px dashed #96a5a2;
    border-radius: 12px;
}

.kyc-signature-frame .rz-signature-pad,
.kyc-signature-frame .rz-signature-pad-canvas {
    width: 100%;
}

.kyc-credibility-card {
    text-align: start;
    background: #f4f7f6;
    border: 1px solid #dbe5e3;
    border-radius: 14px;
    padding: 18px 20px;
    margin-top: 14px;
}

.kyc-credibility-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.kyc-credibility-card-header svg {
    width: 22px;
    height: 22px;
    stroke: #1f7a5c;
    fill: none;
    stroke-width: 1.8;
    flex-shrink: 0;
}

.kyc-credibility-card-signature {
    background: #ffffff;
    margin-top: 14px;
}

.kyc-credibility-card-signature img {
    display: block;
    max-width: 100%;
    max-height: 120px;
}

.kyc-credibility-card-title {
    font-weight: 700;
    color: #0e2c29;
    font-size: 15px;
}

.kyc-credibility-card-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid #e6edec;
    font-size: 13px;
}

.kyc-credibility-card-row:first-of-type {
    border-top: none;
}

.kyc-credibility-card-label {
    color: #6b7f7b;
    flex-shrink: 0;
}

.kyc-credibility-card-value {
    color: #0e2c29;
    font-weight: 600;
    text-align: end;
    word-break: break-word;
}

.kyc-credibility-card-hash {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    font-weight: 500;
}

.kyc-submit-row {
    display: flex;
    margin-top: 26px;
}

.kyc-reject-row {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed #d0d7de;
}

.kyc-rejection-history {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed #d0d7de;
}

.kyc-rejection-history h3 {
    font-size: 13px;
    font-weight: 700;
    color: #12332f;
    margin: 0 0 8px;
}

.btn-cta {
    width: auto;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 28px;
    background: linear-gradient(145deg, #14a399, #0f766e);
    color: #ffffff;
    border: none;
    border-radius: 13px;
    box-shadow: 0 8px 20px -8px rgba(20, 163, 153, 0.7);
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.btn-cta:hover:not(:disabled) {
    filter: brightness(1.04);
}

.btn-cta:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


.kyc-submitted-card {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
}

/* Trust/assurance notice on the confirmation page - a highlighted card between the success title
   and the review-status line. */
.kyc-security-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #f0f7f6;
    border: 1px solid #cfe6e2;
    border-radius: 14px;
    padding: 14px 16px;
    margin: 10px 0 18px;
    font-size: 13px;
    line-height: 1.65;
    color: #2f4d49;
    text-align: start;
}

.kyc-security-notice-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    color: #0f766e;
    margin-top: 1px;
}

/* Clear separation between the signature panel and the navigation buttons. */
.kyc-submitted-actions {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #e6edec;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

@media (max-width: 720px) {
    .kyc-page {
        padding: 20px;
        margin: 0;
        border-radius: 0;
    }

    /* Match the card's 20px mobile padding for the full-bleed masthead, and drop the top radius
       (the card itself is square-cornered on mobile). */
    .kyc-letterhead {
        margin: -20px -20px 22px;
        padding: 22px 20px 20px;
        border-radius: 0;
    }

    .kyc-grid,
    .kyc-grid-names,
    .kyc-grid-address,
    .kyc-grid-3 {
        grid-template-columns: 1fr;
    }

    .kyc-card {
        padding: 22px 18px;
    }
}

/* ============================================================
   KYC staff review (KycSubmissionDetail.razor) - printable A4
   document layout. Same content/fields as before, purely a
   different presentation: ruled fields instead of <dl>, a
   numbered-circle section header instead of a plain <h2>, and
   print-specific rules so Ctrl+P produces a clean paginated
   A4 document with no browser chrome.
   ============================================================ */
.kyc-print-toolbar {
    max-width: 794px;
    width: 100%;
    margin: 0 auto 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kyc-print-toolbar button {
    height: 38px;
    padding: 0 18px;
    border-radius: 8px;
    background: #0f766e;
    color: #ffffff;
    border: none;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    font-family: inherit;
}

.kyc-print-toolbar button:hover {
    filter: brightness(1.05);
}

.kyc-print-page {
    background: #e9ecef;
    padding: 24px 16px 48px;
    display: flex;
    justify-content: center;
}

.kyc-print-sheet {
    background: #ffffff;
    width: 100%;
    max-width: 794px;
    padding: 0.6in;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    /* Direction is set per request culture via the dir attribute in KycSubmissionDetail.razor (RTL
       for Arabic, LTR for English) - not hard-wired here, so switching language re-aligns the sheet.
       All inner layout uses logical text-align:start/end and flexbox, so it flips automatically. */
    font-family: "IBM Plex Sans Arabic", sans-serif;
    color: #12332f;
    box-sizing: border-box;
}

.kyc-print-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid #0f766e;
    padding-bottom: 14px;
    margin-bottom: 22px;
    gap: 16px;
}

.kyc-print-header h1 {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    color: #0e2c29;
}

.kyc-print-subtitle {
    margin: 4px 0 0;
    font-size: 11.5px;
    color: #6e8380;
}

.kyc-print-meta {
    text-align: left;
    font-size: 11px;
    color: #6e8380;
    white-space: nowrap;
}

.kyc-print-meta strong {
    color: #0f766e;
}

/* The investor form's IDC letterhead reused as this sheet's masthead - re-bled to the sheet's
   0.6in padding (the base .kyc-letterhead rule bleeds to the form page's 36px padding instead). */
.kyc-print-sheet .kyc-letterhead {
    margin: -0.6in -0.6in 18px;
    padding: 28px 0.6in 20px;
    border-radius: 4px 4px 0 0;
}

/* Submission meta shown as a wrapping row beneath the masthead, closed off by the same teal rule
   the old header used. */
.kyc-print-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    justify-content: flex-start;
    text-align: start;
    white-space: normal;
    padding-bottom: 12px;
    margin-bottom: 22px;
}

/* Four across, mirroring the form's .kyc-grid-names (First/Second/Third/Fourth). Compound
   selector so it beats the base .kyc-print-grid (2-col) rule that follows it in the file. */
.kyc-print-grid.kyc-print-grid-names {
    grid-template-columns: repeat(4, 1fr);
}

/* The "if you reside abroad" hint above the residence country/city, mirroring the form. */
.kyc-print-sec-note {
    margin: 12px 0;
    font-size: 11.5px;
    color: #6e8380;
}

.kyc-print-sec {
    break-inside: avoid;
    margin-bottom: 22px;
}

.kyc-print-sec-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.kyc-print-sec-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0f766e;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kyc-print-sec-title {
    font-size: 14px;
    font-weight: 700;
    color: #0e2c29;
    white-space: nowrap;
}

.kyc-print-sec-rule {
    flex: 1;
    height: 1px;
    background: #dce7e5;
}

.kyc-print-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
}

.kyc-print-grid-3col {
    grid-template-columns: 1fr 1fr 1fr;
}

.kyc-print-field-full {
    grid-column: 1 / -1;
}

.kyc-print-sheet .fld .lbl {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #5b6b6a;
    margin-bottom: 3px;
}

.kyc-print-sheet .fld .val {
    min-height: 21px;
    border-bottom: 1px solid #b7c3c1;
    padding: 3px 3px 4px;
    font-size: 13px;
    color: #000000;
    /* Preserves line breaks the investor actually typed into a RadzenTextArea field (e.g.
       PoliticalActivityDetails, SeniorOfficialRelationshipDetails, AddressNote) - HTML collapses
       \n to a single space by default, which flattened multi-line free text onto one line here. */
    white-space: pre-wrap;
    word-break: break-word;
}

/* LTR-content values (phone/email/numbers/hashes) sit at the sheet's start edge. In an RTL sheet
   that's the right edge (the element's own dir="ltr" would otherwise left-align them); in an LTR
   sheet their natural left alignment already matches, so this only applies to the RTL sheet. */
.kyc-print-sheet[dir="rtl"] .fld .val[dir="ltr"] {
    text-align: right;
}

.kyc-print-toggle {
    font-size: 12.5px;
    color: #12332f;
    display: flex;
    align-items: center;
    gap: 14px;
}

.kyc-print-toggle-on {
    color: #0f766e;
    font-weight: 700;
}

.kyc-print-signature-block {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 22px;
}

.kyc-print-signature-line {
    border-bottom: 1px solid #12332f;
    height: 34px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 4px;
}

.kyc-print-signature-line img {
    max-height: 56px;
}

.kyc-print-signature-caption {
    font-size: 11px;
    color: #6e8380;
    margin: 4px 0 0;
}

/* RadzenCarousel's own CSS is height:100% cascading down from .rz-carousel, which has no
   intrinsic height of its own - without an explicit height here the whole thing collapses to
   0px and silently shows nothing (confirmed live). */
.kyc-print-attachments-carousel .rz-carousel {
    height: 420px;
}

.kyc-print-attachments-carousel .rz-carousel-item {
    flex-direction: column;
    gap: 10px;
    padding: 16px 0;
}

.kyc-print-attachments-carousel .rz-carousel img {
    max-width: 100%;
    max-height: 340px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.kyc-print-attachment-caption {
    text-align: center;
    font-size: 12px;
    color: #5b6b6a;
    margin-top: 8px;
}

/* Attachment thumbnail gallery (screen). Tiles are captioned with the investor's own title and
   open the full image in the lightbox below on click. */
.kyc-attachment-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.kyc-attachment-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: #f4f7f6;
    border: 1px solid #dbe5e3;
    border-radius: 12px;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}

.kyc-attachment-tile:hover {
    border-color: #0f766e;
    box-shadow: 0 4px 14px -6px rgba(15, 118, 110, .5);
    transform: translateY(-1px);
}

/* The lightbox-open area (thumbnail + title) - a bare button so the whole tile is clickable. */
.kyc-attachment-tile-open {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
}

/* Per-image print button, a sibling of the open button (never nested inside it - nested buttons
   are invalid HTML). */
.kyc-attachment-tile-print {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    border: 1px solid #0f766e;
    background: #ffffff;
    color: #0f766e;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.kyc-attachment-tile-print:hover {
    background: #0f766e;
    color: #ffffff;
}

.kyc-attachment-tile-print svg {
    width: 15px;
    height: 15px;
}

.kyc-attachment-tile-thumb {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 8px;
    background: #ffffff;
    display: block;
}

.kyc-attachment-tile-title {
    font-size: 12.5px;
    color: #12332f;
    word-break: break-word;
    line-height: 1.4;
}

/* Full-size attachment viewer. */
.kyc-attachment-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(9, 20, 18, .82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.kyc-attachment-lightbox-panel {
    position: relative;
    max-width: min(92vw, 900px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.kyc-attachment-lightbox-panel img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 6px;
    background: #ffffff;
}

.kyc-attachment-lightbox-caption {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
}

.kyc-attachment-lightbox-close {
    position: absolute;
    top: -14px;
    inset-inline-end: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    color: #12332f;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.kyc-print-attachments-list {
    display: none;
}

.kyc-print-footer {
    display: none;
}

@media print {
    @page {
        margin: 0.6in;
        size: A4;
    }

    body {
        background: #ffffff;
    }

    .page-toolbar,
    .kyc-print-noprint,
    .app-nav,
    .flash-banner {
        display: none !important;
    }

    .app-main {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .kyc-print-page {
        background: #ffffff;
        padding: 0;
    }

    .kyc-print-sheet {
        box-shadow: none;
        max-width: 100%;
        padding: 0;
        border-radius: 0;
    }

    /* @page already supplies the physical margin, and the sheet padding drops to 0 in print, so
       the masthead sits flush - no negative bleed, no shadow. */
    .kyc-print-sheet .kyc-letterhead {
        margin: 0 0 16px;
        padding: 0 0 14px;
        box-shadow: none;
        border-radius: 0;
    }

    .kyc-print-attachments-list {
        display: block;
    }

    /* Investor undertakings + staff approval start on their own page, and stay together on it
       rather than splitting across two pages. */
    .kyc-print-pledges {
        break-before: page;
        break-inside: avoid;
    }

    .kyc-print-footer {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #dce7e5;
        padding-top: 8px;
        margin-top: 24px;
        font-size: 9.5px;
        color: #8aa09d;
    }
}

.report-viewer-frame {
    width: 100%;
    height: 85vh;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

/* ReportShell needs the full viewport width, unlike every other page (.app-main normally caps
   content at 1180px, centered, for narrow list/form layouts) - scoped to just report pages via
   :has() rather than touching MainLayout.razor to conditionally vary .app-main itself. */
.app-main:has(.report-shell) {
    max-width: none;
}

.report-shell {
    margin-top: 0.5rem;
}

/* Radzen's own .rz-layout class sets height:100dvh;overflow:hidden - correct for RadzenLayout's
   typical use as a whole app's own root layout (filling the viewport), wrong here: ReportShell
   nests it mid-page below AppNav/.page-toolbar, not as the page's own root. Without this override,
   every report page using ReportShell would be forced to exactly one viewport height regardless of
   its actual content height. */
.report-shell .rz-layout {
    height: auto;
    overflow: visible;
}

/* RadzenSidebar positions itself via a PHYSICAL "left:0" in Radzen's own compiled theme CSS,
   regardless of the position:fixed override ReportShell.razor applies inline (see its own doc
   comment) - it's only direction-aware via CSS-grid ordering in the side-by-side layout mode this
   component deliberately avoids. Overridden here with inset-inline-start so the drawer opens from
   the correct edge for the active culture (see App.razor's <html dir="rtl"|"ltr">), left/right
   unset first since a longhand physical property and its logical equivalent don't otherwise
   combine predictably when both target the same edge. */
.report-shell .rz-sidebar {
    left: unset;
    right: unset;
    inset-inline-start: 0;
}

.report-shell-panel-inner {
    padding: 0 2rem 1.75rem;
}

.report-shell-content {
    padding: 0.75rem 1.5rem 1.5rem;
}

/* Physical left, not inset-inline-start - deliberately not RTL-mirrored (product decision), unlike
   every other direction-aware rule in this file. */
.report-shell-toggle-zone {
    text-align: left;
    margin-bottom: 0.25rem;
}

/* Radzen's own --rz-sidebar-toggle-padding theme default (0.8125rem) is sized for a toggle that's
   the only thing in a whole header row - too much padding once it's just a small icon-button at the
   top of a content area with a report/PDF viewer immediately below it. Scoped here rather than
   overriding the theme variable globally, since other future uses of a sidebar toggle elsewhere in
   the app may want the normal size. */
.report-shell-toggle-zone .rz-sidebar-toggle {
    padding: 0.375rem;
}

.report-shell-empty-state {
    padding: 4rem 1rem;
    text-align: center;
    color: #64748b;
}

/* ============================================================
   Login/Register split-card shell (AuthSplitShell.razor) - design
   spec "ABACUS Register Page, Direction 1D": a light brand panel
   (marketing copy over background art) + a white form panel,
   joined by a spiral notebook binding on desktop, stacking on
   phones. Everything below is scoped under .auth-shell-page /
   .auth-form-panel so it can't leak into the plain .card/.field
   styling every other CRUD form in the app still relies on.
   ============================================================ */

/* MainLayout always renders its own fixed-corner <LanguagePicker /> as a direct child of <body>,
   ahead of @Body - AuthSplitShell renders its own in-panel one instead (nested deep inside
   .auth-toolbar-row), so only the direct-child corner picker is hidden here. A bare descendant
   selector (".language-picker" with no ">") would also match - and hide - the in-panel one, since
   it's a .language-picker descendant of body too; the child combinator is load-bearing. */
body:has(.auth-shell-page) > .language-picker {
    display: none;
}

.auth-shell-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #7f838d;
    box-sizing: border-box;
}

.auth-card-split {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    /* 5% smaller than the original 1400x900 design spec on every side - centered by
       .auth-shell-page's flexbox, so shrinking width/height alone pulls in top/bottom/left/right
       symmetrically without needing separate inset/margin rules. */
    width: min(1330px, 95%);
    height: 855px;
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 24px 60px -14px rgba(30, 35, 70, 0.2);
    border: 1px solid rgba(30, 35, 70, 0.07);
}

.auth-brand-panel {
    flex: 0 0 46%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: start;
    padding: 68px 64px;
    box-sizing: border-box;
    background:
        linear-gradient(165deg, rgba(248, 249, 253, 0.34), rgba(233, 236, 245, 0.42)),
        url("../img/auth/brand-bg.png");
    background-size: cover;
    background-position: center;
}

.auth-brand-lockup {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: -20px;
    margin-inline-start: -4px;
    flex: 0 0 auto;
}

.auth-brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(23, 184, 166, 0.32);
}

.auth-brand-word {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #14181f;
}

.auth-brand-lower {
    margin-top: auto;
}

.auth-hero-title {
    margin: 0;
    max-width: 500px;
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.22;
    color: #14181f;
}

.auth-hero-sub {
    max-width: 370px;
    margin: 18px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: #5a6078;
}

.auth-value-props {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
}

.auth-value-prop {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 15px;
    font-weight: 500;
    color: #3a3f5c;
}

.auth-value-check {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #14181f;
    color: #ffffff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-signature-block {
    margin-top: 34px;
    flex: 0 0 auto;
}

.auth-trust-line {
    margin-top: 8px;
    font-size: 12px;
    color: #8a8fa3;
    letter-spacing: 0.04em;
}

/* Plain emphasis, not link styling - it's a <span> with no destination (the design reference this
   was copied from links to a real help page; this app has none yet), so it deliberately doesn't
   look clickable. */
.auth-read-more {
    font-weight: 600;
    margin-inline-start: 4px;
}

/* Zero-width flex child between the two panels - decorative coil art rendered as CSS backgrounds
   (not <img>) on pseudo-elements so screen readers ignore it and it overflows onto both panels
   without being clipped by the brand panel's own background box. */
.auth-spiral-gutter {
    position: relative;
    width: 0;
    flex: 0 0 0;
    z-index: 6;
}

.auth-spiral-gutter::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    background: linear-gradient(90deg, rgba(20, 24, 31, 0.16), rgba(20, 24, 31, 0.03) 24%, rgba(255, 255, 255, 0.55) 50%, rgba(20, 24, 31, 0.03) 76%, rgba(20, 24, 31, 0.16));
}

.auth-spiral-gutter::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    background-image: url("../img/auth/spiral-coil.png");
    background-repeat: repeat-y;
    background-size: 48px 30px;
    background-position: center top;
}

.auth-form-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 58px 70px;
    overflow-y: auto;
    box-sizing: border-box;
}

.auth-toolbar-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
    flex: 0 0 auto;
}

.auth-toolbar-row .language-picker {
    display: flex;
    gap: 2px;
    background: #f1f2f8;
    border-radius: 10px;
    padding: 4px;
}

.auth-toolbar-row .language-picker .lang-sep {
    display: none;
}

.auth-toolbar-row .language-picker a {
    padding: 6px 15px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #8a8fb0;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.auth-toolbar-row .language-picker a:hover {
    color: #4f46e5;
}

.auth-toolbar-row .language-picker a.lang-active {
    background: #ffffff;
    color: #1e2140;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(20, 25, 45, 0.14);
}

.auth-toolbar-row .language-picker a.lang-active:hover {
    color: #1e2140;
}

.auth-form-panel .auth-form-title {
    margin: 0 0 26px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #14181f;
    text-align: start;
}

.auth-form-title-block {
    margin: 0 0 26px;
}

/* Company logo beside the company-name title (replaces the old ABACUS brand lockup). */
.auth-form-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 4px;
}

/* Beats .auth-form-panel .auth-form-title-block .auth-form-title's bottom margin so the name sits
   vertically centred against the logo; the 4px gap now lives on .auth-form-brand above. */
.auth-form-panel .auth-form-title-block .auth-form-brand .auth-form-title {
    margin: 0;
}

.auth-form-brand-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* Overrides just the margin above - Login.razor's title now has a subtitle sitting directly
   underneath it (auth-form-title-action), so the h2 itself needs less space below it than
   Register.razor's own unwrapped, standalone .auth-form-title headings still do. */
.auth-form-panel .auth-form-title-block .auth-form-title {
    margin: 0 0 4px;
}

/* The tenant's own login page always shows its company name (the h2 above) as the primary
   heading now - this is the secondary "what this page does" line underneath it, not a page
   title of its own (Login_SignInHeading is a short label, e.g. "Sign in" / "تسجيل الدخول"). */
.auth-form-title-action {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #4f46e5;
    text-align: start;
}

.auth-form-panel .field-row {
    margin-top: 0;
    gap: 20px 24px;
}

.auth-form-panel .field-row + .field-row {
    margin-top: 20px;
}

.auth-form-panel .helper-text,
.auth-form-panel .tenant {
    text-align: start;
}

.auth-form-panel .field {
    margin-bottom: 0;
    gap: 6px;
}

/* Scoped to "form > .field" (a direct child of the <form>, e.g. Login's stacked email/password) -
   a bare ".field + .field" would also match the second .field *inside* a .field-row (Register's
   side-by-side email/phone, password/confirm), since adjacent-sibling matching only looks at DOM
   order, not visual layout - that pushed the second column down by 20px and broke the row's
   alignment (confirmed live: the two underlines no longer lined up). */
.auth-form-panel form > .field + .field,
.auth-form-panel .field-row + .field {
    margin-top: 20px;
}

.auth-form-panel .field label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #4a4f66;
    gap: 6px;
}

.auth-form-panel .field label .rzi {
    font-size: 14px;
    color: #4a4f66;
}

.auth-form-panel .field input {
    border: none;
    border-bottom: 1.6px solid #d2d5e0;
    border-radius: 0;
    background: transparent;
    padding: 13px 4px;
    font-size: 18px;
    color: #14181f;
    /* Browsers force direction:ltr (and left-aligned text) on type=tel/email/url/number inputs by
       default, regardless of the page's own dir="rtl" - most visible on the phone field, where the
       Arabic placeholder then renders flush left instead of matching every other field. */
    direction: inherit;
    text-align: start;
}

.auth-form-panel .field input:focus {
    border-color: #14181f;
    box-shadow: none;
}

.auth-form-panel .field input::placeholder {
    color: #adb1c6;
}

.auth-form-panel .validation-message {
    font-size: 12px;
    min-height: 15px;
}

/* Account-type pills (Register only) - purely decorative today; HandleRegisterAsync hard-codes
   InvestorType.Iraqi and never reads these, so there is nothing to bind them to. */
.auth-type-label {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #4a4f66;
}

.auth-type-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 11px;
}

/* .auth-type-pill is applied to <label> elements wrapping a visually-hidden real radio input
   (.auth-type-pill-input below) - real form controls so the investor-type choice round-trips
   through this page's plain static-SSR form POST (no @rendermode here) the same way Email/Phone/
   Password already do, rather than needing JS/interactivity just to pick a pill. The "selected"
   look is driven by :has(:checked) rather than a server-computed CSS class, so clicking a pill
   highlights it immediately even though nothing on this page re-renders until the form is
   actually submitted - :has() reflects the native radio's own checked state (which the browser
   updates on click regardless of interactivity), and also matches whichever pill the server
   rendered as checked on the initial/re-posted page load. */
.auth-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid #e4e6ee;
    background: #ffffff;
    color: #4a4f66;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.auth-type-pill:hover {
    border-color: #4f46e5;
    color: #4f46e5;
}

.auth-type-pill:has(.auth-type-pill-input:checked) {
    border: 1.5px solid #4f46e5;
    background: #4f46e5;
    color: #ffffff;
}

.auth-type-pill-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.auth-form-panel .btn-primary {
    /* Bigger than the other inter-field gaps on purpose - pushes the button (and, immediately
       after it, the sticky-note/footer that sit outside the <form>) down toward the bottom of the
       fixed-height card instead of clustering everything right under the last field. */
    margin-top: 56px;
    padding: 15px;
    border-radius: 12px;
    font-size: 17px;
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.26);
}

.auth-form-panel .btn-primary:active {
    transform: translateY(1px);
}

.auth-form-panel .error-message {
    margin-bottom: 20px;
}

/* Tilted sticky-note confirmation (Register's "check your email" notice) - tape strip at the top,
   folded corner at the bottom, gentle lift on hover. */
.auth-sticky-note {
    position: relative;
    align-self: flex-start;
    width: auto;
    max-width: 340px;
    margin-top: 20px;
    margin-bottom: 0;
    transform: rotate(-1.4deg);
    background: linear-gradient(160deg, #fef08a, #fcdf4d);
    border: none;
    border-radius: 2px 2px 3px 3px;
    padding: 16px 18px 15px;
    box-shadow: 0 10px 20px -8px rgba(133, 110, 10, 0.4), 0 2px 5px rgba(0, 0, 0, 0.09);
    font-size: 12.5px;
    line-height: 1.7;
    color: #6b5a12;
    transition: transform 0.18s ease;
}

.auth-sticky-note:hover {
    transform: rotate(0deg) translateY(-1px);
}

.auth-sticky-note::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 70px;
    height: 18px;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

.auth-sticky-note::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 15px 15px;
    border-color: transparent transparent rgba(120, 100, 10, 0.16) transparent;
}

.auth-form-panel .auth-footer {
    /* margin-top: auto (not a fixed value) - sticks this specifically to the bottom of the fixed-
       height card. The button's own larger margin-top (above) already does the equivalent job for
       everything above the footer, since the button lives inside <form> and can't share a single
       auto-margin flex item with the footer, which lives outside it as a separate sibling. */
    margin-top: auto;
    padding-top: 22px;
    text-align: center;
    font-size: 13px;
    color: #8a8fa3;
    flex: 0 0 auto;
}

.auth-form-panel .auth-footer a {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-form-panel .auth-footer a:hover {
    color: #4338ca;
}

@media (max-width: 759px) {
    .auth-shell-page {
        padding: 0;
    }

    .auth-card-split {
        flex-direction: column;
        width: 100%;
        height: auto;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }

    .auth-brand-panel {
        flex: 0 0 auto;
        align-items: center;
        text-align: center;
        padding: 34px 24px 30px;
        border-bottom: 1px solid #eceef5;
    }

    .auth-brand-lockup {
        margin-top: 0;
        margin-inline-start: 0;
    }

    .auth-brand-lower {
        margin-top: 18px;
    }

    .auth-hero-title {
        font-size: 25px;
        max-width: none;
    }

    .auth-hero-sub {
        margin: 12px auto 0;
        max-width: none;
    }

    .auth-value-props,
    .auth-signature-block {
        display: none;
    }

    .auth-spiral-gutter {
        display: none;
    }

    .auth-form-panel {
        padding: 28px 22px 34px;
        overflow-y: visible;
    }

    .auth-form-panel .auth-form-title {
        font-size: 22px;
        text-align: center;
    }

    .auth-form-title-action {
        text-align: center;
    }

    /* Email/phone and password/confirm stay paired in the same row even at phone width (product
       decision - the design spec this shell is based on stacks them to one column below 760px,
       but that read as broken/misaligned rather than intentional once actually seen on screen). */
    .auth-form-panel .field-row {
        gap: 12px 14px;
    }
}

/* ============================================================
   Home owner dashboard - neomorphism (soft UI). A single soft
   surface (--neo-bg) with elements extruded via a light shadow
   (top-left) + dark shadow (bottom-right); teal is the only
   accent, KYC-status colours appear on the numbers only.
   ============================================================ */
.neo-dash {
    --neo-bg: #e7eaf0;
    --neo-light: #ffffff;
    --neo-dark: #c5cad6;
    background: var(--neo-bg);
    border-radius: 24px;
    padding: 28px;
    color: #3a4256;
    font-family: inherit;
}

.neo-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.neo-greeting {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #2b3242;
}

.neo-subtitle {
    margin: 6px 0 0;
    font-size: 13px;
    color: #7b8296;
}

.neo-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    background: var(--neo-bg);
    box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light);
}

.neo-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.neo-pill-ok {
    color: #0f766e;
}

.neo-pill-ok .neo-pill-dot {
    background: #12b886;
}

.neo-pill-warn {
    color: #b45309;
}

.neo-pill-warn .neo-pill-dot {
    background: #f59e0b;
}

.neo-card {
    background: var(--neo-bg);
    border-radius: 18px;
    box-shadow: 7px 7px 15px var(--neo-dark), -7px -7px 15px var(--neo-light);
}

.neo-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.neo-stat {
    padding: 20px 22px;
}

.neo-stat-value {
    font-size: 30px;
    font-weight: 800;
    color: #2b3242;
    line-height: 1;
}

.neo-stat-label {
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #7b8296;
}

.neo-accent-green { color: #0e9f6e; }
.neo-accent-amber { color: #d97706; }
.neo-accent-red { color: #e02424; }
.neo-accent-muted { color: #8a93a6; }
.neo-accent-teal { color: #0f766e; }

.neo-two-col {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.neo-panel {
    padding: 22px 24px;
}

.neo-panel-title {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 700;
    color: #2b3242;
}

.neo-empty {
    color: #8a93a6;
    font-size: 13px;
    margin: 0;
}

.neo-activity {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.neo-activity li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.neo-activity-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 5px;
    flex: 0 0 auto;
    background: currentColor;
}

.neo-activity-body {
    display: flex;
    flex-direction: column;
}

.neo-activity-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #3a4256;
}

.neo-activity-meta {
    font-size: 11.5px;
    color: #8a93a6;
    margin-top: 2px;
}

.neo-license {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.neo-license > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.neo-license dt {
    margin: 0;
    font-size: 12.5px;
    color: #7b8296;
    font-weight: 600;
}

.neo-license dd {
    margin: 0;
    font-size: 13.5px;
    color: #2b3242;
    font-weight: 700;
}

.neo-panel-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: #0f766e;
    text-decoration: none;
}

.neo-panel-link:hover {
    text-decoration: underline;
}

.neo-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.neo-quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #3a4256;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
}

.neo-quick-link:hover {
    transform: translateY(-1px);
}

.neo-quick-link:active {
    box-shadow: inset 5px 5px 10px var(--neo-dark), inset -5px -5px 10px var(--neo-light);
}

.neo-quick-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f766e;
    background: var(--neo-bg);
    box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light);
}

.neo-quick-icon svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 720px) {
    .neo-two-col {
        grid-template-columns: 1fr;
    }

    .neo-dash {
        padding: 20px;
        border-radius: 0;
    }
}

/* ============================================================
   Home dashboard - redesigned KPI rows, vertical nav panel,
   and a horizontal license bar (neomorphism, same palette).
   ============================================================ */
.neo-kpi-row {
    display: grid;
    gap: 20px;
    margin: 0 auto;
}

.neo-kpi-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 640px;
}

.neo-kpi-secondary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1000px;
    margin-top: 20px;
}

.neo-kpi {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--neo-bg);
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 7px 7px 15px var(--neo-dark), -7px -7px 15px var(--neo-light);
}

.neo-kpi-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neo-bg);
    box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light);
}

.neo-kpi-icon svg {
    width: 22px;
    height: 22px;
}

.neo-kpi-value {
    font-size: 26px;
    font-weight: 800;
    color: #2b3242;
    line-height: 1;
}

.neo-kpi-label {
    font-size: 12.5px;
    color: #7b8296;
    font-weight: 600;
    margin-top: 6px;
}

.neo-kpi-primary .neo-kpi {
    padding: 26px;
    gap: 18px;
}

.neo-kpi-primary .neo-kpi-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
}

.neo-kpi-primary .neo-kpi-icon svg {
    width: 27px;
    height: 27px;
}

.neo-kpi-primary .neo-kpi-value {
    font-size: 36px;
}

.neo-kpi-primary .neo-kpi-label {
    font-size: 14px;
}

.neo-accent-indigo {
    color: #4f46e5;
}

/* Vertical navigation panel (replaces the old license box in the middle row). */
.neo-nav-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.neo-nav-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: #3a4256;
    background: var(--neo-bg);
    box-shadow: 4px 4px 9px var(--neo-dark), -4px -4px 9px var(--neo-light);
    transition: box-shadow .15s, transform .15s;
}

.neo-nav-item:hover {
    transform: translateY(-1px);
}

.neo-nav-item:active {
    box-shadow: inset 4px 4px 8px var(--neo-dark), inset -4px -4px 8px var(--neo-light);
}

.neo-nav-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f766e;
    background: var(--neo-bg);
    box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light);
}

.neo-nav-icon svg {
    width: 18px;
    height: 18px;
}

/* Horizontal license bar (bottom of the dashboard). */
.neo-license-bar {
    margin-top: 20px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 20px 28px;
    flex-wrap: wrap;
}

.neo-license-bar-title {
    font-size: 15px;
    font-weight: 800;
    color: #2b3242;
    flex: 0 0 auto;
}

.neo-license-fields {
    display: flex;
    gap: 18px 34px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.neo-license-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.neo-license-k {
    font-size: 12px;
    color: #7b8296;
    font-weight: 600;
}

.neo-license-v {
    font-size: 14px;
    color: #2b3242;
    font-weight: 700;
}

@media (max-width: 760px) {
    .neo-kpi-primary {
        grid-template-columns: 1fr;
    }

    .neo-kpi-secondary {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* One-row KPIs: an investors circular counter (no icon) + four colour-tinted stat tiles. */
.neo-kpi-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: stretch;
    justify-content: center;
}

.neo-kpi-stats .neo-kpi {
    flex: 1 1 170px;
}

/* Circular investor counter - a different shape from the tiles (number + label inside), stretched
   to the same top/bottom as the tiles in the row (aspect-ratio keeps it a perfect circle). */
.neo-kpi-circle {
    flex: 0 0 auto;
    align-self: stretch;
    aspect-ratio: 1;
    min-width: 96px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px;
    text-align: center;
    background: var(--neo-bg);
    box-shadow: 7px 7px 15px var(--neo-dark), -7px -7px 15px var(--neo-light);
}

.neo-kpi-circle-value {
    font-size: 28px;
    font-weight: 800;
    color: #4f46e5;
    line-height: 1;
}

.neo-kpi-circle-label {
    font-size: 11px;
    font-weight: 700;
    color: #3a4256;
}

/* A distinct background tint per KYC status tile. */
.neo-kpi.neo-kpi-approved { background: #e7f7ef; }
.neo-kpi.neo-kpi-review { background: #fff4e0; }
.neo-kpi.neo-kpi-rejected { background: #fdecec; }
.neo-kpi.neo-kpi-notstarted { background: #eceff6; }

/* On the tinted tiles the icon chip becomes a soft white circle so it reads on any tint. */
.neo-kpi-stats .neo-kpi-icon {
    background: rgba(255, 255, 255, .6);
    box-shadow: none;
}

/* Keep the tile numbers in their accent colour (beats the base .neo-kpi-value colour, which is
   defined earlier in the file). */
.neo-kpi-value.neo-accent-green { color: #0e9f6e; }
.neo-kpi-value.neo-accent-amber { color: #d97706; }
.neo-kpi-value.neo-accent-red { color: #e02424; }
.neo-kpi-value.neo-accent-muted { color: #8a93a6; }

/* Dashboard trend charts (documents + investors growth). */
.neo-trends {
    margin-top: 20px;
}

.neo-trends .neo-two-col {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
}

.neo-range {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 14px;
}

.neo-range-btn {
    padding: 7px 15px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: #5a6478;
    background: var(--neo-bg);
    box-shadow: 3px 3px 7px var(--neo-dark), -3px -3px 7px var(--neo-light);
    transition: color .15s, box-shadow .15s;
}

.neo-range-btn.active {
    color: #0f766e;
    box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light);
}

.neo-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.neo-trend-delta {
    font-size: 12.5px;
    font-weight: 800;
}

.neo-trend-up {
    color: #0e9f6e;
}

.neo-trend-down {
    color: #e02424;
}

.trend-svg {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 6px;
    animation: trend-fade .5s ease-out;
}

.trend-xaxis {
    display: flex;
    justify-content: space-between;
    /* The SVG plots oldest -> newest left-to-right regardless of page direction, so pin the label
       row to LTR too; otherwise RTL swaps the start/end dates relative to the line. */
    direction: ltr;
    margin-top: 6px;
    font-size: 11px;
    color: #8a93a6;
}

.trend-empty {
    padding: 30px 8px;
    text-align: center;
    color: #8a93a6;
    font-size: 13px;
}

@keyframes trend-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .trend-svg {
        animation: none;
    }
}

@media (max-width: 760px) {
    .neo-trends .neo-two-col {
        grid-template-columns: 1fr;
    }
}

/* Navigation panel row: nav column narrower, activity column wider. */
.neo-two-col.neo-two-col-nav {
    grid-template-columns: minmax(210px, 0.85fr) 1.7fr;
    margin-top: 20px;
}

/* Navigation-item affordance: a chevron pinned to the inline-end that points toward the reading
   direction (right in LTR, left in RTL). */
.neo-nav-label {
    min-width: 0;
}

.neo-nav-arrow {
    margin-inline-start: auto;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #9aa2b1;
}

[dir="rtl"] .neo-nav-arrow,
[dir="rtl"] .neo-doc-link svg {
    transform: scaleX(-1);
}

/* Latest documents panel. */
.neo-docs {
    margin-top: 20px;
}

.neo-doc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.neo-doc-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(150, 160, 180, .16);
}

.neo-doc-item:last-child {
    border-bottom: none;
}

.neo-doc-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f766e;
    background: var(--neo-bg);
    box-shadow: inset 3px 3px 6px var(--neo-dark), inset -3px -3px 6px var(--neo-light);
}

.neo-doc-icon svg {
    width: 18px;
    height: 18px;
}

.neo-doc-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.neo-doc-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #2b3242;
    word-break: break-word;
}

.neo-doc-name {
    font-size: 12px;
    color: #7b8296;
    word-break: break-word;
}

.neo-doc-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

.neo-doc-date {
    font-size: 11.5px;
    color: #8a93a6;
}

.neo-doc-link {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa2b1;
}

.neo-doc-link svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 760px) {
    .neo-two-col.neo-two-col-nav {
        grid-template-columns: 1fr;
    }

    .neo-doc-item {
        flex-wrap: wrap;
    }
}