/* =========================================================
   GT7 Campionato — styles.css (EX NOVO)
   Responsive + Safe-area (status bar / notch / gesture bar)
   Obiettivo: nessun elemento sotto barre di sistema Android.
   ========================================================= */

:root{
  /* Colori */
  --bg: #0b0f18;
  --text: #e8eefc;
  --muted: #93a4c7;
  --border: rgba(255,255,255,.08);

  /* Accenti */
  --accA: rgba(110,231,255,.18);
  --accB: rgba(167,139,250,.14);

  --ok: #7CFF9A;
  --danger: #ff6b6b;

  /* Spaziature responsive */
  --pad: clamp(12px, 2.6vw, 18px);
  --gap: clamp(10px, 2.2vw, 14px);

  /* Safe-area: su device non supportati vale 0 */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  

  /* Fix Android status bar (quando env(safe-area-inset-top) = 0) */
  --statusFix: 0px;
  --safeTop: calc(var(--sat) + var(--statusFix));
  --navFix: 0px;
  --safeBottom: calc(var(--sab) + var(--navFix));
/* Bottom tabs (altezza e padding) */
  --tabsH: clamp(56px, 7vh, 72px);
  --tabsPad: clamp(8px, 1.8vh, 12px);
  --tabsTotal: calc(var(--tabsH) + (var(--tabsPad) * 2));
}

/* Reset */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 600px at 10% -10%, rgba(110,231,255,.18), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(167,139,250,.14), transparent 50%),
    var(--bg);

  /* Edge-to-edge: evita che tocchi angoli */
  padding-left: var(--sal);
  padding-right: var(--sar);
}

/* ---------------------------------------------------------
   Topbar: sempre sotto la status bar
   --------------------------------------------------------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 20;

  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: var(--gap);

  padding-top: calc(var(--pad) + var(--safeTop));
  padding-left: var(--pad);
  padding-right: var(--pad);
  padding-bottom: calc(var(--pad) * .7);

  background: rgba(11,15,24,.74);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.logo{
  overflow: hidden;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: #0b0f18;
  background: linear-gradient(135deg, rgba(110,231,255,.90), rgba(167,139,250,.90));
  flex: 0 0 auto;
}

.logo img{ width:100%; height:100%; object-fit:cover; display:block; }

.title{
  font-weight: 900;
  line-height: 1.05;
}
.subtitle{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.15;
}
.topbar button{ white-space: nowrap; }

/* ---------------------------------------------------------
   Area contenuto: spazio sotto per tabs + gesture bar
   --------------------------------------------------------- */
.app{
  max-width: 980px;
  margin: 0 auto;

  padding-top: var(--pad);
  padding-left: var(--pad);
  padding-right: var(--pad);

  /* IMPORTANTISSIMO: evita elementi sotto la bottom bar */
  padding-bottom: calc(var(--pad) + var(--tabsTotal) + var(--safeBottom));
}

/* ---------------------------------------------------------
   Card / testo
   --------------------------------------------------------- */
.card{
  background: linear-gradient(180deg, rgba(18,26,43,.92), rgba(15,22,38,.92));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: var(--pad);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}

.card + .card{ margin-top: 12px; }

h2{
  margin: 0 0 10px;
  font-size: 16px;
}

.small{
  font-size: 12px;
  color: var(--muted);
}

hr{
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

/* ---------------------------------------------------------
   Form
   --------------------------------------------------------- */
.row{
  display:flex;
  gap: var(--gap);
  flex-wrap: wrap;
  align-items: center;
}
.row > *{
  flex: 1 1 220px;
  min-width: 180px;
}

input, select, textarea{
  width: 100%;
  color: var(--text);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 12px;
  outline: none;
}
textarea{
  min-height: 90px;
  resize: vertical;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
button{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button.primary{
  border-color: rgba(110,231,255,.35);
  background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(167,139,250,.14));
}

button.ghost{ background: transparent; }
button.danger{ border-color: rgba(255,107,107,.35); color: #ffd2d2; }
button.ok{ border-color: rgba(124,255,154,.35); color: #d8ffe4; }

/* ---------------------------------------------------------
   Tabs: sempre sopra gesture bar
   --------------------------------------------------------- */
.tabs{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--poweredGap);
  padding: var(--tabsPad) var(--pad) calc(var(--tabsPad) + var(--safeBottom)) var(--pad);
  background: rgba(12,15,20,.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.08);
  z-index: 20;
}
.tabsRow{
  display: flex;
  gap: 10px;
  justify-content: space-around;
}
.poweredBy{
  height: var(--poweredH);
  line-height: var(--poweredH);
  text-align: center;
  font-size: 11px;
  letter-spacing: .3px;
  color: rgba(255,255,255,.55);
}

.tab{
  flex: 1 1 0;
  min-height: var(--tabsH);
  padding: 12px 8px;
  border-radius: 16px;
}

.tab.active{
  border-color: rgba(110,231,255,.35);
  background: rgba(110,231,255,.08);
}

/* ---------------------------------------------------------
   UI widgets
   --------------------------------------------------------- */
.badge{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  margin-left: 6px;
}

.pill{
  display:inline-block;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255,255,255,.02);
}

.list{
  display:flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
}

.item b{ font-size: 14px; }

.item .meta{
  font-size: 12px;
  color: var(--muted);
}

.item .actions{
  display:flex;
  gap: 8px;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------
   Table
   --------------------------------------------------------- */
.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.table th{
  font-size: 12px;
  color: var(--muted);
  text-align: left;
  padding: 0 8px 6px;
}

.table td{
  padding: 10px 10px;
  background: rgba(255,255,255,.02);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.table tr td:first-child{
  border-left: 1px solid var(--border);
  border-radius: 14px 0 0 14px;
}

.table tr td:last-child{
  border-right: 1px solid var(--border);
  border-radius: 0 14px 14px 0;
}

.table input{
  padding: 10px 10px;
  border-radius: 12px;
}

/* ---------------------------------------------------------
   Notice blocks
   --------------------------------------------------------- */
.notice{
  border: 1px dashed rgba(110,231,255,.35);
  background: rgba(110,231,255,.06);
  border-radius: 16px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
}

.warn{
  border: 1px dashed rgba(255,107,107,.35);
  background: rgba(255,107,107,.06);
  border-radius: 16px;
  padding: 10px 12px;
  color: #ffd2d2;
  font-size: 12px;
}

.code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;

  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
}

/* ---------------------------------------------------------
   Migliorie touch
   --------------------------------------------------------- */
@media (pointer: coarse){
  button, input, select, textarea{ font-size: 16px; } /* evita zoom input su device */
}

/* ---------------------------------------------------------
   Modal (dialog) — responsive + safe-area
   --------------------------------------------------------- */
.modal{
  /* dialog element (#modal ha class="modal") */
  padding: 0;
  border: none;
  background: transparent;
  max-width: 100vw;
}
.modal::backdrop{
  background: rgba(0,0,0,.55);
}

.modalCard{
  width: min(760px, 96vw);

  border: 1px solid var(--border);
  border-radius: 18px;
  padding: var(--pad);

  background: linear-gradient(180deg, rgba(18,26,43,.98), rgba(15,22,38,.98));
  color: var(--text);

  /* FIX: niente popup fuori schermo */
  margin: calc(var(--pad) + var(--safeTop)) var(--pad) calc(var(--pad) + var(--safeBottom)) var(--pad);
  max-height: calc(100dvh - (var(--pad) * 2) - var(--safeTop) - var(--safeBottom));
  overflow: auto;
  overscroll-behavior: contain;
}

.modalActions{
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
  position: sticky;
  bottom: 0;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(18,26,43,0), rgba(18,26,43,.98) 35%);
}



/* GT7 SAFEAREA PATCH */
#bottomTabs, .bottom-tabs, .bottom-bar {
  padding-bottom: calc(var(--safeBottom) + 10px) !important;
}
.page, .screen, .content {
  padding-bottom: calc(var(--safeBottom) + 92px) !important;
}