:root{
  --cover:#1F3D2E;
  --cover-light:#2A4F3A;
  --cover-dark:#16291D;
  --paper:#F6F2E7;
  --paper-deep:#EFE9D8;
  --line:#DED4B4;
  --ink:#24261F;
  --ink-soft:#6B6858;
  --stamp-red:#A83A32;
  --stamp-red-bg:#F4E3E0;
  --stamp-green:#3F6B4A;
  --stamp-green-bg:#E3EBE1;
  --gold:#B8933F;
  --gold-soft:#EFE3C4;
  --white:#FFFDF8;
  --radius:6px;
  --shadow:0 2px 8px rgba(31,61,46,0.12);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--paper);
  display:flex;
  min-height:100vh;
}
::selection{background:var(--gold-soft);}
h1,h2,h3{font-family:'Zilla Slab',serif; margin:0; letter-spacing:0.2px;}
.mono{font-family:'IBM Plex Mono',monospace;}
button{font-family:'Inter',sans-serif; cursor:pointer;}
a{color:inherit;}

/* ===== SIDEBAR (copertina del registro) ===== */
.sidebar{
  width:220px;
  min-width:220px;
  background:var(--cover);
  color:var(--paper);
  display:flex;
  flex-direction:column;
  padding:28px 0 20px 0;
  position:relative;
}
.brand{
  padding:0 22px 26px 22px;
  border-bottom:1px solid rgba(246,242,231,0.15);
  margin-bottom:18px;
}
.brand .mark{
  width:34px;height:34px;border-radius:50%;
  border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:'Zilla Slab',serif;font-weight:700;font-size:16px;color:var(--gold);
  margin-bottom:10px;
}
.brand h1{font-size:19px;color:var(--paper);font-weight:600;line-height:1.25;}
.brand .sub{font-size:11px;color:rgba(246,242,231,0.55);text-transform:uppercase;letter-spacing:1.2px;margin-top:4px;}

nav{display:flex;flex-direction:column;gap:2px;}
.tab{
  position:relative;
  display:flex;align-items:center;gap:11px;
  padding:13px 22px 13px 24px;
  color:rgba(246,242,231,0.72);
  font-size:14.5px;font-weight:500;
  background:transparent;
  border:none;
  text-align:left;
  transition:background 0.15s, color 0.15s, padding 0.15s;
}
.tab .num{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gold);opacity:0.85;}
.tab:hover{background:var(--cover-light); color:var(--paper);}
.tab.active{
  background:var(--paper);
  color:var(--cover);
  padding-left:28px;
  font-weight:600;
}
.tab.active .num{color:var(--stamp-red);}
.tab.active::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--gold);
}

.sidebar-foot{
  margin-top:auto;
  padding:16px 22px 0 22px;
  border-top:1px solid rgba(246,242,231,0.15);
  font-size:11px;
  color:rgba(246,242,231,0.7);
  line-height:1.6;
}

/* ===== MAIN ===== */
main{flex:1; padding:34px 42px 60px 42px; overflow-x:auto;}
.page-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:26px; flex-wrap:wrap; gap:14px;}
.page-head h2{font-size:26px; color:var(--cover); font-weight:600;}
.page-head .desc{font-size:13px;color:var(--ink-soft); margin-top:4px;}

.btn{
  background:var(--cover); color:var(--white); border:none;
  padding:10px 18px; border-radius:var(--radius); font-size:13.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:7px;
  transition:background 0.15s, transform 0.1s;
}
.btn:hover{background:var(--cover-light);}
.btn:active{transform:scale(0.98);}
.btn.secondary{background:transparent; color:var(--cover); border:1.5px solid var(--cover);}
.btn.secondary:hover{background:var(--paper-deep);}
.btn.danger{background:transparent; color:var(--stamp-red); border:1.5px solid var(--stamp-red);}
.btn.danger:hover{background:var(--stamp-red-bg);}
.btn.small{padding:6px 11px; font-size:12px; border-radius:5px;}
.btn.ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line); font-weight:500;}
.btn.ghost:hover{background:var(--paper-deep);}
.btn[disabled]{opacity:0.5; cursor:not-allowed;}

/* cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:30px;}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:8px;
  padding:18px 20px; box-shadow:var(--shadow);
}
.card .label{font-size:11.5px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-soft); font-weight:600;}
.card .value{font-family:'Zilla Slab',serif; font-size:30px; font-weight:700; color:var(--cover); margin-top:6px;}
.card .value.red{color:var(--stamp-red);}
.card .value.gold{color:var(--gold);}

/* filter bar */
.filterbar{
  display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
  background:var(--paper-deep); border:1px solid var(--line); border-radius:8px;
  padding:14px 18px; margin-bottom:20px;
}
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:11px; text-transform:uppercase; letter-spacing:0.6px; color:var(--ink-soft); font-weight:600;}
input, select, textarea{
  font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink);
  border:1.5px solid var(--line); border-radius:5px; padding:8px 10px;
  background:var(--white);
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--gold);}
input[type=number]{font-family:'IBM Plex Mono',monospace;}

/* table = registro a righe */
table{width:100%; border-collapse:collapse; background:var(--white); border-radius:8px; overflow:hidden; box-shadow:var(--shadow);}
thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.8px;
  color:var(--ink-soft); font-weight:700; padding:12px 16px;
  border-bottom:2px solid var(--cover); background:var(--paper-deep);
}
tbody td{padding:13px 16px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#FBF8F0;}
.rowactions{display:flex; gap:6px;}
.empty-row td{text-align:center; color:var(--ink-soft); padding:36px; font-style:italic;}

/* stamp badges */
.stamp{
  display:inline-flex; align-items:center; gap:5px;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:11px;
  letter-spacing:0.6px; text-transform:uppercase;
  padding:5px 10px; border-radius:3px; border:1.5px solid;
  transform:rotate(-2deg);
}
.stamp.paid{color:var(--stamp-green); border-color:var(--stamp-green); background:var(--stamp-green-bg);}
.stamp.unpaid{color:var(--stamp-red); border-color:var(--stamp-red); background:var(--stamp-red-bg);}
.stamp.exempt{color:var(--gold); border-color:var(--gold); background:var(--gold-soft); transform:rotate(0deg);}
.badge-active{color:var(--stamp-green); font-size:12px; font-weight:600;}
.badge-inactive{color:var(--ink-soft); font-size:12px;}

/* modal */
.overlay{
  position:fixed; inset:0; background:rgba(22,41,29,0.55);
  display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.overlay.show{display:flex;}
.modal{
  background:var(--paper); border-radius:10px; width:100%; max-width:520px;
  max-height:88vh; overflow-y:auto; box-shadow:0 12px 40px rgba(0,0,0,0.3);
  border-top:5px solid var(--gold);
}
.modal-head{padding:20px 26px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
.modal-head h3{font-size:19px; color:var(--cover);}
.modal-close{background:none;border:none;font-size:20px;color:var(--ink-soft);line-height:1;padding:4px;}
.modal-body{padding:22px 26px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-grid .full{grid-column:1/-1;}
.form-field{display:flex; flex-direction:column; gap:5px;}
.form-field label{font-size:12px; font-weight:600; color:var(--ink-soft);}
.modal-foot{padding:18px 26px 22px 26px; display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); margin-top:6px;}
.checkline{display:flex; align-items:center; gap:8px; font-size:13.5px;}
.checkline input{width:auto;}
.helptext{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}

.toast{
  position:fixed; bottom:26px; right:26px; background:var(--cover); color:var(--white);
  padding:13px 20px; border-radius:7px; font-size:13.5px; box-shadow:var(--shadow);
  opacity:0; transform:translateY(8px); transition:opacity 0.25s, transform 0.25s; z-index:200;
  border-left:4px solid var(--gold);
}
.toast.show{opacity:1; transform:translateY(0);}
.toast.error{background:var(--stamp-red); border-left-color:#7a2a24;}

@media (max-width:820px){
  body{flex-direction:column;}
  .sidebar{width:100%; min-width:0; padding:16px 0;}
  nav{flex-direction:row; overflow-x:auto;}
  .tab.active{padding-left:24px;}
  main{padding:22px 18px 50px 18px;}
  .form-grid{grid-template-columns:1fr;}
}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

/* ===== LOGIN ===== */
.login-body{
  display:flex; align-items:center; justify-content:center; min-height:100vh;
  background:var(--cover);
}
.login-card{
  background:var(--paper); width:100%; max-width:360px; padding:34px 32px;
  border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,0.35); border-top:5px solid var(--gold);
  display:flex; flex-direction:column; gap:14px;
}
.login-card h1{font-size:22px; color:var(--cover); margin-top:2px;}
.login-card .sub{font-size:12.5px; color:var(--ink-soft); margin-bottom:8px;}
.login-card .mark{
  width:36px;height:36px;border-radius:50%; border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:'Zilla Slab',serif;font-weight:700;font-size:16px;color:var(--gold);
}
.login-error{
  background:var(--stamp-red-bg); color:var(--stamp-red); border:1px solid var(--stamp-red);
  padding:9px 12px; border-radius:6px; font-size:13px;
}