/* ============================================================
   BACK OFFICE — stile grigio, ispirato al design system Apple.
   Nessun framework: variabili CSS + selettori semplici, coerenti con
   la struttura generata da js/ui/domHelpers.js (el()).
   ============================================================ */

:root{
  --gray-50:  #f5f5f7;
  --gray-100: #ececee;
  --gray-200: #d2d2d7;
  --gray-300: #b8b8bd;
  --gray-500: #86868b;
  --gray-700: #6e6e73;
  --gray-900: #1d1d1f;

  --surface:       #ffffff;
  --surface-alt:   var(--gray-50);
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);

  --text:           var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary:  var(--gray-500);

  --blue:       #0071e3;
  --blue-hover: #0077ed;
  --blue-active:#006edb;

  --blue-soft:  #e8f2fd;
  --green:      #248a3d;
  --green-soft: #e8f8ec;
  --orange:     #b25e00;
  --orange-soft:#fff2e0;
  --purple:     #7d2ae8;
  --purple-soft:#f2e8fd;

  --red:        #d70015;
  --red-hover:  #e0071f;
  --red-soft:   #fff1f0;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 980px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  background:var(--surface-alt);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3{
  font-family:var(--font);
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--text);
  margin:0 0 18px;
}
h1{ font-size:24px; }

p{ color:var(--text-secondary); line-height:1.5; }

/* ============================================================
   TOPBAR
   ============================================================ */
#topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 28px;
  background:rgba(255,255,255,0.8);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:10;
}
#topbarEmail{
  font-size:13px;
  font-weight:500;
  color:var(--text-secondary);
}
#logoutBtn{
  all:unset;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:var(--gray-700);
  padding:7px 16px;
  border-radius:var(--radius-pill);
  background:var(--gray-100);
  transition:background .15s ease;
}
#logoutBtn:hover{ background:var(--gray-200); }

/* ============================================================
   CONTENITORE PRINCIPALE
   ============================================================ */
#app{
  max-width:920px;
  margin:0 auto;
  padding:40px 24px 80px;
}

/* ============================================================
   TABELLE (elenco squadre / stagioni / campionati / rosa)
   ============================================================ */
table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  margin:18px 0;
}
thead th{
  text-align:left;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--text-tertiary);
  background:var(--gray-50);
  padding:12px 16px;
  border-bottom:1px solid var(--border);
}
tbody td{
  padding:13px 16px;
  font-size:16px;
  color:var(--text);
  border-bottom:1px solid var(--border);
}
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--gray-50); }

/* ============================================================
   FORM (login, nuova/modifica squadra, righe "aggiungi")
   ============================================================ */
form{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:460px;
  background:var(--surface);
  padding:28px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}

label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:var(--text-secondary);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"]{
  font-family:var(--font);
  font-size:16px;
  font-weight:400;
  color:var(--text);
  background:var(--surface-alt);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="number"]:focus{
  border-color:var(--blue);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(0,113,227,0.15);
}
input::placeholder{ color:var(--text-tertiary); }

/* Campo password con occhiolino mostra/nascondi */
.password-field{
  position:relative;
  display:flex;
}
.password-field input[type="password"],
.password-field input[type="text"]{
  width:100%;
  padding-right:40px;
}
.password-toggle{
  all:unset;
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  cursor:pointer;
  font-size:15px;
  opacity:0.55;
  transition:opacity .15s ease, background .15s ease;
}
.password-toggle:hover{ opacity:0.85; background:var(--gray-100); }
.password-toggle-active{ opacity:1; }

input[type="color"]{
  width:44px;
  height:34px;
  padding:2px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  cursor:pointer;
}

input[type="checkbox"]{
  width:17px;
  height:17px;
  accent-color:var(--blue);
  cursor:pointer;
}
label:has(input[type="checkbox"]){
  flex-direction:row;
  align-items:center;
  font-weight:500;
  color:var(--text);
}

input[type="file"]{
  font-size:13px;
  color:var(--text-secondary);
}
input[type="file"]::file-selector-button{
  all:unset;
  cursor:pointer;
  font-family:var(--font);
  font-size:13px;
  font-weight:600;
  color:var(--gray-900);
  background:var(--gray-100);
  padding:7px 14px;
  border-radius:var(--radius-pill);
  margin-right:10px;
  transition:background .15s ease;
}
input[type="file"]::file-selector-button:hover{ background:var(--gray-200); }

/* ============================================================
   PULSANTI
   ============================================================ */
button{
  all:unset;
  box-sizing:border-box;
  cursor:pointer;
  font-family:var(--font);
  font-size:13.5px;
  font-weight:600;
  padding:9px 18px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-pill);
  text-align:center;
  transition:background .15s ease, opacity .15s ease, transform .05s ease;
}
button:active{ transform:scale(0.97); }
button:disabled{ opacity:0.45; cursor:not-allowed; transform:none; }

/* Pulsante principale (submit) — blu, come le azioni primarie Apple */
button[type="submit"]{
  background:var(--blue);
  color:#ffffff;
}
button[type="submit"]:hover:not(:disabled){ background:var(--blue-hover); }
button[type="submit"]:active:not(:disabled){ background:var(--blue-active); }

/* Pulsanti secondari (navigazione, azioni non distruttive) */
button[type="button"]{
  background:var(--gray-100);
  color:var(--gray-900);
}
button[type="button"]:hover:not(:disabled){ background:var(--gray-200); }

/* Pulsanti distruttivi (Elimina) — rosso tenue, non urlato */
button.btn-danger{
  background:var(--red-soft);
  color:var(--red);
}
button.btn-danger:hover:not(:disabled){ background:#ffe3e1; }

/* Colori semantici: pulsanti diversi si distinguono a colpo d'occhio
   invece di essere tutti dello stesso grigio generico.
     - btn-nav:     va a un'altra schermata (Stagioni →, Configurazione...)
     - btn-create:  crea/aggiunge qualcosa di nuovo
     - btn-edit:    modifica qualcosa già esistente
     - btn-current: imposta uno stato speciale (stagione corrente) */
button.btn-nav{ background:var(--blue-soft); color:var(--blue); }
button.btn-nav:hover:not(:disabled){ background:#d9ebfc; }

button.btn-create{ background:var(--green-soft); color:var(--green); }
button.btn-create:hover:not(:disabled){ background:#d7f3dd; }

button.btn-edit{ background:var(--orange-soft); color:var(--orange); }
button.btn-edit:hover:not(:disabled){ background:#ffe8c7; }

button.btn-current{ background:var(--purple-soft); color:var(--purple); }
button.btn-current:hover:not(:disabled){ background:#e8d7fc; }

/* ============================================================
   RIGHE AZIONI (dentro le celle tabella, o sopra le liste)
   ============================================================ */
.actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0;
}
tbody .actions{ margin:0; }
.actions input[type="text"]{ flex:1 1 160px; min-width:0; }

/* ============================================================
   ERRORE
   ============================================================ */
.error{
  background:var(--red-soft);
  color:var(--red);
  border:1px solid rgba(215,0,21,0.2);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:13.5px;
  font-weight:500;
  margin-bottom:16px;
}

/* ============================================================
   LOGIN — schermata centrata, come una card isolata
   ============================================================ */
body:has(#loginEmail){
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}
body:has(#loginEmail) #app{
  padding:0;
  max-width:none;
}
body:has(#loginEmail) form{
  width:380px;
  box-shadow:var(--shadow-lg);
}
body:has(#loginEmail) h1{
  font-size:20px;
  text-align:center;
  margin-bottom:6px;
}

/* ============================================================
   ANTEPRIMA LOGO
   ============================================================ */
img[alt="Anteprima logo"]{
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  object-fit:contain;
  background:var(--surface-alt);
  padding:6px;
}
.logo-status{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:#a15c00;
}

/* Pulsante "Importa da JSON" (label che attiva un input file nascosto) */
.import-label{
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  font-size:13.5px;
  font-weight:600;
  color:var(--gray-900);
  background:var(--gray-100);
  padding:9px 18px;
  border-radius:var(--radius-pill);
  transition:background .15s ease;
}
.import-label:hover{ background:var(--gray-200); }

.import-preview{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px;
  margin:10px 0;
  box-shadow:var(--shadow-sm);
}
.import-preview table{ box-shadow:none; margin:10px 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:640px){
  #topbar{ padding:12px 16px; }
  #app{ padding:20px 14px 60px; }

  h1{ font-size:20px; }

  form{ padding:20px; max-width:100%; }
  body:has(#loginEmail) form{ width:100%; max-width:340px; }
  body:has(#loginEmail) #app{ padding:20px; }

  /* Bersagli tocco più generosi: niente pulsanti minuscoli da centrare col dito */
  button{ min-height:44px; padding:10px 18px; }

  .actions{ gap:10px; }
  .actions input[type="text"]{ flex:1 1 100%; }

  /* ---- Tabelle -> elenco di "card", una per riga, niente colonne strette ---- */
  table{ border:none; box-shadow:none; background:transparent; border-radius:0; }
  thead{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap; /* intestazioni ancora presenti per lo screen reader, non a vista */
  }
  tbody, tr{ display:block; width:100%; }
  tbody tr{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    padding:6px 14px;
    margin-bottom:12px;
  }
  tbody tr:hover{ background:var(--surface); }
  td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:10px 0;
    border-bottom:1px solid var(--gray-100);
    text-align:right;
    font-size:14px;
  }
  tr td:last-child{ border-bottom:none; }
  td::before{
    content:attr(data-label);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:var(--text-tertiary);
    text-align:left;
    flex-shrink:0;
  }
  /* La cella "Azioni" impila i pulsanti a piena larghezza invece di
     stiparli in orizzontale: niente più pulsanti illeggibili da 30px. */
  td.actions{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  td.actions::before{ display:none; }
  td.actions button, td.actions input{ width:100%; }
  td.actions input[type="text"]{ margin-bottom:4px; }
}

/* ============================================================
   SeasonConfigView — configurazione zone/pulsanti/moduli di una
   stagione (pulsanti zona/generali, zone campo, moduli tattici).
   ============================================================ */
.config-lock-banner{
  background:#fff6e5;
  border:1px solid #f0d28a;
  border-radius:10px;
  padding:12px 16px;
  font-size:14px;
  color:#8a6100;
  margin-bottom:20px;
}
.config-section{ margin-bottom:28px; }
.config-section h2{ font-size:16px; font-weight:700; margin-bottom:8px; }
.config-hint{ font-size:13px; color:var(--text-tertiary); margin-bottom:10px; }

.config-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
  border-bottom:1px solid var(--gray-100);
}
.config-row:last-child{ border-bottom:none; }
.config-row input[type="text"]{ flex:1; min-width:0; }
.config-row select{ flex:0 0 auto; }
.config-row-add{ border-bottom:none; margin-top:6px; }

.config-chiave{
  font-size:11px;
  font-family:ui-monospace, monospace;
  color:var(--text-tertiary);
  background:var(--gray-100);
  padding:3px 8px;
  border-radius:6px;
  white-space:nowrap;
}

.btn-danger-icon{
  all:unset;
  cursor:pointer;
  width:28px; height:28px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:#c0392b;
  font-weight:700;
}
.btn-danger-icon:hover:not(:disabled){ background:#ffe3e1; }
.btn-danger-icon:disabled{ color:var(--gray-200); cursor:not-allowed; }

.config-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.config-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--gray-100);
  border-radius:16px;
  padding:6px 8px 6px 14px;
  font-size:13px;
  font-weight:600;
}
.config-tag-name{ cursor:pointer; }
.config-tag-name:hover{ text-decoration:underline; }
.config-tag-preferred{
  background:#fff6e0;
  border:1px solid #f0c94d;
  color:#8a6100;
}
.config-tag-remove{
  all:unset;
  cursor:pointer;
  width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:#c0392b;
  font-size:12px;
}
.config-tag-remove:hover{ background:#ffe3e1; }

button.btn-primary{
  background:var(--blue);
  color:#fff;
  border:none;
}
button.btn-primary:hover:not(:disabled){ background:var(--blue-hover); }
button.btn-primary:active:not(:disabled){ background:var(--blue-active); }