/* ============================================================
   Colorffy dark theme — Dash apps (Bootstrap 5 / DARKLY)
   Primary:  #E0B773  (warm gold)
   Surface:  msci.darkBackground (muted ink navy), see ms-theme.css

   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 colours generated from msci.themeCss() (MS_master route /ms-theme.css) */
@import url("https://tools.minussinus.de/ms-theme.css");

/* ---- 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, --ms-surface-1..3, --ms-border, --ms-text-muted (+ *-rgb): from msci via ms-theme.css */
  --ms-border-subtle:    rgba(var(--ms-border-rgb), 0.5);

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

  --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:                var(--ms-bg-rgb);
  --bs-body-color:                 var(--ms-text);
  --bs-body-color-rgb:             194, 197, 213;
  --bs-secondary-bg:               var(--ms-surface-1);
  --bs-secondary-bg-rgb:           var(--ms-surface-1-rgb);
  --bs-tertiary-bg:                var(--ms-surface-2);
  --bs-tertiary-bg-rgb:            var(--ms-surface-2-rgb);
  --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(var(--ms-surface-1-rgb), 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(var(--ms-surface-1-rgb), 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 */
}

/* ---- News app (app_news) ------------------------------------- */
.ms-news {
  min-height: 100vh;
  padding: 20px 24px 32px;
  max-width: 1400px;
  margin: 0 auto;
}
.news-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
}
.news-stock { flex: 1 1 320px; max-width: 460px; }
.news-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ms-text-muted);
  margin-bottom: 4px;
}
.news-stock-dd .Select-control {
  background-color: var(--ms-tile) !important;
  border: 1px solid var(--ms-tile-highlight) !important;
  border-radius: 8px !important;
  height: 46px;
}
.news-stock-dd .Select-value-label,
.news-stock-dd .Select-placeholder,
.news-stock-dd .Select-input > input {
  font-size: 20px;
  font-weight: 600;
  line-height: 44px;
}
.news-stock-dd .Select-value-label { color: var(--ms-primary) !important; }
.news-stock-dd .Select-placeholder,
.news-stock-dd .Select--single > .Select-control .Select-value { line-height: 44px; }

.news-weblinks { flex: 1 1 300px; }
.news-weblinks > div > div { display: flex !important; flex-wrap: wrap; gap: 6px; }
.news-weblinks a,
.news-weblinks span:has(> i) {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: var(--ms-tile);
  text-decoration: none;
}
.news-weblinks a:hover,
.news-weblinks span:has(> i):hover { background-color: var(--ms-tile-highlight); }
.news-weblinks a:hover i { color: var(--ms-primary) !important; }
.news-weblinks i { padding: 0 !important; font-size: 15px; }
.news-weblinks img { margin: 0 !important; }

.news-logo { margin-left: auto; align-self: center; }
.news-logo img { height: 44px; width: auto; display: block; }

.news-tile {
  background-color: var(--ms-tile);
  border: 1px solid var(--ms-tile-highlight);
  border-radius: 12px;
  overflow: hidden;
}
.news-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ms-tile-highlight);
}
.news-title { display: flex; align-items: baseline; gap: 10px; margin-right: auto; }
.news-title h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--ms-text); }
.news-title span { font-size: 13px; color: var(--ms-text-muted); }

/* Segmented controls: News/Alerts checklist and period buttons */
.news-seg {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background-color: var(--ms-bg);
}
.news-seg label,
.news-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin: 0 !important;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ms-text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.news-seg label:hover,
.news-seg-btn:hover { color: var(--ms-text); }
.news-seg input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.news-seg label { display: inline-flex !important; }  /* dcc.Checklist sets an inline display */
.news-seg label span { display: inline-flex; align-items: center; gap: 6px; }
.news-seg label:has(input:checked),
.news-seg-btn.active { background-color: var(--ms-primary); color: var(--ms-bg); }
.news-seg label:has(input:focus-visible),
.news-seg-btn:focus-visible { outline: 2px solid var(--ms-primary); outline-offset: 2px; }

/* Date range picker */
.news-dates .DateRangePickerInput {
  background-color: var(--ms-bg) !important;
  border: 1px solid var(--ms-tile-highlight) !important;
  border-radius: 8px;
  overflow: hidden;
}
.news-dates .DateInput,
.news-dates .DateInput_input {
  background-color: transparent !important;
  color: var(--ms-text) !important;
  border: 0 !important;
  font-size: 14px;
  width: 112px;
  height: 38px;
  line-height: 38px;
  padding: 0 12px;
}
.news-dates .DateRangePickerInput { display: inline-flex; align-items: center; }
.news-dates .DateInput_input__focused { border-bottom: 2px solid var(--ms-primary) !important; }
.news-dates .DateRangePickerInput_arrow_svg { fill: var(--ms-text-muted); }

/* Headline filter */
.news-search {
  flex: 1 1 200px;
  max-width: 280px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--ms-tile-highlight);
  border-radius: 8px;
  background-color: var(--ms-bg);
  color: var(--ms-text-muted);
}
.news-search:focus-within { border-color: var(--ms-primary); }
.news-search input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 0 !important;
  background: transparent !important;
  color: var(--ms-text) !important;
  font-size: 14px;
  outline: none;
  box-shadow: none !important;
}

/* News grid */
#newsTable.ag-theme-balham :is(.ag-root-wrapper, .ag-body-viewport, .ag-center-cols-viewport) {
  background-color: transparent !important;
  border: none !important;
}
#newsTable.ag-theme-balham .ag-header {
  background-color: rgba(var(--ms-bg-rgb), 0.35) !important;
  border-bottom: 1px solid var(--ms-tile-highlight) !important;
}
#newsTable.ag-theme-balham .ag-header-cell-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ms-text-muted);
}
#newsTable.ag-theme-balham .ag-row {
  background-color: var(--ms-tile) !important;
  border-color: rgba(var(--ms-border-rgb), 0.45) !important;
  font-size: 14px;
}
#newsTable.ag-theme-balham .ag-row-odd { background-color: #1a2030 !important; }
#newsTable.ag-theme-balham .ag-row:hover { background-color: var(--ms-tile-highlight) !important; }
#newsTable.ag-theme-balham .ag-cell { display: flex; align-items: center; padding-left: 20px; }
#newsTable .news-cell-muted { color: var(--ms-text-muted); font-variant-numeric: tabular-nums; }
#newsTable .news-cell-title,
#newsTable .news-cell-title p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
#newsTable .news-cell-title a { color: #E6E7EE; font-weight: 500; text-decoration: none; }
#newsTable .news-cell-title a:hover { color: var(--ms-primary); }
#newsTable .news-cell-title a:visited { color: var(--ms-text-muted); }
#newsTable .ag-cell p { margin: 0; }
.news-chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
}
.news-chip-news  { background-color: rgba(64, 119, 209, 0.18); color: #8fb0ea; }
.news-chip-alert { background-color: var(--ms-primary-subtle); color: var(--ms-primary); }
#newsTable.ag-theme-balham .ag-paging-panel {
  border-top: 1px solid var(--ms-tile-highlight) !important;
  height: 48px;
  padding: 0 20px;
}
.news-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ms-text-muted);
  font-size: 15px;
}
.news-empty i { font-size: 32px; opacity: 0.6; }

@media (max-width: 640px) {
  .ms-news { padding: 12px 16px 24px; }
  .news-toolbar { padding: 12px 16px; }
  .news-title { flex-basis: 100%; }
  .news-search { max-width: none; }
}

/* ---- Stock history app (app_history) ------------------------- */
/* Header, toolbars and segmented controls reuse the .news-* classes above. */
.ms-history {
  min-height: 100vh;
  padding: 20px 24px 32px;
  max-width: 1400px;
  margin: 0 auto;
}
.ms-history .news-seg input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ms-history .pos { color: var(--ms-success-light); }
.ms-history .neg { color: var(--ms-danger-light); }
.hist-muted { color: var(--ms-text-muted); }
.hist-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* KPI strip */
.hist-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.hist-kpi-tiles { display: contents; }
.hist-kpi {
  min-width: 0;
  padding: 12px 16px;
  background-color: var(--ms-tile);
  border: 1px solid var(--ms-tile-highlight);
  border-radius: 12px;
}
.hist-kpi-v {
  font-size: 22px;
  font-weight: 650;
  color: var(--ms-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hist-kpi-v small { font-size: 15px; font-weight: 600; }
.hist-kpi-s { font-size: 12px; color: var(--ms-text-muted); font-variant-numeric: tabular-nums; }
.hist-irr-neg { border-color: rgba(217, 74, 74, 0.55); background-color: rgba(156, 33, 33, 0.18); }
.hist-irr-pos { border-color: rgba(71, 213, 166, 0.55); background-color: rgba(34, 148, 110, 0.18); }

/* Main grid: chart + news left, journal right */
.hist-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 16px;
  align-items: start;
}
.hist-grid .news-tile .js-plotly-plot { padding: 4px 8px 0; }
.hist-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 6px 20px 8px;
  font-size: 12px;
  color: var(--ms-text-muted);
}
.hist-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.hist-sw { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.hist-sw-band { height: 8px; background-color: var(--ms-primary); opacity: 0.35; }
.hist-range-note { padding: 0 20px 14px; font-size: 12px; color: var(--ms-text-muted); }
.hist-range-note i { color: var(--ms-primary); margin-right: 6px; }

/* News */
.hist-news { margin-top: 16px; }
.hist-link { font-size: 13px; color: var(--ms-primary); text-decoration: none; }
.hist-link:hover { color: var(--ms-text); }
.hist-news-list { list-style: none; margin: 0; padding: 0; }
.hist-news-list li {
  display: flex;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--ms-tile-highlight);
  font-size: 13px;
}
.hist-news-list li:last-child { border-bottom: 0; }
.hist-news-list a { color: #E6E7EE; text-decoration: none; }
.hist-news-list a:hover { color: var(--ms-primary); }
.hist-when { flex: 0 0 90px; color: var(--ms-text-muted); font-size: 12px; }
.hist-src { margin-left: auto; color: var(--ms-text-muted); font-size: 12px; white-space: nowrap; }
.hist-empty { padding: 20px; color: var(--ms-text-muted); font-size: 13px; }

/* Journal */
.hist-add { padding: 14px 20px; border-bottom: 1px solid var(--ms-tile-highlight); }
.hist-textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  padding: 10px 12px;
  background-color: var(--ms-bg) !important;
  color: var(--ms-text) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: 8px;
  font-size: 14px;
}
.hist-textarea:focus { outline: none; border-color: var(--ms-primary) !important; }
.hist-add-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ms-text-muted);
}
.hist-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background-color: var(--ms-primary);
  color: var(--ms-bg);
  font-size: 13px;
  font-weight: 600;
}
.hist-btn:hover { background-color: var(--ms-primary-dark); }
.hist-entries { max-height: 1000px; overflow-y: auto; }
.hist-entry {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ms-tile-highlight);
  cursor: pointer;
}
.hist-entry:hover { background-color: rgba(255, 255, 255, 0.02); }
.hist-entry.hl { background-color: var(--ms-primary-subtle); }
.hist-ico {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: var(--ms-bg);
  font-size: 13px;
}
.hist-entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.hist-kind { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.hist-date { font-size: 12px; color: var(--ms-text-muted); }
.hist-num { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ms-text); }
.hist-num small { font-size: 12px; }
.hist-c-val  { color: #F4C43D; }
.hist-c-note { color: #8fa8ff; }
.hist-c-buy  { color: #40D5C4; }
.hist-c-sell { color: var(--ms-danger-light); }
.hist-c-div  { color: var(--ms-success-light); }
.hist-md { margin-top: 4px; font-size: 13px; color: var(--ms-text); }
.hist-md p { margin: 0 0 4px; }
.hist-entry p.hist-muted { margin: 4px 0 0; font-size: 13px; }
.hist-metrics { margin-top: 4px; font-size: 12px; color: var(--ms-text-muted); }
.hist-del { color: var(--ms-text-muted); visibility: hidden; padding: 0 2px; }
.hist-entry:hover .hist-del { visibility: visible; }
.hist-del:hover { color: var(--ms-danger-light); }

@media (max-width: 1100px) {
  .hist-grid { grid-template-columns: minmax(0, 1fr); }
  .hist-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ms-history { padding: 12px 16px 24px; }
  .hist-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hist-del { visibility: visible; }
}
/* Layer toggles keep their colour dot visible, so they use a subtle active state */
#hist-layers label:has(input:checked) { background-color: var(--ms-tile-highlight); color: var(--ms-primary); }
#hist-layers label:not(:has(input:checked)) .hist-dot { opacity: 0.35; }
#hist-layers label > span { display: inline-flex; align-items: center; gap: 6px; }
.ms-history .news-title h2 { white-space: nowrap; }