/* =========================================================
   Gestionefacile.pro — Stile unico (v2.9) 11/10/2025
   Replica mock: topbar scura con titolo centrato, Logout + Guida.
   Quickbar a pill verdi, card bianche con ombra morbida.
   Nessun effetto hover.
   ========================================================= */

/* 0) Reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
a{text-decoration:none;color:inherit}

/* 1) Token */
:root{
  --topbar-h:56px;

  /* Colori base mock */
  --bg:#ECECEC;              /* canvas chiaro */
  --card:#FFFFFF;            /* card */
  --text:#1A1A1A;            /* testo principale */
  --muted:#666666;           /* testo secondario */
  --line:#E7E7EA;            /* bordo chiaro */
  --shadow:0 12px 30px rgba(0,0,0,.12);

  /* Accenti */
  --accent:#11A9A4;          /* verde acqua */
  --accent-weak:#CFEDE6;     /* pill chiaro */
  --violet:#8A7AF2;          /* variante viola */
  --violet-weak:#ECE8FF;

  /* Topbar */
  --topbar1:#2F363B;         /* gradiente alto */
  --topbar2:#262C30;         /* gradiente basso */
  --topbar-line:rgba(255,255,255,.12);

  --radius:20px;             /* card molto arrotondate */
}

/* 2) Base */
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.55;
  color:var(--text); background:var(--bg);
}
.muted{color:var(--muted); font-size:.92rem}

/* 3) Topbar stile screenshot */
.topbar{
  position:sticky; top:0; z-index:1000;
  height:var(--topbar-h);
  background:linear-gradient(180deg,var(--topbar1),var(--topbar2));
  border-bottom:1px solid var(--topbar-line);
}
.topbar .wrap{
  position:relative;
  height:100%; max-width:1100px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; gap:12px;
}
.topbar .brand{display:flex; align-items:center; gap:10px}
.topbar .brand .logo{width:26px;height:26px;border-radius:50%;background:var(--accent)}
.topbar .brand .name{color:#fff; font-weight:800; letter-spacing:.2px}
.topbar .brand .name .pro{color:var(--accent)}

.topbar .title{
  position:absolute; left:50%; transform:translateX(-50%);
  color:#fff; font-weight:700;
}

.topbar .right{margin-left:auto; display:flex; align-items:center; gap:12px}
.topbar .right .logout{color:#E6E6E6; font-weight:600}
.topbar .right .btn-guide{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; padding:0 14px;
  border-radius:999px; border:0;
  background:var(--accent); color:#fff; font-weight:700; cursor:pointer;
}
/* Variante viola opzionale: aggiungi class .violet al pulsante */
.topbar .right .btn-guide.violet{background:var(--violet)}

/* 4) Contenitore pagina */
.page-wrap{max-width:1100px; margin:30px auto 70px; padding:0 20px}
.title-row{display:flex; align-items:center; gap:12px; margin:18px 0 22px}
.btn-row{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px}

/* 5) Card */
.card{
  background:var(--card); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:900px){ .grid{grid-template-columns:1fr} }

/* Dashboard layout come mock: 1 grande + 2 piccole */
.page-wrap .grid.dashboard{grid-template-columns:1fr 1fr}
.card.big{padding:22px}
.dashboard .kpi{font-size:42px; font-weight:800; letter-spacing:.2px}
.dashboard .cta .btn{min-width:130px}

/* 6) Bottoni */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:16px; border:1px solid transparent;
  font-weight:600; cursor:pointer; user-select:none;
}
.btn:focus{outline:2px solid #000; outline-offset:2px}

/* Varianti */
.btn-primary{background:var(--accent); color:#fff; border:0}
.btn-violet{background:var(--violet); color:#fff; border:0}
.btn-ghost{background:#fff; border-color:var(--line); color:#222}
.btn-light{background:var(--accent-weak); color:#0e3a26}
.btn-small{padding:8px 12px; font-size:.92rem; border-radius:14px}

/* 7) Quickbar sotto la topbar (contenitore bianco) */
.quickbar{
  background:#fff; border-radius:14px; box-shadow:var(--shadow);
  padding:10px; margin-top:10px; border:1px solid #F0F0F0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.quickbar .btn{background:var(--accent-weak); color:#0e3a26; border:0}
.quickbar .btn.is-current{background:var(--accent); color:#fff}

/* 8) Input */
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-weight:600}
.field input,.field select,.field textarea{
  width:100%; padding:10px 12px; background:#fff; color:var(--text);
  border:1px solid var(--line); border-radius:12px;
}
.field help,.help{color:var(--muted); font-size:.9rem}

/* 9) Liste base */
.list{display:grid; gap:10px}
.list .item{
  background:#f7f8fa; border-radius:14px; padding:12px 14px;
  display:flex; gap:12px; align-items:center;
}
.avatar{width:40px;height:40px;border-radius:50%; background:#e9e9ef; color:#222; display:grid; place-items:center; font-weight:700}
.avatar.op{background:#DCD6FF}

/* 10) Alert */
.alert-ok{background:#E8FBF1; border:1px solid #B6F1D3; color:#13452f; padding:12px 14px; border-radius:12px}
.alert-err{background:#FFE8E8; border:1px solid #FFC2C2; color:#561b1b; padding:12px 14px; border-radius:12px}

/* 11) Tabelle semplici */
.table{width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.table th,.table td{padding:12px 14px; border-bottom:1px solid #eee; text-align:left}
.table tr:last-child td{border-bottom:none}

/* 12) Utilità */
.center{display:flex; align-items:center; justify-content:center}
.right{margin-left:auto}
.hidden{display:none}

/* 13) Messaggio guida */
.tip{color:var(--muted); text-align:center; margin:12px 0 18px}