/* =========================================================================================
   TAB FILTERS — filtri compatti in stile screener (Finviz), tabella dei titoli sotto.
   Vale SOLO dentro #tab-pane-filters.

   - Mini tab in alto: TECHNICALS & SETUPS / STOCK PROFILE / ALL (visibilita' gestita in App.py).
   - Il codice dei filtri e' quello di sempre (righe da due colonne): qui le righe diventano
     "trasparenti" (display: contents) e ogni filtro diventa una cella di una griglia che si
     riempie da sola in base alla larghezza (circa 5 per riga su schermo largo, 1 su telefono).
   - In ogni cella l'etichetta sta A SINISTRA del menu, allineata a destra, come in Finviz.
   ========================================================================================= */

/* --- mini tab dei gruppi ------------------------------------------------------------------ */
#tab-pane-filters .ost-fgrp-bar {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 2px 0 10px;
}
#tab-pane-filters .ost-fgrp-btn {
  background: var(--ost-surface-soft);
  color: var(--ost-muted);
  border: 1px solid var(--ost-table-border);
  margin-left: -1px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 5px 14px;
  cursor: pointer;
}
#tab-pane-filters .ost-fgrp-btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
#tab-pane-filters .ost-fgrp-btn:last-child  { border-radius: 0 6px 6px 0; }
#tab-pane-filters .ost-fgrp-btn:hover { color: var(--ost-text); }
#tab-pane-filters .ost-fgrp-active {
  background: var(--ost-card-bg);
  color: var(--ost-title, #E2B04A);
  border-color: var(--ost-title, #E2B04A);
  position: relative;
  z-index: 1;
}
#tab-pane-filters .ost-fgrp-hidden { display: none; }

/* --- card dei filtri: senza intestazione richiudibile (il gruppo lo sceglie il mini tab) -- */
#tab-pane-filters .ost-fgrp-panel details > summary { display: none; }
#tab-pane-filters .ost-fgrp-panel .card { margin-bottom: 10px !important; }
#tab-pane-filters .ost-fgrp-panel .card-body { padding: 8px 12px 4px !important; }

/* --- griglia dei filtri ------------------------------------------------------------------- */
#tab-pane-filters .ost-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  column-gap: 18px;
  row-gap: 0;
  align-items: center;
}

/* righe e loro contenitori: spariscono come scatole, i filtri salgono di livello */
#tab-pane-filters .ost-filter-grid > .row,
#tab-pane-filters .ost-filter-grid > [id^="advanced-filter-"],
#tab-pane-filters .ost-filter-grid > [id^="advanced-filter-"] > .row,
#tab-pane-filters .ost-filter-grid > div:has(> .row),
#tab-pane-filters .ost-filter-grid > div:has(> .row) > .row {
  display: contents;
}

/* ogni colonna = una cella: etichetta a sinistra, menu a destra (solo le colonne delle righe
   "trasparenti": le righe annidate dentro un filtro restano com'erano) */
#tab-pane-filters .ost-filter-grid > .row:not(.ost-filter-head) > [class*="col"],
#tab-pane-filters .ost-filter-grid > [id^="advanced-filter-"] > .row > [class*="col"],
#tab-pane-filters .ost-filter-grid > div:has(> .row) > .row > [class*="col"] {
  width: auto;
  max-width: none;
  flex: none;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* etichetta: colonna fissa, testo allineato a destra */
#tab-pane-filters .ost-filter-grid > .row:not(.ost-filter-head) > [class*="col"] > :first-child,
#tab-pane-filters .ost-filter-grid > [id^="advanced-filter-"] > .row > [class*="col"] > :first-child,
#tab-pane-filters .ost-filter-grid > div:has(> .row) > .row > [class*="col"] > :first-child {
  flex: 0 0 118px;
  margin-bottom: 0 !important;
  justify-content: flex-end;
  text-align: right;
}
/* menu: occupa il resto della cella */
#tab-pane-filters .ost-filter-grid > .row:not(.ost-filter-head) > [class*="col"] > :not(:first-child),
#tab-pane-filters .ost-filter-grid > [id^="advanced-filter-"] > .row > [class*="col"] > :not(:first-child),
#tab-pane-filters .ost-filter-grid > div:has(> .row) > .row > [class*="col"] > :not(:first-child) {
  flex: 1 1 auto;
  min-width: 0;
}
/* celle con un solo elemento (gli interruttori Day / Swing / Position / Combo): a tutta cella */
#tab-pane-filters .ost-filter-grid > .row:not(.ost-filter-head) > [class*="col"] > :only-child,
#tab-pane-filters .ost-filter-grid > [id^="advanced-filter-"] > .row > [class*="col"] > :only-child,
#tab-pane-filters .ost-filter-grid > div:has(> .row) > .row > [class*="col"] > :only-child {
  flex: 1 1 auto;
  justify-content: space-between;
  text-align: left;
}

/* intestazione della card (descrizione + CLEAR FILTERS): sempre su tutta la riga */
#tab-pane-filters .ost-filter-grid > .row.ost-filter-head {
  display: flex;
  grid-column: 1 / -1;
  margin-bottom: 6px !important;
}
#tab-pane-filters .ost-filter-grid > .row.ost-filter-head > [class*="col"] { margin-bottom: 0; display: block; }
#tab-pane-filters .ost-filter-grid > .row.ost-filter-head > [class*="col"]:first-child { flex: 1 1 auto; }
#tab-pane-filters .ost-filter-grid > .row.ost-filter-head > [class*="col"]:last-child  { flex: 0 0 auto; display: flex; }

#tab-pane-filters .ost-filters-table { margin-top: 6px; }

/* telefono: etichetta sopra il menu, come prima */
@media (max-width: 767.98px) {
  #tab-pane-filters .ost-filter-grid > .row:not(.ost-filter-head) > [class*="col"],
  #tab-pane-filters .ost-filter-grid > [id^="advanced-filter-"] > .row > [class*="col"],
  #tab-pane-filters .ost-filter-grid > div:has(> .row) > .row > [class*="col"] {
    display: block;
  }
  #tab-pane-filters .ost-fgrp-bar { flex-wrap: wrap; }
}

/* --- TECHNICALS & SETUPS: gli interruttori (Day / Combo / Swing / Position / Market context /
   Sector bias) separati dai filtri a menu, su righe proprie. Il contenitore della prima riga di
   interruttori e' "display: contents", quindi il suo ::before diventa una cella a tutta riga:
   fa da intestazione e costringe gli interruttori ad andare a capo. ----------------------- */
#tab-pane-filters #advanced-filter-htf-combo-row::before {
  content: "SETUP TOGGLES";
  grid-column: 1 / -1;
  display: block;
  margin: 6px 0 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ost-table-border);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--ost-muted-2);
}

/* --- Day Tracker: mini tab SESSION DETAIL | LEADERBOARD (stesso stile dei mini tab dei filtri) --- */
.ost-dt-viewbar { display: flex; justify-content: flex-start; gap: 0; margin: 4px 0 12px; }
.ost-dt-viewbar .ost-fgrp-btn {
  background: var(--ost-surface-soft); color: var(--ost-muted);
  border: 1px solid var(--ost-table-border); margin-left: -1px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; padding: 5px 14px; cursor: pointer;
}
.ost-dt-viewbar .ost-fgrp-btn:first-of-type { border-radius: 6px 0 0 6px; margin-left: 0; }
.ost-dt-viewbar .ost-fgrp-btn:last-of-type  { border-radius: 0 6px 6px 0; }
.ost-dt-viewbar .ost-fgrp-btn:hover { color: var(--ost-text); }
.ost-dt-viewbar .ost-fgrp-active {
  background: var(--ost-card-bg); color: var(--ost-title, #E2B04A);
  border-color: var(--ost-title, #E2B04A); position: relative; z-index: 1;
}

/* --- QUICK WATCHLISTS (tab dei filtri, 2026-10-29): bottoni on/off ------------------------ */
#tab-pane-filters .ost-qw-section { margin-bottom: 14px; }
#tab-pane-filters .ost-qw-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#tab-pane-filters .ost-qw-btn {
  background: var(--ost-surface-soft);
  color: var(--ost-muted);
  border: 1px solid var(--ost-table-border);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
#tab-pane-filters .ost-qw-btn:hover { color: var(--ost-text); border-color: var(--ost-muted); }
#tab-pane-filters .ost-qw-active,
#tab-pane-filters .ost-qw-active:hover {
  background: rgba(226, 176, 74, 0.12);
  color: var(--ost-title, #E2B04A);
  border-color: var(--ost-title, #E2B04A);
}