:root { color-scheme: light; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #F0F4FA; color: #1a1a2e; font-size: 13px; }

.header { background: #1F3864; color: #fff; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; }
.header h1 { font-size: 16px; font-weight: 700; }
.header .meta { font-size: 11px; opacity: .8; text-align: right; }

/* ---- User menu ---- */
.user-menu-wrap { position: relative; display: inline-block; margin-top: 4px; }
.user-menu-btn {
  background: none; border: none; color: inherit; font: inherit; font-size: 10px;
  cursor: pointer; opacity: .8; padding: 2px 4px; border-radius: 4px;
  text-decoration: underline dotted; white-space: nowrap;
}
.user-menu-btn:hover { opacity: 1; background: rgba(255,255,255,.15); }
.user-menu-popup {
  position: fixed; z-index: 2000;
  background: #fff; color: #1a1a2e; border: 1px solid #D0D8E8;
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.15);
  min-width: 200px; padding: 12px;
}
.user-menu-info { margin-bottom: 10px; }
.user-menu-name { font-size: 12px; font-weight: 600; word-break: break-all; }
.user-menu-role { font-size: 10px; color: #5a6a80; margin-top: 2px; text-transform: capitalize; }
.user-menu-signout {
  width: 100%; padding: 6px 10px; border-radius: 5px;
  border: 1.5px solid #D0D8E8; background: #fff; color: #1a1a2e;
  font-size: 12px; cursor: pointer; text-align: left;
}
.user-menu-signout:hover { background: #F0F4FA; border-color: #2E4D8C; }

.cards { display: flex; gap: 10px; padding: 14px 16px 8px; flex-wrap: wrap; }
.card { background: #fff; border: 1.5px solid #D0D8E8; border-radius: 8px; padding: 12px 16px; flex: 1; min-width: 110px; cursor: pointer; transition: all .15s; }
.card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); border-color: #2E4D8C; }
.card.active { border-color: #1F3864; border-width: 2px; box-shadow: 0 2px 8px rgba(31,56,100,.18); }
.card .val { font-size: 26px; font-weight: 700; line-height: 1.1; }
.card .lbl { font-size: 10px; color: #5a6a80; margin-top: 3px; text-transform: uppercase; letter-spacing: .4px; }
.c-all  .val { color: #1F3864; }
.c-fill .val { color: #1a7340; }
.c-areq .val { color: #2E6DA4; }
.c-vac  .val { color: #C8860A; }

.chart-strip { background: #fff; border: 1px solid #D0D8E8; border-radius: 8px; padding: 8px 16px 6px; margin: 0 16px 8px; }
.chart-strip h3 { font-size: 11px; font-weight: 700; color: #5a6a80; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.chart-strip canvas { max-height: 110px; }

.main { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 10px; }
.right-panel { display: flex; flex-direction: column; gap: 10px; }

.vert-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.vpill { border: 1.5px solid #D0D8E8; border-radius: 16px; padding: 4px 12px; font-size: 11px; cursor: pointer; background: #fff; color: #5a6a80; transition: all .15s; white-space: nowrap; }
.vpill:hover { border-color: #2E4D8C; color: #1F3864; }
.vpill.active { background: #1F3864; color: #fff; border-color: #1F3864; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters input, .filters select {
  border: 1.5px solid #D0D8E8; border-radius: 6px; padding: 6px 9px;
  font-size: 12px; color: #1a1a2e; background: #fff; outline: none;
  transition: border-color .15s;
}
.filters input { min-width: 200px; }
.filters input:focus, .filters select:focus { border-color: #2E4D8C; }
.clear-btn { padding: 6px 12px; border-radius: 6px; border: 1.5px solid #D0D8E8; background: #fff; color: #5a6a80; cursor: pointer; font-size: 12px; }
.clear-btn:hover { background: #eee; }
.count-lbl { font-size: 11px; color: #5a6a80; margin-left: auto; }

.tbl-wrap { background: #fff; border: 1px solid #D0D8E8; border-radius: 8px; overflow: hidden; }
.tbl-scroll { overflow-x: auto; max-height: calc(100vh - 360px); min-height: 420px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; min-width: 900px; }
thead { position: sticky; top: 0; z-index: 10; }
thead th { background: #1F3864; color: #fff; padding: 8px 9px; text-align: left; font-size: 10.5px; font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none; }
thead th:hover { background: #2E4D8C; }
tbody tr { border-bottom: 1px solid #E4EAF5; transition: filter .1s; }
tbody tr:hover { filter: brightness(.94); }
tbody td { padding: 6px 9px; font-size: 11.5px; vertical-align: middle; }
td.posid { font-family: Consolas, monospace; font-weight: 700; font-size: 11px; white-space: nowrap; }
td.name { font-weight: 600; }
td.notes { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.r-filled { background: #EEF4FF; }
.r-filled:nth-child(even) { background: #DCE8FB; }
.r-vacant { background: #FFF8E0; }
.r-vacant:nth-child(even) { background: #FFF2C2; }
.r-active { background: #E6F1FB; }
.r-active:nth-child(even) { background: #D0E2F6; }
.r-other  { background: #F2F2F2; color: #5a6a80; }
.r-other:nth-child(even) { background: #E8E8E8; }

.badge { display: inline-block; padding: 2px 7px; border-radius: 9px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.b-fill { background: #c8e6c9; color: #1b5e20; }
.b-vac  { background: #fff3cd; color: #7b5000; border: 1px solid #ffc107; }
.b-areq { background: #d0e2f6; color: #163a66; border: 1px solid #2E6DA4; }
.b-other { background: #e0e0e0; color: #444; border: 1px solid #aaa; }

.no-res { text-align: center; padding: 30px; color: #8a9ab0; font-size: 13px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 8px 16px 14px; font-size: 10.5px; color: #5a6a80; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend .credit { margin-left: auto; color: #8a9ab0; font-style: italic; }
.swatch { width: 13px; height: 13px; border-radius: 2px; border: 1px solid #aaa; display: inline-block; flex-shrink: 0; }

.recon-wrap { background:#fff; border:1.5px solid #C00000; border-radius:8px; margin:0 16px 10px; }
.recon-head { background:#FFE4E4; padding:9px 14px; border-radius:7px 7px 0 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.recon-head:hover { background:#FFD0D0; }
.recon-head h3 { font-size:13px; color:#7a0000; }
.recon-meta { font-size:11px; color:#7a0000; }
.recon-meta code { background:#fff; padding:1px 5px; border-radius:3px; font-family:Consolas,monospace; font-size:10.5px; }
.recon-body { padding:12px 14px 14px; }
.recon-body.collapsed { display:none; }
.recon-cards { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.rcard { flex:1; min-width:140px; background:#FAFCFF; border:1.5px solid #D0D8E8; border-radius:6px; padding:8px 12px; }
.rcard .rval { font-size:22px; font-weight:700; line-height:1.1; }
.rcard .rlbl { font-size:10px; color:#5a6a80; margin-top:2px; text-transform:uppercase; letter-spacing:.3px; }
.rc-open  .rval { color:#1F3864; }
.rc-orph  .rval { color:#C00000; }
.rc-clsd  .rval { color:#9b6b00; }
.rc-mult  .rval { color:#7a3a00; }
.recon-unclaimed { color:#C00000; font-style:italic; font-family:system-ui,sans-serif; font-weight:600; }
.recon-empty { padding:16px; text-align:center; color:#8a9ab0; font-size:12px; }
.recon-note { font-size:11.5px; color:#5a6a80; background:#FFFCE0; border:1px solid #F0DA88; border-radius:5px; padding:8px 10px; margin-bottom:10px; }
.recon-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.rtab { font-size:11px; padding:5px 11px; border-radius:14px; border:1.5px solid #D0D8E8; background:#fff; color:#5a6a80; cursor:pointer; }
.rtab:hover { border-color:#C00000; color:#7a0000; }
.rtab.active { background:#C00000; color:#fff; border-color:#C00000; }
.recon-list { max-height:280px; overflow-y:auto; border:1px solid #E4EAF5; border-radius:5px; }
.recon-list table { width:100%; border-collapse:collapse; font-size:11px; }
.recon-list thead th { position:sticky; top:0; background:#5a6a80; color:#fff; padding:6px 8px; text-align:left; font-size:10.5px; font-weight:600; }
.recon-list tbody td { padding:5px 8px; border-bottom:1px solid #E4EAF5; vertical-align:top; }
.recon-list tbody tr:nth-child(even) { background:#F8FAFC; }
.recon-list .posid { font-family:Consolas,monospace; font-weight:700; font-size:10.5px; }

.behind-wrap { background:#fff; border:1.5px solid #C8860A; border-radius:8px; margin:0 16px 10px; }
.behind-head { background:#FFF3CD; padding:9px 14px; border-radius:7px 7px 0 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.behind-head:hover { background:#FFE9A8; }
.behind-head h3 { font-size:13px; color:#7b5000; }
.behind-meta { font-size:11px; color:#7b5000; }
.behind-body { padding:12px 14px 14px; }
.behind-body.collapsed { display:none; }
.behind-note { font-size:11.5px; color:#5a6a80; background:#FFFCE0; border:1px solid #F0DA88; border-radius:5px; padding:8px 10px; margin-bottom:10px; }
.behind-list { max-height:280px; overflow-y:auto; border:1px solid #E4EAF5; border-radius:5px; }
.behind-list table { width:100%; border-collapse:collapse; font-size:11px; }
.behind-list thead th { position:sticky; top:0; background:#C8860A; color:#fff; padding:6px 8px; text-align:left; font-size:10.5px; font-weight:600; }
.behind-list tbody td { padding:5px 8px; border-bottom:1px solid #E4EAF5; vertical-align:top; }
.behind-list tbody tr:nth-child(even) { background:#FFFBED; }
.behind-list .posid { font-family:Consolas,monospace; font-weight:700; font-size:10.5px; }

.filters .dyn-pill {
  display:inline-flex; align-items:center; gap:6px;
  background:#EEF4FF; border:1.5px solid #2E4D8C; border-radius:14px;
  padding:3px 6px 3px 10px; font-size:11px; color:#1F3864;
}
.filters .dyn-pill select { border:none; background:transparent; font-size:11px; color:#1F3864; padding:2px 4px; cursor:pointer; outline:none; max-width:180px; }
.filters .dyn-pill .dyn-x { cursor:pointer; background:#1F3864; color:#fff; border:none; border-radius:50%; width:16px; height:16px; font-size:10px; line-height:16px; padding:0; text-align:center; }
.filters .dyn-pill .dyn-x:hover { background:#C00000; }
.filters .add-filter-wrap { position:relative; display:inline-block; }
.filters .add-filter-btn { border:1.5px dashed #2E4D8C; background:#fff; color:#1F3864; padding:5px 10px; border-radius:6px; font-size:12px; cursor:pointer; font-weight:600; }
.filters .add-filter-btn:hover { background:#EEF4FF; }
.filters .add-filter-menu { position:absolute; top:calc(100% + 4px); left:0; background:#fff; border:1.5px solid #2E4D8C; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.15); z-index:50; min-width:180px; max-height:280px; overflow-y:auto; display:none; }
.filters .add-filter-menu.open { display:block; }
.filters .add-filter-menu button { display:block; width:100%; text-align:left; padding:7px 12px; background:#fff; border:none; font-size:12px; color:#1a1a2e; cursor:pointer; }
.filters .add-filter-menu button:hover { background:#EEF4FF; }
.filters .add-filter-menu button:disabled { color:#aaa; cursor:not-allowed; background:#f4f4f4; }

.viewonly-banner { background:#F0A500; color:#1a1a2e; padding:10px 40px 10px 40px; font-size:12px; font-weight:600; text-align:center; border-bottom:2px solid #C8860A; position:relative; }
.banner-close { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:transparent; border:none; color:#1a1a2e; font-size:18px; line-height:1; cursor:pointer; padding:0 4px; opacity:.7; font-weight:700; }
.banner-close:hover { opacity:1; }
.wipe-notice { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  background:#7a0000; color:#fff; padding:10px 16px; font-size:12px; font-weight:600;
  border-bottom:2px solid #4d0000; }
.wipe-notice[hidden] { display:none; }
.wipe-notice-btn { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.5); color:#fff;
  border-radius:6px; padding:3px 10px; font-size:11px; font-weight:700; cursor:pointer; }
.wipe-notice-btn:hover { background:rgba(255,255,255,.28); }

/* ---- edit button + modal ---- */
td.actions { text-align:center; padding:2px 4px !important; }
.edit-btn {
  background:#fff; border:1.5px solid #2E4D8C; color:#1F3864;
  border-radius:5px; padding:2px 8px; font-size:12px; cursor:pointer;
  line-height:1.2; font-weight:600;
}
.edit-btn:hover { background:#1F3864; color:#fff; }

.modal-backdrop {
  position:fixed; inset:0; background:rgba(15,25,45,.55); z-index:1000;
  display:flex; align-items:flex-start; justify-content:center; padding:30px 16px;
  overflow-y:auto;
}
.modal-backdrop[hidden] { display:none; }
.modal {
  background:#fff; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.3);
  width:100%; max-width:880px; max-height:calc(100vh - 60px);
  display:flex; flex-direction:column; overflow:hidden;
}
.modal-head {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:14px 18px; background:#1F3864; color:#fff;
}
.modal-head h3 { font-size:15px; font-weight:700; }
.modal-head code { background:rgba(255,255,255,.15); padding:1px 7px; border-radius:3px; font-family:Consolas,monospace; font-size:13px; }
.em-sub { font-size:11px; opacity:.8; margin-top:3px; }
.modal-close {
  background:transparent; border:none; color:#fff; font-size:24px;
  line-height:1; cursor:pointer; padding:0 4px;
}
.modal-close:hover { color:#FFD0D0; }
.modal-body { padding:14px 18px 18px; overflow-y:auto; }

.em-grid {
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:8px 14px; margin-bottom:12px;
}
.em-grid label {
  display:flex; flex-direction:column; gap:3px;
  font-size:11px; font-weight:600; color:#5a6a80;
}
.em-grid input, .em-grid select, .em-grid textarea {
  border:1.5px solid #D0D8E8; border-radius:5px; padding:5px 8px;
  font-size:12px; color:#1a1a2e; background:#fff; outline:none;
  font-family:inherit;
}
.em-grid input:focus, .em-grid select:focus, .em-grid textarea:focus { border-color:#2E4D8C; }
.em-grid .em-wide { grid-column:1 / -1; }
/* Author display: beats the UA [hidden] rule, so conditional fields need this guard. */
.em-grid label[hidden] { display:none; }
.em-locked {
  display:block; padding:7px 10px; border-radius:5px;
  background:#FFF8E6; border:1px solid #E8D5A5; color:#6b5310; font-size:11px;
}
.em-locked[hidden] { display:none; }
.em-grid textarea { resize:vertical; min-height:42px; }
.em-hint { font-weight:400; color:#8a9ab0; font-size:10px; }

.em-actions {
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding:10px 0; border-top:1px solid #E4EAF5; border-bottom:1px solid #E4EAF5;
}
.em-primary { background:#1F3864; color:#fff; border:none; border-radius:5px; padding:7px 16px; font-size:12px; font-weight:600; cursor:pointer; }
.em-primary:hover { background:#2E4D8C; }
.em-primary:disabled { background:#aaa; cursor:not-allowed; }
.em-warn { background:#C8860A; color:#fff; border:none; border-radius:5px; padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer; }
.em-warn:hover { background:#a67000; }
.em-warn:disabled { background:#ddd; color:#888; cursor:not-allowed; }
.em-actions button:last-of-type, #em-cancel { background:#fff; color:#5a6a80; border:1.5px solid #D0D8E8; }
#em-cancel { padding:6px 14px; border-radius:5px; font-size:12px; cursor:pointer; font-weight:600; }
#em-cancel:hover { background:#eee; }
.em-status { font-size:11px; margin-left:auto; }
.em-status.ok { color:#1a7340; }
.em-status.err { color:#C00000; }

.em-errors {
  display:block; margin-bottom:12px; padding:10px 12px;
  background:#FDECEC; border:1px solid #E8A5A5; border-left:4px solid #C00000; border-radius:5px;
}
/* Author styles beat the UA [hidden] rule, so the guard is required. */
.em-errors[hidden] { display:none; }
.em-errors strong { display:block; font-size:12px; color:#8B0000; margin-bottom:4px; }
.em-errors ul { margin:0; padding-left:18px; }
.em-errors li { font-size:11.5px; color:#5a2020; line-height:1.6; }
.em-grid .em-invalid input, .em-grid .em-invalid select,
.em-grid input.em-invalid, .em-grid select.em-invalid { border-color:#C00000; background:#FFF7F7; }
.em-required::after { content:" *"; color:#C00000; font-weight:700; }

.em-audit { margin-top:12px; }
.em-audit h4 { font-size:11px; font-weight:700; color:#5a6a80; text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
.em-audit-body { max-height:200px; overflow-y:auto; border:1px solid #E4EAF5; border-radius:5px; font-size:11px; }
.em-audit-body table { width:100%; border-collapse:collapse; }
.em-audit-body th { background:#5a6a80; color:#fff; padding:5px 8px; text-align:left; font-size:10px; font-weight:600; position:sticky; top:0; }
.em-audit-body td { padding:4px 8px; border-bottom:1px solid #E4EAF5; vertical-align:top; }
.em-audit-body tr:nth-child(even) td { background:#F8FAFC; }
.em-audit-body .em-ct { font-family:Consolas,monospace; font-size:10px; padding:1px 5px; border-radius:3px; font-weight:600; }
.em-ct.ct-create   { background:#c8e6c9; color:#1b5e20; }
.em-ct.ct-close    { background:#e0e0e0; color:#444; }
.em-ct.ct-status   { background:#fff3cd; color:#7b5000; }
.em-ct.ct-link-req { background:#d0e2f6; color:#163a66; }
.em-ct.ct-unlink-req { background:#FFE4E4; color:#7a0000; }
.em-ct.ct-update   { background:#EEF4FF; color:#1F3864; }
.em-audit-body .em-empty { padding:14px; text-align:center; color:#8a9ab0; }

/* ---- Dataset toolbar (Demo/Live + uploads/extract/restore) ---- */
.toolbar { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid #D0D8E8; border-radius:8px; padding:8px 14px;
  margin:8px 16px 0; }
.ds-toggle { display:inline-flex; align-items:center; gap:6px; }
.ds-toggle[hidden] { display:none; }
.ds-toggle-lbl { font-size:11px; color:#5a6a80; text-transform:uppercase; letter-spacing:.4px; margin-right:4px; font-weight:700; }
.ds-pill { border:1.5px solid #D0D8E8; background:#fff; color:#5a6a80; padding:5px 14px;
  font-size:12px; cursor:pointer; transition:all .15s; font-weight:600; }
.ds-pill:first-of-type { border-radius:14px 0 0 14px; border-right-width:.75px; }
.ds-pill:last-of-type  { border-radius:0 14px 14px 0; border-left-width:.75px; }
.ds-pill:hover { color:#1F3864; border-color:#2E4D8C; }
.ds-pill.active { background:#1F3864; color:#fff; border-color:#1F3864; }
.ds-pill[data-ds="live"].active { background:#1a7340; border-color:#1a7340; }
.ds-pill[disabled] { opacity:.45; cursor:not-allowed; }
.ds-last { font-size:11px; color:#8a9ab0; margin-left:10px; }

.toolbar-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tb-btn { border:1.5px solid #D0D8E8; background:#fff; color:#1F3864; padding:5px 12px;
  border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.tb-btn:hover { border-color:#2E4D8C; background:#F4F8FE; }
.tb-btn[disabled] { opacity:.45; cursor:not-allowed; }
.tb-btn.tb-danger { border-color:#E5B4B4; color:#C00000; }
.tb-btn.tb-danger:hover { border-color:#C00000; background:#FDF2F2; }
.tb-btn.tb-danger[hidden] { display:none; }
.tb-menu-wrap { position:relative; }
.tb-menu { position:absolute; right:0; top:calc(100% + 4px); min-width:180px;
  background:#fff; border:1px solid #D0D8E8; border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,.12);
  z-index:50; display:flex; flex-direction:column; padding:4px; }
.tb-menu[hidden] { display:none; }
.tb-menu.wide { min-width:320px; max-height:340px; overflow-y:auto; }
.tb-menu button, .tb-menu a { display:block; width:100%; text-align:left; background:none; border:0;
  padding:7px 10px; font-size:12px; color:#1a1a2e; cursor:pointer; border-radius:4px; text-decoration:none; }
.tb-menu button:hover, .tb-menu a:hover { background:#F4F8FE; color:#1F3864; }
.tb-menu .archive-item { display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-bottom:1px solid #EEF2F7; cursor:pointer; }
.tb-menu .archive-item:last-child { border-bottom:0; }
.tb-menu .archive-item:hover { background:#F4F8FE; }
.tb-menu .archive-when { font-size:11px; color:#5a6a80; }
.tb-menu .archive-sect { font-weight:700; color:#1F3864; }
.tb-menu .archive-empty { padding:14px; text-align:center; color:#8a9ab0; font-size:12px; }

/* ---- Upload modal extras ---- */
.up-template-row { display:flex; gap:8px; align-items:center; font-size:11px; color:#5a6a80; }
/* Author styles beat the UA [hidden] rule, so the guard is required. */
.up-template-row[hidden] { display:none; }
.up-link { background:none; border:0; color:#2E6DA4; text-decoration:underline; cursor:pointer; font-size:11px; padding:0 4px; }
.up-link:hover { color:#1F3864; }
.up-result { background:#F0F4FA; border:1px solid #D0D8E8; border-radius:6px; padding:10px 12px;
  font-family:'Consolas',monospace; font-size:11px; color:#1a1a2e; margin-top:10px; max-height:220px; overflow:auto; white-space:pre-wrap; }

/* ---- Delete-all-Live modal ---- */
.wipe-modal { max-width:520px; }
.wipe-warn { background:#FDF2F2; border:1px solid #E5B4B4; border-radius:6px; padding:10px 12px;
  font-size:12px; color:#7a0000; margin-bottom:10px; }
.wipe-confirm { display:flex; flex-direction:column; gap:4px; font-size:11px; color:#5a6a80; margin:12px 0 4px; }
.wipe-confirm code { background:#F0F4FA; border:1px solid #D0D8E8; border-radius:3px; padding:0 4px;
  font-family:Consolas,monospace; color:#C00000; }
.wipe-confirm input { border:1.5px solid #D0D8E8; border-radius:6px; padding:7px 9px; font-size:13px;
  font-family:Consolas,monospace; letter-spacing:.5px; outline:none; }
.wipe-confirm input:focus { border-color:#C00000; }
.wipe-purge { display:flex; align-items:flex-start; gap:7px; font-size:11.5px; color:#5a6a80; margin:10px 0 4px; cursor:pointer; }
.wipe-purge input { margin-top:1px; accent-color:#C00000; }
.wipe-purge strong { color:#C00000; }
.em-danger { background:#C00000; color:#fff; border:none; border-radius:5px; padding:7px 16px;
  font-size:12px; font-weight:600; cursor:pointer; }
.em-danger:hover { background:#a10000; }
.em-danger:disabled { background:#d9b3b3; cursor:not-allowed; }

/* ---- Audit view ---- */
/* View-swap: when body has .audit-active, hide the dashboard regions and show #auditView.
   Kept additive (rather than restructuring DOM) so loadAll() state stays intact in memory
   and Back is instantaneous — no re-fetch. */
#auditView { display:none; padding:14px 16px 20px; }
body.audit-active > .viewonly-banner,
body.audit-active > .toolbar,
body.audit-active > .cards,
body.audit-active > .chart-strip,
body.audit-active > .recon-wrap,
body.audit-active > .behind-wrap,
body.audit-active > .main,
body.audit-active > .legend { display:none !important; }
body.audit-active > #auditView { display:block; }

/* Same view-swap for the Workforce Plan section. */
body.plan-active > .viewonly-banner,
body.plan-active > .cards,
body.plan-active > .chart-strip,
body.plan-active > .recon-wrap,
body.plan-active > .behind-wrap,
body.plan-active > .main,
body.plan-active > .legend { display:none !important; }
body.plan-active > #planView { display:block; }

.audit-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.audit-head h2 { font-size:15px; color:#1F3864; font-weight:700; }
.audit-ds-lbl { font-size:11px; font-weight:600; color:#5a6a80; margin-left:4px;
  padding:2px 8px; border-radius:10px; background:#E4EAF5; }
.audit-ds-lbl.live { background:#D7EFDF; color:#1a7340; }
.audit-head-actions { margin-left:auto; display:flex; gap:8px; }

.audit-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  background:#fff; border:1px solid #D0D8E8; border-radius:8px; padding:10px 12px; margin-bottom:10px; }
.audit-filters label { display:flex; flex-direction:column; gap:3px; font-size:10px;
  color:#5a6a80; text-transform:uppercase; letter-spacing:.3px; font-weight:600; }
.audit-filters input, .audit-filters select { border:1.5px solid #D0D8E8; border-radius:6px;
  padding:5px 8px; font-size:12px; color:#1a1a2e; background:#fff; outline:none; min-width:130px; text-transform:none; font-weight:400; }
.audit-filters input:focus, .audit-filters select:focus { border-color:#2E4D8C; }
.audit-filters .clear-btn { align-self:flex-end; }
.audit-filters .count-lbl { align-self:flex-end; margin-left:auto; }

.audit-kind-pills { display:inline-flex; align-self:flex-end; }
.kpill { border:1.5px solid #D0D8E8; background:#fff; color:#5a6a80; padding:5px 11px;
  font-size:11px; cursor:pointer; font-weight:600; }
.kpill:first-of-type { border-radius:14px 0 0 14px; }
.kpill:last-of-type  { border-radius:0 14px 14px 0; }
.kpill:not(:first-of-type) { border-left-width:.75px; }
.kpill:not(:last-of-type)  { border-right-width:.75px; }
.kpill:hover { border-color:#2E4D8C; color:#1F3864; }
.kpill.active { background:#1F3864; color:#fff; border-color:#1F3864; }

.audit-banner { background:#FFFCE0; border:1px solid #F0DA88; border-radius:6px;
  padding:8px 12px; margin-bottom:8px; font-size:11.5px; color:#5a6a80; }

.audit-tbl-wrap { background:#fff; border:1px solid #D0D8E8; border-radius:8px; overflow:hidden; }
.audit-tbl-scroll { overflow:auto; max-height:calc(100vh - 280px); min-height:300px; }
#auditTable { width:100%; border-collapse:collapse; min-width:1000px; }
#auditTable thead { position:sticky; top:0; z-index:5; }
#auditTable thead th { background:#1F3864; color:#fff; padding:8px 9px; text-align:left;
  font-size:10.5px; font-weight:600; white-space:nowrap; }
#auditTable tbody tr { border-bottom:1px solid #E4EAF5; }
#auditTable tbody tr:nth-child(even) { background:#F8FAFD; }
#auditTable tbody td { padding:6px 9px; font-size:11.5px; vertical-align:top; }
#auditTable td.when { font-family:Consolas,monospace; font-size:11px; white-space:nowrap; color:#5a6a80; }
#auditTable td.user { font-size:11px; color:#1a1a2e; }
#auditTable td.posid { font-family:Consolas,monospace; font-weight:700; font-size:11px; white-space:nowrap; }
#auditTable td.field { font-family:Consolas,monospace; font-size:11px; color:#1F3864; }
#auditTable td.delta { font-size:11px; max-width:260px; overflow-wrap:anywhere; }
#auditTable td.delta .before { color:#7a0000; }
#auditTable td.delta .after  { color:#1a7340; }
#auditTable td.reason { font-size:11px; max-width:280px; overflow-wrap:anywhere; color:#5a6a80; }
.kbadge { display:inline-block; padding:1px 7px; border-radius:9px; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.3px; }
.kbadge.change   { background:#D0E2F6; color:#163a66; }
.kbadge.upload   { background:#D7EFDF; color:#1a7340; }
.kbadge.restore  { background:#FFE2C2; color:#7a3a00; }
.kbadge.login    { background:#E8DAFF; color:#4a1d8c; }
.kbadge.export   { background:#E0F4F7; color:#0a5564; }
.kbadge.dataset-switch { background:#F5F5E0; color:#4a4800; }
.kbadge.wipe     { background:#FBD5D5; color:#7a0000; }
.kbadge.feedback { background:#FFEFC2; color:#7a5200; }

/* ---- Feedback attachments + detail ---- */
.fb-attach-row { display:flex; align-items:center; gap:10px; }
.fb-thumbs { display:flex; flex-wrap:wrap; gap:8px; }
.fb-thumbs:empty { display:none; }
.fb-thumb { position:relative; width:96px; height:64px; border:1px solid #D0D8E8; border-radius:5px; overflow:hidden; background:#F4F8FE; }
.fb-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.fb-thumb-sz { position:absolute; left:0; bottom:0; background:rgba(0,0,0,.6); color:#fff; font-size:9px; padding:1px 4px; }
.fb-thumb-x { position:absolute; top:2px; right:2px; width:18px; height:18px; border:none; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; font-size:13px; line-height:1; cursor:pointer; padding:0; }
.fb-row { cursor:pointer; }
.fb-row:hover { background:#F4F8FE; }
.fb-open { color:#2E4D8C; font-weight:700; text-decoration:underline; }
.fb-hidden { color:#8a9ab0; font-style:italic; }
.fb-clip { color:#7a5200; font-weight:700; }
.fbv-message { white-space:pre-wrap; word-break:break-word; font-family:inherit; font-size:13px;
  color:#1a1a2e; background:#F4F8FE; border:1px solid #D0D8E8; border-radius:5px; padding:10px; margin:0 0 10px; }
.fbv-attachments { display:flex; flex-wrap:wrap; gap:12px; }
.fbv-att { margin:0; border:1px solid #D0D8E8; border-radius:6px; padding:6px; background:#fff; max-width:260px; }
.fbv-att img { max-width:100%; display:block; border-radius:3px; }
.fbv-att figcaption { display:flex; justify-content:space-between; gap:8px; font-size:10px; color:#5a6a80; margin-top:5px; }
.fbv-att figcaption a { color:#2E4D8C; font-weight:700; text-decoration:none; }
.fbv-att figcaption a:hover { text-decoration:underline; }

/* ── Chat toggle (toolbar button) ───────────────────────────────────────── */
.chat-toggle {
  background: #1F3864;
  color: #fff;
  border-color: #1F3864;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}
.chat-toggle:hover { background: #2E4D8C; border-color: #2E4D8C; color: #fff; }
.chat-toggle[hidden] { display: none; }

/* ── Chat drawer ─────────────────────────────────────────────────────────── */
.chat-drawer {
  --cp-surface: #fff;
  --cp-surface-soft: #F0F4FA;
  --cp-border: #D0D8E8;
  --cp-text: #1a1a2e;
  --cp-text-muted: #5a6a80;
  --cp-accent: #1F3864;
  --cp-accent-fg: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 520px;
  height: 100dvh;
  background: #fff;
  border-right: 1.5px solid #D0D8E8;
  box-shadow: 4px 0 20px rgba(0,0,0,.13);
  z-index: 901;
  display: flex;
  flex-direction: column;
  /* history panel is absolute inside this */
  isolation: isolate;
  /* hidden by default — shown via .chat-open without display:none so transitions work */
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .25s ease, visibility .25s;
}
.chat-drawer.chat-open {
  transform: translateX(0);
  visibility: visible;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #1F3864;
  color: #fff;
  flex-shrink: 0;
}
.chat-title { font-size: 13px; font-weight: 700; flex: 1; }
.chat-ds-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .4px;
}
.chat-ds-badge.demo { background: rgba(255,255,255,.2); color: #fff; }
.chat-ds-badge.live { background: #1a7340; color: #fff; }
.chat-close {
  background: none; border: none; color: #fff; font-size: 16px;
  cursor: pointer; padding: 2px 6px; border-radius: 4px; opacity: .7;
  line-height: 1; transition: opacity .1s;
}
.chat-close:hover { opacity: 1; }
/* History icon button in header */
.chat-icon-btn {
  background: none; border: none; color: rgba(255,255,255,.75); cursor: pointer;
  padding: 3px 5px; border-radius: 4px; display: flex; align-items: center;
  transition: color .1s, background .1s;
}
.chat-icon-btn:hover { color: #fff; background: rgba(255,255,255,.12); }
.chat-model-select {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 10px; font-weight: 600; padding: 2px 4px;
  border-radius: 4px; cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
  max-width: 120px;
}
.chat-model-select:hover { background: rgba(255,255,255,.2); }
.chat-model-select option { background: #1F3864; color: #fff; }

/* ── History panel (overlays the messages area) ─────────────────────────── */
.chat-history-panel {
  position: absolute;
  top: 48px;   /* below the header */
  left: 0; right: 0; bottom: 68px;  /* above the footer */
  background: #fff;
  z-index: 10;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #D0D8E8;
}
/* Without this the display above wins over the UA [hidden] rule and the panel
   sits permanently on top of the message log. */
.chat-history-panel[hidden] { display: none; }
.chat-history-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #D0D8E8;
  flex-shrink: 0;
}
.chat-history-heading { flex: 1; font-size: 12.5px; font-weight: 700; color: #1a1a2e; }
.chat-new-btn {
  font-size: 11.5px; padding: 4px 10px; border-radius: 6px;
  background: #1F3864; color: #fff; border: none; cursor: pointer; font-weight: 600;
  transition: background .15s;
}
.chat-new-btn:hover { background: #2E4D8C; }
.chat-history-list {
  flex: 1; overflow-y: auto; padding: 6px 0;
}
.chat-history-loading,
.chat-history-empty {
  padding: 20px 14px; font-size: 12px; color: #777; text-align: center;
}
.chat-history-item {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; padding: 9px 14px; border: none; background: none;
  text-align: left; cursor: pointer; border-bottom: 1px solid #F0F3F8;
  transition: background .12s;
}
.chat-history-item:hover { background: #F4F7FD; }
.chi-title { font-size: 12.5px; font-weight: 600; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chi-meta  { display: flex; align-items: center; gap: 6px; }
.chi-time  { font-size: 11px; color: #888; }
.chi-count { font-size: 11px; color: #aaa; margin-left: auto; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-bubble {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Once marked renders the HTML, switch to normal flow */
.chat-bubble.rendered { white-space: normal; width: 97%; max-width: 97%; }
/* Result cards — one card per table row, always fits the drawer width */
.result-cards { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.result-card { background: #fff; border: 1px solid #C5D0E0; border-radius: 6px; padding: 7px 10px; }
.result-card-title { font-weight: 700; color: #1F3864; font-size: 12.5px; margin-bottom: 4px; }
.result-card-field { display: flex; flex-wrap: wrap; gap: 0 4px; font-size: 11.5px; line-height: 1.5; }
.result-card-label { font-weight: 600; color: #3a5090; }
.result-card-sep   { color: #888; }
.result-card-value { color: #1a1a2e; }
.result-card-hint  { margin-top: 5px; font-size: 10px; color: #3a5090; opacity: .6; text-align: right; }
/* Clickable cards */
.result-card[data-posid] { cursor: pointer; transition: background .15s, border-color .15s; }
.result-card[data-posid]:hover { background: #EEF4FF; border-color: #3a5090; }
.result-card[data-posid]:hover .result-card-hint { opacity: 1; }
/* Fallback table styles (for any table not transformed) */
.chat-bubble.assistant table { border-collapse: collapse; font-size: 11px; margin: 6px 0; width: 100%; table-layout: fixed; word-break: break-word; }
.chat-bubble.assistant th,
.chat-bubble.assistant td { border: 1px solid #C5D0E0; padding: 3px 6px; text-align: left; }
.chat-bubble.assistant th { background: #DDE5F5; font-weight: 600; }
.chat-bubble.assistant tr:nth-child(even) td { background: #EEF2FA; }
/* Lists */
.chat-bubble.assistant ul,
.chat-bubble.assistant ol { margin: 4px 0 6px 18px; padding: 0; }
.chat-bubble.assistant li { margin-bottom: 2px; }
/* Paragraphs */
.chat-bubble.assistant p { margin: 0 0 6px; }
.chat-bubble.assistant p:last-child { margin-bottom: 0; }
/* Inline code & code blocks */
.chat-bubble.assistant code { background: #e0e8f5; border-radius: 3px; padding: 1px 4px; font-size: 11px; }
.chat-bubble.assistant pre { background: #e0e8f5; border-radius: 6px; padding: 8px 10px; overflow-x: auto; margin: 4px 0 8px; }
.chat-bubble.assistant pre code { background: none; padding: 0; }
/* Headings inside assistant bubble */
.chat-bubble.assistant h1,.chat-bubble.assistant h2,.chat-bubble.assistant h3 { font-size: 13px; font-weight: 700; margin: 8px 0 4px; }
.chat-bubble.user      { align-self: flex-end; background: #1F3864; color: #fff; border-bottom-right-radius: 3px; }
.chat-bubble.assistant { align-self: flex-start; background: #F0F4FA; color: #1a1a2e; border-bottom-left-radius: 3px; }
.chat-bubble.system    { align-self: center; background: #FFF3CD; color: #856404; font-size: 11px; border-radius: 6px; padding: 5px 10px; max-width: 95%; text-align: center; }
.chat-bubble.error     { align-self: flex-start; background: #FDECEA; color: #a30000; border-bottom-left-radius: 3px; }
/* Pulsing cursor while streaming */
.chat-bubble.assistant.streaming::after { content: "▋"; animation: chat-blink .7s step-end infinite; }
@keyframes chat-blink { 50% { opacity: 0; } }

.chat-footer {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #D0D8E8;
  background: #fff;
}
.chat-input {
  flex: 1;
  border: 1.5px solid #D0D8E8;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color .15s;
}
.chat-input:focus   { border-color: #1F3864; }
.chat-input:disabled { opacity: .5; }
.chat-send {
  padding: 8px 16px;
  background: #1F3864;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  align-self: flex-end;
  transition: background .15s;
}
.chat-send:hover    { background: #2E4D8C; }
.chat-send:disabled { opacity: .5; cursor: not-allowed; }