/* ==========================================================================
   FINTECH DESIGN SYSTEM — Operations Control Center
   Version: 11.0 — Deep navy + electric blue glass panels (rounded crypto-fintech UI)
   Canonical: --bg-main, --bg-card, --accent-soft, --sidebar-dark, --text-dark, --text-light.
   ========================================================================== */

/* ==========================================================================
   FONTS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Inter:wght@100..900&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Light popover calendar (Flatpickr) — shared with app static URL */
@import url('../vendor/flatpickr/flatpickr.min.css');

/* ==========================================================================
   DESIGN TOKENS — DEFAULT (LIGHT / LAVENDER SLATE)
   ========================================================================== */
:root {
  /* ─── Brand palette — blues dampened (~40% chroma vs electric primaries) ─── */
  --bg-main:       #1b2e4a;
  --bg-card:       #274462;
  --accent-soft:   color-mix(in srgb, #5c9fff 40%, #6c7f94 60%);
  --sidebar-dark:  #152a42;
  --text-dark:     #e8eef9;
  --text-light:    #f8fafc;

  /* ─── Design scale (mapped from brand tokens) ─── */
  --ds-page-bg:           var(--bg-main);
  --ds-page-bg-elevated:  color-mix(in srgb, var(--bg-main) 78%, var(--accent-soft) 22%);
  --ds-surface:           var(--bg-card);
  --ds-surface-muted:     color-mix(in srgb, var(--bg-main) 38%, var(--bg-card) 62%);
  --ds-primary:           var(--accent-soft);
  --ds-primary-hover:     color-mix(in srgb, var(--accent-soft) 78%, var(--text-dark) 22%);
  --ds-primary-soft:      color-mix(in srgb, var(--accent-soft) 24%, transparent);
  --ds-accent:            var(--accent-soft);
  --ds-accent-hover:      color-mix(in srgb, var(--accent-soft) 72%, var(--sidebar-dark) 28%);
  --ds-accent-muted:      color-mix(in srgb, var(--accent-soft) 20%, transparent);
  --ds-secondary:         var(--sidebar-dark);
  --ds-secondary-soft:    color-mix(in srgb, var(--sidebar-dark) 18%, transparent);
  --ds-text:              var(--text-dark);
  --ds-text-secondary:    color-mix(in srgb, var(--text-dark) 58%, var(--accent-soft) 42%);
  --ds-text-muted:        color-mix(in srgb, var(--text-dark) 42%, var(--accent-soft) 58%);
  --ds-border:            color-mix(in srgb, var(--text-light) 5%, transparent);
  --ds-border-md:         color-mix(in srgb, var(--text-light) 8%, transparent);
  --ds-border-strong:     color-mix(in srgb, var(--text-light) 13%, transparent);

  /* Ambient page — blue bloom for mesh backgrounds */
  --ds-bg-bloom-tr:       color-mix(in srgb, var(--accent-soft) 7%, transparent);
  --ds-bg-bloom-bl:       color-mix(in srgb, #3b82f6 2.5%, transparent);
  --ds-bg-noise-opacity:  0;

  /* Full-viewport mesh (fintech aurora) — same palette, soft overlapping glows */
  --ds-page-mesh:
    radial-gradient(ellipse 88% 58% at 100% -18%, color-mix(in srgb, var(--accent-soft) 10%, transparent), transparent 54%),
    radial-gradient(ellipse 72% 52% at -12% 8%, color-mix(in srgb, var(--bg-card) 68%, var(--accent-soft) 32%) 22%, transparent 56%),
    radial-gradient(ellipse 62% 48% at 96% 92%, color-mix(in srgb, #60a5fa 2.5%, transparent), transparent 52%),
    radial-gradient(ellipse 52% 44% at 4% 88%, color-mix(in srgb, var(--sidebar-dark) 32%, transparent), transparent 50%),
    radial-gradient(ellipse 70% 56% at 52% 48%, color-mix(in srgb, var(--accent-soft) 3%, transparent), transparent 58%),
    linear-gradient(
      168deg,
      var(--bg-main) 0%,
      color-mix(in srgb, var(--bg-main) 52%, var(--bg-card) 48%) 38%,
      color-mix(in srgb, var(--bg-main) 62%, var(--sidebar-dark) 38%) 100%
    );

  /* Glass stack for elevated panels (backdrop-filter applied on shells below) */
  --ds-glass-blur:       22px;
  --ds-glass-saturate:   118%;
  --ds-glass-rim:        color-mix(in srgb, var(--text-light) 9%, transparent);

  /* Rounded panels — translucent wash so page mesh reads through blur */
  --ds-surface-gradient:
    radial-gradient(ellipse 120% 90% at 12% -10%, color-mix(in srgb, var(--accent-soft) 9%, transparent), transparent 58%),
    radial-gradient(ellipse 90% 75% at 96% 100%, color-mix(in srgb, #60a5fa 2.5%, transparent), transparent 55%),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 48%, transparent) 0%,
      color-mix(in srgb, var(--bg-card) 36%, transparent) 44%,
      color-mix(in srgb, var(--bg-main) 50%, transparent) 100%
    );
  --ds-card-border:       color-mix(in srgb, var(--accent-soft) 6%, transparent);
  --ds-card-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-soft) 4%, transparent),
    0 4px 28px color-mix(in srgb, #000 34%, transparent),
    0 0 52px -14px color-mix(in srgb, var(--accent-soft) 11%, transparent);
  --ds-card-shadow-hover:
    0 0 0 1px color-mix(in srgb, var(--accent-soft) 7%, transparent),
    0 14px 48px color-mix(in srgb, #000 38%, transparent),
    0 0 72px -12px color-mix(in srgb, var(--accent-soft) 14%, transparent);

  /* Shell — edge from soft shadow + hairline, not a hard stroke */
  --ds-shell-bg:          color-mix(in srgb, var(--sidebar-dark) 72%, transparent);
  --ds-shell-border:      transparent;
  --shadow-hairline:      0 0 0 1px color-mix(in srgb, var(--accent-soft) 6%, transparent);
  --ds-shell-shadow:      var(--shadow-hairline),
    0 8px 32px color-mix(in srgb, #0c1929 35%, transparent),
    0 0 48px -16px color-mix(in srgb, var(--accent-soft) 9%, transparent);
  --ds-shell-blur:        18px;
  --ds-elev-shadow-sm:    0 1px 3px color-mix(in srgb, var(--sidebar-dark) 14%, transparent);

  /* ─── Legacy --color-* (mapped to roles) ─── */
  --color-primary:           var(--ds-primary);
  --color-secondary:         var(--ds-primary-hover);
  --color-tertiary:          var(--ds-secondary);
  --color-accent-light:      var(--ds-accent);
  --color-background-pale: color-mix(in srgb, var(--bg-main) 55%, var(--bg-card) 45%);

  --color-base:              var(--ds-page-bg);
  --color-surface:           var(--ds-page-bg);
  --color-surface-1:         var(--ds-surface);
  --color-surface-2:         var(--ds-surface-muted);
  --color-surface-3:         color-mix(in srgb, var(--bg-card) 80%, var(--accent-soft) 20%);
  --color-surface-4:         color-mix(in srgb, var(--bg-card) 68%, var(--accent-soft) 28%);

  --btn-surface:             color-mix(in srgb, var(--bg-main) 35%, var(--bg-card) 65%);
  --btn-surface-hover:       color-mix(in srgb, var(--bg-card) 75%, var(--accent-soft) 25%);
  --btn-text-ui:             var(--ds-text);
  --btn-border-slate:        var(--ds-border-md);
  --btn-primary-bg:          #22c55e;
  --btn-primary-bg-hover:    #16a34a;
  --btn-primary-fg:          #ffffff;
  --btn-secondary-bg:        transparent;
  --btn-secondary-fg:        var(--ds-text);
  --btn-danger-bg:           #c44747;
  --btn-danger-bg-hover:     #a73737;
  --btn-danger-fg:           #ffffff;
  --action-secondary-border: var(--ds-border-md);

  --color-border:            var(--ds-border);
  --color-border-md:         var(--ds-border-md);
  --color-border-strong:     var(--ds-border-strong);

  --color-text-primary:      var(--ds-text);
  --color-text-secondary:    var(--ds-text-secondary);
  --color-text-tertiary:     var(--ds-text-muted);
  --color-text-disabled:     color-mix(in srgb, var(--text-dark) 35%, var(--accent-soft) 65%);
  --color-text-inverse:      var(--text-light);

  --color-accent:            var(--ds-accent);
  --color-accent-hover:      var(--ds-accent-hover);
  --color-accent-dark:       var(--sidebar-dark);
  --color-accent-glow:       color-mix(in srgb, var(--accent-soft) 10%, transparent);
  --color-accent-subtle:     var(--ds-accent-muted);
  --color-accent-border:     color-mix(in srgb, var(--accent-soft) 9%, transparent);

  --color-teal:              var(--accent-soft);
  --color-teal-glow:         color-mix(in srgb, var(--accent-soft) 7%, transparent);
  --color-teal-subtle:       color-mix(in srgb, var(--accent-soft) 12%, transparent);

  --color-purple:            #6e6494;
  --color-purple-glow:       color-mix(in srgb, #6e6494 14%, transparent);
  --color-purple-subtle:     color-mix(in srgb, #6e6494 8%, transparent);

  --color-gold:              #9a7d1a;
  --color-gold-glow:         rgba(154, 125, 26, 0.1);
  --color-gold-subtle:       rgba(154, 125, 26, 0.07);

  --color-success:           #34d399;
  --color-success-glow:      rgba(52, 211, 153, 0.38);
  --color-success-subtle:    rgba(52, 211, 153, 0.14);
  --color-success-bg:        color-mix(in srgb, #34d399 20%, var(--bg-card));

  --color-error:             #c44747;
  --color-error-glow:        rgba(196, 71, 71, 0.12);
  --color-error-subtle:      rgba(196, 71, 71, 0.08);
  --color-error-bg:          color-mix(in srgb, #c44747 22%, var(--bg-card));

  --color-warning:           #b8860d;
  --color-warning-glow:      rgba(184, 134, 13, 0.12);
  --color-warning-subtle:    rgba(184, 134, 13, 0.08);
  --color-warning-bg:        color-mix(in srgb, #b8860d 22%, var(--bg-card));

  --color-info:              #5a6a9a;
  --color-info-subtle:       color-mix(in srgb, #5a6a9a 12%, transparent);
  --color-info-bg:           color-mix(in srgb, var(--bg-main) 70%, var(--accent-soft) 30%);

  --color-primary-hover:     var(--ds-primary-hover);
  --color-primary-light:     var(--color-background-pale);
  --color-primary-dark:      var(--sidebar-dark);
  --color-secondary-hover:   var(--ds-primary-hover);
  --color-secondary-light:   var(--accent-soft);
  --color-secondary-dark:    var(--sidebar-dark);
  --color-white:             #ffffff;
  --color-gray-50:           var(--ds-surface-muted);
  --color-gray-100:          color-mix(in srgb, var(--bg-main) 40%, var(--bg-card) 60%);
  --color-gray-200:          color-mix(in srgb, var(--bg-card) 55%, var(--accent-soft) 45%);
  --color-gray-300:          color-mix(in srgb, var(--accent-soft) 32%, transparent);
  --color-gray-400:          color-mix(in srgb, var(--text-dark) 45%, var(--accent-soft) 55%);
  --color-gray-500:          var(--ds-text-muted);
  --color-gray-600:          var(--ds-text-secondary);
  --color-gray-700:          var(--ds-text);
  --color-gray-800:          var(--ds-text);
  --color-gray-900:          var(--ds-text);
  --color-bg-primary:        var(--color-surface-1);
  --color-bg-secondary:      var(--ds-page-bg);
  --color-bg-tertiary:       var(--color-surface-2);
  --color-bg-card:           var(--color-surface-1);
  --color-bg-hover:          var(--color-surface-3);
  --color-bg-elevated:       var(--color-surface-1);
  --color-bg-overlay:        color-mix(in srgb, var(--sidebar-dark) 48%, transparent);
  --color-border-medium:     var(--color-border-md);
  --color-border-focus:      var(--color-accent);
  --color-success-light:     #6ee7b7;
  --color-error-light:       #e07070;
  --color-warning-light:     #d4a21a;
  --color-info-light:        #4a9daa;

  --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:      'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace;

  --font-size-xs:   12px;
  --font-size-sm:   13px;
  --font-size-base: 16px;
  --font-size-md:   16px;
  --font-size-lg:   17px;
  --font-size-xl:   21px;
  --font-size-2xl:  28px;
  --font-size-3xl:  34px;

  --font-weight-normal:   400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.2;
  --line-height-normal:  1.575;
  --line-height-relaxed: 1.68;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.04em;

  --spacing-1:  4px;
  --spacing-2:  8px;
  --spacing-3:  12px;
  --spacing-4:  16px;
  --spacing-5:  20px;
  --spacing-6:  24px;
  --spacing-7:  28px;
  --spacing-8:  32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;

  --radius-sm:   12px;
  --radius:      22px;
  --radius-md:   26px;
  --radius-lg:   32px;
  --radius-xl:   36px;
  --radius-full: 9999px;

  --shadow-sm:   var(--shadow-hairline), 0 1px 4px color-mix(in srgb, #000 28%, transparent),
    0 0 24px -16px color-mix(in srgb, var(--accent-soft) 7%, transparent);
  --shadow-base: var(--shadow-hairline), 0 6px 20px color-mix(in srgb, #000 34%, transparent),
    0 0 32px -16px color-mix(in srgb, var(--accent-soft) 10%, transparent);
  --shadow-md:   var(--shadow-hairline), 0 10px 32px color-mix(in srgb, #000 40%, transparent),
    0 0 48px -14px color-mix(in srgb, var(--accent-soft) 12%, transparent);
  --shadow-lg:   var(--shadow-hairline), 0 20px 52px color-mix(in srgb, #000 46%, transparent),
    0 0 64px -12px color-mix(in srgb, var(--accent-soft) 14%, transparent);
  --shadow-inner: inset 0 1px 2px color-mix(in srgb, var(--sidebar-dark) 8%, transparent);
  --shadow-accent: 0 4px 28px color-mix(in srgb, var(--accent-soft) 5%, transparent);
  --shadow-teal:   var(--shadow-accent);

  --transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --control-radius: 20px;
  --control-transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
  --focus-ring: 0 0 0 3px var(--color-accent-subtle);
  --icon-size-ui: 1.25rem;

  --z-base:     0;
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-overlay:  1200;
  --z-modal:    1300;
  --z-popover:  1400;
  --z-tooltip:  1500;
  --z-page-bg:  -1;

  --layout-sidebar-width: 280px;
  --layout-topbar-height: 56px;
  --shell-float-inset: 18px;
  --shell-float-gap: 14px;
  /* Vertical space only (topbar bottom → main content); keep shell-float-gap for horizontal sidebar inset */
  --layout-below-topbar-gap: 8px;
  --layout-stack-below-topbar: calc(
    var(--shell-float-inset) + var(--layout-topbar-height) + var(--layout-below-topbar-gap)
  );
  --layout-sidebar-edge: calc(var(--layout-sidebar-width) + var(--shell-float-inset) + var(--shell-float-gap));
  --layout-page-padding: 2rem;
  --layout-content-padding-top: 12px;
  /* Floating sidebar panel: max height + vertical centering (see .sidebar) */
  --sidebar-panel-max-height: min(88vh, calc(100vh - 2 * var(--shell-float-inset)));

  /* Page canvas — same opaque tone as .global-topbar-search-wrap (see below) */
  --ds-app-canvas: color-mix(in srgb, var(--bg-main) 38%, var(--bg-card) 62%);

  /* Tables — card-toned surfaces, high-contrast body copy */
  --tbl-surface:       var(--bg-card);
  --tbl-divider:       color-mix(in srgb, var(--text-light) 4%, transparent);
  --tbl-divider-md:    color-mix(in srgb, var(--text-light) 7%, transparent);
  /* Header strip: slightly lifted vs body (reference: panel header anchor) */
  --tbl-header-bg:     linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-card) 94%, var(--accent-soft) 6%) 0%,
    color-mix(in srgb, var(--bg-card) 82%, var(--bg-main) 18%) 100%
  );
  --tbl-header-text:   color-mix(in srgb, var(--text-dark) 88%, var(--accent-soft) 12%);
  --tbl-header-highlight: color-mix(in srgb, var(--text-light) 11%, transparent);
  --tbl-header-rule:   color-mix(in srgb, var(--text-light) 5%, transparent);
  --tbl-hover-bg:      color-mix(in srgb, var(--bg-card) 86%, var(--accent-soft) 14%);
  --tbl-accent-bar:    color-mix(in srgb, var(--accent-soft) 42%, transparent);
  --tbl-row-alt:       color-mix(in srgb, var(--bg-card) 72%, var(--bg-main) 28%);
  --tbl-text:          var(--text-dark);
  --tbl-text-sec:      color-mix(in srgb, var(--text-dark) 52%, var(--accent-soft) 48%);
  --tbl-radius:        32px;
  --tbl-cell-pad-y:    18px;
  --tbl-cell-pad-x:    20px;
  --tbl-header-pad-y:  15px;
  --tbl-header-font-size:  var(--font-size-lg);
  --tbl-body-font-size:    var(--font-size-base);
  --tbl-shadow:        var(--ds-card-shadow);
  --tbl-shadow-hover:  var(--ds-card-shadow-hover);

  /* Inline search / filters — blend into panels (avoid harsh accent slabs) */
  --ds-search-bg:       color-mix(in srgb, var(--bg-card) 90%, var(--accent-soft) 10%);
  --ds-search-border:   color-mix(in srgb, var(--accent-soft) 14%, var(--text-light) 4%);
  --ds-search-focus-bg: color-mix(in srgb, var(--bg-card) 84%, var(--accent-soft) 16%);
}

/* Bootstrap + theme: LIGHT (default) */
[data-bs-theme="light"],
[data-theme="light"] {
  color-scheme: light;

  /* Cool light UI — deeper denim / ice slate mesh (still “light”, not dark mode) */
  --ds-mesh-ice:        #b3c8e4;
  --ds-mesh-mist:       #a0b9da;
  --ds-mesh-periwinkle: #92abce;
  --ds-mesh-bloom-tr:   color-mix(in srgb, #7eb0f0 15%, transparent);
  --ds-mesh-bloom-tl:   color-mix(in srgb, #a0abe8 12%, transparent);
  --ds-mesh-bloom-br:   color-mix(in srgb, #8eb4ea 14%, transparent);
  --ds-mesh-bloom-bl:   color-mix(in srgb, #aaa2de 10%, transparent);

  /* Fallback plane: averaged field (mesh on body::before stays layered, not flat) */
  --ds-app-canvas:      color-mix(in srgb, var(--ds-mesh-ice) 86%, #5f7390 14%);
  --ds-page-bg:         var(--ds-app-canvas);
  /* Cards / shells read slightly above the canvas */
  --ds-surface:         color-mix(in srgb, #dce9f8 82%, var(--accent-soft) 18%);
  --ds-surface-muted:   color-mix(in srgb, #cedeef 82%, var(--accent-soft) 18%);
  /* Fluid light mesh — cool field, soft blooms + depth in the spine */
  --ds-page-mesh:
    radial-gradient(ellipse 120% 95% at 96% -6%, var(--ds-mesh-bloom-tr), transparent 40%),
    radial-gradient(ellipse 100% 82% at -8% 10%, var(--ds-mesh-bloom-tl), transparent 44%),
    radial-gradient(ellipse 92% 78% at 108% 92%, var(--ds-mesh-bloom-br), transparent 42%),
    radial-gradient(ellipse 78% 64% at -4% 98%, var(--ds-mesh-bloom-bl), transparent 48%),
    radial-gradient(ellipse 88% 72% at 48% 42%, color-mix(in srgb, var(--ds-mesh-mist) 52%, transparent), transparent 65%),
    radial-gradient(ellipse 55% 48% at 72% 18%, color-mix(in srgb, var(--ds-mesh-periwinkle) 40%, transparent), transparent 58%),
    linear-gradient(
      168deg,
      var(--ds-mesh-ice) 0%,
      color-mix(in srgb, var(--ds-mesh-mist) 78%, #5e6f88 22%) 40%,
      color-mix(
        in srgb,
        color-mix(in srgb, var(--ds-mesh-periwinkle) 82%, #546785 18%) 90%,
        var(--accent-soft) 10%
      ) 72%,
      var(--ds-mesh-mist) 100%
    );

  /* Tables & panels — misted card planes (avoid #ffffff mixes) */
  --tbl-surface:       color-mix(in srgb, #e6eef8 85%, var(--accent-soft) 15%);
  --tbl-header-bg:     linear-gradient(
    180deg,
    color-mix(in srgb, #e8f1fa 96.5%, var(--accent-soft) 3.5%) 0%,
    color-mix(in srgb, #dae6f4 96%, var(--accent-soft) 4%) 100%
  );
  --tbl-header-text:   color-mix(in srgb, #5c6b80 92%, var(--accent-soft) 8%);
  --tbl-header-highlight: color-mix(in srgb, #e8f2fb 10%, transparent);
  --tbl-row-alt:       color-mix(in srgb, #d8e6f4 91%, var(--accent-soft) 9%);
  --tbl-hover-bg:      color-mix(in srgb, #c9dcf0 88%, var(--accent-soft) 12%);
  --tbl-text:          #152535;
  --tbl-text-sec:      color-mix(in srgb, #3d4f63 78%, var(--accent-soft) 22%);
  --tbl-cell-pad-y:    18px;
  --tbl-cell-pad-x:    22px;
  --tbl-header-pad-y:  15px;

  /* Page chrome copy — slate on cool ice */
  --ds-text:              #132032;
  --ds-text-secondary:    color-mix(in srgb, #334e63 78%, var(--accent-soft) 22%);
  --ds-text-muted:        color-mix(in srgb, #4a6278 72%, var(--accent-soft) 28%);
  --color-text-primary:   var(--ds-text);
  --color-text-secondary: var(--ds-text-secondary);
  --color-text-tertiary:  var(--ds-text-muted);

  --ds-glass-blur: 22px;
  --ds-glass-saturate: 128%;
  --ds-glass-rim: color-mix(in srgb, color-mix(in srgb, #f8fafc 50%, #9db0c4 50%) 58%, var(--accent-soft) 42%);
  --ds-surface-gradient:
    radial-gradient(ellipse 108% 86% at 6% -14%, color-mix(in srgb, var(--accent-soft) 7%, transparent), transparent 54%),
    radial-gradient(ellipse 96% 74% at 104% 102%, color-mix(in srgb, #818cf8 6.5%, transparent), transparent 50%),
    linear-gradient(
      172deg,
      color-mix(in srgb, #d2e2f4 52%, transparent) 0%,
      color-mix(in srgb, var(--ds-mesh-mist) 44%, transparent) 50%,
      color-mix(in srgb, #c6daf0 50%, transparent) 100%
    );
  /* Rim + depth — ink dividers, blue-tinted elevation (matches :root shells) */
  --shadow-hairline:      0 0 0 1px color-mix(in srgb, var(--accent-soft) 11%, transparent);
  --ds-border:            color-mix(in srgb, #64748b 12%, transparent);
  --ds-border-md:         color-mix(in srgb, #64748b 18%, transparent);
  --ds-border-strong:     color-mix(in srgb, #64748b 28%, transparent);
  --tbl-divider:          color-mix(in srgb, #64748b 10%, transparent);
  --tbl-divider-md:       color-mix(in srgb, #64748b 16%, transparent);
  --ds-search-bg:         color-mix(in srgb, var(--tbl-surface) 94%, var(--accent-soft) 6%);
  --ds-search-border:     color-mix(in srgb, #64748b 20%, transparent);
  --ds-search-focus-bg:   color-mix(in srgb, var(--tbl-surface) 88%, var(--accent-soft) 12%);
  --ds-shell-border:      transparent;
  --ds-shell-shadow:      var(--shadow-hairline),
    0 8px 30px color-mix(in srgb, #0f172a 14%, transparent),
    0 0 40px -12px color-mix(in srgb, var(--accent-soft) 9%, transparent);
  --shadow-sm:   var(--shadow-hairline), 0 1px 4px color-mix(in srgb, #0f172a 10%, transparent);
  --shadow-base: var(--shadow-hairline), 0 6px 22px color-mix(in srgb, #0f172a 14%, transparent),
    0 0 36px -16px color-mix(in srgb, var(--accent-soft) 5.5%, transparent);
  --shadow-md:   var(--shadow-hairline), 0 12px 36px color-mix(in srgb, #0f172a 16%, transparent),
    0 0 48px -14px color-mix(in srgb, var(--accent-soft) 7%, transparent);
  --shadow-lg:   var(--shadow-hairline), 0 20px 52px color-mix(in srgb, #0f172a 18%, transparent),
    0 0 64px -12px color-mix(in srgb, var(--accent-soft) 9%, transparent);

  /* Glass panel edge + lift — reference: frosted tiles on mesh */
  --ds-card-border: color-mix(in srgb, var(--accent-soft) 22%, color-mix(in srgb, #f8fafc 22%, transparent 78%) 78%);
  --ds-card-shadow:
    0 0 0 1px color-mix(in srgb, #f8fafc 14%, transparent),
    0 6px 30px color-mix(in srgb, #0f172a 16%, transparent),
    0 0 56px -14px color-mix(in srgb, var(--accent-soft) 15%, transparent);
  --ds-card-shadow-hover:
    0 0 0 1px color-mix(in srgb, var(--accent-soft) 14%, transparent),
    0 16px 46px color-mix(in srgb, #0f172a 20%, transparent),
    0 0 72px -12px color-mix(in srgb, var(--accent-soft) 20%, transparent);
  --tbl-shadow:        var(--ds-card-shadow);
  --tbl-shadow-hover:  var(--ds-card-shadow-hover);
  --ds-shell-bg:       color-mix(in srgb, #163556 76%, transparent);
  --ds-shell-blur:     24px;
  --bs-body-color: var(--color-text-primary);
  --bs-body-bg: var(--ds-page-bg);
  --bs-secondary-color: var(--color-text-secondary);
  --bs-secondary-bg: var(--ds-surface-muted);
  --bs-emphasis-color: var(--color-text-primary);
  --bs-border-color: var(--ds-border-md);
  --bs-table-color: var(--tbl-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--tbl-divider);
  --bs-table-hover-color: var(--tbl-text);
  --bs-table-hover-bg: var(--tbl-hover-bg);
  --bs-table-striped-bg: var(--tbl-row-alt);
  --bs-table-striped-color: var(--tbl-text);
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-accent-hover);
  --bs-card-bg: var(--ds-surface);
  --bs-card-border-color: transparent;
  --bs-card-color: var(--color-text-primary);
  --bs-dropdown-bg: var(--ds-surface);
  --bs-dropdown-color: var(--color-text-primary);
  --bs-dropdown-border-color: var(--ds-border);
  --bs-form-control-bg: var(--ds-surface);
  --bs-form-control-color: var(--color-text-primary);
  --bs-modal-bg: var(--ds-surface);
  --bs-modal-color: var(--color-text-primary);
  /* Success + primary CTA — readable green on light surfaces */
  --color-success: #059669;
  --color-success-glow: rgba(5, 150, 105, 0.28);
  --color-success-subtle: rgba(5, 150, 105, 0.12);
  --color-success-bg: color-mix(in srgb, #059669 12%, #c5d8eb);
  --color-success-light: #10b981;
  --btn-primary-bg: #16a34a;
  --btn-primary-bg-hover: #15803d;
  --btn-primary-fg: #ffffff;
}

html[data-theme="light"] body,
html[data-bs-theme="light"] body {
  background-color: transparent;
  background-image: none;
}

/* Fallback plane under fixed mesh (mesh paints on body::before) */
html[data-theme="light"],
html[data-bs-theme="light"] {
  background-color: var(--ds-app-canvas);
}

[data-theme="light"] .sidebar {
  color: var(--text-light);
  --sidebar-active-rail: color-mix(in srgb, #7ab0e8 55%, #94a3b8 45%);
  --sidebar-active-fg: #ffffff;
  --sidebar-active-bg: color-mix(in srgb, var(--accent-soft) 18%, transparent);
}

[data-theme="light"] .sidebar .sidebar-brand {
  color: var(--text-light);
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--text-light) 14%, transparent);
}

[data-theme="light"] .sidebar .sidebar-brand-main,
[data-theme="light"] .sidebar .sidebar-brand-sub {
  color: var(--text-light);
}

[data-theme="light"] .sidebar .sidebar-section-label,
[data-bs-theme="light"] .sidebar .sidebar-section-label {
  color: color-mix(in srgb, #f8fafc 78%, transparent);
}

[data-theme="light"] .sidebar .sidebar-l1,
[data-bs-theme="light"] .sidebar .sidebar-l1 {
  color: color-mix(in srgb, #f8fafc 90%, var(--accent-soft) 10%);
}

[data-theme="light"] .sidebar .sidebar-l1:hover,
[data-bs-theme="light"] .sidebar .sidebar-l1:hover {
  background: color-mix(in srgb, #ffffff 12%, transparent);
  color: #f8fafc;
}

[data-theme="light"] .sidebar .sidebar-l1.active,
[data-bs-theme="light"] .sidebar .sidebar-l1.active {
  color: var(--sidebar-active-fg, #f8fafc);
  background: var(--sidebar-active-bg, color-mix(in srgb, var(--accent-soft) 22%, transparent));
}

[data-theme="light"] .sidebar .sidebar-l2,
[data-bs-theme="light"] .sidebar .sidebar-l2 {
  color: color-mix(in srgb, #f8fafc 86%, var(--accent-soft) 14%);
}

[data-theme="light"] .sidebar .sidebar-l2:hover,
[data-bs-theme="light"] .sidebar .sidebar-l2:hover {
  background: color-mix(in srgb, #ffffff 10%, transparent);
  color: #f8fafc;
}

[data-theme="light"] .sidebar .sidebar-l2.active,
[data-bs-theme="light"] .sidebar .sidebar-l2.active {
  color: var(--sidebar-active-fg, #f8fafc);
  background: color-mix(in srgb, var(--accent-soft) 20%, transparent);
}

[data-theme="light"] .sidebar .sidebar-l2-badge {
  background: color-mix(in srgb, var(--text-light) 14%, transparent);
  color: var(--text-light);
}

[data-theme="light"] .sidebar .sidebar-l2-badge.badge-new {
  background: color-mix(in srgb, var(--accent-soft) 35%, transparent);
  color: var(--text-light);
}

[data-theme="light"] .sidebar a {
  color: inherit;
}

[data-theme="light"] .global-topbar,
[data-theme="light"] .injected-global-topbar {
  color: var(--text-light);
}

[data-theme="light"] .global-topbar .sidebar-brand-main,
[data-theme="light"] .injected-global-topbar .sidebar-brand-main {
  color: var(--text-light);
}

[data-theme="light"] .global-topbar .user-menu-btn,
[data-theme="light"] .injected-global-topbar .user-menu-btn {
  color: var(--text-light);
}

[data-theme="light"] .global-topbar .user-name,
[data-theme="light"] .injected-global-topbar .user-name {
  color: var(--text-light);
}

[data-theme="light"] .global-topbar .user-role,
[data-theme="light"] .injected-global-topbar .user-role {
  color: color-mix(in srgb, var(--text-light) 72%, transparent);
}

[data-theme="light"] .global-topbar .user-menu-btn:hover,
[data-theme="light"] .injected-global-topbar .user-menu-btn:hover {
  background: color-mix(in srgb, var(--text-light) 14%, transparent);
}

[data-theme="light"] .global-topbar .user-avatar,
[data-theme="light"] .injected-global-topbar .user-avatar {
  background: var(--accent-soft);
  color: var(--text-light);
}

[data-theme="light"] .sidebar-content {
  background-color: transparent;
}

[data-theme="light"] .injected-page-content {
  background-color: transparent;
}

/* Main content: readable copy on light lavender canvas */
[data-theme="light"] .main-container,
[data-theme="light"] .page-wrapper {
  background-color: transparent;
}

/* Tables (light): body cells use brand text for contrast on --bg-card */
[data-theme="light"] .table th,
[data-theme="light"] .table td,
[data-theme="light"] .data-table th,
[data-theme="light"] .data-table td,
[data-theme="light"] .standard-data-table th,
[data-theme="light"] .standard-data-table td,
[data-theme="light"] .brokers-table th,
[data-theme="light"] .brokers-table td,
[data-theme="light"] .ft-table th,
[data-theme="light"] .ft-table td,
[data-theme="light"] .page-wrapper table th,
[data-theme="light"] .page-wrapper table td,
[data-theme="light"] .page-body table th,
[data-theme="light"] .page-body table td,
[data-theme="light"] .table-page-container table th,
[data-theme="light"] .table-page-container table td {
  color: var(--tbl-text);
}

[data-theme="light"] .table th a:not(.btn),
[data-theme="light"] .table td a:not(.btn),
[data-theme="light"] .data-table th a:not(.btn),
[data-theme="light"] .data-table td a:not(.btn),
[data-theme="light"] .standard-data-table th a:not(.btn),
[data-theme="light"] .standard-data-table td a:not(.btn),
[data-theme="light"] .brokers-table th a:not(.btn),
[data-theme="light"] .brokers-table td a:not(.btn),
[data-theme="light"] .ft-table th a:not(.btn),
[data-theme="light"] .ft-table td a:not(.btn),
[data-theme="light"] .page-wrapper table th a:not(.btn),
[data-theme="light"] .page-wrapper table td a:not(.btn),
[data-theme="light"] .page-body table th a:not(.btn),
[data-theme="light"] .page-body table td a:not(.btn),
[data-theme="light"] .table-page-container table th a:not(.btn),
[data-theme="light"] .table-page-container table td a:not(.btn) {
  color: var(--accent-soft);
}

[data-theme="light"] .table th a:not(.btn):hover,
[data-theme="light"] .table td a:not(.btn):hover,
[data-theme="light"] .data-table th a:not(.btn):hover,
[data-theme="light"] .data-table td a:not(.btn):hover,
[data-theme="light"] .standard-data-table th a:not(.btn):hover,
[data-theme="light"] .standard-data-table td a:not(.btn):hover,
[data-theme="light"] .brokers-table th a:not(.btn):hover,
[data-theme="light"] .brokers-table td a:not(.btn):hover,
[data-theme="light"] .ft-table th a:not(.btn):hover,
[data-theme="light"] .ft-table td a:not(.btn):hover,
[data-theme="light"] .page-wrapper table th a:not(.btn):hover,
[data-theme="light"] .page-wrapper table td a:not(.btn):hover,
[data-theme="light"] .page-body table th a:not(.btn):hover,
[data-theme="light"] .page-body table td a:not(.btn):hover,
[data-theme="light"] .table-page-container table th a:not(.btn):hover,
[data-theme="light"] .table-page-container table td a:not(.btn):hover {
  color: var(--sidebar-dark);
}
/* Bootstrap + theme: DARK — deep lavender slate (same family as light palette) */
[data-bs-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;

  --bg-main:       #45435a;
  --bg-card:       #514f63;
  --accent-soft:   #9b9ec9;
  --sidebar-dark:  #5c5a70;
  --text-dark:     #ebe9f4;
  --text-light:    #f7f7fb;

  --ds-app-canvas: color-mix(in srgb, var(--bg-main) 38%, var(--bg-card) 62%);

  --ds-page-bg:           var(--bg-main);
  --ds-page-bg-elevated:  color-mix(in srgb, var(--bg-main) 78%, #1a1824 22%);
  --ds-surface:           var(--bg-card);
  --ds-surface-muted:     color-mix(in srgb, var(--bg-card) 85%, #2a2836 15%);
  --ds-primary:           var(--accent-soft);
  --ds-primary-hover:     color-mix(in srgb, var(--accent-soft) 85%, #ffffff 15%);
  --ds-primary-soft:      color-mix(in srgb, var(--accent-soft) 22%, transparent);
  --ds-accent:            var(--accent-soft);
  --ds-accent-hover:      color-mix(in srgb, var(--accent-soft) 80%, var(--sidebar-dark) 20%);
  --ds-accent-muted:      color-mix(in srgb, var(--accent-soft) 22%, transparent);
  --ds-secondary:         #b8b6cc;
  --ds-secondary-soft:    color-mix(in srgb, var(--sidebar-dark) 25%, transparent);
  --ds-text:              var(--text-dark);
  --ds-text-secondary:    color-mix(in srgb, var(--text-dark) 72%, var(--accent-soft) 28%);
  --ds-text-muted:        color-mix(in srgb, var(--text-dark) 55%, var(--accent-soft) 45%);
  --ds-border:            color-mix(in srgb, var(--text-light) 12%, transparent);
  --ds-border-md:         color-mix(in srgb, var(--text-light) 18%, transparent);
  --ds-border-strong:     color-mix(in srgb, var(--text-light) 26%, transparent);
  --ds-bg-bloom-tr:       color-mix(in srgb, var(--accent-soft) 18%, transparent);
  --ds-bg-bloom-bl:       color-mix(in srgb, var(--sidebar-dark) 28%, transparent);
  --ds-bg-noise-opacity:  0;

  --ds-page-mesh:
    radial-gradient(ellipse 92% 60% at 100% -18%, color-mix(in srgb, var(--accent-soft) 11%, transparent), transparent 50%),
    radial-gradient(ellipse 78% 56% at -10% 12%, color-mix(in srgb, #a78bfa 8%, transparent), transparent 54%),
    radial-gradient(ellipse 70% 52% at 96% 88%, color-mix(in srgb, #38bdf8 6.5%, transparent), transparent 52%),
    radial-gradient(ellipse 58% 48% at 6% 92%, color-mix(in srgb, var(--sidebar-dark) 26%, transparent), transparent 50%),
    radial-gradient(ellipse 80% 64% at 48% 44%, color-mix(in srgb, var(--bg-card) 28%, transparent), transparent 62%),
    linear-gradient(
      166deg,
      var(--bg-main) 0%,
      color-mix(in srgb, var(--bg-main) 52%, var(--bg-card) 48%) 42%,
      var(--bg-main) 100%
    );

  --ds-glass-blur: 20px;
  --ds-glass-saturate: 120%;
  --ds-glass-rim: color-mix(in srgb, var(--text-light) 11%, transparent);
  --ds-surface-gradient:
    radial-gradient(ellipse 118% 88% at 10% -8%, color-mix(in srgb, var(--accent-soft) 8%, transparent), transparent 56%),
    radial-gradient(ellipse 88% 72% at 98% 100%, color-mix(in srgb, var(--sidebar-dark) 18%, transparent), transparent 54%),
    linear-gradient(
      168deg,
      color-mix(in srgb, var(--bg-card) 42%, transparent) 0%,
      color-mix(in srgb, var(--ds-surface-muted) 38%, transparent) 45%,
      color-mix(in srgb, var(--bg-main) 46%, transparent) 100%
    );

  --ds-shell-bg:          var(--sidebar-dark);
  --ds-shell-border:      transparent;
  --shadow-hairline:      0 0 0 1px color-mix(in srgb, var(--text-light) 10%, transparent);
  --ds-shell-shadow:      var(--shadow-hairline),
    0 8px 28px color-mix(in srgb, #000 38%, transparent),
    0 24px 64px color-mix(in srgb, #000 32%, transparent);

  --color-base:              var(--ds-page-bg);
  --color-surface:           var(--ds-page-bg);
  --color-surface-1:         var(--ds-surface);
  --color-surface-2:         var(--ds-surface-muted);
  --color-surface-3:         color-mix(in srgb, var(--ds-surface-muted) 80%, var(--accent-soft) 16%);
  --color-surface-4:         color-mix(in srgb, var(--ds-surface-muted) 72%, var(--accent-soft) 22%);
  --color-border:            var(--ds-border);
  --color-border-md:         var(--ds-border-md);
  --color-border-strong:     var(--ds-border-strong);
  --color-text-primary:      var(--ds-text);
  --color-text-secondary:    var(--ds-text-secondary);
  --color-text-tertiary:     var(--ds-text-muted);
  --color-text-disabled:     color-mix(in srgb, var(--text-dark) 40%, var(--sidebar-dark) 60%);
  --color-text-inverse:      #2a2838;
  --color-bg-primary:        var(--ds-surface);
  --color-bg-secondary:      var(--ds-page-bg);
  --color-bg-tertiary:       var(--ds-surface-muted);
  --color-bg-card:           var(--ds-surface);
  --color-bg-hover:          var(--color-surface-3);
  --color-bg-elevated:       var(--ds-surface);
  --color-bg-overlay:        rgba(12, 10, 22, 0.68);
  --btn-surface:             color-mix(in srgb, var(--ds-surface-muted) 88%, var(--accent-soft) 10%);
  --btn-surface-hover:       color-mix(in srgb, var(--ds-surface-muted) 78%, var(--accent-soft) 18%);
  --btn-text-ui:             var(--ds-text);
  --btn-border-slate:        var(--ds-border-md);
  --btn-primary-bg:          #22c55e;
  --btn-primary-bg-hover:    #16a34a;
  --btn-primary-fg:        #ffffff;
  --btn-secondary-fg:      var(--ds-text);

  --color-primary:           var(--ds-primary);
  --color-secondary:         var(--ds-primary-hover);
  --color-tertiary:          var(--ds-secondary);
  --color-accent-light:      var(--ds-accent);
  --color-background-pale:   color-mix(in srgb, var(--ds-surface-muted) 65%, var(--accent-soft) 22%);
  --color-accent:            var(--ds-accent);
  --color-accent-hover:      var(--ds-accent-hover);
  --color-accent-dark:       color-mix(in srgb, var(--accent-soft) 60%, var(--sidebar-dark) 40%);
  --color-accent-glow:       color-mix(in srgb, var(--accent-soft) 10%, transparent);
  --color-accent-subtle:     var(--ds-accent-muted);
  --color-accent-border:     color-mix(in srgb, var(--accent-soft) 14%, transparent);
  --color-teal:              var(--ds-accent);
  --color-teal-glow:         color-mix(in srgb, var(--accent-soft) 7%, transparent);
  --color-teal-subtle:       color-mix(in srgb, var(--accent-soft) 12%, transparent);

  --shadow-sm:   var(--shadow-hairline), 0 1px 3px color-mix(in srgb, #000 22%, transparent);
  --shadow-base: var(--shadow-hairline), 0 4px 16px color-mix(in srgb, #000 28%, transparent);
  --shadow-md:   var(--shadow-hairline), 0 8px 28px color-mix(in srgb, #000 34%, transparent);
  --shadow-lg:   var(--shadow-hairline), 0 18px 48px color-mix(in srgb, #000 40%, transparent);
  --shadow-accent: 0 4px 22px color-mix(in srgb, var(--accent-soft) 10%, transparent);

  --bs-body-color: var(--color-text-primary);
  --bs-body-bg: var(--ds-page-bg);
  --bs-secondary-color: var(--color-text-secondary);
  --bs-secondary-bg: var(--ds-surface);
  --bs-tertiary-color: var(--color-text-tertiary);
  --bs-tertiary-bg: var(--ds-surface-muted);
  --bs-emphasis-color: var(--color-text-primary);
  --bs-border-color: var(--ds-border-md);
  --bs-border-color-translucent: var(--ds-border);
  --bs-table-color: var(--tbl-text);
  --bs-table-bg: var(--tbl-surface);
  --bs-table-border-color: var(--tbl-divider);
  --bs-table-striped-bg: var(--tbl-row-alt);
  --bs-table-striped-color: var(--tbl-text);
  --bs-table-hover-bg: var(--tbl-hover-bg);
  --bs-table-hover-color: var(--tbl-text);
  --bs-form-control-bg: var(--ds-surface);
  --bs-form-control-color: var(--color-text-primary);
  --bs-link-color: var(--ds-accent);
  --bs-link-hover-color: var(--ds-accent-hover);
  --bs-card-bg: var(--ds-surface);
  --bs-card-border-color: transparent;
  --bs-card-color: var(--color-text-primary);
  --bs-modal-bg: var(--ds-surface);
  --bs-modal-color: var(--color-text-primary);
  --bs-dropdown-bg: var(--ds-surface);
  --bs-dropdown-color: var(--color-text-primary);
  --bs-dropdown-border-color: var(--ds-border);
  --bs-dropdown-link-color: var(--color-text-primary);
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--text-light) 8%, transparent);

  /* Tables on dark: lifted lavender card legible against shell */
  --tbl-surface:       color-mix(in srgb, #dedeea 94%, var(--accent-soft) 6%);
  --tbl-header-bg:     linear-gradient(
    180deg,
    color-mix(in srgb, #ebe9f8 88%, var(--accent-soft) 12%) 0%,
    color-mix(in srgb, #dedeea 95%, var(--accent-soft) 5%) 100%
  );
  --tbl-header-text:   color-mix(in srgb, #565471 92%, var(--accent-soft) 8%);
  --tbl-header-highlight: color-mix(in srgb, #ffffff 24%, transparent);
  --tbl-row-alt:       color-mix(in srgb, var(--bg-card) 35%, #dedeea 65%);
  --tbl-hover-bg:      color-mix(in srgb, #cbc9dc 91%, var(--accent-soft) 9%);
  --tbl-text:          #565471;
  --tbl-text-sec:      color-mix(in srgb, #565471 78%, var(--accent-soft) 22%);
  --tbl-divider:       color-mix(in srgb, var(--accent-soft) 11%, transparent);
  --tbl-divider-md:    color-mix(in srgb, var(--accent-soft) 16%, transparent);
  --tbl-cell-pad-y:    18px;
  --tbl-cell-pad-x:    20px;
  --tbl-header-pad-y:  15px;
  --ds-search-bg:      color-mix(in srgb, var(--tbl-surface) 96%, var(--accent-soft) 4%);
  --ds-search-border:  color-mix(in srgb, var(--accent-soft) 20%, transparent);
  --ds-search-focus-bg: color-mix(in srgb, var(--tbl-surface) 90%, var(--accent-soft) 10%);
}

/* ==========================================================================
   BASE RESET & GLOBAL
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: var(--bg-main);
  font-optical-sizing: auto;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: transparent;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  transition: color var(--transition-base);
  text-align: start;
}

/* Fixed aurora mesh — behind all app content (inspo: soft color fields, keeps brand tones) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--ds-page-mesh);
}

/* Ultra-light technical grid — sits above mesh, below UI (reference dashboards) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent-soft) 40%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 40%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
}

html[data-theme="light"] body::after,
html[data-bs-theme="light"] body::after {
  opacity: 0.028;
}

/* Smooth theme transitions */
.theme-transition * {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
}

h4, h5, h6, p, span, div, label, button, input, select, textarea, td, th, li, a {
  font-family: var(--font-primary);
}

h1 { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-5); font-weight: var(--font-weight-bold); }
h2 { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-4); }
h3 { font-size: var(--font-size-xl);  margin-bottom: var(--spacing-4); }
h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-3);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}
h5 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
  color: var(--color-text-secondary);
  line-height: var(--line-height-tight);
}
h6 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
  color: var(--color-text-secondary);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  line-height: var(--line-height-tight);
}

p { margin: 0 0 var(--spacing-4) 0; line-height: var(--line-height-relaxed); color: var(--color-text-primary); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-hover); text-decoration: none; }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

code, .font-mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.page-wrapper {
  width: 100%;
  box-sizing: border-box;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  background-color: transparent;
}

.app-shell {
  display: flex;
  min-height: 100vh;
  background: transparent;
  padding-top: var(--layout-stack-below-topbar);
}

/* Page shell — flat on canvas (tables/cards carry their own glass panels) */
.page-card {
  width: 100%;
  max-width: var(--ui-content-max-width, 1800px);
  margin: 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--layout-page-padding);
  box-sizing: border-box;
  transition: box-shadow var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

.page-card.wide-layout {
  max-width: 95%;
  padding: var(--layout-page-padding);
}

/* Injected shell already pads the viewport; keep the card close to the top bar */
.injected-page-content .page-card {
  padding-top: var(--spacing-2);
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.injected-page-content .page-card .page-body {
  padding: 0;
}

@media screen and (min-width: 1600px) {
  .page-card         { max-width: var(--ui-page-max, 1850px); padding: var(--layout-page-padding); }
  .page-card.wide-layout { max-width: var(--ui-page-max-fluid, 97%); }
}

.page-header {
  padding-bottom: var(--spacing-5);
  margin-bottom: var(--spacing-8);
  border-bottom: none;
  box-shadow: 0 1px 0 0 var(--ds-border);
  position: relative;
}

/* Glowing accent line under page header */
.page-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-border-md), transparent);
  border-radius: var(--radius-full);
}

/* Canonical page title — use on every view: <h1 class="page-heading"> */
.page-heading,
.page-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.25;
}

.page-header .page-heading,
.page-header .page-title {
  margin-bottom: var(--spacing-2);
}

.page-subtitle {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  margin: 0;
}

/* .section-title is defined in the table/card section below (line ~791).
   For full-width page section headers with border, use .page-section-title. */
.page-section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: var(--spacing-8) 0 var(--spacing-5) 0;
  padding-bottom: var(--spacing-3);
  border-bottom: none;
  box-shadow: 0 1px 0 0 var(--ds-border);
  letter-spacing: var(--letter-spacing-tight);
}

/* ── Table-page container ── */
.table-page-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: var(--layout-content-padding-top) var(--layout-page-padding) var(--layout-page-padding);
  box-sizing: border-box;
}

@media screen and (min-width: 1600px) {
  .table-page-container { max-width: 95%; padding: var(--layout-page-padding); }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: 10px 18px;
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  color: var(--btn-text-ui);
  background: color-mix(in srgb, var(--btn-surface) 74%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 52%, var(--ds-glass-rim) 48%);
  border-radius: var(--control-radius);
  cursor: pointer;
  transition: var(--control-transition), transform var(--transition-fast), backdrop-filter var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 10%, transparent),
    0 2px 14px color-mix(in srgb, var(--sidebar-dark) 14%, transparent);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--transition-fast);
}

.btn:hover {
  background: color-mix(in srgb, var(--btn-surface-hover) 80%, transparent);
  border-color: color-mix(in srgb, var(--color-border-strong) 78%, var(--btn-text-ui) 14%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 14%, transparent),
    0 4px 20px color-mix(in srgb, var(--sidebar-dark) 18%, transparent);
  transform: translateY(-0.5px);
  text-decoration: none;
  color: var(--btn-text-ui);
}

.btn:hover::before { background: rgba(255,255,255,0.025); }
.btn:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 8%, transparent),
    0 1px 10px color-mix(in srgb, var(--sidebar-dark) 12%, transparent);
}
.btn:focus-visible { outline: 2px solid var(--btn-border-slate); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Brand primary CTA — matches green primary actions (+ Add client, etc.) */
.btn.btn-brand-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: 10px 18px;
  font-weight: var(--font-weight-medium);
  border-radius: var(--control-radius);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--btn-primary-bg) 82%, #ffffff 18%) 0%,
    var(--btn-primary-bg) 48%,
    var(--btn-primary-bg-hover) 100%
  );
  color: var(--btn-primary-fg);
  border: 1px solid color-mix(in srgb, var(--btn-primary-bg) 42%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 32%, transparent),
    0 4px 20px color-mix(in srgb, var(--color-success) 28%, transparent),
    var(--ds-elev-shadow-sm);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}
.btn.btn-brand-cta::before { display: none; }
.btn.btn-brand-cta:hover {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--btn-primary-bg) 70%, #ffffff 30%) 0%,
    color-mix(in srgb, var(--btn-primary-bg) 88%, #ffffff 12%) 52%,
    var(--btn-primary-bg) 100%
  );
  color: var(--btn-primary-fg);
  border-color: color-mix(in srgb, var(--btn-primary-bg) 55%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent),
    0 5px 22px color-mix(in srgb, var(--color-success) 24%, transparent),
    var(--shadow-sm);
  transform: translateY(-0.5px);
}
.btn.btn-brand-cta:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent),
    0 2px 12px color-mix(in srgb, var(--color-success) 20%, transparent);
}
.btn.btn-brand-cta:focus-visible {
  outline: 2px solid var(--color-success-light);
  outline-offset: 2px;
}
.btn-brand-cta-icon {
  flex-shrink: 0;
  display: block;
}

/* Primary CTA */
.btn-primary {
  background: color-mix(in srgb, var(--btn-primary-bg) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--btn-primary-bg) 45%, transparent);
  color: var(--btn-primary-fg);
  font-weight: var(--font-weight-semibold);
  padding: 10px 18px;
  border-radius: var(--control-radius);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--btn-primary-fg) 18%, transparent),
    var(--ds-elev-shadow-sm);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--btn-primary-bg-hover) 65%, transparent);
  border-color: color-mix(in srgb, var(--btn-primary-bg-hover) 50%, transparent);
  color: var(--btn-primary-fg);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--btn-primary-fg) 22%, transparent),
    var(--shadow-sm);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.btn-secondary {
  background: color-mix(in srgb, var(--btn-secondary-bg) 62%, transparent);
  border: 1px solid var(--action-secondary-border, var(--color-border-md));
  color: var(--btn-secondary-fg);
  font-weight: var(--font-weight-medium);
  padding: 10px 18px;
  border-radius: var(--control-radius);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 8%, transparent),
    0 2px 12px color-mix(in srgb, var(--sidebar-dark) 12%, transparent);
}
.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-bg-hover) 70%, transparent);
  border-color: var(--color-border-strong);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 11%, transparent),
    0 3px 16px color-mix(in srgb, var(--sidebar-dark) 14%, transparent);
  color: var(--btn-secondary-fg);
}

/* Primary form submit — persist / save (green CTA globally). Uses real greens: ocean maps --color-success to glacier. */
button[type="submit"].btn.btn-primary,
input[type="submit"].btn.btn-primary {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #22c55e 82%, #ffffff 18%) 0%,
    #22c55e 45%,
    color-mix(in srgb, #16a34a 92%, #000 8%) 100%
  );
  border: 1px solid color-mix(in srgb, #22c55e 55%, #0f172a 45%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 38%, transparent),
    0 4px 22px color-mix(in srgb, #22c55e 32%, transparent);
}
button[type="submit"].btn.btn-primary:hover,
input[type="submit"].btn.btn-primary:hover {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #22c55e 72%, #ffffff 28%) 0%,
    color-mix(in srgb, #22c55e 88%, #000 12%) 100%
  );
  border-color: color-mix(in srgb, #22c55e 48%, #0f172a 52%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent),
    0 6px 28px color-mix(in srgb, #22c55e 40%, transparent);
}
button[type="submit"].btn.btn-primary:focus-visible,
input[type="submit"].btn.btn-primary:focus-visible {
  outline: 2px solid color-mix(in srgb, #22c55e 65%, #fff 35%);
  outline-offset: 2px;
}

.btn-success {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-success, #22c55e) 82%, #fff 18%) 0%,
    var(--color-success, #22c55e) 100%
  );
  border: 1px solid color-mix(in srgb, var(--color-success, #22c55e) 50%, #0f172a 50%);
  color: #fff;
  font-weight: var(--font-weight-semibold);
  padding: 10px 18px;
  border-radius: var(--control-radius);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent),
    0 4px 20px color-mix(in srgb, var(--color-success, #22c55e) 28%, transparent);
}
.btn-success:hover {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-success, #22c55e) 70%, #fff 30%) 0%,
    color-mix(in srgb, var(--color-success-hover, #16a34a) 95%, #000 5%) 100%
  );
  border-color: color-mix(in srgb, var(--color-success, #22c55e) 42%, #0f172a 58%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent),
    0 6px 26px color-mix(in srgb, var(--color-success, #22c55e) 36%, transparent);
}
.btn-success:focus-visible {
  outline: 2px solid var(--color-success-light, rgba(34, 197, 94, 0.55));
  outline-offset: 2px;
}

/* Stronger destructive treatment (buttons + links) */
.btn.btn-danger,
.btn.btn-error,
a.btn.btn-danger {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-error, #ef4444) 75%, #fff 8%) 0%,
    var(--color-error, #dc2626) 100%
  );
  color: #fff !important;
  border: 1px solid color-mix(in srgb, var(--color-error, #dc2626) 55%, #7f1d1d 45%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
    0 4px 22px color-mix(in srgb, var(--color-error, #ef4444) 30%, transparent);
}
.btn.btn-danger:hover,
.btn.btn-error:hover,
a.btn.btn-danger:hover {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-error, #f87171) 55%, #b91c1c 45%) 0%,
    color-mix(in srgb, #b91c1c 92%, #000 8%) 100%
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent),
    0 6px 28px color-mix(in srgb, var(--color-error, #ef4444) 38%, transparent);
}
.btn-danger:focus-visible,
.btn-error:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-error, #f87171) 55%, transparent);
  outline-offset: 2px;
}

/* Global destructive links: red even if marked .btn-secondary (or untagged) */
a.btn[href*="/delete"]:not(.btn-primary):not(.btn-success):not(.btn-brand-cta):not(.btn-danger):not(.btn-error),
a.btn[href^="/delete_"]:not(.btn-primary):not(.btn-success):not(.btn-brand-cta):not(.btn-danger):not(.btn-error) {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-fg);
  border: 1px solid transparent;
  font-weight: var(--font-weight-semibold);
}
a.btn[href*="/delete"]:not(.btn-primary):not(.btn-success):not(.btn-brand-cta):not(.btn-danger):not(.btn-error):hover,
a.btn[href^="/delete_"]:not(.btn-primary):not(.btn-success):not(.btn-brand-cta):not(.btn-danger):not(.btn-error):hover {
  background: var(--btn-danger-bg-hover);
  color: var(--btn-danger-fg);
}

.btn-warning  { background: var(--color-warning); }
.btn-warning:hover { background: #D97706; }

.btn-outline {
  background: color-mix(in srgb, var(--btn-surface) 38%, transparent);
  color: var(--btn-text-ui);
  border-color: var(--btn-border-slate);
}
.btn-outline:hover {
  background: color-mix(in srgb, var(--btn-surface) 64%, transparent);
  border-color: var(--color-border-strong);
  color: var(--btn-text-ui);
  box-shadow: none;
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--color-surface-4);
  color: var(--color-text-primary);
  box-shadow: none;
  transform: none;
}

/* Sizes */
.btn-xs  { padding: var(--spacing-1) var(--spacing-2); font-size: var(--font-size-xs); }
.btn-sm  { padding: var(--spacing-2) var(--spacing-3); font-size: var(--font-size-sm); }
.btn-lg  { padding: var(--spacing-4) var(--spacing-8); font-size: var(--font-size-md); }
.btn-block { display: flex; width: 100%; }

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  opacity: 0.5;
  font-size: 12px;
  line-height: 1;
}
.btn-icon:hover { opacity: 1; }

.btn-close-modal {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.btn-close-modal:hover { color: var(--color-text-primary); }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  background: var(--ds-surface-gradient);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, var(--ds-glass-rim) 45%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
  box-shadow: var(--ds-card-shadow);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
}

.card:hover {
  box-shadow: color-mix(in srgb, var(--ds-card-shadow-hover) 85%, transparent 15%);
  transform: translateY(-0.5px);
}

.card-header {
  padding-bottom: var(--spacing-4);
  margin-bottom: var(--spacing-5);
  border-bottom: none;
  box-shadow: 0 1px 0 0 var(--ds-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: var(--letter-spacing-tight);
}

.card-body  { color: var(--color-text-primary); }

.card-footer {
  padding-top: var(--spacing-4);
  margin-top: var(--spacing-5);
  border-top: none;
  box-shadow: 0 -1px 0 0 var(--ds-border);
  display: flex;
  gap: var(--spacing-3);
  justify-content: flex-end;
}

/* Glass card — optional modifier */
.card-glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: none;
  box-shadow: var(--shadow-hairline), 0 8px 28px color-mix(in srgb, #000 24%, transparent);
}
[data-theme="light"] .card-glass {
  background: color-mix(in srgb, var(--tbl-surface) 58%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--ds-card-border);
  box-shadow: var(--ds-card-shadow);
}

/* Stat Card — KPI Widget */
.stat-card {
  background: var(--ds-surface-gradient);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, var(--ds-glass-rim) 45%);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: left;
  box-shadow: var(--ds-card-shadow);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
}

[data-theme="light"] .stat-card {
  background: var(--ds-surface-gradient);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, var(--ds-glass-rim) 45%);
  box-shadow: var(--ds-card-shadow);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-teal));
  opacity: 0;
  transition: opacity var(--transition-base);
}

.stat-card:hover {
  box-shadow: color-mix(in srgb, var(--ds-card-shadow-hover) 88%, transparent 12%);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-soft) 20%, var(--ds-card-border) 80%);
}
.stat-card:hover::before { opacity: 1; }

/* KPI title (small uppercase label) */
.stat-card-label,
.stat-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
  letter-spacing: 0;
}

[data-theme="light"] .stat-card-label,
[data-theme="light"] .stat-card-title {
  color: var(--color-text-secondary);
}

/* KPI value — large bold number */
.stat-card-value {
  font-family: 'IBM Plex Mono', 'Roboto Mono', monospace;
  font-size: 28px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

[data-theme="light"] .stat-card-value {
  color: var(--color-text-primary);
}

/* KPI subtitle */
.stat-card-change,
.stat-card-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

[data-theme="light"] .stat-card-change,
[data-theme="light"] .stat-card-subtitle {
  color: var(--color-text-secondary);
}

/* ==========================================================================
   SECTION CARDS — elevated containers (consolidated into table system below)
   ========================================================================== */
.section-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--tbl-divider-md);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-card) 92%, var(--accent-soft) 8%) 0%,
    color-mix(in srgb, var(--bg-card) 76%, var(--bg-main) 24%) 100%
  );
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 var(--tbl-header-highlight);
}

[data-theme="light"] .section-header {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #e6f0f8 94%, var(--accent-soft) 6%) 0%,
    color-mix(in srgb, #dae8f4 92%, var(--accent-soft) 8%) 100%
  );
  border-bottom: 1px solid var(--tbl-divider-md);
  box-shadow: inset 0 1px 0 var(--tbl-header-highlight);
}

.section-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.section-meta {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.section-header .section-meta {
  color: var(--color-text-secondary);
}

/* Heading row placed above a section-card (e.g. Clients list) */
.section-heading-above-table {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: var(--spacing-3) 0 var(--spacing-2);
  padding: 0 2px;
  box-sizing: border-box;
}
.section-heading-above-table .section-title {
  margin: 0;
}
.section-heading-above-table .section-meta {
  color: var(--color-text-secondary);
}

/* Clients list: align table hint when there is no section title */
.clients-table-meta-row {
  justify-content: flex-end;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
}
.section-badge.danger  { background: rgba(239,68,68,0.15);   color: #ef4444; }
.section-badge.warning { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.section-badge.success { background: rgba(16,185,129,0.15);  color: #10b981; }


/* ==========================================================================
   UNIFIED FINTECH TABLE DESIGN SYSTEM  v6.0
   Covers: .table  .data-table  .standard-data-table  .brokers-table  .ft-table
   Design targets: Institutional finance-grade — Inter typography, IBM Plex Mono
   for numeric data, tabular-nums, semantic value colouring,
   single-surface headers (--tbl-header-font-size > body), full light/dark support.
   ========================================================================== */

/* Table tokens: canonical definitions live on :root and [data-theme="dark"] at file top */

/* ── Container / card wrap ── */
.table-container,
.brokers-table-container,
.standard-table-wrap,
.users-table-container,
.broker-tbl-wrap,
.ui-card {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  background: var(--ds-surface-gradient);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, var(--ds-glass-rim) 45%);
  border-radius: var(--tbl-radius);
  margin: var(--spacing-5) 0;
  box-shadow: var(--tbl-shadow);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
}

.section-card {
  width: 100%;
  max-width: 100%;
  background: var(--ds-surface-gradient);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, var(--ds-glass-rim) 45%);
  border-radius: var(--tbl-radius);
  margin: 0;
  overflow: hidden;
  box-shadow: var(--ds-card-shadow);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
}

/* Table band inside section lists (search bar sits above this panel) */
.section-card-table-panel {
  width: 100%;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--tbl-surface) 58%, transparent);
  /* Full radius when this is the first visible block (headless search is display:none) */
  border-radius: var(--tbl-radius);
  overflow-x: auto;
  overflow-y: hidden;
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-light) 6%, transparent);
}

[data-theme="light"] .section-card-table-panel,
[data-bs-theme="light"] .section-card-table-panel {
  background: color-mix(in srgb, var(--tbl-surface) 46%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #f8fafc 14%, transparent);
}

.section-card > .data-table {
  background: transparent;
}
.section-card > .section-card-table-panel > .data-table {
  background: transparent;
}

.section-card-table-panel > .dt-table-wrapper {
  background: transparent;
}

/* Full-width table shell (broker / clients master layout) */
.dt-table-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.dt-table-wrapper > .data-table {
  width: 100%;
  min-width: 100%;
}

/* Per-section table collapse (section-card on list pages) */
.section-card.standard-table-section.is-collapsed .section-card-table-panel {
  display: none;
}
.section-card-collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.section-card-collapsible-header:hover {
  background: rgba(255, 255, 255, 0.04);
}
.section-card-collapsible-header:focus-visible {
  outline: 2px solid var(--btn-border-slate);
  outline-offset: 2px;
}
/* Collapsible sections / cards are disabled site-wide. Tables are always
   visible and switching between tables is done via tabs at the top of the
   page. These rules neutralize any legacy collapse state and hide the
   chevron affordance everywhere. */
.collapsible-section.collapsed > .collapsible-body,
.collapsible-section.is-collapsed > .collapsible-body,
.section-card.is-collapsed > .section-card-table-panel,
.section-card.is-collapsed > .table-container,
.section-card.is-collapsed > .dt-table-wrapper { display: block !important; max-height: none !important; }
.collapsible-section.collapsed,
.collapsible-section.is-collapsed,
.section-card.is-collapsed { overflow: visible !important; }
.collapsible-chevron,
.section-collapse-chevron,
.section-card-collapsible-header .section-collapse-chevron { display: none !important; }
.collapsible-header { cursor: default !important; }
.section-card-collapsible-header { cursor: default !important; }

.section-collapse-chevron {
  font-size: 12px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  margin-left: auto;
}
[data-theme="light"] .section-card-collapsible-header:hover {
  background: rgba(15, 23, 42, 0.04);
}

/* Semantic alias: wrap + table use .standard-table-wrap + .standard-data-table (same tokens as Clients) */
.standard-table-wrap .standard-data-table {
  width: 100%;
  min-width: 100%;
}

.table-container:hover,
.brokers-table-container:hover,
.standard-table-wrap:hover,
.users-table-container:hover,
.broker-tbl-wrap:hover,
.ui-card:hover,
.section-card:hover {
  box-shadow: color-mix(in srgb, var(--tbl-shadow-hover) 88%, transparent 12%);
}

[data-theme="light"] .table-container,
[data-theme="light"] .brokers-table-container,
[data-theme="light"] .standard-table-wrap,
[data-theme="light"] .users-table-container,
[data-theme="light"] .broker-tbl-wrap,
[data-theme="light"] .ui-card,
[data-theme="light"] .section-card {
  background: var(--ds-surface-gradient);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, var(--ds-glass-rim) 45%);
  box-shadow: var(--ds-card-shadow);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
}
[data-theme="light"] .table-container:hover,
[data-theme="light"] .brokers-table-container:hover,
[data-theme="light"] .standard-table-wrap:hover,
[data-theme="light"] .users-table-container:hover,
[data-theme="light"] .broker-tbl-wrap:hover,
[data-theme="light"] .ui-card:hover,
[data-theme="light"] .section-card:hover {
  box-shadow: color-mix(in srgb, var(--tbl-shadow-hover) 88%, transparent 12%);
}

/* ── Base table — applies to ALL table class variants ── */
/* ── Override Bootstrap 5 CSS variables on .table to prevent light-mode bleed ── */
.table, .data-table, .standard-data-table, .brokers-table, .ft-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--font-size-base);
  font-weight: 450;
  font-feature-settings: "tnum" 1;
  color: var(--tbl-text);
  background: transparent;
  table-layout: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Reset Bootstrap 5 table CSS variables to our dark-mode values */
  --bs-table-color: var(--tbl-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--tbl-divider);
  --bs-table-striped-bg: var(--tbl-row-alt);
  --bs-table-striped-color: var(--tbl-text);
  --bs-table-active-bg: var(--tbl-hover-bg);
  --bs-table-active-color: var(--tbl-text);
  --bs-table-hover-bg: var(--tbl-hover-bg);
  --bs-table-hover-color: var(--tbl-text);
}

/* Light theme: tables inherit Bootstrap vars from html; optional fine-tuning */
[data-theme="light"] .table,
[data-theme="light"] .data-table,
[data-theme="light"] .standard-data-table,
[data-theme="light"] .brokers-table,
[data-theme="light"] .ft-table {
  color: var(--tbl-text);
  --bs-table-color: var(--tbl-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--tbl-divider);
  --bs-table-striped-bg: var(--tbl-row-alt);
  --bs-table-striped-color: var(--tbl-text);
  --bs-table-active-bg: var(--tbl-hover-bg);
  --bs-table-active-color: var(--tbl-text);
  --bs-table-hover-bg: var(--tbl-hover-bg);
  --bs-table-hover-color: var(--tbl-text);
}

/* ── Header ── */
.table thead,
.data-table thead,
.standard-data-table thead,
.brokers-table thead,
.ft-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--tbl-header-bg) !important;
  border-bottom: 1px solid var(--tbl-divider-md);
  box-shadow: inset 0 1px 0 var(--tbl-header-highlight);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme="light"] .table thead,
[data-theme="light"] .data-table thead,
[data-theme="light"] .standard-data-table thead,
[data-theme="light"] .brokers-table thead,
[data-theme="light"] .ft-table thead {
  background: var(--tbl-header-bg) !important;
  border-bottom: 1px solid var(--tbl-divider-md);
  box-shadow: inset 0 1px 0 var(--tbl-header-highlight);
}

.table th,
.data-table th,
.standard-data-table th,
.brokers-table th,
.ft-table th {
  padding: var(--tbl-header-pad-y) var(--tbl-cell-pad-x);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--tbl-header-font-size);
  font-weight: 600;
  color: var(--tbl-header-text) !important;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  border-bottom: none;
  border-left: none;
  border-right: none;
  white-space: normal;
  line-height: 1.35;
  vertical-align: middle;
  position: relative;
  background-color: transparent !important;
  transition: color var(--transition-fast), background var(--transition-fast);
  user-select: none;
}

/* Flex row inside header: label + filter/info icons align (sort ⇅ stays on <th>::after) */
.table thead th .th-cell,
.data-table thead th .th-cell,
.standard-data-table thead th .th-cell,
.brokers-table thead th .th-cell,
.ft-table thead th .th-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
}

.table th.text-right .th-cell,
.data-table th.text-right .th-cell,
.standard-data-table th.text-right .th-cell,
.brokers-table th.text-right .th-cell,
.ft-table th.text-right .th-cell {
  justify-content: flex-end;
}

.table th.text-center .th-cell,
.data-table th.text-center .th-cell,
.standard-data-table th.text-center .th-cell,
.brokers-table th.text-center .th-cell,
.ft-table th.text-center .th-cell {
  justify-content: center;
}
[data-theme="light"] .table th,
[data-theme="light"] .data-table th,
[data-theme="light"] .standard-data-table th,
[data-theme="light"] .brokers-table th,
[data-theme="light"] .ft-table th {
  border-bottom: none;
  color: var(--tbl-header-text) !important;
}

.table thead th:hover,
.data-table thead th:hover,
.standard-data-table thead th:hover,
.brokers-table thead th:hover,
.ft-table thead th:hover {
  background: var(--tbl-hover-bg) !important;
  color: var(--tbl-text) !important;
  cursor: pointer;
}
[data-theme="light"] .table thead th:hover,
[data-theme="light"] .data-table thead th:hover,
[data-theme="light"] .standard-data-table thead th:hover,
[data-theme="light"] .brokers-table thead th:hover,
[data-theme="light"] .ft-table thead th:hover {
  background: var(--tbl-hover-bg) !important;
  color: var(--tbl-text) !important;
}

/* Active sort column — no second header color; weight only */
.table th.sort-active,
.data-table th.sort-active, .standard-data-table th.sort-active,
.brokers-table th.sort-active,
.ft-table th.sort-active {
  color: var(--tbl-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  font-weight: 700;
}
[data-theme="light"] .table th.sort-active,
[data-theme="light"] .data-table th.sort-active, .standard-data-table th.sort-active,
[data-theme="light"] .brokers-table th.sort-active {
  color: var(--tbl-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  font-weight: 700;
}

/* ── Body cells ── */
.table td,
.data-table td, .standard-data-table td,
.brokers-table td,
.ft-table td {
  padding: var(--tbl-cell-pad-y) var(--tbl-cell-pad-x);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--tbl-body-font-size);
  font-weight: 400;
  border-bottom: 1px solid var(--tbl-divider);
  border-left: none;
  border-right: none;
  vertical-align: middle;
  text-align: left;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tbl-text) !important;
  background-color: transparent !important;  /* Override Bootstrap's --bs-table-bg injection */
  transition: background-color 200ms ease;
  min-height: 52px;
  height: auto;
}
[data-theme="light"] .table td,
[data-theme="light"] .data-table td, .standard-data-table td,
[data-theme="light"] .brokers-table td,
[data-theme="light"] .ft-table td {
  border-bottom: 1px solid var(--tbl-divider);
  color: var(--tbl-text) !important;
}

/* Remove underlines from text links inside tables — skip .btn so CTA colors win over td/inherit */
.table td a:not(.btn),
.data-table td a:not(.btn), .standard-data-table td a:not(.btn),
.brokers-table td a:not(.btn),
.ft-table td a:not(.btn),
.table tbody tr a:not(.btn),
.data-table tbody tr a:not(.btn), .standard-data-table tbody tr a:not(.btn),
.brokers-table tbody tr a:not(.btn) {
  text-decoration: none;
  color: inherit;
}
.table td a:not(.btn):hover,
.data-table td a:not(.btn):hover, .standard-data-table td a:not(.btn):hover,
.brokers-table td a:not(.btn):hover,
.ft-table td a:not(.btn):hover {
  text-decoration: none;
  color: var(--color-accent);
}

/* Button-styled links in grids — table link rules must not wash out label contrast */
.table td a.btn.btn-primary,
.data-table td a.btn.btn-primary,
.standard-data-table td a.btn.btn-primary,
.brokers-table td a.btn.btn-primary,
.ft-table td a.btn.btn-primary,
.table td a.btn.btn-success,
.data-table td a.btn.btn-success,
.standard-data-table td a.btn.btn-success,
.brokers-table td a.btn.btn-success,
.ft-table td a.btn.btn-success,
.table td a.btn.btn-brand-cta,
.data-table td a.btn.btn-brand-cta,
.standard-data-table td a.btn.btn-brand-cta,
.brokers-table td a.btn.btn-brand-cta,
.ft-table td a.btn.btn-brand-cta {
  color: var(--btn-primary-fg) !important;
}
.table td a.btn.btn-danger,
.data-table td a.btn.btn-danger,
.standard-data-table td a.btn.btn-danger,
.brokers-table td a.btn.btn-danger,
.ft-table td a.btn.btn-danger,
.table td a.btn.btn-error,
.data-table td a.btn.btn-error,
.standard-data-table td a.btn.btn-error,
.brokers-table td a.btn.btn-error,
.ft-table td a.btn.btn-error {
  color: var(--btn-danger-fg) !important;
}
.table td a.btn.btn-danger:hover,
.data-table td a.btn.btn-danger:hover,
.standard-data-table td a.btn.btn-danger:hover,
.brokers-table td a.btn.btn-danger:hover,
.ft-table td a.btn.btn-danger:hover,
.table td a.btn.btn-error:hover,
.data-table td a.btn.btn-error:hover,
.standard-data-table td a.btn.btn-error:hover,
.brokers-table td a.btn.btn-error:hover,
.ft-table td a.btn.btn-error:hover {
  color: var(--btn-danger-fg) !important;
}
.table td a.btn.btn-primary:hover,
.data-table td a.btn.btn-primary:hover,
.standard-data-table td a.btn.btn-primary:hover,
.brokers-table td a.btn.btn-primary:hover,
.ft-table td a.btn.btn-primary:hover,
.table td a.btn.btn-success:hover,
.data-table td a.btn.btn-success:hover,
.standard-data-table td a.btn.btn-success:hover,
.brokers-table td a.btn.btn-success:hover,
.ft-table td a.btn.btn-success:hover,
.table td a.btn.btn-brand-cta:hover,
.data-table td a.btn.btn-brand-cta:hover,
.standard-data-table td a.btn.btn-brand-cta:hover,
.brokers-table td a.btn.btn-brand-cta:hover,
.ft-table td a.btn.btn-brand-cta:hover {
  color: var(--btn-primary-fg) !important;
}

/* Wrap variant */
.table td.wrap-text,
.data-table td.wrap-text, .standard-data-table td.wrap-text,
.brokers-table td.wrap-text {
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-overflow: clip;
}

/* ISO / calendar date column — keep YYYY-MM-DD fully visible (no ellipsis) */
.table th.col-date,
.data-table th.col-date,
.standard-data-table th.col-date {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-size: var(--tbl-header-font-size);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-width: 6.75rem;
  max-width: none;
}
.table td.col-date,
.data-table td.col-date,
.standard-data-table td.col-date {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-size: var(--tbl-body-font-size);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-width: 6.75rem;
  max-width: none;
}

/* ── Alternating row shading — subtle zebra ── */
.table tbody tr:nth-child(odd),
.data-table tbody tr:nth-child(odd), .standard-data-table tbody tr:nth-child(odd),
.brokers-table tbody tr:nth-child(odd),
.ft-table tbody tr:nth-child(odd) {
  background: var(--tbl-surface);
}
.table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even), .standard-data-table tbody tr:nth-child(even),
.brokers-table tbody tr:nth-child(even),
.ft-table tbody tr:nth-child(even) {
  background: var(--tbl-row-alt);
}
[data-theme="light"] .table tbody tr:nth-child(odd),
[data-theme="light"] .data-table tbody tr:nth-child(odd), .standard-data-table tbody tr:nth-child(odd),
[data-theme="light"] .brokers-table tbody tr:nth-child(odd),
[data-theme="light"] .ft-table tbody tr:nth-child(odd) {
  background: var(--tbl-surface);
}
[data-theme="light"] .table tbody tr:nth-child(even),
[data-theme="light"] .data-table tbody tr:nth-child(even), .standard-data-table tbody tr:nth-child(even),
[data-theme="light"] .brokers-table tbody tr:nth-child(even),
[data-theme="light"] .ft-table tbody tr:nth-child(even) {
  background: var(--tbl-row-alt);
}

/* ── Row hover — left accent bar + subtle highlight — NO underline ── */
.table tbody tr,
.data-table tbody tr, .standard-data-table tbody tr,
.brokers-table tbody tr,
.ft-table tbody tr {
  transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.table tbody tr:hover,
.data-table tbody tr:hover, .standard-data-table tbody tr:hover,
.brokers-table tbody tr:hover,
.ft-table tbody tr:hover {
  background: var(--tbl-hover-bg) !important;
  box-shadow: none;
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
}
[data-theme="light"] .table tbody tr:hover,
[data-theme="light"] .data-table tbody tr:hover, .standard-data-table tbody tr:hover,
[data-theme="light"] .brokers-table tbody tr:hover,
[data-theme="light"] .ft-table tbody tr:hover {
  background: var(--tbl-hover-bg) !important;
  box-shadow: none;
}

/* Remove any text-decoration on hover for all row children; clear Bootstrap td background */
.table tbody tr:hover td,
.data-table tbody tr:hover td, .standard-data-table tbody tr:hover td,
.brokers-table tbody tr:hover td,
.ft-table tbody tr:hover td,
.table tbody tr:hover a:not(.btn),
.data-table tbody tr:hover a:not(.btn), .standard-data-table tbody tr:hover a:not(.btn),
.brokers-table tbody tr:hover a:not(.btn),
.ft-table tbody tr:hover a:not(.btn) {
  text-decoration: none !important;
  background-color: transparent !important;  /* Let row background show through */
  background: transparent !important;
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
}

/* row-inactive hover — override the red bg so hover is still visible */
.table tbody tr.row-inactive:hover,
.data-table tbody tr.row-inactive:hover, .standard-data-table tbody tr.row-inactive:hover,
.brokers-table tbody tr.row-inactive:hover {
  background: var(--tbl-hover-bg) !important;
  box-shadow: none;
  opacity: 1 !important;
}
.table tbody tr.row-inactive:hover td,
.data-table tbody tr.row-inactive:hover td, .standard-data-table tbody tr.row-inactive:hover td,
.brokers-table tbody tr.row-inactive:hover td {
  background-color: transparent !important;
  background: transparent !important;
}

/* ── Row active / focus ── */
.table tbody tr:focus,
.data-table tbody tr:focus, .standard-data-table tbody tr:focus,
.brokers-table tbody tr:focus,
.ft-table tbody tr:focus {
  outline: none;
  background: color-mix(in srgb, var(--color-accent-light) 16%, var(--tbl-surface) 84%) !important;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--sidebar-dark) 12%, transparent) !important;
}
.table tbody tr.row-active,
.data-table tbody tr.row-active, .standard-data-table tbody tr.row-active,
.brokers-table tbody tr.row-active {
  background: color-mix(in srgb, var(--color-accent-light) 18%, var(--color-background-pale) 82%) !important;
  box-shadow: none !important;
}

/* Clickable rows */
.table tbody tr[onclick],
.data-table tbody tr[onclick], .standard-data-table tbody tr[onclick],
.brokers-table tbody tr[onclick],
.table tbody tr[style*="cursor:pointer"],
.data-table tbody tr[style*="cursor:pointer"], .standard-data-table tbody tr[style*="cursor:pointer"],
.brokers-table tbody tr[style*="cursor:pointer"] {
  cursor: pointer;
}

/* Last row — no border */
.table tbody tr:last-child td,
.data-table tbody tr:last-child td, .standard-data-table tbody tr:last-child td,
.brokers-table tbody tr:last-child td,
.ft-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Alignment rules ── */
.table th.text-left,  .data-table th.text-left,  .brokers-table th.text-left, .standard-data-table th.text-left,  .brokers-table th.text-left,
.table td.text-left,  .data-table td.text-left,  .brokers-table td.text-left, .standard-data-table td.text-left,  .brokers-table td.text-left,
th[style*="text-align:left"],  td[style*="text-align:left"]  { text-align: left  !important; }

.table th.text-right, .data-table th.text-right, .brokers-table th.text-right, .standard-data-table th.text-right, .brokers-table th.text-right,
.table td.text-right, .data-table td.text-right, .brokers-table td.text-right, .standard-data-table td.text-right, .brokers-table td.text-right,
th[style*="text-align:right"], td[style*="text-align:right"] {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.table th.text-center, .data-table th.text-center, .brokers-table th.text-center, .standard-data-table th.text-center, .brokers-table th.text-center,
.table td.text-center, .data-table td.text-center, .brokers-table td.text-center, .standard-data-table td.text-center, .brokers-table td.text-center,
th[style*="text-align:center"], td[style*="text-align:center"] { text-align: center !important; }

/* ── All right-aligned cells auto-get tabular nums ── */
td[style*="text-align:right"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Numeric cells — IBM Plex Mono, tabular nums, weight 500 ── */
.table .cell-number,    .data-table .cell-number,    .brokers-table .cell-number, .standard-data-table .cell-number,    .brokers-table .cell-number,
.table .numeric-value,  .data-table .numeric-value,  .brokers-table .numeric-value, .standard-data-table .numeric-value,  .brokers-table .numeric-value,
.table .num-cell,       .data-table .num-cell,        .brokers-table .num-cell, .standard-data-table .num-cell,        .brokers-table .num-cell,
.table .cell-numeric,   .data-table .cell-numeric,    .brokers-table .cell-numeric, .standard-data-table .cell-numeric,    .brokers-table .cell-numeric,
td[style*="font-variant-numeric"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-family: 'IBM Plex Mono', 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: var(--tbl-body-font-size);
  color: var(--tbl-text);
}
[data-theme="light"] .table .cell-number,
[data-theme="light"] .data-table .cell-number, .standard-data-table .cell-number,
[data-theme="light"] .brokers-table .cell-number,
[data-theme="light"] .table .cell-numeric,
[data-theme="light"] .data-table .cell-numeric, .standard-data-table .cell-numeric,
[data-theme="light"] .brokers-table .cell-numeric,
[data-theme="light"] .table .num-cell,
[data-theme="light"] .data-table .num-cell, .standard-data-table .num-cell,
[data-theme="light"] td[style*="font-variant-numeric"] {
  color: var(--tbl-text);
}

/* Numeric / money cells — show full values on split-screen layouts (no ellipsis) */
.table td.num-cell,
.data-table td.num-cell,
.standard-data-table td.num-cell,
.brokers-table td.num-cell,
.table td.text-right.num-cell,
.data-table td.text-right.num-cell,
#clients-list-table td.clients-equity-cell,
#clients-list-table td.num-cell,
#clients-list-table td.clients-list-actions {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* ── Equity class — vivid success (if used alongside numeric styling) ── */
.table .equity-value, .data-table .equity-value, .brokers-table .equity-value, .standard-data-table .equity-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-family: 'IBM Plex Mono', 'Roboto Mono', monospace;
  font-size: var(--tbl-body-font-size);
  font-weight: 600;
  color: var(--color-success-light) !important;
}
[data-theme="light"] .table .equity-value,
[data-theme="light"] .data-table .equity-value,
[data-theme="light"] .brokers-table .equity-value,
[data-theme="light"] .standard-data-table .equity-value {
  color: var(--color-success) !important;
}

/* ── Financial metric cells (Equity, Balance — primary emphasis) ── */
.cell-financial,
.table .cell-financial,
.data-table .cell-financial, .standard-data-table .cell-financial,
.brokers-table .cell-financial {
  font-family: 'IBM Plex Mono', 'Roboto Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-success-light) !important;
  text-align: right !important;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
[data-theme="light"] .cell-financial,
[data-theme="light"] .table .cell-financial,
[data-theme="light"] .data-table .cell-financial, .standard-data-table .cell-financial,
[data-theme="light"] .brokers-table .cell-financial {
  color: var(--color-success) !important;
}

/* ── Standard numeric cells ── */
.cell-numeric,
.table .cell-numeric,
.data-table .cell-numeric, .standard-data-table .cell-numeric,
.brokers-table .cell-numeric {
  font-family: 'IBM Plex Mono', 'Roboto Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 13px;
  font-weight: 500;
  text-align: right !important;
  white-space: nowrap;
  color: var(--tbl-text) !important;
}
[data-theme="light"] .cell-numeric,
[data-theme="light"] .table .cell-numeric,
[data-theme="light"] .data-table .cell-numeric, .standard-data-table .cell-numeric,
[data-theme="light"] .brokers-table .cell-numeric {
  color: var(--tbl-text) !important;
}

/* ── Percentage cells — colored by sign ── */
.cell-pct,
.table .cell-pct,
.data-table .cell-pct, .standard-data-table .cell-pct,
.brokers-table .cell-pct {
  font-family: 'IBM Plex Mono', 'Roboto Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 13px;
  font-weight: 500;
  text-align: right !important;
  white-space: nowrap;
}
.cell-pct.pct-positive { color: var(--color-success-light) !important; font-weight: 600; }
.cell-pct.pct-negative { color: #f05050 !important; }
.cell-pct.pct-neutral  { color: #457B79 !important; }
.cell-pct.pct-warning  { color: #FB923C !important; }
.cell-pct.pct-danger   { color: #f05050 !important; font-weight: 700 !important; }

[data-theme="light"] .cell-pct.pct-positive { color: var(--color-success) !important; }
[data-theme="light"] .cell-pct.pct-negative { color: #dc2626 !important; }
[data-theme="light"] .cell-pct.pct-warning  { color: #d97706 !important; }
[data-theme="light"] .cell-pct.pct-danger   { color: #dc2626 !important; font-weight: 700 !important; }

/* ── Positive / Negative value colours ── */
.table .cell-positive,  .data-table .cell-positive,  .brokers-table .cell-positive, .standard-data-table .cell-positive,  .brokers-table .cell-positive,
.table .positive-value, .data-table .positive-value, .brokers-table .positive-value, .standard-data-table .positive-value, .brokers-table .positive-value,
.table .val-gain,       .data-table .val-gain,        .brokers-table .val-gain, .standard-data-table .val-gain,        .brokers-table .val-gain,
.val-gain {
  color: var(--color-success) !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
[data-theme="light"] .table .cell-positive,
[data-theme="light"] .data-table .cell-positive,
[data-theme="light"] .brokers-table .cell-positive,
[data-theme="light"] .standard-data-table .cell-positive,
[data-theme="light"] .table .positive-value,
[data-theme="light"] .data-table .positive-value,
[data-theme="light"] .brokers-table .positive-value,
[data-theme="light"] .standard-data-table .positive-value,
[data-theme="light"] .table .val-gain,
[data-theme="light"] .data-table .val-gain,
[data-theme="light"] .standard-data-table .val-gain,
[data-theme="light"] .brokers-table .val-gain,
[data-theme="light"] .val-gain { color: var(--color-success) !important; }

/* Stronger success tint for Bootstrap utility inside data tables */
.table .text-success, .data-table .text-success, .standard-data-table .text-success, .brokers-table .text-success {
  color: var(--color-success) !important;
  font-weight: 600;
}
[data-theme="light"] .table .text-success,
[data-theme="light"] .data-table .text-success,
[data-theme="light"] .standard-data-table .text-success,
[data-theme="light"] .brokers-table .text-success {
  color: var(--color-success) !important;
}

.table .cell-negative,  .data-table .cell-negative,  .brokers-table .cell-negative, .standard-data-table .cell-negative,  .brokers-table .cell-negative,
.table .negative-value, .data-table .negative-value, .brokers-table .negative-value, .standard-data-table .negative-value, .brokers-table .negative-value,
.table .val-loss,       .data-table .val-loss,        .brokers-table .val-loss, .standard-data-table .val-loss,        .brokers-table .val-loss,
.val-loss {
  color: #f05050 !important;
  font-variant-numeric: tabular-nums;
}
[data-theme="light"] .table .val-loss,
[data-theme="light"] .data-table .val-loss,
[data-theme="light"] .standard-data-table .val-loss,
[data-theme="light"] .brokers-table .val-loss,
[data-theme="light"] .val-loss { color: #dc2626 !important; }

/* Neutral gray numbers */
.table .val-neutral, .data-table .val-neutral, .brokers-table .val-neutral, .standard-data-table .val-neutral, .brokers-table .val-neutral,
.val-neutral {
  color: #457B79 !important;
}

/* Emphasized numeric / display — still dark teal on pale table band */
.val-bright { color: var(--tbl-text) !important; font-weight: 600; }
[data-theme="light"] .val-bright { color: var(--tbl-text) !important; }

/* ── Zero / null value muting — visible but muted, not invisible ── */
.val-zero,
.table .val-zero,
.data-table .val-zero, .standard-data-table .val-zero,
.brokers-table .val-zero,
td.val-zero {
  color: #5a7775 !important;
  font-weight: 400 !important;
}
[data-theme="light"] .val-zero,
[data-theme="light"] .table .val-zero,
[data-theme="light"] .data-table .val-zero, .standard-data-table .val-zero,
[data-theme="light"] .brokers-table .val-zero,
[data-theme="light"] td.val-zero {
  color: #5a7775 !important;
}

/* ── Primary column cells (Broker, Login, Client Name) — strong contrast ── */
.col-primary,
.table .col-primary,
.data-table .col-primary, .standard-data-table .col-primary,
.brokers-table .col-primary {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tbl-text) !important;
  letter-spacing: -0.01em;
}
[data-theme="light"] .col-primary,
[data-theme="light"] .table .col-primary,
[data-theme="light"] .data-table .col-primary, .standard-data-table .col-primary,
[data-theme="light"] .brokers-table .col-primary {
  color: var(--tbl-text) !important;
}

/* ── Secondary column cells (CCY, Server, LEN, timestamps) — readable but subdued ── */
.col-secondary,
.table .col-secondary,
.data-table .col-secondary, .standard-data-table .col-secondary,
.brokers-table .col-secondary {
  font-size: 12.5px;
  font-weight: 400;
  color: #457B79 !important;
}
[data-theme="light"] .col-secondary,
[data-theme="light"] .table .col-secondary,
[data-theme="light"] .data-table .col-secondary, .standard-data-table .col-secondary,
[data-theme="light"] .brokers-table .col-secondary {
  color: #457B79 !important;
}

/* ── Column group separators ── */
.col-group-sep,
.table .col-group-sep,
.data-table .col-group-sep, .standard-data-table .col-group-sep,
.brokers-table .col-group-sep {
  border-left: 1px solid rgba(255,255,255,0.08) !important;
  padding-left: 22px !important;
}
[data-theme="light"] .col-group-sep,
[data-theme="light"] .table .col-group-sep,
[data-theme="light"] .data-table .col-group-sep, .standard-data-table .col-group-sep,
[data-theme="light"] .brokers-table .col-group-sep {
  border-left: 1px solid rgba(0,0,0,0.07) !important;
}

/* ── Risk indicators ── */
.risk-high {
  color: var(--color-error) !important;
  font-weight: 600 !important;
}
.risk-medium  { color: #FB923C !important; }
.risk-warning { color: var(--color-warning) !important; }

[data-theme="light"] .risk-high   { color: #dc2626 !important; }
[data-theme="light"] .risk-medium { color: #d97706 !important; }

/* ── Column minimums (prevent column crushing, ensure numbers never touch) ── */
.col-login, .col-account   { min-width: 120px; }
.col-client, .col-broker, .col-name { min-width: 160px; }
.col-instrument, .col-symbol { min-width: 120px; }
.col-category              { min-width: 130px; }
.col-equity, .col-balance, .col-price, .col-value { min-width: 140px; }
.col-credit                { min-width: 120px; }
.col-percentage, .col-pct  { min-width: 120px; }
.col-threshold             { min-width: 140px; }
.col-status                { min-width: 90px; text-align: center; }
.col-date                  { min-width: 130px; }
.col-server                { min-width: 130px; }
.col-ccy, .col-currency    { min-width: 80px; }

/* ── Truncate ── */
.table td.truncate,
.data-table td.truncate,
.standard-data-table td.truncate,
.brokers-table td.truncate {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px;
}

/* ── Numeric values never wrap ── */
.cell-financial,
.cell-numeric,
.cell-pct,
.table .cell-number, .data-table .cell-number, .standard-data-table .cell-number,
.table .equity-value, .data-table .equity-value, .standard-data-table .equity-value,
.table .numeric-value, .data-table .numeric-value, .standard-data-table .numeric-value,
td[style*="text-align:right"],
td[style*="font-variant-numeric"] { white-space: nowrap; }

/* ── Compact variant — same cell rhythm as standard clients tables ── */
.table-compact th, .data-table-compact th { padding: 10px 16px; font-size: 11px; }
.table-compact td, .data-table-compact td { padding: 10px 16px; font-size: 13px; height: auto; }

/* ── Wide variant (min-width for horizontal scroll) ── */
.table-wide, .data-table-wide { min-width: 1100px; }

/* ── Inactive row — theme-friendly (replaces hardcoded #2a1a1a / #888) ── */
.table tbody tr.row-inactive,
.data-table tbody tr.row-inactive, .standard-data-table tbody tr.row-inactive,
.brokers-table tbody tr.row-inactive {
  opacity: 0.55;
  background: rgba(239, 68, 68, 0.04) !important;
}
[data-theme="light"] .table tbody tr.row-inactive,
[data-theme="light"] .data-table tbody tr.row-inactive, .standard-data-table tbody tr.row-inactive,
[data-theme="light"] .brokers-table tbody tr.row-inactive {
  opacity: 0.60;
  background: rgba(239, 68, 68, 0.03) !important;
}

/* ── Inactive badge — replaces hardcoded color:#cf6679 ── */
.badge-inactive {
  font-size: 0.78em;
  font-weight: 500;
  color: var(--color-error);
  margin-left: 4px;
}
[data-theme="light"] .badge-inactive {
  color: #dc2626;
}

/* ── Editable cell hint ── */
th small.edit-hint {
  display: block;
  font-size: 10px;
  font-weight: 400;
  font-style: italic;
  color: var(--color-teal);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}
[data-theme="light"] th small.edit-hint {
  color: #0D9488;
}

/* ── Subtle even-row tint ── */
/* ── Override Bootstrap modifier classes (.table-striped, .table-hover, .table-compact, .table-wide)
   so all tables look identical to our custom .table style regardless of Bootstrap modifiers ── */

/* Neutralize Bootstrap striping — our tables are never zebra-striped */
.table.table-striped > tbody > tr:nth-of-type(odd) > *,
.table.table-striped > tbody > tr:nth-of-type(even) > *,
.data-table.table-striped > tbody > tr:nth-of-type(odd) > *,
.data-table.table-striped > tbody > tr:nth-of-type(even) > *,
.standard-data-table.table-striped > tbody > tr:nth-of-type(odd) > *,
.standard-data-table.table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-accent-bg: transparent;
  color: var(--tbl-text) !important;
  background-color: transparent !important;
}

/* Neutralize Bootstrap hover color injection on cells */
.table.table-hover > tbody > tr:hover > *,
.data-table.table-hover > tbody > tr:hover > *,
.standard-data-table.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: transparent;
  color: var(--tbl-text) !important;
  background-color: transparent !important;
}

/* table-wide: explicit full width when using Bootstrap helper class */
.table.table-wide, .data-table.table-wide, .standard-data-table.table-wide { width: 100%; }

/* (duplicate compact rules removed — canonical definition is above at line ~1421) */

/* Light-mode striped/hover override */
[data-theme="light"] .table.table-striped > tbody > tr:nth-of-type(odd) > *,
[data-theme="light"] .table.table-striped > tbody > tr:nth-of-type(even) > *,
[data-theme="light"] .data-table.table-striped > tbody > tr:nth-of-type(odd) > *,
[data-theme="light"] .data-table.table-striped > tbody > tr:nth-of-type(even) > *,
[data-theme="light"] .standard-data-table.table-striped > tbody > tr:nth-of-type(odd) > *,
[data-theme="light"] .standard-data-table.table-striped > tbody > tr:nth-of-type(even) > *,
[data-theme="light"] .table.table-hover > tbody > tr:hover > *,
[data-theme="light"] .data-table.table-hover > tbody > tr:hover > *,
[data-theme="light"] .standard-data-table.table-hover > tbody > tr:hover > * {
  color: var(--tbl-text) !important;
  background-color: transparent !important;
}

.table-striped tbody tr:nth-child(even),
.data-table-striped tbody tr:nth-child(even) {
  background: var(--tbl-row-alt);
}

/* ── Global: remove text-decoration from table links ── */
.table a, .data-table a, .standard-data-table a, .brokers-table a, .ft-table a,
.table td a, .data-table td a, .standard-data-table td a, .brokers-table td a {
  text-decoration: none !important;
}
.table a:hover, .data-table a:hover, .standard-data-table a:hover, .brokers-table a:hover, .ft-table a:hover {
  text-decoration: none !important;
}

/* ── Neutralize hardcoded light-on-dark inline colors inside unified tables (pale band) ── */
.table td[style*="color:#fff"],
.table td[style*="color: #fff"],
.table td[style*="color:#FFF"],
.table td[style*="color:#ffffff"],
.table td[style*="color:#FFFFFF"],
.data-table td[style*="color:#fff"],
.data-table td[style*="color: #fff"],
.data-table td[style*="color:#ffffff"],
.data-table td[style*="color:#FFFFFF"],
.standard-data-table td[style*="color:#fff"],
.standard-data-table td[style*="color: #fff"],
.standard-data-table td[style*="color:#ffffff"],
.standard-data-table td[style*="color:#FFFFFF"],
.brokers-table td[style*="color:#fff"],
.brokers-table td[style*="color: #fff"],
.brokers-table td[style*="color:#ffffff"],
.brokers-table td[style*="color:#FFFFFF"],
.ft-table td[style*="color:#fff"],
.ft-table td[style*="color: #fff"],
.ft-table td[style*="color:#ffffff"],
.ft-table td[style*="color:#FFFFFF"] {
  color: var(--tbl-text) !important;
}
/* Inline gray (#888) → muted teal on pale rows */
.table td[style*="color:#888"],
.data-table td[style*="color:#888"],
.standard-data-table td[style*="color:#888"],
.brokers-table td[style*="color:#888"],
.ft-table td[style*="color:#888"] {
  color: #5a7775 !important;
}

/* ==========================================================================
   SORTABLE COLUMNS — click header to sort; no visible sort glyphs
   ========================================================================== */
.table .sortable,
.data-table .sortable, .standard-data-table .sortable,
.brokers-table .sortable,
.ft-table .sortable,
.table thead th[data-sort-type]:not([data-no-sort]),
.data-table thead th[data-sort-type]:not([data-no-sort]),
.standard-data-table thead th[data-sort-type]:not([data-no-sort]),
.brokers-table thead th[data-sort-type]:not([data-no-sort]),
.ft-table thead th[data-sort-type]:not([data-no-sort]) {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: var(--tbl-cell-pad-x);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.table .sortable:hover,
.data-table .sortable:hover, .standard-data-table .sortable:hover,
.brokers-table .sortable:hover,
.ft-table .sortable:hover,
.data-table thead th[data-sort-type]:not([data-no-sort]):hover,
.standard-data-table thead th[data-sort-type]:not([data-no-sort]):hover,
.brokers-table thead th[data-sort-type]:not([data-no-sort]):hover,
.ft-table thead th[data-sort-type]:not([data-no-sort]):hover {
  color: inherit;
  background: var(--tbl-hover-bg);
}

/* Hide every sort affordance (product prefers discoverable-by-click only) */
.sort-icon,
.sort-arrow,
.broker-dir-sort-arrow,
.table .sortable::after,
.data-table .sortable::after,
.standard-data-table .sortable::after,
.brokers-table .sortable::after,
.ft-table .sortable::after,
.data-table th[data-sort-type]::after,
.standard-data-table th[data-sort-type]::after {
  display: none !important;
  content: none !important;
}

/* Editable column: pen next to title (see markEditableTableHeaders in common.js) */
th.th-col-editable .th-cell {
  gap: 6px;
}
th.th-col-editable .th-cell::after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  margin-left: 4px;
  opacity: 0.95;
  background-color: #fbbf24;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  vertical-align: middle;
}
[data-theme="light"] th.th-col-editable .th-cell::after {
  background-color: #d97706;
}
th.th-col-editable .th-edit-icon {
  display: none !important;
}

/* ==========================================================================
   COLUMN FILTERING
   ========================================================================== */
.filter-icon {
  display: inline-block;
  margin-left: 0;
  flex-shrink: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 10px;
  transition: opacity var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.table thead th:hover .filter-icon,
.data-table thead th:hover .filter-icon,
.standard-data-table thead th:hover .filter-icon,
.brokers-table thead th:hover .filter-icon,
.ft-table thead th:hover .filter-icon {
  opacity: 0.45;
  color: #a1a1aa;
}

.filter-icon:hover  { opacity: 0.75; color: #d4d4d8; transform: scale(1.05); }
.filter-icon.active { opacity: 0.85; color: #d4d4d8; }

/* Dropdown */
.filter-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md), 0 0 24px var(--color-accent-glow);
  padding: 14px;
  z-index: 1000;
  display: none;
  margin-top: 6px;
  animation: dropdown-appear 0.18s cubic-bezier(0.4,0,0.2,1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

[data-theme="light"] .filter-dropdown {
  background: var(--color-surface-1);
  box-shadow: var(--shadow-md);
}

@keyframes dropdown-appear {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}

.filter-dropdown.show { display: block; }

.filter-dropdown input[type="text"],
.filter-dropdown input[type="number"],
.filter-dropdown input[type="date"] {
  width: 100%;
  padding: 8px 12px;
  font-size: 12px;
  border: 1px solid var(--color-border-md);
  border-radius: var(--radius);
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  margin-bottom: 8px;
  transition: all var(--transition-fast);
  font-family: var(--font-primary);
}

.filter-dropdown input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.filter-range       { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.filter-range input { flex: 1; margin-bottom: 0; }

.filter-range-label {
  font-size: 11px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  display: block;
  font-weight: var(--font-weight-medium);
}

.filter-actions { display: flex; gap: 6px; margin-top: 10px; }

.filter-btn {
  flex: 1;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--color-border-md);
  border-radius: var(--radius);
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-primary);
}

.filter-btn:hover {
  background: var(--color-surface-4);
  transform: translateY(-1px);
}

.filter-btn.primary {
  background: var(--color-accent);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 8px var(--color-accent-glow);
}

.filter-btn.primary:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 4px 14px var(--color-accent-glow);
  transform: translateY(-2px);
}

/* ==========================================================================
   STATUS INDICATORS
   ========================================================================== */
.status-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
}

/* Animated pulse ring */
.status-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  animation: status-ring 2.5s ease-in-out infinite;
  opacity: 0;
}

@keyframes status-ring {
  0%, 100% { transform: scale(1);   opacity: 0; }
  50%       { transform: scale(1.8); opacity: 0.35; }
}

.status-dot.status-connected,
.status-dot.status-success {
  background: var(--color-success);
  box-shadow: 0 0 8px var(--color-success-glow);
}
.status-dot.status-connected::after,
.status-dot.status-success::after { background: var(--color-success); }

.status-dot.status-error,
.status-dot.status-disconnected,
.status-dot.status-danger {
  background: var(--color-error);
  box-shadow: 0 0 8px var(--color-error-glow);
}
.status-dot.status-error::after,
.status-dot.status-disconnected::after,
.status-dot.status-danger::after { background: var(--color-error); }

.status-dot.status-warning {
  background: var(--color-warning);
  box-shadow: 0 0 8px var(--color-warning-glow);
}
.status-dot.status-warning::after { background: var(--color-warning); }

.status-dot.status-unknown,
.status-dot.status-neutral {
  background: var(--color-text-tertiary);
  box-shadow: none;
}
.status-dot.status-neutral::after { animation: none; }

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.status-badge.active,
.status-badge.connected {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: rgba(16,185,129,0.25);
  box-shadow: 0 0 8px var(--color-success-glow);
}

.status-badge.inactive {
  background: var(--color-surface-3);
  color: var(--color-text-tertiary);
  border-color: var(--color-border);
}

.status-badge.disconnected {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: rgba(239,68,68,0.25);
  box-shadow: 0 0 8px var(--color-error-glow);
}

/* Legacy dot aliases */
.status-dot-success { background-color: var(--color-success); }
.status-dot-error, .status-dot-danger { background-color: var(--color-error); }
.status-dot-warning { background-color: var(--color-warning); }
.status-dot-info    { background-color: var(--color-info); }
.status-dot-neutral { background-color: var(--color-text-tertiary); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-group { margin-bottom: var(--spacing-5); }

.form-label {
  display: block;
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: 40px;
  padding: 10px var(--spacing-4);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-md);
  border-radius: var(--control-radius);
  transition: var(--control-transition);
  outline: none;
  box-sizing: border-box;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--color-border-strong);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-accent);
  background: var(--color-surface-3);
  box-shadow: var(--focus-ring);
}

.form-input::placeholder { color: var(--color-text-tertiary); }

[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-glow);
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: var(--line-height-relaxed);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-3) center;
  padding-right: var(--spacing-8);
  cursor: pointer;
}

.form-error { margin-top: var(--spacing-2); font-size: var(--font-size-sm); color: var(--color-error); }
.form-hint  { margin-top: var(--spacing-2); font-size: var(--font-size-sm); color: var(--color-text-tertiary); }

/* ==========================================================================
   BADGES
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-full);
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge-primary {
  background: var(--color-accent-subtle);
  color: var(--color-accent-light);
  border-color: var(--color-accent-border);
}

.badge-secondary {
  background: var(--color-teal-subtle);
  color: var(--color-teal);
  border-color: rgba(20,184,166,0.2);
}

.badge-success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: rgba(16,185,129,0.2);
}

.badge-error, .badge-danger {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: rgba(239,68,68,0.2);
}

.badge-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: rgba(245,158,11,0.2);
}

.badge-info {
  background: var(--color-info-bg);
  color: var(--color-info);
  border-color: rgba(14,165,233,0.2);
}

.badge-neutral {
  background: var(--color-surface-3);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

/* ==========================================================================
   MODALS
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4,7,14,0.80);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-6);
  animation: backdrop-in 0.2s ease;
}

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

.modal {
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-md);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 0 60px var(--color-accent-glow);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modal-in 0.2s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

[data-theme="light"] .modal {
  background: var(--color-surface-1);
  box-shadow: var(--shadow-lg);
}

.modal-header {
  padding: var(--spacing-5) var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: var(--letter-spacing-tight);
}

.modal-close {
  background: transparent;
  border: none;
  font-size: var(--font-size-xl);
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: var(--spacing-2);
  line-height: 1;
  transition: color var(--transition-fast);
  border-radius: var(--radius);
}
.modal-close:hover { color: var(--color-text-primary); background: var(--color-surface-4); }

.modal-body   { padding: var(--spacing-6); overflow-y: auto; flex: 1; }

.modal-footer {
  padding: var(--spacing-5) var(--spacing-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-3);
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.alert {
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  border: 1px solid;
  border-left: 3px solid;
}

.alert-success {
  background: var(--color-success-bg);
  border-color: rgba(16,185,129,0.25);
  border-left-color: var(--color-success);
  color: var(--color-success);
}

.alert-error, .alert-danger {
  background: var(--color-error-bg);
  border-color: rgba(239,68,68,0.25);
  border-left-color: var(--color-error);
  color: var(--color-error);
}

.alert-warning {
  background: var(--color-warning-bg);
  border-color: rgba(245,158,11,0.25);
  border-left-color: var(--color-warning);
  color: var(--color-warning);
}

.alert-info {
  background: var(--color-info-bg);
  border-color: rgba(14,165,233,0.25);
  border-left-color: var(--color-info);
  color: var(--color-info);
}

/* ==========================================================================
   TABS
   ========================================================================== */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-6);
}

.tab-item {
  padding: 10px var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.01em;
  position: relative;
  bottom: -1px;
}

.tab-item:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-3);
  border-radius: var(--radius) var(--radius) 0 0;
}

.tab-item.active {
  color: var(--color-accent-light);
  border-bottom-color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-6);
}

.nav-link {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.nav-link:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent-light);
  border-color: var(--color-accent-border);
  text-decoration: none;
}

.nav-link.active {
  background: var(--color-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px var(--color-accent-glow);
}

/* ==========================================================================
   ANIMATIONS & FUNCTIONAL
   ========================================================================== */

/* Spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border-md);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

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

/* Status pulse */
.status-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* Risk pulse */
.risk-high { animation: risk-blink 2.5s ease-in-out infinite; }

@keyframes risk-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.text-primary   { color: var(--color-text-primary)   !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-tertiary  { color: var(--color-text-tertiary)  !important; }
.text-success   { color: var(--color-success)        !important; }
.text-error, .text-danger { color: var(--color-error)!important; }
.text-warning   { color: var(--color-warning)        !important; }
.text-info      { color: var(--color-info)           !important; }
.text-muted     { color: var(--color-text-tertiary)  !important; }
.text-sm        { font-size: var(--font-size-sm)     !important; }

.bg-primary   { background-color: var(--color-surface-1)  !important; }
.bg-secondary { background-color: var(--color-surface)    !important; }
.bg-tertiary  { background-color: var(--color-surface-2)  !important; }

.m-0  { margin: 0 !important; }
.mt-1 { margin-top: var(--spacing-1) !important; }
.mt-2 { margin-top: var(--spacing-2) !important; }
.mt-3 { margin-top: var(--spacing-3) !important; }
.mt-4 { margin-top: var(--spacing-4) !important; }
.mt-5 { margin-top: var(--spacing-5) !important; }
.mt-6 { margin-top: var(--spacing-6) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-1) !important; }
.mb-2 { margin-bottom: var(--spacing-2) !important; }
.mb-3 { margin-bottom: var(--spacing-3) !important; }
.mb-4 { margin-bottom: var(--spacing-4) !important; }
.mb-5 { margin-bottom: var(--spacing-5) !important; }
.mb-6 { margin-bottom: var(--spacing-6) !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--spacing-1) !important; }
.p-2 { padding: var(--spacing-2) !important; }
.p-3 { padding: var(--spacing-3) !important; }
.p-4 { padding: var(--spacing-4) !important; }
.p-5 { padding: var(--spacing-5) !important; }
.p-6 { padding: var(--spacing-6) !important; }

.d-none        { display: none        !important; }
.d-block       { display: block       !important; }
.d-inline      { display: inline      !important; }
.d-inline-block{ display: inline-block!important; }
.d-flex        { display: flex        !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid        { display: grid        !important; }
.fw-bold       { font-weight: 700     !important; }
.fw-semibold   { font-weight: 600     !important; }
.font-mono     { font-family: 'IBM Plex Mono', monospace !important; font-variant-numeric: tabular-nums; }

.flex-row     { flex-direction: row     !important; }
.flex-column  { flex-direction: column  !important; }
.flex-wrap    { flex-wrap: wrap         !important; }
.flex-1       { flex: 1                 !important; }
.justify-start   { justify-content: flex-start  !important; }
.justify-center  { justify-content: center      !important; }
.justify-end     { justify-content: flex-end    !important; }
.justify-between { justify-content: space-between !important; }
.align-start  { align-items: flex-start !important; }
.align-center { align-items: center     !important; }
.align-end    { align-items: flex-end   !important; }
.gap-1 { gap: var(--spacing-1) !important; }
.gap-2 { gap: var(--spacing-2) !important; }
.gap-3 { gap: var(--spacing-3) !important; }
.gap-4 { gap: var(--spacing-4) !important; }

.text-left   { text-align: left   !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right  !important; }

.font-normal   { font-weight: var(--font-weight-normal)   !important; }
.font-medium   { font-weight: var(--font-weight-medium)   !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold     { font-weight: var(--font-weight-bold)     !important; }

.mx-auto       { margin-left: auto !important; margin-right: auto !important; }
/* Narrow forms only — still fluid to grid (no fixed pixel cap) */
.page-card-narrow { width: 100%; max-width: min(36rem, 100%); }
.grid-col-full { grid-column: 1 / -1 !important; }

.font-primary   { font-family: var(--font-primary)   !important; }
.font-secondary { font-family: var(--font-secondary) !important; }
.font-mono      { font-family: var(--font-mono)      !important; }

.w-full { width: 100% !important; }
.w-auto { width: auto  !important; }
.w-100  { width: 100px !important; }
.ws-nowrap { white-space: nowrap !important; }
.mr-1   { margin-right: var(--spacing-1) !important; }
.mr-2   { margin-right: var(--spacing-2) !important; }
.ml-2   { margin-left: var(--spacing-2) !important; }
.py-2   { padding-top: var(--spacing-2) !important; padding-bottom: var(--spacing-2) !important; }
.justify-center { justify-content: center !important; }

/* Login theme toggle position */
.login-theme-toggle { position: absolute; top: 16px; right: 16px; z-index: 100; }

/* Alert boxes */
.alert-box { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.alert-box-success { background: rgba(30,70,32,0.8); border: 1px solid var(--color-success); color: #a5d6a7; }
.alert-box-danger { background: rgba(74,21,21,0.8); border: 1px solid var(--color-error); color: #ef9a9a; }

.cell-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.no-decoration  { text-decoration: none !important; }
.color-inherit   { color: inherit !important; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media screen and (max-width: 768px) {
  :root {
    --font-size-3xl: 24px;
    --font-size-2xl: 20px;
    --font-size-xl:  17px;
  }

  .page-wrapper { padding: 0; }
  .page-card    { padding: var(--spacing-5); border-radius: 0; }

  .table-container,
  .brokers-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table, .data-table, .standard-data-table, .brokers-table { min-width: 600px; }

  .table th, .data-table th, .standard-data-table th, .brokers-table th, .ft-table th,
  .table td, .data-table td, .standard-data-table td, .brokers-table td, .ft-table td {
    padding: 10px 14px;
  }
  .table td, .data-table td, .standard-data-table td, .brokers-table td, .ft-table td {
    font-size: 13px;
  }
  /* Keep header typography aligned with global institutional table spec (do not shrink to 10px). */
  .table th, .data-table th, .standard-data-table th, .brokers-table th, .ft-table th {
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  .filter-icon { display: none; }

  .btn { min-height: 44px; }

  .form-input,
  .form-select,
  .form-textarea { font-size: 16px; min-height: 44px; }

  .modal { margin: var(--spacing-4); max-width: calc(100% - var(--spacing-8)); border-radius: var(--radius-lg); }
}

@media screen and (max-width: 480px) {
  .page-wrapper { padding: 0; }
  .page-card    { padding: var(--spacing-4); }
  .table th, .table td,
  .data-table th, .data-table td, .standard-data-table th, .standard-data-table td,
  .brokers-table th, .brokers-table td { padding: 10px 12px; }
}

@media screen and (min-width: 1920px) {
  .table-page-container { max-width: 1850px; }
}

/* ==========================================================================
   HIERARCHICAL SIDEBAR NAVIGATION — Level 1 / Level 2
   Two-level navigation for SCC Operations Control Center
   ========================================================================== */

/* ── App Shell with Sidebar (see LAYOUT: .app-shell for shell chrome) ── */

.sidebar {
  width: var(--layout-sidebar-width);
  min-width: var(--layout-sidebar-width);
  background:
    radial-gradient(ellipse 100% 70% at 0% 0%, color-mix(in srgb, var(--accent-soft) 14%, transparent), transparent 55%),
    var(--ds-shell-bg);
  border: none;
  box-shadow: var(--ds-shell-shadow);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 50%;
  left: var(--shell-float-inset);
  transform: translateY(-50%);
  height: auto;
  max-height: var(--sidebar-panel-max-height);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
  z-index: var(--z-sticky);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    width 260ms cubic-bezier(0.4, 0, 0.2, 1),
    min-width 260ms cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(var(--ds-shell-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--ds-shell-blur)) saturate(140%);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-md) transparent;
  font-family: 'Inter', var(--font-primary), system-ui, -apple-system, sans-serif;
}

/* ── Sidebar toggle button — visible only on mobile ── */
.sidebar-toggle {
  display: none;
}
@media screen and (max-width: 1024px) {
  .sidebar-toggle {
    display: flex;
  }
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--color-border-md); border-radius: 4px; }

[data-theme="light"] .sidebar {
  background:
    radial-gradient(ellipse 100% 70% at 0% 0%, color-mix(in srgb, var(--accent-soft) 8%, transparent), transparent 55%),
    var(--ds-shell-bg);
  border: 1px solid color-mix(in srgb, #f8fafc 14%, transparent);
  backdrop-filter: blur(var(--ds-shell-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--ds-shell-blur)) saturate(135%);
}

[data-theme="dark"] .sidebar {
  --sidebar-active-rail: color-mix(in srgb, #7a8bb8 50%, var(--accent-soft) 50%);
  --sidebar-active-fg: #eff6ff;
  --sidebar-active-bg: color-mix(in srgb, var(--accent-soft) 9%, transparent);
}

/* ── Sidebar Brand ── */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: none;
  box-shadow: 0 1px 0 0 var(--ds-border);
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.sidebar-brand:hover { text-decoration: none; }

/* AREX logo in sidebar / login */
.sidebar-brand-row .sidebar-brand-mark,
.global-topbar-brand-link .sidebar-brand-mark,
.login-logo-img {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
}
.login-logo-img {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 16px;
}
.global-topbar-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
  gap: 2px;
}

.sidebar-brand-main {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.sidebar-brand-sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.global-topbar-brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  min-height: 36px;
}
.global-topbar-brand-link:hover {
  text-decoration: none;
  color: inherit;
}
.global-topbar-brand-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Legacy page topbar logo (text-only SCC) */
a.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.logo-wordmark {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
}
.logo-tagline {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
}

/* ── Sidebar Nav Section ── */
.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-md) transparent;
}

.sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}

.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border-md);
  border-radius: 4px;
}

.sidebar-nav {
  padding: 4px 0 12px;
}

.sidebar-bottom {
  flex-shrink: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

[data-theme="light"] .sidebar-bottom {
  border-top-color: rgba(15, 23, 42, 0.07);
}

.sidebar-bottom .sidebar-nav {
  padding-top: 6px;
  padding-bottom: 10px;
}

.sidebar-section-label {
  padding: 12px 16px 6px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #94a3b8;
}

/* ── Level 1 Items — uniform vertical rhythm with L2 ── */
.sidebar-l1 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 10px;
  margin: 4px 10px;
  width: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  text-align: left;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
  border-radius: 16px;
  position: relative;
  user-select: none;
}

.sidebar-l1:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--color-text-primary);
  text-decoration: none;
}

.sidebar-l1.active {
  color: var(--color-text-primary);
  background: var(--color-accent-subtle);
  font-weight: 600;
}

.sidebar-l1.active::before {
  display: none;
}

[data-theme="dark"] .sidebar-l1:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .sidebar-l1.active {
  color: var(--sidebar-active-fg, #fafafa);
  background: var(--sidebar-active-bg, rgba(255, 255, 255, 0.08));
}

.sidebar-l1-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 14px;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.sidebar-l1:hover .sidebar-l1-icon {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--color-text-primary);
}

/* One chrome layer only: the L1 row carries active background; no nested icon frame */
.sidebar-l1.active .sidebar-l1-icon {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--color-text-primary);
}

[data-theme="dark"] .sidebar-l1.active .sidebar-l1-icon {
  color: var(--sidebar-active-fg, var(--color-text-primary));
}

[data-theme="light"] .sidebar .sidebar-l1-icon,
[data-bs-theme="light"] .sidebar .sidebar-l1-icon {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: color-mix(in srgb, #f8fafc 88%, var(--accent-soft) 12%);
}

[data-theme="light"] .sidebar .sidebar-l1:hover .sidebar-l1-icon,
[data-bs-theme="light"] .sidebar .sidebar-l1:hover .sidebar-l1-icon {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #f8fafc;
}

[data-theme="light"] .sidebar .sidebar-l1.active .sidebar-l1-icon,
[data-bs-theme="light"] .sidebar .sidebar-l1.active .sidebar-l1-icon {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--sidebar-active-fg, #f8fafc);
}

body.app-sidebar-collapsed .sidebar .sidebar-l1-icon,
.app-shell.app-shell--sidebar-collapsed .sidebar .sidebar-l1-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.sidebar-icon-svg {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.92;
}

/* L1 nav: multi-color SVG glyphs (replaces emoji) */
.sidebar-l1-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.sidebar-l1-glyph-svg {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.sidebar-l1-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-l1-chevron {
  font-size: 10px;
  color: var(--color-text-tertiary);
  transition: transform 200ms ease;
  flex-shrink: 0;
}

/* Wrapper rotation intentionally left out — the inner .sidebar-chevron-svg
   handles the 90° clockwise spin that flips the right-facing chevron to
   point DOWN when the section is expanded. Stacking a wrapper rotation
   on top would compose to 270° (i.e. an up-arrow), which is the bug we
   already fixed below. */

/* ── Level 2 Sub-items ── */
.sidebar-l2-group {
  display: none;
  margin: 0;
  padding: 2px 10px 6px 0;
  background: transparent;
  border: none;
}

.sidebar-l1.expanded + .sidebar-l2-group {
  display: block;
}

.sidebar-l2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 32px;
  margin: 3px 0 3px 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
  border-radius: 14px;
  position: relative;
}

.sidebar-l2:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--color-text-primary);
  text-decoration: none;
}

.sidebar-l2.active {
  color: var(--color-text-primary);
  font-weight: 600;
  background: var(--color-accent-subtle);
}

[data-theme="dark"] .sidebar-l2:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .sidebar-l2.active {
  color: var(--sidebar-active-fg, #fafafa);
  background: var(--sidebar-active-bg, rgba(255, 255, 255, 0.08));
}

.sidebar-l2.active::before {
  display: none;
}

.sidebar-l2-label {
  flex: 1;
  min-width: 0;
}

.sidebar-l2-dot {
  display: none;
}

.sidebar-l2-badge {
  margin-left: auto;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  background: var(--color-surface-4);
  color: var(--color-text-secondary);
}

.sidebar-l2-badge.badge-new {
  background: var(--color-accent-subtle);
  color: var(--color-accent-light);
}

.sidebar-l2-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 32px;
  pointer-events: auto;
}

.sidebar-l2-header--client .sidebar-l2-header-label {
  flex: 1;
  min-width: 0;
  font-size: clamp(13px, 1.35vw, 15px);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #fb923c;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-l2-header-clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.sidebar-l2-header-clear:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
}

.sidebar-l2-header-clear:focus-visible {
  outline: 2px solid var(--btn-border-slate);
  outline-offset: 2px;
}

[data-theme="light"] .sidebar .sidebar-l2-header--client .sidebar-l2-header-label,
[data-bs-theme="light"] .sidebar .sidebar-l2-header--client .sidebar-l2-header-label {
  color: #c2410c;
  opacity: 1;
}

[data-theme="light"] .sidebar .sidebar-l2-header-clear,
[data-bs-theme="light"] .sidebar .sidebar-l2-header-clear {
  color: color-mix(in srgb, #f8fafc 65%, transparent);
}

[data-theme="light"] .sidebar .sidebar-l2-header-clear:hover,
[data-bs-theme="light"] .sidebar .sidebar-l2-header-clear:hover {
  background: color-mix(in srgb, #ffffff 12%, transparent);
  color: #f8fafc;
}

.sidebar-l2.sidebar-l2-action {
  opacity: 0.7;
  font-style: italic;
}

.sidebar-l2.sidebar-l2-action:hover {
  opacity: 1;
}

/* ── Sidebar Footer ── */
.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

[data-theme="light"] .sidebar-footer {
  border-top-color: color-mix(in srgb, #f8fafc 14%, transparent);
}

[data-theme="light"] .sidebar .sidebar-user-name,
[data-bs-theme="light"] .sidebar .sidebar-user-name {
  color: #f8fafc;
}

[data-theme="light"] .sidebar .sidebar-user-role,
[data-bs-theme="light"] .sidebar .sidebar-user-role {
  color: color-mix(in srgb, #f8fafc 68%, transparent);
}

.sidebar-user-avatar {
  width: 28px;
  height: 28px;
  background: linear-gradient(145deg, var(--color-accent), var(--color-accent-hover));
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 10px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar-logout-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-error);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}

.sidebar-logout-btn:hover {
  border: none;
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 14%, transparent);
  text-decoration: none;
}

.sidebar-logout-btn:focus-visible {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   SPLIT-ROW SIDEBAR ITEMS — parent toggles submenu only; L2 links navigate
   ══════════════════════════════════════════════════════════════════════ */
.sidebar-l1-split-row {
  display: flex;
  align-items: stretch;
  width: auto;
  margin: 4px 10px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transition: background 200ms ease, color 200ms ease;
}

.sidebar-l1-split-row:hover {
  background: rgba(15, 23, 42, 0.05);
}

.sidebar-l1-split-row:hover .sidebar-l1-icon {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--color-text-primary);
}

[data-theme="dark"] .sidebar-l1-split-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-l1-split-row.active > .sidebar-l1-link {
  color: var(--color-text-primary);
  font-weight: 600;
}

.sidebar-l1-split-row.active {
  background: var(--color-accent-subtle);
}

.sidebar-l1-split-row.active::before {
  display: none;
}

[data-theme="dark"] .sidebar-l1-split-row.active > .sidebar-l1-link {
  color: var(--sidebar-active-fg, #fafafa);
}

[data-theme="dark"] .sidebar-l1-split-row.active {
  background: var(--sidebar-active-bg, rgba(255, 255, 255, 0.08));
}

.sidebar-l1-split-row.active .sidebar-l1-icon {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--color-text-primary);
}

[data-theme="dark"] .sidebar-l1-split-row.active .sidebar-l1-icon {
  color: var(--sidebar-active-fg, var(--color-text-primary));
}

[data-theme="light"] .sidebar .sidebar-l1-split-row:not(.active) .sidebar-l1-icon,
[data-bs-theme="light"] .sidebar .sidebar-l1-split-row:not(.active) .sidebar-l1-icon {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: color-mix(in srgb, #f8fafc 86%, var(--accent-soft) 14%);
}

[data-theme="light"] .sidebar .sidebar-l1-split-row:not(.active):hover .sidebar-l1-icon,
[data-bs-theme="light"] .sidebar .sidebar-l1-split-row:not(.active):hover .sidebar-l1-icon {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #f8fafc;
}

[data-theme="light"] .sidebar .sidebar-l1-split-row.active .sidebar-l1-icon,
[data-bs-theme="light"] .sidebar .sidebar-l1-split-row.active .sidebar-l1-icon {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--sidebar-active-fg, #f8fafc);
}

.sidebar-l1-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px 8px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: default;
  transition: background 200ms ease, color 200ms ease;
  min-width: 0;
  user-select: none;
  border-radius: 0;
}

button.sidebar-l1-link.sidebar-l1-parent-toggle {
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  margin: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  width: auto;
}

.sidebar-l1-parent-toggle:focus {
  outline: none;
}

.sidebar-l1-parent-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.sidebar-l1-link:hover {
  color: var(--color-text-primary);
  text-decoration: none;
  background: transparent;
}

.sidebar-l1-split-row.active .sidebar-l1-link {
  background: transparent;
}

.sidebar-l1-chevron-btn {
  width: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  font-size: 12px;
  transition: background 200ms ease, color 200ms ease;
  flex-shrink: 0;
  padding: 0;
  border-radius: 0;
}

.sidebar-l1-chevron-btn:hover {
  background: rgba(148, 163, 184, 0.1);
  color: var(--color-text-primary);
}

[data-theme="light"] .sidebar-l1-chevron-btn:hover {
  background: rgba(15, 23, 42, 0.06);
}

.sidebar-l1-chevron-btn .sidebar-l1-chevron {
  display: inline-block;
  transition: transform 200ms ease;
  font-size: 14px;
}

/* No wrapper rotation here either — see the matching note above. The
   inner .sidebar-chevron-svg below rotates 90° clockwise on .expanded,
   which is exactly what we want: collapsed → ▶, expanded → ▼. */

.sidebar-l1-split-row.expanded + .sidebar-l2-group {
  display: block;
}


/* Light canvas + dark glass sidebar — split-row uses .sidebar-l1-link (must not inherit page text colors) */
[data-theme="light"] .sidebar .sidebar-l1-link,
[data-bs-theme="light"] .sidebar .sidebar-l1-link {
  color: color-mix(in srgb, #f8fafc 88%, var(--accent-soft) 12%);
}

[data-theme="light"] .sidebar .sidebar-l1-link:hover,
[data-bs-theme="light"] .sidebar .sidebar-l1-link:hover {
  color: #f8fafc;
}

[data-theme="light"] .sidebar .sidebar-l1-split-row:hover,
[data-bs-theme="light"] .sidebar .sidebar-l1-split-row:hover {
  background: color-mix(in srgb, #ffffff 10%, transparent);
}

[data-theme="light"] .sidebar .sidebar-l1-split-row:hover .sidebar-l1-icon,
[data-bs-theme="light"] .sidebar .sidebar-l1-split-row:hover .sidebar-l1-icon {
  color: #f8fafc;
}

[data-theme="light"] .sidebar .sidebar-l1-split-row.active,
[data-bs-theme="light"] .sidebar .sidebar-l1-split-row.active {
  background: color-mix(in srgb, var(--accent-soft) 24%, transparent);
}

[data-theme="light"] .sidebar-l1-split-row.active > .sidebar-l1-link,
[data-bs-theme="light"] .sidebar-l1-split-row.active > .sidebar-l1-link {
  color: var(--sidebar-active-fg, #f8fafc);
}

[data-theme="light"] .sidebar .sidebar-l1-chevron-btn,
[data-bs-theme="light"] .sidebar .sidebar-l1-chevron-btn {
  color: color-mix(in srgb, #f8fafc 68%, transparent);
}

[data-theme="light"] .sidebar .sidebar-l1-chevron-btn:hover,
[data-bs-theme="light"] .sidebar .sidebar-l1-chevron-btn:hover {
  color: #f8fafc;
  background: color-mix(in srgb, #ffffff 12%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE TRANSITION — content area fade/slide
   ══════════════════════════════════════════════════════════════════════ */
.page-transition-enter {
  animation: pageEnter 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

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

.page-transition-exit {
  animation: pageExit 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes pageExit {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   COLLAPSIBLE TABLE SECTIONS
   ══════════════════════════════════════════════════════════════════════ */
.collapsible-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}

.collapsible-table-header:hover {
  background: var(--color-surface-4);
}

.collapsible-table-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.collapsible-table-chevron {
  font-size: 12px;
  color: var(--color-text-tertiary);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

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

.collapsible-table-body {
  overflow: hidden;
  transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.collapsible-table-section.collapsed .collapsible-table-body {
  max-height: 0 !important;
}

/* ── Main content with sidebar ── */
.sidebar-content {
  margin-left: var(--layout-sidebar-edge);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: margin-left 250ms cubic-bezier(0.4,0,0.2,1);
}

/* ══════════════════════════════════════════════════════════════════════
   GLOBAL TOPBAR — fixed full-width, always on top of sidebar
   ══════════════════════════════════════════════════════════════════════ */
.global-topbar,
.injected-global-topbar {
  position: fixed;
  top: var(--shell-float-inset);
  left: var(--shell-float-inset);
  right: var(--shell-float-inset);
  width: auto;
  height: var(--layout-topbar-height);
  z-index: 1200;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 0 20px;
  background:
    radial-gradient(ellipse 90% 120% at 100% -20%, color-mix(in srgb, var(--accent-soft) 12%, transparent), transparent 45%),
    var(--ds-shell-bg);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--ds-shell-shadow);
  backdrop-filter: blur(var(--ds-shell-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--ds-shell-blur)) saturate(140%);
  font-family: 'Inter', var(--font-primary), system-ui, -apple-system, sans-serif;
  transition: box-shadow var(--transition-base);
}

/* Search-only top strip: no glass bar; floating pill search centered on the canvas */
.global-topbar.global-topbar--search-only,
.injected-global-topbar.global-topbar--search-only {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-left: 16px;
  padding-right: 16px;
  display: block;
}

.global-topbar--search-only .global-topbar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-height: var(--layout-topbar-height);
  column-gap: 12px;
  box-sizing: border-box;
}

.global-topbar--search-only .global-topbar-spacer {
  grid-column: 1;
  min-width: 0;
}

.global-topbar--search-only .global-topbar-center {
  grid-column: 2;
  max-width: 520px;
  width: min(520px, 92vw);
  justify-self: center;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.global-topbar--search-only .global-topbar-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

.sidebar-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--ds-border);
  box-sizing: border-box;
}

.sidebar-brand-row .global-topbar-brand-link {
  margin-left: 2px;
  min-height: 32px;
}

[data-theme="light"] .sidebar-brand-row {
  border-bottom-color: color-mix(in srgb, var(--text-dark) 10%, transparent);
}

/* Unified branding: bold white SCC only (no secondary tagline in topbar) */
.global-topbar .sidebar-brand-sub {
  display: none !important;
}
.global-topbar .sidebar-brand-main {
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

[data-theme="dark"] .global-topbar .sidebar-brand-main {
  color: var(--color-text-primary);
}

/* Left: brand + controls */
.global-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  grid-column: 1;
  min-width: 0;
}

/* Center: pill search */
.global-topbar-center {
  grid-column: 2;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.global-topbar-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  padding: 9px 18px;
  border-radius: var(--radius-full);
  background: var(--ds-app-canvas);
  border: 1px solid color-mix(in srgb, var(--accent-soft) 16%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-light) 6%, transparent);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.global-topbar-search-wrap:focus-within {
  border-color: color-mix(in srgb, var(--accent-soft) 38%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 8%, transparent),
    0 0 0 3px color-mix(in srgb, var(--accent-soft) 18%, transparent);
}

.global-topbar-search-icon {
  flex-shrink: 0;
  opacity: 0.62;
  color: var(--color-text-secondary);
}

.global-topbar-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 14px;
  outline: none;
}

.global-topbar-search-input::placeholder {
  color: var(--color-text-tertiary);
}

[data-theme="light"] .global-topbar-search-wrap {
  background: color-mix(in srgb, var(--ds-app-canvas) 40%, #e8f1fb 60%);
  border-color: color-mix(in srgb, var(--text-light) 14%, transparent);
}

[data-theme="light"] .global-topbar-search-input::placeholder {
  color: var(--color-text-tertiary);
}

/* Right: user / actions */
.global-topbar-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

.active-client-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(240px, 42vw);
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 35%, transparent);
  background: color-mix(in srgb, var(--accent, #3b82f6) 12%, transparent);
  font-size: 0.8125rem;
  line-height: 1.2;
}
.active-client-chip__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.active-client-chip__link {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-client-chip__link:hover { text-decoration: underline; }
.active-client-chip__clear {
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
}
.active-client-chip__clear:hover { opacity: 1; }

.injected-global-topbar .global-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .global-topbar:not(.global-topbar--search-only) .global-topbar-center {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   UNIFIED TOPBAR BUTTONS — theme toggle, notifications, sidebar toggle
   Applies to global-topbar and injected-global-topbar on ALL pages
   ══════════════════════════════════════════════════════════════════════ */

/* Theme toggle — removed from UI; keep rules for legacy markup */
.theme-toggle-btn,
.login-theme-toggle {
  display: none !important;
}

.theme-toggle-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--color-border-md);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 15px;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
  padding: 0;
}
.theme-toggle-btn:hover {
  background: var(--color-surface-4);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.theme-icon-sun, .theme-icon-moon {
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-icon-sun svg, .theme-icon-moon svg {
  width: var(--icon-size-ui);
  height: var(--icon-size-ui);
  stroke: currentColor; fill: none;
  display: block;
  opacity: 0.85;
}
[data-theme="dark"]  .theme-icon-sun  { display: flex; }
[data-theme="dark"]  .theme-icon-moon { display: none; }
[data-theme="light"] .theme-icon-sun  { display: none; }
[data-theme="light"] .theme-icon-moon { display: flex; }

/* User avatar button */
.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast);
  color: var(--color-text-primary);
}
.user-menu-btn:hover { background: var(--color-surface-4); text-decoration: none; }

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  background: var(--color-accent);
  color: var(--text-light);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}
.user-info { display: flex; flex-direction: column; line-height: 1.2; }
.user-name { font-size: 12px; font-weight: 600; color: var(--color-text-primary); }
.user-role { font-size: 10px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }

/* ══════════════════════════════════════════════════════════════════════
   PAGE TITLE SPACING — consistent across all page types
   ══════════════════════════════════════════════════════════════════════ */

/* Section pages hero title */
.section-hero h1,
.page-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 4px 0;
}
.section-hero p,
.page-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── Old sidebar-topbar: hide it, replaced by global-topbar ── */
.sidebar-topbar {
  display: none !important;
}

/* ── Section landing page ── */
.section-hero {
  padding: 28px 32px 20px;
  border-bottom: none;
  box-shadow: 0 1px 0 0 var(--ds-border);
  background: var(--color-surface-1);
}

.section-hero-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-hero-icon {
  font-size: 22px;
}

.section-hero-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── Module grid on section landing pages ── */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 24px 32px;
}

.module-card {
  background: color-mix(in srgb, var(--color-surface-1) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, var(--ds-glass-rim) 45%);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 8%, transparent),
    var(--ds-card-shadow);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
}

.module-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.module-card:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 10%, transparent),
    color-mix(in srgb, var(--ds-card-shadow-hover) 88%, transparent 12%);
  transform: translateY(-2px);
  text-decoration: none;
}

.module-card:hover::before { opacity: 1; }

[data-theme="light"] .module-card {
  background: var(--ds-surface-gradient);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, var(--ds-glass-rim) 45%);
  border-radius: var(--radius-lg);
  box-shadow: var(--ds-card-shadow);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
}

[data-theme="light"] .module-card:hover {
  box-shadow: var(--shadow-md);
}

.module-card-icon {
  font-size: 22px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border: none;
  box-shadow: 0 0 0 1px var(--ds-border);
  border-radius: 8px;
}

.module-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.module-card-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.module-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.module-card-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.module-card-badge.active {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.module-card-badge.placeholder {
  background: var(--color-surface-3);
  color: var(--color-text-tertiary);
}

.module-card-badge.soon {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.module-card-arrow {
  font-size: 14px;
  color: var(--color-text-tertiary);
  transition: all var(--transition-fast);
}

.module-card:hover .module-card-arrow {
  color: var(--color-accent);
  transform: translateX(4px);
}

/* ── Settings page layout ── */
.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  min-height: calc(100vh - 56px);
}

/* Phones / narrow screens: stack the settings sidebar above the content and
   turn it into a horizontally scrollable pill bar. */
@media screen and (max-width: 768px) {
  .settings-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .settings-sidebar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding: 8px 4px;
    box-shadow: 0 1px 0 0 var(--ds-border);
  }
  .settings-sidebar-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.settings-sidebar {
  border-right: none;
  box-shadow: 1px 0 0 0 var(--ds-border);
  padding: 16px 0;
}

.settings-sidebar-item {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.settings-sidebar-item:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-3);
  text-decoration: none;
}

.settings-sidebar-item.active {
  color: var(--color-accent-light);
  background: var(--color-accent-subtle);
  font-weight: 500;
}

[data-theme="light"] .settings-sidebar-item.active {
  color: var(--color-accent);
}

.settings-content {
  padding: 24px 32px;
}

/* ── Responsive sidebar (phone + fold inner ≤1024px) ──
   Full-height edge drawer — NOT the desktop floating centered pill.
   The old translate(-width, -50%) pattern left the nav panel vertically
   centered and partially under the fixed topbar (z-index 1200), which
   broke taps on Pixel Fold / Android Chrome. */
@media screen and (max-width: 1024px) {
  .sidebar {
    /* Floating look (inset + rounded) while keeping the edge-drawer
       behavior: full-height anchoring, slide-in transform, high z-index.
       Never vertically center (old Pixel Fold tap bug). */
    top: var(--shell-float-inset);
    left: var(--shell-float-inset);
    bottom: var(--shell-float-inset);
    height: auto;
    max-height: calc(100dvh - 2 * var(--shell-float-inset));
    width: min(300px, 88vw);
    min-width: 0;
    border-radius: var(--radius-lg);
    transform: translate3d(calc(-100% - 2 * var(--shell-float-inset)), 0, 0);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 280ms ease;
  }

  .sidebar.sidebar-open {
    transform: translate3d(0, 0, 0);
    z-index: 1350;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
  }

  .sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar-l1-link,
  .sidebar-l1-chevron-btn,
  .sidebar-l2 {
    touch-action: manipulation;
  }

  .sidebar-l2 {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .sidebar-l1-chevron-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .sidebar .sidebar-brand-row {
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    flex-shrink: 0;
  }

  .sidebar-content {
    margin-left: 0 !important;
  }

  .injected-page-content {
    margin-left: 0 !important;
  }

  .module-grid {
    padding: 16px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .section-hero {
    padding: 20px 16px 16px;
  }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  body { background: white; color: black; }
  .nav-bar, .btn, .modal-backdrop { display: none !important; }
  .page-card { box-shadow: none; border: 1px solid #e8e8e8; border-radius: 0; }
  .table th, .table td { border: 1px solid #e8e8e8; }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-accent);
  color: #fff;
  padding: var(--spacing-2) var(--spacing-4);
  text-decoration: none;
  z-index: var(--z-tooltip);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { top: 0; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   HOME DASHBOARD — App Shell Layout
   ========================================================================== */

/* Home page content wrapper */
.home-content {
  flex: 1;
  padding: var(--layout-content-padding-top) var(--layout-page-padding) var(--layout-page-padding);
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  box-sizing: border-box;
}

.home-header {
  margin-bottom: var(--spacing-6);
}

.home-header .page-heading {
  margin-bottom: var(--spacing-1);
}

.home-header p {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Home dashboard panels — same width & chrome as data tables (.ui-card) */
.dash-chart-card {
  padding: 0;
  overflow: hidden;
  margin: 0 0 var(--spacing-6) 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.dash-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
  flex-wrap: wrap;
  padding: var(--spacing-5) var(--spacing-5) var(--spacing-4);
  border-bottom: 1px solid var(--tbl-divider);
}
.dash-chart-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}
.dash-chart-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.dash-chart-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.dash-chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-chart-body {
  padding: var(--spacing-4) var(--spacing-5) var(--spacing-5);
  min-height: 260px;
}
.dash-activity-row {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.dash-activity-card {
  padding: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.dash-activity-header {
  padding: var(--spacing-4) var(--spacing-5);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tbl-text-sec);
  border-bottom: 1px solid var(--tbl-divider);
}
.dash-activity-list { padding: var(--spacing-2) 0; }
.dash-activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--spacing-3) var(--spacing-5);
  border-bottom: 1px solid var(--tbl-divider);
}
.dash-activity-item:last-child { border-bottom: none; }
.dash-activity-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-surface-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.dash-activity-info { flex: 1; min-width: 0; }
.dash-activity-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
}
.dash-activity-name:hover { color: var(--color-accent-light); }
.dash-activity-meta { font-size: 12px; color: var(--color-text-tertiary); }
.dash-activity-value {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  flex-shrink: 0;
}

/* Quick stats row */
.home-stats-row {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.home-stat-card {
  flex: 1;
  min-width: 140px;
  background: color-mix(in srgb, var(--color-surface-1) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, var(--ds-glass-rim) 45%);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 7%, transparent),
    var(--ds-card-shadow);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
}

.home-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.home-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.home-stat-icon {
  font-size: 18px;
  margin-bottom: 6px;
}

/* Category groupings */
.tile-group {
  margin-bottom: 28px;
}

.tile-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-text-tertiary);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

.tile-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

/* Modern tile design */
.dash-tile {
  background: var(--ds-surface-gradient);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  cursor: pointer;
  min-height: 110px;
  box-shadow: var(--ds-card-shadow);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, var(--ds-glass-rim) 45%);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
}

.dash-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 160ms ease;
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.dash-tile:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: color-mix(in srgb, var(--ds-card-shadow-hover) 82%, transparent 18%);
  border-color: color-mix(in srgb, var(--accent-soft) 22%, transparent);
  text-decoration: none;
  color: inherit;
}

.dash-tile:hover::before { opacity: 1; }

[data-theme="light"] .dash-tile:hover {
  box-shadow: color-mix(in srgb, var(--ds-card-shadow-hover) 82%, transparent 18%);
}

/* Tile color variants */
.dash-tile-blue::before   { background: linear-gradient(135deg, rgba(59,130,246,0.10) 0%, transparent 70%); }
.dash-tile-teal::before   { background: linear-gradient(135deg, rgba(20,184,166,0.10) 0%, transparent 70%); }
.dash-tile-purple::before { background: linear-gradient(135deg, rgba(139,92,246,0.10) 0%, transparent 70%); }
.dash-tile-gold::before   { background: linear-gradient(135deg, rgba(201,162,39,0.10) 0%, transparent 70%); }
.dash-tile-green::before  { background: linear-gradient(135deg, rgba(16,185,129,0.10) 0%, transparent 70%); }
.dash-tile-sky::before    { background: linear-gradient(135deg, rgba(14,165,233,0.10) 0%, transparent 70%); }
.dash-tile-indigo::before { background: linear-gradient(135deg, rgba(99,102,241,0.10) 0%, transparent 70%); }
.dash-tile-rose::before   { background: linear-gradient(135deg, rgba(244,63,94,0.10) 0%, transparent 70%); }
.dash-tile-orange::before { background: linear-gradient(135deg, rgba(249,115,22,0.10) 0%, transparent 70%); }

.dash-tile-icon {
  font-size: 24px;
  line-height: 1;
}

.dash-tile-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.dash-tile-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.45;
  flex: 1;
}

.dash-tile-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 6px;
}

.dash-tile-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.dash-tile-badge-ok    { background: rgba(16,185,129,0.15); color: #10B981; }
.dash-tile-badge-warn  { background: rgba(245,158,11,0.15);  color: #F59E0B; }
.dash-tile-badge-err   { background: rgba(239,68,68,0.15);   color: #EF4444; }
.dash-tile-badge-count { background: var(--ds-primary-soft);  color: var(--ds-primary); }

.dash-tile-arrow {
  font-size: 14px;
  color: var(--color-text-tertiary);
  transition: transform 160ms ease, color 160ms ease;
}

.dash-tile:hover .dash-tile-arrow {
  transform: translateX(3px);
  color: var(--color-accent);
}

/* Full-width table containers */
.table-container-full {
  width: 100%;
  overflow-x: auto;
}

.table-container-full table {
  width: 100%;
  min-width: 100%;
}

/* ==========================================================================
   INJECTED SIDEBAR — Persistent sidebar on all pages via JS
   ========================================================================== */

/* When injected global topbar is present, hide the legacy page topbar */
body:has(.injected-global-topbar) header.topbar,
body:has(.injected-global-topbar) .topbar {
  display: none !important;
}

.injected-sidebar-wrapper {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* When sidebar is injected, the original page content is shifted right */
.injected-page-content {
  margin-left: var(--layout-sidebar-edge);
  flex: 1;
  min-width: 0;
  transition: margin-left 250ms cubic-bezier(0.4,0,0.2,1);
  margin-top: var(--layout-stack-below-topbar);
  padding: var(--layout-content-padding-top) var(--layout-page-padding) var(--layout-page-padding);
  box-sizing: border-box;
}

/* Injected topbar uses the same glass grid shell as `.global-topbar` (see above). */
[data-theme="light"] .injected-global-topbar:not(.global-topbar--search-only) {
  background:
    radial-gradient(ellipse 90% 120% at 100% -20%, color-mix(in srgb, var(--accent-soft) 12%, transparent), transparent 45%),
    var(--ds-shell-bg);
  box-shadow: var(--ds-shell-shadow);
}

/* Injected shell — SCC text wordmark only (bold white, no decorative mark) */
.injected-global-topbar .sidebar-brand-text {
  gap: 0;
}
.injected-global-topbar .sidebar-brand-main {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
.injected-global-topbar .sidebar-brand-sub {
  display: none;
}

/* Injected sidebar — match global sidebar vertical rhythm */
.sidebar.injected-sidebar .sidebar-l1 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.sidebar.injected-sidebar .sidebar-l1-link {
  padding-top: 8px;
  padding-bottom: 8px;
}
.sidebar.injected-sidebar .sidebar-l2 {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ==========================================================================
   SECTION NAVIGATION STRIP — Horizontal L1 navigation bar
   Auto-injected on all sub-pages via common.js
   Uses hardcoded dark/light values so it works with ANY page's local CSS vars
   ========================================================================== */

.section-nav-strip {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 18px;
  margin: 0 0 16px;
  background: color-mix(in srgb, var(--ds-shell-bg) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-soft) 12%, transparent);
  border-radius: var(--radius-md);
  height: 48px;
  box-shadow: 0 4px 24px color-mix(in srgb, #0c1929 22%, transparent);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  position: sticky;
  top: var(--layout-stack-below-topbar);
  z-index: 990;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE */
}

[data-theme="light"] .section-nav-strip {
  background: color-mix(in srgb, var(--bg-card) 78%, var(--accent-soft) 22%);
  border-color: var(--ds-card-border);
}

.section-nav-strip::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.section-nav-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 28px;
  border-radius: 12px;
  background: transparent;
  border: none;
  color: #5C6579;
  text-decoration: none;
  font-size: 16px;
  flex-shrink: 0;
  margin-right: 10px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.section-nav-home:hover {
  background: rgba(30, 38, 56, 0.85);
  color: #E8EDF5;
  box-shadow: inset 3px 0 0 var(--color-accent);
}

[data-theme="light"] .section-nav-home {
  color: var(--color-text-secondary);
}

[data-theme="light"] .section-nav-home:hover {
  background: color-mix(in srgb, var(--accent-soft) 18%, transparent);
  color: var(--color-text-primary);
  box-shadow: inset 3px 0 0 var(--ds-primary);
}

.section-nav-items {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.section-nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 12px;
  color: #8B95A8;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  border: none;
  flex-shrink: 0;
}

.section-nav-item:hover {
  background: rgba(30, 38, 56, 0.85);
  color: #E8EDF5;
  text-decoration: none;
  box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.35);
}

[data-theme="light"] .section-nav-item {
  color: #4A5568;
}

[data-theme="light"] .section-nav-item:hover {
  background: rgba(238, 242, 248, 0.95);
  color: #0F1729;
  box-shadow: inset 3px 0 0 rgba(100, 116, 139, 0.35);
}

.section-nav-item.active {
  background: var(--ds-primary-soft);
  color: var(--color-accent);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--ds-primary);
}

[data-theme="light"] .section-nav-item.active {
  background: var(--ds-accent-muted);
  color: var(--ds-primary);
  box-shadow: inset 3px 0 0 var(--ds-primary);
}

.section-nav-icon {
  font-size: 13px;
  line-height: 1;
}

.section-nav-label {
  letter-spacing: 0.01em;
}

@media (max-width: 768px) {
  .section-nav-strip {
    top: 56px; /* mobile topbar is 56px */
    padding: 0 10px;
    height: 40px;
  }

  .section-nav-item {
    padding: 4px 8px;
    font-size: 11px;
    gap: 4px;
  }

  .section-nav-strip {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .section-nav-strip::-webkit-scrollbar {
    display: none;
  }

  .section-nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .section-nav-label {
    display: inline;
    font-size: 10px;
  }

  .section-nav-icon {
    font-size: 14px;
  }
}

/* ==========================================================================
   COLLAPSE CONTROLS (Expand All / Collapse All)
   ========================================================================== */
.collapse-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

.collapse-controls .btn {
  font-size: 12px;
  padding: 5px 12px;
}

/* ==========================================================================
   COLLAPSIBLE TABLE SECTIONS
   ========================================================================== */
.collapsible-section {
  margin-top: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--color-gray-100, rgba(255,255,255,0.04));
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}

.collapsible-header:hover {
  background: var(--color-surface-2, rgba(255,255,255,0.07));
}

[data-theme="light"] .collapsible-header {
  background: #f4f6f9;
}

[data-theme="light"] .collapsible-header:hover {
  background: #eaecf0;
}

.collapsible-header.tr-collapsible-head-row {
  flex-wrap: wrap;
  gap: 8px 12px;
}

.collapsible-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tr-collapsible-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}

.tr-collapsible-exports {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.collapsible-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.collapsible-subtitle {
  font-size: 11px;
  color: var(--color-text-tertiary, #6B7280);
  font-weight: 400;
}

.collapsible-chevron {
  font-size: 14px;
  color: var(--color-text-tertiary, #6B7280);
  transition: transform 0.2s ease;
  display: inline-block;
  line-height: 1;
}

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

.collapsible-body {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  max-height: 9999px;
  opacity: 1;
}

.collapsible-section.collapsed .collapsible-body {
  max-height: 0;
  opacity: 0;
}

/* Remove extra margin from section-card when inside collapsible */
.collapsible-body .section-card {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.collapsible-body .table-container {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

[data-theme="light"] .collapsible-body .section-card,
[data-theme="light"] .collapsible-body .table-container {
  border: none;
  box-shadow: none;
}

@media (max-width: 768px) {
  .collapsible-header {
    padding: 10px 14px;
  }
  .collapsible-title {
    font-size: 10px;
  }
}

/* ==========================================================================
   PAGE NAV — HIDE DUPLICATE LOGOUT & THEME TOGGLE
   (These live in the global topbar/sidebar, no need to repeat them)
   ========================================================================== */
.page-nav .btn-logout,
.page-nav-right .btn-logout {
  display: none !important;
}

.page-nav .theme-toggle-btn,
.page-nav-right .theme-toggle-btn,
.settings-corner .theme-toggle-btn {
  display: none !important;
}

/* ==========================================================================
   HOVER GLOW IMPROVEMENTS — Interactive Elements
   ========================================================================== */

/* Sidebar L1 items — soft glow on hover */
.sidebar-l1-item:hover {
  background: var(--color-surface-3, rgba(255,255,255,0.06));
  box-shadow: inset 3px 0 0 var(--color-accent);
}

/* Sidebar L2 — keep in sync with sidebar nav ghost hover above */
.sidebar-l2:hover {
  color: var(--color-text-primary);
}

/* .btn:focus-visible is defined in the buttons section above */

/* Collapsible header hover brightens slightly */
.collapsible-header:hover .collapsible-title {
  color: var(--color-text-primary);
}

/* Metric cards — keep the transform, add subtle glow */
.metric-card:hover {
  box-shadow: 0 0 0 1px var(--btn-border-slate), 0 4px 20px rgba(0,0,0,0.25);
}

/* ==========================================================================
   CONSISTENT CONTENT-AREA PADDING SYSTEM
   ========================================================================== */

/* sidebar-content itself has no padding — child wrappers (home-content, page-body) handle it */
.sidebar-content {
  padding: var(--layout-content-padding-top) var(--layout-page-padding) var(--layout-page-padding);
  box-sizing: border-box;
}

/* page-wrapper inherits the layout padding without double-padding */
.sidebar-content .page-wrapper,
.injected-page-content .page-wrapper {
  padding: 0;
}

/* Ensure the page-body (used in older templates) has consistent padding */
.page-body {
  padding: var(--layout-content-padding-top) var(--layout-page-padding) var(--layout-page-padding);
  box-sizing: border-box;
  margin: 0;
}

/* page-card already provides the shell gutter — avoid stacked horizontal padding */
.page-card > .page-body {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Tables and section cards should not add extra horizontal margin */
.sidebar-content .table-container,
.sidebar-content .section-card,
.injected-page-content .table-container,
.injected-page-content .section-card {
  margin-left: 0;
  margin-right: 0;
}

/* Page title — flush to content box top-left */
.sidebar-content h1,
.injected-page-content h1,
.home-content h1 {
  margin-top: 0;
  margin-left: 0;
  padding-top: 0;
}

/* Width discipline: any “strip” that holds tables/cards */
.data-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .injected-page-content,
  .page-body,
  .home-content {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
    padding-bottom: var(--spacing-6);
    padding-top: var(--layout-content-padding-top);
  }
}

@media (max-width: 768px) {
  .injected-page-content,
  .page-body,
  .home-content {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    padding-top: var(--layout-content-padding-top);
  }
}

/* ── Client management embedded in Configuration ── */
.config-client-mgmt {
  margin-top: 0;
}
.config-cm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.config-client-mgmt .client-link {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-text-primary, #e8edf5);
  text-decoration: none;
  font-weight: 500;
}
.config-client-mgmt .client-link:hover {
  color: var(--color-accent, var(--accent-soft));
}
.config-client-mgmt .client-avatar {
  width: 32px;
  height: 32px;
  background: var(--color-bg-tertiary, #1e2638);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.07));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary, #8b95a8);
  flex-shrink: 0;
}
.config-client-mgmt .cm-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-accent, var(--accent-soft));
}
.config-client-mgmt .action-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.07));
  background: var(--color-bg-tertiary, #1e2638);
  color: var(--color-text-muted, #5c6579);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.15s;
  text-decoration: none;
}
.config-client-mgmt .action-btn:hover {
  background: var(--color-bg-hover, #2a3348);
  color: var(--color-text-primary, #e8edf5);
}
#timeTriggerModal.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 4000;
  align-items: center;
  justify-content: center;
}
#timeTriggerModal.modal-overlay.active {
  display: flex;
}
#timeTriggerModal .modal-box {
  background: var(--color-bg-card, #232832);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.07));
  border-radius: 14px;
  padding: 24px;
  max-width: 560px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
#timeTriggerModal .modal-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--color-text-primary, #e8edf5);
}
#timeTriggerModal .modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
#timeTriggerModal .account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.07));
}
#timeTriggerModal .account-row:last-child {
  border-bottom: none;
}
#timeTriggerModal .account-label {
  flex: 1;
  font-size: 13px;
  color: var(--color-text-primary, #e8edf5);
}
#timeTriggerModal .account-label small {
  color: var(--color-text-muted, #5c6579);
  display: block;
}

/* ========================================================================
   PAGE-SPECIFIC COMPONENTS  (extracted from embedded <style> blocks)
   ======================================================================== */

/* -- Client portfolio dashboard hero (split layout) -------------------- */
.dash-top-nav {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--spacing-4);
  margin-bottom: var(--spacing-8);
}
.dash-top-nav-right {
  margin-left: auto;
}
.dash-hero-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-8);
  text-align: left;
}
.dash-hero-data {
  flex: 1 1 280px;
  min-width: 0;
  text-align: left;
}
.dash-client-title {
  margin-bottom: var(--spacing-2);
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--color-text-primary);
}
.client-context-banner {
  margin: 0 0 var(--spacing-5);
  padding: 0;
  text-align: left;
}
.client-context-banner .dash-client-title {
  margin-bottom: var(--spacing-1);
}
.client-context-banner__subtitle {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.dash-hero-sub {
  margin-bottom: var(--spacing-3);
}
.dash-equity-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
}
.dash-equity-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.dash-equity-big {
  font-size: clamp(1.85rem, 4.65vw, 2.45rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  line-height: 1.15;
}
.dash-currency-select {
  min-width: 5.25rem;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0.4rem 2.1rem 0.4rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  border-radius: 10px;
  border: 1px solid rgba(120, 165, 200, 0.45);
  background-color: rgba(12, 28, 52, 0.85);
  color: var(--ocean-glacier, #cfe9f7);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2391b8d1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 12px 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.dash-currency-select:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.55);
  background-color: rgba(18, 42, 72, 0.95);
}
.dash-currency-select:focus,
.dash-currency-select:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.65);
  outline-offset: 2px;
  border-color: rgba(56, 189, 248, 0.65);
}
/* Non-prod deployment banner (ENVIRONMENT=dev in .env) */
.env-dev-banner {
  position: sticky;
  top: 0;
  z-index: 10050;
  width: 100%;
  padding: 0.45rem 1rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fef3c7;
  background: linear-gradient(90deg, #92400e 0%, #b45309 50%, #92400e 100%);
  border-bottom: 1px solid rgba(251, 191, 36, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.nm-spreadsheet-scroll {
  overflow-x: auto;
  max-width: 100%;
}
.nm-spreadsheet-table {
  min-width: 960px;
}
.nm-spreadsheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.dash-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-2);
  flex: 0 1 auto;
  margin-left: auto;
}

/* Client portfolio (/client): fixed section order regardless of markup drift */
.page-body-client-portfolio {
  display: flex;
  flex-direction: column;
}
.page-body-client-portfolio #section-account-overview { order: 1; }
.page-body-client-portfolio #section-categories { order: 2; }
.page-body-client-portfolio #section-positions { order: 3; }
.page-body-client-portfolio #section-timetriggers { order: 4; }

/* Client portfolio (/client): same mesh as rest of app — avoid opaque slab behind glass panels */
body.client-portfolio-body-lock {
  background: transparent !important;
  margin: 0;
}
.client-portfolio-shell {
  background: transparent;
  min-height: 100vh;
}
.client-portfolio-shell .page-card.client-portfolio-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 100%;
}

/* Trading category table: no outer section-card frame */
.portfolio-category-delta-inner {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Trading Category & Delta: card grid + sort controls */
.category-delta-sortbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2, 8px);
  margin: 0 0 var(--spacing-5, 20px);
  padding: 0 2px;
}
.category-delta-sortbar__label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted, color-mix(in srgb, var(--text-light) 62%, transparent));
  margin-right: var(--spacing-1, 4px);
}
.category-delta-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 70%, transparent);
  background: color-mix(in srgb, var(--tbl-surface) 40%, transparent);
  color: var(--text-light);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.category-delta-sort-btn:hover {
  background: color-mix(in srgb, var(--tbl-surface) 65%, transparent);
  border-color: color-mix(in srgb, var(--accent-primary, #3b82f6) 35%, var(--ds-card-border));
}
.category-delta-sort-btn.is-active {
  background: color-mix(in srgb, var(--accent-primary, #3b82f6) 28%, var(--tbl-surface));
  border-color: color-mix(in srgb, var(--accent-primary, #3b82f6) 45%, transparent);
  color: var(--text-light);
}
.category-delta-sort-expected-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Centered row above category cards: tile order (alphabetic / exposure) */
.category-delta-tile-orderbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2, 8px) var(--spacing-3, 12px);
  margin: 0 0 var(--spacing-5, 20px);
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}
.category-delta-tile-orderbar__label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted, color-mix(in srgb, var(--text-light) 62%, transparent));
  width: 100%;
  text-align: center;
  margin-bottom: 2px;
}
@media (min-width: 640px) {
  .category-delta-tile-orderbar__label {
    width: auto;
    text-align: start;
    margin-bottom: 0;
  }
}

/* Tile order only on Trading Category & Delta tab — inline under tab, not above HANA / other panes */
.category-delta-tile-orderbar--in-tab {
  margin: 0 0 14px;
  padding: 0;
  justify-content: flex-start;
}
.category-delta-tile-orderbar--in-tab .category-delta-tile-orderbar__label {
  margin-right: 6px;
  opacity: 0.92;
}

.category-delta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--spacing-4, 16px);
  align-items: stretch;
}
.category-delta-card {
  position: relative;
  border-radius: var(--tbl-radius, 14px);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 65%, transparent);
  background: color-mix(in srgb, var(--tbl-surface) 48%, transparent);
  box-shadow: var(--ds-card-shadow, 0 12px 32px -16px rgba(0, 0, 0, 0.45));
  padding: var(--spacing-4, 16px) var(--spacing-4, 16px) var(--spacing-3, 12px);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.category-delta-card--mismatch {
  border-color: color-mix(in srgb, #cf6679 40%, var(--ds-card-border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, #cf6679 22%, transparent),
    var(--ds-card-shadow, 0 12px 32px -16px rgba(0, 0, 0, 0.45));
}
.category-delta-card--empty,
.client-trading-tabs .category-delta-card--empty,
.category-delta-grid > .category-delta-card--empty {
  display: none !important;
}
.category-delta-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-3, 12px);
  margin-bottom: var(--spacing-3, 12px);
}
.category-delta-card__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-light);
}
.category-delta-pill {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.category-delta-pill--ok {
  background: color-mix(in srgb, #22c55e 18%, transparent);
  color: #86efac;
  border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
}
.category-delta-pill--warn {
  background: color-mix(in srgb, #cf6679 18%, transparent);
  color: #fecaca;
  border: 1px solid color-mix(in srgb, #cf6679 40%, transparent);
}
.category-delta-pill--info {
  background: color-mix(in srgb, #3b82f6 16%, transparent);
  color: #93c5fd;
  border: 1px solid color-mix(in srgb, #3b82f6 35%, transparent);
  font-size: 0.625rem;
  vertical-align: middle;
  margin-left: 6px;
}
.category-delta-splitvis {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--spacing-3, 12px);
  background: color-mix(in srgb, var(--sidebar-dark) 35%, transparent);
}
.category-delta-splitvis__long {
  min-width: 4px;
  background: linear-gradient(90deg, #38bdf8, #0ea5e9);
  border-radius: 999px 0 0 999px;
  transition: width 0.25s ease;
}
.category-delta-splitvis__short {
  min-width: 4px;
  background: linear-gradient(90deg, #f472b6, #db2777);
  border-radius: 0 999px 999px 0;
  transition: width 0.25s ease;
}
.category-delta-ls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3, 12px);
  margin-bottom: var(--spacing-4, 16px);
}
.category-delta-ls {
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 50%, transparent);
}
.category-delta-ls--long {
  background: color-mix(in srgb, #0ea5e9 10%, transparent);
}
.category-delta-ls--short {
  background: color-mix(in srgb, #db2777 10%, transparent);
}
.category-delta-ls__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, color-mix(in srgb, var(--text-light) 58%, transparent));
  margin-bottom: 4px;
}
.category-delta-ls__value {
  font-size: 1.125rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text-light);
}
.category-delta-deltas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3, 12px);
  padding-top: var(--spacing-3, 12px);
  border-top: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, transparent);
}
.category-delta-dmx__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted, color-mix(in srgb, var(--text-light) 58%, transparent));
  margin-bottom: 4px;
}
.category-delta-dmx__value {
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-light);
}
.category-delta-dmx__value--alert {
  color: #f87171;
  font-weight: 700;
}
.portfolio-category-delta-inner .category-delta-dmx__input,
.portfolio-category-delta-inner .portfolio-expected-input.category-delta-dmx__input {
  width: 100%;
  min-width: 0;
  text-align: left;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* Open Positions: aggregation toggles sit above the floated table card */
.portfolio-positions-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-3);
  margin: 0 0 var(--spacing-5);
  padding: 0 2px;
}

.client-trading-tabs .portfolio-positions-toolbar {
  margin-top: 2px;
  margin-bottom: var(--spacing-5);
  padding-left: var(--spacing-1);
}

/* ── Client portfolio: folder tabs — reference folder strip (rounded top, square bottom, flush with table) ── */
.tabs-container.client-trading-tabs {
  --ctp-folder-surface: color-mix(in srgb, var(--tbl-surface) 54%, transparent);
  position: relative;
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, var(--ds-glass-rim) 45%);
  border-radius: var(--tbl-radius);
  box-shadow:
    var(--ds-card-shadow),
    0 24px 60px -18px color-mix(in srgb, var(--sidebar-dark) 58%, transparent),
    0 10px 28px -12px color-mix(in srgb, var(--sidebar-dark) 45%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 6%, transparent);
  background: var(--ctp-folder-surface);
  overflow: visible;
  margin-bottom: var(--spacing-8);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
}

.client-trading-tabs .tabs-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0;
  padding: 10px 12px 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  position: relative;
  z-index: 2;
  overflow: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.client-trading-tabs .tabs-header::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.client-trading-tabs .tab-button {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin: 0 3px 0 0;
  padding: 10px 20px 12px;
  border-radius: 14px 14px 0 0;
  border: 1px solid color-mix(in srgb, var(--tbl-divider-md) 90%, transparent);
  border-bottom: none;
  color: var(--text-light);
  z-index: 2;
  transform: translateY(1px);
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    filter 0.2s ease,
    transform 0.2s ease;
  /* Inactive (closed) tabs sit in the darker folder surface so the active
     tab can stand out as the lighter, accent-soft sheet. The user-facing
     rule we are matching: open tab = lighter blue, closed tab = darker. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text-light) 8%, var(--ctp-folder-surface)) 0%,
    var(--ctp-folder-surface) 100%
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 8%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent),
    0 2px 8px -2px color-mix(in srgb, var(--sidebar-dark) 45%, transparent);
}

.client-trading-tabs .tab-button:first-child {
  margin-left: 4px;
}

.client-trading-tabs .tab-button:last-child {
  margin-right: 4px;
}

.client-trading-tabs .tab-button:hover:not(.active) {
  filter: brightness(1.06);
  border-color: color-mix(in srgb, var(--accent-soft) 28%, transparent);
}

.client-trading-tabs .tab-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  z-index: 50;
}

/* Active tab — lifted “top sheet” overlapping the folder body. Painted with
   the brighter accent-soft gradient so the open tab reads visually lighter
   than the surrounding closed tabs. */
.client-trading-tabs .tab-button.active {
  color: var(--tbl-text);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text-light) 5%, color-mix(in srgb, var(--accent-soft) 52%, var(--ctp-folder-surface) 48%)) 0%,
    color-mix(in srgb, var(--accent-soft) 58%, var(--ctp-folder-surface) 42%) 100%
  );
  border-color: var(--ds-card-border);
  border-bottom-color: transparent;
  margin-bottom: -1px;
  padding-top: 13px;
  padding-bottom: 13px;
  z-index: 5;
  filter: none;
  transform: translateY(-4px);
  border-radius: 16px 16px 0 0;
  box-shadow:
    0 -6px 18px -4px color-mix(in srgb, var(--sidebar-dark) 55%, transparent),
    0 10px 22px -12px color-mix(in srgb, var(--sidebar-dark) 65%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 14%, transparent);
}

.client-trading-tabs .tab-button.active:hover {
  filter: brightness(1.02);
}

.client-trading-tabs .tab-content {
  display: none;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--spacing-5) var(--spacing-3) var(--spacing-5);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text-light) 3.5%, var(--ctp-folder-surface)) 0%,
    var(--ctp-folder-surface) 56px
  );
  border: none;
  border-radius: 0;
  border-top: 1px solid color-mix(in srgb, var(--tbl-divider-md) 82%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-light) 5%, transparent);
}

.client-trading-tabs .tab-content.active {
  display: block;
}

.client-trading-tabs .tab-content .section-card {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
}

.client-trading-tabs .tab-content .section-card-table-panel {
  border-radius: var(--tbl-radius);
  overflow-x: auto;
  overflow-y: hidden;
}

/* Trading / HANA / positions: full values — undo global data-table ellipsis + clipping */
.client-trading-tabs .data-table {
  table-layout: auto;
  width: 100%;
  max-width: none;
}
.client-trading-tabs .data-table.data-table-wide {
  min-width: 0;
}
.client-trading-tabs .data-table thead th {
  overflow: visible;
  text-overflow: clip;
}
.client-trading-tabs .data-table tbody td {
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}
.client-trading-tabs .data-table tbody td.text-left {
  white-space: normal;
  word-break: break-word;
}
.client-trading-tabs .data-table tbody td.text-right,
.client-trading-tabs .data-table tbody td.text-center {
  white-space: nowrap;
}
.client-trading-tabs .data-table.data-table--compact tbody td.text-left {
  white-space: normal;
  word-break: break-word;
}
.client-trading-tabs .data-table.data-table--compact thead th {
  padding: 9px 10px;
  line-height: 1.3;
}
.client-trading-tabs .data-table.data-table--compact tbody td {
  padding: 7px 10px;
  vertical-align: middle;
}

[data-theme="light"] .tabs-container.client-trading-tabs {
  --ctp-folder-surface: color-mix(in srgb, var(--tbl-surface) 54%, transparent);
}

[data-theme="light"] .client-trading-tabs .tabs-header {
  box-shadow: none;
}

[data-theme="light"] .client-trading-tabs .tab-button:not(.active) {
  color: var(--text-light);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #f8fafc 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #0f172a 8%, transparent),
    0 2px 6px -2px color-mix(in srgb, #0f172a 12%, transparent);
}

[data-theme="light"] .client-trading-tabs .tab-button.active {
  color: var(--tbl-text);
  box-shadow:
    0 -5px 16px -4px color-mix(in srgb, #0f172a 14%, transparent),
    0 8px 20px -12px color-mix(in srgb, #0f172a 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #f8fafc 70%, transparent);
}

[data-theme="light"] .client-trading-tabs .tab-content {
  border-top-color: var(--tbl-divider);
}

.th-expected-delta-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: flex-end;
  width: 100%;
}
.portfolio-expected-pencil {
  flex-shrink: 0;
  opacity: 0.5;
  color: var(--color-text-tertiary);
}
.portfolio-expected-cell {
  vertical-align: middle;
}
.portfolio-expected-input {
  display: block;
  width: 100%;
  min-width: 4.5rem;
  max-width: 10rem;
  margin-left: auto;
  text-align: right;
  font-family: 'Inter', var(--font-primary), system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 6px;
  box-sizing: border-box;
  outline: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.portfolio-expected-input:focus {
  background: var(--color-surface-2);
  border-bottom-color: var(--color-border-strong);
}
.portfolio-expected-input::placeholder {
  color: var(--color-text-tertiary);
}

/* Open positions: auto layout so min-width on headers applies */
.open-positions-table {
  table-layout: auto;
}

/* Open positions: readable multi-line headers */
.open-positions-table thead th.th-openpos {
  white-space: normal;
  line-height: 1.25;
  hyphens: auto;
  padding-left: 18px;
  padding-right: 18px;
  vertical-align: bottom;
}

/* Account overview — roster: equity hero + metrics (order: Balance … Margin level %) */
.account-overview-roster {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px 18px;
  box-sizing: border-box;
}

.account-overview-row {
  display: grid;
  grid-template-columns: minmax(11rem, 16%) minmax(12rem, 12rem) 1fr;
  gap: 20px 28px;
  align-items: center;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--tbl-surface) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--tbl-divider-md) 72%, var(--ds-glass-rim) 28%);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 8%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-soft) 12%, transparent),
    0 12px 40px -14px color-mix(in srgb, var(--sidebar-dark) 52%, transparent),
    0 4px 18px -6px color-mix(in srgb, var(--sidebar-dark) 42%, transparent),
    0 0 48px -20px color-mix(in srgb, var(--accent-soft) 35%, transparent);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

[data-theme="light"] .account-overview-row {
  background: color-mix(in srgb, var(--tbl-surface) 76%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent-soft) 14%, transparent),
    var(--ds-card-shadow);
}

.client-trading-tabs .account-overview-row {
  background: color-mix(in srgb, var(--tbl-surface) 64%, transparent);
}

[data-theme="light"] .client-trading-tabs .account-overview-row {
  background: color-mix(in srgb, var(--tbl-surface) 72%, transparent);
}

[data-theme="light"] .account-overview-row:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent-soft) 18%, transparent),
    var(--ds-card-shadow-hover);
}

.account-overview-row:hover {
  border-color: color-mix(in srgb, var(--accent-soft) 32%, var(--tbl-divider-md) 68%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 10%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-soft) 22%, transparent),
    0 16px 48px -12px color-mix(in srgb, var(--sidebar-dark) 55%, transparent),
    0 6px 22px -6px color-mix(in srgb, var(--sidebar-dark) 45%, transparent),
    0 0 64px -16px color-mix(in srgb, var(--accent-soft) 42%, transparent);
  transform: translateY(-1px);
}

.account-overview-id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.account-overview-broker {
  font-weight: 800;
  font-size: clamp(1.125rem, 0.55vw + 1rem, 1.35rem);
  /* Body copy for tables uses --tbl-text (often muted); broker is a card title — match primary UI text */
  color: var(--color-text-primary);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.account-overview-login {
  font-size: var(--font-size-base);
  color: var(--tbl-text-sec);
  font-family: var(--font-mono);
  line-height: 1.35;
}

.account-overview-equity-hero {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-success) 28%, transparent),
    color-mix(in srgb, var(--accent-soft) 16%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--color-success) 42%, transparent);
  box-shadow:
    0 0 36px -8px color-mix(in srgb, var(--color-success) 55%, transparent),
    0 0 1px color-mix(in srgb, var(--color-success) 35%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 14%, transparent);
}

.account-overview-equity-hero-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--tbl-text) 50%, var(--color-success) 50%);
}

.account-overview-equity-hero-value {
  font-size: clamp(1.3rem, 2.6vw, 1.65rem);
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  font-family: var(--font-mono);
  color: var(--color-success-light);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

[data-theme="light"] .account-overview-equity-hero-value {
  color: var(--color-success);
}

/* Reading order: row1 Balance | Credit | Equity USD, row2 Margin | Free Margin | Margin Level % */
.account-overview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
}

@media (max-width: 1200px) {
  .account-overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .account-overview-metrics {
    grid-template-columns: 1fr;
  }
}

.account-overview-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.account-overview-metric dt {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--tbl-text-sec);
  line-height: 1.3;
}

.account-overview-metric dd {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  font-feature-settings: "tnum" 1;
  font-family: var(--font-mono);
  color: var(--tbl-text);
  text-align: right;
  line-height: 1.35;
}

@media (max-width: 960px) {
  .account-overview-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}
.open-positions-table thead th.th-openpos-broker { min-width: 7rem; text-align: left; }
.open-positions-table thead th.th-openpos-login { min-width: 5.75rem; text-align: left; }
.open-positions-table thead th.th-openpos-symbol { min-width: 5.25rem; text-align: left; }
.open-positions-table thead th.th-openpos-cat { min-width: 7.5rem; text-align: left; }
.open-positions-table thead th.th-openpos-stdlots { min-width: 6rem; }
.open-positions-table thead th.th-openpos-entry {
  min-width: 10rem;
  text-align: right;
}
.open-positions-table thead th.th-openpos-dir { min-width: 7rem; }

/* -- Main Container (module-level style) -------------------------------- */
.main-container { max-width: 1800px; width: 100%; margin: 0 auto; padding: var(--layout-page-padding, 2rem); box-sizing: border-box; }

/* Injected shell: outer wrapper supplies padding; avoid double inset */
.injected-page-content .main-container {
  padding: 0;
}

.main-container > .page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
  text-align: left;
  margin-bottom: var(--spacing-6);
  padding-bottom: var(--spacing-4);
}
.main-container > .page-header .page-title-group,
.main-container > .page-header .page-header-left {
  text-align: left;
  flex: 1;
  min-width: 0;
}
.main-container > .page-header .page-title-group h1,
.main-container > .page-header > .page-header-left h1 {
  text-align: left;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--spacing-2) 0;
}
.main-container > .page-header .page-title-group p,
.main-container > .page-header .page-header-left p {
  text-align: left;
  margin: 0;
}
.main-container > .page-header .page-title-group h1:has(+ .page-subtitle) {
  margin-bottom: var(--spacing-1);
}
.main-container > .page-header .page-title-group .page-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
}
.scroll { overflow-x: auto; }
.err { background: rgba(239,68,68,0.1); border: 1px solid var(--color-error, #ef4444); border-radius: 8px; padding: 12px 16px; color: var(--color-error, #ef4444); margin: 16px 0; }
.back-button { position: fixed; top: 80px; left: 20px; z-index: 100; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--color-bg-secondary, #1e1e2e); border: 1px solid var(--color-border, #2d3348); border-radius: 12px; color: var(--color-text-primary, #e8edf5); font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.3s; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.back-button:hover { background: var(--color-bg-hover, #262a3d); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.4); }
.back-button::before { content: '\2190'; font-size: 18px; }
.page-nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--color-border); margin-bottom: var(--spacing-8, 32px); }
.page-nav-left, .page-nav-right { display: flex; align-items: center; gap: 12px; }
.page-nav-center { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-nav-mobile-toggle { display: none; }
.btn-back { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 8px; transition: all 0.2s; }
.btn-back::before { content: '\2190'; }
.btn-back:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.btn-logout { color: var(--color-error, #cf6679); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 8px; transition: all 0.2s; }
.btn-logout:hover { background: rgba(207,102,121,0.1); }
.settings-controls { display: inline-flex; align-items: center; gap: 8px; }
.lang-toggle { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border); }
.lang-option { padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; background: transparent; color: var(--color-text-secondary); border: none; transition: all 0.2s; }
.lang-option.active { background: var(--btn-surface); color: var(--btn-text-ui); }
.lang-option:hover:not(.active) { background: var(--color-bg-hover); }
body.theme-transition, body.theme-transition * { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important; }

/* Bootstrap table overrides inside .section-card */
.section-card .table tbody tr, .section-card .table tbody tr td { --bs-table-bg: transparent; transition: background 0.18s, box-shadow 0.18s; }
.section-card .table tbody tr:nth-child(even), .section-card .table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.025) !important; --bs-table-bg: transparent !important; }
.section-card .table tbody tr:nth-child(odd), .section-card .table tbody tr:nth-child(odd) td { background: transparent !important; --bs-table-bg: transparent !important; }
.section-card .table tbody tr:hover { background: var(--tbl-hover-bg) !important; box-shadow: none; }
.section-card .table tbody tr:hover td, .section-card .table tbody tr:hover th { background: transparent !important; --bs-table-bg: transparent !important; }
[data-theme="light"] .section-card .table tbody tr:nth-child(even), [data-theme="light"] .section-card .table tbody tr:nth-child(even) td { background: rgba(0,0,0,0.02) !important; }
[data-theme="light"] .section-card .table tbody tr:nth-child(odd), [data-theme="light"] .section-card .table tbody tr:nth-child(odd) td { background: transparent !important; }
[data-theme="light"] .section-card .table tbody tr:hover { background: var(--tbl-hover-bg) !important; box-shadow: none; }
[data-theme="light"] .section-card .table tbody tr:hover td, [data-theme="light"] .section-card .table tbody tr:hover th { background: transparent !important; }

@media (max-width: 1024px) {
  .main-container { max-width: 100%; padding: 1rem 1.25rem; }
  .injected-page-content .main-container { padding: 0; }
}
@media (max-width: 768px) {
  .main-container { padding: 0.75rem 1rem; }
  .injected-page-content .main-container { padding: 0; }
}
/* Tablets too: a fixed floating back button overlaps the hamburger zone */
@media (max-width: 1024px) {
  .back-button { position: static; width: 100%; justify-content: center; border-radius: 10px; margin-bottom: 12px; box-shadow: none; }
}

/* -- Login Page --------------------------------------------------------- */
body.login-body { display: block; width: 100%; padding: 0; margin: 0; }
.login-page { width: 100vw; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-bg-primary) 0%, #1a1a2e 50%, var(--color-bg-secondary) 100%); position: relative; overflow: hidden; padding: 24px; }
.login-page::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 70%, rgba(168,85,247,0.08) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(20,184,166,0.08) 0%, transparent 50%); animation: loginRotate 30s linear infinite; }
@keyframes loginRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.login-card { position: relative; z-index: 1; background: rgba(30,30,46,0.9); backdrop-filter: blur(20px); border: 1px solid rgba(168,85,247,0.2); border-radius: 20px; padding: 48px 40px; width: 100%; max-width: 420px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(168,85,247,0.1), 0 0 80px rgba(168,85,247,0.1); }
.login-logo { text-align: center; margin-bottom: 32px; }
.login-logo h1 { font-size: 28px; font-weight: 800; background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; }
.login-logo p { color: var(--color-text-muted); font-size: 14px; }
.login-input { width: 100%; padding: 16px 18px; background: rgba(30,30,46,0.8); border: 2px solid var(--color-border); border-radius: 12px; color: var(--color-text-primary); font-size: 16px; transition: all 0.3s; min-height: 48px; }
.login-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(144, 193, 190, 0.18); }
.login-input::placeholder { color: var(--color-text-muted); }
.login-btn { width: 100%; padding: 16px 24px; background: linear-gradient(135deg, var(--color-background-pale) 0%, var(--color-accent-light) 100%); color: var(--color-text-inverse); border: 1px solid var(--color-tertiary); border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; min-height: 50px; touch-action: manipulation; }
.login-btn:hover { filter: brightness(1.04); box-shadow: 0 4px 24px var(--color-accent-glow); transform: translateY(-2px); }
.login-btn:active { transform: translateY(0); }
@media (max-width: 480px) { .login-card { padding: 32px 24px; border-radius: 16px; } .login-logo h1 { font-size: 24px; } }

/* -- Summary Strip / Tiles (Clients page) ------------------------------- */
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.summary-tile { background: var(--color-bg-card, var(--bg-card)); border: 1px solid var(--color-border); border-radius: 12px; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; transition: box-shadow 0.2s, border-color 0.2s; }
.summary-tile:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.28); border-color: rgba(255,255,255,0.12); }
.summary-tile-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); }
.summary-tile-value { font-size: 22px; font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.summary-tile-sub { font-size: 11px; color: var(--color-text-muted); }
@media (max-width: 768px) { .summary-strip { grid-template-columns: repeat(2, 1fr); } }

/* -- Client Cell / Avatar ----------------------------------------------- */
.client-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.data-table .client-cell,
.standard-data-table .client-cell,
.table .client-cell,
.brokers-table .client-cell {
  color: var(--tbl-text);
}
.data-table .client-cell:hover .client-name,
.standard-data-table .client-cell:hover .client-name,
.table .client-cell:hover .client-name {
  color: var(--color-accent);
}
.data-table .client-name,
.standard-data-table .client-name,
.table .client-name,
.brokers-table .client-name {
  color: var(--tbl-text);
}
.client-avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
.client-name { font-size: 14px; font-weight: 600; color: inherit; transition: color 0.15s; white-space: nowrap; }

/* -- Connection Badge --------------------------------------------------- */
.conn-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.conn-badge.connected { background: rgba(16,185,129,0.12); color: var(--color-success); box-shadow: 0 0 0 1px rgba(16,185,129,0.2); }
.conn-badge.error { background: rgba(239,68,68,0.12); color: var(--color-error); box-shadow: 0 0 0 1px rgba(239,68,68,0.2); }
.conn-badge.unknown { background: rgba(107,118,136,0.10); color: var(--color-text-muted); }
.bool-icon-yes { color: var(--color-success); font-size: 15px; }
.bool-icon-no { color: var(--color-text-muted); font-size: 15px; }

/* -- Search Results Dropdown -------------------------------------------- */
.search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.3)); max-height: 420px; overflow-y: auto; display: none; z-index: 1001; }
.search-results.active { display: block; }
.search-section-title { padding: 10px 16px 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); }
.search-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; transition: background 0.15s; text-decoration: none; color: inherit; }
.search-item:hover { background: var(--color-bg-hover); }
.search-item-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--color-bg-tertiary); border: 1px solid var(--color-border); }
.search-item-content { flex: 1; }
.search-item-title { font-weight: 500; font-size: 13px; }
.search-item-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* -- Search Box (legacy + broker utilities) ---------------------------- */
.search-box { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--color-bg-card, var(--bg-card)); border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 24px; }
.search-box input { flex: 1; background: transparent; border: none; color: var(--color-text-primary); font-size: 14px; outline: none; }
.search-box input::placeholder { color: var(--color-text-muted); }
.search-icon { color: var(--color-text-muted); font-size: 16px; }

/* Headless bar: keeps `input.table-search-input` for row filter + header sync only (no visible strip). */
.table-search-bar.table-search-bar--headless {
  display: none !important;
}

/* -- Universal table search (matches broker management strip) --------- */
.table-search-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 20px 14px;
  padding: 14px 18px;
  min-height: 44px;
  box-sizing: border-box;
  background: var(--ds-search-bg);
  border: 1px solid var(--ds-search-border);
  border-radius: var(--control-radius);
  transition: var(--control-transition);
}
.table-search-bar:focus-within {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--ds-search-border));
  background: var(--ds-search-focus-bg);
  box-shadow: var(--focus-ring);
}
.section-card > .table-search-bar:first-child {
  margin: 20px 20px 16px;
}
.section-card > .section-header + .table-search-bar {
  margin-top: 16px;
  margin-bottom: 12px;
}
.section-card > .table-search-bar:not(.table-search-bar--headless) + .section-card-table-panel,
.section-card > .table-search-bar:not(.table-search-bar--headless) + .dt-table-wrapper {
  margin-top: 8px;
  border-radius: 0 0 var(--tbl-radius) var(--tbl-radius);
}
.collapsible-body .section-card > .table-search-bar {
  margin-left: 18px;
  margin-right: 18px;
}
.table-container > .table-search-bar {
  margin-left: 16px;
  margin-right: 16px;
}
.table-search-icon {
  flex-shrink: 0;
  width: var(--icon-size-ui);
  height: var(--icon-size-ui);
  color: var(--tbl-text-sec);
  opacity: 0.95;
}
.table-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--tbl-text);
  font-size: 14px;
  outline: none;
  transition: color var(--control-transition);
}
.table-search-input::placeholder {
  color: color-mix(in srgb, var(--tbl-text) 38%, transparent);
}
.table-search-count {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--tbl-text-sec);
  white-space: nowrap;
}
.table-search-no-hits {
  margin: 0 22px 16px;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-background-pale) 72%, var(--color-accent-light) 28%);
}
[data-theme="light"] .table-search-no-hits {
  background: rgba(144, 193, 190, 0.2);
}
[data-theme="light"] .table-search-bar {
  background: var(--ds-search-bg);
  border-color: var(--ds-search-border);
}
[data-theme="light"] .table-search-bar:focus-within {
  background: var(--ds-search-focus-bg);
}
[data-theme="light"] .table-search-input {
  color: #0F172A;
}
[data-theme="light"] .table-search-input::placeholder {
  color: var(--color-text-tertiary);
}
[data-theme="light"] .table-search-count {
  color: var(--color-text-secondary);
}

/* -- Summary Cards (Account Health / Connectivity) ---------------------- */
.summary-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
.summary-card-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.summary-card-icon.danger { background: rgba(239,68,68,0.12); }
.summary-card-icon.warning { background: rgba(245,158,11,0.12); }
.summary-card-icon.success { background: rgba(16,185,129,0.12); }
.summary-card-content h3 { font-size: 32px; font-weight: 700; margin-bottom: 4px; }
.summary-card-content p { font-size: 14px; color: var(--color-text-muted); }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 32px; }
.summary-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.summary-icon.success { background: rgba(16,185,129,0.12); }
.summary-icon.warning { background: rgba(245,158,11,0.12); }
.summary-icon.danger { background: rgba(239,68,68,0.12); }
.summary-content h3 { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.summary-content p { font-size: 13px; color: var(--color-text-muted); }
@media (max-width: 1024px) { .summary-cards { grid-template-columns: 1fr; } }

/* -- Empty State -------------------------------------------------------- */
.empty-state { padding: 48px 24px; text-align: center; color: var(--color-text-muted); }
.empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.empty-state-text { font-size: 16px; }
.empty-state-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }

/* -- Broker Name Cell --------------------------------------------------- */
.broker-name-cell { font-weight: 600; color: var(--color-text-primary); }
.broker-name-link { color: var(--color-text-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.broker-name-link:hover { color: var(--color-accent); }

/* -- Status Indicator (Brokers list) ------------------------------------ */
.status-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.status-indicator.online { background: rgba(16,185,129,0.12); color: var(--color-success); }
.status-indicator.offline { background: rgba(239,68,68,0.12); color: var(--color-error); }
.status-indicator.partial { background: rgba(245,158,11,0.12); color: var(--color-warning); }
.metric-value { font-weight: 600; color: var(--color-text-primary); }
.metric-label { font-size: 12px; color: var(--color-text-muted); }
.last-sync { font-size: 13px; color: var(--color-text-secondary); }

/* -- Action Buttons / Links --------------------------------------------- */
.action-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.btn-action { padding: 6px 13px; border-radius: 7px; font-size: 12px; font-weight: 600; text-decoration: none; transition: background 0.2s, border-color 0.2s, color 0.2s; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.btn-action.primary { background: var(--btn-surface); color: var(--btn-text-ui); border: 1px solid var(--btn-border-slate); }
.btn-action.primary:hover { background: var(--btn-surface-hover); border-color: var(--color-border-strong); color: var(--btn-text-ui); }
.btn-action.secondary { background: var(--color-bg-tertiary); color: var(--btn-text-ui); border: 1px solid var(--btn-border-slate); }
.btn-action.secondary:hover { background: var(--btn-surface-hover); color: var(--btn-text-ui); border-color: var(--color-border-strong); }

/* -- Broker Profile ----------------------------------------------------- */
.page-header-right { display: flex; align-items: center; gap: 12px; }
.btn-website { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--color-text-primary); text-decoration: none; transition: all 0.2s; }
.btn-website:hover { background: var(--btn-surface-hover); border-color: var(--color-border-strong); color: var(--btn-text-ui); }
.info-card { background: color-mix(in srgb, var(--color-bg-card, var(--bg-card)) 70%, transparent); border: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, var(--ds-glass-rim) 45%); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; box-shadow: var(--ds-card-shadow); backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate)); -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate)); }
.info-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.info-label { font-weight: 600; color: var(--color-text-secondary); min-width: 120px; }
.info-value { color: var(--color-text-primary); }
.website-link { color: var(--color-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.website-link:hover { text-decoration: underline; }
.website-link-icon { font-size: 16px; }
.info-description { color: var(--color-text-secondary); line-height: 1.6; margin-top: 4px; }
.server-list { display: flex; flex-wrap: wrap; gap: 8px; }
.server-badge { padding: 6px 12px; background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: 6px; font-size: 13px; font-family: monospace; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.info-item { display: flex; flex-direction: column; gap: 4px; }
.info-item-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.info-item-value { font-size: 14px; color: var(--color-text-primary); }

/* -- Tabs: card shell; folder strip when direct .tabs-header (broker profile, etc.) -- */
.tabs-container { background: var(--color-bg-card, var(--bg-card)); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; margin-bottom: 24px; }

.tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) {
  --folder-tab-surface: var(--tbl-surface);
  background: var(--folder-tab-surface);
  border: 1px solid var(--ds-card-border);
  border-radius: var(--tbl-radius);
  box-shadow:
    var(--ds-card-shadow),
    0 24px 60px -18px color-mix(in srgb, var(--sidebar-dark) 58%, transparent),
    0 10px 28px -12px color-mix(in srgb, var(--sidebar-dark) 45%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 6%, transparent);
  overflow: hidden;
  margin-bottom: 24px;
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
}

.tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tabs-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0;
  padding: 10px 12px 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  position: relative;
  z-index: 2;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tabs-header::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 11px;
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--folder-tab-surface) 42%, var(--sidebar-dark) 58%);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-light) 4%, transparent);
}

.tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tabs-header::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tabs-header .tab-button {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin: 0 3px 0 0;
  padding: 10px 20px 12px;
  border-radius: 14px 14px 0 0;
  border: 1px solid color-mix(in srgb, var(--tbl-divider-md) 90%, transparent);
  border-bottom: none;
  color: var(--text-light);
  z-index: 2;
  transform: translateY(1px);
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    filter 0.2s ease,
    transform 0.2s ease;
  /* Inactive tab background is the plain folder surface so the active tab
     can show the brighter accent-soft gradient (see .active rule below). */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text-light) 8%, var(--folder-tab-surface)) 0%,
    var(--folder-tab-surface) 100%
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 8%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent),
    0 2px 8px -2px color-mix(in srgb, var(--sidebar-dark) 45%, transparent);
}

.tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tabs-header .tab-button:first-child {
  margin-left: 4px;
}

.tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tabs-header .tab-button:last-child {
  margin-right: 4px;
}

.tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tabs-header .tab-button:hover:not(.active) {
  filter: brightness(1.06);
  border-color: color-mix(in srgb, var(--accent-soft) 28%, transparent);
}

.tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tabs-header .tab-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  z-index: 50;
}

.tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tabs-header .tab-button.active {
  color: var(--tbl-text);
  /* Active = lighter accent-soft sheet, raised over the darker closed tabs. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text-light) 5%, color-mix(in srgb, var(--accent-soft) 52%, var(--folder-tab-surface) 48%)) 0%,
    color-mix(in srgb, var(--accent-soft) 58%, var(--folder-tab-surface) 42%) 100%
  );
  border-color: var(--ds-card-border);
  border-bottom-color: transparent;
  margin-bottom: -1px;
  padding-top: 13px;
  padding-bottom: 13px;
  z-index: 5;
  filter: none;
  transform: translateY(-4px);
  border-radius: 16px 16px 0 0;
  box-shadow:
    0 -6px 18px -4px color-mix(in srgb, var(--sidebar-dark) 55%, transparent),
    0 10px 22px -12px color-mix(in srgb, var(--sidebar-dark) 65%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 14%, transparent);
}

.tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tabs-header .tab-button.active:hover {
  filter: brightness(1.02);
}

.tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tab-content {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text-light) 3.5%, var(--folder-tab-surface)) 0%,
    var(--folder-tab-surface) 56px
  );
  border-top: 1px solid color-mix(in srgb, var(--tbl-divider-md) 82%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-light) 5%, transparent);
  padding: var(--spacing-6, 1.5rem);
}

[data-theme="light"] .tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tabs-header {
  box-shadow: none;
}

[data-theme="light"] .tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tabs-header::before {
  background: color-mix(in srgb, var(--folder-tab-surface) 78%, var(--accent-soft) 22%);
  opacity: 0.55;
}

[data-theme="light"] .tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tabs-header .tab-button:not(.active) {
  color: var(--text-light);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #f8fafc 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #0f172a 8%, transparent),
    0 2px 6px -2px color-mix(in srgb, #0f172a 12%, transparent);
}

[data-theme="light"] .tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tabs-header .tab-button.active {
  color: var(--tbl-text);
  box-shadow:
    0 -5px 16px -4px color-mix(in srgb, #0f172a 14%, transparent),
    0 8px 20px -12px color-mix(in srgb, #0f172a 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #f8fafc 70%, transparent);
}

[data-theme="light"] .tabs-container:not(.client-trading-tabs):not(.tr-page-subnav):has(> .tabs-header) > .tab-content {
  border-top-color: var(--tbl-divider);
}
.tab-btn { background: transparent; color: var(--color-text-secondary); border: none; border-bottom: 3px solid transparent; padding: 12px 24px; cursor: pointer; font-weight: 600; font-size: 14px; transition: all 0.2s; margin-bottom: -2px; }
.tab-btn:hover { color: var(--color-text-primary); background: var(--color-bg-hover); }
.tab-btn.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.tab-content { display: none; padding: 24px; }
.tab-content.active { display: block; }
.tab-section { margin-bottom: 24px; }

td.ava-pnl-cell { font-variant-numeric: tabular-nums; font-weight: 600; }
td.ava-pnl-cell.ava-pnl-cell--pos { color: #22c55e !important; }
td.ava-pnl-cell.ava-pnl-cell--neg { color: #ef4444 !important; }
td.ava-pnl-cell.ava-pnl-cell--na { color: var(--color-text-secondary) !important; font-weight: 400; }
[data-theme="light"] td.ava-pnl-cell.ava-pnl-cell--pos { color: #15803d !important; }
[data-theme="light"] td.ava-pnl-cell.ava-pnl-cell--neg { color: #b91c1c !important; }

/* ─── Settings hub (/settings) — sticky header, user list, add-user panel ─── */
.settings-hub-body {
  background: var(--color-base);
  font-family: var(--font-primary);
}

.settings-hub .settings-sticky-head {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--color-base);
  border-bottom: 1px solid var(--color-border);
  margin: 0 calc(-1 * var(--layout-page-padding, 2rem)) 1rem;
  padding: 0 var(--layout-page-padding, 2rem) 0.35rem;
  box-sizing: content-box;
}

.settings-hub .settings-page-header {
  padding-top: 0.25rem;
}

.settings-hub .settings-page-subtitle {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  font-weight: 450;
  color: var(--color-text-secondary);
  max-width: 40rem;
}

.settings-hub-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
  padding: 4px;
  background: var(--color-surface-2);
  border-radius: 10px;
  border: 1px solid var(--color-border);
}

.settings-hub-tab {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 450;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.settings-hub-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.settings-hub-tab.active {
  color: var(--color-text-primary);
  font-weight: 500;
  background: var(--color-surface-1);
}

.settings-hub-panel {
  display: none;
}

.settings-hub-panel.active {
  display: block;
}

.settings-surface {
  background: var(--color-surface-1);
  border-radius: 12px;
}

.settings-user-section {
  padding: 0;
  margin: 0;
}

.settings-user-section .section-header {
  margin-bottom: 1rem;
  align-items: center;
}

.settings-access-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1.35rem;
  gap: 0.75rem;
}

.settings-hub .settings-permissions-head .section-title,
.settings-hub .settings-user-section .section-title {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.settings-existing-users-heading {
  margin: 0 0 1rem;
  padding: 0;
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35;
}

.settings-users-table thead th {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a1a1aa !important;
}

.settings-users-table .settings-users-role-cell,
.settings-users-table td.settings-users-role-cell {
  text-align: right !important;
  vertical-align: middle;
}

.settings-add-user-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0 0 0;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease;
  pointer-events: none;
}

.settings-add-user-panel.is-open {
  max-height: 720px;
  opacity: 1;
  margin-bottom: 1.25rem;
  pointer-events: auto;
}

.settings-add-user-panel__inner {
  background: var(--color-surface-1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.25rem 1.35rem 1.35rem;
  box-sizing: border-box;
}

.settings-add-user-panel__title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.settings-add-user-form__actions {
  margin-top: 0.5rem;
}

.settings-users-card {
  margin-top: 1.5rem;
  padding-top: 0;
}

.settings-hub .settings-users-card .settings-existing-users-heading + .settings-users-table {
  margin-top: 0;
}

.settings-users-table td {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  vertical-align: middle;
}

.settings-users-table thead th {
  padding-top: var(--tbl-header-pad-y);
  padding-bottom: var(--tbl-header-pad-y);
  vertical-align: middle;
}

.settings-users-role-col {
  min-width: 11rem;
}

.settings-users-role-cell .settings-role-select {
  min-width: 10.5rem;
  font-size: 0.875rem;
}

.settings-permissions-head {
  margin-bottom: 1.25rem;
}

.settings-permissions-note {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
  max-width: 48rem;
}

.settings-role-perm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 1100px) {
  .settings-role-perm-grid {
    grid-template-columns: 1fr;
  }
}

.settings-role-card {
  background: var(--color-surface-1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.15rem;
  box-sizing: border-box;
}

.settings-role-card-title {
  margin: 0 0 0.85rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #f4f4f5;
  letter-spacing: 0.02em;
}

.settings-perm-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.settings-perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.78);
}

.settings-perm-row:last-child {
  border-bottom: none;
}

.settings-perm-label {
  flex: 1;
  line-height: 1.35;
}

.settings-perm-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.settings-perm-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.settings-perm-switch {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.2s, border-color 0.2s;
  position: relative;
}

.settings-perm-switch::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #a1a1aa;
  transition: transform 0.2s, background 0.2s;
}

.settings-perm-toggle input:checked + .settings-perm-switch {
  background: var(--ds-accent-muted);
  border-color: var(--color-accent-border);
}

.settings-perm-toggle input:checked + .settings-perm-switch::after {
  transform: translate(14px, -50%);
  background: var(--color-accent);
}

.settings-perm-toggle input:focus-visible + .settings-perm-switch {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

[data-theme="light"] .settings-hub-body {
  background: var(--color-base);
}

[data-theme="light"] .settings-hub .settings-sticky-head {
  background: var(--color-base);
  border-bottom-color: var(--color-border);
}

[data-theme="light"] .settings-hub .settings-page-subtitle {
  color: var(--color-text-secondary);
}

[data-theme="light"] .settings-existing-users-heading {
  color: var(--color-text-secondary);
}

[data-theme="light"] .settings-add-user-panel__inner {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

[data-theme="light"] .settings-hub-tabs {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

[data-theme="light"] .settings-hub-tab {
  color: var(--color-text-secondary);
}

[data-theme="light"] .settings-hub-tab.active {
  color: var(--text-dark);
  font-weight: 500;
  background: var(--color-surface-1);
}

[data-theme="light"] .settings-hub .settings-permissions-head .section-title,
[data-theme="light"] .settings-hub .settings-user-section .section-title {
  color: var(--text-dark);
}

[data-theme="light"] .settings-users-table thead th {
  color: var(--color-text-secondary);
}

[data-theme="light"] .settings-permissions-note {
  color: var(--color-text-secondary);
}

[data-theme="light"] .settings-role-card {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

[data-theme="light"] .settings-role-card-title {
  color: var(--text-dark);
}

[data-theme="light"] .settings-perm-row {
  color: var(--color-text-secondary);
  border-bottom-color: var(--color-border);
}

[data-theme="light"] .settings-perm-switch {
  background: rgba(15, 23, 42, 0.12);
  border-color: rgba(15, 23, 42, 0.12);
}

/* Access Control + Role Permissions — charcoal shell, no outer chrome */
.settings-hub-body--access,
.settings-hub-body--permissions {
  background: var(--color-base) !important;
  font-family: 'Inter', var(--font-primary), system-ui, -apple-system, sans-serif;
}

.settings-hub--access,
.settings-hub--permissions {
  padding-top: 0.5rem;
  max-width: 1120px;
  margin: 0 auto;
}

.settings-hub--role-cards.settings-hub--permissions {
  max-width: 1200px;
}

.settings-role-page-title {
  margin: 0 0 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  text-align: center;
}

.settings-role-perm-grid--centered {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  justify-items: stretch;
}

.settings-role-card--flat {
  background: rgba(255, 255, 255, 0.035) !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .settings-role-card--flat {
  background: rgba(15, 23, 42, 0.04) !important;
  border: none !important;
}

.settings-hub--access .settings-users-panel,
.settings-hub--access .settings-users-table-wrap,
.settings-hub--access .table-container.settings-users-table-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.settings-hub--access .settings-access-toolbar {
  margin-bottom: 1rem;
  justify-content: flex-end;
}

.settings-hub--access .settings-add-user-direct {
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f4f4f5;
}

.settings-hub--access .settings-add-user-direct:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.settings-hub--access .settings-existing-users-heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #a1a1aa;
}

.settings-hub--access .settings-users-table thead th {
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #a1a1aa !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-hub--access .table-search-bar {
  margin: 0 0 12px;
  padding: 8px 0;
  background: transparent !important;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  box-shadow: none !important;
}

.settings-hub--access .table-search-bar:focus-within {
  border-bottom-color: var(--color-accent, var(--accent-soft));
}

.settings-flash {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
}

.settings-flash--success {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #86efac;
}

.settings-flash--error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.settings-user-row.is-editing td {
  background: rgba(59, 130, 246, 0.08);
}

.settings-user-edit-row > td {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.settings-user-edit-row.is-open > td {
  padding-bottom: 0.75rem !important;
}

.settings-user-edit-panel {
  margin: 0.35rem 0 0.5rem;
  padding: 1.25rem 1.35rem;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.settings-user-edit-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.settings-user-edit-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #f4f4f5;
}

.settings-user-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}

@media (max-width: 768px) {
  .settings-user-edit-grid {
    grid-template-columns: 1fr;
  }
}

.settings-user-edit-password {
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-user-edit-password__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-bottom: 0.35rem;
}

.settings-user-edit-password__hint {
  margin: 0 0 0.85rem;
}

.settings-user-edit-password__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .settings-user-edit-password__fields {
    grid-template-columns: 1fr;
  }
}

.settings-pw-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.settings-pw-input-row .form-input {
  flex: 1;
  min-width: 0;
}

.settings-pw-status {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.settings-pw-status--ok {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}

.settings-pw-status--warn {
  background: rgba(251, 191, 36, 0.15);
  color: #fcd34d;
}

.settings-role-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #e4e4e7;
}

.settings-role-badge--super_admin {
  background: rgba(168, 85, 247, 0.2);
  color: #e9d5ff;
}

.settings-role-badge--admin {
  background: rgba(59, 130, 246, 0.2);
  color: #bfdbfe;
}

.settings-user-edit-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-user-actions-cell {
  white-space: nowrap;
}

[data-theme="light"] .settings-user-edit-panel {
  background: #f8fafc;
  border-color: rgba(59, 130, 246, 0.35);
}

[data-theme="light"] .settings-user-edit-panel__title {
  color: #0f172a;
}

.settings-perm-matrix-page-title {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #f4f4f5;
}

.settings-perm-matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
}

.settings-perm-matrix {
  width: 100%;
  min-width: 520px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.settings-perm-matrix thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a1a1aa;
  padding: 12px 14px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
}

.settings-perm-matrix thead th.settings-perm-matrix-feature-col {
  text-align: left;
  min-width: 14rem;
}

.settings-perm-matrix tbody tr:nth-child(odd) {
  background: #1c1c1f;
}

.settings-perm-matrix tbody tr:nth-child(even) {
  background: transparent;
}

.settings-perm-matrix tbody th[scope="row"] {
  text-align: left;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.settings-perm-matrix td {
  text-align: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

[data-theme="light"] .settings-hub-body--access,
[data-theme="light"] .settings-hub-body--permissions {
  background: #f8fafc !important;
}

[data-theme="light"] .settings-perm-matrix-page-title {
  color: #0f172a;
}

[data-theme="light"] .settings-perm-matrix thead th {
  color: #64748b;
  border-bottom-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .settings-perm-matrix tbody th[scope="row"] {
  color: #0f172a;
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .settings-perm-matrix td {
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .settings-perm-matrix tbody tr:nth-child(odd) {
  background: #f1f5f9;
}

.tab-section:last-child { margin-bottom: 0; }
.tab-section-title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 12px; }

/* -- Connectivity Monitor ----------------------------------------------- */
.critical-section { background: linear-gradient(135deg, rgba(239,68,68,0.08), rgba(239,68,68,0.04)); border: 2px solid var(--color-error); border-radius: 14px; padding: 24px; margin-bottom: 24px; }
.critical-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.critical-header h2 { font-size: 18px; font-weight: 700; color: var(--color-error); }
.critical-badge { padding: 4px 10px; background: var(--color-error); color: #fff; border-radius: 6px; font-size: 12px; font-weight: 600; }
.group-container { background: var(--color-bg-card, var(--bg-card)); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; margin-bottom: 20px; }
.group-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--color-bg-tertiary); border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background 0.2s; }
.group-header:hover { background: var(--color-bg-hover); }
.group-header-left { display: flex; align-items: center; gap: 12px; }
.group-toggle { font-size: 12px; color: var(--color-text-muted); transition: transform 0.2s; }
.group-toggle.collapsed { transform: rotate(-90deg); }
.group-title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
.group-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--color-text-muted); }
.group-content { max-height: 1000px; overflow: hidden; transition: max-height 0.3s ease; }
.group-content.collapsed { max-height: 0; }
.account-card { padding: 16px 20px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 20px; transition: background 0.2s; }
.account-card:last-child { border-bottom: none; }
.account-card:hover { background: var(--color-bg-hover); }
.account-card.state-changed { animation: highlightChange 2s ease; }
@keyframes highlightChange { 0%, 100% { background: transparent; } 50% { background: rgba(74,125,252,0.15); } }
.account-info { display: flex; align-items: center; gap: 16px; flex: 1; }
.conn-status { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.conn-status.connected { background: var(--color-success); box-shadow: 0 0 8px rgba(16,185,129,0.5); }
.conn-status.disconnected { background: var(--color-error); }
.conn-status.degraded { background: var(--color-warning); }
.conn-status.inactive { background: var(--color-text-muted); }
.account-details { flex: 1; display: grid; grid-template-columns: 180px 150px 180px 1fr; gap: 16px; align-items: center; }
.detail-item { display: flex; flex-direction: column; gap: 2px; }
.detail-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.detail-value { font-size: 13px; color: var(--color-text-primary); font-weight: 500; }
.detail-value a { color: var(--color-accent); text-decoration: none; }
.detail-value a:hover { text-decoration: underline; }
.heartbeat { font-size: 12px; color: var(--color-text-secondary); }
.heartbeat.recent { color: var(--color-success); }
.heartbeat.stale { color: var(--color-warning); }
.heartbeat.old { color: var(--color-error); }
.account-actions { display: flex; gap: 8px; }
@media (max-width: 1024px) { .account-details { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 768px) { .account-card { flex-direction: column; align-items: flex-start; } .account-actions { width: 100%; } }

/* -- Toast Notification ------------------------------------------------- */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--color-bg-card, var(--bg-card)); border: 1px solid var(--color-border); border-radius: 10px; padding: 16px 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 12px; z-index: 2000; animation: toastSlideIn 0.3s ease; }
@keyframes toastSlideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast.success { border-color: var(--color-success); }
.toast.error { border-color: var(--color-error); }

/* -- Reports Hub -------------------------------------------------------- */
.reports-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 32px; }
.report-card { background: var(--color-bg-card, var(--bg-card)); border: 1px solid var(--color-border); border-radius: 14px; padding: 28px; text-decoration: none; color: inherit; display: block; transition: all 0.2s; }
.report-card:hover { border-color: rgba(255,255,255,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
.report-card-icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(74,125,252,0.12); display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 20px; }
.report-card-title { font-size: 18px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 8px; }
.report-card-desc { font-size: 14px; color: var(--color-text-muted); line-height: 1.5; }
@media (max-width: 768px) { .reports-grid { grid-template-columns: 1fr; } }

/* -- Filters (Transaction Report / Reporting Cube) ---------------------- */
.filters-card { background: var(--color-bg-card, var(--bg-card)); border: 1px solid var(--color-border); border-radius: 14px; padding: 24px; margin-bottom: 24px; }
.filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; }
.filter-group label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.filter-group select, .filter-group input { width: 100%; padding: 10px 14px; background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text-primary); font-size: 14px; font-family: inherit; }
.filter-group select:focus, .filter-group input:focus { outline: none; border-color: var(--color-accent); }
.filter-actions { display: flex; gap: 12px; }
.profit-positive { color: var(--color-success, #10d988); font-weight: 600; }
.profit-negative { color: var(--color-error, #f05050); }
.client-link { color: var(--color-accent); text-decoration: none; font-weight: 500; }
.client-link:hover { color: var(--color-background-pale); }
@media (max-width: 768px) { .filters-grid { grid-template-columns: 1fr; } }

/* -- Settings page (users grid — same rhythm as .data-table) ------------ */
.users-table { width: 100%; min-width: 100%; table-layout: fixed; border-collapse: collapse; color: var(--tbl-text); }
.users-table thead th .th-cell,
.broker-tbl thead th .th-cell,
.md-table thead th .th-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.users-table thead th {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tbl-text);
  text-align: left;
  border-bottom: 1px solid var(--tbl-divider-md);
  background: transparent;
}
.users-table tbody tr { border-bottom: 1px solid var(--tbl-divider); transition: background 0.15s; }
.users-table tbody tr:nth-child(odd),
.users-table tbody tr:nth-child(even) { background: var(--tbl-row-alt); }
.users-table tbody tr:hover { background: var(--tbl-hover-bg); }
.users-table tbody tr:last-child { border-bottom: none; }
.users-table tbody td {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--tbl-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="light"] .users-table thead th { color: var(--tbl-text) !important; border-bottom-color: var(--tbl-divider-md); }
[data-theme="light"] .users-table tbody tr { border-bottom-color: var(--tbl-divider); }
[data-theme="light"] .users-table tbody td { color: var(--tbl-text) !important; }
.role-badge { display: inline-flex; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.timestamp { color: var(--color-text-secondary); font-size: 13px; }

/* -- Permissions Grid --------------------------------------------------- */
.permissions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.permission-card { background: var(--color-bg-card, var(--bg-card)); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.permission-header { padding: 16px 20px; background: var(--color-bg-tertiary); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.permission-title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
.permission-list { display: flex; flex-direction: column; }
.permission-item { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.04); }
.permission-item:last-child { border-bottom: none; }
.permission-name { font-size: 13px; color: var(--color-text-primary); }
.permission-access { font-size: 12px; font-weight: 600; }
.access-full { color: var(--color-success); }
.access-restricted { color: var(--color-error); }
.access-readonly { color: var(--color-text-muted); }

/* -- System Logs -------------------------------------------------------- */
.logs-filters { background: var(--color-bg-card, var(--bg-card)); border: 1px solid var(--color-border); border-radius: 10px; padding: 20px; margin-bottom: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.filter-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.filter-input, .filter-select { padding: 8px 12px; background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text-primary); font-size: 13px; font-family: inherit; }
.filter-input:focus, .filter-select:focus { outline: none; border-color: var(--color-accent); }
.logs-container { background: var(--color-bg-card, var(--bg-card)); border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.log-entry { padding: 16px 20px; border-bottom: 1px solid var(--color-border); display: grid; grid-template-columns: 160px 160px 1fr 160px 120px; gap: 16px; align-items: center; transition: background 0.15s; }
.log-entry:hover { background: var(--color-bg-hover); }
.log-entry:last-child { border-bottom: none; }
.log-timestamp { font-size: 13px; color: var(--color-text-secondary); font-family: monospace; }
.log-user { font-size: 13px; font-weight: 500; color: var(--color-text-primary); }
.log-action { font-size: 13px; color: var(--color-text-secondary); }
.log-entity { font-size: 13px; color: var(--color-text-primary); font-weight: 500; }
.log-type { display: inline-flex; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.log-type.user-change { background: rgba(144, 193, 190, 0.14); color: var(--color-accent); }
.log-type.permission { background: rgba(245,158,11,0.12); color: var(--color-warning); }
.log-type.connectivity { background: rgba(16,185,129,0.12); color: var(--color-success); }
.log-type.account { background: rgba(239,68,68,0.12); color: var(--color-error); }
.log-type.login { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.log-type.setting { background: rgba(6,182,212,0.12); color: #06b6d4; }
.log-type.client { background: rgba(245,158,11,0.12); color: var(--color-warning); }
.log-type.report { background: rgba(236,72,153,0.12); color: #ec4899; }
.log-details { font-size: 12px; color: var(--color-text-muted); font-family: monospace; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logs-pagination { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--color-bg-card, var(--bg-card)); border: 1px solid var(--color-border); border-top: none; border-radius: 0 0 10px 10px; }
.logs-pagination .page-info { font-size: 13px; color: var(--color-text-muted); }
.logs-pagination .page-btns { display: flex; gap: 8px; }
.logs-pagination .page-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-bg-tertiary); color: var(--color-text-primary); font-size: 13px; cursor: pointer; transition: all 0.15s; text-decoration: none; }
.logs-pagination .page-btn:hover:not(:disabled) { background: var(--color-secondary); color: #fff; border-color: var(--color-tertiary); }
.logs-pagination .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.logs-empty { text-align: center; padding: 48px 20px; color: var(--color-text-muted); font-size: 14px; }
@media (max-width: 1024px) { .log-entry { grid-template-columns: 1fr; gap: 8px; } }

/* -- Client Reporting --------------------------------------------------- */
.client-reporting-container { max-width: 1400px; margin: 0 auto; padding: 24px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 40px 0; }
.stat-card { background: var(--color-bg-card, var(--bg-card)); border-radius: 16px; padding: 24px; text-align: center; border: 1px solid var(--color-border); box-shadow: 0 4px 20px rgba(0,0,0,0.15); transition: all 0.3s; position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-accent-light), var(--color-tertiary)); }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.stat-title { color: var(--color-secondary, #03dac6); font-size: 1.1rem; font-weight: 600; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-value { font-size: 2.5rem; font-weight: 700; color: var(--color-text-primary); margin: 0 0 8px; }
.stat-subtitle { color: var(--color-text-muted); font-size: 0.9rem; margin: 0 0 16px; }
.stat-action { color: var(--color-secondary, #03dac6); text-decoration: none; font-weight: 600; padding: 8px 16px; border: 2px solid var(--color-secondary, #03dac6); border-radius: 6px; transition: all 0.3s; display: inline-block; }
.stat-action:hover { background: var(--color-secondary, #03dac6); color: var(--color-bg-primary, #121212); }
.content-section { margin: 40px 0; background: var(--color-bg-card, var(--bg-card)); border-radius: 16px; padding: 32px; border: 1px solid var(--color-border); }
.modern-table { width: 100%; min-width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 20px; background: var(--tbl-surface); border-radius: 12px; overflow: hidden; border: 1px solid var(--tbl-divider); box-shadow: var(--tbl-shadow); }
.modern-table th { background: var(--tbl-header-bg); color: var(--tbl-text) !important; font-weight: 600; padding: 16px 12px; text-align: left; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--tbl-header-rule); }
.modern-table td { padding: 16px 12px; border-bottom: 1px solid var(--tbl-divider); color: var(--tbl-text) !important; font-size: 0.9rem; vertical-align: middle; background-color: transparent !important; }
.modern-table tbody tr { background: var(--tbl-surface); }
.modern-table tbody tr:nth-child(even) { background: var(--tbl-row-alt); }
.modern-table tbody tr:hover { background: var(--tbl-hover-bg) !important; }
.modern-table tr:last-child td { border-bottom: none; }
.status-active { background: linear-gradient(135deg, var(--color-success), #2e7d32); color: #fff; }
.status-inactive { background: linear-gradient(135deg, var(--color-error), #b00020); color: #fff; }
.action-button { background: linear-gradient(135deg, var(--color-error), #b00020); color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s; font-size: 0.8rem; }
.action-button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.action-button.activate { background: linear-gradient(135deg, var(--color-success), #2e7d32); }
.action-link { color: var(--color-secondary, #03dac6); text-decoration: none; font-weight: 600; padding: 4px 8px; border-radius: 4px; transition: all 0.3s; }
.action-link:hover { background: var(--color-secondary, #03dac6); color: var(--color-bg-primary); }
.period-cell { white-space: nowrap; font-family: monospace; font-size: 0.85rem; }
.file-cell { font-family: monospace; font-size: 0.85rem; color: var(--color-text-muted); }
.size-cell { text-align: right; font-weight: 600; color: var(--color-secondary, #03dac6); }
.date-cell { font-family: monospace; font-size: 0.85rem; color: var(--color-text-muted); }
.amount-cell { text-align: right; font-weight: 700; color: var(--color-success-light); }
[data-theme="light"] .amount-cell { color: var(--color-success); }
.amount-cell.negative { color: var(--color-error); }
.failed-count { color: var(--color-error); font-weight: 600; }
.success-count { color: var(--color-success); font-weight: 600; }
.scroll-container { max-height: 500px; overflow-y: auto; border-radius: 8px; border: 1px solid var(--color-border); }

/* -- Unmapped Comments -------------------------------------------------- */
.mapping-form { display: none; background: var(--color-bg-tertiary); padding: 15px; border-radius: 8px; margin: 10px 0; border: 1px solid var(--color-secondary, #03dac6); }
.mapping-form.active { display: block; }
.mapping-form input, .mapping-form select { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid var(--color-border); background: var(--color-bg-secondary); color: var(--color-text-primary); margin-bottom: 10px; }
.mapping-form label { display: block; margin-bottom: 5px; font-weight: bold; color: var(--color-secondary, #03dac6); }
.mapping-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 10px; }
.edit-mapping-form { display: none; background: var(--color-bg-tertiary); padding: 15px; border-radius: 8px; margin: 10px 0; border: 1px solid var(--color-tertiary); }
.edit-mapping-form.active { display: block; }
.edit-mapping-form input, .edit-mapping-form select { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid var(--color-border); background: var(--color-bg-secondary); color: var(--color-text-primary); margin-bottom: 10px; }
.edit-mapping-form label { display: block; margin-bottom: 5px; font-weight: bold; color: var(--color-accent-light); }

/* -- Broker Admin Tables — unified fintech table tokens ----------------- */
.broker-tbl { width: 100%; min-width: 100%; table-layout: fixed; border-collapse: collapse; font-family: inherit; color: var(--tbl-text); }
.broker-tbl thead {
  background: var(--tbl-header-bg);
  border-bottom: 1px solid var(--tbl-divider-md);
}
.broker-tbl thead th {
  padding: 12px 18px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--tbl-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--tbl-divider-md);
  white-space: normal;
  line-height: 1.35;
  user-select: none;
  cursor: pointer;
}
.broker-tbl thead th:hover { color: var(--tbl-text); background: var(--color-accent-subtle); }
.broker-tbl tbody tr { border-bottom: 1px solid var(--tbl-divider); transition: background 0.15s; }
.broker-tbl tbody tr:nth-child(odd),
.broker-tbl tbody tr:nth-child(even) { background: var(--tbl-row-alt); }
.broker-tbl tbody tr:hover { background: var(--tbl-hover-bg) !important; box-shadow: none; }
.broker-tbl tbody tr:last-child { border-bottom: none; }
.broker-tbl tbody td {
  padding: 12px 18px;
  font-size: 13px;
  color: var(--tbl-text);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="light"] .broker-tbl thead { background: var(--tbl-header-bg) !important; }
[data-theme="light"] .broker-tbl thead th { color: var(--tbl-text) !important; border-bottom-color: var(--tbl-divider-md); }
[data-theme="light"] .broker-tbl tbody td { color: var(--tbl-text) !important; border-bottom-color: var(--tbl-divider); }
.col-mono { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.badge-type { display: inline-block; padding: 3px 10px; border-radius: 5px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(144, 193, 190, 0.16); color: var(--color-accent); white-space: nowrap; }
.ext-link { display: inline-flex; align-items: center; gap: 5px; color: var(--color-accent); text-decoration: none; font-size: 13px; }
.ext-link:hover { text-decoration: underline; }
.ext-link-icon { font-size: 11px; opacity: 0.7; }
.config-panel { background: var(--color-bg-card, var(--bg-card)); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
.config-panel-header { padding: 16px 24px; background: var(--color-bg-tertiary); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 12px; }
.config-panel-icon { font-size: 20px; }
.config-panel-title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
.config-panel-desc { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }
.config-panel-body { padding: 20px 24px; }
.page-actions { display: flex; gap: 12px; }
@media (max-width: 768px) { .broker-tbl-wrap { overflow-x: auto; } }

/* -- Master Data -------------------------------------------------------- */
.md-section { margin-bottom: 20px; border: 1px solid var(--tbl-divider); border-radius: var(--tbl-radius); overflow: hidden; }
.md-section-header { padding: 10px 16px; background: var(--color-bg-tertiary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 0.95rem; user-select: none; }
.md-section-header:hover { opacity: 0.85; }
.md-section-body { padding: 0; }
.md-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; margin-left: 8px; }
.md-badge-privat { background: rgba(144, 193, 190, 0.2); color: var(--color-accent-light); }
.md-badge-corporate { background: rgba(124,58,237,0.13); color: #8b5cf6; }
.md-section-toggle { transition: transform 0.2s; font-size: 0.8rem; }
.md-section-toggle.collapsed { transform: rotate(-90deg); }
.md-add-btn { margin: 12px 16px; }
.md-kv-table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-border); }
.md-kv-table tr { border-bottom: 1px solid var(--color-border); }
.md-kv-table tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.md-kv-table tr:hover { background: rgba(99,102,241,0.06); }
.md-kv-table th { text-align: left; padding: 9px 16px; font-size: 0.75rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; width: 200px; white-space: nowrap; vertical-align: middle; border-right: 1px solid var(--color-border); }
.md-kv-table td { padding: 4px 12px; }
.md-kv-table input, .md-kv-table select { width: 100%; background: transparent; color: var(--color-text-primary); border: 1px solid transparent; border-radius: 4px; padding: 6px 8px; font-size: 0.875rem; transition: border-color 0.15s; }
.md-kv-table input:hover, .md-kv-table select:hover { border-color: var(--color-border); }
.md-kv-table input:focus, .md-kv-table select:focus { border-color: var(--color-accent); outline: none; background: var(--color-bg-tertiary); }
.md-scroll { overflow-x: auto; }
.md-table { width: 100%; min-width: 100%; table-layout: fixed; border-collapse: collapse; border: 1px solid var(--tbl-divider); }
.md-table thead th { padding: 10px 12px; font-size: 11px; color: var(--tbl-text); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; text-align: left; border-bottom: 1px solid var(--tbl-divider-md); border-right: 1px solid var(--tbl-divider); white-space: nowrap; background: var(--tbl-header-bg); position: sticky; top: 0; }
.md-table thead th:last-child { border-right: none; }
.md-table tbody tr { border-bottom: 1px solid var(--tbl-divider); }
.md-table tbody tr:nth-child(odd),
.md-table tbody tr:nth-child(even) { background: var(--tbl-row-alt); }
.md-table tbody tr:hover { background: var(--tbl-hover-bg); }
.md-table tbody td { padding: 8px 12px; vertical-align: middle; border-right: 1px solid var(--tbl-divider); color: var(--tbl-text) !important; font-size: 0.8rem; }
.md-table tbody td:last-child { border-right: none; }
.md-table input, .md-table select { width: 100%; min-width: 60px; background: transparent; color: var(--tbl-text); border: 1px solid transparent; border-radius: 3px; padding: 5px 6px; font-size: 0.8rem; transition: border-color 0.15s; }
.md-table input:hover, .md-table select:hover { border-color: var(--color-border); }
.md-table input:focus, .md-table select:focus { border-color: var(--color-accent); outline: none; background: var(--color-bg-tertiary); }
.md-table .md-col-actions { width: 40px; text-align: center; }
.md-detail-row td { padding: 0 !important; background: rgba(0,0,0,0.12) !important; border-right: none !important; }
.md-detail-inner { padding: 10px 20px; border-top: 1px dashed var(--color-border); }
.md-expand-btn { cursor: pointer; font-size: 0.75rem; color: var(--color-text-secondary); border: none; background: none; padding: 4px; }
.md-expand-btn:hover { color: var(--color-accent); }
/* Master Data — context strip (replaces former Clean/Raw segmented control) */
.md-context-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--color-border-md);
}
.md-context-strip-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.md-context-strip-sep {
  width: 1px;
  height: 14px;
  background: var(--color-border-strong);
  opacity: 0.5;
}
.md-context-strip-meta {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.master-data-page {
  background: transparent;
  border-color: transparent;
}
[data-theme="light"] .master-data-page {
  background: transparent;
  border-color: transparent;
}
.page-wrapper-master-data {
  background-color: transparent;
}
.page-wrapper-master-data .page-card.master-data-page--streamlined {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.master-data-page--streamlined .page-body {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-7);
}
.md-data-form-panel {
  padding: 0;
  padding-bottom: calc(var(--spacing-6) + 5rem);
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  margin-bottom: var(--spacing-6);
  box-sizing: border-box;
}
[data-theme="light"] .md-data-form-panel {
  background: transparent;
}
.md-data-form-panel .md-data-block {
  border-bottom-color: color-mix(in srgb, var(--color-border) 55%, transparent);
}
.md-data-form-panel .md-data-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.master-data-page--streamlined .md-data-block-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0 0 14px;
}
.master-data-page--streamlined .md-field-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.master-data-page--streamlined .md-field-control {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.35;
  background: color-mix(in srgb, var(--color-surface-2) 88%, var(--bg-card) 12%);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 72%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-light) 5%, transparent);
}
.master-data-page--streamlined .md-field-control:hover {
  border-color: color-mix(in srgb, var(--accent-soft) 38%, var(--ds-card-border));
}
.master-data-page--streamlined .md-field-control:focus {
  outline: none;
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-surface-2) 90%, var(--accent-soft) 10%);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
[data-theme="light"] .master-data-page--streamlined .md-field-control {
  background: color-mix(in srgb, var(--color-surface-2) 94%, var(--bg-main) 6%);
}
[data-theme="light"] .master-data-page--streamlined .md-field-control:focus {
  background: var(--color-surface-2);
}
.md-documents-heading {
  margin-bottom: var(--spacing-4);
}
.md-documents-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
.md-documents-subtitle {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.md-master-docs-tabs {
  margin-top: 0;
}
.md-documents-subsection--broker {
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--color-border);
}
.md-documents-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-3);
}
.master-data-page--streamlined .md-upload-form--in-tab {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px 18px;
  align-items: end;
}
.md-upload-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.md-upload-field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.master-data-page .md-form-control-soft.form-input,
.master-data-page .md-form-control-soft.form-select,
.master-data-page select.md-form-control-soft {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  background: color-mix(in srgb, var(--color-surface-2) 88%, var(--bg-card) 12%);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 72%, transparent);
  color: var(--color-text-primary);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-light) 5%, transparent);
}
.master-data-page .md-form-control-soft:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
[data-theme="light"] .master-data-page .md-form-control-soft.form-input,
[data-theme="light"] .master-data-page .md-form-control-soft.form-select,
[data-theme="light"] .master-data-page select.md-form-control-soft {
  background: color-mix(in srgb, var(--color-surface-2) 94%, var(--bg-main) 6%);
}
.master-data-page--streamlined .page-header {
  border-bottom: none;
  margin-bottom: var(--spacing-5);
  padding-bottom: var(--spacing-4);
}
.master-data-page--streamlined .page-header::after {
  display: none;
}
.master-data-page--streamlined .md-context-strip {
  border-bottom-color: var(--color-border);
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-3);
}
.master-data-page--streamlined .md-documents-section {
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--color-border);
}
.md-docs-section-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  margin: 0 0 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border-md);
  border-radius: var(--control-radius);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.md-docs-section-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-border-strong);
}
[data-theme="light"] .md-docs-section-toggle {
  background: var(--color-surface-2);
}
.md-docs-toggle-icon {
  font-size: 11px;
  opacity: 0.85;
  flex-shrink: 0;
}
.md-docs-toggle-label {
  flex: 1 1 auto;
}
.md-docs-toggle-meta {
  flex: 1 0 100%;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
@media (min-width: 720px) {
  .md-docs-toggle-meta {
    flex: 0 1 auto;
    margin-left: auto;
  }
}
.md-docs-panel[hidden] {
  display: none !important;
}
.master-data-page--streamlined .md-upload-panel {
  margin-bottom: var(--spacing-5);
  padding: 0 0 var(--spacing-5);
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ds-card-border) 45%, transparent);
  border-radius: 0;
  background: transparent;
}
.master-data-page--streamlined .md-upload-form:not(.md-upload-form--in-tab) {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: flex-end;
}
.master-data-page--streamlined .md-upload-form .form-label {
  margin: 0;
}
.md-docs-table-viewport {
  max-height: 248px;
  overflow: auto;
  border: 1px solid var(--tbl-divider);
  border-radius: var(--control-radius);
  background: var(--tbl-surface);
}
[data-theme="light"] .md-docs-table-viewport {
  background: var(--tbl-surface);
}
.md-docs-table-viewport .md-readonly-table,
.md-docs-table-viewport .data-table.md-readonly-table {
  border: none;
  min-width: 100%;
}
.md-docs-table-viewport tbody tr.md-doc-row-expiry-due td {
  background: rgba(250, 230, 140, 0.38) !important;
}
[data-theme="light"] .md-docs-table-viewport tbody tr.md-doc-row-expiry-due td {
  background: rgba(253, 224, 71, 0.45) !important;
}
.md-docs-table-viewport .data-table.md-readonly-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--tbl-header-bg) !important;
  color: var(--tbl-text) !important;
  box-shadow: 0 1px 0 var(--tbl-header-rule);
}
[data-theme="light"] .md-docs-table-viewport .data-table.md-readonly-table thead th {
  background: var(--tbl-header-bg) !important;
  color: var(--tbl-text) !important;
}
.md-master-docs-table-outer {
  margin-top: 10px;
}
.md-docs-empty {
  text-align: center;
  padding: 20px !important;
  color: var(--color-text-secondary);
}
.md-page-actions {
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-4);
  border-top: 1px solid var(--color-border);
}
.master-data-page--streamlined .md-documents-section .table-container {
  margin-top: 8px;
}
.master-data-page--streamlined .md-master-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.md-sub-header { padding: 8px 16px; font-weight: 600; font-size: 0.85rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--color-border); background: rgba(0,0,0,0.06); }
.md-doc-card { padding: 12px 16px; border: 1px solid var(--color-border); border-radius: 6px; margin: 8px 16px; }
.md-doc-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.md-doc-card-title { font-weight: 600; font-size: 0.9rem; }
.md-doc-expiry { font-size: 0.8rem; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.md-doc-expiry-ok { background: rgba(34,197,94,0.13); color: #22c55e; }
.md-doc-expiry-warn { background: rgba(245,158,11,0.13); color: #f59e0b; }
.md-doc-expiry-expired { background: rgba(239,68,68,0.13); color: #ef4444; }
.md-doc-meta { font-size: 0.75rem; color: var(--color-text-secondary); display: flex; gap: 12px; flex-wrap: wrap; }
.md-history-toggle { cursor: pointer; font-size: 0.75rem; color: var(--color-accent); margin: 4px 16px 8px; display: inline-block; }
.md-history-toggle:hover { text-decoration: underline; }
.md-history-list { display: none; margin: 0 16px 8px; }
.md-readonly-table { width: 100%; border-collapse: collapse; min-width: 400px; border: 1px solid var(--tbl-divider); }
.md-readonly-table thead th { padding: 8px 10px; font-size: 0.7rem; color: var(--tbl-text); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; text-align: left; border-bottom: 1px solid var(--tbl-divider-md); border-right: 1px solid var(--tbl-divider); background: var(--tbl-header-bg); }
.md-readonly-table thead th:last-child { border-right: none; }
.md-readonly-table tbody tr { border-bottom: 1px solid var(--tbl-divider); }
.md-readonly-table tbody tr:nth-child(odd),
.md-readonly-table tbody tr:nth-child(even) { background: var(--tbl-row-alt); }
.md-readonly-table tbody td { padding: 6px 10px; font-size: 0.8rem; vertical-align: middle; border-right: 1px solid var(--tbl-divider); color: var(--tbl-text) !important; }
.md-readonly-table tbody td:last-child { border-right: none; }
.md-admin-only {} /* toggled via body class or conditional style */
@media (max-width: 768px) { .md-kv-table th { width: 140px; font-size: 0.7rem; padding: 6px 10px; } }

/* Clean Data: tabs, grid, search, view/edit */
.md-data-shell { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.md-data-shell--flat {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.md-data-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.md-data-search {
  flex: 1 1 280px;
  min-width: 0;
  max-width: none;
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border-md);
  border-radius: var(--control-radius);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.md-data-search::placeholder { color: var(--color-text-secondary); opacity: 0.85; }
.md-data-search:hover { border-color: var(--color-border-strong); }
.md-data-search:focus {
  border-color: var(--color-accent-light);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
[data-theme="light"] .md-data-search {
  background: var(--color-surface-2);
  border-color: var(--color-border-md);
}
[data-theme="light"] .md-data-search:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.md-data-toolbar-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.master-data-page .md-data-subtabs {
  margin-top: 2px;
  margin-bottom: 14px;
  padding-top: 0;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 10px;
}
.md-data-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); padding-bottom: 10px; }
.md-data-subtab {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.md-data-subtab:hover { color: var(--color-text-primary); background: rgba(255,255,255,0.04); }
.md-data-subtab.active { color: #fff; background: var(--color-tertiary); border-color: var(--color-accent-light); }
.md-data-panel { display: none; }
.md-data-panel.md-data-panel--active { display: block; }
.md-data-block { margin-bottom: 20px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.md-data-block:last-child { border-bottom: none; }
.md-data-block-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px;
  padding: 0;
  letter-spacing: 0.02em;
}
.md-field-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 20px;
  margin-bottom: 8px;
}
.md-field-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .md-field-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .md-field-grid { grid-template-columns: 1fr; } }
.md-field-item { margin-bottom: 0; min-width: 0; }
.md-field-item.md-field-grid-span-3 { grid-column: 1 / -1; }
.md-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
  line-height: 1.3;
}
.md-field-control {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 14px;
  transition: border-color 0.15s, background 0.15s;
}
.md-field-control:focus { outline: none; border-color: var(--color-accent); background: var(--color-bg-tertiary); }
.md-field-control.md-field-primary-val { font-weight: 700; }
.md-data-shell.md-data-view-mode .md-field-control:not(:where(.md-table .md-field-control, .md-readonly-table input)) {
  border-color: transparent;
  background: transparent !important;
  box-shadow: none;
  pointer-events: none;
  padding-left: 0;
  padding-right: 0;
  -webkit-appearance: none;
  appearance: none;
}
.md-data-shell.md-data-view-mode select.md-field-control:not(:where(.md-table .md-field-control)) {
  background-image: none !important;
}
.md-data-shell.md-data-view-mode .md-field-control.md-field-primary-val { font-weight: 700; }
.md-search-hidden,
.md-data-block.md-search-hidden { display: none !important; }
.md-panel-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--color-text-secondary);
  font-size: 14px;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  margin-bottom: 16px;
}
.md-person-group-label {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Tables in System tab: edit mode restores controls */
.md-data-shell.md-data-view-mode .md-table .md-field-control,
.md-data-shell.md-data-view-mode .md-table input,
.md-data-shell.md-data-view-mode .md-table select {
  pointer-events: none;
  border-color: transparent;
  background: transparent !important;
}
.md-data-shell:not(.md-data-view-mode) .md-table .md-field-control,
.md-data-shell:not(.md-data-view-mode) .md-table input,
.md-data-shell:not(.md-data-view-mode) .md-table select {
  pointer-events: auto;
}
.md-data-shell.md-data-view-mode .md-mt-pw-input {
  pointer-events: none !important;
  border-color: transparent !important;
  background: transparent !important;
}
.md-data-shell:not(.md-data-view-mode) .md-mt-pw-input {
  pointer-events: auto;
  border: 1px solid var(--color-border) !important;
}

/* -- Telegram Settings -------------------------------------------------- */
.tg-section { margin-bottom: 32px; }
.tg-section h2 { font-size: 1.2rem; margin-bottom: 12px; }
.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tg-card { background: var(--color-bg-card, var(--bg-card)); border-radius: 8px; padding: 16px; border: 1px solid var(--color-border); }
.tg-card h3 { margin: 0 0 8px; font-size: 1rem; }
.tg-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; line-height: 1.4; border: 1px solid transparent; }
/* Don't reuse the dashboard --color-success / --color-error tokens here:
   in the dark theme those resolve to the *soft* greens/reds (#34d399 /
   #c44747) tuned for large success-surface treatments, and pairing them
   with white text produced an unreadable washed-out pill. The badge
   needs a strong, opaque green/red so the ON/OFF state is legible at a
   glance against the dark card background. */
.tg-badge-on  { background: #16a34a; color: #ffffff; border-color: rgba(255,255,255,0.18); }
.tg-badge-off { background: #dc2626; color: #ffffff; border-color: rgba(255,255,255,0.18); }
.tg-log-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tg-log-table th, .tg-log-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--color-border); }

/* -- BaFin Reports/Tables ----------------------------------------------- */
.date-input { background: var(--color-bg-tertiary); color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.date-input:focus { border-color: var(--color-accent); outline: none; box-shadow: var(--focus-ring); }
.generation-card { padding: 20px; background: var(--color-surface-2); border-radius: 12px; border: 1px solid var(--color-border); }
.generation-card h3 { color: var(--color-text-primary); margin-top: 0; margin-bottom: 16px; font-size: 16px; }

/* Transaction Reporting (bafin_reports) — upload panel + date toolbar */
.bafin-upload-panel {
  padding: 20px 22px;
  background: var(--color-surface-2);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  margin-bottom: 20px;
  box-sizing: border-box;
}
.bafin-upload-title {
  color: var(--color-text-primary);
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
}
.bafin-upload-desc {
  color: var(--color-text-muted);
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.5;
}
.bafin-upload-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}
.bafin-upload-file {
  width: 100%;
  max-width: 420px;
  padding: 10px 14px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--control-radius);
  color: var(--color-text-primary);
  font-size: 14px;
  box-sizing: border-box;
  transition: var(--control-transition);
}
.btn-slate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-surface);
  color: var(--btn-text-ui);
  border: 1px solid var(--btn-border-slate);
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--control-radius);
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  transition: var(--control-transition);
}
.btn-slate:hover {
  background: var(--btn-surface-hover);
  border-color: var(--color-border-strong);
  color: var(--btn-text-ui);
}
[data-theme="light"] .bafin-upload-panel {
  background: var(--color-surface-2);
}
[data-theme="light"] .btn-slate {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.tr-daily-reports-card {
  margin: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}
.tr-daily-reports-card .table-container {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.tr-report-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 16px 20px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
  box-sizing: border-box;
}
.tr-report-filter-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  min-width: 160px;
}
.tr-report-date-input {
  min-height: 40px;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--control-radius);
  transition: var(--control-transition);
}
.tr-report-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-left: 0;
}
.tr-report-filter-hint {
  margin: 0;
  padding: 10px 22px 14px;
  font-size: 13px;
  color: var(--color-text-muted);
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-border);
}
[data-theme="light"] .tr-report-filter-toolbar,
[data-theme="light"] .tr-report-filter-hint {
  background: #F1F5F9;
}
[data-theme="light"] .tr-report-filter-hint {
  border-bottom-color: var(--color-border);
}

/* Client Monthly Reporting — deep charcoal shell (neutral, no navy) */
.page-card.cr-reporting-page {
  --cr-report-base: #0f0f12;
  --cr-report-raised: #1f1f23;
  --cr-report-inset: #18181b;
  --cr-report-border: rgba(255, 255, 255, 0.08);
}
.page-card.cr-reporting-page .page-body {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: var(--layout-page-padding);
}
.page-card.cr-reporting-page .cr-reporting-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 14px 18px;
  padding-bottom: var(--spacing-5);
  margin-bottom: var(--spacing-4);
}
.page-card.cr-reporting-page .cr-reporting-page-header .cr-reporting-header-text {
  flex: 1 1 200px;
  min-width: 0;
}
.page-card.cr-reporting-page .cr-reporting-page-header .page-title {
  margin-bottom: var(--spacing-2);
}
.page-card.cr-reporting-page .cr-reporting-generate-btn {
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
}
.page-card.cr-reporting-page .cr-reporting-back--header {
  margin: 0;
  flex-shrink: 0;
  align-self: center;
}
.page-card.cr-reporting-page .cr-reporting-page-nav {
  justify-content: flex-end;
  margin-bottom: var(--spacing-5);
  padding-top: 0;
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--color-border);
}
.page-card.cr-reporting-page .cr-reporting-page-nav .page-nav-left,
.page-card.cr-reporting-page .cr-reporting-page-nav .page-nav-center {
  display: none;
}
.cr-reporting-body-surface {
  margin-top: 0;
  padding: var(--spacing-6) var(--layout-page-padding) var(--spacing-10);
  background: var(--cr-report-base, #0f0f12);
  border: 1px solid var(--cr-report-border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  box-sizing: border-box;
}
[data-theme="light"] .cr-reporting-body-surface {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

/* Client Monthly Reporting — unified minimalist shell (#121214, unboxed) */
body.client-mr-body-lock {
  background: var(--ds-app-canvas) !important;
  --layout-page-padding: 32px;
  font-family: 'Inter', var(--font-primary), system-ui, -apple-system, sans-serif;
}

[data-theme="dark"] body.client-mr-body-lock {
  color-scheme: dark;
}

[data-theme="light"] body.client-mr-body-lock {
  color-scheme: light;
}
body.client-mr-body-lock .page-card.cr-mr-unboxed {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.client-mr-body-lock .cr-reporting-body-surface {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-top: 4px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.client-mr-body-lock .client-reporting-layout.page-wrapper,
body.client-mr-body-lock .page-card.client-reporting-layout {
  width: 100%;
  max-width: min(100%, 2400px);
  margin-inline: auto;
  box-sizing: border-box;
}
body.client-mr-body-lock .cr-mr-page-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0;
}
body.client-mr-body-lock .cr-mr-header-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
body.client-mr-body-lock .cr-mr-title-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
body.client-mr-body-lock .cr-mr-header-outline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
body.client-mr-body-lock .cr-mr-btn-outline {
  background: transparent !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-strong) !important;
  font-weight: 500;
  box-shadow: none !important;
}
body.client-mr-body-lock .cr-mr-btn-outline:hover {
  background: var(--color-bg-hover) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-text-primary) !important;
}
body.client-mr-body-lock .cr-mr-filter-toolbar-row {
  margin-top: var(--spacing-3);
  width: 100%;
}
body.client-mr-body-lock .cr-mr-filter-toolbar-row--hidden {
  display: none;
}
body.client-mr-body-lock .cr-mr-hub-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: var(--spacing-4);
}
@media (max-width: 1280px) {
  body.client-mr-body-lock .cr-mr-hub-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  body.client-mr-body-lock .cr-mr-hub-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  body.client-mr-body-lock .cr-mr-hub-cards {
    grid-template-columns: 1fr;
  }
}
body.client-mr-body-lock .cr-mr-hub-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ds-border) 55%, rgba(145, 184, 209, 0.28) 45%);
  background: color-mix(in srgb, var(--ds-surface) 45%, transparent);
  transition: border-color 0.15s ease, background 0.15s ease;
}
body.client-mr-body-lock .cr-mr-hub-card:hover,
body.client-mr-body-lock .cr-mr-hub-card--active {
  border-color: color-mix(in srgb, var(--accent-soft) 45%, var(--ds-border) 55%);
  background: color-mix(in srgb, var(--accent-soft) 8%, var(--ds-surface) 40%);
}
body.client-mr-body-lock .cr-mr-hub-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ds-text-secondary, var(--text-dark));
}
body.client-mr-body-lock .cr-mr-hub-card-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-dark);
}
body.client-mr-body-lock .cr-mr-hub-card-value--text {
  font-size: 1.35rem;
}
body.client-mr-body-lock .cr-mr-hub-card-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}
body.client-mr-body-lock .cr-mr-hub-card-action {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-soft, var(--color-accent));
}
body.client-mr-body-lock .cr-mr-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-border);
}
body.client-mr-body-lock .cr-mr-tab {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text-secondary);
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.client-mr-body-lock .cr-mr-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}
body.client-mr-body-lock .cr-mr-tab--active {
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--accent-soft) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent-soft) 35%, var(--color-border));
}
body.client-mr-body-lock .cr-mr-tab-embed-wrap {
  width: 100%;
  min-height: 320px;
}
body.client-mr-body-lock .cr-mr-tab-embed {
  display: block;
  width: 100%;
  min-height: 480px;
  height: 72vh;
  max-height: 960px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: transparent;
}
/* Embedded tab documents (?embed=1) — full theme via CLIENT_REPORTING_EMBED_HEAD */
body.cr-embed-body {
  margin: 0;
  padding: 0;
  background: var(--ds-app-canvas, var(--color-bg-app, #121214)) !important;
  color: var(--color-text-primary, #e2e8f0);
  font-family: 'Inter', var(--font-primary), system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color-scheme: dark;
}
[data-theme="light"] body.cr-embed-body {
  color-scheme: light;
}
body.cr-embed-body .cr-embed-panel {
  min-height: 100%;
  background: transparent;
}
body.cr-embed-body .cr-embed-panel-body {
  padding: var(--spacing-4, 16px) var(--spacing-5, 20px) var(--spacing-6, 24px);
}
/* Safety: never show app chrome if common.js ran before embed guard */
body.cr-embed-body .injected-global-topbar,
body.cr-embed-body .injected-sidebar,
body.cr-embed-body #injectedSidebar,
body.cr-embed-body .env-dev-banner,
body.cr-embed-body .ds-page-head {
  display: none !important;
}
body.cr-embed-body .injected-page-content {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
body.cr-embed-body h2,
body.cr-embed-body .section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-4, 16px);
  letter-spacing: -0.01em;
}
body.cr-embed-body h2:not(:first-child),
body.cr-embed-body .section-title:not(:first-child) {
  margin-top: var(--spacing-6, 24px);
}
body.cr-embed-body .content-section {
  margin-bottom: var(--spacing-5, 20px);
}
body.cr-embed-body .scroll,
body.cr-embed-body .table-container {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-card, rgba(15, 23, 42, 0.6));
  margin-bottom: var(--spacing-4, 16px);
}
body.cr-embed-body .data-table {
  width: 100%;
}
/* Exchange rate configs — clean read-only rows + one expandable edit panel */
.er-configs-table-wrap {
  margin-bottom: var(--spacing-5, 20px);
}
.er-configs-table th {
  white-space: nowrap;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.er-config-row td {
  vertical-align: middle;
}
.er-config-row.is-editing td {
  background: color-mix(in srgb, var(--color-accent, #60a5fa) 8%, transparent);
}
.er-config-actions-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.er-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.er-status-pill--active {
  color: #86efac;
  background: color-mix(in srgb, #22c55e 18%, transparent);
  border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
}
.er-status-pill--inactive {
  color: var(--color-text-secondary);
  background: var(--color-bg-elevated, rgba(30, 41, 59, 0.5));
  border: 1px solid var(--color-border);
}
.er-config-edit-row > td {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.er-config-edit-row.is-open > td {
  padding-bottom: 0.75rem !important;
}
.er-config-edit-panel {
  margin: 0.35rem 0 0.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--color-bg-elevated, rgba(30, 41, 59, 0.65));
  border: 1px solid color-mix(in srgb, var(--color-accent, #60a5fa) 35%, var(--color-border));
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.er-config-edit-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.er-config-edit-panel__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.er-config-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem 1rem;
  align-items: end;
}
.er-config-edit-grid__priority {
  max-width: 120px;
}
.er-config-edit-grid__active {
  align-self: end;
}
.er-config-active-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  cursor: pointer;
  font-weight: 500;
}
.er-config-edit-grid__actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .er-config-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .er-config-edit-grid__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}
@media (max-width: 560px) {
  .er-config-edit-grid {
    grid-template-columns: 1fr;
  }
  .er-config-edit-grid__priority {
    max-width: none;
  }
}
body.cr-embed-body .er-configs-table-wrap {
  margin-bottom: var(--spacing-5, 20px);
}
body.cr-embed-body .mapping-form,
body.cr-embed-body .edit-mapping-form {
  background: var(--color-bg-elevated, rgba(30, 41, 59, 0.5));
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--spacing-4, 16px);
  margin-top: var(--spacing-2, 8px);
}
body.cr-embed-body .mapping-form input,
body.cr-embed-body .mapping-form select,
body.cr-embed-body .edit-mapping-form input,
body.cr-embed-body .edit-mapping-form select {
  width: 100%;
  max-width: 280px;
}
body.cr-embed-body .filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-4, 16px);
  align-items: end;
}
body.cr-embed-body .view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2, 8px);
  margin-bottom: var(--spacing-4, 16px);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--spacing-2, 8px);
}
body.cr-embed-body .view-tab {
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-secondary);
  border: 1px solid transparent;
}
body.cr-embed-body .view-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
}
body.cr-embed-body .view-tab.active {
  color: var(--color-text-primary);
  background: var(--color-bg-elevated, rgba(30, 41, 59, 0.6));
  border-color: var(--color-border);
}
body.cr-embed-body code {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 0.9em;
  color: var(--color-accent, #60a5fa);
}
.cr-embed-panel {
  min-height: 100%;
}
.cr-embed-panel-body {
  padding: 0;
}
body.client-mr-body-lock .cr-mr-filter-toolbar-row .cr-mr-filter-dates {
  justify-content: flex-start;
}
body.client-mr-body-lock .cr-mr-page-header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}
body.client-mr-body-lock .page-card.cr-reporting-page .cr-reporting-page-header .cr-reporting-generate-btn {
  margin-left: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-strong) !important;
}
body.client-mr-body-lock .page-card.cr-reporting-page .cr-reporting-page-header .page-title {
  margin-bottom: 0;
}
body.client-mr-body-lock .page-card.cr-reporting-page .cr-reporting-page-header {
  align-items: stretch;
}
.cr-mr-top-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: var(--spacing-6);
  padding-bottom: var(--spacing-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cr-mr-context-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.cr-mr-toolbar-label {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.cr-mr-select,
.cr-mr-month-input {
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #f4f4f5;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  min-width: 12rem;
  box-sizing: border-box;
}
.cr-mr-month-input {
  min-width: 10rem;
}
.cr-mr-save-btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--color-border-strong);
  background: var(--btn-surface);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.cr-mr-save-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.cr-mr-save-btn:not(:disabled):hover {
  background: var(--btn-surface-hover);
}
.cr-mr-toolbar-divider {
  width: 1px;
  height: 28px;
  background: var(--color-border);
  margin: 0 4px;
}
.cr-mr-filter-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  flex: 1 1 auto;
}
.cr-expected-section {
  margin-bottom: var(--spacing-10);
}
.cr-expected-table-wrap {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.cr-expected-table thead th {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--color-text-tertiary) !important;
  border-bottom: 1px solid var(--tbl-divider) !important;
  background: transparent !important;
}
.cr-expected-th-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cr-expected-pencil {
  flex-shrink: 0;
  opacity: 0.45;
  color: var(--color-text-tertiary);
}
.cr-expected-cat-cell {
  font-size: 14px;
  color: var(--color-text-primary);
  font-weight: 500;
}
.cr-expected-input {
  width: 100%;
  max-width: 12rem;
  box-sizing: border-box;
  padding: 6px 4px;
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  border-radius: 6px;
  outline: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.cr-expected-input:hover {
  background: var(--color-bg-hover);
}
.cr-expected-input:focus {
  background: var(--color-surface-2);
  box-shadow: inset 0 -1px 0 var(--color-border-strong);
}
.cr-expected-empty {
  color: var(--color-text-tertiary);
  font-size: 14px;
  padding: 12px 0 !important;
}
body.client-mr-body-lock .cr-client-reports-table:not(.cr-cmr-card-table) thead th,
body.client-mr-body-lock .cr-data-collection-table thead th {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-dark) !important;
  background: var(--tbl-header-bg) !important;
}
body.client-mr-body-lock .cr-client-reports-table:not(.cr-cmr-card-table) thead,
body.client-mr-body-lock .cr-data-collection-table thead {
  background: var(--tbl-header-bg) !important;
  border-bottom: 1px solid var(--tbl-divider) !important;
}
body.client-mr-body-lock .cr-client-reports-table:not(.cr-cmr-card-table) tbody tr {
  border-bottom: 1px solid var(--tbl-divider);
}
body.client-mr-body-lock .cr-client-reports-table:not(.cr-cmr-card-table) tbody tr:last-child {
  border-bottom: none;
}
body.client-mr-body-lock .scroll-container.cr-reports-table-wrap {
  margin-top: 0;
  padding: 16px 18px 20px;
  background: color-mix(in srgb, var(--ds-surface, rgba(18, 42, 78, 0.52)) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-border) 48%, rgba(145, 184, 209, 0.4) 52%);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 10%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-soft, #38bdf8) 20%, transparent),
    0 22px 56px -16px color-mix(in srgb, var(--sidebar-dark) 52%, transparent),
    0 0 72px -10px color-mix(in srgb, var(--accent-soft) 28%, transparent);
  backdrop-filter: blur(var(--ds-glass-blur, 22px)) saturate(var(--ds-glass-saturate, 118%));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur, 22px)) saturate(var(--ds-glass-saturate, 118%));
  box-sizing: border-box;
}
body.client-mr-body-lock .cr-client-reports-table.cr-cmr-card-table thead {
  background: color-mix(in srgb, var(--tbl-header-bg) 72%, transparent) !important;
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  border-bottom: 1px solid color-mix(in srgb, var(--tbl-divider) 80%, transparent) !important;
}
body.client-mr-body-lock .cr-client-reports-table.cr-cmr-card-table thead th {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--ds-text-secondary, color-mix(in srgb, var(--text-dark) 62%, transparent)) !important;
  background: transparent !important;
  padding: 10px 14px 12px !important;
  border-bottom: none !important;
}
body.client-mr-body-lock .cr-cmr-card-table tbody tr {
  background: color-mix(in srgb, var(--ds-surface) 68%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-border) 80%, var(--accent-soft) 20%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 8%, transparent),
    0 6px 20px -10px color-mix(in srgb, #000 50%, transparent);
}
body.client-mr-body-lock .cr-cmr-card-table tbody tr:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-soft) 38%, var(--ds-border) 62%);
  box-shadow:
    0 14px 32px -12px color-mix(in srgb, var(--accent-soft) 32%, transparent),
    0 8px 24px -14px color-mix(in srgb, #000 45%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 10%, transparent);
}
[data-theme="light"] body.client-mr-body-lock .scroll-container.cr-reports-table-wrap {
  background: color-mix(in srgb, #ffffff 92%, var(--accent-soft) 8%);
  border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
  box-shadow:
    var(--ds-card-shadow, 0 12px 28px -8px rgba(0, 0, 0, 0.12)),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] body.client-mr-body-lock .cr-cmr-card-table tbody tr {
  background: color-mix(in srgb, #fff 96%, var(--accent-soft) 4%);
  border-color: var(--color-border);
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.08);
}
body.client-mr-body-lock .cr-data-collection-table tbody td {
  color: var(--tbl-text) !important;
}

body.client-mr-body-lock .cr-data-collection-table tbody td.date-cell {
  color: var(--tbl-text-sec) !important;
}

body.client-mr-body-lock .cr-data-collection-table tbody tr:hover td,
body.client-mr-body-lock .cr-data-collection-table tbody tr:hover th {
  color: var(--tbl-text) !important;
}

body.client-mr-body-lock .cr-data-collection-table tbody tr:hover td.date-cell {
  color: var(--tbl-text-sec) !important;
}
body.client-mr-body-lock .cr-data-collection-table tbody tr {
  border-bottom: 1px solid var(--tbl-divider);
}
body.client-mr-body-lock .cr-data-collection-table tbody tr:last-child {
  border-bottom: none;
}
[data-theme="light"] body.client-mr-body-lock {
  background: var(--ds-app-canvas) !important;
}
[data-theme="light"] body.client-mr-body-lock .cr-mr-btn-outline,
[data-theme="light"] body.client-mr-body-lock .page-card.cr-reporting-page .cr-reporting-generate-btn {
  background: transparent !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--color-border-strong) !important;
  box-shadow: none !important;
}
[data-theme="light"] body.client-mr-body-lock .cr-mr-btn-outline:hover,
[data-theme="light"] body.client-mr-body-lock .page-card.cr-reporting-page .cr-reporting-generate-btn:hover {
  background: var(--color-bg-hover) !important;
  border-color: var(--color-border-strong) !important;
}
[data-theme="light"] .cr-mr-toolbar-label {
  color: var(--color-text-secondary);
}
[data-theme="light"] .cr-mr-select,
[data-theme="light"] .cr-mr-month-input {
  background: var(--color-surface-1);
  border-color: var(--color-border);
  color: var(--text-dark);
}
[data-theme="light"] .cr-mr-save-btn {
  background: var(--color-surface-1);
  border-color: var(--color-border);
  color: var(--text-dark);
}
[data-theme="light"] .cr-expected-input {
  color: var(--text-dark);
}
[data-theme="light"] .cr-expected-input:focus {
  background: var(--color-surface-2);
}
.cr-reporting-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 0 var(--spacing-6);
  padding: 0;
  border-radius: var(--control-radius);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.cr-reporting-back:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
[data-theme="light"] .cr-reporting-back:hover {
  background: var(--color-bg-hover);
}
.cr-reporting-back-icon {
  display: block;
  flex-shrink: 0;
}
.page-card.cr-reporting-page .content-section .section-title {
  margin-left: 0;
  margin-right: 0;
}
.page-card.cr-reporting-page .scroll-container {
  margin-left: 0;
  margin-right: 0;
}
.page-card.cr-reporting-page .content-section {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.page-card.cr-reporting-page .content-section + .content-section {
  margin-top: var(--spacing-10);
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-border);
}
.page-card.cr-reporting-page .cr-reports-table-block + .cr-data-collection-section {
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-10);
  border-top: 1px solid var(--color-border);
}
.page-card.cr-reporting-page .cr-data-collection-section .cr-reports-section-title {
  text-align: left;
  margin-bottom: var(--spacing-5) !important;
}
.page-card.cr-reporting-page .scroll-container.cr-data-collection-table-wrap {
  margin-left: 0;
  margin-right: 0;
  border-radius: 12px;
  border: 1px solid var(--cr-report-border, rgba(255, 255, 255, 0.1));
  background: transparent;
}
.page-card.cr-reporting-page .cr-data-collection-table thead {
  background: var(--tbl-header-bg) !important;
  border-bottom: 1px solid var(--tbl-header-rule) !important;
}
.page-card.cr-reporting-page .cr-data-collection-table thead th {
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  color: #a1a1aa !important;
  border-bottom: none !important;
}
[data-theme="light"] .page-card.cr-reporting-page .cr-reports-table-block + .cr-data-collection-section {
  border-top-color: rgba(15, 23, 42, 0.1);
}
[data-theme="light"] .page-card.cr-reporting-page .scroll-container.cr-data-collection-table-wrap {
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
}
[data-theme="light"] .page-card.cr-reporting-page .cr-data-collection-table thead {
  background: var(--tbl-header-bg) !important;
  border-bottom: 1px solid var(--tbl-header-rule) !important;
}
[data-theme="light"] .page-card.cr-reporting-page .cr-data-collection-table thead th {
  color: #64748b !important;
  border-bottom: none !important;
}
[data-theme="light"] .page-card.cr-reporting-page .cr-data-collection-table tbody tr:hover {
  background: var(--tbl-hover-bg) !important;
  box-shadow: none;
}
[data-theme="light"] .page-card.cr-reporting-page .content-section + .content-section {
  border-top-color: var(--color-border);
}
.cr-reports-section-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--spacing-3);
}
.cr-reports-section-head--title-only {
  margin-bottom: var(--spacing-2);
}
body.client-mr-body-lock .cr-reports-section-title--mr {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  text-transform: none;
}
[data-theme="light"] body.client-mr-body-lock .cr-reports-section-title--mr {
  color: #0f172a;
}
body.client-mr-body-lock .cr-reports-table-block .cr-reports-table-search--flat {
  margin-top: 0;
  margin-bottom: 14px;
  max-width: none;
  width: 100%;
  align-self: stretch;
  padding: 11px 15px;
  background: color-mix(in srgb, var(--ds-surface) 45%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--ds-border) 55%, rgba(145, 184, 209, 0.28) 45%) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-light) 8%, transparent);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}
body.client-mr-body-lock .cr-reports-table-block .cr-reports-table-search--flat:focus-within {
  border-color: color-mix(in srgb, var(--accent-soft) 45%, var(--ds-border) 55%) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-soft) 25%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 10%, transparent);
}
body.client-mr-body-lock .cr-reports-table-block .cr-reports-table-search--flat .cr-reports-search-input {
  font-size: 15px;
}
body.client-mr-body-lock .cr-reports-table-block {
  gap: 0;
  margin-top: var(--spacing-2);
}
body.client-mr-body-lock .cr-reports-section-head--title-only {
  margin-bottom: 10px;
}
body.client-mr-body-lock .cr-mr-filter-dates .cr-reports-filter-label-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--ds-text-secondary, var(--text-dark));
}
body.client-mr-body-lock .page-card.cr-reporting-page .content-section + .content-section {
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-5);
}
body.client-mr-body-lock .scroll-container.cr-data-collection-table-wrap {
  padding: 14px 16px 18px;
  background: color-mix(in srgb, var(--ds-surface) 52%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-border) 50%, rgba(145, 184, 209, 0.32) 50%);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 8%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-soft) 16%, transparent),
    0 18px 48px -16px color-mix(in srgb, var(--sidebar-dark) 48%, transparent);
  backdrop-filter: blur(20px) saturate(118%);
  -webkit-backdrop-filter: blur(20px) saturate(118%);
  box-sizing: border-box;
}
[data-theme="light"] body.client-mr-body-lock .scroll-container.cr-data-collection-table-wrap {
  background: color-mix(in srgb, #fff 94%, var(--accent-soft) 6%);
}
body.client-mr-body-lock .cr-client-reports-table tbody td.cr-mr-row-text {
  font-family: 'Inter', var(--font-primary), system-ui, -apple-system, sans-serif;
  font-size: 15px !important;
  line-height: 1.5;
  font-weight: 500;
  color: var(--tbl-text) !important;
}
body.client-mr-body-lock .cr-client-reports-table tbody td.period-cell.cr-mr-row-text {
  color: var(--tbl-text-sec) !important;
  font-weight: 450;
}
body.client-mr-body-lock .cr-download-pair {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
body.client-mr-body-lock .cr-download-link {
  font-family: 'Inter', var(--font-primary), system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-soft, var(--tbl-text-sec));
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
body.client-mr-body-lock .cr-download-link:hover {
  color: var(--tbl-text);
  border-bottom-color: var(--tbl-divider-md);
}
body.client-mr-body-lock .cr-genat-text {
  font-size: 13px;
}
body.client-mr-body-lock .cr-data-collection-section .cr-reports-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 14px !important;
}
body.client-mr-body-lock .cr-reports-actions-cell {
  white-space: nowrap;
}
body.client-mr-body-lock .btn-cr-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
body.client-mr-body-lock .btn-cr-delete:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.6);
}
body.client-mr-body-lock .btn-cr-delete--blocked {
  opacity: 0.85;
  cursor: not-allowed;
}
body.client-mr-body-lock .btn-cr-delete--blocked:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
}
body.client-mr-body-lock .tr-report-delete-form {
  display: inline;
  margin: 0;
}
body.client-mr-body-lock .cr-download-na {
  font-size: 13px;
  color: var(--color-text-disabled);
  cursor: default;
  user-select: none;
}
body.client-mr-body-lock .cr-report-locked-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 9px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  vertical-align: middle;
  white-space: nowrap;
}
body.client-mr-body-lock .cr-lock-cell-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
body.client-mr-body-lock .cr-report-lock-form {
  display: inline;
  margin: 0;
}
body.client-mr-body-lock .cr-lock-btn {
  font-family: 'Inter', var(--font-primary), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--color-border-strong);
  background: var(--btn-surface);
  color: var(--color-text-primary);
  transition: background 0.15s ease, border-color 0.15s ease;
}
body.client-mr-body-lock .cr-lock-btn--lock:hover {
  border-color: #fcd34d;
  background: color-mix(in srgb, #fef3c7 35%, var(--btn-surface));
}
body.client-mr-body-lock .cr-lock-btn--unlock {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border-strong));
}
body.client-mr-body-lock .cr-lock-btn--unlock:hover {
  background: var(--color-bg-hover);
}
[data-theme="light"] body.client-mr-body-lock .cr-report-locked-badge {
  background: #fffbeb;
  color: #b45309;
  border-color: #fcd34d;
}
[data-theme="light"] body.client-mr-body-lock .cr-download-link {
  color: var(--color-text-secondary);
}
[data-theme="light"] body.client-mr-body-lock .cr-download-link:hover {
  color: var(--text-dark);
  border-bottom-color: var(--color-border-strong);
}
.cr-reports-section-head--centered {
  justify-content: center;
  text-align: center;
}
.cr-reports-section-head--centered .cr-reports-section-title {
  flex: none;
  width: 100%;
}
.cr-reports-section-title {
  margin: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
}
.page-card.cr-reporting-page .cr-reports-section-head .cr-reports-section-title {
  text-align: left;
}
/* Full-width search below section heading */
.cr-reports-table-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 var(--spacing-4);
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: var(--control-radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cr-reports-table-search:focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}
.cr-reports-search-icon {
  flex-shrink: 0;
  color: rgba(148, 163, 184, 0.85);
}
.cr-reports-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 14px;
  outline: none;
}
.cr-reports-search-input::placeholder {
  color: rgba(148, 163, 184, 0.65);
}
[data-theme="light"] .cr-reports-table-search {
  background: #fff;
  border-color: var(--color-border);
}
[data-theme="light"] .cr-reports-search-input::placeholder {
  color: var(--color-text-muted);
}
/* Ghost search: no panel; minimal chrome on body surface */
.page-card.cr-reporting-page .cr-reports-table-search--flat {
  background: transparent !important;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  box-shadow: none !important;
  padding: 6px 2px 10px;
  margin: 0 0 var(--spacing-4);
  max-width: 22rem;
  align-self: flex-start;
}
.page-card.cr-reporting-page .cr-reports-table-search--flat:focus-within {
  box-shadow: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.page-card.cr-reporting-page .cr-reports-table-search--flat .cr-reports-search-input {
  background: transparent !important;
  border: none !important;
  border-radius: 6px;
  padding: 4px 2px;
}
.page-card.cr-reporting-page .cr-reports-table-search--flat:focus-within .cr-reports-search-input {
  outline: 1px solid rgba(255, 255, 255, 0.08);
  outline-offset: 2px;
}
[data-theme="light"] .page-card.cr-reporting-page .cr-reports-table-search--flat {
  border-bottom-color: rgba(15, 23, 42, 0.1);
}
[data-theme="light"] .page-card.cr-reporting-page .cr-reports-table-search--flat:focus-within {
  border-bottom-color: rgba(15, 23, 42, 0.18);
}
[data-theme="light"] .page-card.cr-reporting-page .cr-reports-table-search--flat:focus-within .cr-reports-search-input {
  outline-color: rgba(15, 23, 42, 0.12);
}
.page-card.cr-reporting-page .scroll-container.cr-reports-table-wrap {
  border-radius: 12px;
  border: 1px solid var(--cr-report-border, rgba(255, 255, 255, 0.1));
  background: transparent;
}
[data-theme="light"] .page-card.cr-reporting-page .scroll-container.cr-reports-table-wrap {
  border-color: var(--color-border);
  background: #fff;
}
.page-card.cr-reporting-page .cr-reports-filter-toolbar + .cr-reports-table-block {
  margin-top: var(--spacing-6);
}
.page-card.cr-reporting-page .cr-reports-table-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.cr-metric-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #1e1e1e;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.cr-metric-ribbon-seg {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 18px 12px;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  box-shadow: none;
  transition: background-color 0.15s ease;
}
.cr-metric-ribbon-seg:last-child {
  border-right: none;
}
.cr-metric-ribbon-seg:hover {
  background-color: rgba(255, 255, 255, 0.04);
}
.cr-metric-ribbon-seg:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.28);
  outline-offset: -2px;
  z-index: 1;
}
.cr-metric-ribbon-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(203, 213, 225, 0.62);
  line-height: 1.2;
}
.cr-metric-ribbon-value-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.cr-metric-ribbon-value {
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.cr-metric-ribbon-pencil {
  flex-shrink: 0;
  opacity: 0.5;
  color: rgba(226, 232, 240, 0.85);
}
.cr-metric-ribbon-seg:hover .cr-metric-ribbon-pencil {
  opacity: 0.85;
}
.cr-metric-ribbon-subvalue {
  display: block;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(203, 213, 225, 0.85);
  margin-top: 4px;
  line-height: 1.2;
}

[data-theme="light"] .cr-metric-ribbon {
  background: #f1f5f9;
}
[data-theme="light"] .cr-metric-ribbon-seg {
  border-right-color: rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .cr-metric-ribbon-label {
  color: var(--color-text-secondary);
}
[data-theme="light"] .cr-metric-ribbon-value {
  color: var(--color-text-primary);
}
[data-theme="light"] .cr-metric-ribbon-subvalue {
  color: var(--color-text-secondary);
}
[data-theme="light"] .cr-metric-ribbon-pencil {
  color: var(--color-text-secondary);
}

/* Client reports table — date filter (Daily BaFin–style, charcoal) */
.cr-reports-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 18px;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-sizing: border-box;
}
.page-card.cr-reporting-page .cr-reports-filter-toolbar,
.page-card.cr-reporting-page .cr-reports-control-bar {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 14px;
  margin-bottom: var(--spacing-4);
  padding: 4px 0 12px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  box-sizing: border-box;
}
.page-card.cr-reporting-page .cr-reports-filter-main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  flex: 1 1 auto;
  min-width: 0;
}
.page-card.cr-reporting-page .cr-reports-filter-export {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: auto;
}
.btn.cr-delete-all-reports {
  background: transparent !important;
  color: rgba(248, 113, 113, 0.95) !important;
  border: 1px solid rgba(239, 68, 68, 0.42) !important;
  font-weight: 600;
  box-shadow: none !important;
}
.btn.cr-delete-all-reports:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.55) !important;
  color: #fecaca !important;
}
[data-theme="light"] .btn.cr-delete-all-reports {
  color: #b91c1c !important;
  border-color: rgba(185, 28, 28, 0.35) !important;
}
[data-theme="light"] .btn.cr-delete-all-reports:hover {
  background: rgba(254, 226, 226, 0.6) !important;
}
.cr-reports-actions-cell .cr-report-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 4px;
  padding: 0;
  border-radius: 8px;
  color: rgba(226, 232, 240, 0.88);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  vertical-align: middle;
}
.cr-reports-actions-cell .cr-report-action:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-accent-light);
}
.cr-reports-actions-cell .cr-report-action svg {
  display: block;
}
.cr-reports-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 600;
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.cr-reports-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(203, 213, 225, 0.35);
  color: #f9fafb;
}
.cr-reports-toolbar-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.cr-reports-toolbar-btn--ghost {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(226, 232, 240, 0.82);
}
.cr-reports-toolbar-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f3f4f6;
}
[data-theme="light"] .page-card.cr-reporting-page .cr-reports-toolbar-btn {
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(148, 163, 184, 0.35);
}
[data-theme="light"] .page-card.cr-reporting-page .cr-reports-toolbar-btn--ghost {
  color: rgba(241, 245, 249, 0.9);
  background: transparent;
  border-color: rgba(148, 163, 184, 0.3);
}
.cr-reports-filter-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.75);
  min-width: 0;
}
.cr-reports-filter-label-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.85);
}
.cr-reports-date-wrap {
  display: flex;
  align-items: center;
  min-width: 158px;
  max-width: 100%;
  padding: 2px 4px 2px 12px;
  box-sizing: border-box;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--control-radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cr-reports-date-wrap:focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}
.page-card.cr-reporting-page .cr-reports-date-wrap {
  background: var(--ds-surface-muted);
  border: 1px solid var(--ds-border-md);
}
.page-card.cr-reporting-page .cr-reports-date-wrap:focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}
[data-theme="light"] .page-card.cr-reporting-page .cr-reports-date-wrap {
  background: var(--ds-surface-muted);
  border-color: var(--ds-border-md);
}
.cr-reports-date-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 4px 8px 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.15s;
}
.cr-reports-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.75;
  filter: invert(0.85);
}
.cr-reports-date-input:focus {
  outline: none;
}
[data-theme="light"] .cr-reports-date-input {
  color: var(--color-text-primary);
}
[data-theme="light"] .cr-reports-date-input::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 1;
}

/* `<select class="cr-reports-date-input">` — list options readable; native menu follows color-scheme */
select.cr-reports-date-input {
  cursor: pointer;
  padding-right: 8px;
  background-color: transparent !important;
  color: var(--color-text-primary) !important;
}

select.cr-reports-date-input option {
  background-color: var(--ds-surface);
  color: var(--color-text-primary);
}

[data-theme="light"] select.cr-reports-date-input option {
  background-color: #fff;
  color: #0f172a;
}
/* Client reports table — brighter dark header (default); MR page overrides below */
.cr-client-reports-table thead {
  background: #252539 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.cr-client-reports-table thead th {
  color: rgba(148, 163, 184, 0.95) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
body.client-mr-body-lock .cr-client-reports-table thead {
  background: #1c1c1f !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body.client-mr-body-lock .cr-client-reports-table thead th {
  font-size: 12px !important;
  color: #a1a1aa !important;
}
.page-card.cr-reporting-page .cr-client-reports-table thead th:first-child,
.page-card.cr-reporting-page .cr-client-reports-table tbody td:first-child {
  padding-left: 18px;
}
.page-card.cr-reporting-page .cr-client-reports-table thead th:last-child,
.page-card.cr-reporting-page .cr-client-reports-table tbody td:last-child {
  padding-right: 18px;
}
.page-card.cr-reporting-page .cr-client-reports-table tbody tr:nth-child(even) {
  background: var(--tbl-row-alt) !important;
}
.cr-client-reports-table tbody tr:hover {
  background: var(--tbl-hover-bg) !important;
  box-shadow: none;
}
.page-card.cr-reporting-page .cr-data-collection-table tbody tr:nth-child(even) {
  background: var(--tbl-row-alt) !important;
}
.page-card.cr-reporting-page .cr-data-collection-table tbody tr:hover {
  background: var(--tbl-hover-bg) !important;
  box-shadow: none;
}
.page-card.cr-reporting-page .data-table th.sort-active {
  color: rgba(248, 250, 252, 0.95) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="light"] .page-card.cr-reporting-page .data-table th.sort-active {
  color: var(--color-text-primary) !important;
  background: rgba(15, 23, 42, 0.06) !important;
}
.cr-client-reports-table .cr-reports-cell-primary {
  color: var(--tbl-text) !important;
  font-weight: 500;
}
.cr-client-reports-table .size-cell,
.cr-client-reports-table .date-cell {
  color: var(--tbl-text-sec) !important;
  font-weight: 400;
}
.cr-client-reports-table th.cr-reports-col-actions,
.cr-client-reports-table th.cr-reports-col-download {
  text-align: right !important;
}
.cr-reports-actions-cell {
  vertical-align: middle;
  text-align: right;
}
.cr-reports-actions-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: nowrap;
}
.cr-report-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 11px;
  box-sizing: border-box;
  border-radius: 6px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.cr-report-badge__icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.cr-report-badge--excel {
  border-color: color-mix(in srgb, var(--file-type-excel) 38%, transparent);
}
.cr-report-badge--excel .cr-report-badge__label {
  color: var(--file-type-excel-bright);
}
.cr-report-badge--excel .cr-report-badge__icon {
  color: var(--file-type-excel-bright);
}
.cr-report-badge--pdf {
  border-color: color-mix(in srgb, var(--file-type-pdf) 38%, transparent);
}
.cr-report-badge--pdf .cr-report-badge__label {
  color: var(--file-type-pdf-bright);
}
.cr-report-badge--pdf .cr-report-badge__icon {
  color: var(--file-type-pdf-bright);
}
.cr-report-badge--gz {
  border-color: var(--color-border-strong);
}
.cr-report-badge--gz .cr-report-badge__label {
  color: var(--color-text-tertiary);
}
.cr-report-badge--gz .cr-report-badge__icon {
  color: var(--color-accent);
}
.cr-report-badge--errors {
  border-color: rgba(251, 191, 36, 0.4);
}
.cr-report-badge--errors .cr-report-badge__label {
  color: #fbbf24;
}
.cr-report-badge--errors .cr-report-badge__icon {
  color: #fcd34d;
}
.cr-report-badge.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.cr-report-badge.is-disabled:hover {
  background: inherit;
  border-color: inherit;
  box-shadow: none;
  transform: none;
}
.cr-report-badge:hover {
  background: rgba(255, 255, 255, 0.08);
}
.cr-report-badge--excel:hover {
  background: color-mix(in srgb, var(--file-type-excel) 16%, transparent);
  border-color: color-mix(in srgb, var(--file-type-excel) 48%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--file-type-excel) 20%, transparent);
}
.cr-report-badge--pdf:hover {
  background: color-mix(in srgb, var(--file-type-pdf) 14%, transparent);
  border-color: color-mix(in srgb, var(--file-type-pdf) 48%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--file-type-pdf) 18%, transparent);
}
.cr-report-badge--gz:hover {
  background: rgba(147, 197, 253, 0.12);
  border-color: rgba(147, 197, 253, 0.45);
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.15);
}
.cr-report-badge--errors:hover {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.15);
}
.cr-report-badge:active {
  transform: scale(0.95);
}
.cr-report-badge:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}
/* Instant floating tooltip (CSS only) */
.cr-report-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  color: #f8fafc;
  background: rgba(18, 18, 18, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 60;
  transition: opacity 0s linear, visibility 0s linear;
}
.cr-report-badge:hover::after,
.cr-report-badge:focus-visible::after {
  opacity: 1;
  visibility: visible;
}
.page-card.cr-reporting-page .cr-reports-toolbar-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}
.page-card.cr-reporting-page #cr-reports-filter-apply {
  background: #22c55e !important;
  border: 1px solid #15803d !important;
  color: #ffffff !important;
}
.page-card.cr-reporting-page #cr-reports-filter-apply:hover {
  background: #16a34a !important;
  border-color: #14532d !important;
  color: #ffffff !important;
}
.page-card.cr-reporting-page #cr-reports-filter-clear {
  background: transparent !important;
  border: 1px solid #ef4444 !important;
  color: #fca5a5 !important;
}
.page-card.cr-reporting-page #cr-reports-filter-clear:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: #f87171 !important;
  color: #fecaca !important;
}
.page-card.cr-reporting-page .cr-reporting-generate-btn {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .page-card.cr-reporting-page .cr-reporting-generate-btn {
  box-shadow: none;
}
.cr-reports-delete-form {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}
.cr-reports-row-delete {
  padding: 4px 10px;
  font-size: 12px;
}
[data-theme="light"] .cr-client-reports-table thead {
  background: var(--tbl-header-bg) !important;
  border-bottom: 1px solid var(--tbl-header-rule) !important;
}
[data-theme="light"] .cr-client-reports-table thead th {
  color: #64748b !important;
}
[data-theme="light"] .cr-client-reports-table tbody tr:hover {
  background: var(--tbl-hover-bg) !important;
  box-shadow: none;
}
[data-theme="light"] .cr-reports-filter-toolbar {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .page-card.cr-reporting-page .cr-reports-filter-toolbar,
[data-theme="light"] .page-card.cr-reporting-page .cr-reports-control-bar {
  background: transparent;
  border: none;
}
[data-theme="light"] .page-card.cr-reporting-page #cr-reports-filter-apply {
  background: #16a34a !important;
  border: 1px solid #15803d !important;
  color: #ffffff !important;
}
[data-theme="light"] .page-card.cr-reporting-page #cr-reports-filter-apply:hover {
  background: #15803d !important;
  border-color: #166534 !important;
  color: #ffffff !important;
}
[data-theme="light"] .page-card.cr-reporting-page #cr-reports-filter-clear {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
}
[data-theme="light"] .page-card.cr-reporting-page #cr-reports-filter-clear:hover {
  background: rgba(220, 38, 38, 0.12) !important;
  border-color: #b91c1c !important;
  color: #991b1b !important;
}
[data-theme="light"] .page-card.cr-reporting-page .scroll-container.cr-reports-table-wrap {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}
[data-theme="light"] .cr-report-badge {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="light"] .cr-report-badge::after {
  background: rgba(26, 26, 26, 0.98);
  border-color: rgba(0, 0, 0, 0.2);
  color: #f8fafc;
}
[data-theme="light"] .cr-reports-filter-label {
  color: var(--color-text-secondary);
}
[data-theme="light"] .page-card.cr-reporting-page .cr-reports-filter-label-text {
  color: #64748b;
}

/* Transaction Reporting — unified generation toolbar + upload */
.tr-bafin-section-heading {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.tr-bafin-section-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.tr-gen-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tr-gen-toolbar {
  background: var(--color-surface-2, #141a22);
  border: 1px solid var(--color-border);
  border-radius: var(--control-radius);
  padding: 14px 18px;
  margin-bottom: 1.75rem;
  box-sizing: border-box;
}

/* Transaction Reporting — single-row: mode, dates, generate, exports */
.bafin-reporting-page.bafin-reports-theme-lock .tr-gen-toolbar.tr-action-bar {
  background: var(--ds-app-canvas);
  border: 1px solid var(--ds-border);
  border-radius: var(--control-radius);
  padding: 14px 18px;
}

.bafin-reporting-page.bafin-reports-theme-lock .tr-action-bar__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.bafin-reporting-page.bafin-reports-theme-lock .tr-action-field {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
}

.bafin-reporting-page.bafin-reports-theme-lock .tr-action-field--dates {
  flex: 1 1 280px;
  min-width: min(100%, 320px);
}

.bafin-reporting-page.bafin-reports-theme-lock .tr-action-field--dates .tr-gen-inputs-slot {
  flex: 1 1 auto;
  min-width: 0;
}


.bafin-reporting-page.bafin-reports-theme-lock .tr-action-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  line-height: 1;
}

.bafin-reporting-page.bafin-reports-theme-lock .tr-action-bar__exports--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  margin-top: 0;
  padding: 0;
  border: 0;
}

@media screen and (max-width: 960px) {
  .bafin-reporting-page.bafin-reports-theme-lock .tr-action-bar__exports--inline {
    margin-left: 0;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media screen and (max-width: 720px) {
  .bafin-reporting-page.bafin-reports-theme-lock .tr-action-field--generate {
    width: 100%;
  }
  .bafin-reporting-page.bafin-reports-theme-lock .tr-action-field--generate .tr-gen-toolbar-submit {
    width: 100%;
  }
}

.tr-gen-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}

.tr-gen-toolbar-row--balanced {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 12px;
}

.tr-gen-toolbar-row--balanced .tr-gen-left-cluster {
  flex: unset;
  min-width: 0;
  justify-self: start;
}

.tr-gen-toolbar-row--balanced .tr-gen-toolbar-submit {
  justify-self: center;
  margin-left: 0;
}

.tr-gen-toolbar-trail {
  min-width: 0;
}

@media screen and (max-width: 720px) {
  .tr-gen-toolbar-row--balanced {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .tr-gen-toolbar-row--balanced .tr-gen-toolbar-submit {
    justify-self: stretch;
    width: 100%;
  }
  .tr-gen-toolbar-trail {
    display: none;
  }
}

.tr-gen-left-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  flex: 1 1 220px;
  min-width: 0;
}

.tr-gen-segmented {
  display: inline-flex;
  border-radius: var(--control-radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-surface-1);
  flex-shrink: 0;
}

.tr-seg-btn {
  margin: 0;
  padding: 0 16px;
  height: 40px;
  box-sizing: border-box;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.tr-seg-btn + .tr-seg-btn {
  border-left: 1px solid var(--color-border);
}

.tr-seg-btn:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .tr-seg-btn:hover {
  background: rgba(15, 23, 42, 0.04);
}

.tr-seg-btn.active {
  background: var(--btn-surface);
  color: var(--btn-text-ui);
}

.tr-gen-inputs-slot {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  align-items: center;
}

.tr-gen-inline-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0;
  flex-wrap: wrap;
}

.tr-toolbar-control {
  height: 40px;
  box-sizing: border-box;
}

.tr-toolbar-date {
  width: auto;
  min-width: 9.5rem;
  max-width: 11rem;
  padding: 0 12px;
  margin: 0;
  background: var(--color-surface-1);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--control-radius);
  font-size: 14px;
  font-family: inherit;
  line-height: normal;
  transition: var(--control-transition);
}

.tr-toolbar-date:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.tr-gen-range-sep {
  color: var(--color-text-muted);
  font-size: 14px;
  user-select: none;
  line-height: 40px;
}

.tr-gen-toolbar-sep {
  width: 1px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 36px;
  max-height: 42px;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .tr-gen-toolbar-sep {
  background: rgba(15, 23, 42, 0.12);
}

.tr-gen-export-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.tr-gen-export-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin-right: 2px;
}

.tr-gen-toolbar-submit {
  flex-shrink: 0;
  margin-left: 0;
  padding-left: 22px;
  padding-right: 22px;
}

.tr-gen-toolbar .btn.btn-slate.tr-toolbar-control,
.tr-gen-toolbar .btn.btn-excel-export.tr-toolbar-control,
.tr-gen-toolbar .btn.btn-gz-export.tr-toolbar-control,
.tr-gen-admin-strip .btn.btn-slate.tr-toolbar-control,
.tr-upload-card .btn.btn-slate.tr-toolbar-control {
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}

.tr-gen-admin-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 18px;
  margin-bottom: 1.25rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-sizing: border-box;
}

.tr-gen-admin-strip-desc {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  flex: 1 1 220px;
}

.tr-gen-admin-form {
  margin: 0;
  display: flex;
  align-items: center;
}

.tr-upload-card {
  margin-bottom: 1.5rem;
}

.tr-gen-upload-form-horizontal {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: none;
}

.tr-toolbar-file {
  flex: 1 1 220px;
  min-height: 40px;
  max-width: 28rem;
  padding: 8px 12px;
  box-sizing: border-box;
}

[data-theme="light"] .tr-gen-toolbar,
[data-theme="light"] .tr-gen-admin-strip {
  background: #F1F5F9;
}

/* Transaction reporting + definition tables — shared sub-navigation */
.bafin-reporting-page .page-body,
.bafin-tables-page .page-body {
  padding-left: 0;
  padding-right: 0;
}

/* Sub-nav width when inside legacy page-body */
.bafin-reporting-page .page-body > .tabs-container.tr-page-subnav {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.tr-page-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 24px;
  padding: 0;
  background: var(--color-bg-card, var(--bg-card));
  border: 1px solid var(--color-border);
  border-radius: var(--control-radius);
  overflow: hidden;
}

.tr-page-subnav .tab-btn {
  flex: 0 0 auto;
  text-decoration: none;
  box-sizing: border-box;
  margin-bottom: 0;
  border-bottom: 3px solid transparent;
}

.tr-page-subnav a.tab-btn:hover {
  text-decoration: none;
}

/* BaFin page subnav — folder tabs (same surface tokens as data tables, flush tabs) */
.bafin-reporting-page .tr-page-subnav,
.bafin-tables-page .tr-page-subnav,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-page-subnav,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-page-subnav {
  --bafin-folder-surface: var(--tbl-surface);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0;
  margin-bottom: 0.75rem;
  padding: 0;
  background: var(--bafin-folder-surface);
  border: 1px solid var(--ds-card-border);
  border-radius: var(--tbl-radius);
  box-shadow:
    var(--ds-card-shadow),
    0 24px 60px -18px color-mix(in srgb, var(--sidebar-dark) 58%, transparent),
    0 10px 28px -12px color-mix(in srgb, var(--sidebar-dark) 45%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 6%, transparent);
  overflow: hidden;
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
}

.bafin-reporting-page .tr-page-subnav .tab-btn,
.bafin-tables-page .tr-page-subnav .tab-btn,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-page-subnav .tab-btn,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-page-subnav .tab-btn {
  flex: 0 0 auto;
  text-decoration: none;
  box-sizing: border-box;
  margin: 0 0 0 -1px;
  margin-bottom: -1px;
  padding: 10px 18px 11px;
  border: 1px solid color-mix(in srgb, var(--tbl-divider-md) 90%, transparent);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  /* Closed = plain darker folder surface so the active tab can carry the
     brighter accent-soft tint (see .active rule below). */
  background: var(--bafin-folder-surface);
  color: var(--text-light);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: inset 0 2px 5px color-mix(in srgb, #000 22%, transparent);
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    filter 0.2s ease,
    transform 0.2s ease;
}

.bafin-reporting-page .tr-page-subnav .tab-btn:first-child,
.bafin-tables-page .tr-page-subnav .tab-btn:first-child,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-page-subnav .tab-btn:first-child,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-page-subnav .tab-btn:first-child {
  margin-left: 0;
}

.bafin-reporting-page .tr-page-subnav .tab-btn:hover,
.bafin-tables-page .tr-page-subnav .tab-btn:hover,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-page-subnav .tab-btn:hover,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-page-subnav .tab-btn:hover {
  filter: brightness(1.06);
  border-color: color-mix(in srgb, var(--accent-soft) 28%, transparent);
  color: var(--text-light);
}

.bafin-reporting-page .tr-page-subnav .tab-btn.active,
.bafin-tables-page .tr-page-subnav .tab-btn.active,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-page-subnav .tab-btn.active,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-page-subnav .tab-btn.active {
  color: var(--tbl-text);
  /* Active = lighter accent-soft sheet, raised above the darker closed tabs. */
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--bafin-folder-surface) 42%);
  border-color: var(--ds-card-border);
  border-bottom-color: var(--bafin-folder-surface);
  filter: none;
  padding-top: 13px;
  padding-bottom: 13px;
  transform: translateY(-3px);
  border-radius: 16px 16px 0 0;
  box-shadow:
    0 -6px 18px -4px color-mix(in srgb, var(--sidebar-dark) 55%, transparent),
    0 10px 22px -12px color-mix(in srgb, var(--sidebar-dark) 65%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 14%, transparent);
}

[data-theme="light"] .bafin-reporting-page .tr-page-subnav .tab-btn:not(.active),
[data-theme="light"] .bafin-tables-page .tr-page-subnav .tab-btn:not(.active),
[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-page-subnav .tab-btn:not(.active),
[data-theme="light"] .page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-page-subnav .tab-btn:not(.active) {
  color: var(--text-light);
  box-shadow: inset 0 2px 5px color-mix(in srgb, #000 16%, transparent);
}

[data-theme="light"] .bafin-reporting-page .tr-page-subnav .tab-btn.active,
[data-theme="light"] .bafin-tables-page .tr-page-subnav .tab-btn.active,
[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-page-subnav .tab-btn.active,
[data-theme="light"] .page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-page-subnav .tab-btn.active {
  color: var(--tbl-text);
  box-shadow:
    0 -5px 16px -4px color-mix(in srgb, #0f172a 14%, transparent),
    0 8px 20px -12px color-mix(in srgb, #0f172a 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #f8fafc 70%, transparent);
}

/* -------------------------------------------------------------------------
   Folder-style top tabs (stacked “manila” rails) — TR + definition tables
   ------------------------------------------------------------------------- */
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs.tr-page-subnav,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs.tr-page-subnav {
  --tr-tab-active-surface: color-mix(in srgb, var(--ds-surface, rgba(18, 42, 78, 0.55)) 62%, transparent);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0;
  margin-bottom: 0.65rem;
  padding: 0 6px 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible;
  position: relative;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs.tr-page-subnav::after,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs.tr-page-subnav::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent-soft, #38bdf8) 42%, var(--ds-border) 58%) 12%,
    color-mix(in srgb, var(--accent-soft, #38bdf8) 32%, var(--ds-border) 68%) 88%,
    transparent
  );
  pointer-events: none;
  opacity: 0.9;
  z-index: 0;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs .tab-btn,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs .tab-btn {
  position: relative;
  z-index: 1;
  margin: 0 0 0 -14px;
  padding: 9px 22px 12px;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--ds-border) 70%, var(--accent-soft) 18%);
  border-bottom: 1px solid color-mix(in srgb, var(--ds-border) 55%, var(--accent-soft) 22%);
  border-radius: 14px 14px 0 0;
  clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 100%, 0% 100%);
  /* Closed (inactive) folder tabs sit in the darker recessed surface so the
     selected tab can stand out as the lighter, accent-tinted top sheet. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sidebar-dark) 32%, var(--ds-surface) 68%) 0%,
    color-mix(in srgb, var(--sidebar-dark) 60%, var(--ds-surface) 40%) 100%
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 6%, transparent),
    inset 0 2px 6px color-mix(in srgb, #000 22%, transparent);
  transform: translateY(5px) scale(0.98);
  transform-origin: 50% 100%;
  filter: brightness(0.9);
  font-size: 13px;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    filter 0.2s ease,
    transform 0.2s ease,
    z-index 0s;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs .tab-btn:first-child,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs .tab-btn:first-child {
  margin-left: 0;
  z-index: 2;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs .tab-btn.active,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs .tab-btn.active {
  z-index: 5;
  transform: translateY(0) scale(1);
  filter: none;
  padding: 12px 26px 14px;
  font-weight: 700;
  font-size: 14px;
  color: var(--tbl-text) !important;
  /* Active = lighter accent-soft sheet, brighter than the recessed closed tabs. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-soft) 38%, var(--tr-tab-active-surface) 62%) 0%,
    color-mix(in srgb, var(--accent-soft) 22%, var(--tr-tab-active-surface) 78%) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--accent-soft) 40%, var(--ds-border) 60%) !important;
  border-bottom-color: transparent !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 16%, transparent),
    0 -10px 32px -6px color-mix(in srgb, var(--accent-soft) 32%, transparent),
    0 16px 40px -14px color-mix(in srgb, var(--sidebar-dark) 50%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-soft) 24%, transparent);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs .tr-folder-tab-label,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs .tr-folder-tab-label {
  display: inline-block;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs .tab-btn:not(.active):hover,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs .tab-btn:not(.active):hover {
  /* Inactive tabs are now the darker recessed surface, so hover brightens
     toward the active accent tone instead of dimming further. */
  filter: brightness(1.12);
  z-index: 3;
  border-color: color-mix(in srgb, var(--accent-soft) 32%, var(--ds-border) 68%);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs .tab-btn.active:hover,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs .tab-btn.active:hover {
  filter: brightness(1.03);
}

[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs .tab-btn:not(.active),
[data-theme="light"] .page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs .tab-btn:not(.active) {
  color: var(--text-dark) !important;
  filter: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #f1f5f9 88%, var(--accent-soft) 12%) 0%,
    #e2e8f0 100%
  );
}

[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs .tab-btn.active,
[data-theme="light"] .page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs .tab-btn.active {
  color: #0f172a !important;
}

/* Transaction Reporting — compact header row (title + settings only; no subtitle / back link) */
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .page-card > .bafin-tr-page-header {
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
  border-bottom: none;
  box-shadow: none;
}
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .page-card > .bafin-tr-page-header::after {
  display: none;
}
.bafin-reporting-page .page-card > .bafin-tr-page-header .page-title {
  margin-bottom: 0;
}
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .page-card > .bafin-tr-page-nav {
  justify-content: flex-end;
  padding-top: 4px;
  padding-bottom: 10px;
  margin-bottom: 0;
  border-bottom: none;
}
.bafin-reporting-page .page-body > .tabs-container.tr-page-subnav {
  margin-top: 0;
  margin-bottom: 1rem;
}

.tr-reports-main {
  padding: 0 0 8px 0;
  box-sizing: border-box;
}

.tr-reports-main > .collapsible-section {
  margin-top: 0.35rem;
}

.tr-daily-reports-card .tr-report-filter-hint {
  margin-bottom: 1.35rem;
}

.tr-daily-reports-card .table-container {
  margin-top: 0.25rem;
}

.tr-tr-file-empty {
  display: inline-block;
  color: var(--color-text-tertiary);
  font-size: 12px;
  font-weight: 500;
}

.tr-bafin-tables-upload {
  margin-bottom: 24px;
}

.tr-bafin-entity-tabs {
  margin-bottom: 24px;
}

.bafin-tables-page .tr-bafin-entity-tabs {
  --bafin-entity-folder-surface: var(--tbl-surface);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0;
  margin-bottom: 0;
  padding: 0;
  background: var(--bafin-entity-folder-surface);
  border: 1px solid var(--ds-card-border);
  border-radius: var(--tbl-radius);
  box-shadow: var(--ds-card-shadow);
  overflow: hidden;
}

.bafin-tables-page .tr-bafin-entity-tabs .tab-btn {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0 0 0 -1px;
  margin-bottom: -1px;
  padding: 10px 18px 11px;
  border: 1px solid color-mix(in srgb, var(--tbl-divider-md) 90%, transparent);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  /* Closed = darker plain folder surface; the active tab carries the
     lighter accent-soft tint (see .active rule below). */
  background: var(--bafin-entity-folder-surface);
  color: var(--text-light);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: inset 0 2px 5px color-mix(in srgb, #000 22%, transparent);
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    filter 0.2s ease;
}

.bafin-tables-page .tr-bafin-entity-tabs .tab-btn:first-child {
  margin-left: 0;
}

.bafin-tables-page .tr-bafin-entity-tabs .tab-btn:hover {
  filter: brightness(1.06);
  border-color: color-mix(in srgb, var(--accent-soft) 28%, transparent);
  color: var(--text-light);
}

.bafin-tables-page .tr-bafin-entity-tabs .tab-btn.active {
  color: var(--tbl-text);
  /* Active = lighter accent-soft sheet, raised above the darker closed tabs. */
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--bafin-entity-folder-surface) 42%);
  border-color: var(--ds-card-border);
  border-bottom-color: var(--bafin-entity-folder-surface);
  box-shadow: none;
  filter: none;
  padding-top: 12px;
  padding-bottom: 12px;
}

[data-theme="light"] .bafin-tables-page .tr-bafin-entity-tabs .tab-btn:not(.active) {
  color: var(--text-light);
  box-shadow: inset 0 2px 5px color-mix(in srgb, #000 16%, transparent);
}

[data-theme="light"] .bafin-tables-page .tr-bafin-entity-tabs .tab-btn.active {
  color: var(--tbl-text);
  box-shadow: none;
}

.bafin-tables-page .bt-wide-card {
  max-width: 1600px;
  padding-top: 0;
}

/* Definition tables — minimal upload strip (no panel chrome) */
.bafin-tables-page .bt-def-upload {
  margin: 0 0 1.25rem;
  padding: 0;
  background: none;
  border: none;
}
.bafin-tables-page .bt-def-upload-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 0;
  padding: 0;
}

.bafin-tables-page .bt-def-upload-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  flex-shrink: 0;
}
.bafin-tables-page .bt-def-upload-file {
  flex: 1 1 auto;
  min-width: 12rem;
  max-width: 22rem;
  height: 40px;
  min-height: 40px;
  padding: 4px 12px 4px 4px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background: var(--tbl-body-bg, rgba(10, 33, 68, 0.45));
  border: 1px solid rgba(65, 113, 154, 0.28);
  border-radius: var(--control-radius, 8px);
  transition: border-color 0.2s ease;
}
.bafin-tables-page .bt-def-upload-file::file-selector-button {
  height: 32px;
  min-height: 32px;
  margin: 0 12px 0 0;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  border: 1px solid rgba(65, 113, 154, 0.35);
  border-radius: var(--control-radius, 8px);
  background: rgba(65, 113, 154, 0.28);
  color: #dbeafe;
  font-weight: 600;
  font-size: 12px;
  font-family: var(--font-primary);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.bafin-tables-page .bt-def-upload-file::file-selector-button:hover {
  background: var(--btn-surface-hover);
  border-color: var(--color-border-md);
}
.bafin-tables-page .bt-def-upload-file:focus {
  outline: none;
  border-color: rgba(65, 113, 154, 0.48);
  box-shadow: 0 0 0 2px rgba(65, 113, 154, 0.18);
}
.bafin-tables-page .bt-def-upload-submit {
  flex-shrink: 0;
  height: 40px;
}
.bafin-tables-page .bt-def-upload-hint {
  margin: 10px 0 0;
  padding: 0;
  max-width: 42rem;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--color-text-tertiary, rgba(255, 255, 255, 0.42));
}
[data-theme="light"] .bafin-tables-page .bt-def-upload-hint {
  color: #64748b;
}
[data-theme="light"] .bafin-tables-page .bt-def-upload-file {
  background: rgba(241, 245, 249, 0.95) !important;
  border-color: rgba(71, 105, 145, 0.28) !important;
}
[data-theme="light"] .bafin-tables-page .bt-def-upload-file::file-selector-button {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.bafin-tables-page .section-header h2 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.bafin-tables-page .table-container {
  background: var(--tbl-surface);
  border: 1px solid var(--color-border);
  box-shadow: none;
}
.bafin-tables-page .table-container:hover {
  box-shadow: none;
  border-color: var(--color-border-md);
}

.bafin-tables-page .data-table tbody tr {
  transition: background-color 200ms ease;
}
.bafin-tables-page .data-table tbody tr:hover {
  background: var(--tbl-hover-bg) !important;
}

.bafin-tables-page .bt-inst-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 0 8px;
  padding: 0;
  background: transparent;
  border: none;
}

.bafin-tables-page .bt-inst-filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary, rgba(255, 255, 255, 0.45));
}

.bafin-tables-page .bt-inst-filter-sep {
  color: var(--color-text-muted);
  user-select: none;
}

.bafin-tables-page .bt-inst-date {
  border-radius: 10px;
  min-width: 9.5rem;
}

.bafin-tables-page .bt-inst-filter-btn {
  border-radius: 10px;
}

.bafin-tables-page .bt-inst-filter-hint {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.38);
}

.bafin-tables-page .bt-instruments-table,
.bafin-tables-page .bt-def-table {
  width: 100%;
  table-layout: auto;
}

.bafin-tables-page .bt-instruments-table {
  min-width: 1080px;
}

.bafin-tables-page .bt-instruments-table thead th,
.bafin-tables-page .bt-def-table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-text-secondary, rgba(255, 255, 255, 0.55)) !important;
  vertical-align: middle;
  white-space: nowrap;
  padding: 10px 12px;
}

.bafin-tables-page .bt-instruments-table tbody td,
.bafin-tables-page .bt-def-table tbody td {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
  vertical-align: middle;
}

.bafin-tables-page .bt-instruments-table .bt-inst-col-name,
.bafin-tables-page .bt-instruments-table .bt-col-name {
  min-width: 7.5rem;
  max-width: 10rem;
  font-weight: 600;
}

.bafin-tables-page .bt-instruments-table .bt-col-num {
  min-width: 5.5rem;
  max-width: 7rem;
  font-variant-numeric: tabular-nums;
}

.bafin-tables-page .bt-instruments-table .bt-col-code {
  min-width: 6.5rem;
  max-width: 11rem;
  font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bafin-tables-page .bt-instruments-table .bt-col-date {
  min-width: 6rem;
  max-width: 7rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bafin-tables-page .bt-instruments-table .bt-col-broker {
  min-width: 5rem;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bafin-tables-page .bt-instruments-table .bt-actions-col,
.bafin-tables-page .bt-def-table .bt-actions-col {
  width: 7.5rem;
  text-align: center;
}

.bafin-tables-page .bt-actions-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bafin-tables-page .bt-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.bafin-tables-page .bt-action-icon__svg {
  width: var(--icon-size-ui);
  height: var(--icon-size-ui);
  opacity: 0.88;
}

.bafin-tables-page .bt-action-icon--edit,
.bafin-tables-page .bt-action-icon--delete {
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.bafin-tables-page .bt-action-icon--edit:hover,
.bafin-tables-page .bt-action-icon--delete:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
}

[data-theme="light"] .bafin-tables-page .bt-inst-filter-hint {
  color: #64748b;
}

[data-theme="light"] .bafin-tables-page .bt-instruments-table thead th,
[data-theme="light"] .bafin-tables-page .bt-def-table thead th {
  color: #64748b !important;
}

[data-theme="light"] .bafin-tables-page .bt-action-icon--edit,
[data-theme="light"] .bafin-tables-page .bt-action-icon--delete {
  color: #475569;
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .bafin-tables-page .bt-action-icon--edit:hover,
[data-theme="light"] .bafin-tables-page .bt-action-icon--delete:hover {
  background: rgba(15, 23, 42, 0.1);
  color: #0f172a;
}

/* Flat universal table search on definition tables page */
.bafin-tables-page .table-container > .table-search-bar {
  margin-left: 0;
  margin-right: 0;
}

.bafin-tables-page .table-search-bar {
  margin: 0 0 12px;
  padding: 8px 0;
  background: transparent !important;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  min-height: 0;
  box-shadow: none !important;
}
.bafin-tables-page .table-search-bar:focus-within {
  border: none;
  border-bottom: 1px solid var(--color-accent);
  box-shadow: none !important;
}

.bafin-tables-page .table-search-no-hits {
  margin-left: 0;
  margin-right: 0;
  background: rgba(255, 255, 255, 0.04);
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .bafin-tables-page .table-search-bar {
  border-bottom-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .bafin-tables-page .table-search-no-hits {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.1);
}

/* ========== Transaction Reporting — canvas matches global search pill (--ds-app-canvas) ========== */
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock {
  --tr-shell-bg: var(--ds-app-canvas);
  --tr-page-surface: var(--ds-app-canvas);
  background: var(--ds-app-canvas) !important;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.bafin-reports-body-lock {
  background: var(--ds-app-canvas) !important;
  /* Align with refined app gutters (32px) */
  --layout-page-padding: 32px;
}

/* Table stripes: stay on same canvas family as the search pill */
[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock {
  --tbl-surface: var(--ds-app-canvas);
  --tbl-header-bg: var(--tbl-surface);
  --tbl-row-alt: color-mix(in srgb, var(--ds-app-canvas) 96%, var(--text-dark) 4%);
  --tbl-hover-bg: color-mix(in srgb, var(--ds-app-canvas) 88%, var(--accent-soft) 12%);
}

[data-theme="dark"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock {
  --tbl-surface: var(--ds-app-canvas);
  --tbl-header-bg: var(--tbl-surface);
  --tbl-row-alt: color-mix(in srgb, var(--ds-app-canvas) 94%, var(--text-light) 6%);
  --tbl-hover-bg: color-mix(in srgb, var(--ds-app-canvas) 78%, var(--accent-soft) 14%);
  --tbl-text: var(--text-dark);
  --tbl-text-sec: var(--ds-text-secondary);
  --tbl-divider: color-mix(in srgb, var(--text-light) 10%, transparent);
  --tbl-divider-md: color-mix(in srgb, var(--text-light) 14%, transparent);
}

/* Daily reports panel — glass slab, floating glow */
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-daily-reports-card {
  position: relative;
  margin-top: 6px;
  padding: 18px 20px 22px;
  background: color-mix(in srgb, var(--ds-surface, rgba(18, 42, 78, 0.52)) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-border) 48%, rgba(145, 184, 209, 0.42) 52%);
  border-radius: var(--tbl-radius, 16px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 10%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent-soft, #38bdf8) 22%, transparent),
    0 22px 56px -16px color-mix(in srgb, var(--sidebar-dark) 52%, transparent),
    0 0 72px -10px color-mix(in srgb, var(--accent-soft) 30%, transparent);
  backdrop-filter: blur(var(--ds-glass-blur, 22px)) saturate(var(--ds-glass-saturate, 118%));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur, 22px)) saturate(var(--ds-glass-saturate, 118%));
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-daily-reports-card .table-container {
  margin-top: 6px;
  padding: 5px;
  background: color-mix(in srgb, var(--tbl-surface) 38%, transparent);
  border-radius: max(10px, calc(var(--tbl-radius, 16px) - 6px));
  border: 1px solid color-mix(in srgb, var(--ds-border) 42%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 8%, transparent),
    0 10px 32px -14px color-mix(in srgb, #000 50%, transparent);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock #tr-daily-reports-tbl.data-table thead,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock #tr-daily-reports-tbl.tr-daily-reports-data thead {
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  background: color-mix(in srgb, var(--tbl-header-bg) 76%, transparent) !important;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .collapsible-body {
  background: transparent;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .collapsible-section {
  background: transparent;
  border-color: var(--ds-border);
}

/* ========== Manage definition tables — same shell as Transaction Reporting (--ds-app-canvas) ========== */
body.bafin-tables-body-lock {
  background: var(--ds-app-canvas) !important;
  --layout-page-padding: 32px;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock {
  --tr-shell-bg: var(--ds-app-canvas);
  --tr-page-surface: var(--ds-app-canvas);
  background: var(--ds-app-canvas) !important;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .page-card.wide-layout.bt-wide-card {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-wide-card > .tr-bafin-page-nav {
  padding-left: var(--layout-page-padding);
  padding-right: var(--layout-page-padding);
  box-sizing: border-box;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .page-body.tr-bafin-tables-body {
  padding-left: var(--layout-page-padding);
  padding-right: var(--layout-page-padding);
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-bafin-entity-tabs {
  margin-left: 0;
  margin-bottom: 0.35rem;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tab-content {
  background: var(--tbl-surface);
  border-radius: var(--tbl-radius);
  padding: 14px 18px 18px;
  margin-bottom: 0.75rem;
  border: none;
  box-shadow: var(--shadow-sm);
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tab-content .table-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-def-upload-hint {
  margin: 6px 0 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 450;
  color: var(--color-text-tertiary);
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-instruments-table thead th,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-def-table thead th {
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dark) !important;
  border-bottom: 1px solid var(--tbl-divider);
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-action-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none !important;
  background: transparent !important;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-action-icon__svg {
  width: 16px;
  height: 16px;
  opacity: 0.42;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-action-icon:hover .bt-action-icon__svg {
  opacity: 0.95;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-action-icon--edit,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-action-icon--delete {
  color: var(--color-text-secondary);
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-action-icon--edit:hover,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-action-icon--delete:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover) !important;
  transform: none;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .table-search-bar .table-search-input {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Table tokens — match Transaction Reporting / global canvas */
[data-theme="light"] .page-wrapper.bafin-tables-page.bafin-tables-theme-lock {
  background: var(--ds-app-canvas) !important;
  --tr-shell-bg: var(--ds-app-canvas);
  --tbl-surface: var(--ds-app-canvas);
  --tbl-header-bg: var(--tbl-surface);
  --tbl-row-alt: color-mix(in srgb, var(--ds-app-canvas) 96%, var(--text-dark) 4%);
  --tbl-hover-bg: color-mix(in srgb, var(--ds-app-canvas) 88%, var(--accent-soft) 12%);
}

[data-theme="dark"] .page-wrapper.bafin-tables-page.bafin-tables-theme-lock {
  --tbl-surface: var(--ds-app-canvas);
  --tbl-header-bg: var(--tbl-surface);
  --tbl-row-alt: color-mix(in srgb, var(--ds-app-canvas) 94%, var(--text-light) 6%);
  --tbl-hover-bg: color-mix(in srgb, var(--ds-app-canvas) 78%, var(--accent-soft) 14%);
  --tbl-text: var(--text-dark);
  --tbl-text-sec: var(--ds-text-secondary);
  --tbl-divider: color-mix(in srgb, var(--text-light) 10%, transparent);
  --tbl-divider-md: color-mix(in srgb, var(--text-light) 14%, transparent);
}

[data-theme="light"] .page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tab-content {
  background: var(--tbl-surface);
  border: none;
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tab-content .table-container {
  border: none !important;
}

[data-theme="light"] .page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-instruments-table thead th,
[data-theme="light"] .page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-def-table thead th {
  color: var(--text-dark) !important;
  border-bottom-color: var(--tbl-divider);
}

[data-theme="light"] .page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-def-upload-hint {
  color: var(--color-text-tertiary);
}

[data-theme="light"] .page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-action-icon--edit,
[data-theme="light"] .page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-action-icon--delete {
  color: #94a3b8;
}

[data-theme="light"] .page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-action-icon--edit:hover,
[data-theme="light"] .page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-action-icon--delete:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.06) !important;
}

/* Unboxed layout: content sits on charcoal; align with global content gutters (same as .page-body) */
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .page-card.wide-layout {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .page-card.wide-layout > .bafin-tr-page-header,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .page-card.wide-layout > .bafin-tr-page-nav {
  padding-left: var(--layout-page-padding);
  padding-right: var(--layout-page-padding);
  box-sizing: border-box;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .page-card.wide-layout > .bafin-tr-page-header {
  padding-top: var(--layout-content-padding-top);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .bafin-tr-main-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}

/* Match page-body gutters: no extra inset on nested toolbars / filters */
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-daily-reports-card .tr-report-filter-toolbar {
  background: var(--ds-app-canvas);
  border-bottom: 1px solid var(--ds-border);
  padding-left: 0;
  padding-right: 0;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-gen-admin-strip {
  background: var(--ds-app-canvas);
  border: 1px solid var(--ds-border);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .collapsible-header.tr-collapsible-head-row {
  background: var(--ds-app-canvas);
  border: 1px solid var(--ds-border);
  border-radius: var(--control-radius);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .collapsible-header.tr-collapsible-head-row:hover {
  background: color-mix(in srgb, var(--ds-app-canvas) 80%, var(--accent-soft) 20%);
  border-color: color-mix(in srgb, var(--ds-border) 72%, var(--accent-soft) 28%);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .collapsible-header.tr-collapsible-head-row:hover .collapsible-title {
  color: var(--color-text-primary);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-page-subnav .tab-btn:not(.active):hover {
  /* Inactive tab is the darker surface — hover lifts it toward the active
     accent tone to signal interactivity (was previously the inverse). */
  filter: none;
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--bafin-folder-surface) 72%);
  color: var(--text-light);
  border-color: color-mix(in srgb, var(--tbl-divider-md) 75%, var(--accent-soft) 25%);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-page-subnav .tab-btn.active:hover {
  /* Active tab keeps its lighter accent-soft fill on hover (don't snap
     back to the darker folder surface). */
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--bafin-folder-surface) 42%);
  color: var(--tbl-text);
  border-color: var(--ds-card-border);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-gen-toolbar.tr-action-bar .btn.btn-slate:hover,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-report-filter-actions .btn.btn-slate:hover {
  background: var(--btn-surface-hover);
  border-color: var(--color-border-strong);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-daily-reports-card .tr-report-filter-hint,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-daily-reports-card .tr-report-filter-hint--static {
  background: transparent !important;
  border-bottom: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-wrapper.bafin-tables-page {
  --tr-shell-bg: #16161a;
  background: var(--tr-shell-bg);
  min-height: 100vh;
}

.page-card.wide-layout.tr-bafin-shell {
  background: transparent;
  border: none;
  box-shadow: none;
}

.tr-bafin-sticky-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--tr-shell-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin: 0 calc(-1 * var(--spacing-4, 1rem));
  padding-left: var(--spacing-4, 1rem);
  padding-right: var(--spacing-4, 1rem);
  box-sizing: border-box;
}

.tr-bafin-main-pane {
  padding-top: 1.35rem;
  box-sizing: border-box;
}

.tr-bafin-sticky-head .tr-page-subnav {
  margin-bottom: 0;
}

.tr-bafin-main-pane > .tr-bafin-alert {
  margin-bottom: 1rem;
}

.bafin-reporting-page .tr-bafin-page-header,
.bafin-tables-page .tr-bafin-page-header {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: var(--spacing-4, 1rem);
}

.bafin-reporting-page .tr-bafin-page-header::after,
.bafin-tables-page .tr-bafin-page-header::after {
  display: none;
}

.bafin-reporting-page .tr-bafin-page-nav,
.bafin-tables-page .tr-bafin-page-nav {
  justify-content: flex-end;
  border-bottom: none;
  padding: 0 0 var(--spacing-3, 12px);
  margin-bottom: 0;
}

.bafin-tables-page .tr-bafin-def-filter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 16px;
  padding: 12px 16px;
  margin: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}

.bafin-tables-page .tr-bafin-def-filter-head .tr-bafin-def-filter-toolbar {
  margin: 0;
}

.bafin-tables-page .tr-bafin-def-date {
  height: 36px;
  min-height: 36px;
  min-width: 8.75rem;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.bafin-tables-page .btn.btn-slate.tr-bafin-def-filter-btn {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}

.bafin-tables-page .btn.btn-slate.tr-bafin-def-filter-btn.bt-inst-filter-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
}

.bafin-tables-page .btn.btn-slate.tr-bafin-def-filter-btn.bt-inst-filter-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.bafin-tables-page .tr-bafin-main-pane .tr-report-filter-hint {
  margin: 0 0 14px;
  padding: 0 2px;
}

.bafin-tables-page .tr-bafin-tables-upload {
  margin-bottom: 1.25rem;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

[data-theme="light"] .page-wrapper.bafin-reporting-page,
[data-theme="light"] .page-wrapper.bafin-tables-page {
  --tr-shell-bg: #f1f5f9;
}

[data-theme="light"] .tr-bafin-sticky-head {
  background: var(--tr-shell-bg);
  border-bottom-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .bafin-tables-page .tr-bafin-def-filter-head {
  border-bottom-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .bafin-tables-page .tr-bafin-def-date {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

[data-theme="light"] .bafin-tables-page .btn.btn-slate.tr-bafin-def-filter-btn {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

[data-theme="light"] .bafin-tables-page .btn.btn-slate.tr-bafin-def-filter-btn.bt-inst-filter-btn--ghost {
  background: transparent;
}

.bafin-reporting-page .tr-gen-toolbar.tr-command-bar {
  background: #1e1e2e;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  margin-bottom: 1.5rem;
}

.bafin-reporting-page .tr-command-bar__row {
  align-items: center;
}

.bafin-reporting-page .tr-command-bar__row--split {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

.bafin-reporting-page .tr-command-bar__row--split .tr-command-bar__controls {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px 20px;
  flex: 1 1 auto;
  min-width: 0;
}

.bafin-reporting-page .tr-command-bar__row--split .tr-gen-inputs-slot {
  display: flex;
  align-items: center;
  min-width: 0;
}

.bafin-reporting-page .tr-command-bar__row--split .tr-gen-inline-form {
  align-items: center;
}

.bafin-reporting-page .tr-command-bar__submit {
  margin-left: auto;
  flex-shrink: 0;
  border-radius: 10px;
}

.bafin-reporting-page .tr-command-bar__date {
  border-radius: 10px;
}

@media screen and (max-width: 640px) {
  .bafin-reporting-page .tr-command-bar__row--split .tr-command-bar__controls {
    flex-wrap: wrap;
  }

  .bafin-reporting-page .tr-command-bar__submit {
    margin-left: 0;
    width: 100%;
  }
}

.bafin-reporting-page .tr-gen-segmented,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-gen-segmented {
  padding: 3px;
  gap: 2px;
  background: color-mix(in srgb, var(--tbl-surface, #1e293b) 72%, transparent);
  border-color: color-mix(in srgb, var(--ds-border-md, rgba(255, 255, 255, 0.12)) 90%, transparent);
  border-radius: 10px;
  overflow: visible;
}

.bafin-reporting-page .tr-gen-segmented .tr-seg-btn + .tr-seg-btn,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-gen-segmented .tr-seg-btn + .tr-seg-btn {
  border-left: none;
}

.bafin-reporting-page .tr-gen-segmented .tr-seg-btn,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-gen-segmented .tr-seg-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
}

.bafin-reporting-page .tr-seg-btn:not(.active),
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-seg-btn:not(.active) {
  color: color-mix(in srgb, var(--text-dark, #e2e8f0) 62%, transparent);
}

.bafin-reporting-page .tr-seg-btn:not(.active):hover,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-seg-btn:not(.active):hover {
  color: var(--text-dark, #f1f5f9);
  background: color-mix(in srgb, var(--accent-soft, #38bdf8) 14%, transparent);
}

.bafin-reporting-page .tr-seg-btn.active,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-seg-btn.active {
  background: color-mix(in srgb, var(--accent-soft, #38bdf8) 28%, rgba(255, 255, 255, 0.1));
  color: #f8fafc;
  box-shadow:
    0 1px 2px rgba(2, 6, 23, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.bafin-reporting-page .tr-gen-admin-strip {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.bafin-reporting-page .tr-daily-reports-collapsible {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
  background: #1a1a1c;
  margin-top: 0.5rem;
}

.bafin-reporting-page .tr-daily-reports-collapsible .collapsible-body {
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.bafin-reporting-page .tr-daily-reports-head {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 12px 16px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bafin-reporting-page .tr-collapsible-head-primary {
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  flex-wrap: wrap;
  min-width: 0;
}

.bafin-reporting-page .tr-collapsible-title-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.bafin-reporting-page .tr-daily-reports-head .collapsible-title {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
}

.bafin-reporting-page .tr-daily-reports-head .collapsible-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  max-width: 36rem;
  line-height: 1.35;
}

.bafin-reporting-page .tr-collapsible-head-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.bafin-reporting-page .tr-report-head-date {
  height: 36px;
  min-height: 36px;
  min-width: 8.75rem;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.bafin-reporting-page .btn.btn-slate.tr-head-filter-btn {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}

.bafin-reporting-page .btn.btn-slate.tr-head-filter-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
}

.bafin-reporting-page .btn.btn-slate.tr-head-filter-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.bafin-reporting-page .tr-report-filter-hint {
  margin: 0 0 14px;
  padding: 0 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.45;
}

.bafin-reporting-page .tr-report-hint--secondary,
.bafin-tables-page .tr-report-hint--secondary {
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="light"] .bafin-tables-page .tr-report-hint--secondary {
  color: #64748b;
}

.bafin-reporting-page .tr-tr-file-empty {
  color: rgba(255, 255, 255, 0.28);
  font-size: 12px;
}

.tr-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  box-sizing: border-box;
}

.tr-status-pill--ok {
  background: rgba(20, 83, 45, 0.55);
  color: #bbf7d0;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.tr-status-pill--bad {
  background: rgba(88, 28, 28, 0.58);
  color: #fecdd3;
  border: 1px solid rgba(185, 28, 28, 0.45);
}

.tr-status-pill--warn {
  background: rgba(113, 63, 18, 0.45);
  color: #fde68a;
  border: 1px solid rgba(217, 119, 6, 0.4);
}

.tr-status-pill--neutral {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tr-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.tr-icon-link__svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.tr-icon-link--excel {
  color: var(--file-type-excel-bright);
  background: color-mix(in srgb, var(--file-type-excel) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--file-type-excel) 45%, var(--color-border-strong) 55%);
}

.tr-icon-link--excel:hover {
  background: color-mix(in srgb, var(--file-type-excel) 26%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--file-type-excel) 22%, transparent);
}

.tr-icon-link--gz {
  color: var(--color-text-secondary);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-strong);
}

.tr-icon-link--gz:hover {
  background: var(--btn-surface-hover);
  transform: translateY(-1px);
}

.tr-icon-link--errors {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.tr-icon-link--errors:hover {
  background: rgba(245, 158, 11, 0.2);
  transform: translateY(-1px);
}

.tr-icon-link--danger {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.tr-icon-link--danger:hover {
  background: rgba(239, 68, 68, 0.22);
  transform: translateY(-1px);
}

.tr-icon-link.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.tr-icon-link[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: #f8fafc;
  background: rgba(18, 18, 18, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 50;
  transition: opacity 0s linear, visibility 0s linear;
}

.tr-icon-link[data-tooltip]:hover::after,
.tr-icon-link[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.tr-th-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
}

.tr-th-icon svg {
  width: 17px;
  height: 17px;
}

.tr-th-icon--excel {
  color: color-mix(in srgb, var(--file-type-excel-bright) 88%, #fff 12%);
}

.tr-th-icon--gz {
  color: rgba(147, 197, 253, 0.8);
}

.tr-th-icon--err {
  color: rgba(253, 224, 71, 0.75);
}

.tr-th-icon--danger {
  color: rgba(248, 113, 113, 0.8);
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data {
  border-collapse: separate;
  border-spacing: 0;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data thead th {
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
  color: #a1a1aa !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: var(--tbl-header-pad-y) var(--tbl-cell-pad-x) !important;
  vertical-align: middle !important;
  box-shadow: none !important;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock #tr-daily-reports-tbl.tr-daily-reports-data tbody td {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock #tr-daily-reports-tbl td.col-date,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock #tr-daily-reports-tbl .tr-date-cell-text {
  font-size: 14px;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-report-filter-hint--static {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
  margin: 0 0 12px;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data tbody td {
  border: none !important;
  border-bottom: none !important;
  padding: 14px 10px;
  vertical-align: middle;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 200ms ease;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data tbody tr:last-child {
  border-bottom: none;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data tbody tr:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock #tr-daily-reports-tbl.tr-daily-reports-data tbody tr {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.bafin-reporting-page #tr-daily-reports-tbl.data-table tbody tr:nth-child(even) {
  background: transparent !important;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data thead tr {
  border: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
}

.bafin-reporting-page .td-tr-icon-cell {
  text-align: center;
}

.bafin-reporting-page .th-tr-icon-col {
  width: 6.5%;
  min-width: 3rem;
}

.tr-icon-link--compact {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.tr-icon-link--compact .tr-icon-link__svg {
  width: 17px;
  height: 17px;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data--minimal {
  table-layout: fixed;
  width: 100%;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data--minimal thead th {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 10px;
  vertical-align: bottom;
}

/* Column widths for the 8/9-column daily-reports table. The container uses
   table-layout: fixed (see rule above), so EVERY column must declare a
   width or unsized columns collapse and the labels stack on top of each
   other. The Actions column is admin-only — when absent, table-layout:
   fixed redistributes the leftover gap across the defined columns, which
   is fine. Percentages roughly add to ~100% for the admin view. */
.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data--minimal .th-tr-minimal-date {
  width: 11%;
  text-align: left;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data--minimal .th-tr-minimal-status {
  width: 15%;
  text-align: center;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data--minimal .th-tr-minimal-reportable {
  width: 11%;
  text-align: center;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data--minimal .th-tr-minimal-all {
  width: 8%;
  text-align: center;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data--minimal .th-tr-minimal-genat {
  width: 16%;
  text-align: left;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data--minimal .th-tr-minimal-excel,
.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data--minimal .th-tr-minimal-gz {
  width: 8%;
  text-align: center;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data--minimal .th-tr-minimal-err {
  width: 12%;
  text-align: center;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data--minimal .th-tr-minimal-actions {
  width: 11%;
  text-align: center;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data--minimal tbody td.td-tr-status {
  text-align: center;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data--minimal tbody td.col-date {
  text-align: left;
}

.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data--minimal tbody td.td-tr-excel,
.bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data--minimal tbody td.td-tr-err {
  vertical-align: middle;
}

.bafin-reporting-page .tr-excel-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--btn-border-slate);
  text-decoration: none;
  transition: var(--control-transition);
  box-sizing: border-box;
}

.bafin-reporting-page .tr-excel-icon-btn .tbl-ico-excel {
  color: var(--file-type-excel);
}

.bafin-reporting-page .tr-excel-icon-btn:hover {
  background: var(--btn-surface);
  border-color: color-mix(in srgb, var(--file-type-excel) 45%, var(--btn-border-slate) 55%);
}

.bafin-reporting-page .tr-excel-icon-btn:hover .tbl-ico-excel {
  color: var(--file-type-excel-bright);
}

.bafin-reporting-page #tr-daily-reports-tbl .td-tr-err {
  text-align: left;
  vertical-align: top;
  min-width: 220px;
  max-width: min(420px, 42vw);
}

.bafin-reporting-page .tr-err-detail {
  max-height: 140px;
  overflow: auto;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 6px;
  padding: 8px 10px;
}

.bafin-reporting-page .tr-err-detail-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.bafin-reporting-page .tr-err-detail-link:hover {
  color: #fecaca;
  text-decoration: underline;
}

[data-theme="light"] .bafin-reporting-page .tr-err-detail {
  color: #b91c1c;
  background: #fef2f2;
  border-color: rgba(185, 28, 28, 0.2);
}

[data-theme="light"] .bafin-reporting-page .tr-err-detail-link:hover {
  color: #991b1b;
}

.bafin-reporting-page .tr-col-muted {
  color: var(--color-text-muted, #9ca3af);
  font-size: 12px;
  cursor: help;
}

.org-restricted-panel {
  max-width: 520px;
  margin: 2.5rem auto 3rem;
  padding: 2.5rem 2rem;
  text-align: center;
  background: var(--color-surface-1, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
}

.org-restricted-icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 1rem;
  opacity: 0.85;
}

.org-restricted-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 0.75rem;
}

.org-restricted-text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
}

.org-restricted-text a {
  color: var(--color-accent, #60a5fa);
  text-decoration: none;
}

.org-restricted-text a:hover {
  text-decoration: underline;
}

.org-restricted-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.75rem;
}

.bafin-reporting-page .btn-tr-errors-warn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  font-weight: 600;
  font-size: 12px;
  padding: 6px 10px;
  text-decoration: none;
  transition: var(--control-transition);
  box-shadow: none;
}

.bafin-reporting-page .btn-tr-errors-warn .tbl-ico-inline {
  width: 16px;
  height: 16px;
  color: #fcd34d;
}

.bafin-reporting-page .btn-tr-errors-warn:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(251, 191, 36, 0.65);
  color: #fde68a;
}

[data-theme="light"] .bafin-reporting-page .tr-excel-icon-btn {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .bafin-reporting-page .tr-excel-icon-btn:hover {
  border-color: color-mix(in srgb, var(--file-type-excel) 50%, rgba(15, 23, 42, 0.12) 50%);
}

[data-theme="light"] .bafin-reporting-page .btn-tr-errors-warn {
  background: #fffbeb;
  border-color: rgba(217, 119, 6, 0.35);
  color: #b45309;
}

[data-theme="light"] .bafin-reporting-page .btn-tr-errors-warn .tbl-ico-inline {
  color: #d97706;
}

.bafin-reporting-page #tr-daily-reports-tbl .tr-status-pill--ok {
  background: rgba(20, 83, 45, 0.42);
  color: #b9f8cf;
  border-color: rgba(74, 222, 128, 0.28);
}

.bafin-reporting-page #tr-daily-reports-tbl .tr-status-pill--bad {
  background: rgba(91, 24, 24, 0.48);
  color: #ffd0d6;
  border-color: rgba(248, 113, 113, 0.25);
}

.bafin-reporting-page #tr-daily-reports-tbl .tr-status-pill--warn {
  background: rgba(120, 72, 12, 0.4);
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.28);
}

.bafin-reporting-page #tr-daily-reports-tbl .tr-status-pill--neutral {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.09);
}

.bafin-reporting-page #tr-daily-reports-tbl .tr-status-pill {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-size: 10px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

[data-theme="light"] .page-wrapper.bafin-reporting-page {
  background: #f1f5f9;
}

[data-theme="light"] .bafin-reporting-page .page-card.wide-layout {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .bafin-reporting-page .tr-gen-toolbar.tr-command-bar {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .bafin-reporting-page .tr-gen-segmented,
[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-gen-segmented {
  background: #e2e8f0;
  border-color: rgba(15, 23, 42, 0.16);
}

[data-theme="light"] .bafin-reporting-page .tr-seg-btn:not(.active),
[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-seg-btn:not(.active) {
  color: #334155;
}

[data-theme="light"] .bafin-reporting-page .tr-seg-btn:not(.active):hover,
[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-seg-btn:not(.active):hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.92);
}

[data-theme="light"] .bafin-reporting-page .tr-seg-btn.active,
[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-seg-btn.active {
  background: color-mix(in srgb, var(--accent-soft, #0ea5e9) 22%, #fff);
  color: #0f172a;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .bafin-reporting-page .tr-daily-reports-collapsible {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .bafin-reporting-page .tr-daily-reports-head {
  background: transparent;
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .bafin-reporting-page .tr-daily-reports-head .collapsible-title {
  color: #475569;
}

[data-theme="light"] .bafin-reporting-page .tr-daily-reports-head .collapsible-subtitle {
  color: #94a3b8;
}

[data-theme="light"] .bafin-reporting-page .tr-report-head-date {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .bafin-reporting-page .btn.btn-slate.tr-head-filter-btn {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.1);
  color: #0f172a;
}

[data-theme="light"] .bafin-reporting-page .btn.btn-slate.tr-head-filter-btn--ghost {
  background: transparent;
  color: #64748b;
}

[data-theme="light"] .bafin-reporting-page .tr-report-filter-hint {
  color: #94a3b8;
}

[data-theme="light"] .bafin-reporting-page .tr-report-hint--secondary {
  color: #64748b;
}

[data-theme="light"] .bafin-reporting-page .tr-tr-file-empty {
  color: #cbd5e1;
}

[data-theme="light"] .bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data thead th {
  background: var(--tbl-header-bg) !important;
  color: #64748b !important;
  border: none !important;
  border-bottom: none !important;
}

[data-theme="light"] .bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data tbody td {
  border: none !important;
  border-bottom: none !important;
}

[data-theme="light"] .bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data tbody tr {
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data tbody tr:hover {
  background: rgba(15, 23, 42, 0.04) !important;
  box-shadow: none;
}

[data-theme="light"] .bafin-reporting-page #tr-daily-reports-tbl.data-table tbody tr:nth-child(even) {
  background: transparent !important;
}

[data-theme="light"] .bafin-reporting-page #tr-daily-reports-tbl.tr-daily-reports-data thead tr {
  border-bottom: 1px solid var(--tbl-header-rule);
}

[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock #tr-daily-reports-tbl.tr-daily-reports-data thead th {
  background: transparent !important;
  color: #a1a1aa !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock #tr-daily-reports-tbl.tr-daily-reports-data thead tr {
  border: 0 !important;
  border-bottom: none !important;
}

[data-theme="light"] .tr-th-icon--excel {
  color: var(--file-type-excel);
}

[data-theme="light"] .tr-th-icon--gz {
  color: rgba(37, 99, 235, 0.85);
}

[data-theme="light"] .tr-th-icon--err {
  color: rgba(180, 83, 9, 0.9);
}

[data-theme="light"] .tr-th-icon--danger {
  color: rgba(220, 38, 38, 0.85);
}

[data-theme="light"] .tr-icon-link[data-tooltip]::after {
  background: rgba(30, 41, 59, 0.96);
  border-color: rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .tr-status-pill--ok {
  background: rgba(22, 101, 52, 0.12);
  color: #166534;
  border-color: rgba(34, 197, 94, 0.35);
}

[data-theme="light"] .tr-status-pill--bad {
  background: rgba(127, 29, 29, 0.1);
  color: #991b1b;
  border-color: rgba(185, 28, 28, 0.35);
}

[data-theme="light"] .tr-status-pill--warn {
  background: rgba(180, 83, 9, 0.1);
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.35);
}

[data-theme="light"] .tr-status-pill--neutral {
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
  border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .bafin-reporting-page #tr-daily-reports-tbl .tr-status-pill--ok {
  background: rgba(22, 101, 52, 0.12);
  color: #166534;
  border-color: rgba(34, 197, 94, 0.35);
}

[data-theme="light"] .bafin-reporting-page #tr-daily-reports-tbl .tr-status-pill--bad {
  background: rgba(127, 29, 29, 0.1);
  color: #991b1b;
  border-color: rgba(185, 28, 28, 0.35);
}

[data-theme="light"] .bafin-reporting-page #tr-daily-reports-tbl .tr-status-pill--warn {
  background: rgba(180, 83, 9, 0.1);
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.35);
}

[data-theme="light"] .bafin-reporting-page #tr-daily-reports-tbl .tr-status-pill--neutral {
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
  border-color: rgba(15, 23, 42, 0.12);
}

.tr-gen-danger-zone {
  margin-top: 1.75rem;
  padding: 20px 22px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--control-radius);
  box-sizing: border-box;
}

.tr-gen-danger-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.tr-gen-danger-desc,
.tr-gen-danger-count {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.tr-gen-danger-count {
  font-weight: 600;
  color: var(--color-text-secondary);
}

.tr-gen-danger-form {
  display: inline;
  margin: 0;
}

/* Transaction Reporting (theme-lock): same canvas as search pill in both themes */
html[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock {
  background: var(--ds-app-canvas) !important;
}

html[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .page-card.wide-layout {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-gen-toolbar.tr-action-bar {
  background: var(--ds-app-canvas) !important;
  border-color: var(--ds-border) !important;
}

html[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock #tr-daily-reports-tbl.tr-daily-reports-data thead th {
  background: transparent !important;
  color: #a1a1aa !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="light"] .page-wrapper.bafin-reporting-page.bafin-reports-theme-lock #tr-daily-reports-tbl.tr-daily-reports-data thead tr {
  border: 0 !important;
  border-bottom: none !important;
}

/* Daily reports data table — column balance, legible headers, no extra scrollbar */
#tr-daily-reports-tbl.tr-daily-reports-data {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}

#tr-daily-reports-tbl.tr-daily-reports-data thead th {
  padding: var(--tbl-header-pad-y) 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a1a1aa;
  vertical-align: middle;
  hyphens: none;
}

#tr-daily-reports-tbl.tr-daily-reports-data thead th.th-tr-metric,
#tr-daily-reports-tbl.tr-daily-reports-data thead th.th-tr-gz,
#tr-daily-reports-tbl.tr-daily-reports-data thead th.th-tr-err {
  white-space: normal;
  word-break: break-word;
  min-width: 4.75rem;
  padding-left: 12px;
  padding-right: 12px;
}

#tr-daily-reports-tbl.tr-daily-reports-data .th-tr-date,
#tr-daily-reports-tbl.tr-daily-reports-data .col-date {
  width: 11%;
  min-width: 6.5rem;
  max-width: none;
}

#tr-daily-reports-tbl.tr-daily-reports-data td.col-date {
  font-size: 11px;
  padding-left: 6px;
  padding-right: 6px;
}

#tr-daily-reports-tbl.tr-daily-reports-data .th-tr-status { width: 11%; }
#tr-daily-reports-tbl.tr-daily-reports-data .th-tr-reportable { width: 12%; min-width: 5.5rem; }
#tr-daily-reports-tbl.tr-daily-reports-data .th-tr-alltxns { width: 10%; min-width: 4.75rem; }
#tr-daily-reports-tbl.tr-daily-reports-data .th-tr-created { width: 10%; }
#tr-daily-reports-tbl.tr-daily-reports-data .th-tr-file { width: 9%; min-width: 4.25rem; }
#tr-daily-reports-tbl.tr-daily-reports-data .th-tr-gz { width: 9%; min-width: 4.5rem; }
#tr-daily-reports-tbl.tr-daily-reports-data .th-tr-err { width: 10%; min-width: 4.75rem; }
#tr-daily-reports-tbl.tr-daily-reports-data .th-tr-actions { width: 9%; }

#tr-daily-reports-tbl.tr-daily-reports-data td {
  padding: 9px 7px;
  font-size: 12px;
}

#tr-daily-reports-tbl.tr-daily-reports-data .text-center {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

#tr-daily-reports-tbl.tr-daily-reports-data thead th.th-tr-file,
#tr-daily-reports-tbl.tr-daily-reports-data thead th.th-tr-gz {
  vertical-align: middle;
  padding-top: var(--tbl-header-pad-y);
  padding-bottom: var(--tbl-header-pad-y);
}

#tr-daily-reports-tbl.tr-daily-reports-data .td-tr-actions-file {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  vertical-align: middle;
}

#tr-daily-reports-tbl.tr-daily-reports-data .td-tr-actions-mid {
  vertical-align: middle;
  text-align: center;
}

#tr-daily-reports-tbl.tr-daily-reports-data .td-tr-actions-icon {
  vertical-align: middle;
  text-align: right;
}

/* Outline / “ghost” table actions — Excel, GZ, errors, delete (Transaction Reporting + reusable) */
/* Global file-type accents — Excel (green) & PDF (red); SVGs use currentColor */
:root {
  --file-type-excel: #217346;
  --file-type-excel-bright: #2d9d5c;
  --file-type-pdf: #c62828;
  --file-type-pdf-bright: #e53935;
}

.tbl-ico-excel {
  color: var(--file-type-excel);
}

.tbl-ico-pdf {
  color: var(--file-type-pdf);
}

/* Text links styled as downloads (e.g. Client Monthly Reporting) */
.cr-download-link--excel,
.cr-download-link--pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.cr-download-link--excel::before {
  content: "📗";
  font-size: 1.12em;
  line-height: 1;
}

.cr-download-link--pdf::before {
  content: "📕";
  font-size: 1.12em;
  line-height: 1;
}

/* Reusable CTA prefix for any outline button that exports to Excel */
.file-type-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.file-type-cta--excel::before {
  content: "📗";
  font-size: 1.1em;
  line-height: 1;
}

.file-type-cta--pdf::before {
  content: "📕";
  font-size: 1.1em;
  line-height: 1;
}

.tbl-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

.btn-excel-inner,
.btn-gz-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn.btn-excel-export {
  background: color-mix(in srgb, var(--color-surface-1) 22%, transparent);
  border: 1px solid var(--btn-border-slate);
  color: var(--color-text-secondary);
  font-weight: 600;
  gap: 0;
  text-decoration: none;
  transition: var(--control-transition);
  box-shadow: none;
  white-space: nowrap;
}

.btn.btn-excel-export .tbl-ico-excel {
  color: var(--file-type-excel);
}

.btn.btn-excel-export:hover:not(.is-disabled) {
  background: var(--btn-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  transform: none;
}

.btn.btn-excel-export:hover:not(.is-disabled) .tbl-ico-excel {
  color: var(--file-type-excel-bright);
}

.btn.btn-excel-export.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn.btn-gz-export {
  background: color-mix(in srgb, var(--color-surface-1) 22%, transparent);
  border: 1px solid var(--btn-border-slate);
  color: var(--color-text-secondary);
  font-weight: 600;
  text-decoration: none;
  transition: var(--control-transition);
  box-shadow: none;
  white-space: nowrap;
}

.btn.btn-gz-export .tbl-ico-gz {
  color: var(--color-text-tertiary);
}

.btn.btn-gz-export:hover:not(.is-disabled) {
  background: var(--btn-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  transform: none;
}

.btn.btn-gz-export:hover:not(.is-disabled) .tbl-ico-gz {
  color: var(--color-accent);
}

.btn.btn-gz-export.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

#tr-daily-reports-tbl.tr-daily-reports-data .btn.btn-sm.btn-excel-export,
#tr-daily-reports-tbl.tr-daily-reports-data .btn.btn-sm.btn-gz-export {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
}

.btn-tbl-outline-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--btn-border-slate);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 12px;
  padding: 6px 10px;
  text-decoration: none;
  transition: var(--control-transition);
  box-shadow: none;
}

.btn-tbl-outline-action .tbl-ico-inline {
  width: 16px;
  height: 16px;
  color: var(--color-text-tertiary);
}

.btn-tbl-outline-action:hover {
  border-color: var(--color-accent-border);
  color: var(--color-text-primary);
  transform: none;
}

.btn-tbl-outline-action:hover .tbl-ico-inline {
  color: var(--color-accent);
}

.btn-tbl-icon-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--btn-border-slate);
  color: var(--color-text-tertiary);
  transition: var(--control-transition);
  box-shadow: none;
}

.btn-tbl-icon-danger .tbl-ico {
  width: 17px;
  height: 17px;
}

.btn-tbl-icon-danger:hover {
  border-color: rgba(248, 113, 113, 0.5);
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.08);
  transform: none;
}

[data-theme="light"] .btn.btn-excel-export,
[data-theme="light"] .btn.btn-gz-export {
  background: var(--color-surface-1);
  color: var(--color-text-primary);
}

[data-theme="light"] .btn.btn-excel-export .tbl-ico-excel {
  color: var(--file-type-excel);
}

[data-theme="light"] .btn.btn-excel-export:hover:not(.is-disabled) .tbl-ico-excel {
  color: var(--file-type-excel-bright);
}

[data-theme="light"] .btn.btn-gz-export .tbl-ico-gz {
  color: var(--color-text-tertiary);
}

[data-theme="light"] .btn-tbl-outline-action {
  background: var(--color-surface-1);
  color: var(--color-text-primary);
}

[data-theme="light"] .btn-tbl-outline-action .tbl-ico-inline {
  color: var(--color-text-tertiary);
}

.btn-slate.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}

.actions-cell { display: flex; gap: 8px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* -- System Config Inputs ----------------------------------------------- */
.sysconf-edit-cell { display: flex; align-items: center; gap: 6px; }
.sysconf-input { width: 80px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg-tertiary); color: var(--color-text-primary); font-size: 14px; font-weight: 600; font-family: inherit; text-align: right; }
.sysconf-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(144, 193, 190, 0.2); }
.sysconf-input.saved { border-color: var(--color-success); background: rgba(16,185,129,0.06); }
.sysconf-unit { font-size: 13px; color: var(--color-text-muted); min-width: 30px; }
.sysconf-group-header td { padding-top: 20px !important; padding-bottom: 6px !important; border-bottom: 1px solid var(--color-border); }
.sysconf-actions { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end; }
.sysconf-toast { position: fixed; bottom: 24px; right: 24px; background: var(--color-success); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 9999; opacity: 0; transition: opacity 0.3s; }
.sysconf-toast.show { opacity: 1; }

/* -- Bonus Management --------------------------------------------------- */
.bonus-table { width: 100%; margin-top: 20px; }
.filter-section { margin-bottom: 25px; }
.view-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.view-tab { padding: 10px 20px; background: var(--color-bg-tertiary); color: var(--color-text-primary); border: 2px solid var(--color-border); border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.3s; }
.view-tab:hover { background: var(--color-bg-hover); border-color: var(--color-accent); }
.view-tab.active { background: var(--color-tertiary); color: #fff; border-color: var(--color-accent-light); }
/* Bonus embed — override global .view-tab rules (loaded later in this file) */
body.cr-embed-body .cr-bonus-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
body.cr-embed-body .cr-bonus-view-tabs .view-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card, rgba(15, 23, 42, 0.55));
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.cr-embed-body .cr-bonus-view-tabs .view-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.06));
  border-color: var(--color-border-strong, var(--color-border));
}
body.cr-embed-body .cr-bonus-view-tabs .view-tab.active {
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-accent, #3b82f6) 18%, var(--color-bg-card, #0f172a));
  border-color: var(--color-accent, #3b82f6);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent, #3b82f6) 35%, transparent);
}
body.cr-embed-body .info-banner {
  background: var(--color-bg-card, rgba(15, 23, 42, 0.65));
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  color: var(--color-text-secondary);
}
body.cr-embed-body .info-banner p {
  margin: 0 0 6px;
  color: var(--color-text-primary);
}
body.cr-embed-body .info-banner p:last-child {
  margin-bottom: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
}
body.cr-embed-body .filter-panel {
  background: var(--color-bg-card, rgba(15, 23, 42, 0.5));
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
body.cr-embed-body .filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  align-items: end;
}
body.cr-embed-body .filter-actions {
  margin-top: 12px;
}
body.cr-embed-body .table-empty,
body.cr-embed-body .empty-state {
  background: var(--color-bg-card, rgba(15, 23, 42, 0.4));
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  color: var(--color-text-secondary);
}
body.cr-embed-body .modal-backdrop {
  background: rgba(0, 0, 0, 0.65);
}
body.cr-embed-body .modal {
  background: var(--color-bg-elevated, #1e293b);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}
body.cr-embed-body #bonus-table,
body.cr-embed-body #bonus-deals-table {
  width: 100%;
}
body.cr-embed-body .cr-bonus-add-form .filter-row,
body.cr-embed-body .cr-bonus-edit-form .filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  align-items: end;
}
body.cr-embed-body .cr-bonus-add-panel .section-title {
  margin-top: 0;
}
.badge-bonus { background: var(--color-secondary); color: #fff; }
.badge-income { background: var(--color-secondary, #03dac6); color: #000; }
.badge-manual { background: var(--color-warning, #ff9800); color: #000; }

/* -- AVA Options Expiry Rows -------------------------------------------- */
.ava-expiry-today { background: rgba(239,68,68,0.15); }
.ava-expiry-red { background: rgba(239,68,68,0.10); }
.ava-expiry-orange { background: rgba(245,158,11,0.10); }
.ava-expiry-yellow { background: rgba(250,204,21,0.08); }

/* -- Product Activation (/products/product_activation) -------------------- */
body.product-activation-page {
  background: var(--color-base) !important;
  margin: 0;
  font-family: 'Inter', var(--font-primary), system-ui, -apple-system, sans-serif;
}
body.product-activation-page .if-main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--layout-page-padding, 2rem) 3rem;
  box-sizing: border-box;
  background: transparent;
  border: none;
  box-shadow: none;
}
body.product-activation-page .if-page-nav {
  margin-bottom: var(--spacing-5);
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--color-border);
}
body.product-activation-page .if-page-head {
  margin-bottom: var(--spacing-5);
}
body.product-activation-page .if-page-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  font-family: 'Inter', var(--font-primary), system-ui, sans-serif;
}
body.product-activation-page .if-activation-glass-tile {
  border-radius: var(--tbl-radius, 14px);
  border: 1px solid color-mix(in srgb, var(--ds-card-border, var(--color-border)) 55%, var(--ds-glass-rim, rgba(255, 255, 255, 0.09)) 45%);
  background: color-mix(in srgb, var(--tbl-surface, rgba(255, 255, 255, 0.04)) 52%, transparent);
  box-shadow:
    var(--ds-card-shadow, 0 12px 32px -16px rgba(0, 0, 0, 0.45)),
    0 24px 60px -18px color-mix(in srgb, var(--sidebar-dark, #0f172a) 42%, transparent);
  backdrop-filter: blur(var(--ds-glass-blur, 22px)) saturate(var(--ds-glass-saturate, 118%));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur, 22px)) saturate(var(--ds-glass-saturate, 118%));
  padding: 0;
  overflow: hidden;
}
body.product-activation-page .if-table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: none;
  box-shadow: none;
  background: transparent;
  margin: 0;
  padding: 0;
  border-radius: inherit;
}
body.product-activation-page .if-features-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  border: none;
}
body.product-activation-page .if-features-table thead th:first-child {
  border-top-left-radius: var(--tbl-radius, 14px);
}
body.product-activation-page .if-features-table thead th:last-child {
  border-top-right-radius: var(--tbl-radius, 14px);
}
body.product-activation-page .if-features-table thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: left;
  padding: 12px 14px 10px;
  border: none;
  background: transparent;
}
body.product-activation-page .if-features-table thead th.if-th-toggle {
  text-align: center;
}
body.product-activation-page .if-features-table tbody td {
  padding: 12px 14px;
  border: none;
  vertical-align: middle;
}
body.product-activation-page .if-features-table tbody tr.if-client-row:hover td {
  background: var(--tbl-hover-bg);
}
body.product-activation-page .if-features-table tbody tr.if-accounts-row td {
  background: transparent;
}
body.product-activation-page .if-page-subtitle {
  margin: var(--spacing-2, 8px) 0 0;
  max-width: 52ch;
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 400;
  color: var(--color-text-secondary);
}
body.product-activation-page .if-features-table thead th.if-th-expand {
  width: 44px;
  padding-left: 10px;
  padding-right: 6px;
}
body.product-activation-page .if-features-table thead th.if-th-client {
  letter-spacing: 0.04em;
}
body.product-activation-page .if-td-expand {
  width: 44px;
  text-align: center;
  padding-left: 10px;
  padding-right: 6px;
  vertical-align: middle;
}
body.product-activation-page .if-td-expand--nested {
  padding: 0;
  border: none;
  background: transparent;
  vertical-align: top;
}
body.product-activation-page .if-client-row {
  border-top: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
}
body.product-activation-page .if-client-row:first-of-type {
  border-top: none;
}
body.product-activation-page .if-client-name {
  display: inline-block;
  font-weight: 600;
  letter-spacing: -0.01em;
}
body.product-activation-page .if-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, var(--ds-glass-rim, rgba(255, 255, 255, 0.1)) 30%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--tbl-surface, rgba(255, 255, 255, 0.06)) 40%, transparent);
  color: var(--color-text-primary);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.12s ease;
}
body.product-activation-page .if-expand-btn:hover {
  background: color-mix(in srgb, var(--tbl-hover-bg) 55%, transparent);
  border-color: color-mix(in srgb, var(--color-accent, #38bdf8) 35%, var(--color-border));
  transform: scale(1.04);
}
body.product-activation-page .if-expand-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent, #38bdf8) 65%, transparent);
  outline-offset: 2px;
}
body.product-activation-page .if-accounts-panel {
  padding: 0;
  vertical-align: top;
  background: transparent;
  border: none;
}
body.product-activation-page .if-accounts-panel-inner {
  margin: 0 0 var(--spacing-4, 16px) 12px;
  padding: var(--spacing-4, 16px) var(--spacing-4, 16px) var(--spacing-3, 12px);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  background: color-mix(in srgb, var(--sidebar-dark, #0f172a) 22%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
body.product-activation-page .if-accounts-kicker {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
body.product-activation-page .if-accounts-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
body.product-activation-page .if-accounts-table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: left;
  padding: 10px 12px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  background: transparent;
}
body.product-activation-page .if-accounts-table thead th.if-acc-th-center {
  text-align: center;
}
body.product-activation-page .if-accounts-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 35%, transparent);
  vertical-align: middle;
  color: var(--color-text-primary, var(--text-dark));
}
body.product-activation-page .if-accounts-table tbody tr:last-child td {
  border-bottom: none;
}
body.product-activation-page .if-accounts-table tbody tr:hover td {
  background: color-mix(in srgb, var(--tbl-hover-bg) 40%, transparent);
}
body.product-activation-page .if-acc-login {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
body.product-activation-page .if-acc-server {
  font-size: 12px;
  color: var(--color-text-secondary);
  max-width: 280px;
  word-break: break-word;
}
body.product-activation-page .if-acc-inactive {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  opacity: 0.85;
}
body.product-activation-page .if-acc-td-cb {
  text-align: center;
  width: 6rem;
}
body.product-activation-page .if-acc-cb {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: color-mix(in srgb, var(--color-accent, #f97316) 85%, #ea580c);
  cursor: pointer;
  border-radius: 4px;
}
body.product-activation-page .if-acc-td-cb.if-disabled {
  opacity: 0.45;
  pointer-events: none;
}
body.product-activation-page .if-acc-td-cb.if-disabled .if-acc-cb {
  cursor: not-allowed;
}
body.product-activation-page .if-td-client {
  font-family: 'Inter', var(--font-primary), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}
body.product-activation-page .if-td-toggle {
  text-align: center;
}
body.product-activation-page .if-perm-toggle {
  justify-content: center;
  margin: 0 auto;
}
/* OFF: red (inactive) */
body.product-activation-page .if-perm-toggle .settings-perm-switch {
  background: linear-gradient(180deg, color-mix(in srgb, #b91c1c 88%, #450a0a), #991b1b);
  border-color: color-mix(in srgb, #f87171 45%, #7f1d1d);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fecaca 35%, transparent);
}
body.product-activation-page .if-perm-toggle .settings-perm-switch::after {
  background: #fecaca;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* ON: green (active) */
body.product-activation-page .if-perm-toggle input:checked + .settings-perm-switch {
  background: linear-gradient(180deg, color-mix(in srgb, #22c55e 90%, #14532d), #15803d);
  border-color: color-mix(in srgb, #86efac 40%, #166534);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #bbf7d0 45%, transparent),
    0 0 0 1px color-mix(in srgb, #22c55e 35%, transparent);
}
body.product-activation-page .if-perm-toggle input:checked + .settings-perm-switch::after {
  background: #f0fdf4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
body.product-activation-page .if-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  background: var(--sidebar-dark);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 5000;
}
body.product-activation-page .if-toast.if-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
[data-theme="light"] body.product-activation-page {
  background: var(--bg-main) !important;
}
[data-theme="light"] body.product-activation-page .if-page-title {
  color: var(--ds-text);
}
[data-theme="light"] body.product-activation-page .if-activation-glass-tile {
  background: color-mix(in srgb, var(--tbl-surface) 58%, #ffffff 42%);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 70%, transparent);
  box-shadow: var(--ds-card-shadow);
}
[data-theme="light"] body.product-activation-page .if-features-table thead th {
  background: transparent;
  color: #64748b;
}
[data-theme="light"] body.product-activation-page .if-features-table tbody tr.if-client-row:hover td {
  background: rgba(15, 23, 42, 0.03);
}
[data-theme="light"] body.product-activation-page .if-page-subtitle {
  color: #64748b;
}
[data-theme="light"] body.product-activation-page .if-expand-btn {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--color-border) 80%, #cbd5e1);
  color: #0f172a;
}
[data-theme="light"] body.product-activation-page .if-expand-btn:hover {
  background: #f8fafc;
  border-color: color-mix(in srgb, var(--color-accent, #0ea5e9) 40%, var(--color-border));
}
[data-theme="light"] body.product-activation-page .if-accounts-panel-inner {
  background: color-mix(in srgb, #f8fafc 88%, #e2e8f0 12%);
  border-color: var(--color-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] body.product-activation-page .if-accounts-table tbody tr:hover td {
  background: rgba(15, 23, 42, 0.04);
}
[data-theme="light"] body.product-activation-page .if-td-client {
  color: #0f172a;
}
[data-theme="light"] body.product-activation-page .if-perm-toggle .settings-perm-switch {
  background: linear-gradient(180deg, #fecaca, #f87171);
  border-color: color-mix(in srgb, #dc2626 55%, #fecaca);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
[data-theme="light"] body.product-activation-page .if-perm-toggle .settings-perm-switch::after {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(127, 29, 29, 0.35);
}
[data-theme="light"] body.product-activation-page .if-perm-toggle input:checked + .settings-perm-switch {
  background: linear-gradient(180deg, #86efac, #4ade80);
  border-color: color-mix(in srgb, #16a34a 50%, #bbf7d0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px color-mix(in srgb, #22c55e 28%, transparent);
}
[data-theme="light"] body.product-activation-page .if-perm-toggle input:checked + .settings-perm-switch::after {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(22, 101, 52, 0.3);
}

/* -- Broker Overview — directory (borderless, UEI) ---------------------- */
body.broker-mgmt-page {
  background: var(--color-base);
  font-family: 'Inter', var(--font-primary), system-ui, sans-serif;
}
.broker-mgmt-page .broker-overview-page-header {
  border-bottom: none;
  box-shadow: none;
}
.broker-mgmt-page .broker-overview-page-title {
  margin: 0;
}
.broker-mgmt-main .broker-directory-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0;
  padding-right: 0;
}
[data-theme="light"] .broker-mgmt-main .broker-directory-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.brokers-directory-section-kicker {
  margin: 0;
  padding: 2px 0 12px;
  box-sizing: border-box;
}
.brokers-all-brokers-heading {
  margin: 0;
  padding: 0;
  display: block;
  text-align: left;
  font-family: 'Inter', var(--font-primary), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a1a1aa;
  line-height: 1.25;
}
.broker-directory-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0 0 12px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
.broker-directory-toolbar--actions-only {
  justify-content: flex-end;
}
.broker-directory-search-wrap {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 28rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border: none;
  border-bottom: 1px solid #27272a;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}
.broker-directory-search-spacer {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 28rem;
  height: 1px;
}
.broker-dir-search-icon {
  flex-shrink: 0;
  color: #71717a;
  pointer-events: none;
}
.broker-directory-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: 'Inter', var(--font-primary), system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #fafafa;
  outline: none;
  box-shadow: none;
}
.broker-directory-search-input::placeholder {
  color: #71717a;
}
[data-theme="light"] .broker-directory-search-wrap {
  border-bottom-color: #e4e4e7;
}
[data-theme="light"] .broker-directory-search-input {
  color: #18181b;
}
[data-theme="light"] .broker-directory-search-input::placeholder {
  color: #a1a1aa;
}
.btn-add-broker-header {
  flex-shrink: 0;
  align-self: center;
  font-family: 'Inter', var(--font-primary), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff !important;
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-tertiary) 42%, var(--color-accent-light) 100%) !important;
  border: none !important;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: none;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.btn-add-broker-header:hover {
  filter: brightness(1.06);
}
.btn-add-broker-header:active {
  filter: brightness(0.96);
}
.broker-directory-toolbar-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}
.btn-add-broker-header--secondary {
  color: var(--color-text-primary, #e4e4e7) !important;
  background: transparent !important;
  border: 1px solid #3f3f46 !important;
  box-shadow: none;
}
.btn-add-broker-header--secondary:hover {
  filter: none;
  background: rgba(255, 255, 255, 0.06) !important;
}
.broker-directory-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
[data-theme="light"] .btn-add-broker-header--secondary {
  color: #18181b !important;
  border-color: #cbd5e1 !important;
}
[data-theme="light"] .btn-add-broker-header--secondary:hover {
  background: #f1f5f9 !important;
}
[data-theme="light"] .brokers-all-brokers-heading {
  color: #64748b;
}
.broker-directory-table {
  border: none !important;
  background: transparent !important;
}
.broker-directory-table thead th.broker-dir-th {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #a1a1aa !important;
  border: none !important;
  background: transparent !important;
  padding-top: 8px;
  padding-bottom: 10px;
  transition: color 0.12s ease;
}
.broker-directory-table thead th.broker-dir-th-sortable {
  cursor: pointer;
  user-select: none;
}
.broker-directory-table thead th.broker-dir-th-sortable:hover .broker-dir-th-label {
  color: #d4d4d8;
}
.broker-directory-table thead th.broker-dir-th--sorted .broker-dir-th-label {
  color: #fafafa !important;
}
[data-theme="light"] .broker-directory-table thead th.broker-dir-th--sorted .broker-dir-th-label {
  color: #0f172a !important;
}
.broker-dir-th-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.broker-directory-table thead th.broker-dir-th-actions .broker-dir-th-inner {
  width: 100%;
  justify-content: flex-end;
}
.broker-dir-sort-arrow {
  display: none !important;
}
[data-theme="light"] .broker-dir-sort-arrow {
  display: none !important;
}
.broker-directory-table thead th.broker-dir-th-added {
  width: 6.5rem;
  white-space: nowrap;
}
.broker-dir-added {
  font-size: 12px;
  font-weight: 500;
  color: rgba(161, 161, 170, 0.9);
  font-variant-numeric: tabular-nums;
}
[data-theme="light"] .broker-dir-added {
  color: #64748b;
}
.broker-directory-table thead th::after {
  display: none !important;
  content: none !important;
}
.broker-directory-table tbody td {
  border: none !important;
  border-bottom: none !important;
  background: transparent;
}
.broker-directory-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}
.broker-mgmt-page .broker-directory-table thead {
  background: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .broker-mgmt-page .broker-directory-table thead {
  background: transparent !important;
  border-bottom: none !important;
}
.broker-mgmt-page .broker-directory-table tbody tr:nth-child(even) {
  background: transparent !important;
}
.broker-mgmt-page .broker-directory-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
}
[data-theme="light"] .broker-mgmt-page .broker-directory-table tbody tr:nth-child(even) {
  background: transparent !important;
}
[data-theme="light"] .broker-mgmt-page .broker-directory-table tbody tr:hover {
  background: rgba(15, 23, 42, 0.04) !important;
  box-shadow: none !important;
}
.broker-uei-cell {
  text-align: left !important;
}
.broker-uei {
  font-family: 'Roboto Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  color: rgba(161, 161, 170, 0.95);
}
.broker-dir-th-actions,
.broker-dir-actions {
  text-align: right !important;
}
/* Modal — minimal chrome */
.bm-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.bm-modal.is-open {
  display: flex;
}
.bm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.bm-modal-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 24px 24px 20px;
  border-radius: 12px;
  background: #18181b;
  border: none;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}
.bm-modal-title {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fafafa;
  font-family: 'Inter', var(--font-primary), sans-serif;
}
.bm-modal-hint {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(161, 161, 170, 0.95);
}
.bm-modal-field {
  margin-bottom: 14px;
}
.bm-modal-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a1a1aa;
  margin-bottom: 6px;
}
.bm-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #f4f4f5;
  font-family: 'Inter', var(--font-primary), sans-serif;
  font-size: 14px;
}
.bm-modal-input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.bm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.bm-modal-cancel {
  background: transparent !important;
  color: #a1a1aa !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.bm-modal-submit {
  background: var(--color-accent) !important;
  color: #fff !important;
  font-weight: 600;
  border: 1px solid var(--color-accent) !important;
}
[data-theme="light"] .bm-modal-panel {
  background: #fff;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}
[data-theme="light"] .bm-modal-title {
  color: #0f172a;
}
[data-theme="light"] .bm-modal-hint {
  color: #64748b;
}
[data-theme="light"] .bm-modal-input {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

/* ============================================================
 * UNCATEGORIZED multiplier rows: yellowish tint, sticky styling.
 * Server-side ORDER BY pushes UNCATEGORIZED rows to the top.
 * ============================================================ */
.data-table tbody tr.row-uncategorized,
.data-table tbody tr.row-uncategorized:nth-child(odd),
.data-table tbody tr.row-uncategorized:nth-child(even) {
  background: rgba(234, 179, 8, 0.12);
  border-left: 3px solid rgba(234, 179, 8, 0.85);
}
.data-table tbody tr.row-uncategorized:hover,
.data-table tbody tr.row-uncategorized:hover td {
  background: rgba(234, 179, 8, 0.20);
}
[data-theme="light"] .data-table tbody tr.row-uncategorized,
[data-theme="light"] .data-table tbody tr.row-uncategorized:nth-child(odd),
[data-theme="light"] .data-table tbody tr.row-uncategorized:nth-child(even) {
  background: rgba(234, 179, 8, 0.18);
  border-left: 3px solid rgba(202, 138, 4, 0.95);
}
[data-theme="light"] .data-table tbody tr.row-uncategorized:hover,
[data-theme="light"] .data-table tbody tr.row-uncategorized:hover td {
  background: rgba(234, 179, 8, 0.28);
}

/* ============================================================
 * Inline "click to edit" cells: subtle pencil glyph that
 * intensifies on hover. Pairs with .editable spans in the
 * Multipliers / Categories / Broker timezones tables.
 * ============================================================ */
.data-table .editable {
  position: relative;
  padding-right: 18px;
  cursor: pointer;
}
/* Per-row pencil glyph removed by request — pen lives only in column headers. */
.data-table .editable::after { content: none !important; }
.data-table .editable { padding-right: 4px; }
.table tbody .ui-editable-pen-label::after,
.data-table tbody .ui-editable-pen-label::after,
.standard-data-table tbody .ui-editable-pen-label::after,
.if-features-table tbody .ui-editable-pen-label::after,
.broker-tbl tbody .ui-editable-pen-label::after,
.ft-table tbody .ui-editable-pen-label::after {
  content: none !important;
}
.th-edit-icon {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.95;
  font-size: 12px;
  font-weight: 600;
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
}
.th-edit-icon:hover { opacity: 1; }
[data-theme="light"] .th-edit-icon {
  color: #d97706;
  text-shadow: none;
}

/* ============================================================
 * Editable field labels: yellow pen (forms + auto-marked labels).
 * Master Data uses .md-field-label; tables use th.th-col-editable.
 * ============================================================ */
.ui-editable-pen-label::after,
.md-data-shell:not(.md-data-view-mode) .md-field-label::after {
  content: " \270E";
  opacity: 0.95;
  font-size: 12px;
  margin-left: 5px;
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.55);
  font-weight: 600;
}
[data-theme="light"] .ui-editable-pen-label::after,
[data-theme="light"] .md-data-shell:not(.md-data-view-mode) .md-field-label::after {
  color: #d97706;
  text-shadow: 0 0 0 1px color-mix(in srgb, #ffffff 35%, transparent);
}

/* ============================================================
 * Cell-hover legibility fix
 * Bootstrap defaults (--bs-table-hover-color) sometimes invert text
 * to white-on-white when a row is hovered. Force text to inherit the
 * row's foreground so cell content is always visible.
 * ============================================================ */
/* Cell-hover legibility: table body copy should follow tbl tokens (avoids white-on-white when
   theme text-primary targets shell chrome, not paper tables). */
.data-table tbody tr:hover,
.data-table tbody tr:hover td,
.data-table tbody tr:hover th,
.standard-data-table tbody tr:hover,
.standard-data-table tbody tr:hover td,
.standard-data-table tbody tr:hover th,
.brokers-table tbody tr:hover,
.brokers-table tbody tr:hover td,
.brokers-table tbody tr:hover th,
.broker-tbl tbody tr:hover,
.broker-tbl tbody tr:hover td,
.broker-tbl tbody tr:hover th,
.ft-table tbody tr:hover,
.ft-table tbody tr:hover td,
.ft-table tbody tr:hover th {
  color: var(--tbl-text) !important;
  --bs-table-hover-color: var(--tbl-text);
  --bs-table-color-state: var(--tbl-text);
  --bs-table-color: var(--tbl-text);
}
.table tbody tr:hover,
.table tbody tr:hover td,
.table tbody tr:hover th {
  color: var(--color-text-primary) !important;
  --bs-table-hover-color: var(--color-text-primary);
  --bs-table-color-state: var(--color-text-primary);
  --bs-table-color: var(--color-text-primary);
}
.data-table tbody tr:hover a:not(.btn),
.standard-data-table tbody tr:hover a:not(.btn),
.brokers-table tbody tr:hover a:not(.btn),
.broker-tbl tbody tr:hover a:not(.btn),
.ft-table tbody tr:hover a:not(.btn) {
  color: inherit;
}
.table tbody tr:hover a:not(.btn) {
  color: inherit;
}
.data-table tbody tr:hover .text-muted,
.standard-data-table tbody tr:hover .text-muted {
  color: var(--tbl-text-sec) !important;
}
.table tbody tr:hover .text-muted {
  color: var(--color-text-secondary) !important;
}

/* ============================================================
 * HANA tab table — compact density, full numeric values, sticky header.
 * Tag the table with `data-table--compact` (added in app.py).
 * ============================================================ */
.data-table.data-table--compact { font-size: 12.5px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.data-table.data-table--compact thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 8px 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--color-surface-2);
}
.data-table.data-table--compact tbody td {
  padding: 6px 10px;
  white-space: nowrap;
}
.data-table.data-table--compact tbody td.text-right { font-variant-numeric: tabular-nums; }
.data-table.data-table--compact tbody tr + tr td { border-top: 1px solid var(--color-border); }

/* ============================================================
 * COLLAPSIBLE SIDEBAR (desktop)
 * Controlled by `app-shell--sidebar-collapsed` on .app-shell (or body).
 * In collapsed state the sidebar shrinks to icon-only width and
 * labels/chevrons hide; main content margin shrinks accordingly.
 * Mobile (<=1024px) is unaffected — the existing hamburger drawer
 * logic continues to work.
 * ============================================================ */
:root { --layout-sidebar-width-collapsed: 64px; }

@media screen and (min-width: 1025px) {
  body.app-sidebar-collapsed .sidebar,
  .app-shell.app-shell--sidebar-collapsed .sidebar {
    width: var(--layout-sidebar-width-collapsed);
    min-width: var(--layout-sidebar-width-collapsed);
    overflow: visible;
  }
  body.app-sidebar-collapsed .sidebar-content,
  .app-shell.app-shell--sidebar-collapsed .sidebar-content {
    margin-left: calc(var(--layout-sidebar-width-collapsed) + var(--shell-float-inset) + var(--shell-float-gap));
  }
  body.app-sidebar-collapsed .injected-page-content {
    margin-left: calc(var(--layout-sidebar-width-collapsed) + var(--shell-float-inset) + var(--shell-float-gap));
  }

  /* Icon rail: hide labels & chrome; keep L2 in hover flyout (see .sidebar-nav-group below) */
  body.app-sidebar-collapsed .sidebar .sidebar-l1-label,
  body.app-sidebar-collapsed .sidebar-l1-chevron,
  body.app-sidebar-collapsed .sidebar-l1-chevron-btn,
  body.app-sidebar-collapsed .sidebar .sidebar-brand-text,
  body.app-sidebar-collapsed .sidebar-user-info,
  body.app-sidebar-collapsed .sidebar-section-label,
  body.app-sidebar-collapsed .sidebar-brand-row .global-topbar-brand-link,
  .app-shell.app-shell--sidebar-collapsed .sidebar .sidebar-l1-label,
  .app-shell.app-shell--sidebar-collapsed .sidebar-l1-chevron,
  .app-shell.app-shell--sidebar-collapsed .sidebar-l1-chevron-btn,
  .app-shell.app-shell--sidebar-collapsed .sidebar .sidebar-brand-text,
  .app-shell.app-shell--sidebar-collapsed .sidebar-user-info,
  .app-shell.app-shell--sidebar-collapsed .sidebar-section-label,
  .app-shell.app-shell--sidebar-collapsed .sidebar-brand-row .global-topbar-brand-link {
    display: none !important;
  }

  body.app-sidebar-collapsed .sidebar-brand-row,
  .app-shell.app-shell--sidebar-collapsed .sidebar-brand-row {
    justify-content: center;
    padding-left: 6px;
    padding-right: 6px;
    gap: 4px;
  }

  body.app-sidebar-collapsed .sidebar-user-avatar,
  .app-shell.app-shell--sidebar-collapsed .sidebar-user-avatar {
    display: none !important;
  }

  body.app-sidebar-collapsed .sidebar .sidebar-nav-group {
    position: relative;
  }
  /* Submenus as floating panels (icon-only rail) */
  body.app-sidebar-collapsed .sidebar .sidebar-nav-group .sidebar-l2-group {
    display: none !important;
    position: absolute;
    left: calc(100% + 10px);
    top: 0;
    min-width: 228px;
    max-width: min(320px, 86vw);
    max-height: min(420px, 72vh);
    overflow-y: auto;
    margin: 0 !important;
    padding: 6px 4px !important;
    background: var(--ds-shell-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 400;
    -webkit-overflow-scrolling: touch;
  }
  body.app-sidebar-collapsed .sidebar .sidebar-nav-group:hover .sidebar-l2-group,
  body.app-sidebar-collapsed .sidebar .sidebar-nav-group:focus-within .sidebar-l2-group {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
  }
  body.app-sidebar-collapsed .sidebar .sidebar-nav-group .sidebar-l2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.app-sidebar-collapsed .sidebar .sidebar-nav-group .sidebar-l2-header {
    padding-left: 12px !important;
    padding-right: 8px !important;
  }

  body.app-sidebar-collapsed .sidebar-l1-split-row,
  body.app-sidebar-collapsed .sidebar-l1,
  .app-shell.app-shell--sidebar-collapsed .sidebar-l1-split-row,
  .app-shell.app-shell--sidebar-collapsed .sidebar-l1 {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    margin-left: 6px;
    margin-right: 6px;
    border-radius: 12px;
  }
  body.app-sidebar-collapsed .sidebar-l1-link,
  .app-shell.app-shell--sidebar-collapsed .sidebar-l1-link {
    justify-content: center;
    width: 100%;
    padding: 8px 0;
    border-radius: 0;
  }
  body.app-sidebar-collapsed .sidebar-footer,
  .app-shell.app-shell--sidebar-collapsed .sidebar-footer {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Collapse control lives in the sidebar header — keep visible & tappable (desktop). */
.sidebar .global-topbar-collapse-btn {
  color: var(--color-text-secondary);
  margin-right: 4px;
}
.sidebar .global-topbar-collapse-btn:hover {
  color: var(--color-text-primary);
}
[data-theme="light"] .sidebar .global-topbar-collapse-btn {
  color: color-mix(in srgb, var(--text-light) 78%, transparent);
}
[data-theme="light"] .sidebar .global-topbar-collapse-btn:hover {
  color: var(--text-light);
}

/* Topbar collapse-toggle button (desktop only). */
.global-topbar-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.global-topbar-collapse-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}
@media screen and (max-width: 1024px) {
  .global-topbar-collapse-btn { display: none; }
}

/* ==========================================================================
   LOGIN INFO — Brokers Portal & Metatrader shared chrome
   ========================================================================== */
.login-info-wrap {
  padding: var(--layout-content-padding-top) var(--layout-page-padding) 64px;
  max-width: 1280px;
  margin: 0 auto;
}
.login-info-client-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.login-info-client-hero__text {
  flex: 1 1 240px;
  min-width: 0;
}
.login-info-client-hero .dash-client-title {
  margin: 0 0 6px;
}
.login-info-client-hero .client-context-banner__subtitle {
  margin: 0;
}
.login-info-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.login-info-table th,
.login-info-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
}
.login-info-table th {
  background: var(--color-surface-3);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.login-info-table tr:last-child td {
  border-bottom: none;
}
.li-input {
  width: 100%;
  min-width: 110px;
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.li-input:hover,
.li-input:focus {
  border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface-1) 55%, transparent);
  outline: none;
}
.li-textarea {
  min-height: 4.5rem;
  resize: vertical;
  line-height: 1.45;
}
.li-pw-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.li-pw-cell .li-input {
  flex: 1;
}
.li-icon-btn {
  flex-shrink: 0;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 32%, var(--color-border));
  color: var(--color-accent-light, var(--color-accent));
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.li-icon-btn:hover {
  color: var(--color-text-primary);
  border-color: color-mix(in srgb, var(--color-accent) 48%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  transform: translateY(-1px);
}
/* Compact green save — same padding/size as Show/Copy (.li-icon-btn) */
.li-icon-btn.li-icon-btn--save {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #22c55e 78%, #ffffff 22%) 0%,
    #22c55e 55%,
    #16a34a 100%
  );
  border: 1px solid color-mix(in srgb, #22c55e 50%, #0f172a 50%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 35%, transparent),
    0 2px 12px color-mix(in srgb, #22c55e 28%, transparent);
}
.li-icon-btn.li-icon-btn--save:hover {
  color: #ffffff;
  border-color: color-mix(in srgb, #22c55e 42%, #0f172a 58%);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #4ade80 55%, #22c55e) 0%,
    #16a34a 100%
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent),
    0 3px 16px color-mix(in srgb, #22c55e 36%, transparent);
}
.li-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.li-empty {
  padding: 22px;
  text-align: center;
  color: var(--color-text-secondary);
  font-style: italic;
}
.li-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.li-toolbar--subscribe {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.li-toolbar-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.li-broker-select {
  min-width: 12rem;
  max-width: 18rem;
}
.li-broker-subscribe-hint,
.li-broker-subscribe-empty {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--color-text-secondary);
  max-width: 28rem;
}
.li-broker-subscribe-hint a,
.li-broker-subscribe-empty a {
  color: var(--color-accent-light);
}
.li-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.li-banner--warn {
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 35%, transparent);
  color: var(--color-text-primary);
}
.li-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.li-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-primary);
}
.li-portal-link {
  color: var(--color-accent-light);
  word-break: break-all;
}

/* Broker cards: floating glass + bento layout */
.li-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 28px;
}
.li-card-grid--broker-portal {
  /* Exactly two tiles per row so bento (Portal | Security) has enough width */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  align-items: start;
}
.li-card-grid--broker-portal > .li-card {
  min-width: 0;
}
.li-card-grid--broker-portal .li-card-panel {
  min-width: 0;
}
@media (max-width: 1024px) {
  .li-card-grid--broker-portal {
    grid-template-columns: 1fr;
  }
}
.li-card-grid--broker-portal .li-field-row {
  min-width: 0;
}
.li-card-grid--broker-portal .li-field-row .li-input {
  min-width: 0;
}

/* Metatrader accounts — glass tile grid (replaces flat table); two tiles per row on desktop */
.li-card-grid--metatrader {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  align-items: start;
}
.li-card-grid--metatrader > .li-card {
  min-width: 0;
}
@media (max-width: 1024px) {
  .li-card-grid--metatrader {
    grid-template-columns: 1fr;
  }
}
/* Single vertical flow inside Metatrader tiles (no nested bordered panels) */
.li-mt-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 18px 22px 22px;
}
.li-mt-pw-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 80%, var(--color-accent) 20%);
}
.li-mt-pw-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.li-mt-dl {
  display: grid;
  gap: 12px 16px;
  margin: 0;
}
.li-mt-dl > div {
  display: grid;
  gap: 3px;
}
.li-mt-dl dt {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.li-mt-dl dd {
  margin: 0;
  font-size: clamp(0.9375rem, 0.35vw + 0.82rem, 1.0625rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.li-mt-dd-mono {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.li-mt-pw-form {
  margin: 0;
}
.li-mt-pw-actions {
  flex-wrap: wrap;
}
.li-metatrader-search-empty {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.li-card.li-card--glass {
  position: relative;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-surface-2) 42%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border));
  backdrop-filter: blur(var(--ds-glass-blur, 20px)) saturate(var(--ds-glass-saturate, 120%));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur, 20px)) saturate(var(--ds-glass-saturate, 120%));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 12%, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-accent) 14%, transparent),
    0 20px 50px -18px color-mix(in srgb, var(--sidebar-dark) 55%, transparent),
    0 8px 32px -12px color-mix(in srgb, var(--color-accent) 25%, transparent);
  transform: translateY(0);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.li-card.li-card--glass:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--color-accent) 38%, var(--color-border));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 16%, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-accent) 28%, transparent),
    0 28px 64px -16px color-mix(in srgb, var(--sidebar-dark) 58%, transparent),
    0 12px 44px -10px color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.li-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding: 20px 22px 16px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-accent) 18%, transparent) 0%,
    color-mix(in srgb, var(--color-surface-3) 35%, transparent) 55%,
    transparent 100%
  );
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 75%, var(--color-accent) 25%);
}
.li-card-eyebrow {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  opacity: 0.9;
}
.li-card-header .li-card-title-name {
  margin: 0;
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--color-text-primary);
  border: none;
  padding: 0;
  background: none;
}
.li-card-status-pill {
  flex-shrink: 0;
  align-self: center;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light, #f8fafc);
  background: color-mix(in srgb, var(--color-accent) 52%, var(--sidebar-dark));
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 28%, transparent);
}
.li-card-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 18px 20px 8px;
}
@media (min-width: 520px) {
  .li-card-bento {
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
  }
  .li-card-panel--span {
    grid-column: 1 / -1;
  }
}
.li-card-panel {
  padding: 14px 16px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-surface-1) 38%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-accent) 12%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-light) 6%, transparent);
}
.li-card-panel-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 90%, var(--color-accent) 10%);
}
.li-card-panel .li-field:last-child {
  margin-bottom: 0;
}
.li-card-panel--notes {
  margin: 0 20px 20px;
  padding: 14px 16px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-surface-1) 38%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-accent) 12%);
}
.li-card-panel--notes .li-card-panel-title {
  margin-bottom: 10px;
}
.li-card-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 0;
  padding: 16px 20px 20px;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-accent) 18%);
  background: color-mix(in srgb, var(--color-surface-2) 25%, transparent);
}
.li-broker-portal-search-empty {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.li-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.li-field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}
.li-field-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.li-field-row .li-input {
  flex: 1;
}
.li-promo-checks-stack {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.li-promo-readonly-summary {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.45;
}

/* Broker Portal: show readonly fields with a slightly muted style. */
.li-input[readonly] { background: rgba(255,255,255,0.03); cursor: default; }
[data-theme="light"] .li-input[readonly] { background: rgba(15,23,42,0.04); }

/* Brokers Portal — clearer hierarchy, spaced fields, section color cues */
.li-card--broker .li-card-bento {
  padding: 20px 22px 14px;
  gap: 18px 22px;
}
.li-card--broker .li-card-panel {
  padding: 18px 18px 22px;
  border-radius: 16px;
}
.li-card--broker .li-card-panel--portal {
  border-left: 3px solid color-mix(in srgb, #38bdf8 78%, var(--color-border));
}
.li-card--broker .li-card-panel--security {
  border-left: 3px solid color-mix(in srgb, #818cf8 78%, var(--color-border));
}
.li-card--broker .li-card-panel--account {
  border-left: 3px solid color-mix(in srgb, #2dd4bf 78%, var(--color-border));
}
.li-card--broker .li-card-panel-title {
  text-transform: none;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 86%, var(--color-accent) 14%);
  display: flex;
  align-items: center;
  gap: 12px;
}
.li-card--broker .li-card-panel-title-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}
.li-card--broker .li-card-panel-title::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 35%, #94a3b8));
  box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.li-card--broker .li-card-panel--portal .li-card-panel-title::before {
  background: linear-gradient(145deg, #7dd3fc, #0284c7);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.42);
}
.li-card--broker .li-card-panel--security .li-card-panel-title::before {
  background: linear-gradient(145deg, #c4b5fd, #6366f1);
  box-shadow: 0 0 18px rgba(129, 140, 248, 0.42);
}
.li-card--broker .li-card-panel--account .li-card-panel-title::before {
  background: linear-gradient(145deg, #6ee7b7, #0d9488);
  box-shadow: 0 0 18px rgba(45, 212, 191, 0.4);
}
.li-card--broker .li-card-panel--notes .li-card-panel-title::before {
  background: linear-gradient(145deg, #fde68a, #d97706);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.38);
}
.li-card--broker .li-field {
  gap: 8px;
  margin-bottom: 18px;
}
.li-card--broker .li-field-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: color-mix(in srgb, var(--color-text-primary) 82%, var(--color-text-secondary));
}
.li-card--broker .li-input,
.li-card--broker select.li-input {
  min-height: 46px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.4;
  border-radius: 12px;
}
.li-card--broker .li-icon-btn {
  min-height: 42px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 10px;
}
.li-card--broker .li-value-display {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  background: color-mix(in srgb, var(--color-surface-2) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 75%, var(--color-accent) 12%);
  color: var(--color-text-primary);
  min-height: 46px;
  box-sizing: border-box;
}
.li-card--broker .li-card-status-pill {
  font-size: 11px;
  line-height: 1.35;
  padding: 8px 14px;
  white-space: normal;
  text-align: left;
  max-width: min(100%, 20rem);
  font-weight: 700;
}
.li-card--broker .li-card-panel--notes {
  margin: 4px 22px 12px;
  padding: 18px 20px 24px;
  border-radius: 16px;
  border-left: 3px solid color-mix(in srgb, #fbbf24 65%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface-1) 45%, transparent);
}
.li-card--broker .li-card-panel--notes .li-card-panel-title {
  margin-bottom: 12px;
}
.li-card--broker .li-textarea {
  min-height: 110px;
  font-size: 14px;
  line-height: 1.5;
}
.li-card--broker .li-card-actions {
  padding: 18px 22px 26px;
}
.li-card--broker .li-card-actions .btn {
  min-height: 42px;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 600;
}
.li-card--broker .li-promo-readonly-summary {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-surface-2) 55%, transparent);
  border: 1px dashed color-mix(in srgb, var(--color-border) 80%, var(--color-accent) 15%);
  font-size: 13px;
}

/* ==========================================================================
   FLATPICKR — light calendar popover (consistent across themes)
   ========================================================================== */
.flatpickr-calendar {
  border-radius: 14px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  font-family: inherit;
}

.flatpickr-calendar.open {
  position: fixed !important;
  z-index: 100050 !important;
}

.flatpickr-calendar.ds-fp-positioned:before,
.flatpickr-calendar.ds-fp-positioned:after {
  left: var(--ds-fp-arrow-left, 22px);
  right: auto;
}

.flatpickr-months .flatpickr-month {
  background: transparent;
  color: #0f172a;
  fill: #0f172a;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  font-weight: 600;
  color: #0f172a;
}

.flatpickr-weekdays {
  background: transparent;
}

span.flatpickr-weekday {
  color: #64748b;
  font-weight: 600;
}

.flatpickr-day {
  color: #0f172a;
  border-radius: 8px;
}

.flatpickr-day:hover {
  background: rgba(37, 99, 235, 0.12);
  border-color: transparent;
}

.flatpickr-day.today {
  border-color: rgba(37, 99, 235, 0.45);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #94a3b8;
}

.ds-flatpickr-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

.ds-flatpickr-foot-btn {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.ds-flatpickr-foot-btn:hover {
  background: rgba(37, 99, 235, 0.1);
}

.ds-flatpickr-foot-btn--primary {
  color: #1d4ed8;
}

input.ds-date-input.flatpickr-input,
input.ds-date-input {
  cursor: pointer;
}

/* ==========================================================================
   PHASE A — GLOBAL SHELL POLISH (sidebar persistence, mobile drawer, fade-in)
   ==========================================================================
   Goals:
   - Pre-paint collapse class on <html> mirrors the body-scoped legacy rules
     so the layout doesn't shift after JS injects the sidebar on every nav.
   - A floating hamburger lives outside the sidebar so phones can open it
     when the drawer is closed.
   - Smooth body fade-in is driven by html[data-app-ready="1"] (set in
     theme.js / common.js after injection).
   ========================================================================== */

/* Mirror sidebar-collapse rules from ody.app-sidebar-collapsed onto
   html.app-sidebar-collapsed for the pre-paint phase. theme.js applies
   the class to <html> in <head>; common.js then mirrors it to <body> for
   the rest of the (pre-existing) rules. */
@media screen and (min-width: 1025px) {
  html.app-sidebar-collapsed body .sidebar {
    width: var(--layout-sidebar-width-collapsed);
    min-width: var(--layout-sidebar-width-collapsed);
    overflow: visible;
  }
  html.app-sidebar-collapsed body .injected-page-content,
  html.app-sidebar-collapsed body .sidebar-content {
    margin-left: calc(var(--layout-sidebar-width-collapsed) + var(--shell-float-inset) + var(--shell-float-gap));
  }
  html.app-sidebar-collapsed body .sidebar .sidebar-l1-label,
  html.app-sidebar-collapsed body .sidebar-l1-chevron,
  html.app-sidebar-collapsed body .sidebar-l1-chevron-btn,
  html.app-sidebar-collapsed body .sidebar .sidebar-brand-text,
  html.app-sidebar-collapsed body .sidebar-user-info,
  html.app-sidebar-collapsed body .sidebar-section-label,
  html.app-sidebar-collapsed body .sidebar-brand-row .global-topbar-brand-link {
    display: none !important;
  }
}

/* Floating mobile hamburger (only visible <=1024px). Hidden on desktop. */
.mobile-sidebar-open-btn {
  display: none;
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  z-index: 600;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--ds-border, rgba(255,255,255,0.12));
  background: var(--ds-shell-bg, var(--sidebar-dark));
  color: var(--text-light, var(--text-dark));
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.32);
  -webkit-tap-highlight-color: transparent;
}
.mobile-sidebar-open-btn:hover { background: color-mix(in srgb, var(--ds-shell-bg, var(--sidebar-dark)) 78%, var(--accent-soft) 22%); }

@media screen and (max-width: 1024px) {
  .mobile-sidebar-open-btn {
    display: inline-flex;
    z-index: 1300;
  }
  /* Keep search topbar from stealing taps meant for the hamburger. */
  .injected-global-topbar.global-topbar--search-only,
  .global-topbar.global-topbar--search-only {
    padding-left: max(56px, calc(44px + env(safe-area-inset-left, 0px) + 8px));
    pointer-events: none;
  }
  .injected-global-topbar.global-topbar--search-only .global-topbar-search-wrap,
  .injected-global-topbar.global-topbar--search-only .global-topbar-center,
  .injected-global-topbar.global-topbar--search-only .global-topbar-right,
  .injected-global-topbar.global-topbar--search-only .global-topbar-left,
  .global-topbar.global-topbar--search-only .global-topbar-inner,
  .global-topbar.global-topbar--search-only .global-topbar-search-wrap,
  .global-topbar.global-topbar--search-only .global-topbar-center,
  .global-topbar.global-topbar--search-only .global-topbar-right,
  .global-topbar.global-topbar--search-only .global-topbar-search-input,
  .global-topbar.global-topbar--search-only .global-topbar-search-status {
    pointer-events: auto;
  }
  /* Push the page content down so titles don't sit under the hamburger. */
  .injected-page-content {
    padding-top: max(56px, calc(44px + env(safe-area-inset-top, 0px) + 8px));
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
  }
  /* Keep the floating menu button visible when the drawer is open so users
     can always close it (in-drawer toggle is easy to miss on tall fold screens). */
  body.sidebar-drawer-open .mobile-sidebar-open-btn {
    z-index: 1400;
  }
}

/* Drawer dimming overlay (toggled via body.sidebar-drawer-open in common.js) */
.sidebar-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 350;
  background: rgba(0, 0, 0, 0.48);
  -webkit-tap-highlight-color: transparent;
}
body.sidebar-drawer-open {
  overflow: hidden;
}
body.sidebar-drawer-open .sidebar-drawer-backdrop {
  display: block;
  z-index: 1300;
}
@media screen and (min-width: 1025px) {
  .sidebar-drawer-backdrop { display: none !important; }
}

/* Fold inner portrait (769–1024): docked nav — keep enough room for page content. */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .sidebar {
    width: min(280px, 30vw);
  }
}

body.sidebar-tablet-persistent .sidebar {
  transform: translate3d(0, 0, 0) !important;
  z-index: 1100;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
  /* Keep the floating panel look while docked */
  top: var(--shell-float-inset);
  left: var(--shell-float-inset);
  bottom: var(--shell-float-inset);
  height: auto;
  max-height: calc(100dvh - 2 * var(--shell-float-inset));
  border-radius: var(--radius-lg);
}
body.sidebar-tablet-persistent .sidebar-drawer-backdrop {
  display: none !important;
}
body.sidebar-tablet-persistent .mobile-sidebar-open-btn {
  display: none !important;
}
body.sidebar-tablet-persistent .injected-global-topbar.global-topbar--search-only,
body.sidebar-tablet-persistent .global-topbar.global-topbar--search-only {
  left: calc(min(280px, 30vw) + var(--shell-float-inset) + var(--shell-float-gap));
  right: var(--shell-float-inset);
  padding-left: 16px;
  pointer-events: none;
}
body.sidebar-tablet-persistent .injected-global-topbar.global-topbar--search-only .global-topbar-inner,
body.sidebar-tablet-persistent .injected-global-topbar.global-topbar--search-only .global-topbar-center,
body.sidebar-tablet-persistent .injected-global-topbar.global-topbar--search-only .global-topbar-search-wrap,
body.sidebar-tablet-persistent .injected-global-topbar.global-topbar--search-only .global-topbar-search-input,
body.sidebar-tablet-persistent .global-topbar.global-topbar--search-only .global-topbar-inner,
body.sidebar-tablet-persistent .global-topbar.global-topbar--search-only .global-topbar-center,
body.sidebar-tablet-persistent .global-topbar.global-topbar--search-only .global-topbar-search-wrap,
body.sidebar-tablet-persistent .global-topbar.global-topbar--search-only .global-topbar-search-input,
body.sidebar-tablet-persistent .global-topbar.global-topbar--search-only .global-topbar-search-status {
  pointer-events: auto;
}
body.sidebar-tablet-persistent .injected-page-content,
body.sidebar-tablet-persistent .app-shell > .sidebar-content {
  margin-left: 0 !important;
  width: 100%;
  max-width: 100%;
  padding-top: var(--layout-content-padding-top, 72px);
  padding-left: calc(min(280px, 30vw) + var(--shell-float-inset) + 12px) !important;
  padding-right: max(var(--spacing-6), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}
body.sidebar-tablet-persistent .injected-page-content .main-container,
body.sidebar-tablet-persistent .injected-page-content .page-wrapper,
body.sidebar-tablet-persistent .injected-page-content .page-card {
  max-width: none;
  width: 100%;
}
body.sidebar-tablet-persistent {
  overflow: auto;
}

/* Fold landscape / wide touch (>1024): docked full nav — never the icon-only rail. */
body.sidebar-touch-expanded .sidebar {
  /* Docked but with the floating panel look (inset + rounded) */
  top: var(--shell-float-inset);
  left: var(--shell-float-inset);
  bottom: var(--shell-float-inset);
  height: auto;
  max-height: calc(100dvh - 2 * var(--shell-float-inset));
  width: var(--layout-sidebar-width);
  min-width: var(--layout-sidebar-width);
  border-radius: var(--radius-lg);
  transform: translate3d(0, 0, 0) !important;
  z-index: 1100;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
}
body.sidebar-touch-expanded .sidebar-drawer-backdrop {
  display: none !important;
}
body.sidebar-touch-expanded .mobile-sidebar-open-btn {
  display: none !important;
}
body.sidebar-touch-expanded .global-topbar-collapse-btn {
  display: none !important;
}
body.sidebar-touch-expanded .injected-global-topbar.global-topbar--search-only,
body.sidebar-touch-expanded .global-topbar.global-topbar--search-only {
  left: calc(var(--layout-sidebar-width) + var(--shell-float-inset) + var(--shell-float-gap));
  right: var(--shell-float-inset);
  padding-left: 16px;
  pointer-events: none;
}
body.sidebar-touch-expanded .injected-global-topbar.global-topbar--search-only .global-topbar-inner,
body.sidebar-touch-expanded .injected-global-topbar.global-topbar--search-only .global-topbar-center,
body.sidebar-touch-expanded .injected-global-topbar.global-topbar--search-only .global-topbar-search-wrap,
body.sidebar-touch-expanded .injected-global-topbar.global-topbar--search-only .global-topbar-search-input,
body.sidebar-touch-expanded .global-topbar.global-topbar--search-only .global-topbar-inner,
body.sidebar-touch-expanded .global-topbar.global-topbar--search-only .global-topbar-center,
body.sidebar-touch-expanded .global-topbar.global-topbar--search-only .global-topbar-search-wrap,
body.sidebar-touch-expanded .global-topbar.global-topbar--search-only .global-topbar-search-input,
body.sidebar-touch-expanded .global-topbar.global-topbar--search-only .global-topbar-search-status {
  pointer-events: auto;
}
body.sidebar-touch-expanded .injected-page-content,
body.sidebar-touch-expanded .app-shell > .sidebar-content {
  margin-left: 0 !important;
  width: 100%;
  max-width: 100%;
  padding-top: var(--layout-content-padding-top, 72px);
  padding-left: calc(var(--layout-sidebar-width) + var(--shell-float-inset) + var(--shell-float-gap)) !important;
  padding-right: max(var(--spacing-6), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}
body.sidebar-touch-expanded .injected-page-content .main-container,
body.sidebar-touch-expanded .injected-page-content .page-wrapper,
body.sidebar-touch-expanded .injected-page-content .page-card {
  max-width: none;
  width: 100%;
}
body.sidebar-touch-expanded {
  overflow: auto;
}

/* Fold shells: trading Account Overview must use full content width (not a centered narrow column). */
body.sidebar-tablet-persistent .account-overview-roster,
body.sidebar-touch-expanded .account-overview-roster {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
body.sidebar-tablet-persistent .account-overview-roster .ao-groups,
body.sidebar-touch-expanded .account-overview-roster .ao-groups {
  gap: 12px;
}
body.sidebar-tablet-persistent .account-overview-roster .ao-group-grid--three,
body.sidebar-touch-expanded .account-overview-roster .ao-group-grid--three {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (max-width: 600px) {
  body.sidebar-tablet-persistent .account-overview-roster .ao-group-grid,
  body.sidebar-tablet-persistent .account-overview-roster .ao-group-grid--three,
  body.sidebar-touch-expanded .account-overview-roster .ao-group-grid,
  body.sidebar-touch-expanded .account-overview-roster .ao-group-grid--three {
    grid-template-columns: 1fr;
  }
}
body.sidebar-tablet-persistent .hana-card-grid,
body.sidebar-touch-expanded .hana-card-grid {
  max-width: none;
}

@media (pointer: coarse) {
  .global-topbar-collapse-btn {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* ── Mobile table card view (enableResponsiveTables in common.js) ── */
.mobile-view-toggle {
  margin-bottom: 10px;
}
.mobile-view-toggle .btn {
  min-height: 44px;
}
.table-card-list {
  display: none;
  flex-direction: column;
  gap: 10px;
}
.data-table-container.cards-active .table-card-list,
.table-container.cards-active .table-card-list,
.scroll-container.cards-active .table-card-list,
.cr-reports-table-wrap.cards-active .table-card-list {
  display: flex;
}
.data-table-container.cards-active:not(.show-table) table,
.table-container.cards-active:not(.show-table) table,
.scroll-container.cards-active:not(.show-table) table,
.cr-reports-table-wrap.cards-active:not(.show-table) table {
  display: none;
}
.data-table-container.show-table table,
.table-container.show-table table,
.scroll-container.show-table table,
.cr-reports-table-wrap.show-table table {
  display: table;
}
.data-table-container.show-table .table-card-list,
.table-container.show-table .table-card-list,
.scroll-container.show-table .table-card-list,
.cr-reports-table-wrap.show-table .table-card-list {
  display: none;
}
.table-card {
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-md, 10px);
  padding: 12px 14px;
  background: var(--color-surface-2, rgba(255, 255, 255, 0.04));
}
.table-card-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  font-size: 13px;
}
.table-card-row:last-child {
  border-bottom: none;
}
.table-card-label {
  flex: 0 0 38%;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary, #94a3b8);
}
.table-card-value {
  flex: 1 1 auto;
  text-align: right;
  word-break: break-word;
}
.table-card-actions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.injected-page-content .table-container,
.page-body .table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── Trading page: phone / fold ── */
@media screen and (max-width: 768px) {
  .ao-card-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .client-trading-tabs .tabs-header {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }
  .client-trading-tabs .tab-button {
    flex: 0 0 auto;
    min-width: auto;
    padding: 8px 14px 10px;
    font-size: 12px;
    scroll-snap-align: start;
  }
  .portfolio-positions-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .portfolio-positions-toolbar .btn,
  .portfolio-positions-toolbar label,
  .portfolio-positions-toolbar select {
    width: 100%;
    max-width: 100%;
  }
  .portfolio-category-delta-inner .portfolio-expected-input,
  .portfolio-category-delta-inner .category-delta-dmx__input {
    width: 100%;
    min-width: 0;
  }
  .client-trading-tabs .data-table.data-table-wide {
    min-width: 0;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .ao-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  }
  .client-trading-tabs .tabs-header {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Delta management + product pages: prevent chip/toolbars from widening the document */
@media screen and (max-width: 768px) {
  .category-delta-sortbar,
  .category-delta-tile-orderbar,
  .dmx-toolbar,
  .products-delta-toolbar {
    flex-wrap: wrap;
    max-width: 100%;
    gap: 8px;
  }
  .category-delta-grid {
    grid-template-columns: 1fr;
  }
  .category-delta-card,
  .category-delta-dmx {
    max-width: 100%;
    min-width: 0;
  }
  .injected-page-content .page-wrapper,
  .injected-page-content .main-container,
  .injected-page-content .page-card {
    max-width: 100%;
    box-sizing: border-box;
  }
  #section-delta-management,
  .dm-categories-manager,
  .dm-multipliers-section {
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
  }
  .dm-categories-header {
    flex-direction: column;
    align-items: stretch;
  }
  .dm-add-category-form {
    width: 100%;
    flex-wrap: wrap;
  }
  .dm-add-category-form input[type="text"] {
    min-width: 0;
    width: 100%;
    flex: 1 1 100%;
  }
  .dm-multipliers-table-wrap {
    max-width: 100%;
    width: 100%;
  }
}

/* Smooth page fade once the shell signals ready. theme.js declares the
   keyframes/visibility rules inline in <head>; this rule is here so future
   page-specific overrides can extend it consistently. */
html[data-app-ready="1"] .injected-page-content {
  animation: appPageFadeIn 140ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  html[data-app-ready="1"] .injected-page-content { animation: none; }
}
/* ==========================================================================
   PHASE C — TRADING PAGE CARDS (Account Overview, HANA) + Categories polish
   ========================================================================== */

/* ---- Account Overview cards ---- */
.ao-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding: 14px 16px;
}
.ao-card {
  background: color-mix(in srgb, var(--tbl-surface) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, var(--ds-glass-rim) 45%);
  border-radius: var(--radius-lg);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 8%, transparent),
    0 12px 40px -12px color-mix(in srgb, var(--sidebar-dark) 52%, transparent),
    0 4px 16px -4px color-mix(in srgb, var(--sidebar-dark) 42%, transparent);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.ao-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-soft) 28%, var(--ds-card-border) 72%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 10%, transparent),
    0 16px 48px -12px color-mix(in srgb, var(--sidebar-dark) 54%, transparent),
    0 6px 18px -6px color-mix(in srgb, var(--sidebar-dark) 44%, transparent);
}
.ao-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--ds-border, rgba(255,255,255,0.08));
  padding-bottom: 10px;
}
.ao-card-broker {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-dark);
  letter-spacing: -0.01em;
}
.ao-card-login {
  font-size: 12px;
  color: var(--ds-text-secondary, color-mix(in srgb, var(--text-dark) 58%, transparent));
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
/* ---- Account Overview cards: three visual groups ----
   Group 1 (capital, base ccy): Equity hero + Balance + Credit
   Group 2 (USD):                Equity USD hero
   Group 3 (margin, base ccy):   Margin + Free Margin + Margin Level %
   Each group lives in its own tinted/bordered panel so the relationship
   between the metric and its currency context is obvious at a glance. */
.ao-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ao-group {
  --ao-panel-bg: color-mix(in srgb, var(--accent-soft) 6%, transparent);
  --ao-panel-border: color-mix(in srgb, var(--accent-soft) 18%, transparent);
  background: var(--ao-panel-bg);
  border: 1px solid var(--ao-panel-border);
  border-radius: 10px;
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow: visible;
}
.ao-group--capital {
  --ao-panel-bg: color-mix(in srgb, var(--accent-soft) 9%, transparent);
  --ao-panel-border: color-mix(in srgb, var(--accent-soft) 28%, transparent);
}
.ao-group--usd {
  --ao-panel-bg: color-mix(in srgb, var(--accent-soft) 4%, transparent);
  --ao-panel-border: color-mix(in srgb, var(--accent-soft) 14%, transparent);
  border-style: dashed;
}
.ao-group--margin {
  --ao-panel-bg: color-mix(in srgb, var(--accent-soft) 5%, transparent);
  --ao-panel-border: color-mix(in srgb, var(--accent-soft) 16%, transparent);
}
.ao-group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ao-group-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-text-secondary, color-mix(in srgb, var(--text-dark) 60%, transparent));
}
.ao-group-ccy {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 14%, transparent);
  color: var(--accent-soft);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.ao-group-hero {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}
.ao-group-hero-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-text-secondary, color-mix(in srgb, var(--text-dark) 58%, transparent));
  margin-right: 4px;
}
.ao-group-hero-prefix {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-soft);
  margin-right: 1px;
}
.ao-group-hero-value {
  font-size: clamp(1rem, 4cqi, 1.625rem);
  font-weight: 700;
  color: var(--accent-soft);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
  line-height: 1.05;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.ao-group-hero--usd .ao-group-hero-value {
  font-size: clamp(0.95rem, 3.5cqi, 1.375rem);
}
.ao-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  margin: 0;
}
.ao-group-grid--three {
  grid-template-columns: 1fr 1fr 1fr;
}
.ao-pair {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0;
  min-width: 0;
}
.ao-pair > dt {
  margin: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-text-secondary, color-mix(in srgb, var(--text-dark) 58%, transparent));
}
.ao-pair > dd {
  margin: 0;
  font-size: clamp(12px, 1.6cqi, 14px);
  font-weight: 500;
  color: var(--text-dark);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.ao-pair--level > dd {
  font-weight: 700;
}
@media (max-width: 600px) {
  .ao-group-grid,
  .ao-group-grid--three { grid-template-columns: 1fr; }
}

/* ---- HANA cards — glass slab + soft status wash (no harsh left stripe) ---- */
.hana-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
  padding: 14px 16px;
}
.hana-card {
  --hana-status-glow: rgba(91, 143, 176, 0.14);
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--ds-surface) 88%, var(--accent-soft) 12%) 0%,
      color-mix(in srgb, var(--ds-surface-muted) 82%, var(--ds-surface) 18%) 100%
    );
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, var(--ds-glass-rim) 45%);
  border-radius: var(--radius-lg);
  padding: 14px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 9%, transparent),
    0 14px 44px -10px color-mix(in srgb, var(--sidebar-dark) 52%, transparent),
    0 6px 20px -8px color-mix(in srgb, var(--sidebar-dark) 42%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent-soft) 8%, transparent),
    inset 8px 0 32px -14px var(--hana-status-glow);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hana-card:hover {
  border-color: color-mix(in srgb, var(--accent-soft) 22%, var(--ds-card-border) 78%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 11%, transparent),
    0 20px 52px -10px color-mix(in srgb, var(--sidebar-dark) 56%, transparent),
    0 8px 24px -6px color-mix(in srgb, var(--sidebar-dark) 46%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent-soft) 12%, transparent),
    inset 8px 0 36px -12px var(--hana-status-glow);
  transform: translateY(-2px);
}
.hana-card--ok {
  --hana-status-glow: rgba(34, 197, 94, 0.16);
}
.hana-card--warn {
  --hana-status-glow: rgba(245, 158, 11, 0.18);
}
.hana-card--crit {
  --hana-status-glow: rgba(239, 68, 68, 0.2);
}

[data-theme="light"] .hana-card {
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--tbl-surface) 52%, var(--ds-surface) 48%) 0%,
      color-mix(in srgb, var(--tbl-surface) 68%, var(--accent-soft) 12%) 100%
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #f8fafc 40%, transparent),
    var(--ds-card-shadow),
    inset 8px 0 28px -14px var(--hana-status-glow);
}

[data-theme="light"] .hana-card:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #f8fafc 50%, transparent),
    var(--ds-card-shadow-hover),
    inset 8px 0 32px -12px var(--hana-status-glow);
}
.hana-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ds-border, rgba(255,255,255,0.08));
  padding-bottom: 10px;
}
.hana-card-header-text {
  flex: 1;
  min-width: 0;
}
.hana-card-broker {
  font-weight: 800;
  font-size: clamp(1.32rem, 2.75vw, 1.82rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-dark);
}
.hana-card-login {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ds-text-secondary, color-mix(in srgb, var(--text-dark) 58%, transparent));
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.hana-card-level {
  margin-top: 4px;
  font-size: 11px;
  color: var(--accent-soft, #60a5fa);
  letter-spacing: 0.02em;
}
.hana-card-header-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.hana-card-snapshot {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--ds-text-muted, color-mix(in srgb, var(--text-dark) 42%, transparent));
  white-space: nowrap;
}
.hana-card-snapshot--stale { color: #f59e0b; }

.hana-card-status {
  margin: 8px 0 4px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: fit-content;
}
.hana-card-status--ok {
  background: color-mix(in srgb, #10b981 22%, transparent);
  color: #10b981;
}
.hana-card-status--warn {
  background: color-mix(in srgb, #f59e0b 22%, transparent);
  color: #f59e0b;
}
.hana-card-status--crit {
  background: color-mix(in srgb, #ef4444 22%, transparent);
  color: #ef4444;
}

.hana-card-money {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}
.hana-money-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.hana-money-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-text-secondary, color-mix(in srgb, var(--text-dark) 58%, transparent));
}
.hana-money-value {
  display: block;
  margin: 0;
  font-size: clamp(0.95rem, 0.45vw + 0.82rem, 1.125rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
  color: color-mix(in srgb, var(--ds-text, var(--text-dark)) 72%, #ffffff 28%);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--sidebar-dark, #0f172a) 55%, transparent);
}
[data-theme="light"] .hana-money-value {
  color: #0f172a;
  text-shadow: none;
}

.hana-bar-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hana-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.hana-bar-label {
  color: var(--ds-text-secondary, color-mix(in srgb, var(--text-dark) 58%, transparent));
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hana-bar-track {
  height: 8px;
  background: color-mix(in srgb, var(--ds-text-muted, #888) 20%, transparent);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.hana-bar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 220ms ease;
}
.hana-bar-track[data-state="ok"]   .hana-bar-fill { background: linear-gradient(90deg, #22c55e, #16a34a); }
.hana-bar-track[data-state="warn"] .hana-bar-fill { background: linear-gradient(90deg, #f59e0b, #d97706); }
.hana-bar-track[data-state="crit"] .hana-bar-fill { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.hana-bar-value {
  font-feature-settings: "tnum" 1;
  font-size: 12px;
  color: var(--text-dark);
}
.hana-bar-value strong { font-weight: 700; }

@media (max-width: 600px) {
  .hana-card-money { grid-template-columns: 1fr; }
  .hana-bar-row { grid-template-columns: 96px 1fr auto; }
}

/* ---- Categories table: header alignment polish ---- */
.portfolio-category-delta-inner table.data-table th {
  white-space: nowrap;
}
.portfolio-category-delta-inner table.data-table th.text-right,
.portfolio-category-delta-inner table.data-table td.text-right {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}
.portfolio-category-delta-inner table.data-table th.th-expected-delta-header {
  text-align: right;
}
.portfolio-category-delta-inner .th-expected-delta-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.portfolio-category-delta-inner .portfolio-expected-pencil {
  opacity: 0.65;
  flex-shrink: 0;
}
.portfolio-category-delta-inner .portfolio-expected-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 100%;
  min-width: 110px;
}
/* ==========================================================================
   PHASE D — sidebar chevron polish (right-pointing, rotates 90deg on expand)
   ========================================================================== */
.sidebar-chevron-svg {
  transition: transform 160ms ease;
}
.sidebar-l1-split-row.expanded .sidebar-chevron-svg,
.sidebar-l1-split-row[aria-expanded="true"] .sidebar-chevron-svg {
  transform: rotate(90deg);
}
.sidebar-l1-chevron-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: background 120ms ease;
}
.sidebar-l1-chevron-btn:hover {
  background: color-mix(in srgb, var(--accent-soft) 12%, transparent);
}
/* ==========================================================================
   PHASE D — Delta Mgmt categories manager + Time Triggers relevance toggle
   ========================================================================== */
#section-delta-management {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 18px 20px 22px;
  overflow: visible;
}
#section-delta-management .dm-section-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}
.dm-categories-manager {
  background: var(--ds-surface-muted, color-mix(in srgb, var(--bg-main) 38%, var(--bg-card) 62%));
  border: 1px solid var(--ds-card-border, color-mix(in srgb, var(--accent-soft) 12%, transparent));
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 0;
}
.dm-categories-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.dm-add-category-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.dm-add-category-form input[type="text"] {
  background: var(--ds-surface, var(--bg-card));
  color: var(--text-dark);
  border: 1px solid var(--ds-border, rgba(255,255,255,0.12));
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13px;
  min-width: 220px;
  height: 34px;
  box-sizing: border-box;
}
.dm-add-category-form .btn {
  height: 34px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.dm-categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dm-categories-hint {
  margin: 12px 0 0;
  line-height: 1.45;
  max-width: 72ch;
}
.dm-multipliers-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.dm-multipliers-table-wrap {
  margin: 0;
  overflow-x: auto;
}
.dm-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--accent-soft) 18%, transparent);
  color: var(--text-dark);
  padding: 3px 6px 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--accent-soft) 30%, transparent);
}
.dm-category-chip-label { line-height: 1; }
.dm-category-chip-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 999px;
  opacity: 0.55;
  transition: opacity 120ms ease, background 120ms ease;
}
.dm-category-chip-btn:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--text-dark) 14%, transparent);
}
.dm-category-chip-btn--delete:hover {
  background: color-mix(in srgb, #ef4444 35%, transparent);
  color: #fff;
}
.dm-categories-linebreak {
  flex-basis: 100%;
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
}
.dm-category-chip--uncat {
  background: transparent;
  color: var(--ds-text-muted, color-mix(in srgb, var(--text-dark) 42%, transparent));
  border-color: color-mix(in srgb, var(--ds-text-muted, #888) 30%, transparent);
  font-style: italic;
  /* UNCATEGORIZED is a system value: no rename / delete buttons rendered */
  padding: 4px 10px;
}
.dm-category-chip--new {
  background: color-mix(in srgb, #22c55e 22%, transparent);
  border-color: color-mix(in srgb, #22c55e 38%, transparent);
}
select.dm-category-select {
  background: var(--ds-surface, var(--bg-card));
  color: var(--text-dark);
  border: 1px solid var(--ds-border, rgba(255,255,255,0.12));
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  min-width: 140px;
  max-width: 100%;
  height: 30px;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
}
select.dm-category-select:disabled { opacity: 0.6; cursor: wait; }

#multipliers-table {
  width: 100%;
  table-layout: auto;
}
#multipliers-table thead th {
  vertical-align: middle;
  white-space: nowrap;
}
#multipliers-table thead th .dm-th-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
}
#multipliers-table thead th.text-center .dm-th-label,
#multipliers-table thead th.text-center {
  text-align: center;
}
#multipliers-table tbody td {
  vertical-align: middle;
}
#multipliers-table .dm-col-broker { min-width: 110px; }
#multipliers-table .dm-col-symbol { min-width: 90px; }
#multipliers-table .dm-col-category { min-width: 160px; width: 18%; }
#multipliers-table .dm-col-multiplier {
  width: 1%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#multipliers-table .dm-col-source {
  width: 1%;
  white-space: nowrap;
}
#multipliers-table .dm-col-actions {
  width: 1%;
  white-space: nowrap;
}
#multipliers-table .dm-col-source .dm-badge {
  vertical-align: middle;
}
#multipliers-table .cell-actions .btn {
  min-width: 72px;
}

/* Time Triggers: relevance toggle */
.tt-relevant-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
.tt-relevant-toggle input[type="checkbox"],
.tt-relevant-readonly {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-soft);
}
/* ==========================================================================
   PHASE E — AVA Options config cards
   ========================================================================== */
.ava-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
  padding: 8px 0 16px;
}
.ava-config-card {
  background: var(--ds-surface, var(--bg-card));
  border: 1px solid var(--ds-card-border, color-mix(in srgb, var(--accent-soft) 15%, transparent));
  border-radius: 14px;
  padding: 16px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--ds-elev-shadow-sm, 0 1px 3px rgba(0,0,0,0.18));
  transition: transform 120ms ease, border-color 120ms ease;
}
.ava-config-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-soft) 32%, transparent);
}
.ava-config-card--inactive { opacity: 0.62; }

.ava-config-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ds-border, rgba(255,255,255,0.08));
  padding-bottom: 10px;
}
.ava-config-card-client {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-dark);
  letter-spacing: -0.01em;
}
.ava-config-card-login {
  font-size: 12px;
  color: var(--ds-text-secondary, color-mix(in srgb, var(--text-dark) 58%, transparent));
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.ava-config-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ava-config-card-money {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 540px) {
  .ava-config-card-money { grid-template-columns: 1fr; }
}
.ava-config-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ava-config-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-text-secondary, color-mix(in srgb, var(--text-dark) 58%, transparent));
}
.ava-config-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  font-feature-settings: "tnum" 1;
}
.ava-config-card-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--ds-border, rgba(255,255,255,0.08));
  padding-top: 8px;
}
.ava-config-snapshot {
  font-size: 12px;
  color: var(--ds-text-secondary, color-mix(in srgb, var(--text-dark) 58%, transparent));
}
.ava-config-snapshot--stale {
  color: #fbbf24;
}
.ava-config-delete {
  font-size: 12px;
  color: #ef4444;
  text-decoration: none;
  opacity: 0.78;
}
.ava-config-delete:hover { opacity: 1; text-decoration: underline; }
/* ==========================================================================
   PHASE F — CONNECTIVITY (tabs + summary cards + in-row toggle)
   ========================================================================== */
.cm-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.cm-summary-card {
  background: var(--ds-surface, var(--bg-card));
  border: 1px solid var(--ds-card-border, color-mix(in srgb, var(--accent-soft) 14%, transparent));
  border-radius: 12px;
  padding: 14px 18px;
}
.cm-summary-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}
.cm-summary-label {
  font-size: 11px;
  color: var(--ds-text-secondary, color-mix(in srgb, var(--text-dark) 58%, transparent));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.cm-summary-card--alert .cm-summary-num { color: #ef4444; }
.cm-summary-card--ok    .cm-summary-num { color: #22c55e; }

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-text-muted, #888) 22%, transparent);
  color: var(--text-dark);
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}
.tab-badge--alert {
  background: color-mix(in srgb, #ef4444 28%, transparent);
  color: #fee2e2;
}

.cm-table th, .cm-table td { vertical-align: middle; }
.cm-status {
  display: inline-block;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.cm-status--connected    { color: #15803d; background: color-mix(in srgb, #22c55e 18%, transparent); }
.cm-status--disconnected { color: #b91c1c; background: color-mix(in srgb, #ef4444 16%, transparent); }
.cm-status--inactive     { color: var(--ds-text-muted, #888); background: color-mix(in srgb, #888 14%, transparent); }
.cm-status-detail {
  margin-top: 4px;
  max-width: 22rem;
  line-height: 1.35;
}
.cm-badge--eol {
  display: inline-block;
  background: color-mix(in srgb, #7a2222 60%, transparent);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  margin-left: 6px;
  font-weight: 700;
}
.cm-kind {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent-soft) 18%, transparent);
  color: var(--accent-soft);
  margin-right: 6px;
  vertical-align: middle;
}
.cm-kind--ava { background: color-mix(in srgb, #f59e0b 22%, transparent); color: #fbbf24; }
.cm-login-cell { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; }
.cm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.cm-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-soft);
}
.cm-toggle--solo {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.cm-active-cell {
  text-align: center;
}
td[data-skip-edit-pen] .ui-editable-pen-label::after,
.cm-active-cell[data-skip-edit-pen] .ui-editable-pen-label::after {
  content: none !important;
}
/* ==========================================================================
   PHASE F — Transaction Reporting (gz + Generated at column polish) +
              Client Monthly Reporting (Generated at + card-style rows)
   ========================================================================== */

/* TR daily reports table — new gz/genat column polish to match the rest */
#tr-daily-reports-tbl .th-tr-minimal-gz,
#tr-daily-reports-tbl .td-tr-gz { width: 7%; min-width: 5rem; text-align: center; }
#tr-daily-reports-tbl .th-tr-minimal-genat,
#tr-daily-reports-tbl .td-tr-genat { width: 16%; min-width: 8.5rem; }
#tr-daily-reports-tbl .tr-gz-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--accent-soft);
  background: color-mix(in srgb, var(--accent-soft) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-soft) 28%, transparent);
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
#tr-daily-reports-tbl .tr-gz-icon-btn:hover {
  background: color-mix(in srgb, var(--accent-soft) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
}
#tr-daily-reports-tbl .tr-genat-text {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--ds-text-secondary, color-mix(in srgb, var(--text-dark) 65%, transparent));
}

/* Client Monthly Reporting — card-style table rows.
   We keep the table semantics for filter/search/CSV, but visually treat
   each row as a soft card so the page doesn't read as a dense spreadsheet. */
.cr-cmr-card-table {
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}
.cr-cmr-card-table thead th {
  background: transparent !important;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-text-secondary, color-mix(in srgb, var(--text-dark) 58%, transparent));
  padding: 4px 14px !important;
  border-bottom: none !important;
}
.cr-cmr-card-table tbody tr {
  background: var(--ds-surface, var(--bg-card));
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.cr-cmr-card-table tbody tr:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.cr-cmr-card-table tbody td {
  padding: 14px 16px !important;
  border-top: none !important;
  border-bottom: none !important;
  vertical-align: middle;
}
.cr-cmr-card-table tbody td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.cr-cmr-card-table tbody td:last-child  { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.cr-genat-text {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--ds-text-secondary, color-mix(in srgb, var(--text-dark) 65%, transparent));
}
.cr-genat-text--missing { color: var(--ds-text-muted, color-mix(in srgb, var(--text-dark) 38%, transparent)); }

/* ═══ UI sweep: sidebar width stability, trading delta (no pink), account overview, brokers portal, timetriggers, Excel/PDF emoji parity ═══ */

.sidebar {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.sidebar-brand-main {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.02em;
  max-width: 11.5rem;
}

.logo-wordmark {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  max-width: 16rem;
}

.page-body,
.injected-page-content,
.collapsible-body {
  text-align: start;
}

.category-delta-splitvis__short {
  background: linear-gradient(90deg, #f59e0b, #b45309);
}

.account-overview-roster .ao-card-header {
  flex-direction: column;
  align-items: stretch;
}
.account-overview-roster .ao-card-header-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.ao-card-ccy-pill {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-soft) 35%, transparent);
  color: var(--text-dark);
}
.ao-card-broker {
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 800;
}
.ao-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 16px 4px;
}
.ao-toolbar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-text-secondary);
  margin-right: 4px;
}
.ao-sort-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-dark);
  background: color-mix(in srgb, var(--tbl-surface) 55%, transparent);
  border: 1px solid var(--ds-border-md);
  transition: background 120ms ease, border-color 120ms ease;
}
.ao-sort-pill:hover {
  border-color: color-mix(in srgb, var(--accent-soft) 40%, transparent);
}
.ao-sort-pill.is-active {
  background: color-mix(in srgb, var(--accent-soft) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent-soft) 45%, transparent);
  color: var(--text-light);
}

.hana-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1160px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .hana-card-grid {
    grid-template-columns: 1fr;
  }
}

.li-card-grid--broker-portal {
  grid-template-columns: 1fr;
  max-width: 920px;
  margin: 0 auto;
  gap: 24px 28px;
}
.login-info-wrap .li-card--broker .li-card-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--text-light) 6%, transparent);
}

body.product-activation-page .if-account-cb-cell,
body.product-activation-page .if-acc-td-cb {
  text-align: center;
  vertical-align: middle;
  width: 6rem;
}
body.product-activation-page .if-acc-perm-toggle {
  margin: 0 auto;
  transform: scale(0.92);
  transform-origin: center;
}
body.product-activation-page .if-account-cb-cell.if-disabled,
body.product-activation-page .if-acc-td-cb.if-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.dm-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dm-badge--auto {
  background: color-mix(in srgb, #22c55e 22%, transparent);
  border: 1px solid color-mix(in srgb, #22c55e 45%, transparent);
  color: #bbf7d0;
}
.dm-badge--manual {
  background: color-mix(in srgb, #eab308 22%, transparent);
  border: 1px solid color-mix(in srgb, #ca8a04 45%, transparent);
  color: #fef9c3;
}

.time-triggers-page .page-body {
  color: var(--text-dark);
}
.time-triggers-page #section-time-triggers .section-card {
  background: color-mix(in srgb, var(--tbl-surface) 78%, #0f172a 22%);
  border: 1px solid color-mix(in srgb, var(--text-light) 10%, transparent);
}
.time-triggers-page #section-time-triggers .data-table th,
.time-triggers-page #section-time-triggers .data-table td {
  color: var(--text-dark);
  padding: 12px 14px;
}
.time-triggers-page #section-time-triggers .data-table th {
  background: color-mix(in srgb, var(--sidebar-dark) 35%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text-light) 12%, transparent);
}
.time-triggers-page #section-time-triggers .tt-relevant-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-excel-inner::before {
  content: "📗";
  font-size: 1.05em;
  line-height: 1;
  margin-right: 0.35em;
}
.btn-excel-inner .tbl-ico-excel {
  display: none !important;
}
.tr-excel-icon-btn::before {
  content: "📗";
  font-size: 1.15em;
  line-height: 1;
}
.tr-excel-icon-btn .tbl-ico-excel {
  display: none !important;
}
.tr-excel-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
}

.bafin-reporting-page .bafin-tr-page-header {
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-soft) 15%, transparent);
}
.bafin-reporting-page .bafin-tr-main-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.03em;
}
.bafin-reporting-page .tr-reports-main {
  margin-top: 20px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--ds-surface) 55%, transparent) 0%,
    color-mix(in srgb, var(--bg-main) 40%, transparent) 100%
  );
  border: 1px solid var(--ds-border-md);
  box-shadow: 0 12px 40px -18px rgba(0, 0, 0, 0.45);
}
.bafin-reporting-page .tr-gen-toolbar {
  border-radius: 12px;
  padding: 4px 0 8px;
}
.bafin-reporting-page .tr-daily-reports-card {
  border: none;
  background: transparent;
  box-shadow: none;
}

.client-trading-tabs #tab-timetriggers .data-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--tbl-surface) 40%, transparent);
}
.client-trading-tabs #tab-timetriggers .tt-trading-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.client-trading-tabs #tab-timetriggers .tt-trading-hint {
  margin: 0;
  line-height: 1.45;
}
.client-trading-tabs #tab-timetriggers .tt-trading-hint a {
  color: var(--accent-soft, #38bdf8);
  text-decoration: none;
}
.client-trading-tabs #tab-timetriggers .tt-trading-hint a:hover {
  text-decoration: underline;
}
.client-trading-tabs #tab-timetriggers .tt-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  margin: 8px auto 0;
  padding: 36px 28px;
  max-width: 34rem;
  border-radius: 14px;
  border: 1px solid var(--trading-tile-border, rgba(65, 113, 154, 0.25));
  background: var(--trading-tile-bg, rgba(10, 33, 68, 0.45));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.client-trading-tabs #tab-timetriggers .tt-empty-state--ok {
  border-color: color-mix(in srgb, #22c55e 28%, var(--trading-tile-border, rgba(65, 113, 154, 0.25)));
}
.client-trading-tabs #tab-timetriggers .tt-empty-state__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
  background: color-mix(in srgb, var(--accent-soft, #38bdf8) 18%, transparent);
  color: #7dd3fc;
}
.client-trading-tabs #tab-timetriggers .tt-empty-state--ok .tt-empty-state__icon {
  background: color-mix(in srgb, #22c55e 20%, transparent);
  color: #86efac;
}
.client-trading-tabs #tab-timetriggers .tt-empty-state__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-light, #f8fafc);
}
.client-trading-tabs #tab-timetriggers .tt-empty-state__text {
  margin: 0;
  max-width: 28rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted, color-mix(in srgb, var(--text-light) 62%, transparent));
}
.client-trading-tabs #tab-timetriggers .tt-empty-state__text a {
  color: var(--accent-soft, #38bdf8);
  text-decoration: none;
}
.client-trading-tabs #tab-timetriggers .tt-empty-state__text a:hover {
  text-decoration: underline;
}
.client-trading-tabs #tab-timetriggers .tt-alert-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.client-trading-tabs #tab-timetriggers .tt-alert-pill--ok {
  background: color-mix(in srgb, #22c55e 22%, transparent);
  color: #86efac;
}
.client-trading-tabs #tab-timetriggers .tt-alert-pill--warn {
  background: color-mix(in srgb, #f59e0b 24%, transparent);
  color: #fcd34d;
}
.client-trading-tabs #tab-timetriggers .tt-alert-pill--crit {
  background: color-mix(in srgb, #ef4444 24%, transparent);
  color: #fca5a5;
}
.client-trading-tabs #tab-timetriggers .tt-days-cell {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.client-trading-tabs #tab-timetriggers .tt-days-warn { color: #fdba74 !important; }
.client-trading-tabs #tab-timetriggers .tt-days-crit { color: #fca5a5 !important; }

/* ═══ UI sweep v2: stable sidebar height, account-overview restored,
       brokers portal coloring, product-activation alignment, time triggers
       readability, connectivity borders, folder-tab corners, button intent
       ═══ */

/* Sidebar: lock height so it doesn't grow/shrink when L2 submenus open. */
.sidebar {
  height: var(--sidebar-panel-max-height);
  min-height: var(--sidebar-panel-max-height);
  overflow-y: auto;
}
body.app-sidebar-collapsed .sidebar {
  height: var(--sidebar-panel-max-height);
  min-height: var(--sidebar-panel-max-height);
}

/* ── Account Overview tiles ─────────────────────────────────────────────
   Restore visibility (multi-column responsive grid), coloring per group,
   consistent alignment, larger broker name, currency pill becomes a chip
   with a left ribbon for fast visual scanning. */
.account-overview-roster {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 14px 16px 18px;
  box-sizing: border-box;
}
.account-overview-roster .ao-card {
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  min-width: 0;
  container-type: inline-size;
  container-name: ao-card;
  padding: 16px 20px 16px 24px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent-soft) 12%, var(--tbl-surface) 88%) 0%,
    color-mix(in srgb, var(--tbl-surface) 72%, transparent) 100%
  );
  border: 1px solid color-mix(in srgb, var(--accent-soft) 28%, var(--ds-border-md) 72%);
  border-radius: var(--radius-lg);
  overflow: visible;
  visibility: visible;
  opacity: 1;
}
.account-overview-roster .ao-card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: linear-gradient(180deg, #38bdf8 0%, #6366f1 50%, #a855f7 100%);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  pointer-events: none;
}
.account-overview-roster .ao-card-header {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-light) 10%, transparent);
}
.account-overview-roster .ao-card-header-main {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.account-overview-roster .ao-card-broker {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.account-overview-roster .ao-card-login {
  margin-left: auto;
  font-size: 12px;
  color: var(--ds-text-secondary);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  white-space: nowrap;
}
.account-overview-roster .ao-card-ccy-pill {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px -6px rgba(99, 102, 241, 0.55);
}
.account-overview-roster .ao-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}

/* Lay out Capital / Equity / Margin in one row when the account card is wide enough */
@container ao-card (min-width: 700px) {
  .account-overview-roster .ao-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .account-overview-roster .ao-group--margin {
    grid-column: auto;
  }
}

@container ao-card (min-width: 480px) and (max-width: 699px) {
  .account-overview-roster .ao-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .account-overview-roster .ao-group--margin {
    grid-column: 1 / -1;
  }
}

.account-overview-roster .ao-group {
  text-align: center;
  align-items: center;
  padding: 10px 12px 11px;
  border-radius: 10px;
}
.account-overview-roster .ao-group-header {
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.account-overview-roster .ao-group-hero {
  justify-content: center;
  text-align: center;
  width: 100%;
}
.account-overview-roster .ao-group-grid {
  width: 100%;
  justify-items: center;
}
.account-overview-roster .ao-pair {
  align-items: center;
  text-align: center;
}
.account-overview-roster .ao-group--capital {
  --ao-panel-bg: linear-gradient(135deg, color-mix(in srgb, #38bdf8 14%, transparent) 0%, color-mix(in srgb, #6366f1 8%, transparent) 100%);
  background: var(--ao-panel-bg);
  border-color: color-mix(in srgb, #38bdf8 38%, transparent);
}
.account-overview-roster .ao-group--usd {
  --ao-panel-bg: linear-gradient(135deg, color-mix(in srgb, #22c55e 16%, transparent) 0%, color-mix(in srgb, #15803d 9%, transparent) 100%);
  background: var(--ao-panel-bg);
  border-color: color-mix(in srgb, #22c55e 42%, transparent);
  border-style: solid;
}
.account-overview-roster .ao-group--usd .ao-group-hero-prefix,
.account-overview-roster .ao-group--usd .ao-group-hero-value,
.account-overview-roster .ao-group--usd .ao-group-ccy {
  color: #4ade80;
}
.account-overview-roster .ao-group--margin {
  --ao-panel-bg: linear-gradient(135deg, color-mix(in srgb, #f59e0b 14%, transparent) 0%, color-mix(in srgb, #b45309 9%, transparent) 100%);
  background: var(--ao-panel-bg);
  border-color: color-mix(in srgb, #f59e0b 36%, transparent);
}
.account-overview-roster .ao-group-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-dark);
  opacity: 0.78;
}
.account-overview-roster .ao-group-ccy {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dark);
  border: 1px solid color-mix(in srgb, var(--text-light) 12%, transparent);
}
.account-overview-roster .ao-group-hero-value,
.account-overview-roster .ao-group-hero-prefix {
  color: var(--text-dark);
}
.account-overview-roster .ao-group--capital .ao-group-hero-value,
.account-overview-roster .ao-group--capital .ao-group-hero-prefix,
.account-overview-roster .ao-group--capital .ao-group-ccy { color: #93c5fd; }
.account-overview-roster .ao-group--margin .ao-group-hero-value,
.account-overview-roster .ao-group--margin .ao-group-hero-prefix,
.account-overview-roster .ao-group--margin .ao-group-ccy { color: #fcd34d; }
.account-overview-roster .ao-pair > dt {
  font-size: 10px;
  color: color-mix(in srgb, var(--text-dark) 70%, transparent);
}
.account-overview-roster .ao-pair > dd {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
}

/* ── Brokers Portal: colorful per-panel theming + clear button intent ─── */
.login-info-wrap .li-card--broker {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent-soft) 8%, var(--tbl-surface) 92%) 0%,
    color-mix(in srgb, var(--tbl-surface) 75%, transparent) 100%
  );
  border: 1px solid color-mix(in srgb, var(--accent-soft) 28%, var(--ds-border-md) 72%);
  position: relative;
  overflow: hidden;
}
.login-info-wrap .li-card--broker::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 33%, #ec4899 66%, #f97316 100%);
  pointer-events: none;
}
.login-info-wrap .li-card--broker .li-card-panel {
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent-soft) 16%, transparent);
  background: color-mix(in srgb, var(--tbl-surface) 82%, transparent);
}
.login-info-wrap .li-card--broker .li-card-panel--portal {
  background: linear-gradient(135deg, color-mix(in srgb, #6366f1 12%, transparent) 0%, color-mix(in srgb, #6366f1 4%, var(--tbl-surface) 96%) 100%);
  border-color: color-mix(in srgb, #6366f1 32%, transparent);
}
.login-info-wrap .li-card--broker .li-card-panel--security {
  background: linear-gradient(135deg, color-mix(in srgb, #ef4444 11%, transparent) 0%, color-mix(in srgb, #ef4444 4%, var(--tbl-surface) 96%) 100%);
  border-color: color-mix(in srgb, #ef4444 30%, transparent);
}
.login-info-wrap .li-card--broker .li-card-panel--account {
  background: linear-gradient(135deg, color-mix(in srgb, #22c55e 11%, transparent) 0%, color-mix(in srgb, #22c55e 4%, var(--tbl-surface) 96%) 100%);
  border-color: color-mix(in srgb, #22c55e 30%, transparent);
}
.login-info-wrap .li-card--broker .li-card-panel--notes {
  background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 10%, transparent) 0%, color-mix(in srgb, #f59e0b 3%, var(--tbl-surface) 97%) 100%);
  border-color: color-mix(in srgb, #f59e0b 28%, transparent);
}
.login-info-wrap .li-card--broker .li-card-panel--portal .li-card-panel-title-text { color: #a5b4fc; }
.login-info-wrap .li-card--broker .li-card-panel--security .li-card-panel-title-text { color: #fca5a5; }
.login-info-wrap .li-card--broker .li-card-panel--account .li-card-panel-title-text { color: #86efac; }
.login-info-wrap .li-card--broker .li-card-panel--notes .li-card-panel-title-text { color: #fcd34d; }
.login-info-wrap .li-card--broker .li-card-actions .btn-primary,
.login-info-wrap .li-card--broker .li-card-actions .btn-save-changes {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 55%, #15803d 100%);
  border-color: #166534;
  color: #fff;
}
.login-info-wrap .li-card--broker .li-card-actions .btn-primary:hover,
.login-info-wrap .li-card--broker .li-card-actions .btn-save-changes:hover {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 55%, #16a34a 100%);
  filter: none;
}
.login-info-wrap .li-card--broker .li-card-actions .btn-danger {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  border-color: #b91c1c;
  color: #fff;
}
.login-info-wrap .li-card--broker .li-card-actions .btn-danger:hover {
  filter: brightness(1.08);
}

/* ── Product Activation: align account meta into a true table grid ───── */
body.product-activation-page .if-account-info {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(8rem, 1fr) minmax(8rem, 1fr);
  align-items: center;
  gap: 0 24px;
  padding-left: 32px;
}
body.product-activation-page .if-account-info .if-account-id {
  font-size: 13px;
  font-weight: 600;
  color: #f8fafc;
}
body.product-activation-page .if-account-info .if-account-meta {
  display: contents;
}
body.product-activation-page .if-account-info .if-account-meta > span {
  font-size: 12px;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.product-activation-page tr.if-account-row,
.if-features-table tr.if-account-row {
  display: none;
}
body.product-activation-page tr.if-account-row.if-account-row--open,
.if-features-table tr.if-account-row.if-account-row--open {
  display: table-row;
}
body.product-activation-page .if-client-row.if-client-row--accounts-open .if-expand-btn {
  border-color: color-mix(in srgb, var(--color-accent, #38bdf8) 45%, var(--color-border));
  color: var(--color-accent, #38bdf8);
}
body.product-activation-page .if-account-row > td {
  vertical-align: middle;
}
body.product-activation-page .if-features-table th,
body.product-activation-page .if-features-table td {
  vertical-align: middle;
}

/* Make sure the AVA Options client-level toggle is visible: the
   .settings-perm-toggle component must keep its display even inside the
   AVA cell, and the cell can't collapse below the switch width. */
body.product-activation-page .if-td-toggle {
  text-align: center;
  vertical-align: middle;
  min-width: 6rem;
}
body.product-activation-page .if-td-toggle .settings-perm-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
body.product-activation-page .if-td-toggle .settings-perm-switch {
  display: inline-block;
}

body.product-activation-page .if-client-search-wrap {
  margin: 0 0 14px;
  max-width: 28rem;
}
body.product-activation-page .if-client-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.product-activation-page .if-client-search-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  background: color-mix(in srgb, var(--color-surface-2, rgba(255, 255, 255, 0.04)) 90%, transparent);
  color: var(--color-text-primary, #f8fafc);
  font-size: 16px;
  box-sizing: border-box;
  touch-action: manipulation;
}
body.product-activation-page .if-client-search-input:focus {
  outline: 2px solid var(--color-accent, #38bdf8);
  outline-offset: 2px;
}
body.product-activation-page tr.if-row-filtered-out {
  display: none !important;
}
body.product-activation-page .if-perm-toggle,
body.product-activation-page .if-expand-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body.product-activation-page .if-perm-toggle .settings-perm-switch {
  min-width: 44px;
  min-height: 28px;
}
body.product-activation-page .if-td-toggle .settings-perm-toggle,
body.product-activation-page .if-account-cb-cell .settings-perm-toggle {
  min-height: 44px;
  padding: 8px 4px;
}

@media screen and (max-width: 1024px) {
  body.product-activation-page .if-table-scroll {
    overflow-x: visible;
  }
  body.product-activation-page .if-features-table thead {
    display: none;
  }
  body.product-activation-page .if-features-table,
  body.product-activation-page .if-features-table tbody {
    display: block;
    width: 100%;
  }
  body.product-activation-page .if-features-table tr.if-client-row,
  body.product-activation-page .if-features-table tr.if-account-row.if-account-row--open {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-surface-2, rgba(255, 255, 255, 0.04)) 88%, transparent);
    box-sizing: border-box;
  }
  body.product-activation-page .if-features-table tr.if-account-row.if-account-row--open {
    margin-left: 12px;
    width: calc(100% - 12px);
    border-style: dashed;
  }
  body.product-activation-page .if-features-table tr.if-account-row:not(.if-account-row--open) {
    display: none !important;
  }
  body.product-activation-page .if-features-table tr.if-client-row > td,
  body.product-activation-page .if-features-table tr.if-account-row > td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 0;
    border: none;
    background: transparent !important;
    box-sizing: border-box;
  }
  body.product-activation-page .if-features-table tr.if-account-row > td:first-child:empty {
    display: none;
  }
  body.product-activation-page .if-features-table tr.if-client-row > td.if-td-expand {
    display: inline-flex;
    width: auto;
    padding: 0 8px 10px 0;
    vertical-align: middle;
    border-bottom: none;
  }
  body.product-activation-page .if-features-table tr.if-client-row > td.if-td-client {
    display: inline-flex;
    width: calc(100% - 3rem);
    flex-direction: row;
    align-items: center;
    padding-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  }
  body.product-activation-page .if-features-table tr.if-account-row > td:nth-child(2) {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  }
  body.product-activation-page .if-features-table tr.if-client-row > td.if-td-toggle::before,
  body.product-activation-page .if-features-table tr.if-account-row > td.if-account-cb-cell::before,
  body.product-activation-page .if-features-table tr.if-account-row > td.if-acc-td-cb::before {
    content: attr(data-mobile-label);
    flex: 1 1 auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #94a3b8);
    text-align: left;
  }
  body.product-activation-page .if-account-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-left: 0;
  }
}

/* ── Time Triggers: switch numeric color from cool blue to warm amber for
       readability against the dark surface ─── */
.time-triggers-page #section-time-triggers .data-table td {
  color: #fde68a;
}
.time-triggers-page #section-time-triggers .data-table td.text-muted,
.time-triggers-page #section-time-triggers .data-table td .text-muted {
  color: #cbd5e1;
}
.time-triggers-page #section-time-triggers .data-table tbody tr td:first-child {
  color: #fef3c7;
  font-weight: 600;
}

/* ── Connectivity: stronger, segmented table borders ───────────────── */
.cm-table {
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid color-mix(in srgb, var(--accent-soft) 30%, var(--ds-border-md) 70%);
  border-radius: 12px;
  overflow: hidden;
}
.cm-table th,
.cm-table td {
  border-right: 1px solid color-mix(in srgb, var(--text-light) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text-light) 9%, transparent);
}
.cm-table th:last-child,
.cm-table td:last-child { border-right: none; }
.cm-table tbody tr:last-child td { border-bottom: none; }
.cm-table thead th {
  background: color-mix(in srgb, var(--sidebar-dark) 30%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--accent-soft) 38%, transparent);
}

/* ── Transaction reporting: rounded folder-tab corners + persistent
       page header on every sub-page ───────────────────────────────── */
.tr-folder-tabs {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  padding: 0;
  background: color-mix(in srgb, var(--tbl-surface) 60%, transparent);
}
.tr-folder-tabs .tab-btn {
  border-radius: 10px 10px 0 0;
  padding: 10px 18px;
  margin: 4px 4px 0 4px;
}
.tr-folder-tabs .tab-btn.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 22%, transparent) 0%, transparent 100%);
  border-bottom-color: transparent;
}
.bafin-tr-page-header {
  margin-bottom: 12px;
}
.bafin-tr-subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ds-text-secondary);
}

/* ── Global alignment: form labels, table cells, badge containers ─── */
.page-body .data-table th { text-align: left; }
.page-body .data-table th.text-right,
.page-body .data-table td.text-right { text-align: right; }
.page-body .data-table th.text-center,
.page-body .data-table td.text-center { text-align: center; }
.page-body .section-card .form-group label,
.page-body .section-card .form-row label { line-height: 1.4; }

/* ── Button intent globally: primary blue, danger red, success green,
       warning amber, ghost neutral. Keeps readability on dark + light. ── */
.btn.btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  border: 1px solid #4f46e5;
  color: #ffffff;
}
.btn.btn-primary:hover { filter: brightness(1.08); }
.btn.btn-danger {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  border: 1px solid #b91c1c;
  color: #ffffff;
}
.btn.btn-danger:hover { filter: brightness(1.08); }
.btn.btn-success {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border: 1px solid #15803d;
  color: #ffffff;
}
.btn.btn-success:hover { filter: brightness(1.08); }
.btn.btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
  border: 1px solid #b45309;
  color: #1f2937;
}
.btn.btn-warning:hover { filter: brightness(1.05); }
.btn.btn-slate {
  background: color-mix(in srgb, var(--tbl-surface) 75%, transparent);
  border: 1px solid var(--ds-border-md);
  color: var(--text-dark);
}
.btn.btn-slate:hover {
  border-color: color-mix(in srgb, var(--accent-soft) 35%, transparent);
}
[data-theme="light"] .btn.btn-warning { color: #1f2937; }

/* ═══ UI sweep v3: brokers portal sub-tiles, metatrader buttons + table,
       folder-tab look, transaction-reporting layout parity, clients page
       money-green ═══ */

/* Clients list — money column always green, regardless of sign. */
.standard-data-table .num-cell.val-gain,
.data-table .num-cell.val-gain,
.clients-equity-value {
  color: #22c55e !important;
  font-weight: 700;
}

/* ── Brokers Portal: subtile inputs/values get readable, calm styling. ─ */
.login-info-wrap .li-card--broker .li-card-panel { padding: 14px 16px 16px; }
.login-info-wrap .li-card--broker .li-card-panel-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent-soft) 24%, transparent);
}
.login-info-wrap .li-card--broker .li-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  margin: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text-light) 6%, transparent);
}
.login-info-wrap .li-card--broker .li-field:last-of-type { border-bottom: none; }
.login-info-wrap .li-card--broker .li-field-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-dark) 70%, var(--accent-soft) 30%);
  font-weight: 700;
}
.login-info-wrap .li-card--broker .li-input,
.login-info-wrap .li-card--broker select.li-input,
.login-info-wrap .li-card--broker .li-textarea {
  width: 100%;
  min-width: 0;
  background: color-mix(in srgb, var(--tbl-surface) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-soft) 18%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-dark);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  transition: border-color 120ms ease, background 120ms ease;
}
.login-info-wrap .li-card--broker .li-input[readonly] {
  background: color-mix(in srgb, var(--tbl-surface) 70%, transparent);
}
.login-info-wrap .li-card--broker .li-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  background: color-mix(in srgb, var(--tbl-surface) 100%, transparent);
}
.login-info-wrap .li-card--broker .li-field-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.login-info-wrap .li-card--broker .li-field-row .li-input { flex: 1 1 auto; }
.login-info-wrap .li-card--broker .li-value-display {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--text-dark);
}
/* "Open" link → indigo, "Show"/"Copy" → green. Specificity boosted with
    the form parent so we beat the base .li-icon-btn rule cleanly. */
.login-info-wrap form.li-card--broker .li-field-row a.li-icon-btn,
.login-info-wrap .li-card--broker a.li-icon-btn {
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
  border: 1px solid #4f46e5 !important;
  color: #fff !important;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-shadow: 0 4px 12px -6px rgba(99, 102, 241, 0.55);
}
.login-info-wrap form.li-card--broker .li-field-row a.li-icon-btn:hover,
.login-info-wrap .li-card--broker a.li-icon-btn:hover { filter: brightness(1.1); }
.login-info-wrap form.li-card--broker .li-field-row button.li-icon-btn,
.login-info-wrap .li-card--broker button.li-icon-btn {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  border: 1px solid #15803d !important;
  color: #fff !important;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px -6px rgba(22, 163, 74, 0.55);
}
.login-info-wrap form.li-card--broker .li-field-row button.li-icon-btn:hover,
.login-info-wrap .li-card--broker button.li-icon-btn:hover { filter: brightness(1.1); }
.login-info-wrap .li-card--broker .li-card-status-pill {
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
  color: #fff;
  border: none;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.login-info-wrap .li-card--broker .li-card-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--accent-soft) 80%, var(--text-dark) 20%);
  text-transform: uppercase;
  margin: 0 0 2px;
  font-weight: 700;
}
.login-info-wrap .li-card--broker .li-card-title-name {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-dark);
}

/* ── Metatrader: aesthetic table + colored buttons ───────────────────── */
/* Shared column grid across the MT5 / MT4 / AVA platform sections so the
   tables line up vertically even when their content differs. */
.login-info-wrap .login-info-table.li-platform-accounts-table {
  table-layout: fixed;
}
.login-info-wrap .li-platform-accounts-table col.li-col-broker { width: 17%; }
.login-info-wrap .li-platform-accounts-table col.li-col-server { width: 27%; }
.login-info-wrap .li-platform-accounts-table col.li-col-login { width: 12%; }
.login-info-wrap .li-platform-accounts-table col.li-col-password { width: 29%; }
.login-info-wrap .li-platform-accounts-table col.li-col-actions { width: 15%; }
/* MT tables: Broker | Server | Login | Password | (Actions) */
.login-info-wrap .mt-accounts-table th:nth-child(1) { width: 17%; }
.login-info-wrap .mt-accounts-table th:nth-child(2) { width: 27%; }
.login-info-wrap .mt-accounts-table th:nth-child(3) { width: 12%; }
.login-info-wrap .mt-accounts-table th:nth-child(4) { width: 29%; }
.login-info-wrap .mt-accounts-table th:nth-child(5) { width: 15%; }
.login-info-wrap #ava-accounts-table .li-col-ghost {
  padding-left: 16px;
  padding-right: 0;
  color: transparent;
  user-select: none;
}
.login-info-wrap #ava-accounts-table thead .li-col-ghost {
  padding: 12px 0;
  border-bottom: 2px solid transparent;
}
.login-info-wrap #ava-accounts-table .li-ava-meta-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}
.login-info-wrap #ava-accounts-table .li-active-label {
  font-size: 12px;
  font-weight: 600;
  color: #86efac;
}
.login-info-wrap #ava-accounts-table .li-active-label--off {
  color: color-mix(in srgb, var(--text-light) 55%, transparent);
}
.login-info-wrap .login-info-table td {
  overflow-wrap: anywhere;
}
.login-info-wrap .login-info-table .li-pw-cell .li-input {
  width: 100%;
  min-width: 0;
}
.login-info-wrap .login-info-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-soft) 24%, var(--ds-border-md) 76%);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent-soft) 6%, var(--tbl-surface) 94%) 0%,
    color-mix(in srgb, var(--tbl-surface) 80%, transparent) 100%
  );
  box-shadow: 0 16px 40px -22px color-mix(in srgb, var(--sidebar-dark) 60%, transparent);
}
.login-info-wrap .login-info-table thead th {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 22%, transparent) 0%, transparent 100%);
  color: var(--text-dark);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 16px;
  border-bottom: 2px solid color-mix(in srgb, var(--accent-soft) 35%, transparent);
}
.login-info-wrap .login-info-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-light) 7%, transparent);
  vertical-align: middle;
}
.login-info-wrap .login-info-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--accent-soft) 4%, transparent);
}
.login-info-wrap .login-info-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent-soft) 9%, transparent);
}
.login-info-wrap .login-info-table tbody tr:last-child td { border-bottom: none; }
.login-info-wrap .login-info-table .li-pw-cell {
  display: flex;
  gap: 8px;
  align-items: center;
}
.login-info-wrap .login-info-table .li-pw-cell .li-input {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  background: color-mix(in srgb, var(--tbl-surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-soft) 16%, transparent);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text-dark);
}
/* Show / Copy → green; primary verb pair */
.login-info-wrap .login-info-table .li-icon-btn {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border: 1px solid #15803d;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
}
.login-info-wrap .login-info-table .li-icon-btn:hover { filter: brightness(1.08); }
/* Edit → indigo, Delete → red, +Account → blue→teal */
.login-info-wrap .li-actions .btn-secondary {
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
  border: 1px solid #4f46e5;
  color: #fff;
}
.login-info-wrap .li-actions .btn-secondary:hover { filter: brightness(1.08); }
.login-info-wrap .li-actions .btn-danger {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  border: 1px solid #b91c1c;
  color: #fff;
}
.login-info-wrap .btn-brand-cta {
  background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 50%, #6366f1 100%);
  border: 1px solid #0284c7;
  color: #fff;
  font-weight: 700;
}
.login-info-wrap .btn-brand-cta:hover { filter: brightness(1.08); }

/* ── Folder-tabs: actual tab silhouette + parity across pages ─────────── */
.tr-folder-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 6px;
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0 0 -1px;
  position: relative;
  z-index: 2;
}
.tr-folder-tabs .tab-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px 11px;
  margin: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tbl-surface) 60%, transparent) 0%,
    color-mix(in srgb, var(--tbl-surface) 40%, transparent) 100%
  );
  border: 1px solid color-mix(in srgb, var(--accent-soft) 22%, var(--ds-border-md) 78%);
  border-bottom: none;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  color: color-mix(in srgb, var(--text-dark) 75%, transparent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  bottom: -1px;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.tr-folder-tabs .tab-btn:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-soft) 12%, var(--tbl-surface) 88%) 0%,
    color-mix(in srgb, var(--tbl-surface) 70%, transparent) 100%
  );
  color: var(--text-dark);
}
.tr-folder-tabs .tab-btn.active {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-soft) 24%, var(--tbl-surface) 76%) 0%,
    color-mix(in srgb, var(--tbl-surface) 96%, transparent) 100%
  );
  color: var(--text-dark);
  font-weight: 700;
  box-shadow: 0 -3px 10px -4px color-mix(in srgb, var(--accent-soft) 35%, transparent);
  z-index: 3;
}
.tr-folder-tabs .tab-btn.active::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 50%, #a855f7 100%);
  border-radius: 2px;
}

/* tr-reports-main becomes the tab body — ensure it visually connects to
   the active folder tab regardless of the page (Daily reports / Tables) */
.bafin-reporting-page .tr-reports-main,
.page-wrapper.bafin-tables-page .tr-reports-main {
  position: relative;
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: var(--radius-lg);
}

/* ── Bafin Tables tab: same panel chrome as Daily reports ─────────────── */
.page-wrapper.bafin-tables-page .tr-reports-main {
  padding: 22px 22px 26px;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--ds-surface) 55%, transparent) 0%,
    color-mix(in srgb, var(--bg-main) 40%, transparent) 100%
  );
  border: 1px solid var(--ds-border-md);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  box-shadow: 0 12px 40px -18px rgba(0, 0, 0, 0.45);
}
.page-wrapper.bafin-tables-page .bt-def-upload {
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-soft) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-soft) 18%, transparent);
}

/* Transaction reporting: creative summary band that runs above the table */
.bafin-reporting-page .tr-reports-main {
  border-top-left-radius: 0;
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
}
.bafin-reporting-page .tr-reports-main::before {
  content: "";
  display: block;
  height: 4px;
  margin: -22px -22px 18px;
  background: linear-gradient(90deg, #06b6d4 0%, #6366f1 33%, #ec4899 66%, #f59e0b 100%);
  border-top-right-radius: var(--radius-lg);
}
.bafin-reporting-page #tr-daily-reports-tbl thead th {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 18%, transparent) 0%, transparent 100%);
  border-bottom: 2px solid color-mix(in srgb, var(--accent-soft) 38%, transparent);
}
.bafin-reporting-page #tr-daily-reports-tbl tbody tr:hover td {
  background: color-mix(in srgb, var(--accent-soft) 9%, transparent);
}

/* ═══ UI sweep v4: clients page money green + Add Client button alignment ═══ */

/* Force the Equity column on the All Clients table to render green for any
   non-zero amount, beating the .data-table .num-cell { color: var(--tbl-text); }
   rule that was overriding our success color. */
.section-card.clients-section-card .data-table tbody td.num-cell.val-gain {
  color: #4ade80 !important;
  font-weight: 700;
}
.section-card.clients-section-card .data-table tbody td.num-cell.val-neutral,
.section-card.clients-section-card .data-table tbody td.num-cell .val-neutral {
  color: var(--ds-text-secondary) !important;
  font-weight: 500;
}
[data-theme="light"] .section-card.clients-section-card .data-table tbody td.num-cell.val-gain {
  color: #059669 !important;
}

/* Drop the Add Client CTA so it lines up with the bottom of the page-title
   group (subtitle baseline) instead of the very top. */
.main-container > .page-header {
  align-items: flex-end;
}
.main-container > .page-header .page-actions {
  align-self: flex-end;
  padding-bottom: 4px;
}

/* ═══ UI sweep v5: Master Data — creative Profile/Company layout, spacing,
       subtle accent palette for Documents ═══ */

/* Each section block becomes its own glass card with a colored top accent. */
.master-data-page--streamlined .md-data-shell .md-data-block {
  position: relative;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent-soft) 7%, var(--tbl-surface) 93%) 0%,
    color-mix(in srgb, var(--tbl-surface) 80%, transparent) 100%
  );
  border: 1px solid color-mix(in srgb, var(--accent-soft) 18%, var(--ds-border-md) 82%);
  border-radius: var(--radius-lg);
  padding: 22px 26px 24px;
  margin-bottom: 22px;
  overflow: hidden;
  box-shadow: 0 12px 36px -22px color-mix(in srgb, var(--sidebar-dark) 55%, transparent);
}
.master-data-page--streamlined .md-data-shell .md-data-block::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 50%, #a855f7 100%);
  opacity: 0.85;
}
.master-data-page--streamlined .md-data-shell #md-company-fields::before {
  background: linear-gradient(90deg, #06b6d4 0%, #0ea5e9 35%, #6366f1 100%);
}

/* Section title gets an accent dot + slight letter-spacing for visual rhythm. */
.master-data-page--streamlined .md-data-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent-soft) 22%, transparent);
}
.master-data-page--streamlined .md-data-block-title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  box-shadow: 0 0 0 3px color-mix(in srgb, #6366f1 22%, transparent);
}
.master-data-page--streamlined #md-company-fields .md-data-block-title::before {
  background: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
  box-shadow: 0 0 0 3px color-mix(in srgb, #06b6d4 22%, transparent);
}

/* Field grid: more breathing room, consistent cell heights. */
.master-data-page--streamlined .md-field-grid {
  gap: 18px 22px;
}
.master-data-page--streamlined .md-field-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
}
.master-data-page--streamlined .md-field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: color-mix(in srgb, var(--text-dark) 65%, var(--accent-soft) 35%);
  margin-bottom: 0;
}
.master-data-page--streamlined .md-field-control {
  padding: 11px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tbl-surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-soft) 18%, transparent);
  font-family: 'IBM Plex Mono', ui-monospace, 'Inter', sans-serif;
  font-size: 13.5px;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.master-data-page--streamlined .md-field-control:hover {
  border-color: color-mix(in srgb, var(--accent-soft) 38%, transparent);
}
.master-data-page--streamlined .md-field-control:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-soft) 65%, transparent);
  background: color-mix(in srgb, var(--tbl-surface) 92%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent-soft) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 7%, transparent);
}

/* Profile section is shorter — give the single field room and add a hint
   of color so it doesn't read as a stranded label. */
.master-data-page--streamlined #md-profile-grid {
  grid-template-columns: minmax(260px, 360px);
}

/* Documents — subtle palette per subsection, stays calm but distinct. */
.master-data-page--streamlined .md-documents-section {
  position: relative;
  margin-top: 28px;
  padding: 22px 26px 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #6366f1 5%, var(--tbl-surface) 95%) 0%,
    color-mix(in srgb, var(--tbl-surface) 80%, transparent) 100%
  );
  border: 1px solid color-mix(in srgb, #6366f1 18%, var(--ds-border-md) 82%);
  overflow: visible;
}
.master-data-page--streamlined .md-documents-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #06b6d4 0%, #6366f1 33%, #ec4899 66%, #f59e0b 100%);
  opacity: 0.7;
}
.master-data-page--streamlined .md-documents-title {
  font-size: 17px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.master-data-page--streamlined .md-documents-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, #06b6d4 0%, #6366f1 100%);
}
.master-data-page--streamlined .md-documents-subtitle {
  color: color-mix(in srgb, var(--text-dark) 70%, transparent);
}
.master-data-page--streamlined .md-documents-subsection {
  padding: 16px 18px 18px;
  border-radius: 12px;
  margin-top: 14px;
  background: color-mix(in srgb, var(--tbl-surface) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-soft) 14%, transparent);
}
.master-data-page--streamlined .md-documents-subsection--client {
  background: linear-gradient(135deg, color-mix(in srgb, #6366f1 6%, transparent) 0%, color-mix(in srgb, var(--tbl-surface) 70%, transparent) 100%);
  border-color: color-mix(in srgb, #6366f1 22%, transparent);
}
.master-data-page--streamlined .md-documents-subsection--broker {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--accent-soft) 14%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, #06b6d4 6%, transparent) 0%, color-mix(in srgb, var(--tbl-surface) 70%, transparent) 100%);
  border: 1px solid color-mix(in srgb, #06b6d4 22%, transparent);
}
.master-data-page--streamlined .md-documents-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--accent-soft) 70%, var(--text-dark) 30%);
}
.master-data-page--streamlined .md-documents-section-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.85;
}
.master-data-page--streamlined .md-documents-subsection--broker .md-documents-section-title {
  color: #67e8f9;
}
.master-data-page--streamlined .md-upload-panel {
  padding: 14px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-soft) 5%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent-soft) 28%, transparent);
  margin-bottom: 14px;
}

/* ═══ UI sweep v6: Transaction Reporting — folder tabs aligned with the
       client-trading-tabs aesthetic, segmented Day/Range buttons, no
       Latest Excel/GZ buttons, no foldable table, more professional
       table chrome ═══ */

/* Folder-tabs: rebuilt to match the .client-trading-tabs silhouette so the
   Daily reports / Manage definition tables tabs read like real folder
   tabs that overlap a panel below. */
.tr-folder-tabs {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 10px;
  margin: 0 0 -1px;
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
  z-index: 2;
}
.tr-folder-tabs .tab-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: 14px 14px 0 0;
  background: color-mix(in srgb, var(--tbl-surface) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-border-md) 90%, transparent);
  border-bottom: 1px solid transparent;
  color: color-mix(in srgb, var(--text-dark) 70%, transparent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  bottom: -1px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 6%, transparent),
    0 2px 8px -2px color-mix(in srgb, var(--sidebar-dark) 35%, transparent);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.tr-folder-tabs .tab-btn:hover { filter: brightness(1.06); }
.tr-folder-tabs .tab-btn.active {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-soft) 35%, var(--tbl-surface) 65%) 0%,
    color-mix(in srgb, var(--tbl-surface) 95%, transparent) 100%
  );
  color: var(--text-dark);
  border-color: color-mix(in srgb, var(--accent-soft) 38%, var(--ds-border-md) 62%);
  border-bottom-color: transparent;
  font-weight: 700;
  z-index: 3;
  box-shadow:
    0 -6px 16px -4px color-mix(in srgb, var(--sidebar-dark) 50%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-light) 12%, transparent);
  transform: translateY(-2px);
}
.tr-folder-tabs .tab-btn.active::before { content: none; }

/* Body panel sits flush against the active tab; flat top-left so the open
   tab merges into it cleanly. */
.bafin-reporting-page .tr-reports-main,
.page-wrapper.bafin-tables-page .tr-reports-main {
  border-top-left-radius: 0;
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
}
.bafin-reporting-page .tr-reports-main::before { content: none; }

/* Day / Range segmented control: matches the slate/glass look used
   elsewhere on the dashboard (active = lighter accent fill, inactive =
   darker glass surface). */
.tr-gen-segmented {
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tbl-surface) 70%, transparent);
  border: 1px solid var(--ds-border-md);
  gap: 2px;
}
.tr-gen-segmented .tr-seg-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: color-mix(in srgb, var(--text-dark) 75%, transparent);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.tr-gen-segmented .tr-seg-btn:hover {
  color: var(--text-dark);
  background: color-mix(in srgb, var(--accent-soft) 12%, transparent);
}
.tr-gen-segmented .tr-seg-btn.active {
  background: color-mix(in srgb, var(--accent-soft, #38bdf8) 28%, rgba(255, 255, 255, 0.1));
  color: #f8fafc;
  box-shadow:
    0 1px 2px rgba(2, 6, 23, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .tr-gen-segmented .tr-seg-btn.active {
  background: color-mix(in srgb, var(--accent-soft, #0ea5e9) 22%, #fff);
  color: #0f172a;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* Daily reports header (replaces the collapsible header) */
.bafin-reporting-page .tr-daily-reports-section {
  margin-top: 18px;
}
.bafin-reporting-page .tr-daily-reports-header {
  display: flex;
  align-items: center;
  padding: 0 4px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-soft) 18%, transparent);
  margin-bottom: 14px;
}
.bafin-reporting-page .tr-daily-reports-heading {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bafin-reporting-page .tr-daily-reports-heading::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, #06b6d4 0%, #6366f1 100%);
}

/* Daily reports table — professional, glass-card surface with crisp
   header, zebra rows, hover wash, and tabular-num figures. */
.bafin-reporting-page .tr-daily-reports-card {
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent-soft) 5%, var(--tbl-surface) 95%) 0%,
    color-mix(in srgb, var(--tbl-surface) 80%, transparent) 100%
  );
  border: 1px solid color-mix(in srgb, var(--accent-soft) 22%, var(--ds-border-md) 78%);
  box-shadow: 0 14px 38px -22px color-mix(in srgb, var(--sidebar-dark) 60%, transparent);
}
.bafin-reporting-page .tr-daily-reports-card .tr-report-filter-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-light) 6%, transparent);
  background: color-mix(in srgb, var(--accent-soft) 4%, transparent);
}
.bafin-reporting-page .tr-report-filter-hint {
  margin: 0;
  padding: 8px 18px 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--text-dark) 65%, transparent);
}
.bafin-reporting-page #tr-daily-reports-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.bafin-reporting-page #tr-daily-reports-tbl thead th {
  padding: 12px 16px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-dark) 70%, transparent);
  background: color-mix(in srgb, var(--sidebar-dark) 24%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-soft) 30%, transparent);
}
.bafin-reporting-page #tr-daily-reports-tbl tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-light) 6%, transparent);
  vertical-align: middle;
}
.bafin-reporting-page #tr-daily-reports-tbl tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--accent-soft) 3%, transparent);
}
.bafin-reporting-page #tr-daily-reports-tbl tbody tr:hover td {
  background: color-mix(in srgb, var(--accent-soft) 9%, transparent);
}
.bafin-reporting-page #tr-daily-reports-tbl tbody tr:last-child td {
  border-bottom: none;
}
.bafin-reporting-page .tr-date-cell-text {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 600;
  color: var(--text-dark);
}
.bafin-reporting-page .tr-genat-text {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: color-mix(in srgb, var(--text-dark) 70%, transparent);
  font-size: 12px;
}

/* ═══ UI sweep v7: unified tile system — one surface color, no rainbow
       borders, no tile-inside-tile (inner sections = flat dividers only) ═══ */

:root {
  --ds-unified-tile-bg: var(--tbl-container-bg, rgba(18, 42, 78, 0.36));
  --ds-unified-tile-border: var(--tbl-container-border, rgba(65, 113, 154, 0.38));
  --ds-unified-tile-radius: var(--radius-lg);
  --ds-unified-tile-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 32px rgba(6, 12, 28, 0.38);
}

/* ── Shared outer-tile surface (single chrome layer) ─────────────────── */
.master-data-page--streamlined .md-documents-section,
.login-info-wrap .li-card--broker,
.login-info-wrap .li-card--glass,
.client-trading-tabs .category-delta-card,
.client-trading-tabs .hana-card,
.bafin-reporting-page .tr-reports-main,
.page-wrapper.bafin-tables-page .tr-reports-main,
.section-card:not(.tr-daily-reports-card) {
  background: var(--ds-unified-tile-bg) !important;
  border: 1px solid var(--ds-unified-tile-border) !important;
  border-radius: var(--ds-unified-tile-radius);
  box-shadow: var(--ds-unified-tile-shadow);
}

/* Kill decorative top/side rainbow strips on tiles */
.account-overview-roster .ao-card::before,
.login-info-wrap .li-card--broker::before,
.master-data-page--streamlined .md-data-shell .md-data-block::before,
.master-data-page--streamlined .md-documents-section::before,
.master-data-page--streamlined .md-documents-title::before,
.master-data-page--streamlined .md-documents-section-title::before,
.master-data-page--streamlined .md-data-block-title::before,
.bafin-reporting-page .tr-reports-main::before,
.bafin-reporting-page .tr-daily-reports-heading::before,
.tr-folder-tabs .tab-btn.active::before,
.li-card--broker .li-card-panel-title::before {
  display: none !important;
  content: none !important;
}

/* ── Account overview: one card per broker; metric groups are flat columns ─ */
.account-overview-roster .ao-card {
  padding: 16px 20px 16px 20px;
  overflow: visible;
}
.account-overview-roster .ao-card::before {
  width: 0;
}
.account-overview-roster .ao-card-ccy-pill {
  background: color-mix(in srgb, var(--accent-soft) 16%, transparent);
  color: var(--text-dark);
  border: 1px solid var(--ds-unified-tile-border);
  box-shadow: none;
}

.client-trading-tabs .account-overview-roster .ao-card-ccy-pill {
  background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%) !important;
  border: 1px solid rgba(125, 211, 252, 0.55) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  box-shadow: 0 3px 12px -3px rgba(37, 99, 235, 0.55) !important;
}

.account-overview-roster .ao-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.account-overview-roster .ao-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}
.account-overview-roster .ao-value-ccy {
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.82;
  vertical-align: baseline;
}
.account-overview-roster .ao-group--capital .ao-value-ccy { color: #93c5fd; }
.account-overview-roster .ao-group--usd .ao-value-ccy { color: #4ade80; }
.account-overview-roster .ao-group--margin .ao-value-ccy { color: #fcd34d; }
.account-overview-roster .ao-group-ccy {
  flex-shrink: 0;
  margin-left: auto;
}
.ao-section-divider--ava {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 14px;
}
.ao-section-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #ea580c 45%, var(--ds-unified-tile-border)), transparent);
}
.ao-section-divider__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fb923c;
  white-space: nowrap;
}
.ao-section-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.account-overview-roster--ava .ao-card--ava {
  border: 1px solid color-mix(in srgb, #ea580c 38%, var(--ds-unified-tile-border)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fb923c 12%, transparent),
    0 0 0 1px color-mix(in srgb, #ea580c 8%, transparent) !important;
}
.account-overview-roster--ava .ao-card-ccy-pill--ava {
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%) !important;
  border-color: color-mix(in srgb, #fdba74 55%, transparent) !important;
}
.account-overview-roster--ava .ao-card--disconnected {
  opacity: 0.82;
  border-color: color-mix(in srgb, #f87171 45%, var(--ds-unified-tile-border)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f87171 18%, transparent) !important;
}
.account-overview-roster--ava .ao-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.account-overview-roster--ava .ao-card-header-meta {
  flex-shrink: 0;
}
.account-overview-roster--ava .ao-card-last-seen {
  margin-top: 4px;
}
.ao-toolbar .ao-sort-pill {
  appearance: none;
  border: 1px solid var(--ds-unified-tile-border);
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.ava-options-tab-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.portfolio-category-delta-inner .category-delta-dmx__input,
.portfolio-category-delta-inner .portfolio-expected-input.category-delta-dmx__input {
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-light);
  background: transparent;
  border: none;
  border-bottom: 1px dashed transparent;
  border-radius: 0;
  text-align: left;
  padding: 0;
  margin-top: 0;
  width: 100%;
  min-height: 0;
  box-shadow: none;
}
.portfolio-category-delta-inner .category-delta-dmx__input:focus,
.portfolio-category-delta-inner .portfolio-expected-input.category-delta-dmx__input:focus {
  outline: none;
  border-bottom-color: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}
.portfolio-category-delta-inner .portfolio-expected-input--saved {
  color: #4ade80 !important;
  transition: color 0.3s ease;
}
.cm-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.cm-summary-card {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--color-border, rgba(148, 163, 184, 0.2));
  background: var(--color-bg-secondary, rgba(15, 23, 42, 0.45));
}
.cm-summary-card__value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-light, #f8fafc);
}
.cm-summary-card__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted, #94a3b8);
}
.cm-summary-card--alert { border-color: color-mix(in srgb, #f59e0b 45%, transparent); }
.cm-summary-card--ok { border-color: color-mix(in srgb, #22c55e 40%, transparent); }
.cm-summary-card--muted { border-color: color-mix(in srgb, #64748b 35%, transparent); }
.cm-table tbody tr.cm-row--inactive {
  opacity: 0.72;
  background: color-mix(in srgb, var(--color-bg-tertiary, #1e293b) 65%, transparent);
}
.cm-table tbody tr.cm-row--inactive .cm-status--inactive::after {
  content: ' · EOL';
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted, #94a3b8);
}
.cm-attention-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #f59e0b 42%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, #fbbf24 16%, transparent), color-mix(in srgb, #f59e0b 8%, transparent));
  position: relative;
  overflow: hidden;
}
.cm-attention-hero__pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
  animation: cmAttentionPulse 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes cmAttentionPulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  70% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
.cm-attention-hero__body { flex: 1; min-width: 0; }
.cm-attention-hero__title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-light, #f8fafc);
}
.cm-attention-hero__text {
  margin: 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--text-light) 78%, transparent);
  line-height: 1.45;
}
.cm-attention-hero__count {
  min-width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
  color: #1f2937;
  background: linear-gradient(180deg, #fcd34d, #f59e0b);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}
.cm-inactive-note {
  margin: 0 0 12px;
  padding: 0 2px;
}
.tab-badge--muted {
  opacity: 0.65;
  font-weight: 600;
}

.master-data-page--streamlined .md-data-shell .md-data-block {
  background: transparent !important;
  border: none !important;
  border-radius: var(--tbl-radius, 14px) !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: var(--ds-stack-md, 18px) !important;
  border-bottom: none !important;
  overflow: visible;
}
.master-data-page--streamlined .md-data-shell .md-data-block:last-child {
  margin-bottom: 0 !important;
}
.master-data-page--streamlined .md-data-block-title {
  display: block;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ds-unified-tile-border);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}
.master-data-page--streamlined .md-documents-subsection,
.master-data-page--streamlined .md-documents-subsection--client,
.master-data-page--streamlined .md-documents-subsection--broker {
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  padding: 0;
  margin-top: 18px;
  box-shadow: none;
}
.master-data-page--streamlined .md-documents-section-title {
  color: var(--ds-text-secondary);
  letter-spacing: 0.06em;
}
.master-data-page--streamlined .md-documents-subsection--broker .md-documents-section-title {
  color: var(--ds-text-secondary);
}
.master-data-page--streamlined .md-upload-panel {
  background: transparent;
  border: 1px dashed var(--ds-unified-tile-border);
  border-radius: var(--radius-md, 10px);
  margin-bottom: 14px;
  padding: 14px 16px;
}

/* ── Brokers portal: one card per broker; inner panels flat ───────────── */
.login-info-wrap .li-card--broker {
  overflow: visible;
  padding: 0;
}
.login-info-wrap .li-card--broker .li-card-bento {
  padding: 18px 20px 8px;
}
.login-info-wrap .li-card--broker .li-card-panel,
.login-info-wrap .li-card--broker .li-card-panel--portal,
.login-info-wrap .li-card--broker .li-card-panel--security,
.login-info-wrap .li-card--broker .li-card-panel--account,
.login-info-wrap .li-card--broker .li-card-panel--notes {
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 16px;
}
.login-info-wrap .li-card--broker .li-card-panel-title {
  border-bottom: 1px solid var(--ds-unified-tile-border);
  margin-bottom: 12px;
  padding-bottom: 8px;
}
.login-info-wrap .li-card--broker .li-card-panel--portal .li-card-panel-title-text,
.login-info-wrap .li-card--broker .li-card-panel--security .li-card-panel-title-text,
.login-info-wrap .li-card--broker .li-card-panel--account .li-card-panel-title-text,
.login-info-wrap .li-card--broker .li-card-panel--notes .li-card-panel-title-text {
  color: var(--ds-text-secondary);
}
.login-info-wrap .li-card--broker .li-card-panel--notes {
  margin: 0 20px 16px;
  padding: 0 0 16px;
  border-top: 1px solid var(--ds-unified-tile-border);
  padding-top: 16px;
}
.login-info-wrap .li-card--broker .li-card-actions {
  background: transparent;
  border-top: 1px solid var(--ds-unified-tile-border);
}

/* ── HANA + category delta: same neutral tile (status via badges only) ── */
.client-trading-tabs .hana-card,
.client-trading-tabs .hana-card--ok,
.client-trading-tabs .hana-card--warn,
.client-trading-tabs .hana-card--crit,
.client-trading-tabs .category-delta-card,
.client-trading-tabs .category-delta-card--mismatch {
  background: var(--ds-unified-tile-bg) !important;
  border: 1px solid var(--ds-unified-tile-border) !important;
  box-shadow: var(--ds-unified-tile-shadow);
}

/* ── Transaction reporting: panel is the tile; table area not nested ──── */
.bafin-reporting-page .tr-daily-reports-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 0;
}
.bafin-reporting-page .tr-daily-reports-card .tr-report-filter-toolbar {
  background: transparent;
  border-bottom: 1px solid var(--ds-unified-tile-border);
}
.bafin-reporting-page .tr-daily-reports-header {
  border-bottom: 1px solid var(--ds-unified-tile-border);
}
.bafin-reporting-page #tr-daily-reports-tbl thead th {
  background: color-mix(in srgb, var(--sidebar-dark) 18%, transparent);
  border-bottom: 1px solid var(--ds-unified-tile-border);
}

/* Folder tabs: neutral chrome only (no rainbow active stripe) */
.tr-folder-tabs .tab-btn {
  background: color-mix(in srgb, var(--tbl-surface) 58%, transparent);
  border-color: var(--ds-unified-tile-border);
}
.tr-folder-tabs .tab-btn:hover {
  background: color-mix(in srgb, var(--tbl-surface) 72%, transparent);
  filter: none;
}
.tr-folder-tabs .tab-btn.active {
  background: var(--ds-unified-tile-bg);
  border-color: var(--ds-unified-tile-border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-light) 6%, transparent);
  transform: none;
}

/* ── Global cards/tiles: one surface, no accent stripes ─────────────── */
.stat-card,
.module-card,
.dash-tile,
.ui-card,
.table-container,
.brokers-table-container,
.standard-table-wrap,
.users-table-container,
.broker-tbl-wrap {
  background: var(--ds-unified-tile-bg) !important;
  border: 1px solid var(--ds-unified-tile-border) !important;
  border-radius: var(--ds-unified-tile-radius);
  box-shadow: var(--ds-unified-tile-shadow);
}
.stat-card::before,
.module-card::before,
.dash-tile::before,
.dash-tile-blue::before,
.dash-tile-teal::before,
.dash-tile-purple::before,
.dash-tile-gold::before,
.dash-tile-green::before,
.dash-tile-sky::before,
.dash-tile-indigo::before,
.dash-tile-rose::before,
.dash-tile-orange::before {
  display: none !important;
  content: none !important;
}

/* Section lists: outer card only; table band is not a nested tile */
.section-card > .section-card-table-panel,
.section-card > .dt-table-wrapper {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.section-card > .section-card-table-panel {
  border-top: 1px solid var(--ds-unified-tile-border);
}

/* MetaTrader glass cards: same shell; header is a divider, not inner tile */
.login-info-wrap .li-card.li-card--glass {
  background: var(--ds-unified-tile-bg) !important;
  border: 1px solid var(--ds-unified-tile-border) !important;
  box-shadow: var(--ds-unified-tile-shadow);
}
.login-info-wrap .li-card.li-card--glass .li-card-header {
  background: transparent;
  border-bottom: 1px solid var(--ds-unified-tile-border);
}

/* Tables wrapped as tiles: neutral border only (no gradient frame) */
.login-info-wrap .login-info-table,
.cm-table {
  background: var(--ds-unified-tile-bg);
  border: 1px solid var(--ds-unified-tile-border) !important;
  box-shadow: var(--ds-unified-tile-shadow);
}
.login-info-wrap .login-info-table thead th,
.cm-table thead th {
  background: color-mix(in srgb, var(--sidebar-dark) 18%, transparent);
  border-bottom: 1px solid var(--ds-unified-tile-border) !important;
}
.cm-table th,
.cm-table td {
  border-right-color: var(--ds-unified-tile-border);
  border-bottom-color: var(--ds-unified-tile-border);
}

/* Master data outer shell — no chrome (tiles are Profile/Company blocks only) */
.master-data-page--streamlined .md-data-shell.md-data-form-panel {
  padding: 0;
}
.master-data-page--streamlined .md-documents-section {
  padding: 22px 26px 26px;
  margin-top: 28px;
}

/* ═══ UI sweep v8: Brokers Portal — two unified tiles per row, no nested
       card chrome, no colored accent lines ═══ */

.login-info-wrap .li-card-grid--broker-portal {
  grid-template-columns: 1fr;
  max-width: 1120px;
  gap: 36px;
}

.login-info-wrap .li-broker-group {
  min-width: 0;
}

.login-info-wrap .li-broker-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Broker title bar — not a tile, just hierarchy above the grid */
.login-info-wrap .li-broker-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding: 0 2px 4px;
  border-bottom: 1px solid var(--ds-unified-tile-border);
}
.login-info-wrap .li-broker-header-main {
  min-width: 0;
}
.login-info-wrap .li-broker-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-text-secondary);
}
.login-info-wrap .li-broker-name {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-dark);
}
.login-info-wrap .li-broker-status {
  flex-shrink: 0;
  max-width: min(100%, 22rem);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--text-dark);
  background: color-mix(in srgb, var(--accent-soft) 12%, transparent);
  border: 1px solid var(--ds-unified-tile-border);
  white-space: normal;
  text-align: right;
}

/* Two section tiles per row */
.login-info-wrap .li-broker-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  align-items: stretch;
}
@media (max-width: 860px) {
  .login-info-wrap .li-broker-tile-grid {
    grid-template-columns: 1fr;
  }
}

/* Each section = one unified tile (same as dashboard tiles elsewhere) */
.login-info-wrap .li-broker-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 18px 20px 20px;
  background: var(--tbl-body-bg, rgba(10, 33, 68, 0.45));
  border: 1px solid rgba(65, 113, 154, 0.25);
  border-radius: var(--tbl-radius, 14px);
  box-shadow: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.login-info-wrap .li-broker-tile::before,
.login-info-wrap .li-broker-tile-title::before {
  display: none !important;
  content: none !important;
}
.login-info-wrap .li-broker-tile-title {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ds-unified-tile-border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-text-secondary);
  line-height: 1.35;
}

.login-info-wrap .li-broker-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
}
.login-info-wrap .li-broker-tile .li-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: none;
}
.login-info-wrap .li-broker-tile .li-field--flush {
  flex: 1 1 auto;
}
.login-info-wrap .li-broker-tile .li-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-dark) 62%, var(--ds-text-secondary) 38%);
}
.login-info-wrap .li-broker-tile .li-input,
.login-info-wrap .li-broker-tile select.li-input,
.login-info-wrap .li-broker-tile .li-textarea {
  min-height: 44px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  background: color-mix(in srgb, var(--tbl-surface) 82%, transparent);
  border: 1px solid var(--ds-unified-tile-border);
  color: var(--text-dark);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.login-info-wrap .li-broker-tile .li-input[readonly] {
  background: color-mix(in srgb, var(--tbl-surface) 68%, transparent);
  cursor: default;
}
.login-info-wrap .li-broker-tile .li-input:focus,
.login-info-wrap .li-broker-tile select.li-input:focus,
.login-info-wrap .li-broker-tile .li-textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-soft) 45%, var(--ds-unified-tile-border) 55%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 12%, transparent);
}
.login-info-wrap .li-broker-tile .li-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
}
.login-info-wrap .li-broker-tile .li-value-display {
  min-height: 44px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  background: color-mix(in srgb, var(--tbl-surface) 68%, transparent);
  border: 1px solid var(--ds-unified-tile-border);
  color: var(--text-dark);
  box-sizing: border-box;
}
.login-info-wrap .li-broker-tile .li-field-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}
.login-info-wrap .li-broker-tile .li-field-row .li-input {
  flex: 1 1 auto;
  min-width: 0;
}
.login-info-wrap .li-broker-tile .li-icon-btn {
  flex-shrink: 0;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}
.login-info-wrap .li-broker-tile .li-icon-btn--open {
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
  border-color: #4f46e5;
  color: #fff;
}
.login-info-wrap .li-broker-tile .li-icon-btn--copy,
.login-info-wrap .li-broker-tile .li-icon-btn--show {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border-color: #15803d;
  color: #fff;
}
.login-info-wrap .li-broker-tile .li-icon-btn:hover {
  filter: brightness(1.08);
}
.login-info-wrap .li-broker-tile .li-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 13px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tbl-surface) 68%, transparent);
  border: 1px solid var(--ds-unified-tile-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}
.login-info-wrap .li-broker-tile .li-promo-readonly-summary {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ds-text-secondary);
  background: color-mix(in srgb, var(--tbl-surface) 55%, transparent);
  border: 1px solid var(--ds-unified-tile-border);
}
.login-info-wrap .li-broker-tile .li-checkbox-wrap {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tbl-surface) 55%, transparent);
  border: 1px solid var(--ds-unified-tile-border);
}

/* Notes tile stretches to match sibling height on wide screens */
.login-info-wrap .li-broker-tile--notes .li-broker-fields {
  min-height: 100%;
}
.login-info-wrap .li-broker-tile--notes .li-textarea {
  flex: 1 1 auto;
  min-height: 148px;
}

.login-info-wrap .li-broker-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.login-info-wrap .li-broker-actions .btn {
  min-height: 42px;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 600;
}

/* Kill legacy nested-card accents if old markup remains cached */
.login-info-wrap .li-card--broker .li-card-panel,
.login-info-wrap .li-card--broker .li-card-panel--portal,
.login-info-wrap .li-card--broker .li-card-panel--security,
.login-info-wrap .li-card--broker .li-card-panel--account,
.login-info-wrap .li-card--broker .li-card-panel--notes {
  border-left: none !important;
}
.login-info-wrap .li-card--broker .li-card-panel-title::before {
  display: none !important;
}

/* ═══ UI sweep v9: Transaction Reporting — stable folder tabs (no jump),
       unified shell on both tabs, cleaner command deck + reports layout ═══ */

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock {
  background: var(--ds-app-canvas, var(--bg-card));
  min-height: 100vh;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .page-card.wide-layout {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .page-card.wide-layout > .bafin-tr-page-header,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .page-card.wide-layout > .bafin-tr-page-nav {
  padding-left: var(--layout-page-padding);
  padding-right: var(--layout-page-padding);
  box-sizing: border-box;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .page-card.wide-layout > .bafin-tr-page-header {
  padding-top: var(--layout-content-padding-top);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .bafin-tr-tagline,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bafin-tr-tagline {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ds-text-secondary);
  max-width: 42rem;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .page-body,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .page-body {
  padding-left: var(--layout-page-padding);
  padding-right: var(--layout-page-padding);
  box-sizing: border-box;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .page-card > .bafin-tr-page-header {
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
  border-bottom: none;
  box-shadow: none;
}
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .page-card > .bafin-tr-page-header::after {
  display: none;
}
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .page-card > .bafin-tr-page-nav {
  justify-content: flex-end;
  padding-top: 4px;
  padding-bottom: 10px;
  margin-bottom: 0;
  border-bottom: none;
}

.tr-page-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}

.tr-page-alert {
  margin: 0 0 14px;
}

/* ── Folder tabs: fixed geometry — active/inactive identical size, no shift ─ */
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs.tr-page-subnav,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs.tr-page-subnav {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 42px;
  margin: 0 0 0 0 !important;
  padding: 0 0 0 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible;
  position: relative;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs.tr-page-subnav::after,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs.tr-page-subnav::after {
  display: none !important;
  content: none !important;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs .tab-btn,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs .tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 10px 22px !important;
  min-height: 42px;
  min-width: 10.5rem;
  box-sizing: border-box;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  bottom: auto !important;
  border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 0 0 !important;
  border: 1px solid var(--ds-unified-tile-border) !important;
  border-bottom: none !important;
  background: color-mix(in srgb, var(--tbl-surface) 58%, transparent) !important;
  color: color-mix(in srgb, var(--text-dark) 72%, transparent) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  z-index: 1;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs .tab-btn:first-child,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs .tab-btn:first-child {
  margin-left: 0 !important;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs .tab-btn:hover,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs .tab-btn:hover {
  background: color-mix(in srgb, var(--tbl-surface) 72%, transparent) !important;
  color: var(--text-dark) !important;
  filter: none !important;
  transform: none !important;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs .tab-btn.active,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs .tab-btn.active {
  padding: 10px 22px !important;
  min-height: 42px;
  transform: none !important;
  filter: none !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--text-dark) !important;
  background: var(--ds-unified-tile-bg) !important;
  border-color: var(--ds-unified-tile-border) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  z-index: 2;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs .tab-btn.active:hover,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs .tab-btn.active:hover {
  background: var(--ds-unified-tile-bg) !important;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-folder-tabs .tr-folder-tab-label,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-folder-tabs .tr-folder-tab-label {
  white-space: nowrap;
}

/* ── Main panel: one unified tile connected to active tab ─────────────── */
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-reports-main,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-reports-main {
  margin-top: -1px;
  padding: 20px 22px 22px;
  background: var(--ds-unified-tile-bg) !important;
  border: 1px solid var(--ds-unified-tile-border) !important;
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  box-shadow: var(--ds-unified-tile-shadow);
  box-sizing: border-box;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-reports-main::before,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-reports-main::before {
  display: none !important;
  content: none !important;
}

/* ── Daily reports: command deck + flat reports body (no nested tile) ─── */
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-command-deck {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--ds-unified-tile-border);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-gen-toolbar.tr-action-bar {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-action-bar__main {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr) auto;
  align-items: end;
  gap: 16px 20px;
  width: 100%;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-action-label {
  color: var(--ds-text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-action-field {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 0;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-action-field--dates {
  flex: 1 1 320px;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-gen-admin-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 10px 14px;
  margin: 0;
  background: color-mix(in srgb, var(--accent-soft) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-soft) 18%, transparent);
  border-radius: var(--radius-md, 10px);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-gen-admin-strip-desc {
  margin: 0;
  font-size: 12px;
  color: var(--ds-text-secondary);
  line-height: 1.45;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-reports-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-report-filter-bar {
  padding-bottom: 2px;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-report-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-report-filter-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-text-secondary);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-report-filter-hint,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-report-filter-hint--static {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--ds-text-secondary);
  background: transparent !important;
  border: none !important;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-reports-table-wrap {
  background: transparent;
  border: 1px solid var(--ds-unified-tile-border);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  margin: 0;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock #tr-daily-reports-tbl thead th {
  background: color-mix(in srgb, var(--sidebar-dark) 18%, transparent);
  border-bottom: 1px solid var(--ds-unified-tile-border);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ds-text-secondary);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock #tr-daily-reports-tbl tbody td {
  border-bottom: 1px solid color-mix(in srgb, var(--ds-unified-tile-border) 65%, transparent);
  vertical-align: middle;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock #tr-daily-reports-tbl tbody tr:last-child td {
  border-bottom: none;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock #tr-daily-reports-tbl tbody tr:hover td {
  background: color-mix(in srgb, var(--accent-soft) 6%, transparent);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-gen-segmented {
  background: color-mix(in srgb, var(--tbl-surface) 70%, transparent);
  border: 1px solid var(--ds-unified-tile-border);
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-gen-segmented .tr-seg-btn.active {
  background: color-mix(in srgb, var(--accent-soft) 22%, var(--tbl-surface) 78%);
  color: var(--text-dark);
  box-shadow: none;
}

/* ── Definition tables tab: match shell styling inside same panel ─────── */
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-bafin-tables-upload,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-def-upload {
  padding: 16px 18px;
  margin: 0 0 16px;
  background: color-mix(in srgb, var(--tbl-surface) 55%, transparent);
  border: 1px solid var(--ds-unified-tile-border);
  border-radius: var(--radius-md, 10px);
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-def-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 0 0 16px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--ds-unified-tile-border);
  background: transparent;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-bafin-entity-tabs {
  margin: 0 0 16px;
  padding: 4px;
  gap: 4px;
  background: color-mix(in srgb, var(--tbl-surface) 55%, transparent);
  border: 1px solid var(--ds-unified-tile-border);
  border-radius: var(--radius-md, 10px);
  box-shadow: none;
  overflow: visible;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-bafin-entity-tabs .tab-btn {
  margin: 0 !important;
  padding: 9px 16px !important;
  min-height: 38px;
  transform: none !important;
  filter: none !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--text-dark) 75%, transparent);
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-bafin-entity-tabs .tab-btn.active {
  background: var(--ds-unified-tile-bg) !important;
  border-color: var(--ds-unified-tile-border) !important;
  color: var(--text-dark) !important;
  font-weight: 700;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tab-content .table-container {
  border: 1px solid var(--ds-unified-tile-border);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  background: transparent;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tab-content .bt-def-table-panel {
  border: 1px solid var(--ds-unified-tile-border);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  background: color-mix(in srgb, var(--tbl-surface) 35%, transparent);
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tab-content .bt-def-table-panel .section-header.bt-def-section-head {
  margin: 0;
  padding: 10px 16px;
  border: none;
  border-bottom: 1px solid var(--ds-unified-tile-border);
  border-radius: 0;
  background: color-mix(in srgb, var(--sidebar-dark) 16%, transparent);
  box-shadow: none;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tab-content .bt-def-table-panel .section-header h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-dark);
  margin: 0;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tab-content .bt-def-table-panel .table-container {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tab-content .bt-def-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-instruments-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--ocean-deep, #0f2744) 92%, var(--tbl-surface) 8%) !important;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-instruments-table .bt-actions-col,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-instruments-table .bt-actions-cell {
  position: sticky;
  right: 0;
  z-index: 1;
  background: inherit;
  box-shadow: -8px 0 12px -10px rgba(0, 0, 0, 0.45);
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .bt-instruments-table thead .bt-actions-col {
  z-index: 3;
  background: color-mix(in srgb, var(--ocean-deep, #0f2744) 92%, var(--tbl-surface) 8%) !important;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tab-content .section-header {
  margin-bottom: 12px;
}

/* ═══ UI sweep v10: global alignment, tile contrast, semantic button colors,
       spacing rhythm — one coherent system across all pages ═══ */

:root {
  /* Page canvas — deeper so tiles read clearly above it */
  --ds-app-canvas: color-mix(in srgb, var(--bg-main) 94%, var(--sidebar-dark) 6%);
  /* Elevated tile surface — visibly lighter than canvas */
  --ds-unified-tile-bg: color-mix(in srgb, var(--bg-card) 92%, var(--text-light) 8%);
  --ds-unified-tile-border: color-mix(in srgb, var(--accent-soft) 14%, var(--ds-border-md) 86%);
  --ds-unified-tile-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-soft) 6%, transparent),
    0 14px 40px -18px color-mix(in srgb, var(--sidebar-dark) 55%, transparent);

  /* Spacing rhythm */
  --ds-stack-xs: 8px;
  --ds-stack-sm: 12px;
  --ds-stack-md: 18px;
  --ds-stack-lg: 24px;
  --ds-stack-xl: 32px;

  /* Semantic button colors */
  --ds-btn-primary-bg: #2563eb;
  --ds-btn-primary-border: #4f46e5;
  --ds-btn-success-bg: #16a34a;
  --ds-btn-success-border: #15803d;
  --ds-btn-danger-bg: #dc2626;
  --ds-btn-danger-border: #b91c1c;
  --ds-btn-warning-bg: #f59e0b;
  --ds-btn-warning-border: #b45309;
  --ds-btn-info-bg: #6366f1;
  --ds-btn-info-border: #4338ca;
}

body,
.main-container,
.injected-page-content,
.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock {
  background: var(--ds-app-canvas);
}

/* ── Page titles: same position, type scale, and divider everywhere ───── */
.page-header,
.main-container > .page-header,
.page-card > .page-header,
.page-card > .bafin-tr-page-header,
.page-wrapper .bafin-tr-page-header,
.login-info-client-hero,
.client-context-banner,
.dash-hero-data,
.settings-hub .settings-page-header,
.broker-mgmt-page .broker-overview-page-header,
.master-data-page--streamlined .page-header {
  padding-top: var(--layout-content-padding-top);
  padding-bottom: var(--spacing-4);
  margin-top: 0;
  margin-bottom: var(--ds-stack-md);
  border-bottom: 1px solid var(--ds-unified-tile-border);
  box-shadow: none;
  text-align: left;
  position: relative;
}

.page-header::after,
.bafin-tr-page-header::after,
.master-data-page--streamlined .page-header::after,
.broker-mgmt-page .broker-overview-page-header::after {
  display: none !important;
}

.page-title,
.page-heading,
.bafin-tr-main-title,
.dash-client-title,
.login-info-client-hero .dash-client-title,
.settings-role-page-title,
.settings-perm-matrix-page-title,
.broker-overview-page-title,
body.product-activation-page .if-page-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.45rem, 2.1vw, 1.75rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin: 0 0 6px 0 !important;
  color: var(--text-dark) !important;
}

.page-subtitle,
.bafin-tr-tagline,
.bafin-tr-subtitle,
.client-context-banner__subtitle,
.login-info-client-hero .client-context-banner__subtitle {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--ds-text-secondary) !important;
  line-height: 1.45 !important;
  max-width: 44rem;
}

/* Client context subtitle keeps section label feel but aligned rhythm */
.client-context-banner__subtitle,
.login-info-client-hero .client-context-banner__subtitle {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

.main-container > .page-header {
  align-items: flex-end;
  padding-bottom: var(--spacing-4);
}

.page-body,
.injected-page-content > .main-container,
.page-card.wide-layout > .page-body {
  padding-top: 0;
}

.page-nav,
.bafin-tr-page-nav {
  margin-bottom: var(--ds-stack-sm);
  padding-top: 0;
  padding-bottom: var(--ds-stack-sm);
  border-bottom: none;
}

/* ── Tiles: always elevated above page canvas ─────────────────────────── */
.section-card,
.stat-card,
.module-card,
.dash-tile,
.ui-card,
.table-container,
.brokers-table-container,
.standard-table-wrap,
.master-data-page--streamlined .md-data-shell.md-data-form-panel,
.master-data-page--streamlined .md-documents-section,
.login-info-wrap .li-broker-tile,
.client-trading-tabs .category-delta-card,
.client-trading-tabs .hana-card,
.page-wrapper.bafin-reporting-page .tr-reports-main,
.page-wrapper.bafin-tables-page .tr-reports-main,
.collapsible-section:not(.is-collapsed) {
  background: var(--ds-unified-tile-bg) !important;
  border: 1px solid var(--ds-unified-tile-border) !important;
  box-shadow: var(--ds-unified-tile-shadow) !important;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock,
.page-wrapper.bafin-tables-page.bafin-tables-theme-lock {
  --tbl-surface: var(--ds-unified-tile-bg);
  --tr-shell-bg: var(--ds-app-canvas);
  background: var(--ds-app-canvas) !important;
}

/* No nested tile boxes inside main panels */
.page-wrapper.bafin-reporting-page .tr-command-deck .tr-gen-toolbar.tr-action-bar,
.page-wrapper.bafin-reporting-page .tr-gen-admin-strip,
.page-wrapper.bafin-tables-page .tr-bafin-tables-upload,
.page-wrapper.bafin-tables-page .bt-def-upload {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-wrapper.bafin-reporting-page .tr-command-deck {
  border-bottom: 1px solid var(--ds-unified-tile-border);
}

.page-wrapper.bafin-tables-page .tr-bafin-tables-upload,
.page-wrapper.bafin-tables-page .bt-def-upload {
  padding-bottom: var(--ds-stack-md);
  margin-bottom: var(--ds-stack-md);
  border-bottom: 1px solid var(--ds-unified-tile-border);
}

.page-wrapper.bafin-tables-page .bt-def-filter-toolbar {
  padding-bottom: var(--ds-stack-md);
  margin-bottom: var(--ds-stack-md);
  border-bottom: 1px solid var(--ds-unified-tile-border);
  background: transparent !important;
}

.page-wrapper.bafin-tables-page .tr-bafin-entity-tabs {
  background: color-mix(in srgb, var(--ds-app-canvas) 55%, var(--bg-card) 45%) !important;
  border: 1px solid var(--ds-unified-tile-border) !important;
  box-shadow: none !important;
}

.page-wrapper.bafin-tables-page .tab-content .table-container {
  background: color-mix(in srgb, var(--ds-app-canvas) 40%, var(--bg-card) 60%) !important;
  border: 1px solid var(--ds-unified-tile-border) !important;
}

/* ── Semantic buttons (meaningful color, consistent globally) ─────────── */
.btn.btn-primary:not(.btn-save-changes):not(.md-save-changes-btn),
button[type="submit"].btn.btn-primary:not(.btn-save-changes):not(.md-save-changes-btn),
input[type="submit"].btn.btn-primary:not(.btn-save-changes):not(.md-save-changes-btn),
a.btn.btn-primary:not(.btn-save-changes) {
  background: linear-gradient(135deg, var(--ds-btn-primary-bg) 0%, var(--ds-btn-primary-border) 100%) !important;
  border: 1px solid var(--ds-btn-primary-border) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px -6px color-mix(in srgb, var(--ds-btn-primary-bg) 55%, transparent) !important;
}
.btn.btn-primary:not(.btn-save-changes):not(.md-save-changes-btn):hover,
button[type="submit"].btn.btn-primary:not(.btn-save-changes):not(.md-save-changes-btn):hover,
a.btn.btn-primary:not(.btn-save-changes):hover {
  filter: brightness(1.08);
  color: #ffffff !important;
}

.btn.btn-success,
.btn-save-changes,
.md-save-changes-btn,
.btn.btn-brand-cta,
a.btn.btn-success,
a.btn.btn-brand-cta {
  background: linear-gradient(135deg, var(--ds-btn-success-bg) 0%, var(--ds-btn-success-border) 100%) !important;
  border: 1px solid var(--ds-btn-success-border) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px -6px color-mix(in srgb, var(--ds-btn-success-bg) 50%, transparent) !important;
}
.btn.btn-success:hover,
.btn-save-changes:hover,
.md-save-changes-btn:hover,
.btn.btn-brand-cta:hover,
a.btn.btn-success:hover,
a.btn.btn-brand-cta:hover {
  filter: brightness(1.08);
  color: #ffffff !important;
}

.btn.btn-edit,
button[data-mt-edit].btn,
a.btn.btn-edit,
.btn-action.edit {
  background: linear-gradient(135deg, var(--ds-btn-warning-bg) 0%, var(--ds-btn-warning-border) 100%) !important;
  border: 1px solid var(--ds-btn-warning-border) !important;
  color: #1f2937 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px -6px color-mix(in srgb, var(--ds-btn-warning-bg) 45%, transparent) !important;
}
.btn.btn-edit:hover,
button[data-mt-edit].btn:hover,
a.btn.btn-edit:hover,
.btn-action.edit:hover {
  filter: brightness(1.08);
  color: #1f2937 !important;
}

.btn.btn-danger,
a.btn.btn-danger {
  background: linear-gradient(135deg, var(--ds-btn-danger-bg) 0%, var(--ds-btn-danger-border) 100%) !important;
  border: 1px solid var(--ds-btn-danger-border) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.btn.btn-danger:hover,
a.btn.btn-danger:hover {
  filter: brightness(1.08);
  color: #ffffff !important;
}

.btn.btn-warning {
  background: linear-gradient(135deg, var(--ds-btn-warning-bg) 0%, var(--ds-btn-warning-border) 100%) !important;
  border: 1px solid var(--ds-btn-warning-border) !important;
  color: #1f2937 !important;
  font-weight: 600 !important;
}

.btn.btn-secondary {
  background: linear-gradient(135deg, var(--ds-btn-info-bg) 0%, var(--ds-btn-info-border) 100%) !important;
  border: 1px solid var(--ds-btn-info-border) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.btn.btn-secondary:hover {
  filter: brightness(1.08);
  color: #ffffff !important;
}

.btn.btn-slate,
.btn.btn-slate.btn-sm {
  background: color-mix(in srgb, var(--bg-card) 65%, transparent) !important;
  border: 1px solid var(--ds-unified-tile-border) !important;
  color: var(--text-dark) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.btn.btn-slate:hover {
  background: color-mix(in srgb, var(--bg-card) 82%, var(--accent-soft) 18%) !important;
  border-color: color-mix(in srgb, var(--accent-soft) 35%, var(--ds-unified-tile-border) 65%) !important;
  color: var(--text-dark) !important;
}

/* Create/add links that still use btn-primary */
a.btn.btn-primary.btn-sm[href*="add_"],
a.btn.btn-primary.btn-sm[href*="/add"] {
  background: linear-gradient(135deg, var(--ds-btn-success-bg) 0%, var(--ds-btn-success-border) 100%) !important;
  border-color: var(--ds-btn-success-border) !important;
}

/* ── Global spacing & alignment ───────────────────────────────────────── */
.form-group,
.li-field,
.md-field-item {
  margin-bottom: var(--ds-stack-sm);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-stack-sm);
  margin-bottom: var(--ds-stack-md);
  flex-wrap: wrap;
}

.data-table th,
.data-table td,
.standard-data-table th,
.standard-data-table td {
  padding: 12px 14px;
  vertical-align: middle;
}

.data-table thead th,
.standard-data-table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ds-text-secondary);
}

.tr-action-bar__main,
.tr-report-filter-toolbar,
.bt-def-upload-row {
  align-items: center;
  gap: var(--ds-stack-md);
}

.page-body > .tr-page-shell,
.page-body > .section-card,
.page-body > .tabs-container {
  margin-top: 0;
}

.main-container > .page-header + .section-card,
.main-container > .page-header + .standard-table-wrap {
  margin-top: 0;
}

/* ═══ UI sweep v11: global page head — submenu title, aligned content column ═══ */

:root {
  --ds-content-max-width: min(100%, 1920px);
  --ds-page-head-title-size: clamp(1.45rem, 2.1vw, 1.75rem);
}

.ds-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-stack-md);
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--ds-content-max-width);
  margin: 0 auto var(--ds-stack-lg);
  padding: 0 0 var(--ds-stack-md);
  border-bottom: 1px solid var(--ds-unified-tile-border);
  box-sizing: border-box;
}

.ds-page-head__main {
  flex: 1 1 240px;
  min-width: 0;
}

.ds-page-head__title {
  margin: 0 0 6px 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--ds-page-head-title-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-dark);
}

.ds-page-head__subtitle {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ds-text-secondary);
  max-width: 44rem;
}

.ds-page-head__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

/* One content column — same horizontal origin on every page */
.has-ds-page-head > .main-container,
.has-ds-page-head > .page-wrapper,
.has-ds-page-head > .login-info-wrap,
.has-ds-page-head > .page-body,
.has-ds-page-head > .table-page-container {
  width: 100%;
  max-width: var(--ds-content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.has-ds-page-head.main-container,
.injected-page-content.has-ds-page-head {
  padding-top: var(--layout-content-padding-top);
}

.has-ds-page-head > .main-container {
  padding-top: 0;
  padding-bottom: 0;
}

.has-ds-page-head > .page-wrapper {
  padding: 0;
}

.has-ds-page-head > .login-info-wrap {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  max-width: var(--ds-content-max-width);
}

.has-ds-page-head > .page-body {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.main-container.has-ds-page-head,
.sidebar-content.has-ds-page-head {
  max-width: var(--ds-content-max-width);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

.injected-page-content.has-ds-page-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Hide legacy per-page titles — global head is canonical */
.has-ds-page-head .page-header,
.has-ds-page-head .bafin-tr-page-header,
.has-ds-page-head .client-context-banner,
.has-ds-page-head .login-info-client-hero,
.has-ds-page-head .broker-overview-page-header,
.has-ds-page-head .settings-page-header,
.has-ds-page-head .cr-reporting-page-header,
.has-ds-page-head nav.page-nav:not(.tabs-container),
.has-ds-page-head .page-nav.bafin-tr-page-nav {
  display: none !important;
}

.has-ds-page-head .dash-hero-actions,
.has-ds-page-head .dash-hero-actions:empty,
.ds-actions-source--drained {
  display: none !important;
}

.has-ds-page-head .dash-hero-split .dash-client-title,
.has-ds-page-head .dash-hero-split h1.page-title {
  display: none !important;
}

.has-ds-page-head .dash-hero-split {
  margin-top: 0;
  margin-bottom: var(--ds-stack-md);
}

/* Settings / role pages without legacy header wrapper */
.has-ds-page-head .settings-role-page-title,
.has-ds-page-head .settings-perm-matrix-page-title,
.has-ds-page-head .if-page-title {
  display: none !important;
}

/* ═══ UI sweep v12: unified folder tabs + fixed button geometry globally ═══ */

:root {
  --ds-folder-tab-height: 42px;
  --ds-folder-tab-pad-x: 22px;
  --ds-folder-tab-radius: 10px;
  --ds-folder-tab-gap: 6px;
  --ds-folder-tab-font: 13px;

  --ds-btn-height: 40px;
  --ds-btn-height-sm: 36px;
  --ds-btn-pad-x: 18px;
  --ds-btn-pad-x-sm: 14px;
  --ds-btn-font: 13px;
  --ds-btn-font-sm: 12px;
  --ds-btn-radius: 10px;
  --ds-btn-gap: 10px;
}

/* ── Folder tabs: one silhouette everywhere (TR, Trading, definition tables) ─ */
.tr-folder-tabs,
.client-trading-tabs .tabs-header,
.tr-bafin-entity-tabs,
.tabs-container:not(.tr-page-subnav):has(> .tabs-header) > .tabs-header {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: wrap;
  gap: var(--ds-folder-tab-gap) !important;
  padding: 0 !important;
  margin: 0 0 0 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.tr-folder-tabs::after,
.client-trading-tabs .tabs-header::before,
.tabs-container:not(.tr-page-subnav):has(> .tabs-header) > .tabs-header::before {
  display: none !important;
  content: none !important;
}

.tr-folder-tabs .tab-btn,
.client-trading-tabs .tab-button,
.tr-bafin-entity-tabs .tab-btn,
.tabs-container:not(.tr-page-subnav):has(> .tabs-header) > .tabs-header .tab-button,
.tr-page-subnav.tr-folder-tabs .tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 var(--ds-folder-tab-pad-x) !important;
  min-height: var(--ds-folder-tab-height) !important;
  height: var(--ds-folder-tab-height) !important;
  min-width: 0;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  bottom: auto !important;
  border-radius: var(--ds-folder-tab-radius) var(--ds-folder-tab-radius) 0 0 !important;
  border: 1px solid var(--ds-unified-tile-border) !important;
  border-bottom: none !important;
  background: color-mix(in srgb, var(--tbl-surface) 58%, transparent) !important;
  color: color-mix(in srgb, var(--text-dark) 72%, transparent) !important;
  font-size: var(--ds-folder-tab-font) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  z-index: 1;
}

.tr-folder-tabs .tab-btn:first-child,
.client-trading-tabs .tab-button:first-child,
.tr-bafin-entity-tabs .tab-btn:first-child {
  margin-left: 0 !important;
}

.tr-folder-tabs .tab-btn:hover,
.client-trading-tabs .tab-button:hover:not(.active),
.tr-bafin-entity-tabs .tab-btn:hover:not(.active),
.tabs-container:not(.tr-page-subnav):has(> .tabs-header) > .tabs-header .tab-button:hover:not(.active) {
  background: color-mix(in srgb, var(--tbl-surface) 72%, transparent) !important;
  color: var(--text-dark) !important;
  transform: none !important;
  filter: none !important;
}

.tr-folder-tabs .tab-btn.active,
.client-trading-tabs .tab-button.active,
.tr-bafin-entity-tabs .tab-btn.active,
.tabs-container:not(.tr-page-subnav):has(> .tabs-header) > .tabs-header .tab-button.active {
  padding: 0 var(--ds-folder-tab-pad-x) !important;
  min-height: var(--ds-folder-tab-height) !important;
  height: var(--ds-folder-tab-height) !important;
  margin-bottom: 0 !important;
  transform: none !important;
  filter: none !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  background: var(--ds-unified-tile-bg) !important;
  border-color: var(--ds-unified-tile-border) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  z-index: 2;
}

/* Folder body connects flush under tabs */
.client-trading-tabs .tab-content.active,
.tr-reports-main,
.client-trading-tabs {
  border-color: var(--ds-unified-tile-border) !important;
}

.client-trading-tabs .tab-content.active {
  margin-top: -1px;
  border-top: 1px solid var(--ds-unified-tile-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--ds-unified-tile-bg) !important;
  padding: var(--ds-stack-lg) var(--ds-stack-md);
}

.client-trading-tabs .tabs-header {
  padding-bottom: 0 !important;
}

.page-wrapper.bafin-tables-page.bafin-tables-theme-lock .tr-bafin-entity-tabs {
  padding: 0 !important;
  gap: var(--ds-folder-tab-gap) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: var(--ds-stack-md) !important;
}

/* ── Buttons: fixed height, padding, radius — all variants ─────────────── */
.btn,
a.btn,
button.btn,
input[type="submit"].btn,
.btn-brand-cta,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-slate {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-height: var(--ds-btn-height) !important;
  height: var(--ds-btn-height) !important;
  padding: 0 var(--ds-btn-pad-x) !important;
  font-size: var(--ds-btn-font) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: var(--ds-btn-radius) !important;
  box-sizing: border-box !important;
  white-space: nowrap;
  vertical-align: middle;
}

.btn-sm,
a.btn-sm,
button.btn-sm {
  min-height: var(--ds-btn-height-sm) !important;
  height: var(--ds-btn-height-sm) !important;
  padding: 0 var(--ds-btn-pad-x-sm) !important;
  font-size: var(--ds-btn-font-sm) !important;
}

.btn-lg {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 22px !important;
}

.btn-block {
  width: 100%;
  display: flex !important;
}

.btn:hover,
a.btn:hover,
button.btn:hover {
  transform: none !important;
}

/* Toolbar / portal icon buttons match sm button size */
.li-icon-btn,
.li-broker-tile .li-icon-btn,
.login-info-wrap .li-icon-btn,
.login-info-wrap .login-info-table .li-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--ds-btn-height-sm) !important;
  height: var(--ds-btn-height-sm) !important;
  padding: 0 var(--ds-btn-pad-x-sm) !important;
  font-size: var(--ds-btn-font-sm) !important;
  border-radius: var(--ds-btn-radius) !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  text-align: center;
  vertical-align: middle;
}

/* Segmented controls (Day/Range, etc.) */
.tr-gen-segmented {
  min-height: var(--ds-btn-height-sm);
  padding: 3px;
  gap: 3px;
  border-radius: var(--ds-btn-radius);
}

.tr-gen-segmented .tr-seg-btn {
  min-height: calc(var(--ds-btn-height-sm) - 6px) !important;
  height: calc(var(--ds-btn-height-sm) - 6px) !important;
  padding: 0 16px !important;
  font-size: var(--ds-btn-font-sm) !important;
  font-weight: 600 !important;
  border-radius: calc(var(--ds-btn-radius) - 2px) !important;
  line-height: 1 !important;
}

/* Toolbar date inputs align with buttons */
.tr-toolbar-control,
.tr-toolbar-date,
.form-input.tr-report-date-input,
.bt-def-upload-file {
  min-height: var(--ds-btn-height-sm) !important;
  height: var(--ds-btn-height-sm) !important;
  padding: 0 12px 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: var(--ds-btn-font-sm) !important;
  border-radius: var(--ds-btn-radius) !important;
  box-sizing: border-box !important;
}

.bt-inst-date {
  min-height: var(--ds-btn-height-sm) !important;
  height: var(--ds-btn-height-sm) !important;
  padding: 0 12px !important;
  font-size: var(--ds-btn-font-sm) !important;
  border-radius: var(--ds-btn-radius) !important;
  box-sizing: border-box !important;
}

/* Action rows: consistent placement */
.ds-page-head__actions,
.page-actions,
.page-header .page-actions,
.dash-hero-actions,
.li-toolbar,
.tr-report-filter-actions,
.tr-action-field--generate,
.bt-def-upload-actions,
.bt-def-filter-toolbar,
.tr-action-bar__main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-btn-gap);
}

.tr-action-field--generate {
  margin-left: auto;
}

.page-wrapper.bafin-reporting-page .tr-action-field--generate {
  margin-left: 0;
}

.tr-report-filter-actions {
  margin-left: 0;
}

/* Sort/filter pills — same height as sm buttons for visual rhythm */
.ao-sort-pill,
.ao-toolbar .ao-sort-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-btn-height-sm);
  height: var(--ds-btn-height-sm);
  padding: 0 var(--ds-btn-pad-x-sm);
  font-size: var(--ds-btn-font-sm);
  font-weight: 600;
  border-radius: 999px;
  box-sizing: border-box;
  line-height: 1;
}

/* ═══ UI sweep v13: global table header visibility — stronger strip vs body ═══ */

:root {
  --tbl-header-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sidebar-dark) 38%, var(--bg-card) 62%) 0%,
    color-mix(in srgb, var(--sidebar-dark) 22%, var(--bg-card) 78%) 100%
  );
  --tbl-header-text: var(--text-dark);
  --tbl-header-rule: color-mix(in srgb, var(--accent-soft) 28%, var(--ds-unified-tile-border) 72%);
  --tbl-header-highlight: color-mix(in srgb, var(--text-light) 16%, transparent);
  --tbl-header-font-size: 12px;
  --tbl-header-pad-y: 14px;
}

[data-theme="light"],
[data-bs-theme="light"] {
  --tbl-header-bg: linear-gradient(
    180deg,
    color-mix(in srgb, #c5d8ef 88%, var(--accent-soft) 12%) 0%,
    color-mix(in srgb, #b8cce6 92%, var(--accent-soft) 8%) 100%
  );
  --tbl-header-text: #1a2a3d;
  --tbl-header-rule: color-mix(in srgb, var(--accent-soft) 35%, #8fa8c4 65%);
  --tbl-header-highlight: color-mix(in srgb, #ffffff 55%, transparent);
}

/* Header strip — all table variants */
.table thead,
.data-table thead,
.standard-data-table thead,
.brokers-table thead,
.ft-table thead,
.cm-table thead,
.login-info-table thead,
.md-table thead,
.bt-def-table thead,
.modern-table thead,
.users-table thead,
.broker-tbl thead {
  background: var(--tbl-header-bg) !important;
  border-bottom: 2px solid var(--tbl-header-rule) !important;
  box-shadow:
    inset 0 1px 0 var(--tbl-header-highlight),
    0 3px 12px -4px color-mix(in srgb, var(--sidebar-dark) 45%, transparent) !important;
}

/* Header cells — high-contrast labels */
.table th,
.data-table th,
.standard-data-table th,
.brokers-table th,
.ft-table th,
.cm-table th,
.login-info-table th,
.md-table thead th,
.bt-def-table th,
.modern-table th,
.users-table th,
.broker-tbl th,
#tr-daily-reports-tbl thead th,
.tr-daily-reports-data thead th {
  color: var(--tbl-header-text) !important;
  font-size: var(--tbl-header-font-size) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  background-color: transparent !important;
  border-bottom: none !important;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--sidebar-dark) 25%, transparent);
}

[data-theme="light"] .table th,
[data-theme="light"] .data-table th,
[data-theme="light"] .standard-data-table th,
[data-theme="light"] .brokers-table th,
[data-theme="light"] .ft-table th,
[data-theme="light"] .cm-table th,
[data-theme="light"] .login-info-table th,
[data-theme="light"] .md-table thead th,
[data-theme="light"] .bt-def-table th {
  color: var(--tbl-header-text) !important;
  text-shadow: none;
}

/* Override v10 muted header rules */
.data-table thead th,
.standard-data-table thead th,
.page-wrapper.bafin-reporting-page #tr-daily-reports-tbl thead th,
.client-trading-tabs .data-table thead th {
  color: var(--tbl-header-text) !important;
  font-size: var(--tbl-header-font-size) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  background: transparent !important;
  border-bottom: none !important;
}

.page-wrapper.bafin-reporting-page #tr-daily-reports-tbl thead th {
  background: var(--tbl-header-bg) !important;
  border-bottom: 2px solid var(--tbl-header-rule) !important;
}

/* Sortable header hover — stay readable */
.table thead th:hover,
.data-table thead th:hover,
.standard-data-table thead th:hover,
.brokers-table thead th:hover,
.ft-table thead th:hover,
.cm-table thead th:hover {
  background: color-mix(in srgb, var(--accent-soft) 14%, var(--tbl-header-bg) 86%) !important;
  color: var(--text-dark) !important;
}

/* ═══ UI sweep v14: Brokers Portal — 2 brokers per row, 1 tile each ═══ */

.login-info-wrap .li-card-grid--broker-portal {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 1180px !important;
  margin: 0 auto;
  gap: 24px 28px;
  align-items: start;
}

@media (max-width: 960px) {
  .login-info-wrap .li-card-grid--broker-portal {
    grid-template-columns: 1fr !important;
  }
}

.login-info-wrap .li-broker-group {
  min-width: 0;
}

.login-info-wrap .li-broker-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  min-height: 0;
  padding: 18px 20px 0;
  background: var(--tbl-body-bg, rgba(10, 33, 68, 0.45)) !important;
  border: 1px solid rgba(65, 113, 154, 0.25) !important;
  border-radius: var(--tbl-radius, 14px);
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow: hidden;
}

.login-info-wrap .li-broker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding: 0 0 14px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--ds-unified-tile-border);
}

.login-info-wrap .li-broker-name {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
}

.login-info-wrap .li-broker-status {
  max-width: min(100%, 100%);
  font-size: 10px;
  padding: 5px 10px;
  text-align: left;
}

.login-info-wrap .li-broker-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.login-info-wrap .li-broker-form:not(:has(.li-broker-actions)) {
  padding-bottom: 20px;
}

.login-info-wrap .li-broker-section {
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ds-unified-tile-border) 70%, transparent);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}

.login-info-wrap .li-broker-section:first-child {
  padding-top: 14px;
}

.login-info-wrap .li-broker-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.login-info-wrap .li-broker-section-title {
  margin: 0 0 12px;
  padding: 0;
  border: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-text-secondary);
  line-height: 1.35;
}

.login-info-wrap .li-broker-section .li-broker-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-info-wrap .li-broker-section .li-field {
  display: grid;
  grid-template-columns: minmax(7rem, 34%) 1fr;
  gap: 8px 12px;
  align-items: center;
}

.login-info-wrap .li-broker-section .li-field--flush {
  grid-template-columns: 1fr;
}

.login-info-wrap .li-broker-section .li-field-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ds-text-secondary);
}

.login-info-wrap .li-broker-section .li-input,
.login-info-wrap .li-broker-section select.li-input,
.login-info-wrap .li-broker-section .li-textarea {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--ds-unified-tile-border);
  background: color-mix(in srgb, var(--ds-app-canvas) 55%, transparent);
  color: var(--text-dark);
  box-sizing: border-box;
}

.login-info-wrap .li-broker-section .li-input[readonly] {
  opacity: 0.92;
}

.login-info-wrap .li-broker-section .li-input:focus,
.login-info-wrap .li-broker-section select.li-input:focus,
.login-info-wrap .li-broker-section .li-textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--ds-unified-tile-border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-soft) 35%, transparent);
}

.login-info-wrap .li-broker-section .li-textarea {
  min-height: 72px;
  resize: vertical;
}

.login-info-wrap .li-broker-section .li-value-display {
  font-size: 13px;
  color: var(--text-dark);
  padding: 8px 0;
}

.login-info-wrap .li-broker-section .li-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.login-info-wrap .li-broker-section .li-field-row .li-input {
  flex: 1 1 auto;
  min-width: 0;
}

.login-info-wrap .li-broker-section .li-icon-btn {
  flex-shrink: 0;
  min-height: 32px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 7px;
  border: 1px solid var(--ds-unified-tile-border);
  background: color-mix(in srgb, var(--accent-soft) 10%, transparent);
  color: var(--text-dark);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}

.login-info-wrap .li-broker-section .li-icon-btn--open {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--ds-unified-tile-border));
}

.login-info-wrap .li-broker-section .li-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dark);
  cursor: pointer;
}

.login-info-wrap .li-broker-section .li-checkbox-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
}

.login-info-wrap .li-broker-section .li-promo-readonly-summary {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ds-text-secondary);
}

.login-info-wrap .li-broker-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin: 18px -20px 0;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--ds-unified-tile-border);
  background: color-mix(in srgb, var(--ds-app-canvas) 50%, transparent);
}

.login-info-wrap .li-broker-actions .btn {
  min-height: var(--ds-btn-height, 40px);
  height: var(--ds-btn-height, 40px);
  padding: 0 20px;
  font-weight: 600;
  margin: 0;
}

.login-info-wrap .li-broker-actions button[type="submit"].btn.btn-primary,
.login-info-wrap .li-broker-actions .btn-save-changes {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 55%, #15803d 100%) !important;
  border: 1px solid #166534 !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 18px rgba(6, 12, 28, 0.38) !important;
}

.login-info-wrap .li-broker-actions button[type="submit"].btn.btn-primary:hover,
.login-info-wrap .li-broker-actions .btn-save-changes:hover {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 55%, #16a34a 100%) !important;
  border-color: #86efac !important;
  color: #ffffff !important;
  filter: none !important;
}

/* ═══ UI sweep v15: Account Overview — stronger Capital / Equity USD / Margin titles ═══ */

.account-overview-roster .ao-group-header {
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 2px solid color-mix(in srgb, var(--text-dark) 14%, transparent);
}

.account-overview-roster .ao-group-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--text-dark) !important;
  opacity: 1 !important;
  line-height: 1.25;
}

.account-overview-roster .ao-group--capital .ao-group-title {
  color: #93c5fd !important;
}
.account-overview-roster .ao-group--capital .ao-group-header {
  border-bottom-color: color-mix(in srgb, #93c5fd 42%, transparent);
}

.account-overview-roster .ao-group--usd .ao-group-title {
  color: #4ade80 !important;
}
.account-overview-roster .ao-group--usd .ao-group-header {
  border-bottom-color: color-mix(in srgb, #4ade80 42%, transparent);
}

.account-overview-roster .ao-group--margin .ao-group-title {
  color: #fcd34d !important;
}
.account-overview-roster .ao-group--margin .ao-group-header {
  border-bottom-color: color-mix(in srgb, #fcd34d 42%, transparent);
}

.account-overview-roster .ao-group-ccy {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  background: color-mix(in srgb, var(--accent-soft) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-dark) 16%, transparent);
  color: var(--text-dark);
}

.account-overview-roster .ao-group--capital .ao-group-ccy {
  background: color-mix(in srgb, #93c5fd 16%, transparent);
  border-color: color-mix(in srgb, #93c5fd 32%, transparent);
  color: #bfdbfe;
}

.account-overview-roster .ao-group--usd .ao-group-ccy {
  background: color-mix(in srgb, #4ade80 16%, transparent);
  border-color: color-mix(in srgb, #4ade80 32%, transparent);
  color: #bbf7d0;
}

.account-overview-roster .ao-group--margin .ao-group-ccy {
  background: color-mix(in srgb, #fcd34d 16%, transparent);
  border-color: color-mix(in srgb, #fcd34d 32%, transparent);
  color: #fde68a;
}

/* ═══ UI sweep v17: icon-btn text centering, broker tile contrast ═══ */

.li-icon-btn,
a.li-icon-btn,
button.li-icon-btn,
.login-info-wrap .li-broker-section .li-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle;
  line-height: 1 !important;
}

.login-info-wrap .li-broker-form {
  background: color-mix(in srgb, var(--tbl-surface) 76%, var(--accent-soft) 24%) !important;
  border-color: color-mix(in srgb, var(--accent-soft) 30%, var(--ds-unified-tile-border)) !important;
  box-shadow:
    var(--ds-unified-tile-shadow),
    0 0 0 1px color-mix(in srgb, var(--accent-soft) 10%, transparent) !important;
}

/* ═══ UI sweep v18: Transaction Reporting scrollable table + green Generate ═══ */

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-reports-table-wrap {
  max-height: min(420px, 55vh) !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock #tr-daily-reports-tbl thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

.page-wrapper.bafin-reporting-page.bafin-reports-theme-lock .tr-action-field--generate .tr-gen-toolbar-submit.btn-success {
  background: linear-gradient(135deg, var(--ds-btn-success-bg) 0%, var(--ds-btn-success-border) 100%) !important;
  border: 1px solid var(--ds-btn-success-border) !important;
  color: #fff !important;
}

/* ═══ UI sweep v19: Client Monthly Reporting scrollable table ═══ */

body.client-mr-body-lock .scroll-container.cr-reports-table-wrap {
  max-height: min(360px, 52vh) !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.client-mr-body-lock .cr-client-reports-table.cr-cmr-card-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

/* ═══ UI sweep v20: Connectivity attention rows (active + disconnected) ═══ */

.cm-table tbody tr.cm-row--attention,
.cm-table tbody tr.cm-row--attention td {
  background: color-mix(in srgb, #fbbf24 24%, var(--tbl-surface, var(--bg-card))) !important;
  color: var(--tbl-text, var(--text-dark)) !important;
}

.cm-table tbody tr.cm-row--attention {
  box-shadow: inset 4px 0 0 #f59e0b;
}

.cm-table tbody tr.cm-row--attention td {
  border-bottom-color: color-mix(in srgb, #f59e0b 36%, transparent) !important;
}

.cm-table tbody tr.cm-row--attention:hover,
.cm-table tbody tr.cm-row--attention:hover td {
  background: color-mix(in srgb, #fbbf24 34%, var(--tbl-surface, var(--bg-card))) !important;
  color: var(--tbl-text, var(--text-dark)) !important;
}

[data-theme="light"] .cm-table tbody tr.cm-row--attention,
[data-theme="light"] .cm-table tbody tr.cm-row--attention td {
  background: color-mix(in srgb, #fef3c7 88%, #fff 12%) !important;
}

[data-theme="light"] .cm-table tbody tr.cm-row--attention:hover,
[data-theme="light"] .cm-table tbody tr.cm-row--attention:hover td {
  background: color-mix(in srgb, #fde68a 72%, #fff 28%) !important;
}

/* ═══ UI sweep v23: Account Overview tiles — match reference navy card (tabs unchanged) ═══ */

.account-overview-roster .ao-card {
  --ao-ref-bg: var(--tbl-body-bg, rgba(10, 33, 68, 0.45));
  --ao-ref-bg-deep: var(--tbl-body-bg, rgba(10, 33, 68, 0.45));
  --ao-ref-border: rgba(65, 113, 154, 0.25);
  --ao-ref-label: #a8c4dc;
  --ao-ref-value: #ffffff;
  background: var(--ao-ref-bg) !important;
  border: 1px solid var(--ao-ref-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.account-overview-roster .ao-card:hover {
  background: var(--tbl-body-hover, rgba(65, 113, 154, 0.18)) !important;
  border-color: rgba(65, 113, 154, 0.35) !important;
}

.account-overview-roster .ao-card-header {
  border-bottom: 1px solid rgba(120, 158, 198, 0.22) !important;
  padding-bottom: 12px !important;
}

.account-overview-roster .ao-card-broker {
  color: var(--ao-ref-value) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 1px 3px rgba(6, 14, 28, 0.35) !important;
}

.account-overview-roster .ao-card-login {
  color: var(--ao-ref-label) !important;
  font-size: 13px !important;
}

.account-overview-roster .ao-card-ccy-pill {
  background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(125, 211, 252, 0.55) !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  box-shadow: 0 3px 12px -3px rgba(37, 99, 235, 0.55) !important;
}

/* v19 account overview: keep colored section panels; tune label contrast only */
.account-overview-roster .ao-group-header {
  border-bottom: 1px solid rgba(120, 158, 198, 0.16) !important;
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
}

.account-overview-roster .ao-group-title {
  color: var(--ao-ref-label) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  opacity: 1 !important;
}

.account-overview-roster .ao-group--capital .ao-group-title {
  color: #93c5fd !important;
}

.account-overview-roster .ao-group--usd .ao-group-title {
  color: #86efac !important;
}

.account-overview-roster .ao-group--margin .ao-group-title {
  color: #fcd34d !important;
}

.account-overview-roster .ao-group-ccy {
  background: rgba(120, 158, 198, 0.12) !important;
  color: var(--ao-ref-label) !important;
  border: 1px solid rgba(120, 158, 198, 0.2) !important;
}

.account-overview-roster .ao-group-hero-label {
  color: var(--ao-ref-label) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.account-overview-roster .ao-group-hero-value,
.account-overview-roster .ao-group-hero-prefix {
  color: var(--ao-ref-value) !important;
}

.account-overview-roster .ao-group--capital .ao-group-hero-value,
.account-overview-roster .ao-group--capital .ao-group-hero-prefix {
  color: var(--ao-ref-value) !important;
}

.account-overview-roster .ao-group--usd .ao-group-hero-value,
.account-overview-roster .ao-group--usd .ao-group-hero-prefix {
  color: var(--ao-ref-value) !important;
}

.account-overview-roster .ao-group--margin .ao-group-hero-value,
.account-overview-roster .ao-group--margin .ao-group-hero-prefix {
  color: var(--ao-ref-value) !important;
}

.account-overview-roster .ao-pair > dt {
  color: var(--ao-ref-label) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

.account-overview-roster .ao-pair > dd {
  color: var(--ao-ref-value) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

[data-theme="light"] .account-overview-roster .ao-card {
  --ao-ref-bg: #eef4fb;
  --ao-ref-bg-deep: #e4edf7;
  --ao-ref-border: rgba(71, 105, 145, 0.22);
  --ao-ref-label: #64748b;
  --ao-ref-value: #0f172a;
  background: linear-gradient(180deg, var(--ao-ref-bg) 0%, var(--ao-ref-bg-deep) 100%) !important;
  box-shadow: 0 8px 22px -14px rgba(15, 23, 42, 0.12) !important;
}

[data-theme="light"] .account-overview-roster .ao-card:hover {
  background: linear-gradient(180deg, #f4f8fd 0%, #e8f0fa 100%) !important;
}

[data-theme="light"] .account-overview-roster .ao-card-broker,
[data-theme="light"] .account-overview-roster .ao-pair > dd,
[data-theme="light"] .account-overview-roster .ao-group-hero-value,
[data-theme="light"] .account-overview-roster .ao-group-hero-prefix {
  color: var(--ao-ref-value) !important;
}

[data-theme="light"] .account-overview-roster .ao-card-login,
[data-theme="light"] .account-overview-roster .ao-pair > dt,
[data-theme="light"] .account-overview-roster .ao-group-title {
  color: var(--ao-ref-label) !important;
}

/* ═══ UI sweep v24: trading tab tiles — unified table row navy ═══ */

.client-trading-tabs {
  --trading-tile-bg: var(--tbl-body-bg, rgba(10, 33, 68, 0.45));
  --trading-tile-bg-deep: var(--tbl-body-bg, rgba(10, 33, 68, 0.45));
  --trading-tile-border: rgba(65, 113, 154, 0.25);
  --trading-tile-inner: var(--tbl-body-alt, rgba(6, 12, 28, 0.3));
  --trading-tile-label: #a8c4dc;
  --trading-tile-value: #ffffff;
}

.client-trading-tabs .account-overview-roster .ao-card,
.client-trading-tabs .hana-card,
.client-trading-tabs .hana-card--ok,
.client-trading-tabs .hana-card--warn,
.client-trading-tabs .hana-card--crit,
.client-trading-tabs .category-delta-card,
.client-trading-tabs .category-delta-card--mismatch {
  background: var(--trading-tile-bg) !important;
  background-image: none !important;
  border: 1px solid var(--trading-tile-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.client-trading-tabs .category-delta-card--mismatch {
  border-color: color-mix(in srgb, #cf6679 42%, var(--trading-tile-border)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, #cf6679 16%, transparent),
    0 10px 28px -16px rgba(6, 14, 28, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.client-trading-tabs .category-delta-ls--long,
.client-trading-tabs .category-delta-ls--short {
  background: var(--trading-tile-inner) !important;
  border: 1px solid rgba(120, 158, 198, 0.2) !important;
}

.client-trading-tabs .hana-card-header,
.client-trading-tabs .category-delta-deltas {
  border-color: rgba(120, 158, 198, 0.2) !important;
}

.client-trading-tabs .hana-card-broker,
.client-trading-tabs .category-delta-card__title,
.client-trading-tabs .category-delta-ls__value,
.client-trading-tabs .hana-money-value {
  color: var(--trading-tile-value) !important;
}

.client-trading-tabs .hana-card-login,
.client-trading-tabs .hana-card-snapshot,
.client-trading-tabs .hana-money-label,
.client-trading-tabs .category-delta-ls__label,
.client-trading-tabs .category-delta-dmx__label {
  color: var(--trading-tile-label) !important;
}

[data-theme="light"] .client-trading-tabs {
  --trading-tile-bg: #eef4fb;
  --trading-tile-bg-deep: #e4edf7;
  --trading-tile-border: rgba(71, 105, 145, 0.22);
  --trading-tile-inner: rgba(71, 105, 145, 0.08);
  --trading-tile-label: #64748b;
  --trading-tile-value: #0f172a;
}

/* ═══ UI sweep v25: trading tab chips/pills — no black, match navy tile scheme ═══ */

.client-trading-tabs .account-overview-roster .ao-group-ccy,
.client-trading-tabs .account-overview-roster .ao-group--capital .ao-group-ccy,
.client-trading-tabs .account-overview-roster .ao-group--usd .ao-group-ccy,
.client-trading-tabs .account-overview-roster .ao-group--margin .ao-group-ccy {
  background: rgba(145, 184, 209, 0.16) !important;
  border: 1px solid rgba(145, 184, 209, 0.28) !important;
  color: #dbeafe !important;
  box-shadow: none !important;
}

.client-trading-tabs .ao-toolbar .ao-sort-pill,
.client-trading-tabs .ao-sort-pill,
.client-trading-tabs .category-delta-sort-btn {
  background: var(--tbl-body-bg, rgba(10, 33, 68, 0.45)) !important;
  border: 1px solid rgba(65, 113, 154, 0.25) !important;
  color: #a8c4dc !important;
}

.client-trading-tabs .ao-toolbar .ao-sort-pill:hover,
.client-trading-tabs .ao-sort-pill:hover,
.client-trading-tabs .category-delta-sort-btn:hover {
  background: var(--tbl-body-hover, rgba(65, 113, 154, 0.18)) !important;
  border-color: rgba(65, 113, 154, 0.35) !important;
  color: #e2e8f0 !important;
}

.client-trading-tabs .ao-toolbar .ao-sort-pill.is-active,
.client-trading-tabs .ao-sort-pill.is-active,
.client-trading-tabs .category-delta-sort-btn.is-active {
  background: var(--tbl-body-hover, rgba(65, 113, 154, 0.18)) !important;
  border-color: rgba(65, 113, 154, 0.45) !important;
  color: #ffffff !important;
}

.client-trading-tabs .account-overview-roster .ao-group {
  border-left: none !important;
  border-top: none !important;
}
.client-trading-tabs .account-overview-roster .ao-group--capital {
  --ao-panel-bg: linear-gradient(135deg, color-mix(in srgb, #38bdf8 14%, transparent) 0%, color-mix(in srgb, #6366f1 8%, transparent) 100%);
  background: var(--ao-panel-bg) !important;
  border: 1px solid color-mix(in srgb, #38bdf8 38%, transparent) !important;
}
.client-trading-tabs .account-overview-roster .ao-group--usd {
  --ao-panel-bg: linear-gradient(135deg, color-mix(in srgb, #22c55e 16%, transparent) 0%, color-mix(in srgb, #15803d 9%, transparent) 100%);
  background: var(--ao-panel-bg) !important;
  border: 1px solid color-mix(in srgb, #22c55e 42%, transparent) !important;
}
.client-trading-tabs .account-overview-roster .ao-group--margin {
  --ao-panel-bg: linear-gradient(135deg, color-mix(in srgb, #f59e0b 14%, transparent) 0%, color-mix(in srgb, #b45309 9%, transparent) 100%);
  background: var(--ao-panel-bg) !important;
  border: 1px solid color-mix(in srgb, #f59e0b 36%, transparent) !important;
}

[data-theme="light"] .client-trading-tabs .account-overview-roster .ao-card-ccy-pill,
[data-theme="light"] .client-trading-tabs .account-overview-roster .ao-group-ccy,
[data-theme="light"] .client-trading-tabs .account-overview-roster .ao-group--capital .ao-group-ccy,
[data-theme="light"] .client-trading-tabs .account-overview-roster .ao-group--usd .ao-group-ccy,
[data-theme="light"] .client-trading-tabs .account-overview-roster .ao-group--margin .ao-group-ccy {
  background: rgba(71, 105, 145, 0.1) !important;
  border-color: rgba(71, 105, 145, 0.22) !important;
  color: #475569 !important;
}

[data-theme="light"] .client-trading-tabs .ao-sort-pill {
  background: rgba(71, 105, 145, 0.08) !important;
  border-color: rgba(71, 105, 145, 0.2) !important;
  color: #64748b !important;
}

[data-theme="light"] .client-trading-tabs .ao-sort-pill.is-active {
  background: rgba(71, 105, 145, 0.16) !important;
  border-color: rgba(71, 105, 145, 0.3) !important;
  color: #0f172a !important;
}

/* ═══ UI sweep v26: account tiles — site blue scheme, broker + currency emphasis ═══ */

.client-trading-tabs {
  --trading-tile-bg: var(--tbl-body-bg, rgba(10, 33, 68, 0.45));
  --trading-tile-bg-deep: var(--tbl-body-bg, rgba(10, 33, 68, 0.45));
  --trading-tile-border: rgba(65, 113, 154, 0.25);
  --trading-tile-inner: rgba(65, 113, 154, 0.12);
  --trading-tile-label: #a8c4dc;
  --trading-tile-value: #ffffff;
  --trading-tile-ccy-bg: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
  --trading-tile-ccy-border: rgba(125, 211, 252, 0.55);
}

.client-trading-tabs .account-overview-roster .ao-card,
.client-trading-tabs .hana-card,
.client-trading-tabs .hana-card--ok,
.client-trading-tabs .hana-card--warn,
.client-trading-tabs .hana-card--crit,
.client-trading-tabs .category-delta-card,
.client-trading-tabs .category-delta-card--mismatch {
  background: var(--trading-tile-bg) !important;
  background-image: none !important;
  border: 1px solid var(--trading-tile-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.client-trading-tabs .account-overview-roster .ao-card:hover,
.client-trading-tabs .hana-card:hover,
.client-trading-tabs .category-delta-card:hover {
  background: var(--tbl-body-hover, rgba(65, 113, 154, 0.18)) !important;
  border-color: rgba(65, 113, 154, 0.35) !important;
}

.client-trading-tabs .account-overview-roster .ao-card-broker {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  text-shadow: 0 1px 3px rgba(6, 14, 28, 0.35) !important;
}

.client-trading-tabs .account-overview-roster .ao-card-login {
  color: var(--trading-tile-label) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}

.client-trading-tabs .account-overview-roster .ao-card-ccy-pill {
  background: var(--trading-tile-ccy-bg) !important;
  border: 1px solid var(--trading-tile-ccy-border) !important;
  color: #ffffff !important;
  font-size: 0.6875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  padding: 5px 12px !important;
  box-shadow: 0 3px 12px -3px rgba(37, 99, 235, 0.55) !important;
}

.client-trading-tabs .account-overview-roster .ao-group-ccy {
  background: rgba(145, 184, 209, 0.16) !important;
  border: 1px solid rgba(145, 184, 209, 0.28) !important;
  color: #dbeafe !important;
}

[data-theme="light"] .client-trading-tabs {
  --trading-tile-bg: #e8f1fa;
  --trading-tile-bg-deep: #dce8f5;
  --trading-tile-border: rgba(71, 105, 145, 0.24);
  --trading-tile-inner: rgba(71, 105, 145, 0.1);
  --trading-tile-label: #64748b;
  --trading-tile-value: #0f172a;
  --trading-tile-ccy-bg: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  --trading-tile-ccy-border: rgba(37, 99, 235, 0.35);
}

[data-theme="light"] .client-trading-tabs .account-overview-roster .ao-card-broker {
  color: #0f172a !important;
  text-shadow: none !important;
}

[data-theme="light"] .client-trading-tabs .account-overview-roster .ao-card-ccy-pill {
  color: #ffffff !important;
}

/* Universal search: hide filtered card/tile items (wins over display:flex !important) */
.account-overview-roster .ao-card.table-search-item-hidden,
.client-trading-tabs .account-overview-roster .ao-card.table-search-item-hidden,
.client-trading-tabs .hana-card.table-search-item-hidden,
.client-trading-tabs .hana-card--ok.table-search-item-hidden,
.client-trading-tabs .hana-card--warn.table-search-item-hidden,
.client-trading-tabs .hana-card--crit.table-search-item-hidden,
.client-trading-tabs .category-delta-card.table-search-item-hidden,
.category-delta-grid > .category-delta-card.table-search-item-hidden,
.hana-card-grid > .hana-card.table-search-item-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* VM Control — embedded AwsManager iframe */
.injected-page-content:has(.vmcontrol-page) {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--layout-stack-below-topbar));
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

body:has(.env-dev-banner) .injected-page-content:has(.vmcontrol-page) {
  height: calc(100dvh - var(--layout-stack-below-topbar) - 2rem);
}

.vmcontrol-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.vmcontrol-page-header {
  flex-shrink: 0;
  margin-bottom: var(--spacing-4);
}

.vmcontrol-page-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.vmcontrol-status-pill {
  align-self: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--ds-surface) 70%, transparent);
  border: 1px solid var(--color-border);
}

.vmcontrol-embed {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--tbl-radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ds-card-border) 55%, var(--ds-glass-rim) 45%);
  box-shadow: var(--ds-card-shadow);
  background: color-mix(in srgb, var(--tbl-surface) 40%, transparent);
}

.vmcontrol-embed iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  display: block;
  background: #0f172a;
}

/* ══════════════════════════════════════════════════════════════════════
   Split-screen / half-width layouts — full numbers, scroll not clip
   ══════════════════════════════════════════════════════════════════════ */

.sidebar-content,
.injected-page-content,
.page-body,
.main-container {
  min-width: 0;
  max-width: 100%;
}

.section-card.clients-section-card .section-card-table-panel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#clients-list-table {
  width: 100%;
  min-width: min(100%, 22rem);
}

#clients-list-table th:last-child,
#clients-list-table td.clients-equity-cell {
  min-width: 7.5rem;
}

#clients-list-table .clients-equity-value {
  display: inline-block;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

/* Account overview: tighten internal metric grids when each panel is narrow */
@container ao-card (max-width: 520px) {
  .account-overview-roster .ao-group-grid,
  .account-overview-roster .ao-group-grid--three {
    grid-template-columns: 1fr;
  }
}

@container ao-card (max-width: 720px) {
  .account-overview-roster .ao-group-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1650px) {
  .account-overview-roster .ao-group-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .account-overview-roster .ao-group-grid,
  .account-overview-roster .ao-group-grid--three {
    grid-template-columns: 1fr;
  }
}