/* ---------- buttons ---------- */
.btn{
  border:0;
  border-radius:var(--r-m);
  padding:10px 16px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  transition:filter .12s;
  background:var(--surface);
  color:var(--ink);
}
.btn:hover{filter:brightness(1.07)}
.btn-p{background:var(--navy);color:var(--white)}
.btn-b{background:var(--blue);color:var(--white)}
.btn-g{background:var(--green);color:var(--white)}
.btn-o{background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.btn-d{background:var(--red-bg);color:var(--red-tx)}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:var(--r-s)}
.btn-block{width:100%;justify-content:center}

/* ---------- card ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  box-shadow:var(--sh-1);
}
.card-h{
  padding:16px 18px;
  border-bottom:1px solid var(--line-2);
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.card-h h2{font-size:15.5px;margin:0;font-weight:700}
.card-h .sub{font-size:12.5px;color:var(--gray)}
.card-b{padding:18px}
.card-flush{overflow:hidden}

/* ---------- kpi ---------- */
.kpi{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:16px;
  box-shadow:var(--sh-1);
}
.kpi .ic{
  width:38px;height:38px;
  border-radius:11px;
  display:grid;place-items:center;
  margin-bottom:10px;
}
.kpi .ic svg{width:18px;height:18px}
.kpi b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.kpi span{font-size:12.5px;color:var(--gray)}
.kpi em{font-style:normal;font-size:12px;color:var(--green-tx);font-weight:700}
.kpi-tone-blue .ic{background:var(--blue-bg);color:var(--blue)}
.kpi-tone-green .ic{background:var(--green-bg);color:var(--green)}
.kpi-tone-amber .ic{background:var(--amber-bg);color:var(--amber)}
.kpi-tone-red .ic{background:var(--red-bg);color:var(--red)}

/* ---------- tags ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:5px;
  border-radius:999px;
  padding:3px 10px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  line-height:1.25;
}
.t-ok{background:var(--green-bg);color:var(--green-tx)}
.t-wait{background:var(--amber-bg);color:var(--amber)}
.t-no{background:var(--red-bg);color:var(--red-tx)}
.t-info{background:var(--blue-bg);color:var(--blue-tx)}
.t-mute{background:var(--tag-mute-bg);color:var(--tag-mute-tx)}

.action-row{
  display:inline-flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
}
.action-row .btn{
  flex:0 0 auto;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
}

/* Center action buttons inside table cells / cards */
.table-wrap td:last-child,
td:has(.action-row),
td:has(> .btn){
  text-align:center;
  vertical-align:middle;
}
td .btn{
  margin-inline:auto;
}
.card-h .btn{
  justify-content:center;
  text-align:center;
}
.seg .btn{
  justify-content:center;
  text-align:center;
}
/* ---------- fields ---------- */
.field{margin-bottom:14px;min-width:0}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.field input,
.field select,
.field textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  background:var(--field);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:10px 12px;
  font-size:14px;
}
.field input[type="date"]{
  min-width:0;
  max-width:100%;
}
.field textarea{resize:vertical;min-height:80px}
.field .hint{font-size:12.5px;color:var(--gray);margin-top:5px}
.row2{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  min-width:0;
}
.row2 > .field{margin-bottom:14px}

.note{
  background:var(--blue-bg);
  border:1px solid var(--navy-50);
  border-radius:var(--r-m);
  padding:12px 14px;
  font-size:13px;
  color:var(--navy);
}
.note b{font-weight:700}

/* ---------- tables ---------- */
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th{
  text-align:left;
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gray);
  font-weight:700;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:var(--table-head);
  position:sticky;
  top:0;
  z-index:1;
}
body[data-page="scan-records"] th{
  text-align:center;
}
td{
  padding:12px 14px;
  border-bottom:1px solid var(--line-2);
  font-size:14px;
  vertical-align:middle;
}
tbody tr[data-row]{cursor:pointer}
tbody tr:hover{background:var(--table-hover)}
tbody tr.is-selected{background:var(--blue-bg)}
tbody tr.is-leaving{
  opacity:0;
  transform:translateX(12px);
  transition:opacity .25s,transform .25s;
}

.table-foot{
  padding:12px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  border-top:1px solid var(--line-2);
  flex-wrap:wrap;
}
.table-foot select{
  border:1px solid var(--line);
  border-radius:var(--r-s);
  padding:5px 8px;
  background:var(--surface);
  font-size:13px;
}

/* ---------- tabs ---------- */
.tabs{
  display:flex;
  gap:4px;
  border-bottom:1px solid var(--line);
  padding:0 18px;
  flex-wrap:wrap;
}
.tab{
  border:0;
  background:none;
  padding:11px 12px;
  font-size:14px;
  color:var(--gray);
  cursor:pointer;
  border-bottom:2px solid transparent;
  font-weight:700;
}
.tab[aria-selected="true"]{
  color:var(--navy);
  border-bottom-color:var(--navy);
}
.tab .n{
  background:var(--tag-mute-bg);
  color:var(--tag-mute-tx);
  border-radius:999px;
  font-size:11px;
  padding:1px 6px;
  margin-left:5px;
  font-weight:700;
}

/* ---------- chips / filter rail ---------- */
.chipbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  padding:12px 18px;
  border-bottom:1px solid var(--line-2);
  background:var(--table-head);
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--blue-bg);
  color:var(--blue-tx);
  border-radius:999px;
  padding:4px 6px 4px 11px;
  font-size:12.5px;
  font-weight:700;
}
.chip button{
  border:0;
  background:var(--navy-50);
  color:var(--blue-tx);
  width:17px;height:17px;
  border-radius:50%;
  cursor:pointer;
  font-size:11px;
  line-height:1;
  display:grid;place-items:center;
}

.rail{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.rail > .card{
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
.rail .card-b{
  min-width:0;
}
.rail .row2{
  gap:10px;
}
.rail .row2 .field input[type="date"]{
  padding:9px 8px;
  font-size:13px;
}
.rail .row2 .field input[type="date"]::-webkit-calendar-picker-indicator{
  margin-left:0;
  padding:0;
  width:16px;
  height:16px;
}

/* ---------- kv / drawer ---------- */
.kv{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--line-2);
}
.kv span{color:var(--gray);font-size:13.5px;flex:0 0 auto}
.kv b{font-weight:700;text-align:right;font-size:13.5px;word-break:break-all}

.payload{
  background:var(--field);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:11px 12px;
  margin-top:6px;
  word-break:break-all;
}

.scrim{
  position:fixed;
  inset:0;
  background:var(--scrim);
  z-index:40;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}
.scrim.is-open{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;
  top:0;right:0;bottom:0;
  width:min(430px,92%);
  background:var(--surface);
  z-index:50;
  box-shadow:var(--sh-3);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .22s ease;
  visibility:hidden;
  pointer-events:none;
}
.drawer.is-open{
  transform:translateX(0);
  visibility:visible;
  pointer-events:auto;
}
.drawer-h{
  padding:16px 18px;
  border-bottom:1px solid var(--line-2);
  display:flex;
  align-items:center;
  gap:10px;
}
.drawer-h h3{margin:0;font-size:16px;font-weight:700;flex:1}
.drawer-b{padding:18px;overflow:auto;flex:1}
.drawer-f{
  padding:14px 18px;
  border-top:1px solid var(--line-2);
  display:flex;
  gap:10px;
}

/* ---------- empty ---------- */
.empty{text-align:center;padding:44px 20px}
.empty .ic{
  width:52px;height:52px;
  border-radius:16px;
  background:var(--blue-bg);
  color:var(--blue);
  display:grid;place-items:center;
  margin:0 auto 12px;
}
.empty .ic.is-ok{background:var(--green-bg);color:var(--green)}
.empty .ic.is-err{background:var(--red-bg);color:var(--red)}
.empty b{display:block;font-size:15px;margin-bottom:4px;font-weight:700}
.empty p{margin:0 0 14px;color:var(--gray);font-size:13.5px}

/* ---------- toggle ---------- */
.sw{
  width:38px;height:22px;
  border-radius:999px;
  background:var(--toggle-off);
  position:relative;
  display:inline-block;
  cursor:pointer;
  transition:background .15s;
  border:0;
  padding:0;
  vertical-align:middle;
}
.sw::after{
  content:"";
  position:absolute;
  top:3px;left:3px;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--white);
  transition:transform .15s;
  box-shadow:var(--sh-1);
}
.sw.on{background:var(--green)}
.sw.on::after{transform:translateX(16px)}
.sw.lock{
  background:var(--navy);
  opacity:.35;
  cursor:not-allowed;
}
.sw.lock::after{transform:translateX(16px)}

/* ---------- permission matrix ---------- */
.matrix-wrap{overflow:auto}
.matrix td:first-child{font-weight:700}
.matrix th:not(:first-child),
.matrix td:not(:first-child){text-align:center;width:126px}
.matrix th:first-child,
.matrix td:first-child{min-width:230px}
.matrix .stick{
  position:sticky;
  left:0;
  background:var(--surface);
  z-index:2;
  box-shadow:1px 0 0 var(--line-2);
}
.matrix thead .stick{background:var(--table-head);z-index:3}
.matrix tbody tr:hover .stick{background:var(--table-hover)}
.colsub{
  font-size:11px;
  font-weight:700;
  color:var(--gray);
  text-transform:none;
  letter-spacing:0;
  margin-top:2px;
}
.matrix .grp{
  background:var(--table-head);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gray);
  font-weight:700;
}

.dep-warn{
  margin:12px 18px 16px;
  padding:12px 14px;
  background:var(--amber-bg);
  border:1px solid var(--amber);
  border-radius:var(--r-m);
  color:var(--ink);
  font-size:13px;
  display:none;
}
.dep-warn.is-visible{display:block}

/* ---------- segment / progress / toast ---------- */
.seg{display:flex;gap:8px}
.seg .btn{flex:1;justify-content:center}
.progress{
  height:4px;
  background:var(--line);
  border-radius:999px;
  margin-top:6px;
  width:90px;
  overflow:hidden;
}
.progress > i{
  display:block;
  height:100%;
  background:var(--amber);
  border-radius:999px;
}

.toast-host{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:80;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:360px;
}
.toast{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:4px solid var(--navy);
  border-radius:var(--r-m);
  box-shadow:var(--sh-3);
  padding:12px 14px;
  font-size:13.5px;
  font-weight:700;
  animation:toast-in .2s ease;
}
.toast.ok{border-left-color:var(--green)}
.toast.warn{border-left-color:var(--amber)}
.toast.err{border-left-color:var(--red)}
.toast.info{border-left-color:var(--blue)}

@keyframes toast-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.unsaved-bar{
  position:sticky;
  bottom:0;
  display:none;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  background:var(--navy);
  color:var(--white);
  border-radius:0 0 var(--r-l) var(--r-l);
  z-index:5;
}
.unsaved-bar.is-visible{display:flex}
.unsaved-bar .btn-o{border-color:transparent}

.bar-chart{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:74px;
}
.bar-chart span{
  flex:1;
  background:var(--navy-50);
  border-radius:5px 5px 0 0;
  min-height:4px;
}
.bar-chart span.is-peak{background:var(--navy)}

.urgent{color:var(--red-tx);font-weight:700}

.icon-btn{
  width:38px;height:38px;
  border-radius:var(--r-m);
  border:1px solid var(--line);
  background:var(--surface);
  display:grid;place-items:center;
  cursor:pointer;
  position:relative;
  color:var(--ink-2);
  padding:0;
}
.icon-btn .dot{
  position:absolute;
  top:5px;right:5px;
  min-width:16px;height:16px;
  border-radius:999px;
  background:var(--red);
  color:var(--white);
  font-size:10px;
  font-weight:700;
  display:grid;place-items:center;
  padding:0 4px;
}

.search{position:relative;flex:0 1 300px}
.search input{
  width:100%;
  background:var(--field);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:9px 12px 9px 34px;
  font-size:14px;
}
.search input::placeholder{color:var(--muted)}
.search .g{
  position:absolute;
  left:11px;top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  pointer-events:none;
  display:grid;
}
.search .g svg{width:14px;height:14px}

.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-dash{grid-template-columns:1.55fr 1fr}
.grid-reports{grid-template-columns:1fr 1.35fr}
.grid-states{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.inline-select{
  border:1px solid var(--line);
  border-radius:var(--r-s);
  padding:5px 8px;
  background:var(--surface);
  font-size:13px;
  margin-right:6px;
  max-width:180px;
}

.section-label{
  margin:20px 0 8px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:11.5px;
  color:var(--gray);
}
.section-label:first-child{margin-top:0}

.confirm-box{
  position:fixed;
  inset:0;
  z-index:70;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.confirm-box.is-open{display:flex}
.confirm-box .scrim{position:absolute;opacity:1;pointer-events:auto}
.confirm-panel{
  position:relative;
  z-index:1;
  background:var(--surface);
  border-radius:var(--r-l);
  box-shadow:var(--sh-3);
  padding:22px;
  max-width:420px;
  width:100%;
}
.confirm-panel h3{font-size:18px;font-weight:700;margin:0 0 8px}
.confirm-panel p{color:var(--ink-2);margin:0 0 18px;font-size:14.5px}
.confirm-actions{display:flex;gap:10px;justify-content:flex-end}

@media (max-width:1080px){
  .rail{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .grid-dash{grid-template-columns:1fr}
  .grid-reports{grid-template-columns:1fr}
}