/* ══════════════════════════════════════════════════════════════
   Facility Dashboard for JEDCO — page-specific styles
   Extends style.css (HANSA Mantine UI tokens + table.aip)
   ══════════════════════════════════════════════════════════════ */

.pg-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* ── Snapshot status row ──────────────────────────────────────── */
.snap-status {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; margin-bottom: 14px;
  background: var(--gray-0); border: 1px solid var(--gray-2);
  border-radius: var(--radius); font-size: 12.5px; color: var(--text-muted);
}
.snap-status-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.snap-status-info svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--gray-6); }
.snap-status strong { color: var(--gray-8); font-weight: 700; }

/* recon toggle */
.recon-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); white-space: nowrap; cursor: pointer; }
.recon-toggle input { accent-color: var(--blue); cursor: pointer; }

/* ── KPI sublabel tweak ───────────────────────────────────────── */
.kpi-val small { font-size: 13px; font-weight: 500; color: var(--text-muted); }

/* ── Matrix table additions ───────────────────────────────────── */
.matrix-wrap { overflow-x: auto; }
table.aip { min-width: 1100px; }

/* sticky first column (row labels) so they stay visible when scrolling wide */
table.aip th.lbl, table.aip td.lbl {
  position: sticky; left: 0; z-index: 3;
  background: var(--white); text-align: left;
  min-width: 320px; max-width: 460px;
}
table.aip thead th.lbl { z-index: 5; background: var(--gray-0); }
table.aip tr.l1 td.lbl { background: var(--white); }
table.aip tr.l3 td.lbl { background: var(--gray-0); }
table.aip tr.tot td.lbl { background: #1c2733; }

.lbl-inner { display: flex; align-items: center; }
.lbl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xb.leaf { visibility: hidden; }

/* Service-group band header */
table.aip thead th.band {
  text-align: center; color: #fff; font-weight: 700;
  border-left: 2px solid var(--white); border-right: 2px solid var(--white);
  letter-spacing: .02em;
}
table.aip thead th.plan {
  text-align: right; font-size: 10.5px; font-weight: 600;
  color: var(--gray-7); background: var(--gray-0);
  border-bottom: 1px solid var(--border);
  max-width: 120px; white-space: normal; line-height: 1.25;
}

/* Cell: count + optional condition chip */
td.cell { text-align: right; white-space: nowrap; font-family: var(--font-mono); font-size: 11.5px; }
td.cell .cnt { color: var(--gray-8); }
td.cell.empty { color: var(--gray-4); }
td.cell .cval {
  display: inline-block; min-width: 26px; margin-left: 6px;
  padding: 0 5px; border-radius: 3px; font-weight: 700; font-size: 11px;
}
/* condition colour scheme (ACA Update 6) */
.c1 { background: #2E7D32; color: #fff; }   /* very good */
.c2 { background: #8BC34A; color: #1b1b1b; } /* good */
.c3 { background: #FFC107; color: #1b1b1b; } /* poor */
.c4 { background: #E53935; color: #fff; }    /* very poor */

td.colsep { border-left: 2px solid var(--gray-2); }
td.unmapped-col, th.unmapped-col { background: #fff8f0; }

/* ── Mapping page ─────────────────────────────────────────────── */
.map-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.map-toolbar select, .map-toolbar input {
  font-family: var(--font); font-size: 13px; padding: 6px 10px;
  border: 1px solid var(--gray-3); border-radius: var(--radius);
  background: var(--white); color: var(--text);
}
.map-toolbar input { flex: 1; min-width: 160px; }
.map-toolbar .map-count { font-size: 12px; color: var(--text-muted); margin-left: auto; }

table.maptbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.maptbl th {
  padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
  background: var(--gray-0); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; white-space: nowrap;
}
table.maptbl th.r, table.maptbl td.r { text-align: right; }
table.maptbl td { padding: 6px 12px; border-bottom: 1px solid var(--gray-1); color: var(--text-dim); vertical-align: middle; }
table.maptbl tr:hover td { background: var(--gray-0); }
table.maptbl td.sys { font-weight: 500; color: var(--gray-8); }
.map-sg-badge { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 3px; color: #fff; white-space: nowrap; }
.map-select { font-family: var(--font); font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--gray-3); border-radius: var(--radius); background: var(--white); color: var(--text); max-width: 260px; }
.map-select.unmapped { border-color: #ffa94d; background: #fff8f0; color: #d9480f; }
.src-badge { font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px; margin-left: 6px; }
.src-badge.saved { background: var(--blue-0); color: var(--blue); border: 1px solid var(--blue-1); }
.src-badge.default { background: var(--gray-1); color: var(--gray-6); border: 1px solid var(--border); }
.save-flash { color: #2b8a3e; font-size: 11px; margin-left: 6px; opacity: 0; transition: opacity .2s; }
.save-flash.show { opacity: 1; }

.footnote { margin-top: 16px; font-size: 11px; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════
   Overview (visual dashboard) — vierter Tab
   ══════════════════════════════════════════════════════════════ */
:root{ --cc1:#2E7D32; --cc2:#8BC34A; --cc3:#FFC107; --cc4:#E53935; }
.cc1bg{ background:var(--cc1); } .cc2bg{ background:var(--cc2); }
.cc3bg{ background:var(--cc3); } .cc4bg{ background:var(--cc4); }

.ov-filter{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12px; color:var(--text-muted); margin-bottom:14px; }
.ov-filter .ov-chip{ background:var(--gray-0); border:1px solid var(--gray-2);
  border-radius:20px; padding:3px 11px; color:var(--gray-7); font-weight:600; }

.ov-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ov-span2{ grid-column:1 / -1; }
@media (max-width:900px){ .ov-grid{ grid-template-columns:1fr; } .ov-span2{ grid-column:auto; } }

/* hero: donut + condition distribution */
.ov-hero{ display:grid; grid-template-columns:210px 1fr; gap:24px; align-items:center; padding:14px 16px 18px; }
@media (max-width:560px){ .ov-hero{ grid-template-columns:1fr; } }
.ov-donut-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.ov-donut{ width:172px; height:172px; }
.ov-donut-pct{ font-size:30px; font-weight:800; fill:var(--gray-9); font-family:var(--font); }
.ov-donut-sub{ font-size:10.5px; font-weight:600; fill:var(--text-muted);
  text-transform:uppercase; letter-spacing:.08em; font-family:var(--font); }
.ov-donut-meta{ font-size:12px; color:var(--text-muted); text-align:center; }
.ov-donut-meta b{ color:var(--gray-8); font-weight:700; }

/* horizontal bar lists */
.barlist{ display:flex; flex-direction:column; gap:9px; padding:14px 16px 16px; }
.barrow{ display:grid; grid-template-columns:150px 1fr 78px; align-items:center; gap:12px; }
.barrow .blabel{ font-size:12px; color:var(--gray-8); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bartrack{ background:var(--gray-1); border-radius:5px; height:18px; overflow:hidden; }
.barfill{ height:100%; border-radius:5px; min-width:2px; transition:width .3s ease; }
.barval{ text-align:right; font-size:12px; font-weight:600; color:var(--gray-7);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.barval small{ color:var(--text-muted); font-weight:500; }
.stack{ display:flex; height:18px; border-radius:5px; overflow:hidden; background:var(--gray-1); }
.stackseg{ height:100%; }

.ov-leg{ display:flex; gap:16px; flex-wrap:wrap; padding:2px 16px 12px; font-size:11px; color:var(--text-dim); }
.ov-leg span{ display:inline-flex; align-items:center; gap:5px; }
.ov-leg i{ width:11px; height:11px; border-radius:2px; display:inline-block; }

.ov-note{ padding:18px 16px; font-size:12.5px; color:var(--text-muted); line-height:1.55; }
.ov-note b{ color:var(--gray-8); }

/* progress trend (SVG) */
.ov-trend{ width:100%; height:auto; display:block; padding:10px 12px 6px; }
.ov-trend .grid{ stroke:var(--gray-2); stroke-width:1; }
.ov-trend .area{ fill:var(--blue-lt); }
.ov-trend .line{ fill:none; stroke:var(--blue); stroke-width:2; }
.ov-trend .dot{ fill:var(--blue); }
.ov-trend text{ fill:var(--text-muted); font-size:10px; font-family:var(--font); }
.ov-trend .vlbl{ fill:var(--gray-8); font-weight:700; font-size:11px; }

/* 4-column stacked rows: label | total assets | stack | scored · avg */
.barrow4{ grid-template-columns:150px 74px 1fr 148px; }
.barhdr{ font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-muted); padding-bottom:2px; }
.barhdr div{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seg-link{ cursor:pointer; }
.seg-link:hover{ filter:brightness(1.15); }
.seg-link:focus-visible{ outline:2px solid var(--blue); outline-offset:1px; }
@media (max-width:700px){ .barrow4{ grid-template-columns:110px 60px 1fr 120px; } }

/* Condition History drill-down */
.hxb, .sxb{ font-family:var(--font-mono); font-size:10px; line-height:1;
  width:18px; height:18px; border:1px solid var(--gray-3); border-radius:3px;
  background:var(--white); color:var(--gray-7); cursor:pointer; vertical-align:middle;
  display:inline-flex; align-items:center; justify-content:center; }
.hxb:hover, .sxb:hover{ background:var(--gray-0); color:var(--gray-9); }
.hxb:disabled{ opacity:.5; cursor:wait; }
tr.hist-sub td{ background:var(--gray-0); font-size:11.5px; }
tr.hist-asset td{ background:#fcfcfd; }
.hist-dim{ color:var(--text-muted); font-size:10.5px; font-weight:400; }