/* ============================================================================
   theme.css — MarketMonitors dark-only theme
   ----------------------------------------------------------------------------
   Loaded after bootstrap.min.css, before UIWidget.css / main.css.

   Two tiers:
     1. :root                       — brand design tokens (--color-*). One theme,
                                        so plain :root is correct.
     2. :root[data-bs-theme="dark"] — overrides Bootstrap 5.3's own dark-theme
                                        --bs-* variables. The attribute selector
                                        (0,2,0) + later source order beats
                                        Bootstrap's [data-bs-theme=dark] block.

   <html data-bs-theme="dark"> flips Bootstrap's components to dark; the --bs-*
   overrides below repaint them in the brand palette.

   Palette derived from the user's terminal theme. Semantic: green = up/gain,
   #F2547A = down/loss. var() resolves at computed-value time, so these tokens
   are available to rules in UIWidget.css / main.css regardless of link order.
   ========================================================================== */

:root {
  /* --- Surfaces (derived purple ramp: page < card < elevated, inset sunken) - */
  --color-bg:            #241D40;
  --color-surface:       #372D5A;
  --color-elevated:      #44386E;
  --color-inset:         #1C1733;

  /* --- Borders ------------------------------------------------------------- */
  --color-border:        #4A3F73;
  --color-border-subtle: #3D3463;
  --color-border-strong: #5C4F8A;

  /* --- Text ---------------------------------------------------------------- */
  --color-text:          #FCFCFC;
  --color-text-muted:    #C6C7C8;
  --color-text-disabled: #6E6690;
  --color-text-on-accent:#1C1733;   /* dark text for bright accent fills */

  /* --- Brand / interactive ------------------------------------------------- */
  --color-primary:        #F5C84A;
  --color-primary-hover:  #ECBB33;
  --color-secondary:      #DD94FC;
  --color-secondary-hover:#E4ACFB;

  /* --- Semantic / status --------------------------------------------------- */
  --color-up:        #07F8AB;
  --color-up-hover:  #24F4BA;
  --color-success:   #07F8AB;
  --color-down:      #F2547A;        /* punchier loss-red (not the pink) */
  --color-down-hover:#FC88A3;
  --color-danger:    #F2547A;
  --color-warning:   #F2547A;
  --color-warning-hover:#FC88A3;
  --color-info:      #85C9FB;
  --color-info-hover:#97D4FA;

  /* --- Tints (translucent — layer over any surface) ------------------------ */
  --color-up-soft:      rgba(7, 248, 171, 0.14);
  --color-down-soft:    rgba(242, 84, 122, 0.16);
  --color-warning-soft: rgba(252, 247, 106, 0.14);
  --color-info-soft:    rgba(133, 201, 251, 0.14);
  --color-primary-soft: rgba(245, 200, 74, 0.14);
  --color-focus-ring:   rgba(245, 200, 74, 0.55);
  --color-selection:    rgba(245, 200, 74, 0.30);
  --color-shadow:       rgba(0, 0, 0, 0.45);

  /* --- Props main.css already references (previously undefined → broken) ---- */
  --color-white:      var(--color-surface);
  --color-working:    var(--color-info);
  --color-working-bg: var(--color-info-soft);
  --shadow-lg:        0 0.5rem 1rem var(--color-shadow);
  --radius:           0.5rem;
}

::selection { background: var(--color-selection); }

/* ============================================================================
   Bootstrap 5.3 --bs-* overrides (brand palette over Bootstrap's dark theme)
   ========================================================================== */
:root[data-bs-theme="dark"] {
  /* --- Core surfaces & text ----------------------------------------------- */
  --bs-body-bg:                 var(--color-bg);
  --bs-body-bg-rgb:             36, 29, 64;
  --bs-body-color:              var(--color-text);
  --bs-body-color-rgb:          252, 252, 252;
  --bs-emphasis-color:          var(--color-text);
  --bs-emphasis-color-rgb:      252, 252, 252;
  --bs-secondary-color:         var(--color-text-muted);
  --bs-secondary-bg:            var(--color-elevated);
  --bs-tertiary-color:          var(--color-text-disabled);
  --bs-tertiary-bg:             var(--color-inset);
  --bs-border-color:            var(--color-border);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
  --bs-heading-color:           var(--color-text);

  /* --- Links --------------------------------------------------------------- */
  --bs-link-color:           #dee2e6;
  --bs-link-color-rgb:       222, 226, 230;
  --bs-link-hover-color:     var(--color-primary-hover);
  --bs-link-hover-color-rgb: 236, 187, 51;

  /* --- Theme colors (+ rgb triples for rgba() consumers) ------------------- */
  --bs-primary:       var(--color-primary);
  --bs-primary-rgb:   245, 200, 74;
  --bs-secondary:     var(--color-secondary);
  --bs-secondary-rgb: 221, 148, 252;
  --bs-success:       var(--color-up);
  --bs-success-rgb:   7, 248, 171;
  --bs-danger:        var(--color-down);
  --bs-danger-rgb:    242, 84, 122;
  --bs-warning:       var(--color-warning);
  --bs-warning-rgb:   252, 247, 106;
  --bs-info:          var(--color-info);
  --bs-info-rgb:      133, 201, 251;
  --bs-light:         var(--color-elevated);
  --bs-light-rgb:     68, 56, 110;
  --bs-dark:          var(--color-inset);
  --bs-dark-rgb:      28, 23, 51;

  /* --- Subtle / emphasis triplets (alerts, .text-bg-*, list-groups) -------- */
  --bs-primary-bg-subtle:      var(--color-primary-soft);
  --bs-primary-border-subtle:  rgba(245, 200, 74, 0.35);
  --bs-primary-text-emphasis:  var(--color-primary);
  --bs-secondary-bg-subtle:    var(--color-elevated);
  --bs-secondary-border-subtle:var(--color-border);
  --bs-secondary-text-emphasis:var(--color-secondary);
  --bs-success-bg-subtle:      var(--color-up-soft);
  --bs-success-border-subtle:  rgba(7, 248, 171, 0.35);
  --bs-success-text-emphasis:  var(--color-up);
  --bs-danger-bg-subtle:       var(--color-down-soft);
  --bs-danger-border-subtle:   rgba(242, 84, 122, 0.40);
  --bs-danger-text-emphasis:   var(--color-down);
  --bs-warning-bg-subtle:      var(--color-warning-soft);
  --bs-warning-border-subtle:  rgba(252, 247, 106, 0.35);
  --bs-warning-text-emphasis:  var(--color-warning);
  --bs-info-bg-subtle:         var(--color-info-soft);
  --bs-info-border-subtle:     rgba(133, 201, 251, 0.35);
  --bs-info-text-emphasis:     var(--color-info);

  /* --- Code / pre ---------------------------------------------------------- */
  --bs-code-color: var(--color-secondary);

  /* --- Focus ring ---------------------------------------------------------- */
  --bs-focus-ring-color: var(--color-focus-ring);
  --bs-focus-ring-rgb:   245, 200, 74;

  /* --- Tables -------------------------------------------------------------- */
  --bs-table-bg:           transparent;   /* let the card/page surface show through */
  --bs-table-color:        var(--color-text);
  --bs-table-border-color: var(--color-border-subtle);
  --bs-table-striped-bg:   rgba(255, 255, 255, 0.03);
  --bs-table-striped-color:var(--color-text);
  --bs-table-hover-bg:     var(--color-elevated);
  --bs-table-hover-color:  var(--color-text);
  --bs-table-active-bg:    var(--color-elevated);
  --bs-table-active-color: var(--color-text);

  /* --- Cards --------------------------------------------------------------- */
  --bs-card-bg:           var(--color-surface);
  --bs-card-color:        var(--color-text);
  --bs-card-border-color: var(--color-border);
  --bs-card-cap-bg:       var(--color-elevated);

  /* --- Modals -------------------------------------------------------------- */
  --bs-modal-bg:                  var(--color-elevated);
  --bs-modal-color:               var(--color-text);
  --bs-modal-border-color:        var(--color-border-strong);
  --bs-modal-header-border-color: var(--color-border);
  --bs-modal-footer-border-color: var(--color-border);

  /* --- Dropdowns ----------------------------------------------------------- */
  --bs-dropdown-bg:               var(--color-elevated);
  --bs-dropdown-color:            var(--color-text);
  --bs-dropdown-border-color:     var(--color-border);
  --bs-dropdown-link-color:       var(--color-text);
  --bs-dropdown-link-hover-bg:    var(--color-surface);
  --bs-dropdown-link-hover-color: var(--color-text);
  --bs-dropdown-link-active-bg:   var(--color-primary);
  --bs-dropdown-link-active-color:var(--color-text-on-accent);

  /* --- Nav / tabs ---------------------------------------------------------- */
  --bs-nav-link-color:                  var(--color-text-muted);
  --bs-nav-link-hover-color:            var(--color-text);
  --bs-nav-tabs-border-color:           var(--color-border);
  --bs-nav-tabs-link-hover-border-color:var(--color-border-subtle);
  --bs-nav-tabs-link-active-bg:         var(--color-surface);
  --bs-nav-tabs-link-active-color:      var(--color-text);
  --bs-nav-tabs-link-active-border-color:var(--color-border);

  /* --- Tooltips / popovers ------------------------------------------------- */
  --bs-tooltip-bg:    var(--color-elevated);
  --bs-tooltip-color: var(--color-text);

  /* --- Breadcrumb ---------------------------------------------------------- */
  --bs-breadcrumb-divider-color: var(--color-text-disabled);
}

/* ============================================================================
   Component rules Bootstrap variables alone don't fully cover
   ========================================================================== */

/* Form wells read as inset (#1C1733), distinct from the page surface. */
.form-control,
.form-select {
  /* background-color: var(--color-inset); */
  background-color: #483e79;
  border-color: var(--color-border);
  color: var(--color-text);
}
.form-control:focus,
.form-select:focus {
  /* background-color: var(--color-inset); */
  background-color: #483e79;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem var(--color-focus-ring);
  color: var(--color-text);
}
.form-control::placeholder { color: var(--color-text-disabled); }

/* Checkboxes / radios: unchecked, Bootstrap fills the box with the page bg and a
   faint border, so the empty box is nearly invisible on dark rows. Give it an
   inset well with a clearly visible border. Checked uses the gold primary with a
   DARK check/dot (white-on-gold would be low-contrast). */
.form-check-input {
  background-color: var(--color-text-disabled);
  border-color: var(--color-text-muted);
}
.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%231C1733' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
}
.form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='%231C1733'/></svg>");
}
.form-check-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem var(--color-focus-ring);
}

/* Bright accent fills need dark text for contrast (Bootstrap may otherwise
   auto-pick white, which washes out on cyan/green/yellow/lavender). */
.btn-success,
.btn-warning,
.btn-info,
.btn-secondary { --bs-btn-color: var(--color-text-on-accent); --bs-btn-hover-color: var(--color-text-on-accent); --bs-btn-active-color: var(--color-text-on-accent); }

/* Primary button: drive its fill from the brand --color-primary. Bootstrap bakes
   .btn-primary's --bs-btn-bg to a literal at compile time, so overriding --bs-primary
   alone doesn't reach it — we have to repoint the button's own vars. Dark text for
   contrast on the bright fill. */
.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-hover);
  --bs-btn-active-border-color: var(--color-primary-hover);
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
  --bs-btn-focus-shadow-rgb: 245, 200, 74;
  --bs-btn-color: var(--color-text-on-accent);
  --bs-btn-hover-color: var(--color-text-on-accent);
  --bs-btn-active-color: var(--color-text-on-accent);
  --bs-btn-disabled-color: var(--color-text-on-accent);
}

/* Outline primary: gold outline/text, filling gold (with dark text) on hover and
   a darker gold when pressed. Same baked-literal problem as .btn-primary, so
   repoint every state's vars off the blue default. */
.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-text-on-accent);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-color: var(--color-text-on-accent);
  --bs-btn-active-bg: var(--color-primary-hover);
  --bs-btn-active-border-color: var(--color-primary-hover);
  --bs-btn-focus-shadow-rgb: 245, 200, 74;
  --bs-btn-disabled-color: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
}

/* Close button: render light on dark surfaces (Bootstrap's dark theme defines
   the invert filter; pin it so custom-themed modals/toasts always get it). */
.btn-close { filter: var(--bs-btn-close-white-filter); }