/* 
 * File: includes/styles/basic.css
 * Path: /htdocs/includes/styles/basic.css
 * Description: Global foundation for MyDock (vars, reset, header, buttons, forms,
 *              schedule, profile, crew, bottom nav). Page-specific styling can
 *              still live inline inside each PHP page.
 */
/* ========== VARIABLES (toon) ========== */
/* assets/css/base.css */
:root{
  --navy:#032B44;
  --navy-2:#0A4C73;
  --surface:#F6F7FB;        /* chiaro freddo */
  --ink:#0c2740;            /* testo scuro morbido */
  --accent:#4A6FA5;         /* azzurro marina */
  --accent-2:#F4B400;       /* giallo boe/corde */
  --ok:#2bb673;
  --radius:12px;            /* più rotondo = più cartoon */
  --radius-lg:18px;
  --stroke:#072f4f;         /* contorno stile vignetta */
  --shadow:0 6px 14px rgba(7,47,79,0.18);
}

/* ========== RESET ========== */
*{ box-sizing:border-box; }
html, body{
  margin:0;
  padding:0;
  background:var(--surface);
  color:var(--ink);
  font:16px/1.55 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}

/* ========== HEADER (logo left + login/logout right) ========== */
.app-header{
  background:var(--navy);
  color:#fff;
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 0 #001b2b;
  border-bottom:4px solid #001b2b;
}
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
  padding:.8rem 1rem;
}
.brand-left{
  display:flex; align-items:center; gap:.5rem;
}
.logo-mini{ height:48px; width:auto; display:block; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.wordmark-mini{
  font-family:'Ubuntu', sans-serif; font-weight:700; font-size:1.4rem; color:#fff; letter-spacing:.02em;
}
/* ========== HEADER BUTTONS (login / logout) ========== */
.user-controls { 
  display:flex; align-items:center; gap:.6rem; 
}

.btn-login,
.btn-logout {
  display:inline-block;
  border-radius:999px;
  font-family:'Ubuntu',sans-serif;
  font-weight:700;
  font-size:.95rem;
  padding:.55rem 1.1rem;
  border:3px solid var(--stroke);
  box-shadow:0 3px 0 #001b2b;
  cursor:pointer;
  text-decoration:none;
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease;
  min-width:110px;             /* garantisce stessa base */
  text-align:center;
  color:#fff;
}

/* Login button */
.btn-login {
  background:var(--ok);
  border-color:var(--stroke);
}
.btn-login:hover {
  background:#22a965;
  transform:translateY(-1px);
}

/* Logout button */
.btn-logout {
  background:#F24C3D;
  border-color:#550d0d;
}
.btn-logout:hover {
  background:#d53c30;
  transform:translateY(-1px);
}

/* Pressed effect */
.btn-login:active,
.btn-logout:active {
  transform:translateY(1px);
  box-shadow:0 1px 0 #001b2b;
}

/* ========== MAIN ========== */
.app-main{ max-width:520px; margin:auto; padding:1rem; }

/* TITOLI */
h1,h2,h3{
  font-family:'Ubuntu', sans-serif; color:var(--ink);
  margin:.8rem 0 .4rem; font-weight:700; letter-spacing:.02em;
}
h1{ font-size:1.7rem; } h2{ font-size:1.4rem; } h3{ font-size:1.15rem; }

/* === Next 7 days: keep everything on one line, no overflow === */
/* === Next 7 days: una riga, niente overflow, font un filo più piccolo === */
.result-card .row{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:nowrap;          /* niente a capo */
  padding:.35rem 0;          /* mantieni il padding della vecchia regola */
}

/* testo a sinistra: si restringe e fa ellipsis */
.result-card .row .ev-text,
.result-card .row > span:first-child{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* badge orario a destra: non cresce oltre */
.result-card .row .time-chip,
.result-card .row .chip{
  flex:0 0 auto;
  white-space:nowrap;
  max-width:48%;             /* evita che sbordi su schermi piccoli */
}

/* micro-tuning telefoni stretti */
@media (max-width: 420px){
  .result-card .row{ gap:.5rem; }
  .result-card .row .time-chip,
  .result-card .row .chip{
    font-size:.85rem;        /* più piccolo per stare in linea */
    padding:.26rem .58rem;
    max-width:46%;
  }
}

/* ultra-stretto */
@media (max-width: 360px){
  .result-card .row .time-chip,
  .result-card .row .chip{
    font-size:.8rem;
    padding:.22rem .55rem;
    max-width:50%;
  }
}

/* un filo di respiro interno per non “toccare” il bordo */
.result-card{ padding-right:.8rem; }
/* ========== FORM ========== */
label{ display:block; font-family:'Ubuntu',sans-serif; font-weight:700; margin:.35rem 0 .2rem; }
input,select{
  width:100%; padding:.7rem .8rem; border-radius:var(--radius);
  border:3px solid var(--stroke); background:#fff; font-family:'Ubuntu',sans-serif; font-size:1rem;
  box-shadow:0 3px 0 #c5d1dc inset;
  transition:transform .05s ease, box-shadow .15s ease, border-color .2s ease;
}
input:focus,select:focus{
  outline:none; border-color:var(--navy-2);
  box-shadow:0 0 0 3px rgba(74,111,165,.18), 0 3px 0 #c5d1dc inset;
}

/* Focus accessibile */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px; border-radius:8px;
}

/* ========== BUTTONS bubble ========== */
.btn{
  display:block; width:100%; padding:1rem; border-radius:999px;
  font-family:'Ubuntu',sans-serif; font-weight:700; text-align:center;
  color:#fff; background:var(--navy); border:3px solid var(--stroke);
  cursor:pointer; box-shadow:0 6px 0 #001b2b;
  transition:transform .08s ease, box-shadow .08s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(2px); box-shadow:0 2px 0 #001b2b; }
.btn.ghost{ background:#fff; color:var(--navy); border:3px solid var(--stroke); }
.btn.ghost:hover{ background:#eaf1fb; }

/* CTA row */
.cta-row{ display:flex; flex-direction:column; gap:.7rem; margin:1rem 0; }

/* Result list */
.result-card .row{ display:flex; justify-content:space-between; padding:.35rem 0; }
.result-card hr{ border:0; border-top:3px dashed var(--stroke); margin:.6rem 0; }
.result-card .total{ font-weight:700; }

/* ========== HERO ========== */
.hero-card{
  background:#fff; border:3px solid var(--stroke);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  overflow:hidden; margin:.5rem 0 1rem;
}
.hero-img{ display:block; width:100%; height:auto; }

/* ========== STORY CARD (landing) ========== */
.story-card{
  background:#fff; border:3px solid var(--stroke);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:1.2rem 1.4rem; margin:1.2rem 0; line-height:1.7;
  font-family:'Ubuntu',sans-serif; color:var(--ink); position:relative; overflow:hidden;
}
.story-card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:8px;
  background:linear-gradient(90deg,var(--accent) 0%, var(--accent-2) 100%);
  border-bottom:3px solid var(--stroke);
}
.story-card h3{ font-weight:700; color:var(--navy); font-size:1.3rem; margin:.6rem 0; }
.story-card p{ margin:.6rem 0; font-size:1rem; color:var(--ink); text-align:justify; }
@keyframes float-shadow{ 0%,100%{ box-shadow:0 6px 14px rgba(7,47,79,0.18);} 50%{ box-shadow:0 8px 18px rgba(7,47,79,0.25);} }
.story-card:hover{ animation:float-shadow 3s ease-in-out infinite; transform:translateY(-1px); transition:transform .2s ease; }
.story-card .footnote{
  margin-top:1rem; padding-top:.6rem; border-top:2px dashed var(--stroke);
  font-size:.85rem; color:var(--navy-2); font-weight:500; text-align:center; opacity:.9; letter-spacing:.02em;
}
.story-card .footnote::before{ content:"~ "; }
.story-card .footnote::after{ content:" ~"; }

/* ========== FLASH ======== */
.flash{
  margin:.8rem 0; padding:.8rem 1rem;
  border:3px solid var(--stroke); border-radius:var(--radius);
  box-shadow:var(--shadow); background:#fff; font-weight:700;
}
.flash.ok{ border-color:#196c3f; } .flash.err{ border-color:#8b1d1d; }

/* Honeypot antispam (campo trappola) */
.hp-field{
  position:absolute !important; left:-9999px !important;
  height:0 !important; width:1px !important; overflow:hidden !important; opacity:0 !important;
}

/* ========== WELCOME PROFILE ======== */
/* ========== PROFILE FRAME (make same width as cards) ========== */
.profile-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 3px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.4rem;
  margin: 1rem auto;
  width: 100%;           /* stessa larghezza delle .card */
  max-width: none;       /* rimuove il limite di 280px */
}

.profile-name {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 1.15rem;
  margin-top: .4rem;
}

.profile-pic{
  width:80px; height:80px; border-radius:50%; border:3px solid var(--stroke);
  object-fit:cover; margin-bottom:.6rem;
}

/* === ALTEZZA NAV BOTTOM UNIFICATA === */
:root{
  /* ...le tue variabili... */
  --bottom-nav-h: 64px; /* altezza reale della nav */
}

/* RESET / BODY */
html, body{
  margin:0;
  padding:0;
  background:var(--surface);
  color:var(--ink);
  font:16px/1.55 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  /* Spazio in fondo per NON far coprire i contenuti dalla bottom-nav */
  min-height: 100vh;
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}

/* ========== BOTTOM NAV (sticky sempre in fondo) ========== */
.bottom-nav {
  position: fixed; inset-inline: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4,1fr);
  background: #ffffff; border-top: 1px solid #E5E7EB; padding: .35rem .5rem;
}
.nav-item { display:flex; flex-direction:column; align-items:center; gap:.15rem; text-decoration:none; color:#475569; padding:.35rem 0; }
.nav-item .nav-icon { width:24px; height:24px; display:grid; place-items:center; }
.nav-item .nav-icon svg { width:24px; height:24px; }
.nav-item.active { color:#2563EB; }
.nav-item:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; border-radius:.5rem; }

/* ========== LAST SEEN STYLE ========== */
.profile-lastseen {
  display: inline-block;
  margin-top: .4rem;
  padding: .25rem .8rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy-2);
  background: linear-gradient(90deg, #e9f1f9 0%, #f7f9fc 100%);
  border: 2px solid var(--stroke);
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(7,47,79,0.2);
  text-shadow: 0 1px 0 #fff;
  letter-spacing: .02em;
  transition: transform .2s ease, box-shadow .2s ease;
}

.profile-lastseen:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 rgba(7,47,79,0.25);
}


/* --- Uniform card width within .app-main --- */
.app-main { max-width: 520px; padding: 1rem; }
.card, .result-card, .profile-frame { width: 100%; margin-left: auto; margin-right: auto; }

/* --- Hide/show helpers --- */
.is-hidden{ display:none !important; }

/* --- Avatar trigger and picker --- */
.avatar-trigger{
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  line-height:0;
}
.avatar-trigger:focus-visible img{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:50%;
}
/* grid of preset avatars */
.avatar-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  align-items:center;
}
.avatar-option{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.avatar-option input{
  position:absolute;
  opacity:0;
  appearance:none;       /* hide radio dot (iOS Safari too) */
  pointer-events:none;
  width:0; height:0;
}
.avatar-option img{
  width:64px; height:64px;
  border-radius:50%;
  border:3px solid var(--stroke);
  object-fit:cover;
  box-shadow:var(--shadow);
  transition:transform .08s ease, box-shadow .12s ease, outline .12s ease;
}
.avatar-option input:checked + img{
  box-shadow:0 0 0 3px rgba(74,111,165,.25), var(--shadow);
}
.avatar-option:hover img{ transform:translateY(-1px); }

/* Password reveal button style harmony */
.reveal-password{ width:100%; border-radius:999px; }

/* Small chip style */

.chip {
  display: inline-block;
  padding: .35rem .7rem;
  border: 2px solid var(--stroke);
  border-radius: 999px;
  background: #fff;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(7,47,79,.15);
  color: var(--navy-2);
}

/* ==== ROLE BADGE TOP-RIGHT ==== */
.profile-frame {
  position: relative; /* serve per posizionare il badge */
}

.role-badge {
  position: absolute;
  top: .8rem;
  right: .8rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  border: 2px solid var(--stroke);
  border-radius: 999px;
  background: #e8f6ef;
  font-weight: 700;
  color: var(--navy);
  box-shadow: 0 2px 0 rgba(7,47,79,.15);
}

.role-badge .role-dot {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  border: 2px solid var(--stroke);
  background: #2bb673; /* verde Plant */
}

/* se vuoi varianti per altri ruoli */
.role-badge.role-basic   { background:#ffffff; }
.role-badge.role-plant   { background:#e8f6ef; }
.role-badge.role-driver  { background:#eef4ff; }
.role-badge.role-pinner  { background:#fff6e8; }
.role-badge.role-lasher  { background:#fdeef3; }
.role-badge.role-forklift{ background:#eaf7ff; }

/* ===== CREW PAGE — refined layout ===== */
.crew-page {
  padding-left: .9rem;
  padding-right: .9rem;
  padding-bottom: calc(var(--bottom-nav-h) + 12px);
}

/* Lista: rimuovi punti, allinea spazi */
.crew-list {
  display: grid;
  gap: .9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Card singola */
.crew-card {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: .9rem;
  align-items: start;
  background: #fff;
  border: 3px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: .9rem .9rem 1rem;
}

/* Badge ruolo in alto a destra */
.crew-card .role-badge {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .7rem;
  border: 2px solid var(--stroke);
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--navy);
  background: #fff;
  box-shadow: 0 2px 0 rgba(7,47,79,.15);
}

.crew-card .role-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  border: 2px solid var(--stroke);
  background: #2bb673;
}

/* Ruolo specifico — soft tint */
.role-badge.role-basic   { background: #fdfdfd; }
.role-badge.role-plant   { background: #e8f6ef; }
.role-badge.role-driver  { background: #eef4ff; }
.role-badge.role-pinner  { background: #fff6e8; }
.role-badge.role-lasher  { background: #fdeef3; }
.role-badge.role-forklift{ background: #eaf7ff; }

/* Avatar */
.crew-card .avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--stroke);
  object-fit: cover;
  background: #fff;
}

/* Contenuto colonna */
.crew-meta {
  display: grid;
  gap: .25rem;
}

.crew-meta .name {
  font-weight: 800;
  color: var(--navy);
  font-size: 1.05rem;
  line-height: 1.3;
}

.crew-meta .line {
  font-size: .95rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.crew-meta .line .dot {
  margin: 0 .3rem;
  opacity: .4;
}

/* Last seen mini-pill */
.crew-meta .profile-lastseen {
  background: linear-gradient(90deg, #f7faff 0%, #ffffff 100%);
  border: 2px solid var(--stroke);
  border-radius: 999px;
  padding: .2rem .8rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy-2);
  box-shadow: 0 2px 0 rgba(7,47,79,.15);
}

/* Pulsante View profile più compatto */
.crew-card .cta-row {
  margin-top: .6rem;
}

.crew-card .btn {
  font-size: .92rem;
  padding: .7rem .9rem;
  border-radius: 999px;
}

/* Mobile tweak */
@media (max-width: 420px) {
  .crew-card {
    grid-template-columns: 56px 1fr;
    gap: .7rem;
    padding: .8rem;
  }
  .crew-meta .name { font-size: 1rem; }
  .crew-card .role-badge {
    font-size: .85rem;
    padding: .2rem .6rem;
  }
}

/* opzionale: calc tweaks */
#calc-form .flex2{ display:flex; gap:.7rem; }
@media (max-width:520px){ #calc-form .flex2{ flex-direction:column; } }
#calc-result .row{ display:flex; justify-content:space-between; padding:.35rem 0; }
#calc-result hr{ border:0; border-top:3px dashed var(--stroke); margin:.6rem 0; }
#calc-result .total{ font-weight:700; }

/* -- tiny helpers per checklist -- */
.checklist { display:flex; flex-direction:column; gap:.5rem; }
.check-item{
  display:flex; align-items:center; justify-content:space-between;
  border:3px solid var(--stroke); border-radius:999px; background:#fff;
  padding:.55rem .8rem; box-shadow:var(--shadow); font-weight:700;
}
.check-item .ctl{ display:flex; align-items:center; gap:.6rem; }