:root{
  --bg:#080c12;--panel:#101720;--line:#273241;--text:#eef3f8;--muted:#8d9aaa;
  --green:#19c45b;--amber:#f4a900;--red:#f04449;--blue:#2f80ed
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;padding:25px 32px 18px;border-bottom:1px solid var(--line)}
.company{font-size:14px;letter-spacing:1.7px;color:#aeb8c6;font-weight:700}
h1{margin:6px 0 0;font-size:30px;letter-spacing:1px}
.clock{text-align:right;color:#28d76a;font-size:31px;font-weight:800}
.date{text-align:right;color:#8e99a8;margin-top:4px}
main{padding:20px 32px 30px}
.floor-tabs{display:flex;gap:10px;margin-bottom:18px}
.floor-tab{appearance:none;border:1px solid var(--line);background:#0f161f;color:#aeb8c6;padding:11px 22px;border-radius:10px;font-size:12px;font-weight:800;letter-spacing:1px;cursor:pointer;transition:.2s}
.floor-tab:hover{border-color:#4b596b;color:#eef3f8}
.floor-tab.active{background:var(--green);color:#04150b;border-color:var(--green);box-shadow:0 0 18px rgba(25,196,91,.18)}
.kpis{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  margin-bottom:18px
}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 16px}
.kpi span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.kpi b{font-size:25px}
.kpi.normal b{color:var(--green)}
.kpi.machine b{color:var(--red)}
.kpi.material b{color:var(--amber)}
.kpi.quality b{color:var(--blue)}
.kpi.offline b{color:#ffffff}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.layout-panel{margin-bottom:18px}
.panel-head{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:10px}
.panel-title{font-size:13px;font-weight:800;letter-spacing:1.2px}
.panel-subtitle{font-size:11px;color:var(--muted);margin-top:4px}
.legend{display:flex;gap:12px;flex-wrap:wrap;color:#9ca7b5;font-size:11px}
.dot{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.dot.normal{background:var(--green)}
.dot.machine{background:var(--red)}
.dot.material{background:var(--amber)}
.dot.quality{background:var(--blue)}
.layout-map{
  position:relative;
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  height:550px;
  border:1px solid var(--line);
  cursor:grab;
  user-select:none;
  touch-action:none;
}

.layout-map.is-panning{
  cursor:grabbing;
}

.map-stage{
  position:relative;
  width:100%;
  min-width:820px;
  transform-origin:0 0;
  padding-bottom:5px;
  will-change:transform;
}

.layout-map>img,
.map-stage>img{
  display:block;
  width:100%;
  height:auto;
  min-height:520px;
  object-fit:contain;
  background:#fff;
  border-radius:8px;
  pointer-events:none;
  user-select:none;
}

#markers{
  position:absolute;
  inset:0;
}
.marker{position:absolute;transform:translate(-50%,-50%);min-width:30px;max-width:70px;padding:2px 2px;border-radius:7px;text-align:center;font-size:4px;font-weight:800;line-height:1.1;box-shadow:0 2px 8px rgba(0,0,0,.35);cursor:pointer;border:2px solid rgba(255,255,255,.85)}
.marker.normal{background:var(--green);color:#04150b}
.marker.danger{background:var(--red);color:#fff;--pulse-color:var(--red)}
.marker.warning{background:var(--amber);color:#1b1100;--pulse-color:var(--amber)}
.marker.quality{background:var(--blue);color:#fff;--pulse-color:var(--blue)}

.board-section{width:100%}
.cluster{margin-bottom:17px}
.cluster-title{font-size:13px;letter-spacing:1.5px;color:#aeb8c6;font-weight:800;margin:0 0 8px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{position:relative;overflow:visible;border-radius:11px;padding:16px;min-height:118px;border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.card.normal{background:var(--green);color:#03130a}
.card.danger{background:var(--red);color:#fff;--pulse-color:var(--red)}
.card.warning{background:var(--amber);color:#1a1000;--pulse-color:var(--amber)}
.card.quality{background:var(--blue);color:#fff;--pulse-color:var(--blue)}
.card h3{margin:0 0 14px;font-size:18px}
.card-status-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.badge{display:inline-block;border-radius:18px;padding:7px 12px;background:rgba(0,0,0,.14);font-size:13px;font-weight:800}
.reset-line-btn{appearance:none;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.18);color:inherit;border-radius:8px;padding:7px 10px;font-size:10px;font-weight:900;letter-spacing:.6px;cursor:pointer;transition:.18s;white-space:nowrap}
.reset-line-btn:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.reset-line-btn:disabled{opacity:.65;cursor:wait;transform:none}

/* Pulse hanya untuk Machine, Material, Quality. Normal tidak pulse. */
.status-pulse{animation:cardPulse 1.1s ease-out infinite}
.card.status-pulse::after{content:"";position:absolute;inset:-5px;border:4px solid var(--pulse-color);border-radius:15px;animation:ring 1.1s ease-out infinite;pointer-events:none}
.marker.status-pulse{animation:markerPulse 1.1s ease-out infinite;z-index:10}
.marker.status-pulse::after{content:"";position:absolute;inset:-7px;border:3px solid var(--pulse-color);border-radius:10px;animation:ring 1.1s ease-out infinite;pointer-events:none}
@keyframes cardPulse{0%,100%{transform:scale(1)}45%{transform:scale(1.035)}}
@keyframes markerPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.14)}}
@keyframes ring{0%{transform:scale(.9);opacity:.95}70%{transform:scale(1.45);opacity:.22}100%{transform:scale(1.7);opacity:0}}

.history-panel{margin-top:18px;margin-bottom:18px}
.history-table-wrap{overflow-x:auto}
.history-table{width:100%;border-collapse:collapse;font-size:12px;min-width:760px}
.history-table th{padding:10px 12px;text-align:left;color:#8d9aaa;font-size:10px;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--line);background:#0c121a}
.history-table td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.06);color:#dbe2ea}
.history-table tbody tr:hover{background:rgba(255,255,255,.025)}
.history-empty{text-align:center!important;color:var(--muted)!important;padding:24px!important}
.history-problem,.history-state{display:inline-block;padding:4px 8px;border-radius:12px;font-weight:800;font-size:10px}
.history-problem.machine{background:rgba(240,68,73,.16);color:var(--red)}
.history-problem.material{background:rgba(244,169,0,.16);color:var(--amber)}
.history-problem.quality{background:rgba(47,128,237,.16);color:var(--blue)}
.history-state.active{background:rgba(240,68,73,.12);color:var(--red)}
.history-state.closed{background:rgba(25,196,91,.12);color:var(--green)}

/* =========================================================
   HISTORY FILTER
   ========================================================= */

.history-filters{
  display:grid;
  grid-template-columns:1fr 1.5fr 1.2fr auto;
  gap:10px;
  align-items:end;
  margin:14px 0;
}

.history-filter-group{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.history-filter-group label{
  font-size:9px;
  font-weight:900;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.7px;
}

.history-filter-group input,
.history-filter-group select{
  width:100%;
  height:36px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 10px;
  background:#0b1118;
  color:var(--text);
  font-size:11px;
  outline:none;
}

.history-filter-group input:focus,
.history-filter-group select:focus{
  border-color:var(--green);
  box-shadow:
    0 0 0 2px rgba(25,196,91,.10);
}

.history-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:0 0 14px;
}

.history-summary-card{
  background:#0c1219;
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px 12px;
}

.history-summary-card small{
  display:block;
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.7px;
  margin-bottom:5px;
}

.history-summary-card strong{
  display:block;
  color:var(--text);
  font-size:18px;
  line-height:1.1;
}

@media(max-width:900px){

  .history-filters{
    grid-template-columns:1fr 1fr;
  }

}

@media(max-width:700px){

  .history-filters{
    grid-template-columns:1fr;
  }

  .history-summary{
    grid-template-columns:1fr;
  }

}

footer{border-top:1px solid var(--line);padding:12px 32px;color:#718096;font-size:11px;display:flex;justify-content:space-between}

@media(max-width:1050px){
  .floor-tabs{
    display:flex;
    gap:10px;
    margin-bottom:18px
  }

  .floor-tab{
    appearance:none;
    border:1px solid var(--line);
    background:#0f161f;
    color:#aeb8c6;
    padding:11px 22px;
    border-radius:10px;
    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
    cursor:pointer;
    transition:.2s
  }

  .floor-tab:hover{
    border-color:#4b596b;
    color:#eef3f8
  }

  .floor-tab.active{
    background:var(--green);
    color:#04150b;
    border-color:var(--green);
    box-shadow:0 0 18px rgba(25,196,91,.18)
  }

  .kpis{
    grid-template-columns:repeat(3,1fr)
  }

  .map-stage>img{
    height:auto
  }

  .layout-map{
    min-height:360px
  }
}
@media(max-width:700px){h1{font-size:21px}.topbar{padding:18px}.floor-tabs{display:flex;gap:10px;margin-bottom:18px}
.floor-tab{appearance:none;border:1px solid var(--line);background:#0f161f;color:#aeb8c6;padding:11px 22px;border-radius:10px;font-size:12px;font-weight:800;letter-spacing:1px;cursor:pointer;transition:.2s}
.floor-tab:hover{border-color:#4b596b;color:#eef3f8}
.floor-tab.active{background:var(--green);color:#04150b;border-color:var(--green);box-shadow:0 0 18px rgba(25,196,91,.18)}
.kpis{grid-template-columns:repeat(2,1fr)}main{padding:15px}.cards{grid-template-columns:1fr}.clock-wrap{display:none}.map-stage>img{height:auto}.layout-map{min-height:300px}.marker{font-size:8px;min-width:65px;max-width:110px}}


/* Header actions */
.top-actions{display:flex;align-items:flex-end;gap:18px}
.action-btn{appearance:none;border:1px solid var(--green);background:rgba(25,196,91,.10);color:var(--green);padding:10px 14px;border-radius:9px;font-size:11px;font-weight:900;letter-spacing:.7px;cursor:pointer;transition:.2s}
.action-btn:hover{background:var(--green);color:#04150b;box-shadow:0 0 18px rgba(25,196,91,.18)}

/* ============================================================
   ZOOM / PAN DENAH
   ============================================================ */

.zoom-controls{
  position:absolute;
  right:12px;
  top:12px;
  z-index:30;

  display:flex;
  align-items:center;
  gap:4px;

  padding:5px;

  background:rgba(8,12,18,.86);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;

  backdrop-filter:blur(7px);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}

.zoom-controls button{
  width:34px;
  height:30px;

  border:0;
  border-radius:6px;

  background:#18212c;
  color:#eef3f8;

  font-size:18px;
  font-weight:800;

  cursor:pointer;
  line-height:1;

  transition:
    background .16s ease,
    transform .12s ease;
}

.zoom-controls button:hover{
  background:#273444;
}

.zoom-controls button:active{
  transform:scale(.92);
}

.zoom-controls .zoom-value{
  width:52px;
  font-size:10px;
  letter-spacing:.5px;
}

/* Add line modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.68);display:flex;align-items:center;justify-content:center;padding:20px}
.modal.hidden{display:none}
.modal-card{width:min(560px,100%);background:#101720;border:1px solid #334052;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5);padding:20px}
.modal-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.modal-title{font-size:15px;font-weight:900;letter-spacing:1px}
.modal-subtitle{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.45}
.modal-close{border:0;background:transparent;color:#9aa6b5;font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.line-form{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.line-form label{display:flex;flex-direction:column;gap:6px}
.line-form label span{font-size:10px;color:#9ca7b5;text-transform:uppercase;letter-spacing:.7px;font-weight:800}
.line-form input,.line-form select{width:100%;border:1px solid #2c3847;background:#0b1118;color:#eef3f8;border-radius:8px;padding:10px 11px;font-size:12px;outline:none}
.line-form input:focus,.line-form select:focus{border-color:var(--green);box-shadow:0 0 0 2px rgba(25,196,91,.10)}
.full{grid-column:1/-1}
.position-help{font-size:10px;color:#7f8b9b;background:#0c1219;border:1px dashed #2b3644;border-radius:8px;padding:9px 10px;line-height:1.45}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:2px}
.primary-btn,.secondary-btn{border-radius:8px;padding:10px 15px;font-size:11px;font-weight:900;cursor:pointer}
.primary-btn{border:1px solid var(--green);background:var(--green);color:#04150b}
.secondary-btn{border:1px solid #344052;background:#17202b;color:#d5dce5}
.form-message{min-height:16px;font-size:11px;color:#9ca7b5}
.form-message.success{color:var(--green)}
.form-message.error{color:var(--red)}

@media(max-width:1050px){
  .layout-map{
    height:460px;
  }

  .map-stage{
    min-width:720px;
  }
}
@media(max-width:700px){
  .topbar{
    align-items:flex-start;
  }

  .top-actions{
    align-items:flex-start;
    gap:8px;
    flex-direction:column-reverse;
  }

  .action-btn{
    padding:8px 10px;
    font-size:10px;
  }

  .layout-map{
    height:360px;
  }

  .map-stage{
    min-width:620px;
  }

  .zoom-controls{
    right:8px;
    top:8px;
  }

  .zoom-controls button{
    width:32px;
    height:28px;
  }

  .line-form{
    grid-template-columns:1fr;
  }

  .full{
    grid-column:1;
  }
}


/* ============================================================
   V3 — DASHBOARD / SETTING
   ============================================================ */
.mode-nav{display:flex;gap:8px;margin-bottom:16px}
.mode-nav a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid var(--line);background:#0f161f;color:#9faaba;padding:9px 15px;border-radius:8px;font-size:10px;font-weight:900;letter-spacing:.8px}
.mode-nav a:hover{border-color:#566477;color:#fff}
.mode-nav a.active{background:var(--green);border-color:var(--green);color:#04150b}
.panel-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.draggable-marker{cursor:grab;touch-action:none}
.draggable-marker:hover{z-index:40;outline:2px solid rgba(255,255,255,.8);outline-offset:2px}
.draggable-marker.dragging{cursor:grabbing;z-index:60;transform:translate(-50%,-50%) scale(1.18);box-shadow:0 5px 20px rgba(0,0,0,.55)}
.primary-btn:disabled{opacity:.45;cursor:not-allowed}
.settings-panel{margin-top:18px}
.table-wrap{overflow-x:auto}
.settings-table{width:100%;border-collapse:collapse;min-width:760px;font-size:12px}
.settings-table th{padding:10px 12px;text-align:left;color:#8d9aaa;font-size:10px;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--line);background:#0c121a}
.settings-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);color:#dbe2ea}
.settings-table tbody tr:hover{background:rgba(255,255,255,.025)}
.inactive-row{opacity:.55}
.line-active{display:inline-block;padding:4px 8px;border-radius:12px;font-size:10px;font-weight:900}
.line-active.yes{background:rgba(25,196,91,.12);color:var(--green)}
.line-active.no{background:rgba(240,68,73,.12);color:var(--red)}
.table-actions{white-space:nowrap;display:flex;gap:6px}
.mini-btn{border:1px solid #344052;background:#17202b;color:#dce4ed;border-radius:7px;padding:7px 9px;font-size:10px;font-weight:800;cursor:pointer}
.mini-btn:hover{border-color:#64748a;background:#202c3a}
.mini-btn.danger-btn{border-color:rgba(240,68,73,.45);color:#ff7b80}
.settings-panel .panel-head{align-items:flex-start}
@media(max-width:700px){
  .mode-nav{margin-bottom:12px}
  .panel-tools{justify-content:flex-start}
  .table-actions{flex-direction:column}
}


/* V4 — LOGIN */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at top,#172331 0,#080c11 55%)}
.login-card{width:min(420px,100%);background:#101720;border:1px solid #334052;border-radius:16px;padding:30px;box-shadow:0 25px 70px rgba(0,0,0,.55)}
.login-brand{font-size:11px;color:#8d9aaa;font-weight:900;letter-spacing:1.3px;margin-bottom:12px}.login-card h1{margin:0;font-size:28px;letter-spacing:1px}.login-subtitle{color:#8d9aaa;font-size:12px;margin:8px 0 22px}.login-form{display:grid;gap:15px}.login-form label{display:flex;flex-direction:column;gap:7px}.login-form label span{font-size:10px;color:#9ca7b5;text-transform:uppercase;letter-spacing:.8px;font-weight:800}.login-form input{width:100%;box-sizing:border-box;border:1px solid #2c3847;background:#0b1118;color:#eef3f8;border-radius:9px;padding:12px;font-size:13px;outline:none}.login-form input:focus{border-color:var(--green);box-shadow:0 0 0 2px rgba(25,196,91,.1)}.login-form button{border:1px solid var(--green);background:var(--green);color:#04150b;border-radius:9px;padding:12px;font-size:11px;font-weight:900;letter-spacing:1px;cursor:pointer}.login-form button:hover{box-shadow:0 0 18px rgba(25,196,91,.18)}.login-error{background:rgba(240,68,73,.12);border:1px solid rgba(240,68,73,.35);color:#ff8589;border-radius:8px;padding:10px;font-size:11px;margin-bottom:15px}.login-note{margin-top:18px;color:#687586;font-size:10px;line-height:1.5;text-align:center}.login-user{font-size:10px;color:#8d9aaa;font-weight:800;white-space:nowrap}.login-user a{color:var(--green);text-decoration:none;margin-left:7px}.login-user a:hover{text-decoration:underline}
@media(max-width:700px){.login-card{padding:24px}.login-user{font-size:9px}}

/* =========================================================
   OFFLINE STATUS
   ========================================================= */

.offline{
  background:#6b7280 !important;
  color:#ffffff !important;
}

.card.offline{
  border:2px solid #9ca3af;
  box-shadow:
    0 6px 18px rgba(0,0,0,.18),
    0 0 0 2px rgba(156,163,175,.12);
}

.marker.offline{
  border:2px solid #ffffff;
  box-shadow:
    0 2px 8px rgba(0,0,0,.35),
    0 0 0 2px rgba(107,114,128,.35);
}

/* =========================================================
   REPORT & ANALYTICS
   ========================================================= */

.report-panel{
  margin-top:18px;
  margin-bottom:18px;
}

.report-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:14px;
}

.report-kpi{
  background:#0c1219;
  border:1px solid var(--line);
  border-radius:9px;
  padding:12px;
}

.report-kpi small{
  display:block;
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.7px;
  margin-bottom:6px;
}

.report-kpi strong{
  display:block;
  color:var(--text);
  font-size:20px;
  line-height:1.1;
}

.report-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.report-card{
  background:#0c1219;
  border:1px solid var(--line);
  border-radius:9px;
  padding:14px;
}

.report-card h3{
  margin:0 0 12px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.8px;
  color:var(--text);
}

.report-breakdown{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.report-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  background:#101720;
  border:1px solid rgba(255,255,255,.06);
  border-radius:7px;
}

.report-row-label{
  color:#dbe2ea;
  font-size:11px;
  font-weight:700;
}

.report-row-value{
  color:var(--text);
  font-size:11px;
  font-weight:900;
}

.report-bar-wrap{
  flex:1;
  height:6px;
  background:#1b2430;
  border-radius:10px;
  overflow:hidden;
}

.report-bar{
  height:100%;
  background:var(--green);
  border-radius:10px;
  transition:width .2s ease;
}

.report-empty{
  text-align:center;
  color:var(--muted);
  font-size:11px;
  padding:20px 10px;
}

@media(max-width:900px){

  .report-kpis{
    grid-template-columns:repeat(2,1fr);
  }

  .report-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:700px){

  .report-kpis{
    grid-template-columns:1fr 1fr;
  }

  .report-kpi strong{
    font-size:17px;
  }

}

/* =========================================================
   DASHBOARD KPI — CLAUDE STYLE
   ========================================================= */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.kpi-card {
  position: relative;
  min-height: 102px;
  padding: 16px 16px 14px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.045);
  overflow: hidden;
}

.kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #64748b;
}

.kpi-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  color: #0f172a;
}

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

/* Normal */
.kpi-card--normal::before {
  background: #16a34a;
}

.kpi-card--normal .kpi-value {
  color: #15803d;
}

/* Machine */
.kpi-card--machine::before {
  background: #dc2626;
}

.kpi-card--machine .kpi-value {
  color: #dc2626;
}

/* Material */
.kpi-card--material::before {
  background: #f59e0b;
}

.kpi-card--material .kpi-value {
  color: #d97706;
}

/* Quality */
.kpi-card--quality::before {
  background: #7c3aed;
}

.kpi-card--quality .kpi-value {
  color: #7c3aed;
}

/* Offline */
.kpi-card--offline::before {
  background: #64748b;
}

.kpi-card--offline .kpi-value {
  color: #475569;
}


/* =========================================================
   KPI RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   DASHBOARD - LIVE ANDON LAYOUT
   ========================================================= */

.layout-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #263445;
  border-radius: 14px;
  background: #0b1119;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.layout-panel .panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid #202c3b;
}

.layout-panel .panel-title {
  color: #f8fafc;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.layout-panel .panel-subtitle {
  margin-top: 5px;
  color: #8fa1b8;
  font-size: 12px;
}

/* ---------- LEGEND ---------- */

.layout-panel .legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 2px 0;
}

.layout-panel .legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #aebbd0;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.layout-panel .legend .dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 3px;
}

.layout-panel .legend .dot.normal {
  background: #22c55e;
}

.layout-panel .legend .dot.machine {
  background: #ef4444;
}

.layout-panel .legend .dot.material {
  background: #f59e0b;
}

.layout-panel .legend .dot.quality {
  background: #3b82f6;
}

.layout-panel .legend .dot.offline {
  background: #737d8d;
}

/* ---------- MAP AREA ---------- */

.layout-panel .layout-map {
  position: relative;
  margin: 14px;
  min-height: 480px;
  overflow: hidden;
  border: 1px solid #263445;
  border-radius: 10px;
  background:
    linear-gradient(
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.025) 1px,
      transparent 1px
    ),
    #080d14;
  background-size: 25px 25px;
}

/* ---------- MAP STAGE ---------- */

.layout-panel .map-stage {
  position: relative;
  width: 100%;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.layout-panel #layoutImage {
  display: block;
  max-width: 92%;
  max-height: 450px;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- MARKER AREA ---------- */

.layout-panel #markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.layout-panel #markers > * {
  pointer-events: auto;
}

/* ---------- ZOOM CONTROL ---------- */

.layout-panel .zoom-controls {
  position: absolute;
  z-index: 20;
  top: 14px;
  right: 14px;

  display: flex;
  flex-direction: column;
  gap: 5px;

  padding: 6px;
  border: 1px solid #334155;
  border-radius: 8px;
  background: rgba(10, 17, 26, 0.92);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
}

.layout-panel .zoom-controls button {
  width: 34px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  border: 1px solid #344255;
  border-radius: 6px;

  background: #111b27;
  color: #d7e0ec;

  font-size: 14px;
  font-weight: 700;

  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.layout-panel .zoom-controls button:hover {
  background: #172536;
  border-color: #22c55e;
  color: #ffffff;
}

.layout-panel .zoom-controls button:active {
  transform: scale(0.95);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {

  .layout-panel .panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .layout-panel .legend {
    justify-content: flex-start;
  }

  .layout-panel .layout-map,
  .layout-panel .map-stage {
    min-height: 380px;
  }

}

@media (max-width: 600px) {

  .layout-panel .layout-map {
    margin: 8px;
  }

  .layout-panel .map-stage {
    min-height: 300px;
  }

  .layout-panel #layoutImage {
    max-width: 96%;
    max-height: 280px;
  }

  .layout-panel .legend {
    gap: 8px;
  }

  .layout-panel .legend span {
    font-size: 10px;
  }

}

/* =========================================================
   STEP 3 — LIVE LINE STATUS
   ========================================================= */

.board-section {
  margin-top: 18px;
}

/* Nama cluster / department */
.cluster {
  margin-bottom: 20px;
}

.cluster-title {
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 0 0 10px;

  color: #dce5ef;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* Grid line */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Card utama */
.card {
  position: relative;
  overflow: hidden;

  min-height: 112px;
  padding: 15px 16px;

  border: 1px solid #293647;
  border-radius: 11px;

  background: #101720 !important;
  color: #eef3f8 !important;

  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16);

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

/* Hover */
.card:hover {
  transform: translateY(-2px);
  border-color: #405066;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

/* Garis status di sebelah kiri */
.card::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  background: #64748b;
}

/* Normal */
.card.normal::before {
  background: #22c55e;
}

.card.normal {
  border-color: rgba(34, 197, 94, 0.28);
}

/* Machine */
.card.danger::before {
  background: #ef4444;
}

.card.danger {
  border-color: rgba(239, 68, 68, 0.35);
}

/* Material */
.card.warning::before {
  background: #f59e0b;
}

.card.warning {
  border-color: rgba(245, 158, 11, 0.35);
}

/* Quality */
.card.quality::before {
  background: #3b82f6;
}

.card.quality {
  border-color: rgba(59, 130, 246, 0.35);
}

/* Offline */
.card.offline::before {
  background: #737d8d;
}

.card.offline {
  border-color: rgba(115, 125, 141, 0.45);
  background: #151b24 !important;
}

/* Nama line */
.card h3 {
  margin: 0 0 14px;

  color: #f1f5f9;

  font-size: 16px;
  font-weight: 800;
  letter-spacing: .4px;
}

/* Baris status */
.card-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Status badge */
.badge {
  display: inline-flex;
  align-items: center;

  min-height: 28px;
  padding: 6px 11px;

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;

  background: #18212c;

  color: #cbd5e1;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
}

/* Warna teks status */
.card.normal .badge {
  color: #4ade80;
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.20);
}

.card.danger .badge {
  color: #f87171;
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.20);
}

.card.warning .badge {
  color: #fbbf24;
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.20);
}

.card.quality .badge {
  color: #60a5fa;
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.20);
}

.card.offline .badge {
  color: #cbd5e1;
  background: rgba(115,125,141,.12);
  border-color: rgba(115,125,141,.22);
}

/* Tombol reset */
.reset-line-btn {
  border: 1px solid #344255;

  background: #17202b;
  color: #cbd5e1;

  border-radius: 7px;

  padding: 7px 10px;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: .6px;

  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

.reset-line-btn:hover {
  background: #202c3a;
  border-color: #64748b;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Pulse tetap dipertahankan untuk problem */
.card.status-pulse {
  animation: cardPulse 1.1s ease-out infinite;
}

.card.status-pulse::after {
  border-width: 2px;
}

/* Responsive */
@media (max-width: 1000px) {

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 650px) {

  .cards {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: 100px;
  }

}

/* =========================================================
   STEP 4 — HISTORY ANDON
   ========================================================= */

.history-panel {
  background: #f5f7fb !important;

  border: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  overflow: visible !important;
}

/* Header history */
.history-panel .panel-head {
  padding: 18px 18px 14px;

  border-bottom: 1px solid #202c3b;
}

.history-panel .panel-title {
  color: #f8fafc;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .4px;
}

.history-panel .panel-subtitle {
  margin-top: 5px;
  color: #8fa1b8;
  font-size: 12px;
}

/* =========================================================
   FILTER
   ========================================================= */

.history-filters {
  display: grid;

  grid-template-columns:
    minmax(160px, 1fr)
    minmax(180px, 1.2fr)
    minmax(180px, 1.2fr)
    auto;

  gap: 10px;

  align-items: end;

  margin: 16px 18px;
  padding: 14px;

  background: #0f1721;

  border: 1px solid #263445;
  border-radius: 10px;
}

.history-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-filter-group label {
  color: #7f8da1;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .8px;
  text-transform: uppercase;
}

.history-filter-group input,
.history-filter-group select {
  width: 100%;
  height: 38px;

  padding: 0 11px;

  border: 1px solid #303d4e;
  border-radius: 7px;

  background: #0a1119;
  color: #e5edf5;

  font-size: 11px;

  outline: none;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

.history-filter-group input:hover,
.history-filter-group select:hover {
  border-color: #46566b;
}

.history-filter-group input:focus,
.history-filter-group select:focus {
  border-color: #19c45b;

  box-shadow:
    0 0 0 2px rgba(25,196,91,.10);
}

/* Tombol reset filter */
.history-filters .secondary-btn {
  height: 38px;

  padding: 0 14px;

  border: 1px solid #344255;
  border-radius: 7px;

  background: #17202b;
  color: #cbd5e1;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: .5px;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.history-filters .secondary-btn:hover {
  background: #202c3a;
  border-color: #5b6b80;
  color: #ffffff;
}

/* =========================================================
   HISTORY SUMMARY
   ========================================================= */

.history-summary {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  margin: 0 18px 16px;
}

.history-summary-card {
  position: relative;

  padding: 13px 14px;

  background: #0f1721;

  border: 1px solid #263445;
  border-radius: 9px;

  overflow: hidden;
}

.history-summary-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;

  background: #64748b;
}

.history-summary-card small {
  display: block;

  margin-bottom: 6px;

  color: #7f8da1;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .7px;
  text-transform: uppercase;
}

.history-summary-card strong {
  display: block;

  color: #f1f5f9;

  font-size: 20px;
  font-weight: 800;

  line-height: 1.1;
}

/* =========================================================
   TABLE
   ========================================================= */

.history-table-wrap {
  margin: 0 18px 18px;

  overflow-x: auto;

  border: 1px solid #263445;
  border-radius: 10px;
}

.history-table {
  width: 100%;

  min-width: 820px;

  border-collapse: collapse;

  background: #0c1219;

  font-size: 11px;
}

/* Header tabel */
.history-table th {
  padding: 12px 13px;

  background: #111a25;

  color: #8493a7;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .7px;
  text-align: left;
  text-transform: uppercase;

  border-bottom: 1px solid #293646;
}

/* Isi tabel */
.history-table td {
  padding: 12px 13px;

  color: #d8e1eb;

  border-bottom: 1px solid rgba(255,255,255,.055);

  white-space: nowrap;
}

/* Baris hover */
.history-table tbody tr:hover {
  background: rgba(255,255,255,.025);
}

/* Hilangkan border pada row terakhir */
.history-table tbody tr:last-child td {
  border-bottom: none;
}

/* =========================================================
   PROBLEM BADGE
   ========================================================= */

.history-problem,
.history-state {
  display: inline-flex;
  align-items: center;

  min-height: 24px;

  padding: 4px 9px;

  border-radius: 6px;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .3px;
}

/* Machine */
.history-problem.machine {
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.22);

  color: #f87171;
}

/* Material */
.history-problem.material {
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.22);

  color: #fbbf24;
}

/* Quality */
.history-problem.quality {
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.22);

  color: #60a5fa;
}

/* Active */
.history-state.active {
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.22);

  color: #f87171;
}

/* Closed */
.history-state.closed {
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.22);

  color: #4ade80;
}

/* Empty */
.history-empty {
  padding: 35px 20px !important;

  color: #718096 !important;

  text-align: center !important;

  font-size: 11px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .history-filters {
    grid-template-columns: 1fr 1fr;
  }

  .history-summary {
    grid-template-columns: repeat(3, 1fr);
  }

}

@media (max-width: 650px) {

  .history-filters {
    grid-template-columns: 1fr;
  }

  .history-summary {
    grid-template-columns: 1fr;
  }

  .history-panel .panel-head {
    padding: 15px;
  }

  .history-filters {
    margin: 14px;
  }

  .history-table-wrap {
    margin: 0 14px 14px;
  }

}

/* =========================================================
   STEP 5 — REPORT & ANALYTICS
   ========================================================= */

.report-panel {
  margin-top: 20px;
  margin-bottom: 20px;

  background: #0b1119;
  border: 1px solid #263445;
  border-radius: 14px;

  overflow: hidden;
}

/* ---------- HEADER ---------- */

.report-panel .panel-head {
  padding: 18px 18px 14px;

  border-bottom: 1px solid #202c3b;
}

.report-panel .panel-title {
  color: #f8fafc;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .4px;
}

.report-panel .panel-subtitle {
  margin-top: 5px;

  color: #8fa1b8;
  font-size: 12px;
}

/* =========================================================
   REPORT KPI
   ========================================================= */

.report-kpis {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin: 16px 18px;
}

.report-kpi {
  position: relative;

  min-height: 88px;

  padding: 14px 15px;

  background: #0f1721;

  border: 1px solid #263445;
  border-radius: 10px;

  overflow: hidden;

  transition:
    transform .16s ease,
    border-color .16s ease;
}

.report-kpi:hover {
  transform: translateY(-2px);
  border-color: #405066;
}

.report-kpi::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;

  background: #64748b;
}

.report-kpi small {
  display: block;

  margin-bottom: 7px;

  color: #7f8da1;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .8px;
  text-transform: uppercase;
}

.report-kpi strong {
  display: block;

  color: #f1f5f9;

  font-size: 22px;
  font-weight: 800;

  line-height: 1.1;
}

/* =========================================================
   REPORT CONTENT GRID
   ========================================================= */

.report-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  margin: 0 18px 18px;
}

.report-card {
  min-width: 0;

  padding: 15px;

  background: #0f1721;

  border: 1px solid #263445;
  border-radius: 10px;
}

.report-card h3 {
  margin: 0 0 13px;

  color: #e8eef5;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: .8px;
}

/* =========================================================
   BREAKDOWN ROW
   ========================================================= */

.report-breakdown {
  display: flex;

  flex-direction: column;

  gap: 8px;
}

.report-row {
  display: flex;

  align-items: center;

  gap: 10px;

  min-height: 38px;

  padding: 8px 10px;

  background: #111a25;

  border: 1px solid rgba(255,255,255,.055);
  border-radius: 7px;
}

.report-row-label {
  min-width: 95px;

  color: #cbd5e1;

  font-size: 10px;
  font-weight: 700;
}

.report-row-value {
  min-width: 38px;

  color: #f1f5f9;

  font-size: 10px;
  font-weight: 900;

  text-align: right;
}

/* Progress bar */

.report-bar-wrap {
  flex: 1;

  height: 7px;

  overflow: hidden;

  background: #202a36;

  border-radius: 10px;
}

.report-bar {
  height: 100%;

  background: #19c45b;

  border-radius: 10px;

  transition: width .3s ease;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.report-empty {
  padding: 28px 12px;

  color: #718096;

  font-size: 11px;

  text-align: center;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 600px) {

  .report-kpis {
    grid-template-columns: 1fr 1fr;

    margin-left: 12px;
    margin-right: 12px;
  }

  .report-grid {
    margin-left: 12px;
    margin-right: 12px;
  }

  .report-kpi strong {
    font-size: 19px;
  }

  .report-row-label {
    min-width: 75px;
  }

}

@media (max-width: 420px) {

  .report-kpis {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   STEP 6 — SETTING / LINE MANAGEMENT
   ========================================================= */

.settings-panel {
  margin-top: 18px;
  margin-bottom: 20px;

  background: #0b1119;
  border: 1px solid #263445;
  border-radius: 14px;

  overflow: hidden;
}

/* ---------- HEADER ---------- */

.settings-panel .panel-head {
  padding: 18px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  border-bottom: 1px solid #202c3b;
}

.settings-panel .panel-title {
  color: #f8fafc;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .4px;
}

.settings-panel .panel-subtitle {
  max-width: 700px;

  margin-top: 5px;

  color: #8fa1b8;
  font-size: 12px;
  line-height: 1.45;
}

/* ---------- ADD LINE ---------- */

.settings-panel #addLineBtn {
  flex-shrink: 0;

  min-height: 38px;

  padding: 0 14px;

  border: 1px solid #19c45b;
  border-radius: 7px;

  background: #19c45b;
  color: #04150b;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: .6px;

  cursor: pointer;

  transition:
    background .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.settings-panel #addLineBtn:hover {
  background: #22d968;

  box-shadow:
    0 0 18px rgba(25,196,91,.18);

  transform: translateY(-1px);
}

/* ---------- TABLE CONTAINER ---------- */

.settings-panel .table-wrap {
  margin: 16px 18px 18px;

  overflow-x: auto;

  border: 1px solid #263445;
  border-radius: 10px;
}

/* ---------- TABLE ---------- */

.settings-table {
  width: 100%;

  min-width: 900px;

  border-collapse: collapse;

  background: #0c1219;

  font-size: 11px;
}

.settings-table th {
  padding: 12px 13px;

  background: #111a25;

  color: #8493a7;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .7px;
  text-align: left;
  text-transform: uppercase;

  border-bottom: 1px solid #293646;
}

.settings-table td {
  padding: 12px 13px;

  color: #d8e1eb;

  border-bottom: 1px solid rgba(255,255,255,.055);

  white-space: nowrap;
}

.settings-table tbody tr {
  transition: background .15s ease;
}

.settings-table tbody tr:hover {
  background: rgba(255,255,255,.025);
}

.settings-table tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- ACTIVE STATUS ---------- */

.line-active {
  display: inline-flex;
  align-items: center;

  min-height: 24px;

  padding: 4px 9px;

  border-radius: 6px;

  font-size: 9px;
  font-weight: 900;
}

.line-active.yes {
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.22);

  color: #4ade80;
}

.line-active.no {
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.22);

  color: #f87171;
}

/* ---------- POSITION ---------- */

.settings-table td:nth-child(7) {
  color: #8fa1b8;

  font-family:
    Consolas,
    "Courier New",
    monospace;

  font-size: 10px;
}

/* ---------- ACTION BUTTONS ---------- */

.table-actions {
  display: flex;

  align-items: center;

  gap: 6px;

  white-space: nowrap;
}

.mini-btn {
  min-height: 28px;

  padding: 5px 9px;

  border: 1px solid #344255;
  border-radius: 6px;

  background: #17202b;
  color: #dce4ed;

  font-size: 9px;
  font-weight: 800;

  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.mini-btn:hover {
  background: #202c3a;

  border-color: #64748a;

  color: #ffffff;
}

.mini-btn.danger-btn {
  border-color: rgba(240,68,73,.35);

  color: #ff7b80;
}

.mini-btn.danger-btn:hover {
  background: rgba(240,68,73,.10);

  border-color: rgba(240,68,73,.60);

  color: #ff9b9f;
}

/* ---------- INACTIVE ROW ---------- */

.settings-table tbody tr.inactive-row {
  opacity: .55;
}

.settings-table tbody tr.inactive-row:hover {
  opacity: .75;
}

/* =========================================================
   SETTING MODAL
   ========================================================= */

#lineModal {
  backdrop-filter: blur(4px);
}

#lineModal .modal-card {
  width: min(620px, 100%);

  background: #0d141d;

  border: 1px solid #334052;

  border-radius: 14px;

  box-shadow:
    0 25px 70px rgba(0,0,0,.55);
}

#lineModal .modal-head {
  padding-bottom: 14px;

  border-bottom: 1px solid #202c3b;
}

#lineModal .modal-title {
  color: #f8fafc;

  font-size: 15px;
  font-weight: 900;

  letter-spacing: .5px;
}

#lineModal .modal-subtitle {
  color: #8fa1b8;

  line-height: 1.45;
}

#lineModal .modal-close {
  width: 32px;
  height: 32px;

  border: 1px solid #344255;
  border-radius: 7px;

  background: #17202b;

  color: #aeb8c6;

  font-size: 20px;

  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease;
}

#lineModal .modal-close:hover {
  background: #202c3a;

  border-color: #64748a;

  color: #ffffff;
}

/* ---------- FORM ---------- */

#lineModal .line-form {
  margin-top: 16px;

  gap: 12px;
}

#lineModal .line-form label span {
  color: #8493a7;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .7px;
}

#lineModal .line-form input,
#lineModal .line-form select {
  min-height: 38px;

  padding: 0 11px;

  background: #0a1119;

  border: 1px solid #303d4e;
  border-radius: 7px;

  color: #e5edf5;

  font-size: 11px;

  outline: none;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

#lineModal .line-form input:hover,
#lineModal .line-form select:hover {
  border-color: #46566b;
}

#lineModal .line-form input:focus,
#lineModal .line-form select:focus {
  border-color: #19c45b;

  box-shadow:
    0 0 0 2px rgba(25,196,91,.10);
}

/* Position help */
#lineModal .position-help {
  background: #0a1119;

  border: 1px dashed #334052;
  border-radius: 8px;

  color: #7f8da1;

  line-height: 1.5;
}

/* ---------- MODAL ACTIONS ---------- */

#lineModal .modal-actions {
  margin-top: 16px;
  padding-top: 14px;

  border-top: 1px solid #202c3b;
}

#lineModal .primary-btn,
#saveLayoutBtn {
  border-radius: 7px;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: .5px;
}

#lineModal .secondary-btn {
  border: 1px solid #344255;

  background: #17202b;
  color: #cbd5e1;

  border-radius: 7px;
}

/* ---------- MESSAGE ---------- */

#lineModal .form-message {
  margin-top: 4px;

  font-size: 10px;
}

#lineModal .form-message.success {
  color: #4ade80;
}

#lineModal .form-message.error {
  color: #f87171;
}

/* =========================================================
   SETTING RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

  .settings-panel .panel-head {
    flex-direction: column;
  }

  .settings-panel #addLineBtn {
    width: 100%;
  }

  .settings-panel .table-wrap {
    margin: 12px;
  }

  #lineModal .modal-card {
    padding: 16px;
  }

}

/* =========================================================
   FIX — DENAH AGAR TETAP TAJAM
   ========================================================= */

.layout-panel .map-stage {
  width: 100%;
  min-width: 820px;
  min-height: 520px;

  display: block;

  position: relative;
  overflow: visible;
}

.layout-panel #layoutImage {
  display: block;

  width: 100%;
  height: auto;

  max-width: none;
  max-height: none;

  min-height: 520px;

  object-fit: contain;

  image-rendering: auto;
}

/* =========================================================
   IMPROVEMENT — LINE MARKER / INDIKATOR DENAH
   ========================================================= */

.layout-panel .marker {
  min-width: 58px;
  max-width: 100px;

  min-height: 24px;

  padding: 5px 8px;

  border-radius: 7px;

  font-size: 10px;
  font-weight: 900;

  line-height: 1.1;

  border: 2px solid rgba(255,255,255,.9);

  box-shadow:
    0 3px 10px rgba(0,0,0,.45);

  white-space: nowrap;

  z-index: 10;
}

/* Normal */
.layout-panel .marker.normal {
  background: #19c45b;
  color: #04150b;
}

/* Machine */
.layout-panel .marker.danger {
  background: #f04449;
  color: #ffffff;
}

/* Material */
.layout-panel .marker.warning {
  background: #f4a900;
  color: #1b1100;
}

/* Quality */
.layout-panel .marker.quality {
  background: #2f80ed;
  color: #ffffff;
}

/* Offline */
.layout-panel .marker.offline {
  background: #6b7280;
  color: #ffffff;
}

/* Marker sedang bermasalah */
.layout-panel .marker.status-pulse {
  z-index: 30;
}

/* =========================================================
   COMPACT LINE MARKER
   ========================================================= */

.layout-panel .marker {
  min-width: auto;
  max-width: 90px;
  min-height: auto;

  padding: 4px 7px;

  border-radius: 5px;

  font-size: 9px;
  font-weight: 900;

  line-height: 1.1;

  border: 1px solid rgba(255,255,255,.85);

  box-shadow:
    0 2px 6px rgba(0,0,0,.35);

  white-space: nowrap;

  z-index: 10;
}

/* Normal */
.layout-panel .marker.normal {
  background: #19c45b;
  color: #04150b;
}

/* Machine */
.layout-panel .marker.danger {
  background: #f04449;
  color: #ffffff;
}

/* Material */
.layout-panel .marker.warning {
  background: #f4a900;
  color: #1b1100;
}

/* Quality */
.layout-panel .marker.quality {
  background: #2f80ed;
  color: #ffffff;
}

/* Offline */
.layout-panel .marker.offline {
  background: #6b7280;
  color: #ffffff;
}

/* Problem tetap pulse */
.layout-panel .marker.status-pulse {
  z-index: 30;
}

/* Compact marker — batasi nama line panjang */
.layout-panel .marker {
  max-width: 90px;
  white-space: normal;
  text-align: center;
  overflow-wrap: break-word;
}

/* =========================================================
   SIDEBAR TOGGLE
   ========================================================= */

.sidebar-toggle {
  position: fixed;
  left: 18px;
  top: 18px;
  transform: none;

  width: 42px;
  height: 42px;

  border: 1px solid #26364a;
  border-radius: 10px;

  background: #111923;
  color: #ffffff;

  cursor: pointer;
  z-index: 100;

  font-size: 18px;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all .2s ease;
}

.sidebar-toggle:hover {
  background: #172332;
  transform: translateY(-1px);
}

/* =========================================================
   SIDEBAR MENU
   ========================================================= */

.side-menu {
  position: fixed;
  top: 0;
  left: 0;

  width: 250px;
  height: 100vh;

  background: linear-gradient(
    180deg,
    #0b2a5b 0%,
    #123b7a 100%
  );

  color: #ffffff;

  padding: 24px 16px;

  z-index: 90;

  box-shadow: 8px 0 30px rgba(0, 0, 0, .25);

  transform: translateX(-100%);
  transition: transform .25s ease;

  display: flex;
  flex-direction: column;
}


/* BRAND */

.side-brand {
  display: flex;
  align-items: center;
  gap: 11px;

  padding: 5px 10px 28px;
}

.side-brand-mark {
  width: 40px;
  height: 40px;

  border-radius: 11px;

  background: #ffffff;
  color: #1652a6;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 900;
  font-size: 14px;
}

.side-brand-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .5px;
}

.side-brand-sub {
  margin-top: 4px;

  font-size: 9px;
  letter-spacing: 1px;

  opacity: .65;
}


/* SECTION */

.side-section-title {
  padding: 14px 12px 7px;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 1.5px;

  opacity: .5;
}


/* NAV */

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.side-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 11px 12px;

  border-radius: 8px;

  color: rgba(255,255,255,.72);

  text-decoration: none;

  font-size: 13px;
  font-weight: 600;

  transition: .15s ease;
}


.side-nav-item:hover {
  background: rgba(255,255,255,.09);
  color: #ffffff;
}


.side-nav-item.active {
  background: rgba(255,255,255,.14);
  color: #ffffff;
}


.side-nav-icon {
  width: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 17px;
}


/* FOOTER */

.side-footer {
  margin-top: auto;

  padding: 16px 12px 4px;

  border-top: 1px solid rgba(255,255,255,.12);
}


.side-login {
  font-size: 10px;
  font-weight: 700;

  opacity: .75;
}


.side-info {
  margin-top: 7px;

  font-size: 9px;
  line-height: 1.6;

  opacity: .45;
}

.side-menu.is-open {
  transform: translateX(0);
}

/* =========================================================
   DASHBOARD — DENAH LIGHT STYLE
   ========================================================= */

.layout-panel {
  background: #ffffff;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

/* Header denah */
.layout-panel .panel-head {
  padding: 18px 20px 15px;
  border-bottom: 1px solid #e5eaf1;
}

.layout-panel .panel-title {
  color: #172033;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

.layout-panel .panel-subtitle {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

/* Legend */
.layout-panel .legend {
  gap: 14px;
}

.layout-panel .legend span {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
}

.layout-panel .legend .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

/* Area denah */
.layout-panel .layout-map {
  margin: 14px;
  min-height: 480px;

  background:
    linear-gradient(
      rgba(148, 163, 184, 0.10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(148, 163, 184, 0.10) 1px,
      transparent 1px
    ),
    #f8fafc;

  background-size: 25px 25px;

  border: 1px solid #dbe4f0;
  border-radius: 12px;
}

/* Area gambar */
.layout-panel .map-stage {
  min-height: 480px;
}

/* Gambar denah */
.layout-panel #layoutImage {
  max-width: 92%;
  max-height: 450px;
}

/* Zoom control */
.layout-panel .zoom-controls {
  top: 14px;
  right: 14px;

  padding: 5px;

  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #dbe4f0;
  border-radius: 9px;

  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(8px);
}

.layout-panel .zoom-controls button {
  background: #ffffff;
  color: #475569;
  border: 1px solid #dbe4f0;
}

.layout-panel .zoom-controls button:hover {
  background: #f1f5f9;
  border-color: #2563eb;
  color: #1d4ed8;
}

/* =========================================================
   DASHBOARD — LINE CARD LIGHT STYLE
   ========================================================= */

.board-section {
  margin-top: 18px;
}

/* Cluster */
.cluster {
  margin-bottom: 22px;
}

.cluster-title {
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 0 0 10px;

  color: #1e3a8a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* Garis di samping nama cluster */
.cluster-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #dbe4f0;
}

/* Grid card */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Card line */
.card {
  position: relative;
  overflow: hidden;

  min-height: 104px;
  padding: 15px 16px;

  background: #ffffff !important;
  color: #172033 !important;

  border: 1px solid #dbe4f0;
  border-radius: 12px;

  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.045);

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

/* Hover */
.card:hover {
  transform: translateY(-2px);
  border-color: #c5d2e3;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08);
}

/* Garis status kiri */
.card::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  background: #94a3b8;
}

/* Normal */
.card.normal {
  border-color: #dbe9df;
}

.card.normal::before {
  background: #16a34a;
}

/* Machine */
.card.danger {
  border-color: #f1d6d6;
}

.card.danger::before {
  background: #dc2626;
}

/* Material */
.card.warning {
  border-color: #f1e3c4;
}

.card.warning::before {
  background: #d97706;
}

/* Quality */
.card.quality {
  border-color: #d8e2f5;
}

.card.quality::before {
  background: #2563eb;
}

/* Offline */
.card.offline {
  background: #f8fafc !important;
  border-color: #d5dbe3;
}

.card.offline::before {
  background: #64748b;
}

/* Nama line */
.card h3 {
  margin: 0 0 13px;

  color: #172033;

  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
}

/* Status row */
.card-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;

  min-height: 27px;
  padding: 5px 10px;

  border-radius: 999px;

  background: #f1f5f9;
  border: 1px solid #e2e8f0;

  color: #64748b;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2px;
}

/* Normal badge */
.card.normal .badge {
  color: #15803d;
  background: #eaf8f0;
  border-color: #ccebd9;
}

/* Machine badge */
.card.danger .badge {
  color: #dc2626;
  background: #fef0f0;
  border-color: #f5cccc;
}

/* Material badge */
.card.warning .badge {
  color: #b45309;
  background: #fff7e6;
  border-color: #f4dfb3;
}

/* Quality badge */
.card.quality .badge {
  color: #2563eb;
  background: #eef4ff;
  border-color: #d5e2ff;
}

/* Offline badge */
.card.offline .badge {
  color: #64748b;
  background: #f1f5f9;
  border-color: #dce3eb;
}

/* Reset button */
.reset-line-btn {
  border: 1px solid #d5deea;

  background: #f8fafc;
  color: #64748b;

  border-radius: 7px;

  padding: 6px 10px;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .4px;

  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

.reset-line-btn:hover {
  background: #eef2f7;
  border-color: #b9c6d6;
  color: #334155;
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 1000px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .cards {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: 96px;
  }
}

/* =========================================================
   DASHBOARD — KPI FINAL LIGHT STYLE
   ========================================================= */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.kpi-card {
  position: relative;

  min-height: 96px;
  padding: 14px 16px 13px;

  background: #ffffff;

  border: 1px solid #dbe4f0;
  border-radius: 12px;

  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.045);

  overflow: hidden;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

/* Hover */
.kpi-card:hover {
  transform: translateY(-2px);

  border-color: #c5d2e3;

  box-shadow:
    0 7px 18px rgba(15, 23, 42, 0.08);
}

/* Garis status */
.kpi-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  background: #94a3b8;
}

/* Label */
.kpi-label {
  margin-bottom: 7px;

  color: #64748b;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .08em;
}

/* Angka */
.kpi-value {
  color: #172033;

  font-size: 30px;
  line-height: 1;

  font-weight: 800;

  letter-spacing: -.5px;
}

/* Keterangan */
.kpi-sub {
  margin-top: 7px;

  color: #94a3b8;

  font-size: 10px;
  line-height: 1.2;
}

/* -------------------------
   TOTAL
   ------------------------- */

.kpi-card:first-child::before {
  background: #2563eb;
}

/* -------------------------
   NORMAL
   ------------------------- */

.kpi-card--normal::before {
  background: #16a34a;
}

.kpi-card--normal .kpi-value {
  color: #15803d;
}

/* -------------------------
   MACHINE
   ------------------------- */

.kpi-card--machine::before {
  background: #dc2626;
}

.kpi-card--machine .kpi-value {
  color: #dc2626;
}

/* -------------------------
   MATERIAL
   ------------------------- */

.kpi-card--material::before {
  background: #d97706;
}

.kpi-card--material .kpi-value {
  color: #d97706;
}

/* -------------------------
   QUALITY
   ------------------------- */

.kpi-card--quality::before {
  background: #2563eb;
}

.kpi-card--quality .kpi-value {
  color: #2563eb;
}

/* -------------------------
   OFFLINE
   ------------------------- */

.kpi-card--offline::before {
  background: #64748b;
}

.kpi-card--offline .kpi-value {
  color: #475569;
}

/* =========================================================
   KPI RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-width: 700px) {

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 480px) {

  .kpi-grid {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   DASHBOARD — FLOOR TAB FINAL LIGHT STYLE
   ========================================================= */

.floor-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;

  margin-bottom: 18px;
  padding: 3px;

  background: #f1f5f9;
  border: 1px solid #dbe4f0;
  border-radius: 10px;

  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.floor-tab {
  appearance: none;

  border: 0;
  background: transparent;

  color: #64748b;

  padding: 8px 18px;

  border-radius: 7px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;

  cursor: pointer;

  transition:
    background .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}

/* Hover */
.floor-tab:hover {
  color: #1e3a8a;
  background: #ffffff;
}

/* Active */
.floor-tab.active {
  background: #2563eb;
  color: #ffffff;

  border-color: transparent;

  box-shadow:
    0 2px 6px rgba(37, 99, 235, 0.20);
}

/* Active hover */
.floor-tab.active:hover {
  background: #1d4ed8;
  color: #ffffff;
}

/* =========================================================
   FLOOR TAB RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

  .floor-tabs {
    width: 100%;
  }

  .floor-tab {
    flex: 1;
    text-align: center;
  }

}

/* =========================================================
   DASHBOARD — HEADER FINAL LIGHT STYLE
   ========================================================= */

.topbar {
  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 32px;

  background: #ffffff;

  border-bottom: 1px solid #dbe4f0;

  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.035);
}

/* Nama perusahaan */
.company {
  margin-bottom: 3px;

  color: #64748b;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .7px;
  text-transform: uppercase;
}

/* Judul */
.topbar h1 {
  margin: 0;

  color: #172033;

  font-size: 18px;
  line-height: 1.2;

  font-weight: 800;

  letter-spacing: -.2px;
}

/* Area kanan */
.top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Login user */
.login-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 11px;

  background: #f8fafc;

  border: 1px solid #dbe4f0;
  border-radius: 999px;

  color: #64748b;

  font-size: 10px;
  font-weight: 700;
}

.login-user a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 800;
}

.login-user a:hover {
  color: #1d4ed8;
}

/* Tombol setting */
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;

  padding: 0 12px;

  background: #ffffff;

  border: 1px solid #dbe4f0;
  border-radius: 8px;

  color: #475569;

  font-size: 10px;
  font-weight: 800;

  text-decoration: none;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

.action-btn:hover {
  background: #f8fafc;
  border-color: #bfd0e3;
  color: #1e3a8a;

  transform: translateY(-1px);
}

/* Jam */
.clock {
  color: #1d4ed8;

  font-size: 22px;
  line-height: 1;

  font-weight: 800;

  letter-spacing: .2px;
}

/* Tanggal */
.date {
  margin-top: 4px;

  color: #64748b;

  font-size: 10px;
  text-align: right;
}

/* Area jam */
.clock-wrap {
  min-width: 118px;
}

/* =========================================================
   HEADER RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .topbar {
    padding: 12px 20px;
  }

  .topbar h1 {
    font-size: 16px;
  }

  .top-actions {
    gap: 8px;
  }

  .login-user {
    display: none;
  }

}

@media (max-width: 650px) {

  .topbar {
    align-items: flex-start;
  }

  .topbar h1 {
    font-size: 14px;
  }

  .company {
    font-size: 9px;
  }

  .clock {
    font-size: 17px;
  }

  .date {
    font-size: 9px;
  }

  .action-btn {
    display: none;
  }

}

/* =========================================================
   SIDEBAR — FINAL LIGHT STYLE
   ========================================================= */

.sidebar-toggle {
  width: 40px;
  height: 40px;

  left: 16px;
  top: 16px;

  background: #ffffff;
  color: #334155;

  border: 1px solid #dbe4f0;
  border-radius: 10px;

  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);

  font-size: 17px;
}

.sidebar-toggle:hover {
  background: #f8fafc;
  color: #1d4ed8;

  border-color: #bfd0e3;

  transform: translateY(-1px);
}

/* Sidebar */
.side-menu {
  width: 250px;

  background: #ffffff;
  color: #172033;

  padding: 20px 14px;

  border-right: 1px solid #dbe4f0;

  box-shadow:
    8px 0 24px rgba(15, 23, 42, 0.08);
}

/* Brand */
.side-brand {
  padding: 5px 10px 24px;
}

.side-brand-mark {
  width: 40px;
  height: 40px;

  background: #2563eb;
  color: #ffffff;

  border-radius: 10px;

  box-shadow:
    0 4px 10px rgba(37, 99, 235, 0.20);
}

.side-brand-title {
  color: #172033;

  font-size: 13px;
  font-weight: 900;
}

.side-brand-sub {
  color: #64748b;

  font-size: 8px;
  letter-spacing: .8px;

  opacity: 1;
}

/* Section */
.side-section-title {
  padding: 14px 12px 7px;

  color: #94a3b8;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 1.4px;

  opacity: 1;
}

/* Navigation */
.side-nav {
  gap: 4px;
}

.side-nav-item {
  padding: 10px 12px;

  border-radius: 9px;

  color: #64748b;

  font-size: 12px;
  font-weight: 700;

  transition:
    background .15s ease,
    color .15s ease,
    transform .15s ease;
}

.side-nav-item:hover {
  background: #f1f5f9;
  color: #1e3a8a;

  transform: translateX(2px);
}

.side-nav-item.active {
  background: #eef4ff;
  color: #2563eb;
}

.side-nav-icon {
  width: 20px;

  color: inherit;

  font-size: 16px;
}

/* Footer */
.side-footer {
  padding: 15px 12px 4px;

  border-top: 1px solid #e5eaf1;
}

.side-login {
  color: #64748b;

  font-size: 9px;
  font-weight: 800;

  opacity: 1;
}

.side-info {
  margin-top: 6px;

  color: #94a3b8;

  font-size: 8px;
  line-height: 1.5;
}

/* =========================================================
   STEP 9 — FOOTER / STATUS BAR FINAL LIGHT
   ========================================================= */

footer {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 0 32px;

  background: #ffffff;
  border-top: 1px solid #dbe4f0;

  color: #64748b;

  font-size: 10px;
  font-weight: 700;

  box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.025);
}

footer > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
}

#dbStatus {
  position: relative;

  padding-left: 14px;

  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

#dbStatus::before {
  content: "";

  position: absolute;
  left: 0;
  top: 50%;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #94a3b8;

  transform: translateY(-50%);
}

@media (max-width: 650px) {

  footer {
    min-height: 38px;
    padding: 0 16px;

    font-size: 9px;
  }

  #dbStatus {
    font-size: 9px;
  }

}/* =========================================================
   STEP 10 — DASHBOARD KPI FINAL LIGHT STYLE
   ========================================================= */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.kpi-card {
  position: relative;

  min-height: 104px;
  padding: 16px 17px;

  background: #ffffff;
  border: 1px solid #dbe4f0;
  border-radius: 12px;

  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.035);

  overflow: hidden;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);

  border-color: #c7d5e5;

  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.07);
}

.kpi-label {
  margin-bottom: 8px;

  color: #64748b;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 1px;
}

.kpi-value {
  color: #172033;

  font-size: 28px;
  line-height: 1;

  font-weight: 900;
  letter-spacing: -.6px;
}

.kpi-sub {
  margin-top: 8px;

  color: #94a3b8;

  font-size: 9px;
  font-weight: 600;
}


/* =========================================================
   KPI STATUS ACCENT
   ========================================================= */

.kpi-card--normal::before,
.kpi-card--machine::before,
.kpi-card--material::before,
.kpi-card--quality::before,
.kpi-card--offline::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;
}


/* NORMAL */

.kpi-card--normal::before {
  background: #22c55e;
}

.kpi-card--normal .kpi-value {
  color: #16a34a;
}


/* MACHINE */

.kpi-card--machine::before {
  background: #ef4444;
}

.kpi-card--machine .kpi-value {
  color: #dc2626;
}


/* MATERIAL */

.kpi-card--material::before {
  background: #f59e0b;
}

.kpi-card--material .kpi-value {
  color: #d97706;
}


/* QUALITY */

.kpi-card--quality::before {
  background: #8b5cf6;
}

.kpi-card--quality .kpi-value {
  color: #7c3aed;
}


/* OFFLINE */

.kpi-card--offline::before {
  background: #94a3b8;
}

.kpi-card--offline .kpi-value {
  color: #64748b;
}


/* TOTAL LINE */

.kpi-card:first-child::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;

  background: #2563eb;
}

.kpi-card:first-child .kpi-value {
  color: #2563eb;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-width: 700px) {

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .kpi-card {
    min-height: 95px;
    padding: 14px;
  }

  .kpi-value {
    font-size: 24px;
  }

}

@media (max-width: 450px) {

  .kpi-grid {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   STEP 11 — FLOOR TAB FINAL LIGHT STYLE
   ========================================================= */

.floor-tabs {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 16px;
}

.floor-tab {
  appearance: none;

  min-width: 108px;

  padding: 9px 16px;

  background: #ffffff;

  border: 1px solid #dbe4f0;
  border-radius: 8px;

  color: #64748b;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .6px;

  cursor: pointer;

  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.025);

  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.floor-tab:hover {
  background: #f8fafc;

  border-color: #bfd0e3;

  color: #2563eb;

  transform: translateY(-1px);
}

.floor-tab.active {
  background: #2563eb;

  border-color: #2563eb;

  color: #ffffff;

  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.18);
}

.floor-tab.active:hover {
  background: #1d4ed8;

  border-color: #1d4ed8;

  color: #ffffff;

  transform: translateY(-1px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 650px) {

  .floor-tabs {
    gap: 6px;

    margin-bottom: 12px;
  }

  .floor-tab {
    min-width: 92px;

    padding: 8px 12px;

    font-size: 9px;
  }

}

/* =========================================================
   STEP 12 — DENAH / LAYOUT FINAL LIGHT STYLE
   ========================================================= */

.layout-panel {
  margin-top: 18px;
  margin-bottom: 20px;

  background: #ffffff;

  border: 1px solid #dbe4f0;
  border-radius: 12px;

  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);

  overflow: hidden;
}


/* =========================================================
   PANEL HEADER
   ========================================================= */

.layout-panel .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 16px 18px;

  background: #ffffff;

  border-bottom: 1px solid #e5eaf1;
}

.layout-panel .panel-title {
  color: #172033;

  font-size: 14px;
  font-weight: 800;

  letter-spacing: .2px;
}

.layout-panel .panel-subtitle {
  margin-top: 4px;

  color: #94a3b8;

  font-size: 10px;
}


/* =========================================================
   LEGEND
   ========================================================= */

.layout-panel .legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 12px;
}

.layout-panel .legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: #64748b;

  font-size: 9px;
  font-weight: 700;

  white-space: nowrap;
}

.layout-panel .legend .dot {
  width: 8px;
  height: 8px;

  display: inline-block;

  border-radius: 50%;
}

.layout-panel .legend .dot.normal {
  background: #22c55e;
}

.layout-panel .legend .dot.machine {
  background: #ef4444;
}

.layout-panel .legend .dot.material {
  background: #f59e0b;
}

.layout-panel .legend .dot.quality {
  background: #3b82f6;
}

.layout-panel .legend .dot.offline {
  background: #94a3b8;
}


/* =========================================================
   MAP AREA
   ========================================================= */

.layout-panel .layout-map {
  position: relative;

  margin: 14px;

  min-height: 480px;

  overflow: hidden;

  background:
    linear-gradient(
      rgba(148, 163, 184, 0.10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(148, 163, 184, 0.10) 1px,
      transparent 1px
    ),
    #f8fafc;

  background-size: 25px 25px;

  border: 1px solid #dbe4f0;
  border-radius: 10px;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6);

  cursor: grab;
}

.layout-panel .layout-map.is-panning {
  cursor: grabbing;
}


/* =========================================================
   MAP STAGE
   ========================================================= */

.layout-panel .map-stage {
  position: relative;

  width: 100%;
  min-height: 480px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}


/* =========================================================
   FLOOR PLAN IMAGE
   ========================================================= */

.layout-panel #layoutImage {
  display: block;

  max-width: 92%;
  max-height: 450px;

  width: auto;
  height: auto;

  object-fit: contain;

  background: #ffffff;

  border-radius: 6px;

  user-select: none;
  -webkit-user-drag: none;
}


/* =========================================================
   MARKERS
   ========================================================= */

.layout-panel #markers {
  position: absolute;

  inset: 0;

  pointer-events: none;
}

.layout-panel #markers > * {
  pointer-events: auto;
}


/* =========================================================
   ZOOM CONTROL
   ========================================================= */

.layout-panel .zoom-controls {
  position: absolute;

  z-index: 20;

  top: 12px;
  right: 12px;

  display: flex;
  flex-direction: column;

  gap: 4px;

  padding: 5px;

  background: rgba(255,255,255,.94);

  border: 1px solid #dbe4f0;
  border-radius: 8px;

  box-shadow: 0 4px 12px rgba(15,23,42,.10);

  backdrop-filter: blur(6px);
}

.layout-panel .zoom-controls button {
  width: 32px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: #ffffff;

  border: 1px solid #dbe4f0;
  border-radius: 6px;

  color: #475569;

  font-size: 14px;
  font-weight: 800;

  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

.layout-panel .zoom-controls button:hover {
  background: #f8fafc;

  border-color: #bfd0e3;

  color: #2563eb;
}

.layout-panel .zoom-controls button:active {
  transform: scale(.95);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .layout-panel .panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .layout-panel .legend {
    justify-content: flex-start;
  }

  .layout-panel .layout-map {
    min-height: 380px;
  }

  .layout-panel .map-stage {
    min-height: 380px;
  }

}

@media (max-width: 600px) {

  .layout-panel .layout-map {
    margin: 8px;

    min-height: 300px;
  }

  .layout-panel .map-stage {
    min-height: 300px;
  }

  .layout-panel #layoutImage {
    max-width: 96%;
    max-height: 280px;
  }

  .layout-panel .legend {
    gap: 8px;
  }

  .layout-panel .legend span {
    font-size: 8px;
  }

}

/* =========================================================
   STEP 13 — LIVE LINE STATUS FINAL LIGHT STYLE
   ========================================================= */

.board-section {
  width: 100%;
  margin-top: 18px;
}

.cluster {
  margin-bottom: 22px;
}

.cluster-title {
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 0 0 10px;

  color: #334155;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 1px;
}


/* =========================================================
   CARD GRID
   ========================================================= */

.cards {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;
}


/* =========================================================
   LINE CARD
   ========================================================= */

.card {
  position: relative;

  min-height: 108px;

  padding: 15px 16px 15px 19px;

  background: #ffffff !important;

  border: 1px solid #dbe4f0;

  border-radius: 11px;

  color: #172033 !important;

  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.04);

  overflow: visible;

  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.card:hover {
  transform: translateY(-2px);

  border-color: #c7d5e5;

  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   STATUS INDICATOR
   ========================================================= */

.card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  border-radius: 11px 0 0 11px;

  background: #94a3b8;
}


/* NORMAL */

.card.normal::before {
  background: #22c55e;
}


/* MACHINE */

.card.danger::before {
  background: #ef4444;
}


/* MATERIAL */

.card.warning::before {
  background: #f59e0b;
}


/* QUALITY */

.card.quality::before {
  background: #3b82f6;
}


/* OFFLINE */

.card.offline::before {
  background: #94a3b8;
}


/* =========================================================
   LINE NAME
   ========================================================= */

.card h3 {
  margin: 0 0 14px;

  color: #172033 !important;

  font-size: 14px;

  line-height: 1.25;

  font-weight: 800;
}


/* =========================================================
   STATUS ROW
   ========================================================= */

.card-status-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;

  flex-wrap: wrap;
}


/* =========================================================
   STATUS BADGE
   ========================================================= */

.badge {
  display: inline-flex;

  align-items: center;

  min-height: 27px;

  padding: 5px 10px;

  border-radius: 999px;

  background: #f1f5f9;

  color: #64748b;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .3px;
}


/* NORMAL BADGE */

.card.normal .badge {
  background: #ecfdf3;
  color: #15803d;
}


/* MACHINE BADGE */

.card.danger .badge {
  background: #fef2f2;
  color: #dc2626;
}


/* MATERIAL BADGE */

.card.warning .badge {
  background: #fffbeb;
  color: #d97706;
}


/* QUALITY BADGE */

.card.quality .badge {
  background: #eff6ff;
  color: #2563eb;
}


/* OFFLINE BADGE */

.card.offline .badge {
  background: #f1f5f9;
  color: #64748b;
}


/* =========================================================
   RESET BUTTON
   ========================================================= */

.reset-line-btn {
  appearance: none;

  min-height: 27px;

  padding: 5px 9px;

  background: #ffffff;

  border: 1px solid #dbe4f0;

  border-radius: 7px;

  color: #64748b;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .4px;

  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

.reset-line-btn:hover {
  background: #f8fafc;

  border-color: #bfd0e3;

  color: #2563eb;

  transform: translateY(-1px);
}

.reset-line-btn:disabled {
  opacity: .55;

  cursor: wait;

  transform: none;
}


/* =========================================================
   PULSE — TETAP AKTIF UNTUK STATUS ABNORMAL
   ========================================================= */

.card.status-pulse {
  animation: cardPulseLight 1.1s ease-out infinite;
}

.card.status-pulse::after {
  content: "";

  position: absolute;

  inset: -4px;

  border: 2px solid var(--pulse-color);

  border-radius: 14px;

  animation: ringLight 1.1s ease-out infinite;

  pointer-events: none;
}

@keyframes cardPulseLight {

  0%,
  100% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.018);
  }

}

@keyframes ringLight {

  0% {
    transform: scale(.96);
    opacity: .55;
  }

  70% {
    transform: scale(1.08);
    opacity: .12;
  }

  100% {
    transform: scale(1.12);
    opacity: 0;
  }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

  .cards {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 650px) {

  .cards {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: 100px;
  }

  .card h3 {
    font-size: 13px;
  }

}

/* =========================================================
   STEP 14 — MAIN BACKGROUND FINAL LIGHT
   ========================================================= */

html,
body {
  background: #f5f7fb !important;
  color: #172033;
}

main {
  background: #f5f7fb !important;
}

/* =========================================================
   STEP 15 — FIXED / FREEZE HEADER
   ========================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: #ffffff;
}

/* =========================================================
   STEP 16 — HEADER + SIDEBAR AESTHETIC
   ========================================================= */

/* =========================
   HEADER
   ========================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 90;

  min-height: 68px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 32px 10px 72px;

  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid #e2e8f0;

  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.045);

  backdrop-filter: blur(10px);
}

/* Brand / Judul */

.company {
  margin-bottom: 4px;

  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}

.topbar h1 {
  margin: 0;

  color: #172033;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -0.3px;
}

/* Area kanan */

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Login */

.login-user {
  min-height: 32px;

  padding: 6px 10px;

  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;

  color: #64748b;

  font-size: 9px;
  font-weight: 700;
}

.login-user a {
  color: #2563eb;
  font-weight: 850;
}

/* Button */

.action-btn {
  min-height: 34px;

  padding: 0 12px;

  background: #ffffff;
  border: 1px solid #dbe4f0;
  border-radius: 8px;

  color: #475569;

  font-size: 9px;
  font-weight: 850;

  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.025);
}

.action-btn:hover {
  background: #f8fafc;
  border-color: #bfd0e3;
  color: #2563eb;
}

/* Jam */

.clock-wrap {
  min-width: 110px;
}

.clock {
  color: #1d4ed8;
  font-size: 21px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .2px;
}

.date {
  margin-top: 4px;

  color: #94a3b8;
  font-size: 9px;
  text-align: right;
}


/* =========================================================
   SIDEBAR TOGGLE
   ========================================================= */

.sidebar-toggle {
  position: fixed;

  left: 16px;
  top: 14px;

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  border: 1px solid #dbe4f0;
  border-radius: 10px;

  color: #334155;

  font-size: 17px;
  font-weight: 700;

  box-shadow:
    0 3px 10px rgba(15, 23, 42, 0.10);

  cursor: pointer;

  z-index: 110;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.sidebar-toggle:hover {
  background: #f8fafc;
  border-color: #bfdbfe;

  color: #2563eb;

  box-shadow:
    0 5px 14px rgba(15, 23, 42, 0.13);

  transform: translateY(-1px);
}

.sidebar-toggle:active {
  transform: scale(.96);
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.side-menu {
  position: fixed;

  top: 0;
  left: 0;
  bottom: 0;

  width: 258px;

  display: flex;
  flex-direction: column;

  padding: 22px 14px 16px;

  background: #ffffff;

  border-right: 1px solid #e2e8f0;

  box-shadow:
    10px 0 30px rgba(15, 23, 42, 0.08);

  z-index: 105;
}


/* Brand sidebar */

.side-brand {
  padding: 4px 10px 22px;

  border-bottom: 1px solid #edf1f5;
}

.side-brand-mark {
  width: 40px;
  height: 40px;

  background: #2563eb;
  color: #ffffff;

  border-radius: 10px;

  box-shadow:
    0 4px 12px rgba(37, 99, 235, 0.20);
}

.side-brand-title {
  color: #172033;

  font-size: 13px;
  font-weight: 900;

  letter-spacing: -.1px;
}

.side-brand-sub {
  margin-top: 3px;

  color: #94a3b8;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: .8px;
}


/* Section title */

.side-section-title {
  padding: 18px 12px 7px;

  color: #94a3b8;

  font-size: 8px;
  font-weight: 850;

  letter-spacing: 1.4px;
}


/* Menu */

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.side-nav-item {
  position: relative;

  min-height: 39px;

  display: flex;
  align-items: center;
  gap: 11px;

  padding: 9px 12px;

  border-radius: 9px;

  color: #64748b;

  font-size: 11px;
  font-weight: 750;

  text-decoration: none;

  transition:
    background .15s ease,
    color .15s ease,
    transform .15s ease;
}

.side-nav-item:hover {
  background: #f1f5f9;
  color: #1e3a8a;

  transform: translateX(2px);
}

.side-nav-item.active {
  background: #eef4ff;
  color: #2563eb;
}

.side-nav-item.active::before {
  content: "";

  position: absolute;

  left: 0;
  top: 8px;
  bottom: 8px;

  width: 3px;

  background: #2563eb;

  border-radius: 0 4px 4px 0;
}

.side-nav-icon {
  width: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: inherit;

  font-size: 15px;
}


/* Footer sidebar */

.side-footer {
  margin-top: auto;

  padding: 14px 12px 3px;

  border-top: 1px solid #edf1f5;
}

.side-login {
  color: #64748b;

  font-size: 9px;
  font-weight: 800;
}

.side-info {
  margin-top: 5px;

  color: #94a3b8;

  font-size: 8px;
  line-height: 1.5;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

  .topbar {
    padding-left: 68px;
    padding-right: 18px;
  }

  .topbar h1 {
    font-size: 16px;
  }

  .top-actions {
    gap: 7px;
  }

  .clock-wrap {
    min-width: 90px;
  }

  .clock {
    font-size: 18px;
  }

}


@media (max-width: 600px) {

  .topbar {
    min-height: 62px;

    padding:
      9px
      14px
      9px
      66px;
  }

  .company {
    font-size: 8px;
  }

  .topbar h1 {
    font-size: 13px;
  }

  .login-user,
  .action-btn {
    display: none;
  }

  .clock {
    font-size: 16px;
  }

  .date {
    font-size: 8px;
  }

}

/* =========================================================
   STEP 17 — HISTORY PAGE FINAL DESIGN
   ========================================================= */

.history-panel {
  width: 100%;
  margin-top: 18px;
  margin-bottom: 20px;

  background: #ffffff;
  border: 1px solid #dbe4f0;
  border-radius: 12px;

  box-shadow:
    0 3px 12px rgba(15, 23, 42, 0.045);

  overflow: hidden;
}


/* =========================================================
   HISTORY HEADER
   ========================================================= */

.history-panel .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 18px 20px;

  background: #ffffff;
  border-bottom: 1px solid #e5eaf1;
}

.history-panel .panel-title {
  color: #172033;

  font-size: 14px;
  font-weight: 850;
  letter-spacing: .2px;
}

.history-panel .panel-subtitle {
  margin-top: 5px;

  color: #94a3b8;

  font-size: 10px;
  line-height: 1.5;
}


/* =========================================================
   FILTER
   ========================================================= */

.history-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;

  gap: 12px;

  padding: 16px 20px;

  background: #f8fafc;
  border-bottom: 1px solid #e5eaf1;
}

.history-filter-group {
  display: flex;
  flex-direction: column;

  gap: 6px;

  min-width: 155px;
}

.history-filter-group label {
  color: #64748b;

  font-size: 9px;
  font-weight: 850;

  letter-spacing: .8px;
}

.history-filter-group input,
.history-filter-group select {
  height: 36px;

  padding: 0 10px;

  background: #ffffff;

  border: 1px solid #dbe4f0;
  border-radius: 7px;

  color: #334155;

  font-family: inherit;
  font-size: 10px;
  font-weight: 700;

  outline: none;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

.history-filter-group input:hover,
.history-filter-group select:hover {
  border-color: #bfd0e3;
}

.history-filter-group input:focus,
.history-filter-group select:focus {
  border-color: #93b4e8;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.08);
}


/* Reset button */

.history-filters .secondary-btn {
  height: 36px;

  padding: 0 14px;

  background: #ffffff;

  border: 1px solid #dbe4f0;
  border-radius: 7px;

  color: #64748b;

  font-size: 9px;
  font-weight: 850;

  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

.history-filters .secondary-btn:hover {
  background: #eef4ff;

  border-color: #bfdbfe;

  color: #2563eb;

  transform: translateY(-1px);
}


/* =========================================================
   HISTORY SUMMARY
   ========================================================= */

.history-summary {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 10px;

  padding: 14px 20px;

  background: #ffffff;

  border-bottom: 1px solid #e5eaf1;
}

.history-summary > * {
  min-height: 54px;
}


/* =========================================================
   HISTORY TABLE
   ========================================================= */

.history-table-wrap {
  width: 100%;

  overflow-x: auto;

  background: #ffffff;
}

.history-table {
  width: 100%;

  min-width: 820px;

  border-collapse: separate;
  border-spacing: 0;

  color: #334155;

  font-size: 10px;
}


/* Header */

.history-table thead th {
  padding: 12px 14px;

  background: #f8fafc;

  border-bottom: 1px solid #dbe4f0;

  color: #64748b;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .7px;

  text-align: left;

  white-space: nowrap;
}


/* Body */

.history-table tbody tr {
  background: #ffffff;

  transition:
    background .12s ease;
}

.history-table tbody tr:hover {
  background: #f8fafc;
}

.history-table tbody td {
  padding: 12px 14px;

  border-bottom: 1px solid #edf1f5;

  color: #475569;

  font-size: 10px;
  font-weight: 600;

  vertical-align: middle;

  white-space: nowrap;
}

.history-table tbody tr:last-child td {
  border-bottom: none;
}


/* Empty state */

.history-empty {
  padding: 30px 16px !important;

  color: #94a3b8 !important;

  font-size: 10px !important;
  font-weight: 700 !important;

  text-align: center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .history-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 650px) {

  .history-panel .panel-head {
    padding: 15px 16px;
  }

  .history-filters {
    flex-direction: column;
    align-items: stretch;

    padding: 14px 16px;
  }

  .history-filter-group {
    width: 100%;
    min-width: 0;
  }

  .history-filters .secondary-btn {
    width: 100%;
  }

  .history-summary {
    grid-template-columns: 1fr;

    padding: 12px 16px;
  }

  .history-table {
    min-width: 760px;
  }

}

/* =========================================================
   STEP 18 — REPORT & ANALYTICS FINAL LIGHT STYLE
   ========================================================= */

.report-panel {
  width: 100%;
  margin-top: 18px;
  margin-bottom: 20px;

  background: #ffffff;
  border: 1px solid #dbe4f0;
  border-radius: 12px;

  box-shadow:
    0 3px 12px rgba(15, 23, 42, 0.045);

  overflow: hidden;
}


/* =========================================================
   REPORT HEADER
   ========================================================= */

.report-panel .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 18px 20px;

  background: #ffffff;
  border-bottom: 1px solid #e5eaf1;
}

.report-panel .panel-title {
  color: #172033;

  font-size: 14px;
  font-weight: 850;
  letter-spacing: .2px;
}

.report-panel .panel-subtitle {
  margin-top: 5px;

  color: #94a3b8;

  font-size: 10px;
  line-height: 1.5;
}


/* =========================================================
   REPORT KPI
   ========================================================= */

.report-kpis {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;

  padding: 16px 20px;

  background: #f8fafc;

  border-bottom: 1px solid #e5eaf1;
}

.report-kpi {
  position: relative;

  min-height: 92px;

  padding: 15px 16px 14px;

  background: #ffffff;

  border: 1px solid #dbe4f0;
  border-radius: 10px;

  box-shadow:
    0 2px 7px rgba(15, 23, 42, 0.035);

  overflow: hidden;

  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.report-kpi:hover {
  transform: translateY(-2px);

  border-color: #c7d5e5;

  box-shadow:
    0 5px 14px rgba(15, 23, 42, 0.07);
}

.report-kpi::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;

  background: #2563eb;
}

.report-kpi small {
  display: block;

  margin-bottom: 8px;

  color: #64748b;

  font-size: 8px;
  font-weight: 900;

  letter-spacing: .9px;

  text-transform: uppercase;
}

.report-kpi strong {
  display: block;

  color: #172033;

  font-size: 24px;
  font-weight: 900;

  line-height: 1.1;
}


/* =========================================================
   KPI COLOR VARIANTS
   ========================================================= */

.report-kpi:nth-child(1)::before {
  background: #2563eb;
}

.report-kpi:nth-child(2)::before {
  background: #ef4444;
}

.report-kpi:nth-child(3)::before {
  background: #f59e0b;
}

.report-kpi:nth-child(4)::before {
  background: #8b5cf6;
}


/* =========================================================
   REPORT GRID
   ========================================================= */

.report-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;

  padding: 18px 20px 20px;

  background: #ffffff;
}

.report-card {
  min-width: 0;

  padding: 16px;

  background: #ffffff;

  border: 1px solid #dbe4f0;
  border-radius: 10px;

  box-shadow:
    0 2px 7px rgba(15, 23, 42, 0.03);
}

.report-card h3 {
  margin: 0 0 14px;

  color: #334155;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .9px;
}


/* =========================================================
   BREAKDOWN
   ========================================================= */

.report-breakdown {
  display: flex;

  flex-direction: column;

  gap: 8px;
}

.report-row {
  display: flex;

  align-items: center;

  gap: 10px;

  min-height: 38px;

  padding: 8px 10px;

  background: #f8fafc;

  border: 1px solid #edf1f5;

  border-radius: 7px;

  transition:
    background .12s ease,
    border-color .12s ease;
}

.report-row:hover {
  background: #f1f5f9;

  border-color: #dbe4f0;
}

.report-row-label {
  min-width: 95px;

  color: #475569;

  font-size: 10px;
  font-weight: 750;
}

.report-row-value {
  min-width: 28px;

  color: #172033;

  font-size: 10px;
  font-weight: 900;

  text-align: right;
}


/* =========================================================
   REPORT BAR
   ========================================================= */

.report-bar-wrap {
  flex: 1;

  height: 7px;

  background: #e9eef5;

  border-radius: 999px;

  overflow: hidden;
}

.report-bar {
  height: 100%;

  background: #2563eb;

  border-radius: 999px;

  transition:
    width .25s ease;
}


/* =========================================================
   BAR COLORS BERDASARKAN JENIS DATA
   ========================================================= */

#reportBreakdown .report-bar {
  background: #2563eb;
}

#reportLineBreakdown .report-bar {
  background: #22c55e;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.report-empty {
  padding: 24px 10px;

  color: #94a3b8;

  font-size: 10px;
  font-weight: 700;

  text-align: center;
}


/* =========================================================
   REPORT RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .report-kpis {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .report-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 600px) {

  .report-panel .panel-head {
    padding: 15px 16px;
  }

  .report-kpis {
    grid-template-columns: 1fr;

    padding: 14px 16px;
  }

  .report-grid {
    padding: 14px 16px 16px;
  }

  .report-card {
    padding: 14px;
  }

}

/* =========================================================
   STEP 19 — SETTINGS PAGE FINAL LIGHT STYLE
   ========================================================= */

.settings-panel {
  width: 100%;
  margin-top: 18px;
  margin-bottom: 20px;

  background: #ffffff;
  border: 1px solid #dbe4f0;
  border-radius: 12px;

  box-shadow:
    0 3px 12px rgba(15, 23, 42, 0.045);

  overflow: hidden;
}


/* =========================================================
   SETTINGS HEADER
   ========================================================= */

.settings-panel .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 18px 20px;

  background: #ffffff;
  border-bottom: 1px solid #e5eaf1;
}

.settings-panel .panel-title {
  color: #172033;

  font-size: 14px;
  font-weight: 850;
  letter-spacing: .2px;
}

.settings-panel .panel-subtitle {
  margin-top: 5px;

  color: #94a3b8;

  font-size: 10px;
  line-height: 1.5;
}


/* =========================================================
   ADD LINE BUTTON
   ========================================================= */

.settings-panel #addLineBtn {
  min-height: 36px;

  padding: 0 14px;

  background: #2563eb;

  border: 1px solid #2563eb;
  border-radius: 7px;

  color: #ffffff;

  font-size: 9px;
  font-weight: 850;
  letter-spacing: .4px;

  cursor: pointer;

  box-shadow:
    0 3px 8px rgba(37, 99, 235, 0.16);

  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.settings-panel #addLineBtn:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;

  box-shadow:
    0 5px 12px rgba(37, 99, 235, 0.20);

  transform: translateY(-1px);
}

.settings-panel #addLineBtn:active {
  transform: scale(.97);
}


/* =========================================================
   SETTINGS TABLE
   ========================================================= */

.settings-panel .table-wrap {
  width: 100%;

  overflow-x: auto;

  background: #ffffff;
}

.settings-table {
  width: 100%;

  min-width: 980px;

  border-collapse: separate;
  border-spacing: 0;

  color: #334155;

  font-size: 10px;
}


/* Header */

.settings-table thead th {
  padding: 12px 13px;

  background: #f8fafc;

  border-bottom: 1px solid #dbe4f0;

  color: #64748b;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .6px;

  text-align: left;

  white-space: nowrap;
}


/* Body */

.settings-table tbody tr {
  background: #ffffff;

  transition:
    background .12s ease;
}

.settings-table tbody tr:hover {
  background: #f8fafc;
}

.settings-table tbody td {
  padding: 11px 13px;

  border-bottom: 1px solid #edf1f5;

  color: #475569;

  font-size: 10px;
  font-weight: 600;

  vertical-align: middle;

  white-space: nowrap;
}

.settings-table tbody tr:last-child td {
  border-bottom: none;
}


/* =========================================================
   SETTINGS INPUT
   ========================================================= */

.settings-table input,
.settings-table select {
  height: 32px;

  padding: 0 8px;

  background: #ffffff;

  border: 1px solid #dbe4f0;
  border-radius: 6px;

  color: #334155;

  font-family: inherit;
  font-size: 9px;
  font-weight: 700;

  outline: none;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

.settings-table input:focus,
.settings-table select:focus {
  border-color: #93b4e8;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.07);
}


/* =========================================================
   SETTINGS STATUS
   ========================================================= */

.settings-table .status-badge,
.settings-table .badge {
  display: inline-flex;
  align-items: center;

  min-height: 24px;

  padding: 4px 9px;

  border-radius: 999px;

  background: #f1f5f9;

  color: #64748b;

  font-size: 8px;
  font-weight: 850;
}


/* =========================================================
   SETTINGS ACTION BUTTON
   ========================================================= */

.settings-table button {
  min-height: 29px;

  padding: 5px 9px;

  background: #ffffff;

  border: 1px solid #dbe4f0;
  border-radius: 6px;

  color: #64748b;

  font-size: 8px;
  font-weight: 850;

  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

.settings-table button:hover {
  background: #eef4ff;

  border-color: #bfdbfe;

  color: #2563eb;

  transform: translateY(-1px);
}


/* =========================================================
   SETTINGS EMPTY
   ========================================================= */

.settings-panel .history-empty {
  padding: 30px 16px !important;

  color: #94a3b8 !important;

  font-size: 10px !important;
  font-weight: 700 !important;

  text-align: center;
}


/* =========================================================
   SETTINGS RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

  .settings-panel .panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-panel #addLineBtn {
    width: 100%;
  }

  .settings-panel .table-wrap {
    width: 100%;
  }

}

/* =========================================================
   STEP 20 — HISTORY SUMMARY FINAL LIGHT STYLE
   ========================================================= */

.history-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;

  margin: 16px 0 14px;
}

.history-summary-card {
  position: relative;

  min-height: 82px;

  padding: 14px 16px;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;
  border-radius: 10px;

  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.035);

  overflow: hidden;

  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.history-summary-card:hover {
  transform: translateY(-2px);

  border-color: #c7d5e5 !important;

  box-shadow:
    0 5px 14px rgba(15, 23, 42, 0.07);
}

.history-summary-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;

  background: #2563eb;
}

.history-summary-card:nth-child(1)::before {
  background: #2563eb;
}

.history-summary-card:nth-child(2)::before {
  background: #f59e0b;
}

.history-summary-card:nth-child(3)::before {
  background: #ef4444;
}

.history-summary-card small {
  display: block;

  margin-bottom: 7px;

  color: #64748b !important;

  font-size: 8px;
  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: .8px;
}

.history-summary-card strong {
  display: block;

  color: #172033 !important;

  font-size: 22px;

  line-height: 1.1;

  font-weight: 900;

  letter-spacing: -.3px;
}

.history-summary-card:nth-child(1) strong {
  color: #2563eb !important;
}

.history-summary-card:nth-child(2) strong {
  color: #d97706 !important;
}

.history-summary-card:nth-child(3) strong {
  color: #dc2626 !important;
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 800px) {

  .history-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 600px) {

  .history-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .history-summary-card {
    min-height: 76px;
  }

  .history-summary-card strong {
    font-size: 20px;
  }

}

/* =========================================================
   STEP 21 — HISTORY & SETTINGS TABLE FINAL LIGHT
   ========================================================= */


/* =========================================================
   HISTORY — PANEL & TABLE
   ========================================================= */

.history-panel {
  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 12px;

  box-shadow:
    0 3px 12px rgba(15, 23, 42, 0.045);

  overflow: hidden;
}


/* FILTER AREA */

.history-filters {
  background: #f8fafc !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 9px;
}


/* TABLE WRAPPER */

.history-panel .table-wrap {
  background: #ffffff !important;

  border: none !important;

  overflow-x: auto;
}


/* HISTORY TABLE */

.history-panel .data-table,
.history-table {
  width: 100%;

  background: #ffffff !important;

  border-collapse: collapse;

  border: 1px solid #dbe4f0 !important;

  color: #334155;
}


/* HEADER */

.history-panel .data-table thead,
.history-table thead {
  background: #f8fafc !important;
}

.history-panel .data-table th,
.history-table th {
  background: #f8fafc !important;

  color: #64748b !important;

  border-top: 1px solid #dbe4f0 !important;
  border-bottom: 1px solid #dbe4f0 !important;
  border-left: none !important;
  border-right: none !important;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .6px;

  text-transform: uppercase;
}


/* BODY */

.history-panel .data-table td,
.history-table td {
  background: #ffffff !important;

  color: #475569 !important;

  border-top: none !important;
  border-bottom: 1px solid #edf1f5 !important;
  border-left: none !important;
  border-right: none !important;

  font-size: 10px;
}


/* HOVER */

.history-panel .data-table tbody tr:hover td,
.history-table tbody tr:hover td {
  background: #f8fafc !important;
}


/* LAST ROW */

.history-panel .data-table tbody tr:last-child td,
.history-table tbody tr:last-child td {
  border-bottom: none !important;
}


/* =========================================================
   HISTORY — OUTER PANEL YANG MEMBUNGKUS TABLE
   ========================================================= */

.history-panel .panel {
  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 10px;

  box-shadow: none !important;

  overflow: hidden;
}


/* =========================================================
   SETTINGS — PANEL
   ========================================================= */

.settings-panel {
  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 12px;

  box-shadow:
    0 3px 12px rgba(15, 23, 42, 0.045);

  overflow: hidden;
}


/* SETTINGS TABLE WRAPPER */

.settings-panel .table-wrap {
  background: #ffffff !important;

  border: none !important;

  overflow-x: auto;
}


/* SETTINGS TABLE */

.settings-table {
  width: 100%;

  background: #ffffff !important;

  border-collapse: separate;

  border-spacing: 0;

  border: 1px solid #dbe4f0 !important;

  color: #334155;
}


/* SETTINGS HEADER */

.settings-table thead {
  background: #f8fafc !important;
}

.settings-table thead th {
  background: #f8fafc !important;

  color: #64748b !important;

  border-top: 1px solid #dbe4f0 !important;
  border-bottom: 1px solid #dbe4f0 !important;

  border-left: none !important;
  border-right: none !important;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .6px;

  text-transform: uppercase;
}


/* SETTINGS BODY */

.settings-table tbody {
  background: #ffffff !important;
}

.settings-table tbody tr {
  background: #ffffff !important;

  border: none !important;
}

.settings-table tbody td {
  background: #ffffff !important;

  color: #475569 !important;

  border-top: none !important;
  border-bottom: 1px solid #edf1f5 !important;

  border-left: none !important;
  border-right: none !important;

  font-size: 10px;
}


/* SETTINGS HOVER */

.settings-table tbody tr:hover td {
  background: #f8fafc !important;
}


/* LAST ROW */

.settings-table tbody tr:last-child td {
  border-bottom: none !important;
}


/* =========================================================
   REMOVE OLD DARK TABLE BORDERS
   ========================================================= */

.history-panel *,
.settings-panel * {
  --line: #dbe4f0;
}


/* Override kemungkinan border hitam dari CSS lama */

.history-panel table,
.history-panel th,
.history-panel td,
.settings-panel table,
.settings-panel th,
.settings-panel td {
  border-color: #dbe4f0 !important;
}


/* Body row separator dibuat lebih soft */

.history-panel tbody td,
.settings-panel tbody td {
  border-bottom-color: #edf1f5 !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

  .history-panel .data-table,
  .history-table,
  .settings-table {
    min-width: 760px;
  }

}

/* =========================================================
   STEP 21B — REMOVE DOUBLE / DARK TABLE LINES
   HISTORY + SETTINGS
   ========================================================= */


/* =========================================================
   HISTORY
   ========================================================= */

/* Hilangkan border container tabel */
.history-panel .table-wrap,
.history-panel .history-table-wrap {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


/* Hilangkan border panel pembungkus tabel */
.history-panel .panel {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  background: #ffffff !important;
}


/* Tabel utama */
.history-panel table,
.history-panel .data-table,
.history-panel .history-table {
  width: 100%;

  border: none !important;
  outline: none !important;

  border-collapse: collapse !important;
  border-spacing: 0 !important;

  background: #ffffff !important;
}


/* Header tabel */
.history-panel table thead,
.history-panel table thead tr {
  background: #f8fafc !important;

  border: none !important;
}


.history-panel table th {
  background: #f8fafc !important;

  color: #64748b !important;

  border: none !important;

  border-bottom: 1px solid #dbe4f0 !important;

  box-shadow: none !important;

  padding: 11px 13px;
}


/* Isi tabel */
.history-panel table tbody,
.history-panel table tbody tr {
  background: #ffffff !important;

  border: none !important;
}


.history-panel table td {
  background: #ffffff !important;

  color: #475569 !important;

  border: none !important;

  border-bottom: 1px solid #edf1f5 !important;

  box-shadow: none !important;

  padding: 11px 13px;
}


/* Hover */
.history-panel table tbody tr:hover td {
  background: #f8fafc !important;
}


/* Row terakhir tidak punya garis */
.history-panel table tbody tr:last-child td {
  border-bottom: none !important;
}


/* =========================================================
   SETTINGS
   ========================================================= */

/* Hilangkan border container */
.settings-panel .table-wrap {
  border: none !important;

  outline: none !important;

  box-shadow: none !important;

  border-radius: 0 !important;

  margin: 0 !important;

  background: #ffffff !important;
}


/* Hilangkan border luar tabel */
.settings-panel .settings-table,
.settings-panel table {
  border: none !important;

  outline: none !important;

  border-collapse: collapse !important;
  border-spacing: 0 !important;

  background: #ffffff !important;

  box-shadow: none !important;
}


/* Header */
.settings-panel .settings-table thead,
.settings-panel .settings-table thead tr {
  background: #f8fafc !important;

  border: none !important;
}


.settings-panel .settings-table th {
  background: #f8fafc !important;

  color: #64748b !important;

  border: none !important;

  border-bottom: 1px solid #dbe4f0 !important;

  box-shadow: none !important;

  padding: 11px 13px;
}


/* Body */
.settings-panel .settings-table tbody,
.settings-panel .settings-table tbody tr {
  background: #ffffff !important;

  border: none !important;
}


.settings-panel .settings-table td {
  background: #ffffff !important;

  color: #475569 !important;

  border: none !important;

  border-bottom: 1px solid #edf1f5 !important;

  box-shadow: none !important;

  padding: 11px 13px;
}


/* Hover */
.settings-panel .settings-table tbody tr:hover td {
  background: #f8fafc !important;
}


/* Row terakhir */
.settings-panel .settings-table tbody tr:last-child td {
  border-bottom: none !important;
}


/* =========================================================
   GLOBAL OVERRIDE KHUSUS TABLE
   ========================================================= */

/* Tidak boleh ada garis vertikal */
.history-panel table th,
.history-panel table td,
.settings-panel table th,
.settings-panel table td {
  border-left: none !important;
  border-right: none !important;
}


/* Tidak boleh ada outline / shadow yang terlihat seperti garis */
.history-panel table,
.history-panel table *,
.settings-panel table,
.settings-panel table * {
  outline: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .history-panel .table-wrap,
  .history-panel .history-table-wrap {
    margin: 0 !important;
  }

  .settings-panel .table-wrap {
    margin: 0 !important;
  }

}

/* =========================================================
   STEP 21C — TABLE BORDER ROUNDED
   HISTORY + SETTINGS
   ========================================================= */


/* =========================================================
   HISTORY TABLE CONTAINER
   ========================================================= */

.history-panel .table-wrap,
.history-panel .history-table-wrap {

  margin: 0 18px 18px !important;

  overflow: hidden !important;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 10px !important;

  box-shadow: none !important;
}


/* HISTORY TABLE */

.history-panel .data-table,
.history-panel .history-table {

  width: 100%;

  border: none !important;

  border-collapse: collapse !important;

  border-spacing: 0;

  background: #ffffff !important;
}


/* HISTORY HEADER */

.history-panel .data-table thead th,
.history-panel .history-table thead th {

  background: #f8fafc !important;

  color: #64748b !important;

  border: none !important;

  border-bottom: 1px solid #dbe4f0 !important;
}


/* HISTORY BODY */

.history-panel .data-table tbody td,
.history-panel .history-table tbody td {

  background: #ffffff !important;

  color: #475569 !important;

  border: none !important;

  border-bottom: 1px solid #edf1f5 !important;
}


/* Last row */

.history-panel .data-table tbody tr:last-child td,
.history-panel .history-table tbody tr:last-child td {

  border-bottom: none !important;
}


/* Hover */

.history-panel .data-table tbody tr:hover td,
.history-panel .history-table tbody tr:hover td {

  background: #f8fafc !important;
}


/* =========================================================
   SETTINGS TABLE CONTAINER
   ========================================================= */

.settings-panel .table-wrap {

  margin: 0 18px 18px !important;

  overflow: hidden !important;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 10px !important;

  box-shadow: none !important;
}


/* SETTINGS TABLE */

.settings-panel .settings-table {

  width: 100%;

  border: none !important;

  border-collapse: collapse !important;

  border-spacing: 0;

  background: #ffffff !important;
}


/* SETTINGS HEADER */

.settings-panel .settings-table thead th {

  background: #f8fafc !important;

  color: #64748b !important;

  border: none !important;

  border-bottom: 1px solid #dbe4f0 !important;
}


/* SETTINGS BODY */

.settings-panel .settings-table tbody td {

  background: #ffffff !important;

  color: #475569 !important;

  border: none !important;

  border-bottom: 1px solid #edf1f5 !important;
}


/* Last row */

.settings-panel .settings-table tbody tr:last-child td {

  border-bottom: none !important;
}


/* Hover */

.settings-panel .settings-table tbody tr:hover td {

  background: #f8fafc !important;
}


/* =========================================================
   OUTER CORNER CLEANUP
   ========================================================= */

.history-panel .table-wrap,
.history-panel .history-table-wrap,
.settings-panel .table-wrap {

  isolation: isolate;
}


/* Pastikan tidak ada garis vertikal dari cell */

.history-panel table th,
.history-panel table td,
.settings-panel table th,
.settings-panel table td {

  border-left: none !important;

  border-right: none !important;
}

/* =========================================================
   STEP 21D — FIX TABLE WIDTH / RIGHT OVERFLOW
   HISTORY + SETTINGS
   ========================================================= */


/* =========================================================
   HISTORY
   ========================================================= */

.history-panel .table-wrap,
.history-panel .history-table-wrap {

  width: calc(100% - 36px) !important;

  margin-left: 18px !important;
  margin-right: 18px !important;

  box-sizing: border-box !important;

  overflow-x: auto !important;

  border: 1px solid #dbe4f0 !important;
  border-radius: 10px !important;

  background: #ffffff !important;

  box-shadow: none !important;
}


/* Table mengikuti container */

.history-panel .data-table,
.history-panel .history-table {

  width: 100% !important;

  max-width: 100% !important;

  box-sizing: border-box !important;

  border: none !important;

  border-collapse: collapse !important;

  background: #ffffff !important;
}


/* =========================================================
   SETTINGS
   ========================================================= */

.settings-panel .table-wrap {

  width: calc(100% - 36px) !important;

  margin-left: 18px !important;
  margin-right: 18px !important;

  box-sizing: border-box !important;

  overflow-x: auto !important;

  border: 1px solid #dbe4f0 !important;
  border-radius: 10px !important;

  background: #ffffff !important;

  box-shadow: none !important;
}


/* Settings table */

.settings-panel .settings-table {

  width: 100% !important;

  max-width: 100% !important;

  box-sizing: border-box !important;

  border: none !important;

  border-collapse: collapse !important;

  background: #ffffff !important;
}

/* =========================================================
   STEP 22 — SETTINGS LAYOUT / DENAH FINAL LIGHT
   ========================================================= */


/* =========================================================
   LAYOUT PANEL
   ========================================================= */

.layout-panel {
  width: 100%;

  margin-top: 18px;
  margin-bottom: 20px;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 12px !important;

  box-shadow:
    0 3px 12px rgba(15, 23, 42, 0.045) !important;

  overflow: hidden;
}


/* =========================================================
   HEADER LAYOUT
   ========================================================= */

.layout-panel .panel-head {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 17px 18px !important;

  background: #ffffff !important;

  border-bottom: 1px solid #e5eaf1 !important;
}


.layout-panel .panel-title {
  color: #172033 !important;

  font-size: 14px !important;

  font-weight: 850 !important;

  letter-spacing: .2px;
}


.layout-panel .panel-subtitle {
  margin-top: 4px;

  color: #94a3b8 !important;

  font-size: 9px !important;

  line-height: 1.5;
}


/* =========================================================
   PANEL TOOLS
   ========================================================= */

.layout-panel .panel-tools {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 14px;

  flex-wrap: wrap;
}


/* =========================================================
   SIMPAN POSISI
   ========================================================= */

.layout-panel .primary-btn {

  min-height: 36px;

  padding: 0 14px;

  background: #16a34a !important;

  border: 1px solid #16a34a !important;

  border-radius: 7px !important;

  color: #ffffff !important;

  font-size: 9px;

  font-weight: 850;

  letter-spacing: .4px;

  cursor: pointer;

  box-shadow:
    0 3px 8px rgba(22, 163, 74, 0.16);

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}


.layout-panel .primary-btn:hover {

  background: #15803d !important;

  border-color: #15803d !important;

  transform: translateY(-1px);

  box-shadow:
    0 5px 12px rgba(22, 163, 74, 0.20);
}


.layout-panel .primary-btn:active {

  transform: scale(.97);
}


/* =========================================================
   LEGEND
   ========================================================= */

.layout-panel .legend {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 12px;

  padding: 0 !important;
}


.layout-panel .legend span {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: #64748b !important;

  font-size: 9px !important;

  font-weight: 700 !important;

  white-space: nowrap;
}


.layout-panel .legend .dot {

  width: 8px !important;

  height: 8px !important;

  display: inline-block;

  border-radius: 50% !important;
}


.layout-panel .legend .dot.normal {
  background: #22c55e !important;
}

.layout-panel .legend .dot.machine {
  background: #ef4444 !important;
}

.layout-panel .legend .dot.material {
  background: #f59e0b !important;
}

.layout-panel .legend .dot.quality {
  background: #3b82f6 !important;
}

.layout-panel .legend .dot.offline {
  background: #94a3b8 !important;
}


/* =========================================================
   MAP CONTAINER
   ========================================================= */

.layout-panel .layout-map {

  position: relative;

  margin: 14px !important;

  min-height: 480px;

  overflow: hidden;

  background:
    linear-gradient(
      rgba(148, 163, 184, 0.10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(148, 163, 184, 0.10) 1px,
      transparent 1px
    ),
    #f8fafc !important;

  background-size: 25px 25px;

  border: 1px solid #dbe4f0 !important;

  border-radius: 10px !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.65);
}


/* =========================================================
   MAP STAGE
   ========================================================= */

.layout-panel .map-stage {

  position: relative;

  width: 100%;

  min-height: 480px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;
}


/* =========================================================
   DENAH IMAGE
   ========================================================= */

.layout-panel #layoutImage {

  display: block;

  max-width: 92%;

  max-height: 450px;

  width: auto;

  height: auto;

  object-fit: contain;

  background: #ffffff;

  border-radius: 5px;

  user-select: none;

  -webkit-user-drag: none;
}


/* =========================================================
   MARKERS
   ========================================================= */

.layout-panel #markers {

  position: absolute;

  inset: 0;

  pointer-events: none;
}


.layout-panel #markers > * {

  pointer-events: auto;
}


/* =========================================================
   ZOOM CONTROL
   ========================================================= */

.layout-panel .zoom-controls {

  position: absolute;

  z-index: 20;

  top: 12px;

  right: 12px;

  display: flex;

  flex-direction: column;

  gap: 4px;

  padding: 5px;

  background: rgba(255,255,255,.96) !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 8px !important;

  box-shadow:
    0 4px 12px rgba(15,23,42,.10);

  backdrop-filter: blur(6px);
}


.layout-panel .zoom-controls button {

  width: 32px;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 6px !important;

  color: #475569 !important;

  font-size: 13px;

  font-weight: 800;

  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}


.layout-panel .zoom-controls button:hover {

  background: #f8fafc !important;

  border-color: #bfd0e3 !important;

  color: #2563eb !important;
}


.layout-panel .zoom-controls button:active {

  transform: scale(.95);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .layout-panel .panel-head {

    align-items: flex-start;

    flex-direction: column;
  }

  .layout-panel .panel-tools {

    width: 100%;

    justify-content: flex-start;
  }

  .layout-panel .legend {

    justify-content: flex-start;
  }

}


@media (max-width: 600px) {

  .layout-panel .layout-map {

    margin: 8px !important;

    min-height: 300px;
  }

  .layout-panel .map-stage {

    min-height: 300px;
  }

  .layout-panel #layoutImage {

    max-width: 96%;

    max-height: 280px;
  }

  .layout-panel .panel-tools {

    align-items: flex-start;

    flex-direction: column;
  }

  .layout-panel .legend {

    gap: 8px;
  }

}

/* =========================================================
   STEP 23 — FLOOR TABS FINAL LIGHT
   ========================================================= */


/* =========================================================
   FLOOR TAB CONTAINER
   ========================================================= */

.floor-tabs {
  display: flex;

  align-items: center;

  gap: 8px;

  margin: 0 0 18px !important;

  padding: 4px;

  background: #f8fafc;

  border: 1px solid #dbe4f0;

  border-radius: 9px;

  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.025);
}


/* =========================================================
   FLOOR BUTTON
   ========================================================= */

.floor-tab {

  appearance: none;

  min-width: 108px;

  min-height: 34px;

  padding: 0 16px;

  background: transparent !important;

  border: 1px solid transparent !important;

  border-radius: 7px !important;

  color: #64748b !important;

  font-size: 9px !important;

  font-weight: 850 !important;

  letter-spacing: .7px;

  cursor: pointer;

  box-shadow: none !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.floor-tab:hover {

  background: #ffffff !important;

  border-color: #dbe4f0 !important;

  color: #2563eb !important;

  transform: translateY(-1px);

  box-shadow:
    0 2px 5px rgba(15, 23, 42, 0.04) !important;
}


/* =========================================================
   ACTIVE
   ========================================================= */

.floor-tab.active {

  background: #2563eb !important;

  border-color: #2563eb !important;

  color: #ffffff !important;

  box-shadow:
    0 3px 8px rgba(37, 99, 235, 0.18) !important;

  transform: none;
}


.floor-tab.active:hover {

  background: #1d4ed8 !important;

  border-color: #1d4ed8 !important;

  color: #ffffff !important;

  transform: translateY(-1px);

  box-shadow:
    0 4px 10px rgba(37, 99, 235, 0.20) !important;
}


/* =========================================================
   ACTIVE PRESS
   ========================================================= */

.floor-tab:active {

  transform: scale(.97);
}


/* =========================================================
   FOCUS
   ========================================================= */

.floor-tab:focus-visible {

  outline: none;

  border-color: #93b4e8 !important;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.10) !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 650px) {

  .floor-tabs {

    gap: 5px;

    margin-bottom: 12px !important;

    padding: 3px;
  }

  .floor-tab {

    min-width: 90px;

    min-height: 32px;

    padding: 0 12px;

    font-size: 8px !important;
  }

}

/* =========================================================
   STEP 23B — FLOOR TABS COMPACT
   ========================================================= */

.floor-tabs {
  display: inline-flex !important;

  width: fit-content !important;

  align-items: center;

  gap: 4px;

  margin: 0 0 18px !important;

  padding: 4px;

  background: #f8fafc;

  border: 1px solid #dbe4f0;

  border-radius: 9px;

  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.025);
}


.floor-tab {
  min-width: 108px;

  min-height: 34px;

  padding: 0 16px;
}


/* Responsive */

@media (max-width: 650px) {

  .floor-tabs {
    width: fit-content !important;

    gap: 3px;

    padding: 3px;

    margin-bottom: 12px !important;
  }

  .floor-tab {
    min-width: 88px;

    min-height: 32px;

    padding: 0 12px;
  }

}

/* =========================================================
   STEP 24 — MAP MARKER FINAL LIGHT
   ========================================================= */

/* =========================
   BASE MARKER
   ========================= */

.layout-panel .marker {

  min-width: 62px;
  max-width: 105px;

  min-height: 27px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 5px 9px;

  border: 1px solid rgba(255, 255, 255, 0.95) !important;

  border-radius: 7px !important;

  font-size: 8px !important;
  font-weight: 850 !important;

  line-height: 1.15;

  text-align: center;

  white-space: normal;

  overflow-wrap: break-word;

  box-shadow:
    0 2px 7px rgba(15, 23, 42, 0.16) !important;

  z-index: 10;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}


/* =========================
   NORMAL
   ========================= */

.layout-panel .marker.normal {

  background: #22c55e !important;

  color: #ffffff !important;

  border-color: #ffffff !important;
}


/* =========================
   MACHINE
   ========================= */

.layout-panel .marker.danger {

  background: #ef4444 !important;

  color: #ffffff !important;

  border-color: #ffffff !important;
}


/* =========================
   MATERIAL
   ========================= */

.layout-panel .marker.warning {

  background: #f59e0b !important;

  color: #ffffff !important;

  border-color: #ffffff !important;
}


/* =========================
   QUALITY
   ========================= */

.layout-panel .marker.quality {

  background: #3b82f6 !important;

  color: #ffffff !important;

  border-color: #ffffff !important;
}


/* =========================
   OFFLINE
   ========================= */

.layout-panel .marker.offline {

  background: #64748b !important;

  color: #ffffff !important;

  border-color: #ffffff !important;
}


/* =========================
   HOVER
   ========================= */

.layout-panel .marker:hover {

  transform: translateY(-2px) scale(1.03);

  box-shadow:
    0 5px 12px rgba(15, 23, 42, 0.20) !important;

  filter: brightness(1.02);

  z-index: 40;
}


/* =========================
   ACTIVE PROBLEM
   ========================= */

.layout-panel .marker.status-pulse {

  z-index: 30;

  animation:
    markerPulseLight 1.25s ease-out infinite;
}


/* Pulse ring */

.layout-panel .marker.status-pulse::after {

  content: "";

  position: absolute;

  inset: -4px;

  border: 2px solid currentColor;

  border-radius: 9px;

  opacity: .35;

  pointer-events: none;

  animation:
    markerRingLight 1.25s ease-out infinite;
}


/* =========================
   DRAGGING — SETTINGS
   ========================= */

.layout-panel .marker.draggable-marker {

  cursor: grab;

  user-select: none;
}


.layout-panel .marker.draggable-marker:active {

  cursor: grabbing;
}


.layout-panel .marker.dragging {

  z-index: 100 !important;

  transform: scale(1.08);

  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.24) !important;
}


/* =========================
   ANIMATION
   ========================= */

@keyframes markerPulseLight {

  0%,
  100% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.04);
  }

}


@keyframes markerRingLight {

  0% {
    transform: scale(.92);
    opacity: .45;
  }

  70% {
    transform: scale(1.12);
    opacity: .10;
  }

  100% {
    transform: scale(1.18);
    opacity: 0;
  }

}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 650px) {

  .layout-panel .marker {

    min-width: 52px;
    max-width: 82px;

    min-height: 24px;

    padding: 4px 6px;

    font-size: 7px !important;

    border-radius: 6px !important;
  }

}

/* =========================================================
   STEP 25 — ADD / EDIT LINE MODAL FINAL LIGHT
   ========================================================= */


/* =========================================================
   MODAL OVERLAY
   ========================================================= */

.modal {

  position: fixed;

  inset: 0;

  z-index: 1000;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 24px;

  background: rgba(15, 23, 42, 0.38);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);
}


/* Hidden tetap mengikuti JS */

.modal.hidden {
  display: none !important;
}


/* =========================================================
   MODAL CARD
   ========================================================= */

.modal-card {

  width: min(620px, 100%);

  max-height: calc(100vh - 48px);

  overflow-y: auto;

  background: #ffffff;

  border: 1px solid #dbe4f0;

  border-radius: 14px;

  box-shadow:
    0 20px 50px rgba(15, 23, 42, 0.18);

  color: #172033;

  animation: modalAppear .18s ease-out;
}


/* =========================================================
   MODAL HEADER
   ========================================================= */

.modal-head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

  padding: 20px 22px;

  background: #ffffff;

  border-bottom: 1px solid #e5eaf1;
}


.modal-title {

  color: #172033;

  font-size: 15px;

  font-weight: 900;

  letter-spacing: .1px;
}


.modal-subtitle {

  max-width: 480px;

  margin-top: 5px;

  color: #94a3b8;

  font-size: 9px;

  line-height: 1.5;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.modal-close {

  flex: 0 0 auto;

  width: 32px;

  height: 32px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  background: #ffffff;

  border: 1px solid #dbe4f0;

  border-radius: 8px;

  color: #64748b;

  font-size: 19px;

  line-height: 1;

  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}


.modal-close:hover {

  background: #fef2f2;

  border-color: #fecaca;

  color: #dc2626;

  transform: translateY(-1px);
}


.modal-close:active {

  transform: scale(.95);
}


/* =========================================================
   FORM
   ========================================================= */

.line-form {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;

  padding: 20px 22px 22px;

  background: #ffffff;
}


.line-form label {

  display: flex;

  flex-direction: column;

  gap: 6px;

  min-width: 0;
}


.line-form label.full,
.line-form .full {

  grid-column: 1 / -1;
}


.line-form label span {

  color: #64748b;

  font-size: 8px;

  font-weight: 900;

  letter-spacing: .7px;

  text-transform: uppercase;
}


/* =========================================================
   INPUT & SELECT
   ========================================================= */

.line-form input,
.line-form select {

  width: 100%;

  height: 36px;

  padding: 0 10px;

  background: #ffffff;

  border: 1px solid #dbe4f0;

  border-radius: 7px;

  color: #334155;

  font-family: inherit;

  font-size: 10px;

  font-weight: 700;

  outline: none;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}


.line-form input::placeholder {

  color: #b0bac8;
}


.line-form input:hover,
.line-form select:hover {

  border-color: #bfd0e3;
}


.line-form input:focus,
.line-form select:focus {

  background: #ffffff;

  border-color: #93b4e8;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.08);
}


/* Number input */

.line-form input[type="number"] {

  appearance: textfield;
}


/* =========================================================
   FORM MESSAGE
   ========================================================= */

.line-form .form-message {

  min-height: 0;

  padding: 0;

  color: #64748b;

  font-size: 9px;

  font-weight: 700;

  line-height: 1.5;
}


.line-form .form-message:not(:empty) {

  min-height: 32px;

  display: flex;

  align-items: center;

  padding: 8px 10px;

  background: #f8fafc;

  border: 1px solid #dbe4f0;

  border-radius: 7px;
}


.line-form .form-message.error {

  background: #fef2f2;

  border-color: #fecaca;

  color: #dc2626;
}


/* =========================================================
   MODAL ACTIONS
   ========================================================= */

.modal-actions {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 8px;

  padding-top: 4px;
}


.modal-actions button {

  min-height: 34px;

  padding: 0 14px;

  border-radius: 7px;

  font-family: inherit;

  font-size: 9px;

  font-weight: 850;

  letter-spacing: .3px;

  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}


/* BATAL */

.modal-actions .secondary-btn {

  background: #ffffff;

  border: 1px solid #dbe4f0;

  color: #64748b;
}


.modal-actions .secondary-btn:hover {

  background: #f8fafc;

  border-color: #bfd0e3;

  color: #334155;

  transform: translateY(-1px);
}


/* SIMPAN */

.modal-actions .primary-btn {

  background: #2563eb !important;

  border: 1px solid #2563eb !important;

  color: #ffffff !important;

  box-shadow:
    0 3px 8px rgba(37, 99, 235, 0.16);
}


.modal-actions .primary-btn:hover {

  background: #1d4ed8 !important;

  border-color: #1d4ed8 !important;

  box-shadow:
    0 5px 12px rgba(37, 99, 235, 0.20);

  transform: translateY(-1px);
}


.modal-actions button:active {

  transform: scale(.97);
}


/* =========================================================
   MODAL ANIMATION
   ========================================================= */

@keyframes modalAppear {

  from {

    opacity: 0;

    transform:
      translateY(8px)
      scale(.985);
  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 650px) {

  .modal {

    padding: 12px;
  }


  .modal-card {

    width: 100%;

    max-height: calc(100vh - 24px);

    border-radius: 12px;
  }


  .modal-head {

    padding: 16px;

    gap: 12px;
  }


  .modal-title {

    font-size: 14px;
  }


  .modal-subtitle {

    font-size: 8px;
  }


  .line-form {

    grid-template-columns: 1fr;

    gap: 12px;

    padding: 16px;
  }


  .line-form label.full,
  .line-form .full {

    grid-column: auto;
  }


  .modal-actions {

    justify-content: stretch;
  }


  .modal-actions button {

    flex: 1;
  }

}

/* =========================================================
   STEP 25 FIX — FORCE LIGHT MODAL
   ========================================================= */

#lineModal {
  background: rgba(15, 23, 42, 0.38) !important;
}


/* =========================
   MODAL CARD
   ========================= */

#lineModal .modal-card {

  width: min(620px, 100%) !important;

  max-height: calc(100vh - 48px) !important;

  overflow-y: auto !important;

  padding: 0 !important;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 14px !important;

  box-shadow:
    0 20px 50px rgba(15, 23, 42, 0.18) !important;

  color: #172033 !important;
}


/* =========================
   HEADER
   ========================= */

#lineModal .modal-head {

  display: flex !important;

  align-items: flex-start !important;

  justify-content: space-between !important;

  gap: 20px !important;

  margin: 0 !important;

  padding: 20px 22px !important;

  background: #ffffff !important;

  border-bottom: 1px solid #e5eaf1 !important;
}


#lineModal .modal-title {

  color: #172033 !important;

  font-size: 15px !important;

  font-weight: 900 !important;

  letter-spacing: .1px !important;
}


#lineModal .modal-subtitle {

  margin-top: 5px !important;

  color: #94a3b8 !important;

  font-size: 9px !important;

  line-height: 1.5 !important;
}


/* =========================
   CLOSE BUTTON
   ========================= */

#lineModal .modal-close {

  width: 32px !important;

  height: 32px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 0 !important;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 8px !important;

  color: #64748b !important;

  font-size: 19px !important;

  line-height: 1 !important;
}


#lineModal .modal-close:hover {

  background: #fef2f2 !important;

  border-color: #fecaca !important;

  color: #dc2626 !important;
}


/* =========================
   FORM
   ========================= */

#lineModal .line-form {

  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 14px !important;

  margin: 0 !important;

  padding: 20px 22px 22px !important;

  background: #ffffff !important;
}


#lineModal .line-form label {

  display: flex !important;

  flex-direction: column !important;

  gap: 6px !important;
}


#lineModal .line-form label.full,
#lineModal .line-form .full {

  grid-column: 1 / -1 !important;
}


#lineModal .line-form label span {

  color: #64748b !important;

  font-size: 8px !important;

  font-weight: 900 !important;

  letter-spacing: .7px !important;

  text-transform: uppercase !important;
}


/* =========================
   INPUT
   ========================= */

#lineModal .line-form input,
#lineModal .line-form select {

  width: 100% !important;

  min-height: 38px !important;

  height: 38px !important;

  box-sizing: border-box !important;

  padding: 0 10px !important;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 7px !important;

  color: #334155 !important;

  font-family: inherit !important;

  font-size: 10px !important;

  font-weight: 700 !important;

  outline: none !important;
}


#lineModal .line-form input::placeholder {

  color: #b0bac8 !important;
}


#lineModal .line-form input:hover,
#lineModal .line-form select:hover {

  border-color: #bfd0e3 !important;
}


#lineModal .line-form input:focus,
#lineModal .line-form select:focus {

  background: #ffffff !important;

  border-color: #93b4e8 !important;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.08) !important;
}


/* =========================
   FORM MESSAGE
   ========================= */

#lineModal .form-message {

  margin-top: 0 !important;

  color: #64748b !important;

  font-size: 9px !important;
}


#lineModal .form-message.error {

  color: #dc2626 !important;

  background: #fef2f2 !important;

  border-color: #fecaca !important;
}


/* =========================
   ACTION AREA
   ========================= */

#lineModal .modal-actions {

  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  gap: 8px !important;

  margin: 0 !important;

  padding: 14px 0 0 !important;

  border-top: 1px solid #dbe4f0 !important;
}


/* =========================
   BATAL
   ========================= */

#lineModal .secondary-btn {

  min-height: 34px !important;

  padding: 0 14px !important;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 7px !important;

  color: #64748b !important;

  font-size: 9px !important;

  font-weight: 850 !important;
}


#lineModal .secondary-btn:hover {

  background: #f8fafc !important;

  border-color: #bfd0e3 !important;

  color: #334155 !important;
}


/* =========================
   SIMPAN
   ========================= */

#lineModal .primary-btn {

  min-height: 34px !important;

  padding: 0 14px !important;

  background: #2563eb !important;

  border: 1px solid #2563eb !important;

  border-radius: 7px !important;

  color: #ffffff !important;

  font-size: 9px !important;

  font-weight: 850 !important;

  box-shadow:
    0 3px 8px rgba(37, 99, 235, 0.16) !important;
}


#lineModal .primary-btn:hover {

  background: #1d4ed8 !important;

  border-color: #1d4ed8 !important;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 650px) {

  #lineModal {
    padding: 12px !important;
  }

  #lineModal .modal-card {

    width: 100% !important;

    max-height:
      calc(100vh - 24px) !important;

    border-radius: 12px !important;
  }

  #lineModal .modal-head {

    padding: 16px !important;
  }

  #lineModal .line-form {

    grid-template-columns: 1fr !important;

    padding: 16px !important;

    gap: 12px !important;
  }

  #lineModal .line-form label.full,
  #lineModal .line-form .full {

    grid-column: auto !important;
  }

  #lineModal .modal-actions {

    justify-content: stretch !important;
  }

  #lineModal .modal-actions button {

    flex: 1 !important;
  }

}

/* =========================================================
   STEP 26 — SETTINGS ACTION BUTTON FINAL
   ========================================================= */

.settings-table .mini-btn,
.settings-table .edit-btn,
.settings-table .danger-btn {

  min-height: 29px !important;

  padding: 5px 10px !important;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 4px;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 7px !important;

  color: #64748b !important;

  font-family: inherit;

  font-size: 8px !important;

  font-weight: 850 !important;

  letter-spacing: .2px;

  cursor: pointer;

  box-shadow: none !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}


/* =========================================================
   EDIT
   ========================================================= */

.settings-table .edit-btn {

  color: #475569 !important;

  border-color: #dbe4f0 !important;
}


.settings-table .edit-btn:hover {

  background: #eef4ff !important;

  border-color: #bfdbfe !important;

  color: #2563eb !important;

  transform: translateY(-1px);

  box-shadow:
    0 2px 6px rgba(37, 99, 235, 0.08) !important;
}


/* =========================================================
   DELETE
   ========================================================= */

.settings-table .danger-btn {

  color: #ef4444 !important;

  border-color: #fecaca !important;
}


.settings-table .danger-btn:hover {

  background: #fef2f2 !important;

  border-color: #fca5a5 !important;

  color: #dc2626 !important;

  transform: translateY(-1px);

  box-shadow:
    0 2px 6px rgba(239, 68, 68, 0.08) !important;
}


/* =========================================================
   DISABLED
   ========================================================= */

.settings-table .mini-btn:disabled,
.settings-table .edit-btn:disabled,
.settings-table .danger-btn:disabled {

  opacity: .5;

  cursor: not-allowed;

  transform: none !important;

  box-shadow: none !important;
}


/* =========================================================
   ACTION CELL
   ========================================================= */

.settings-table td:last-child {

  white-space: nowrap;

  text-align: left;
}


.settings-table td:last-child .mini-btn,
.settings-table td:last-child .edit-btn,
.settings-table td:last-child .danger-btn {

  margin-right: 4px;
}


.settings-table td:last-child
.mini-btn:last-child,
.settings-table td:last-child
.edit-btn:last-child,
.settings-table td:last-child
.danger-btn:last-child {

  margin-right: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .settings-table td:last-child {

    white-space: nowrap;
  }

}

/* =========================================================
   STEP 27 — SETTINGS STATUS + POSITION FINAL
   ========================================================= */


/* =========================================================
   STATUS BADGE
   ========================================================= */

.settings-table .status-badge {

  display: inline-flex !important;

  align-items: center;
  justify-content: center;

  min-width: 43px;

  min-height: 24px;

  padding: 4px 9px !important;

  border-radius: 999px !important;

  font-size: 8px !important;

  font-weight: 850 !important;

  line-height: 1;

  white-space: nowrap;

  background: #ecfdf3 !important;

  border: 1px solid #bbf7d0 !important;

  color: #16a34a !important;
}


/* Aktif */

.settings-table .status-badge.active,
.settings-table .status-badge.aktif {

  background: #ecfdf3 !important;

  border-color: #bbf7d0 !important;

  color: #16a34a !important;
}


/* Nonaktif */

.settings-table .status-badge.inactive,
.settings-table .status-badge.nonaktif {

  background: #f8fafc !important;

  border-color: #dbe4f0 !important;

  color: #64748b !important;
}


/* =========================================================
   POSITION
   ========================================================= */

.settings-table td.position-cell {

  color: #64748b !important;

  font-size: 9px !important;

  font-weight: 750 !important;

  letter-spacing: .1px;

  white-space: nowrap;
}


/* Jika posisi menggunakan class position */

.settings-table .position {

  display: inline-flex;

  align-items: center;

  min-height: 25px;

  padding: 4px 8px;

  background: #f8fafc;

  border: 1px solid #e5eaf1;

  border-radius: 6px;

  color: #64748b;

  font-size: 8px;

  font-weight: 800;

  white-space: nowrap;
}


/* =========================================================
   POSITION VALUE
   ========================================================= */

.settings-table .position-value {

  color: #64748b !important;

  font-size: 8px !important;

  font-weight: 800 !important;

  font-variant-numeric: tabular-nums;
}


/* =========================================================
   TABLE ALIGNMENT
   ========================================================= */

.settings-table td:nth-child(6) {

  vertical-align: middle;

  white-space: nowrap;
}


.settings-table td:nth-child(7) {

  vertical-align: middle;

  white-space: nowrap;
}


/* =========================================================
   INACTIVE ROW
   ========================================================= */

.settings-table tbody tr.inactive-row {

  opacity: .55;
}


.settings-table tbody tr.inactive-row:hover {

  opacity: .78;
}


/* =========================================================
   STATUS DOT
   ========================================================= */

.settings-table .status-badge::before {

  content: "";

  width: 5px;

  height: 5px;

  margin-right: 5px;

  border-radius: 50%;

  background: #22c55e;
}


.settings-table .status-badge.inactive::before,
.settings-table .status-badge.nonaktif::before {

  background: #94a3b8;
}

/* =========================================================
   STEP 28 — DASHBOARD LIVE LINE CARD FINAL
   ========================================================= */


/* =========================================================
   CLUSTER
   ========================================================= */

.board-section {
  width: 100%;
  margin-top: 18px;
}

.cluster {
  margin-bottom: 22px;
}

.cluster-title {
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 0 0 10px;

  color: #334155;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 1px;
}


/* =========================================================
   CARD GRID
   ========================================================= */

.cards {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;
}


/* =========================================================
   CARD
   ========================================================= */

.card {
  position: relative;

  min-height: 102px;

  padding: 15px 16px 14px 19px;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 11px;

  color: #172033 !important;

  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.04);

  overflow: visible;

  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}


/* Hover */

.card:hover {

  transform: translateY(-2px);

  border-color: #c7d5e5 !important;

  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   STATUS BAR KIRI
   ========================================================= */

.card::before {

  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  border-radius:
    11px 0 0 11px;

  background: #94a3b8;
}


.card.normal::before {
  background: #22c55e;
}

.card.danger::before {
  background: #ef4444;
}

.card.warning::before {
  background: #f59e0b;
}

.card.quality::before {
  background: #3b82f6;
}

.card.offline::before {
  background: #94a3b8;
}


/* =========================================================
   NAMA LINE
   ========================================================= */

.card h3 {

  margin: 0 0 15px;

  color: #172033 !important;

  font-size: 13px;

  line-height: 1.25;

  font-weight: 850;

  letter-spacing: -.1px;
}


/* =========================================================
   STATUS ROW
   ========================================================= */

.card-status-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  flex-wrap: wrap;
}


/* =========================================================
   STATUS BADGE
   ========================================================= */

.card .badge {

  display: inline-flex;

  align-items: center;

  min-height: 26px;

  padding: 5px 10px;

  border-radius: 999px;

  background: #f1f5f9;

  border: 1px solid #e2e8f0;

  color: #64748b;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .3px;
}


/* Normal */

.card.normal .badge {

  background: #ecfdf3;

  border-color: #bbf7d0;

  color: #16a34a;
}


/* Machine */

.card.danger .badge {

  background: #fef2f2;

  border-color: #fecaca;

  color: #dc2626;
}


/* Material */

.card.warning .badge {

  background: #fffbeb;

  border-color: #fde68a;

  color: #d97706;
}


/* Quality */

.card.quality .badge {

  background: #eff6ff;

  border-color: #bfdbfe;

  color: #2563eb;
}


/* Offline */

.card.offline .badge {

  background: #f1f5f9;

  border-color: #dbe4f0;

  color: #64748b;
}


/* =========================================================
   RESET BUTTON
   ========================================================= */

.reset-line-btn {

  appearance: none;

  min-height: 26px;

  padding: 5px 9px;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 7px;

  color: #64748b !important;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .4px;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}


.reset-line-btn:hover {

  background: #eef4ff !important;

  border-color: #bfdbfe !important;

  color: #2563eb !important;

  transform: translateY(-1px);
}


.reset-line-btn:disabled {

  opacity: .55;

  cursor: wait;

  transform: none;
}


/* =========================================================
   PROBLEM PULSE
   ========================================================= */

.card.status-pulse {

  animation:
    cardPulseLight 1.1s ease-out infinite;
}


.card.status-pulse::after {

  content: "";

  position: absolute;

  inset: -4px;

  border: 2px solid var(--pulse-color);

  border-radius: 14px;

  animation:
    ringLight 1.1s ease-out infinite;

  pointer-events: none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

  .cards {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 650px) {

  .cards {

    grid-template-columns: 1fr;

    gap: 10px;
  }

  .card {

    min-height: 96px;

    padding: 14px 15px 13px 18px;
  }

  .card h3 {

    font-size: 12px;
  }

}

/* =========================================================
   STEP 28 — DASHBOARD LIVE LINE CARD FINAL
   ========================================================= */


/* =========================================================
   CLUSTER
   ========================================================= */

.board-section {
  width: 100%;
  margin-top: 18px;
}

.cluster {
  margin-bottom: 22px;
}

.cluster-title {
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 0 0 10px;

  color: #334155;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 1px;
}


/* =========================================================
   CARD GRID
   ========================================================= */

.cards {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;
}


/* =========================================================
   CARD
   ========================================================= */

.card {
  position: relative;

  min-height: 102px;

  padding: 15px 16px 14px 19px;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 11px;

  color: #172033 !important;

  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.04);

  overflow: visible;

  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}


/* Hover */

.card:hover {

  transform: translateY(-2px);

  border-color: #c7d5e5 !important;

  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   STATUS BAR KIRI
   ========================================================= */

.card::before {

  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  border-radius:
    11px 0 0 11px;

  background: #94a3b8;
}


.card.normal::before {
  background: #22c55e;
}

.card.danger::before {
  background: #ef4444;
}

.card.warning::before {
  background: #f59e0b;
}

.card.quality::before {
  background: #3b82f6;
}

.card.offline::before {
  background: #94a3b8;
}


/* =========================================================
   NAMA LINE
   ========================================================= */

.card h3 {

  margin: 0 0 15px;

  color: #172033 !important;

  font-size: 13px;

  line-height: 1.25;

  font-weight: 850;

  letter-spacing: -.1px;
}


/* =========================================================
   STATUS ROW
   ========================================================= */

.card-status-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  flex-wrap: wrap;
}


/* =========================================================
   STATUS BADGE
   ========================================================= */

.card .badge {

  display: inline-flex;

  align-items: center;

  min-height: 26px;

  padding: 5px 10px;

  border-radius: 999px;

  background: #f1f5f9;

  border: 1px solid #e2e8f0;

  color: #64748b;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .3px;
}


/* Normal */

.card.normal .badge {

  background: #ecfdf3;

  border-color: #bbf7d0;

  color: #16a34a;
}


/* Machine */

.card.danger .badge {

  background: #fef2f2;

  border-color: #fecaca;

  color: #dc2626;
}


/* Material */

.card.warning .badge {

  background: #fffbeb;

  border-color: #fde68a;

  color: #d97706;
}


/* Quality */

.card.quality .badge {

  background: #eff6ff;

  border-color: #bfdbfe;

  color: #2563eb;
}


/* Offline */

.card.offline .badge {

  background: #f1f5f9;

  border-color: #dbe4f0;

  color: #64748b;
}


/* =========================================================
   RESET BUTTON
   ========================================================= */

.reset-line-btn {

  appearance: none;

  min-height: 26px;

  padding: 5px 9px;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 7px;

  color: #64748b !important;

  font-size: 8px;

  font-weight: 850;

  letter-spacing: .4px;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}


.reset-line-btn:hover {

  background: #eef4ff !important;

  border-color: #bfdbfe !important;

  color: #2563eb !important;

  transform: translateY(-1px);
}


.reset-line-btn:disabled {

  opacity: .55;

  cursor: wait;

  transform: none;
}


/* =========================================================
   PROBLEM PULSE
   ========================================================= */

.card.status-pulse {

  animation:
    cardPulseLight 1.1s ease-out infinite;
}


.card.status-pulse::after {

  content: "";

  position: absolute;

  inset: -4px;

  border: 2px solid var(--pulse-color);

  border-radius: 14px;

  animation:
    ringLight 1.1s ease-out infinite;

  pointer-events: none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

  .cards {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 650px) {

  .cards {

    grid-template-columns: 1fr;

    gap: 10px;
  }

  .card {

    min-height: 96px;

    padding: 14px 15px 13px 18px;
  }

  .card h3 {

    font-size: 12px;
  }

}

/* =========================================================
   STEP 30 — RESPONSIVE FINAL
   Dashboard / History / Report / Setting
   ========================================================= */

/* ---------- TABLET ---------- */
@media (max-width: 1000px) {

  main {
    padding: 16px 20px 24px !important;
  }

  .topbar {
    padding-left: 68px !important;
    padding-right: 20px !important;
  }

  .company {
    min-width: 0;
  }

  .company h1 {
    font-size: 17px !important;
  }

  .top-actions {
    gap: 7px !important;
  }

  .login-user {
    display: none !important;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .layout-panel .layout-map,
  .layout-panel .map-stage {
    min-height: 380px !important;
  }

  .report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .report-grid {
    grid-template-columns: 1fr !important;
  }

  .history-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

}


/* ---------- MOBILE ---------- */
@media (max-width: 700px) {

  main {
    padding: 12px 14px 20px !important;
  }

  .topbar {
    min-height: 62px !important;
    padding: 10px 14px 10px 60px !important;
  }

  .company h1 {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .top-actions {
    gap: 5px !important;
  }

  .clock-wrap {
    display: none !important;
  }

  .action-btn {
    min-width: 34px !important;
    padding: 8px !important;
  }

  /* KPI */
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .kpi-card {
    min-height: 86px !important;
    padding: 12px !important;
  }

  /* FLOOR TAB */
  .floor-tabs {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  .floor-tab {
    min-width: 96px !important;
    padding: 0 12px !important;
  }

  /* LAYOUT / DENAH */
  .layout-panel .panel-head {
    min-height: 54px !important;
    padding: 12px 14px !important;
  }

  .layout-panel .layout-map,
  .layout-panel .map-stage {
    min-height: 300px !important;
  }

  /* LIVE LINE */
  .cards {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .card {
    min-height: 92px !important;
  }

  /* HISTORY */
  .history-summary {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .history-panel .table-wrap,
  .history-panel .history-table-wrap,
  .settings-panel .table-wrap {
    width: calc(100% - 20px) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  .history-filters {
    grid-template-columns: 1fr !important;
  }

  /* REPORT */
  .report-kpis {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .report-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* SETTINGS */
  .settings-panel .panel-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .settings-panel .panel-head button {
    width: 100% !important;
  }

  /* SIDEBAR */
  .side-menu {
    width: 240px !important;
  }

}


/* ---------- SMALL MOBILE ---------- */
@media (max-width: 480px) {

  .topbar {
    padding-left: 56px !important;
  }

  .company h1 {
    font-size: 12px !important;
  }

  .company small {
    display: none !important;
  }

  .kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .report-kpis {
    grid-template-columns: 1fr !important;
  }

  .floor-tab {
    min-width: 88px !important;
    font-size: 11px !important;
  }

  .layout-panel .layout-map,
  .layout-panel .map-stage {
    min-height: 260px !important;
  }

  .cluster-title {
    font-size: 9px !important;
  }

  .card {
    padding: 13px 14px 12px 17px !important;
  }

  .card h3 {
    font-size: 12px !important;
  }

  .badge {
    font-size: 11px !important;
    padding: 6px 9px !important;
  }

  .reset-line-btn {
    font-size: 9px !important;
    padding: 6px 8px !important;
  }

}

/* =========================================================
   STEP 31 — FOOTER / STATUS BAR FINAL
   ========================================================= */

footer {
  margin-top: 22px !important;
  padding: 10px 32px !important;

  background: #ffffff !important;
  border-top: 1px solid #e5eaf1 !important;

  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 600 !important;

  text-align: right !important;
  box-shadow: none !important;
}


/* Dashboard status */
footer .status,
footer .footer-status {
  color: #64748b !important;
}


/* Status aktif */
footer .status::before,
footer .footer-status::before {
  content: "";
  display: inline-block;

  width: 6px;
  height: 6px;

  margin-right: 6px;

  background: #22c55e;
  border-radius: 50%;

  vertical-align: middle;
}


/* Tablet */
@media (max-width: 1000px) {

  footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

}


/* Mobile */
@media (max-width: 700px) {

  footer {
    margin-top: 18px !important;
    padding: 9px 14px !important;

    font-size: 9px !important;
    text-align: center !important;
  }

}


/* Small mobile */
@media (max-width: 480px) {

  footer {
    padding: 8px 12px !important;
    font-size: 8px !important;
  }

}

/* =========================================================
   STEP 32 — FINAL VISUAL CLEANUP
   ========================================================= */

/* ---------- GLOBAL PANEL ---------- */

.panel,
.layout-panel,
.settings-panel,
.history-panel,
.report-panel {
  background: #ffffff !important;
  border: 1px solid #dbe4f0 !important;
  border-radius: 11px !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.035) !important;
}


/* ---------- PANEL HEADER ---------- */

.panel-head {
  background: #ffffff !important;
  border-bottom: 1px solid #e8edf3 !important;
}

.panel-head h2,
.panel-head h3 {
  color: #172033 !important;
}

.panel-head p,
.panel-head span {
  color: #64748b !important;
}


/* ---------- GENERAL TEXT ---------- */

h1,
h2,
h3,
h4,
strong {
  color: #172033;
}

small,
.muted,
.text-muted {
  color: #64748b !important;
}


/* ---------- BUTTON CONSISTENCY ---------- */

button,
.action-btn,
.primary-btn,
.secondary-btn {
  font-family: Arial, Helvetica, sans-serif !important;
}

.primary-btn {
  background: #2563eb !important;
  border: 1px solid #2563eb !important;
  color: #ffffff !important;
}

.primary-btn:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

.secondary-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

.secondary-btn:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}


/* ---------- INPUT / SELECT ---------- */

input,
select,
textarea {
  font-family: Arial, Helvetica, sans-serif !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.08) !important;
}


/* ---------- SCROLLBAR ---------- */

* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}


/* ---------- LINKS ---------- */

a {
  -webkit-tap-highlight-color: transparent;
}


/* ---------- REMOVE OLD DARK SHADOW ---------- */

.panel,
.card,
.kpi-card,
.layout-panel,
.history-panel,
.report-panel,
.settings-panel {
  text-shadow: none !important;
}


/* ---------- SMOOTH TRANSITION ---------- */

.action-btn,
.primary-btn,
.secondary-btn,
.side-nav-item,
.floor-tab,
.reset-line-btn,
.card {
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease !important;
}


/* ---------- DESKTOP CONTENT WIDTH ---------- */

@media (min-width: 1200px) {

  main {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }

}


/* ---------- VERY SMALL SCREEN ---------- */

@media (max-width: 480px) {

  .panel,
  .layout-panel,
  .settings-panel,
  .history-panel,
  .report-panel {
    border-radius: 9px !important;
  }

  .panel-head {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

}

/* =========================================================
   STEP 32A — TYPOGRAPHY / FONT FINAL
   ========================================================= */

/* ---------- GLOBAL FONT ---------- */

html,
body,
button,
input,
select,
textarea,
table {
  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;
}

body {
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #172033 !important;
}


/* ---------- HEADER ---------- */

.topbar h1 {
  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
  color: #172033 !important;
}

.company small {
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: .35px !important;
  color: #64748b !important;
}


/* ---------- SIDEBAR ---------- */

.side-nav-item {
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.side-nav-item small {
  font-size: 10px !important;
  font-weight: 500 !important;
}


/* ---------- KPI ---------- */

.kpi-card {
  font-size: 12px !important;
}

.kpi-card .kpi-label,
.kpi-card .label {
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: .45px !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}

.kpi-card .kpi-value,
.kpi-card .value {
  font-size: 25px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: -.5px !important;
  color: #172033 !important;
}


/* ---------- FLOOR TAB ---------- */

.floor-tab {
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .15px !important;
}


/* ---------- PANEL TITLE ---------- */

.panel-head h2 {
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -.1px !important;
}

.panel-head h3 {
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

.panel-head p {
  font-size: 11px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  color: #64748b !important;
}


/* ---------- LIVE LINE ---------- */

.cluster-title {
  font-size: 10px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
}

.card h3 {
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -.05px !important;
}

.card .badge {
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .1px !important;
}

.reset-line-btn {
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
}


/* ---------- HISTORY ---------- */

.history-panel h2,
.history-panel h3 {
  font-weight: 700 !important;
}

.history-filters label {
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: .35px !important;
  color: #64748b !important;
  text-transform: uppercase !important;
}

.history-filters input,
.history-filters select {
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

.history-summary-card {
  font-size: 12px !important;
}

.history-summary-card .summary-label {
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: .35px !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}

.history-summary-card .summary-value {
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -.35px !important;
  color: #172033 !important;
}


/* ---------- TABLE ---------- */

.history-table th,
.data-table th,
.settings-table th {
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: .35px !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}

.history-table td,
.data-table td,
.settings-table td {
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  color: #334155 !important;
}

.history-table td strong,
.data-table td strong,
.settings-table td strong {
  font-weight: 600 !important;
  color: #172033 !important;
}


/* ---------- REPORT ---------- */

.report-kpis {
  font-size: 12px !important;
}

.report-kpis .kpi-label,
.report-kpis .label {
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: .35px !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}

.report-kpis .kpi-value,
.report-kpis .value {
  font-size: 23px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -.35px !important;
  color: #172033 !important;
}

.report-card h3 {
  font-size: 11px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: .45px !important;
  text-transform: uppercase !important;
  color: #475569 !important;
}


/* ---------- REPORT BAR / DATA ---------- */

.report-breakdown {
  font-size: 11px !important;
}

.report-breakdown strong {
  font-size: 11px !important;
  font-weight: 600 !important;
}

.report-breakdown span {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #64748b !important;
}


/* ---------- SETTINGS ---------- */

.settings-table td,
.settings-table th {
  vertical-align: middle !important;
}

.settings-table td {
  font-size: 11px !important;
}

.settings-table .status-badge {
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .25px !important;
  text-transform: uppercase !important;
}

.settings-table button {
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}


/* ---------- MODAL ---------- */

#lineModal .modal-title {
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -.15px !important;
}

#lineModal .line-form label {
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: .35px !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}

#lineModal .line-form input,
#lineModal .line-form select {
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
}


/* ---------- BUTTON TEXT ---------- */

.primary-btn,
.secondary-btn,
.action-btn {
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: .05px !important;
}


/* ---------- FOOTER ---------- */

footer {
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  letter-spacing: .05px !important;
}


/* ---------- MOBILE TYPOGRAPHY ---------- */

@media (max-width: 700px) {

  .topbar h1 {
    font-size: 14px !important;
  }

  .kpi-card .kpi-value,
  .kpi-card .value {
    font-size: 21px !important;
  }

  .history-summary-card .summary-value {
    font-size: 20px !important;
  }

  .report-kpis .kpi-value,
  .report-kpis .value {
    font-size: 20px !important;
  }

  .card h3 {
    font-size: 12px !important;
  }

  .history-table th,
  .data-table th,
  .settings-table th {
    font-size: 9px !important;
  }

  .history-table td,
  .data-table td,
  .settings-table td {
    font-size: 10px !important;
  }

}

/* =========================================================
   STEP 32B — HISTORY UI FINAL
   REFERENCE BASED
   ========================================================= */


/* =========================================================
   HISTORY PAGE
   ========================================================= */

.history-panel {
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  border: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}


/* =========================================================
   FILTER PANEL
   ========================================================= */

.history-filters {
  display: grid !important;

  grid-template-columns:
    160px
    160px
    160px
    auto !important;

  gap: 14px !important;

  align-items: end !important;

  width: 100% !important;

  margin: 0 0 16px !important;
  padding: 18px !important;

  background: #ffffff !important;

  border: 1px solid #d6e0ec !important;

  border-radius: 14px !important;

  box-shadow: none !important;
}


/* ---------- FILTER GROUP ---------- */

.history-filter-group {
  display: flex !important;

  flex-direction: column !important;

  gap: 6px !important;
}


/* ---------- FILTER LABEL ---------- */

.history-filter-group label {
  margin: 0 !important;

  color: #475569 !important;

  font-size: 10px !important;

  line-height: 1.2 !important;

  font-weight: 500 !important;

  letter-spacing: 0 !important;

  text-transform: none !important;
}


/* ---------- FILTER INPUT ---------- */

.history-filter-group input,
.history-filter-group select {

  width: 100% !important;

  height: 34px !important;

  padding: 0 10px !important;

  background: #ffffff !important;

  border: 1px solid #d6e0ec !important;

  border-radius: 6px !important;

  color: #172033 !important;

  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif !important;

  font-size: 11px !important;

  font-weight: 400 !important;

  outline: none !important;

  box-shadow: none !important;
}


.history-filter-group input:hover,
.history-filter-group select:hover {
  border-color: #b9c7d8 !important;
}


.history-filter-group input:focus,
.history-filter-group select:focus {

  border-color: #93b4df !important;

  box-shadow:
    0 0 0 2px rgba(37,99,235,.06) !important;
}


/* =========================================================
   RESET FILTER BUTTON
   ========================================================= */

.history-filters .secondary-btn {

  height: 34px !important;

  padding: 0 14px !important;

  background: #ffffff !important;

  border: 1px solid #d6e0ec !important;

  border-radius: 6px !important;

  color: #172033 !important;

  font-size: 10px !important;

  font-weight: 500 !important;

  letter-spacing: 0 !important;

  white-space: nowrap !important;

  box-shadow: none !important;
}


.history-filters .secondary-btn:hover {

  background: #f8fafc !important;

  border-color: #b9c7d8 !important;

  color: #172033 !important;
}


/* =========================================================
   HISTORY SUMMARY
   ========================================================= */

.history-summary {

  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 12px !important;

  width: 100% !important;

  margin: 0 0 16px !important;

  padding: 0 !important;
}


/* =========================================================
   SUMMARY CARD
   ========================================================= */

.history-summary-card {

  min-height: 84px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  padding: 13px 17px !important;

  background: #ffffff !important;

  border: 1px solid #d6e0ec !important;

  border-left: 3px solid #2563eb !important;

  border-radius: 12px !important;

  box-shadow: none !important;
}


/* Total Downtime */

.history-summary-card:nth-child(2) {

  border-left-color: #cbd5e1 !important;

}


/* Event Aktif */

.history-summary-card:nth-child(3) {

  border-left-color: #ef4444 !important;

}


/* ---------- SUMMARY LABEL ---------- */

.history-summary-card small {

  display: block !important;

  margin: 0 0 7px !important;

  color: #475569 !important;

  font-size: 10px !important;

  line-height: 1.2 !important;

  font-weight: 500 !important;

  letter-spacing: 0 !important;

  text-transform: none !important;
}


/* ---------- SUMMARY VALUE ---------- */

.history-summary-card strong {

  display: block !important;

  color: #172033 !important;

  font-size: 22px !important;

  line-height: 1.1 !important;

  font-weight: 700 !important;

  letter-spacing: -.4px !important;
}


/* Event aktif value */

.history-summary-card:nth-child(3) strong {

  color: #dc2626 !important;

}


/* =========================================================
   HISTORY TABLE CONTAINER
   ========================================================= */

.history-table-wrap {

  width: 100% !important;

  margin: 0 !important;

  padding: 0 !important;

  overflow-x: auto !important;

  background: #ffffff !important;

  border: 1px solid #d6e0ec !important;

  border-radius: 12px !important;

  box-shadow: none !important;
}


/* =========================================================
   TABLE
   ========================================================= */

.history-table {

  width: 100% !important;

  min-width: 760px !important;

  border-collapse: collapse !important;

  background: #ffffff !important;

  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif !important;
}


/* =========================================================
   TABLE HEADER
   ========================================================= */

.history-table th {

  height: 38px !important;

  padding: 0 17px !important;

  background: #f8fafc !important;

  color: #475569 !important;

  border-bottom: 1px solid #d6e0ec !important;

  text-align: left !important;

  font-size: 10px !important;

  line-height: 1 !important;

  font-weight: 600 !important;

  letter-spacing: 0 !important;

  text-transform: uppercase !important;
}


/* =========================================================
   TABLE DATA
   ========================================================= */

.history-table td {

  height: 46px !important;

  padding: 0 17px !important;

  background: #ffffff !important;

  color: #172033 !important;

  border-bottom: 1px solid #e1e7ef !important;

  font-size: 11px !important;

  line-height: 1.3 !important;

  font-weight: 400 !important;
}


/* Last row */

.history-table tbody tr:last-child td {

  border-bottom: none !important;

}


/* Hover */

.history-table tbody tr:hover td {

  background: #f8fafc !important;

}


/* =========================================================
   ACTIVE ROW
   ========================================================= */

.history-table tbody tr:has(.history-state.active) td {

  background: #fdecec !important;

}


.history-table tbody tr:has(.history-state.active):hover td {

  background: #fce3e3 !important;

}


/* =========================================================
   PROBLEM BADGE
   ========================================================= */

.history-problem {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  min-width: 54px !important;

  padding: 4px 9px !important;

  border-radius: 12px !important;

  font-size: 10px !important;

  line-height: 1 !important;

  font-weight: 500 !important;

  border: none !important;
}


/* Quality */

.history-problem.quality {

  background: #e8f0ff !important;

  color: #2563eb !important;

}


/* Material */

.history-problem.material {

  background: #fff3df !important;

  color: #d97706 !important;

}


/* Machine */

.history-problem.machine {

  background: #fde8e8 !important;

  color: #dc2626 !important;

}


/* =========================================================
   STATUS
   ========================================================= */

.history-state {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  padding: 5px 10px !important;

  border-radius: 12px !important;

  font-size: 10px !important;

  line-height: 1 !important;

  font-weight: 500 !important;

  border: none !important;
}


/* Status dot */

.history-state::before {

  content: "";

  width: 6px;

  height: 6px;

  flex: 0 0 6px;

  border-radius: 50%;

}


/* Selesai */

.history-state.closed {

  background: #e8f7ef !important;

  color: #059669 !important;

}


.history-state.closed::before {

  background: #10b981 !important;

}


/* Aktif */

.history-state.active {

  background: #fdecec !important;

  color: #dc2626 !important;

}


.history-state.active::before {

  background: #ef4444 !important;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .history-filters {

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

  }

}


@media (max-width: 700px) {

  .history-filters {

    grid-template-columns: 1fr !important;

    gap: 10px !important;

  }


  .history-summary {

    grid-template-columns: 1fr !important;

  }


  .history-summary-card {

    min-height: 76px !important;

  }


  .history-summary-card strong {

    font-size: 20px !important;

  }

}

/* =========================================================
   STEP 32C — HISTORY LAYOUT CORRECTION
   ========================================================= */


/* =========================================================
   1. HILANGKAN HEADER "HISTORY ANDON"
   ========================================================= */

.history-panel .panel-head {
  display: none !important;
}


/* =========================================================
   2. FILTER — UKURAN COMPACT
   ========================================================= */

.history-panel .history-filters {

  display: grid !important;

  grid-template-columns:
    160px
    160px
    160px
    92px !important;

  width: 100% !important;

  min-height: 76px !important;

  margin: 0 0 16px !important;

  padding: 14px 18px !important;

  gap: 14px !important;

  align-items: end !important;

  background: #ffffff !important;

  border: 1px solid #d6e0ec !important;

  border-radius: 12px !important;

  box-sizing: border-box !important;

}


/* Filter group */

.history-panel .history-filter-group {

  width: 100% !important;

  min-width: 0 !important;

  gap: 5px !important;

}


/* Label */

.history-panel .history-filter-group label {

  font-size: 9px !important;

  line-height: 1.2 !important;

  font-weight: 500 !important;

  color: #475569 !important;

  letter-spacing: 0 !important;

  text-transform: none !important;

}


/* Input */

.history-panel .history-filter-group input,
.history-panel .history-filter-group select {

  width: 100% !important;

  height: 34px !important;

  min-height: 34px !important;

  padding: 0 10px !important;

  box-sizing: border-box !important;

  background: #ffffff !important;

  color: #172033 !important;

  border: 1px solid #d6e0ec !important;

  border-radius: 6px !important;

  font-size: 11px !important;

  font-weight: 400 !important;

}


/* Reset */

.history-panel .history-filters .secondary-btn {

  width: 92px !important;

  min-width: 92px !important;

  max-width: 92px !important;

  height: 34px !important;

  min-height: 34px !important;

  padding: 0 !important;

  margin: 0 !important;

  box-sizing: border-box !important;

  background: #ffffff !important;

  color: #172033 !important;

  border: 1px solid #d6e0ec !important;

  border-radius: 6px !important;

  font-size: 10px !important;

  font-weight: 500 !important;

  letter-spacing: 0 !important;

}


/* =========================================================
   3. SUMMARY — LEBIH RAPAT
   ========================================================= */

.history-panel .history-summary {

  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 12px !important;

  width: 100% !important;

  margin: 0 0 16px !important;

  padding: 0 !important;

}


/* KPI */

.history-panel .history-summary-card {

  height: 82px !important;

  min-height: 82px !important;

  box-sizing: border-box !important;

  padding: 12px 17px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  background: #ffffff !important;

  border: 1px solid #d6e0ec !important;

  border-left: 3px solid #2563eb !important;

  border-radius: 11px !important;

  box-shadow: none !important;

}


/* Downtime */

.history-panel .history-summary-card:nth-child(2) {

  border-left-color: #cbd5e1 !important;

}


/* Active */

.history-panel .history-summary-card:nth-child(3) {

  border-left-color: #ef4444 !important;

}


/* Label */

.history-panel .history-summary-card small {

  margin: 0 0 6px !important;

  font-size: 10px !important;

  line-height: 1.2 !important;

  font-weight: 500 !important;

  color: #475569 !important;

}


/* Value */

.history-panel .history-summary-card strong {

  font-size: 22px !important;

  line-height: 1 !important;

  font-weight: 700 !important;

  letter-spacing: -.3px !important;

  color: #172033 !important;

}


/* Active value */

.history-panel .history-summary-card:nth-child(3) strong {

  color: #dc2626 !important;

}


/* =========================================================
   4. TABLE — LEBIH DEKAT KE KPI
   ========================================================= */

.history-panel .history-table-wrap {

  width: 100% !important;

  margin: 0 !important;

  padding: 0 !important;

  box-sizing: border-box !important;

  overflow-x: auto !important;

  background: #ffffff !important;

  border: 1px solid #d6e0ec !important;

  border-radius: 11px !important;

  box-shadow: none !important;

}


/* Table */

.history-panel .history-table {

  width: 100% !important;

  min-width: 760px !important;

  border-collapse: collapse !important;

  table-layout: auto !important;

}


/* Header */

.history-panel .history-table th {

  height: 38px !important;

  padding: 0 17px !important;

  background: #f8fafc !important;

  color: #475569 !important;

  border-bottom: 1px solid #d6e0ec !important;

  font-size: 10px !important;

  line-height: 1 !important;

  font-weight: 600 !important;

  letter-spacing: 0 !important;

}


/* Data */

.history-panel .history-table td {

  height: 46px !important;

  padding: 0 17px !important;

  background: #ffffff !important;

  color: #172033 !important;

  border-bottom: 1px solid #e1e7ef !important;

  font-size: 11px !important;

  line-height: 1.3 !important;

  font-weight: 400 !important;

}


/* Last row */

.history-panel .history-table tbody tr:last-child td {

  border-bottom: none !important;

}


/* Active row */

.history-panel .history-table tbody tr:has(.history-state.active) td {

  background: #fdecec !important;

}


/* =========================================================
   5. BADGE
   ========================================================= */

.history-panel .history-problem {

  font-size: 10px !important;

  font-weight: 500 !important;

  padding: 4px 9px !important;

  border-radius: 12px !important;

}


/* Status */

.history-panel .history-state {

  font-size: 10px !important;

  font-weight: 500 !important;

  padding: 5px 10px !important;

  border-radius: 12px !important;

}


/* =========================================================
   6. MOBILE
   ========================================================= */

@media (max-width: 900px) {

  .history-panel .history-filters {

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

  }

  .history-panel .history-filters .secondary-btn {

    width: 100% !important;

    max-width: none !important;

  }

}


@media (max-width: 600px) {

  .history-panel .history-filters {

    grid-template-columns: 1fr !important;

    gap: 9px !important;

  }

  .history-panel .history-summary {

    grid-template-columns: 1fr !important;

  }

}

/* =========================================================
   STEP 32D — HISTORY CONTENT WIDTH FINAL
   ========================================================= */

.history-panel {

  width: 100% !important;

  max-width: 1135px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  margin-top: 0 !important;

}


/* Filter */

.history-panel .history-filters {

  width: 100% !important;

  box-sizing: border-box !important;

}


/* KPI */

.history-panel .history-summary {

  width: 100% !important;

}


/* Table */

.history-panel .history-table-wrap {

  width: 100% !important;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

  .history-panel {

    max-width: calc(100% - 40px) !important;

  }

}


@media (max-width: 700px) {

  .history-panel {

    max-width: calc(100% - 24px) !important;

  }

}

/* =========================================================
   STEP 32E — HISTORY KPI FINAL DESIGN
   ========================================================= */

.history-panel .history-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;

  width: 100% !important;

  margin: 0 0 14px !important;
  padding: 0 !important;
}


/* =========================================================
   KPI CARD
   ========================================================= */

.history-panel .history-summary-card {
  position: relative !important;

  height: 72px !important;
  min-height: 72px !important;

  padding: 11px 16px 10px 18px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  background: #f9fbfd !important;

  border: 1px solid #dbe4ee !important;

  border-left: 3px solid #2563eb !important;

  border-radius: 10px !important;

  box-shadow: none !important;

  overflow: hidden !important;
}


/* =========================================================
   LEFT ACCENT
   ========================================================= */

.history-panel .history-summary-card:nth-child(1) {
  border-left-color: #2563eb !important;
}

.history-panel .history-summary-card:nth-child(2) {
  border-left-color: #f59e0b !important;
}

.history-panel .history-summary-card:nth-child(3) {
  border-left-color: #ef4444 !important;
}


/* =========================================================
   LABEL
   ========================================================= */

.history-panel .history-summary-card small {
  display: block !important;

  margin: 0 0 4px !important;

  color: #64748b !important;

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size: 9px !important;

  line-height: 1.2 !important;

  font-weight: 600 !important;

  letter-spacing: .2px !important;

  text-transform: uppercase !important;
}


/* =========================================================
   VALUE
   ========================================================= */

.history-panel .history-summary-card strong {
  display: block !important;

  margin: 0 !important;

  color: #172033 !important;

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size: 21px !important;

  line-height: 1 !important;

  font-weight: 700 !important;

  letter-spacing: -.4px !important;
}


/* Total Kejadian */

.history-panel
.history-summary-card:nth-child(1)
strong {
  color: #2563eb !important;
}


/* Total Downtime */

.history-panel
.history-summary-card:nth-child(2)
strong {
  color: #172033 !important;
}


/* Event Aktif */

.history-panel
.history-summary-card:nth-child(3)
strong {
  color: #dc2626 !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.history-panel .history-summary-card {
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease !important;
}

.history-panel .history-summary-card:hover {
  border-color: #c8d4e3 !important;

  box-shadow:
    0 3px 10px rgba(15,23,42,.045) !important;

  transform: translateY(-1px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

  .history-panel .history-summary {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .history-panel .history-summary-card {
    height: 68px !important;
    min-height: 68px !important;
  }

}

/* =========================================================
   STEP 32G — REMOVE WHITE GAP BETWEEN HISTORY KPI
   ========================================================= */

.history-panel .history-summary {
  background: transparent !important;

  gap: 0 !important;

  padding: 0 !important;

  margin-left: 18px !important;
  margin-right: 18px !important;
}


/* Card pertama */

.history-panel .history-summary-card {
  border-radius: 0 !important;

  margin: 0 !important;
}


/* Card pertama */

.history-panel .history-summary-card:first-child {
  border-radius: 10px 0 0 10px !important;
}


/* Card terakhir */

.history-panel .history-summary-card:last-child {
  border-radius: 0 10px 10px 0 !important;
}


/* Hilangkan garis ganda antar card */

.history-panel .history-summary-card + .history-summary-card {
  border-left: none !important;
}

/* =========================================================
   STEP 32G — HISTORY KPI RETURN TO INDIVIDUAL CARDS
   ========================================================= */

.history-panel .history-summary {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 12px !important;

  width: 100% !important;

  margin: 0 0 16px !important;

  padding: 0 !important;

  background: transparent !important;

  overflow: visible !important;
}


/* =========================
   INDIVIDUAL CARD
   ========================= */

.history-panel .history-summary-card {

  position: relative !important;

  width: 100% !important;

  min-width: 0 !important;

  max-width: 100% !important;

  height: 82px !important;

  min-height: 82px !important;

  margin: 0 !important;

  padding: 12px 17px !important;

  box-sizing: border-box !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  background: #ffffff !important;

  border: 1px solid #d6e0ec !important;

  border-radius: 12px !important;

  box-shadow: none !important;

  overflow: hidden !important;
}


/* =========================
   LEFT ACCENT
   ========================= */

.history-panel .history-summary-card:nth-child(1) {
  border-left: 3px solid #2563eb !important;
}

.history-panel .history-summary-card:nth-child(2) {
  border-left: 3px solid #f59e0b !important;
}

.history-panel .history-summary-card:nth-child(3) {
  border-left: 3px solid #ef4444 !important;
}


/* =========================
   JANGAN SAMBUNGKAN CARD
   ========================= */

.history-panel
.history-summary-card
+ .history-summary-card {

  border-left: 1px solid #d6e0ec !important;

}


/* Kembalikan accent masing-masing */

.history-panel
.history-summary-card:nth-child(2) {

  border-left: 3px solid #f59e0b !important;

}

.history-panel
.history-summary-card:nth-child(3) {

  border-left: 3px solid #ef4444 !important;

}


/* =========================
   LABEL
   ========================= */

.history-panel .history-summary-card small {

  margin: 0 0 6px !important;

  color: #475569 !important;

  font-size: 10px !important;

  line-height: 1.2 !important;

  font-weight: 500 !important;

  letter-spacing: 0 !important;

  text-transform: none !important;
}


/* =========================
   VALUE
   ========================= */

.history-panel .history-summary-card strong {

  margin: 0 !important;

  color: #172033 !important;

  font-size: 22px !important;

  line-height: 1 !important;

  font-weight: 700 !important;

  letter-spacing: -.3px !important;
}


/* Warna angka */

.history-panel
.history-summary-card:nth-child(1)
strong {

  color: #2563eb !important;

}

.history-panel
.history-summary-card:nth-child(2)
strong {

  color: #172033 !important;

}

.history-panel
.history-summary-card:nth-child(3)
strong {

  color: #dc2626 !important;

}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px) {

  .history-panel .history-summary {

    grid-template-columns: 1fr !important;

    gap: 9px !important;

  }

}

/* =========================================================
   STEP 32H — HISTORY KPI ROUNDED + FILTER SELECT
   ========================================================= */


/* =========================================================
   1. KPI — PAKSA SEMUA SUDUT ROUNDED
   ========================================================= */

.history-panel .history-summary-card {
  border-radius: 12px !important;

  overflow: hidden !important;

  position: relative !important;
}


/* Total Kejadian */

.history-panel .history-summary-card:nth-child(1) {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;

  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;

  border-left: 3px solid #2563eb !important;
}


/* Total Downtime */

.history-panel .history-summary-card:nth-child(2) {
  border-radius: 12px !important;

  border-left: 3px solid #f59e0b !important;
}


/* Event Aktif */

.history-panel .history-summary-card:nth-child(3) {
  border-radius: 12px !important;

  border-left: 3px solid #ef4444 !important;
}


/* =========================================================
   2. FILTER SELECT
   ========================================================= */

.history-panel .history-filter-group select {

  appearance: none !important;

  -webkit-appearance: none !important;

  -moz-appearance: none !important;

  width: 100% !important;

  height: 34px !important;

  padding: 0 30px 0 11px !important;

  background-color: #ffffff !important;

  background-image:
    linear-gradient(45deg, transparent 50%, #475569 50%),
    linear-gradient(135deg, #475569 50%, transparent 50%) !important;

  background-position:
    calc(100% - 13px) 14px,
    calc(100% - 8px) 14px !important;

  background-size:
    5px 5px,
    5px 5px !important;

  background-repeat: no-repeat !important;

  border: 1px solid #d6e0ec !important;

  border-radius: 6px !important;

  color: #172033 !important;

  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif !important;

  font-size: 11px !important;

  font-weight: 400 !important;

  cursor: pointer !important;

  outline: none !important;

  box-shadow: none !important;
}


/* Hover */

.history-panel .history-filter-group select:hover {

  border-color: #b9c7d8 !important;

}


/* Focus */

.history-panel .history-filter-group select:focus {

  border-color: #2563eb !important;

  box-shadow:
    0 0 0 2px rgba(37,99,235,.08) !important;

}


/* =========================================================
   3. OPTION
   ========================================================= */

.history-panel .history-filter-group select option {

  background: #ffffff !important;

  color: #172033 !important;

  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif !important;

  font-size: 11px !important;

  font-weight: 400 !important;

}


/* Selected option */

.history-panel .history-filter-group select option:checked {

  background: #2563eb !important;

  color: #ffffff !important;

}


/* =========================================================
   4. DATE INPUT
   ========================================================= */

.history-panel .history-filter-group input[type="date"] {

  height: 34px !important;

  padding: 0 10px !important;

  background: #ffffff !important;

  border: 1px solid #d6e0ec !important;

  border-radius: 6px !important;

  color: #172033 !important;

  font-size: 11px !important;

  font-weight: 400 !important;

  box-sizing: border-box !important;

}


/* Calendar icon */

.history-panel
.history-filter-group
input[type="date"]::-webkit-calendar-picker-indicator {

  cursor: pointer;

  opacity: .8;

}


/* =========================================================
   5. RESET BUTTON
   ========================================================= */

.history-panel .history-filters .secondary-btn {

  height: 34px !important;

  padding: 0 12px !important;

  background: #ffffff !important;

  border: 1px solid #d6e0ec !important;

  border-radius: 6px !important;

  color: #172033 !important;

  font-size: 10px !important;

  font-weight: 500 !important;

  cursor: pointer !important;

}


/* Hover */

.history-panel .history-filters .secondary-btn:hover {

  background: #f8fafc !important;

  border-color: #b9c7d8 !important;

}

/* =========================================================
   STEP 32I — HISTORY TABLE DESIGN
   ========================================================= */

.history-panel .history-table-wrap {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #ffffff !important;

  border: 1px solid #d6e0ec !important;

  border-radius: 11px !important;

  overflow-x: auto !important;

  box-shadow: none !important;
}


/* =========================================================
   TABLE
   ========================================================= */

.history-panel .history-table {

  width: 100% !important;

  min-width: 760px !important;

  border-collapse: separate !important;

  border-spacing: 0 !important;

  background: #ffffff !important;

  table-layout: auto !important;

}


/* =========================================================
   HEADER
   ========================================================= */

.history-panel .history-table thead th {

  height: 38px !important;

  padding: 0 17px !important;

  background: #f8fafc !important;

  color: #475569 !important;

  border-bottom: 1px solid #d6e0ec !important;

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size: 10px !important;

  line-height: 1 !important;

  font-weight: 600 !important;

  letter-spacing: .05px !important;

  text-align: left !important;

  white-space: nowrap !important;
}


/* =========================================================
   BODY
   ========================================================= */

.history-panel .history-table tbody td {

  height: 45px !important;

  padding: 0 17px !important;

  background: #ffffff !important;

  color: #334155 !important;

  border-bottom: 1px solid #e5eaf1 !important;

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size: 11px !important;

  line-height: 1.3 !important;

  font-weight: 400 !important;

  white-space: nowrap !important;

  vertical-align: middle !important;
}


/* Last row */

.history-panel .history-table tbody tr:last-child td {

  border-bottom: none !important;

}


/* =========================================================
   HOVER
   ========================================================= */

.history-panel .history-table tbody tr:hover td {

  background: #f8fafc !important;

}


/* =========================================================
   ACTIVE ROW
   ========================================================= */

.history-panel
.history-table
tbody
tr:has(.history-state.active)
td {

  background: #fdecec !important;

}


.history-panel
.history-table
tbody
tr:has(.history-state.active):hover
td {

  background: #fce5e5 !important;

}


/* =========================================================
   PROBLEM BADGE
   ========================================================= */

.history-panel .history-problem {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  min-width: 52px !important;

  height: 22px !important;

  padding: 0 9px !important;

  border-radius: 11px !important;

  border: none !important;

  font-size: 10px !important;

  line-height: 1 !important;

  font-weight: 500 !important;

  white-space: nowrap !important;
}


/* Quality */

.history-panel .history-problem.quality {

  background: #e8f0ff !important;

  color: #2563eb !important;

}


/* Material */

.history-panel .history-problem.material {

  background: #fff2dc !important;

  color: #d97706 !important;

}


/* Machine */

.history-panel .history-problem.machine {

  background: #fde8e8 !important;

  color: #dc2626 !important;

}


/* =========================================================
   STATUS BADGE
   ========================================================= */

.history-panel .history-state {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  height: 22px !important;

  padding: 0 10px !important;

  border-radius: 11px !important;

  border: none !important;

  font-size: 10px !important;

  line-height: 1 !important;

  font-weight: 500 !important;

  white-space: nowrap !important;
}


/* Status dot */

.history-panel .history-state::before {

  content: "";

  width: 6px;

  height: 6px;

  flex: 0 0 6px;

  border-radius: 50%;

}


/* Selesai */

.history-panel .history-state.closed {

  background: #e8f7ef !important;

  color: #059669 !important;

}


.history-panel .history-state.closed::before {

  background: #10b981 !important;

}


/* Aktif */

.history-panel .history-state.active {

  background: #fdecec !important;

  color: #dc2626 !important;

}


.history-panel .history-state.active::before {

  background: #ef4444 !important;

}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .history-panel .history-table thead th {

    padding: 0 13px !important;

    font-size: 9px !important;

  }

  .history-panel .history-table tbody td {

    padding: 0 13px !important;

    font-size: 10px !important;

  }

}

/* =========================================================
   STEP 32J — HISTORY TABLE FINISHING
   ========================================================= */


/* =========================================================
   TABLE CONTAINER
   ========================================================= */

.history-panel .history-table-wrap {
  background: #ffffff !important;

  border: 1px solid #d7e0eb !important;

  border-radius: 11px !important;

  overflow: hidden !important;

  box-shadow: none !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.history-panel .history-table thead th {

  height: 38px !important;

  padding: 0 18px !important;

  background: #f8fafc !important;

  color: #475569 !important;

  border-bottom: 1px solid #d7e0eb !important;

  font-size: 10px !important;

  font-weight: 600 !important;

  line-height: 1 !important;

  letter-spacing: .05px !important;

  text-transform: uppercase !important;

  white-space: nowrap !important;
}


/* =========================================================
   BODY
   ========================================================= */

.history-panel .history-table tbody td {

  height: 46px !important;

  padding: 0 18px !important;

  background: #ffffff !important;

  color: #334155 !important;

  border-bottom: 1px solid #e7ecf2 !important;

  font-size: 11px !important;

  font-weight: 400 !important;

  line-height: 1.3 !important;

  vertical-align: middle !important;

  white-space: nowrap !important;
}


/* Last row */

.history-panel .history-table tbody tr:last-child td {
  border-bottom: none !important;
}


/* =========================================================
   NORMAL ROW HOVER
   ========================================================= */

.history-panel
.history-table
tbody
tr:not(:has(.history-state.active)):hover
td {

  background: #f8fafc !important;

}


/* =========================================================
   ACTIVE ANDON ROW
   ========================================================= */

/*
   Kalau Andon masih aktif:
   seluruh row menjadi merah muda.
*/

.history-panel
.history-table
tbody
tr:has(.history-state.active)
td {

  background: #fdecec !important;

  border-bottom-color: #f5d2d2 !important;

}


/* Active row hover */

.history-panel
.history-table
tbody
tr:has(.history-state.active):hover
td {

  background: #fde4e4 !important;

}


/* =========================================================
   ACTIVE ROW TEXT
   ========================================================= */

.history-panel
.history-table
tbody
tr:has(.history-state.active)
td {

  color: #334155 !important;

}


/* =========================================================
   PROBLEM BADGE
   ========================================================= */

.history-panel .history-problem {

  min-width: 52px !important;

  height: 22px !important;

  padding: 0 9px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 11px !important;

  font-size: 10px !important;

  line-height: 1 !important;

  font-weight: 500 !important;

  white-space: nowrap !important;

  border: none !important;
}


/* Quality */

.history-panel .history-problem.quality {

  background: #e8f0ff !important;

  color: #2563eb !important;

}


/* Material */

.history-panel .history-problem.material {

  background: #fff2dc !important;

  color: #d97706 !important;

}


/* Machine */

.history-panel .history-problem.machine {

  background: #fde8e8 !important;

  color: #dc2626 !important;

}


/* =========================================================
   STATUS
   ========================================================= */

.history-panel .history-state {

  height: 22px !important;

  padding: 0 10px !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  border-radius: 11px !important;

  font-size: 10px !important;

  line-height: 1 !important;

  font-weight: 500 !important;

  white-space: nowrap !important;

  border: none !important;
}


/* Dot */

.history-panel .history-state::before {

  content: "";

  width: 6px;

  height: 6px;

  flex: 0 0 6px;

  border-radius: 50%;

}


/* Selesai */

.history-panel .history-state.closed {

  background: #e8f7ef !important;

  color: #059669 !important;

}


.history-panel .history-state.closed::before {

  background: #10b981 !important;

}


/* Aktif */

.history-panel .history-state.active {

  background: #fdecec !important;

  color: #dc2626 !important;

}


.history-panel .history-state.active::before {

  background: #ef4444 !important;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

  .history-panel .history-table thead th {

    padding: 0 13px !important;

    font-size: 9px !important;

  }

  .history-panel .history-table tbody td {

    padding: 0 13px !important;

    font-size: 10px !important;

  }

}

/* =========================================================
   STEP 32K — TYPOGRAPHY RESET
   CLEAN / MODERN / PROFESSIONAL
   ========================================================= */


/* =========================================================
   GLOBAL FONT
   ========================================================= */

html,
body,
button,
input,
select,
textarea {
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;
}


/* Jangan pakai bold berlebihan */

body {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.topbar h1 {

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 17px !important;

  font-weight: 600 !important;

  line-height: 1.25 !important;

  letter-spacing: -.15px !important;

}


.company {

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

}


.company small {

  font-size: 10px !important;

  font-weight: 600 !important;

  letter-spacing: .7px !important;

}


.top-actions {

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

}


.login-user,
.action-btn,
.clock,
.date {

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

}


.clock {

  font-size: 16px !important;

  font-weight: 600 !important;

  letter-spacing: -.2px !important;

}


.date {

  font-size: 9px !important;

  font-weight: 400 !important;

  color: #94a3b8 !important;

}


/* =========================================================
   SIDEBAR
   ========================================================= */

.side-menu,
.side-nav-item {

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

}


.side-nav-item {

  font-size: 13px !important;

  font-weight: 500 !important;

  letter-spacing: 0 !important;

}


/* Active */

.side-nav-item.active {

  font-weight: 600 !important;

}


/* =========================================================
   FLOOR TAB
   ========================================================= */

.floor-tab {

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 11px !important;

  font-weight: 500 !important;

  letter-spacing: 0 !important;

}


/* Active tab */

.floor-tab.active {

  font-weight: 600 !important;

}


/* =========================================================
   KPI
   ========================================================= */

.kpi-card {

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

}


.kpi-card .kpi-label,
.kpi-card .label {

  font-size: 10px !important;

  font-weight: 500 !important;

  line-height: 1.3 !important;

  letter-spacing: .15px !important;

  text-transform: none !important;

  color: #64748b !important;

}


.kpi-card .kpi-value,
.kpi-card .value {

  font-size: 24px !important;

  font-weight: 600 !important;

  line-height: 1.1 !important;

  letter-spacing: -.5px !important;

  color: #172033 !important;

}


/* =========================================================
   PANEL TITLE
   ========================================================= */

.panel-head h2 {

  font-size: 14px !important;

  font-weight: 600 !important;

  line-height: 1.3 !important;

  letter-spacing: -.1px !important;

}


.panel-head h3 {

  font-size: 13px !important;

  font-weight: 600 !important;

  line-height: 1.3 !important;

}


.panel-head p {

  font-size: 11px !important;

  font-weight: 400 !important;

  line-height: 1.45 !important;

  color: #64748b !important;

}


/* =========================================================
   CLUSTER TITLE
   ========================================================= */

.cluster-title {

  font-size: 10px !important;

  font-weight: 600 !important;

  line-height: 1.3 !important;

  letter-spacing: .65px !important;

  color: #64748b !important;

}


/* =========================================================
   LIVE LINE CARD
   ========================================================= */

.card {

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

}


.card h3 {

  font-size: 13px !important;

  font-weight: 600 !important;

  line-height: 1.3 !important;

  letter-spacing: 0 !important;

  color: #172033 !important;

}


.card .badge {

  font-size: 10px !important;

  font-weight: 500 !important;

  line-height: 1 !important;

  letter-spacing: 0 !important;

}


.reset-line-btn {

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 9px !important;

  font-weight: 500 !important;

  letter-spacing: .15px !important;

}


/* =========================================================
   MAP / DENAH
   ========================================================= */

.layout-panel,
.layout-panel * {

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

}


.layout-panel .panel-head h2 {

  font-weight: 600 !important;

}


/* =========================================================
   SETTINGS / GENERAL BUTTON
   ========================================================= */

button {

  font-weight: 500 !important;

}


/* =========================================================
   FOOTER
   ========================================================= */

footer {

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 10px !important;

  font-weight: 400 !important;

  letter-spacing: 0 !important;

}


/* =========================================================
   REMOVE EXCESSIVE BOLD FROM COMMON ELEMENTS
   ========================================================= */

strong,
b {

  font-weight: 600;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .topbar h1 {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .clock {
    font-size: 14px !important;
  }

  .kpi-card .kpi-value,
  .kpi-card .value {
    font-size: 21px !important;
  }

  .card h3 {
    font-size: 12px !important;
  }

}

/* HILANGKAN SUBTITLE HEADER/PANEL */

.topbar .subtitle,
.topbar .page-subtitle,
.panel-head p {
  display: none !important;
}

/* =========================================================
   REMOVE CARD SUBTITLE
   ========================================================= */

/* Subtitle pada card KPI */
.kpi-card .subtitle,
.kpi-card .card-subtitle,
.kpi-card small {
  display: none !important;
}


/* Subtitle pada card Layout / Denah */
.layout-panel .subtitle,
.layout-panel .card-subtitle,
.layout-panel .panel-subtitle,
.layout-panel small {
  display: none !important;
}


/* Subtitle pada card Live Line */
.card .subtitle,
.card .card-subtitle {
  display: none !important;
}

/* =========================================================
   REMOVE DASHBOARD KPI SUBTITLE
   ========================================================= */

.kpi-card .kpi-sub {
  display: none !important;
}

/* =========================================================
   HIDE FOOTER
   ========================================================= */

footer {
  display: none !important;
}

/* =========================================================
   STEP 32L — HEADER FINAL
   MATCH CLAUDE REFERENCE
   ========================================================= */


/* =========================================================
   HEADER BASE
   ========================================================= */

.topbar {

  position: sticky !important;

  top: 0 !important;

  z-index: 90 !important;

  height: 76px !important;

  min-height: 76px !important;

  box-sizing: border-box !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding-top: 0 !important;

  padding-bottom: 0 !important;

  padding-left:
    max(80px, calc((100vw - 1190px) / 2)) !important;

  padding-right:
    max(30px, calc((100vw - 1190px) / 2)) !important;

  background: #ffffff !important;

  border-bottom: 1px solid #e5eaf1 !important;

  box-shadow: none !important;
}


/* =========================================================
   LEFT HEADER AREA
   ========================================================= */

.topbar > div:first-child {

  position: relative !important;

  height: 48px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  padding-left: 52px !important;

  min-width: 0 !important;

}


/* =========================================================
   DP LOGO
   ========================================================= */

.topbar > div:first-child::before {

  content: "DP" !important;

  position: absolute !important;

  left: 0 !important;

  top: 4px !important;

  width: 40px !important;

  height: 40px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  box-sizing: border-box !important;

  border-radius: 9px !important;

  background: #1261bd !important;

  color: #ffffff !important;

  font-family:
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size: 15px !important;

  line-height: 1 !important;

  font-weight: 700 !important;

  letter-spacing: -.3px !important;

  box-shadow: none !important;
}


/* =========================================================
   COMPANY NAME
   ========================================================= */

.topbar .company {

  margin: 0 0 3px !important;

  padding: 0 !important;

  color: #334155 !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 12px !important;

  line-height: 1 !important;

  font-weight: 500 !important;

  letter-spacing: 0 !important;

  white-space: nowrap !important;
}


/* =========================================================
   MAIN TITLE
   ========================================================= */

.topbar h1 {

  margin: 0 !important;

  padding: 0 !important;

  color: #172033 !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 18px !important;

  line-height: 1.15 !important;

  font-weight: 600 !important;

  letter-spacing: -.25px !important;

  white-space: nowrap !important;
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.top-actions {

  height: 48px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  gap: 10px !important;

  flex-shrink: 0 !important;

}


/* =========================================================
   LOGIN
   ========================================================= */

.login-user {

  height: 34px !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 10px !important;

  padding: 0 11px !important;

  box-sizing: border-box !important;

  background: #ffffff !important;

  border: 1px solid #dbe4ef !important;

  border-radius: 17px !important;

  color: #64748b !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 10px !important;

  line-height: 1 !important;

  font-weight: 400 !important;

  white-space: nowrap !important;
}


/* Username */

.login-user {

  color: #64748b !important;

}


/* Logout */

.login-user a {

  color: #2563eb !important;

  font-size: 10px !important;

  font-weight: 600 !important;

  text-decoration: none !important;

}


/* =========================================================
   SETTING BUTTON
   ========================================================= */

.top-actions .action-btn {

  height: 34px !important;

  min-width: 84px !important;

  padding: 0 12px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  box-sizing: border-box !important;

  background: #ffffff !important;

  border: 1px solid #dbe4ef !important;

  border-radius: 8px !important;

  color: #475569 !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 10px !important;

  line-height: 1 !important;

  font-weight: 600 !important;

  letter-spacing: .15px !important;

  text-decoration: none !important;
}


.top-actions .action-btn:hover {

  background: #f8fafc !important;

  border-color: #cbd5e1 !important;

}


/* =========================================================
   CLOCK
   ========================================================= */

.clock-wrap {

  min-width: 108px !important;

  height: 48px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-end !important;

  justify-content: center !important;

  gap: 3px !important;

}


/* Time */

.clock {

  margin: 0 !important;

  padding: 0 !important;

  color: #2563d9 !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 21px !important;

  line-height: 1 !important;

  font-weight: 700 !important;

  letter-spacing: -.5px !important;
}


/* Date */

.date {

  margin: 0 !important;

  padding: 0 !important;

  color: #94a3b8 !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 10px !important;

  line-height: 1 !important;

  font-weight: 400 !important;

  white-space: nowrap !important;
}


/* =========================================================
   SIDEBAR TOGGLE
   ========================================================= */

.sidebar-toggle {

  position: fixed !important;

  left:
    max(16px, calc((100vw - 1190px) / 2)) !important;

  top: 18px !important;

  z-index: 120 !important;

  width: 40px !important;

  height: 40px !important;

  min-width: 40px !important;

  min-height: 40px !important;

  padding: 0 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  box-sizing: border-box !important;

  background: #ffffff !important;

  border: 1px solid #dbe4ef !important;

  border-radius: 9px !important;

  color: #172033 !important;

  font-family: Arial, sans-serif !important;

  font-size: 20px !important;

  line-height: 1 !important;

  font-weight: 400 !important;

  box-shadow:
    0 2px 6px rgba(15,23,42,.05) !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .topbar {

    padding-left: 70px !important;

    padding-right: 20px !important;

  }

  .topbar > div:first-child {

    padding-left: 48px !important;

  }

  .topbar h1 {

    font-size: 16px !important;

  }

  .clock {

    font-size: 18px !important;

  }

}


@media (max-width: 700px) {

  .topbar {

    height: 68px !important;

    min-height: 68px !important;

    padding-left: 64px !important;

    padding-right: 12px !important;

  }

  .topbar > div:first-child {

    height: 44px !important;

    padding-left: 0 !important;

  }

  .topbar > div:first-child::before {

    display: none !important;

  }

  .topbar .company {

    font-size: 9px !important;

  }

  .topbar h1 {

    font-size: 14px !important;

  }

  .login-user,

  .top-actions .action-btn {

    display: none !important;

  }

  .clock {

    font-size: 16px !important;

  }

  .date {

    font-size: 8px !important;

  }

  .sidebar-toggle {

    left: 14px !important;

    top: 14px !important;

  }

}

/* =========================================================
   HIDE HEADER LOGIN & SETTING
   ========================================================= */

.topbar .login-user,
.topbar .action-btn {
  display: none !important;
}

/* =========================================================
   STEP 32M — DASHBOARD KPI FINAL
   6 CARD — MATCH REFERENCE DESIGN
   ========================================================= */


/* =========================================================
   KPI GRID
   ========================================================= */

.kpi-grid {

  display: grid !important;

  grid-template-columns:
    repeat(6, minmax(0, 1fr)) !important;

  gap: 14px !important;

  width: 100% !important;

  margin: 0 0 18px !important;

  padding: 0 !important;

  box-sizing: border-box !important;
}


/* =========================================================
   KPI CARD
   ========================================================= */

.kpi-grid .kpi-card {

  position: relative !important;

  width: 100% !important;

  min-width: 0 !important;

  height: 88px !important;

  min-height: 88px !important;

  max-height: 88px !important;

  box-sizing: border-box !important;

  padding: 14px 17px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  background: #ffffff !important;

  border: 1px solid #dbe4ef !important;

  border-radius: 12px !important;

  box-shadow:
    0 3px 10px rgba(15, 23, 42, .045) !important;

  overflow: hidden !important;

  transition:
    box-shadow .15s ease,
    transform .15s ease !important;
}


/* =========================================================
   HILANGKAN GARIS WARNA VERTIKAL LAMA
   ========================================================= */

.kpi-grid .kpi-card::before {

  display: none !important;

  content: none !important;

}


/* =========================================================
   LABEL
   ========================================================= */

.kpi-grid .kpi-label {

  margin: 0 0 7px !important;

  padding: 0 !important;

  color: #64748b !important;

  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Arial,
    sans-serif !important;

  font-size: 11px !important;

  line-height: 1.2 !important;

  font-weight: 500 !important;

  letter-spacing: .1px !important;

  text-transform: uppercase !important;
}


/* =========================================================
   VALUE
   ========================================================= */

.kpi-grid .kpi-value {

  margin: 0 !important;

  padding: 0 !important;

  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Arial,
    sans-serif !important;

  font-size: 30px !important;

  line-height: 1 !important;

  font-weight: 600 !important;

  letter-spacing: -.7px !important;
}


/* =========================================================
   HILANGKAN SUBTITLE
   ========================================================= */

.kpi-grid .kpi-sub {

  display: none !important;

}


/* =========================================================
   WARNA ANGKA
   ========================================================= */


/* TOTAL LINE */

.kpi-grid .kpi-card:first-child .kpi-value {

  color: #2563eb !important;

}


/* NORMAL */

.kpi-grid .kpi-card--normal .kpi-value {

  color: #16a34a !important;

}


/* MACHINE */

.kpi-grid .kpi-card--machine .kpi-value {

  color: #dc2626 !important;

}


/* MATERIAL */

.kpi-grid .kpi-card--material .kpi-value {

  color: #d97706 !important;

}


/* QUALITY */

.kpi-grid .kpi-card--quality .kpi-value {

  color: #2563eb !important;

}


/* OFFLINE */

.kpi-grid .kpi-card--offline .kpi-value {

  color: #64748b !important;

}


/* =========================================================
   HOVER
   ========================================================= */

.kpi-grid .kpi-card:hover {

  box-shadow:
    0 4px 12px rgba(15, 23, 42, .06) !important;

  transform: translateY(-1px) !important;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .kpi-grid {

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

  }

}


@media (max-width: 700px) {

  .kpi-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;

  }


  .kpi-grid .kpi-card {

    height: 82px !important;

    min-height: 82px !important;

    max-height: 82px !important;

  }


  .kpi-grid .kpi-value {

    font-size: 25px !important;

  }

}


@media (max-width: 480px) {

  .kpi-grid {

    grid-template-columns: 1fr !important;

  }

}

/* =========================================================
   STEP 32N — LAYOUT CARD FINAL
   MATCH REFERENCE DESIGN
   ========================================================= */


/* =========================================================
   LAYOUT CARD
   ========================================================= */

.layout-panel {

  width: 100% !important;

  background: #ffffff !important;

  border: 1px solid #dbe4ef !important;

  border-radius: 12px !important;

  box-shadow:
    0 2px 8px rgba(15, 23, 42, .035) !important;

  overflow: hidden !important;

}


/* =========================================================
   HEADER LAYOUT
   ========================================================= */

.layout-panel .panel-head {

  min-height: 72px !important;

  height: 72px !important;

  padding: 0 22px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  box-sizing: border-box !important;

  background: #ffffff !important;

  border-bottom: none !important;

}


/* =========================================================
   TITLE AREA
   ========================================================= */

.layout-panel .panel-title {

  margin: 0 !important;

  padding: 0 !important;

  color: #172033 !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 15px !important;

  line-height: 1.2 !important;

  font-weight: 600 !important;

  letter-spacing: -.1px !important;

}


/* =========================================================
   HILANGKAN SUBTITLE LAYOUT
   ========================================================= */

.layout-panel .panel-subtitle {

  display: none !important;

}


/* =========================================================
   LEGEND
   ========================================================= */

.layout-panel .panel-tools {

  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  gap: 18px !important;

  margin: 0 !important;

  padding: 0 !important;

}


/* Legend container */

.layout-panel .legend {

  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  gap: 16px !important;

  margin: 0 !important;

  padding: 0 !important;

  white-space: nowrap !important;

}


/* Individual legend */

.layout-panel .legend > span {

  display: inline-flex !important;

  align-items: center !important;

  gap: 7px !important;

  margin: 0 !important;

  padding: 0 !important;

  color: #64748b !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 11px !important;

  line-height: 1 !important;

  font-weight: 400 !important;

}


/* Legend dot */

.layout-panel .legend .dot {

  width: 8px !important;

  height: 8px !important;

  min-width: 8px !important;

  min-height: 8px !important;

  margin: 0 !important;

  border-radius: 50% !important;

  display: inline-block !important;

}


/* =========================================================
   LEGEND COLORS
   ========================================================= */

.layout-panel .legend .dot.normal {

  background: #16a36a !important;

}

.layout-panel .legend .dot.machine {

  background: #e64a4a !important;

}

.layout-panel .legend .dot.material {

  background: #d88916 !important;

}

.layout-panel .legend .dot.quality {

  background: #3768d9 !important;

}

.layout-panel .legend .dot.offline {

  background: #94a3b8 !important;

}


/* =========================================================
   MAP AREA
   ========================================================= */

.layout-panel .layout-map {

  margin: 0 12px 12px !important;

  border-radius: 8px !important;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .layout-panel .panel-head {

    min-height: 64px !important;

    height: auto !important;

    padding: 14px 18px !important;

    gap: 12px !important;

    flex-wrap: wrap !important;

  }

  .layout-panel .legend {

    gap: 10px !important;

    flex-wrap: wrap !important;

  }

}


@media (max-width: 650px) {

  .layout-panel .panel-head {

    align-items: flex-start !important;

    flex-direction: column !important;

  }

  .layout-panel .panel-tools {

    width: 100% !important;

    justify-content: flex-start !important;

  }

  .layout-panel .legend {

    justify-content: flex-start !important;

  }

}

/* =========================================================
   STEP 32O — LIVE LINE CARD FINAL
   MATCH CLAUDE REFERENCE
   ========================================================= */


/* =========================================================
   BOARD
   ========================================================= */

.board-section {
  width: 100% !important;
}


/* =========================================================
   CLUSTER
   ========================================================= */

.cluster {
  margin-bottom: 24px !important;
}


/* =========================================================
   CLUSTER TITLE
   ========================================================= */

.cluster-title {
  margin: 0 0 12px !important;

  min-height: 18px !important;

  display: flex !important;

  align-items: center !important;

  color: #2563eb !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 12px !important;

  line-height: 1 !important;

  font-weight: 600 !important;

  letter-spacing: .15px !important;
}


/* Garis tipis di samping nama cluster */

.cluster-title::after {
  content: "" !important;

  flex: 1 !important;

  height: 1px !important;

  margin-left: 10px !important;

  background: #dbe4ef !important;
}


/* =========================================================
   CARD GRID
   ========================================================= */

.cards {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 12px !important;

  width: 100% !important;
}


/* =========================================================
   CARD BASE
   ========================================================= */

.cards .card {

  position: relative !important;

  width: 100% !important;

  min-width: 0 !important;

  min-height: 95px !important;

  height: 95px !important;

  box-sizing: border-box !important;

  padding: 15px 16px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: space-between !important;

  background: #ffffff !important;

  color: #172033 !important;

  border: 1px solid #d9e2ed !important;

  border-radius: 12px !important;

  box-shadow:
    0 3px 10px rgba(15, 23, 42, .045) !important;

  overflow: visible !important;

  transform: none !important;

}


/* =========================================================
   HILANGKAN BACKGROUND STATUS LAMA
   ========================================================= */

.cards .card.normal,
.cards .card.danger,
.cards .card.warning,
.cards .card.quality,
.cards .card.offline {

  background: #ffffff !important;

  color: #172033 !important;
}


/* =========================================================
   HILANGKAN GARIS STATUS LAMA
   ========================================================= */

.cards .card::before {

  display: none !important;

  content: none !important;
}


/* =========================================================
   LINE NAME
   ========================================================= */

.cards .card h3 {

  margin: 0 !important;

  padding: 0 !important;

  color: #172033 !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 15px !important;

  line-height: 1.25 !important;

  font-weight: 600 !important;

  letter-spacing: 0 !important;
}


/* =========================================================
   STATUS + RESET ROW
   ========================================================= */

.cards .card-status-row {

  width: 100% !important;

  min-height: 30px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 10px !important;

  flex-wrap: nowrap !important;
}


/* =========================================================
   STATUS BADGE
   ========================================================= */

.cards .badge {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  min-width: 0 !important;

  height: 27px !important;

  padding: 0 11px !important;

  box-sizing: border-box !important;

  border-radius: 14px !important;

  background: #e8f7ef !important;

  color: #15945f !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 11px !important;

  line-height: 1 !important;

  font-weight: 500 !important;

  letter-spacing: 0 !important;

  white-space: nowrap !important;
}


/* Titik status */

.cards .badge::before {

  content: "" !important;

  width: 7px !important;

  height: 7px !important;

  margin-right: 6px !important;

  flex: 0 0 7px !important;

  border-radius: 50% !important;

  background: #18a56b !important;
}


/* =========================================================
   STATUS COLORS
   ========================================================= */


/* Normal */

.cards .card.normal .badge {

  background: #e8f7ef !important;

  color: #15945f !important;
}

.cards .card.normal .badge::before {

  background: #18a56b !important;
}


/* Machine */

.cards .card.danger .badge {

  background: #fdecec !important;

  color: #dc3d3d !important;
}

.cards .card.danger .badge::before {

  background: #ef4444 !important;
}


/* Material */

.cards .card.warning .badge {

  background: #fff3df !important;

  color: #c8790b !important;
}

.cards .card.warning .badge::before {

  background: #d88916 !important;
}


/* Quality */

.cards .card.quality .badge {

  background: #e9f0ff !important;

  color: #3267d6 !important;
}

.cards .card.quality .badge::before {

  background: #3768d9 !important;
}


/* Offline */

.cards .card.offline .badge {

  background: #f1f5f9 !important;

  color: #64748b !important;
}

.cards .card.offline .badge::before {

  background: #94a3b8 !important;
}


/* =========================================================
   RESET BUTTON
   ========================================================= */

.cards .reset-line-btn {

  appearance: none !important;

  height: 31px !important;

  min-height: 31px !important;

  padding: 0 12px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  box-sizing: border-box !important;

  background: #ffffff !important;

  border: 1px solid #d6e1ee !important;

  border-radius: 7px !important;

  color: #64748b !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 10px !important;

  line-height: 1 !important;

  font-weight: 500 !important;

  letter-spacing: 0 !important;

  white-space: nowrap !important;

  cursor: pointer !important;

  box-shadow: none !important;

  transform: none !important;
}


/* Hover */

.cards .reset-line-btn:hover {

  background: #f8fafc !important;

  border-color: #bfcddd !important;

  color: #334155 !important;

  transform: none !important;
}


/* Disabled */

.cards .reset-line-btn:disabled {

  opacity: .55 !important;

  cursor: wait !important;

}


/* =========================================================
   ACTIVE / PROBLEM CARD
   ========================================================= */

/*
   Status pulse tetap hidup.
   Yang diubah hanya visual dasarnya.
*/

.cards .card.status-pulse {

  background: #ffffff !important;

}


/* Ring pulse tetap tipis */

.cards .card.status-pulse::after {

  inset: -3px !important;

  border-width: 2px !important;

  border-radius: 14px !important;

}


/* =========================================================
   HOVER CARD
   ========================================================= */

.cards .card:hover {

  box-shadow:
    0 5px 14px rgba(15, 23, 42, .07) !important;

  transform: translateY(-1px) !important;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .cards {

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

  }

}


@media (max-width: 650px) {

  .cards {

    grid-template-columns: 1fr !important;

    gap: 10px !important;

  }


  .cards .card {

    height: 92px !important;

    min-height: 92px !important;

  }

}

/* =========================================================
   STEP 33 — SIDEBAR FINAL
   MATCH CLAUDE DESIGN
   SEMUA FITUR TETAP ADA
   ========================================================= */


/* =========================================================
   SIDEBAR TOGGLE
   ========================================================= */

.sidebar-toggle {

  position: fixed !important;

  left: 18px !important;

  top: 13px !important;

  width: 40px !important;

  height: 40px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 0 !important;

  background: #ffffff !important;

  color: #172033 !important;

  border: 1px solid #d9e2ed !important;

  border-radius: 9px !important;

  box-shadow:
    0 2px 8px rgba(15, 23, 42, .06) !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 18px !important;

  font-weight: 400 !important;

  line-height: 1 !important;

  cursor: pointer !important;

  z-index: 100 !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;

}


/* Hover tombol */

.sidebar-toggle:hover {

  background: #f8fafc !important;

  border-color: #cbd5e1 !important;

  transform: none !important;

  box-shadow:
    0 3px 10px rgba(15, 23, 42, .08) !important;

}


/* =========================================================
   SIDEBAR CONTAINER
   ========================================================= */

.side-menu {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  width: 258px !important;

  height: 100vh !important;

  box-sizing: border-box !important;

  padding: 20px 10px 16px !important;

  background: #ffffff !important;

  color: #172033 !important;

  border-right: 1px solid #e2e8f0 !important;

  box-shadow:
    4px 0 18px rgba(15, 23, 42, .06) !important;

  z-index: 120 !important;

  transform: translateX(-100%) !important;

  transition:
    transform .24s ease !important;

}


/* Sidebar ketika dibuka */

.side-menu.is-open {

  transform: translateX(0) !important;

}


/*
   PENTING:
   Sidebar sekarang z-index 120.
   Tombol cuma z-index 100.

   Jadi ketika sidebar dibuka,
   tombol ☰ otomatis berada DI BAWAH sidebar
   dan tidak akan nongol di atasnya.
*/


/* =========================================================
   BRAND
   ========================================================= */

.side-brand {

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  min-height: 52px !important;

  margin: 0 2px 18px !important;

  padding: 0 8px 18px !important;

  border-bottom: 1px solid #e6ebf2 !important;

}


/* DP LOGO */

.side-brand-mark {

  width: 36px !important;

  height: 36px !important;

  min-width: 36px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 10px !important;

  background: #155dcc !important;

  color: #ffffff !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 13px !important;

  font-weight: 700 !important;

  letter-spacing: 0 !important;

  box-shadow:
    0 3px 8px rgba(21, 93, 204, .16) !important;

}


/* =========================================================
   BRAND TEXT
   ========================================================= */

.side-brand-title {

  margin: 0 !important;

  color: #172033 !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 16px !important;

  line-height: 1.15 !important;

  font-weight: 600 !important;

  letter-spacing: -.15px !important;

}


.side-brand-sub {

  margin-top: 3px !important;

  color: #94a3b8 !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 8px !important;

  line-height: 1 !important;

  font-weight: 600 !important;

  letter-spacing: .7px !important;

  opacity: 1 !important;

}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.side-section-title {

  margin: 18px 8px 7px !important;

  padding: 0 !important;

  color: #94a3b8 !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 9px !important;

  line-height: 1 !important;

  font-weight: 700 !important;

  letter-spacing: 1.2px !important;

  opacity: 1 !important;

}


/* =========================================================
   NAVIGATION
   ========================================================= */

.side-nav {

  display: flex !important;

  flex-direction: column !important;

  gap: 3px !important;

  width: 100% !important;

}


/* =========================================================
   NAV ITEM
   ========================================================= */

.side-nav-item {

  position: relative !important;

  width: 100% !important;

  min-height: 42px !important;

  box-sizing: border-box !important;

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

  margin: 0 !important;

  padding: 0 13px !important;

  border-radius: 9px !important;

  background: transparent !important;

  color: #64748b !important;

  text-decoration: none !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 14px !important;

  line-height: 1 !important;

  font-weight: 500 !important;

  letter-spacing: 0 !important;

  transition:
    background .15s ease,
    color .15s ease !important;

}


/* =========================================================
   ICON
   ========================================================= */

.side-nav-icon {

  width: 20px !important;

  min-width: 20px !important;

  height: 20px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  color: #64748b !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 16px !important;

  line-height: 1 !important;

  font-weight: 400 !important;

}


/* =========================================================
   HOVER
   ========================================================= */

.side-nav-item:hover {

  background: #f5f8fd !important;

  color: #1d4ed8 !important;

}


.side-nav-item:hover .side-nav-icon {

  color: #1d4ed8 !important;

}


/* =========================================================
   ACTIVE ITEM
   ========================================================= */

.side-nav-item.active {

  background: #eaf2ff !important;

  color: #155dcc !important;

  font-weight: 600 !important;

}


/* Active icon */

.side-nav-item.active .side-nav-icon {

  color: #155dcc !important;

}


/* Garis biru di kiri active */

.side-nav-item.active::before {

  content: "" !important;

  position: absolute !important;

  left: 0 !important;

  top: 8px !important;

  bottom: 8px !important;

  width: 3px !important;

  border-radius: 0 3px 3px 0 !important;

  background: #2563eb !important;

}


/* =========================================================
   SYSTEM SECTION
   ========================================================= */

.side-section-title + .side-nav {

  margin-bottom: 2px !important;

}


/* =========================================================
   FOOTER SIDEBAR
   ========================================================= */

.side-footer {

  margin-top: auto !important;

  padding: 15px 10px 2px !important;

  border-top: 1px solid #e6ebf2 !important;

}


/* Login */

.side-login {

  margin: 0 !important;

  color: #64748b !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 9px !important;

  line-height: 1.3 !important;

  font-weight: 600 !important;

  letter-spacing: 0 !important;

}


/* Info */

.side-info {

  margin-top: 6px !important;

  color: #a1aec0 !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 8px !important;

  line-height: 1.5 !important;

  font-weight: 400 !important;

}


/* =========================================================
   MOBILE / SMALL SCREEN
   ========================================================= */

@media (max-width: 650px) {

  .side-menu {

    width: 258px !important;

  }

  .sidebar-toggle {

    left: 14px !important;

    top: 12px !important;

  }

}

/* =========================================================
   STEP 33A — BRAND SIDEBAR FINAL
   ========================================================= */

.side-brand-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.side-brand-sub {
  order: 1 !important;

  margin: 0 0 3px 0 !important;

  color: #64748b !important;

  font-size: 12px !important;

  line-height: 1.1 !important;

  font-weight: 400 !important;

  letter-spacing: 0 !important;

  opacity: 1 !important;
}

.side-brand-title {
  order: 2 !important;

  margin: 0 !important;

  color: #172033 !important;

  font-size: 16px !important;

  line-height: 1.1 !important;

  font-weight: 700 !important;

  letter-spacing: 0 !important;
}


/* Hilangkan garis/warna ungu bawaan di bagian paling atas */

html,
body {
  border-top: none !important;
}

body::before {
  display: none !important;
  content: none !important;
}

/* =========================================================
   STEP 33B — SIDEBAR TYPOGRAPHY + ICON FINAL
   ========================================================= */


/* =========================================================
   HILANGKAN SUBTITLE PALING BAWAH
   LOGIN TETAP ADA
   ========================================================= */

.side-footer .side-info {
  display: none !important;
}


/* =========================================================
   FOOTER LOGIN
   ========================================================= */

.side-footer {
  padding: 15px 10px 4px !important;
}

.side-footer .side-login {
  color: #64748b !important;

  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif !important;

  font-size: 9px !important;

  line-height: 1.2 !important;

  font-weight: 500 !important;

  letter-spacing: 0 !important;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.side-section-title {
  margin: 19px 8px 8px !important;

  color: #94a3b8 !important;

  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif !important;

  font-size: 9px !important;

  line-height: 1 !important;

  font-weight: 700 !important;

  letter-spacing: 1.05px !important;
}


/* =========================================================
   NAV
   ========================================================= */

.side-nav {
  gap: 3px !important;
}


/* =========================================================
   MENU ITEM
   ========================================================= */

.side-nav-item {

  min-height: 42px !important;

  height: 42px !important;

  padding: 0 14px !important;

  gap: 12px !important;

  border-radius: 9px !important;

  color: #64748b !important;

  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif !important;

  font-size: 14px !important;

  line-height: 1 !important;

  font-weight: 500 !important;

  letter-spacing: 0 !important;
}


/* =========================================================
   ACTIVE
   ========================================================= */

.side-nav-item.active {

  background: #e8f1ff !important;

  color: #155dcc !important;

  font-weight: 600 !important;
}

.side-nav-item.active::before {

  left: 0 !important;

  top: 7px !important;

  bottom: 7px !important;

  width: 3px !important;

  border-radius: 0 3px 3px 0 !important;

  background: #2563eb !important;
}


/* =========================================================
   ICON
   ========================================================= */

.side-nav-icon {

  width: 20px !important;

  min-width: 20px !important;

  height: 20px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  color: #64748b !important;

  font-family:
    "Segoe UI Symbol",
    "Segoe UI",
    sans-serif !important;

  font-size: 16px !important;

  line-height: 1 !important;

  font-weight: 400 !important;
}


/* Active icon */

.side-nav-item.active .side-nav-icon {

  color: #155dcc !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.side-nav-item:hover {

  background: #f5f8fd !important;

  color: #155dcc !important;
}

.side-nav-item:hover .side-nav-icon {

  color: #155dcc !important;
}


/* =========================================================
   BRAND
   ========================================================= */

.side-brand {

  min-height: 48px !important;

  margin: 0 2px 19px !important;

  padding: 0 8px 16px !important;

  gap: 10px !important;
}


.side-brand-mark {

  width: 34px !important;

  height: 34px !important;

  min-width: 34px !important;

  border-radius: 9px !important;

  background: #155dcc !important;

  font-size: 12px !important;

  font-weight: 700 !important;

  box-shadow:
    0 3px 8px rgba(21,93,204,.14) !important;
}


.side-brand-sub {

  margin: 0 0 3px 0 !important;

  color: #64748b !important;

  font-size: 12px !important;

  line-height: 1.05 !important;

  font-weight: 400 !important;

  letter-spacing: 0 !important;
}


.side-brand-title {

  margin: 0 !important;

  color: #172033 !important;

  font-size: 16px !important;

  line-height: 1.05 !important;

  font-weight: 700 !important;

  letter-spacing: -.1px !important;
}

/* =========================================================
   STEP 33C — SIDEBAR SVG ICON
   ========================================================= */

.side-nav-icon svg {

  width: 18px !important;

  height: 18px !important;

  display: block !important;

  fill: none !important;

  stroke: currentColor !important;

  stroke-width: 1.7 !important;

  stroke-linecap: round !important;

  stroke-linejoin: round !important;

}


.side-nav-item {

  color: #64748b !important;

}


.side-nav-item .side-nav-icon {

  color: #64748b !important;

}


.side-nav-item.active {

  color: #155dcc !important;

}


.side-nav-item.active .side-nav-icon {

  color: #155dcc !important;

}


.side-nav-item:hover .side-nav-icon {

  color: #155dcc !important;

}

/* =========================================================
   STEP 34C — DASHBOARD ANALYTICS CARD
   ========================================================= */

.dashboard-analytics-kpis {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:20px 0 16px;
}

.dashboard-analytics-kpi {
  min-height:92px;
  padding:16px 18px;
  background:#fff;
  border:1px solid #dbe4f0;
  border-radius:11px;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.dashboard-analytics-kpi small {
  margin-bottom:8px;
  color:#64748b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.6px;
}

.dashboard-analytics-kpi strong {
  color:#172033;
  font-size:24px;
  line-height:1;
  font-weight:800;
}


/* =========================================================
   ANALYTICS SECTION
   ========================================================= */

.dashboard-analytics-section {
  margin-top:18px;
}

.dashboard-analytics-card {
  background:#fff;
  border:1px solid #dbe4f0;
  border-radius:11px;
  padding:18px;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
}

.dashboard-analytics-card h3 {
  margin:0 0 6px;
  color:#172033;
  font-size:14px;
  font-weight:800;
}

.dashboard-analytics-card p {
  margin:0 0 16px;
  color:#64748b;
  font-size:12px;
}


/* =========================================================
   TREND
   ========================================================= */

.dashboard-trend-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:38px;
  padding:7px 10px;
  border-bottom:1px solid #edf1f6;
}

.dashboard-trend-item:last-child {
  border-bottom:none;
}

.dashboard-trend-item span {
  color:#475569;
  font-size:12px;
}

.dashboard-trend-item strong {
  color:#172033;
  font-size:13px;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.dashboard-category-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:42px;
  padding:8px 10px;
  margin-bottom:6px;
  background:#f8fafc;
  border:1px solid #e6ebf2;
  border-radius:8px;
}

.dashboard-category-item span {
  color:#334155;
  font-size:12px;
  font-weight:600;
}

.dashboard-category-item strong {
  color:#172033;
  font-size:13px;
}


/* =========================================================
   CLUSTER
   ========================================================= */

.dashboard-cluster-item {
  padding:11px 12px;
  margin-bottom:8px;
  background:#f8fafc;
  border:1px solid #e6ebf2;
  border-radius:8px;
}

.dashboard-cluster-item strong {
  display:block;
  margin-bottom:4px;
  color:#172033;
  font-size:12px;
}

.dashboard-cluster-item span {
  display:block;
  color:#2563eb;
  font-size:11px;
  font-weight:700;
}

.dashboard-cluster-item small {
  display:block;
  margin-top:4px;
  color:#64748b;
  font-size:10px;
}


/* =========================================================
   TOP LINE
   ========================================================= */

.dashboard-top-line-item {
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 12px;
  padding:10px 12px;
  margin-bottom:7px;
  background:#f8fafc;
  border:1px solid #e6ebf2;
  border-radius:8px;
}

.dashboard-top-line-item strong {
  color:#172033;
  font-size:12px;
}

.dashboard-top-line-item b {
  color:#2563eb;
  font-size:12px;
}

.dashboard-top-line-item span {
  grid-column:1 / -1;
  color:#64748b;
  font-size:10px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:900px) {

  .dashboard-analytics-kpis {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}

@media (max-width:600px) {

  .dashboard-analytics-kpis {
    grid-template-columns:1fr;
  }

}

/* =========================================================
   STEP 34D — DASHBOARD ANALYTICS LAYOUT
   ========================================================= */

.dashboard-analytics {
  width: 100% !important;
  margin-top: 22px !important;
  padding-bottom: 24px !important;
}


/* =========================================================
   KPI ANALYTICS
   ========================================================= */

.dashboard-analytics-kpis {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 12px !important;

  width: 100% !important;

  margin: 0 0 14px !important;
}


/* =========================================================
   TREND + CATEGORY
   ========================================================= */

.dashboard-analytics-grid {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.65fr)
    minmax(320px, .9fr) !important;

  gap: 14px !important;

  width: 100% !important;

  margin-bottom: 14px !important;
}


/* =========================================================
   ANALYTICS CARD
   ========================================================= */

.dashboard-analytics-card {
  width: 100% !important;

  box-sizing: border-box !important;

  background: #ffffff !important;

  border: 1px solid #dbe4ef !important;

  border-radius: 12px !important;

  padding: 18px !important;

  box-shadow:
    0 2px 8px rgba(15, 23, 42, .04) !important;
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.dashboard-analytics-card-head {
  display: flex !important;

  align-items: flex-start !important;

  justify-content: space-between !important;

  gap: 16px !important;

  margin-bottom: 14px !important;
}


.dashboard-analytics-card-head h3 {
  margin: 0 0 5px !important;

  padding: 0 !important;

  color: #172033 !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 15px !important;

  line-height: 1.25 !important;

  font-weight: 700 !important;
}


.dashboard-analytics-card-head p {
  margin: 0 !important;

  padding: 0 !important;

  color: #64748b !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 11px !important;

  line-height: 1.4 !important;

  font-weight: 400 !important;
}


/* =========================================================
   TREND AREA
   ========================================================= */

.dashboard-trend {
  min-height: 220px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: flex-end !important;
}


/* =========================================================
   CATEGORY AREA
   ========================================================= */

.dashboard-category {
  min-height: 220px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;
}


/* =========================================================
   CLUSTER
   ========================================================= */

.dashboard-cluster-card {
  margin-bottom: 14px !important;
}


.dashboard-clusters {
  display: grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  gap: 10px !important;
}


/* =========================================================
   TOP LINE
   ========================================================= */

.dashboard-top-lines {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 10px !important;
}


/* =========================================================
   LEGEND
   ========================================================= */

.dashboard-analytics-legend {
  display: flex !important;

  align-items: center !important;

  gap: 14px !important;

  color: #64748b !important;

  font-size: 11px !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .dashboard-analytics-kpis {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-analytics-grid {
    grid-template-columns: 1fr !important;
  }

  .dashboard-clusters {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }

}


@media (max-width: 750px) {

  .dashboard-analytics-kpis {
    grid-template-columns: 1fr 1fr !important;
  }

  .dashboard-clusters {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-top-lines {
    grid-template-columns: 1fr !important;
  }

}


@media (max-width: 500px) {

  .dashboard-analytics-kpis {
    grid-template-columns: 1fr !important;
  }

  .dashboard-clusters {
    grid-template-columns: 1fr !important;
  }

}

/* =========================================================
   STEP 35B — DASHBOARD TREND CHART
   CLAUDE STYLE
   ========================================================= */

.dashboard-trend-chart {
  width: 100%;
  height: 270px;
  padding: 4px 10px 0;
  box-sizing: border-box;
}

.dashboard-trend-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}


/* =========================
   GRID
   ========================= */

.dashboard-chart-grid {
  stroke: #dbe4f0;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}


/* =========================
   Y AXIS
   ========================= */

.dashboard-chart-y-label {
  fill: #64748b;
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Arial,
    sans-serif;
  font-size: 12px;
  font-weight: 500;
}


/* =========================
   X AXIS
   ========================= */

.dashboard-chart-x-label {
  fill: #64748b;
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Arial,
    sans-serif;
  font-size: 12px;
  font-weight: 500;
}


/* =========================
   AREA BAWAH GARIS
   ========================= */

.dashboard-chart-area {
  fill: url(#dashboardTrendGradient);
  stroke: none;
}


/* =========================
   GRADIENT
   ========================= */

.dashboard-gradient-top {
  stop-color: #2f73d9;
  stop-opacity: .24;
}

.dashboard-gradient-bottom {
  stop-color: #2f73d9;
  stop-opacity: .02;
}


/* =========================
   GARIS TREND
   ========================= */

.dashboard-chart-line {
  fill: none;
  stroke: #2f73d9;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}


/* =========================
   TITIK DATA
   ========================= */

.dashboard-chart-point {
  fill: #ffffff;
  stroke: #2f73d9;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.dashboard-chart-point-inner {
  fill: #2f73d9;
  stroke: none;
}


/* =========================
   HOVER
   ========================= */

.dashboard-chart-point {
  transition:
    r .15s ease,
    stroke-width .15s ease;
}

.dashboard-chart-point:hover {
  r: 6;
  stroke-width: 3.5;
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 900px) {

  .dashboard-trend-chart {
    height: 250px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .dashboard-chart-y-label,
  .dashboard-chart-x-label {
    font-size: 11px;
  }

}


@media (max-width: 600px) {

  .dashboard-trend-chart {
    height: 220px;
  }

}

/* =========================================================
   STEP 35C — DISTRIBUSI KATEGORI DONUT
   ========================================================= */

.dashboard-category {
  min-height: 220px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;
}


.dashboard-donut-wrap {

  width: 100% !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 20px !important;

}


/* =========================================================
   DONUT
   ========================================================= */

.dashboard-donut {

  position: relative !important;

  width: 150px !important;

  height: 150px !important;

  border-radius: 50% !important;

  background:
    conic-gradient(
      #dc3d3d 0deg var(--machine-end),
      #c98212 var(--machine-end) var(--material-end),
      #3264df var(--material-end) 360deg
    ) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;
}


/* Lubang tengah */

.dashboard-donut::before {

  content: "" !important;

  position: absolute !important;

  inset: 24px !important;

  border-radius: 50% !important;

  background: #ffffff !important;

}


/* =========================================================
   ANGKA TENGAH
   ========================================================= */

.dashboard-donut-center {

  position: relative !important;

  z-index: 2 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

}


.dashboard-donut-center strong {

  color: #172033 !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 22px !important;

  line-height: 1 !important;

  font-weight: 800 !important;

}


.dashboard-donut-center span {

  margin-top: 5px !important;

  color: #64748b !important;

  font-size: 9px !important;

  line-height: 1 !important;

}


/* =========================================================
   LEGEND
   ========================================================= */

.dashboard-donut-legend {

  width: 100% !important;

  max-width: 310px !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 9px !important;

}


.dashboard-donut-legend-item {

  display: grid !important;

  grid-template-columns:
    10px
    1fr
    auto
    auto !important;

  align-items: center !important;

  column-gap: 7px !important;

  min-height: 18px !important;

}


.dashboard-donut-dot {

  width: 7px !important;

  height: 7px !important;

  border-radius: 50% !important;

}


.dashboard-donut-dot.machine {
  background: #dc3d3d !important;
}


.dashboard-donut-dot.material {
  background: #c98212 !important;
}


.dashboard-donut-dot.quality {
  background: #3264df !important;
}


.dashboard-donut-name {

  color: #64748b !important;

  font-size: 12px !important;

  font-weight: 600 !important;

}


.dashboard-donut-legend-item strong {

  color: #172033 !important;

  font-size: 12px !important;

  font-weight: 700 !important;

}


.dashboard-donut-legend-item small {

  color: #64748b !important;

  font-size: 11px !important;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {

  .dashboard-donut {

    width: 130px !important;

    height: 130px !important;

  }

  .dashboard-donut::before {

    inset: 21px !important;

  }

}

/* =========================================================
   STEP 35D — CLUSTER ANALYTICS
   ========================================================= */

.dashboard-cluster-card {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}


/* HEADER */

.dashboard-cluster-card
.dashboard-analytics-card-head {
  margin-bottom: 14px !important;
}


/* GRID */

.dashboard-clusters {

  display: grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  gap: 10px !important;

  width: 100% !important;

}


/* INDIVIDUAL CLUSTER */

.dashboard-cluster-item {

  min-height: 175px !important;

  padding: 14px 12px !important;

  background: #f8fafc !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 10px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: flex-start !important;

  text-align: center !important;

}


/* NAMA CLUSTER */

.dashboard-cluster-item strong {

  display: block !important;

  margin-bottom: 12px !important;

  color: #172033 !important;

  font-size: 13px !important;

  font-weight: 700 !important;

}


/* TOTAL */

.dashboard-cluster-item span {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 68px !important;

  height: 68px !important;

  margin-bottom: 12px !important;

  border-radius: 50% !important;

  background: #ffffff !important;

  border: 8px solid #3264df !important;

  color: #172033 !important;

  font-size: 20px !important;

  font-weight: 800 !important;

}


/* DETAIL */

.dashboard-cluster-item small {

  display: block !important;

  margin-top: 2px !important;

  color: #64748b !important;

  font-size: 10px !important;

  line-height: 1.8 !important;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .dashboard-clusters {

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

  }

}


@media (max-width: 700px) {

  .dashboard-clusters {

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

  }

}


@media (max-width: 500px) {

  .dashboard-clusters {

    grid-template-columns: 1fr !important;

  }

}

/* =========================================================
   STEP 35D — FIX CLUSTER CARD DESIGN
   ========================================================= */

/* CONTAINER */

.dashboard-cluster-card {
  width: 100% !important;
  margin: 0 0 18px !important;
}


/* HEADER */

.dashboard-cluster-card
.dashboard-analytics-card-head {
  padding: 0 !important;
  margin-bottom: 14px !important;
}


/* GRID */

.dashboard-clusters {
  display: grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  gap: 12px !important;

  width: 100% !important;
}


/* =========================================================
   CARD
   ========================================================= */

.dashboard-cluster-item {
  position: relative !important;

  min-height: 215px !important;

  padding: 16px 14px 14px !important;

  background: #f8fafc !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 11px !important;

  box-sizing: border-box !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: flex-start !important;

  text-align: center !important;

  color: #172033 !important;

  box-shadow: none !important;

  overflow: hidden !important;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease !important;
}


/* HOVER */

.dashboard-cluster-item:hover {
  transform: translateY(-2px) !important;

  border-color: #2563eb !important;

  box-shadow:
    0 5px 14px rgba(15, 23, 42, .07) !important;
}


/* TOTAL CARD */

.dashboard-cluster-item.is-total {
  background: #eef4ff !important;

  border-color: #3b82f6 !important;
}


/* =========================================================
   NAMA CLUSTER
   ========================================================= */

.dashboard-cluster-item > strong {
  display: block !important;

  width: 100% !important;

  margin: 0 0 13px !important;

  color: #172033 !important;

  font-size: 13px !important;

  line-height: 1.2 !important;

  font-weight: 700 !important;

  text-align: center !important;
}


.dashboard-cluster-item.is-total > strong {
  color: #1d4ed8 !important;
}


/* =========================================================
   DONUT
   ========================================================= */

.dashboard-cluster-donut {
  position: relative !important;

  width: 68px !important;

  height: 68px !important;

  flex: 0 0 68px !important;

  margin: 0 auto 14px !important;

  border-radius: 50% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;
}


/* LUBANG TENGAH DONUT */

.dashboard-cluster-donut::after {
  content: "" !important;

  position: absolute !important;

  inset: 8px !important;

  background: #ffffff !important;

  border-radius: 50% !important;

  z-index: 1 !important;
}


/* ANGKA TENGAH */

.dashboard-cluster-donut-center {
  position: relative !important;

  z-index: 2 !important;

  width: 100% !important;

  height: 100% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;
}


.dashboard-cluster-donut-center b {
  color: #172033 !important;

  font-size: 17px !important;

  line-height: 1 !important;

  font-weight: 800 !important;
}


/* =========================================================
   DETAIL MACHINE / MATERIAL / QUALITY
   ========================================================= */

.dashboard-cluster-details {
  width: 100% !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 5px !important;

  margin-top: auto !important;
}


/* RESET SEMUA SPAN LAMA */

.dashboard-cluster-item
.dashboard-cluster-details
span {
  all: unset !important;

  box-sizing: border-box !important;

  width: 100% !important;

  min-height: 17px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 6px !important;

  color: #64748b !important;

  font-size: 10px !important;

  line-height: 1.3 !important;

  text-align: left !important;
}


/* NILAI */

.dashboard-cluster-item
.dashboard-cluster-details
span b {
  margin-left: auto !important;

  color: #172033 !important;

  font-size: 10px !important;

  font-weight: 700 !important;
}


/* DOT */

.dashboard-cluster-item
.dashboard-cluster-details
span i {
  display: inline-block !important;

  width: 6px !important;

  height: 6px !important;

  flex: 0 0 6px !important;

  margin-right: 2px !important;

  border-radius: 50% !important;
}


/* WARNA DOT */

.dashboard-cluster-details
.machine {
  background: #dc3d3d !important;
}


.dashboard-cluster-details
.material {
  background: #c98212 !important;
}


.dashboard-cluster-details
.quality {
  background: #3264df !important;
}


/* =========================================================
   HILANGKAN FORMAT SMALL LAMA
   ========================================================= */

.dashboard-cluster-item > small {
  all: unset !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .dashboard-clusters {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }

}


@media (max-width: 700px) {

  .dashboard-clusters {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}


@media (max-width: 500px) {

  .dashboard-clusters {
    grid-template-columns: 1fr !important;
  }

}

/* =========================================================
   STEP 35E — LINE PALING SERING TERPICU
   ========================================================= */

.dashboard-top-line-card {
  width: 100% !important;
  margin-top: 14px !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.dashboard-top-line-card
.dashboard-analytics-card-head {
  margin-bottom: 14px !important;
}


/* =========================================================
   GRID LINE
   ========================================================= */

.dashboard-top-lines {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 12px !important;

  width: 100% !important;
}


/* =========================================================
   CARD LINE
   ========================================================= */

.dashboard-top-line-item {

  position: relative !important;

  min-height: 86px !important;

  padding: 14px 16px !important;

  margin: 0 !important;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 11px !important;

  box-sizing: border-box !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  grid-template-rows:
    auto
    auto !important;

  gap: 7px 12px !important;

  box-shadow:
    0 2px 8px rgba(15, 23, 42, .04) !important;

  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease !important;

}


/* =========================================================
   HOVER
   ========================================================= */

.dashboard-top-line-item:hover {

  transform:
    translateY(-2px) !important;

  border-color:
    #3b82f6 !important;

  box-shadow:
    0 6px 16px rgba(15, 23, 42, .07) !important;

}


/* =========================================================
   NAMA LINE
   ========================================================= */

.dashboard-top-line-item > strong {

  min-width: 0 !important;

  color: #172033 !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 13px !important;

  line-height: 1.3 !important;

  font-weight: 700 !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  text-align: left !important;

}


/* =========================================================
   JUMLAH KEJADIAN
   ========================================================= */

.dashboard-top-line-item > b {

  align-self: start !important;

  color: #172033 !important;

  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 17px !important;

  line-height: 1 !important;

  font-weight: 800 !important;

  white-space: nowrap !important;

}


/* =========================================================
   DOWNTIME
   ========================================================= */

.dashboard-top-line-item > span {

  grid-column:
    1 / -1 !important;

  margin: 0 !important;

  color: #64748b !important;

  font-size: 11px !important;

  line-height: 1.3 !important;

  font-weight: 500 !important;

  text-align: left !important;

}


/* =========================================================
   STRIP WARNA KIRI
   ========================================================= */

.dashboard-top-line-item::before {

  content: "" !important;

  position: absolute !important;

  left: 0 !important;

  top: 0 !important;

  bottom: 0 !important;

  width: 3px !important;

  background: #2563eb !important;

  border-radius:
    11px 0 0 11px !important;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .dashboard-top-lines {

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

  }

}


@media (max-width: 600px) {

  .dashboard-top-lines {

    grid-template-columns: 1fr !important;

  }

}

/* =========================================================
   STEP 35E-B — FINAL LINE TRIGGER CARD
   ========================================================= */

.dashboard-top-lines {
  display: grid !important;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(250px, 290px)
    ) !important;

  gap: 12px !important;

  width: 100% !important;

  justify-content: start !important;
}


/* =========================================================
   CARD
   ========================================================= */

.dashboard-top-line-item {

  width: 290px !important;

  min-height: 86px !important;

  padding: 14px 16px 13px !important;

  margin: 0 !important;

  background: #ffffff !important;

  border: 1px solid #dbe4f0 !important;

  border-radius: 11px !important;

  box-shadow:
    0 2px 8px rgba(15, 23, 42, .04) !important;

}


/* =========================================================
   LINE NAME
   ========================================================= */

.dashboard-top-line-item > strong {

  color: #172033 !important;

  font-size: 13px !important;

  font-weight: 700 !important;

  line-height: 1.3 !important;

}


/* =========================================================
   JUMLAH KEJADIAN
   ========================================================= */

.dashboard-top-line-item > b {

  color: #172033 !important;

  font-size: 17px !important;

  font-weight: 800 !important;

}


/* =========================================================
   DOWNTIME
   ========================================================= */

.dashboard-top-line-item > span {

  margin-top: 1px !important;

  color: #64748b !important;

  font-size: 11px !important;

  font-weight: 500 !important;

}


/* =========================================================
   STRIP KIRI
   ========================================================= */

.dashboard-top-line-item::before {

  width: 3px !important;

  background: #2563eb !important;

  border-radius:
    11px 0 0 11px !important;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  .dashboard-top-lines {

    grid-template-columns:
      minmax(0, 290px) !important;

  }

  .dashboard-top-line-item {

    width: 100% !important;

  }

}

/* =========================================================
   STEP 36 — FINAL DASHBOARD SPACING
   ========================================================= */

/* MAIN */

main {
  padding-top: 18px !important;
  padding-bottom: 28px !important;
}


/* =========================================================
   KPI UTAMA
   ========================================================= */

.kpi-grid {
  margin-bottom: 16px !important;
}


/* =========================================================
   FLOOR TAB
   ========================================================= */

.floor-tabs {
  margin-bottom: 16px !important;
}


/* =========================================================
   LAYOUT PANEL
   ========================================================= */

.layout-panel {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

.layout-panel .panel-head {
  min-height: 58px !important;
  padding: 13px 18px !important;
}

.layout-panel .layout-map {
  margin: 10px !important;
}


/* =========================================================
   LIVE LINE
   ========================================================= */

.board-section {
  margin-top: 18px !important;
  padding-bottom: 0 !important;
}

.cluster {
  margin-bottom: 18px !important;
}

.cluster-title {
  margin-bottom: 9px !important;
}


/* =========================================================
   ANALYTICS
   ========================================================= */

.dashboard-analytics {
  margin-top: 18px !important;
  padding-bottom: 0 !important;
}


/* KPI ANALYTICS */

.dashboard-analytics-kpis {
  margin-bottom: 14px !important;
}


/* TREND + CATEGORY */

.dashboard-analytics-grid {
  margin-bottom: 14px !important;
}


/* CLUSTER */

.dashboard-cluster-card {
  margin-bottom: 14px !important;
}


/* TOP LINE */

.dashboard-top-line-card {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   ANALYTICS CARD HEADER
   ========================================================= */

.dashboard-analytics-card-head {
  margin-bottom: 12px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

  main {
    padding:
      16px
      20px
      24px !important;
  }

  .dashboard-analytics {
    margin-top: 16px !important;
  }

}


@media (max-width: 600px) {

  main {
    padding:
      12px
      14px
      20px !important;
  }

  .kpi-grid,
  .floor-tabs {
    margin-bottom: 12px !important;
  }

  .layout-panel {
    margin-bottom: 16px !important;
  }

  .board-section {
    margin-top: 16px !important;
  }

  .dashboard-analytics {
    margin-top: 16px !important;
  }

}

/* =========================================================
   STEP 37 — FINAL TYPOGRAPHY
   CLEAN / MODERN / CLAUDE STYLE
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

html,
body,
button,
input,
select,
textarea,
table {
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;
}

body {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  color: #172033 !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.topbar .company {
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: #334155 !important;
}

.topbar .company small {
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: .25px !important;
  color: #64748b !important;
}

.topbar h1 {
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: -.15px !important;
  color: #172033 !important;
}

.clock {
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -.4px !important;
  color: #2563d9 !important;
}

.date {
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  color: #94a3b8 !important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.side-menu {
  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;
}

.side-nav-item {
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: #64748b !important;
}

.side-nav-item.active {
  font-weight: 600 !important;
  color: #2563d9 !important;
}


/* =========================================================
   FLOOR TAB
   ========================================================= */

.floor-tab {
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.floor-tab.active {
  font-weight: 600 !important;
}


/* =========================================================
   MAIN KPI — 6 CARD
   ========================================================= */

.kpi-grid .kpi-label {
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: .1px !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}

.kpi-grid .kpi-value {
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: -.5px !important;
  color: #172033 !important;
}


/* =========================================================
   PANEL / LAYOUT
   ========================================================= */

.panel-head h2 {
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: #172033 !important;
}

.panel-head p {
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  color: #64748b !important;
}


/* =========================================================
   CLUSTER TITLE
   ========================================================= */

.cluster-title {
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: .5px !important;
  color: #64748b !important;
}


/* =========================================================
   LIVE LINE CARD
   ========================================================= */

.card h3 {
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: #172033 !important;
}

.card .badge {
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.reset-line-btn {
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: .05px !important;
}


/* =========================================================
   ANALYTICS — SECTION TITLE
   ========================================================= */

.dashboard-analytics-card h3 {
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: #172033 !important;
}

.dashboard-analytics-card p {
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  color: #64748b !important;
}


/* =========================================================
   ANALYTICS KPI
   ========================================================= */

.dashboard-analytics-kpi small {
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: .25px !important;
  color: #64748b !important;
}

.dashboard-analytics-kpi strong {
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -.4px !important;
  color: #172033 !important;
}


/* =========================================================
   CHART
   ========================================================= */

.dashboard-chart-y-label,
.dashboard-chart-x-label {
  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 11px !important;
  font-weight: 400 !important;
}


/* =========================================================
   DONUT
   ========================================================= */

.dashboard-donut-center strong {
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.dashboard-donut-center span {
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

.dashboard-donut-name {
  font-size: 11px !important;
  font-weight: 500 !important;
}

.dashboard-donut-legend-item strong {
  font-size: 11px !important;
  font-weight: 600 !important;
}

.dashboard-donut-legend-item small {
  font-size: 10px !important;
  font-weight: 400 !important;
}


/* =========================================================
   CLUSTER ANALYTICS
   ========================================================= */

.dashboard-cluster-item > strong {
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

.dashboard-cluster-donut-center b {
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.dashboard-cluster-details span {
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
}

.dashboard-cluster-details span b {
  font-size: 10px !important;
  font-weight: 600 !important;
}


/* =========================================================
   TOP LINE
   ========================================================= */

.dashboard-top-line-item > strong {
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

.dashboard-top-line-item > b {
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.dashboard-top-line-item > span {
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
}


/* =========================================================
   BUTTON
   ========================================================= */

button,
.primary-btn,
.secondary-btn,
.action-btn {
  font-family:
    "Segoe UI",
    system-ui,
    sans-serif !important;

  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .topbar h1 {
    font-size: 14px !important;
  }

  .clock {
    font-size: 16px !important;
  }

  .kpi-grid .kpi-value {
    font-size: 22px !important;
  }

  .card h3 {
    font-size: 12px !important;
  }

  .dashboard-analytics-card h3 {
    font-size: 14px !important;
  }

}

/* =========================================================
   STEP 38 — RESPONSIVE + FINAL CLEANUP
   ========================================================= */


/* =========================================================
   DESKTOP — 1200px+
   ========================================================= */

@media (min-width: 1200px) {

  main {
    width: 100% !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .kpi-grid {
    grid-template-columns:
      repeat(6, minmax(0, 1fr)) !important;
  }

  .dashboard-analytics-kpis {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
  }

  .dashboard-analytics-grid {
    grid-template-columns:
      minmax(0, 1.65fr)
      minmax(300px, .9fr) !important;
  }

}


/* =========================================================
   TABLET — 901px–1199px
   ========================================================= */

@media (min-width: 901px) and (max-width: 1199px) {

  main {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .kpi-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 12px !important;
  }

  .dashboard-analytics-kpis {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-analytics-grid {
    grid-template-columns:
      1fr !important;
  }

  .cards {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}


/* =========================================================
   TABLET KECIL — 701px–900px
   ========================================================= */

@media (min-width: 701px) and (max-width: 900px) {

  main {
    padding:
      16px
      20px
      24px !important;
  }

  .kpi-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;
  }

  .kpi-grid .kpi-card {
    height: 84px !important;
    min-height: 84px !important;
  }

  .dashboard-analytics-kpis {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-analytics-grid {
    grid-template-columns:
      1fr !important;
  }

  .cards {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .layout-panel .layout-map,
  .layout-panel .map-stage {
    min-height: 380px !important;
  }

}


/* =========================================================
   MOBILE — <=700px
   ========================================================= */

@media (max-width: 700px) {

  main {
    width: 100% !important;
    padding:
      12px
      14px
      20px !important;
  }


  /* KPI */

  .kpi-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;

    margin-bottom: 12px !important;
  }

  .kpi-grid .kpi-card {
    height: 82px !important;
    min-height: 82px !important;
    padding: 12px 13px !important;
  }

  .kpi-grid .kpi-label {
    font-size: 9px !important;
  }

  .kpi-grid .kpi-value {
    font-size: 22px !important;
  }


  /* Floor */

  .floor-tabs {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .floor-tab {
    min-width: 96px !important;
  }


  /* Layout */

  .layout-panel {
    margin-bottom: 16px !important;
  }

  .layout-panel .layout-map,
  .layout-panel .map-stage {
    min-height: 300px !important;
  }


  /* Live line */

  .cards {
    grid-template-columns:
      1fr !important;

    gap: 10px !important;
  }

  .card {
    min-height: 96px !important;
  }


  /* Analytics */

  .dashboard-analytics {
    margin-top: 16px !important;
  }

  .dashboard-analytics-kpis {
    grid-template-columns:
      1fr 1fr !important;

    gap: 10px !important;
  }

  .dashboard-analytics-grid {
    grid-template-columns:
      1fr !important;

    gap: 12px !important;
  }


  /* Cluster */

  .dashboard-cluster-grid {
    grid-template-columns:
      1fr !important;
  }


  /* Top line */

  .dashboard-top-lines {
    grid-template-columns:
      1fr !important;

    gap: 10px !important;
  }

  .dashboard-top-line-item {
    width: 100% !important;
  }


  /* Section titles */

  .dashboard-analytics-card h3 {
    font-size: 14px !important;
  }

}


/* =========================================================
   VERY SMALL MOBILE — <=480px
   ========================================================= */

@media (max-width: 480px) {

  .kpi-grid {
    grid-template-columns:
      1fr 1fr !important;
  }

  .kpi-grid .kpi-card {
    height: 78px !important;
    min-height: 78px !important;
  }

  .kpi-grid .kpi-value {
    font-size: 20px !important;
  }

  .dashboard-analytics-kpis {
    grid-template-columns:
      1fr !important;
  }

  .floor-tabs {
    width: 100% !important;
  }

  .floor-tab {
    flex: 1 0 auto !important;
    min-width: 90px !important;
  }

}

/* =========================================================
   STEP 39 — FINAL VISUAL CLEANUP
   ========================================================= */


/* =========================================================
   REMOVE OLD DARK VISUALS
   ========================================================= */

body,
main {
  background: #f5f7fb !important;
  color: #172033 !important;
}


/* =========================================================
   REMOVE TEXT SHADOW / GLOW
   ========================================================= */

* {
  text-shadow: none !important;
}


/* =========================================================
   PANELS
   ========================================================= */

.panel,
.layout-panel,
.history-panel,
.report-panel,
.settings-panel {
  color: #172033 !important;
  background: #ffffff !important;
  border-color: #dbe4ef !important;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, .035) !important;
}


/* =========================================================
   REMOVE OLD GRADIENTS
   ========================================================= */

.layout-panel,
.history-panel,
.report-panel,
.settings-panel,
.kpi-card {
  background-image: none !important;
}


/* =========================================================
   TABLE CLEANUP
   ========================================================= */

.history-panel table,
.report-panel table,
.settings-panel table {
  background: #ffffff !important;
}

.history-panel th,
.report-panel th,
.settings-panel th {
  background: #f8fafc !important;
  color: #475569 !important;
}

.history-panel td,
.report-panel td,
.settings-panel td {
  color: #334155 !important;
}


/* =========================================================
   INPUT CLEANUP
   ========================================================= */

input,
select,
textarea {
  color: #172033 !important;
  background: #ffffff !important;
  border-color: #d6e0ec !important;
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8 !important;
}


/* =========================================================
   BUTTON CLEANUP
   ========================================================= */

button {
  text-shadow: none !important;
}


/* =========================================================
   MODAL CLEANUP
   ========================================================= */

#lineModal .modal-card {
  background: #ffffff !important;
  color: #172033 !important;
  border: 1px solid #dbe4ef !important;
  box-shadow:
    0 18px 45px rgba(15, 23, 42, .12) !important;
}

#lineModal .modal-title {
  color: #172033 !important;
}

#lineModal .line-form label {
  color: #475569 !important;
}

#lineModal .line-form input,
#lineModal .line-form select {
  background: #ffffff !important;
  color: #172033 !important;
  border-color: #d6e0ec !important;
}


/* =========================================================
   REMOVE FOOTER COMPLETELY
   ========================================================= */

footer {
  display: none !important;
}


/* =========================================================
   REMOVE UNUSED STATUS BANNER
   ========================================================= */

.dashboard-status-banner,
.uptime-banner,
.dashboard-uptime-banner {
  display: none !important;
}


/* =========================================================
   CLEAN SCROLLBAR
   ========================================================= */

* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}


/* =========================================================
   REMOVE EXCESSIVE ROUNDED / SHADOW FEEL
   ========================================================= */

.report-card,
.history-summary-card,
.dashboard-analytics-card {
  box-shadow:
    0 2px 8px rgba(15, 23, 42, .035) !important;
}


/* =========================================================
   FINAL DESKTOP CONTENT
   ========================================================= */

@media (min-width: 1200px) {

  main {
    max-width: 1600px !important;
  }

}

/* =========================================================
   HISTORY — SPACING ANTAR SECTION
   ========================================================= */

.history-panel {
  background: #f5f7fb !important;
}

.history-panel .history-filters {
  margin-bottom: 14px !important;
}

.history-panel .history-summary {
  margin-bottom: 14px !important;
}

.history-panel .history-table-wrap {
  margin-top: 0 !important;
}

/* =========================================================
   HISTORY + REPORT FLOOR TABS
   ========================================================= */

.page-floor-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 18px 18px;
  padding: 4px;
  width: fit-content;
  background: #f1f5f9;
  border: 1px solid #dbe4ef;
  border-radius: 9px;
}

.page-floor-tab {
  border: 0;
  border-radius: 7px;
  padding: 8px 14px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}

.page-floor-tab:hover {
  background: #e2e8f0;
  color: #334155;
}

.page-floor-tab.active {
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
}

@media (max-width: 650px) {

  .page-floor-tabs {
    width: calc(100% - 36px);
    overflow-x: auto;
  }

  .page-floor-tab {
    white-space: nowrap;
  }

}

/* =========================================================
   ANDON — TAHAP 1: FONDASI (token + dasar)
   Semua warna/ukuran baru diambil dari variabel di bawah.
   ========================================================= */

:root {
  /* Permukaan */
  --ad-bg:            #f5f7fb;
  --ad-surface:       #ffffff;
  --ad-surface-alt:   #f8fafc;
  --ad-border:        #dbe4ef;
  --ad-border-strong: #cbd5e1;

  /* Teks */
  --ad-text:          #172033;
  --ad-text-2:        #475569;
  --ad-text-muted:    #64748b;

  /* Aksen antarmuka (tombol, link, fokus) */
  --ad-accent:        #2563eb;
  --ad-accent-hover:  #1d4ed8;
  --ad-accent-soft:   #eff6ff;

  /* Status: teks/indikator, latar lembut, border lembut */
  --ad-normal:        #16a34a;
  --ad-normal-bg:     #ecfdf3;
  --ad-normal-bd:     #bbf7d0;

  --ad-machine:       #dc2626;
  --ad-machine-bg:    #fef2f2;
  --ad-machine-bd:    #fecaca;

  --ad-material:      #d97706;
  --ad-material-bg:   #fffbeb;
  --ad-material-bd:   #fde68a;

  --ad-quality:       #2563eb;
  --ad-quality-bg:    #eff6ff;
  --ad-quality-bd:    #bfdbfe;

  --ad-offline:       #64748b;
  --ad-offline-bg:    #f1f5f9;
  --ad-offline-bd:    #dbe4f0;

  /* Bentuk */
  --ad-radius-sm:     8px;
  --ad-radius:        12px;
  --ad-shadow:        0 1px 2px rgba(15, 23, 42, .05);
  --ad-shadow-hover:  0 4px 14px rgba(15, 23, 42, .08);

  /* Font */
  --ad-font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

/* Dasar halaman */
html,
body[data-mode] {
  background: var(--ad-bg) !important;
  color: var(--ad-text) !important;
  font-family: var(--ad-font) !important;
  -webkit-font-smoothing: antialiased;
}

body[data-mode] button,
body[data-mode] input,
body[data-mode] select,
body[data-mode] textarea {
  font-family: var(--ad-font) !important;
}

/* Angka rata (jam, KPI, tabel) supaya tidak "bergoyang" saat update */
#clock,
.kpi-value,
.dashboard-analytics-kpi,
.history-summary-card,
.history-table td,
.settings-table td {
  font-variant-numeric: tabular-nums;
}

/* Fokus keyboard yang jelas */
body[data-mode] a:focus-visible,
body[data-mode] button:focus-visible,
body[data-mode] input:focus-visible,
body[data-mode] select:focus-visible {
  outline: 2px solid var(--ad-accent) !important;
  outline-offset: 2px !important;
}

/* Seleksi teks */
::selection {
  background: var(--ad-accent-soft);
  color: var(--ad-text);
}

/* Scrollbar tipis (tabel dan sidebar) */
* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

/* =========================================================
   ANDON — TAHAP 2: SHELL (topbar + footer sidebar)
   ========================================================= */

/* ---- Topbar ---- */
body[data-mode] .topbar {
  background: var(--ad-surface) !important;
  border-bottom: 1px solid var(--ad-border) !important;
  box-shadow: none !important;
}

body[data-mode] .topbar .company {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  color: var(--ad-text-muted) !important;
}

body[data-mode] .topbar h1 {
  margin: 2px 0 0 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ad-text) !important;
}

body[data-mode] .clock {
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--ad-accent) !important;
}

body[data-mode] .date {
  margin-top: 2px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ad-text-muted) !important;
}

/* ---- Tombol menu ---- */
body[data-mode] .sidebar-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: 10px !important;
  background: var(--ad-surface) !important;
  color: var(--ad-text-2) !important;
  box-shadow: var(--ad-shadow) !important;
  cursor: pointer;
}

body[data-mode] .sidebar-toggle:hover {
  background: var(--ad-surface-alt) !important;
  border-color: var(--ad-border-strong) !important;
}

body[data-mode] .sidebar-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* ---- Footer sidebar: login + status database ---- */
body[data-mode] .side-menu {
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}

body[data-mode] .side-footer {
  margin-top: auto !important;
  padding: 14px 12px 6px !important;
  border-top: 1px solid var(--ad-border) !important;
}

body[data-mode] .side-footer .side-login {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  color: var(--ad-text-2) !important;
}

body[data-mode] .side-footer .side-login-label {
  font-size: 11px;
  color: var(--ad-text-muted);
}

body[data-mode] .side-footer .side-login-user {
  font-size: 13px;
  font-weight: 600;
  color: var(--ad-text);
  overflow-wrap: anywhere;
}

body[data-mode] .side-footer #dbStatus {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--ad-text-muted) !important;
}

body[data-mode] .side-footer #dbStatus::before {
  content: "" !important;
  position: static !important;
  flex: 0 0 8px;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  transform: none !important;
  background: #94a3b8 !important;
}

body[data-mode] .side-footer #dbStatus[data-state="ok"]::before {
  background: var(--ad-normal) !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
}

body[data-mode] .side-footer #dbStatus[data-state="error"]::before {
  background: var(--ad-machine) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
}

body[data-mode] .side-footer #dbStatus[data-state="pending"]::before {
  background: var(--ad-material) !important;
}

/* =========================================================
   ANDON — TAHAP 2b: MENU SIDEBAR
   ========================================================= */

/* ---- Panel sidebar ---- */
body[data-mode] .side-menu {
  background: var(--ad-surface) !important;
  border-right: 1px solid var(--ad-border) !important;
  box-shadow: 8px 0 24px rgba(15, 23, 42, .08) !important;
}

/* ---- Judul seksi ---- */
body[data-mode] .side-section-title {
  margin: 20px 10px 6px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  color: var(--ad-text-muted) !important;
}

/* ---- Item menu ---- */
body[data-mode] .side-nav-item {
  position: relative !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  gap: 12px !important;
  border-radius: var(--ad-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ad-text-2) !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease !important;
}

body[data-mode] .side-nav-item .side-nav-icon {
  color: var(--ad-text-muted) !important;
}

body[data-mode] .side-nav-item .side-nav-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hover */
body[data-mode] .side-nav-item:hover {
  background: var(--ad-surface-alt) !important;
  color: var(--ad-text) !important;
}

body[data-mode] .side-nav-item:hover .side-nav-icon {
  color: var(--ad-text-2) !important;
}

/* Aktif */
body[data-mode] .side-nav-item.active {
  background: var(--ad-accent-soft) !important;
  color: var(--ad-accent-hover) !important;
  font-weight: 600 !important;
}

body[data-mode] .side-nav-item.active .side-nav-icon {
  color: var(--ad-accent) !important;
}

body[data-mode] .side-nav-item.active::before {
  background: var(--ad-accent) !important;
}

/* Fokus keyboard */
body[data-mode] .side-nav-item:focus-visible {
  outline: 2px solid var(--ad-accent) !important;
  outline-offset: -2px !important;
}

/* ---- Logout: tanda aksi keluar, bukan halaman ---- */
body[data-mode] .side-nav-item[href="/logout"]:hover {
  background: var(--ad-machine-bg) !important;
  color: var(--ad-machine) !important;
}

body[data-mode] .side-nav-item[href="/logout"]:hover .side-nav-icon {
  color: var(--ad-machine) !important;
}

/* =========================================================
   ANDON — TAHAP 3: DASHBOARD
   ========================================================= */

/* ---- Peredup saat sidebar terbuka ---- */
@keyframes adFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body[data-mode]:has(#sideMenu.is-open)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(15, 23, 42, .28);
  animation: adFadeIn .18s ease;
}

/* ---- Tab lantai ---- */
body[data-mode] .floor-tab {
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--ad-radius-sm) !important;
}

body[data-mode] .floor-tab.active {
  font-weight: 600 !important;
  background: var(--ad-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ---- KPI ---- */
body[data-mode] .kpi-grid .kpi-card {
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: var(--ad-shadow) !important;
}

body[data-mode] .kpi-grid .kpi-card:hover {
  transform: none !important;
  box-shadow: var(--ad-shadow) !important;
}

body[data-mode] .kpi-grid .kpi-label {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  color: var(--ad-text-muted) !important;
}

body[data-mode] .kpi-grid .kpi-value {
  font-size: 30px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}

/* Titik status kecil di label KPI */
body[data-mode] .kpi-card--normal   .kpi-label::before,
body[data-mode] .kpi-card--machine  .kpi-label::before,
body[data-mode] .kpi-card--material .kpi-label::before,
body[data-mode] .kpi-card--quality  .kpi-label::before,
body[data-mode] .kpi-card--offline  .kpi-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 7px;
}

body[data-mode] .kpi-card--normal   .kpi-label::before { background: var(--ad-normal); }
body[data-mode] .kpi-card--machine  .kpi-label::before { background: var(--ad-machine); }
body[data-mode] .kpi-card--material .kpi-label::before { background: var(--ad-material); }
body[data-mode] .kpi-card--quality  .kpi-label::before { background: var(--ad-quality); }
body[data-mode] .kpi-card--offline  .kpi-label::before { background: var(--ad-offline); }

/* ---- Panel denah ---- */
body[data-mode] .layout-panel {
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: var(--ad-shadow) !important;
}

body[data-mode] .layout-panel .panel-head {
  min-height: 52px !important;
  padding: 12px 18px !important;
}

body[data-mode] .layout-panel .panel-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  color: var(--ad-text) !important;
}

body[data-mode] .layout-panel .panel-subtitle {
  font-size: 12px !important;
  color: var(--ad-text-muted) !important;
}

body[data-mode] .layout-panel .legend > span {
  font-size: 12px !important;
  color: var(--ad-text-2) !important;
}

body[data-mode] .layout-panel .layout-map {
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius-sm) !important;
}

/* ---- Judul cluster ---- */
body[data-mode] .cluster-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  color: var(--ad-text-2) !important;
}

/* ---- Kartu line ---- */
body[data-mode] .cards .card {
  position: relative !important;
  padding-left: 20px !important;
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: var(--ad-shadow) !important;
}

body[data-mode] .cards .card:hover {
  transform: none !important;
  box-shadow: var(--ad-shadow-hover) !important;
}

/* Garis status di kiri */
body[data-mode] .cards .card::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 4px !important;
  border-radius: 0 4px 4px 0 !important;
  background: var(--ad-offline) !important;
}

body[data-mode] .cards .card.normal::before  { background: var(--ad-normal) !important; }
body[data-mode] .cards .card.danger::before  { background: var(--ad-machine) !important; }
body[data-mode] .cards .card.warning::before { background: var(--ad-material) !important; }
body[data-mode] .cards .card.quality::before { background: var(--ad-quality) !important; }
body[data-mode] .cards .card.offline::before { background: var(--ad-offline) !important; }

/* Hanya kartu bermasalah yang diberi tint tipis */
body[data-mode] .cards .card.danger {
  background: var(--ad-machine-bg) !important;
  border-color: var(--ad-machine-bd) !important;
}

body[data-mode] .cards .card.warning {
  background: var(--ad-material-bg) !important;
  border-color: var(--ad-material-bd) !important;
}

body[data-mode] .cards .card.quality {
  background: var(--ad-quality-bg) !important;
  border-color: var(--ad-quality-bd) !important;
}

/* Badge status */
body[data-mode] .cards .card.normal .badge   { background: var(--ad-normal-bg)   !important; color: var(--ad-normal)   !important; }
body[data-mode] .cards .card.danger .badge   { background: #fff !important;                    color: var(--ad-machine)  !important; }
body[data-mode] .cards .card.warning .badge  { background: #fff !important;                    color: var(--ad-material) !important; }
body[data-mode] .cards .card.quality .badge  { background: #fff !important;                    color: var(--ad-quality)  !important; }
body[data-mode] .cards .card.offline .badge  { background: var(--ad-offline-bg)  !important; color: var(--ad-offline)  !important; }

body[data-mode] .cards .card.normal .badge::before   { background: var(--ad-normal)   !important; }
body[data-mode] .cards .card.danger .badge::before   { background: var(--ad-machine)  !important; }
body[data-mode] .cards .card.warning .badge::before  { background: var(--ad-material) !important; }
body[data-mode] .cards .card.quality .badge::before  { background: var(--ad-quality)  !important; }
body[data-mode] .cards .card.offline .badge::before  { background: var(--ad-offline)  !important; }

/* Tombol reset */
body[data-mode] .cards .reset-line-btn {
  height: 30px !important;
  min-height: 30px !important;
  font-size: 11px !important;
  border-color: var(--ad-border-strong) !important;
  border-radius: var(--ad-radius-sm) !important;
  color: var(--ad-text-2) !important;
}

body[data-mode] .cards .reset-line-btn:hover {
  background: var(--ad-surface-alt) !important;
  color: var(--ad-text) !important;
}

/* =========================================================
   ANDON — TAHAP 4: HISTORY
   ========================================================= */

/* ---- Tab lantai (dipakai History dan Report) ---- */
body[data-mode] .page-floor-tabs {
  background: var(--ad-surface-alt) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: 10px !important;
}

body[data-mode] .page-floor-tab {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ad-text-2) !important;
  border-radius: var(--ad-radius-sm) !important;
}

body[data-mode] .page-floor-tab:hover {
  background: var(--ad-border) !important;
  color: var(--ad-text) !important;
}

body[data-mode] .page-floor-tab.active {
  background: var(--ad-surface) !important;
  color: var(--ad-accent) !important;
  font-weight: 600 !important;
  box-shadow: var(--ad-shadow) !important;
}

/* ---- Filter ---- */
body[data-mode="history"] .history-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: var(--ad-shadow) !important;
}

body[data-mode="history"] .history-filter-group label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  color: var(--ad-text-muted) !important;
}

body[data-mode="history"] .history-filter-group select,
body[data-mode="history"] .history-filter-group input[type="date"] {
  height: 38px !important;
  font-size: 13px !important;
  color: var(--ad-text) !important;
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border-strong) !important;
  border-radius: var(--ad-radius-sm) !important;
}

body[data-mode="history"] .history-filter-group select:focus,
body[data-mode="history"] .history-filter-group input[type="date"]:focus {
  border-color: var(--ad-accent) !important;
  outline: 2px solid var(--ad-accent-soft) !important;
}

body[data-mode="history"] .history-filters .secondary-btn {
  height: 38px !important;
  padding: 0 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ad-text-2) !important;
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border-strong) !important;
  border-radius: var(--ad-radius-sm) !important;
}

body[data-mode="history"] .history-filters .secondary-btn:hover {
  background: var(--ad-surface-alt) !important;
  color: var(--ad-text) !important;
}

/* ---- Kartu ringkasan ---- */
body[data-mode="history"] .history-summary-card {
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
  border-left: 3px solid var(--ad-accent) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: var(--ad-shadow) !important;
}

body[data-mode="history"] .history-summary-card::before {
  display: none !important;
}

body[data-mode="history"] .history-summary-card:nth-child(2) {
  border-left-color: var(--ad-material) !important;
}

body[data-mode="history"] .history-summary-card:nth-child(3) {
  border-left-color: var(--ad-machine) !important;
}

body[data-mode="history"] .history-summary-card small {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  color: var(--ad-text-muted) !important;
}

body[data-mode="history"] .history-summary-card strong {
  font-size: 28px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: var(--ad-text) !important;
  font-variant-numeric: tabular-nums;
}

body[data-mode="history"] .history-summary-card:nth-child(1) strong {
  color: var(--ad-accent) !important;
}

body[data-mode="history"] .history-summary-card:nth-child(3) strong {
  color: var(--ad-machine) !important;
}

/* ---- Tabel ---- */
body[data-mode="history"] .history-table-wrap {
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: var(--ad-shadow) !important;
  overflow-x: auto !important;
}

body[data-mode="history"] .history-table thead th {
  padding: 12px 18px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  color: var(--ad-text-muted) !important;
  background: var(--ad-surface-alt) !important;
  border-bottom: 1px solid var(--ad-border) !important;
}

body[data-mode="history"] .history-table tbody td {
  padding: 13px 18px !important;
  font-size: 13px !important;
  color: var(--ad-text) !important;
  border-bottom: 1px solid var(--ad-bg) !important;
  font-variant-numeric: tabular-nums;
}

body[data-mode="history"] .history-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

body[data-mode="history"] .history-table tbody tr:not(:has(.history-state.active)):hover td {
  background: var(--ad-surface-alt) !important;
}

/* Baris event yang masih aktif */
body[data-mode="history"] .history-table tbody tr:has(.history-state.active) td {
  background: var(--ad-machine-bg) !important;
}

body[data-mode="history"] .history-table tbody tr:has(.history-state.active):hover td {
  background: #fee2e2 !important;
}

/* ---- Chip Problem ---- */
body[data-mode="history"] .history-problem {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
}

body[data-mode="history"] .history-problem.machine {
  background: var(--ad-machine-bg) !important;
  color: var(--ad-machine) !important;
  border-color: var(--ad-machine-bd) !important;
}

body[data-mode="history"] .history-problem.material {
  background: var(--ad-material-bg) !important;
  color: var(--ad-material) !important;
  border-color: var(--ad-material-bd) !important;
}

body[data-mode="history"] .history-problem.quality {
  background: var(--ad-quality-bg) !important;
  color: var(--ad-quality) !important;
  border-color: var(--ad-quality-bd) !important;
}

/* ---- Chip Status ---- */
body[data-mode="history"] .history-state {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}

body[data-mode="history"] .history-state.closed {
  background: var(--ad-normal-bg) !important;
  color: var(--ad-normal) !important;
}

body[data-mode="history"] .history-state.active {
  background: #fff !important;
  color: var(--ad-machine) !important;
  border: 1px solid var(--ad-machine-bd) !important;
}

/* ---- Keadaan kosong / memuat ---- */
body[data-mode] .history-empty {
  padding: 40px 18px !important;
  text-align: center !important;
  font-size: 13px !important;
  color: var(--ad-text-muted) !important;
}

/* =========================================================
   ANDON — PERBAIKAN TAHAP 2b + 4
   ========================================================= */

/* ---- Sidebar: bayangan hanya saat terbuka ---- */
body[data-mode] .side-menu {
  box-shadow: none !important;
}

body[data-mode] .side-menu.is-open {
  box-shadow: 8px 0 24px rgba(15, 23, 42, .12) !important;
}

/* ---- Pemisahan antar-bagian (History dan Report) ---- */
:root {
  --ad-border-card: #d3dce8;
  --ad-shadow-card: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
}

/* Pembungkus luar: transparan, tanpa garis/bayangan */
body[data-mode="history"] .history-panel,
body[data-mode="history"] .history-panel.panel {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Tiap bagian jadi kartu yang jelas terpisah */
body[data-mode="history"] .history-filters,
body[data-mode="history"] .history-summary-card,
body[data-mode="history"] .history-table-wrap {
  background: var(--ad-surface) !important;
  border-color: var(--ad-border-card) !important;
  box-shadow: var(--ad-shadow-card) !important;
}

body[data-mode="history"] .history-summary-card {
  border-left-width: 3px !important;
}

body[data-mode="history"] .history-summary-card:nth-child(1) { border-left-color: var(--ad-accent) !important; }
body[data-mode="history"] .history-summary-card:nth-child(2) { border-left-color: var(--ad-material) !important; }
body[data-mode="history"] .history-summary-card:nth-child(3) { border-left-color: var(--ad-machine) !important; }

body[data-mode] .page-floor-tabs {
  background: var(--ad-surface) !important;
  border-color: var(--ad-border-card) !important;
  box-shadow: var(--ad-shadow-card) !important;
}

/* Jarak antar bagian */
body[data-mode="history"] .page-floor-tabs {
  margin-bottom: 16px !important;
}

body[data-mode="history"] .history-filters {
  margin-bottom: 16px !important;
}

body[data-mode="history"] .history-summary {
  margin-bottom: 16px !important;
  gap: 16px !important;
}

/* ---- Filter: kembali ke grid ---- */
body[data-mode="history"] .history-filters {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(150px, 220px)) auto !important;
  justify-content: start !important;
  align-items: end !important;
  gap: 16px !important;
}

body[data-mode="history"] .history-filter-group {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

body[data-mode="history"] .history-filters .secondary-btn {
  width: auto !important;
  white-space: nowrap !important;
}

@media (max-width: 800px) {
  body[data-mode="history"] .history-filters {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* =========================================================
   ANDON — TAHAP 5: REPORT
   ========================================================= */

/* ---- Pembungkus luar: transparan, judul ganda disembunyikan ---- */
body[data-mode="report"] .report-panel,
body[data-mode="report"] .report-panel.panel {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body[data-mode="report"] .report-panel > .panel-head {
  display: none !important;
}

body[data-mode="report"] .page-floor-tabs {
  margin-bottom: 16px !important;
}

/* ---- KPI analitik ---- */
body[data-mode="report"] .dashboard-analytics-kpis {
  gap: 16px !important;
  margin-bottom: 16px !important;
}

body[data-mode="report"] .dashboard-analytics-kpi {
  padding: 16px 18px !important;
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border-card) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: var(--ad-shadow-card) !important;
}

body[data-mode="report"] .dashboard-analytics-kpi small {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  color: var(--ad-text-muted) !important;
}

body[data-mode="report"] .dashboard-analytics-kpi strong {
  font-size: 26px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: var(--ad-text) !important;
  font-variant-numeric: tabular-nums;
}

body[data-mode="report"] .dashboard-analytics-kpi:nth-child(4) strong {
  color: var(--ad-machine) !important;
}

/* ---- Kartu analitik ---- */
body[data-mode="report"] .dashboard-analytics-grid {
  gap: 16px !important;
  margin-bottom: 16px !important;
}

body[data-mode="report"] .dashboard-analytics-card {
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border-card) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: var(--ad-shadow-card) !important;
}

body[data-mode="report"] .dashboard-analytics-card:not(:last-child) {
  margin-bottom: 16px;
}

body[data-mode="report"] .dashboard-analytics-grid .dashboard-analytics-card {
  margin-bottom: 0;
}

body[data-mode="report"] .dashboard-analytics-card-head h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ad-text) !important;
}

/* ---- Grafik tren ---- */
body[data-mode="report"] .dashboard-chart-grid {
  stroke: #e2e8f0 !important;
  stroke-dasharray: 3 4;
}

body[data-mode="report"] .dashboard-chart-y-label,
body[data-mode="report"] .dashboard-chart-x-label {
  fill: var(--ad-text-muted) !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
}

body[data-mode="report"] .dashboard-gradient-top {
  stop-color: var(--ad-accent) !important;
  stop-opacity: .16 !important;
}

body[data-mode="report"] .dashboard-gradient-bottom {
  stop-color: var(--ad-accent) !important;
  stop-opacity: 0 !important;
}

body[data-mode="report"] .dashboard-chart-line {
  stroke: var(--ad-accent) !important;
  stroke-width: 2.5 !important;
}

body[data-mode="report"] .dashboard-chart-point {
  r: 4px;
  fill: var(--ad-surface) !important;
  stroke: var(--ad-accent) !important;
  stroke-width: 2.5 !important;
  cursor: pointer;
  transition: r .15s ease, fill .15s ease !important;
}

body[data-mode="report"] .dashboard-chart-point-inner {
  fill: var(--ad-accent) !important;
  r: 0;
  transition: r .15s ease;
  pointer-events: none;
}

/* Titik disorot: membesar (dan tooltip muncul lewat skrip) */
body[data-mode="report"] .dashboard-chart-point.is-hover,
body[data-mode="report"] .dashboard-chart-point:hover {
  r: 7px;
  fill: var(--ad-accent-soft) !important;
  stroke-width: 3 !important;
}

body[data-mode="report"] .dashboard-chart-point.is-hover + .dashboard-chart-point-inner {
  r: 2.5px;
}

/* ---- Tooltip dan garis bantu ---- */
.ad-tip {
  position: fixed;
  z-index: 200;
  min-width: 160px;
  padding: 10px 12px;
  background: var(--ad-surface);
  border: 1px solid var(--ad-border-strong);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
  font-family: var(--ad-font);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ad-text);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}

.ad-tip.is-visible {
  opacity: 1;
}

.ad-tip-date {
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--ad-text-muted);
}

.ad-tip-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--ad-text-2);
}

.ad-tip-value b {
  font-size: 20px;
  font-weight: 600;
  color: var(--ad-text);
  font-variant-numeric: tabular-nums;
}

.ad-tip-delta {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--ad-bg);
  font-size: 11px;
  font-weight: 500;
}

.ad-tip-delta.up   { color: var(--ad-machine); }
.ad-tip-delta.down { color: var(--ad-normal); }
.ad-tip-delta.flat { color: var(--ad-text-muted); }

.ad-tip-guide {
  position: fixed;
  z-index: 150;
  width: 0;
  border-left: 1px dashed var(--ad-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ad-tip,
  .ad-tip-guide,
  body[data-mode="report"] .dashboard-chart-point {
    transition: none !important;
  }
}

/* ---- Legenda donut, tile cluster, line paling sering terpicu ---- */
body[data-mode="report"] .dashboard-donut-legend-item {
  border-radius: 8px !important;
  transition: background .15s ease;
}

body[data-mode="report"] .dashboard-donut-legend-item:hover {
  background: var(--ad-surface-alt) !important;
}

body[data-mode="report"] .dashboard-cluster-item {
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius) !important;
}

body[data-mode="report"] .dashboard-cluster-item:hover {
  border-color: var(--ad-accent) !important;
  box-shadow: var(--ad-shadow-hover) !important;
}

body[data-mode="report"] .dashboard-cluster-item.is-total {
  background: var(--ad-accent-soft) !important;
  border-color: var(--ad-accent) !important;
}

body[data-mode="report"] .dashboard-top-line-item {
  border: 1px solid var(--ad-border-card) !important;
  border-left: 3px solid var(--ad-accent) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: var(--ad-shadow) !important;
}

/* =========================================================
   ANDON — TAHAP 6a: SETTINGS — PANEL + TABEL MANAJEMEN LINE
   Hanya berlaku di halaman /settings.
   ========================================================= */

/* ---- Panel ---- */
body[data-mode="settings"] .settings-panel {
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: var(--ad-shadow) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body[data-mode="settings"] .settings-panel .panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ad-border) !important;
}

body[data-mode="settings"] .settings-panel .panel-title {
  font-family: var(--ad-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  color: var(--ad-text) !important;
}

body[data-mode="settings"] .settings-panel .panel-subtitle {
  margin-top: 4px !important;
  max-width: 62ch !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--ad-text-muted) !important;
}

/* ---- Tombol tambah line ---- */
body[data-mode="settings"] #addLineBtn {
  height: 36px !important;
  padding: 0 16px !important;
  font-family: var(--ad-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
  color: #fff !important;
  background: var(--ad-accent) !important;
  border: 1px solid var(--ad-accent) !important;
  border-radius: var(--ad-radius-sm) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}

body[data-mode="settings"] #addLineBtn:hover {
  background: var(--ad-accent-hover) !important;
  border-color: var(--ad-accent-hover) !important;
}

body[data-mode="settings"] #addLineBtn:active {
  transform: translateY(1px);
}

/* ---- Pembungkus tabel ---- */
body[data-mode="settings"] .settings-panel .table-wrap {
  margin: 20px !important;
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: none !important;
  overflow-x: auto !important;
}

body[data-mode="settings"] .settings-panel .settings-table {
  width: 100% !important;
  min-width: 880px !important;
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* ---- Header tabel ---- */
body[data-mode="settings"] .settings-panel .settings-table thead th {
  padding: 12px 16px !important;
  font-family: var(--ad-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-align: left !important;
  white-space: nowrap !important;
  color: var(--ad-text-muted) !important;
  background: var(--ad-surface-alt) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ad-border) !important;
}

/* ---- Isi tabel ---- */
body[data-mode="settings"] .settings-panel .settings-table tbody td {
  padding: 14px 16px !important;
  font-family: var(--ad-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--ad-text) !important;
  background: transparent !important;
  vertical-align: middle !important;
  font-variant-numeric: tabular-nums;
  border: 0 !important;
  border-bottom: 1px solid var(--ad-bg) !important;
}

body[data-mode="settings"] .settings-panel .settings-table tbody td b {
  font-weight: 600 !important;
}

body[data-mode="settings"] .settings-panel .settings-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

body[data-mode="settings"] .settings-panel .settings-table tbody tr:hover td {
  background: var(--ad-surface-alt) !important;
}

/* Kolom Lantai lebih redup, kolom Posisi rapi dan tidak terpotong */
body[data-mode="settings"] .settings-panel .settings-table tbody td:nth-child(1) {
  color: var(--ad-text-muted) !important;
}

body[data-mode="settings"] .settings-panel .settings-table tbody td:nth-child(7) {
  color: var(--ad-text-muted) !important;
  white-space: nowrap !important;
}

/* ---- Badge status Aktif / Nonaktif ---- */
body[data-mode="settings"] .settings-table .line-active {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
}

body[data-mode="settings"] .settings-table .line-active::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

body[data-mode="settings"] .settings-table .line-active.yes {
  color: #15803d !important;
  background: var(--ad-normal-bg) !important;
  border-color: var(--ad-normal-bd) !important;
}

body[data-mode="settings"] .settings-table .line-active.no {
  color: #475569 !important;
  background: var(--ad-offline-bg) !important;
  border-color: var(--ad-offline-bd) !important;
}

/* ---- Baris nonaktif ---- */
body[data-mode="settings"] .settings-panel .settings-table tbody tr.inactive-row td {
  background: var(--ad-surface-alt) !important;
}

body[data-mode="settings"] .settings-panel .settings-table tbody tr.inactive-row td:not(.table-actions) {
  color: var(--ad-text-muted) !important;
}

body[data-mode="settings"] .settings-panel .settings-table tbody tr.inactive-row td b {
  font-weight: 500 !important;
}

/* ---- Kolom Aksi: kembali jadi sel tabel biasa (memperbaiki garis miring) ---- */
body[data-mode="settings"] .settings-panel .settings-table td.table-actions {
  display: table-cell !important;
  white-space: nowrap !important;
  text-align: left !important;
}

body[data-mode="settings"] .settings-panel .settings-table td.table-actions .mini-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 30px !important;
  margin: 0 6px 0 0 !important;
  padding: 0 12px !important;
  font-family: var(--ad-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  vertical-align: middle !important;
  color: var(--ad-text) !important;
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border-strong) !important;
  border-radius: var(--ad-radius-sm) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

body[data-mode="settings"] .settings-panel .settings-table td.table-actions .mini-btn:last-child {
  margin-right: 0 !important;
}

body[data-mode="settings"] .settings-panel .settings-table td.table-actions .mini-btn:hover {
  color: var(--ad-accent) !important;
  background: var(--ad-accent-soft) !important;
  border-color: var(--ad-accent) !important;
}

body[data-mode="settings"] .settings-panel .settings-table td.table-actions .mini-btn.danger-btn {
  color: var(--ad-machine) !important;
  border-color: var(--ad-machine-bd) !important;
}

body[data-mode="settings"] .settings-panel .settings-table td.table-actions .mini-btn.danger-btn:hover {
  color: #b91c1c !important;
  background: var(--ad-machine-bg) !important;
  border-color: var(--ad-machine) !important;
}

body[data-mode="settings"] .settings-panel .settings-table td.table-actions .mini-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---- Fokus keyboard ---- */
body[data-mode="settings"] #addLineBtn:focus-visible,
body[data-mode="settings"] .settings-table .mini-btn:focus-visible {
  outline: 2px solid var(--ad-accent) !important;
  outline-offset: 2px !important;
}

/* ---- Keadaan kosong / memuat ---- */
body[data-mode="settings"] #settingsLineBody .history-empty {
  padding: 40px 16px !important;
  text-align: center !important;
  font-size: 13px !important;
  color: var(--ad-text-muted) !important;
}

/* ---- Layar kecil ---- */
@media (max-width: 800px) {
  body[data-mode="settings"] .settings-panel .panel-head {
    flex-wrap: wrap !important;
  }

  body[data-mode="settings"] .settings-panel .table-wrap {
    margin: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-mode="settings"] #addLineBtn,
  body[data-mode="settings"] .settings-table .mini-btn {
    transition: none !important;
  }
}

/* =========================================================
   ANDON — TAHAP 6b: SETTINGS — MODAL TAMBAH / EDIT LINE
   Hanya berlaku di /settings. Buka/tutup tetap lewat class
   .hidden dari app.js (display tidak disentuh).
   ========================================================= */

@keyframes adModalRise {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---- Cegah halaman ikut bergulir saat modal terbuka ---- */
html:has(body[data-mode="settings"]) {
  scrollbar-gutter: stable;
}

body[data-mode="settings"]:has(#lineModal:not(.hidden)) {
  overflow: hidden !important;
}

/* ---- Latar gelap ---- */
body[data-mode="settings"] #lineModal {
  z-index: 120 !important;
  padding: 20px !important;
  background: rgba(15, 23, 42, .45) !important;
  backdrop-filter: blur(2px);
}

body[data-mode="settings"] #lineModal:not(.hidden) {
  animation: adFadeIn .16s ease;
}

/* ---- Kartu modal ---- */
body[data-mode="settings"] #lineModal .modal-card {
  width: min(560px, 100%) !important;
  max-height: calc(100vh - 40px) !important;
  padding: 0 !important;
  overflow-y: auto !important;
  color: var(--ad-text) !important;
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22) !important;
}

body[data-mode="settings"] #lineModal:not(.hidden) .modal-card {
  animation: adModalRise .2s cubic-bezier(.22, .9, .3, 1);
}

/* ---- Header modal ---- */
body[data-mode="settings"] #lineModal .modal-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 18px 22px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ad-border) !important;
}

body[data-mode="settings"] #lineModal .modal-title {
  font-family: var(--ad-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  color: var(--ad-text) !important;
}

body[data-mode="settings"] #lineModal .modal-subtitle {
  margin-top: 4px !important;
  max-width: 46ch !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--ad-text-muted) !important;
}

/* ---- Tombol tutup (×) ---- */
body[data-mode="settings"] #lineModal .modal-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--ad-text-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--ad-radius-sm) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

body[data-mode="settings"] #lineModal .modal-close:hover {
  color: var(--ad-text) !important;
  background: var(--ad-surface-alt) !important;
  border-color: var(--ad-border) !important;
}

/* ---- Form: grid 2 kolom ---- */
body[data-mode="settings"] #lineModal .line-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 16px !important;
  padding: 20px 22px 0 !important;
  margin: 0 !important;
}

body[data-mode="settings"] #lineModal .line-form .full,
body[data-mode="settings"] #lineModal .line-form label.full {
  grid-column: 1 / -1 !important;
}

body[data-mode="settings"] #lineModal .line-form label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
}

body[data-mode="settings"] #lineModal .line-form label > span {
  font-family: var(--ad-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  color: var(--ad-text) !important;
}

/* ---- Input & select ---- */
body[data-mode="settings"] #lineModal .line-form input,
body[data-mode="settings"] #lineModal .line-form select {
  width: 100% !important;
  height: 38px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  font-family: var(--ad-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ad-text) !important;
  background-color: var(--ad-surface) !important;
  border: 1px solid var(--ad-border-strong) !important;
  border-radius: var(--ad-radius-sm) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body[data-mode="settings"] #lineModal .line-form input[type="number"] {
  font-variant-numeric: tabular-nums;
}

body[data-mode="settings"] #lineModal .line-form input::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}

body[data-mode="settings"] #lineModal .line-form input:hover,
body[data-mode="settings"] #lineModal .line-form select:hover {
  border-color: #94a3b8 !important;
}

body[data-mode="settings"] #lineModal .line-form input:focus,
body[data-mode="settings"] #lineModal .line-form select:focus {
  border-color: var(--ad-accent) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important;
}

/* Select: panah kustom supaya seragam di semua browser */
body[data-mode="settings"] #lineModal .line-form select {
  padding-right: 34px !important;
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
}

/* Isian tidak valid (hanya setelah pengguna mengisi/menyentuh) */
body[data-mode="settings"] #lineModal .line-form input:user-invalid {
  border-color: var(--ad-machine) !important;
}

body[data-mode="settings"] #lineModal .line-form input:user-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important;
}

/* ---- Pesan form ---- */
body[data-mode="settings"] #lineModal .form-message {
  padding: 10px 12px !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: #1e40af !important;
  background: var(--ad-accent-soft) !important;
  border: 1px solid var(--ad-quality-bd) !important;
  border-radius: var(--ad-radius-sm) !important;
}

body[data-mode="settings"] #lineModal .form-message.error {
  color: #b91c1c !important;
  background: var(--ad-machine-bg) !important;
  border-color: var(--ad-machine-bd) !important;
}

/* Kosong: tetap ada di DOM (aria-live), tapi tidak memakan ruang */
body[data-mode="settings"] #lineModal .form-message:empty {
  margin: -7px 0 !important;
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
}

/* ---- Baris tombol: bar bawah selebar kartu ---- */
body[data-mode="settings"] #lineModal .modal-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 6px -22px 0 !important;
  padding: 14px 22px !important;
  background: var(--ad-surface-alt) !important;
  border: 0 !important;
  border-top: 1px solid var(--ad-border) !important;
}

body[data-mode="settings"] #lineModal .modal-actions button {
  height: 36px !important;
  min-width: 88px !important;
  padding: 0 18px !important;
  font-family: var(--ad-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  border-radius: var(--ad-radius-sm) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

body[data-mode="settings"] #lineModal .modal-actions .primary-btn {
  color: #fff !important;
  background: var(--ad-accent) !important;
  border: 1px solid var(--ad-accent) !important;
}

body[data-mode="settings"] #lineModal .modal-actions .primary-btn:hover {
  background: var(--ad-accent-hover) !important;
  border-color: var(--ad-accent-hover) !important;
}

body[data-mode="settings"] #lineModal .modal-actions .secondary-btn {
  color: var(--ad-text) !important;
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border-strong) !important;
}

body[data-mode="settings"] #lineModal .modal-actions .secondary-btn:hover {
  background: var(--ad-surface-alt) !important;
  border-color: #94a3b8 !important;
}

body[data-mode="settings"] #lineModal .modal-actions button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ---- Fokus keyboard ---- */
body[data-mode="settings"] #lineModal .modal-close:focus-visible,
body[data-mode="settings"] #lineModal .modal-actions button:focus-visible {
  outline: 2px solid var(--ad-accent) !important;
  outline-offset: 2px !important;
}

/* ---- Ikon tombol tabel (dipakai bersama perubahan app.js) ---- */
body[data-mode="settings"] .settings-table .mini-btn .btn-ico {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Layar kecil ---- */
@media (max-width: 560px) {
  body[data-mode="settings"] #lineModal .line-form {
    grid-template-columns: 1fr !important;
  }

  body[data-mode="settings"] #lineModal .modal-actions button {
    flex: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-mode="settings"] #lineModal,
  body[data-mode="settings"] #lineModal .modal-card {
    animation: none !important;
  }
}

/* =========================================================
   ANDON — TAHAP 6c-1: DENAH — MARKER + ZOOM CONTROL
   Berlaku di Dashboard dan Settings (marker dipakai bersama).
   ========================================================= */

@keyframes adMarkerPulse {
  0%, 100% { scale: 1; }
  45%      { scale: 1.05; }
}

@keyframes adMarkerRing {
  0%   { transform: scale(.94); opacity: .5; }
  70%  { transform: scale(1.14); opacity: .12; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* ---- Marker: bentuk dasar ---- */
body[data-mode] .layout-panel .marker {
  --mk: var(--ad-offline);

  /* posisi dasar dipertahankan; efek hover/drag memakai scale/translate terpisah */
  transform: translate(-50%, -50%) !important;

  min-width: 68px !important;
  max-width: 124px !important;
  min-height: 26px !important;
  padding: 5px 10px !important;
  font-family: var(--ad-font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
  color: #fff !important;
  background: var(--mk) !important;
  border: 1.5px solid #fff !important;
  border-radius: var(--ad-radius-sm) !important;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, .28),
    0 4px 10px rgba(15, 23, 42, .14) !important;
  transition:
    scale .15s ease,
    translate .15s ease,
    box-shadow .15s ease !important;
}

/* ---- Warna status (fill sedikit lebih gelap agar teks putih terbaca) ---- */
body[data-mode] .layout-panel .marker.normal  { --mk: #15803d; }
body[data-mode] .layout-panel .marker.danger  { --mk: #dc2626; }
body[data-mode] .layout-panel .marker.warning { --mk: #b45309; }
body[data-mode] .layout-panel .marker.quality { --mk: #2563eb; }
body[data-mode] .layout-panel .marker.offline { --mk: #64748b; }

/* ---- Hover ---- */
body[data-mode] .layout-panel .marker:hover {
  transform: translate(-50%, -50%) !important;
  translate: 0 -2px;
  scale: 1.04;
  z-index: 40 !important;
  filter: none !important;
  box-shadow:
    0 2px 5px rgba(15, 23, 42, .3),
    0 8px 18px rgba(15, 23, 42, .18) !important;
}

/* ---- Problem aktif: denyut + cincin berwarna status ---- */
body[data-mode] .layout-panel .marker.status-pulse {
  z-index: 30 !important;
  animation: adMarkerPulse 1.4s ease-in-out infinite !important;
}

body[data-mode] .layout-panel .marker.status-pulse::after {
  inset: -5px !important;
  border: 2px solid var(--mk) !important;
  border-radius: 11px !important;
  opacity: .5;
  animation: adMarkerRing 1.4s ease-out infinite !important;
}

/* ---- Zoom control ---- */
body[data-mode] .layout-panel .zoom-controls {
  top: 12px !important;
  right: 12px !important;
  gap: 2px !important;
  padding: 4px !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow: var(--ad-shadow-hover) !important;
}

body[data-mode] .layout-panel .zoom-controls button {
  width: 34px !important;
  height: 30px !important;
  font-family: var(--ad-font) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--ad-text-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--ad-radius-sm) !important;
  box-shadow: none !important;
}

body[data-mode] .layout-panel .zoom-controls #zoomResetBtn,
body[data-mode] .layout-panel .zoom-controls #zoomFitBtn {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  font-variant-numeric: tabular-nums;
}

body[data-mode] .layout-panel .zoom-controls button:hover {
  color: var(--ad-accent) !important;
  background: var(--ad-accent-soft) !important;
  border-color: var(--ad-quality-bd) !important;
}

body[data-mode] .layout-panel .zoom-controls button:active {
  transform: scale(.95);
}

body[data-mode] .layout-panel .zoom-controls button:focus-visible {
  outline: 2px solid var(--ad-accent) !important;
  outline-offset: 1px !important;
}

/* ---- Layar kecil ---- */
@media (max-width: 650px) {
  body[data-mode] .layout-panel .marker {
    min-width: 56px !important;
    max-width: 96px !important;
    min-height: 24px !important;
    padding: 4px 7px !important;
    font-size: 9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-mode] .layout-panel .marker,
  body[data-mode] .layout-panel .marker.status-pulse,
  body[data-mode] .layout-panel .marker.status-pulse::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   ANDON — TAHAP 6c-2: SETTINGS — SIMPAN POSISI + DRAG MARKER
   ========================================================= */

/* ---- Susunan alat di header denah ---- */
body[data-mode="settings"] .layout-panel .panel-tools {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

/* ---- Tombol SIMPAN POSISI ---- */
body[data-mode="settings"] #saveLayoutBtn {
  height: 34px !important;
  padding: 0 14px !important;
  font-family: var(--ad-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
  color: #fff !important;
  background: var(--ad-accent) !important;
  border: 1px solid var(--ad-accent) !important;
  border-radius: var(--ad-radius-sm) !important;
  /* cincin halus = ada perubahan posisi yang belum disimpan */
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18) !important;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body[data-mode="settings"] #saveLayoutBtn:hover:not(:disabled) {
  background: var(--ad-accent-hover) !important;
  border-color: var(--ad-accent-hover) !important;
}

/* Belum ada perubahan: tombol redup dan tanpa cincin */
body[data-mode="settings"] #saveLayoutBtn:disabled {
  color: var(--ad-text-muted) !important;
  background: var(--ad-surface-alt) !important;
  border-color: var(--ad-border) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

body[data-mode="settings"] #saveLayoutBtn:focus-visible {
  outline: 2px solid var(--ad-accent) !important;
  outline-offset: 2px !important;
}

/* ---- Marker yang bisa digeser ---- */
body[data-mode="settings"] .layout-panel .marker.draggable-marker {
  cursor: grab !important;
  user-select: none;
  touch-action: none; /* agar bisa digeser di layar sentuh tanpa ikut scroll */
}

body[data-mode="settings"] .layout-panel .marker.draggable-marker:active {
  cursor: grabbing !important;
}

body[data-mode="settings"] .layout-panel .marker.dragging {
  cursor: grabbing !important;
  z-index: 100 !important;
  scale: 1.08;
  transition: none !important;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, .28),
    0 0 0 3px rgba(37, 99, 235, .35) !important;
}

/* =========================================================
   ANDON — TAHAP 6d-1: TOMBOL GLOBAL (.primary-btn / .secondary-btn)
   Dasar bersama untuk semua halaman. Aturan khusus per halaman
   (6a, 6b, 6c, Tahap 4) tetap menang karena lebih spesifik.
   ========================================================= */

body[data-mode] .primary-btn,
body[data-mode] .secondary-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  font-family: var(--ad-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-radius: var(--ad-radius-sm) !important;
  box-shadow: none !important;
  cursor: pointer;
  user-select: none;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .1s ease !important;
}

/* ---- Primary ---- */
body[data-mode] .primary-btn {
  color: #fff !important;
  background: var(--ad-accent) !important;
  border: 1px solid var(--ad-accent) !important;
}

body[data-mode] .primary-btn:hover:not(:disabled) {
  background: var(--ad-accent-hover) !important;
  border-color: var(--ad-accent-hover) !important;
}

/* ---- Secondary ---- */
body[data-mode] .secondary-btn {
  color: var(--ad-text-2) !important;
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border-strong) !important;
}

body[data-mode] .secondary-btn:hover:not(:disabled) {
  color: var(--ad-text) !important;
  background: var(--ad-surface-alt) !important;
  border-color: #94a3b8 !important;
}

/* ---- Keadaan bersama ---- */
body[data-mode] .primary-btn:active:not(:disabled),
body[data-mode] .secondary-btn:active:not(:disabled) {
  transform: translateY(1px);
}

body[data-mode] .primary-btn:disabled,
body[data-mode] .secondary-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

body[data-mode] .primary-btn:focus-visible,
body[data-mode] .secondary-btn:focus-visible {
  outline: 2px solid var(--ad-accent) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  body[data-mode] .primary-btn,
  body[data-mode] .secondary-btn {
    transition: none !important;
  }
}

/* ---- Ikon disket pada tombol SIMPAN POSISI (pengganti emoji) ---- */
body[data-mode="settings"] #saveLayoutBtn::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v13H5z'/%3E%3Cpath d='M8 4v5h7V4'/%3E%3Cpath d='M8 20v-6h8v6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v13H5z'/%3E%3Cpath d='M8 4v5h7V4'/%3E%3Cpath d='M8 20v-6h8v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   ANDON — HALAMAN LOGIN (light clean)
   Halaman login tidak memakai data-mode, jadi Tahap 1–5 belum
   berlaku di sana. Semua aturan diawali body:has(.login-card)
   supaya tidak menyentuh halaman lain.
   ========================================================= */

body:has(.login-card) {
  background: var(--ad-bg) !important;
  color: var(--ad-text) !important;
  font-family: var(--ad-font) !important;
  -webkit-font-smoothing: antialiased;
}

body:has(.login-card) .login-page {
  background: transparent !important;
}

/* ---- Kartu ---- */
body:has(.login-card) .login-card {
  width: min(400px, 100%) !important;
  padding: 32px !important;
  color: var(--ad-text) !important;
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .05),
    0 16px 40px rgba(15, 23, 42, .08) !important;
  font-family: var(--ad-font) !important;
}

/* Logo DP (dekoratif), sama seperti di sidebar */
body:has(.login-card) .login-card::before {
  content: "DP";
  content: "DP" / "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: var(--ad-accent);
  border-radius: 10px;
}

/* ---- Teks ---- */
body:has(.login-card) .login-brand {
  margin: 0 0 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  color: var(--ad-text-muted) !important;
}

body:has(.login-card) .login-card h1 {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
  color: var(--ad-text) !important;
}

body:has(.login-card) .login-subtitle {
  margin: 8px 0 24px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--ad-text-muted) !important;
}

/* ---- Form ---- */
body:has(.login-card) .login-form {
  display: grid !important;
  gap: 16px !important;
}

body:has(.login-card) .login-form label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

body:has(.login-card) .login-form label span {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  color: var(--ad-text-muted) !important;
}

body:has(.login-card) .login-form input {
  width: 100% !important;
  height: 40px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  font-family: var(--ad-font) !important;
  font-size: 14px !important;
  color: var(--ad-text) !important;
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border-strong) !important;
  border-radius: var(--ad-radius-sm) !important;
  box-shadow: none