:root{
  --bg:#f6f1ea; --surface:#ffffff; --surface-2:#fbf7f1;
  --border:#e8ddd0; --border-soft:#f0e7db;
  --text:#241512; --text-soft:#6b5c53; --text-faint:#9c8d82;
  --sidebar:#fffdfb; --sidebar-2:#fefaf6; --sidebar-text:#241512; --sidebar-text-soft:#6b5c53;
  --accent:#e2733f; --accent-dark:#c15a2c; --accent-soft:#fbe2d2;
  --good:#3f8a5d; --good-bg:#e6f3ea; --warn:#c58a1f; --warn-bg:#fbf0dd; --bad:#c0483f; --bad-bg:#fbe6e3;
  --shadow: 0 1px 2px rgba(43,20,12,.06), 0 8px 24px -12px rgba(43,20,12,.15);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#171012; --surface:#211719; --surface-2:#271b1d;
    --border:#3a292a; --border-soft:#2e2224;
    --text:#f2e9e6; --text-soft:#c7b6b0; --text-faint:#8c7975;
    --sidebar:#150c0a; --sidebar-2:#0d0706; --sidebar-text:#f1e3d8; --sidebar-text-soft:#a98d80;
    --accent:#ea8452; --accent-dark:#f2996a; --accent-soft:#3d2418;
    --good:#5fb883; --good-bg:#183324; --warn:#dba746; --warn-bg:#332810; --bad:#e07469; --bad-bg:#3a2220;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#171012; --surface:#211719; --surface-2:#271b1d;
  --border:#3a292a; --border-soft:#2e2224;
  --text:#f2e9e6; --text-soft:#c7b6b0; --text-faint:#8c7975;
  --sidebar:#150c0a; --sidebar-2:#0d0706; --sidebar-text:#f1e3d8; --sidebar-text-soft:#a98d80;
  --accent:#ea8452; --accent-dark:#f2996a; --accent-soft:#3d2418;
  --good:#5fb883; --good-bg:#183324; --warn:#dba746; --warn-bg:#332810; --bad:#e07469; --bad-bg:#3a2220;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:"Inter",system-ui,sans-serif; font-size:13px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand,.stat-num,.modal-title{font-family:"Sora","Inter",sans-serif;}
h1,h2,h3{text-wrap:balance; margin:0;}
table{font-variant-numeric:tabular-nums;}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
[hidden]{display:none!important;}
::selection{background:var(--accent-soft);}

/* ---------- LOGIN ---------- */
#view-login{min-height:100vh; display:grid; grid-template-columns:1fr 1fr;}
@media (max-width:860px){
  #view-login{grid-template-columns:1fr;}
  .login-art{min-height:auto; padding:40px 28px 32px;}
  .login-nodes{display:none;}
}
.login-art{
  position:relative; overflow:hidden; color:#f4ebe6;
  background:
    radial-gradient(520px 420px at 18% 12%, rgba(180,90,55,.28), transparent 62%),
    radial-gradient(480px 380px at 92% 78%, rgba(160,70,40,.22), transparent 58%),
    radial-gradient(360px 300px at 70% 30%, rgba(120,55,35,.18), transparent 55%),
    #1a1210;
  padding:52px 56px; display:flex; flex-direction:column; justify-content:space-between;
}
.login-brand{display:flex; align-items:center; gap:12px; font-weight:700; font-size:19px; color:#fff;}
.login-brand .logo-mark{color:#fff; font-weight:800;}
.logo-mark{
  width:38px; height:38px; border-radius:10px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; color:#2c1712; font-weight:800; font-size:14px;
  box-shadow:0 6px 16px -4px rgba(226,115,63,.6);
}
.login-head{margin:48px 0 auto;}
.login-head h1{font-size:40px; font-weight:700; color:#fff; line-height:1.18; max-width:11em;}
.login-head p{color:rgba(244,235,230,.72); font-size:15px; max-width:34em; margin-top:18px; line-height:1.55;}
.login-feats{display:flex; flex-direction:column; gap:12px; margin-top:28px;}
.login-feats div{color:rgba(244,235,230,.78); font-size:14.5px; line-height:1.4;}
.login-bottom{display:flex; flex-direction:column; gap:28px; margin-top:48px;}
.login-nodes{opacity:.9;}
.login-foot{color:rgba(244,235,230,.45); font-size:12.5px;}
.login-panel{display:flex; align-items:center; justify-content:center; padding:40px 24px; background:#f7f4f1;}
.login-box{width:100%; max-width:380px;}
.login-box .brand{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:28px; font-weight:700; font-size:18px; color:#241512;}
.login-box .brand .logo-mark{color:#2c1712;}
.login-box h2{font-size:26px; text-align:center; color:#241512; font-weight:700;}
.login-box>p.sub{color:#6b5c53; text-align:center; margin:8px 0 28px; font-size:13.5px;}
.login-box .field{margin-bottom:16px;}
.login-box .field label{display:block; font-size:13px; font-weight:600; margin-bottom:7px; color:#241512;}
.login-box .field input{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #241512;
  background:#fff; color:#241512; font-size:14px; font-family:inherit;
}
.login-box .field input::placeholder{color:#b0a197;}
.login-box .field input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:#241512;}
.login-box .row-between{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; font-size:13px;}
.login-box .chk{display:flex; align-items:center; gap:7px; color:#6b5c53;}
.login-box .link{color:var(--accent); font-weight:600; text-decoration:none;}
.login-box .link:hover{color:var(--accent-dark);}
.login-box .btn-primary{background:var(--accent); color:#fff; width:100%; border-radius:8px; padding:10px 16px; font-weight:600; font-size:13.5px; border:none; min-height:38px;}
.login-box .btn-primary:hover{filter:brightness(1.05);}
.login-box .hint{text-align:center; color:#9c8d82; font-size:12.5px; margin-top:22px; line-height:1.6;}
.field{margin-bottom:12px;}
.field label{display:block; font-size:12px; font-weight:600; margin-bottom:4px; color:var(--text);}
.field input, select.input, textarea.input, input.input{
  width:100%; padding:8px 10px; border-radius:8px; border:1px solid #241512;
  background:var(--surface); color:#241512; font-size:13px; font-family:inherit;
}
.field input::placeholder, select.input::placeholder, textarea.input::placeholder, input.input::placeholder{color:#9c8d82;}
.field input:focus, select.input:focus, textarea.input:focus, input.input:focus, .checklist:focus-within{
  outline:2px solid var(--accent); outline-offset:1px; border-color:#241512;
}
.row-between{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; font-size:13px;}
.chk{display:flex; align-items:center; gap:7px; color:var(--text-soft);}
.link{color:var(--accent-dark); font-weight:600; text-decoration:none;}
.btn{
  border:none; border-radius:8px; padding:7px 12px; font-weight:600; font-size:12.5px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:filter .15s, transform .05s;
  line-height:1.2; min-height:32px; text-decoration:none; color:inherit;
}
a.btn, a.btn:hover, a.btn:focus{text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent); color:#fff; width:100%;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-primary.inline{width:auto;}
.btn-ghost{background:transparent; color:#241512; border:1px solid #241512;}
.btn-ghost:hover{background:var(--surface-2); color:#241512; border-color:#241512;}
a.btn-ghost, a.btn-ghost:hover, a.btn-ghost:focus{color:#241512; text-decoration:none;}
.btn-accent{padding:7px 12px; font-size:12.5px; border-radius:8px; min-height:32px; text-decoration:none; color:#fff;}
a.btn-accent, a.btn-accent:hover, a.btn-accent:focus{color:#fff;}
.hint{text-align:center; color:var(--text-faint); font-size:12.5px; margin-top:22px; line-height:1.6;}

/* ---------- APP SHELL ---------- */
#view-app{display:none; min-height:100vh;}
#view-app.active{display:grid; grid-template-columns:230px 1fr;}
.sidebar{
  background:var(--sidebar);
  border-right:1px solid var(--border);
  color:var(--sidebar-text); padding:14px 12px; display:flex; flex-direction:column; gap:1px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand{padding:4px 8px 14px; font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px;}
.side-label{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-faint); padding:12px 10px 4px;
}
.side-label:first-of-type{padding-top:2px;}
.side-link{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  color:var(--sidebar-text-soft); font-size:12.5px; font-weight:500; text-decoration:none; border:none;
  background:none; width:100%; text-align:left;
}
.side-link .ic{width:16px; height:16px; flex:none; display:flex; align-items:center; justify-content:center;}
.side-link:hover{background:var(--surface-2); color:var(--text);}
.side-link.active{background:var(--accent-soft); color:var(--accent-dark); font-weight:700;}
.side-link.active svg{stroke:var(--accent-dark);}
.side-link svg{stroke:currentColor;}
.side-link.disabled{opacity:.5; cursor:default;}
.side-link.disabled:hover{background:none; color:var(--sidebar-text-soft);}
.side-sub{padding-left:26px;}
.nav-group{margin-bottom:2px;}
.nav-parent{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  color:var(--sidebar-text-soft); font-size:12.5px; font-weight:500; cursor:pointer; width:100%;
  background:none; border:none; text-align:left; font-family:inherit;
}
.nav-parent .ic{width:16px; height:16px; flex:none; display:flex; align-items:center; justify-content:center;}
.nav-parent svg{stroke:currentColor;}
.nav-parent .chev{margin-left:auto; transition:transform .15s; flex:none;}
.nav-parent:hover{background:var(--surface-2); color:var(--text);}
.nav-group.open .nav-parent .chev{transform:rotate(180deg);}
.nav-group.open .nav-parent{color:var(--text);}
.nav-children{display:none; padding-left:12px; border-left:1px solid var(--border); margin:2px 0 4px 20px;}
.nav-group.open .nav-children{display:block;}
.nav-children .side-link{font-size:12px; padding:6px 8px;}
.side-badge{
  margin-left:auto; background:var(--accent); color:#fff; font-size:11px; font-weight:700;
  border-radius:999px; padding:1px 8px; flex:none;
}
.sidebar-foot{
  margin-top:auto; padding:14px 12px; border-top:1px solid var(--border-soft);
  display:flex; flex-direction:column; align-items:stretch; gap:10px; font-size:12.5px; color:var(--sidebar-text-soft);
}
.sidebar-foot .profile-row{
  display:flex; align-items:center; gap:10px; min-width:0;
}
.sidebar-foot .profile-meta{
  min-width:0; flex:1;
}
.sidebar-foot .profile-meta .name{
  font-weight:600; font-size:13px; color:var(--sidebar-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar-foot .profile-meta .role{
  font-size:11.5px; color:var(--sidebar-text-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none;
}
.avatar.square{border-radius:9px;}
.main{min-width:0;}
.topbar{
  position:sticky; top:0; z-index:5; background:var(--surface); border-bottom:1px solid var(--border);
  padding:8px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.topbar h1{font-size:15px;}
.topbar .sub{color:var(--text-soft); font-size:11.5px; margin-top:1px;}
.topbar-right{display:flex; align-items:center; gap:10px;}
.pill{
  display:inline-flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border);
  padding:4px 10px; border-radius:999px; font-size:11.5px; color:var(--text-soft); font-weight:600;
}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--good);}
.topbar-search{position:relative; flex:1; max-width:420px;}
.topbar-search input{
  width:100%; padding:8px 12px 8px 34px; border-radius:8px; border:1px solid #241512;
  background:var(--surface-2); font-size:12.5px; color:#241512;
}
.topbar-search input::placeholder{color:#9c8d82;}
.topbar-search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); stroke:var(--text-faint);}
.icon-btn-plain{
  width:30px; height:30px; border-radius:50%; border:none; background:none; position:relative;
  display:flex; align-items:center; justify-content:center; color:var(--text-soft);
}
.icon-btn-plain .dot-badge{
  position:absolute; top:5px; right:6px; width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.topbar-user{display:flex; align-items:center; gap:8px; position:relative;}
.topbar-user-link{
  display:flex; align-items:center; gap:8px; min-width:0;
  text-decoration:none; color:inherit; border-radius:8px; padding:2px 4px;
  border:none; background:none; cursor:pointer; font:inherit; text-align:left;
}
.topbar-user-link:hover{background:var(--surface-2);}
.topbar-user .who{min-width:0;}
.topbar-user .who .name{font-weight:700; font-size:12.5px; white-space:nowrap;}
.topbar-user .who .role{color:var(--text-soft); font-size:11px; white-space:nowrap;}
.profile-pop{
  position:absolute; top:calc(100% + 8px); right:36px; z-index:40;
  width:280px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow); padding:12px;
}
.profile-pop[hidden]{display:none!important;}
.profile-pop-head{display:flex; align-items:center; gap:10px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border-soft);}
.profile-pop-name{font-weight:700; font-size:13px;}
.profile-pop-role{font-size:11.5px; color:var(--text-soft); margin-top:2px;}
.profile-pop-rows{display:flex; flex-direction:column; gap:8px;}
.profile-pop-rows > div{display:flex; justify-content:space-between; gap:10px; font-size:12px;}
.profile-pop-rows span{color:var(--text-faint);}
.profile-pop-rows b{font-weight:600; text-align:right; word-break:break-word;}
.profile-pop-logout{
  display:block; margin-top:10px; padding-top:10px; border-top:1px solid var(--border-soft);
  text-align:center; font-size:12.5px; font-weight:600; color:var(--bad); text-decoration:none;
}
.profile-pop-logout:hover{color:var(--accent-dark);}
.topbar-logout{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:7px; color:var(--text-soft); flex:none;
}
.topbar-logout:hover{background:var(--surface-2); color:var(--text);}
.breadcrumb{color:var(--text-faint); font-size:11px; margin:0 0 4px;}
.content{padding:12px 16px 28px;}
.content > h1,
.content > h2,
.page-head h2,
.page-title{
  font-size:17px !important;
  margin:0 0 4px !important;
  line-height:1.25;
}
.page-sub,
.page-head p,
.content > p.page-sub{
  font-size:12px !important;
  margin:0 !important;
}
.back-link{margin-bottom:4px !important; font-size:12px !important;}
.form-panel{padding:14px 16px !important;}
.view{display:none;}
.view.active{display:block;}

/* grids/cards */
.grid{display:grid; gap:12px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:2fr 1fr;}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;}}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; box-shadow:var(--shadow);
}
.stat-card{display:flex; flex-direction:column; gap:6px;}
.stat-top{display:flex; align-items:center; justify-content:space-between;}
.stat-label{color:var(--text-soft); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;}
.stat-ic{width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none;}
.stat-num{font-size:20px; font-weight:700;}
.stat-delta{font-size:11.5px; font-weight:600; display:flex; align-items:center; gap:4px;}
.up{color:var(--good);} .down{color:var(--bad);}
.section-title{display:flex; align-items:center; justify-content:space-between; margin:18px 0 10px;}
.section-title h2{font-size:14px;}
.section-title p{color:var(--text-soft); font-size:12px; margin-top:2px;}

/* bar chart */
.bars{display:flex; align-items:flex-end; gap:14px; height:180px; padding-top:10px;}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end;}
.bar-shape{width:100%; max-width:34px; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg, var(--accent), var(--accent-dark));}
.bar-col span{font-size:11px; color:var(--text-soft); font-weight:600;}
.legend-row{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-soft); margin-bottom:14px;}
.legend-row b{color:var(--text);}

/* donut */
.donut-wrap{display:flex; align-items:center; gap:20px;}
.donut-legend{display:flex; flex-direction:column; gap:10px; font-size:12.8px;}
.donut-legend div{display:flex; align-items:center; gap:8px;}
.sw{width:10px; height:10px; border-radius:3px; flex:none;}

/* list rows */
.list-row{display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border-soft); gap:14px;}
.list-row:last-child{border-bottom:none;}
.list-row .who{display:flex; align-items:center; gap:11px; min-width:0;}
.list-row .who .avatar{width:32px; height:32px; font-size:12px;}
.list-row .name{font-weight:600; font-size:13.3px;}
.list-row .meta{color:var(--text-faint); font-size:12px;}
.list-row .val{font-weight:700; font-size:13px; white-space:nowrap;}

/* toolbar / page header */
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px !important;
  flex-wrap:wrap;
  width:100%;
}
.page-head > div:first-child{min-width:0; flex:1;}
.page-head .toolbar{
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  flex:none; flex-wrap:nowrap; margin:0 !important; width:auto !important;
}
.toolbar{
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  flex-wrap:nowrap; margin-bottom:12px; width:100%;
}
.toolbar > form{display:flex; align-items:center; gap:8px; flex:none; margin:0;}
.toolbar .btn{flex:none; margin-left:0; white-space:nowrap;}
.search{position:relative; width:220px; max-width:220px; flex:none;}
.search input{
  padding:7px 11px 7px 30px; border-radius:8px; border:1px solid #241512;
  background:var(--surface); font-size:12.5px; width:100%; color:#241512;
  min-height:32px;
}
.search input::placeholder{color:#9c8d82;}
.search svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); stroke:var(--text-faint); pointer-events:none;}
.btn-accent{background:var(--accent); color:#fff;}
.btn-accent:hover{filter:brightness(1.05); color:#fff;}
a.btn-accent, button.btn-accent{color:#fff;}

.table-wrap{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.table-scroll{overflow-x:auto;}
table.data{width:100%; border-collapse:collapse; min-width:640px;}
table.data th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-soft);
  padding:9px 12px; background:var(--surface-2); border-bottom:1px solid var(--border); font-weight:700; white-space:nowrap;
}
table.data td{padding:10px 12px; border-bottom:1px solid var(--border-soft); font-size:12.8px; vertical-align:middle; color:var(--text);}
table.data tr:last-child td{border-bottom:none;}
table.data tr:hover td{background:var(--surface-2);}
.co-cell{display:flex; align-items:center; gap:11px;}
.co-ic{width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex:none;}
.sub-meta{color:var(--text); font-size:12px; margin-top:1px;}
.badge{display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700;}
.badge.good{background:var(--good-bg); color:var(--good);}
.badge.warn{background:var(--warn-bg); color:var(--warn);}
.badge.bad{background:var(--bad-bg); color:var(--bad);}
.badge.neutral{background:var(--surface-2); color:var(--text-soft); border:1px solid var(--border);}
.att-history-table{min-width:920px; table-layout:auto;}
.att-history-table th,
.att-history-table td{white-space:nowrap; vertical-align:middle;}
.att-col-date{font-weight:600; width:1%;}
.att-col-site{max-width:220px; overflow:hidden; text-overflow:ellipsis;}
.att-col-num{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align:center;}
.att-col-status{width:1%;}
.agreement-current{
  display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;
  background:var(--accent-soft); color:var(--accent-dark); border-radius:8px;
  padding:8px 12px; font-size:12.8px;
}
.agreement-view-btn{
  background:none; border:none; padding:0; cursor:pointer; color:var(--accent-dark);
  text-decoration:underline; text-underline-offset:2px; font:inherit;
}
.agreement-view-btn:hover{color:var(--text);}

.chips{display:flex; gap:5px; flex-wrap:wrap; max-width:220px;}
.chip{background:var(--surface-2); border:1px solid var(--border); padding:3px 9px; border-radius:999px; font-size:11.5px; color:var(--text-soft);}
.row-actions{display:flex; gap:6px; justify-content:flex-end;}
.icon-btn{
  width:28px; height:28px; border-radius:7px; border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; color:var(--text-soft);
}
.icon-btn:hover{background:var(--surface-2); color:var(--text);}
.icon-btn svg{stroke:currentColor;}
.table-foot{display:flex; align-items:center; justify-content:space-between; padding:13px 18px; font-size:12.5px; color:var(--text-soft); border-top:1px solid var(--border);}

/* tabs */
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:20px; flex-wrap:wrap;}
.tab{padding:10px 16px; font-size:13.3px; font-weight:600; color:var(--text-soft); border:none; background:none; border-bottom:2px solid transparent; margin-bottom:-1px; display:inline-block; text-decoration:none; cursor:pointer;}
.tab.active{color:var(--accent-dark); border-color:var(--accent);}
.report-card{display:flex; flex-direction:column; gap:14px;}
.report-card .top{display:flex; align-items:center; justify-content:space-between;}
.mini-stat{display:flex; flex-direction:column; gap:2px;}
.mini-stat .n{font-size:20px; font-weight:700;}
.mini-stat .l{font-size:11.5px; color:var(--text-soft);}

/* modal */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(20,10,7,.5); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; z-index:50; padding:24px;
}
.modal-overlay.active{display:flex;}
.modal{
  background:var(--surface); border-radius:16px; width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.35); border:1px solid var(--border);
}
.modal.wide{max-width:680px;}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; padding:22px 24px 4px; gap:12px;}
.modal-title{font-size:17.5px; font-weight:700;}
.modal-title p{font-family:"Inter"; font-weight:400; font-size:12.5px; color:var(--text-soft); margin-top:4px;}
.modal-close{width:30px; height:30px; border-radius:8px; border:none; background:var(--surface-2); color:var(--text-soft); flex:none; display:flex; align-items:center; justify-content:center;}
.modal-body{padding:18px 24px 6px;}
.modal-foot{display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:18px 24px 24px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field-row.three{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:560px){.field-row, .field-row.three{grid-template-columns:1fr;}}
.contact-row{border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:12px; position:relative; background:var(--surface-2);}
.contact-row .remove-row{position:absolute; top:10px; right:10px; width:24px; height:24px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text-soft); display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; line-height:1; padding:0;}
.contact-row .remove-row:hover{color:var(--bad); border-color:var(--bad);}
.contact-row .field-row.three{gap:10px;}
.contact-fields{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; padding-right:28px;}
@media (max-width:640px){.contact-fields{grid-template-columns:1fr; padding-right:0;}}
.add-more-btn{
  display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:120px;
  border:1.5px dashed var(--border); background:transparent; color:var(--accent-dark);
  border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; min-height:32px;
  margin-bottom:8px;
}
.add-more-btn:hover{background:var(--accent-soft);}
textarea.input{resize:vertical; min-height:72px;}
.upload-box{
  border:1.5px dashed var(--border); border-radius:12px; padding:20px; text-align:center; color:var(--text-soft);
  font-size:12.8px; background:var(--surface-2);
}
.upload-box svg{stroke:var(--text-faint); margin-bottom:6px;}
.doc-tag{display:inline-flex; align-items:center; gap:7px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-size:12px; margin:4px 6px 0 0;}
.checklist{border:1px solid var(--border); border-radius:10px; background:var(--surface); max-height:180px; overflow-y:auto; padding:6px;}
.check-item{display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:8px; font-size:13.2px;}
.check-item:hover{background:var(--surface-2);}
.check-item.disabled{opacity:.45;}
.check-item input{width:16px; height:16px; accent-color:var(--accent);}
.field-note{font-size:11.8px; color:var(--text-faint); margin-top:6px;}

/* switch billing modal option list */
.opt-list{display:flex; flex-direction:column; gap:8px;}
.opt-item{
  display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:11px; padding:12px 14px;
}
.opt-item.selected{border-color:var(--accent); background:var(--accent-soft);}
.opt-item.disabled{opacity:.45;}
.opt-item input{width:16px; height:16px; accent-color:var(--accent); flex:none;}
.opt-item .oname{font-weight:600; font-size:13.5px;}
.opt-item .ometa{font-size:11.8px; color:var(--text-soft);}

.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
  background:#241512; color:#f3e6dd; padding:12px 20px; border-radius:10px; font-size:13.3px; font-weight:600;
  box-shadow:0 12px 30px -6px rgba(0,0,0,.4); z-index:99; transition:opacity .2s, transform .2s; display:flex; align-items:center; gap:9px;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast .dotgood{width:8px; height:8px; border-radius:50%; background:#5fb883;}

.switch-co-btn{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  background:rgba(255,255,255,.06); color:var(--sidebar-text); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:7px 10px; font-size:12.5px; font-weight:600; margin-bottom:10px; cursor:pointer; min-height:32px;
}
.switch-co-btn:hover{background:rgba(255,255,255,.1);}
.co-context{
  background:var(--accent-soft); color:var(--accent-dark); border:1px solid var(--border);
  border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:600; white-space:nowrap;
}
.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,10,8,.45); display:flex; align-items:center; justify-content:center;
  z-index:80; padding:20px;
}
.modal-backdrop[hidden]{display:none!important;}
.modal-card{
  background:var(--surface); border-radius:16px; padding:22px 24px; width:100%; max-width:420px;
  box-shadow:var(--shadow);
}

@media (max-width:900px){
  #view-app.active{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .grid-3{grid-template-columns:1fr;}
}

select.ss-native{
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0,0,0,0)!important; border:0!important; opacity:0!important; pointer-events:none!important;
}
.ss-wrap{position:relative; width:100%;}
.ss-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 13px; border-radius:10px; border:1px solid #241512;
  background:var(--surface); color:#241512; font-size:14px; font-family:inherit; font-weight:500;
  text-align:left; cursor:pointer;
}
.ss-wrap.is-open .ss-trigger, .ss-trigger:focus{
  outline:2px solid var(--accent); outline-offset:1px; border-color:#241512;
}
.ss-wrap.is-disabled .ss-trigger{opacity:.55; cursor:not-allowed; background:var(--surface-2);}
.ss-label{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ss-label.ss-placeholder{color:var(--text-faint); font-weight:400;}
.ss-caret{flex:none; color:var(--text-faint); display:inline-flex;}
.ss-wrap.is-open .ss-caret{transform:rotate(180deg); color:var(--accent-dark);}
.ss-panel{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 12px 28px rgba(36,21,18,.12); overflow:hidden;
}
.ss-search{
  width:100%; border:0!important; border-bottom:1px solid var(--border-soft)!important;
  border-radius:0!important; outline:none!important; box-shadow:none!important;
  padding:10px 12px!important; font-size:13.5px; font-family:inherit; color:var(--text);
  background:var(--surface-2)!important; margin:0!important;
}
.field .ss-search:focus, .ss-search:focus{
  outline:none!important; border-color:var(--border-soft)!important; box-shadow:none!important;
}
.ss-list{max-height:220px; overflow:auto; padding:6px;}
.ss-option{
  width:100%; text-align:left; border:0; background:transparent; color:var(--text);
  padding:9px 11px; border-radius:8px; font-size:13.5px; font-family:inherit; cursor:pointer;
}
.ss-option:hover{background:var(--accent-soft); color:var(--accent-dark);}
.ss-option.is-selected{background:var(--accent-soft); color:var(--accent-dark); font-weight:700;}
.ss-option.is-empty{color:var(--text-faint); font-weight:400;}
.ss-option:disabled{opacity:.45; cursor:default;}
.ss-empty{padding:14px 12px; text-align:center; color:var(--text-faint); font-size:13px;}
.field-row .ss-wrap{width:100%;}

.stat-grid{display:grid; gap:14px; margin-bottom:16px;}
.stat-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:1100px){.stat-grid.cols-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.stat-grid.cols-3{grid-template-columns:1fr;}}
.sv-stat{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px;
}
.sv-stat .stat-icon{
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-dark); margin-bottom:10px;
}
.sv-stat.pending .stat-icon{background:var(--warn-bg); color:var(--warn);}
.sv-stat .stat-label{font-size:12.5px; color:var(--text-soft); font-weight:600; margin-bottom:6px;}
.sv-stat .stat-value{font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1.1;}
.sv-stat .stat-value-sub{font-size:12px; color:var(--text-faint); margin-top:4px;}
.sv-stat .variance-flag{margin-top:8px; font-size:12.3px; color:var(--warn); font-weight:600;}
.two-col{display:grid; grid-template-columns:1.15fr .85fr; gap:16px;}
@media (max-width:1100px){.two-col{grid-template-columns:1fr;}}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px;}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.panel-head h2{font-size:13.5px; display:flex; align-items:center; gap:7px;}
.panel-icon{
  width:24px; height:24px; border-radius:7px; background:var(--accent-soft); color:var(--accent-dark);
  display:inline-flex; align-items:center; justify-content:center;
}
.count-tag{font-size:11.5px; color:var(--text-faint); font-weight:600;}
.alert-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.alert-item{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--border-soft);}
.alert-item:last-child{border-bottom:0; padding-bottom:0;}
.alert-icon{
  width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none;
}
.alert-icon.warn{background:var(--warn-bg); color:var(--warn);}
.alert-icon.info{background:var(--accent-soft); color:var(--accent-dark);}
.alert-icon.danger{background:var(--bad-bg, #fde8e4); color:var(--bad);}
.alert-text{font-size:13.5px; color:var(--text); line-height:1.35;}
.alert-sub{font-size:12px; color:var(--text-faint); margin-top:3px;}
.pay-bar-row{display:grid; grid-template-columns:130px 1fr 70px; gap:10px; align-items:center; margin-bottom:12px;}
.pay-bar-label{font-size:12.5px; color:var(--text-soft);}
.pay-bar-track{height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden;}
.pay-bar-fill{height:100%; background:var(--accent); border-radius:999px;}
.pay-bar-amount{font-size:12.5px; font-weight:700; text-align:right;}
.page-sub{color:var(--text-soft); font-size:12.5px; margin-top:2px;}
.attend-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--border-soft);
}
.attend-row:last-of-type{border-bottom:0;}
.attend-row-label{font-weight:700; font-size:14px;}
.attend-row-req{font-size:12.5px; color:var(--text); margin-top:3px; font-weight:600;}
.attend-row-req .req-val{color:var(--text); font-weight:700;}
.seg-toggle{display:flex; gap:8px; flex:none;}
.seg-btn{
  border:1.5px solid var(--border); background:var(--surface); color:var(--text-soft);
  border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
  min-width:84px; min-height:32px;
}
.seg-btn.present{
  background:#e6f3ea; border-color:var(--good); color:var(--good);
}
.seg-btn.present.active,
.seg-btn.present:hover{
  background:var(--good); border-color:var(--good); color:#fff;
}
.seg-btn.absent{
  background:#fbe6e3; border-color:var(--bad); color:var(--bad);
}
.seg-btn.absent.active,
.seg-btn.absent:hover{
  background:var(--bad); border-color:var(--bad); color:#fff;
}
.filter-bar{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:12px; align-items:end; margin-bottom:16px;
}
@media (max-width:1000px){.filter-bar{grid-template-columns:1fr 1fr;}}
.accordion{border:1px solid var(--border); border-radius:14px; background:var(--surface); margin-bottom:12px; overflow:hidden;}
.accordion-head{
  display:flex; align-items:center; justify-content:space-between; padding:14px 16px; cursor:pointer; user-select:none;
}
.accordion-title{font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:8px;}
.accordion-body{display:none; padding:0 16px 16px;}
.accordion.open .accordion-body{display:block;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media (max-width:700px){.form-grid{grid-template-columns:1fr;}}
.form-hint{font-size:12px; color:var(--text-faint);}
.form-section-label{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-dark); margin:14px 0 8px;
}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px;}
.count-tag{font-size:11.5px; color:var(--text-faint); font-weight:500;}
.repeat-group{
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; margin-bottom:10px;
}
.repeat-group-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.repeat-group-label{font-size:11.5px; font-weight:600; color:var(--text-soft);}
.btn-add-more{
  display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:120px;
  border:1.5px dashed var(--accent); background:transparent; color:var(--accent-dark);
  border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; margin-top:8px; min-height:32px;
}
.btn-add-more:hover{background:var(--accent-soft);}
.edit-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; min-height:32px; border-radius:8px;
  border:1px solid #241512; background:transparent; color:#241512;
  font-weight:600; font-size:12.5px; text-decoration:none; line-height:1.2;
}
.edit-btn:hover{background:var(--surface-2); color:#241512;}
.back-link{display:inline-flex; align-items:center; gap:6px; color:var(--text-soft); font-size:12px; font-weight:600; text-decoration:none; margin-bottom:4px;}

.stat-grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1100px){.stat-grid.cols-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.stat-grid.cols-4{grid-template-columns:1fr;}}
.attendance-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media (max-width:900px){.attendance-grid{grid-template-columns:1fr;}}
.att-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;}
.att-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px;}
.att-card-title{display:flex;align-items:center;gap:12px;}
.att-icon{width:38px;height:38px;border-radius:9px;background:var(--accent-soft);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.att-icon.full{background:var(--good-bg);color:var(--good);}
.att-name{font-weight:700;font-size:14.5px;}
.att-sub{font-size:12px;color:var(--text-soft);margin-top:2px;}
.att-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
@media (max-width:700px){.att-metrics{grid-template-columns:repeat(2,1fr);}}
.att-metric-label{font-size:11px;color:var(--text-faint);margin-bottom:4px;}
.att-metric-value{font-family:monospace;font-size:14px;font-weight:700;}
.att-metric-value.short{color:var(--bad);}
.att-metric-value.ok{color:var(--good);}
.att-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.att-updated{font-size:11.5px;color:var(--text-faint);}
.readonly-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:18px;}
@media (max-width:640px){.readonly-grid{grid-template-columns:1fr;}}
.readonly-field{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;}
.ro-label{font-size:11.5px;color:var(--text-soft);margin-bottom:6px;}
.ro-value{font-family:monospace;font-size:17px;font-weight:700;}
.profile-panel .ro-value{font-family:inherit;font-size:13px;font-weight:600;word-break:break-word;}
.marked-by-note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-soft);background:var(--accent-soft);border-radius:10px;padding:10px 14px;margin-bottom:4px;}
.req-tab{font-size:13.5px;font-weight:700;color:var(--text-soft);padding:9px 4px;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none;}
.req-tab.active{color:var(--accent-dark);border-bottom-color:var(--accent);}
.req-actions{display:flex;gap:8px;flex-wrap:wrap;}
.field:has(:user-invalid) > label{color:var(--bad);}
.field:has(:user-invalid) .input,
.field:has(:user-invalid) input,
.field:has(:user-invalid) select,
.field:has(:user-invalid) textarea{border-color:var(--bad);}
.req{color:var(--bad);}
.req-note{font-size:12px; color:var(--text);}
.req-note .req{font-weight:600;}
.count-tag.req-note{color:var(--text); font-weight:500;}

.content h1,
.content h2,
.content .page-title,
.page-head > div > h2,
.page-header .page-title{
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  margin:0 !important;
}
.content .page-sub,
.page-head p,
.page-header .page-sub{
  font-size:12px !important;
  line-height:1.35 !important;
  margin:2px 0 0 !important;
  color:var(--text-soft);
}
.page-header{margin:0 0 12px;}
.page-header-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 6px; flex-wrap:wrap;
}
.page-header-top .breadcrumb{margin:0 !important; flex:1; min-width:0;}
.page-header-top .back-link{margin:0 !important; flex:none; white-space:nowrap;}
.page-header > .page-header-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 4px !important; flex-wrap:wrap;
}
.page-header > .page-header-row .page-title{margin:0 !important;}
.page-header > .breadcrumb{
  margin:0 0 0 !important; font-size:11px;
}
.page-header .back-link{margin:0 !important;}
.page-header-actions{display:flex; align-items:center; gap:10px; flex:none;}
.page-header-row,
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px !important;
  flex-wrap:wrap;
  width:100%;
}
.page-head > div:first-child,
.page-header-text{min-width:0; flex:1;}
.vehicle-slot{
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:12px; margin-top:10px;
}
.vehicle-slot-label{font-size:12px; font-weight:700; color:var(--text-soft); margin-bottom:8px;}
.with-driver-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; flex-wrap:wrap;}
.vo-slots{margin-top:4px;}