:root{
  --bg:#F5F7F5; --card:#FFFFFF; --ink:#152321; --ink-soft:#4B5A57;
  --teal:#0E4F4A; --teal-light:#1B7A72; --teal-pale:#E4EEEC;
  --gold:#C9932E; --gold-soft:#F3E4C4; --line:#DCE3E0; --error:#B3413B;
  --serif:'Source Serif 4', Georgia, serif; --sans:'Inter', -apple-system, sans-serif; --mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box;}
body{ font-family:var(--sans); background:var(--bg); color:var(--ink); margin:0; }
a{ color:inherit; }

/* ---------- Auth pages (login / forgot / contact / setup) ---------- */
.auth-body{
  display:flex; align-items:center; justify-content:center; min-height:100vh; margin:0;
  background:
    radial-gradient(circle at 15% 15%, rgba(201,147,46,.18), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(27,122,114,.4), transparent 45%),
    linear-gradient(155deg,#123B45,#081E1C);
}
.auth-box{ background:#fff; padding:42px; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.35); width:380px; max-width:92vw; }
.auth-brand{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.auth-brand .mark{ font-size:26px; }
.mark-img{ width:30px !important; height:30px !important; border-radius:50%; display:block; object-fit:cover; }
.auth-brand .txt{ font-family:var(--serif); font-weight:700; font-size:19px; color:var(--ink); }
.auth-sub{ font-size:13px; color:var(--ink-soft); margin-bottom:24px; }
.auth-foot{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:16px; }
.auth-foot a{ color:var(--teal); font-weight:600; text-decoration:none; }

/* ---------- Form basics ---------- */
label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:6px; }
input, select, textarea{
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:9px;
  font-family:var(--sans); font-size:14px; background:#fff; color:var(--ink); margin-bottom:16px;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--teal-light); }
button{ font-family:var(--sans); cursor:pointer; }
.btn{ font-weight:600; font-size:13.5px; padding:10px 20px; border-radius:999px; border:none; text-decoration:none; display:inline-block; transition:transform .1s, background .15s; }
.btn-primary{ background:var(--teal); color:#fff; width:100%; padding:13px; font-size:14.5px; }
.btn-primary:hover{ background:var(--teal-light); }
.btn-danger{ background:#fff; color:var(--error); border:1.5px solid var(--error); }
.btn-danger:hover{ background:#FBEBEA; }
.btn-ghost{ background:var(--teal-pale); color:var(--teal); }

.flash{ padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:16px; }
.flash.ok{ background:#E4EEEC; color:var(--teal); border:1px solid #BFDAD6; }
.flash.err{ background:#FBEBEA; color:var(--error); border:1px solid #F0C6C2; }

/* ---------- Dashboard shell ---------- */
.app{ display:flex; min-height:100vh; }
.sidebar{
  width:230px; min-width:230px; background:linear-gradient(180deg, #123B45, #081E1C); color:#fff;
  display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:0; height:100vh;
}
.side-brand{ display:flex; align-items:center; gap:10px; margin-bottom:26px; padding:0 6px; }
.side-brand .mark{ font-size:22px; }
.side-mark-img{ width:26px !important; height:26px !important; border-radius:50%; object-fit:cover; }
.side-brand .txt{ font-family:var(--serif); font-weight:700; font-size:16px; }
.side-brand .txt small{ display:block; font-family:var(--mono); font-size:9.5px; color:rgba(255,255,255,.55); font-weight:400; letter-spacing:.06em; text-transform:uppercase; }
.side-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.side-nav button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; border-radius:9px; border:none; background:none;
  font-size:13.5px; font-weight:500; color:rgba(255,255,255,.78); transition:background .15s, color .15s;
}
.side-nav button:hover{ background:rgba(255,255,255,.08); color:#fff; }
.side-nav button.active{ background:rgba(201,147,46,.18); color:#fff; font-weight:600; border:1px solid rgba(201,147,46,.35); }
.side-nav .icon{ width:16px; text-align:center; display:inline-block; }
.side-nav .icon-svg{
  width:16px; height:16px; background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  vertical-align:middle; opacity:.85;
}
.side-nav button:hover .icon-svg, .side-nav button.active .icon-svg{ opacity:1; }
.side-foot{ font-size:11px; color:rgba(255,255,255,.45); padding:10px 6px 0; border-top:1px solid rgba(255,255,255,.1); margin-top:10px; }
.side-foot .who{ color:#fff; font-weight:600; display:block; margin-bottom:2px; }
.role-badge{ display:inline-block; font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; background:rgba(201,147,46,.2); color:var(--gold-soft); padding:2px 8px; border-radius:999px; margin-top:4px; }

.main{ flex:1; min-width:0; }
.topbar{ background:#fff; border-bottom:1px solid var(--line); padding:16px 28px; }
.topbar h1{ font-family:var(--serif); font-size:20px; font-weight:600; margin:0; }
.content{ padding:26px 28px 50px; }
.content.loading{ opacity:.5; }

.card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px; box-shadow:0 1px 2px rgba(14,79,74,.04); }
table{ width:100%; border-collapse:collapse; }
th, td{ padding:11px 13px; text-align:left; font-size:13.5px; border-bottom:1px solid #EEF1F0; }
th{ background:var(--teal-pale); color:var(--teal); font-family:var(--mono); text-transform:uppercase; font-size:10.5px; letter-spacing:.04em; }
tr:hover td{ background:#FAFBFA; }
.badge{ font-family:var(--mono); font-size:10px; padding:3px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
.badge.complete{ background:#E4EEEC; color:var(--teal); }
.badge.partial{ background:#FCEFDD; color:var(--gold); }
.badge.yes{ background:#E4EEEC; color:var(--teal); }
.badge.no{ background:#F5F7F5; color:var(--ink-soft); }

.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:24px; }
.kpi-label{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); text-transform:uppercase; }
.kpi-value{ font-family:var(--serif); font-size:30px; color:var(--teal); font-weight:600; }
.chart-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; }
.chart-card h3{ font-family:var(--serif); margin:0 0 12px; font-size:15px; }
.chart-card canvas{ cursor:pointer; }

.modal-backdrop{ position:fixed; inset:0; background:rgba(21,35,33,.5); display:none; align-items:center; justify-content:center; z-index:40; padding:20px; }
.modal-backdrop.show{ display:flex; }
.modal{ background:#fff; border-radius:14px; padding:28px; max-width:640px; width:100%; max-height:82vh; overflow:auto; }
.modal h2{ font-family:var(--serif); margin:0 0 16px; }
.spinner{ width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; display:inline-block; animation:spin .7s linear infinite; vertical-align:middle; margin-right:8px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.empty-state{ text-align:center; color:var(--ink-soft); padding:34px; font-size:13.5px; }

/* ============ Toolbar (search / filters / bulk actions) ============ */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
.toolbar input[type=text], .toolbar input[type=date], .toolbar input[type=search], .toolbar select{ margin-bottom:0; width:auto; min-width:150px; }
.toolbar .grow{ flex:1; min-width:180px; }
.bulk-bar{
  display:none; align-items:center; gap:10px; background:var(--teal-pale); border:1px solid #BFDAD6;
  border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:13px; flex-wrap:wrap;
}
.bulk-bar.show{ display:flex; }
.dropdown{ position:relative; display:inline-block; }
.dropdown-menu{
  display:none; position:absolute; top:110%; left:0; background:#fff; border:1px solid var(--line);
  border-radius:9px; box-shadow:0 8px 22px rgba(14,79,74,.15); z-index:10; min-width:130px; overflow:hidden;
}
.dropdown-menu.show{ display:block; }
.dropdown-menu button{ display:block; width:100%; text-align:left; padding:9px 14px; background:none; border:none; font-size:13px; cursor:pointer; }
.dropdown-menu button:hover{ background:var(--teal-pale); }
.row-check{ width:16px; height:16px; margin:0; cursor:pointer; }

/* ============ Mobile navigation ============ */
.sidebar-toggle{ display:none; }
@media (max-width: 860px){
  .app{ flex-direction:column; }
  .sidebar{
    width:100%; min-width:0; height:auto; position:sticky; top:0; z-index:30;
    flex-direction:row; align-items:center; padding:12px 14px; gap:10px;
  }
  .side-brand{ margin-bottom:0; flex:1; }
  .side-foot{ display:none; }
  .sidebar-toggle{
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.22); color:#fff; font-size:18px; cursor:pointer;
  }
  .side-nav{
    display:none; position:absolute; top:100%; left:0; right:0; background:#0A2A2E;
    flex-direction:column; padding:10px 14px 16px; box-shadow:0 10px 24px rgba(0,0,0,.3); gap:2px;
  }
  .side-nav.open{ display:flex; }
  .side-nav button{ padding:12px; font-size:14.5px; }
  .topbar{ padding:14px 16px; }
  .content{ padding:16px 14px 40px; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
  .chart-grid{ grid-template-columns:1fr; }
  table{ display:block; }
  .card table{ overflow-x:auto; display:block; white-space:nowrap; }
  .toolbar{ flex-direction:column; align-items:stretch; }
  .toolbar .grow, .toolbar input, .toolbar select{ width:100%; }
  .auth-box{ padding:30px 24px; }
}
@media (max-width: 480px){
  .kpi-grid{ grid-template-columns:1fr 1fr; }
  .kpi-value{ font-size:24px; }
  .modal{ padding:20px; }
}