/* Barra azioni Octopus — razionalizzazione.
 *
 * Riproduce `docs/barra pulsanti octo/recontrol-design-system/project/ui_kits/
 * deskcontrol/razionalizzazione-barra-azioni.html`.
 *
 * Le tre zone del disegno:
 *   1 filtri    — i campi, invariati (cosa vedo)
 *   2 vista     — Filtra, Reset, Preset, conteggi, Watchlist. SEMPRE presente
 *   3 selezione — barra ottanio piena, esiste SOLO con una selezione
 *
 * ⛔ I COLORI NON VENGONO DAI TOKEN DEL PORTALE, e non e' una svista.
 * Nel portale `--ott-base` e' aliasato a `--brand-base`, che vale `#890103` ed
 * e' RIMAPPATO A RUNTIME sul colore del cliente: la barra usciva blu scura
 * perche' seguiva il brand del tenant invece dell'ottanio del disegno. Qui i
 * valori sono quelli del design system, scritti espliciti, perche' questa barra
 * e' un elemento di sistema e non deve cambiare colore col cliente.
 */

.oab {
  /* la scala ottanio del design system (project/tokens/colors.css) */
  --oab-base: #0E3B45;
  --oab-soft: #154C58;
  --oab-deep: #031C23;
  --oab-700: #0F2A33;
  --oab-500: #64748B;
  --oab-400: #94A8B2;
  --oab-300: #CBD5E0;
  --oab-200: #E4E9EF;
  --oab-100: #E8EDF1;
  --oab-50:  #F4F6F9;
  --oab-ink: #0F172A;
  --oab-paper: #FFFFFF;
  --oab-red: #890103;
  --oab-r: 7px;
  --oab-r8: 8px;

  /* Il blocco filtri e' un contenitore flex: senza base 100% la barra si
     infilerebbe in linea accanto ai campi invece di prendersi la sua riga. */
  display: block;
  flex: 1 0 100%;
  width: 100%;
  margin: 10px 0 0;
  font-size: 12.5px;
}

/* ── zona 2 · vista — sempre presente ────────────────────────────────────── */
.oab-vista {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 9px 14px;
  background: var(--oab-paper);
  border: 1px solid var(--oab-200);
  border-radius: var(--oab-r8) var(--oab-r8) 0 0;
}

/* ── zona 3 · selezione — il SOLO blocco pieno della schermata ───────────── */
.oab-sel {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 9px 14px;
  background: var(--oab-base); color: #fff;
  border: 1px solid var(--oab-base);
  border-top: 0;
  border-radius: 0 0 var(--oab-r8) var(--oab-r8);
}
.oab-sel[hidden] { display: none; }
/* senza la barra di selezione, la zona vista chiude da sola */
.oab-sel[hidden] + .oab-nulla,
.oab:has(.oab-sel[hidden]) .oab-vista { border-radius: var(--oab-r8); }

/* ── il bottone ──────────────────────────────────────────────────────────── */
.oab .oab-b {
  height: 32px; padding: 0 13px;
  border-radius: var(--oab-r);
  border: 1px solid var(--oab-200);
  background: var(--oab-paper); color: var(--oab-ink);
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; cursor: pointer;
  line-height: 1;
}
.oab .oab-b:hover { background: var(--oab-50); }
.oab .oab-b--pri { background: var(--oab-base); border-color: transparent; color: #fff; }
.oab .oab-b--pri:hover { background: var(--oab-soft); }
.oab .oab-b--dgr { color: var(--oab-red); }
.oab .oab-b--dgr:hover { background: #fdf2f2; }

/* Un comando non disponibile si vede ma non si clicca: sparire farebbe ballare
   la barra a ogni cambio di selezione, e nessuno imparerebbe dov'e'. */
.oab .oab-b[disabled], .oab .oab-mi[aria-disabled="true"] {
  opacity: .38; cursor: not-allowed; pointer-events: none;
}

/* dentro la barra ottanio i bottoni diventano ghost bianchi trasparenti */
.oab-sel .oab-b {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.oab-sel .oab-b:hover { background: rgba(255,255,255,.18); }
.oab-sel .oab-b--pri { background: #fff; border-color: transparent; color: var(--oab-base); }
.oab-sel .oab-b--pri:hover { background: #eef3f4; }
.oab-sel .oab-b--dgr { background: transparent; border-color: rgba(255,255,255,.22); color: #FFB4B4; }
.oab-sel .oab-b--dgr:hover { background: rgba(255,255,255,.12); }

/* ── separatori, conteggi, icona ─────────────────────────────────────────── */
.oab-div { width: 1px; height: 20px; background: var(--oab-200); margin: 0 4px; flex: none; }
.oab-sel .oab-div { background: rgba(255,255,255,.20); }
.oab-spazio { flex: 1; min-width: 8px; }

.oab-info { font-size: 11.5px; color: var(--oab-500); white-space: nowrap; }
.oab-info b { color: var(--oab-ink); font-weight: 600;
              font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* il conteggio della selezione: una volta sola, ed e' il soggetto della barra */
.oab-selcount {
  font-weight: 700; font-size: 13px; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.oab-selcount em {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-style: normal;
  background: #fff; color: var(--oab-base);
  border-radius: 999px; padding: 2px 9px; font-size: 11.5px;
}

.oab .oab-ib {
  width: 30px; height: 30px; border-radius: var(--oab-r);
  border: 1px solid var(--oab-200); background: var(--oab-paper);
  color: var(--oab-500); display: grid; place-items: center; flex: none;
  cursor: pointer; font-size: 16px; line-height: 1; font-family: inherit;
}
.oab .oab-ib:hover { background: var(--oab-50); }
.oab-sel .oab-ib {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: #fff;
}
.oab-sel .oab-ib:hover { background: rgba(255,255,255,.18); }

/* ── il menu ─────────────────────────────────────────────────────────────── */
.oab-wrap { position: relative; display: inline-flex; }
.oab-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 3000;
  min-width: 250px; background: var(--oab-paper);
  border: 1px solid var(--oab-200); border-radius: var(--oab-r8);
  box-shadow: 0 12px 32px rgba(15,23,42,.18);
  padding: 5px; color: var(--oab-ink);
}
.oab-menu[hidden] { display: none; }
.oab-mi {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 6px;
  font-size: 12px; color: var(--oab-700);
  cursor: pointer; white-space: nowrap;
}
.oab-mi:hover { background: var(--oab-50); }
.oab-msep { height: 1px; background: var(--oab-100); margin: 4px 6px; }

/* ── i comandi del portale adottati dalla barra ──────────────────────────── */
/* Filtra, Reset e Watchlist sono i bottoni ORIGINALI, spostati qui dentro: si
   riveste il loro aspetto senza toccarne il comportamento. */
.oab .btn.btn-compact {
  height: 32px; padding: 0 13px; margin: 0 !important;
  border-radius: var(--oab-r);
  border: 1px solid var(--oab-200);
  background: var(--oab-paper); color: var(--oab-ink);
  font-size: 12.5px; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; gap: 7px;
}
.oab .btn.btn-compact:hover { background: var(--oab-50); }
.oab .btn.btn-compact svg { width: 14px; height: 14px; }
/* la primaria della zona vista e' Filtra, e ce n'e' una sola */
.oab #btnOctDashApply {
  background: var(--oab-base); border-color: transparent; color: #fff;
}
.oab #btnOctDashApply:hover { background: var(--oab-soft); }

/* il pannello dei preset: il div originale continua a rigenerarsi qui dentro */
.oab-preset { padding: 4px; display: flex; flex-direction: column; gap: 6px; }
.oab-preset .octo-dash-preset-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.oab-preset .octo-dash-preset-sel {
  flex: 1 1 100%; height: 30px; border: 1px solid var(--oab-200);
  border-radius: 6px; padding: 0 8px; background: #fff; font-size: 12px;
}
.oab-preset .octo-dash-preset-btn {
  height: 28px; min-width: 34px; padding: 0 9px;
  border: 1px solid var(--oab-200); border-radius: 6px;
  background: #fff; font-size: 12px; cursor: pointer; color: var(--oab-700);
}
.oab-preset .octo-dash-preset-btn:hover:not([disabled]) { background: var(--oab-50); }
.oab-preset .octo-dash-preset-btn[disabled] { opacity: .4; cursor: not-allowed; }
.oab-preset-nota { font-size: 10.5px; color: var(--oab-500); line-height: 1.5; padding: 0 5px 3px; }

.oab svg { flex: none; }