/*
 * Portal 2.0 - tema sopra Bootstrap 5.3.
 * Grigi freddi con l'accento azzurro (petrolio nel tema scuro), bordi sottili, numeri allineati nelle tabelle.
 * Carattere: Inter (vendor/inter-5.3.0, licenza OFL), incluso nel progetto.
 * Due temi, scelti con data-bs-theme="light" | "dark" sull'elemento <html> (vedi theme.js).
 * Le variabili --portal-* sono la fonte unica dei colori: Bootstrap le riceve tramite --bs-*.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../../vendor/inter-5.3.0/inter-latin.260c81a4759b.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../../vendor/inter-5.3.0/inter-latin-ext.1ad231aac0a8.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bs-body-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .75rem;
}

/* Tema chiaro: grigi freddi e accento azzurro. Contrasti verificati (minimo 4.98:1). */
:root,
[data-bs-theme="light"] {
  --portal-bg: #f5f8fa;
  --portal-surface: #ffffff;
  --portal-surface-2: #edf2f5;
  --portal-border: #dbe4ea;
  --portal-text: #172026;
  --portal-muted: #5b6870;           /* 5.7:1 sul bianco */
  --portal-hover: #e6f2f7;           /* azzurro tenue: righe al passaggio del mouse */
  --portal-open: var(--portal-hover);   /* gruppo aperto e sue campagne nella tabella */
  --portal-active: #d7ebf4;          /* voce attiva della sidebar */
  --portal-active-text: #0f5571;     /* 6.7:1 sul suo sfondo */
  --portal-accent: #17739a;          /* azzurro: pulsanti e link (testo bianco 5.3:1) */
  --portal-accent-hover: #115f80;
  --portal-accent-text: #ffffff;
  --portal-accent-rgb: 23, 115, 154;
  --portal-up: #1f7a4d;
  --portal-down: #b3261e;
  --portal-logo: #464646;            /* grigio originale dei loghi SVG */
  --portal-warn: #9a5b00;
  --portal-head: #1f6688;            /* intestazione delle tabelle, testo bianco 6.3:1 */
  --portal-head-text: #ffffff;
  --portal-head-hover: #185774;
  /* colore di ogni metrica (tavolozza verificata per il daltonismo: coppie adiacenti) */
  --m-earnings: #0e9ba7;             /* verde acqua; con il rosso di Cost: CVD 14.7, normale 29.6 */
  --m-cost: #e34948;
  --m-clicks: #008300;
  --m-aclicks: #6250d6;
  --m-conv: #e87ba4;
  --m-pconv: #eda100;
  --m-events: #2a78d6;
  --m-bids: #2a78d6;                 /* Bids & Wins nel grafico: blu e arancione, coppia adiacente della tavolozza */
  --m-wins: #eb6834;
  --m-neutral: #898781;

  --bs-body-bg: var(--portal-bg);
  --bs-body-color: var(--portal-text);
  --bs-border-color: var(--portal-border);
  --bs-secondary-color: var(--portal-muted);
  --bs-link-color: var(--portal-accent);
  --bs-link-hover-color: var(--portal-accent-hover);
  --bs-link-color-rgb: 23, 115, 154;
  --bs-link-hover-color-rgb: 17, 95, 128;
  --bs-focus-ring-color: rgba(var(--portal-accent-rgb), .25);
}

/* Tema scuro: grigio ardesia, intestazioni petrolio, accento azzurro-acqua. Contrasti verificati (minimo 6:1). */
[data-bs-theme="dark"] {
  --portal-bg: #1b1f22;
  --portal-surface: #22272b;
  --portal-surface-2: #2a3035;
  --portal-border: #363d43;
  --portal-text: #e6ecef;
  --portal-muted: #9aa6ad;           /* 6:1 sulla superficie */
  --portal-hover: #24343c;
  --portal-open: #283e49;              /* piu' marcato dell'hover: 9.4:1 con il testo */
  --portal-active: #26414e;
  --portal-active-text: #d8eef6;     /* 9:1 sul suo sfondo */
  --portal-accent: #6fb3c8;          /* azzurro-acqua con testo scuro (7.5:1) */
  --portal-accent-hover: #8cc4d5;
  --portal-accent-text: #0b1b21;
  --portal-accent-rgb: 111, 179, 200;
  --portal-up: #5cc28f;
  --portal-down: #f28b82;
  --portal-logo: #e6ecef;
  --portal-warn: #f0b45a;
  --portal-head: #2a4b5b;            /* petrolio, testo chiaro 8.3:1 */
  --portal-head-text: #e9f4f8;
  --portal-head-hover: #33596c;
  --m-earnings: #169fa9;             /* CVD 10.7, normale 26.6 sul fondo scuro */
  --m-cost: #e66767;
  --m-clicks: #008300;
  --m-aclicks: #9085e9;
  --m-conv: #d55181;
  --m-pconv: #c98500;
  --m-events: #3987e5;
  --m-bids: #3987e5;
  --m-wins: #d95926;
  --m-neutral: #898781;

  --bs-body-bg: var(--portal-bg);
  --bs-body-color: var(--portal-text);
  --bs-border-color: var(--portal-border);
  --bs-secondary-color: var(--portal-muted);
  --bs-link-color: var(--portal-accent);
  --bs-link-hover-color: var(--portal-accent-hover);
  --bs-link-color-rgb: 111, 179, 200;
  --bs-link-hover-color-rgb: 140, 196, 213;
  --bs-focus-ring-color: rgba(var(--portal-accent-rgb), .3);
}

/* iPhone in orizzontale: Safari non ingrandisce il testo da solo (le larghezze delle colonne sono calcolate) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* --- barra in alto ---------------------------------------------------------- */
.portal-nav {
  position: sticky;
  top: 0;
  z-index: 1020;
  padding: .5rem 0;
  background: var(--portal-surface);
  border-bottom: 1px solid var(--portal-border);
}
.portal-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--portal-text);
  text-decoration: none;
}
.portal-brand-name {
  padding-left: .65rem;
  border-left: 1px solid var(--portal-border);
  color: var(--portal-muted);
  font-weight: 600;
}
/* utente: foto (o iniziali se manca) e nome */
.portal-user {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-left: .25rem;
}
.portal-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--portal-surface-2);
  box-shadow: 0 0 0 1px var(--portal-border);
}
.portal-avatar[hidden] { display: none; }
.portal-avatar-initials {
  background: var(--portal-active);
  color: var(--portal-active-text);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.portal-user-name {
  color: var(--portal-text);
  font-size: .875rem;
  font-weight: 500;
}

/* loghi SVG inseriti nella pagina: prendono il colore del testo, quindi seguono il tema */
.portal-logo { display: block; width: 100%; height: 100%; }
.portal-logo-rect,
.portal-logo-square { display: inline-block; color: var(--portal-logo); }
.portal-logo-rect { width: 108px; height: 28px; }
.portal-logo-square { width: 96px; height: 96px; }

/* --- pulsanti ------------------------------------------------------------------ */
.btn-primary {
  --bs-btn-color: var(--portal-accent-text);
  --bs-btn-bg: var(--portal-accent);
  --bs-btn-border-color: var(--portal-accent);
  --bs-btn-hover-color: var(--portal-accent-text);
  --bs-btn-hover-bg: var(--portal-accent-hover);
  --bs-btn-hover-border-color: var(--portal-accent-hover);
  --bs-btn-active-color: var(--portal-accent-text);
  --bs-btn-active-bg: var(--portal-accent-hover);
  --bs-btn-active-border-color: var(--portal-accent-hover);
  --bs-btn-focus-shadow-rgb: var(--portal-accent-rgb);
  font-weight: 500;
}
.portal-icon-btn {
  --bs-btn-color: var(--portal-muted);
  --bs-btn-hover-color: var(--portal-text);
  --bs-btn-hover-bg: var(--portal-hover);
  --bs-btn-active-bg: var(--portal-hover);
  border: 1px solid var(--portal-border);
  padding: .35rem .45rem;
  line-height: 1;
}
.portal-icon-btn .icon-sun { display: none; }
[data-bs-theme="dark"] .portal-icon-btn .icon-sun { display: inline; }
[data-bs-theme="dark"] .portal-icon-btn .icon-moon { display: none; }

/* --- moduli ---------------------------------------------------------------------- */
.form-control {
  background-color: var(--portal-surface);
  border-color: var(--portal-border);
}
.form-control:focus {
  background-color: var(--portal-surface);
  border-color: var(--portal-accent);
  box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}
.form-label {
  font-size: .875rem;
  font-weight: 500;
}

/* --- titoli di pagina e sezioni ----------------------------------------------- */
.portal-section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  font-size: .9375rem;
  font-weight: 600;
}
.badge-sample {
  padding: .1rem .5rem;
  border: 1px solid var(--portal-border);
  border-radius: 999px;
  color: var(--portal-muted);
  font-size: .75rem;
  font-weight: 500;
}

/* --- tabelle ------------------------------------------------------------------------ */
.table-wrap {
  max-height: 70vh;
  overflow: auto;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: .75rem;
}
.table-portal {
  --bs-table-bg: transparent;
  --bs-table-color: var(--portal-text);
  --bs-table-border-color: var(--portal-border);
  margin: 0;
  font-size: .875rem;
}
.table-portal > :not(caption) > * > * {
  padding: .55rem .85rem;
  border-bottom-color: var(--portal-border);
}
.table-portal thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--portal-surface-2);
  color: var(--portal-muted);
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.table-portal tbody tr:last-child > * { border-bottom: 0; }
.table-portal tbody tr:hover > * { background: var(--portal-hover); }
.table-portal .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* .table-portal davanti serve a battere la regola delle celle di Bootstrap, che fissa il colore */
.delta-up,
.table-portal .delta-up { color: var(--portal-up); }
.delta-down,
.table-portal .delta-down { color: var(--portal-down); }

/* --- login ------------------------------------------------------------------------------ */
.login-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
}
.login-card {
  width: 100%;
  max-width: 380px;
  padding: 2rem;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: 1rem;
}
.login-subtitle {
  margin-top: .5rem;
  color: var(--portal-muted);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.login-foot {
  margin-top: 1.25rem;
  color: var(--portal-muted);
  font-size: .8125rem;
}
.login-corner {
  position: fixed;
  top: 1rem;
  right: 1rem;
}

/* --- struttura: barra in alto, sidebar a sinistra, contenuto ------------------- */
:root { --portal-nav-h: 49px; }
.portal-shell {
  display: flex;
  min-height: calc(100vh - var(--portal-nav-h));
}
.portal-sidebar {
  position: sticky;
  top: var(--portal-nav-h);
  flex: 0 0 200px;
  height: calc(100vh - var(--portal-nav-h));
  padding: .75rem .5rem;
  background: var(--portal-surface);
  border-right: 1px solid var(--portal-border);
}
.portal-side-nav { display: flex; flex-direction: column; gap: .15rem; }
.portal-side-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .7rem;
  border-radius: .5rem;
  color: var(--portal-muted);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
}
.portal-side-link:hover { background: var(--portal-hover); color: var(--portal-text); }
.portal-side-link.active { background: var(--portal-active); color: var(--portal-active-text); }
.portal-side-link svg { flex: 0 0 16px; }
/* sidebar ridotta alle icone (pulsante in alto a sinistra): piu' spazio per la tabella */
.portal-sidebar { display: flex; flex-direction: column; }
.portal-side-toggle { margin-top: auto; justify-content: flex-start; border: 0; background: none; width: 100%; }
.portal-side-toggle svg { transition: transform .15s; }
[data-sidebar="rail"] .portal-sidebar { flex-basis: 56px; padding-left: .4rem; padding-right: .4rem; }
[data-sidebar="rail"] .portal-side-link { justify-content: center; padding-left: 0; padding-right: 0; }
[data-sidebar="rail"] .portal-side-link > span { display: none; }
[data-sidebar="rail"] .portal-side-toggle svg { transform: scaleX(-1); }
.portal-main {
  flex: 1;
  min-width: 0;
  padding: 1rem;
}
@media (max-width: 767.98px) {
  .portal-sidebar { display: none; }
}

.form-select {
  background-color: var(--portal-surface);
  border-color: var(--portal-border);
}

/* --- dashboard: barra dei controlli ----------------------------------------------- */
.dash-controls {
  margin-bottom: .4rem;
  padding: .5rem .75rem;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: .75rem;
}
.dash-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .3rem 0;
}
.dash-row + .dash-row { border-top: 1px solid var(--portal-border); padding-top: .55rem; margin-top: .25rem; }
.dash-row-label {
  flex: 0 0 4rem;
  padding-top: .5rem;
  color: var(--portal-muted);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dash-row-body {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  min-width: 0;
}
/* etichetta e controllo sulla stessa riga: "Period [Last 7 days]" */
.dash-field {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}
.dash-field[hidden] { display: none; }
.dash-field > span { color: var(--portal-muted); font-size: .875rem; white-space: nowrap; }
.dash-field .form-select { width: auto; }
.dash-search { flex: 0 1 16rem; min-width: 12rem; }
/* controlli un po' piu' grandi dei "sm" di Bootstrap, piu' piccoli di quelli normali */
.dash-controls .form-select-sm,
.dash-controls .form-control-sm,
.dash-controls .btn-sm {
  padding-top: .34rem;
  padding-bottom: .34rem;
  font-size: .9375rem;
  border-radius: .45rem;
}
.dash-controls .form-select-sm { padding-left: .7rem; padding-right: 2.2rem; background-position: right .6rem center; }
.dash-controls .form-control-sm { padding-left: .7rem; padding-right: .7rem; }
.dash-controls .btn-sm { padding-left: .75rem; padding-right: .75rem; }
.dash-info {
  margin: 0 0 .6rem .25rem;
  color: var(--portal-muted);
  font-size: .8125rem;
}
.dash-info strong { color: var(--portal-text); font-weight: 600; }
.dash-info .dash-info-and { color: var(--portal-muted); }
.dash-col-menu { max-height: 60vh; overflow: auto; font-size: .875rem; }
.dash-export { display: inline-flex; align-items: center; gap: .4rem; }
.dash-col-item { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.dash-col-reset { color: var(--portal-muted); font-size: .8125rem; }

/* --- celle speciali -------------------------------------------------------------------- */
.app-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  vertical-align: middle;
  background: var(--portal-surface-2);
}
.status-pill {
  display: inline-block;
  padding: .05rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
}
.status-active { color: var(--portal-up); background: color-mix(in srgb, var(--portal-up) 14%, transparent); }
.status-paused { color: var(--portal-warn); background: color-mix(in srgb, var(--portal-warn) 16%, transparent); }
.status-archived { color: var(--portal-muted); background: var(--portal-surface-2); }

/* --- riquadri dei numeri (oggi in alto, totali del periodo sotto) --------------------- */
.kpi-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .5rem;
}
.kpi-head h2 { margin: 0; font-size: .9375rem; font-weight: 600; }
.kpi-head span { color: var(--portal-muted); font-size: .8125rem; }
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.kpi-tile {
  padding: .8rem 1rem;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: .75rem;
}
.kpi-tile-ref { background: var(--portal-surface-2); }
.kpi-label { color: var(--portal-muted); font-size: .8125rem; font-weight: 500; }
.kpi-value {
  margin-top: .15rem;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  font-variant-numeric: proportional-nums;
}
.kpi-sub { margin-top: .15rem; color: var(--portal-muted); font-size: .8125rem; }
.kpi-sub + .kpi-sub { margin-top: 0; }
.kpi-sub b { color: var(--portal-text); font-weight: 500; }
.kpi-delta { font-weight: 500; white-space: nowrap; }
.kpi-delta.up { color: var(--portal-up); }
.kpi-delta.down { color: var(--portal-down); }
.kpi-delta.flat { color: var(--portal-muted); }
.totals-row .kpi-value { font-size: 1.25rem; }
/* Compare nei totali: una riga per periodo, con lo stesso delta colorato della tabella */
.kpi-cmp { display: flex; flex-direction: column; gap: .3rem; margin-top: .45rem; }
.kpi-cmp:empty { display: none; }
.kpi-cmp-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .5rem; font-size: .8125rem; }
.kpi-cmp-label { color: var(--portal-muted); white-space: nowrap; }
.kpi-cmp .dpill { flex-direction: row; align-items: baseline; gap: .45rem; min-width: 0; }
#dash-table { min-height: calc(100vh - 70px); }   /* niente salti della pagina mentre la tabella si ricostruisce */
.dash-note { color: var(--portal-warn); font-weight: 500; }

/* --- pastiglie delle metriche nella tabella: fondo tinto del colore della metrica, testo normale --- */
.mpill {
  display: inline-block;
  min-width: 2.5rem;
  padding: .05rem .38rem;
  border-radius: .375rem;
  background: color-mix(in srgb, var(--c) 20%, transparent);
  box-shadow: inset 3px 0 0 var(--c);
  color: var(--portal-text);
  font-weight: 600;
  text-align: right;
}
.mpill.m-neutral { background: var(--portal-surface-2); box-shadow: none; font-weight: 500; }

/* --- grafico ------------------------------------------------------------------------- */
.chart-card {
  margin-bottom: .75rem;
  padding: .75rem 1rem .5rem;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: .75rem;
  transition: opacity .15s;
}
.chart-card.is-loading { opacity: .5; }
.chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .25rem; }
.chart-head h2 { margin: 0; font-size: .9375rem; font-weight: 600; }
.chart-head .form-select { width: auto; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--portal-muted); font-size: .8125rem; }
.chart-legend .key { display: inline-block; width: 14px; height: 2px; margin-right: .35rem; vertical-align: middle; border-radius: 1px; }
.chart-legend b { color: var(--portal-text); font-weight: 600; }
.chart-type { margin-left: auto; }   /* Lines / Columns e Table a destra */
.chart-plot { position: relative; }
.chart-plot svg { display: block; width: 100%; height: 260px; overflow: visible; }
.chart-plot svg:focus { outline: none; }
.chart-plot svg:focus-visible { outline: 2px solid var(--portal-accent); outline-offset: 2px; border-radius: .25rem; }
.chart-axis text, .chart-endlabel { fill: var(--portal-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-endlabel { fill: var(--portal-text); font-weight: 600; }
.chart-paneltitle { fill: var(--portal-muted); font-size: 11px; font-weight: 600; letter-spacing: .03em; }
.chart-grid line { stroke: var(--portal-border); stroke-width: 1; }
.chart-baseline { stroke: var(--portal-muted); stroke-opacity: .5; stroke-width: 1; }
.chart-cross { stroke: var(--portal-muted); stroke-width: 1; }
.chart-band { fill: var(--portal-text); fill-opacity: .06; }
/* Lines / Columns: due pulsanti uniti, quello scelto con il colore della voce attiva */
.chart-type .btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  color: var(--portal-muted);
  font-weight: 500;
}
.chart-type .btn:hover { background: var(--portal-hover); color: var(--portal-text); }
.chart-type .btn[aria-pressed="true"] {
  background: var(--portal-active);
  border-color: var(--portal-active);
  color: var(--portal-active-text);
}
.chart-tip {
  position: absolute;
  z-index: 5;
  min-width: 150px;
  padding: .45rem .6rem;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: .5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  font-size: .8125rem;
  pointer-events: none;
}
.chart-tip .tip-title { margin-bottom: .2rem; color: var(--portal-muted); font-size: .75rem; }
.chart-tip .tip-row { display: flex; align-items: center; gap: .45rem; }
.chart-tip .key { display: inline-block; width: 12px; height: 2px; border-radius: 1px; }
.chart-tip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-tip span.name { color: var(--portal-muted); }
.chart-table { max-height: 260px; overflow: auto; }
.chart-table table { width: 100%; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.chart-table th, .chart-table td { padding: .3rem .6rem; border-bottom: 1px solid var(--portal-border); }
.chart-table th { color: var(--portal-muted); font-weight: 500; }
.chart-table td.num, .chart-table th.num { text-align: right; }

/* --- logo del sistema operativo nella tabella --------------------------------------------- */
.os-cell { display: inline-flex; align-items: center; gap: .4rem; }
.os-icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--portal-text); }

/* --- totali del periodo: il colore della loro metrica (fondo tenue e barretta), testo normale --- */
.kpi-tile-metric {
  background: color-mix(in srgb, var(--c) 9%, var(--portal-surface));
  box-shadow: inset 4px 0 0 var(--c);
}

/* --- barra dei filtri ------------------------------------------------------------------------ */
.dash-filters { gap: .5rem; }
.dash-ms-btn {
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  color: var(--portal-text);
}
.dash-ms-btn:hover { background: var(--portal-hover); color: var(--portal-text); }
.dash-ms-btn.is-active {
  border-color: var(--portal-accent);
  background: color-mix(in srgb, var(--portal-accent) 14%, var(--portal-surface));
  font-weight: 600;
}
.dash-ms-menu { width: 290px; padding: .5rem; }
.dash-ms-list { max-height: 300px; margin-top: .4rem; overflow: auto; }
.dash-ms-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .5rem;
  border-radius: .375rem;
  white-space: normal;
  cursor: pointer;
}
.dash-ms-empty { padding: .4rem .5rem; color: var(--portal-muted); font-size: .875rem; }
.dash-ms-foot { margin-top: .4rem; padding-top: .3rem; border-top: 1px solid var(--portal-border); text-align: right; }
.dash-check { display: inline-flex; align-items: center; gap: .45rem; margin: 0 .25rem; font-size: .9375rem; cursor: pointer; }
.dash-reset { color: var(--portal-accent); }

/* menu a tendina e caselle con i colori del tema */
.dropdown-menu {
  --bs-dropdown-bg: var(--portal-surface);
  --bs-dropdown-border-color: var(--portal-border);
  --bs-dropdown-link-color: var(--portal-text);
  --bs-dropdown-link-hover-bg: var(--portal-hover);
  --bs-dropdown-link-hover-color: var(--portal-text);
  --bs-dropdown-link-active-bg: var(--portal-active);
  --bs-dropdown-link-active-color: var(--portal-active-text);
}
.form-check-input:checked { background-color: var(--portal-accent); border-color: var(--portal-accent); }

/* --- riquadri sopra la tabella: modifica e storico ------------------------------------------------ */
.dash-pop {
  position: absolute;
  z-index: 1080;
  width: 300px;
  max-width: calc(100vw - 16px);
  padding: .75rem;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: .6rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  color: var(--portal-text);
  font-size: .875rem;
}
.dash-hist { width: 360px; }
.pop-title { font-weight: 600; }
.pop-sub { margin-bottom: .55rem; color: var(--portal-muted); font-size: .8125rem; overflow-wrap: anywhere; }
.pop-input, .pop-note { margin-bottom: .45rem; font-size: .9375rem; }
.pop-input { font-variant-numeric: tabular-nums; }
.pop-choices { display: flex; gap: .35rem; margin-bottom: .45rem; }
.pop-choice { flex: 1; border: 1px solid var(--portal-border); background: var(--portal-surface); color: var(--portal-text); }
.pop-choice[aria-checked="true"] { border-color: var(--portal-accent); background: var(--portal-active); color: var(--portal-active-text); font-weight: 600; }
.pop-hint { margin-bottom: .35rem; color: var(--portal-muted); font-size: .8125rem; }
.pop-error { color: var(--portal-down); font-size: .8125rem; }
.pop-error:empty { display: none; }
.pop-actions { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .4rem; }
.hist-list { max-height: 340px; overflow: auto; color: var(--portal-muted); }
.hist-item { padding: .45rem 0; border-top: 1px solid var(--portal-border); color: var(--portal-text); }
.hist-who { display: flex; align-items: center; gap: .4rem; color: var(--portal-muted); font-size: .8125rem; }
.hist-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.hist-user { color: var(--portal-text); font-weight: 600; }
.hist-time { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hist-what { margin-top: .15rem; font-variant-numeric: tabular-nums; }
.hist-note { color: var(--portal-muted); font-style: italic; }

/* avviso dopo una modifica, in basso a destra */
.dash-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1090;
  max-width: min(520px, calc(100vw - 2rem));
  padding: .6rem .85rem;
  border-radius: .5rem;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16), inset 4px 0 0 var(--c, var(--portal-accent));
  font-size: .875rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .15s, transform .15s;
  pointer-events: none;
}
.dash-toast.is-shown { opacity: 1; transform: none; }
.dash-toast.is-ok { --c: #0ca30c; }
.dash-toast.is-warning { --c: #fab219; }
.dash-toast.is-info { --c: var(--portal-muted); }

/* campagna isolata con il pulsante P */
.dash-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .25rem .2rem .6rem;
  border: 1px solid #2a78d6;
  border-radius: 999px;
  background: color-mix(in srgb, #2a78d6 14%, var(--portal-surface));
  font-size: .875rem;
  font-weight: 600;
}
.dash-chip[hidden] { display: none; }
.dash-chip-text { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-chip-x {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--portal-text);
  font-size: 1rem;
  line-height: 1;
}
.dash-chip-x:hover { background: var(--portal-hover); }

/* schermi piccoli: il nome della campagna va a capo quanto serve, per leggerlo tutto */
@media (max-width: 899px) {
  .portal-main { padding: .6rem; }
  .dash-row { flex-direction: column; gap: .35rem; }
  .dash-row-label { padding-top: 0; }
  .cell-clamp, .child-line2 { -webkit-line-clamp: 4; line-clamp: 4; }
}