/* ========= NFC Pets – Toffee Cream Theme ========= */

/* Font + palette */
:root{
  --cream-50:#FFF8E1;
  --cream-100:#FFECB3;
  --cream-200:#FFE082;
  --amber-300:#FFD54F;
  --amber-400:#FFCA28;
  --amber-500:#FFB300;
  --amber-600:#FF8F00;
  --brown-700:#5D4037;
  --brown-800:#4E342E;
  --brown-900:#3B2E1E;
  --text:#3B2E1E;
  --muted:#6D4C41;
  --radius:12px;
}

/* Reset minimo + altezza piena */
*{box-sizing:border-box}
html,body{margin:0; height:100%;}

/* ✅ FIX 1 — Sfondo anche su html */
html{
  background:linear-gradient(180deg,var(--cream-50) 0%, #FFE0B2 100%);
}

/* ✅ FIX 2 — Altezza adattiva per dispositivi mobili */
body{
  font-family:'Poppins','Comic Sans MS',cursive,sans-serif;
  background:linear-gradient(180deg,var(--cream-50) 0%, #FFE0B2 100%);
  color:var(--text);
  overflow-x:hidden;
  transition:background .4s ease-in-out;

  /* Sticky footer layout */
  display:flex;
  flex-direction:column;
  /* ✅ Fallback multipli: vh, svh e dvh per tutti i browser */
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
}

/* Topbar / navbar */
.topbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--cream-100);
  border-bottom:2px solid var(--amber-300);
  padding:14px 18px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  font-weight:900;
  font-size:1.3rem;
  letter-spacing:.5px;
  color:var(--brown-700);
  animation:brand-float 3s ease-in-out infinite;
}
.brand img{ height:38px; width:auto; display:block; }
@keyframes brand-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.burger{
  background:var(--cream-50);
  border:2px solid var(--amber-500);
  color:var(--brown-700);
  border-radius:10px; padding:8px 12px; cursor:pointer; display:none;
}
.menu{display:flex; gap:14px; align-items:center}
.link{
  color:var(--brown-700); font-weight:600; text-decoration:none;
  padding:8px 12px; border-radius:10px; transition:all .25s ease;
  white-space:normal;
}
.link:hover{ background:var(--amber-300); transform:translateY(-2px) }
.link.active{ background:var(--cream-200); border:1px solid var(--amber-400) }

/* Layout generali */
.container{max-width:960px; margin:clamp(24px,4vw,60px) auto; padding:0 16px}

/* Il contenuto centrale deve riempire l’altezza disponibile */
main{
  max-width:900px;
  margin:60px auto 0;
  padding:20px;
  text-align:center;
  animation:fadeIn 1s ease;
  flex:1 0 auto; /* riempie lo spazio */
}
@keyframes fadeIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:translateY(0)}}

/* Tipografia */
h1{font-size:clamp(1.6rem,2.6vw,2.2rem); color:var(--brown-700); margin:.2em 0; animation:bounce 2.5s infinite alternate}
@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(-5px)}}
h2,h3{color:var(--brown-700); margin:.4em 0}
p{color:var(--muted); font-size:1.05rem}

/* Card / box */
.card,.info{
  background:#FFF3E0;
  border-radius:var(--radius);
  padding:22px;
  border:2px dashed var(--amber-500);
  color:var(--brown-800);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  overflow:hidden;
}
.card.solid{
  background:var(--cream-100);
  border:2px solid var(--amber-300);
}

/* ----- Immagine Pet: ratio-box bulletproof ----- */
.media{
  position:relative;
  width:100%;
  border-radius:calc(var(--radius) - 2px);
  background:#FFFDF6;
  overflow:hidden;
  margin-bottom:16px;
}
.media::before{
  content:"";
  display:block;
  width:100%;
  padding-top:56.25%; /* 16/9 default */
}
.media[data-ratio="1:1"]::before{ padding-top:100%; }
.media[data-ratio="4:3"]::before{ padding-top:75%; }
.media[data-ratio="3:2"]::before{ padding-top:66.67%; }
.media > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* ======= Form di default (mobile-first) ======= */
form{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:24px}
input[type="text"],input[type="email"],input[type="password"],input[type="url"],textarea,select{
  width: min(100%, 360px);
  padding:12px 14px; border-radius:10px;
  border:2px solid var(--amber-500);
  background:var(--cream-50); color:var(--brown-700); font-weight:600;
}
input::placeholder,textarea::placeholder{color:#A1887F}
button,.btn{
  background:linear-gradient(135deg, var(--amber-300), var(--amber-500));
  border:none; padding:12px 20px; border-radius:10px;
  color:var(--brown-700); font-weight:800; cursor:pointer;
  transition:transform .2s, background .3s; box-shadow:0 4px 10px rgba(0,0,0,.08);
  text-decoration:none; display:inline-block;
}
button:hover,.btn:hover{ transform:scale(1.05); background:linear-gradient(135deg, var(--amber-400), var(--amber-600)) }

/* Tabelle */
table{width:100%; border-collapse:collapse; background:#FFFDF6; border:2px solid var(--amber-300); border-radius:12px; overflow:hidden}
th,td{padding:12px; border-bottom:1px solid var(--cream-200); text-align:left; color:var(--brown-900)}
tr:last-child td{border-bottom:0}
.tag{
  display:inline-block; padding:4px 8px; border:1px solid var(--amber-300); border-radius:999px; background:var(--cream-50); color:var(--muted); font-size:.85rem;
  word-break:break-all; overflow-wrap:anywhere;
}

/* Alert */
.alert{background:#FFF4C2; border:2px solid var(--amber-400); color:var(--brown-900); border-radius:10px; padding:12px 14px}
.alert.danger{background:#FFE0E0; border-color:#FF9AA2}
.alert.ok{background:#E6FFDA; border-color:#9BE89A}

/* Footer sticky */
footer{
  text-align:center; color:var(--muted); padding:38px 10px; font-size:.95rem;
  background:var(--cream-100); border-top:2px solid var(--amber-300);
  margin-top:auto; /* spinge il footer in fondo se lo spazio sopra è vuoto */
}

/* ===== Responsive tables ===== */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }

/* --------- Blocchi helper --------- */
.fullrow{ flex-basis:100%; width:100%; }

/* Upload blocco comune (mobile-first) */
.upload-block{ text-align:center; margin-top:6px; }
.upload-block input[type="file"]{
  display:block;
  margin:8px auto 4px;
  width:min(100%,360px);
}
input[type="file"]{
  padding:10px 12px;
  border:2px solid var(--amber-500);
  background:var(--cream-50);
  color:var(--brown-700);
  border-radius:10px;
  font-weight:600;
}
.hint{ display:block; opacity:.8; }

/* ====== Layout form desktop (solo per form con .pet-form) ====== */
.pet-form{
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
  align-items: start;
  max-width: 720px;
  margin: 0 auto;
}
.pet-form input[type="text"],
.pet-form input[type="email"],
.pet-form input[type="password"],
.pet-form input[type="url"],
.pet-form textarea,
.pet-form select { width: 100%; }

/* blocchi a tutta riga nella griglia */
.pet-form .fullrow{ grid-column: 1 / -1; }

/* Upload centrato e coerente in desktop */
.pet-form .upload-block{
  text-align: center;
  margin-top: 6px;
}
.pet-form .upload-block input[type="file"]{
  display:block;
  margin:8px auto 4px;
  width:min(100%, 360px);
  padding:10px 12px;
  border:2px solid var(--amber-500);
  background:var(--cream-50);
  color:var(--brown-700);
  border-radius:10px;
  font-weight:600;
}

/* Checkbox SMARRITO centrata */
.pet-form .lost-row{
  display:flex;
  justify-content:center;
}
.pet-form .lost-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:#C62828;
}
.pet-form .lost-label input[type="checkbox"]{ transform:scale(1.2); }
.pet-form .lost-strong{ text-transform:uppercase; }

/* Pulsanti centrati */
.pet-form .actions-row{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:4px;
}

/* Anteprima immagine centrata (edit) */
.pet-form .preview-row{ text-align:center; }

/* ✅ FIX 3 — Mobile background sicuro */
@supports (-webkit-touch-callout: none) {
  body{
    min-height:-webkit-fill-available;
  }
}

/* ---------- Dettagli Specie/Razza/Sesso ---------- */
/* Desktop: compatto in una riga con separatore "•" */
.pet-details { white-space: normal; }
.pet-details .det { display: inline; }
.pet-details .det .label { font-weight:700; color:var(--brown-700); }
.pet-details .det + .det::before {
  content:" • ";
  color:var(--muted);
  margin:0 4px;
}

/* --- Responsive table: layout a schede sotto i 720px --- */
@media (max-width:720px){
  .burger{display:block}
  .menu{
    display:none; position:absolute; left:0; right:0; top:56px;
    background:var(--cream-100); border-bottom:2px solid var(--amber-300);
    padding:10px 12px; flex-direction:column; align-items:stretch
  }
  .menu.open{display:flex}
  .link{padding:10px 12px}
  .container{padding:0 10px}

  .pet-form{ display:flex; flex-wrap:wrap; gap:10px; }

  /* ====== Tabella a schede ====== */
  table.responsive-table{
    border:0;
    background:transparent;
  }
  table.responsive-table thead{
    display:none;
  }
  table.responsive-table,
  table.responsive-table tbody,
  table.responsive-table tr,
  table.responsive-table td{
    display:block;
    width:100%;
  }
  table.responsive-table tr{
    background:#FFFDF6;
    border:2px solid var(--amber-300);
    border-radius:12px;
    margin-bottom:12px;
    box-shadow:0 4px 10px rgba(0,0,0,.05);
    overflow:hidden;
  }
  table.responsive-table td{
    border:0;
    border-bottom:1px solid var(--cream-200);
    padding:10px 12px;
    display:flex;
    gap:10px;
    align-items:flex-start;
  }
  table.responsive-table tr:last-child td:last-child{
    border-bottom:0; /* sicurezza */
  }
  table.responsive-table td::before{
    content: attr(data-label);
    flex:0 0 44%;
    max-width:44%;
    font-weight:700;
    color:var(--brown-700);
    white-space:nowrap;
  }
  table.responsive-table td:last-child{
    display:block;           /* cella Azioni */
  }
  /* Azioni: vai a capo se serve */
  table.responsive-table td[data-label="Azioni"]{
    display:block;
  }
  table.responsive-table td[data-label="Azioni"] .link,
  table.responsive-table td[data-label="Azioni"] form{
    display:inline-block;
    margin:6px 8px 0 0;
  }

  /* Tag lunghi: evita overflow */
  .tag{
    word-break:break-all;
    overflow-wrap:anywhere;
  }

  /* ✅ Specie/Razza/Sesso: su smartphone, a righe dentro la stessa cella */
  table.responsive-table td.pet-details{
    flex-direction:column;   /* impila i blocchi det uno sotto l'altro */
    align-items:stretch;
  }
  .pet-details .det{
    display:block;
    margin:4px 0;
    line-height:1.25;
  }
  .pet-details .det + .det::before{
    content:none;            /* niente "•" tra le righe su mobile */
  }
  .pet-details .value{
    word-break:break-word;
    overflow-wrap:anywhere;
  }
}

/* === Simboli di genere con sfondo tondo === */
.gender {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1em;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  color: #fff;
  margin-left: 4px;
  vertical-align: middle;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

.gender.male {
  background-color: #1976D2;
}

.gender.female {
  background-color: #E91E63;
}