/* ============================================================
   OPT · Tariffe — tema allineato alla dashboard AMC
   ============================================================ */
:root{
  --ame-blue:#003d5c; --ame-blue-2:#002a40;
  --ame-orange:#f7941d; --ame-green:#28a745; --ame-red:#dc3545;
  --ame-border:#e3e8ee; --ame-amber:#e8a200;
}
*{ box-sizing:border-box; }
body{ background:#f4f6f9; font-size:.85rem; color:#243240; margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
a{ color:var(--ame-blue); }

/* ---- top nav ---- */
.opt-nav{ background:linear-gradient(135deg,var(--ame-blue) 0%,var(--ame-blue-2) 100%);
  color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.opt-nav .inner{ display:flex; align-items:center; gap:1.4rem; padding:.55rem 1.2rem; flex-wrap:wrap; }
.opt-nav .brand{ font-weight:800; font-size:1.05rem; letter-spacing:.02em; display:flex; align-items:center; gap:.5rem; }
.opt-nav .brand .dot{ color:var(--ame-orange); }
.opt-nav .menu{ display:flex; gap:.2rem; flex-wrap:wrap; margin-left:.4rem; }
.opt-nav .menu a{ color:#cfe2ee; text-decoration:none; padding:.35rem .7rem; border-radius:7px;
  font-size:.82rem; font-weight:600; }
.opt-nav .menu a:hover{ background:rgba(255,255,255,.10); color:#fff; }
.opt-nav .menu a.active{ background:rgba(255,255,255,.16); color:#fff; }
.opt-nav .right{ margin-left:auto; display:flex; align-items:center; gap:.8rem; }
.role-badge{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:.2rem .5rem; border-radius:20px; }
.role-admin{ background:var(--ame-orange); color:#3a2400; }
.role-opt{ background:rgba(255,255,255,.18); color:#fff; }
.opt-nav .right a{ color:#cfe2ee; text-decoration:none; font-size:.8rem; }
.opt-nav .right a:hover{ color:#fff; }
.bell{ position:relative; color:#fff; font-size:1.05rem; text-decoration:none; }
.bell .cnt{ position:absolute; top:-7px; right:-9px; background:var(--ame-red); color:#fff;
  font-size:.6rem; font-weight:800; border-radius:20px; padding:.05rem .32rem; }

/* ---- page header ---- */
.page-header{ background:linear-gradient(135deg,var(--ame-blue) 0%,var(--ame-blue-2) 100%);
  color:#fff; padding:1rem 1.4rem; }
.page-header h1{ font-size:1.4rem; font-weight:700; margin:0; display:flex; align-items:center; gap:.5rem; }
.page-header h1 .acc{ color:var(--ame-orange); }
.page-header .subtitle{ font-size:.78rem; opacity:.8; margin-top:.15rem; }

.wrap{ padding:1.1rem 1.4rem; }

/* ---- card ---- */
.card-ame{ background:#fff; border:1px solid var(--ame-border); border-radius:10px; }
.card-ame .hd{ padding:.7rem 1rem; border-bottom:1px solid var(--ame-border); font-weight:700;
  color:var(--ame-blue); display:flex; align-items:center; gap:.5rem; }
.card-ame .bd{ padding:1rem; }

/* ---- KPI ---- */
.kpi{ display:flex; gap:1rem; flex-wrap:wrap; }
.kpi .box{ background:#fff; border:1px solid var(--ame-border); border-left:4px solid var(--ame-orange);
  border-radius:10px; padding:.8rem 1.2rem; min-width:185px; flex:1; }
.kpi .box .v{ font-size:1.6rem; font-weight:800; color:var(--ame-blue); line-height:1.1; }
.kpi .box .l{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:#6c757d; margin-top:.15rem; }
.kpi .box.red{ border-left-color:var(--ame-red); }
.kpi .box.red .v{ color:var(--ame-red); }
.kpi .box.amber{ border-left-color:var(--ame-amber); }
.kpi .box.green{ border-left-color:var(--ame-green); }

/* ---- filtri ---- */
.filters{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; }
.filters .f{ display:flex; flex-direction:column; gap:.15rem; }
.filters .f label{ font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:#6c757d; font-weight:700; }
.filters select,.filters input{ font-size:.82rem; border:1px solid var(--ame-border); border-radius:7px;
  padding:.32rem .5rem; background:#fff; min-width:130px; }
.filters .reset{ font-size:.78rem; }

/* ---- tabella ---- */
.tbl-scroll{ overflow:auto; max-height:66vh; border:1px solid var(--ame-border); border-radius:10px; background:#fff; }
table.tbl{ width:100%; border-collapse:collapse; }
table.tbl th{ font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; color:#6c757d;
  border-bottom:2px solid var(--ame-border); padding:.5rem .6rem; position:sticky; top:0; background:#f8fafc;
  text-align:left; white-space:nowrap; z-index:2; }
table.tbl td{ padding:.45rem .6rem; border-bottom:1px solid #f0f2f5; vertical-align:top; }
table.tbl tbody tr:hover{ background:#f6fafe; }
table.tbl .nome{ font-weight:700; color:var(--ame-blue); }
table.tbl .muted{ color:#8a97a5; }

/* righe scadenza */
table.tbl tr.row-scaduta td{ background:#fff5f5; }
table.tbl tr.row-scaduta:hover td{ background:#ffecec; }
table.tbl tr.row-scaduta .nome{ color:var(--ame-red); }
table.tbl tr.row-scadenza td{ background:#fffaf0; }

/* ---- pills / flag / badge ---- */
.pill{ display:inline-block; background:#eef3f8; color:#33536a; border:1px solid #d8e3ec;
  border-radius:20px; padding:.08rem .5rem; font-size:.7rem; font-weight:600; margin:0 .2rem .2rem 0; white-space:nowrap; }
.pill.pay{ background:#eafaf1; color:#1e7a47; border-color:#bfe9d0; }
.flag{ display:inline-block; border-radius:6px; padding:.05rem .42rem; font-size:.68rem; font-weight:700; }
.flag-si{ background:var(--ame-green); color:#fff; }
.flag-no{ background:#eef0f3; color:#9aa6b2; }
.feat{ display:inline-flex; gap:.25rem; align-items:center; margin:0 .35rem .25rem 0; font-size:.7rem; }
.feat .lab{ color:#6c757d; }

.scad{ display:inline-block; border-radius:20px; padding:.1rem .55rem; font-size:.68rem; font-weight:700; white-space:nowrap; }
.scad-rossa{ background:var(--ame-red); color:#fff; }
.scad-gialla{ background:#fff3cd; color:#8a6100; border:1px solid #ffe2a0; }
.scad-verde{ background:#eafaf1; color:#1e7a47; border:1px solid #bfe9d0; }
.scad-na{ background:#eef0f3; color:#9aa6b2; }

/* badge disponibilità */
.disp{ display:inline-block; border-radius:6px; padding:.08rem .45rem; font-size:.68rem; font-weight:700; }
.disp-ok{ background:#eafaf1; color:#1e7a47; }
.disp-no{ background:#fdecec; color:#b32430; }
.disp-other{ background:#eef3f8; color:#33536a; }

/* ---- sotto-tab categorie / sezioni ---- */
.subtabs{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.9rem; }
.subtabs button{ border:1px solid var(--ame-border); background:#fff; color:var(--ame-blue);
  border-radius:8px; padding:.4rem .85rem; font-size:.8rem; font-weight:700; cursor:pointer; }
.subtabs button .n{ background:#eef3f8; color:#5b6b7a; border-radius:20px; padding:0 .4rem; font-size:.68rem; margin-left:.35rem; }
.subtabs button.active{ background:var(--ame-blue); color:#fff; border-color:var(--ame-blue); }
.subtabs button.active .n{ background:rgba(255,255,255,.22); color:#fff; }

/* ---- bottoni ---- */
.btn{ display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--ame-border); background:#fff;
  color:var(--ame-blue); border-radius:8px; padding:.4rem .8rem; font-size:.8rem; font-weight:700; cursor:pointer; text-decoration:none; }
.btn:hover{ background:#f2f6fa; }
.btn-primary{ background:var(--ame-blue); color:#fff; border-color:var(--ame-blue); }
.btn-primary:hover{ background:var(--ame-blue-2); color:#fff; }
.btn-orange{ background:var(--ame-orange); color:#3a2400; border-color:var(--ame-orange); }
.btn-danger{ background:#fff; color:var(--ame-red); border-color:#f1b6bc; }
.btn-danger:hover{ background:var(--ame-red); color:#fff; }
.btn-sm{ padding:.25rem .55rem; font-size:.72rem; }
.btn-icon{ padding:.25rem .5rem; }

.toolbar{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-bottom:.9rem; }
.toolbar .spacer{ flex:1; }
.count-info{ font-size:.78rem; color:#6c757d; }

/* nota sola-lettura per opt */
.ro-note{ background:#fff8e6; border:1px solid #ffe0a3; color:#7a5b00; border-radius:8px;
  padding:.5rem .8rem; font-size:.78rem; display:flex; align-items:center; gap:.5rem; margin-bottom:.9rem; }
.warn-note{ background:#fdecec; border:1px solid #f5c2c7; color:#842029; border-radius:8px;
  padding:.5rem .8rem; font-size:.78rem; margin-bottom:.9rem; }

/* azioni admin in tabella */
.row-actions{ white-space:nowrap; }
.col-actions{ width:1%; }

/* ---- login ---- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--ame-blue) 0%,var(--ame-blue-2) 100%); padding:1rem; }
.login-card{ background:#fff; border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.25); width:100%; max-width:380px; overflow:hidden; }
.login-card .top{ background:var(--ame-blue); color:#fff; padding:1.4rem 1.5rem; }
.login-card .top h1{ margin:0; font-size:1.25rem; font-weight:800; }
.login-card .top h1 .dot{ color:var(--ame-orange); }
.login-card .top .sub{ font-size:.76rem; opacity:.8; margin-top:.2rem; }
.login-card .body{ padding:1.4rem 1.5rem; }
.login-card label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:#6c757d; font-weight:700; }
.login-card input{ width:100%; border:1px solid var(--ame-border); border-radius:8px; padding:.55rem .7rem;
  font-size:.92rem; margin:.25rem 0 .9rem; }
.login-card .err{ background:#fdecec; border:1px solid #f5c2c7; color:#842029; border-radius:8px;
  padding:.5rem .7rem; font-size:.8rem; margin-bottom:.9rem; }

/* ---- modal ---- */
.modal-back{ position:fixed; inset:0; background:rgba(10,25,40,.55); display:none; z-index:1000;
  align-items:flex-start; justify-content:center; padding:2.5vh 1rem; overflow:auto; }
.modal-back.show{ display:flex; }
.modal-box{ background:#fff; border-radius:12px; width:100%; max-width:760px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.modal-box .mh{ background:var(--ame-blue); color:#fff; padding:.8rem 1.1rem; border-radius:12px 12px 0 0;
  display:flex; align-items:center; justify-content:space-between; }
.modal-box .mh h3{ margin:0; font-size:1rem; font-weight:700; }
.modal-box .mh .x{ background:none; border:none; color:#fff; font-size:1.3rem; cursor:pointer; line-height:1; }
.modal-box .mb{ padding:1.1rem; }
.modal-box .mf{ padding:.8rem 1.1rem; border-top:1px solid var(--ame-border); display:flex; justify-content:flex-end; gap:.6rem; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1rem; }
.form-grid .full{ grid-column:1 / -1; }
.fld label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; color:#6c757d; font-weight:700; display:block; margin-bottom:.15rem; }
.fld input,.fld select,.fld textarea{ width:100%; border:1px solid var(--ame-border); border-radius:7px;
  padding:.4rem .55rem; font-size:.84rem; background:#fff; }
.opt-add{ color:var(--ame-orange); font-weight:700; }
.fld textarea{ min-height:62px; resize:vertical; }
.flags-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.3rem .8rem; }
.flags-grid label{ font-size:.78rem; display:flex; align-items:center; gap:.4rem; color:#33536a; font-weight:600; }
.sect-title{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ame-blue);
  font-weight:800; margin:.4rem 0 .2rem; border-top:1px solid var(--ame-border); padding-top:.6rem; }

@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }