/* ==========================================================================
   The Industry Club — prenotazione colloqui one to one
   Impostazione MOBILE FIRST: le regole base valgono per il telefono, le
   media query aggiungono le varianti per schermi grandi.

   Linguaggio visivo del tema Industry Club: nero pieno, un solo colore
   segnale (#db642d), superfici piatte, filetti da 1px al posto delle ombre,
   carattere Google Sans Flex, titoli maiuscoli. Il contenuto principale e'
   un tabellone di orari: le ore sono grandi, incolonnate e con cifre
   tabulari, cosi' l'occhio scorre gli orari e non i riquadri.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --nero: #000000;
  --nero-2: #0b0b0b;
  --nero-3: #141414;
  --filetto: #242424;
  --filetto-chiaro: #363636;
  --grigio: #8a8a8a;
  --argento: #b8b8b8;
  --bianco: #ffffff;
  --segnale: #db642d;
  --segnale-chiaro: #f0854d;
  --ok: #00e676;

  /* Stesso carattere del tema Calabria Movie / Industry Club */
  --font: 'Google Sans Flex', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --gutter: 1.15rem;
  --tap: 48px;
  --raggio: 12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nero);
  color: var(--argento);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(219, 100, 45, 0.25);
  overflow-x: hidden;
}

a { color: var(--segnale-chiaro); text-decoration: none; }

h1, h2, h3 {
  color: var(--bianco);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}

/* ---------------------------------------------------------------- Testata --
   Compatta e fissa in alto: su un telefono l'header non deve rubare
   verticale ne' andare a capo. */

.ic-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  height: 56px;
  padding: 0 var(--gutter);
  background: var(--nero);
  border-bottom: 1px solid var(--filetto);
}

.ic-header-logo { display: flex; align-items: center; }
.ic-header-logo img { height: 26px; width: auto; display: block; }

/* Sul telefono il logo basta a identificare il sito: la scritta accanto
   comparirebbe troncata, quindi appare solo da 600px in su. */
.ic-header-tag {
  display: none;
  color: var(--grigio);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-left: 0.85rem;
  border-left: 1px solid var(--filetto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ic-header-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 0.7rem;
  border: 1px solid var(--filetto-chiaro);
  color: var(--argento);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ic-header-cta:active { background: var(--segnale); border-color: var(--segnale); color: var(--nero); }
.ic-header-cta .solo-grande { display: none; }

/* ------------------------------------------------------------- Contenuto -- */

.container { padding: 0 0 3rem; }

/* Testata di pagina: titolo + filetto, a tutta larghezza */
.masthead {
  padding: 1.6rem var(--gutter) 1.15rem;
  border-bottom: 1px solid var(--filetto);
}

.masthead .eyebrow {
  display: block;
  color: var(--segnale);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.masthead h1 {
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.masthead .sub {
  color: var(--argento);
  font-size: 0.9rem;
  margin: 0.6rem 0 0;
}

.masthead .meta {
  display: block;
  color: var(--grigio);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 0.85rem;
}

.masthead .meta.chiuso { color: var(--segnale); }

/* Sezione interna con etichetta */
.section { padding: 1.5rem 0 0; }

.section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem var(--gutter) 0.8rem;
  color: var(--grigio);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.section-label .conteggio { color: var(--segnale); }

.vuoto {
  padding: 1.5rem var(--gutter);
  color: var(--grigio);
  border-top: 1px solid var(--filetto);
  border-bottom: 1px solid var(--filetto);
}

/* ------------------------------------------------- Elenco decision maker --
   Su telefono sono righe a tutta larghezza: piu' area toccabile, meno
   incorniciature. */

.dm-list { border-top: 1px solid var(--filetto); }

.dm-row {
  display: block;
  padding: 1.15rem var(--gutter);
  border-bottom: 1px solid var(--filetto);
  color: inherit;
}

.dm-row:active { background: var(--nero-2); }

.dm-row .dm-name {
  display: block;
  color: var(--bianco);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.dm-row .dm-role {
  display: block;
  color: var(--grigio);
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.dm-row .dm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.8rem;
}

.dm-row .dm-avail {
  color: var(--segnale);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dm-row .dm-avail.esaurito { color: var(--grigio); }

.dm-row .dm-go {
  color: var(--bianco);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--segnale);
  padding-bottom: 2px;
}

/* --------------------------------------------------------- Il tabellone --
   Gli orari sono l'interfaccia: colonna rigida, cifre grandi e tabulari.
   Gli slot occupati restano al loro posto, sbarrati. */

.giorno {
  position: sticky;
  top: 56px;
  z-index: 20;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem var(--gutter);
  background: var(--nero);
  border-top: 1px solid var(--filetto);
  border-bottom: 1px solid var(--filetto);
  color: var(--bianco);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.giorno .data { color: var(--segnale); letter-spacing: 0.1em; }

.tabellone {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 84px;
  padding: 0.9rem 0.4rem;
  border-right: 1px solid var(--filetto);
  border-bottom: 1px solid var(--filetto);
  color: var(--bianco);
}

.slot:nth-child(3n) { border-right: 0; }

.slot .ora {
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.slot .durata {
  color: var(--grigio);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Slot libero: tutta la cella e' l'area toccabile */
a.slot { background: var(--nero); }
a.slot::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--segnale);
}
a.slot:active { background: var(--segnale); color: var(--nero); }
a.slot:active .durata { color: var(--nero); }

/* Slot occupato: resta visibile, sbarrato dal filetto segnale */
.slot.occupato { color: var(--grigio); }
.slot.occupato .ora { position: relative; display: inline-block; }
.slot.occupato .ora::after {
  content: '';
  position: absolute;
  left: -6%;
  right: -6%;
  top: 50%;
  height: 1px;
  background: var(--segnale);
}
.slot.occupato .durata { color: #5a5a5a; }

.slot .stato {
  color: var(--segnale);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- Riquadri -- */

.box {
  padding: 1.25rem var(--gutter);
  border-top: 1px solid var(--filetto);
  border-bottom: 1px solid var(--filetto);
  margin-bottom: 1.5rem;
  background: var(--nero-2);
}

.box + .box { margin-top: -1.5rem; border-top: 0; }

.box h3 {
  color: var(--grigio);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Elenco dati: etichetta a sinistra, valore a destra */
.dati { margin: 0; }

.dati div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--filetto);
}

.dati div:last-child { border-bottom: 0; }
.dati dt { color: var(--grigio); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
.dati dd { margin: 0; color: var(--bianco); text-align: right; }
.dati dd strong { color: var(--segnale); font-weight: 700; }

/* -------------------------------------------------------------- Bottoni -- */

.btn,
button,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 1.45rem;
  background: transparent;
  border: 1px solid var(--segnale);
  border-radius: 9999px;
  color: var(--segnale-chiaro);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.btn:active,
button:active { background: var(--segnale); color: var(--nero); }

.btn-pieno,
button[type="submit"].principale {
  background: var(--segnale);
  border-color: var(--segnale);
  color: var(--nero);
  font-weight: 700;
}

.btn-neutro,
button.secondary {
  border-color: var(--filetto-chiaro);
  color: var(--argento);
}

.btn-neutro:active,
button.secondary:active { background: var(--filetto-chiaro); color: var(--bianco); }

.btn-critico,
button.danger {
  border-color: var(--filetto-chiaro);
  color: var(--grigio);
}

.btn-critico:active,
button.danger:active { background: var(--segnale); border-color: var(--segnale); color: var(--nero); }

.btn-blocco { display: flex; width: 100%; }

/* Barra azioni fissa in fondo: il pulsante principale resta sotto il pollice */
.barra-azione {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 0.6rem;
  padding: 0.75rem var(--gutter);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--nero);
  border-top: 1px solid var(--filetto);
}

.barra-azione .btn,
.barra-azione button { flex: 1; }

/* Riga di azioni (pannello admin) */
.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem var(--gutter);
}

.azioni form { display: contents; }
.azioni .btn, .azioni button { flex: 1 1 auto; }

/* --------------------------------------------------------------- Stati --- */

.badge {
  display: inline-block;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--filetto-chiaro);
  border-radius: 9999px;
  color: var(--grigio);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.badge-free { border-color: rgba(0, 230, 118, 0.5); color: var(--ok); }
.badge-booked { border-color: var(--segnale); color: var(--segnale); }

.flashes { list-style: none; padding: 0; margin: 0; }

.flash {
  padding: 0.9rem var(--gutter);
  border-bottom: 1px solid var(--filetto);
  border-left: 3px solid var(--filetto-chiaro);
  background: var(--nero-2);
  color: var(--bianco);
  font-size: 0.85rem;
}

.flash-error { border-left-color: var(--segnale); }
.flash-success { border-left-color: var(--ok); }

small.flash {
  display: block;
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--segnale);
  border-left-width: 3px;
  font-size: 0.72rem;
}

/* ----------------------------------------------------------------- Form -- */

form .field { padding: 0 var(--gutter) 1.25rem; }

form label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--grigio);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="datetime-local"],
form input[type="number"],
form textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 0.7rem 0.85rem;
  background: var(--nero-2);
  border: 1px solid var(--filetto-chiaro);
  border-radius: 10px;
  color: var(--bianco);
  font-family: inherit;
  font-size: 16px; /* sotto i 16px iOS zooma al focus */
  -webkit-appearance: none;
  appearance: none;
}

form input:focus,
form textarea:focus {
  outline: 2px solid var(--segnale);
  outline-offset: -2px;
  border-color: var(--segnale);
}

form textarea { min-height: 120px; resize: vertical; }

form .field-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--tap);
}

form .field-inline label { margin: 0; letter-spacing: 0.12em; }

form input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--segnale);
  flex: 0 0 auto;
}

::placeholder { color: #5a5a5a; }

/* -------------------------------------------------------------- Tabelle --
   Su telefono la tabella diventa un elenco: ogni cella si porta dietro la
   sua etichetta (attributo data-label nel markup). */

.tabella { width: 100%; border-collapse: collapse; }

.tabella thead { display: none; }

.tabella tr {
  display: block;
  padding: 0.9rem var(--gutter);
  border-bottom: 1px solid var(--filetto);
}

.tabella td {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.2rem 0;
  color: var(--bianco);
  font-size: 0.88rem;
}

.tabella td::before {
  content: attr(data-label);
  color: var(--grigio);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.tabella td.azione { justify-content: flex-end; padding-top: 0.7rem; }
.tabella td.azione::before { content: none; }

/* --------------------------------------------------------- Nav pannello -- */

.admin-nav {
  display: flex;
  gap: 1.4rem;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--filetto);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.admin-nav::-webkit-scrollbar { display: none; }

.admin-nav a {
  flex: 0 0 auto;
  padding: 0.95rem 0;
  color: var(--grigio);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}

.admin-nav a.attivo { color: var(--bianco); border-bottom-color: var(--segnale); }

/* Numeri della dashboard */
.numeri {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--filetto);
}

.numeri > div {
  padding: 1.1rem var(--gutter);
  border-right: 1px solid var(--filetto);
  border-bottom: 1px solid var(--filetto);
}

.numeri > div:nth-child(2n) { border-right: 0; }

.numeri .valore {
  display: block;
  font-variant-numeric: tabular-nums;
  color: var(--bianco);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
}

.numeri .etichetta {
  display: block;
  margin-top: 0.35rem;
  color: var(--grigio);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Righe slot del pannello */
.slot-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.9rem var(--gutter);
  border-bottom: 1px solid var(--filetto);
}

.slot-riga .quando {
  color: var(--bianco);
  font-size: 0.95rem;
  font-weight: 500;
  flex: 1 1 100%;
}

.slot-riga .chi { color: var(--grigio); font-size: 0.78rem; flex: 1 1 100%; }
.slot-riga form { display: contents; }
.slot-riga .btn, .slot-riga button { min-height: 40px; font-size: 0.65rem; padding: 0 0.9rem; }

/* --------------------------------------------------------------- Footer -- */

.ic-footer {
  padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--filetto);
  color: #5a5a5a;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.ic-footer a { color: var(--grigio); }

/* Link di ritorno */
.indietro {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin: 0 var(--gutter);
  color: var(--grigio);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ======================================================== Schermi medi === */

@media (min-width: 600px) {
  body { font-size: 16px; }
  :root { --gutter: 2rem; }

  .tabellone { grid-template-columns: repeat(5, 1fr); }
  .slot:nth-child(3n) { border-right: 1px solid var(--filetto); }
  .slot:nth-child(5n) { border-right: 0; }
  .slot { min-height: 96px; }
  .slot .ora { font-size: 1.75rem; }

  .numeri { grid-template-columns: repeat(4, 1fr); }
  .numeri > div:nth-child(2n) { border-right: 1px solid var(--filetto); }
  .numeri > div:last-child { border-right: 0; }

  .masthead h1 { font-size: 2.1rem; }
  .ic-header { height: 64px; }
  .ic-header-logo img { height: 30px; }
  .ic-header-tag { display: block; }
  .ic-header-cta .solo-grande { display: inline; }
}

/* ====================================================== Schermi grandi === */

@media (min-width: 1000px) {
  .ic-header { padding: 0 3rem; }
  .container, .masthead, .section-label, .flash, .dm-row, .giorno,
  .box, .azioni, .slot-riga, .tabella tr, .admin-nav, .barra-azione, form .field {
    padding-left: max(3rem, calc((100vw - 1180px) / 2));
    padding-right: max(3rem, calc((100vw - 1180px) / 2));
  }

  .container { padding-left: 0; padding-right: 0; }
  .masthead { padding-top: 3rem; padding-bottom: 2rem; }
  .masthead h1 { font-size: 2.8rem; }

  .tabellone {
    grid-template-columns: repeat(8, 1fr);
    margin-left: max(3rem, calc((100vw - 1180px) / 2));
    margin-right: max(3rem, calc((100vw - 1180px) / 2));
    border-left: 1px solid var(--filetto);
  }

  .slot:nth-child(5n) { border-right: 1px solid var(--filetto); }
  .slot:nth-child(8n) { border-right: 0; }

  .dm-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-left: max(3rem, calc((100vw - 1180px) / 2));
    margin-right: max(3rem, calc((100vw - 1180px) / 2));
    border-left: 1px solid var(--filetto);
  }

  .dm-row {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-right: 1px solid var(--filetto);
  }

  .dm-row:hover { background: var(--nero-2); }
  a.slot:hover { background: var(--segnale); color: var(--nero); }
  a.slot:hover .durata { color: var(--nero); }
  .btn:hover, button:hover { background: var(--segnale); color: var(--nero); border-color: var(--segnale); }
  .ic-header-cta:hover { background: var(--segnale); border-color: var(--segnale); color: var(--nero); }

  /* Su desktop la tabella torna una tabella */
  .tabella thead { display: table-header-group; }
  .tabella tr { display: table-row; padding: 0; }
  .tabella th {
    padding: 0.8rem 0.75rem;
    color: var(--grigio);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid var(--segnale);
    white-space: nowrap;
  }
  .tabella th:first-child { padding-left: max(3rem, calc((100vw - 1180px) / 2)); }
  .tabella th:last-child { padding-right: max(3rem, calc((100vw - 1180px) / 2)); }
  .tabella td {
    display: table-cell;
    padding: 0.9rem 0.75rem;
    border-bottom: 1px solid var(--filetto);
  }
  .tabella td::before { content: none; }
  .tabella td:first-child { padding-left: max(3rem, calc((100vw - 1180px) / 2)); }
  .tabella td:last-child { padding-right: max(3rem, calc((100vw - 1180px) / 2)); }
  .tabella td.azione { text-align: right; }

  .barra-azione { position: static; border-top: 0; padding-top: 0; }
  .barra-azione .btn, .barra-azione button { flex: 0 0 auto; min-width: 220px; }
  .azioni .btn, .azioni button { flex: 0 0 auto; }
  .box { border: 1px solid var(--filetto); }
  .box + .box { border-top: 1px solid var(--filetto); margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}