/* ═══════════════════════════════════════════════════════════════════
   RegTechDataHub — Design tokens
   ───────────────────────────────────────────────────────────────────
   Monochrome palette. Two layers:
     1. Clean semantic vars (--bg, --surface, --text, --border …)
     2. Legacy --rth-* aliases so existing components need no edits.
   Bootstrap 5.3 handles its own components via data-bs-theme;
   these vars cover the chrome Bootstrap does not own.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Light (default) ──────────────────────────────────────────────── */
:root,
html[data-theme="light"] {

    /* ── Semantic tokens ── */
    --bg:          #f3f3f3;   /* page canvas — Fluent light gray      */
    --surface:     #ffffff;   /* cards, header, sidebar, inputs       */
    --surface-2:   #f8f9fa;   /* accordion headers, elevated surfaces */
    --text:        #212529;   /* primary body text                    */
    --text-muted:  #6c757d;   /* secondary / placeholder text         */
    --border:      #dee2e6;   /* dividers, input outlines             */
    --border-subtle: #f0f0f0; /* very faint separator lines           */
    --accent:      #0078D4;   /* Fluent blue — active / selected      */
    --accent-bg:   #e8f0fb;   /* tinted background for active items   */
    --focus-ring:  rgba(0, 120, 212, 0.25);

    /* ── Shadows ── */
    --shadow-sm:   0 2px 4px rgba(0, 0, 0, 0.05);  /* header / footer  */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.10);  /* card resting     */
    --shadow-card-hover: 0 4px 10px rgba(0, 0, 0, 0.15);

    /* ── Font ── */
    --font-family: Arial, sans-serif;

    /* ── Chrome (header / sidebar / nav) ── */
    --rth-header-bg:        var(--surface);
    --rth-header-border:    var(--border);
    --rth-brand-color:      #0078D4;
    --rth-user-chip-color:  var(--text-muted);
    --rth-about-link-color: #0078D4;
    --rth-hamburger-color:  var(--text-muted);
    --rth-link-color:       #0078D4;
    --rth-error-bar-bg:     #fef9c3;

    --rth-sidebar-bg:       var(--surface);
    --rth-sidebar-border:   var(--border);
    --rth-nav-link-color:   #333333;
    --rth-nav-active-bg:    var(--accent-bg);
    --rth-nav-active-color: var(--accent);
    --rth-nav-hover-bg:     var(--surface-2);
    --rth-nav-hover-color:  #0078D4;
    --rth-nav-divider:      var(--border);
    --rth-nav-toggle-color: var(--text-muted);
    --rth-main-bg:          var(--bg);
}

/* ── Dark ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] {

    /* ── Surface hierarchy (clearly differentiated) ── */
    --bg:           #111318;   /* page canvas — dark blue-gray, not pure black   */
    --surface:      #1c2030;   /* cards, header, sidebar — noticeably above bg   */
    --surface-2:    #252c3e;   /* accordion headers, row stripes, elevated panels */
    --surface-3:    #2e3650;   /* modals, floating dropdowns — top of the stack  */

    /* ── Text ── */
    --text:         #e2e8f0;   /* primary — warm white with slight blue tint     */
    --text-muted:   #94a3b8;   /* secondary / placeholder                        */
    --text-disabled:#4a5568;   /* disabled controls                              */

    /* ── Borders ── */
    --border:        #374162;  /* dividers, input outlines                       */
    --border-subtle: #1e2333;  /* very faint separators                          */

    /* ── Accent — a proper blue (WCAG AA on dark backgrounds) ── */
    --accent:       #60a5fa;               /* blue-400                           */
    --accent-hover: #93c5fd;               /* blue-300 — hover/active variant    */
    --accent-bg:    rgba(96, 165, 250, 0.12); /* tinted surface                  */
    --focus-ring:   rgba(96, 165, 250, 0.40);

    /* ── Shadows — much stronger than light mode for visible elevation ── */
    --shadow-sm:          0 1px 4px  rgba(0, 0, 0, 0.55);
    --shadow-card:        0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-card-hover:  0 6px 22px rgba(0, 0, 0, 0.60);
    --shadow-elevated:    0 10px 36px rgba(0, 0, 0, 0.70);

    /* ── Chrome (header / sidebar / nav) ── */
    --rth-header-bg:        var(--surface);
    --rth-header-border:    var(--border);
    --rth-brand-color:      var(--text);
    --rth-user-chip-color:  var(--text-muted);
    --rth-about-link-color: var(--accent);
    --rth-hamburger-color:  var(--text-muted);
    --rth-link-color:       var(--accent);
    --rth-error-bar-bg:     #2a1e1e;

    --rth-sidebar-bg:       #161a27;   /* slightly darker than surface            */
    --rth-sidebar-border:   var(--border);
    --rth-nav-link-color:   #cdd9e5;
    --rth-nav-active-bg:    var(--accent-bg);
    --rth-nav-active-color: var(--accent);
    --rth-nav-hover-bg:     rgba(255, 255, 255, 0.06);
    --rth-nav-hover-color:  var(--text);
    --rth-nav-divider:      var(--border);
    --rth-nav-toggle-color: var(--text-muted);
    --rth-main-bg:          var(--bg);
}

/* ── Sidebar nav icons — dark theme fix ──────────────────────────── */
/* Bootstrap font icons inherit color from .nav-link automatically.
   Force both active and inactive states to white so all icons are
   uniformly white in dark mode instead of blue/orange.               */
html[data-theme="dark"] .sidebar-nav .nav-link,
html[data-theme="dark"] .sidebar-nav .nav-link.active,
html[data-theme="dark"] .sidebar-nav a.active {
    color: #ffffff !important;
}

/* Custom SVG background-image icons (person, sign-out) use
   fill='currentColor' which doesn't inherit in bg-image context —
   they render black. Invert only these specific icon spans to white. */
html[data-theme="dark"] .bi-person-circle-nav,
html[data-theme="dark"] .bi-sign-out-nav,
html[data-theme="dark"] .bi-person-nav {
    filter: invert(1);
}

/* ── Brand icon — dark theme fix ─────────────────────────────────── */
/* RegsearchIcon SVG paths use hardcoded fill:rgb(0%,0%,0%) inline styles.
   Override with accent colour so the logo is visible in dark mode.    */
html[data-theme="dark"] .brand-logo svg path {
    fill: var(--accent) !important;
}

/* Brand name text is already driven by --rth-brand-color (var(--text)).
   In dark mode, boost it to the accent colour to match the highlighted icon. */
html[data-theme="dark"] .brand-name {
    color: var(--accent) !important;
}

/* ── Smooth transitions ───────────────────────────────────────────── */
/* Apply to background and color properties for a polished switch.    */
html {
    transition:
        background-color 0.2s ease,
        color            0.2s ease;
}

/* Cards, inputs, sidebar, header — fade their background on switch.  */
.card,
.table,
input, select, textarea,
.modal-content,
.dropdown-menu,
.offcanvas,
.nav-link,
.btn {
    transition:
        background-color 0.2s ease,
        color            0.2s ease,
        border-color     0.2s ease;
}

/* ── Global base styles ───────────────────────────────────────────── */
body {
    background-color: var(--bg);
    color:            var(--text);
    font-family:      var(--font-family, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
}

/* Links */
a          { color: var(--rth-link-color); }
a:hover    { color: var(--rth-link-color); filter: brightness(1.15); }
.btn-link  { color: var(--rth-link-color); }

/* Focus rings */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Cards */
.card {
    background-color: var(--surface);
    border-color:     var(--border);
    color:            var(--text);
    box-shadow:       var(--shadow-card, 0 1px 3px rgba(0,0,0,0.1));
    transition:       background-color 0.2s ease, color 0.2s ease,
                      border-color 0.2s ease, box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: var(--shadow-card-hover, 0 4px 10px rgba(0,0,0,0.15));
}

.card-header,
.card-footer {
    background-color: var(--surface-2);
    border-color:     var(--border);
}

/* Tables */
.table {
    --bs-table-bg:           var(--surface);
    --bs-table-striped-bg:   var(--surface-2);
    --bs-table-hover-bg:     var(--accent-bg);
    --bs-table-border-color: var(--border);
    color: var(--text);
}

/* Form controls */
.form-control,
.form-select {
    background-color: var(--surface);
    border-color:     var(--border);
    color:            var(--text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface);
    border-color:     var(--accent);
    color:            var(--text);
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.form-control::placeholder { color: var(--text-muted); }

/* Dropdowns */
.dropdown-menu {
    background-color: var(--surface);
    border-color:     var(--border);
}

.dropdown-item         { color: var(--text); }
.dropdown-item:hover   { background-color: var(--accent-bg); color: var(--text); }
.dropdown-divider      { border-color: var(--border); }

/* Modals */
.modal-content  { background-color: var(--surface); border-color: var(--border); }
.modal-header,
.modal-footer   { border-color: var(--border); }

/* Badges — neutral monochrome variant */
.badge.bg-secondary { background-color: var(--surface-2) !important; color: var(--text-muted); }

/* Accordion */
.accordion-item         { background-color: var(--surface); border-color: var(--border); }
.accordion-button       { background-color: var(--surface-2); color: var(--text); }
.accordion-button:not(.collapsed) {
    background-color: var(--accent-bg);
    color: var(--accent);
    font-weight: 500;
}
.accordion-body         { background-color: var(--surface); }

/* List groups */
.list-group-item {
    background-color: var(--surface);
    border-color:     var(--border);
    color:            var(--text);
}

.list-group-item-action:hover { background-color: var(--accent-bg); }

/* Navs / Pills */
.nav-pills .nav-link          { color: var(--text-muted); }
.nav-pills .nav-link.active   { background-color: var(--accent); color: var(--bg); }
.nav-tabs  .nav-link          { color: var(--text-muted); border-color: transparent; }
.nav-tabs  .nav-link.active   { background-color: var(--surface); border-color: var(--border) var(--border) var(--surface); color: var(--text); }

/* Buttons — plain monochrome defaults */
.btn-outline-secondary {
    color:        var(--text-muted);
    border-color: var(--border);
}
.btn-outline-secondary:hover {
    background-color: var(--accent-bg);
    color:            var(--text);
    border-color:     var(--border);
}

/* ═══════════════════════════════════════════════════════════════════
   Login page  (Login.razor + LoginLayout.razor)
   Light values are the default; dark overrides follow each block.
   The brand header stays dark in both themes for visual consistency.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page background ─────────────────────────────────────────────── */
/* login-layout-root is no longer used — Login now uses MainLayout */
.login-layout-root { display: contents; }

/* Fixed overlay below the 3.5rem app header */
.login-viewport {
    position: fixed;
    top: 3.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    background: linear-gradient(150deg, #dce4f0 0%, #eef2f9 50%, #dce4f0 100%);
}

html[data-theme="dark"] .login-viewport {
    background: linear-gradient(150deg, #1a1e2e 0%, #232a3e 50%, #1a1e2e 100%);
}

/* ── Card shell ──────────────────────────────────────────────────── */
.login-card {
    position:      relative;
    width:         100%;
    max-width:     420px;
    background:    #ffffff;
    border:        1px solid rgba(0, 0, 0, 0.10);
    border-radius: 16px;
    overflow:      hidden;
    box-shadow:    0 24px 64px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .login-card {
    background:  #1e2535;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:  0 24px 64px rgba(0, 0, 0, 0.45);
}

/* ── Brand header — intentionally dark in both themes ───────────── */
.login-header {
    padding:       2rem 2rem 1.6rem;
    text-align:    center;
    background:    linear-gradient(135deg, #0a1628 0%, #1a3a6b 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* SVG has hardcoded black fill — invert so it shows white on dark header */
.login-brand-icon {
    width:         48px;
    height:        44px;
    margin:        0 auto 0.85rem;
    display:       flex;
    align-items:   center;
    justify-content: center;
    filter:        invert(1) brightness(1.4);
}

.login-brand-icon svg {
    width:  48px;
    height: 44px;
}

.login-title {
    color:          #e2e8f0;
    font-size:      1.5rem;
    font-weight:    700;
    margin-bottom:  0.2rem;
    letter-spacing: 0.04em;
}

.login-subtitle {
    color:          rgba(255, 255, 255, 0.4);
    font-size:      0.78rem;
    margin:         0;
    letter-spacing: 0.02em;
}

/* ── Close / back button (lives on dark header → always white) ───── */
.login-close {
    position:        absolute;
    top:             0.75rem;
    right:           0.85rem;
    width:           2rem;
    height:          2rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           rgba(255, 255, 255, 0.45);
    border-radius:   50%;
    text-decoration: none;
    font-size:       0.8rem;
    transition:      color 0.15s ease, background-color 0.15s ease;
    z-index:         1;
}

.login-close:hover {
    color:            rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.12);
}

/* ── Form body ───────────────────────────────────────────────────── */
.login-body {
    padding: 1.75rem 2rem 2rem;
}

/* ── Labels ─────────────────────────────────────────────────────── */
.login-label {
    display:        block;
    color:          #4a5568;
    font-size:      0.83rem;
    font-weight:    600;
    margin-bottom:  0.4rem;
    letter-spacing: 0.02em;
}

html[data-theme="dark"] .login-label {
    color: #94a3b8;
}

/* ── Text inputs ─────────────────────────────────────────────────── */
.login-input {
    background:    #f8f9fa !important;
    border:        1px solid #ced4da !important;
    color:         #212529 !important;
    border-radius: 8px !important;
    transition:    border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-input::placeholder {
    color: rgba(0, 0, 0, 0.28) !important;
}

.login-input:focus {
    background:  #ffffff !important;
    border-color: #0078D4 !important;
    box-shadow:  0 0 0 0.2rem rgba(0, 120, 212, 0.18) !important;
    color:       #212529 !important;
}

html[data-theme="dark"] .login-input {
    background:   #252d45 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color:        #e2e8f0 !important;
}

html[data-theme="dark"] .login-input::placeholder {
    color: rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="dark"] .login-input:focus {
    background:   #252d45 !important;
    border-color: #4f8ef7 !important;
    box-shadow:   0 0 0 0.2rem rgba(79, 142, 247, 0.2) !important;
    color:        #e2e8f0 !important;
}

/* ── Password show/hide ─────────────────────────────────────────── */
.password-wrapper {
    position: relative;
}

.password-wrapper .login-input {
    padding-right: 2.75rem;
}

.password-toggle {
    position:   absolute;
    right:      0.55rem;
    top:        50%;
    transform:  translateY(-50%);
    background: none;
    border:     none;
    color:      rgba(0, 0, 0, 0.35);
    cursor:     pointer;
    padding:    0.25rem 0.3rem;
    line-height: 1;
    display:    flex;
    align-items: center;
    border-radius: 4px;
    transition: color 0.15s ease;
}

.password-toggle:hover { color: rgba(0, 0, 0, 0.7); }

html[data-theme="dark"] .password-toggle       { color: rgba(255, 255, 255, 0.35); }
html[data-theme="dark"] .password-toggle:hover { color: rgba(255, 255, 255, 0.7); }

/* ── Remember me ────────────────────────────────────────────────── */
.login-check {
    background-color: #ffffff;
    border-color:     #ced4da;
    cursor:           pointer;
    flex-shrink:      0;
}

.login-check:checked {
    background-color: #0078D4;
    border-color:     #0078D4;
}

html[data-theme="dark"] .login-check          { background-color: #252d45; border-color: rgba(255,255,255,0.2); }
html[data-theme="dark"] .login-check:checked  { background-color: #4f8ef7; border-color: #4f8ef7; }

.login-check-label {
    color:       #6c757d;
    font-size:   0.83rem;
    cursor:      pointer;
    user-select: none;
}

html[data-theme="dark"] .login-check-label { color: #94a3b8; }

/* ── Sign in button ─────────────────────────────────────────────── */
.login-btn {
    background-color: #0078D4;
    border-color:     #0078D4;
    color:            #ffffff;
    border-radius:    8px;
    font-size:        0.95rem;
    letter-spacing:   0.4px;
    transition:       background-color 0.2s ease, border-color 0.2s ease;
}

.login-btn:hover  { background-color: #005ba1; border-color: #005ba1; color: #ffffff; }
.login-btn:focus  { box-shadow: 0 0 0 0.2rem rgba(0, 120, 212, 0.35); }

html[data-theme="dark"] .login-btn        { background-color: #4f8ef7; border-color: #4f8ef7; }
html[data-theme="dark"] .login-btn:hover  { background-color: #3a7ae8; border-color: #3a7ae8; color: #ffffff; }
html[data-theme="dark"] .login-btn:focus  { box-shadow: 0 0 0 0.2rem rgba(79, 142, 247, 0.35); }

/* ═══════════════════════════════════════════════════════════════════
   Dark-mode component overrides
   These fix gaps where Bootstrap's own CSS doesn't pick up our vars.
   Scoped to [data-theme="dark"] so they never touch the light theme.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Accordion ────────────────────────────────────────────────────── */
/* Bootstrap's chevron arrow is a dark SVG — override with a light one */
html[data-theme="dark"] .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2360a5fa'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Ensure accordion items have a visible border between them */
html[data-theme="dark"] .accordion-item {
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
    box-shadow: inset 0 -1px 0 var(--border);
}

/* ── Buttons ──────────────────────────────────────────────────────── */
/* Bootstrap .btn-primary / .btn-secondary etc. use their own vars.
   Override here for any that look washed-out in dark mode.           */
html[data-theme="dark"] .btn-primary {
    --bs-btn-bg:           #2563eb;
    --bs-btn-border-color: #1d4ed8;
    --bs-btn-color:        #ffffff;
    --bs-btn-hover-bg:     #1d4ed8;
    --bs-btn-hover-border-color: #1e40af;
    --bs-btn-active-bg:    #1e40af;
}

html[data-theme="dark"] .btn-secondary {
    --bs-btn-bg:           var(--surface-2);
    --bs-btn-border-color: var(--border);
    --bs-btn-color:        var(--text);
    --bs-btn-hover-bg:     var(--surface-3);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color:  var(--text);
    --bs-btn-active-bg:    var(--surface-3);
}

html[data-theme="dark"] .btn-light {
    --bs-btn-bg:           var(--surface-2);
    --bs-btn-border-color: var(--border);
    --bs-btn-color:        var(--text);
    --bs-btn-hover-bg:     var(--surface-3);
    --bs-btn-hover-color:  var(--text);
}

html[data-theme="dark"] .btn-dark {
    --bs-btn-bg:           var(--surface-3);
    --bs-btn-border-color: var(--border);
    --bs-btn-color:        var(--text);
    --bs-btn-hover-bg:     #3a4258;
    --bs-btn-hover-color:  var(--text);
}

html[data-theme="dark"] .btn-outline-primary {
    --bs-btn-color:        var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg:     var(--accent-bg);
    --bs-btn-hover-color:  var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-bg:    var(--accent-bg);
    --bs-btn-active-color: var(--accent);
}

html[data-theme="dark"] .btn-outline-light,
html[data-theme="dark"] .btn-outline-dark {
    --bs-btn-color:        var(--text);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg:     var(--surface-2);
    --bs-btn-hover-color:  var(--text);
    --bs-btn-hover-border-color: var(--border);
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Tables ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .table {
    --bs-table-color:         var(--text);
    --bs-table-bg:            var(--surface);
    --bs-table-striped-bg:    var(--surface-2);
    --bs-table-hover-bg:      var(--accent-bg);
    --bs-table-border-color:  var(--border);
    --bs-table-striped-color: var(--text);
    --bs-table-hover-color:   var(--text);
    --bs-table-active-bg:     var(--accent-bg);
    --bs-table-active-color:  var(--text);
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table > thead > tr > th {
    background-color: var(--surface-2);
    color: var(--text);
    border-bottom-color: var(--border);
}

html[data-theme="dark"] .table-dark {
    --bs-table-bg:            var(--surface-3);
    --bs-table-border-color:  var(--border);
    --bs-table-striped-bg:    var(--surface-2);
    --bs-table-hover-bg:      var(--accent-bg);
    --bs-table-color:         var(--text);
}

/* ── Modals ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .modal-content {
    background-color: var(--surface);
    border-color:     var(--border);
    box-shadow:       var(--shadow-elevated);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    background-color: var(--surface-2);
    border-color:     var(--border);
}

html[data-theme="dark"] .modal-title {
    color: var(--text);
}

/* ── Dropdowns ────────────────────────────────────────────────────── */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface-3);
    border-color:     var(--border);
    box-shadow:       var(--shadow-elevated);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--accent-bg);
    color:            var(--text);
}

html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] .dropdown-item:active {
    background-color: var(--accent);
    color:            #ffffff;
}

html[data-theme="dark"] .dropdown-header {
    color: var(--text-muted);
}

html[data-theme="dark"] .dropdown-divider {
    border-color: var(--border);
}

/* ── Forms ────────────────────────────────────────────────────────── */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--surface-2);
    border-color:     var(--border);
    color:            var(--text);
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled {
    background-color: var(--surface);
    color:            var(--text-disabled);
    border-color:     var(--border-subtle);
}

html[data-theme="dark"] .input-group-text {
    background-color: var(--surface-2);
    border-color:     var(--border);
    color:            var(--text-muted);
}

html[data-theme="dark"] .form-check-input {
    background-color: var(--surface-2);
    border-color:     var(--border);
}

html[data-theme="dark"] .form-check-input:checked {
    background-color: var(--accent);
    border-color:     var(--accent);
}

html[data-theme="dark"] .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

html[data-theme="dark"] .form-label,
html[data-theme="dark"] label {
    color: var(--text);
}

html[data-theme="dark"] .form-text {
    color: var(--text-muted);
}

/* ── Badges ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .badge.bg-light {
    background-color: var(--surface-2) !important;
    color:            var(--text) !important;
}

html[data-theme="dark"] .badge.bg-dark {
    background-color: var(--surface-3) !important;
    color:            var(--text) !important;
}

html[data-theme="dark"] .badge.bg-secondary {
    background-color: var(--surface-2) !important;
    color:            var(--text-muted) !important;
}

/* ── Nav Tabs ─────────────────────────────────────────────────────── */
html[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border);
}

html[data-theme="dark"] .nav-tabs .nav-link {
    color:        var(--text-muted);
    border-color: transparent;
}

html[data-theme="dark"] .nav-tabs .nav-link:hover {
    color:        var(--text);
    border-color: var(--border) var(--border) transparent;
    background-color: var(--surface-2);
}

html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--surface);
    border-color:     var(--border) var(--border) var(--surface);
    color:            var(--text);
}

html[data-theme="dark"] .nav-pills .nav-link {
    color: var(--text-muted);
}

html[data-theme="dark"] .nav-pills .nav-link:hover {
    background-color: var(--surface-2);
    color:            var(--text);
}

html[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--accent);
    color:            #111318;
}

/* ── List Groups ──────────────────────────────────────────────────── */
html[data-theme="dark"] .list-group-item {
    background-color: var(--surface);
    border-color:     var(--border);
    color:            var(--text);
}

html[data-theme="dark"] .list-group-item-action:hover {
    background-color: var(--accent-bg);
    color:            var(--text);
}

html[data-theme="dark"] .list-group-item.active {
    background-color: var(--accent);
    border-color:     var(--accent);
    color:            #111318;
}

/* ── Tooltips ─────────────────────────────────────────────────────── */
html[data-theme="dark"] .tooltip-inner {
    background-color: var(--surface-3);
    color:            var(--text);
    border:           1px solid var(--border);
}

html[data-theme="dark"] .tooltip.bs-tooltip-top    .tooltip-arrow::before { border-top-color:    var(--surface-3); }
html[data-theme="dark"] .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--surface-3); }
html[data-theme="dark"] .tooltip.bs-tooltip-start  .tooltip-arrow::before { border-left-color:   var(--surface-3); }
html[data-theme="dark"] .tooltip.bs-tooltip-end    .tooltip-arrow::before { border-right-color:  var(--surface-3); }

/* ── Popovers ─────────────────────────────────────────────────────── */
html[data-theme="dark"] .popover {
    background-color: var(--surface-3);
    border-color:     var(--border);
    box-shadow:       var(--shadow-elevated);
}

html[data-theme="dark"] .popover-header {
    background-color: var(--surface-2);
    border-bottom-color: var(--border);
    color:            var(--text);
}

html[data-theme="dark"] .popover-body {
    color: var(--text);
}

/* ── Offcanvas ────────────────────────────────────────────────────── */
html[data-theme="dark"] .offcanvas {
    background-color: var(--surface);
    border-color:     var(--border);
    color:            var(--text);
}

html[data-theme="dark"] .offcanvas-header {
    border-bottom-color: var(--border);
}

/* ── Progress ─────────────────────────────────────────────────────── */
html[data-theme="dark"] .progress {
    background-color: var(--surface-2);
}

/* ── Alerts ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .alert-info {
    background-color: rgba(96, 165, 250, 0.12);
    border-color:     rgba(96, 165, 250, 0.30);
    color:            #93c5fd;
}

html[data-theme="dark"] .alert-warning {
    background-color: rgba(251, 191, 36, 0.12);
    border-color:     rgba(251, 191, 36, 0.30);
    color:            #fcd34d;
}

html[data-theme="dark"] .alert-danger {
    background-color: rgba(248, 113, 113, 0.12);
    border-color:     rgba(248, 113, 113, 0.30);
    color:            #fca5a5;
}

html[data-theme="dark"] .alert-success {
    background-color: rgba(74, 222, 128, 0.12);
    border-color:     rgba(74, 222, 128, 0.30);
    color:            #86efac;
}

html[data-theme="dark"] .alert-light {
    background-color: var(--surface-2);
    border-color:     var(--border);
    color:            var(--text);
}

html[data-theme="dark"] .alert-dark {
    background-color: var(--surface-3);
    border-color:     var(--border);
    color:            var(--text);
}

/* ── Pagination ───────────────────────────────────────────────────── */
html[data-theme="dark"] .page-link {
    background-color: var(--surface);
    border-color:     var(--border);
    color:            var(--accent);
}

html[data-theme="dark"] .page-link:hover {
    background-color: var(--accent-bg);
    border-color:     var(--border);
    color:            var(--accent);
}

html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--accent);
    border-color:     var(--accent);
    color:            #111318;
}

html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--surface);
    border-color:     var(--border);
    color:            var(--text-disabled);
}

/* ── Breadcrumbs ──────────────────────────────────────────────────── */
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

html[data-theme="dark"] .breadcrumb-item a {
    color: var(--accent);
}

html[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-muted);
}

/* ── Card additional selectors ────────────────────────────────────── */
html[data-theme="dark"] .card {
    border-color: var(--border);
    box-shadow:   var(--shadow-card);
}

html[data-theme="dark"] .card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* ── Horizontal rules ─────────────────────────────────────────────── */
html[data-theme="dark"] hr {
    border-color: var(--border);
    opacity: 1;
}

/* ── Spinners (inherit text color) ───────────────────────────────── */
html[data-theme="dark"] .spinner-border,
html[data-theme="dark"] .spinner-grow {
    color: var(--accent);
}

/* ── Custom scrollbars (Chromium/Edge) ───────────────────────────── */
html[data-theme="dark"] ::-webkit-scrollbar {
    width:  8px;
    height: 8px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background:    var(--border);
    border-radius: 4px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ── Selection highlight ──────────────────────────────────────────── */
html[data-theme="dark"] ::selection {
    background-color: rgba(96, 165, 250, 0.30);
    color:            var(--text);
}

/* ═══════════════════════════════════════════════════════════════════
   Dashboard page
   Covers Dashboard.razor + DashboardCard.razor (child component).
   All colours resolve through CSS variables so both themes are
   handled here with zero page-specific CSS files needed.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layout ───────────────────────────────────────────────────────── */
.dashboard-container {
    padding: 0.25rem 0 1.5rem;
}

.dashboard-section {
    margin-bottom: 0.5rem;
}

/* ── Section heading ──────────────────────────────────────────────── */
.dashboard-section-title {
    font-size:     0.78rem;
    font-weight:   700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--text-muted);
    border-bottom:  1px solid var(--border);
    padding-bottom: 0.45rem;
    margin-bottom:  1rem;
}

/* ── Card link wrapper ────────────────────────────────────────────── */
/* Replaces Bootstrap's text-dark (hardcoded, invisible in dark mode).*/
/* height: 100% is required so the stretch from Bootstrap's flexbox   */
/* row flows correctly:  .col  →  .dashboard-card-link  →  .card.    */
/* Without it, the <a> only grows to its own content height and cards */
/* with more text become taller than their siblings in the same row.  */
.dashboard-card-link {
    display:         block;
    height:          100%;
    text-decoration: none;
    color:           inherit;
}

.dashboard-card-link:hover,
.dashboard-card-link:focus {
    text-decoration: none;
    color:           inherit;
}

/* ── Card ─────────────────────────────────────────────────────────── */
.dashboard-card {
    height:          100%;
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    padding:         1.2rem;
    border-radius:   10px;
    border:          1px solid var(--border);
    background:      var(--surface);
    box-shadow:      var(--shadow-card);
    transition:      transform      0.22s ease,
                     box-shadow     0.22s ease,
                     border-color   0.22s ease,
                     background     0.2s  ease;
}

.dashboard-card:hover {
    transform:    translateY(-3px);
    box-shadow:   var(--shadow-card-hover);
    border-color: var(--accent);
}

/* Card title row */
.dashboard-card h5 {
    display:       flex;
    align-items:   center;
    font-size:     1.0rem;
    font-weight:   600;
    margin-bottom: 0.45rem;
    color:         var(--text);
    line-height:   1.3;
}

/* Icon inside the title */
.dashboard-card h5 i,
.dashboard-card h5 .bi {
    font-size:   1.25rem;
    color:       var(--accent);
    flex-shrink: 0;
    transition:  color 0.2s ease, filter 0.2s ease;
}

.dashboard-card:hover h5 i,
.dashboard-card:hover h5 .bi {
    filter: brightness(1.18);
}

/* Description */
.dashboard-card p {
    font-size:   0.88rem;
    color:       var(--text-muted);
    margin:      0;
    line-height: 1.45;
}

/* ── Disabled state ───────────────────────────────────────────────── */
.disabled-card {
    opacity: 0.45;
    cursor:  not-allowed;
}

/* Prevent the hover lift on disabled cards */
.disabled-card:hover {
    transform:    none;
    box-shadow:   var(--shadow-card);
    border-color: var(--border);
}

/* ── "Coming soon" tooltip on disabled cards ──────────────────────── */
.disabled-tooltip {
    position: relative;
    display:  block;
}

.disabled-tooltip::after {
    content:        attr(data-tooltip);
    position:       absolute;
    top:            50%;
    left:           50%;
    transform:      translate(-50%, -150%);
    background:     var(--surface-3);
    color:          var(--text);
    border:         1px solid var(--border);
    padding:        5px 10px;
    border-radius:  6px;
    font-size:      0.82rem;
    white-space:    nowrap;
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.15s ease-in-out;
    z-index:        50;
    box-shadow:     var(--shadow-elevated, 0 8px 24px rgba(0, 0, 0, 0.4));
}

.disabled-tooltip:hover::after {
    opacity: 1;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .dashboard-card { padding: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   MifidLookup page + child components
   Covers: MifidLookup.razor, AccordionItem.razor,
           ChildAccordionItem.razor, AccordionItemUnknownInstrument.razor,
           NonEquityTable.razor
   All colours use CSS variables — no hardcoded light/dark values.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Per-result row: download button column ───────────────────────── */
.mifid-btn-col {
    height:          6vh;
    display:         flex;
    align-items:     center;
}

.mifid-btn-sticky {
    position: sticky;
    top:      1rem;
}

.mifid-download-btn {
    border-width:  2px;
    border-radius: 4px;
}

.mifid-result-col {
    min-height: 60px;
}

/* ── Unknown-instrument accordion: error border ───────────────────── */
.mifid-accordion-error-btn {
    border:        4px solid #dc3545 !important;   /* danger red — intentional, theme-independent */
    border-radius: 4px !important;
}

/* ── Navigation icon spans (CFI / MIC / FIRDS drill-through) ─────── */
.mifid-nav-icon {
    cursor: pointer;
}

/* ── Non-Equity Calculation table ─────────────────────────────────── */
/* Replaces the hardcoded <style> block in NonEquityTable.razor.       */
/* The old #f2f2f2 header was unreadable in dark mode; now uses        */
/* surface tokens for automatic light/dark adaptation.                 */
.custom-table-wrapper {
    width:      100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;   /* smooth momentum scroll on iOS */
}

.custom-table {
    border-collapse: collapse;
    width:           100%;
    min-width:       420px;   /* prevents columns from collapsing too narrow */
}

.custom-table th,
.custom-table td {
    border:  1px solid var(--border);
    padding: 8px 12px;
}

.custom-table th {
    background-color: var(--surface-2);
    color:            var(--text-muted);
    font-weight:      600;
    font-size:        0.82rem;
    letter-spacing:   0.06em;
    text-transform:   uppercase;
}

.custom-table td {
    background-color: var(--surface);
    color:            var(--text);
}

.custom-table tbody tr:hover td {
    background-color: var(--accent-bg);
}

/* Right-align numeric columns (Pre-Trade / Post-Trade) */
.custom-table th:nth-child(2),
.custom-table th:nth-child(3),
.custom-table td:nth-child(2),
.custom-table td:nth-child(3) {
    text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════
   ToTV Lifecycle page  (ToTvLookup.razor)
   All colours use CSS variables — adapts to light and dark themes.
   Fixed dark-theme bugs: timeline-content, evaluation-date, date span,
   totv-info-note, and the text-black evaluation link were all hardcoded
   light colours that became invisible on dark backgrounds.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page info note (top-right coverage notice) ───────────────────── */
.totv-info-note {
    max-width:   420px;
    align-self:  flex-start;
    background:  var(--surface-2);
    border-left: 4px solid var(--accent);
    padding:     10px 14px;
    border-radius: 6px;
    font-size:   0.85rem;
    color:       var(--text-muted);
    box-shadow:  var(--shadow-sm);
}

.totv-info-note .info-title {
    font-weight:   600;
    font-size:     0.85rem;
    color:         var(--accent);
    margin-bottom: 4px;
}

.totv-info-note .info-body {
    line-height: 1.4;
}

/* ── Loading spinner size ─────────────────────────────────────────── */
.totv-spinner {
    width:  3rem;
    height: 3rem;
}

/* ── Authority badges (ESMA / FCA_UK) ────────────────────────────── */
/* Background colours are brand colours — intentional, theme-independent */
.tag-badge {
    display:       inline-block;
    padding:       0.15em 0.55em;
    font-size:     0.75rem;
    font-weight:   600;
    color:         #fff;
    border-radius: 0.5rem;
}

.tag-badge.badge-success { background-color: #28a745; }
.tag-badge.badge-danger  { background-color: #dc3545; }

.tag-badge.badge-esma {
    background-color: #00379F;   /* ESMA brand blue */
    color:        #ffffff !important;
    font-size:    1rem;
    font-weight:  700;
    padding:      0.15em 0.5em;
}

.tag-badge.badge-fca {
    background-color: #6C1D45;   /* FCA brand purple */
    color:        #ffffff !important;
    font-size:    1rem;
    font-weight:  700;
    padding:      0.15em 0.5em;
    border-radius: 0.5rem;
}

/* ── Vertical timeline ────────────────────────────────────────────── */
.timeline {
    position:     relative;
    margin-left:  20px;
    padding-left: 20px;
    border-left:  3px solid var(--accent);   /* was hardcoded #007bff */
}

.timeline-item {
    position:      relative;
    margin-bottom: 1.5rem;
    padding-left:  10px;
}

/* Coloured dot — background is set inline from ev.Color (brand colour) */
.timeline-marker {
    position:      absolute;
    left:          -11px;
    top:           4px;
    width:         14px;
    height:        14px;
    border-radius: 50%;
    border:        2px solid var(--surface);   /* adapts so dot stands out on bg */
    box-shadow:    0 0 4px rgba(0, 0, 0, 0.35);
}

.timeline-content {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 10px 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

    .timeline-content h6 {
        font-weight: 600;
    }

.timeline-details .label {
    display: inline-block;
    min-width: 120px;
    font-weight: 500;
}

.timeline-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* ── Timeline content card ────────────────────────────────────────── */
/* Was background: #f8f9fa — hardcoded light.  In dark mode this       */
/* produced a light-coloured card with light text → completely invisible*/
.timeline-content {
    background:    var(--surface-2);   /* ← THE key dark-theme fix    */
    color:         var(--text);
    border:        1px solid var(--border);
    border-radius: 6px;
    padding:       10px 15px;
    box-shadow:    var(--shadow-sm);
}

.timeline-content h6 { font-weight: 600; }

/* ── Label / date text inside timeline ───────────────────────────── */
.timeline-details .label {
    display:    inline-block;
    min-width:  120px;
    font-weight: 500;
    color:      var(--text);
}

.label.totv {
    min-width:    auto;
    margin-right: 2px;
}

/* was color:#555 — invisible in dark mode */
.date {
    font-family: monospace;
    color:       var(--text-muted);
}

/* ── Future-date highlight ────────────────────────────────────────── */
/* Red semantic colour — kept intentional; bg softened for dark mode   */
.date-future {
    background-color: rgba(220, 53, 69, 0.12);
    color:            #f87171;   /* lighter red, readable on dark      */
    padding:          2px 6px;
    border-radius:    4px;
    display:          inline-block;
    margin-bottom:    2px;
    border:           1px solid rgba(220, 53, 69, 0.25);
}

/* Light-mode override: stronger red on light bg */
html[data-theme="light"] .date-future {
    background-color: #fdecea;
    color:            #b42318;
    border:           none;
}

.future-note {
    color:       #f87171;
    font-size:   0.75em;
    margin:      0;
    line-height: 1.2;
}

.future-inline {
    color:      #f87171;
    font-size:  0.75em;
    margin-left: 6px;
    opacity:     0.85;
}

html[data-theme="light"] .future-note,
html[data-theme="light"] .future-inline { color: #b42318; }

/* ── Evaluation date pill (top-right of each timeline item) ──────── */
/* Was background:#e9ecef color:#495057 — hardcoded light             */
.evaluation-date {
    position:       absolute;
    top:            0.4rem;
    right:          0.75rem;
    font-size:      0.75rem;
    background:     var(--surface-3);   /* elevated surface — visible on both themes */
    color:          var(--text-muted);
    padding:        3px 8px;
    border-radius:  12px;
    border:         1px solid var(--border);
    letter-spacing: 0.02em;
    pointer-events: auto;
    transition:     background-color 0.2s ease, color 0.2s ease,
                    box-shadow 0.2s ease, transform 0.15s ease;
}

.evaluation-date:hover,
.evaluation-date:focus-within {
    background: #ffc107;
    color:      #212529;
    box-shadow: 0 4px 10px rgba(251, 191, 36, 0.35);
    transform:  translateY(-1px);
}

.evaluation-date i {
    margin-left: 4px;
    transition:  transform 0.2s ease;
}

.evaluation-date:hover i { transform: translateX(2px); }

/* ── Evaluation link span inside the date pill ───────────────────── */
/* Replaces Bootstrap text-black (always black, invisible in dark)    */
/* and inline style="cursor:pointer"                                  */
.totv-eval-link {
    cursor: pointer;
    color:  var(--text);
}

.evaluation-date:hover .totv-eval-link,
.evaluation-date:focus-within .totv-eval-link {
    color: #212529;   /* dark text on the amber hover bg */
}

/* ── Horizontal timeline scroll container ────────────────────────── */
.timeline-scroll {
    overflow:      visible;   /* scrolling is handled inside TimelineCanvas */
    padding-bottom: 6px;
    border-bottom:  1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════
   MicLookup page  (MicLookup.razor)
   Layout rules and theme-aware colours. The hardcoded accordion-button
   colour overrides that were in the page <style> block are intentionally
   NOT reproduced here — the global accordion rules in themes.css handle
   both themes correctly once the page-level overrides are gone.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fade-in entrance animation ───────────────────────────────────── */
.fade-in { animation: fadeIn 0.5s ease-in; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Result card ──────────────────────────────────────────────────── */
.firds-card {
    transition:    all 0.3s ease-in-out;
    border-radius: 0.5rem;
}

.firds-card:hover {
    transform:  translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

/* Semi-transparent white text used on the bg-dark card header */
.text-light-50 { color: rgba(255, 255, 255, 0.6) !important; }

/* Diff / mismatch badge */
.diff-badge {
    background-color: #ffc107;   /* amber — intentional semantic colour */
    color:            #000;
    border-radius:    0.25rem;
    font-size:        0.75rem;
    padding:          0.1rem 0.4rem;
    margin-left:      0.3rem;
}

/* ── Side-by-side equal-height accordion columns ──────────────────── */
.accordion-columns.equal-height {
    display:     flex;
    flex-wrap:   wrap;
    align-items: stretch;
    gap:         1rem;
}

.accordion-column {
    flex:           1 1 48%;
    min-width:      320px;
    display:        flex;
    flex-direction: column;
}

.accordion-item.h-100 {
    display:        flex;
    flex-direction: column;
    height:         100%;
}

.accordion-collapse.collapse.show,
.accordion-collapse.collapse {
    flex-grow: 1;
}

@media (max-width: 768px) {
    .accordion-columns.equal-height { flex-direction: column; }
}

/* ── Registered Activities table — dark mode fix ──────────────────── */
/* Bootstrap's thead.table-dark forces #212529 bg + white text via its */
/* own CSS variables. In dark mode the header blends into surrounding  */
/* dark surfaces. We override with our elevated surface token so the   */
/* header is visually distinct in both themes.                         */
html[data-theme="dark"] .table-dark,
html[data-theme="dark"] thead.table-dark {
    --bs-table-bg:     var(--surface-3);
    --bs-table-color:  var(--text);
    --bs-table-border-color: var(--border);
}

html[data-theme="dark"] thead.table-dark th {
    background-color: var(--surface-3) !important;
    color:            var(--text)      !important;
    border-color:     var(--border);
}

/* ── Session disconnected overlay (reconnectHandler.js) ───────────── */
#rtdh-session-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: rtdh-fade-in 0.3s ease;
}

@keyframes rtdh-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.rtdh-session-box {
    background:    var(--surface);
    color:         var(--text);
    border:        1px solid var(--border);
    border-radius: 14px;
    padding:       2.5rem 3rem;
    max-width:     440px;
    width:         90%;
    text-align:    center;
    box-shadow:    0 12px 40px rgba(0, 0, 0, 0.35);
}

.rtdh-session-icon-wrap { margin-bottom: 1.25rem; }
.rtdh-session-icon      { font-size: 3rem; color: var(--accent); opacity: 0.75; }
.rtdh-session-title     { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.75rem; }
.rtdh-session-msg       { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 1.75rem; line-height: 1.6; }
.rtdh-session-footer    { font-size: 0.88rem; color: var(--text-muted); }

/* ── Session Expired page ─────────────────────────────────────────── */
.session-expired-container {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--bg);
    padding:         1.5rem;
}

.session-expired-card {
    background:    var(--surface);
    color:         var(--text);
    border:        1px solid var(--border);
    border-radius: 14px;
    padding:       3rem 3rem 2.5rem;
    max-width:     480px;
    width:         100%;
    text-align:    center;
    box-shadow:    0 4px 24px rgba(0, 0, 0, 0.12);
}

.session-expired-icon-wrap  { margin-bottom: 1.5rem; }
.session-expired-icon       { font-size: 3.5rem; color: var(--accent); opacity: 0.75; }
.session-expired-heading    { font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; }
.session-expired-body       { color: var(--text-muted); margin-bottom: 2rem; line-height: 1.65; font-size: 0.95rem; }
.session-expired-btn        { min-width: 160px; }

/* ═══════════════════════════════════════════════════════════════════
   InstrumentReportable page  (InstrumentReportable.razor + InstrumentReportableCard.razor)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Table icon sizing (used in value cells) ──────────────────────── */
.ir-modern-table i {
    font-size:      0.9rem;
    vertical-align: -1px;
}

/* ── Page layout ──────────────────────────────────────────────────── */
.ir-page-container {
    max-width: 1400px;
    margin: auto;
}

/* ── Search card ──────────────────────────────────────────────────── */
.ir-search-card {
    border-radius: 12px;
    border: none;
    box-shadow: var(--shadow-card);
    background: var(--surface);
}

/* Disabled select — make it readable in both themes */
.ir-search-card select:disabled,
select.form-select:disabled {
    opacity: 1;
    color:            var(--text-muted);
    background-color: var(--surface-2);
    border-color:     var(--border);
    cursor: not-allowed;
}

/* ── Result card ──────────────────────────────────────────────────── */
.ir-result-card {
    border: none;
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    background: var(--surface);
    color: var(--text);
    transition: all 0.2s ease-in-out;
}

.ir-result-card:hover {
    transform:  translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* ── Card header (gradient band with ISIN/status) ─────────────────── */
.ir-result-header {
    background:    linear-gradient(90deg, #212529, #343a40);
    color:         #ffffff;
    border-radius: 12px 12px 0 0;
    padding:       12px 18px;
    position:      relative;
    padding-right: 3.5rem;
}

html[data-theme="dark"] .ir-result-header {
    background: linear-gradient(90deg, var(--surface-2), var(--surface-3));
    border-bottom: 1px solid var(--border);
}

.ir-result-header::after { position: absolute; right: 10px; }

/* Keep arrow white when accordion is open */
.ir-result-header.accordion-button:not(.collapsed),
.ir-result-header:not(.collapsed) { color: white !important; }

.ir-result-header.accordion-button:not(.collapsed) { background-color: inherit !important; }
.ir-result-header.accordion-button:focus            { box-shadow: none; }
.ir-result-header::after                            { filter: brightness(0) invert(1); }

/* ── Status badge (coloured pill in card header) ──────────────────── */
.ir-status-badge {
    font-size:   0.75rem;
    font-weight: 600;
    padding:     4px 10px;
    border-radius: 6px;
    background:  rgba(255, 255, 255, 0.15);
    color:       #fff;
}

.ir-badge-instrument { background: #0a9f2c; }
.ir-badge-index      { background: #d39e00; }
.ir-badge-unknown    { background: #dc3545; }
.ir-badge-default    { background: #6c757d; }

/* ── Primary identifier (monospace ISIN display) ──────────────────── */
.ir-primary-id {
    font-size:    1.05rem;
    font-weight:  600;
    letter-spacing: 0.6px;
    font-family:  "Consolas", "Roboto Mono", monospace;
    color:        var(--text);
}

/* ── Meta info (identifiers / source row) ─────────────────────────── */
.ir-meta-info {
    font-size: 0.85rem;
    color:     var(--text-muted);
}

/* ── Evaluation date — inline text, same style as meta info ──────── */
.ir-eval-date {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   0.85rem;
    color:       var(--text-muted);
    white-space: nowrap;
}

.ir-eval-date .ir-eval-label {
    font-weight: 600;
    color:       var(--text-muted);
}

.ir-eval-date .ir-eval-value {
    font-weight: 600;
    color:       var(--text);
}

@media (max-width: 768px) {
    .ir-eval-date        { flex-direction: column; align-items: flex-start; gap: 2px; }
    .ir-primary-id       { font-size: 0.95rem; }
}

/* ── Evaluation table (ESMA / FCA_UK results) ─────────────────────── */
.ir-modern-table {
    width: 100%;
    table-layout: fixed;
}

.ir-modern-table th {
    font-size:       0.75rem;
    text-transform:  uppercase;
    letter-spacing:  0.4px;
    padding:         8px;
    vertical-align:  middle;
}

.ir-modern-table td {
    padding:   10px 8px;
    font-size: 0.9rem;
}

.ir-modern-table th,
.ir-modern-table td { word-wrap: break-word; }

/* Authority coloured column-group headers */
.ir-esma-header {
    background-color: #00379F !important;
    color:            white;
    font-weight:      600;
}

.ir-fca-header {
    background-color: #6C1D45 !important;
    color:            white;
    font-weight:      600;
}

/* Table body cells — theme-aware */
.ir-modern-table tbody tr {
    background-color: var(--surface);
    color:            var(--text);
    border-color:     var(--border);
}

html[data-theme="dark"] .ir-modern-table {
    border-color: var(--border);
}

html[data-theme="dark"] .ir-modern-table td,
html[data-theme="dark"] .ir-modern-table th:not(.ir-esma-header):not(.ir-fca-header) {
    border-color: var(--border);
}

html[data-theme="dark"] .ir-modern-table tbody td {
    background-color: var(--surface-2);
    color:            var(--text);
}

html[data-theme="dark"] .ir-modern-table .table-light {
    --bs-table-bg:           var(--surface-2);
    --bs-table-striped-bg:   var(--surface-3);
    --bs-table-color:        var(--text);
    --bs-table-border-color: var(--border);
    background-color: var(--surface-2) !important;
    color:            var(--text)      !important;
}

/* ── Table layout container ───────────────────────────────────────── */
.ir-table-area {
    margin-top:   6px;
    padding-right: 40px;
}

.ir-result-card .table {
    width:        100%;
    table-layout: auto;
}

.ir-result-card > .d-flex {
    flex-wrap: wrap;
    gap:       16px;
}

.ir-result-card > .d-flex > div {
    flex: 1 1 300px;
}

/* ── Unknown value text colour ────────────────────────────────────── */
.ir-text-unknown { color: #d39e00; }

/* ── Comments accordion ───────────────────────────────────────────── */
.ir-comments-accordion {
    width:       100%;
    margin-top:  10px;
    border-top:  1px solid var(--border);
}

.ir-comments-toggle {
    font-size:  0.78rem;
    padding:    2px 10px;
    min-height: 26px;
    background-color: var(--surface-2) !important;
    color:            var(--text)      !important;
}

.ir-comments-toggle:not(.collapsed) {
    background-color: var(--surface-3) !important;
    color:            var(--text)      !important;
}

html[data-theme="dark"] .ir-comments-toggle {
    border-color: var(--border);
}

.ir-comments-toggle:focus { box-shadow: none; }

.ir-comments-list {
    padding-left: 18px;
    font-size:    0.85rem;
    color:        var(--text);
}

.ir-comments-list li { margin-bottom: 5px; }

/* ── Validation message ───────────────────────────────────────────── */
.ir-validation-message {
    color:     #dc3545;
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════════
   InstrumentStatus page  (InstrumentStatus.razor)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page cards ───────────────────────────────────────────────────── */
.is-page-card {
    border:        1px solid var(--border);
    border-radius: 14px;
    box-shadow:    var(--shadow-card);
    background:    var(--surface);
    color:         var(--text);
    margin-bottom: 20px;
    transition:    all 0.25s ease;
}

.is-page-card:hover {
    transform:  translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

/* ── Card header (dark gradient band) ────────────────────────────── */
.is-card-header {
    background:    linear-gradient(90deg, #1c1f23, #2c3035);
    color:         #ffffff;
    font-weight:   600;
    font-size:     0.95rem;
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    padding:       12px 16px;
    letter-spacing: 0.3px;
}

html[data-theme="dark"] .is-card-header {
    background: linear-gradient(90deg, var(--surface-2), var(--surface-3));
    border-bottom: 1px solid var(--border);
}

/* ── Section sub-heading rule ─────────────────────────────────────── */
.is-section-heading {
    font-size:     0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top:    1rem;
    margin-bottom: 12px;
}

.is-section-heading::after {
    content:    "";
    display:    block;
    height:     1px;
    width:      100%;
    background: var(--border);
    margin-top: 6px;
}

/* ── Authority coloured labels ────────────────────────────────────── */
.is-authority-esma,
.is-authority-fca,
.is-authority-totv {
    display:       inline-block;
    font-size:     0.72rem;
    font-weight:   700;
    letter-spacing: 0.07em;
    padding:       5px 12px;
    border-radius: 6px;
    box-shadow:    0 2px 6px rgba(0, 0, 0, 0.18);
}

.is-authority-esma {
    background-color: #00379F;
    color:            white;
}

.is-authority-fca {
    background-color: #6C1D45;
    color:            white;
}

.is-authority-totv {
    background:    var(--surface-2);
    color:         var(--text);
    border:        1px solid var(--border);
    border-radius: 6px;
}

/* ── Monitoring table ─────────────────────────────────────────────── */
.is-monitoring-table {
    border-radius: 10px;
    overflow:      hidden;
}

.is-monitoring-table thead th {
    font-size:        0.72rem;
    text-transform:   uppercase;
    letter-spacing:   0.4px;
    background-color: var(--surface-2);
    color:            var(--text-muted);
    border-bottom:    1px solid var(--border);
}

.is-monitoring-table tbody tr {
    background-color: var(--surface);
    color:            var(--text);
    transition:       background 0.15s ease;
}

.is-monitoring-table tbody tr:hover {
    background-color: var(--surface-2);
}

.is-monitoring-table td,
.is-monitoring-table th {
    border-color: var(--border);
}

/* Override Bootstrap table-light in dark mode for is-monitoring-table */
html[data-theme="dark"] .is-monitoring-table thead.table-light th,
html[data-theme="dark"] .is-monitoring-table .table-light th {
    background-color: var(--surface-2) !important;
    color:            var(--text-muted) !important;
    border-color:     var(--border)     !important;
}

/* ── Status column pills ──────────────────────────────────────────── */
/* Light mode: subtle tinted pill */
.is-status-done {
    background:   rgba(25, 135, 84, 0.12);
    color:        #198754;
    padding:      3px 8px;
    border-radius: 6px;
    font-weight:  600;
}

.is-status-no-headers {
    background:   rgba(255, 193, 7, 0.15);
    color:        #d39e00;
    padding:      3px 8px;
    border-radius: 6px;
    font-weight:  600;
}

.is-status-failed {
    background:   rgba(220, 53, 69, 0.12);
    color:        #dc3545;
    padding:      3px 8px;
    border-radius: 6px;
    font-weight:  600;
}

/* Dark mode: stronger fill so pill is visible against dark table cell */
html[data-theme="dark"] .is-status-done {
    background: rgba(25, 135, 84, 0.25);
    color:      #4ade80;
}

html[data-theme="dark"] .is-status-no-headers {
    background: rgba(255, 193, 7, 0.22);
    color:      #fcd34d;
}

html[data-theme="dark"] .is-status-failed {
    background: rgba(220, 53, 69, 0.25);
    color:      #f87171;
}

/* ── Search card ──────────────────────────────────────────────────── */
.is-search-card {
    border-radius: 12px;
    border:        1px solid var(--border);
    box-shadow:    var(--shadow-card);
    background:    var(--surface);
    width:         auto;
    display:       inline-block;
}

/* ── Search bar layout ────────────────────────────────────────────── */
.is-search-bar {
    display:     flex;
    align-items: flex-end;
    gap:         12px;
    flex-wrap:   wrap;
}

.is-date-group {
    display:        flex;
    flex-direction: column;
    flex:           1 1 200px;
    min-width:      200px;
}

.is-date-input {
    width:     100%;
    min-width: 200px;
    max-width: 320px;
}

.is-search-btn {
    height:     38px;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .is-date-group,
    .is-search-btn { width: 100%; min-width: unset; }
}

/* ── Empty / no-data card ─────────────────────────────────────────── */
.is-empty-card {
    background:    var(--surface);
    border:        none;
    border-radius: 0.5rem;
    box-shadow:    var(--shadow-card);
    transition:    all 0.3s ease-in-out;
    color:         var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   ToTvDataCompare page  (ToTvDataCompare.razor)
   All rules migrated from FirdsCompare.css. Accordion-button overrides
   from that file are intentionally NOT reproduced — the global accordion
   rules in themes.css handle both themes correctly.
   ═══════════════════════════════════════════════════════════════════ */

/* ── MIC search dropdown ──────────────────────────────────────────── */
.mic-list {
    max-height:       250px;
    overflow-y:       auto;
    background-color: var(--surface);
    border:           1px solid var(--border) !important;
    border-radius:    0.375rem;
}

.mic-list-item {
    border:           none;
    border-bottom:    1px solid var(--border-subtle);
    background-color: var(--surface);
    color:            var(--text);
    transition:       background-color 0.2s ease, box-shadow 0.2s ease;
}

.mic-list-item:last-child { border-bottom: none; }

.mic-list-item:hover {
    background-color: var(--surface-2) !important;
    box-shadow:       var(--shadow-sm);
    /* Ensure all child text remains readable on dark hover background */
    color:            var(--text) !important;
}

/* Override Bootstrap text-utility colors inside hovered/active items */
.mic-list-item:hover .text-primary,
.mic-list-item:hover .text-secondary,
.mic-list-item:hover .text-muted,
.mic-list-item:hover strong {
    color: var(--text) !important;
}

.mic-list-item.active {
    background-color: var(--accent-bg)  !important;
    color:            var(--accent)     !important;
    border-left:      4px solid var(--accent);
}

.mic-list-item.active .text-primary,
.mic-list-item.active .text-secondary,
.mic-list-item.active .text-muted {
    color: var(--accent) !important;
}

/* ── Venue-type badge (replaces Bootstrap bg-light text-dark) ─────── */
.tdc-venue-badge {
    background:  var(--surface-2);
    color:       var(--text-muted);
    border:      1px solid var(--border) !important;
    font-size:   0.75rem;
}

/* ── Input with clear icon ────────────────────────────────────────── */
.input-with-icon { position: relative; }
.input-with-icon input { padding-right: 2.2rem; }

.clear-icon {
    position:   absolute;
    right:      10px;
    top:        50%;
    transform:  translateY(-50%);
    color:      var(--text-muted);
    font-size:  1.1rem;
    cursor:     pointer;
    user-select: none;
}

.clear-icon:hover { color: var(--text); }

/* ── Comparison table group-header rows ───────────────────────────── */
.group-header {
    cursor:           pointer;
    background-color: var(--accent-bg);
    color:            var(--text);
    font-weight:      600;
}

html[data-theme="dark"] .group-header {
    background-color: var(--surface-2);
    border-color:     var(--border);
}

.chevron {
    transition:    transform 0.25s ease;
    font-size:     1rem;
    margin-right:  8px;
    display:       inline-block;
}

.collapsed .chevron { transform: rotate(-90deg); }

/* ── Main comparison table ────────────────────────────────────────── */
.main-table,
.subtable { table-layout: fixed; }

.main-table th:nth-child(1), .main-table td:nth-child(1),
.subtable  th:nth-child(1), .subtable  td:nth-child(1) { width: 30%; }

.main-table th:nth-child(2), .main-table td:nth-child(2),
.subtable  th:nth-child(2), .subtable  td:nth-child(2) { width: 35%; }

.main-table th:nth-child(3), .main-table td:nth-child(3),
.subtable  th:nth-child(3), .subtable  td:nth-child(3) { width: 35%; }

/* Main table body — dark mode */
html[data-theme="dark"] .main-table thead.table-dark th {
    background-color: var(--surface-3) !important;
    color:            var(--text)      !important;
    border-color:     var(--border);
}

html[data-theme="dark"] .main-table tbody tr {
    background-color: var(--surface);
    color:            var(--text);
    border-color:     var(--border);
}

html[data-theme="dark"] .main-table tbody td {
    border-color: var(--border);
}

/* ── Sub-table (Classification / Issuer expanded rows) ────────────── */
.subtable-wrapper { padding: 0; }

.subtable {
    font-size:        0.85rem;
    background-color: var(--surface-2);
    border-left:      3px solid var(--border);
    transition:       all 0.15s ease-in-out;
}

.subtable th {
    background-color: var(--surface-3) !important;
    color:            var(--text)      !important;
}

.table td,
.subtable td { vertical-align: middle; }

/* table-warning in subtable — light mode keeps amber; dark mode uses translucent */
.subtable tr.table-warning,
.subtable tr.table-warning > td {
    background-color: #fff3cd !important;
    color:            #000    !important;
}

html[data-theme="dark"] .subtable tr.table-warning,
html[data-theme="dark"] .subtable tr.table-warning > td {
    background-color: rgba(255, 193, 7, 0.18) !important;
    color:            var(--text)              !important;
}

/* ── Comparison grid (CFI / Issuer sub-table grid) ────────────────── */
.comparison-grid {
    display:               grid;
    grid-template-columns: 30% 35% 35%;
    border-left:           3px solid var(--border);
    background:            var(--surface-2);
    font-size:             0.85rem;
}

.comparison-grid-header {
    font-weight:  600;
    background:   var(--surface-3);
    color:        var(--text);
    padding:      6px 8px;
    border-bottom: 1px solid var(--border);
}

.comparison-grid-row { display: contents; }

.comparison-grid-cell {
    padding:      6px 8px;
    border-bottom: 1px solid var(--border);
    color:        var(--text);
}

/* table-warning in comparison grid */
.comparison-grid-cell.table-warning,
.comparison-grid-row .table-warning {
    background-color: #fff3cd !important;
    color:            #000    !important;
}

html[data-theme="dark"] .comparison-grid-cell.table-warning,
html[data-theme="dark"] .comparison-grid-row .table-warning {
    background-color: rgba(255, 193, 7, 0.18) !important;
    color:            var(--text)              !important;
}

/* ── CFI group-name label ─────────────────────────────────────────── */
.cfi-group-name {
    font-weight:    700;
    letter-spacing: 0.3px;
}

button.btn-link { text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════
   InstrumentEvaluationDetails page
   (InstrumentEvaluationDetails.razor + GroupedInstrumentTableFlat_Fix.razor)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page layout helpers ──────────────────────────────────────────── */
.col-xl-3,
.col-xl-9 { transition: all 0.2s ease-in-out; }

/* Sticky toolbar sits inside the card — must match card surface */
.card-toolbar {
    position:         sticky;
    top:              0;
    z-index:          2;
    background-color: var(--surface);
}

/* ── Table base ───────────────────────────────────────────────────── */
.professional-table {
    table-layout: fixed;
    font-size:    0.875rem;
    width:        100%;
}

.professional-table thead th {
    background-color: #212529;
    color:            #fff;
    font-size:        0.7rem;
    letter-spacing:   0.05em;
    text-transform:   uppercase;
    white-space:      nowrap;
    overflow:         hidden;
    text-overflow:    ellipsis;
}

html[data-theme="dark"] .professional-table thead th {
    background-color: var(--surface-3);
    color:            var(--text);
    border-color:     var(--border);
}

.professional-table td {
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.professional-table tbody tr {
    border-bottom: 1px solid var(--border);
}

/* Default data rows — explicit bg so dark mode doesn't fall back to Bootstrap's white */
html[data-theme="dark"] .professional-table tbody tr:not(.group-row) {
    background-color: var(--surface);
    color:            var(--text);
    border-color:     var(--border);
}

html[data-theme="dark"] .professional-table tbody td {
    border-color: var(--border);
}

/* ── Group header rows ────────────────────────────────────────────── */
.group-row td {
    background-color: #f8f9fa;
    font-weight:      600;
    cursor:           pointer;
}

.group-row:hover td { background-color: #e9ecef; }

html[data-theme="dark"] .group-row td {
    background-color: var(--surface-2);
    color:            var(--text);
    border-color:     var(--border);
}

html[data-theme="dark"] .group-row:hover td {
    background-color: var(--surface-3);
}

/* ── Status row highlight colours ─────────────────────────────────── */
/* Light mode: soft tinted rows */
tr.canc-rcrd > td    { background-color: #f8d7da !important; color: #842029 !important; }
tr.termntd-rcrd > td { background-color: #fff3cd !important; color: #664d03 !important; }

/* Dark mode: translucent tints with legible light text */
html[data-theme="dark"] tr.canc-rcrd > td {
    background-color: rgba(220, 53, 69,  0.25) !important;
    color:            #f87171               !important;
    border-color:     var(--border);
}

html[data-theme="dark"] tr.termntd-rcrd > td {
    background-color: rgba(255, 193, 7,  0.20) !important;
    color:            #fcd34d               !important;
    border-color:     var(--border);
}

/* ── Group row content layout ─────────────────────────────────────── */
.group-row-content {
    display:               grid;
    grid-template-columns: 1fr auto;
    align-items:           center;
    gap:                   1rem;
}

.group-tags {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem 0.75rem;
    min-width: 0;
}

/* ── Tag badge (group label pill) ─────────────────────────────────── */
.tag-badge {
    background-color: rgba(13, 110, 253, 0.15);
    color:            var(--text);     /* was #212529 — invisible in dark mode */
    padding:          0.35rem 0.65rem;
    font-weight:      500;
    white-space:      nowrap;
    overflow:         hidden;
    text-overflow:    ellipsis;
}

html[data-theme="dark"] .tag-badge {
    background-color: var(--accent-bg);
    color:            var(--text);
}

.count-badge { white-space: nowrap; }

/* ── Counter badge variants ───────────────────────────────────────── */
.counter-canc    { background-color: #c73c48 !important; color: #fff; }
.counter-term    { background-color: #f2862e !important; color: #fff; }
.counter-default { background-color: #6c757d !important; color: #fff; }

/* ── MIC column cell ──────────────────────────────────────────────── */
.mic-cell    { vertical-align: middle !important; }

.mic-wrapper {
    display:     flex;
    align-items: center;
    white-space: nowrap;
}

.mic-text { min-width: 55px; }

.mic-eye-btn {
    background:   none;
    border:       none;
    padding:      0;
    margin-left:  0.5rem;
    line-height:  1;
    display:      flex;
    align-items:  center;
    cursor:       pointer;
    color:        var(--text-muted);
    transition:   color 0.15s;
}

.mic-eye-btn:hover { color: var(--accent); }

.mic-eye-btn i { font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════════════
   CFICodeLookup page  (CFICodeLookup.razor)
   Migrated from Cfi.css. The global ul/li rules from Cfi.css are
   scoped to .cfi-grid here so they don't bleed into the sidebar/nav.
   ═══════════════════════════════════════════════════════════════════ */

/* ── CFI input/output bar (the dashed container at top) ───────────── */
.cfi-output-bar {
    display:        flex;
    justify-content: center;
    align-items:    center;
    gap:            15px;
    margin-top:     50px;
    padding:        10px;
    border:         1px dashed var(--border);
    background:     var(--surface);
    color:          var(--text);
    width:          100%;
    box-sizing:     border-box;
    text-align:     center;
    border-radius:  6px;
}

.cfi-output-bar label {
    margin-right:  10px;
    white-space:   nowrap;
    color:         var(--text);
    font-weight:   600;
}

/* ── 6-column selection grid ──────────────────────────────────────── */
.cfi-grid {
    display:               grid;
    grid-template-columns: repeat(6, 1fr);
    gap:                   10px;
    margin-top:            1rem;
}

.cfi-column {
    border:        1px solid var(--border);
    border-radius: 6px;
    padding:       10px;
    background:    var(--surface);
    color:         var(--text);
}

.cfi-column h5 {
    font-size:     0.82rem;
    font-weight:   600;
    color:         var(--text-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Scoped list rules — only inside the CFI grid */
.cfi-grid ul {
    list-style-type: none;
    padding:         0;
    margin:          0;
}

.cfi-grid li {
    cursor:      pointer;
    padding:     5px;
    border-radius: 3px;
    color:       var(--text);
    transition:  background-color 0.2s;
}

.cfi-grid li:hover {
    background-color: var(--surface-2);
    color:            var(--text);
}

/* Selected item in a column */
.cfi-selected {
    background-color: var(--accent-bg)  !important;
    color:            var(--accent)     !important;
    font-weight:      bold;
    border-left:      4px solid var(--accent);
}

/* Invalid (non-standard) item */
.cfi-invalid {
    background-color: rgba(220, 53, 69, 0.10);
    color:            #842029;
}

html[data-theme="dark"] .cfi-invalid {
    background-color: rgba(220, 53, 69, 0.22);
    color:            #f87171;
}

/* ── CFI code display + real input overlay ────────────────────────── */
.cfi-container {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-top:  0;
}

.cfi-wrapper {
    position: relative;
    display:  flex;
    align-items: center;
}

/* Fake character display box (rendered on top of transparent input) */
.cfi-input-box {
    position:         absolute;
    top:              0;
    left:             0;
    display:          inline-flex;
    gap:              4px;
    background-color: var(--surface);
    border:           1px solid var(--border);
    padding:          5px 8px;
    font-family:      monospace;
    font-size:        1.2rem;
    pointer-events:   none;
    width:            200px;
    height:           100%;
    box-sizing:       border-box;
    z-index:          1;
}

/* Transparent real input on top */
.cfi-actual-input {
    background:     transparent;
    color:          transparent;
    caret-color:    var(--text);
    font-size:      1.2rem;
    font-family:    monospace;
    letter-spacing: 4px;
    width:          200px;
    border:         1px solid var(--border);
    padding:        5px 8px;
    box-sizing:     border-box;
    position:       relative;
    z-index:        2;
}

.cfi-char {
    width:      1ch;
    text-align: center;
    color:      var(--text);
}

.cfi-invalid-char { color: #dc3545; }
html[data-theme="dark"] .cfi-invalid-char { color: #f87171; }

/* ── Copy / Reset buttons ─────────────────────────────────────────── */
.button-group {
    display:     flex;
    gap:         0.5rem;
    align-items: center;
}

.action-btn {
    border:        none;
    padding:       0.4rem 0.8rem;
    border-radius: 4px;
    cursor:        pointer;
    transition:    background-color 0.2s ease;
    color:         white;
    font-size:     0.95rem;
}

.copy-btn         { background-color: var(--accent); }
.copy-btn:hover   { background-color: var(--accent-hover); }
.reset-btn        { background-color: #6c757d; }
.reset-btn:hover  { background-color: #5c636a; }

/* Inline copy success toast */
.copy-toast {
    padding:       0.3rem 0.8rem;
    background:    var(--surface-2);
    color:         #198754;
    border:        1px solid #198754;
    border-radius: 4px;
    font-size:     0.9rem;
    font-weight:   500;
}

.copy-inline-msg {
    margin-left: 10px;
    color:       #198754;
    font-weight: 500;
    animation:   cfi-fade-inline 2s ease-in-out forwards;
}

@keyframes cfi-fade-inline {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ── CFI Code Summary box ─────────────────────────────────────────── */
.summary-box {
    margin-top:    1.5rem;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 6px;
    padding:       1rem;
    box-shadow:    var(--shadow-card);
    color:         var(--text);
}

.summary-box h4 {
    margin-bottom: 0.75rem;
    color:         var(--text);
}

.summary-table {
    width:           100%;
    border-collapse: collapse;
    color:           var(--text);
}

.summary-table th,
.summary-table td {
    padding:      0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align:   left;
}

.summary-table th {
    background:  var(--surface-2);
    color:       var(--text-muted);
    font-weight: 600;
}

.summary-table tbody tr:hover td {
    background-color: var(--surface-2);
}

/* ── Paste popup ──────────────────────────────────────────────────── */
.popup-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.5);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         999;
}

.popup {
    background:    var(--surface);
    color:         var(--text);
    border:        1px solid var(--border);
    padding:       20px;
    border-radius: 8px;
    box-shadow:    var(--shadow-elevated);
    min-width:     300px;
}

.popup-buttons {
    margin-top:      10px;
    display:         flex;
    gap:             10px;
    justify-content: flex-end;
}

/* ── Description box ──────────────────────────────────────────────── */
.description-box {
    margin-top:       10px;
    padding:          10px;
    background-color: var(--surface-2);
    border-left:      4px solid var(--accent);
    font-style:       italic;
    color:            var(--text);
    border-radius:    0 4px 4px 0;
}

/* Blazor error bar */
#blazor-error-ui {
    background:  var(--rth-error-bar-bg);
    bottom: 0; left: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1001;
}

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

/* ═══════════════════════════════════════════════════════════════════
   Demo User Registration page  (dr-*)
   Light defaults — dark overrides follow below
   ═══════════════════════════════════════════════════════════════════ */

/* Layout — fixed overlay below the app header (3.5rem) */
.dr-viewport {
    position: fixed;
    top: 3.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    background: linear-gradient(150deg, #dce4f0 0%, #eef2f9 50%, #dce4f0 100%);
}

html[data-theme="dark"] .dr-viewport {
    background: linear-gradient(150deg, #0f1320 0%, #161c2e 50%, #0f1320 100%);
}

/* Card shell */
.dr-card {
    width: 100%;
    max-width: 480px;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .dr-card {
    background: #1e2535;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* Brand header — intentionally dark in both themes */
.dr-header {
    position: relative;
    background: linear-gradient(135deg, #0a1628 0%, #1a3a6b 100%);
    padding: 1.5rem 1.5rem 1.25rem;
    text-align: center;
}

.dr-close {
    position: absolute;
    top: 0.75rem;
    right: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1rem;
    text-decoration: none;
    line-height: 1;
    transition: color 0.15s;
}

.dr-close:hover {
    color: #ffffff;
}

.dr-brand-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 0.4rem;
}

.dr-brand-icon svg {
    width: 36px;
    height: 36px;
    filter: brightness(0) invert(1); /* force white on the dark header */
}

.dr-brand-name {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 0.2rem;
}

.dr-brand-sub {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

/* Progress bar */
.dr-progress {
    height: 3px;
    background: rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .dr-progress {
    background: rgba(255, 255, 255, 0.08);
}

.dr-progress-bar {
    height: 100%;
    background: #0078D4;
    transition: width 0.4s ease;
}

html[data-theme="dark"] .dr-progress-bar {
    background: #60a5fa;
}

/* Steps */
.dr-step {
    display: none;
}

.dr-step-active {
    display: block;
}

/* Body padding */
.dr-body {
    padding: 1.75rem 1.75rem 1.5rem;
}

/* Headings */
.dr-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.25rem;
}

html[data-theme="dark"] .dr-section-title {
    color: #e2e8f0;
}

.dr-section-sub {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 1.1rem;
}

html[data-theme="dark"] .dr-section-sub {
    color: #94a3b8;
}

/* Feature list */
.dr-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dr-features li {
    font-size: 0.84rem;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

html[data-theme="dark"] .dr-features li {
    color: #94a3b8;
}

.dr-feature-icon {
    color: #198754;
    font-size: 0.85rem;
    flex-shrink: 0;
}

html[data-theme="dark"] .dr-feature-icon {
    color: #4ade80;
}

/* Loading bar */
.dr-loader {
    height: 3px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1rem;
}

html[data-theme="dark"] .dr-loader {
    background: rgba(255, 255, 255, 0.08);
}

.dr-loader-bar {
    height: 100%;
    width: 40%;
    background: #0078D4;
    border-radius: 2px;
    animation: dr-slide 1.2s ease-in-out infinite;
}

html[data-theme="dark"] .dr-loader-bar {
    background: #60a5fa;
}

@keyframes dr-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* Form fields */
.dr-field {
    margin-bottom: 1rem;
}

.dr-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.35rem;
    letter-spacing: 0.02em;
}

html[data-theme="dark"] .dr-label {
    color: #94a3b8;
}

.dr-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 8px;
    background: #f8f9fa !important;
    border: 1px solid #ced4da !important;
    color: #212529 !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dr-input:focus {
    outline: none;
    border-color: #0078D4 !important;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.15) !important;
}

html[data-theme="dark"] .dr-input {
    background: #252d45 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .dr-input:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

/* Hint text */
.dr-hint {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.3rem;
}

html[data-theme="dark"] .dr-hint {
    color: #94a3b8;
}

/* Terms */
.dr-terms-field {
    margin-bottom: 1rem;
}

.dr-terms-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.dr-check {
    margin-top: 0.2rem;
    flex-shrink: 0;
    accent-color: #0078D4;
    width: 15px;
    height: 15px;
}

html[data-theme="dark"] .dr-check {
    accent-color: #60a5fa;
}

.dr-terms-label {
    font-size: 0.8rem;
    color: #495057;
    line-height: 1.45;
}

html[data-theme="dark"] .dr-terms-label {
    color: #94a3b8;
}

/* Links */
.dr-link {
    color: #0078D4;
    text-decoration: none;
    font-weight: 500;
}

.dr-link:hover {
    text-decoration: underline;
}

html[data-theme="dark"] .dr-link {
    color: #60a5fa;
}

/* Error */
.dr-error {
    font-size: 0.82rem;
    color: #dc3545;
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.25);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}

html[data-theme="dark"] .dr-error {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.3);
    color: #f87171;
}

/* Submit button */
.dr-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: #0078D4;
    color: #ffffff;
    transition: background 0.15s, opacity 0.15s;
}

.dr-submit-btn:hover:not(:disabled) {
    background: #005fa3;
}

.dr-submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

html[data-theme="dark"] .dr-submit-btn {
    background: #4f8ef7;
}

html[data-theme="dark"] .dr-submit-btn:hover:not(:disabled) {
    background: #3b7de8;
}

/* Footer note */
.dr-footer-note {
    font-size: 0.8rem;
    text-align: center;
    color: #6c757d;
    margin-top: 1rem;
    margin-bottom: 0;
}

html[data-theme="dark"] .dr-footer-note {
    color: #64748b;
}

/* ── Step 2 — Success screen ───────────────────────────────────────── */

.dr-success-body {
    text-align: center;
}

.dr-success-icon {
    font-size: 3.5rem;
    color: #198754;
    margin-bottom: 0.75rem;
    line-height: 1;
}

html[data-theme="dark"] .dr-success-icon {
    color: #4ade80;
}

.dr-success-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.3rem;
}

html[data-theme="dark"] .dr-success-title {
    color: #e2e8f0;
}

.dr-success-sub {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 1.25rem;
}

html[data-theme="dark"] .dr-success-sub {
    color: #94a3b8;
}

/* Account ID — no background box, centered */
.dr-account-box {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 1.25rem;
    text-align: center;
}

.dr-account-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 0.4rem;
}

html[data-theme="dark"] .dr-account-label {
    color: #64748b;
}

.dr-account-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.dr-account-id {
    font-size: 1rem;
    font-weight: 700;
    color: #212529;
    word-break: break-all;
}

html[data-theme="dark"] .dr-account-id {
    color: #e2e8f0;
}

.dr-copy-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0.2rem 0.3rem;
    font-size: 0.9rem;
    color: #6c757d;
    cursor: pointer;
    transition: color 0.12s;
}

.dr-copy-btn:hover {
    color: #0078D4;
}

html[data-theme="dark"] .dr-copy-btn {
    color: #94a3b8;
}

html[data-theme="dark"] .dr-copy-btn:hover {
    color: #60a5fa;
}

/* Countdown ring */
.dr-countdown-ring {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid #0078D4;
    margin: 0 auto 0.5rem;
    line-height: 1;
}

html[data-theme="dark"] .dr-countdown-ring {
    border-color: #60a5fa;
}

.dr-countdown-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0078D4;
    line-height: 1;
}

html[data-theme="dark"] .dr-countdown-number {
    color: #60a5fa;
}

.dr-countdown-label {
    font-size: 0.65rem;
    color: #6c757d;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

html[data-theme="dark"] .dr-countdown-label {
    color: #94a3b8;
}

.dr-redirect-text {
    font-size: 0.82rem;
    color: #6c757d;
    margin-bottom: 1.25rem;
}

html[data-theme="dark"] .dr-redirect-text {
    color: #94a3b8;
}

/* ── Onboarding Stats ───────────────────────────────────────────── */
.stats-loader-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

html[data-theme="dark"] .stats-loader-overlay {
    background: rgba(0, 0, 0, 0.5);
}

/* ── Manage Configuration Settings ─────────────────────────────── */
.config-table-wrap {
    overflow-x: auto;
}

.config-table {
    font-size: 0.8rem;
}

.config-table td {
    vertical-align: middle;
    font-size: 0.8rem;
}

/* ── Manage UI Services ─────────────────────────────────────────── */
.ui-services-table-wrap thead th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    z-index: 1;
}

.ui-services-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}

.ui-services-table td {
    font-size: 0.875rem;
}

/* ── Manage New Demo Users ──────────────────────────────────────── */
.demo-users-card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.demo-users-table .col-sortable {
    cursor: pointer;
    user-select: none;
}

.demo-users-table .col-sortable:hover {
    filter: brightness(1.15);
}

.demo-users-table td {
    font-size: 0.875rem;
    vertical-align: middle;
}

/* ── Admin Logged In Users ──────────────────────────────────────── */
.logged-in-users-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* no color override — let table-dark supply white text on dark header */
    border-bottom: 2px solid var(--border);
}

.logged-in-users-table td {
    font-size: 0.875rem;
    vertical-align: middle;
}

.logged-in-users-table .sortable {
    cursor: pointer;
    user-select: none;
}

.logged-in-users-table .sortable:hover {
    filter: brightness(1.15);
}

.session-id-cell {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.copy-session-btn {
    background: none;
    border: none;
    padding: 0 4px;
    opacity: 0.4;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    color: inherit;
}

.copy-session-btn:hover { opacity: 1; }

/* ── Admin Users ────────────────────────────────────────────────── */
.admin-users-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}

.admin-users-table td {
    font-size: 0.875rem;
    vertical-align: middle;
}

/* ── Admin Dashboard ────────────────────────────────────────────── */
.group-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}

.group-header:not(:first-of-type) {
    margin-top: 24px;
}

/* ═══════════════════════════════════════════════════════════════════
   SolvencyTaxonomyV2 page  (SolvencyTaxonomyV2.razor)
   V2 additions: wide layout, family/group descriptions, expandable
   template items. Builds on the shared st-* classes below.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Wide container variant — fills the available content area ───── */
/* !important needed because .st-container { max-width: 900px } appears
   later in the file and would otherwise win the cascade.              */
.st-container--wide { max-width: none !important; }

/* ── Family card — italic description line ────────────────────────── */
.stv2-card-description {
    font-size:   10px;
    color:       var(--text-muted);
    line-height: 1.4;
    margin-top:  3px;
    font-style:  italic;
}

/* ── Detail header — family description ──────────────────────────── */
.stv2-detail-description {
    color:       rgba(255, 255, 255, 0.65);
    font-size:   12px;
    margin-top:  2px;
    font-style:  italic;
}

/* ── Group card header — description line ────────────────────────── */
.stv2-group-title-row {
    display:     flex;
    align-items: baseline;
    gap:         8px;
    flex-wrap:   wrap;
}

.stv2-group-description {
    font-size:   10px;
    color:       var(--text-muted);
    font-style:  italic;
    margin-top:  4px;
    line-height: 1.4;
}

/* ── Expandable template item ─────────────────────────────────────── */
.stv2-item {
    font-size:     12px;
    color:         var(--text);
    border-radius: 6px;
    padding:       3px 4px;
    background:    transparent;
    transition:    background-color 0.15s ease;
    list-style:    none;
}

.stv2-item--clickable { cursor: pointer; }

.stv2-item--clickable:hover {
    background-color: var(--accent-bg);
}

/* Row: key badge + name + toggle arrow */
.stv2-item-row {
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* Re-use st-item-name for the name span */
.stv2-item-row .st-item-name {
    flex:        1;
    line-height: 1.4;
}

.stv2-item-toggle {
    font-size:   10px;
    color:       var(--text-muted);
    flex-shrink: 0;
    transition:  color 0.15s ease;
    line-height: 1;
}

.stv2-item--expanded .stv2-item-toggle { color: var(--text); }

/* Expanded description block */
.stv2-item-desc {
    font-size:    10px;
    color:        var(--text-muted);
    line-height:  1.4;
    margin-top:   4px;
    padding-left: 4px;
    border-left:  2px solid;
    padding-bottom: 2px;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .st-container--wide { padding: 16px 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   SolvencyTaxonomyV3 page  (SolvencyTaxonomyV3.razor)
   S.06.02 List of Assets — field-reference explorer.
   Theme-aware structural rules; badge/semantic colours are intentional
   and kept as-is (same pattern as ESMA/FCA brand colour badges).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Legend bar ───────────────────────────────────────────────────── */
.stv3-legend {
    display:     flex;
    gap:         8px;
    flex-wrap:   wrap;
    align-items: center;
    margin-bottom: 16px;
}

.stv3-legend-label {
    font-size: 11px;
    color:     var(--text-muted);
    margin-right: 2px;
}

.stv3-legend-chip {
    display:       flex;
    align-items:   center;
    gap:           5px;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 20px;
    padding:       3px 10px;
}

.stv3-legend-chip-text {
    font-size: 10px;
    color:     var(--text-muted);
}

.stv3-legend-hint {
    font-size:   10px;
    color:       var(--text-muted);
    margin-left: 6px;
    font-style:  italic;
}

/* ── Group card label ─────────────────────────────────────────────── */
.stv3-group-label {
    font-weight:   800;
    font-size:     16px;
    font-family:   monospace;
    border-radius: 6px;
    padding:       2px 10px;
    transition:    color 0.2s, background 0.2s;
}

/* ── Detail panel header ──────────────────────────────────────────── */
.stv3-dp-header {
    padding:     14px 24px;
    display:     flex;
    align-items: flex-start;
    gap:         14px;
    flex-wrap:   wrap;
}

.stv3-dp-label {
    font-weight:    900;
    font-size:      22px;
    color:          rgba(255, 255, 255, 0.9);
    font-family:    monospace;
    background:     rgba(0, 0, 0, 0.15);
    border-radius:  8px;
    padding:        2px 14px;
    letter-spacing: 1px;
}

/* FK/PK relationship box */
.stv3-fk-box {
    margin-left:   auto;
    background:    rgba(0, 0, 0, 0.20);
    border-radius: 10px;
    padding:       8px 14px;
    font-size:     11px;
    color:         rgba(255, 255, 255, 0.85);
    font-family:   monospace;
    white-space:   nowrap;
    align-self:    center;
    display:       flex;
    flex-direction: column;
    gap:           2px;
}

.stv3-fk-arrow {
    font-size:      14px;
    letter-spacing: 2px;
}

/* ── Tables body (wraps the two TableCards) ───────────────────────── */
.stv3-tables-body {
    padding:   20px 24px;
    display:   flex;
    flex-wrap: wrap;
    gap:       16px;
}

/* ── Table card ───────────────────────────────────────────────────── */
.stv3-table-card {
    flex:          1 1 300px;
    background:    var(--surface);
    border-radius: 12px;
    border:        1px solid var(--border);
    overflow:      hidden;
    box-shadow:    var(--shadow-card);
}

html[data-theme="dark"] .stv3-table-card { background: var(--surface-2); }

.stv3-table-header {
    cursor:  pointer;
    padding: 8px 14px;
    display: flex;
    align-items: flex-start;
    gap:     10px;
    transition: background-color 0.15s ease;
}

.stv3-table-id {
    font-family:   monospace;
    font-weight:   800;
    font-size:     12px;
    border-radius: 5px;
    padding:       2px 8px;
}

.stv3-table-link {
    font-size:     10px;
    border-radius: 10px;
    padding:       1px 8px;
    font-weight:   600;
}

.stv3-table-name {
    font-weight:   700;
    font-size:     13px;
    color:         var(--text);
    margin-top:    4px;
}

.stv3-table-desc {
    font-size:   10px;
    color:       var(--text-muted);
    margin-top:  4px;
    line-height: 1.4;
    cursor:      pointer;
}

.stv3-collapsed-hint {
    padding:    8px 14px;
    color:      var(--text-muted);
    font-size:  11px;
    font-style: italic;
}

/* ── Table body ───────────────────────────────────────────────────── */
.stv3-table-body { padding: 10px; }

/* ── Field wrapper ────────────────────────────────────────────────── */
.stv3-field-wrapper { border-radius: 6px; margin-bottom: 1px; }

/* ── Field row ────────────────────────────────────────────────────── */
.stv3-field-row {
    display:       flex;
    align-items:   center;
    gap:           7px;
    padding:       3px 6px;
    border-radius: 6px;
    transition:    background-color 0.15s ease;
}

.stv3-field-row--clickable { cursor: pointer; }
.stv3-field-row--clickable:hover { background-color: var(--accent-bg) !important; }
.stv3-field-row--absent    { opacity: 0.42; }

/* ── Tag badge ────────────────────────────────────────────────────── */
.stv3-tag-badge {
    font-family:  monospace;
    font-weight:  700;
    font-size:    10px;
    border-radius: 4px;
    padding:      1px 5px;
    white-space:  nowrap;
    flex-shrink:  0;
    min-width:    36px;
    text-align:   center;
}

/* ── Code chip ────────────────────────────────────────────────────── */
.stv3-code-chip {
    font-family:   monospace;
    font-weight:   600;
    font-size:     11px;
    border-radius: 4px;
    padding:       1px 6px;
    white-space:   nowrap;
    flex-shrink:   0;
}

/* ── Data type badge ──────────────────────────────────────────────── */
.stv3-dtype-badge {
    font-family:   monospace;
    font-weight:   700;
    font-size:     9px;
    border-radius: 3px;
    padding:       1px 4px;
    white-space:   nowrap;
    flex-shrink:   0;
}

/* ── Field name ───────────────────────────────────────────────────── */
.stv3-field-name {
    font-size:   12px;
    color:       var(--text);
    line-height: 1.4;
    flex:        1;
    min-width:   0;
}

.stv3-field-name--absent { color: var(--text-muted); }

/* ── Enum expand button ───────────────────────────────────────────── */
.stv3-enum-btn {
    flex-shrink:   0;
    font-size:     10px;
    font-weight:   600;
    background:    #ede9fe;
    color:         #6d28d9;
    border:        none;
    border-radius: 10px;
    padding:       2px 8px;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background-color 0.15s ease, color 0.15s ease;
}

.stv3-enum-btn--open { background: #6d28d9; color: white; }

html[data-theme="dark"] .stv3-enum-btn {
    background: rgba(109, 40, 217, 0.20);
    color:      #c4b5fd;
    border:     1px solid rgba(109, 40, 217, 0.35);
}

html[data-theme="dark"] .stv3-enum-btn--open {
    background: #6d28d9;
    color:      white;
    border-color: #6d28d9;
}

/* ── Chevron ──────────────────────────────────────────────────────── */
.stv3-chevron {
    font-size:  10px;
    color:      var(--text-muted);
    flex-shrink: 0;
}

/* ── Field detail panel ───────────────────────────────────────────── */
.stv3-field-detail {
    font-size:    11px;
    line-height:  1.5;
    border-left:  2px solid;
    margin-left:  44px;
    padding-left: 10px;
    margin-top:   3px;
    margin-bottom: 4px;
}

.stv3-field-detail-text { color: var(--text);       margin-bottom: 4px; }
.stv3-field-detail-note { color: var(--text-muted); font-size: 10px; font-style: italic; }

/* ── Enum panel ───────────────────────────────────────────────────── */
.stv3-enum-panel {
    margin-left:   44px;
    margin-top:    2px;
    margin-bottom: 6px;
    border-left:   2px solid rgba(109, 40, 217, 0.33);
    padding-left:  10px;
}

.stv3-enum-row {
    display:     flex;
    align-items: baseline;
    gap:         8px;
    padding:     2px 0;
}

.stv3-enum-row--bordered { border-bottom: 1px solid var(--border-subtle); }

.stv3-enum-code {
    font-family:   monospace;
    font-size:     10px;
    font-weight:   700;
    background:    #ede9fe;
    color:         #6d28d9;
    border-radius: 3px;
    padding:       1px 5px;
    white-space:   nowrap;
    flex-shrink:   0;
}

html[data-theme="dark"] .stv3-enum-code {
    background: rgba(109, 40, 217, 0.20);
    color:      #c4b5fd;
}

.stv3-enum-label {
    font-size:   11px;
    color:       var(--text);
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════
   SolvencyTaxonomy page  (SolvencyTaxonomy.razor)
   Solvency II XBRL Taxonomy browser — all colours use CSS variables
   so both light and dark themes are covered automatically.
   Family-specific accent colours are applied via inline styles.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page container ───────────────────────────────────────────────── */
.st-container {
    max-width:  900px;
    margin:     0 auto;
    padding:    24px 16px;
    font-family: var(--font-family);
}

/* ── Header banner ────────────────────────────────────────────────── */
.st-header {
    background:    linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 18px;
    padding:       28px 32px;
    margin-bottom: 24px;
    color:         white;
    position:      relative;
    overflow:      hidden;
}

/* Decorative circles */
.st-header-bg-circle {
    position:      absolute;
    border-radius: 50%;
    background:    rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

.st-header-bg-circle--lg { width: 160px; height: 160px; top: -30px;  right: -30px; }
.st-header-bg-circle--sm { width: 100px; height: 100px; bottom: -20px; right: 80px; background: rgba(255,255,255,0.03); }

.st-header-eyebrow {
    font-size:      11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          #94a3b8;
    margin-bottom:  6px;
}

.st-header-title {
    font-size:     24px;
    font-weight:   800;
    margin-bottom: 4px;
}

.st-header-subtitle {
    font-size:     15px;
    color:         #cbd5e1;
    margin-bottom: 16px;
}

/* Stat chips row */
.st-header-stats {
    display:   flex;
    gap:       20px;
    flex-wrap: wrap;
}

.st-stat-chip {
    background:    rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding:       8px 16px;
    text-align:    center;
}

.st-stat-value {
    font-size:   20px;
    font-weight: 700;
}

.st-stat-label {
    font-size: 11px;
    color:     #94a3b8;
}

/* ── Family cards grid ────────────────────────────────────────────── */
.st-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   12px;
    margin-bottom:         24px;
}

/* ── Individual family card ───────────────────────────────────────── */
.st-family-card {
    border:          2px solid var(--border);
    border-radius:   14px;
    padding:         0;
    cursor:          pointer;
    background:      var(--surface);
    transition:      border-color 0.2s ease, background-color 0.2s ease,
                     box-shadow 0.2s ease;
    display:         flex;
    flex-direction:  column;
    min-width:       0;
    overflow:        hidden;
    box-shadow:      var(--shadow-card);
}

.st-family-card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* ── Card header strip (coloured accent band) ─────────────────────── */
.st-card-header {
    padding:     10px 14px;
    display:     flex;
    align-items: center;
    gap:         10px;
    transition:  background-color 0.2s ease;
}

.st-card-id {
    font-weight:  800;
    font-size:    20px;
    font-family:  monospace;
    min-width:    36px;
    transition:   color 0.2s ease;
}

.st-card-icon { font-size: 22px; }

.st-card-badge {
    margin-left:   auto;
    color:         white;
    border-radius: 20px;
    padding:       2px 9px;
    font-size:     11px;
    font-weight:   600;
    white-space:   nowrap;
    transition:    background-color 0.2s ease;
}

/* ── Card body (label + full name) ───────────────────────────────── */
.st-card-body {
    padding: 10px 14px;
}

.st-card-label {
    font-weight:   700;
    font-size:     13px;
    margin-bottom: 2px;
}

.st-card-full {
    font-size:   11px;
    color:       var(--text-muted);
    line-height: 1.4;
}

/* ── Detail panel ─────────────────────────────────────────────────── */
.st-detail-panel {
    border:        2px solid var(--border);
    border-radius: 16px;
    overflow:      hidden;
}

.st-detail-header {
    padding:     14px 24px;
    display:     flex;
    align-items: center;
    gap:         14px;
}

.st-detail-id {
    font-weight:   900;
    font-size:     28px;
    color:         rgba(255, 255, 255, 0.9);
    font-family:   monospace;
    background:    rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding:       2px 12px;
    letter-spacing: 1px;
}

.st-detail-icon { font-size: 24px; }

.st-detail-name {
    color:       white;
    font-weight: 700;
    font-size:   17px;
}

.st-detail-count {
    color:     rgba(255, 255, 255, 0.75);
    font-size: 12px;
}

/* ── Detail body (wrapping group cards) ───────────────────────────── */
.st-detail-body {
    padding:   20px 24px;
    display:   flex;
    flex-wrap: wrap;
    gap:       16px;
}

/* ── Group card ───────────────────────────────────────────────────── */
.st-group-card {
    background:    var(--surface);
    border-radius: 12px;
    padding:       0;
    flex:          1 1 220px;
    box-shadow:    var(--shadow-card);
    overflow:      hidden;
    border:        1px solid var(--border);
    transition:    background-color 0.2s ease;
}

html[data-theme="dark"] .st-group-card {
    background: var(--surface-2);
}

.st-group-header {
    border-bottom: 2px solid;
    padding:       8px 14px;
    display:       flex;
    align-items:   baseline;
    gap:           8px;
    transition:    background-color 0.2s ease;
}

.st-group-prefix {
    font-family:   monospace;
    font-weight:   700;
    font-size:     11px;
    border-radius: 4px;
    padding:       1px 6px;
    white-space:   nowrap;
}

.st-group-name {
    font-weight: 700;
    font-size:   13px;
    color:       var(--text);
}

/* ── Template item list ───────────────────────────────────────────── */
.st-item-list {
    margin:   0;
    padding:  10px 14px;
    list-style: none;
    display:  flex;
    flex-direction: column;
    gap:      5px;
}

.st-item {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    font-size:   12px;
    color:       var(--text);
}

.st-item-key {
    font-family:  monospace;
    font-weight:  600;
    font-size:    11px;
    border-radius: 4px;
    padding:      1px 5px;
    white-space:  nowrap;
    flex-shrink:  0;
    margin-top:   1px;
}

.st-item-name {
    line-height: 1.4;
    color:       var(--text);
}

/* ── Footer taxonomy pills ────────────────────────────────────────── */
.st-footer {
    margin-top:  24px;
    display:     flex;
    gap:         8px;
    flex-wrap:   wrap;
    align-items: center;
}

.st-footer-label {
    font-size: 12px;
    color:     var(--text-muted);
    margin-right: 4px;
}

.st-footer-pill {
    color:         white;
    border:        none;
    border-radius: 20px;
    padding:       4px 14px;
    font-size:     12px;
    font-weight:   700;
    cursor:        pointer;
    opacity:       0.5;
    transition:    opacity 0.2s ease, transform 0.15s ease;
    font-family:   monospace;
    letter-spacing: 0.5px;
}

.st-footer-pill:hover        { opacity: 0.8; transform: translateY(-1px); }
.st-footer-pill--active      { opacity: 1; }

/* ── Dark mode detail body tint adjustment ───────────────────────── */
/* The inline tint colour is rgba(r,g,b,0.10) — works in both themes  */
/* but in dark mode a slightly more visible tint looks better.        */
html[data-theme="dark"] .st-detail-body {
    filter: brightness(1.05);
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .st-container  { padding: 16px 12px; }
    .st-header     { padding: 20px 18px; border-radius: 14px; }
    .st-header-title { font-size: 20px; }
    .st-detail-header { padding: 12px 16px; gap: 10px; }
    .st-detail-body   { padding: 14px 12px; gap: 12px; }
    .st-detail-id     { font-size: 22px; padding: 2px 8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   OTCLookup  (OTCLookup.razor)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────────────── */
.otc-page {
    padding: 1.25rem 1.5rem;
    color:   var(--text);
}

/* ── Page header ──────────────────────────────────────────────────── */
.otc-page-header      { display: flex; align-items: center; margin-bottom: 1.25rem; }
.otc-page-header-left { display: flex; align-items: center; gap: 0.85rem; }

.otc-page-icon {
    font-size:     1.6rem;
    color:         var(--accent);
    background:    var(--accent-bg);
    padding:       0.5rem 0.65rem;
    border-radius: 10px;
    line-height:   1;
    flex-shrink:   0;
}

.otc-page-title    { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--text); line-height: 1.2; }
.otc-page-subtitle { font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 2px; }

/* ── Search card ──────────────────────────────────────────────────── */
.otc-search-card {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 12px;
    padding:       1.5rem;
    box-shadow:    var(--shadow-card);
}

/* ── Prefixed input (ISIN / UPI with fixed EZ / QZ badge) ────────── */
.otc-prefixed-input {
    display:       flex;
    align-items:   center;
    background:    var(--surface-2);
    border:        1px solid var(--border);
    border-radius: 8px;
    overflow:      hidden;
    transition:    border-color 0.15s ease, box-shadow 0.15s ease;
}

.otc-prefixed-input:focus-within {
    border-color: var(--accent);
    box-shadow:   0 0 0 3px var(--focus-ring);
    background:   var(--surface);
}

.otc-prefixed-input--invalid {
    border-color: #dc3545 !important;
    box-shadow:   0 0 0 3px rgba(220, 53, 69, 0.18) !important;
}

.otc-input-prefix {
    padding:         0.45rem 0.65rem;
    font-size:       0.82rem;
    font-weight:     700;
    letter-spacing:  0.05em;
    color:           var(--accent);
    background:      var(--accent-bg);
    border-right:    1px solid var(--border);
    white-space:     nowrap;
    line-height:     1.5;
    flex-shrink:     0;
    user-select:     none;
}

.otc-prefix-field {
    flex:             1;
    min-width:        0;
    border:           none;
    background:       transparent;
    color:            var(--text);
    font-size:        0.9rem;
    padding:          0.45rem 0.75rem;
    outline:          none;
}

.otc-prefix-field::placeholder { color: var(--text-muted); opacity: 0.65; }

/* Validation message */
.otc-validation-msg {
    display:     flex;
    align-items: center;
    gap:         0.3rem;
    font-size:   0.78rem;
    color:       #dc3545;
    margin-top:  0.25rem;
    line-height: 1.3;
}

html[data-theme="dark"] .otc-validation-msg { color: #f87171; }

html[data-theme="dark"] .otc-prefixed-input--invalid {
    border-color: #f87171 !important;
    box-shadow:   0 0 0 3px rgba(248, 113, 113, 0.18) !important;
}

/* ── Input fields row ─────────────────────────────────────────────── */
.otc-fields-row {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1rem;
    margin-bottom:         1.25rem;
}

.otc-field {
    display:        flex;
    flex-direction: column;
    gap:            0.35rem;
}

.otc-label {
    font-size:      0.73rem;
    font-weight:    600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:          var(--text-muted);
}

.otc-input {
    background-color: var(--surface-2);
    border:           1px solid var(--border);
    border-radius:    8px;
    color:            var(--text);
    font-size:        0.9rem;
    padding:          0.45rem 0.75rem;
    transition:       border-color 0.15s ease, box-shadow 0.15s ease;
    width:            100%;
}

.otc-input::placeholder { color: var(--text-muted); opacity: 0.65; }

.otc-input:focus {
    outline:          none;
    background-color: var(--surface);
    border-color:     var(--accent);
    box-shadow:       0 0 0 3px var(--focus-ring);
    color:            var(--text);
}

/* ── Actions row ──────────────────────────────────────────────────── */
.otc-actions-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    flex-wrap:       wrap;
    padding-top:     1rem;
    border-top:      1px solid var(--border);
}

.otc-right-actions {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex-wrap:   wrap;
}

/* ── Version toggle pill ──────────────────────────────────────────── */
.otc-version-toggle {
    display:     flex;
    align-items: center;
    gap:         0.65rem;
}

.otc-version-label {
    font-size:      0.73rem;
    font-weight:    600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:          var(--text-muted);
    white-space:    nowrap;
}

.otc-toggle-group {
    display:       flex;
    border:        1px solid var(--border);
    border-radius: 8px;
    overflow:      hidden;
}

.otc-toggle-btn {
    padding:      0.35rem 1.1rem;
    font-size:    0.85rem;
    font-weight:  500;
    background:   var(--surface-2);
    color:        var(--text-muted);
    border:       none;
    border-right: 1px solid var(--border);
    cursor:       pointer;
    transition:   background-color 0.15s ease, color 0.15s ease;
    white-space:  nowrap;
}

.otc-toggle-btn:last-child { border-right: none; }

.otc-toggle-btn:hover:not(.otc-toggle-btn--active) {
    background: var(--accent-bg);
    color:      var(--text);
}

.otc-toggle-btn--active {
    background:  var(--accent);
    color:       #ffffff;
    font-weight: 600;
}

/* ── Advanced Search toggle switch ───────────────────────────────── */
.otc-adv-switch-wrap {
    display:     flex;
    align-items: center;
    gap:         0.55rem;
    cursor:      pointer;
    user-select: none;
}

.otc-adv-label {
    font-size:   0.85rem;
    font-weight: 500;
    color:       var(--text-muted);
    white-space: nowrap;
    transition:  color 0.15s ease;
}

.otc-adv-switch-wrap:hover .otc-adv-label { color: var(--text); }

.otc-switch {
    position:       relative;
    width:          42px;
    height:         22px;
    background:     var(--border);
    border-radius:  11px;
    cursor:         pointer;
    transition:     background-color 0.2s ease;
    flex-shrink:    0;
}

.otc-switch--on { background: var(--accent); }

.otc-switch-thumb {
    position:      absolute;
    top:           3px;
    left:          3px;
    width:         16px;
    height:        16px;
    background:    #ffffff;
    border-radius: 50%;
    transition:    transform 0.2s ease;
    box-shadow:    0 1px 4px rgba(0, 0, 0, 0.25);
}

.otc-switch--on .otc-switch-thumb { transform: translateX(20px); }

/* ── Action buttons ───────────────────────────────────────────────── */
.otc-btn-group { display: flex; gap: 0.6rem; }

.otc-clear-btn {
    font-size:     0.875rem;
    padding:       0.42rem 1rem;
    border-radius: 8px;
    border:        1px solid var(--border);
    background:    var(--surface-2);
    color:         var(--text-muted);
    transition:    background-color 0.15s ease, color 0.15s ease;
    white-space:   nowrap;
}

.otc-clear-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }

.otc-search-btn,
.btn.otc-search-btn {
    font-size:        0.875rem;
    font-weight:      600;
    padding:          0.42rem 1.5rem;
    border-radius:    8px;
    background-color: var(--accent) !important;
    color:            #ffffff !important;
    border:           1px solid var(--accent) !important;
    transition:       filter 0.15s ease, box-shadow 0.15s ease;
    white-space:      nowrap;
}

.otc-search-btn:hover,
.btn.otc-search-btn:hover { filter: brightness(1.1); box-shadow: 0 2px 8px var(--focus-ring); }

/* ── Advanced panel ───────────────────────────────────────────────── */
.otc-advanced-panel {
    margin-top:    1.25rem;
    padding-top:   1.25rem;
    border-top:    1px solid var(--border);
    animation:     otc-slide-down 0.2s ease;
}

@keyframes otc-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.otc-advanced-header {
    font-size:     0.78rem;
    font-weight:   700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:         var(--text-muted);
    margin-bottom: 1rem;
    display:       flex;
    align-items:   center;
}

/* ── Advanced grid rows ───────────────────────────────────────────── */
.otc-adv-row {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   0.85rem;
    margin-bottom:         0.85rem;
}

.otc-adv-row:last-child { margin-bottom: 0; }

/* ── Searchable dropdown ──────────────────────────────────────────── */
.otc-dd-wrapper {
    position: relative;
}

.otc-dd-trigger {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.5rem;
    background:      var(--surface-2);
    border:          1px solid var(--border);
    border-radius:   8px;
    padding:         0.5rem 0.75rem;
    cursor:          pointer;
    min-height:      58px;
    transition:      border-color 0.15s ease, box-shadow 0.15s ease;
    user-select:     none;
}

.otc-dd-wrapper--open .otc-dd-trigger,
.otc-dd-trigger:hover {
    border-color: var(--accent);
    background:   var(--surface);
}

.otc-dd-wrapper--open .otc-dd-trigger {
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.otc-dd-trigger-inner {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
    overflow:       hidden;
    flex:           1;
    min-width:      0;
}

.otc-dd-field-label {
    font-size:      0.7rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--text-muted);
    line-height:    1;
}

.otc-dd-value-row {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         0.3rem;
    min-height:  22px;
}

.otc-dd-placeholder {
    font-size: 0.85rem;
    color:     var(--text-muted);
    opacity:   0.75;
}

.otc-dd-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
    background:    var(--accent-bg);
    color:         var(--accent);
    border:        1px solid var(--accent);
    border-radius: 5px;
    padding:       0.15rem 0.5rem;
    font-size:     0.8rem;
    font-weight:   500;
    max-width:     100%;
    overflow:      hidden;
    white-space:   nowrap;
    text-overflow: ellipsis;
}

.otc-dd-chip-x {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           14px;
    height:          14px;
    background:      none;
    border:          none;
    padding:         0;
    cursor:          pointer;
    color:           var(--accent);
    font-size:       0.9rem;
    line-height:     1;
    opacity:         0.7;
    flex-shrink:     0;
    transition:      opacity 0.1s ease;
}

.otc-dd-chip-x:hover { opacity: 1; }

.otc-dd-arrow {
    color:      var(--text-muted);
    font-size:  0.7rem;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.otc-dd-wrapper--open .otc-dd-arrow { transform: rotate(180deg); }

/* ── Dropdown panel ───────────────────────────────────────────────── */
.otc-dd-panel {
    position:      absolute;
    top:           calc(100% + 4px);
    left:          0;
    right:         0;
    min-width:     200px;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 8px;
    box-shadow:    var(--shadow-card-hover);
    z-index:       1050;
    overflow:      hidden;
}

.otc-dd-search-wrap {
    padding:       0.5rem;
    border-bottom: 1px solid var(--border);
    background:    var(--surface-2);
}

.otc-dd-search {
    width:         100%;
    padding:       0.35rem 0.65rem;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 6px;
    color:         var(--text);
    font-size:     0.85rem;
    outline:       none;
}

.otc-dd-search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.otc-dd-search::placeholder { color: var(--text-muted); opacity: 0.7; }

.otc-dd-list {
    max-height: 210px;
    overflow-y: auto;
}

.otc-dd-item {
    padding:    0.5rem 0.85rem;
    font-size:  0.875rem;
    color:      var(--text);
    cursor:     pointer;
    transition: background-color 0.1s ease;
    border-bottom: 1px solid var(--border-subtle);
}

.otc-dd-item:last-child { border-bottom: none; }

.otc-dd-item:hover,
.otc-dd-item--selected {
    background: var(--accent-bg);
    color:      var(--accent);
}

.otc-dd-item--selected { font-weight: 600; }

.otc-dd-empty {
    padding:    0.9rem;
    text-align: center;
    color:      var(--text-muted);
    font-size:  0.85rem;
    font-style: italic;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .otc-adv-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .otc-fields-row { grid-template-columns: repeat(2, 1fr); }
    .otc-adv-row    { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .otc-page              { padding: 0.75rem; }
    .otc-search-card       { padding: 1rem; }
    .otc-fields-row        { grid-template-columns: 1fr; gap: 0.75rem; }
    .otc-adv-row           { grid-template-columns: 1fr; }
    .otc-actions-row       { flex-direction: column; align-items: stretch; }
    .otc-right-actions     { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .otc-version-toggle    { justify-content: space-between; }
    .otc-adv-switch-wrap   { justify-content: space-between; }
    .otc-btn-group         { display: grid; grid-template-columns: 1fr 1fr; }
    .otc-dd-panel          { position: fixed; left: 0.75rem; right: 0.75rem; width: auto; }
}

/* ═══════════════════════════════════════════════════════
   OTC – Results section
   ═══════════════════════════════════════════════════════ */
.otc-results-section {
    margin-top: 1.5rem;
}

.otc-results-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.otc-results-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.otc-results-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.otc-results-badge--found {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.otc-results-badge--empty {
    background: rgba(107, 114, 128, 0.12);
    color: var(--text-muted, #6b7280);
}

html[data-theme="dark"] .otc-results-badge--found {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}

html[data-theme="dark"] .otc-results-badge--empty {
    background: rgba(156, 163, 175, 0.12);
    color: #9ca3af;
}

.otc-results-hint {
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    margin-left: auto;
}

/* No-results empty state */
.otc-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 12px;
    gap: 0.5rem;
    color: var(--text-muted, #6b7280);
}

.otc-no-results-icon {
    font-size: 2.25rem;
    opacity: 0.45;
}

.otc-no-results-title {
    font-size: 0.95rem;
    font-weight: 600;
}

.otc-no-results-sub {
    font-size: 0.82rem;
    opacity: 0.75;
}

/* Horizontal scroll wrapper — sits inside accordion body, no extra shadow */
.otc-compare-wrap {
    overflow-x: auto;
    /* Scrollbar always rendered at bottom of the wrapper, not end of page */
    overflow-y: visible;
    border-radius: 8px;
}

/* Thin, always-visible scrollbar so the user can see there's more to scroll */
.otc-compare-wrap::-webkit-scrollbar        { height: 6px; }
.otc-compare-wrap::-webkit-scrollbar-track  { background: var(--surface-2); border-radius: 3px; }
.otc-compare-wrap::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 3px; }
.otc-compare-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Comparison card grid: label col + N data cols */
.otc-compare-card {
    display: grid;
    grid-template-columns: 200px repeat(var(--otc-cols, 1), minmax(200px, 1fr));
    min-width: max-content;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
}

/* ID header row */
.otc-compare-ids-row {
    display: contents;
}

.otc-compare-id-label {
    background: var(--surface-2);
    border-bottom: 2px solid var(--border);
    padding: 0.65rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #6b7280);
    display: flex;
    align-items: center;
}

.otc-compare-id-cell {
    background: var(--surface-2);
    border-bottom: 2px solid var(--border);
    border-left: 1px solid var(--border);
    padding: 0.65rem 1rem;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    color: var(--accent);
    display: flex;
    align-items: center;
    word-break: break-all;
}

/* Section header rows */
.otc-compare-section-row {
    display: contents;
}

.otc-compare-section-cell {
    background: var(--accent-bg);
    padding: 0.45rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    grid-column: 1 / -1;
}

/* Data rows */
.otc-compare-row {
    display: contents;
}

.otc-compare-label-cell {
    padding: 0.55rem 1rem;
    font-size: 0.82rem;
    color: var(--text-muted, #6b7280);
    font-weight: 500;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.otc-compare-value-cell {
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    color: var(--text);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    display: flex;
    align-items: center;
    word-break: break-word;
}

/* Diff highlight — light: pale amber; dark: matches ToTvDataCompare table-warning */
.otc-compare-row--diff .otc-compare-label-cell {
    background: #fff3cd;
    color: #000;
}

.otc-compare-value-cell--diff {
    background: #fff3cd !important;
    color: #000 !important;
}

html[data-theme="dark"] .otc-compare-row--diff .otc-compare-label-cell {
    background: rgba(255, 193, 7, 0.18);
    color: var(--text);
}

html[data-theme="dark"] .otc-compare-value-cell--diff {
    background: rgba(255, 193, 7, 0.18) !important;
    color: var(--text) !important;
}

/* Monospace value */
.otc-compare-mono {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace !important;
    font-size: 0.78rem !important;
}

/* Status badges inside results */
.otc-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    letter-spacing: 0.03em;
}

.otc-status-badge--updated  { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.otc-status-badge--new      { background: rgba(16, 185, 129, 0.12); color: #059669; }
.otc-status-badge--active   { background: rgba(16, 185, 129, 0.12); color: #059669; }
.otc-status-badge--inactive { background: rgba(107, 114, 128, 0.12); color: #4b5563; }
.otc-status-badge--neutral  { background: rgba(107, 114, 128, 0.12); color: #4b5563; }

html[data-theme="dark"] .otc-status-badge--updated  { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
html[data-theme="dark"] .otc-status-badge--new      { background: rgba(52, 211, 153, 0.15); color: #34d399; }
html[data-theme="dark"] .otc-status-badge--active   { background: rgba(52, 211, 153, 0.15); color: #34d399; }
html[data-theme="dark"] .otc-status-badge--inactive { background: rgba(156, 163, 175, 0.12); color: #9ca3af; }
html[data-theme="dark"] .otc-status-badge--neutral  { background: rgba(156, 163, 175, 0.12); color: #9ca3af; }

/* Results responsive */
@media (max-width: 576px) {
    .otc-results-header { flex-direction: column; align-items: flex-start; }
    .otc-results-hint   { margin-left: 0; }
    .otc-compare-card   { grid-template-columns: 140px repeat(var(--otc-cols, 1), minmax(160px, 1fr)); }
    .otc-compare-label-cell,
    .otc-compare-id-label { font-size: 0.75rem; padding: 0.5rem 0.65rem; }
    .otc-compare-value-cell,
    .otc-compare-id-cell  { font-size: 0.8rem;  padding: 0.5rem 0.65rem; }
}

/* ═══════════════════════════════════════════════════════
   OTC – Result accordion cards
   ═══════════════════════════════════════════════════════ */
.otc-result-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.otc-result-card {
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: var(--shadow-card, 0 2px 12px rgba(0,0,0,0.07));
    background: var(--surface);
}

/* ── Accordion header button ── */
.otc-result-header-btn {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100%;
    padding: 0.9rem 1.1rem !important;
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    gap: 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.otc-result-header-btn:focus {
    box-shadow: none !important;
    outline: none;
}

.otc-result-header-btn:not(.collapsed) {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

/* Override Bootstrap's default chevron arrow */
.otc-result-header-btn::after {
    filter: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.35rem;
}

html[data-theme="dark"] .otc-result-header-btn::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239ca3af'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* ── Header left: template + meta ── */
.otc-res-hdr-left {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.otc-res-template {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
    word-break: break-word;
}

.otc-res-template--empty {
    color: var(--text-muted, #6b7280);
    font-weight: 600;
}

.otc-res-template-icon {
    color: var(--accent);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.otc-res-template--empty .otc-res-template-icon {
    color: var(--text-muted, #6b7280);
}

.otc-res-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
}

.otc-res-meta-item {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.otc-res-meta-item strong {
    color: var(--accent);
    font-weight: 600;
}

.otc-res-meta-sep {
    opacity: 0.4;
    font-size: 0.9rem;
}

.otc-res-mono {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.73rem !important;
    letter-spacing: 0.01em;
    word-break: break-all;
}

/* ── Match-result tags (follows .tag-badge / .tag-label convention) ── */
.otc-match-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.otc-match-tag--exact {
    background: rgba(16, 185, 129, 0.15);
    color: #065f46;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.otc-match-tag--multi {
    background: #f97316;
    color: #fff;
    border: 1px solid #ea6c0a;
}

.otc-match-tag--none {
    background: rgba(220, 38, 38, 0.1);
    color: #991b1b;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

html[data-theme="dark"] .otc-match-tag--exact {
    background: rgba(52, 211, 153, 0.15);
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, 0.3);
}

html[data-theme="dark"] .otc-match-tag--multi {
    background: #ea6c0a;
    color: #fff;
    border-color: #c2550a;
}

html[data-theme="dark"] .otc-match-tag--none {
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.25);
}

/* ── Header right: download buttons ── */
.otc-res-hdr-right {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-top: 0.1rem;
}

.otc-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: var(--accent-bg);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.otc-dl-btn:hover {
    background: var(--accent);
    color: #ffffff;
}

html[data-theme="dark"] .otc-dl-btn:hover {
    color: #ffffff;
}

/* ── Accordion body ── */
.otc-result-body {
    padding: 1.25rem 1.25rem 1rem !important;
    background: var(--surface);
}

/* ── Column visibility toggle chips ── */
.otc-col-toggles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    padding: 0.55rem 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.otc-col-toggles-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
    margin-right: 0.25rem;
}

.otc-col-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    letter-spacing: 0.01em;
    cursor: pointer;
    border: 1px solid var(--accent);
    background: var(--accent-bg);
    color: var(--accent);
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.otc-col-toggle:hover {
    background: var(--accent);
    color: #fff;
}

.otc-col-toggle--hidden {
    background: var(--surface);
    color: var(--text-muted, #6b7280);
    border-color: var(--border);
    border-style: dashed;
    opacity: 0.65;
    text-decoration: line-through;
}

.otc-col-toggle--hidden:hover {
    background: var(--surface-2);
    color: var(--text);
    opacity: 1;
    text-decoration: none;
}

/* comparison body: tighter padding; let horizontal scroll breathe */
.otc-result-body--compare {
    padding: 0.85rem !important;
}

/* Bootstrap accordion-collapse has overflow:hidden during animation;
   once fully open (the .show class without .collapsing) allow the
   compare wrapper's scrollbar to render properly */
.accordion-collapse.show:not(.collapsing) .otc-result-body--compare {
    overflow-x: visible;
}

/* ── Section headers inside body ── */
.otc-detail-section-header {
    display: flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    background: var(--accent-bg);
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    margin: 0.85rem 0 0.5rem;
}

.otc-detail-section-header:first-child {
    margin-top: 0;
}

/* ── Detail rows ── */
.otc-detail-grid {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.otc-detail-row {
    display: flex;
    border-bottom: 1px solid var(--border);
}

.otc-detail-row:last-child {
    border-bottom: none;
}

.otc-detail-label {
    flex: 0 0 220px;
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    display: flex;
    align-items: center;
}

.otc-detail-value {
    flex: 1;
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    color: var(--text);
    background: var(--surface);
    display: flex;
    align-items: center;
    word-break: break-word;
    min-width: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .otc-res-hdr-right { flex-direction: column; gap: 0.35rem; }
    .otc-detail-label  { flex: 0 0 140px; }
}

@media (max-width: 576px) {
    .otc-result-header-btn { flex-direction: column; align-items: flex-start !important; }
    .otc-result-header-btn::after { display: none; }
    .otc-res-hdr-right   { flex-direction: row; flex-wrap: wrap; }
}


/* ══════════════════════════════════════════════════════
   Manage All Companies
   ══════════════════════════════════════════════════════ */

.company-sidebar {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
}

/* Company tree nodes */
.company-node {
    cursor: pointer;
    background: var(--surface);
    color: var(--text);
    border-color: var(--border) !important;
    transition: background 0.15s;
}

.company-node:hover:not(.active) {
    background: var(--surface-2) !important;
}

.company-node.active {
    background-color: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

.company-node.active i {
    color: #fff !important;
}

.company-node.inactive {
    background-color: var(--surface-2) !important;
    color: var(--text-muted) !important;
}

.company-node.inactive i {
    color: var(--text-muted) !important;
}

/* Account nodes inside tree */
.account-node {
    font-size: 0.9rem;
    cursor: pointer;
    background: var(--surface);
    color: var(--text);
    border-color: var(--border) !important;
    transition: background 0.15s;
}

.account-node:hover:not(.active) {
    background: var(--surface-2) !important;
}

.account-node.active {
    background-color: var(--accent-bg) !important;
    color: var(--accent) !important;
    border-left: 3px solid var(--accent) !important;
}

.account-node.inactive {
    color: var(--text-muted) !important;
}

.toggle-icon {
    cursor: pointer;
}

/* Account detail card header */
.ac-card-header {
    background: var(--surface-2);
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.ac-accounts-table td,
.ac-accounts-table th {
    border-color: var(--border);
}

.ac-accounts-table tbody tr:hover {
    background: var(--surface-2);
}

/* ══════════════════════════════════════════════════════
   Create Company
   ══════════════════════════════════════════════════════ */

.cc-card-shell {
    width: 100%;
    max-width: 480px;
    padding: 2rem;
    background: var(--surface);
    border-radius: 10px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}

.cc-progress {
    height: 6px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.cc-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #60a5fa);
    transition: width 0.35s ease;
}

.cc-loader {
    position: relative;
    height: 3px;
    background: var(--border);
    overflow: hidden;
    border-radius: 2px;
}

.cc-loader::after {
    content: "";
    position: absolute;
    left: -40%;
    width: 40%;
    height: 100%;
    background: var(--accent);
    animation: cc-loading 1.2s infinite ease-in-out;
}

@keyframes cc-loading {
    from { left: -40%; }
    to   { left: 100%; }
}

.cc-hero-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text);
    text-align: center;
}

.cc-back-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 12px;
    padding: 0;
    display: inline-flex;
    align-items: center;
}

.cc-back-btn:hover {
    color: var(--text);
}

.cc-field {
    margin-bottom: 14px;
}

.cc-validation-msg {
    color: #dc2626;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.cc-success-ring {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 2px solid #16a34a;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    animation: cc-ring-reveal 0.4s ease-out;
}

@keyframes cc-ring-reveal {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* ============================================================
   ANNA EOD STATUS  (anna-*)
   ============================================================ */

/* Info note panel */
.anna-info-note {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 0.82rem;
    color: var(--text-muted);
    max-width: 680px;
}

.anna-info-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
    margin-bottom: 6px;
}

/* Search card */
.anna-search-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: var(--shadow-card);
}

.anna-search-bar {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.anna-date-group {
    display: flex;
    flex-direction: column;
}

.anna-search-btn {
    align-self: flex-end;
    min-width: 100px;
}

/* Cards */
.anna-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.anna-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
}

.anna-header-sub {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* Product badges */
.anna-product-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.anna-badge-isin {
    background: #dbeafe;
    color: #1e40af;
}

html[data-theme="dark"] .anna-badge-isin {
    background: rgba(59,130,246,0.2);
    color: #93c5fd;
}

.anna-badge-upi {
    background: #dcfce7;
    color: #166534;
}

html[data-theme="dark"] .anna-badge-upi {
    background: rgba(34,197,94,0.18);
    color: #86efac;
}

/* Main data table */
.anna-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    color: var(--text);
}

.anna-table thead {
    background: var(--surface-2);
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.anna-table th, .anna-table td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    text-align: right;
}

.anna-table .col-date  { text-align: left; min-width: 170px; }
.anna-table .col-asset { min-width: 110px; }
.anna-table .col-total {
    font-weight: 700;
    min-width: 110px;
}

/* Cell states */
.anna-cell-merged {
    text-align: right;
    color: var(--text);
    background: transparent;
}

.anna-cell-pending {
    text-align: right;
    color: var(--text);
    background: transparent;
}

.anna-cell-empty {
    text-align: right;
    color: var(--text-muted);
}

.anna-merged-icon {
    font-size: 0.72rem;
    margin-left: 4px;
    vertical-align: middle;
}

/* Pending row highlight */
.anna-table .table-warning {
    background: rgba(255, 193, 7, 0.07);
}

html[data-theme="dark"] .anna-table .table-warning {
    background: rgba(250, 204, 21, 0.06);
}

.anna-pending-label {
    font-size: 0.72rem;
    color: #856404;
    font-weight: 600;
}

html[data-theme="dark"] .anna-pending-label {
    color: #fde68a;
}

/* Grand total row */
.anna-grand-total-row td {
    background: var(--accent-bg, rgba(0,120,212,0.07));
    font-weight: 700;
    color: var(--text);
    border-top: 2px solid var(--border);
}

/* Legend */
.anna-legend {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 10px 16px;
    font-size: 0.78rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

.anna-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

/* Summary table (last processing date) */
.anna-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    color: var(--text);
}

.anna-summary-table thead {
    background: var(--surface-2);
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.anna-summary-table th, .anna-summary-table td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
}

.anna-summary-table .col-ac {
    font-weight: 600;
    min-width: 160px;
}

.anna-summary-date {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
}

.anna-date-ok {
    background: rgba(22, 163, 74, 0.1);
    color: #166534;
}

html[data-theme="dark"] .anna-date-ok {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.anna-date-stale {
    background: rgba(234, 179, 8, 0.12);
    color: #854d0e;
}

html[data-theme="dark"] .anna-date-stale {
    background: rgba(250, 204, 21, 0.1);
    color: #fde68a;
}

.anna-date-empty {
    color: var(--text-muted);
    background: transparent;
}

/* ============================================================
   MANAGE EMAIL TEMPLATES  (et-*)
   ============================================================ */

.et-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    max-width: 580px;
    box-shadow: var(--shadow-card);
}

.et-field {
    margin-bottom: 16px;
}

.et-label {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 5px;
}

.et-optional {
    font-weight: 400;
    color: var(--text-muted);
}

.et-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ============================================================
   MANAGE DATE FORMAT  (df-*)
   ============================================================ */

.df-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    max-width: 520px;
    box-shadow: var(--shadow-card);
}

.df-field {
    margin-bottom: 16px;
}

.df-label {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 5px;
}

.df-input {
    font-family: monospace;
}

.df-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.df-hint code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 0.77rem;
    color: var(--accent);
}

.df-preview-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.df-preview-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    white-space: nowrap;
}

.df-preview-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    font-family: monospace;
}

/* ============================================================
   VIEW CFI CACHE  (cfi-*)
   ============================================================ */

.cfi-search-bar {
    position: relative;
    max-width: 360px;
}

.cfi-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.82rem;
    pointer-events: none;
}

.cfi-search-input {
    padding-left: 30px;
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

.cfi-search-input:focus {
    background: var(--surface);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.12);
}

.cfi-search-input::placeholder {
    color: var(--text-muted);
}

.cfi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.cfi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    color: var(--text);
}

.cfi-table thead {
    background: var(--surface-2);
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.cfi-table th,
.cfi-table td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

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

.cfi-table tbody tr:hover {
    background: var(--surface-2);
}

.cfi-code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    font-family: monospace;
}

/* ============================================================
   VIEW LOGIN / LOGOUT  (ll-*)
   ============================================================ */

.ll-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ll-filter-search,
.ll-filter-date {
    position: relative;
}

.ll-filter-search { min-width: 260px; }
.ll-filter-date   { min-width: 160px; }

.ll-filter-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.8rem;
    pointer-events: none;
}

.ll-filter-input {
    padding-left: 28px;
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

.ll-filter-input:focus {
    background: var(--surface);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.12);
}

.ll-filter-input::placeholder {
    color: var(--text-muted);
}

.ll-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.ll-table-scroll {
    max-height: 600px;
    overflow-y: auto;
}

.ll-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    color: var(--text);
}

.ll-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2);
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ll-table th,
.ll-table td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

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

.ll-table tbody tr:hover {
    background: var(--surface-2);
}

.ll-detail-cell {
    white-space: normal;
    max-width: 340px;
    font-size: 0.78rem;
    color: var(--text-muted);
}