/* bot_theme kit (0.3.0) — the RichmondBAS card system as package classes.
   Used by bot_theme.kit (chart_card, table_card, card_header, info popover,
   kpi_tile, pill_nav). ADDITIVE: every selector is a .bot-kit-* class, so no
   existing markup in any app is matched. Every colour is a var(--bot-*) from
   bot_tokens.css (tokens.json) — no literal colours in this file.
   Selectors carry [data-theme] (set on <html> by the no-flash script) so they
   outrank bootstrap.min.css and app stylesheets regardless of load order. */

/* ---- card chrome (rbas D2: gold top rule, card border, soft shadow) ---- */
[data-theme] .card.bot-kit-card, [data-theme] .bot-kit-card {
  background: var(--bot-surface-card-bg);
  color: var(--bot-text-primary);
  border: 1px solid var(--bot-border-card);
  border-top: 3px solid var(--bot-brand-gold);
  border-radius: var(--bot-radius-card);
  box-shadow: var(--bot-shadow-card);
}
[data-theme] .bot-kit-card > .card-body { background: transparent; color: var(--bot-text-primary); }

/* ---- card header (rbas _HEADER_STYLE: card-colour header, serif navy
   title, 2px gold rule, controls right-aligned) ---- */
[data-theme] .bot-kit-card > .card-header.bot-kit-card-header,
[data-theme] .bot-kit-card-header {
  background: var(--bot-surface-card-bg);
  color: var(--bot-brand-navy);
  font-family: var(--bot-font-family-head);
  font-size: 0.95rem;
  font-weight: 600;
  border-bottom: 2px solid var(--bot-brand-gold);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap; padding: .5rem 1rem;
}
[data-theme] .bot-kit-card-title { color: var(--bot-brand-navy); min-width: 0; }
.bot-kit-card-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; margin-left: auto; }
.bot-kit-card-controls { display: flex; align-items: center; margin-right: 8px; }

/* action icon buttons (rbas _ICON_BTN_STYLE) */
[data-theme] .bot-icon-btn.bot-kit-act {
  background: transparent; border: none; line-height: 1; cursor: pointer;
  padding: 0 3px; color: var(--bot-icon-color);
}
[data-theme] .bot-icon-btn.bot-kit-act:hover { color: var(--bot-icon-color-hover); background: var(--bot-surface-hover-bg); }
[data-theme] .bot-icon-btn.bot-kit-act:focus-visible { outline: 2px solid var(--bot-border-focus); outline-offset: 1px; }

/* ⓘ trigger (rbas _INFO_ICON_STYLE: gold-text, pointer) */
[data-theme] .bot-kit-info {
  color: var(--bot-text-accent); cursor: pointer;
  margin-right: 6px; vertical-align: middle; display: inline-flex; align-items: center;
}
[data-theme] .bot-kit-info:focus-visible { outline: 2px solid var(--bot-border-focus); outline-offset: 1px; border-radius: var(--bot-radius-sm); }
.bot-kit-modal-info { margin-left: 10px; }

/* hover-mode select (rbas: 108px, .7rem, 24px high) */
.bot-kit-hover-wrap { margin-right: 8px; display: inline-flex; }
[data-theme] select.bot-kit-hover, [data-theme] .bot-kit-hover {
  width: 108px; font-size: 0.7rem; padding: 1px 20px 1px 6px; height: 24px; min-height: 24px;
  background-color: var(--bot-surface-input-bg); color: var(--bot-text-primary);
  border-color: var(--bot-border-default); font-family: var(--bot-font-family);
}

/* ---- information popover (rbas info_popover + .bot-info-popover) ---- */
[data-theme] .popover.bot-kit-popover, [data-theme] .bot-kit-popover {
  --bs-popover-bg: var(--bot-surface-card-bg);
  --bs-popover-border-color: var(--bot-brand-gold);
  --bs-popover-header-bg: var(--bot-surface-card-bg);
  --bs-popover-header-color: var(--bot-brand-navy);
  --bs-popover-body-color: var(--bot-text-primary);
  --bs-popover-max-width: 720px;
  max-width: 720px; width: max-content;
  background: var(--bot-surface-card-bg);
  border: 1px solid var(--bot-brand-gold);
  box-shadow: var(--bot-shadow-dropdown);
}
[data-theme] .bot-kit-popover .popover-header, [data-theme] .bot-kit-popover-head {
  background: var(--bot-surface-card-bg); color: var(--bot-brand-navy);
  font-family: var(--bot-font-family-head); font-weight: 700;
  border-bottom: 2px solid var(--bot-brand-gold);
  display: flex; align-items: center; gap: 8px;
}
.bot-kit-popover-logo { vertical-align: middle; }
[data-theme] .bot-kit-popover .popover-body, [data-theme] .bot-kit-popover-body {
  font-size: 0.86rem; line-height: 1.4; color: var(--bot-text-primary);
  max-height: 70vh; overflow-y: auto; position: relative;
}
.bot-kit-popover .popover-body::before {           /* faint centred logo watermark */
  content: ""; position: absolute; inset: 0;
  background: url("logo/Logo.png") center / 42% no-repeat;
  opacity: .07; pointer-events: none;
}
.bot-kit-popover .popover-body > * { position: relative; }
/* arrow follows the popover colours in every theme (bootstrap 4 + 5 markup) */
[data-theme] .bot-kit-popover .popover-arrow::after, [data-theme] .bot-kit-popover .arrow::after { border-top-color: var(--bot-surface-card-bg); border-bottom-color: var(--bot-surface-card-bg); }
[data-theme] .bot-kit-popover .popover-arrow::before, [data-theme] .bot-kit-popover .arrow::before { border-top-color: var(--bot-brand-gold); border-bottom-color: var(--bot-brand-gold); }

/* ---- fullscreen expand modal (style standard §3.8: navy header band,
   visible close ✕) — works for dbc 1.x (class on .modal-dialog) and 2.x ---- */
[data-theme] .bot-kit-modal .modal-content { background: var(--bot-surface-card-bg); color: var(--bot-text-primary); }
[data-theme] .bot-kit-modal .modal-header {
  background: var(--bot-surface-band-bg); color: var(--bot-text-on-navy);
  border-bottom: 3px solid var(--bot-brand-gold);
}
[data-theme] .bot-kit-modal .modal-title {
  color: var(--bot-text-on-navy); font-family: var(--bot-font-family-head); font-weight: 600;
}
[data-theme] .bot-kit-modal .modal-header .bot-kit-info { color: var(--bot-text-on-navy); }
[data-theme] .bot-kit-modal .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .9; }
[data-theme] .bot-kit-modal .modal-header .close { color: var(--bot-text-on-navy); opacity: .9; text-shadow: none; }
[data-theme] .bot-kit-modal .modal-footer { background: var(--bot-surface-band-bg); color: var(--bot-text-on-navy); border-top: 3px solid var(--bot-brand-gold); }
.bot-kit-modal .bot-kit-modal-graph { height: calc(100vh - 88px); width: 100%; }
.bot-kit-modal .bot-kit-modal-scroll { overflow-y: auto; }

/* ---- KPI tile (rbas _fmt_kpi_card: small uppercase muted label, one
   large bold navy number, short muted context line) ---- */
[data-theme] .bot-kit-kpi .bot-kit-kpi-body { padding: .9rem 1rem; }
[data-theme] .bot-kit-kpi-label {
  text-transform: uppercase; letter-spacing: .06em;
  font-size: var(--bot-font-size-xs); color: var(--bot-text-muted);
  display: flex; align-items: center; gap: 2px; font-family: var(--bot-font-family);
}
[data-theme] .bot-kit-kpi-value {
  color: var(--bot-brand-navy); font-family: var(--bot-font-family);
  font-weight: 700; font-size: var(--bot-font-size-xl); line-height: 1.15;
  margin: 2px 0 1px;
}
[data-theme] .bot-kit-kpi-value.bot-kit-good { color: var(--bot-text-positive); }
[data-theme] .bot-kit-kpi-value.bot-kit-bad { color: var(--bot-text-negative); }
[data-theme] .bot-kit-kpi-sub { color: var(--bot-text-muted); font-size: var(--bot-font-size-sm); font-family: var(--bot-font-family); line-height: 1.35; }
.bot-kit-kpi-spark { height: 46px; width: 100%; margin: 4px 0 0; }

/* ---- pill sub-nav (rbas .nrg-esub-pill: rounded group, solid navy band +
   gold underline when active). !important: bootstrap's .btn-light variant
   otherwise wins, exactly as in rbas. ---- */
.bot-kit-pill-nav { margin-bottom: 1rem; }
[data-theme] .btn.bot-kit-pill {
  background: var(--bot-surface-pill-bg) !important;
  color: var(--bot-brand-navy) !important;
  border: 1px solid var(--bot-border-strong) !important;
  font-weight: 600; font-family: var(--bot-font-family);
  padding: .45rem 1.4rem; border-radius: 999px !important; box-shadow: none !important;
}
[data-theme] .btn-group > .btn.bot-kit-pill:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
[data-theme] .btn-group > .btn.bot-kit-pill:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
[data-theme] .btn.bot-kit-pill:hover { color: var(--bot-text-accent) !important; background: var(--bot-surface-hover-bg) !important; }
[data-theme] .btn.bot-kit-pill.active, [data-theme] .btn.bot-kit-pill.active:hover {
  background: var(--bot-surface-band-bg) !important;
  color: var(--bot-text-on-navy) !important;
  border-bottom: 3px solid var(--bot-brand-gold) !important;
}
[data-theme] .btn.bot-kit-pill:focus-visible { outline: 2px solid var(--bot-border-focus); outline-offset: 1px; }
@media (max-width: 480px) { [data-theme] .btn.bot-kit-pill { padding: .35rem .8rem; font-size: .85rem; } }

/* ---- note lines under a KPI row / card (muted, good, bad) ---- */
[data-theme] .bot-kit-note { color: var(--bot-text-muted); font-size: var(--bot-font-size-sm); font-family: var(--bot-font-family); }
[data-theme] .bot-kit-note-good { color: var(--bot-text-positive); font-size: var(--bot-font-size-sm); font-weight: 600; font-family: var(--bot-font-family); }
[data-theme] .bot-kit-note-bad { color: var(--bot-text-negative); font-size: var(--bot-font-size-sm); font-weight: 600; font-family: var(--bot-font-family); }
/* radio / select controls placed in a card header (extra_controls) */
[data-theme] .bot-kit-card-controls label { color: var(--bot-text-primary); font-family: var(--bot-font-family); font-size: .8rem; font-weight: 400; margin-bottom: 0; }
[data-theme] .bot-kit-card-controls input[type=radio] { margin-right: 4px; accent-color: var(--bot-brand-navy); }

/* ---- buttons (0.3.4; style standard §3.7): primary = the navy band (readable in every theme —
   Bootstrap's .btn-primary on brand.navy is 1.9:1 in dark), outline = secondary actions.
   0.3.5: !important (as the kit pills), so app-level legacy rules such as the RMS
   assets/bot_theme.css `.btn-primary{background:…!important}` cannot beat the kit class. ---- */
[data-theme] .btn.bot-kit-btn-primary, [data-theme] .bot-kit-btn-primary {
  background: var(--bot-surface-band-bg) !important; border: 1px solid var(--bot-surface-band-bg) !important;
  color: var(--bot-text-on-navy) !important; font-family: var(--bot-font-family); font-weight: 600;
}
[data-theme] .btn.bot-kit-btn-primary:hover, [data-theme] .bot-kit-btn-primary:hover, [data-theme] .btn.bot-kit-btn-primary:focus,
[data-theme] .btn.bot-kit-btn-primary:active, [data-theme] .btn.bot-kit-btn-primary.active {
  background: color-mix(in srgb, var(--bot-surface-band-bg) 85%, var(--bot-text-on-navy)) !important;
  border-color: color-mix(in srgb, var(--bot-surface-band-bg) 85%, var(--bot-text-on-navy)) !important;
  color: var(--bot-text-on-navy) !important;
}
[data-theme] .btn.bot-kit-btn-outline, [data-theme] .bot-kit-btn-outline {
  background: transparent !important; border: 1px solid var(--bot-brand-navy) !important;
  color: var(--bot-brand-navy) !important; font-family: var(--bot-font-family); font-weight: 600;
}
[data-theme] .btn.bot-kit-btn-outline:hover, [data-theme] .bot-kit-btn-outline:hover, [data-theme] .btn.bot-kit-btn-outline:focus,
[data-theme] .btn.bot-kit-btn-outline:active {
  background: var(--bot-surface-hover-bg) !important; color: var(--bot-brand-navy) !important; border-color: var(--bot-brand-navy) !important;
}
[data-theme] .btn.bot-kit-btn-primary:focus-visible, [data-theme] .btn.bot-kit-btn-outline:focus-visible {
  outline: 2px solid var(--bot-border-focus); outline-offset: 1px; box-shadow: none !important;
}
[data-theme] .btn.bot-kit-btn-primary:disabled, [data-theme] .btn.bot-kit-btn-outline:disabled {
  opacity: 1 !important; background: var(--bot-surface-input-bg) !important; border-color: var(--bot-border-strong) !important; color: var(--bot-text-muted) !important;
}

/* ---- DataTable filter row inside kit cards (0.3.5): the package's header rule paints the
   filter cells navy too, which left their inputs navy-on-navy; the filter row is an input row ---- */
[data-theme] .bot-kit-card .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter,
[data-theme] .bot-kit-modal .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-filter {
  background: var(--bot-surface-input-bg) !important; color: var(--bot-text-primary) !important;
}
[data-theme] .bot-kit-card .dash-spreadsheet-inner th.dash-filter input,
[data-theme] .bot-kit-modal .dash-spreadsheet-inner th.dash-filter input {
  color: var(--bot-text-primary) !important; background: transparent !important; opacity: 1 !important;
}
[data-theme] .bot-kit-card .dash-spreadsheet-inner th.dash-filter input::placeholder,
[data-theme] .bot-kit-modal .dash-spreadsheet-inner th.dash-filter input::placeholder { color: var(--bot-text-muted) !important; opacity: 1; }

/* ---- stacking (0.3.5): apps may raise .modal above their sidebars (RMS: z-index 20000) — the kit
   information popover (and tooltips) must stay above any modal they are opened from ---- */
.popover.bot-kit-popover { z-index: 20010 !important; }
.bot-kit-modal ~ .tooltip, .modal.show ~ .tooltip { z-index: 20010 !important; }