/* ══════════════════════════════════════════════════════════════
   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); }