/* ── CARDS ── */
.card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--rad2);overflow:hidden}
.card-head{padding:12px 16px 10px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:4px}
.card-title{font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.9px;font-family:var(--mono);font-weight:600}
.card-body{padding:14px 16px}

/* ── METRICS ── */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.metric{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--rad2);padding:14px 16px;position:relative;overflow:hidden}
.metric::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.m-amber::before{background:linear-gradient(90deg,var(--teal),transparent)}
.m-teal::before{background:linear-gradient(90deg,var(--teal),transparent)}
.m-green::before{background:linear-gradient(90deg,var(--green),transparent)}
.m-red::before{background:linear-gradient(90deg,var(--red),transparent)}
.m-blue::before{background:linear-gradient(90deg,var(--blue),transparent)}
.metric-label{font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:1px;font-family:var(--mono)}
.metric-val{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--txt);margin:6px 0 3px;line-height:1}
.metric-val sup{font-size:12px;font-weight:400;color:var(--txt3)}
.metric-sub{font-size:11px;color:var(--txt2);display:flex;align-items:center;gap:5px}
.metric-ico{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:22px;opacity:.07}
.bar-mini{height:3px;background:var(--bg5);border-radius:2px;margin-top:8px;overflow:hidden}
.bar-fill{height:100%;border-radius:2px;transition:width .5s}

/* ── GRIDS ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.g12{display:grid;grid-template-columns:1fr 2fr;gap:12px;margin-bottom:12px}
.g21{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:12px}
.mb12{margin-bottom:12px}

/* ── MACHINE CARDS ── */
.mach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mach-card{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--rad2);padding:14px;border-left:3px solid var(--bdr2);transition:all .15s}
.mach-card:hover{background:var(--bg4);transform:translateY(-1px)}
.mach-card.s-run{border-left-color:var(--green)}
.mach-card.s-idle{border-left-color:var(--yellow)}
.mach-card.s-down{border-left-color:var(--red)}
.mach-card.s-maint{border-left-color:var(--purple)}
.mach-uts{font-family:var(--mono);font-size:10px;color:var(--txt3)}
.mach-name{font-family:var(--display);font-size:13px;font-weight:700;color:var(--txt);margin:3px 0 6px}

/* Status pills */
.sp{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-family:var(--mono);padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}
.sp-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.sp-run{background:var(--green-dim);color:var(--green);border:1px solid rgba(163,230,53,.22)}.sp-run .sp-dot{background:var(--green);box-shadow:0 0 4px var(--green)}
.sp-idle{background:var(--yellow-dim);color:var(--yellow);border:1px solid rgba(251,191,36,.2)}.sp-idle .sp-dot{background:var(--yellow)}
.sp-down{background:var(--red-dim);color:var(--red);border:1px solid rgba(248,113,113,.22)}.sp-down .sp-dot{background:var(--red);animation:blink 1s infinite}
.sp-maint{background:rgba(167,139,250,.10);color:var(--purple);border:1px solid rgba(167,139,250,.22)}.sp-maint .sp-dot{background:var(--purple)}

/* Light mode status pills — warna disesuaikan kontras ivory */
[data-theme="light"] .sp-run{background:rgba(61,122,10,.10);color:var(--green);border-color:rgba(61,122,10,.20)}
[data-theme="light"] .sp-run .sp-dot{background:var(--green);box-shadow:none}
[data-theme="light"] .sp-idle{background:rgba(154,107,0,.10);color:var(--yellow);border-color:rgba(154,107,0,.20)}
[data-theme="light"] .sp-idle .sp-dot{background:var(--yellow)}
[data-theme="light"] .sp-down{background:rgba(192,40,42,.10);color:var(--red);border-color:rgba(192,40,42,.20)}
[data-theme="light"] .sp-maint{background:rgba(112,48,192,.10);color:var(--purple);border-color:rgba(112,48,192,.20)}

.mach-row{display:flex;gap:10px;margin-top:10px}
.mstat{flex:1;background:var(--bg2);border-radius:5px;padding:6px 8px;text-align:center}
.mstat-l{font-size:9px;color:var(--txt3);font-family:var(--mono)}
.mstat-v{font-family:var(--mono);font-size:12px;font-weight:700;margin-top:1px}
.oee-track{height:3px;background:var(--bg5);border-radius:2px;margin-top:8px;overflow:hidden}
.oee-fill{height:100%;border-radius:2px;background:var(--teal)}

/* ── TABLES ── */
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl thead th{padding:8px 10px;text-align:left;font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:.9px;border-bottom:1px solid var(--bdr);font-family:var(--mono);font-weight:600}
.tbl tbody td{padding:9px 10px;border-bottom:1px solid var(--bdr);color:var(--txt2);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:rgba(255,255,255,.02)}
.tbl-inp{background:var(--bg3);border:1px solid var(--bdr2);color:var(--txt);padding:3px 6px;border-radius:4px;font-size:11px;font-family:var(--mono);outline:none}
.tbl-inp:focus{border-color:var(--amber)}
.tbl tfoot td{padding:8px 10px;font-size:11px;font-weight:600;background:var(--bg3);color:var(--txt);font-family:var(--mono);border-top:1px solid var(--bdr2)}

/* Light mode thead — warm tint */
[data-theme="light"] .tbl thead th{background:rgba(80,50,10,.04)}
[data-theme="light"] .tbl tbody tr:hover{background:rgba(80,50,10,.03)}
[data-theme="light"] .tbl tfoot td{background:var(--bg3)}

.mono{font-family:var(--mono)}

/* ── BADGES ── */
.badge{display:inline-block;font-size:9px;font-family:var(--mono);padding:2px 7px;border-radius:4px;font-weight:600;letter-spacing:.3px}
.b-green{background:var(--green-dim);color:var(--green)}
.b-red{background:var(--red-dim);color:var(--red)}
.b-yellow{background:var(--yellow-dim);color:var(--yellow)}
.b-amber{background:var(--amber-dim);color:var(--amber)}
.b-blue{background:var(--blue-dim);color:var(--blue)}
.b-purple{background:rgba(167,139,250,.10);color:var(--purple)}
.b-teal{background:var(--teal-dim);color:var(--teal)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--rad);font-size:12px;font-family:var(--body);font-weight:600;cursor:pointer;border:none;transition:all .15s}
.btn-amber{background:var(--amber);color:#0a0a0a}.btn-amber:hover{background:var(--amber2);transform:translateY(-1px)}
.btn-ghost{background:var(--bg3);border:1px solid var(--bdr2);color:var(--txt2)}.btn-ghost:hover{background:var(--bg4);color:var(--txt)}
.btn-red{background:var(--red-dim);color:var(--red);border:1px solid rgba(248,113,113,.22)}.btn-red:hover{background:var(--red);color:white}
.btn-teal{background:var(--teal-dim);color:var(--teal);border:1px solid rgba(34,211,238,.22)}.btn-teal:hover{background:var(--teal);color:#060e14}
.btn-green{background:var(--green-dim);color:var(--green);border:1px solid rgba(163,230,53,.22)}.btn-green:hover{background:var(--green);color:#060e14}
.btn-sm{padding:6px 12px;font-size:12px}.btn-xs{padding:3px 8px;font-size:10px;gap:4px}

/* Light mode buttons — kontras warm ivory */
[data-theme="light"] .btn-amber{background:var(--amber);color:#fffdf8}
[data-theme="light"] .btn-amber:hover{background:var(--amber2)}
[data-theme="light"] .btn-teal{background:var(--teal-dim);color:var(--teal);border-color:rgba(7,121,160,.22)}
[data-theme="light"] .btn-teal:hover{background:var(--teal);color:#fffdf8}
[data-theme="light"] .btn-green{background:var(--green-dim);color:var(--green);border-color:rgba(61,122,10,.22)}
[data-theme="light"] .btn-green:hover{background:var(--green);color:#fffdf8}
[data-theme="light"] .btn-red{background:var(--red-dim);color:var(--red);border-color:rgba(192,40,42,.22)}
[data-theme="light"] .btn-red:hover{background:var(--red);color:#fffdf8}

/* ── FORMS ── */
.fs{margin-bottom:18px}
.fs-title{font-size:9px;color:var(--teal);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--teal-dim);font-family:var(--mono);font-weight:700}
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:.6px;font-family:var(--mono)}
.fg input,.fg select,.fg textarea{background:var(--bg3);border:1px solid var(--bdr2);border-radius:var(--rad);padding:8px 10px;font-size:12px;font-family:var(--body);color:var(--txt);outline:none;transition:border-color .15s,box-shadow .15s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-dim)}
.fg input[readonly]{color:var(--teal);font-family:var(--mono);background:var(--bg2);cursor:default}
.fg select option{background:var(--bg3)}
.fg textarea{resize:vertical;min-height:65px;line-height:1.5}
.fgrid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fgrid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}

/* ── TABS ── */
.tab-bar{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--bdr);padding-bottom:0}
.tab-btn{padding:8px 16px;border:none;border-radius:var(--rad) var(--rad) 0 0;font-size:11px;font-family:var(--mono);cursor:pointer;color:var(--txt3);background:none;transition:all .15s;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab-btn:hover{color:var(--txt2)}
.tab-btn.active{color:var(--teal);border-bottom-color:var(--teal)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadein .15s ease}

/* ── PROGRESS ── */
.prog{height:4px;background:var(--bg5);border-radius:2px;overflow:hidden}
.pf-h{height:100%;border-radius:2px;transition:width .6s ease}
.pf-amber{background:var(--amber)}.pf-teal{background:var(--teal)}.pf-green{background:var(--green)}
.pf-red{background:var(--red)}.pf-blue{background:var(--blue)}.pf-yellow{background:var(--yellow)}

/* ── OEE ── */
.oee-gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.oee-g{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--rad2);padding:14px;text-align:center}
.oee-label{font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:.9px;font-family:var(--mono);margin-bottom:8px}
.oee-val{font-family:var(--mono);font-size:24px;font-weight:700}

/* ── ALERTS ── */
.alert{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--rad);margin-bottom:8px;border:1px solid transparent}
.alert-danger{background:var(--red-dim);border-color:rgba(255,77,90,.15)}
.alert-warning{background:var(--yellow-dim);border-color:rgba(251,191,36,.15)}
.alert-info{background:var(--blue-dim);border-color:rgba(56,189,248,.15)}
.alert-success{background:var(--green-dim);border-color:rgba(163,230,53,.15)}
[data-theme="light"] .alert-danger{background:var(--red-dim);border-color:rgba(192,40,42,.18)}
[data-theme="light"] .alert-warning{background:var(--yellow-dim);border-color:rgba(154,107,0,.18)}
[data-theme="light"] .alert-info{background:var(--blue-dim);border-color:rgba(22,104,176,.18)}
[data-theme="light"] .alert-success{background:var(--green-dim);border-color:rgba(61,122,10,.18)}
.alert-icon{font-size:13px;margin-top:1px;flex-shrink:0}
.alert-title{font-size:12px;font-weight:600}
.alert-desc{font-size:11px;color:var(--txt2);margin-top:1px;line-height:1.4}
.alert-time{font-size:9px;color:var(--txt3);font-family:var(--mono);margin-top:3px}

/* ── TIMELINE ── */
.timeline{padding-left:22px;position:relative}
.timeline::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:var(--bdr2)}
.tl-item{position:relative;padding-bottom:14px}
.tl-dot{position:absolute;left:-16px;top:5px;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg0)}
.tl-card{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--rad);padding:9px 11px}
.tl-name{font-size:12px;font-weight:600;color:var(--txt)}
.tl-meta{font-size:10px;color:var(--txt3);font-family:var(--mono);margin-top:2px}
.tl-dur{font-family:var(--mono);font-weight:700;font-size:13px;margin-top:3px}

/* ════════════════════════════════════════
   LAP FILTER CARD — Laporan Harian
   ════════════════════════════════════════ */
.lap-filter-card{
  background:var(--bg2);
  border:1px solid var(--bdr);
  border-radius:var(--rad2);
  margin-bottom:16px;
  overflow:hidden;
}

/* Header strip */
.lap-filter-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 14px;
  background:var(--bg3);
  border-bottom:1px solid var(--bdr);
}
.lap-filter-title{
  font-size:9px;
  font-family:var(--mono);
  font-weight:600;
  color:var(--txt3);
  text-transform:uppercase;
  letter-spacing:.9px;
  display:flex;
  align-items:center;
  gap:6px;
}
.lap-filter-title i{color:var(--teal);font-size:9px}

.lap-filter-reset{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px;
  border-radius:20px;
  background:transparent;
  border:1px solid var(--bdr2);
  color:var(--txt3);
  font-size:10px;
  font-family:var(--body);
  cursor:pointer;
  transition:all .15s;
}
.lap-filter-reset:hover{
  border-color:var(--teal);
  color:var(--teal);
  background:var(--teal-dim);
}

/* Filter body — satu baris horizontal scroll-friendly */
.lap-filter-body{
  display:flex;
  align-items:stretch;
  padding:10px 14px;
  gap:0;
  flex-wrap:wrap;
  row-gap:10px;
}

/* Group divider vertikal */
.lap-fgroup-divider{
  width:1px;
  background:var(--bdr);
  margin:0 12px;
  align-self:stretch;
  flex-shrink:0;
}

/* Satu grup filter */
.lap-fgroup{
  display:flex;
  flex-direction:column;
  gap:7px;
  flex-shrink:0;
}
.lap-fgroup-label{
  font-size:9px;
  font-family:var(--mono);
  color:var(--txt4);
  text-transform:uppercase;
  letter-spacing:.7px;
  display:flex;
  align-items:center;
  gap:4px;
}
.lap-fgroup-label i{font-size:8px}

.lap-fgroup-controls{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

/* Input dengan prefix label inline */
.lap-finput-wrap{
  display:flex;
  align-items:center;
  background:var(--bg3);
  border:1px solid var(--bdr2);
  border-radius:var(--rad);
  overflow:hidden;
  transition:border-color .15s;
}
.lap-finput-wrap:focus-within{border-color:var(--teal)}

.lap-finput-prefix{
  padding:0 8px;
  font-size:9px;
  font-family:var(--mono);
  color:var(--txt4);
  background:var(--bg4);
  border-right:1px solid var(--bdr2);
  height:100%;
  display:flex;
  align-items:center;
  white-space:nowrap;
  letter-spacing:.3px;
  text-transform:uppercase;
  min-height:28px;
}

.lap-finput{
  background:transparent;
  border:none;
  color:var(--txt);
  padding:4px 8px;
  font-size:12px;
  font-family:var(--body);
  outline:none;
  width:120px;
  min-height:28px;
}
.lap-finput::placeholder{color:var(--txt4)}

.lap-fselect{
  background:var(--bg3);
  border:1px solid var(--bdr2);
  color:var(--txt);
  padding:5px 8px;
  border-radius:var(--rad);
  font-size:12px;
  font-family:var(--body);
  outline:none;
  cursor:pointer;
  min-height:28px;
  transition:border-color .15s;
}
.lap-fselect:focus{border-color:var(--teal)}

/* Chip button "All Time" */
.lap-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:20px;
  background:transparent;
  border:1px dashed var(--bdr2);
  color:var(--txt3);
  font-size:10px;
  font-family:var(--body);
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
  min-height:28px;
}
.lap-chip:hover{
  border-color:var(--teal);
  color:var(--teal);
  background:var(--teal-dim);
  border-style:solid;
}
.lap-chip i{font-size:9px}

/* ── LIGHT MODE overrides ── */
[data-theme="light"] .lap-filter-card{background:var(--bg2);border-color:var(--bdr)}
[data-theme="light"] .lap-filter-header{background:var(--bg3)}
[data-theme="light"] .lap-finput-prefix{background:var(--bg4)}
[data-theme="light"] .lap-fselect{background:var(--bg3)}
[data-theme="light"] .lap-finput{color:var(--txt)}

/* ════════════════════════════════════════════════════════════
   ALL FILTER PATCH — styles tambahan untuk semua filter bar
   ════════════════════════════════════════════════════════════ */

/* lap-chip active state — untuk dt-period-btn */
.lap-chip.active,
.dt-period-btn.active.lap-chip{
  border-color:var(--teal);
  color:var(--teal);
  background:var(--teal-dim);
  border-style:solid;
  font-weight:600;
}

/* dt-custom-range inline flex when shown */
#dt-custom-range[style*="flex"]{display:flex !important}
#dt-custom-placeholder{transition:opacity .2s}

/* analisa-dari-wrap / analisa-sampai-wrap */
#analisa-dari-wrap,#analisa-sampai-wrap{display:none}

/* lap-finput full width for date on small groups */
.lap-finput[type="date"]{min-width:120px}

/* ══════════════════════════════════════════════════════════════
   Progress Order BI — dashboard hero + grid ring, versi ringkas.
   Menampilkan HANYA persentase progress (bar/ring) tanpa tabel
   data mentah, tapi tetap informatif lewat label & tooltip.
   ══════════════════════════════════════════════════════════════ */
.obi-hero{
  display:flex; align-items:center; gap:22px;
  padding:14px 16px; margin-bottom:16px;
  background:linear-gradient(135deg,var(--bg2),var(--bg3));
  border:1px solid var(--bdr); border-radius:var(--rad2);
  position:relative; overflow:hidden;
}
.obi-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 85% -10%, var(--teal-dim), transparent 60%);
  pointer-events:none;
}
.obi-hero-ring{ flex:0 0 auto; position:relative; z-index:1; }
.obi-hero-ring svg{ display:block; transform:rotate(-90deg); }
.obi-hero-ring-bg{ fill:none; stroke:var(--bg5); }
.obi-hero-ring-fg{ fill:none; stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1), stroke .4s; }
.obi-hero-ring-label{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; transform:none;
}
.obi-hero-ring-pct{ font-family:var(--mono); font-size:22px; font-weight:800; color:var(--txt); line-height:1; }
.obi-hero-ring-pct sup{ font-size:11px; font-weight:600; color:var(--txt3); }
.obi-hero-info{ flex:1; min-width:0; position:relative; z-index:1; }
.obi-hero-info-title{ font-size:9px; letter-spacing:1.2px; text-transform:uppercase; color:var(--txt3); font-family:var(--mono); margin-bottom:4px; }
.obi-hero-info-main{ font-size:15px; font-weight:700; color:var(--txt); margin-bottom:6px; }
.obi-hero-info-sub{ font-size:11.5px; color:var(--txt2); }
.obi-hero-info-sub b{ color:var(--txt); font-weight:700; }

.obi-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(126px,1fr));
  gap:10px;
}
.obi-chip{
  background:var(--bg2); border:1px solid var(--bdr); border-radius:var(--rad2);
  padding:11px 12px 10px; cursor:default; transition:transform .15s,border-color .15s;
  position:relative;
}
.obi-chip:hover{ transform:translateY(-2px); border-color:var(--teal-dim); }
.obi-chip-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.obi-chip-pecahan{ font-family:var(--mono); font-size:11px; font-weight:700; color:var(--txt2); }
.obi-chip-flag{ font-size:9px; }
.obi-chip-pct{ font-family:var(--mono); font-size:17px; font-weight:800; line-height:1; margin-bottom:6px; }
.obi-chip .prog{ height:5px; }

/* ══════════════════════════════════════════════════════════════
   CHAT — Operator Mesin ↔ Supervisor/Admin (Fitur baru)
   ══════════════════════════════════════════════════════════════ */
#chat-fab{
  position:fixed; right:22px; bottom:22px; z-index:900;
  width:52px; height:52px; border-radius:50%;
  background:var(--amber); color:#1a1305; border:none; cursor:grab;
  font-size:20px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35); transition:transform .15s;
  touch-action:none; user-select:none;
}
#chat-fab:hover{ transform:scale(1.06); }
#chat-fab.dragging{ cursor:grabbing; transition:none; transform:scale(1.08); box-shadow:0 12px 32px rgba(0,0,0,.5); }
#chat-fab-badge{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px;
  border-radius:10px; background:var(--red); color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-family:var(--mono);
  border:2px solid var(--bg1);
}

#chat-panel{
  position:fixed; right:22px; bottom:86px; z-index:900;
  width:360px; height:500px; max-height:min(600px, 78vh);
  background:var(--bg2); border:1px solid var(--bdr2); border-radius:var(--rad2);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  display:none; flex-direction:column; overflow:hidden;
}
#chat-panel.open{ display:flex; }
/* Selagi digeser: nonaktifkan transisi & highlight sedikit supaya kelihatan "terangkat" */
#chat-panel.dragging{ transition:none; box-shadow:0 24px 70px rgba(0,0,0,.6); user-select:none; }

#chat-panel-head{
  padding:12px 14px; background:var(--bg3); border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  cursor:grab; touch-action:none;
}
#chat-panel-head:active{ cursor:grabbing; }
#chat-panel.dragging #chat-panel-head{ cursor:grabbing; }
/* Tombol di dalam header tetap kursor normal supaya jelas itu bisa diklik, bukan area geser */
#chat-panel-head button{ cursor:pointer; }
#chat-panel-title-wrap{ display:flex; align-items:center; gap:8px; min-width:0; }
#chat-panel-drag-hint{ font-size:11px; color:var(--txt4); pointer-events:none; }
#chat-panel-title{ font-family:var(--display); font-weight:700; font-size:13px; color:var(--amber); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#chat-back-btn{ background:none; border:none; color:var(--txt3); cursor:pointer; font-size:13px; padding:2px; }
#chat-back-btn:hover{ color:var(--amber); }

#chat-channel-list{ flex:1; overflow-y:auto; }
.chat-channel-item{
  display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer;
  border-bottom:1px solid var(--bdr); transition:background .1s;
}
.chat-channel-item:hover{ background:var(--bg3); }
.chat-channel-mesin{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--txt); }
.chat-channel-preview{ font-size:11px; color:var(--txt3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.chat-channel-unread{
  margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--red); color:#fff; font-size:10px; font-weight:800; font-family:var(--mono);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

#chat-thread-wrap{ flex:1; display:flex; flex-direction:column; min-height:0; }
#chat-thread-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.chat-bubble{
  max-width:82%; padding:8px 11px; border-radius:12px; font-size:13px; line-height:1.45;
  word-wrap:break-word;
}
.chat-bubble-mine{ align-self:flex-end; background:var(--teal-dim); color:var(--txt); border:1px solid var(--teal); border-bottom-right-radius:2px; }
.chat-bubble-other{ align-self:flex-start; background:var(--bg4); color:var(--txt); border:1px solid var(--bdr); border-bottom-left-radius:2px; }
.chat-bubble-meta{ font-size:9px; color:var(--txt4); margin-top:3px; font-family:var(--mono); }
.chat-bubble-role{ font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.chat-bubble-mine .chat-bubble-role{ color:var(--teal); }
.chat-bubble-other .chat-bubble-role{ color:var(--amber); }

#chat-thread-input-row{
  display:flex; gap:8px; padding:10px; border-top:1px solid var(--bdr); background:var(--bg3); flex-shrink:0;
}
/* Status online/typing di header thread */
#chat-thread-status{ font-size:10.5px; color:var(--txt4); padding:2px 14px 0; min-height:14px; }
#chat-thread-status.online{ color:var(--green,#4cc97c); }
.chat-online-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green,#4cc97c); margin-right:4px; }
.chat-room-icon{ position:relative; }
.chat-room-icon .chat-online-dot{ position:absolute; bottom:-1px; right:-1px; margin:0; border:2px solid var(--bg2,#1b1b1f); }

/* Indikator "sedang mengetik…" */
#chat-typing-indicator{ font-size:11px; color:var(--txt3); padding:0 14px 4px; font-style:italic; }

/* Banner balas pesan */
#chat-reply-banner{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 10px; margin:0 10px; border-left:3px solid var(--teal); background:var(--bg3);
  border-radius:4px 6px 6px 4px;
}
#chat-reply-banner-label{ font-size:9.5px; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:.4px; }
#chat-reply-banner-text{ font-size:11px; color:var(--txt3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; }
#chat-reply-banner button{ background:none; border:none; color:var(--txt4); cursor:pointer; font-size:12px; }
#chat-reply-banner button:hover{ color:var(--red); }

/* Preview lampiran sebelum kirim */
#chat-attach-preview{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 10px; margin:6px 10px 0; border:1px dashed var(--bdr); border-radius:6px; font-size:11px; color:var(--txt3);
}
#chat-attach-preview button{ background:none; border:none; color:var(--txt4); cursor:pointer; font-size:12px; }
#chat-attach-preview button:hover{ color:var(--red); }

/* Preview pesan yang dibalas, tampil di dalam bubble */
.chat-bubble-reply-quote{
  font-size:10.5px; color:var(--txt3); background:rgba(0,0,0,.15); border-left:2px solid var(--teal);
  padding:3px 6px; margin-bottom:4px; border-radius:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; cursor:pointer;
}
.chat-bubble-reply-quote b{ color:var(--teal); font-weight:700; }

/* Lampiran gambar/dokumen di dalam bubble */
.chat-bubble-attachment-img{ max-width:220px; max-height:220px; border-radius:8px; display:block; margin-bottom:4px; cursor:pointer; }
.chat-bubble-attachment-file{
  display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:6px; background:rgba(0,0,0,.15);
  font-size:11px; color:var(--txt); text-decoration:none; margin-bottom:4px;
}
.chat-bubble-attachment-file i{ color:var(--amber); }

/* Pesan dihapus */
.chat-bubble-deleted{ font-style:italic; color:var(--txt4); font-size:11.5px; }
.chat-bubble-edited-tag{ font-size:9px; color:var(--txt4); font-style:italic; margin-left:4px; }

/* Tombol aksi (balas/edit/hapus) — muncul saat hover bubble */
.chat-bubble{ position:relative; }
.chat-bubble-actions{
  position:absolute; top:-11px; display:none; gap:2px; background:var(--bg4); border:1px solid var(--bdr);
  border-radius:6px; padding:2px; box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.chat-bubble-mine .chat-bubble-actions{ right:6px; }
.chat-bubble-other .chat-bubble-actions{ left:6px; }
.chat-bubble:hover .chat-bubble-actions{ display:flex; }
.chat-bubble-actions button{ background:none; border:none; color:var(--txt3); cursor:pointer; font-size:10.5px; padding:3px 5px; border-radius:4px; }
.chat-bubble-actions button:hover{ color:var(--amber); background:var(--bg3); }

/* Centang baca (read receipt) di bubble milik sendiri */
.chat-bubble-read-tick{ color:var(--txt4); }
.chat-bubble-read-tick.read{ color:var(--teal); }

#chat-input{
  flex:1; background:var(--bg1); border:1px solid var(--bdr); border-radius:8px;
  padding:8px 10px; color:var(--txt); font-size:12.5px; outline:none;
}
#chat-input:focus{ border-color:var(--teal); }
#chat-thread-input-row button{
  width:36px; height:36px; border-radius:8px; background:var(--amber); color:#1a1305;
  border:none; cursor:pointer; flex-shrink:0;
}

@media (max-width: 480px){
  #chat-panel{ width:calc(100vw - 24px); height:min(560px, 78vh); right:12px; }
  #chat-fab{ right:14px; bottom:14px; }
  /* Di layar sempit panel tidak digeser manual (lihat initChatPanelDrag) — kursor kembali normal */
  #chat-panel-head{ cursor:default; }
}

/* ── Chat v2 — tambahan: header baru, daftar percakapan, picker user/grup ── */
#chat-new-btn{ background:none; border:none; color:var(--txt3); cursor:pointer; font-size:15px; padding:2px 4px; }
#chat-new-btn:hover{ color:var(--amber); }

#chat-room-list{ flex:1; overflow-y:auto; }
.chat-room-item{
  display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer;
  border-bottom:1px solid var(--bdr); transition:background .1s;
}
.chat-room-item:hover{ background:var(--bg3); }
.chat-room-icon{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  background:var(--bg4); color:var(--txt3);
}
.chat-room-icon.tipe-direct{ background:var(--teal-dim); color:var(--teal); }
.chat-room-icon.tipe-group{ background:var(--amber-dim); color:var(--amber); }
.chat-room-icon.tipe-gilir{ background:var(--green-dim,rgba(76,201,124,.15)); color:var(--green); }
.chat-room-nama{ font-size:12.5px; font-weight:700; color:var(--txt); }
.chat-room-preview{ font-size:11px; color:var(--txt3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.chat-room-unread{
  margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--red); color:#fff; font-size:10px; font-weight:800; font-family:var(--mono);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.chat-empty-hint{ padding:24px 16px; text-align:center; color:var(--txt3); font-size:12px; line-height:1.6; }

/* Picker chat baru / buat grup */
#chat-new-picker{ flex:1; display:flex; flex-direction:column; min-height:0; }
#chat-new-picker-tabs{ display:flex; border-bottom:1px solid var(--bdr); flex-shrink:0; }
.chat-tab-btn{
  flex:1; padding:10px 6px; background:none; border:none; cursor:pointer;
  color:var(--txt3); font-size:11.5px; font-weight:600; border-bottom:2px solid transparent;
}
.chat-tab-btn.active{ color:var(--amber); border-bottom-color:var(--amber); }
#chat-new-direct-tab, #chat-new-group-tab{ flex:1; overflow-y:auto; min-height:0; display:flex; flex-direction:column; }
#chat-user-list, #chat-group-user-list{ flex:1; overflow-y:auto; }
.chat-user-item{
  display:flex; align-items:center; gap:10px; padding:9px 14px; cursor:pointer;
  border-bottom:1px solid var(--bdr);
}
.chat-user-item:hover{ background:var(--bg3); }
.chat-user-nama{ font-size:12.5px; font-weight:600; color:var(--txt); }
.chat-user-meta{ font-size:10.5px; color:var(--txt4); font-family:var(--mono); }
.chat-user-item input[type="checkbox"]{ width:15px; height:15px; flex-shrink:0; }
#chat-group-name{
  background:var(--bg1); border:1px solid var(--bdr); border-radius:8px; padding:8px 10px;
  color:var(--txt); font-size:12.5px; outline:none;
}
#chat-group-name:focus{ border-color:var(--teal); }

/* =========================================================
   DASHBOARD SLIDESHOW — menampilkan semua kartu informasi
   dashboard bergantian otomatis (metrik, Progress Order BI,
   grafik, downtime & alert), cocok untuk layar TV produksi.
   ========================================================= */
.dash-slideshow{ position:relative; }

.dash-slide-viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:var(--rad2);
  transition:height .35s ease;
}
.dash-slide{
  position:absolute;
  top:0; left:0; right:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(14px);
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.dash-slide.active{
  position:relative;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
  transition:opacity .45s ease, transform .45s ease;
}
.dash-slide .metrics,
.dash-slide .g21,
.dash-slide .g2,
.dash-slide .card{ margin-bottom:0; }

.dash-slide-controls{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:10px;
}
.dash-slide-btn{
  width:26px; height:26px; border-radius:50%;
  background:var(--bg2); border:1px solid var(--bdr2);
  color:var(--txt2); font-size:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s,color .15s,border-color .15s;
}
.dash-slide-btn:hover{ background:var(--bg3); color:var(--teal); border-color:var(--teal); }
.dash-slide-playbtn{ margin-left:4px; }
.dash-slide-playbtn.is-paused{ color:var(--amber); border-color:var(--amber2); }

.dash-slide-dots{ display:flex; align-items:center; gap:7px; }
.dash-slide-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--bdr3); border:none; padding:0; cursor:pointer;
  transition:background .2s,transform .2s,width .2s;
}
.dash-slide-dot:hover{ background:var(--txt3); }
.dash-slide-dot.active{ background:var(--teal); width:20px; border-radius:4px; }

.dash-slide-progress{
  height:2px; background:var(--bdr); border-radius:2px;
  margin-top:8px; overflow:hidden;
}
.dash-slide-progress-fill{
  height:100%; width:0%; background:var(--teal); border-radius:2px;
}
.dash-slide-progress-fill.no-anim{ transition:none !important; }

[data-theme="light"] .dash-slide-btn{ background:var(--bg2); border-color:var(--bdr); }
[data-theme="light"] .dash-slide-dot{ background:var(--bdr2); }

@media (max-width: 860px){
  .dash-slide .g21,
  .dash-slide .g2{ grid-template-columns:1fr; }
  .dash-slide .metrics{ grid-template-columns:repeat(2,1fr); }
}

/* =========================================================
   MODE LAYAR PENUH (TV MODE) — untuk dashboard dipasang di TV
   produksi: sidebar & topbar disembunyikan, konten dashboard
   diperbesar supaya kebaca dari jarak jauh, plus browser
   Fullscreen API (lihat toggleTvMode() di script.js).
   ========================================================= */
body.tv-mode #sidebar{ display:none; }
body.tv-mode #main{ margin-left:0; }
body.tv-mode .topbar{ display:none; }

/* Ikon/panel Chat ikut disembunyikan di Mode Layar Penuh — bukan bagian
   dari informasi produksi yang perlu tampil di TV. */
body.tv-mode #chat-fab,
body.tv-mode #chat-panel{ display:none !important; }

/* Konten dashboard mengisi PERSIS 1 layar penuh (100vh), tanpa scroll —
   header + slideshow dibuat flex-column. Slide diberi ruang penuh tapi
   ISINYA di-CENTER secara vertikal (bukan dipaksa stretch edge-to-edge)
   supaya proporsinya tetap wajar & rapi walau ruang yang tersedia besar. */
body.tv-mode #pg-dashboard{
  height:100vh; max-height:100vh; overflow:hidden;
  display:flex; flex-direction:column;
  padding:30px 52px 26px;
}
body.tv-mode #pg-dashboard .pg-actions,
body.tv-mode #pg-dashboard .lap-filter-card{ display:none; }
body.tv-mode #pg-dashboard .pg-header{ flex:0 0 auto; margin-bottom:22px; padding-bottom:16px; }
body.tv-mode #pg-dashboard .pg-title{ font-size:28px; }
body.tv-mode #pg-dashboard .pg-sub{ font-size:14px; margin-top:6px; }

body.tv-mode .dash-slideshow{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
body.tv-mode .dash-slide-viewport{ flex:1 1 auto; min-height:0; overflow:hidden; }
body.tv-mode .dash-slide{ height:100%; }
/* Kunci "rapi"-nya di sini: konten tiap slide di-CENTER, bukan di-stretch.
   Jadi kalau kontennya "pendek" (mis. cuma 4 kartu metrik), dia tampil
   proporsional di tengah dengan gap yang nyaman — bukan dipaksa mepet
   ke atas & bawah layar sampai terlihat aneh. */
body.tv-mode .dash-slide.active{
  display:flex; flex-direction:column; justify-content:center;
  height:100%; gap:26px;
}

body.tv-mode .dash-slide-controls{ flex:0 0 auto; margin-top:18px; }
body.tv-mode .dash-slide-progress{ flex:0 0 auto; }

/* ── Slide 1 — Ringkasan ──────────────────────────────────────────── */
body.tv-mode .dash-slide .metrics{ flex:0 0 auto; }
body.tv-mode .dash-slide .metric{ padding:26px; }
body.tv-mode #pg-dashboard .metric-label{ font-size:13px; }
body.tv-mode #pg-dashboard .metric-val{ font-size:44px; margin:12px 0 8px; }
body.tv-mode #pg-dashboard .metric-val sup{ font-size:18px; }
body.tv-mode #pg-dashboard .metric-sub{ font-size:14px; }
body.tv-mode #pg-dashboard .metric-ico{ font-size:34px; }
body.tv-mode #pg-dashboard .bar-mini{ height:6px; margin-top:12px; }

/* Ringkasan Cepat — strip data tambahan di bawah metrik (Slide 1), berisi
   3 angka nyata yang ditarik langsung dari data yang sama dipakai di
   halaman lain: total alert aktif, progress Order BI tahun berjalan, dan
   total downtime hari ini. Diisi oleh dashUpdateQuickStrip() di script.js. */
.dash-quick-strip{
  display:none; /* hanya tampil di Mode Layar Penuh, lihat aturan di bawah */
  flex:0 0 auto; gap:14px;
}
body.tv-mode .dash-quick-strip{ display:grid; grid-template-columns:repeat(3,1fr); }
.dash-quick-item{
  background:var(--bg3); border:1px solid var(--bdr); border-radius:var(--rad2);
  padding:16px 20px; display:flex; align-items:center; gap:14px;
}
.dash-quick-ico{
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  background:var(--bg2);
}
.dash-quick-label{ font-size:11px; color:var(--txt3); font-family:var(--mono); text-transform:uppercase; letter-spacing:.6px; }
.dash-quick-val{ font-family:var(--display); font-weight:800; font-size:22px; margin-top:2px; }

/* ── Slide "Progress Order BI" / grafik / downtime & alert ───────────
   Kartunya diberi tinggi maksimum yang nyaman (bukan dipaksa 100%
   tinggi layar) supaya grafik tidak jadi gepeng/melar aneh. */
body.tv-mode .dash-slide .card{
  display:flex; flex-direction:column;
  max-height:min(72vh, 640px);
}
body.tv-mode .dash-slide .card-body{ flex:1; min-height:0; display:flex; flex-direction:column; overflow-y:auto; }
body.tv-mode .dash-slide .g21,
body.tv-mode .dash-slide .g2{ flex:0 0 auto; align-items:stretch; }
body.tv-mode .dash-slide .chart-wrap{ flex:1; min-height:0; height:clamp(220px,44vh,420px) !important; }
body.tv-mode #pg-dashboard .card-title{ font-size:14px; }
body.tv-mode #pg-dashboard .badge{ font-size:13px; padding:5px 12px; }
body.tv-mode #pg-dashboard .card-head{ padding:16px 20px 14px; }

/* Kartu Peringatan & Alert: dipusatkan rapi, bukan dipaksa merata penuh */
body.tv-mode .dash-slide .card-body:has(.alert){ justify-content:center; gap:14px; }
body.tv-mode #pg-dashboard .alert{ padding:15px 18px; }
body.tv-mode #pg-dashboard .alert-title{ font-size:16px; }
body.tv-mode #pg-dashboard .alert-desc{ font-size:14px; margin-top:3px; }
body.tv-mode #pg-dashboard .alert-time{ font-size:12px; margin-top:4px; }
body.tv-mode #pg-dashboard .alert-icon{ font-size:20px; }

/* Progress Order BI */
body.tv-mode #pg-dashboard .obi-hero{ font-size:1.15em; flex:0 0 auto; }
body.tv-mode #pg-dashboard .obi-grid{ flex:0 0 auto; }

/* ── Slide "Status Mesin" ─────────────────────────────────────────── */
/* Ringkasan OEE Pabrik — strip 4 gauge (Availability/Performance/
   Quality/OEE Total rata-rata seluruh mesin) di atas grid kartu mesin.
   Data real, dihitung dari fungsi calcOEE() yang sama dipakai halaman
   OEE — lihat renderOEE() di script.js (diperluas agar isi elemen ini). */
.dash-tv-oee-strip{ display:none; flex:0 0 auto; }
body.tv-mode .dash-tv-oee-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
body.tv-mode .dash-slide .mach-grid{ flex:0 0 auto; gap:14px; }
body.tv-mode .dash-slide .mach-card{ padding:18px; }
body.tv-mode #pg-dashboard .mach-uts{ font-size:11px; }
body.tv-mode #pg-dashboard .mach-name{ font-size:17px; margin:4px 0 9px; }
body.tv-mode #pg-dashboard .sp{ font-size:11px; padding:4px 10px; }
body.tv-mode #pg-dashboard .mstat-l{ font-size:10px; }
body.tv-mode #pg-dashboard .mstat-v{ font-size:16px; }
body.tv-mode #pg-dashboard .mstat{ padding:8px 9px; }
body.tv-mode #pg-dashboard .oee-g{ padding:16px; }
body.tv-mode #pg-dashboard .oee-label{ font-size:10px; }
body.tv-mode #pg-dashboard .oee-val{ font-size:26px; }


body.tv-mode .dash-slide-controls{ gap:14px; }
body.tv-mode .dash-slide-btn{ width:34px; height:34px; font-size:13px; }
body.tv-mode .dash-slide-dot{ width:9px; height:9px; }
body.tv-mode .dash-slide-dot.active{ width:26px; }

.tv-clock{
  display:none; /* hanya tampil saat body.tv-mode */
  font-family:var(--mono); font-size:20px; color:var(--teal);
  letter-spacing:.5px; margin-left:auto; padding-right:16px;
}
body.tv-mode .tv-clock{ display:block; }

/* Tombol keluar mengambang di pojok kanan atas */
#tv-exit-btn{
  display:none;
  position:fixed; top:18px; right:18px; z-index:500;
  background:var(--bg2); border:1px solid var(--bdr2); color:var(--txt2);
  font-size:12px; font-family:var(--body); padding:8px 14px; border-radius:20px;
  cursor:pointer; align-items:center; gap:7px;
  opacity:.55; transition:opacity .2s,background .2s,color .2s,border-color .2s;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
#tv-exit-btn:hover{ opacity:1; background:var(--bg3); color:var(--teal); border-color:var(--teal); }
body.tv-mode #tv-exit-btn{ display:flex; }

[data-theme="light"] #tv-exit-btn{ background:var(--bg2); border-color:var(--bdr); }