/* steril-board.css — DENIKIN Pasteurisasi tank board (steril-board.js). Every class starts with sb-.
 * Rules of the floor screens (owner): status = icon + word (never colour alone), min text 14px, targets 44px or more, big numbers, dividers not gaps. */
.sb-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.2rem 0 .5rem}
.sb-title{margin:0;font-size:1.15rem;font-weight:800}
.sb-link{min-height:44px;padding:0 .4rem;border:0;background:transparent;color:#1D4ED8;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.sb-msg{margin:.3rem 0;padding:.5rem .7rem;border-radius:10px;font-weight:700;font-size:.95rem}
.sb-msg.is-err{background:#FEF2F2;color:#7F1D1D;border:1.5px solid #B91C1C}
.sb-msg.is-ok{background:#F0FDF4;color:#14532D;border:1.5px solid #15803D}
.sb-empty{text-align:center;color:#475467;padding:1.2rem}

/* the strip: the running tanks, soonest end first */
.sb-strip{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.2rem 0 .6rem;padding:.5rem .6rem;border:2px solid #1D4ED8;border-radius:12px;background:#EFF6FF}
.sb-strip-l{font-size:.9rem;color:#1E3A8A}
.sb-chip{display:inline-flex;align-items:baseline;gap:.35rem;min-height:40px;padding:.15rem .65rem;border:2px solid #1D4ED8;border-radius:999px;background:#fff;font-size:1rem;font-variant-numeric:tabular-nums;align-items:center}
.sb-chip.is-soon{border-color:#C2410C;background:#FFF7ED;color:#7C2D12}
.sb-chip.is-due{border-color:#B91C1C;background:#FEF2F2;color:#7F1D1D}

/* the tanks: 2 across on a phone, 4 to 5 on a tablet */
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:.6rem}
.sb-card{display:flex;flex-direction:column;gap:.35rem;min-height:190px;padding:.65rem .7rem;border:2px solid #9AA0AE;border-radius:14px;background:#fff}
.sb-card.is-in{border-color:#1D4ED8;background:#EFF6FF}
.sb-card.is-run{border-color:#1D4ED8;background:#EFF6FF}
.sb-card.is-soon{border-color:#C2410C;background:#FFF7ED}
.sb-card.is-due{border-color:#B91C1C;background:#FEF2F2;animation:sb-blink 1s steps(2,start) infinite}
@keyframes sb-blink{50%{box-shadow:0 0 0 4px rgba(185,28,28,.45)}}
@media (prefers-reduced-motion:reduce){.sb-card.is-due{animation:none;box-shadow:0 0 0 4px rgba(185,28,28,.45)}}
.sb-hd{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;padding-bottom:.25rem;border-bottom:1px solid #E5E7EB}
.sb-name{font-size:1.7rem;font-weight:900;line-height:1}
.sb-note{font-size:.85rem;color:#475467}
.sb-state{font-size:1rem;font-weight:800}
.sb-ico{font-size:1.1rem}
.sb-time{font-size:2.3rem;font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sb-bar{height:10px;border-radius:999px;background:#D0D5DD;overflow:hidden}
.sb-bar i{display:block;height:100%;background:#1D4ED8}
.sb-card.is-soon .sb-bar i{background:#C2410C}
.sb-card.is-due .sb-bar i{background:#B91C1C}
.sb-when{font-size:.95rem;font-weight:700;color:#344054}
.sb-data{font-size:.95rem;font-weight:700;overflow-wrap:anywhere}
.sb-ro{color:#475467;font-size:.9rem}

.sb-btn{min-height:48px;padding:.3rem .8rem;border:2px solid #9AA0AE;border-radius:12px;background:#fff;color:#111;font:inherit;font-size:1rem;font-weight:800;cursor:pointer}
.sb-btn:disabled{opacity:.5;cursor:default}
.sb-go{border-color:#15803D;background:#15803D;color:#fff;min-height:64px;font-size:1.25rem;margin-top:auto}
.sb-fill{min-height:44px;font-size:.95rem;border-color:#1D4ED8;color:#1E3A8A;background:#fff;margin-top:auto}
.sb-fill.is-need{background:#FEF9C3;border-color:#A16207;color:#713F12}
.sb-wide{width:100%}
/* SELESAI: held for 2 seconds; the dark fill runs from left to right while the finger stays down */
.sb-stop{position:relative;overflow:hidden;min-height:64px;border-color:#B91C1C;color:#7F1D1D;background:#fff;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sb-fillbar{position:absolute;inset:0 auto 0 0;width:0;background:#FCA5A5}
.sb-stop.is-hold .sb-fillbar{width:100%;transition:width 2s linear}
.sb-stop-t{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1.15;font-size:1.2rem}
.sb-stop-t small{font-size:.8rem;font-weight:700}

/* "Salah tekan?" bar under the board */
.sb-undo{position:sticky;bottom:calc(66px + env(safe-area-inset-bottom));z-index:8;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin:.7rem 0;padding:.6rem .8rem;border:2px solid #A16207;border-radius:12px;background:#FEF9C3;box-shadow:0 -4px 14px rgba(0,0,0,.18);font-weight:700}
@media (min-width:768px){.sb-undo{bottom:8px}}

/* sheets (MULAI, Lengkapi data, Atur tangki) */
.sb-sheet-wrap{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;background:rgba(15,23,42,.55)}
@media (min-width:600px){.sb-sheet-wrap{align-items:center}}
.sb-sheet{width:100%;max-width:560px;max-height:92vh;overflow-y:auto;padding:.9rem 1rem calc(1rem + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;background:#fff}
@media (min-width:600px){.sb-sheet{border-radius:16px}}
.sb-sheet-h{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.4rem;font-size:1.05rem}
.sb-x{min-width:48px;min-height:48px;border:0;background:transparent;font-size:1.3rem;cursor:pointer}
.sb-big{font-size:2.6rem;font-weight:900;line-height:1.1;margin:.1rem 0 .5rem}
.sb-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-height:52px;padding:.3rem 0;border-top:1px solid #E5E7EB}
.sb-lab{display:block;font-weight:800;font-size:.95rem;margin:.5rem 0 .15rem}
.sb-row .sb-lab{margin:0;flex:1 1 7rem}
.sb-clock{font-size:2rem;font-weight:900;font-variant-numeric:tabular-nums}
.sb-in{width:100%;min-height:52px;padding:.3rem .6rem;border:2px solid #9AA0AE;border-radius:10px;background:#fff;font:inherit;font-size:1.2rem;font-weight:700;box-sizing:border-box}
.sb-row .sb-in{width:7.5rem;text-align:center}
.sb-two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.sb-acts{display:flex;flex-direction:column;gap:.5rem;margin-top:.8rem}
.sb-sheet .sb-go{margin-top:0}
.sb-mrow{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.5rem 0;border-top:1px solid #E5E7EB}
.sb-mrow.is-off{opacity:.6}
.sb-m-label{width:5.5rem;flex:none}
.sb-m-note{flex:1 1 8rem;min-width:7rem;font-size:1rem}
.sb-m-min{width:5rem;flex:none;text-align:center}
.sb-m-act{display:flex;align-items:center;gap:.3rem;min-height:44px;font-weight:700}
.sb-m-act input{width:24px;height:24px}
.sb-mnew{border-top:2px solid #9AA0AE;margin-top:.4rem}
.sb-old{margin-top:.8rem}
.sb-old>summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:800;color:#344054}

.sb-tools{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.sb-own{font-size:.95rem;font-weight:700;color:#14532D;overflow-wrap:anywhere}
.sb-note-in{font-size:1.05rem;font-weight:600}

/* report (Laporan): full screen on the page, A4 landscape on paper; every other thing of the page is hidden while printing */
.sb-report-wrap{position:fixed;inset:0;z-index:1100;overflow:auto;background:#fff;padding:.6rem .8rem calc(1rem + env(safe-area-inset-bottom))}
.sb-rp-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-bottom:.5rem}
.sb-rp-modes,.sb-rp-nav,.sb-rp-acts{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.sb-rp-mode.is-on{background:#1D4ED8;border-color:#1D4ED8;color:#fff}
.sb-rp-nav .sb-in{width:11rem;min-height:48px}
.sb-rp-acts .sb-go{margin-top:0;min-height:48px;font-size:1.05rem}
.sb-rp-head h2{margin:.2rem 0;font-size:1.2rem}
.sb-rp-per,.sb-rp-meta{font-size:.95rem}
.sb-rp-meta{color:#475467;margin-bottom:.4rem}
.sb-rt{width:100%;border-collapse:collapse;font-size:.85rem}
.sb-rt th,.sb-rt td{padding:.3rem .35rem;border:1px solid #98A2B3;text-align:center;vertical-align:top}
.sb-rt th{background:#F2F4F7;font-weight:800}
.sb-rt .sb-l{text-align:left}
.sb-rt .sb-r{text-align:right;font-variant-numeric:tabular-nums}
.sb-rt tfoot td{background:#F8FAFC}
.sb-rp{overflow-x:auto}
@page sbland{size:A4 landscape;margin:10mm}
@media print{
  body.sb-printing>*:not(#sb-report){display:none!important}
  body.sb-printing #sb-report{position:static!important;inset:auto;overflow:visible;padding:0;page:sbland}
  body.sb-printing .sb-noprint{display:none!important}
  body.sb-printing .sb-rp{overflow:visible}
  body.sb-printing .sb-rt{font-size:9pt}
  body.sb-printing .sb-rt thead{display:table-header-group}
  body.sb-printing .sb-rt tr{break-inside:avoid}
  body.sb-printing .sb-rt th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}