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

/* ---- 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);
}

/* ---- Body -------------------------------------------------- */
body {
  background-color: var(--ms-bg) !important;
  color: var(--ms-text) !important;
}



/* ---- 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; }

/* ---- Cards ------------------------------------------------- */
.card {
  background-color: var(--ms-surface-1) !important;
  border-color:     var(--ms-border)    !important;
  border-radius: 8px !important;
}
.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; }

/* ---- 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-color:     var(--ms-border)    !important;
  color:            var(--ms-text)      !important;
  border-radius: 4px !important;
}
.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; }
.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; }

/* ---- Headings --------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--ms-text); }

/* ---- 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-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: transparent background, no border — text-only appearance */
.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; }

/* ---- 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);
}

/* 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;
}