/* ============================================================
   Papan Target Produksi Pabrik — design system
   Dark industrial (default) + light mode. Dirancang untuk TV
   monitor area produksi: angka besar, kontras tinggi.
   ============================================================ */

:root {
  --radius: 18px;
  --radius-sm: 12px;
  --gap: 20px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  --bg: #070B15;
  --bg-2: #0B1120;
  --panel: rgba(20, 27, 45, 0.72);
  --panel-solid: #101728;
  --panel-2: rgba(30, 40, 64, 0.55);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --ink: #E9EFFA;
  --ink-2: #9BA8C2;
  --ink-3: #6B7794;
  --accent: #22D3EE;
  --accent-2: #6366F1;
  --accent-soft: rgba(34, 211, 238, 0.12);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.35);
  --track: rgba(255, 255, 255, 0.09);
  --grid: rgba(255, 255, 255, 0.08);
}

:root[data-theme="light"] {
  --bg: #F1F4FA;
  --bg-2: #E8EDF7;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-solid: #FFFFFF;
  --panel-2: rgba(240, 244, 252, 0.9);
  --border: rgba(16, 32, 64, 0.1);
  --border-strong: rgba(16, 32, 64, 0.2);
  --ink: #101A2E;
  --ink-2: #4C5A76;
  --ink-3: #7A87A2;
  --accent: #0891B2;
  --accent-2: #4F46E5;
  --accent-soft: rgba(8, 145, 178, 0.1);
  --shadow: 0 20px 50px rgba(23, 40, 80, 0.14);
  --shadow-sm: 0 8px 22px rgba(23, 40, 80, 0.1);
  --track: rgba(16, 32, 64, 0.1);
  --grid: rgba(16, 32, 64, 0.12);
}

* { box-sizing: border-box; }

/* ============================================================
   ANGKA OTOMATIS MENYESUAIKAN KOLOM
   Berapapun digitnya (3, 4, 5, 6 angka), ukuran font dihitung dari
   lebar kolom dibagi jumlah karakter, jadi tidak pernah meluber/terpotong.
   Pembungkus wajib punya `container-type: inline-size` (kelas .fitbox atau
   ditambahkan pada selector komponen di bawah).
   ============================================================ */
.fitbox, .sum-card, .bs-card, .prod-card, .line-card .metric, .lc-actual,
.counter-actual, .rank-row, .lc-figure { container-type: inline-size; }

/* `container-type: inline-size` menihilkan ukuran intrinsik elemen, jadi setiap
   pembungkus angka yang berupa flex-item WAJIB diberi pertumbuhan eksplisit —
   tanpa ini lebarnya menjadi 0 dan angka justru meluber keluar kotak. */
.lc-figure, .counter-actual { flex: 1 1 auto; min-width: 0; }

.numfit {
  display: block;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
  max-width: 100%;
  /* fallback bila container query tidak didukung */
  font-size: var(--num-max, 44px);
}
@supports (container-type: inline-size) {
  .numfit {
    /* Ukuran utama ditentukan JavaScript lewat pengukuran lebar teks NYATA (--num-size)
       supaya angkanya maksimal & aman di font perangkat mana pun. Blok clamp di bawah
       hanya cadangan sebelum JS berjalan (atau bila JS gagal). */
    --num-fallback: clamp(
      var(--num-min, 15px),
      calc((100cqw - var(--num-pad, 0px)) / (var(--num-units, 4) * 0.555)),
      var(--num-max, 44px)
    );
    font-size: var(--num-size, var(--num-fallback));
  }
}
.numfit.wrap-ok { white-space: normal; }

html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.glow { position: fixed; border-radius: 50%; filter: blur(90px); opacity: .5; pointer-events: none; z-index: 0; }
.glow-a { width: 520px; height: 520px; left: -140px; top: -160px; background: radial-gradient(circle, rgba(99,102,241,.45), transparent 70%); }
.glow-b { width: 620px; height: 620px; right: -180px; top: 10%; background: radial-gradient(circle, rgba(34,211,238,.34), transparent 70%); }
.glow-c { width: 520px; height: 520px; left: 30%; bottom: -260px; background: radial-gradient(circle, rgba(168,85,247,.22), transparent 70%); }
:root[data-theme="light"] .glow { opacity: .35; }

/* ---------------- layout ---------------- */
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: 258px; z-index: 40;
  display: flex; flex-direction: column; gap: 14px; padding: 22px 16px;
  background: linear-gradient(180deg, rgba(10,15,28,.92), rgba(8,12,22,.86));
  border-right: 1px solid var(--border); backdrop-filter: blur(18px) saturate(170%);
}
:root[data-theme="light"] .sidebar { background: rgba(255,255,255,.86); }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 14px; border-bottom: 1px solid var(--border); }
.brand-logo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, #22D3EE, #6366F1); color: #06131F; flex: none; }
.brand-logo .ic { width: 24px; height: 24px; }
.brand-text { display: flex; flex-direction: column; overflow: hidden; }
.brand-text strong { font-size: 13.5px; letter-spacing: .04em; }
.brand-text small { color: var(--ink-3); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px;
  color: var(--ink-2); text-decoration: none; font-size: 13.5px; font-weight: 500;
  border: 1px solid transparent; transition: .18s;
}
.nav-item:hover { background: var(--panel-2); color: var(--ink); }
.nav-item.active { background: var(--accent-soft); border-color: var(--border-strong); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.nav-item .ic { width: 18px; height: 18px; flex: none; opacity: .9; }
.sidebar-foot { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
.who { display: flex; align-items: center; gap: 10px; }
.who-ava { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; flex: none; }
.who-txt { display: flex; flex-direction: column; overflow: hidden; }
.who-txt strong { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-txt small { color: var(--ink-3); font-size: 10.5px; letter-spacing: .05em; }

.main { margin-left: 258px; min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; }
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px;
  padding: 16px 26px; background: rgba(7,11,21,.72); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px) saturate(170%);
}
:root[data-theme="light"] .topbar { background: rgba(255,255,255,.78); }
.titles { flex: 1; min-width: 0; }
.titles h1 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.titles .sub { margin: 3px 0 0; color: var(--ink-3); font-size: 12.5px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.mini-clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; padding: 4px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.mc-date { font-size: 10.5px; color: var(--ink-3); letter-spacing: .06em; }
.mc-time { font-family: var(--mono); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.content { flex: 1; padding: 26px; display: flex; flex-direction: column; gap: 26px; }
.foot { padding: 18px 26px 26px; color: var(--ink-3); font-size: 11.5px; letter-spacing: .03em; }
.scrim { display: none; }
.only-mobile { display: none !important; }

/* ---------------- panel & kartu ---------------- */
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); backdrop-filter: blur(20px) saturate(170%);
}
.panel > h3 { margin: 0 0 14px; font-size: 15px; letter-spacing: .02em; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.page-head h2 { margin: 0; font-size: 19px; }
.page-head p { margin: 4px 0 0; color: var(--ink-3); font-size: 12.5px; max-width: 70ch; }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------- form ---------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; color: var(--ink-2); letter-spacing: .03em; }
.field > span i { color: #EF4444; font-style: normal; }
.field-wide { grid-column: 1 / -1; }
.field .help { color: var(--ink-3); font-size: 11px; }
input, select, textarea, .input {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--border); font-family: inherit; font-size: 13.5px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
select option { background: var(--panel-solid); color: var(--ink); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.switch { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.switch input { display: none; }
.switch-track { width: 42px; height: 23px; border-radius: 20px; background: var(--track); position: relative; transition: .2s; flex: none; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: .2s; }
.switch input:checked + .switch-track { background: linear-gradient(135deg, #22D3EE, #6366F1); }
.switch input:checked + .switch-track::after { transform: translateX(19px); }
.filter-bar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.filter-bar .field { min-width: 145px; }

/* ---------------- tombol ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--panel-2); color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; text-decoration: none; transition: .16s; white-space: nowrap;
}
.btn:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.btn .ic { width: 16px; height: 16px; }
.btn-primary { background: linear-gradient(135deg, #22D3EE, #6366F1); color: #04121C; border-color: transparent; }
.btn-danger { background: linear-gradient(135deg, #F87171, #DC2626); color: #fff; border-color: transparent; }
.btn-danger-ghost { color: #F87171; border-color: rgba(248,113,113,.3); }
.btn-ghost { background: transparent; }
.btn-xs { padding: 6px 10px; font-size: 11.5px; border-radius: 9px; }
.btn-lg { padding: 15px 26px; font-size: 15px; border-radius: 14px; }
.btn-block { width: 100%; }
.icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; cursor: pointer; background: var(--panel-2); border: 1px solid var(--border); color: var(--ink-2); }
.icon-btn:hover { color: var(--ink); border-color: var(--border-strong); }
.icon-btn .ic { width: 18px; height: 18px; }
.ic { width: 18px; height: 18px; }

/* ---------------- tabel ---------------- */
.table-wrap { overflow: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.table th, .table td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table th { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); background: var(--panel-2); position: sticky; top: 0; backdrop-filter: blur(8px); }
.table tbody tr:hover { background: var(--accent-soft); }
.table tbody tr:last-child td { border-bottom: 0; }
.table-compact th, .table-compact td { padding: 8px 10px; font-size: 12.5px; }
.ta-r { text-align: right !important; }
.ta-c { text-align: center !important; }
.actions-cell { display: flex; gap: 6px; justify-content: center; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.empty { padding: 26px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* ---------------- badge & alert ---------------- */
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pulse .dot { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.alert { padding: 12px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel-2); font-size: 13px; }
.alert-danger { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.12); color: #FCA5A5; }
.alert-warning { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.12); color: #FCD34D; }
.alert-info { border-color: var(--border-strong); background: var(--accent-soft); color: var(--ink-2); }

/* ---------------- modal & toast ---------------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(3,6,14,.72); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; }
.modal { width: min(760px, 100%); max-height: 92vh; overflow: auto; background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.modal-sm { width: min(460px, 100%); }
.modal-lg { width: min(940px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-sub { margin: 4px 0 0; color: var(--ink-3); font-size: 12px; }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--panel-solid); }
.modal-error { color: #FCA5A5; font-size: 12.5px; min-height: 16px; }
.confirm-text { margin: 0; font-size: 14px; }
.confirm-detail { margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 120; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-width: 240px; max-width: 420px; border-radius: 13px; border: 1px solid var(--border-strong); background: var(--panel-solid); box-shadow: var(--shadow-sm); font-size: 13px; transform: translateY(12px); opacity: 0; transition: .28s; }
.toast.in { transform: none; opacity: 1; }
.toast-ico { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.toast-success .toast-ico { background: #22C55E; }
.toast-danger .toast-ico { background: #EF4444; }
.toast-warning .toast-ico { background: #F59E0B; }

/* ---------------- chart ---------------- */
.chart { display: flex; flex-direction: column; gap: 10px; }
.chart-svg { width: 100%; height: 200px; overflow: visible; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-2); }
.legend { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-grid { stroke: var(--grid); stroke-width: .3; }
.chart-axis, .chart-label { fill: var(--ink-3); font-size: 5.2px; font-family: var(--font); }
.chart-bar { transition: .2s; }
.chart-bar:hover { opacity: .82; }
.chart-line { fill: none; stroke-width: 1.4; stroke-linejoin: round; }
.chart-line.dashed { stroke-dasharray: 3 2.5; stroke-width: 1; }
.hbars { display: flex; flex-direction: column; gap: 12px; }
.hbar-row { display: grid; grid-template-columns: 108px 1fr auto; gap: 12px; align-items: center; font-size: 12.5px; }
.hbar-label { color: var(--ink-2); }
.hbar-track { height: 12px; border-radius: 8px; background: var(--track); overflow: hidden; }
.hbar-fill { display: block; height: 100%; border-radius: 8px; }
.hbar-value { font-family: var(--mono); font-variant-numeric: tabular-nums; min-width: 62px; text-align: right; }

/* ---------------- summary strip ---------------- */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--gap); }
.sum-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); backdrop-filter: blur(18px); display: flex; flex-direction: column; gap: 6px; }
.sum-card .k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.sum-card .v { font-family: var(--mono); --num-max: 30px; --num-min: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sum-card .v small { font-size: 13px; color: var(--ink-3); margin-left: 5px; }
.sum-card.ok .v { color: #22C55E; }
.sum-card.warn .v { color: #F59E0B; }
.sum-card.bad .v { color: #EF4444; }

/* ---------------- board header & grid ---------------- */
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.board-title h2 { margin: 0; font-size: clamp(19px, 2vw, 27px); letter-spacing: .1em; text-transform: uppercase; }
.board-title p { margin: 5px 0 0; color: var(--ink-3); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; }
.board-clock { display: flex; align-items: baseline; gap: 18px; padding: 10px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); }
.board-clock .clock-date { font-size: 13px; color: var(--ink-2); letter-spacing: .08em; }
.board-clock .clock-day { font-size: 13px; color: var(--accent); letter-spacing: .1em; font-weight: 700; }
.board-clock .clock-time { font-family: var(--mono); font-size: clamp(28px, 3.4vw, 46px); font-weight: 700; font-variant-numeric: tabular-nums; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; grid-auto-rows: 1fr; }

/* kartu LINE di dashboard */
.line-card {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(170%); overflow: hidden;
}
.line-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--st, var(--accent)); }
.line-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--st, #22D3EE) 16%, transparent), transparent 62%); pointer-events: none; }
.line-card > * { position: relative; z-index: 1; }
.lc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lc-code { font-size: clamp(20px, 2.1vw, 28px); font-weight: 800; letter-spacing: .05em; }
.lc-name { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.lc-actual { display: flex; align-items: flex-end; gap: 10px; }
.lc-actual .lc-label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 2px; }
.lc-actual .lc-value { font-family: var(--mono); font-weight: 800; --num-max: 86px; --num-min: 26px; font-variant-numeric: tabular-nums; }
.lc-actual .lc-unit { font-size: 15px; color: var(--ink-3); padding-bottom: 8px; letter-spacing: .08em; }
.lc-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; grid-auto-rows: 1fr; }
.lc-metrics .metric { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 10px 13px; }
.lc-metrics .metric span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lc-metrics .metric strong { font-family: var(--mono); --num-max: 26px; --num-min: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lc-metrics .metric.accent strong { color: var(--st, var(--accent)); }
.lc-metrics .metric.pos strong { color: #22C55E; }
.lc-metrics .metric.neg strong { color: #EF4444; }
.lc-progress { display: flex; flex-direction: column; gap: 9px; }
.prog { display: flex; flex-direction: column; gap: 5px; }
.prog .prog-top { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.prog .prog-track { height: 15px; border-radius: 999px; background: var(--track); overflow: hidden; border: 1px solid var(--border); }
.prog .prog-fill { height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.prog .prog-fill.running { background: linear-gradient(90deg, rgba(34,211,238,.55), #22D3EE); }
.prog .prog-fill.actual { background: linear-gradient(90deg, var(--st, #22C55E), color-mix(in srgb, var(--st, #22C55E) 55%, #fff)); }
.lc-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; border-top: 1px solid var(--border); padding-top: 11px; }
.lc-foot .clock { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lc-note { font-size: 12px; color: var(--ink-3); }
.line-card.is-nonproduction, .line-card.is-inactive { opacity: .78; }
.line-card.warn-glow { animation: warnGlow 2.6s infinite; }
@keyframes warnGlow { 0%,100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 0 2px rgba(239,68,68,.35), var(--shadow); } }
.alert-strip { display: flex; flex-direction: column; gap: 10px; }
.alert-item { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 13px; font-size: 13px; border: 1px solid var(--border-strong); }
.alert-item.danger { background: rgba(239,68,68,.13); border-color: rgba(239,68,68,.42); color: #FCA5A5; }
.alert-item.warning { background: rgba(245,158,11,.13); border-color: rgba(245,158,11,.42); color: #FCD34D; }
.alert-item .bell { font-size: 15px; }
.rank-list { display: flex; flex-direction: column; gap: 10px; }
.rank-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--border); }
.rank-row .rk { font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--ink-3); text-align: center; }
.rank-row .rn { font-weight: 600; font-size: 14px; }
.rank-row .rs { font-size: 11.5px; color: var(--ink-3); }
.rank-row .rv { font-family: var(--mono); --num-max: 22px; --num-min: 13px; font-weight: 700; }
.rank-row.top .rk { color: #22C55E; }

/* ---------------- papan satu LINE (operator) ---------------- */
.board-single { display: flex; flex-direction: column; gap: 22px; }
.bs-hero {
  display: grid; grid-template-columns: minmax(0, auto) auto minmax(0, 1fr);
  align-items: center; gap: 18px 22px; padding: 14px 20px;
  border-radius: 20px; border: 1px solid var(--border); background: var(--panel);
  box-shadow: var(--shadow); backdrop-filter: blur(20px); position: relative; overflow: hidden;
}
.bs-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--st, #22D3EE) 16%, transparent), transparent 60%); pointer-events: none; }
.bs-hero > * { position: relative; z-index: 1; }
.bs-line { font-size: clamp(28px, 3.2vw, 52px); font-weight: 800; letter-spacing: .04em; line-height: 1; }
.bs-unit { color: var(--ink-3); font-size: 13px; letter-spacing: .04em; margin-top: 6px; }

/* jam & tanggal */
.bs-clock {
  display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none;
  padding: 8px 18px; border: 1px solid var(--border-strong); border-radius: 16px;
  background: var(--panel-2); box-shadow: var(--shadow-sm);
}
.bs-clock .bc-dateline { display: flex; gap: 5px; font-size: 12.5px; color: var(--ink-2); letter-spacing: .04em; }
.bs-clock .bc-day { color: var(--accent); font-weight: 600; }
.bs-clock .bc-day::after { content: ','; color: var(--ink-3); }
.bs-clock .bc-time {
  font-family: var(--mono); font-size: clamp(30px, 3.2vw, 54px); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* sisi kanan header: status + tombol + jadwal istirahat */
.bs-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 0; }
.bs-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.bs-schedule { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.bs-sched-title { font-size: 12px; letter-spacing: .12em; font-weight: 700; color: var(--ink-2); text-transform: uppercase; }
.bs-sched-line { font-size: 13px; color: var(--ink-3); }

/* ============ kartu papan (2x2) ============ */
.bs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; grid-auto-rows: 1fr; }
.bs-card {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; border-radius: 20px;
  background: var(--panel);
  backdrop-filter: blur(18px); container-type: inline-size; justify-content: center;
  /* Permintaan user: GARIS TEPI KOTAK diberi warna mencolok (putih) supaya tiap kolom
     jelas terpisah saat dilihat dari jauh di area produksi. Ketebalannya mengikuti ukuran
     layar (clamp) dan ikut berwarna status pada kartu yang menyorot status.
     `--card-line` & `--card-glow` bisa diatur dari sini. */
  --card-line-w: 3px;                              /* ketebalan garis kotak (bisa diatur) */
  --card-line-c: rgba(255, 255, 255, .92);         /* warna garis kotak */
  border: var(--card-line-w) solid var(--card-line-c);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 20px rgba(255, 255, 255, .09), var(--shadow);
}
.bs-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bs-card .k { font-size: 13px; letter-spacing: .08em; font-weight: 700; color: var(--ink); text-transform: uppercase; }
.bs-card .meta { font-size: 11.5px; color: var(--ink-3); letter-spacing: .02em; }
.bs-card .v {
  font-family: var(--mono); font-weight: 800; font-variant-numeric: tabular-nums;
  --num-max: min(420px, 30vh); --num-pad: 4px; --num-min: 26px;
  color: var(--st, var(--ink));
  /* Permintaan user: angka besar rata KANAN (label & keterangan tetap rata kiri).
     align-self membuat angka melebar penuh sehingga benar-benar menempel tepi kanan. */
  text-align: right;
  align-self: stretch;
}
/* Mode terang: kotak putih -> garis tepi putih tidak terlihat, jadi dipakai garis gelap. */
:root[data-theme="light"] .bs-card { border-color: rgba(15, 23, 42, .35); }
.bs-card[data-card="target"] .v,
.bs-card[data-card="running"] .v,
.bs-card[data-card="actual"] .v,
.bs-card[data-card="achievement"] .v { --num-max: var(--board-main-max, min(420px, 30vh)); }
.bs-card .u { font-size: 13px; color: var(--ink-3); letter-spacing: .04em; }

/* ============ bar progres & catatan ============ */
.bs-progress {
  display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow);
}
.bs-progress-title { font-size: 12.5px; letter-spacing: .1em; font-weight: 700; color: var(--ink-2); text-transform: uppercase; }
.bs-progress .prog .prog-track { height: 22px; }
.bs-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.bs-meta b { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* tombol cepat ringkas di kartu papan (papan banyak LINE) */
.qc-wrap { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 14px; background: var(--bg-2); }
.qc-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: flex; gap: 8px; align-items: center; }
.qc-label b { color: var(--ink-2); }
.qc-feedback { font-family: var(--mono); color: var(--accent); margin-left: auto; }
.qc-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.qc-btn {
  min-width: 0; min-height: 46px; cursor: pointer; border-radius: 12px; border: 1px solid var(--border-strong);
  background: var(--panel-2); color: var(--ink); font-family: var(--mono); font-size: 17px; font-weight: 700;
  transition: .14s; touch-action: manipulation; user-select: none;
}
.qc-btn.plus { background: linear-gradient(135deg, #22D3EE, #6366F1); color: #04121C; border-color: transparent; }
.qc-btn.minus { color: #F87171; }
.qc-btn:hover { transform: translateY(-1px); }
.qc-btn.pressed, .qc-btn:active { transform: scale(.95); filter: brightness(1.15); }
.badge.src-counter { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); margin-left: 6px; }

/* ---------------- tabel: keterangan kecil & daftar target per shift ---------------- */
.cell-note { display: block; font-size: 11px; color: var(--ink-3); margin-top: 4px; letter-spacing: .01em; }
.cell-warn { display: block; font-size: 11px; color: #F59E0B; margin-top: 4px; }
.badge-soft { color: var(--ink-2); border-color: var(--border); background: var(--panel-2); }
.form-info {
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong);
  background: var(--bg-2); font-size: 12.5px; color: var(--ink-2); line-height: 1.75;
}
.form-info b { color: var(--ink); }
.shift-target-list { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.shift-target-list .stl-label { font-size: 11.5px; color: var(--ink-3); }

/* ---------------- halaman Produksi (ringkasan saja) ---------------- */
.prod-page { display: flex; flex-direction: column; gap: 22px; }
.prod-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.prod-line-code { display: block; font-size: clamp(30px, 4.4vw, 62px); font-weight: 800; letter-spacing: .05em; line-height: 1; }
.prod-line-name { display: block; color: var(--ink-3); font-size: 13px; letter-spacing: .08em; margin-top: 8px; }
.prod-date { text-align: right; }
.prod-date .pd-date { display: block; font-family: var(--mono); font-size: clamp(15px, 1.5vw, 22px); font-weight: 700; letter-spacing: .06em; }
.prod-date .pd-day { display: block; color: var(--accent); font-size: 12.5px; letter-spacing: .16em; margin-top: 7px; }
.prod-date .pd-time { display: block; font-family: var(--mono); font-size: clamp(22px, 2.4vw, 34px); font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 6px; letter-spacing: -.01em; }
.prod-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; grid-auto-rows: 1fr; }
.prod-card {
  display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-radius: 24px;
  border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(170%);
}
.prod-card .k { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.prod-card .v { font-family: var(--mono); --num-max: 74px; --num-min: 22px; --num-pad: 2px; font-weight: 800; }
.prod-card .u { font-size: 12.5px; color: var(--ink-3); letter-spacing: .1em; }
.prod-card.actual .v { color: var(--accent); }
.prod-card.ach .v { --num-max: 62px; }
.pad-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.pad-head h3 { margin: 0; font-size: 15px; letter-spacing: .04em; }
.pad-line { min-width: 240px; }
.counter-mode { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.counter-mode b { color: var(--ink-2); }
@media (max-width: 1100px) { .prod-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .prod-metrics { grid-template-columns: 1fr; gap: 14px; }
  .prod-date { text-align: left; }
  .prod-card .v { --num-max: 62px; --num-min: 26px; }
  .bs-card .v { --num-min: 22px; }
  .lc-actual .lc-value { --num-max: 58px; }
  .counter-actual .v { --num-max: 56px; }
}

/* ---------------- kiosk admin cards ---------------- */
.kiosk-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2); margin-bottom: 16px; }
.kiosk-card.off { opacity: .72; }
.kiosk-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.kc-title { font-size: 15px; font-weight: 700; }
.kc-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.kc-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.kc-url { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-2); }
.kc-url code { font-family: var(--mono); font-size: 12.5px; color: var(--accent); word-break: break-all; flex: 1; min-width: 220px; }
.kc-meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.kc-meta b { color: var(--ink-2); font-family: var(--mono); }
.kc-actions { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 12px; }

/* ---------------- responsive ---------------- */
@media (max-width: 1180px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .only-mobile { display: grid !important; }
  .sidebar { transform: translateX(-104%); transition: .26s; width: 272px; }
  .sidebar.open { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(3,6,14,.6); opacity: 0; pointer-events: none; transition: .26s; z-index: 35; }
  .scrim.show { opacity: 1; pointer-events: auto; }
  .main { margin-left: 0; }
  .content { padding: 18px 16px; gap: 20px; }
  .topbar { padding: 12px 16px; }
  .mini-clock { display: none; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .board-grid { grid-template-columns: 1fr; }
  .board-clock { width: 100%; justify-content: space-between; }
}
@media (max-width: 560px) {
  .lc-metrics { grid-template-columns: 1fr; }
  .page-actions { width: 100%; }
  .page-actions .btn, .page-actions .input { flex: 1; }
}

@media print {
  .sidebar, .topbar, .foot, .glow, .toasts, .page-actions, .btn { display: none !important; }
  .main { margin-left: 0; }
  body { background: #fff; color: #000; }
  .panel, .line-card, .sum-card { box-shadow: none; border-color: #bbb; backdrop-filter: none; background: #fff; }
}

/* ============================================================
   BAGIAN YANG DIPULIHKAN (login, bilah kiosk, hitungan cepat, layar penuh)
   + TATA LETAK PAPAN OPERATOR BARU (grid 2 kolom)
   ============================================================ */

/* ---------------- login ---------------- */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-wrap { width: 100%; display: grid; place-items: center; padding: 24px; position: relative; z-index: 1; }
.login-card {
  width: min(430px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: 26px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow);
  backdrop-filter: blur(22px) saturate(180%);
}
.login-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.login-logo { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(135deg, #22D3EE, #6366F1); color: #04121C; }
.login-logo .ic { width: 30px; height: 30px; }
.login-head h1 { margin: 6px 0 0; font-size: 21px; }
.login-head p { margin: 0; color: var(--ink-3); font-size: 12.5px; letter-spacing: .04em; }
.login-hint { margin: 0; text-align: center; font-size: 11.5px; color: var(--ink-3); }
.login-hint b { color: var(--ink-2); }
.login-time { margin: 0; text-align: center; font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.build-tag { opacity: .85; font-family: var(--mono); }

/* ---------------- bilah kiosk (TV area produksi) ---------------- */
.kiosk-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.kiosk-tag { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.kiosk-tag .ic { width: 17px; height: 17px; }
.kiosk-links { display: flex; gap: 8px; flex-wrap: wrap; }
body.kiosk #themeBtn, body.kiosk #fsBtn, body.kiosk .mini-clock { display: none; }
body.kiosk .topbar { display: none; }
body.kiosk .content { padding: 12px 18px 18px; gap: 14px; }
@media (max-width: 900px) {
  .kiosk-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .kiosk-links { width: 100%; }
}

/* ---------------- mode layar penuh ---------------- */
body.is-fullscreen .sidebar, body.is-fullscreen .foot, body.is-fullscreen .glow { display: none; }
body.is-fullscreen .main { margin-left: 0; }
body.is-fullscreen .topbar { padding: 8px 18px; background: transparent; border-bottom-color: transparent; }
body.is-fullscreen .titles .sub, body.is-fullscreen .titles h1 { font-size: 14px; }
body.is-fullscreen .content { padding: 14px 18px 22px; gap: 16px; }

/* ---------------- hitungan cepat (+1 langsung tersimpan) ---------------- */
.counter { display: flex; flex-direction: column; gap: 12px; }
.counter-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.counter-actual { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.counter-actual .k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.counter-actual .v { font-family: var(--mono); font-weight: 800; --num-max: 54px; --num-min: 22px; color: var(--accent); }
.counter-actual .u { font-size: 12px; letter-spacing: .1em; color: var(--ink-3); }
.counter-steps .k { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.counter-actions { display: grid; grid-template-columns: 96px minmax(140px, 220px) 96px; gap: 12px; align-items: stretch; justify-content: center; }
.counter-btn {
  display: grid; place-items: center; cursor: pointer; border-radius: 16px; border: 1px solid var(--border-strong);
  background: var(--panel-2); color: var(--ink); font-family: var(--mono); font-size: 34px; font-weight: 800;
  line-height: 1; min-height: 76px; transition: .14s; user-select: none; touch-action: manipulation;
}
.counter-btn.plus { background: linear-gradient(135deg, #22D3EE, #6366F1); color: #04121C; border-color: transparent; }
.counter-btn.minus { color: #F87171; }
.counter-btn:hover { transform: translateY(-2px); }
.counter-btn.pressed, .counter-btn:active { transform: scale(.96); filter: brightness(1.15); }
.counter-field {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px dashed var(--border-strong); border-radius: 16px; padding: 6px; background: var(--bg-2);
  transition: border-color .18s, box-shadow .18s;
}
.counter-field:focus-within, .counter-field.ready { border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.counter-field input {
  width: 100%; text-align: center; border: 0; background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 32px; font-weight: 800; padding: 2px 0; -moz-appearance: textfield;
}
.counter-field input:focus { box-shadow: none; }
.counter-field input::-webkit-outer-spin-button, .counter-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.counter-field span { font-size: 11px; letter-spacing: .12em; color: var(--ink-3); }
.counter-field small { font-size: 10.5px; color: var(--ink-3); }
.counter-hint { margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.counter-feedback { min-height: 16px; font-size: 12.5px; }
.counter-feedback .cf { font-family: var(--mono); }
.counter-feedback .cf.ok { color: #22C55E; }
.counter-feedback .cf.busy { color: var(--accent); }
.counter-feedback .cf.err { color: #F87171; }
@media (max-width: 760px) {
  .counter-actions { grid-template-columns: 72px minmax(110px, 1fr) 72px; gap: 8px; }
  .counter-btn { min-height: 64px; font-size: 26px; }
  .counter-field input { font-size: 24px; }
}

/* ---------------- tata letak papan operator (satu grid 2 kolom) ----------------
   Urutan: header (lebar penuh) -> 2x2 kartu (lebar penuh) -> bar progres (kiri)
   berdampingan dengan panel TAMBAH HASIL PRODUKSI (kanan). */
/* Kolom utama (kartu + bar progres) + STRIP KECIL memanjang ke bawah di sisi kanan
   untuk TAMBAH HASIL PRODUKSI, supaya 4 kartu utama tetap besar. */
body.page-line-dashboard .content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 118px);
  gap: 12px; align-content: start;
}
body.page-line-dashboard #lineBoard { display: contents; }
body.page-line-dashboard #lineBoard > .bs-hero { grid-column: 1 / -1; grid-row: 1; }
body.page-line-dashboard #lineBoard > .bs-grid { grid-column: 1; grid-row: 2; }
/* strip hanya setinggi 4 kartu (sejajar), sedangkan bar progres melebar penuh di bawahnya */
body.page-line-dashboard #counterPanel {
  grid-column: 2; grid-row: 2; align-self: stretch;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 8px;
}
body.page-line-dashboard #lineBoard > .bs-progress { grid-column: 1 / -1; grid-row: 3; }
/* judul strip ditulis tegak agar hemat lebar */
body.page-line-dashboard #counterPanel > h3 {
  margin: 0; font-size: 11.5px; letter-spacing: .1em; line-height: 1.5; text-align: center;
  color: var(--ink); text-transform: uppercase; font-weight: 700;
}
body.page-line-dashboard #counterPanel .counter { flex: 1; justify-content: center; gap: 12px; max-width: none; margin: 0; }
body.page-line-dashboard .counter-head .counter-steps { width: 100%; }
body.page-line-dashboard .counter-head .counter-steps { text-align: center; }
body.page-line-dashboard .counter-head .counter-steps .k { margin-bottom: 6px; }
body.page-line-dashboard .counter-head .counter-steps .field-row { display: grid; grid-template-columns: 1fr; gap: 6px; }
body.page-line-dashboard .counter-head .counter-steps .btn { width: 100%; padding: 6px 4px; font-size: 11px; }
/* tombol + / kolom angka / − disusun bertumpuk */
body.page-line-dashboard .counter-actions { display: flex; flex-direction: column-reverse; gap: 8px; }
body.page-line-dashboard .counter-actions .counter-btn { min-height: 62px; font-size: 30px; border-radius: 14px; }
body.page-line-dashboard .counter-field { padding: 6px; }
body.page-line-dashboard .counter-field input { font-size: 22px; }
body.page-line-dashboard .counter-mode { font-size: 11px; text-align: center; line-height: 1.5; }
/* panel tambah hasil produksi di papan dibuat ringkas & sejajar tinggi dengan bar progres */
body.page-line-dashboard .counter { gap: 8px; }
body.page-line-dashboard .counter-actual { display: none; }
body.page-line-dashboard .counter-head { align-items: center; }
body.page-line-dashboard .counter-actions { grid-template-columns: 78px minmax(120px, 190px) 78px; gap: 8px; }
body.page-line-dashboard .counter-btn { min-height: 62px; font-size: 30px; border-radius: 14px; }
body.page-line-dashboard .counter-field input { font-size: 28px; }
body.page-line-dashboard .counter-field small { display: none; }
body.page-line-dashboard .counter-hint { display: none; }
@media (max-width: 900px) {
  /* Susunan bertumpuk (satu kolom). PENTING: `grid-row` juga harus direset menjadi auto —
     kalau hanya `grid-column` yang diubah, panel TAMBAH HASIL PRODUKSI tetap ditaruh di
     baris 2 (sel yang sama dengan 4 kartu) sehingga MENUMPUK di atas kartu. */
  body.page-line-dashboard .content { grid-template-columns: 1fr; }
  body.page-line-dashboard #lineBoard > .bs-hero,
  body.page-line-dashboard #lineBoard > .bs-grid,
  body.page-line-dashboard #lineBoard > .bs-progress,
  body.page-line-dashboard #counterPanel { grid-column: 1; grid-row: auto; }
}

/* angka utama papan (target harian, target berjalan, hasil produksi) — satu ukuran;
   mode TV/layar penuh dibuat lebih besar lagi */
.bs-hero-id { min-width: 0; }
.bs-clock .bc-date { color: var(--ink-2); }
body.kiosk .bs-grid, body.is-fullscreen .bs-grid { --board-main-max: min(480px, 33vh); }
/* garis kotak dipertegas di layar TV/area produksi (dilihat dari jauh) */
body.kiosk .bs-card, body.is-fullscreen .bs-card { --card-line-w: 4px; }
body.kiosk #counterPanel > h3 { margin-bottom: 10px; font-size: 13px; }
.badge-lg { padding: 8px 16px; font-size: 15px; letter-spacing: .08em; }
.toast-msg { flex: 1; }
.switch .switch-label { font-size: 13px; }
.input.search, input.search { max-width: 230px; }

/* ============================================================
   HALAMAN PRODUKSI & RIWAYAT — dirapikan & disimetriskan
   ============================================================ */

/* ringkasan produksi: satu kartu dengan header + 4 metrik sejajar */
.prod-summary { display: flex; flex-direction: column; gap: 18px; }
.prod-summary .prod-head { align-items: center; }
.prod-meta-line { display: flex; gap: 22px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--border); padding-top: 14px; }
.prod-meta-line b { color: var(--ink-2); font-family: var(--mono); }
/* blok metrik di dalam kartu: tanpa bayangan, tinggi seragam, lebar sama */
.prod-summary .prod-card { background: var(--panel-2); box-shadow: none; padding: 16px 18px; border-radius: 16px; }
.prod-summary .prod-card .v { text-align: right; align-self: stretch; }
.prod-summary .prod-card .v { --num-max: 64px; }

/* panel tambah hasil produksi: isi ditengahkan, lebarnya dibatasi agar simetris */
#counterPanel > h3 { margin: 0 0 14px; }
#counterPanel .counter { max-width: 620px; margin: 0 auto; }
#counterPanel .counter-mode { text-align: center; }
#counterPanel .counter-feedback { text-align: center; }

/* panel ringkasan halaman riwayat: tepi kartu sejajar dengan panel tabel di bawahnya */
.panel-summary { padding: 20px; }   /* sama dengan padding panel tabel -> tepi isi sejajar */
.panel-summary .summary-grid { gap: 14px; }
.panel-summary .sum-card { background: var(--panel-2); box-shadow: none; }

/* filter halaman riwayat: kolom sama lebar & tombol sejajar tinggi */
#historyApp .filter-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
#historyApp .filter-bar .field { min-width: 0; }
#historyApp .filter-bar .btn { height: 41px; }
@media (max-width: 700px) { #historyApp .filter-bar { grid-template-columns: 1fr; } }

/* Layar pendek (mis. 1366x768 / 1600x900): rapatkan papan supaya tetap muat satu layar
   tanpa scroll — angka tetap besar, hanya jarak & batas maksimum yang disesuaikan. */
@media (max-height: 950px) {
  .bs-hero { padding: 10px 16px; gap: 12px 18px; }
  .bs-line { font-size: clamp(24px, 2.6vw, 40px); }
  .bs-clock { padding: 6px 14px; }
  .bs-clock .bc-time { font-size: clamp(24px, 2.4vw, 40px); }
  .bs-grid { gap: 12px; }
  .bs-card { padding: 10px 16px 10px; gap: 5px; }
  .bs-card .v { --num-min: 20px; }
  .bs-progress { padding: 10px 16px; gap: 9px; }
  .bs-progress .prog .prog-track { height: 16px; }
  .bs-meta { font-size: 11px; gap: 12px; }
  body.page-line-dashboard .counter-btn { min-height: 52px; font-size: 26px; }
  body.page-line-dashboard .counter-field input { font-size: 24px; }
  body.page-line-dashboard .counter-actions { grid-template-columns: 64px minmax(100px, 160px) 64px; }
}
/* layar sangat pendek (<= 800px) dirapatkan lagi */
@media (max-height: 800px) {

  .bs-hero { padding: 8px 14px; }
  .bs-progress .prog .prog-track { height: 14px; }
}