/* SANIME — invio giacenze : foglio di stile unico dell'area riservata. */

:root {
  --acc:#40566e; --acc2:#222e3a; --ok:#16a34a; --err:#dc2626; --warn:#b45309;
  --mut:#6b7280; --bd:#e2e6ec; --bg:#f4f6fa; --card:#fff;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:#1f2937; font-size:15px; line-height:1.55;
  min-height:100vh; display:flex; flex-direction:column;
}
.wrap { max-width:1060px; margin:0 auto; padding:20px 16px 40px; width:100%; }
.wrap-center { flex:1; display:flex; align-items:center; justify-content:center; padding:24px 16px; }

/* --- testata --- */
.top {
  background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff;
  padding:14px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.brand { font-weight:700; font-size:17px; }
.brand span { opacity:.75; font-weight:400; }
.top-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.top .muted { color:rgba(255,255,255,.8); font-size:13px; }

/* --- schede --- */
.card { background:var(--card); border:1px solid var(--bd); border-radius:12px; padding:18px 20px; margin-bottom:18px; }
.card-login { max-width:420px; width:100%; }
.card-login h1 { font-size:20px; margin-bottom:14px; color:var(--acc2); }
.card-login h1 span { color:var(--mut); font-weight:400; }
.card-head { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.card-head h2 { font-size:16px; color:var(--acc2); }
.card-head .btn { margin-left:auto; }

/* --- testo --- */
.muted { color:var(--mut); }
.small, .hint { font-size:12.5px; }
.hint { color:var(--mut); margin:4px 0 10px; }
code { background:#eef1f6; padding:1px 5px; border-radius:4px; font-size:12.5px; }

/* --- moduli --- */
label { display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:10px; }
label.check { font-weight:400; display:flex; align-items:center; gap:8px; }
input[type=text], input[type=password], input[type=email], textarea, input[type=file], select {
  width:100%; margin-top:4px; padding:9px 11px; font:inherit; font-size:14px; font-weight:400;
  border:1px solid var(--bd); border-radius:8px; background:#fff; outline:none;
}
input:focus, textarea:focus, select:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(64,86,110,.13); }
label.check input { width:auto; margin:0; }
.mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace !important; font-size:12.5px !important; }
textarea.mono { resize:vertical; white-space:pre; overflow-x:auto; }
.scelta { border:1px solid var(--bd); border-radius:8px; padding:10px 12px 2px; margin-bottom:12px; }
.scelta-tit { display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:6px; }
.scorri { overflow-x:auto; max-width:100%; }
.scorri .tab td { white-space:nowrap; }
.riga-form { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }

.btn {
  border:none; border-radius:8px; padding:9px 16px; font:inherit; font-size:14px; font-weight:600;
  cursor:pointer; background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; white-space:nowrap;
}
.btn:disabled { opacity:.5; cursor:default; }
.btn-sm { padding:7px 13px; font-size:13px; }
.btn-secondary { background:#eef1f6; color:var(--acc2); }
.btn-ghost { background:transparent; color:inherit; border:1px solid rgba(128,128,128,.35); }
.top .btn-ghost { color:#fff; border-color:rgba(255,255,255,.4); }
.btn-danger { background:var(--err); }

/* --- elenchi --- */
.lista { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.riga {
  border:1px solid var(--bd); border-radius:10px; padding:12px 14px;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; background:#fff;
}
.riga .nome { font-weight:600; }
.riga .meta { font-size:12.5px; color:var(--mut); }
.riga .azioni { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.riga.spenta { opacity:.6; }
.col { min-width:0; flex:1; }

.pill { display:inline-block; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:99px; }
.pill-ok { background:#dcfce7; color:#166534; }
.pill-err { background:#fee2e2; color:#991b1b; }
.pill-warn { background:#fef3c7; color:#92400e; }
.pill-off { background:#e5e7eb; color:#4b5563; }

/* --- messaggi --- */
.msg { font-size:13px; margin-top:8px; min-height:18px; }
.msg.err { color:var(--err); }
.msg.ok { color:var(--ok); }
.box { border-radius:8px; padding:10px 12px; font-size:13px; margin-top:10px; }
.box-ok { background:#dcfce7; color:#14532d; }
.box-err { background:#fee2e2; color:#7f1d1d; }
.box-warn { background:#fef3c7; color:#78350f; }
.tab { width:100%; border-collapse:collapse; font-size:12.5px; margin-top:8px; }
.tab th, .tab td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--bd); vertical-align:top; }
.tab th { color:var(--mut); font-weight:600; }

/* --- finestre --- */
.overlay { position:fixed; inset:0; background:rgba(20,26,34,.55); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50; }
.overlay[hidden] { display:none; }
.modal { background:#fff; border-radius:14px; width:100%; max-width:560px; max-height:92vh; display:flex; flex-direction:column; }
.modal-larga { max-width:760px; }
.modal-head { display:flex; align-items:center; padding:14px 18px; border-bottom:1px solid var(--bd); }
.modal-head h3 { font-size:16px; color:var(--acc2); }
.modal-head .x { margin-left:auto; border:none; background:none; font-size:24px; line-height:1; cursor:pointer; color:var(--mut); }
.modal-body { padding:16px 18px; overflow:auto; }
.modal-foot { display:flex; gap:10px; padding:12px 18px; border-top:1px solid var(--bd); }

.toast {
  position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:60;
  background:var(--acc2); color:#fff; padding:11px 18px; border-radius:10px; font-size:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.toast[hidden] { display:none; }
.toast.err { background:var(--err); }

.pie { margin-top:auto; text-align:center; font-size:11.5px; color:var(--mut); padding:16px; }

@media (max-width:620px) {
  .riga .azioni { margin-left:0; width:100%; }
  .card { padding:15px; }
}