:root,
[data-bs-theme="light"] {
  --app-bg: linear-gradient(135deg, #f3f7fb 0%, #eef5ef 100%);
  --surface: #ffffff;
  --surface-border: #dce5ee;
  --text-main: #142033;
  --text-soft: #4f6177;
  --brand: #0b5fa5;
  --brand-strong: #08497f;
  --accent: #007c6d;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-soft: 0 10px 24px rgba(11, 95, 165, 0.08);
  --header-bg: rgba(255, 255, 255, 0.9);
  --nav-hover-bg: #e8f2fb;
  --input-border: #cad5e1;
  --thead-bg: #edf3f9;
  --thead-color: #20344f;
  --chip-bg: #eef2f7;
  --surface-soft: #f4f7fb;
  --row-soft: #fbfcfe;
  --attivita-bg: #f7f4fd;
  --bloccato-bg: #fff6f6;
  --lime-bg: radial-gradient(circle at 30% 25%, #f1fbd6 0%, #d3ee98 35%, #9fd35c 72%, #6bb23a 100%);
  --lime-titolo: #1f4d12;
  --lime-motto: #2f6b1c;
  /* Tavolo di Magic: un colore per posto, dorso delle carte e segni sopra le immagini
     (uguali nei due temi: stanno sopra le immagini delle carte). */
  --tv-posto-0: #2f6fc0;
  --tv-posto-1: #b8433f;
  --tv-posto-2: #2f8a50;
  --tv-posto-3: #a5740b;
  --tv-retro-centro: #8a5a2b;
  --tv-retro-bordo: #2b1a0e;
  --tv-segno-bg: rgba(15, 20, 28, 0.85);
  --tv-segno-forte: #0b5fa5;
  --tv-segno-danni: #b02a37;
  --tv-segno-testo: #ffffff;
  --tv-segno-oro: #f3c74b;
  --tv-attacco: #d9480f;
  --tv-blocco: #0c8599;
}

/* Tema scuro: attivo con <html data-bs-theme="dark">, vedi lime/context_processors.py.
   Bootstrap 5.3 adatta da solo i suoi componenti; qui la tavolozza di Lime. */
[data-bs-theme="dark"] {
  --app-bg: linear-gradient(135deg, #0e141c 0%, #0f1a14 100%);
  --surface: #161e29;
  --surface-border: #2a3545;
  --text-main: #e3eaf2;
  --text-soft: #9fb0c3;
  --brand: #4da3e8;
  --brand-strong: #86c1f2;
  --accent: #3cc3a8;
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.35);
  --header-bg: rgba(17, 24, 33, 0.9);
  --nav-hover-bg: #1f2d3e;
  --input-border: #3a4759;
  --thead-bg: #1c2634;
  --thead-color: #d4deea;
  --chip-bg: #222d3b;
  --surface-soft: #1a2330;
  --row-soft: #182029;
  --attivita-bg: #221c33;
  --bloccato-bg: #2e1a1c;
  --lime-bg: radial-gradient(circle at 30% 25%, #35551f 0%, #22401a 40%, #142a10 75%, #0e1f0b 100%);
  --lime-titolo: #cdee8a;
  --lime-motto: #a6d46e;
  --tv-posto-0: #6aa8f0;
  --tv-posto-1: #ef8a85;
  --tv-posto-2: #6cc98d;
  --tv-posto-3: #e3b54f;
  --bs-body-bg: #111821;
  --bs-body-color: #e3eaf2;
  --bs-secondary-bg: #1a2330;
  --bs-tertiary-bg: #1a2330;
  --bs-border-color: #2a3545;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--text-main);
  background: var(--app-bg);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(8px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--surface-border);
}

.app-header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, #4bb543 100%);
}

.brand-name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent);
  padding-left: 0.65rem;
  border-left: 1px solid var(--surface-border);
}

.app-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.dropdown-menu-scroll {
  max-height: 70vh;
  overflow-y: auto;
}

.iso-badge-todo {
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--chip-bg);
  border: 1px solid var(--surface-border);
}

.app-nav a {
  color: var(--text-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  transition: all 0.2s ease;
}

.app-nav a:hover,
.app-nav a:focus-visible {
  color: var(--brand-strong);
  background: var(--nav-hover-bg);
  outline: none;
}

/* Voce di menu con sottomenu a tendina (es. Swarm): stessa "pillola" dei link. */
.app-nav-link {
  color: var(--text-soft);
  background: transparent;
  border: 0;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-nav-link:hover,
.app-nav-link:focus-visible,
.app-nav-link.show {
  color: var(--brand-strong);
  background: var(--nav-hover-bg);
  outline: none;
}

/* Icona davanti al nome di ogni menu, distanziata come quella dell'utente. */
.app-nav > a,
.app-nav .dropdown > .app-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.app-nav .dropdown-menu,
.app-tema .dropdown-menu,
.app-azienda .dropdown-menu,
.app-utente .dropdown-menu {
  min-width: 220px;
  padding: 0.35rem;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.app-nav .dropdown-menu a,
.app-tema .dropdown-item,
.app-azienda .dropdown-item,
.app-utente .dropdown-item {
  display: block;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
}

/* Menu e utente collegato, a destra nell'intestazione. */
.app-header-destra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.app-tema .dropdown-menu {
  min-width: 180px;
}

.app-tema .dropdown-item i {
  margin-right: 0.35rem;
}

/* Azienda e utente sono separati dai menu dei moduli da una riga verticale. */
.app-azienda,
.app-utente {
  margin-left: 0.25rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--surface-border);
}

.app-azienda .dropdown-toggle,
.app-utente .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.app-azienda .dropdown-item i,
.app-utente .dropdown-item i {
  margin-right: 0.35rem;
}

/* Numero nella lista delle aziende oltre la nona (fino alla nona e' un'icona). */
.app-azienda-numero {
  display: inline-block;
  min-width: 1.15em;
  margin-right: 0.35rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1.15em;
  text-align: center;
}

.app-utente .dropdown-toggle span {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La voce scelta (tema, azienda) si evidenzia come le voci dell'intestazione. */
.app-tema .dropdown-item.active,
.app-azienda .dropdown-item.active,
.app-utente .dropdown-item.active {
  color: var(--brand-strong);
  background: var(--nav-hover-bg);
}

.app-tema .dropdown-item,
.app-azienda .dropdown-item,
.app-utente .dropdown-item {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-soft);
}

.app-main {
  padding: 1.1rem 1rem 2rem;
}

.page-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.page-card .card-header {
  background: linear-gradient(135deg, var(--brand), #1098ad);
  color: #fff;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  border: 0;
}

.section-title {
  font-weight: 700;
  margin-bottom: 1rem;
}

.form-label {
  font-weight: 600;
}

.form-control,
.form-select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  border-radius: var(--radius-md);
  border-color: var(--input-border);
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible {
  border-color: #5ea7df;
  box-shadow: 0 0 0 0.2rem rgba(11, 95, 165, 0.18);
}

/* Select2 aligned with Bootstrap input style */
.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--single {
  min-height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background-color: var(--bs-body-bg);
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-main);
  line-height: 1.5;
  padding-left: 0;
  padding-right: 1.25rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #6c757d;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.65rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #6c757d transparent transparent transparent;
}

.select2-container--default .select2-selection--multiple {
  min-height: calc(1.5em + 0.75rem + 2px);
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-radius: 8px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--open.select2-container--default .select2-selection--single {
  border-color: #5ea7df;
  box-shadow: 0 0 0 0.2rem rgba(11, 95, 165, 0.18);
}

.select2-dropdown {
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 18px rgba(20, 32, 51, 0.12);
  overflow: hidden;
}

.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 0.35rem 0.55rem;
}

.select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: #5ea7df;
  box-shadow: 0 0 0 0.12rem rgba(11, 95, 165, 0.15);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--brand);
}

.btn {
  border-radius: 10px;
  font-weight: 600;
}

.table-wrap {
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-border);
  overflow: auto;
}

.table thead th {
  white-space: nowrap;
  font-weight: 700;
  color: var(--thead-color);
  background: var(--thead-bg);
}

.alert {
  border-radius: 10px;
}

.messages-stack {
  margin-bottom: 1rem;
}

/* Swarm Delivery board */
.swarm-board {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.swarm-column {
  flex: 0 0 260px;
  background: var(--surface-soft);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  max-height: 75vh;
}

.swarm-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--surface-border);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.swarm-column-body {
  padding: 0.5rem;
  overflow-y: auto;
}

.swarm-card {
  box-shadow: 0 1px 3px rgba(20, 32, 51, 0.06);
  cursor: grab;
}

.swarm-card:active {
  cursor: grabbing;
}

/* Il drag parte solo dal corpo della card: sui controlli il cursore resta normale. */
.swarm-card a,
.swarm-card button,
.swarm-card select,
.swarm-card .select2 {
  cursor: pointer;
}

.swarm-card--ghost {
  opacity: 0.4;
  border-style: dashed !important;
}

.swarm-card--chosen {
  box-shadow: 0 4px 12px rgba(20, 32, 51, 0.18);
}

.swarm-card--in-aggiornamento {
  opacity: 0.55;
  pointer-events: none;
}

/* Durante il trascinamento le colonne si evidenziano come aree di rilascio. */
.swarm-board--in-drag .swarm-column-body {
  outline: 2px dashed transparent;
  outline-offset: -4px;
  transition: outline-color 0.12s ease-in-out, background-color 0.12s ease-in-out;
}

.swarm-board--in-drag .swarm-column-body:hover {
  outline-color: var(--bs-primary, #0d6efd);
  background-color: rgba(13, 110, 253, 0.04);
}

.attivita-riga {
  background: var(--row-soft);
}

/* Voce di carico che viene dal residuo di un'attivita, non da un task schedulato. */
.workload-task-attivita {
  border-left: 3px solid #6f42c1;
  background: var(--attivita-bg);
}

.attivita-avanzamento {
  height: 1.15rem;
  font-size: 0.72rem;
  font-weight: 600;
}

.attivita-ore {
  height: 0.45rem;
}

/* Barre della sintesi attivita di progetto: una riga per attivita, tutto su una riga. */
.attivita-mini {
  height: 0.35rem;
  margin-top: 0.15rem;
}

.attivita-sintesi td,
.attivita-sintesi th {
  vertical-align: middle;
}

.swarm-board-toasts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1080;
  max-width: min(24rem, calc(100vw - 2rem));
}

.swarm-board-toasts .alert {
  margin-bottom: 0.5rem;
}

.workload-cell {
  display: inline-block;
  min-width: 3.2rem;
  text-align: center;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
}

.workload-grid {
  table-layout: fixed;
}

.workload-grid th,
.workload-grid td {
  vertical-align: top;
}

.workload-grid-persona {
  width: 160px;
  min-width: 160px;
  background: var(--thead-bg);
}

.workload-grid thead th,
.workload-grid tfoot td,
.workload-grid tbody td {
  width: 190px;
  min-width: 190px;
}

.workload-grid .workload-grid-prossima {
  border-left: 2px solid #9db3cd;
}

.workload-grid-cell {
  padding: 0.35rem;
}

.workload-task {
  font-size: 0.75rem;
  line-height: 1.25;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-left: 3px solid #6c8cbf;
  border-radius: 6px;
  padding: 0.25rem 0.35rem;
  margin-top: 0.25rem;
}

.workload-task-bloccato {
  border-left-color: #a10e0e;
  background: var(--bloccato-bg);
}

.workload-libero { background: #eef1f5; color: #4f6177; }
.workload-basso { background: #dff5df; color: #1c6b1c; }
.workload-medio { background: #b8e6ba; color: #1c6b1c; }
.workload-alto { background: #ffe3b3; color: #8a5300; }
.workload-sovraccarico { background: #ffd3d3; color: #a10e0e; border: 1px dashed #a10e0e; }

.submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(20, 32, 51, 0.35);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.submit-overlay.is-visible {
  display: flex;
}

.submit-overlay__card {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  color: var(--text-main);
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
  padding: 0.9rem 1.2rem;
  font-weight: 600;
}

/* Pagine di accesso: il lime a sinistra, il modulo a destra. */
.accesso {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

/* Scelta del tema nelle pagine di accesso, in alto a destra. */
.accesso-tema {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
}

.accesso-lime {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: var(--lime-bg);
  overflow: hidden;
}

.accesso-lime .lime-illustrazione {
  width: min(80%, 460px);
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(31, 77, 18, 0.22));
}

.accesso-lime-testo {
  text-align: center;
  color: var(--lime-titolo);
}

.accesso-lime-testo h1 {
  margin: 1.2rem 0 0.25rem;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.accesso-lime-testo p {
  margin: 0;
  font-weight: 600;
  color: var(--lime-motto);
}

.accesso-pannello {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2.5rem 1.25rem;
  background: var(--surface);
}

.accesso-card {
  width: 100%;
  max-width: 400px;
}

.accesso-titolo {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.accesso-sottotitolo {
  color: var(--text-soft);
  margin-bottom: 1.5rem;
}

.accesso-piede {
  max-width: 400px;
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-soft);
}

.accesso-passi {
  padding-left: 1.2rem;
  margin-bottom: 1.5rem;
}

.accesso-passi li {
  margin-bottom: 0.9rem;
}

.accesso-qr {
  width: 210px;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
}

.accesso-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.accesso-segreto {
  font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.95rem;
  color: var(--text-main);
  letter-spacing: 0.06em;
  word-spacing: 0.25em;
  user-select: all;
}

.campo-codice {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.btn-lime {
  color: #fff;
  background: #4b9a2c;
  border-color: #4b9a2c;
}

.btn-lime:hover,
.btn-lime:focus-visible,
.btn-lime:active {
  color: #fff;
  background: #3d8224;
  border-color: #3d8224;
}

/* Grafico radar della SoA (iso/radar.html): i colori seguono il tema. */
.radar-griglia { stroke: var(--surface-border); }
.radar-etichetta { fill: var(--text-soft); }
.radar-poligono { fill: var(--serie); stroke: var(--serie); }
.radar-legenda {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--serie);
}
.radar-serie-0 { --serie: #0b5fa5; }
.radar-serie-1 { --serie: #007c6d; }
.radar-serie-2 { --serie: #b8860b; }
.radar-serie-3 { --serie: #a4508b; }
.radar-serie-4 { --serie: #c0504d; }
.radar-serie-5 { --serie: #4f6177; }

[data-bs-theme="dark"] .radar-serie-0 { --serie: #5aaef0; }
[data-bs-theme="dark"] .radar-serie-1 { --serie: #3cc3a8; }
[data-bs-theme="dark"] .radar-serie-2 { --serie: #e0b44a; }
[data-bs-theme="dark"] .radar-serie-3 { --serie: #d98bc2; }
[data-bs-theme="dark"] .radar-serie-4 { --serie: #f08a86; }
[data-bs-theme="dark"] .radar-serie-5 { --serie: #a9b8c9; }

/* Pioggia giro per giro (gpro/setup.html): i colori seguono il tema. */
.pioggia-grafico { overflow-x: auto; }
.pioggia-grafico svg { display: block; width: 100%; min-width: 600px; height: auto; }
.pioggia-griglia { stroke: var(--surface-border); }
.pioggia-asse { stroke: var(--text-soft); }
.pioggia-fascia { stroke: var(--text-soft); }
.pioggia-etichetta { fill: var(--text-soft); }
.pioggia-barra { fill: var(--brand); }
.pioggia-previsione { fill: none; stroke: var(--text-main); pointer-events: none; }
.pioggia-zona { fill: transparent; }
.pioggia-giro:hover .pioggia-zona { fill: var(--chip-bg); }
.pioggia-legenda-barra {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  vertical-align: -1px;
  background: var(--brand);
}
.pioggia-legenda-linea {
  display: inline-block;
  width: 20px;
  vertical-align: middle;
  border-top: 2px dashed var(--text-main);
}

/* Tema scuro: classi di Bootstrap che restano chiare anche con data-bs-theme="dark". */
[data-bs-theme="dark"] .text-bg-light {
  color: var(--text-main) !important;
  background-color: var(--chip-bg) !important;
}

[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
  background-color: var(--surface) !important;
}

[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-primary,
[data-bs-theme="dark"] .table-success,
[data-bs-theme="dark"] .table-warning,
[data-bs-theme="dark"] .table-danger {
  --bs-table-color: var(--text-main);
  --bs-table-border-color: var(--surface-border);
  --bs-table-striped-color: var(--text-main);
  --bs-table-active-color: var(--text-main);
  --bs-table-hover-color: var(--text-main);
}

[data-bs-theme="dark"] .table-light { --bs-table-bg: var(--surface-soft); --bs-table-hover-bg: var(--nav-hover-bg); }
[data-bs-theme="dark"] .table-primary { --bs-table-bg: rgba(77, 163, 232, 0.18); --bs-table-hover-bg: rgba(77, 163, 232, 0.26); }
[data-bs-theme="dark"] .table-success { --bs-table-bg: rgba(60, 195, 120, 0.16); --bs-table-hover-bg: rgba(60, 195, 120, 0.24); }
[data-bs-theme="dark"] .table-warning { --bs-table-bg: rgba(255, 193, 7, 0.14); --bs-table-hover-bg: rgba(255, 193, 7, 0.22); }
[data-bs-theme="dark"] .table-danger { --bs-table-bg: rgba(220, 53, 69, 0.2); --bs-table-hover-bg: rgba(220, 53, 69, 0.28); }

/* Tema scuro: Select2 ha i suoi colori chiari scritti nel CSS della libreria. */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple,
[data-bs-theme="dark"] .select2-dropdown,
[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field {
  background-color: var(--bs-body-bg);
  color: var(--text-main);
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option--selected {
  background-color: var(--nav-hover-bg);
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  color: var(--text-main);
  background-color: var(--chip-bg);
  border-color: var(--input-border);
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--text-soft);
}

/* Tema scuro: carichi di lavoro di Swarm. */
[data-bs-theme="dark"] .workload-libero { background: #222c39; color: #9fb0c3; }
[data-bs-theme="dark"] .workload-basso { background: #173522; color: #8edc9b; }
[data-bs-theme="dark"] .workload-medio { background: #1f4a2b; color: #aeeab6; }
[data-bs-theme="dark"] .workload-alto { background: #4a3612; color: #ffd27f; }
[data-bs-theme="dark"] .workload-sovraccarico { background: #4b1b1d; color: #ff9f9f; border-color: #ff9f9f; }
[data-bs-theme="dark"] .workload-task-bloccato { border-left-color: #ff7b7b; }
[data-bs-theme="dark"] .workload-task-attivita { border-left-color: #a58be0; }

@media (max-width: 900px) {
  .accesso {
    grid-template-columns: 1fr;
  }

  .accesso-lime {
    padding: 1.75rem 1rem 1.25rem;
  }

  .accesso-lime .lime-illustrazione {
    width: 150px;
  }

  .accesso-lime-testo h1 {
    margin-top: 0.5rem;
    font-size: 1.8rem;
  }

  .accesso-lime-testo p {
    font-size: 0.85rem;
  }

  .accesso-pannello {
    justify-content: flex-start;
    padding-top: 1.75rem;
  }
}

@media (max-width: 768px) {
  .app-header-inner {
    min-height: 64px;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .app-header-destra {
    width: 100%;
  }

  .app-nav {
    width: 100%;
    padding-bottom: 0.2rem;
  }

  .app-azienda,
  .app-utente {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .app-main {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Magic: immagine della carta, con gli angoli arrotondati come le carte vere. */
.magic-immagine {
  display: block;
  width: 100%;
  max-width: 336px;
  aspect-ratio: 488 / 680;
  border-radius: 4.75% / 3.5%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.magic-immagine--vuota {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 1.5rem;
  text-align: center;
  background: var(--surface-soft);
  border: 1px dashed var(--surface-border);
  box-shadow: none;
}

/* Magic: icona della foto nelle tabelle e anteprima che compare sopra la pagina (js/magic.js). */
.magic-foto {
  padding: 0;
  border: 0;
  background: none;
  line-height: 1;
  color: var(--text-soft);
}

.magic-foto:hover,
.magic-foto:focus-visible {
  color: var(--brand);
}

/* Simbolo del set (SVG di Scryfall) usato come maschera: prende il colore del testo e segue il tema. */
.magic-set {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
}

.magic-set[style] {
  background-color: var(--text-main);
  -webkit-mask: var(--simbolo) center / contain no-repeat;
  mask: var(--simbolo) center / contain no-repeat;
}

.magic-anteprima {
  position: fixed;
  z-index: 1080;
  display: none;
  gap: 8px;
  pointer-events: none;
}

.magic-anteprima.is-visible {
  display: flex;
}

.magic-anteprima img {
  display: block;
  width: min(244px, 44vw);
  aspect-ratio: 488 / 680;
  border-radius: 4.75% / 3.5%;
  background: var(--surface-soft);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* Magic: comandante e controllo Commander nella pagina del mazzo. */
.magic-commander {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--surface-soft);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
}

/* Magic: tavolo di Commander (magic/partita.html, js/tavolo.js).
   Gli avversari in alto, il giocatore in basso con carte piu' grandi, turno, pila e
   registro a destra. La larghezza delle carte (--w) la decide il pannello che le contiene. */
.tavolo {
  --tv-scala: 1;
  --tv-w-avversario: calc(56px * var(--tv-scala));
  --tv-w-mio: calc(80px * var(--tv-scala));
  --tv-w-mano: calc(92px * var(--tv-scala));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-rows: minmax(0, 45fr) minmax(0, 55fr);
  gap: 0.5rem;
  min-height: 560px;
}

.tavolo.is-in-attesa {
  cursor: progress;
}

.tavolo-avversari {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(var(--avversari), minmax(0, 1fr));
  gap: 0.5rem;
  min-height: 0;
}

.tavolo-mio {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  min-height: 0;
}

.tavolo-lato {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  overflow-y: auto;
}

/* Intelligenza artificiale: lavoro in corso, consiglio da eseguire, ultima spiegazione dell'arbitro. */
.tv-ai-lavoro,
.tv-ai-proposta,
.tv-ai-ultima {
  margin-top: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: var(--surface-soft);
}

.tv-ai-proposta {
  border-left: 3px solid var(--brand);
}

.tv-ai-ultima {
  max-height: 9rem;
  overflow-y: auto;
  color: var(--text-soft);
}

.tv-badge-ai {
  background: var(--brand);
  color: var(--surface);
  font-size: 0.65rem;
}

/* La regia: cosa succede adesso, o cosa deve fare chi gioca. */
.tv-regia:empty {
  display: none;
}

.tv-regia {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-left: 3px solid var(--posto, var(--brand));
  border-radius: 8px;
  background: var(--surface-soft);
  font-size: 0.85rem;
}

.tv-regia.is-attesa {
  background: var(--nav-hover-bg);
  font-weight: 600;
}

.tv-regia.is-fine {
  border-left-color: var(--accent);
}

.tv-regia-errore {
  margin-bottom: 0.25rem;
  color: var(--bs-danger);
  font-weight: 600;
}

.tv-modelli-avversari {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.tv-modello-avversario label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.15rem;
}

.tv-ai-avversari summary {
  color: var(--text-soft);
  cursor: pointer;
}

.tv-registro-dettaglio summary {
  color: var(--text-soft);
  cursor: pointer;
}

.tv-registro-dettaglio div {
  color: var(--text-soft);
  white-space: pre-line;
}

.tv-posto-0 { --posto: var(--tv-posto-0); }
.tv-posto-1 { --posto: var(--tv-posto-1); }
.tv-posto-2 { --posto: var(--tv-posto-2); }
.tv-posto-3 { --posto: var(--tv-posto-3); }

.tv-giocatore {
  --w: var(--tv-w-avversario);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-top: 3px solid var(--posto);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tv-giocatore--mio {
  --w: var(--tv-w-mio);
}

.tv-giocatore.is-attivo {
  box-shadow: 0 0 0 2px var(--posto);
}

.tv-giocatore.is-perso {
  opacity: 0.5;
}

.tv-intestazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  padding: 0.3rem 0.5rem;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--surface-border);
}

.tv-nome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.tv-nome .fw-bold {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-pallino {
  display: inline-block;
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--posto);
}

.tv-badge-turno {
  color: var(--surface);
  background: var(--posto);
}

.tv-vita {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}

.tv-vita .btn {
  padding: 0 0.3rem;
  line-height: 1.4;
}

.tv-vita-valore {
  min-width: 3.4rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--text-main);
  font-size: 1.05rem;
  font-weight: 800;
}

.tv-vita-valore .bi {
  color: var(--bs-danger);
  font-size: 0.85rem;
}

.tv-conti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.tv-chip {
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.tv-chip--veleno,
.tv-chip--letale {
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}

.tv-menu-giocatore {
  padding: 0 0.25rem;
  color: var(--text-soft);
}

.tv-mulligan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  background: var(--nav-hover-bg);
  font-size: 0.9rem;
  font-weight: 600;
}

.tv-corpo {
  display: flex;
  flex: 1;
  gap: 0.5rem;
  min-height: 0;
  padding: 0.4rem;
  overflow: auto;
}

.tv-campo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  border-radius: 8px;
}

.tv-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
}

.tv-fila + .tv-fila {
  padding-top: 0.3rem;
  border-top: 1px dashed var(--surface-border);
}

.tv-comando {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 4px;
  border-radius: 8px;
}

.tv-mucchi {
  display: grid;
  flex: none;
  grid-template-columns: repeat(2, auto);
  align-content: start;
  gap: 0.4rem;
}

.tv-mucchio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
  cursor: pointer;
}

.tv-mucchio-conto {
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.tv-mano {
  --w: var(--tv-w-mano);
  display: flex;
  flex: none;
  gap: 4px;
  padding: 0.4rem;
  overflow-x: auto;
  background: var(--surface-soft);
  border-top: 1px solid var(--surface-border);
}

.tv-giocatore:not(.tv-giocatore--mio) .tv-mano {
  --w: var(--tv-w-avversario);
}

.tv-carta {
  position: relative;
  flex: none;
  width: var(--w, 80px);
  aspect-ratio: 488 / 680;
  border-radius: calc(var(--w, 80px) * 0.05);
  background: var(--surface-soft);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease, margin 0.15s ease;
}

.tv-carta img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}

/* Tappata: girata di lato, con lo spazio per non coprire le vicine. */
.tv-carta.is-tappata {
  transform: rotate(90deg);
  margin-inline: calc(var(--w, 80px) * 0.2);
}

.tv-carta:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.tv-carta.is-scelta {
  outline: 3px dashed var(--brand);
  outline-offset: 2px;
}

.tv-carta--retro {
  background: radial-gradient(ellipse at center, var(--tv-retro-centro) 0%, var(--tv-retro-bordo) 75%);
  border: 2px solid var(--tv-retro-bordo);
}

.tv-carta--testo {
  overflow: hidden;
  border: 1px solid var(--surface-border);
}

.tv-carta-testo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 6%;
  color: var(--text-main);
  font-size: calc(var(--w, 80px) * 0.1);
  line-height: 1.15;
}

.tv-carta-nome { font-weight: 700; }
.tv-carta-costo,
.tv-carta-tipo { color: var(--text-soft); }
.tv-carta-tipo { font-style: italic; }
.tv-carta-fc { margin-top: auto; align-self: flex-end; font-weight: 800; }

.tv-segni {
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.tv-segno {
  padding: 0 3px;
  border-radius: 4px;
  background: var(--tv-segno-bg);
  color: var(--tv-segno-testo);
  font-size: max(10px, calc(var(--w, 80px) * 0.12));
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.tv-segno--forte { background: var(--tv-segno-forte); }
.tv-segno--danni { background: var(--tv-segno-danni); }
.tv-segno--comandante { color: var(--tv-segno-oro); }

.tv-segno--alto {
  position: absolute;
  top: 2px;
  right: 2px;
  pointer-events: none;
}

/* Nel combattimento: chi attacca (e chi), chi blocca (e cosa). */
.tv-carta.is-attacca {
  outline: 3px solid var(--tv-attacco);
  outline-offset: 1px;
}

.tv-carta.is-blocca {
  outline: 3px solid var(--tv-blocco);
  outline-offset: 1px;
}

.tv-segno--lotta {
  position: absolute;
  top: 2px;
  left: 2px;
  max-width: calc(100% - 4px);
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Sulla carta tappata (girata di lato) l'etichetta resta orizzontale, al centro. */
.tv-carta.is-tappata .tv-segno--lotta {
  top: 50%;
  left: 50%;
  max-width: calc(var(--w, 80px) * 1.3);
  transform: translate(-50%, -50%) rotate(-90deg);
}

.is-attacca .tv-segno--lotta { background: var(--tv-attacco); }
.is-blocca .tv-segno--lotta { background: var(--tv-blocco); }

/* Aure ed equipaggiamenti spuntano sopra la carta a cui sono agganciati. */
.tv-agganci {
  position: relative;
  padding-top: calc(var(--agganciate) * var(--w, 80px) * 0.22);
}

.tv-carta--agganciata {
  position: absolute;
  top: calc(var(--indice) * var(--w, 80px) * 0.22);
  left: 0;
}

.tv-vuoto {
  padding: 0.25rem;
  color: var(--text-soft);
  font-size: 0.8rem;
}

.tv-vuoto--carta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w, 80px);
  aspect-ratio: 488 / 680;
  border: 1px dashed var(--surface-border);
  border-radius: calc(var(--w, 80px) * 0.05);
  font-size: 0.7rem;
  text-align: center;
}

.tv-zona-bersaglio.is-sopra,
[data-bersaglio-pila].is-sopra {
  background: var(--nav-hover-bg);
  outline: 2px dashed var(--brand);
  outline-offset: -2px;
}

.tv-riquadro {
  padding: 0.5rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
}

.tv-riquadro--registro {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 120px;
}

.tv-turno {
  display: flex;
  flex-direction: column;
}

.tv-fasi {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0.4rem 0;
  padding: 0;
  list-style: none;
}

.tv-fase {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text-soft);
  font-size: 0.7rem;
}

.tv-fase.is-attuale {
  background: var(--brand);
  color: var(--surface);
  font-weight: 700;
}

.tv-pila {
  --w: 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 30vh;
  overflow-y: auto;
}

.tv-pila-voce {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 3px;
  background: var(--surface-soft);
  border-left: 3px solid var(--posto);
  border-radius: 6px;
  cursor: pointer;
}

.tv-pila-voce.is-cima {
  box-shadow: 0 0 0 1px var(--brand);
}

.tv-pila-abilita {
  width: var(--w);
  color: var(--posto);
  font-size: 1.2rem;
  text-align: center;
}

.tv-pila-testo {
  min-width: 0;
}

.tv-registro {
  flex: 1;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  font-size: 0.78rem;
  list-style: none;
}

.tv-registro li {
  margin-bottom: 2px;
  padding: 2px 4px 2px 6px;
  border-left: 3px solid var(--posto, var(--surface-border));
}

.tv-registro-sistema {
  color: var(--text-soft);
  font-style: italic;
}

.tv-menu {
  position: fixed;
  z-index: 1090;
  max-height: 70vh;
  overflow-y: auto;
}

.tv-avviso {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  z-index: 1095;
  max-width: min(36rem, calc(100vw - 2rem));
  padding: 0.55rem 0.9rem;
  background: var(--surface);
  color: var(--text-main);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 1rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tv-avviso.is-visibile {
  opacity: 1;
  transform: translate(-50%, 0);
}

.tv-avviso.is-errore {
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}

.tv-griglia {
  --w: 120px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tv-pedine {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tv-pedina {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100px;
  padding: 4px;
  background: var(--surface-soft);
  color: var(--text-main);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  font-size: 0.75rem;
}

.tv-pedina img {
  width: 100%;
  border-radius: 5px;
}

.tv-anteprima-testo {
  width: min(244px, 44vw);
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.tv-anteprima-testo .tv-carta-testo {
  height: auto;
  padding: 0 0 0.5rem;
  font-size: 0.9rem;
}

@media (max-width: 991.98px) {
  .tavolo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .tavolo-avversari {
    grid-template-columns: minmax(0, 1fr);
  }

  .tavolo-avversari,
  .tavolo-mio,
  .tavolo-lato {
    grid-column: 1;
    grid-row: auto;
  }

  .tv-riquadro--registro {
    max-height: 40vh;
  }
}