@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:#f5f3ea;
  --surface:#ffffff;
  --surface-2:#efebdd;
  --text:#22261e;
  --text-muted:#5c6354;
  --border:#ddd7c4;
  --accent:#2e6f60;
  --accent-strong:#1f4f44;
  --accent-soft:#dceae5;
  --amber:#a8641f;
  --amber-soft:#f5e5ce;
  --danger:#a13a2f;
  --danger-soft:#f6e2dd;
  --shadow: 0 1px 2px rgba(34,38,30,0.06), 0 6px 18px -10px rgba(34,38,30,0.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  font-size:15px;
  line-height:1.5;
}
h1,h2,h3{ font-family:'Fraunces', Georgia, serif; margin:0 0 4px; text-wrap:balance; }
code,.mono{ font-family:'IBM Plex Mono', monospace; }
a{ color:var(--accent-strong); }

.app-shell{ min-height:100%; display:flex; flex-direction:column; }

header.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 24px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
header.topbar .brand{ font-family:'Fraunces', serif; font-weight:700; font-size:18px; color:var(--accent-strong); }
header.topbar .brand span{ color:var(--text-muted); font-family:'IBM Plex Sans', sans-serif; font-weight:400; font-size:13px; display:block; }

nav#app-nav{ display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
nav#app-nav a{
  text-decoration:none;
  color:var(--text-muted);
  font-size:13.5px;
  font-weight:600;
  padding:7px 12px;
  border-radius:7px;
}
nav#app-nav a:hover{ background:var(--surface-2); }
nav#app-nav a.active{ background:var(--accent-soft); color:var(--accent-strong); }
nav#app-nav button.logout{
  margin-left:8px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  background:none;
  border:1px solid var(--border);
  border-radius:7px;
  padding:6px 12px;
  color:var(--text-muted);
  cursor:pointer;
}
nav#app-nav button.logout:hover{ background:var(--danger-soft); color:var(--danger); border-color:transparent; }

main{ flex:1; padding:28px 24px 60px; max-width:1080px; margin:0 auto; width:100%; }

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:22px;
  box-shadow:var(--shadow);
  margin-bottom:20px;
}

.field{ display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.field label{ font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); }
input,select,textarea,button{ font-family:inherit; font-size:14.5px; }
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=month],select,textarea{
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg);
  color:var(--text);
}
input:focus,select:focus,textarea:focus,button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:10px 18px;
  font-weight:600;
  cursor:pointer;
}
.btn:hover{ background:var(--accent-strong); }
.btn.secondary{ background:var(--surface-2); color:var(--text); }
.btn.secondary:hover{ background:var(--border); }

.status{ margin-top:10px; padding:10px 14px; border-radius:8px; font-size:14px; }
.status.ok{ background:var(--accent-soft); color:var(--accent-strong); }
.status.error{ background:var(--danger-soft); color:var(--danger); }

.grid-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }

table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
th,td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); font-size:14px; }
th{ font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
tr.total-row td{ font-weight:700; border-top:2px solid var(--border); }
.table-wrap{ overflow-x:auto; }

.portata-block{ border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:14px; background:var(--bg); }
.portata-block h3{ font-size:15px; margin-bottom:10px; }
.portata-block .piatto-nome{ font-weight:600; color:var(--accent-strong); margin-bottom:10px; }
.portata-block .piatto-nome.mancante{ color:var(--danger); font-weight:500; font-style:italic; }
.portata-fields{ display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; }
.portata-fields .derived{ font-size:13px; color:var(--text-muted); padding-bottom:9px; white-space:nowrap; }

.login-shell{ min-height:100%; display:flex; align-items:center; justify-content:center; }
.login-card{ width:100%; max-width:380px; }

.hint{ font-size:13px; color:var(--text-muted); margin-top:4px; }

@media print{
  header.topbar, .no-print{ display:none !important; }
  main{ padding:0; max-width:none; }
  body{ background:#fff; }
  .card{ box-shadow:none; border:none; }
}