/**
 * Mine Shift Intelligence — UI Components & Widgets
 * PT Bina Sarana Sukses
 */

/* KPI Card */
.kpi {
  padding: 14px 16px;
  min-height: 104px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kpi::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -30px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eef6ff, #f7fbff);
  z-index: 0;
}

.kpi .label {
  font-size: 10px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.kpi .value {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.035em;
  margin: 6px 0 2px;
  position: relative;
  z-index: 1;
}

.kpi .sub {
  font-size: 10px;
  color: #8294a7;
  position: relative;
  z-index: 1;
  line-height: 1.35;
}

.kpi .detail-hint {
  font-size: 9px;
  color: #7990a6;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

/* Meeting Overview: command-center hierarchy */
.command-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:4px 0 18px;padding:4px 2px 16px;border-bottom:1px solid var(--line)}
.command-hero h2{margin:3px 0 4px;font-size:24px;letter-spacing:-.5px}.command-hero p{margin:0;color:var(--muted)}
.data-status{border-radius:999px;padding:8px 12px;font-weight:800;font-size:12px;letter-spacing:.04em;background:#fff3cd;color:#855d00}.data-status.DATA_VALID{background:#e7f6ee;color:#19643d}.data-status.ANALYTICS_BLOCKED{background:#ffebeb;color:#a32626}
.command-row{display:grid;gap:12px;margin-bottom:12px}.primary-row{grid-template-columns:1.4fr 1fr 1.15fr repeat(2,.86fr)}.secondary-row{grid-template-columns:1fr .85fr .85fr 1.55fr 1.1fr}.fuel-row{grid-template-columns:.92fr .92fr 2.8fr}
.command-kpi .kpi{height:100%;min-height:126px;margin:0}.command-kpi.primary .kpi{min-height:146px;background:linear-gradient(145deg,#fff,#f2f8ff);border-top:3px solid var(--blue)}.command-kpi.primary .value{font-size:28px}.command-kpi.constraint .kpi{border-left:4px solid #e58a25;background:#fff9ef}.command-kpi.fuel-ratio .kpi{background:#f0faf7}.command-kpi .detail-hint{display:none}
.waterfall-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;min-height:126px}.waterfall-panel .section-head{margin-bottom:9px}.waterfall-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.waterfall-step{border:0;border-radius:8px;padding:10px 8px;text-align:left;background:#eef4fb;color:var(--ink);cursor:pointer}.waterfall-step span{display:block;font-size:10px;color:var(--muted);min-height:26px}.waterfall-step b{font-size:13px}.waterfall-step.INPIT,.waterfall-step.OB_NON_VOLUME,.waterfall-step.PROJECT_NON_VOLUME{background:#fff1ef;color:#a53a2c}.waterfall-step.COUNTED{background:#e6f5ec;color:#17623b}
.command-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:12px;margin-top:12px}.hourly-command{min-height:350px}
@media (max-width:1100px){.primary-row,.secondary-row,.fuel-row{grid-template-columns:repeat(3,1fr)}.waterfall-panel{grid-column:span 3}.command-grid{grid-template-columns:1fr}.waterfall-steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.command-hero{align-items:flex-start;flex-direction:column}.primary-row,.secondary-row,.fuel-row{grid-template-columns:1fr 1fr}.waterfall-panel{grid-column:span 2}.waterfall-steps{grid-template-columns:1fr 1fr}}

.score-copy b {
  display: block;
  font-size: 14px;
  font-weight: 800;
}

.score-copy small {
  color: var(--muted);
  display: block;
  margin-top: 3px;
  line-height: 1.45;
  font-size: 11px;
}

/* Shift Story */
.story {
  padding: 16px 18px;
  background: linear-gradient(135deg, #f7fbff, #ffffff 60%);
  border-left: 4px solid var(--blue);
}

.story-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.45;
  padding: 4px 6px;
  border-radius: 8px;
}

.story-line:hover {
  background: #f1f7fe;
}

.story-line .n {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #eaf3ff;
  color: #1b63bb;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  flex: 0 0 auto;
}

/* Needs Attention List */
.attention-list {
  display: grid;
  gap: 8px;
}

.attention {
  border: 1px solid #e3eaf2;
  border-radius: 13px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  background: #ffffff;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.attention:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(28, 62, 98, 0.08);
}

.sev {
  width: 7px;
  height: 36px;
  border-radius: var(--radius-pill);
}

.sev.CRITICAL, .sev.HIGH { background: var(--red); }
.sev.MEDIUM { background: var(--amber); }
.sev.LOW { background: var(--green); }

.attention b {
  font-size: 12px;
  display: block;
}

.attention small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 2px;
}

.attention .metric {
  font-size: 13px;
  font-weight: 900;
  text-align: right;
  color: #264a6d;
}

.category {
  font-size: 9px;
  color: #6a84a0;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Hourly Production vs Loss Chart */
.hourly {
  height: 235px;
  display: flex;
  gap: 7px;
  align-items: flex-end;
  padding: 20px 2px 2px;
  position: relative;
}

.hourcol {
  flex: 1;
  min-width: 0;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2px;
  border-radius: 6px;
  transition: background var(--transition-fast);
}

.hourcol:hover {
  background: #f2f7fd;
}

.hourv {
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 5px;
  color: #315c83;
}

.hourbar {
  min-height: 4px;
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(180deg, #2c82e8, #72b7f1);
  transition: height 0.3s ease;
  position: relative;
}

.hourbar.low {
  background: linear-gradient(180deg, #eaa131, #f3c66d);
}

.hourl {
  font-size: 9px;
  color: #7a8fa4;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 750;
}

.hourloss {
  height: 5px;
  border-radius: 5px;
  background: #edf1f5;
  margin-top: 4px;
  overflow: hidden;
  display: flex;
}

.hourloss i {
  height: 100%;
  display: block;
}

.hourloss .S { background: var(--S); }
.hourloss .D { background: var(--D); }
.hourloss .BU { background: var(--BU); }
.hourloss .MS { background: var(--MS); }

/* Legends */
.legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 10px;
  color: var(--muted);
}

.legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
}

.legend .W { background: var(--W); }
.legend .S { background: var(--S); }
.legend .D { background: var(--D); }
.legend .BU { background: var(--BU); }
.legend .MS { background: var(--MS); }

/* Insights */
.insights {
  display: grid;
  gap: 8px;
}

.insight {
  border: 1px solid #e2eaf2;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fbfdff;
  border-left: 4px solid var(--blue);
}

.insight b {
  display: block;
  font-size: 11px;
  margin-bottom: 3px;
}

.insight p {
  font-size: 11px;
  color: #617b94;
  line-height: 1.45;
  margin: 0;
}

.insight.positive { border-left-color: var(--green); }
.insight.warning { border-left-color: var(--amber); }
.insight.info { border-left-color: var(--blue); }

/* Pareto & Horizontal Bar Lists */
.barlist {
  display: grid;
  gap: 9px;
}

.barrow {
  display: grid;
  grid-template-columns: minmax(90px, 1.15fr) minmax(100px, 3fr) 78px;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 6px;
}

.barrow:hover {
  background: #f4f9ff;
}

.barrow > b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track {
  height: 9px;
  border-radius: var(--radius-pill);
  background: #edf2f6;
  overflow: hidden;
}

.fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #297ee4, #79b8ed);
  transition: width 0.35s ease;
}

.fill.loss { background: linear-gradient(90deg, #ea9a35, #edc56f); }
.fill.badbar { background: linear-gradient(90deg, #d94e4e, #ef8585); }

.barvalue {
  text-align: right;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  color: #214365;
}

.pareto-note {
  font-size: 10px;
  color: #71879b;
  margin-top: 8px;
}

/* Status Cards Grid */
.status-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.status-card {
  padding: 11px;
  border: 1px solid #e1e9f1;
  border-radius: 12px;
  background: #fbfdff;
}

.status-card .top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #6d8398;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot.W { background: var(--W); }
.dot.S { background: var(--S); }
.dot.D { background: var(--D); }
.dot.BU { background: var(--BU); }
.dot.MS { background: var(--MS); }

.status-card b {
  font-size: 17px;
  display: block;
  margin: 6px 0 1px;
}

.status-card small {
  font-size: 9px;
  color: #8797a8;
}

/* Pills & Badges */
.pill {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: #eef4fa;
  color: #55738f;
  font-size: 9px;
  font-weight: 750;
  margin: 1px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: 850;
}

.badge.CRITICAL, .badge.HIGH {
  background: #fff0f0;
  color: #bf3f3f;
  border: 1px solid #f9d3d3;
}

.badge.MEDIUM {
  background: #fff8e5;
  color: #b57600;
  border: 1px solid #fae6b2;
}

.badge.LOW {
  background: #eaf9f2;
  color: #18895a;
  border: 1px solid #c1eed8;
}

.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 6px;
  background: #eef6ff;
  color: #28649e;
  font-size: 9px;
  font-weight: 800;
  border: 1px solid #d4e4f7;
}

.interactive-note {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: 10px;
  color: #6e879f;
}

.interactive-note::before {
  content: '↗';
  font-weight: 900;
  color: var(--blue);
}

.opp-note {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff9e8;
  border: 1px solid #f1dfaa;
  color: #765c1d;
  font-size: 10px;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* Loading & Spinner */
.loading {
  min-height: 50vh;
  display: grid;
  place-items: center;
  color: #65809a;
  padding: 40px;
}

.spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid #e1ebf4;
  border-top-color: var(--blue);
  animation: spin 0.8s linear infinite;
  margin: auto auto 10px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Error State */
.error {
  max-width: 760px;
  margin: 60px auto;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #f1caca;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.error h3 {
  color: #b53c3c;
  margin-top: 0;
  font-size: 17px;
}

.error pre {
  white-space: pre-wrap;
  background: #fff6f6;
  padding: 12px;
  border-radius: 10px;
  color: #7b4747;
  font-size: 11px;
  overflow-x: auto;
}

/* Empty State */
.empty {
  padding: 30px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

/* Skeleton Loading Elements */
.skeleton {
  background: linear-gradient(90deg, #edf2f7 25%, #f7fafc 50%, #edf2f7 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}

.skeleton-kpi {
  height: 104px;
  border-radius: var(--radius);
}

/* =========================================================
   Excel-parity meeting redesign
   ========================================================= */
.excel-parity-hero,.fuel-basis-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:4px 0 16px;padding:4px 2px 14px;border-bottom:1px solid var(--line)}
.excel-parity-hero h2,.fuel-basis-head h2{margin:3px 0 4px;font-size:25px;letter-spacing:-.55px}.excel-parity-hero p,.fuel-basis-head p{margin:0;color:var(--muted);max-width:950px}.hero-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.basis-badge{padding:7px 10px;border-radius:999px;background:#e9f3ff;color:#205d9d;font-weight:850;font-size:10px;letter-spacing:.06em;border:1px solid #cfe3fa}
.data-status.DATA_VALID{background:#e7f6ee;color:#19643d}.data-status.DATA_WARNING{background:#fff3cd;color:#855d00}.data-status.ANALYTICS_BLOCKED{background:#ffebeb;color:#a32626}

.meeting-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:12px}.meeting-kpi .kpi{height:100%;margin:0}.meeting-kpi.hero-kpi .kpi{min-height:144px;border-top:3px solid var(--blue);background:linear-gradient(145deg,#fff,#f5f9ff)}.meeting-kpi.hero-kpi .value{font-size:29px}.meeting-kpi.hero-kpi.fuel .kpi{border-top-color:#3aa17e;background:linear-gradient(145deg,#fff,#f1faf6)}.meeting-kpi.hero-kpi.ratio .kpi{border-top-color:#8b6fd1;background:linear-gradient(145deg,#fff,#f7f4fc)}.meeting-kpi.compact .kpi{min-height:106px}.meeting-kpi-grid .compact:nth-child(n+5){grid-column:span 1}.meeting-kpi-grid .detail-hint{opacity:.65}

.meeting-matrix-card{margin-bottom:12px}.shift-matrix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.shift-matrix-col{border:1px solid var(--line);background:#fff;border-radius:12px;padding:0;text-align:left;overflow:hidden;color:var(--ink);cursor:pointer;transition:.16s ease}.shift-matrix-col:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,74,112,.09);border-color:#bfd8f3}.shift-matrix-col.all{border-color:#a9caef;background:#fbfdff}.shift-matrix-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#f4f8fc;border-bottom:1px solid var(--line)}.shift-matrix-head b{font-size:15px;color:#174f86}.shift-matrix-head span{font-size:9px;color:var(--muted);text-transform:uppercase;font-weight:800}.shift-matrix-metric{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px dashed #e5edf5}.shift-matrix-metric:last-child{border-bottom:0}.shift-matrix-metric span{font-size:10px;color:var(--muted);font-weight:700}.shift-matrix-metric b{font-size:12px;white-space:nowrap}

.mtd-strip{display:grid;grid-template-columns:1.25fr repeat(3,1fr) 1.3fr;gap:8px;align-items:stretch;margin-bottom:12px;background:#f7fafd;border:1px solid var(--line);border-radius:12px;padding:9px}.mtd-title{padding:8px 10px;display:flex;flex-direction:column;justify-content:center}.mtd-title b{font-size:14px;margin-top:2px}.mtd-title small{color:var(--muted)}.mtd-metric{border:1px solid #dde8f2;background:#fff;border-radius:9px;padding:10px 11px;text-align:left;color:var(--ink);cursor:pointer}.mtd-metric span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800}.mtd-metric b{display:block;margin-top:5px;font-size:17px}.mtd-note{font-size:10px;color:var(--muted);line-height:1.45;padding:8px 10px;display:flex;align-items:center}

.overview-main-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(290px,.9fr);gap:12px;margin-top:12px}.overview-main-grid.lower{grid-template-columns:1.35fr 1fr}.waterfall-main{min-height:370px}.constraint-ranks{display:grid;gap:7px}.constraint-rank{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:9px;border:1px solid #e2eaf2;background:#fff;border-radius:10px;padding:8px 9px;text-align:left;color:var(--ink);cursor:pointer}.constraint-rank .rank{width:25px;height:25px;border-radius:7px;background:#edf4fb;color:#2668a5;display:grid;place-items:center;font-weight:900;font-size:10px}.constraint-rank b{display:block;font-size:11px}.constraint-rank small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.constraint-rank strong{font-size:11px;color:#a54c32}.mini-insight-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}.mini-insight{border:1px solid #e2eaf2;background:#fff;border-radius:9px;padding:9px;text-align:left;color:var(--ink);cursor:pointer}.mini-insight span{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;font-weight:800}.mini-insight b{display:block;font-size:11px;margin-top:4px}.source-basis{display:grid;gap:7px}.basis-row{display:grid;grid-template-columns:95px 1fr;gap:10px;border:1px solid #e3ebf3;background:#fbfdff;border-radius:9px;padding:9px 10px;text-align:left;color:var(--ink);cursor:pointer}.basis-row b{font-size:10px;color:#205d9d;text-transform:uppercase}.basis-row span{font-size:10px;color:var(--muted);line-height:1.4}

/* True clickable waterfall chart */
.waterfall-chart{position:relative;padding:14px 8px 4px 45px;min-width:0}.wf-axis{position:absolute;left:0;top:15px;bottom:45px;width:39px;display:flex;flex-direction:column;justify-content:space-between;color:#8a9bad;font-size:8px;text-align:right;padding-right:6px;border-right:1px solid #dbe6f0}.wf-grid{height:250px;display:grid;grid-template-columns:repeat(5,minmax(90px,1fr));gap:9px;align-items:stretch;border-bottom:1px solid #dbe6f0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 61px,#edf2f7 62px)}.wf-col{display:grid;grid-template-rows:30px 1fr 42px;min-width:0;position:relative}.wf-value{font-size:10px;font-weight:900;text-align:center;align-self:end}.wf-value.base{color:#246bab}.wf-value.deduction{color:#b14d3b}.wf-value.final{color:#23734a}.wf-plot{position:relative;border:0;background:transparent;padding:0;cursor:pointer;min-height:0}.wf-plot.base-static,.wf-plot.deduction-static{cursor:default}.wf-bar{position:absolute;left:18%;right:18%;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#5aa3e6,#2d78bc);min-height:2px;box-shadow:0 1px 2px rgba(36,74,112,.1)}.wf-plot.deduction .wf-bar,.deduction-static .wf-bar{background:linear-gradient(180deg,#f2a58f,#d96d55)}.wf-plot.final .wf-bar{background:linear-gradient(180deg,#6bc497,#2e8c61)}.wf-plot:hover .wf-bar{filter:brightness(.95);outline:2px solid rgba(47,119,185,.15)}.wf-running{position:absolute;left:2px;right:2px;bottom:2px;font-size:8px;color:#8798aa;text-align:center}.wf-label{text-align:center;font-size:9px;font-weight:750;color:#596f85;padding-top:6px;line-height:1.2;overflow-wrap:anywhere}.waterfall-equation{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:10px;padding:8px;border-radius:8px;background:#f7fafc;color:#62788d;font-size:9px}.waterfall-equation b{color:#214d78}.constraint-waterfall{overflow-x:auto;padding-bottom:8px}.constraint-waterfall .wf-grid{min-width:760px}

.shift-bars{display:grid;gap:8px}.shift-bar{display:grid;grid-template-columns:32px 1fr 96px;gap:9px;align-items:center;border:0;background:transparent;padding:5px 0;color:var(--ink);cursor:pointer}.shift-name{font-size:11px;font-weight:900}.shift-track{height:9px;border-radius:999px;background:#edf3f8;overflow:hidden}.shift-track i{display:block;height:100%;background:linear-gradient(90deg,#6aabe8,#2d79bd);border-radius:999px}.shift-bar b{text-align:right;font-size:11px}

/* Fuel parity */
.fuel-basis-head{align-items:center}.fuel-metric{width:100%;text-align:left;border:1px solid var(--line);font-family:inherit}.fuel-metric.primary{border-top:3px solid #2f966f}.fuel-metric.ratio{border-top:3px solid #846cc2}.source-warning{display:flex;gap:12px;align-items:center;background:#fff1ef;border:1px solid #f4c6bd;border-left:4px solid #d95c45;border-radius:10px;padding:12px 14px;margin-bottom:12px}.source-warning b{font-size:11px;color:#a13d2e}.source-warning span{font-size:11px;color:#7f5149}.formula-box{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:center;margin-top:12px}.formula-box h3{margin:4px 0 0;font-size:18px}.formula-notes{display:grid;gap:6px}.formula-notes span{font-size:10px;color:var(--muted);line-height:1.4}.formula-notes b{color:#315d87;margin-right:6px}.fuel-shift-table{display:grid;gap:7px;margin-bottom:12px}.fuel-shift-row{display:grid;grid-template-columns:45px repeat(5,1fr);gap:9px;align-items:center;border:1px solid #e1eaf2;border-radius:9px;padding:9px 10px;background:#fff;text-align:left;color:var(--ink);cursor:pointer}.fuel-shift-row>b{font-size:13px;color:#215e98}.fuel-shift-row span{font-size:9px;color:var(--muted)}.fuel-shift-row strong{display:block;margin-top:2px;font-size:11px;color:var(--ink)}.rule-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.rule-item{border:1px solid #e2ebf3;background:#fbfdff;border-radius:9px;padding:10px;text-align:left;color:var(--ink);cursor:pointer}.rule-item b{display:block;font-size:10px;color:#205e9a;margin-bottom:4px}.rule-item span{font-size:9px;color:var(--muted);line-height:1.45}.production-waterfall-card,.constraint-waterfall-card{margin-bottom:13px}
.check-list,.diagnostic-grid{display:grid;gap:7px}.check-row{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed #e4ebf2;padding:7px 2px;font-size:10px}.check-row span{color:var(--muted)}.check-row b{font-size:10px;text-align:right}.check-row b.good{color:#25805a}.check-row b.warn{color:#a66c13}.check-row b.bad{color:#b54535}.basis-list{display:grid;gap:8px}.basis-list>div{padding:8px 9px;border:1px solid #e4ebf2;border-radius:8px;background:#fbfdff}.basis-list b{display:block;font-size:9px;color:#245f98;text-transform:uppercase;margin-bottom:3px}.basis-list span{font-size:10px;color:var(--muted);line-height:1.45}
.status-actual-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.status-actual{border:1px solid #e1eaf2;background:#fff;border-radius:10px;padding:10px;text-align:left;color:var(--ink);cursor:pointer;border-top:3px solid #9aacbc}.status-actual.W{border-top-color:#3b9a70}.status-actual.S{border-top-color:#6d8eb1}.status-actual.D{border-top-color:#d59a32}.status-actual.BU{border-top-color:#d45e4a}.status-actual.MS{border-top-color:#836ec2}.status-actual b{font-size:10px}.status-actual strong{display:block;font-size:18px;margin:3px 0}.status-actual span{font-size:9px;color:var(--muted)}.all-mode-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 13px;border:1px solid #cfe1f2;background:#f2f8fd;border-radius:10px;color:#315b82;font-size:10px;margin-top:12px}.all-mode-note span{flex:1;min-width:260px;color:var(--muted)}.all-mode-note>div{display:flex;gap:6px}.unit360-sections{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.unit360-block{border:1px solid #e2eaf2;border-radius:10px;padding:10px;background:#fbfdff}.unit360-block .metric-row{margin-top:7px}.unit360-block .metric{border:0;background:#fff;border-radius:8px;padding:7px}.unit-timeline-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:5px}.unit-hour{border:0;background:transparent;text-align:center;cursor:pointer;color:var(--ink)}.unit-hour .cell{display:block;height:32px;border-radius:5px}.unit-hour small{display:block;font-size:8px;color:#72879b;margin-top:3px}.unit-hour b{font-size:9px}.fuel-unit-context{width:100%;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;border:0;background:transparent;color:var(--ink);cursor:pointer;text-align:left}.fuel-unit-context span{border:1px solid #e1eaf2;background:#fbfdff;border-radius:8px;padding:9px}.fuel-unit-context b{display:block;font-size:11px}.fuel-unit-context small{display:block;font-size:8px;color:var(--muted);margin-top:3px}
@media(max-width:1000px){.status-actual-grid{grid-template-columns:repeat(3,1fr)}.unit360-sections{grid-template-columns:1fr}.fuel-unit-context{grid-template-columns:repeat(3,1fr)}}
.hourly.hourly-long{overflow-x:auto;align-items:flex-end}.hourly.hourly-long .hourcol{min-width:34px}
.recon-badge{padding:7px 10px;border-radius:999px;font-weight:850;font-size:9px;letter-spacing:.05em;border:1px solid}.recon-badge.ok{background:#e8f7ef;color:#237048;border-color:#c6ead7}.recon-badge.warn{background:#fff3df;color:#93631a;border-color:#f0d7aa}

/* =========================================================
   Zero-Wait Filter UX — State Badges, Dimming & Odometer
   ========================================================= */

/* Zero-Blank Dimming State */
.content-dimmed {
  opacity: 0.72 !important;
  transition: opacity 0.2s ease-in-out;
  pointer-events: auto; /* Still responsive, no freezing */
}

/* Tabular numbers for clean odometer count-up */
.kpi .value, .meeting-kpi .value, .mtd-metric b, .shift-matrix-metric b {
  font-variant-numeric: tabular-nums;
}

/* Chart smooth transitions */
.chart-container, .waterfall-chart, .hourly-chart, .hourly {
  transition: opacity 0.2s ease-in-out;
}
.chart-dimmed {
  opacity: 0.65 !important;
}

/* Filter Status Pill & Indicator */
.filter-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted, #94a3b8);
  transition: all 0.2s ease;
}

.filter-status-badge .badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748b;
  display: inline-block;
  flex-shrink: 0;
}

/* Status variants */
.filter-status-badge.status-ready {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.25);
  color: #10b981;
}
.filter-status-badge.status-ready .badge-dot {
  background: #10b981;
}

.filter-status-badge.status-cache {
  background: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.25);
  color: #38bdf8;
}
.filter-status-badge.status-cache .badge-dot {
  background: #38bdf8;
}

.filter-status-badge.status-refreshing {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}
.filter-status-badge.status-refreshing .badge-dot {
  background: #60a5fa;
  animation: pulse-dot 1.2s infinite ease-in-out;
}

.filter-status-badge.status-cold {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}
.filter-status-badge.status-cold .badge-dot {
  background: #fbbf24;
  animation: pulse-dot 1s infinite ease-in-out;
}

.filter-status-badge.status-error-cache {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.35);
  color: #f59e0b;
}
.filter-status-badge.status-error-cache .badge-dot {
  background: #f59e0b;
}

.filter-status-badge.status-error {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ef4444;
}
.filter-status-badge.status-error .badge-dot {
  background: #ef4444;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}

/* =========================================================
 * LOADER PRODUCTIVITY OB STYLES
 * ========================================================= */
.loader-pdty-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

.loader-pdty-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.loader-pdty-title-group h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #f1f5f9;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.loader-pdty-title-group p {
  font-size: 12px;
  color: #94a3b8;
  margin: 2px 0 0 0;
}

.loader-pdty-toggles {
  display: inline-flex;
  background: rgba(15, 23, 42, 0.7);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.lp-toggle-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lp-toggle-btn.active {
  background: #1e293b;
  color: #38bdf8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.lp-toggle-btn:hover:not(.active) {
  color: #f1f5f9;
}

/* KPI STRIP */
.lp-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.lp-kpi-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.lp-kpi-card:hover {
  border-color: rgba(56, 189, 248, 0.25);
  transform: translateY(-1px);
}

.lp-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lp-kpi-val-group {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}

.lp-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: #f8fafc;
  font-feature-settings: "tnum";
}

.lp-kpi-unit {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}

.lp-kpi-sub {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
}

.lp-kpi-sub.above { color: #34d399; }
.lp-kpi-sub.below { color: #f87171; }

/* COMPARISON CHART */
.loader-pdty-chart-wrapper {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  color: #94a3b8;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-swatch.actual-above { background: #10b981; }
.legend-swatch.actual-below { background: #f59e0b; }
.legend-swatch.plan-line {
  background: transparent;
  border-top: 2px dashed #94a3b8;
  height: 2px;
  width: 14px;
}

.lp-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  align-items: flex-end;
  min-height: 210px;
  padding-top: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lp-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.lp-col:hover {
  background: rgba(255, 255, 255, 0.04);
}

.lp-values {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 12px;
  font-feature-settings: "tnum";
}

.lp-actual-val { font-weight: 700; }
.lp-actual-val.above { color: #34d399; }
.lp-actual-val.below { color: #fbbf24; }
.lp-actual-val.muted { color: #64748b; }
.lp-plan-val { font-size: 10px; color: #64748b; }

.lp-bar-group {
  width: 100%;
  max-width: 64px;
  height: 160px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.lp-bar-track {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.lp-bar.actual {
  width: 24px;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

.lp-bar.actual.above {
  background: linear-gradient(180deg, #34d399 0%, #059669 100%);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.lp-bar.actual.below {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.lp-bar.empty-slot {
  width: 24px;
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
}

.lp-bar.plan {
  width: 24px;
  position: relative;
  border-top: 2px dashed rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 2px 2px 0 0;
}

.lp-label {
  font-size: 11px;
  font-weight: 600;
  color: #e2e8f0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.lp-sublabel {
  font-size: 10px;
  color: #64748b;
  text-align: center;
}

/* CLASS CARDS STRIP */
.lp-class-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.lp-class-card {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-class-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(30, 41, 59, 0.5);
  transform: translateY(-2px);
}

.lp-class-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lp-class-name {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
}

.lp-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.lp-badge.above { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.lp-badge.below { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.lp-badge.no-hours { background: rgba(100, 116, 139, 0.15); color: #94a3b8; border: 1px solid rgba(100, 116, 139, 0.3); }

.lp-class-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.lp-metric-item {
  display: flex;
  flex-direction: column;
}

.lp-metric-item small {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
}

.lp-metric-item span {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  font-feature-settings: "tnum";
}

.lp-class-foot {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #94a3b8;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 6px;
}

/* HOURLY TREND */
.loader-pdty-trend-wrapper {
  overflow-x: auto;
  padding: 12px 0 6px 0;
}

.lp-trend-grid {
  display: flex;
  gap: 8px;
  min-width: 600px;
  align-items: flex-end;
  height: 180px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.lp-trend-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.lp-trend-col:hover {
  background: rgba(255, 255, 255, 0.04);
}

.lp-trend-val {
  font-size: 10px;
  font-weight: 700;
  font-feature-settings: "tnum";
}

.lp-trend-val.above { color: #34d399; }
.lp-trend-val.below { color: #fbbf24; }

.lp-trend-plot {
  width: 100%;
  max-width: 24px;
  height: 140px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.lp-trend-bar {
  width: 14px;
  border-radius: 3px 3px 0 0;
}

.lp-trend-bar.above { background: #10b981; }
.lp-trend-bar.below { background: #f59e0b; }

.lp-trend-plan-marker {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #38bdf8;
  border-radius: 1px;
}

.lp-trend-hour {
  font-size: 10px;
  font-weight: 600;
  color: #cbd5e1;
}

.lp-trend-hrs {
  font-size: 9px;
  color: #64748b;
}

/* STRATEGIC INSIGHTS */
.lp-insights-panel {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-insights-panel h4 {
  font-size: 12px;
  font-weight: 700;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.lp-insight-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.45;
}

.lp-insight-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.lp-insight-dot.positive { background: #34d399; }
.lp-insight-dot.negative { background: #f87171; }
.lp-insight-dot.info { background: #38bdf8; }