/* ============================================================
   Colorffy dark theme — Dash apps (Bootstrap 5 / DARKLY)
   Primary:  #E0B773  (warm gold)
   Surface:  #00032D  (deep navy)

   Single stylesheet for all MS_master Dash apps. Was previously split across
   dark.css + more_styles.css with a few rules unintentionally overlapping
   (.card, form inputs, h1-h6) whose winner depended on Dash's alphabetical
   asset-load order; consolidated here as single, explicit rules instead.
   ============================================================ */

/* ---- Palette tokens ---------------------------------------- */
:root {
  --ms-primary:          #E0B773;
  --ms-primary-dark:     #c49a55;
  --ms-primary-rgb:      224, 183, 115;
  --ms-primary-subtle:   rgba(224, 183, 115, 0.12);

  --ms-bg:               #00032D;
  --ms-surface-1:        #07103a;
  --ms-surface-2:        #0f1b52;
  --ms-surface-3:        #1a2669;
  --ms-border:           #1f2e74;
  --ms-border-subtle:    rgba(31, 46, 116, 0.5);

  --ms-text:             #C2C5D5;  /* msci.Silver */
  --ms-text-muted:       #7a80a8;

  --ms-success:          #22946E;
  --ms-success-light:    #47d5a6;
  --ms-warning:          #A87A2A;
  --ms-warning-light:    #d7ac61;
  --ms-danger:           #9C2121;
  --ms-danger-light:     #d94a4a;
  --ms-info:             #21498A;
  --ms-info-light:       #4077d1;
}

/* ---- Bootstrap 5 variable overrides ----------------------- */
:root,
[data-bs-theme="dark"] {
  --bs-body-bg:                    var(--ms-bg);
  --bs-body-bg-rgb:                0, 3, 45;
  --bs-body-color:                 var(--ms-text);
  --bs-body-color-rgb:             194, 197, 213;
  --bs-secondary-bg:               var(--ms-surface-1);
  --bs-secondary-bg-rgb:           7, 16, 58;
  --bs-tertiary-bg:                var(--ms-surface-2);
  --bs-tertiary-bg-rgb:            15, 27, 82;
  --bs-secondary-color:            rgba(194, 197, 213, 0.75);
  --bs-tertiary-color:             rgba(194, 197, 213, 0.5);
  --bs-emphasis-color:             var(--ms-primary);
  --bs-emphasis-color-rgb:         var(--ms-primary-rgb);

  --bs-primary:                    var(--ms-primary);
  --bs-primary-rgb:                224, 183, 115;
  --bs-secondary:                  #3d4580;
  --bs-secondary-rgb:              61, 69, 128;
  --bs-success:                    var(--ms-success);
  --bs-success-rgb:                34, 148, 110;
  --bs-info:                       var(--ms-info);
  --bs-info-rgb:                   33, 73, 138;
  --bs-warning:                    var(--ms-warning);
  --bs-warning-rgb:                168, 122, 42;
  --bs-danger:                     var(--ms-danger);
  --bs-danger-rgb:                 156, 33, 33;
  --bs-light:                      var(--ms-text);
  --bs-dark:                       var(--ms-bg);

  --bs-border-color:               var(--ms-border);
  --bs-border-color-translucent:   var(--ms-border-subtle);

  --bs-link-color:                 var(--ms-primary);
  --bs-link-hover-color:           var(--ms-primary-dark);
  --bs-link-color-rgb:             224, 183, 115;
  --bs-link-hover-color-rgb:       196, 154, 85;

  --bs-heading-color:              var(--ms-text);
  --bs-code-color:                 var(--ms-primary);
  --bs-highlight-bg:               var(--ms-surface-3);

  /* card */
  --bs-card-bg:                    var(--ms-surface-1);
  --bs-card-cap-bg:                var(--ms-surface-2);
  --bs-card-border-color:          var(--ms-border);

  /* table */
  --bs-table-bg:                   transparent;
  --bs-table-color:                var(--ms-text);
  --bs-table-border-color:         var(--ms-border);
  --bs-table-striped-bg:           rgba(7, 16, 58, 0.6);
  --bs-table-hover-bg:             rgba(224, 183, 115, 0.07);

  /* form */
  --bs-form-valid-color:           var(--ms-success-light);
  --bs-form-valid-border-color:    var(--ms-success);
  --bs-form-invalid-color:         var(--ms-danger-light);
  --bs-form-invalid-border-color:  var(--ms-danger);
}

/* ---- Base / reset -------------------------------------------
   10px root sizing (Skeleton-framework convention) so the rem
   values in the heading rules below read as 1rem = 10px. */
html {
  font-size: 62.5%;
}
body {
  background-color: var(--ms-bg) !important;
  color:            var(--ms-text) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 400;
  margin: 2%;
}

/* ---- Headings ------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300;
  color: var(--ms-text);
}
h1 { font-size: 2.4rem; line-height: 1.2;  margin-bottom: 2rem; }
h2 { font-size: 2.0rem; line-height: 1.25; margin-top: 1rem; }
h3 { font-size: 1.8rem; line-height: 1.3;  margin-bottom: 1.5rem; margin-top: 1.5rem; }
h4 { font-size: 1.6rem; line-height: 1.35; margin-bottom: 1.2rem; }
h5 { font-size: 1.4rem; line-height: 1.5;  margin-bottom: 0.6rem; margin-top: 0.6rem; }
h6 { font-size: 1.0rem; line-height: 1.6;  margin-bottom: 0.75rem; margin-top: 0.75rem; }

/* Grid resets - also restored from the old remote dark.css */
.row { padding-left: 0; padding-bottom: 0; margin-bottom: 0; }
.col { margin-right: 0; }

/* ---- Navbar ------------------------------------------------ */
.navbar,
.navbar-dark,
nav.bg-dark,
.bg-dark:not(.card):not(.dropdown-menu):not(.modal-content) {
  background-color: var(--ms-surface-1) !important;
  border-bottom: 1px solid var(--ms-border);
}
.navbar-brand,
.navbar-dark .navbar-brand { color: var(--ms-primary) !important; font-weight: 600; }
.navbar-dark .nav-link      { color: var(--ms-text) !important; }
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus { color: var(--ms-primary) !important; }
.navbar-toggler             { border-color: var(--ms-border) !important; }
.navbar-toggler-icon        { filter: brightness(0.7) sepia(1) hue-rotate(180deg) saturate(0.5); }

/* ---- Buttons ----------------------------------------------- */
.btn-primary {
  background-color: var(--ms-primary) !important;
  border-color:     var(--ms-primary) !important;
  color:            var(--ms-bg)      !important;
  font-weight: 500;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--ms-primary-dark) !important;
  border-color:     var(--ms-primary-dark) !important;
  color:            var(--ms-bg)           !important;
  box-shadow:       0 0 0 0.25rem rgba(224, 183, 115, 0.25) !important;
}
.btn-outline-primary {
  color:            var(--ms-primary) !important;
  border-color:     var(--ms-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--ms-primary) !important;
  color:            var(--ms-bg)       !important;
}
.btn-outline-secondary {
  color:        var(--ms-text-muted) !important;
  border-color: var(--ms-border)     !important;
}
.btn-outline-secondary:hover {
  background-color: var(--ms-surface-2) !important;
  border-color:     var(--ms-border)    !important;
  color:            var(--ms-text)      !important;
}
.btn-success   { background-color: var(--ms-success) !important; border-color: var(--ms-success) !important; color: #fff !important; }
.btn-warning   { background-color: var(--ms-warning) !important; border-color: var(--ms-warning) !important; color: #fff !important; }
.btn-danger    { background-color: var(--ms-danger)  !important; border-color: var(--ms-danger)  !important; color: #fff !important; }
.btn-info      { background-color: var(--ms-info)    !important; border-color: var(--ms-info)    !important; color: #fff !important; }
.btn-secondary { background-color: var(--ms-surface-3) !important; border-color: var(--ms-border) !important; color: var(--ms-text) !important; }
.btn-dark      { background-color: var(--ms-surface-2) !important; border-color: var(--ms-border) !important; color: var(--ms-text) !important; }
.btn-light     { background-color: var(--ms-surface-2) !important; border-color: var(--ms-border) !important; color: var(--ms-text) !important; }

/* Icon buttons (font-awesome): smooth hover fade */
.fas { transition: opacity 0.15s ease; }
.fas:hover { opacity: 0.65; }

/* Plain <button> elements (html.Button without a Bootstrap className) - also
   restored from the old remote am.minussinus.de/assets/dark.css; the .btn-*
   classed rules above already win over this via specificity, so it only
   affects unclassed buttons. */
button {
  color: var(--ms-bg);
  background-color: var(--ms-primary);
  border-radius: 8px;
  border-style: none;
  margin: 5px;
  padding-inline: 0.75rem;
  padding-block: 0.375rem;
}

/* Links: no underline, matches the flat icon/tile/dropdown-link aesthetic
   used throughout - also restored from the old remote dark.css. */
a { text-decoration: none; }

/* ---- Cards --------------------------------------------------
   Borderless with a subtle radius - this was the accidental winner
   of a load-order conflict before consolidation; kept intentionally.
   margin-bottom restores spacing between stacked cards that used to
   come from the old remote am.minussinus.de/assets/dark.css, before
   that URL was symlinked to this consolidated file. */
.card {
  background-color: var(--ms-surface-1) !important;
  border: none !important;
  border-radius: 6px !important;
  margin-bottom: 10px !important;
  padding: 10px;
  height: 95%;
}
.card-header {
  background-color: var(--ms-surface-2) !important;
  border-color:     var(--ms-border)    !important;
  color:            var(--ms-text)      !important;
}
.card-body  { color: var(--ms-text); }
.card-title { color: var(--ms-text) !important; }

/* Tile section headers — used via className='snap-header' */
.snap-header {
  font-size: 1.2rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ms-text);
  margin-bottom: 6px;
  margin-top: 2px;
}

/* ---- Forms --------------------------------------------------- */
.form-control,
.form-select,
.Select-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
  background-color: var(--ms-surface-1) !important;
  border-style:     solid                !important;
  border-width:     1px                  !important;
  border-color:     var(--ms-border)    !important;
  color:            var(--ms-text)      !important;
  border-radius: 4px !important;
  transition: border-color 0.15s ease;
}
.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus {
  background-color: var(--ms-surface-2)                    !important;
  border-color:     var(--ms-primary)                      !important;
  box-shadow:       0 0 0 0.25rem rgba(224, 183, 115, 0.2) !important;
  color:            var(--ms-text)                         !important;
}
.form-control::placeholder { color: var(--ms-text-muted) !important; opacity: 1; }

/* app_snap: Fair Multiple scenario inputs — per-metric border colors
   (msci.darkBlue/Red/LightGray/Orange). ID selectors outrank the
   input[type=...] rule above on specificity even though both sides are
   !important, so these colors win over the generic theme border. */
#equityCosts,
#fair_pe       { border-color: #86869b !important; } /* darkBlue */
#fair_pb       { border-color: #C12F25 !important; } /* Red */
#fair_ev_ebit  { border-color: #A8AABC !important; } /* LightGray */
#fair_ev_sales { border-color: #F4C43D !important; } /* Orange */
.form-check-input:checked {
  background-color: var(--ms-primary) !important;
  border-color:     var(--ms-primary) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(224, 183, 115, 0.2) !important;
  border-color: var(--ms-primary) !important;
}
.form-switch .form-check-input:checked {
  background-color: var(--ms-primary) !important;
  border-color:     var(--ms-primary) !important;
}
.input-group-text {
  background-color: var(--ms-surface-2) !important;
  border-color:     var(--ms-border)    !important;
  color:            var(--ms-text-muted)!important;
}

/* ---- Dropdowns --------------------------------------------- */
.dropdown-menu {
  background-color: var(--ms-surface-2) !important;
  border-color:     var(--ms-border)    !important;
}
.dropdown-item          { color: var(--ms-text) !important; }
.dropdown-item:hover,
.dropdown-item:focus    { background-color: var(--ms-surface-3) !important; color: var(--ms-text) !important; }
.dropdown-divider       { border-color: var(--ms-border) !important; }

/* ---- Tables ------------------------------------------------ */
.table                  { color: var(--ms-text) !important; }
.table > :not(caption) > * > * { border-color: var(--ms-border) !important; }
.table-dark             { background-color: var(--ms-surface-1) !important; }
.table thead th,
.table thead td         { color: var(--ms-text-muted) !important; border-color: var(--ms-border) !important; }
.table-hover > tbody > tr:hover > * { background-color: rgba(224, 183, 115, 0.07) !important; color: var(--ms-text) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(7, 16, 58, 0.5) !important; }
.table-bordered > :not(caption) > * { border-color: var(--ms-border) !important; }

/* ---- Badges ------------------------------------------------ */
.badge.bg-primary        { background-color: var(--ms-primary) !important; color: var(--ms-bg) !important; }
.badge.bg-success        { background-color: var(--ms-success) !important; }
.badge.bg-warning        { background-color: var(--ms-warning) !important; }
.badge.bg-danger         { background-color: var(--ms-danger)  !important; }
.badge.bg-info           { background-color: var(--ms-info)    !important; }
.badge.bg-secondary      { background-color: var(--ms-surface-3) !important; color: var(--ms-text) !important; }

/* ---- Tabs -------------------------------------------------- */
.nav-tabs                { border-color: var(--ms-border); }
.nav-tabs .nav-link      { color: var(--ms-text-muted); border-color: transparent; }
.nav-tabs .nav-link:hover { color: var(--ms-text); border-color: var(--ms-border) var(--ms-border) transparent; }
.nav-tabs .nav-link.active {
  background-color: var(--ms-surface-2) !important;
  border-color:     var(--ms-primary) var(--ms-primary) var(--ms-surface-2) !important;
  color:            var(--ms-text) !important;
}
.nav-pills .nav-link.active {
  background-color: var(--ms-primary) !important;
  color:            var(--ms-bg)       !important;
}
.nav-pills .nav-link     { color: var(--ms-text-muted); }
.nav-pills .nav-link:hover { color: var(--ms-text); }

/* ---- Modals ------------------------------------------------ */
.modal-content  { background-color: var(--ms-surface-1) !important; border-color: var(--ms-border) !important; }
.modal-header   { border-color: var(--ms-border) !important; }
.modal-footer   { border-color: var(--ms-border) !important; }
.modal-title    { color: var(--ms-text) !important; }

/* ---- Alerts ------------------------------------------------ */
.alert-success  { background-color: rgba(34, 148, 110, 0.15) !important; border-color: var(--ms-success) !important; color: var(--ms-success-light) !important; }
.alert-warning  { background-color: rgba(168, 122, 42, 0.15) !important; border-color: var(--ms-warning) !important; color: var(--ms-warning-light) !important; }
.alert-danger   { background-color: rgba(156, 33, 33, 0.15)  !important; border-color: var(--ms-danger)  !important; color: var(--ms-danger-light)  !important; }
.alert-info     { background-color: rgba(33, 73, 138, 0.15)  !important; border-color: var(--ms-info)    !important; color: var(--ms-info-light)    !important; }
.alert-primary  { background-color: rgba(224, 183, 115, 0.12)!important; border-color: var(--ms-primary) !important; color: var(--ms-primary)       !important; }

/* ---- List groups ------------------------------------------- */
.list-group-item {
  background-color: var(--ms-surface-1) !important;
  border-color:     var(--ms-border)    !important;
  color:            var(--ms-text)      !important;
}
.list-group-item:hover,
.list-group-item:focus { background-color: var(--ms-surface-2) !important; }
.list-group-item.active { background-color: var(--ms-primary) !important; border-color: var(--ms-primary) !important; color: var(--ms-bg) !important; }

/* ---- Accordion --------------------------------------------- */
.accordion-item   { background-color: var(--ms-surface-1) !important; border-color: var(--ms-border) !important; }
.accordion-button { background-color: var(--ms-surface-1) !important; color: var(--ms-text) !important; }
.accordion-button:not(.collapsed) { background-color: var(--ms-surface-2) !important; color: var(--ms-text) !important; box-shadow: inset 0 -1px 0 var(--ms-border) !important; }
.accordion-button:focus { box-shadow: 0 0 0 0.25rem rgba(224, 183, 115, 0.2) !important; }
.accordion-button::after { filter: brightness(0.6) sepia(1) hue-rotate(10deg) saturate(3); }
.accordion-body { background-color: var(--ms-surface-1) !important; color: var(--ms-text) !important; }

/* ---- Progress ---------------------------------------------- */
.progress       { background-color: var(--ms-surface-2) !important; }
.progress-bar   { background-color: var(--ms-primary)   !important; color: var(--ms-bg) !important; }

/* ---- Tooltips & popovers ----------------------------------- */
.tooltip-inner      { background-color: var(--ms-surface-3); color: var(--ms-text); border: 1px solid var(--ms-border); }
.popover            { background-color: var(--ms-surface-2) !important; border-color: var(--ms-border) !important; }
.popover-header     { background-color: var(--ms-surface-3) !important; border-color: var(--ms-border) !important; color: var(--ms-text) !important; }
.popover-body       { color: var(--ms-text) !important; }

/* ---- Misc Bootstrap helpers -------------------------------- */
.text-muted         { color: var(--ms-text-muted) !important; }
.text-primary       { color: var(--ms-primary)    !important; }
.text-success       { color: var(--ms-success-light) !important; }
.text-warning       { color: var(--ms-warning-light) !important; }
.text-danger        { color: var(--ms-danger-light)  !important; }
.text-info          { color: var(--ms-info-light)    !important; }
.text-light         { color: var(--ms-text)          !important; }
.bg-primary         { background-color: var(--ms-primary)    !important; color: var(--ms-bg)   !important; }
.bg-success         { background-color: var(--ms-success)    !important; color: #fff !important; }
.bg-warning         { background-color: var(--ms-warning)    !important; color: #fff !important; }
.bg-danger          { background-color: var(--ms-danger)     !important; color: #fff !important; }
.bg-info            { background-color: var(--ms-info)       !important; color: #fff !important; }
.bg-secondary       { background-color: var(--ms-surface-2)  !important; }
.bg-dark            { background-color: var(--ms-surface-1)  !important; }
.border             { border-color: var(--ms-border) !important; }
.border-primary     { border-color: var(--ms-primary) !important; }
hr                  { border-color: var(--ms-border); opacity: 0.5; }

/* MS logo: slightly muted */
img[src*="ms_logo"] { opacity: 0.8; }

/* ---- Dash-specific: Select / Dropdown ---------------------- */
.Select-control,
.Select-menu-outer,
.VirtualizedSelectFocusedOption,
.VirtualizedSelectOption {
  background-color: var(--ms-surface-1) !important;
  border-color:     var(--ms-border)    !important;
  color:            var(--ms-text)      !important;
}
.Select--single > .Select-control .Select-value,
.Select-placeholder          { color: var(--ms-text-muted) !important; }
.Select-value,
.Select-value-label          { color: var(--ms-text) !important; } /* multi-select chips */
.Select-input > input        { color: var(--ms-text) !important; } /* text typed while searching */
.Select-option.is-focused    { background-color: var(--ms-surface-2) !important; color: var(--ms-text) !important; }
.Select-option.is-selected   { background-color: var(--ms-surface-3) !important; color: var(--ms-text) !important; }
.Select-arrow                { border-top-color: var(--ms-text-muted) !important; }
.Select-control:hover        { border-color: var(--ms-primary) !important; }

/* Dash dcc.Dropdown (newer) */
.dash-dropdown .Select-control  { background-color: var(--ms-surface-1) !important; border-color: var(--ms-border) !important; }
.dash-dropdown .Select-menu-outer { background-color: var(--ms-surface-2) !important; border-color: var(--ms-border) !important; }

/* ddheading dropdowns: large text-only appearance, matching h1's size, no border/background */
.ddheading {
  font-weight: 400;
  font-size: 2.4rem;
  height: 45px;
  padding: 5px;
}
.ddheading .Select-control {
  background-color: transparent !important;
  border-color:     transparent !important;
  box-shadow:       none        !important;
}
.ddheading .Select-control:hover {
  border-color: var(--ms-border) !important;
}

/* ---- Dash slider --------------------------------------------- */
.rc-slider-rail     { background-color: var(--ms-border)    !important; }
.rc-slider-track    { background-color: var(--ms-primary)   !important; }
.rc-slider-handle   { border-color:     var(--ms-primary)   !important; background-color: var(--ms-primary) !important; }
.rc-slider-handle:hover,
.rc-slider-handle:active { border-color: var(--ms-primary-dark) !important; box-shadow: 0 0 0 5px rgba(224, 183, 115, 0.2) !important; }
.rc-slider-dot-active { border-color: var(--ms-primary) !important; }

/* iQPerf: sailor range slider — red active track/handles to match sailor color */
#rangeSliderRacingFrame .rc-slider-track { background-color: #c0392b !important; }
#rangeSliderRacingFrame .rc-slider-handle { border-color: #c0392b !important; background-color: #c0392b !important; }
#rangeSliderRacingFrame .rc-slider-handle:hover,
#rangeSliderRacingFrame .rc-slider-handle:active {
  border-color:     #e74c3c !important;
  background-color: #e74c3c !important;
  box-shadow:       0 0 5px #e74c3c !important;
}

/* ---- Scrollbars -------------------------------------------- */
::-webkit-scrollbar              { width: 7px; height: 7px; }
::-webkit-scrollbar-track        { background: var(--ms-bg); }
::-webkit-scrollbar-thumb        { background: var(--ms-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: var(--ms-surface-3); }

/* ---- Selection --------------------------------------------- */
::selection { background: rgba(224, 183, 115, 0.22); color: var(--ms-text); }

/* ---- AG Grid (ag-theme-balham) dark overrides -------------- */
.ag-theme-balham {
  --ag-background-color:            var(--ms-bg);
  --ag-foreground-color:            var(--ms-text);
  --ag-header-background-color:     var(--ms-surface-2);
  --ag-header-foreground-color:     var(--ms-text);
  --ag-odd-row-background-color:    var(--ms-surface-1);
  --ag-row-hover-color:             rgba(224, 183, 115, 0.07);
  --ag-selected-row-background-color: rgba(224, 183, 115, 0.12);
  --ag-border-color:                var(--ms-border);
  --ag-secondary-border-color:      var(--ms-border);
  --ag-row-border-color:            var(--ms-border);
  --ag-cell-horizontal-border:      solid var(--ms-border);
  --ag-input-border-color:          var(--ms-border);
  --ag-input-background-color:      var(--ms-surface-1);
  --ag-disabled-foreground-color:   var(--ms-text-muted);
  --ag-chip-background-color:       var(--ms-surface-3);
  --ag-input-focus-border-color:    var(--ms-primary);
  --ag-range-selection-border-color: var(--ms-primary);
  --ag-checkbox-checked-color:      var(--ms-primary);
  --ag-icon-color:                  var(--ms-text);
}

/* AG Grid header icons — invert black SVG icons to light for dark theme */
.ag-theme-balham .ag-header-icon .ag-icon,
.ag-theme-balham .ag-header-cell-menu-button .ag-icon {
  filter: invert(1) opacity(0.6);
}

/* Pagination panel */
.ag-theme-balham .ag-paging-panel {
  background-color: var(--ms-surface-1) !important;
  color:            var(--ms-text)      !important;
  border-top:       1px solid var(--ms-border) !important;
}
.ag-theme-balham .ag-paging-button .ag-icon,
.ag-theme-balham .ag-paging-button {
  color: var(--ms-text) !important;
}
.ag-theme-balham .ag-paging-button:hover .ag-icon,
.ag-theme-balham .ag-paging-button:hover {
  color: var(--ms-primary) !important;
}
.ag-theme-balham .ag-paging-button[disabled] .ag-icon,
.ag-theme-balham .ag-paging-button[disabled] {
  color: var(--ms-text-muted) !important;
}

/* Header */
.ag-theme-balham .ag-header {
  background-color: var(--ms-surface-2) !important;
  border-bottom:    1px solid var(--ms-border) !important;
}
.ag-theme-balham .ag-header-cell,
.ag-theme-balham .ag-header-group-cell {
  color: var(--ms-text) !important;
}
.ag-theme-balham .ag-header-cell:hover {
  background-color: var(--ms-surface-3) !important;
}
.ag-theme-balham .ag-header-cell-resize::after {
  background-color: var(--ms-border) !important;
}
.ag-theme-balham .ag-sort-indicator-icon .ag-icon {
  color: var(--ms-text-muted) !important;
}
.ag-theme-balham .ag-icon-filter {
  color: var(--ms-text-muted) !important;
}

/* Filter / floating filter */
.ag-theme-balham .ag-floating-filter-input input,
.ag-theme-balham .ag-text-field-input {
  background-color: var(--ms-surface-1) !important;
  color:            var(--ms-text)      !important;
  border-color:     var(--ms-border)    !important;
}

/* Icons throughout (sort, filter, menu) */
.ag-theme-balham .ag-icon {
  color: var(--ms-text) !important;
}
.ag-theme-balham .ag-icon:hover {
  color: var(--ms-primary) !important;
}

/* Column menu */
.ag-theme-balham .ag-menu {
  background-color: var(--ms-surface-2) !important;
  border-color:     var(--ms-border)    !important;
  color:            var(--ms-text)      !important;
}
.ag-theme-balham .ag-menu-option:hover {
  background-color: var(--ms-surface-3) !important;
}

/* Tooltip */
.ag-theme-balham .ag-tooltip {
  background-color: var(--ms-surface-3) !important;
  border-color:     var(--ms-border)    !important;
  color:            var(--ms-text)      !important;
}

/* Specific grids (FairMult/PnL/EBIT/PtfD/Sailor/Screen/Diary/... tables):
   transparent background + no border, to match the surrounding dark tile.
   :is() collapses what was previously ~50 lines of one selector per table ID. */
:is(#tableFairMult, #tb_rev, #tb_ebit, #ptfd_table, #tableSailor, #screenTable,
    #tb, #table, #t1, #tableOptions, #diary_table).ag-theme-balham
  :is(.ag-root-wrapper, .ag-header, .ag-header-row, .ag-header-cell, .ag-body-viewport) {
  background-color: transparent !important;
  border-color: transparent !important;
}
:is(#tableFairMult, #tb_rev, #tb_ebit, #ptfd_table, #tableSailor, #screenTable,
    #tb, #table, #t1, #tableOptions, #diary_table).ag-theme-balham .ag-root-wrapper {
  border: none !important;
}
:is(#tableFairMult, #tb_rev, #tb_ebit, #ptfd_table, #tableSailor, #screenTable,
    #tb, #table, #t1, #tableOptions, #diary_table).ag-theme-balham .ag-header-cell-label {
  color: var(--ms-text-muted);
}

/* ---- Swipe carousel ------------------------------------------ */
#carousel-container {
  width: 400px;
  overflow: hidden;
  margin: auto;
  touch-action: pan-y; /* allow horizontal swipes */
}
#carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}
.carousel-image {
  width: 400px;
  flex-shrink: 0;
  user-select: none;
  pointer-events: none; /* image doesn't block swipe */
}