/* Reset, bien mau, scrollbar, header, nav, statusbar, khung .page
   Tach tu Sumida_Traceability_Mock_UI.html — KHONG sua thu tu nap file,
   cascade CSS / thu tu khai bao JS phu thuoc vao no. */
  :root{
    --bg:#ECECEC;
    --panel:#F6F6F6;
    --line:#1B1B1B;
    --line-soft:#9B9B9B;
    --text:#1B1B1B;
    --muted:#6B6B6B;
    --running:#7CC6E6;
    --running-strong:#39A6D6;
    --lastrun:#C2C2C2;
    --ok:#2ECC40;
    --ok-soft:#A7E6A2;
    --ng:#E63946;
    --ng-soft:#F4A6AB;
    --warn:#F2C014;
    --warn-soft:#FFE36A;
    --stop:#9aa0a6;
    --dark:#1F1F1F;
    --pink:#E89AA3;
    --blue:#1E88E5;
    /* ===== BẢNG MÀU 5 TRẠNG THÁI THỜI GIAN — định nghĩa DUY NHẤT 1 nơi =====
       Đúng bảng màu khách đưa trong sheet `info` mục 1-1:
       待機 xanh nhạt · 動作 xanh đậm · Error đỏ · 調整 vàng · 始業前点検 tím.
       Ô đen = máy không hoạt động: máy đã dừng nhưng vẫn trong 計画稼動時間
       (nghỉ giữa ca, hoặc tắt máy trước khi hết ca).
       Ô xám = quãng CHƯA XẢY RA (ca chưa bắt đầu) — KHÔNG phải trạng thái máy,
       nên tách hẳn màu để không đọc nhầm thành "máy không hoạt động". */
    --st-wait:#9EC7E8;    /* 待機時間 — chờ */
    --st-run:#2ECC40;     /* 動作時間 — chạy */
    --st-error:#E63946;   /* Error出力時間 — dừng lỗi */
    --st-adj:#F2C014;     /* 調整時間 — điều chỉnh */
    --st-check:#8E7CC3;   /* 始業前点検時間 — kiểm tra trước khi vận hành lại */
    --st-idle:#555555;    /* máy không hoạt động — trong 計画稼動時間, ngoài 実稼働時間 */
    --st-future:#CFCFCF;  /* chưa xảy ra (ca chưa bắt đầu) — không phải trạng thái máy */
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:"Segoe UI","Noto Sans",Arial,sans-serif;font-size:14px}

  /* ===== SCROLLBAR (mặc định mảnh; rê chuột vào vùng cuộn mới dày lên — giống 25T01) ===== */
  *{scrollbar-width:thin;scrollbar-color:#bdbdbd #ffffff}
  ::-webkit-scrollbar{width:14px;height:14px}
  ::-webkit-scrollbar-track{background:#fff}
  ::-webkit-scrollbar-thumb{background:#bdbdbd;border:5px solid #fff;border-radius:8px}   /* mặc định: mảnh */
  /* hover vào vùng cuộn → thumb dày lên */
  .table-scroll:hover::-webkit-scrollbar-thumb,
  .page:hover::-webkit-scrollbar-thumb,
  .timeline:hover::-webkit-scrollbar-thumb,
  .modal:hover::-webkit-scrollbar-thumb{border-width:2px;background:#9a9a9a}
  ::-webkit-scrollbar-button{display:none;width:0;height:0}
  ::-webkit-scrollbar-corner{background:#fff}
  .app{height:100vh;overflow:hidden;display:flex;flex-direction:column}

  /* ===== HEADER (giữ nguyên style file gốc) ===== */
  .topbar{display:flex;align-items:center;background:var(--bg);padding:0 14px;gap:10px;height:66px}
  .brand{display:flex;align-items:center;gap:12px;font-weight:700;line-height:1}
  .brand-nittoku-box{display:inline-flex;align-items:center;justify-content:center}
  .brand-nittoku{height:35px;width:auto;display:block;mix-blend-mode:multiply}
  .login-logo{height:90px;width:auto;display:block;margin:0 auto 4px}
  .brand .sysname{font-size:45px;color:#1B1B1B;font-weight:900;letter-spacing:.2px;line-height:1}
  .spacer{flex:1}
  #gear-btn:disabled{opacity:.35;cursor:default}
  /* Hover khung cho 4 nút header — khung xanh vuông, các nút sát mép nhau (không bo) */
  .hdr-actions{display:inline-flex;align-items:center;gap:0}
  .hdr-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:38px;padding:0;border:1px solid transparent;background:transparent;cursor:pointer;line-height:0;transition:background .1s,border-color .1s}
  .hdr-ic:hover{background:#E8F0FE;border-color:#1E88E5}
  .hdr-ic img{display:block;pointer-events:none}
  /* Cờ ngôn ngữ là SVG 4:3 — crop tròn 24px cho khớp bộ icon PNG tròn còn lại của header */
  #lang-btn{width:24px;height:24px;border-radius:50%;object-fit:cover}
  .hdr-ic:focus,.hdr-ic:focus-visible{outline:none}
  #gear-btn:disabled:hover{background:transparent;border-color:transparent}
  .icon-btn{width:28px;height:28px;border-radius:4px;background:#1F1F1F;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;flex-shrink:0}
  .icon-btn:hover{background:#3a3a3a}
  .lang{display:flex;align-items:center;gap:4px;margin:0 8px}
  .flag{width:28px;height:20px;border:1px solid #555;display:inline-block;cursor:pointer;border-radius:2px;overflow:hidden;position:relative;vertical-align:middle;flex-shrink:0}
  .flag.vn{background:#DA251D}
  .flag.vn::after{content:"★";position:absolute;color:#FFCD00;font-size:16px;line-height:20px;width:100%;text-align:center;top:-1px;left:0}
  .flag.uk{background:#012169;background-image:
      linear-gradient(to bottom right,transparent calc(50% - 1.2px),#fff calc(50% - 1.2px) calc(50% + 1.2px),transparent calc(50% + 1.2px)),
      linear-gradient(to bottom left,transparent calc(50% - 1.2px),#fff calc(50% - 1.2px) calc(50% + 1.2px),transparent calc(50% + 1.2px)),
      linear-gradient(#fff,#fff),
      linear-gradient(90deg,#fff,#fff),
      linear-gradient(to bottom right,transparent calc(50% - .8px),#C8102E calc(50% - .8px) calc(50% + .8px),transparent calc(50% + .8px)),
      linear-gradient(#C8102E,#C8102E),
      linear-gradient(90deg,#C8102E,#C8102E);
    background-size:100% 100%,100% 100%,100% 26%,8% 100%,100% 100%,100% 14%,4% 100%;
    background-position:center,center,center,center,center,center,center;
    background-repeat:no-repeat}
  .flag.active{outline:2px solid #1E88E5}
  .chip{display:inline-flex;align-items:center;gap:6px;padding:0 10px;height:28px;border-radius:3px;font-weight:700;font-size:12px;color:#fff;background:#2ECC40;cursor:default;border:1px solid #1f7a26;flex-shrink:0;box-sizing:border-box}
  .chip.bad{background:#E63946;border-color:#7d1f25}
  .chip .led{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff}
  .winctrl{display:flex;gap:12px;margin-left:6px;align-items:center}
  .winctrl span{font-weight:900;font-size:20px;cursor:pointer;color:#111;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
  .winctrl .x{color:#E63946;font-size:22px}

  /* ===== NAV TABS ===== */
  .tabs{display:flex;background:#CFCFCF;border-bottom:1px solid #888}
  .tab{padding:8px 16px;font-weight:600;cursor:pointer;color:#222;border-right:1px solid #aaa;display:flex;align-items:center;gap:6px}
  .tab.active{background:var(--bg);border-top:3px solid #1E88E5;padding-top:5px}
  .tab .badge{background:#E63946;color:#fff;font-size:10px;padding:1px 5px;border-radius:8px;font-weight:700}

  /* ===== STATUS BAR (footer clock) ===== */
  .statusbar{display:flex;align-items:center;gap:10px;height:26px;background:#1F1F1F;color:#cfcfcf;padding:0 14px;font-size:12px;border-top:1px solid #000}
  .statusbar .sb-left{font-weight:600;letter-spacing:.3px}
  .statusbar .spacer{flex:1}
  .statusbar .sb-clock{font-family:Consolas,"SF Mono",monospace;font-weight:700;color:#fff}
  .statusbar .sb-clock-ic{color:#cfcfcf;margin-left:6px;flex-shrink:0;display:block}

  /* ===== INLINE NOTE / PHASE-2 BANNER ===== */
  .note-suggest{background:#FFF8E1;border:1px solid #B8860B;color:#7a5800;padding:9px 14px;margin-bottom:12px;font-size:12px;display:flex;align-items:center;gap:10px}
  .note-suggest .ic{font-size:16px;color:#B8860B;flex-shrink:0}
  .src-note{font-size:11px;color:#8a8a8a;font-style:italic;margin:8px 2px 0;display:flex;gap:6px;align-items:flex-start}
  .src-note b{color:#6a6a6a;font-style:normal}
  .note-suggest b{color:#5e4400}

  /* ===== PAGE ===== */
  .page{flex:1;padding:14px 18px;display:none;min-height:0}
  .page.active{display:flex;flex-direction:column;overflow:auto}
  /* Chỉ vùng dữ liệu (rows) scroll, header/filter/footer cố định — giống DataGridView */
  .table-scroll{flex:1;min-height:0;overflow:auto;border:1px solid #111}
  .table-scroll .history-table{border:none}
  .page-title{font-size:19px;font-weight:800;text-align:center;margin:0 0 8px;letter-spacing:.5px}
  .back-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#1F1F1F;color:#fff;cursor:pointer;border:none;margin-right:8px;font-weight:800}
  .title-row{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:5px}
  .title-row .back-btn{position:absolute;left:0}