:root{
  --bg0:#090d13;--bg1:#0d1117;--bg2:#161b22;--bg3:#1c2333;--bg4:#21273a;
  --border:#21293a;--border2:#2d3a50;--border3:#3a4e6a;
  --text1:#cdd9e5;--text2:#768390;--text3:#4d5f73;
  --green:#3fb950;--green-d:#0d2818;--green-t:#56d364;
  --red:#f85149;--red-d:#2d0d0d;--red-t:#ff7b72;
  --orange:#e3a343;--orange-d:#2a1e06;--orange-t:#f0b429;
  --blue:#4493f8;--blue-d:#0c1e36;--blue-t:#79c0ff;
  --purple:#a371f7;--purple-d:#1e0d33;--purple-t:#d2a8ff;
  --teal:#2dd4bf;--teal-d:#082420;--cyan:#39d8c8;
  --yellow:#e3b341;
  --r:10px;--r2:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg0);color:var(--text1);min-height:100vh;font-size:13px;overflow-x:hidden;display:flex;flex-direction:column}

/* ── HEADER ── */
.hdr {
  background: rgba(9, 13, 19, 0.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 200;
  flex-shrink: 0;
}
.hdr-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hdr-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #1f75cb, #00d2ff);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.35);
}
.hdr-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(120deg, #ffffff 30%, #79c0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hdr-sub {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
  font-weight: 500;
  opacity: 0.9;
}
.hdr-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);font-size:11px;padding:5px 11px;border-radius:5px;font-weight:500;white-space:nowrap;transition:all .15s}
.chip.good{background:var(--green-d);border-color:rgba(63,185,80,.4);color:var(--green-t)}
.chip.bad{background:var(--red-d);border-color:rgba(248,81,73,.4);color:var(--red-t);font-weight:700}
.chip.info{background:var(--blue-d);border-color:rgba(68,147,248,.4);color:var(--blue-t)}
.btn-chip{cursor:pointer;transition:all .15s}
.btn-chip:hover{border-color:var(--blue);color:var(--blue-t);background:var(--blue-d)}
.btn-chip a{color:inherit;text-decoration:none;display:block}

/* ── UPLOAD ZONE / DATE SELECTOR BAR ── */
.upload-bar{background:var(--bg2);border-bottom:1px solid var(--border);padding:10px 28px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.upload-label{font-size:11px;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.date-filter-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.date-input{background:var(--bg3);border:1px solid var(--border2);color:var(--text1);font-size:11px;padding:4px 8px;border-radius:6px;outline:none;transition:border-color .15s}
.date-input:focus{border-color:var(--blue)}
.btn-submit{background:var(--blue-d);border:1px solid var(--blue);color:var(--blue-t);font-size:11px;padding:4px 12px;border-radius:6px;cursor:pointer;font-weight:600;transition:all .15s}
.btn-submit:hover{background:var(--blue);color:var(--bg0)}

/* ── MAIN ── */
.main{padding:20px 24px 40px;max-width:1440px;margin:0 auto;flex:1 0 auto;width:100%}

/* ── DATE FILTER ── */
.day-filter-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 14px 18px;
  margin-bottom: 18px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 210, 255, 0.04);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.day-filter-panel:hover {
  border-color: rgba(0, 210, 255, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 18px rgba(0, 210, 255, 0.18);
  transform: translateY(-2px);
}
.day-filter-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.day-filter-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text2);display:flex;align-items:center;gap:7px}
.day-filter-title .dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.form-lbl {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text2);
  display: block;
  margin-bottom: 5px;
  letter-spacing: .4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.day-actions{display:flex;gap:6px}
.btn-xs{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);font-size:10px;padding:4px 9px;border-radius:5px;cursor:pointer;transition:all .15s;font-weight:500}
.btn-xs:hover,.btn-xs.active{background:var(--blue-d);border-color:var(--blue);color:var(--blue-t)}
.day-pills{display:flex;flex-wrap:wrap;gap:7px}
.day-pill{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);font-size:11px;padding:5px 12px;border-radius:5px;cursor:pointer;transition:all .15s;user-select:none;white-space:nowrap}
.day-pill:hover{border-color:var(--border3);color:var(--text1)}
.day-pill.sel{background:var(--blue-d);border-color:var(--blue);color:var(--blue-t);font-weight:600}
.day-pill.has-nc{border-color:rgba(248,81,73,.35)}
.day-pill.sel.has-nc{background:var(--red-d);border-color:var(--red);color:var(--red-t)}

/* ── KPIs ── */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
.kpi {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 15px 17px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, transform .15s, box-shadow .2s;
  cursor: default;
}
.kpi.g { box-shadow: 0 4px 20px -2px rgba(9, 13, 19, 0.5), 0 0 8px 0px rgba(63, 185, 80, 0.06); }
.kpi.r { box-shadow: 0 4px 20px -2px rgba(9, 13, 19, 0.5), 0 0 8px 0px rgba(248, 81, 73, 0.06); }
.kpi.o { box-shadow: 0 4px 20px -2px rgba(9, 13, 19, 0.5), 0 0 8px 0px rgba(227, 163, 67, 0.06); }
.kpi.b { box-shadow: 0 4px 20px -2px rgba(9, 13, 19, 0.5), 0 0 8px 0px rgba(68, 147, 248, 0.06); }
.kpi.p { box-shadow: 0 4px 20px -2px rgba(9, 13, 19, 0.5), 0 0 8px 0px rgba(163, 113, 247, 0.06); }

.kpi.g:hover { border-color: rgba(63, 185, 80, 0.4); transform: translateY(-2px); box-shadow: 0 6px 24px -2px rgba(9, 13, 19, 0.6), 0 0 12px 1px rgba(63, 185, 80, 0.12); }
.kpi.r:hover { border-color: rgba(248, 81, 73, 0.4); transform: translateY(-2px); box-shadow: 0 6px 24px -2px rgba(9, 13, 19, 0.6), 0 0 12px 1px rgba(248, 81, 73, 0.12); }
.kpi.o:hover { border-color: rgba(227, 163, 67, 0.4); transform: translateY(-2px); box-shadow: 0 6px 24px -2px rgba(9, 13, 19, 0.6), 0 0 12px 1px rgba(227, 163, 67, 0.12); }
.kpi.b:hover { border-color: rgba(68, 147, 248, 0.4); transform: translateY(-2px); box-shadow: 0 6px 24px -2px rgba(9, 13, 19, 0.6), 0 0 12px 1px rgba(68, 147, 248, 0.12); }
.kpi.p:hover { border-color: rgba(163, 113, 247, 0.4); transform: translateY(-2px); box-shadow: 0 6px 24px -2px rgba(9, 13, 19, 0.6), 0 0 12px 1px rgba(163, 113, 247, 0.12); }
.kpi::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:var(--r2) var(--r2) 0 0}
.kpi.g::after{background:linear-gradient(90deg,var(--green),#27ae60)}
.kpi.r::after{background:linear-gradient(90deg,var(--red),#c0392b)}
.kpi.o::after{background:linear-gradient(90deg,var(--orange),#d68910)}
.kpi.b::after{background:linear-gradient(90deg,var(--blue),#1a5fa8)}
.kpi.p::after{background:linear-gradient(90deg,var(--purple),#7d3c98)}
.kpi-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text2);margin-bottom:7px}
.kpi-value{font-size:26px;font-weight:800;line-height:1;margin-bottom:4px;letter-spacing:-.5px}
.kpi.g .kpi-value{color:var(--green-t)}.kpi.r .kpi-value{color:var(--red-t)}.kpi.o .kpi-value{color:var(--orange-t)}.kpi.b .kpi-value{color:var(--blue-t)}.kpi.p .kpi-value{color:var(--purple-t)}
.kpi-sub{font-size:10px;color:var(--text3)}

/* ── GAUGES ── */
.gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.gauge-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 14px 12px;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
  cursor: pointer;
  min-width: 0;
  min-height: 0;
  box-shadow: 0 4px 20px -2px rgba(9, 13, 19, 0.5), 0 0 8px 0px rgba(57, 216, 200, 0.04);
}
.gauge-card:hover {
  border-color: var(--border3);
  box-shadow: 0 6px 24px -2px rgba(9, 13, 19, 0.6), 0 0 12px 1px rgba(57, 216, 200, 0.1);
}
.gauge-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);margin-bottom:8px}
.donut-w{position:relative;height:96px}
.gauge-pct{font-size:17px;font-weight:800;margin-top:5px;letter-spacing:-.5px}

/* ── PANEL ── */
.row{display:grid;gap:14px;margin-bottom:14px}
.r2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.r3{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
.r1{grid-template-columns:minmax(0,1fr)}
.panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 16px 18px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  min-width: 0;
  min-height: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 6px rgba(68, 147, 248, 0.04);
}
.panel:hover {
  border-color: rgba(68, 147, 248, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 16px rgba(68, 147, 248, 0.16);
  transform: translateY(-2px);
}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;flex-wrap:wrap;gap:6px}
.pt{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);display:flex;align-items:center;gap:6px}
.pt .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pa{display:flex;gap:5px;align-items:center}

/* expand btn */
.btn-expand{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);font-size:10px;padding:3px 9px;border-radius:5px;cursor:pointer;transition:all .15s}
.btn-expand:hover{border-color:var(--blue);color:var(--blue-t);background:var(--blue-d)}

/* ── CHARTS ── */
.cw{position:relative;width:100%}
.cw-md{height:215px}.cw-lg{height:255px}.cw-sm{height:175px}

/* ── LEGEND ── */
.leg{display:flex;flex-wrap:wrap;gap:9px;margin-top:9px}
.li{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text2)}
.ld{width:8px;height:8px;border-radius:2px;flex-shrink:0}

/* ── PROGRESS ── */
.pb{margin-bottom:8px}
.pb-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:3px;gap:8px}
.pb-left{display:flex;align-items:center;gap:4px;min-width:0;flex:1}
.pb-name{color:var(--text1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-total{font-size:9px;color:var(--text3);white-space:nowrap;flex-shrink:0}
.pb-right{display:flex;align-items:center;gap:4px;flex-shrink:0}
.pb-pct{font-weight:700;font-size:11px;min-width:32px;text-align:right;flex-shrink:0}
.pb-bg{background:var(--bg4);border-radius:5px;height:6px;overflow:hidden}
.pb-fill{height:100%;border-radius:5px;transition:width .7s cubic-bezier(.4,0,.2,1)}
.c-pill{display:inline-block;font-size:9px;background:var(--green-d);color:var(--green-t);border:1px solid rgba(63,185,80,.2);padding:1px 5px;border-radius:4px;margin-left:2px;font-weight:600;white-space:nowrap}
.nc-pill{display:inline-block;font-size:9px;background:var(--red-d);color:var(--red-t);border:1px solid rgba(248,81,73,.2);padding:1px 5px;border-radius:4px;margin-left:2px;font-weight:600;white-space:nowrap}

/* ── FINDINGS ── */
.finding{padding:7px 0;border-bottom:1px solid var(--border);transition:padding .1s}
.finding:last-child{border-bottom:none}
.finding:hover{background:var(--bg3);margin:0 -6px;padding:7px 6px;border-radius:6px}
.f-id{font-weight:700;color:var(--blue-t);font-size:10px;font-family:monospace;display:flex;align-items:center;gap:5px}
.f-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.f-txt{color:var(--text1);margin-top:2px;line-height:1.4}
.f-meta{color:var(--text3);font-size:10px;margin-top:2px}

/* ── TABLE ── */
.tbl-wrap{overflow-x:auto}
.tbl-wrap::-webkit-scrollbar{height:4px}.tbl-wrap::-webkit-scrollbar-track{background:var(--bg2)}.tbl-wrap::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px}
table.dt{width:100%;border-collapse:collapse;font-size:11px;min-width:960px}
table.dt th{background:var(--bg3);color:var(--text2);font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--border2);font-size:10px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;position:sticky;top:0;z-index:2}
table.dt td{padding:7px 10px;border-bottom:1px solid var(--border);color:var(--text1);vertical-align:middle;transition:background .1s}
table.dt tr.nc-row>td:first-child{border-left:2px solid var(--red)}
table.dt tr.c-row>td:first-child{border-left:2px solid transparent}
table.dt tr:hover td{background:var(--bg3)}
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;cursor:pointer;user-select:none}
.bc{background:var(--green-d);color:var(--green-t);border:1px solid rgba(63,185,80,.2)}
.bnc{background:var(--red-d);color:var(--red-t);border:1px solid rgba(248,81,73,.2)}
.bna{background:var(--bg4);color:var(--text3);border:1px solid var(--border)}

/* ── DATA ENTRY SPECIFIC ── */
.editable-cell{outline:none;padding:5px;border-radius:4px;transition:all .15s}
.editable-cell:focus{background:var(--bg4);box-shadow:0 0 0 1px var(--blue)}
.save-indicator{font-size:11px;color:var(--text3);margin-left:12px;font-style:italic}
.save-indicator.saving{color:var(--orange-t)}
.save-indicator.success{color:var(--green-t)}
.save-indicator.error{color:var(--red-t)}

/* select controls in data entry */
select.cell-select{background:var(--bg3);border:1px solid var(--border2);color:var(--text1);font-size:10px;padding:2px 5px;border-radius:4px;cursor:pointer;outline:none}
select.cell-select.c-val{background:var(--green-d);color:var(--green-t);border-color:rgba(63,185,80,.4)}
select.cell-select.nc-val{background:var(--red-d);color:var(--red-t);border-color:rgba(248,81,73,.4)}
select.cell-select.na-val{background:var(--bg4);color:var(--text3);border-color:var(--border)}

/* Editing row style highlight */
table.dt tr.editing td {
  background: rgba(68, 147, 248, 0.08) !important;
}
table.dt tr.editing input.editable-cell {
  background: var(--bg3) !important;
  border: 1px solid var(--blue) !important;
  box-shadow: 0 0 4px rgba(68, 147, 248, 0.25) !important;
}
table.dt tr.editing select.cell-select {
  border-color: var(--blue) !important;
  box-shadow: 0 0 4px rgba(68, 147, 248, 0.25) !important;
}

/* ── FILTER BAR ── */
.fbar{display:flex;align-items:center;gap:7px;margin-bottom:12px;flex-wrap:wrap}
.fbar label{font-size:10px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
select.fsel,input.fsrch{background:var(--bg3);border:1px solid var(--border2);color:var(--text1);font-size:11px;padding:5px 9px;border-radius:6px;cursor:pointer;outline:none;transition:border-color .15s}
select.fsel:focus,input.fsrch:focus{border-color:var(--blue)}
input.fsrch{width:150px}
input.fsrch::placeholder{color:var(--text3)}
.fcount{margin-left:auto;font-size:11px;color:var(--text3)}
.fcount span{color:var(--blue-t);font-weight:700}

/* ── MODAL ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.modal-bg.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);width:min(900px,100%);max-height:85vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.7)}
.modal-hdr{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-size:14px;font-weight:700;color:var(--text1)}
.modal-close{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);font-size:16px;width:28px;height:28px;border-radius:6px;cursor:pointer;display:grid;place-items:center;transition:all .15s;line-height:1}
.modal-close:hover{border-color:var(--red);color:var(--red-t);background:var(--red-d)}
.modal-body{padding:18px 20px;overflow-y:auto;flex:1}
.modal-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.ms-card{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:12px 14px;text-align:center}
.ms-val{font-size:20px;font-weight:800;margin-bottom:3px}
.ms-lbl{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}

/* ── SECTION LABEL ── */
.slabel{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:11px;padding-left:8px;border-left:3px solid var(--blue)}

/* ── SCROLLBARS ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg1)}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}

/* ── FOOTER ── */
.footer{background:var(--bg1);border-top:1px solid var(--border);padding:10px 24px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--text3);flex-wrap:wrap;gap:6px;margin-top:12px;flex-shrink:0}

/* ── SORT TOGGLE ── */
.sort-toggle{display:flex;gap:4px}

/* ── NAVIGATION BAR ── */
.nav-bar {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  background: rgba(13, 17, 23, 0.95);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
}
.nav-tab {
  color: var(--text2);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 3px solid transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: -1px; /* Align to the border */
}
.nav-tab:hover {
  color: var(--text1);
  background: rgba(255, 255, 255, 0.03);
}
.nav-tab.active {
  color: var(--blue-t);
  border-bottom-color: var(--blue);
  background: rgba(68, 147, 248, 0.05);
  box-shadow: inset 0 -4px 12px rgba(68, 147, 248, 0.05);
}
.nav-tab-icon {
  font-size: 15px;
  transition: transform 0.2s;
}
.nav-tab:hover .nav-tab-icon {
  transform: translateY(-1px);
}

/* ── DATA ENTRY GRID COMPACTNESS ── */
table.dt-entry th {
  padding: 6px 4px !important;
}
table.dt-entry td {
  padding: 4px 3px !important;
}
table.dt-entry input.editable-cell {
  width: 100% !important;
  box-sizing: border-box;
}
table.dt-entry select.cell-select {
  width: 100% !important;
  box-sizing: border-box;
}

/* ── RESPONSIVE ── */
@media(max-width:1000px){
  .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .r2,.r3{grid-template-columns:minmax(0,1fr)}
  .gauges{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .main{padding:14px 14px 30px}
}
@media(max-width:600px){
  .kpi-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .gauges{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}