/* ==========================================================================
   BOT Atenea BAS — house theme (Rev-2 D), ported from the LIVE cremrkt
   stylesheet (static/crem_ref/bot-theme-crem.css) and re-based to the BAS
   brand: navy #1b2a4a | gold #b8860b | warm off-white #faf8f4.
   Fonts: Georgia serif titles, Arial body (no webfont imports on the Pi).
   Loads after bot_cardkit.css alphabetically, so these :root tokens win.
   ========================================================================== */
/* Tokens now come from the bot_theme PACKAGE (/_bot_theme/bot_tokens.css,
   generated from BOT_Theme/src/bot_theme/tokens/tokens.json) — including
   the legacy --bot-* aliases this file consumes. Defining them here again
   would pin bot-classic values and break dark/light switching. The only
   var kept local is the panel tone the package doesn't alias: */
:root, [data-theme]{
  --bot-navy-panel: var(--bot-brand-navy-dark, #152038);
}

body{ background:var(--bot-gray-bg); color:var(--bot-text);
  font-family:var(--bot-font-body); }
h1,h2,h4,h5{ font-family:var(--bot-font-head); font-weight:600;
  letter-spacing:-.01em; color:var(--bot-navy); }
/* D3: section headers — serif navy with a thick gold left bar */
h3, h4.bot-section{ font-family:var(--bot-font-head); color:var(--bot-navy);
  border-left:4px solid var(--bot-gold); padding-left:.55rem; }

/* ---- D2: card chrome (every panel, app-wide) ----------------------------- */
.card{ border:1px solid var(--bot-border); border-radius:var(--bot-radius-lg);
  box-shadow:var(--bot-shadow-sm); background:var(--bot-bg-card);
  border-top:3px solid var(--bot-gold); }
.card .card-header{ font-family:var(--bot-font-head); font-weight:600; }

/* ---- Buttons ------------------------------------------------------------- */
.btn-primary{ background:var(--bot-navy)!important;
  border-color:var(--bot-navy)!important; }
.btn-primary:hover,.btn-primary:focus{ background:var(--bot-navy-2)!important;
  color:#fff!important; border-color:var(--bot-navy-2)!important; }
.btn-outline-primary{ color:var(--bot-navy)!important;
  border-color:var(--bot-navy)!important; }
.btn-outline-primary:hover, .btn-outline-secondary:hover{
  background:var(--bot-navy)!important; color:#fff!important;
  border-color:var(--bot-navy)!important; }

/* ---- Main tabs: separated folder-style tabs (each one a visible box) ----- */
#tabs .tab{
  border:1px solid var(--bot-border) !important;
  background:var(--bot-bg-subtle) !important;
  color:var(--bot-text-muted) !important; font-weight:600 !important;
  border-radius:6px 6px 0 0 !important;
  margin:0 4px -1px 0 !important;
  padding:8px 14px !important;
  box-shadow:none !important;
  /* aligned, shrink-to-fit tab text — each tab hugs its label, centered */
  display:flex !important; align-items:center !important;
  justify-content:center !important; text-align:center !important;
  white-space:nowrap !important; font-size:.85rem !important;
  line-height:1.2 !important;
  flex:0 1 auto !important; width:auto !important; min-width:0 !important; }
/* let the tab row wrap to a second line instead of squeezing labels */
#tabs .tab-container{ flex-wrap:wrap !important; }
#tabs .tab:hover{ color:var(--bot-navy) !important; background:#fff !important; }
#tabs .tab--selected, #tabs .tab--selected:hover{
  color:var(--bot-navy) !important;
  background:#fff !important;
  border-top:3px solid var(--bot-gold) !important;
  border-bottom-color:#fff !important; }
/* baseline the row of tabs sits on */
#tabs > .tab-container, #tabs .tab-container--vert{
  border-bottom:1px solid var(--bot-border) !important; }

/* ---- D4: KPI stat cards — big navy number, small uppercase gray label ---- */
.card .card-body > .text-secondary{ text-transform:uppercase;
  letter-spacing:.06em; font-size:.72rem; color:var(--bot-text-muted) !important; }
.card .card-body h3{ color:var(--bot-navy); font-family:var(--bot-font-body); }

/* ---- D5: pills — rounded outline, solid navy when active ----------------- */
.nrg-esub-pill{ border-radius:999px !important; }
.nrg-esub-pill:first-child{ border-radius:999px 0 0 999px !important; }
.nrg-esub-pill:last-child{ border-radius:0 999px 999px 0 !important; }

/* ---- D6: tables (visual CREM match; navy header band) -------------------- */
.table thead th{ background:var(--bot-navy); color:#fff;
  font-weight:600; border-color:var(--bot-navy-2); }
.table-striped > tbody > tr:nth-of-type(odd) > *{
  background-color:#fcfaf4; }
.table tbody tr:hover > *{ background-color:var(--bot-bg-subtle); }
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th{
  background-color:var(--bot-navy) !important; color:#fff !important;
  font-weight:600 !important; }
.ag-theme-alpine, .ag-theme-quartz{
  --ag-font-family:var(--bot-font-body);
  --ag-header-background-color:#1b2a4a;
  --ag-header-foreground-color:#ffffff;
  --ag-odd-row-background-color:#fcfaf4;
  --ag-row-hover-color:#f4f0e6;
  --ag-selected-row-background-color:rgba(27,42,74,.08);
  --ag-border-color:#eee9dd;
  --ag-alpine-active-color:#1b2a4a;
  border:1px solid var(--bot-border); border-radius:var(--bot-radius-lg);
  overflow:hidden; }

/* ---- Modals -------------------------------------------------------------- */
.modal-header{ border-bottom:3px solid var(--bot-gold); }
.modal-title{ color:var(--bot-navy); font-family:var(--bot-font-head);
  font-weight:600; }

/* ---- Inputs -------------------------------------------------------------- */
.form-control:focus, .form-select:focus{ border-color:var(--bot-navy);
  box-shadow:0 0 0 3px rgba(27,42,74,.25); }