@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');
  * { margin:0; padding:0; box-sizing:border-box; }
  html, body { height:100%; overflow:hidden; }
  body { font-family:'Sarabun',sans-serif; background:#FFF5F5; color:#212121; }
  /* Dark Mode */
  [data-theme="dark"] body, [data-theme="dark"] .main,
  [data-theme="dark"] .screen { background:#121212 !important; color:#E0E0E0 !important; }
  [data-theme="dark"] .card { background:#1E1E1E !important; border-color:#333 !important; }
  [data-theme="dark"] .card-header { background:#2A2A2A !important; }
  [data-theme="dark"] .form-input, [data-theme="dark"] .filter-select { background:#2A2A2A !important; color:#E0E0E0 !important; border-color:#555 !important; }
  [data-theme="dark"] .topbar { background:#1E1E1E !important; border-color:#333 !important; }
  [data-theme="dark"] .sidebar { background:linear-gradient(180deg,#1a0000,#3a0000) !important; }

  /* ── Login Overlay ───────────────────────────────────────────────────────── */
  #login-overlay {
    position:fixed; inset:0; background:linear-gradient(135deg,#7F0000 0%,#B71C1C 50%,#C62828 100%);
    z-index:9999; display:flex; align-items:center; justify-content:center;
  }
  #login-overlay.hidden { display:none; }
  .login-box {
    background:#fff; border-radius:20px; padding:40px 36px; max-width:380px; width:90%;
    box-shadow:0 20px 60px rgba(0,0,0,0.35); text-align:center;
  }
  .login-logo { font-size:52px; margin-bottom:12px; }
  .login-title { font-size:22px; font-weight:700; color:#B71C1C; margin-bottom:4px; }
  .login-sub { font-size:13px; color:#757575; margin-bottom:28px; }
  .login-divider { border:none; border-top:1px solid #F0F0F0; margin:20px 0; }
  .btn-ms { display:none; }
  .btn-viewer {
    display:block; width:100%; padding:14px; border-radius:10px; border:2px solid #B71C1C;
    background:#fff; color:#B71C1C; font-size:15px; font-weight:700; cursor:pointer;
    font-family:'Sarabun',sans-serif; transition:all 0.2s; margin-bottom:10px;
  }
  .btn-viewer:hover { background:#FFEBEE; }
  .pin-section { margin-top:4px; }
  .pin-toggle { background:none; border:none; color:#9E9E9E; font-size:13px; cursor:pointer;
                font-family:'Sarabun',sans-serif; text-decoration:underline; margin-bottom:8px;
                display:block; width:100%; text-align:center; }
  .pin-toggle:hover { color:#B71C1C; }
  .pin-input-row { display:flex; gap:8px; margin-top:6px; }
  .pin-input { flex:1; padding:10px 14px; border:2px solid #E0E0E0; border-radius:8px;
               font-size:15px; font-family:'Sarabun',sans-serif; text-align:center;
               letter-spacing:6px; transition:border 0.2s; }
  .pin-input:focus { outline:none; border-color:#B71C1C; }
  .pin-error { color:#C62828; font-size:12px; margin-top:6px; text-align:center; display:none; }
  .role-badge { display:inline-block; padding:2px 10px; border-radius:10px; font-size:11px;
                font-weight:700; margin-left:6px; }
  .role-viewer { background:#E3F2FD; color:#1565C0; }
  .role-editor { background:#E8F5E9; color:#1B5E20; }
  .view-only-bar { background:#E3F2FD; border-bottom:2px solid #1565C0; padding:6px 16px;
                   font-size:12px; color:#1565C0; display:flex; align-items:center;
                   justify-content:space-between; flex-shrink:0; }
  .btn-demo {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:14px 20px; border-radius:8px;
    border:none; cursor:pointer;
    font-family:'Sarabun',sans-serif; font-size:15px; font-weight:600;
    background:#B71C1C; color:#fff; transition:all 0.2s;
  }
  .btn-demo:hover { background:#7F0000; }
  .login-loading { font-size:13px; color:#9E9E9E; margin-top:16px; display:none; }
  .login-error { background:#FFEBEE; color:#C62828; border-radius:8px; padding:10px 14px;
                 font-size:13px; margin-top:14px; display:none; }
  .mode-badge {
    display:inline-block; background:#FFF3E0; color:#E65100; border:1px solid #FFB74D;
    border-radius:12px; padding:2px 10px; font-size:11px; font-weight:600; margin-bottom:8px;
  }

  /* ── Toast notification ──────────────────────────────────────────────────── */
  #toast { position:fixed; top:16px; right:16px; z-index:8888; background:#212121; color:#fff;
           padding:12px 18px; border-radius:10px; font-size:13px; opacity:0;
           transition:opacity 0.3s; pointer-events:none; max-width:340px; }
  #toast.show { opacity:1; }
  #toast.has-action { pointer-events:auto; cursor:default; }
  #toast .toast-action { display:inline-block; margin-left:10px; padding:2px 8px; background:#EF5350;
                         color:#fff; border-radius:4px; font-size:12px; font-weight:700;
                         cursor:pointer; white-space:nowrap; }
  #toast .toast-action:hover { background:#C62828; }

  /* ── Data loading overlay ────────────────────────────────────────────────── */
  #data-loading {
    position:fixed; bottom:20px; right:20px; z-index:8000;
    background:#B71C1C; color:#fff; border-radius:12px; padding:10px 18px;
    font-size:13px; display:none; align-items:center; gap:8px; box-shadow:0 4px 12px rgba(0,0,0,0.2);
  }
  #data-loading.show { display:flex; }
  .spin { display:inline-block; animation:spin 0.8s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* ── App Layout ──────────────────────────────────────────────────────────── */
  .app-shell { display:flex; height:100vh; height:100dvh; overflow:hidden; }
  .sidebar { width:220px; background:#B71C1C; display:flex; flex-direction:column; flex-shrink:0; min-height:0; overflow:hidden; }
  .sidebar-logo { padding:20px 16px; border-bottom:1px solid rgba(255,255,255,0.15); }
  .sidebar-logo h1 { color:#fff; font-size:18px; font-weight:700; line-height:1.2; }
  .sidebar-logo p { color:#FFCDD2; font-size:11px; margin-top:4px; }
  .sidebar-nav { padding:8px 0; flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .sidebar-user { flex-shrink:0; padding:10px 14px 12px; border-top:1px solid rgba(255,255,255,0.16); background:#B71C1C; box-shadow:0 -8px 16px rgba(127,0,0,0.16); }
  .nav-item { display:flex; align-items:center; gap:12px; padding:12px 16px; color:rgba(255,255,255,0.75);
              cursor:pointer; border-left:3px solid transparent; transition:all 0.2s; font-size:14px; }
  .nav-item:hover { background:rgba(255,255,255,0.1); color:#fff; }
  .nav-item.active { background:rgba(255,255,255,0.15); color:#fff; border-left-color:#EF9A9A; font-weight:600; }
  .nav-icon { font-size:18px; width:20px; text-align:center; }
  .badge { background:#EF5350; color:#fff; border-radius:10px; padding:1px 7px; font-size:11px; margin-left:auto; }

  .main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0; }
  .topbar { background:#fff; padding:12px 24px; display:flex; align-items:center; gap:16px;
            border-bottom:1px solid #E0E0E0; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
  .topbar h2 { font-size:17px; font-weight:600; color:#B71C1C; flex:1; }
  .topbar-actions { display:flex; gap:10px; align-items:center; }

  .btn { padding:7px 16px; border-radius:6px; border:none; cursor:pointer; font-family:'Sarabun',sans-serif;
         font-size:13px; font-weight:500; transition:all 0.2s;
         touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .btn-primary { background:#B71C1C; color:#fff; }
  .btn-primary:hover { background:#7F0000; }
  .btn-primary:disabled { background:#EF9A9A; cursor:not-allowed; opacity:0.7; }
  .btn-outline { background:#fff; color:#B71C1C; border:1px solid #B71C1C; }
  .btn-outline:hover { background:#FFEBEE; }
  .btn-sm { padding:5px 12px; font-size:12px; }
  .btn-danger { background:#C62828; color:#fff; }
  .btn-success { background:#2E7D32; color:#fff; }
  .btn-warning { background:#F57F17; color:#fff; }
  .btn-logout { background:#212121; color:#fff; border:1px solid rgba(255,255,255,0.35);
                border-radius:8px; padding:8px 10px; font-size:12px; cursor:pointer;
                font-family:'Sarabun',sans-serif; transition:all 0.2s; margin-top:8px; width:100%; }
  .btn-logout:hover { background:#424242; }
  .logout-top-btn {
    display:inline-flex !important; align-items:center; justify-content:center; gap:4px;
    width:auto !important; min-width:78px !important; max-width:none !important;
    padding:7px 12px !important; font-size:12px !important; white-space:nowrap !important;
    background:#212121 !important; color:#fff !important; border:1px solid #212121 !important;
  }
  .logout-top-btn::after { content:none !important; }
  body.daily-only .nav-item[onclick*="'pmplan'"],
  body.daily-only .nav-item[onclick*="'record'"],
  body.daily-only .nav-item[onclick*="'history'"],
  body.daily-only .tab[onclick*="'pmplan'"],
  body.daily-only .tab[onclick*="'record'"],
  body.daily-only .tab[onclick*="'history'"] { display:none !important; }

  .content { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; padding:20px 24px; background:#FFF5F5; min-height:0; }

  .screen-tabs { display:flex; gap:6px; padding:12px 24px; background:#fff; border-bottom:1px solid #E0E0E0; overflow-x:auto; -webkit-overflow-scrolling:touch; touch-action:pan-x; }
  .tab { padding:6px 14px; border-radius:20px; font-size:12px; cursor:pointer; border:none;
         background:#F5F5F5; color:#666; font-family:'Sarabun',sans-serif; white-space:nowrap;
         transition:all 0.2s; font-weight:500; }
  .tab.active { background:#B71C1C; color:#fff; }
  .tab:hover:not(.active) { background:#FFEBEE; color:#B71C1C; }

  .screen { display:none; flex:1; min-height:0; flex-direction:column; }
  .screen.active { display:flex; }

  /* ── KPI Cards ───────────────────────────────────────────────────────────── */
  .kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
  .kpi-card { background:#fff; border-radius:10px; padding:16px; box-shadow:0 1px 4px rgba(0,0,0,0.08); border-left:4px solid; }
  .kpi-card.blue { border-left-color:#B71C1C; background:#FFF5F5; }
  .kpi-card.green { border-left-color:#2E7D32; }
  .kpi-card.orange { border-left-color:#E65100; }
  .kpi-card.red { border-left-color:#C62828; }
  .kpi-label { font-size:12px; color:#757575; margin-bottom:6px; }
  .kpi-value { font-size:28px; font-weight:700; line-height:1; }
  .kpi-card.blue .kpi-value { color:#B71C1C; }
  .kpi-card.green .kpi-value { color:#2E7D32; }
  .kpi-card.orange .kpi-value { color:#E65100; }
  .kpi-card.red .kpi-value { color:#C62828; }
  .kpi-sub { font-size:11px; color:#9E9E9E; margin-top:4px; }

  .daily-kind-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .daily-kind-btn {
    min-height:48px; border:1px solid #B71C1C; border-radius:8px; background:#fff; color:#B71C1C;
    font-family:'Sarabun',sans-serif; font-size:14px; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:6px; transition:all .15s;
  }
  .daily-kind-btn.active { background:#B71C1C; color:#fff; box-shadow:0 2px 8px rgba(183,28,28,.18); }
  .daily-kind-btn:disabled { opacity:.55; cursor:not-allowed; }

  /* ── Cards & Tables ──────────────────────────────────────────────────────── */
  .card { background:#fff; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,0.08); margin-bottom:16px; overflow:hidden; }
  .card-header { padding:14px 18px; border-bottom:1px solid #F0F0F0; display:flex; align-items:center; gap:10px; }
  .card-title { font-size:14px; font-weight:600; color:#212121; flex:1; }
  .card-body { padding:0; }

  table { width:100%; border-collapse:collapse; }
  th { background:#FFEBEE; color:#B71C1C; font-size:12px; font-weight:600; padding:10px 14px;
       text-align:left; border-bottom:1px solid #FFCDD2; }
  td { padding:10px 14px; font-size:13px; border-bottom:1px solid #F5F5F5; vertical-align:middle; }
  tr:last-child td { border-bottom:none; }
  tr:hover td { background:#FFF5F5; }

  /* ── Status pills ────────────────────────────────────────────────────────── */
  .pill { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; }
  .pill-red { background:#FFEBEE; color:#C62828; }
  .pill-orange { background:#FFF3E0; color:#E65100; }
  .pill-yellow { background:#FFFDE7; color:#F57F17; }
  .pill-green { background:#E8F5E9; color:#2E7D32; }
  .pill-blue { background:#FCE4EC; color:#880E4F; }
  .pill-gray { background:#F5F5F5; color:#616161; }
  .pill-purple { background:#EDE7F6; color:#4527A0; }

  .days-tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; }
  .days-tag.overdue { background:#FFEBEE; color:#C62828; }
  .days-tag.urgent { background:#FFF3E0; color:#E65100; }
  .days-tag.soon { background:#FFFDE7; color:#F57F17; }
  .days-tag.ok { background:#E8F5E9; color:#2E7D32; }

  /* ── Alert banner ────────────────────────────────────────────────────────── */
  .alert-banner { background:#FFF3E0; border:1px solid #FFB74D; border-radius:8px; padding:12px 16px;
                  display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  .alert-banner .icon { font-size:20px; }
  .alert-banner p { font-size:13px; color:#E65100; flex:1; }
  .alert-banner strong { font-weight:700; }

  /* ── Search bar ──────────────────────────────────────────────────────────── */
  .search-row { display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
  .search-input { flex:1; min-width:200px; padding:9px 14px; border:1px solid #E0E0E0; border-radius:8px;
                  font-family:'Sarabun',sans-serif; font-size:13px; color:#212121; outline:none; }
  .search-input:focus { border-color:#B71C1C; box-shadow:0 0 0 3px rgba(183,28,28,0.1); }
  .filter-select { padding:9px 12px; border:1px solid #E0E0E0; border-radius:8px;
                   font-family:'Sarabun',sans-serif; font-size:13px; color:#212121; outline:none; background:#fff; }

  /* ── Equipment Grid ──────────────────────────────────────────────────────── */
  .equip-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .equip-card { background:#fff; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,0.08);
                padding:16px; cursor:pointer; transition:box-shadow 0.2s; border:2px solid transparent; }
  .equip-card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.12); border-color:#B71C1C; }
  .equip-icon { font-size:36px; margin-bottom:10px; }
  .equip-machine-photo { width:72px; height:54px; object-fit:cover; border-radius:6px; display:block; margin-bottom:8px; }
  .equip-code { font-size:11px; color:#9E9E9E; }
  .equip-name { font-size:14px; font-weight:600; color:#212121; margin:4px 0; }
  .equip-loc { font-size:12px; color:#757575; }
  .equip-footer { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }

  /* ── Form ────────────────────────────────────────────────────────────────── */
  .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .form-group { display:flex; flex-direction:column; gap:5px; }
  .form-group.full { grid-column:1/-1; }
  .form-label { font-size:12px; font-weight:600; color:#546E7A; }
  .form-input { padding:9px 12px; border:1px solid #E0E0E0; border-radius:7px;
                font-family:'Sarabun',sans-serif; font-size:13px; color:#212121; outline:none; }
  .form-input:focus { border-color:#B71C1C; box-shadow:0 0 0 3px rgba(183,28,28,0.1); }
  .form-textarea { resize:vertical; min-height:80px; }

  /* ── Checklist ───────────────────────────────────────────────────────────── */
  .checklist-item { display:flex; align-items:center; gap:10px; padding:10px 14px;
                    border-bottom:1px solid #F5F5F5; font-size:13px; }
  .checklist-item:last-child { border-bottom:none; }
  .checklist-item input[type="checkbox"] { width:16px; height:16px; accent-color:#B71C1C; cursor:pointer; }
  .checklist-item label { cursor:pointer; }
  .checklist-item .ok-badge { margin-left:auto; }

  /* ── Notifications ───────────────────────────────────────────────────────── */
  .notif-item { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid #F5F5F5; }
  .notif-item:last-child { border-bottom:none; }
  .notif-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .notif-dot.red { background:#C62828; }
  .notif-dot.orange { background:#E65100; }
  .notif-dot.yellow { background:#F9A825; }
  .notif-content { flex:1; }
  .notif-title { font-size:13px; font-weight:600; color:#212121; }
  .notif-sub { font-size:12px; color:#757575; margin-top:2px; }
  .notif-actions { display:flex; gap:6px; }

  /* ── Chart bars ──────────────────────────────────────────────────────────── */
  .chart-container { padding:16px 18px; }
  .chart-bars { display:flex; align-items:flex-end; gap:8px; height:120px; }
  .chart-bar-group { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
  .chart-bars-inner { display:flex; gap:2px; align-items:flex-end; height:100px; }
  .bar { width:18px; border-radius:3px 3px 0 0; transition:opacity 0.2s; }
  .bar:hover { opacity:0.8; }
  .bar.done { background:#B71C1C; }
  .bar.miss { background:#FFCDD2; }
  .chart-month { font-size:11px; color:#9E9E9E; }
  .chart-legend { display:flex; gap:16px; margin-top:10px; justify-content:center; }
  .legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:#616161; }
  .legend-dot { width:10px; height:10px; border-radius:2px; }

  /* ── Photo upload ────────────────────────────────────────────────────────── */
  .photo-upload { border:2px dashed #BDBDBD; border-radius:8px; padding:24px; text-align:center;
                  color:#9E9E9E; cursor:pointer; background:#FAFAFA; }
  .photo-upload:hover { border-color:#B71C1C; background:#FFEBEE; color:#B71C1C; }
  .photo-upload .icon { font-size:32px; margin-bottom:8px; }
  .daily-component-preview { display:flex; gap:12px; align-items:center; border:1px solid #F5C2C7; border-radius:12px; background:#FFFDFB; padding:10px 12px; min-height:92px; }
  .daily-component-preview img { width:120px; height:78px; object-fit:contain; border:1px solid #F0D5D5; border-radius:10px; background:#fff; flex-shrink:0; }
  .daily-component-preview-main { flex:1; min-width:0; }
  .daily-component-preview-title { font-size:13px; font-weight:800; color:#7F0000; line-height:1.35; overflow-wrap:anywhere; }
  .daily-component-preview-meta { font-size:11px; color:#7A6F63; line-height:1.45; margin-top:3px; overflow-wrap:anywhere; }
  .daily-component-preview-actions { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
  .photo-thumbs { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
  .photo-thumb { width:80px; height:80px; border-radius:6px; background:#FFEBEE; display:flex;
                 align-items:center; justify-content:center; font-size:24px; position:relative; border:1px solid #EF9A9A; }
  .photo-del { position:absolute; top:-6px; right:-6px; background:#C62828; color:#fff; border-radius:50%;
               width:18px; height:18px; font-size:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; }

  /* ── Two/Three column ────────────────────────────────────────────────────── */
  .two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  /* Dashboard polish: keep the home screen compact and scannable. */
  #screen-dashboard .content { padding-top:18px; }
  #screen-dashboard .dashboard-topbar {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 16px; border:1px solid #F0E0E0; border-radius:8px;
    background:#fff; box-shadow:0 1px 4px rgba(183,28,28,0.05); margin-bottom:12px;
  }
  #screen-dashboard .dashboard-topbar-main { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  #screen-dashboard .dashboard-topbar-title { font-size:15px; font-weight:800; color:#B71C1C; white-space:nowrap; }
  #screen-dashboard .dashboard-topbar-note { font-size:12px; color:#757575; }
  #screen-dashboard .dashboard-section {
    margin-top:14px; display:grid; grid-template-columns:1fr; gap:14px;
  }
  #screen-dashboard #dashboard-secondary-grid { grid-template-columns:1fr; }
  #screen-dashboard .dashboard-section.single { grid-template-columns:1fr; }
  #screen-dashboard .dashboard-card { margin-top:0 !important; }
  #screen-dashboard .dashboard-card .card-header {
    min-height:44px; background:#fff; border-bottom-color:#F3E3E3; padding:12px 16px;
  }
  #screen-dashboard .dashboard-card .chart-container { padding:10px 14px 10px; }
  #screen-dashboard .dashboard-card .bd-chart-detail { max-height:190px; overflow:auto; }
  #screen-dashboard .dashboard-card .chart-legend,
  #screen-dashboard .dashboard-card [id$="-legend"] { margin-top:6px !important; }
  #screen-dashboard .kpi-grid { gap:12px; margin-bottom:12px; }
  #screen-dashboard .kpi-card { border-radius:8px; padding:16px 18px; min-height:106px; }
  #screen-dashboard .kpi-label { font-size:12px; }
  #screen-dashboard .kpi-value { font-size:31px; line-height:1.05; }
  #screen-dashboard #dashboard-main-kpi-grid {
    display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin;
  }
  #screen-dashboard #dashboard-main-kpi-grid .kpi-card {
    flex:0 0 178px; min-height:76px; padding:12px 14px;
  }
  #screen-dashboard #dashboard-main-kpi-grid .kpi-label,
  #screen-dashboard #dashboard-main-kpi-grid .kpi-sub {
    white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25;
  }
  #screen-dashboard #dashboard-breakdown-card .card-body { padding:14px 16px 16px; }
  #screen-dashboard #dash-breakdown-kpi-grid {
    grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:12px !important;
  }
  #screen-dashboard #dash-breakdown-kpi-grid .kpi-card {
    box-shadow:none; border:1px solid #F0E0E0; padding:12px; min-height:82px;
  }
  #screen-dashboard #dash-breakdown-kpi-grid .kpi-value { font-size:23px; }
  #screen-dashboard #dashboard-breakdown-card .two-col { gap:12px; grid-template-columns:1fr !important; }
  #screen-dashboard #dashboard-breakdown-card table th,
  #screen-dashboard #dashboard-breakdown-card table td { padding:9px 10px; }
  @media (max-width:900px) {
    #screen-dashboard .dashboard-section { grid-template-columns:1fr; }
    #screen-dashboard .dashboard-topbar { align-items:flex-start; flex-direction:column; }
    #screen-dashboard #dash-breakdown-kpi-grid { grid-template-columns:1fr 1fr; }
  }
  @media (max-width:700px) {
    #screen-dashboard .content { padding:8px 8px 84px; }
    #screen-dashboard .dashboard-topbar { padding:7px 10px; margin-bottom:6px; }
    #screen-dashboard .dashboard-topbar .filter-select { min-height:34px; font-size:12px; padding:4px 6px; }
    #screen-dashboard .dashboard-section { margin-top:10px; gap:10px; }
    #screen-dashboard .dashboard-card .card-header { min-height:40px; padding:10px 12px; }
    #screen-dashboard .dashboard-card .chart-container { padding:8px 10px 8px; }
    #screen-dashboard .dashboard-card .bd-chart-detail { max-height:128px; font-size:12px; }
    #screen-dashboard .dashboard-card .chart-container > div[style*="แตะ"] { display:none; }
    #screen-dashboard #dashboard-main-kpi-grid { display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; margin-bottom:10px; }
    #screen-dashboard #dashboard-main-kpi-grid .kpi-card { flex:0 0 142px; min-height:70px; padding:9px 10px; }
    #screen-dashboard .kpi-grid { grid-template-columns:1fr 1fr; gap:8px; }
    #screen-dashboard .kpi-card { min-height:72px; padding:10px; }
    #screen-dashboard .kpi-value { font-size:25px; }
    #screen-dashboard .kpi-label, #screen-dashboard .kpi-sub { font-size:10.5px; }
    #screen-dashboard .dashboard-topbar-main { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:5px; }
    #screen-dashboard .dashboard-topbar-title { display:none; }
    #screen-dashboard .dashboard-topbar-main select:last-of-type { grid-column:1 / -1; }
    #screen-dashboard .dashboard-topbar-note { font-size:10px; line-height:1.3; grid-column:1 / -1; color:#9E9E9E; }
    .tab { max-width:none; overflow:visible; text-overflow:clip; }
    #screen-dashboard #dash-breakdown-kpi-grid .kpi-card { min-height:72px; padding:10px; }
    #screen-dashboard #dashboard-breakdown-card .two-col { grid-template-columns:1fr; }
  }
  .three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }

  /* ── Breadcrumb ──────────────────────────────────────────────────────────── */
  .breadcrumb { font-size:12px; color:#9E9E9E; margin-bottom:14px; }
  .breadcrumb span { color:#B71C1C; cursor:pointer; }
  .breadcrumb span:hover { text-decoration:underline; }

  /* ── History timeline ────────────────────────────────────────────────────── */
  .timeline { padding:14px 18px; }
  .tl-item { display:flex; gap:14px; margin-bottom:14px; }
  .tl-line { display:flex; flex-direction:column; align-items:center; }
  .tl-dot { width:12px; height:12px; border-radius:50%; background:#B71C1C; flex-shrink:0; margin-top:3px; }
  .tl-connector { width:2px; flex:1; background:#E0E0E0; margin-top:4px; }
  .tl-content { flex:1; }
  .tl-date { font-size:11px; color:#9E9E9E; }
  .mobile-card-list { display:none; }
  .hist-mobile-card {
    padding:12px; border-bottom:1px solid #F0F0F0; background:#fff;
  }
  .hist-mobile-head { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
  .hist-mobile-title { font-size:14px; font-weight:700; color:#7F0000; line-height:1.35; overflow-wrap:anywhere; }
  .hist-mobile-sub { font-size:12px; color:#757575; line-height:1.45; margin-top:3px; overflow-wrap:anywhere; }
  .hist-mobile-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .hist-mobile-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
  .desktop-card-list { display:block; }
  .tl-title { font-size:13px; font-weight:600; margin:2px 0; }
  .tl-detail { font-size:12px; color:#757575; }

  /* ── Stats ring ──────────────────────────────────────────────────────────── */
  .stats-ring { display:flex; align-items:center; gap:16px; padding:14px 18px; }
  .ring-svg { transform:rotate(-90deg); }
  .ring-stats { flex:1; }
  .ring-stat { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:13px; }
  .ring-color { width:10px; height:10px; border-radius:2px; }

  /* ── Action bar ──────────────────────────────────────────────────────────── */
  .action-bar { background:#fff; padding:12px 24px; border-top:1px solid #E0E0E0;
                display:flex; gap:10px; justify-content:flex-end;
                position:sticky; bottom:0; z-index:50;
                padding-bottom:max(12px, env(safe-area-inset-bottom)); }
  @media (max-width:900px) {
    .action-bar { position:fixed; left:0; right:0; bottom:0; z-index:200;
                  box-shadow:0 -2px 12px rgba(0,0,0,0.12);
                  padding-bottom:max(16px, env(safe-area-inset-bottom));
                  justify-content:stretch; }
    .action-bar .btn { flex:1; text-align:center; padding:14px 8px; font-size:15px; }
    /* เพิ่ม padding ล่างใน content เผื่อ fixed bar บัง */
    .screen.active > .content { padding-bottom:90px; }
  }

  /* ── QR Scanner ──────────────────────────────────────────────────────────── */
  .qr-scanner-wrap { display:flex; flex-direction:column; align-items:center; padding:20px 0; }
  .qr-viewfinder-box { position:relative; width:280px; height:280px; background:#1a1a1a;
                       border-radius:16px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.3); }
  .qr-camera-bg { position:absolute; inset:0; background:repeating-linear-gradient(
      0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);
      background-color:#1a1a1a; }
  .qr-corner { position:absolute; width:30px; height:30px; border-color:#B71C1C; border-style:solid; }
  .qr-corner.tl { top:16px; left:16px; border-width:3px 0 0 3px; border-radius:4px 0 0 0; }
  .qr-corner.tr { top:16px; right:16px; border-width:3px 3px 0 0; border-radius:0 4px 0 0; }
  .qr-corner.bl { bottom:16px; left:16px; border-width:0 0 3px 3px; border-radius:0 0 0 4px; }
  .qr-corner.br { bottom:16px; right:16px; border-width:0 3px 3px 0; border-radius:0 0 4px 0; }
  .scan-line { position:absolute; left:16px; right:16px; height:2px;
               background:linear-gradient(90deg, transparent, #B71C1C, #FF5252, #B71C1C, transparent);
               box-shadow:0 0 8px #B71C1C; animation:scanMove 2s ease-in-out infinite; }
  @keyframes scanMove { 0% { top:20px; opacity:1; } 50% { top:244px; opacity:0.8; } 100% { top:20px; opacity:1; } }
  .qr-status-dot { width:8px; height:8px; border-radius:50%; background:#4CAF50;
                   display:inline-block; margin-right:6px; animation:pulse 1.5s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(0.8); } }
  .qr-scan-hint { margin-top:14px; font-size:13px; color:#757575; text-align:center; }
  .qr-machine-list { width:100%; max-width:480px; margin-top:20px; }
  .qr-machine-item { display:flex; align-items:center; gap:14px; padding:12px 16px;
                     background:#fff; border:1px solid #FFCDD2; border-radius:10px;
                     margin-bottom:8px; cursor:pointer; transition:all 0.2s; }
  .qr-machine-item:hover { border-color:#B71C1C; background:#FFF5F5; box-shadow:0 2px 8px rgba(183,28,28,0.15); }
  .qr-machine-icon { font-size:26px; }
  .qr-machine-info { flex:1; }
  .qr-machine-code { font-size:11px; color:#9E9E9E; }
  .qr-machine-name { font-size:13px; font-weight:600; color:#212121; }
  .qr-result { background:#fff; border:2px solid #B71C1C; border-radius:14px; padding:20px;
               max-width:480px; width:100%; margin-top:20px; animation:fadeInUp 0.3s ease; }
  @keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
  .qr-result-field { background:#FFF5F5; border-radius:8px; padding:10px 12px; }
  .qr-result-label { font-size:11px; color:#9E9E9E; margin-bottom:2px; }
  .qr-result-value { font-size:13px; font-weight:600; color:#212121; }
  .btn-qr { background:#FFF5F5; color:#B71C1C; border:1px solid #FFCDD2; border-radius:6px;
            padding:4px 10px; font-size:12px; cursor:pointer; font-family:'Sarabun',sans-serif;
            font-weight:600; transition:all 0.2s; }
  .btn-qr:hover { background:#B71C1C; color:#fff; }

  /* ── QR Modal ────────────────────────────────────────────────────────────── */
  .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55);
                   z-index:1000; align-items:center; justify-content:center; }
  .modal-overlay.open { display:flex; animation:fadeIn 0.2s ease; }
  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  .modal-box { background:#fff; border-radius:16px; padding:0; max-width:380px; width:90%;
               box-shadow:0 20px 60px rgba(0,0,0,0.3); overflow:hidden; animation:slideUp 0.25s ease; }
  @keyframes slideUp { from { transform:translateY(30px); opacity:0; } to { transform:translateY(0); opacity:1; } }
  .modal-header { background:#B71C1C; color:#fff; padding:16px 20px; display:flex; align-items:center; gap:10px; }
  .modal-header h3 { font-size:15px; font-weight:700; flex:1; }
  .modal-close { background:none; border:none; color:#fff; font-size:20px; cursor:pointer; padding:2px 6px; border-radius:4px; }
  .modal-close:hover { background:rgba(255,255,255,0.2); }
  .modal-body { padding:20px; text-align:center; }
  .qr-img-wrap { display:inline-block; padding:12px; background:#fff; border:2px solid #FFCDD2; border-radius:12px; margin-bottom:14px; }
  .qr-img-wrap img { display:block; width:180px; height:180px; }
  .modal-machine-code { font-size:22px; font-weight:800; color:#B71C1C; letter-spacing:2px; }
  .modal-machine-name { font-size:14px; color:#555; margin-top:4px; margin-bottom:14px; }
  .modal-info-row { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
  .modal-info-chip { background:#FFF5F5; border:1px solid #FFCDD2; border-radius:20px; padding:4px 12px; font-size:12px; color:#B71C1C; }
  .modal-footer { display:flex; gap:8px; justify-content:center; padding:0 20px 20px; }

  /* ── Responsive ──────────────────────────────────────────────────────────── */
  @media (max-width:900px) {
    .kpi-grid { grid-template-columns:1fr 1fr; }
    .equip-grid { grid-template-columns:1fr 1fr; }
    .form-grid { grid-template-columns:1fr; }
    .two-col { grid-template-columns:1fr; }
  }
  @media (max-width:600px) {
    .sidebar { display:none; }
    .kpi-grid { grid-template-columns:1fr 1fr; }
    .equip-grid { grid-template-columns:1fr; }
  }

  /* ── Belt Condition Checklist ───────────────────────────────────────────── */
  .belt-check-item { display:flex; flex-direction:column; padding:10px 0; border-bottom:1px solid #F5F5F5; }
  .belt-check-item:last-child { border-bottom:none; }
  .belt-check-top { display:flex; align-items:center; gap:10px; }
  .belt-check-top input[type="checkbox"] { width:18px; height:18px; accent-color:#B71C1C; cursor:pointer; flex-shrink:0; }
  .belt-check-label { font-size:13px; color:#333; font-weight:500; flex:1; cursor:pointer; }
  .belt-check-label.checked { color:#2E7D32; text-decoration:line-through; }
  .belt-check-status { display:none; margin-top:8px; margin-left:28px; }
  .belt-check-status.show { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .status-btn { padding:4px 10px; border-radius:14px; border:1px solid; font-size:11px; cursor:pointer;
                font-family:'Sarabun',sans-serif; font-weight:600; transition:all 0.15s; }
  .status-btn.ok  { border-color:#4CAF50; color:#4CAF50; background:#fff; }
  .status-btn.ok.selected  { background:#4CAF50; color:#fff; }
  .status-btn.warn { border-color:#FF9800; color:#FF9800; background:#fff; }
  .status-btn.warn.selected { background:#FF9800; color:#fff; }
  .status-btn.bad  { border-color:#C62828; color:#C62828; background:#fff; }
  .status-btn.bad.selected  { background:#C62828; color:#fff; }
  .belt-check-note { flex:1; padding:4px 8px; border:1px solid #E0E0E0; border-radius:6px;
                     font-size:12px; font-family:'Sarabun',sans-serif; color:#333; min-width:120px; }



  /* ── Firebase Status ─────────────────────────────────────────────────────── */
  .fb-status { display:flex; align-items:center; gap:8px; padding:8px 14px;
               border-radius:8px; font-size:12px; font-weight:600; margin-bottom:12px; }
  .fb-status.connected    { background:#E8F5E9; color:#2E7D32; border:1px solid #A5D6A7; }
  .fb-status.disconnected { background:#FFF8E1; color:#E65100; border:1px solid #FFE082; }
  .fb-status.error        { background:#FFEBEE; color:#C62828; border:1px solid #FFCDD2; }
  .fb-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .fb-dot.green  { background:#4CAF50; box-shadow:0 0 6px #4CAF50; }
  .fb-dot.yellow { background:#FFC107; }
  .fb-dot.red    { background:#F44336; }
  .fb-config-area { width:100%; min-height:120px; padding:10px; border:1px solid #E0E0E0;
                    border-radius:8px; font-size:11px; font-family:monospace; resize:vertical;
                    background:#FAFAFA; color:#333; }
  .fb-config-area:focus { outline:none; border-color:#B71C1C; }
  .fb-section { border:1px solid #E0E0E0; border-radius:10px; padding:14px; margin-bottom:14px; }
  .fb-section-title { font-size:13px; font-weight:700; color:#B71C1C; margin-bottom:10px;
                      display:flex; align-items:center; gap:6px; }
  .qr-app-img { border:3px solid #B71C1C; border-radius:10px; display:block; margin:8px auto; }
  .sync-pulse { animation:pulse 1.5s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
  /* ── Topbar Firebase indicator ───────────────────────────────────────────── */
  .fb-topbar-dot { width:8px; height:8px; border-radius:50%; background:#9E9E9E;
                   display:inline-block; margin-right:4px; transition:background 0.3s; }
  .fb-topbar-dot.live { background:#4CAF50; box-shadow:0 0 5px #4CAF50; }

  /* ── FBS Grid (Flat Belt Small Pack position map) ──────────────────────── */
  .fbs-cell { background:#FFE600; border:2px solid #1565C0; border-radius:6px;
              color:#CC0000; font-size:13px; font-weight:700; text-align:center;
              padding:8px 4px; cursor:pointer; transition:all 0.15s;
              font-family:'Sarabun',sans-serif; user-select:none; }
  .fbs-cell:hover  { background:#FFF176; transform:scale(1.05); }
  .fbs-cell.active { background:#CC0000; color:#FFE600; border-color:#CC0000; }
  /* ── Stock Badge ─────────────────────────────────────────────────────────── */
  .stock-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px;
                 border-radius:10px; margin-left:6px; }
  .stock-ok   { background:#E8F5E9; color:#2E7D32; }
  .stock-low  { background:#FFF8E1; color:#E65100; }
  .stock-zero { background:#FFEBEE; color:#C62828; }
  .stock-row  { display:flex; align-items:center; gap:6px; margin-top:4px;
                font-size:11px; color:#757575; }
  /* ── Approval buttons ────────────────────────────────────────────────────── */
  .approve-wrap { display:flex; gap:4px; margin-top:4px; }
  .btn-approve  { padding:3px 9px; border-radius:12px; border:none; cursor:pointer;
                  font-size:11px; font-weight:600; font-family:'Sarabun',sans-serif;
                  background:#E8F5E9; color:#2E7D32; transition:all 0.15s; }
  .btn-approve:hover { background:#2E7D32; color:#fff; }
  .btn-reject   { padding:3px 9px; border-radius:12px; border:none; cursor:pointer;
                  font-size:11px; font-weight:600; font-family:'Sarabun',sans-serif;
                  background:#FFEBEE; color:#C62828; transition:all 0.15s; }
  .btn-reject:hover { background:#C62828; color:#fff; }
  .btn-cancel   { padding:3px 9px; border-radius:12px; border:none; cursor:pointer;
                  font-size:11px; font-weight:600; font-family:'Sarabun',sans-serif;
                  background:#FFF8E1; color:#E65100; transition:all 0.15s; }
  .btn-cancel:hover { background:#E65100; color:#fff; }
  /* ── QR Video ────────────────────────────────────────────────────────────── */
  #qr-video { display:none; width:100%; max-width:320px; border-radius:12px;
              border:3px solid #B71C1C; margin-bottom:10px; }
  #qr-canvas { display:none; }
  .qr-btn-row { display:flex; gap:10px; justify-content:center; margin-top:10px; }
  /* ── Photo thumbs ────────────────────────────────────────────────────────── */
  .photo-thumb img { width:80px; height:80px; object-fit:cover; border-radius:6px; display:block; }
  .photo-count-badge { background:#B71C1C; color:#fff; border-radius:10px;
                       padding:2px 8px; font-size:11px; margin-left:8px; }
  /* ── Notif permission ────────────────────────────────────────────────────── */
  .notif-permit-bar { background:#FFF9C4; border:1px solid #F9A825; border-radius:8px;
                      padding:8px 14px; font-size:12px; color:#795548; display:flex;
                      align-items:center; gap:10px; margin-bottom:14px; }

  /* ── Admin Panel ─────────────────────────────────────────────────────────── */
  .admin-group-row { background:#FFEBEE; }
  .admin-group-row td { font-weight:700; color:#B71C1C; padding:8px 14px; font-size:13px; }
  .admin-modal-box { background:#fff; border-radius:16px; padding:0; max-width:460px; width:92%;
                     box-shadow:0 20px 60px rgba(0,0,0,0.3); overflow:hidden; animation:slideUp 0.25s ease; }
  .line-pending-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
  .line-pending-list { display:flex; flex-direction:column; gap:8px; max-height:520px; overflow:auto; padding-right:4px; }
  .line-pending-row { border:1px solid #F5C2C7; border-radius:10px; padding:10px 12px; background:#FFFDFB; }
  .line-pending-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .line-pending-title { font-weight:800; color:#B71C1C; font-size:13px; }
  .line-pending-meta { color:#7A6F63; font-size:11px; line-height:1.45; margin-top:3px; }
  .line-pending-detail { color:#333; font-size:12px; line-height:1.55; margin-top:8px; white-space:pre-wrap; }
  .line-pending-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
  .line-pending-pill { display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:2px 8px; font-size:11px; background:#F5F5F5; color:#555; margin:2px 3px 0 0; }
  .info-tip { background:#FFF3E0; border:1px solid #FFB74D; border-radius:8px;
              padding:10px 16px; font-size:12px; color:#E65100; margin-top:4px; }

  /* ═══ Belt Detail (QR landing) ═══ */
  @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
  #belt-detail-overlay { position:fixed; inset:0; z-index:9000; background:#F2EFE9; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .bd-wrap { max-width:560px; margin:0 auto; padding-bottom:90px; }
  .bd-head { background:linear-gradient(135deg,#7F0000,#B71C1C); color:#fff; padding:22px 20px 18px; }
  .bd-head-row { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
  .bd-code { font-size:30px; font-weight:800; letter-spacing:1px; }
  .bd-type { font-size:13px; opacity:0.9; margin-top:2px; }
  .bd-status-badge { padding:6px 14px; border-radius:16px; font-size:13px; font-weight:700; white-space:nowrap; background:rgba(255,255,255,0.18); }
  .bd-meta { margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; font-size:13px; }
  .bd-meta .k { opacity:0.8; }
  .bd-meta .v { font-weight:600; }
  .bd-section { background:#fff; margin:12px; border-radius:14px; padding:16px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
  .bd-section-title { font-weight:700; color:#7F0000; font-size:15px; margin-bottom:12px; }
  .bd-comp-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #F0ECE4; }
  .bd-comp-row:last-child { border-bottom:none; }
  .bd-subgroup-card { border:1px solid #F0D5D5; border-radius:10px; overflow:hidden; margin:8px 0 10px; background:#FFFCFC; }
  .bd-subgroup-head { display:flex; justify-content:space-between; gap:8px; align-items:center; background:#FFF3F3; color:#7F0000; font-weight:800; padding:10px 12px; font-size:13px; }
  .bd-subgroup-note { color:#9A9286; font-size:11px; font-weight:600; }
  .bd-subgroup-body { padding:0 12px; }
  .bd-comp-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
  .bd-comp-photo-btn { width:44px; height:34px; border:1px solid #F5C2C7; border-radius:8px; background:#FFF7F7; padding:2px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .bd-comp-photo-btn:hover { background:#FFEBEE; border-color:#B71C1C; }
  .bd-comp-photo-btn img { max-width:100%; max-height:100%; border-radius:6px; display:block; }
  .bd-comp-name { flex:1; font-size:13px; font-weight:600; color:#333; }
  .bd-comp-info { font-size:11px; color:#9A9286; text-align:right; line-height:1.4; }
  .bd-photo-modal-bg { position:fixed; inset:0; z-index:9300; background:rgba(0,0,0,0.52); display:none; align-items:center; justify-content:center; padding:18px; }
  .bd-photo-modal { width:min(520px, 96vw); background:#fff; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,0.24); overflow:hidden; }
  .bd-photo-head { background:linear-gradient(135deg,#7F0000,#B71C1C); color:#fff; padding:14px 16px; display:flex; justify-content:space-between; gap:12px; align-items:center; }
  .bd-photo-title { font-size:15px; font-weight:800; line-height:1.35; }
  .bd-photo-close { border:0; background:rgba(255,255,255,0.16); color:#fff; border-radius:50%; width:34px; height:34px; font-size:18px; cursor:pointer; }
  .bd-photo-body { padding:16px; text-align:center; }
  .bd-photo-body img { width:100%; max-height:320px; object-fit:contain; border:1px solid #F0D5D5; border-radius:14px; background:#FFFDFB; }
  .bd-photo-meta { margin-top:10px; color:#6B6256; font-size:12px; line-height:1.55; text-align:left; }
  .bd-photo-actions { margin-top:12px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
  .bd-legend { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:12px; font-size:11px; color:#6B6256; }
  .bd-legend span.k { display:flex; align-items:center; gap:4px; }
  .bd-legend i { width:10px; height:10px; border-radius:2px; display:inline-block; }
  .bd-chart-click-hint { margin-top:8px; font-size:11px; color:#9A9286; text-align:center; }
  .bd-chart-detail { margin-top:12px; border:1px solid #EFE6D8; border-radius:10px; background:#FFFCF7; overflow:hidden; }
  .bd-chart-detail-head { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; background:#FFF4E6; color:#7F0000; font-size:13px; font-weight:700; }
  .bd-chart-detail-total { color:#B71C1C; white-space:nowrap; }
  .bd-chart-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:10px 12px; }
  .bd-chart-summary-card { border:1px solid #E8DDCD; border-radius:8px; background:#fff; padding:8px; text-align:center; }
  .bd-chart-summary-num { font-size:19px; font-weight:800; color:#B71C1C; line-height:1; }
  .bd-chart-summary-label { font-size:11px; color:#6B6256; margin-top:3px; }
  .bd-chart-log-list { border-top:1px solid #EFE6D8; padding:4px 12px 10px; }
  .bd-chart-log-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid #F3ECE2; font-size:12px; }
  .bd-chart-log-row:last-child { border-bottom:none; }
  .bd-chart-log-dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
  .bd-chart-log-main { flex:1; min-width:0; }
  .bd-chart-log-name { font-weight:700; color:#333; }
  .bd-chart-log-note { color:#8A8275; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bd-chart-log-date { font-size:11px; color:#9A9286; white-space:nowrap; text-align:right; }
  .bd-chart-delete-btn { border:1px solid #D32F2F; background:#fff; color:#B71C1C; border-radius:7px; padding:3px 8px; font-size:11px; cursor:pointer; margin-left:2px; }
  .bd-chart-delete-btn:hover { background:#FFEBEE; }
  #bd-replace-chart svg { display:block; width:100%; min-height:210px; }
  #bd-replace-detail .bd-chart-log-row { padding:10px 0; font-size:13px; }
  #bd-replace-detail .bd-chart-log-name { font-size:13px; }
  #bd-replace-detail .bd-chart-log-note,
  #bd-replace-detail .bd-chart-log-date { font-size:12px; }
  /* expandable log item */
  .bd-log-item { border-bottom:1px solid #F3ECE2; cursor:pointer; }
  .bd-log-item:last-child { border-bottom:none; }
  .bd-log-item .bd-chart-log-row { border-bottom:none; }
  .bd-expand-arrow { font-size:14px; color:#B71C1C; transition:transform .2s; line-height:1; flex-shrink:0; }
  .bd-log-item.open .bd-expand-arrow { transform:rotate(90deg); }
  .bd-log-detail {
    display:none; padding:10px 12px 12px 26px;
    background:#FFF8F0; border-top:1px dashed #F0D9C0;
    font-size:12px; color:#555;
  }
  .bd-log-item.open .bd-log-detail { display:block; }
  .bd-log-detail-row { display:flex; gap:6px; margin-bottom:5px; align-items:flex-start; }
  .bd-log-detail-row .k { color:#9A9286; min-width:80px; flex-shrink:0; }
  .bd-log-detail-row .v { color:#333; font-weight:600; flex:1; }
  .bd-log-detail-row .v.result-ok   { color:#2E7D32; }
  .bd-log-detail-row .v.result-warn { color:#E65100; }
  .bd-log-detail-row .v.result-bad  { color:#C62828; }
  .bd-log-hist-btn {
    margin-top:10px; display:inline-flex; align-items:center; gap:5px;
    padding:5px 12px; background:#B71C1C; color:#fff; border:none;
    border-radius:6px; font-size:12px; font-family:inherit; cursor:pointer;
  }
  .bd-log-hist-btn:hover { background:#9B1414; }
  .bd-actions { position:fixed; bottom:0; left:0; right:0; max-width:560px; margin:0 auto;
                display:flex; gap:8px; padding:12px; background:#fff; border-top:1px solid #E0D9CF; z-index:9001; }
  .bd-drawer-bg { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:9100; opacity:0; pointer-events:none; transition:opacity .2s; }
  .bd-drawer-bg.open { opacity:1; pointer-events:auto; }
  .bd-drawer { position:fixed; left:0; right:0; bottom:0; max-width:560px; margin:0 auto; z-index:9101;
               background:#fff; border-radius:18px 18px 0 0; transform:translateY(105%); transition:transform .26s cubic-bezier(.4,0,.2,1); max-height:88%; overflow-y:auto; }
  .bd-drawer.open { transform:translateY(0); }
  .bd-drawer-head { background:#7F0000; color:#fff; padding:14px 18px; font-weight:700; position:relative; border-radius:18px 18px 0 0; }
  .bd-drawer-close { position:absolute; top:10px; right:14px; background:rgba(255,255,255,0.2); border:none; color:#fff; width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:15px; }
  .bd-drawer-body { padding:16px 18px 28px; }
  .bd-label { display:block; font-size:12px; color:#8A8275; margin:10px 0 4px; font-weight:600; }
  .bd-input { width:100%; padding:11px 12px; border:1px solid #D8CFC0; border-radius:9px; font-size:14px; font-family:inherit; }

  /* V56 — Mobile-friendly PM record form: no horizontal swiping */
  html, body { max-width:100%; overflow-x:hidden; }
  *, *::before, *::after { box-sizing:border-box; }
  #screen-record, #screen-record .content, #screen-record .card, #screen-record .card-body,
  #screen-record .form-grid, #screen-record .form-group, #screen-record .two-col {
    max-width:100%; min-width:0;
  }
  #screen-record select,
  #screen-record input,
  #screen-record textarea,
  #screen-record button {
    max-width:100%; min-width:0;
  }
  #screen-record .two-col { gap:14px; }
  #screen-record .form-input { width:100%; }
  #record-plan-select, #record-component, #record-result, #belt-condition-summary {
    text-overflow:ellipsis;
  }
  #fbs-grid { max-width:100% !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; }

  @media (max-width: 700px) {
    #screen-record .content { padding:10px 10px 88px; }
    #screen-record .breadcrumb { display:none; }
    #screen-record .two-col { display:block !important; }
    #screen-record .two-col > div { width:100%; max-width:100%; margin:0 0 12px; }
    #screen-record .card { border-radius:8px; margin-bottom:12px !important; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
    #screen-record .card-header { padding:11px 12px; gap:8px; }
    #screen-record .card-title { font-size:14px; line-height:1.25; }
    #screen-record .card-body { padding:12px !important; overflow:hidden; }
    #screen-record .form-grid { display:grid; grid-template-columns:minmax(0,1fr) !important; gap:12px; }
    #screen-record .form-group { width:100%; }
    #screen-record .form-label { font-size:12px; line-height:1.25; }
    #screen-record .form-input { min-height:42px; font-size:14px; padding:10px 11px; }
    #screen-record .form-textarea { min-height:96px; }
    #screen-record .form-group div[style*="display:flex"] { width:100%; min-width:0; }
    #screen-record .form-group div[style*="display:flex"] .form-input { min-width:0; }
    #record-time-start-h, #record-time-start-m, #record-time-end-h, #record-time-end-m { min-width:0; padding-left:6px; padding-right:6px; }
    #belt-checklist .belt-check-top { align-items:flex-start; }
    #belt-checklist .belt-check-label { line-height:1.35; overflow-wrap:anywhere; }
    #screen-record .photo-upload { padding:14px 10px !important; }
    #screen-record .photo-thumbs { max-width:100%; overflow:hidden; }
    #screen-record .btn, #screen-record button { min-height:42px; white-space:normal; }
    #bd-replace-chart svg { min-height:240px; }
    #bd-replace-legend { font-size:12px; gap:8px; }
    #bd-replace-legend i { width:12px; height:12px; }
    #bd-replace-detail .bd-chart-detail-head { font-size:14px; }
    #bd-replace-detail .bd-chart-log-row {
      display:grid;
      grid-template-columns:12px 1fr;
      align-items:start;
      gap:7px 9px;
    }
    #bd-replace-detail .bd-chart-log-date {
      grid-column:2;
      text-align:left;
      line-height:1.35;
      white-space:normal;
    }
  }

  @media (max-width: 380px) {
    #screen-record .content { padding-left:8px; padding-right:8px; }
    #screen-record .card-body { padding:10px !important; }
    #screen-record .form-input { font-size:13px; }
    #fbs-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  }
  /* V57 — iOS/mobile portrait login fix */
  #login-overlay {
    min-height:100vh;
    min-height:100dvh;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    padding:16px;
  }
  .login-box { max-height:none; min-width:0; }
  .login-box, .login-box * { max-width:100%; box-sizing:border-box; }
  #tech-input-box, #pin-input-box { width:100%; }
  #login-overlay .btn-primary,
  #login-overlay .btn-viewer,
  #login-overlay .pin-toggle { touch-action:manipulation; }

  @media (max-width: 600px), (max-height: 680px) {
    #login-overlay {
      align-items:flex-start;
      justify-content:center;
      padding:12px 12px calc(24px + env(safe-area-inset-bottom));
    }
    .login-box {
      width:min(100%, 420px);
      margin:0 auto;
      padding:20px 16px 18px;
      border-radius:14px;
    }
    .login-logo { font-size:38px; margin-bottom:6px; }
    .login-title { font-size:19px; margin-bottom:2px; }
    .login-sub { font-size:12px; margin-bottom:14px; line-height:1.35; }
    .btn-viewer { padding:11px 12px; font-size:14px; margin-bottom:8px; }
    .pin-section { margin-top:8px !important; }
    .pin-toggle { min-height:42px; padding:10px 8px; font-size:14px; text-decoration:none; border-radius:9px; }
    .pin-input-row { display:flex; flex-direction:column; gap:8px; width:100%; margin-top:8px; }
    .pin-input {
      width:100%;
      min-height:44px;
      flex:none;
      padding:11px 12px;
      font-size:16px;
      letter-spacing:0 !important;
      text-align:left !important;
    }
    #tech-pin, #pin-field { text-align:center !important; letter-spacing:4px !important; }
    #login-overlay .btn-primary { width:100%; min-height:44px; font-size:15px; border-radius:9px; }
    .pin-error { font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
    #login-overlay p { margin-top:8px !important; line-height:1.35; }
  }

  @media (max-height: 520px) {
    #login-overlay { align-items:flex-start; padding-top:8px; }
    .login-box { padding-top:14px; padding-bottom:14px; }
    .login-logo { display:none; }
    .login-sub { margin-bottom:8px; }
    #login-overlay p { display:none; }
  }
  /* V68 — mobile-first layout: compact header/tabs and no horizontal swiping */
  @media (max-width: 700px) {
    .main { min-width:0; }
    .topbar { padding:7px 8px; gap:6px; min-height:48px; align-items:center; justify-content:flex-end; }
    .topbar h2 {
      display:none;
    }
    .topbar > h2 + span { display:none; }
    .topbar-actions { gap:5px; flex-shrink:0; width:100%; display:flex; align-items:center; }
    .topbar-actions .btn { padding:7px 8px; font-size:12px; max-width:76px; white-space:normal; line-height:1.15; }
    .topbar-actions .btn-primary { font-size:0; width:56px; min-width:56px; padding:8px 4px; }
    .topbar-actions .btn-primary::after { content:'+ งาน'; font-size:12px; font-weight:700; }
    .topbar-actions .btn-outline { width:42px; min-width:42px; padding:8px 4px; font-size:0; }
    .topbar-actions .btn-outline::after { content:'↩'; font-size:18px; }
    .topbar-actions .logout-top-btn {
      width:auto !important; min-width:58px !important; max-width:none !important;
      padding:8px 8px !important; font-size:12px !important;
    }
    .topbar-actions .logout-top-btn::after { content:none !important; }
    #topbar-date {
      display:inline-flex; align-items:center; justify-content:flex-end;
      margin-left:auto; order:10; white-space:nowrap; min-width:max-content;
      font-size:11px !important; color:#757575 !important;
    }
    .view-only-bar { padding:5px 10px; font-size:12px; line-height:1.25; min-height:34px; }
    .screen-tabs {
      padding:5px 8px; gap:5px; min-height:42px; position:sticky; top:0; z-index:50;
      scrollbar-width:none;
    }
    .screen-tabs::-webkit-scrollbar { display:none; }
    .tab {
      padding:6px 10px; font-size:12px; border-radius:16px; line-height:1.15;
      max-width:132px; overflow:hidden; text-overflow:ellipsis;
    }
    /* Main nav tabs: icon-only on mobile */
    .screen-tabs .tab {
      width:38px; min-width:38px; max-width:38px;
      padding:7px 0; font-size:17px; text-align:center;
      overflow:hidden; white-space:nowrap;
      border-radius:50%; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
    }
    .screen-tabs .tab .tl { display:none; }
    .screen-tabs .tab .ti { font-size:17px; line-height:1; }
    /* Label tooltip on long-press / active */
    .screen-tabs .tab { position:relative; }
    .screen-tabs .tab::after {
      content: attr(data-label);
      position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
      background:rgba(30,20,10,0.82); color:#fff; font-size:11px; font-weight:600;
      padding:3px 9px; border-radius:10px; white-space:nowrap; pointer-events:none;
      opacity:0; transition:opacity 0.15s; font-family:'Sarabun',sans-serif; z-index:200;
    }
    .screen-tabs .tab:active::after { opacity:1; }
    .content { padding:10px 8px; overflow-x:hidden; }
    .search-row { display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:10px; }
    .search-input, .filter-select, .search-row .btn {
      width:100%; min-width:0; min-height:42px; font-size:14px;
    }
    .card { border-radius:8px; margin-bottom:10px; }
    .card-header { padding:10px 12px; }
    .card-title { font-size:14px; line-height:1.25; }
    .two-col { display:block !important; }
    .two-col > div { width:100%; max-width:100%; margin-bottom:10px; }
    .form-grid { grid-template-columns:1fr !important; gap:11px; }
    .form-input { width:100%; min-width:0; min-height:42px; font-size:14px; }
    .form-group div[style*="display:flex"] { min-width:0; width:100%; }
    .form-group div[style*="display:flex"] .form-input { min-width:0; }
    #screen-dailywork, #screen-dailywork * { max-width:100%; }
    #screen-dailywork .content { padding:10px 8px 90px; }
    #screen-dailywork .breadcrumb { display:none; }
    #screen-dailywork .card-body { overflow:visible; }
    #screen-dailywork table, #screen-history table, #screen-breakdown table, #screen-spareparts table { display:none; }
    /* v173: hide dashboard card tables on mobile — show mobile card lists instead */
    #screen-dashboard .card table { display:none !important; }
    #daily-history-cards, #history-card-list, #breakdown-card-list, .mobile-card-list { display:block; }
    #screen-dashboard .card .mobile-card-list { display:block !important; }
    #screen-history .card-body, #screen-breakdown .card-body, #screen-spareparts .card-body {
      overflow:hidden !important;
    }
    /* v173: allow detail blocks to expand in history screens */
    #screen-dailyhistory .card-body { overflow:visible !important; }
    #screen-dailyhistory .card { overflow:visible !important; }
    #screen-history .content, #screen-dailyhistory .content, #screen-breakdown .content, #screen-spareparts .content { padding:10px 8px 18px; }
    #breakdown-kpi-grid { grid-template-columns:1fr 1fr !important; gap:8px; }
    #breakdown-kpi-grid .kpi-card { padding:12px; min-width:0; }
    #breakdown-kpi-grid .kpi-value { font-size:24px; overflow-wrap:anywhere; }
    #smdt-kpi-grid { grid-template-columns:1fr 1fr !important; gap:8px; }
    #smdt-kpi-grid .kpi-card { padding:12px; min-width:0; }
    #smdt-kpi-grid .kpi-value { font-size:24px; overflow-wrap:anywhere; }
    #screen-smdt .two-col { display:block !important; }
    #screen-smdt .form-grid { grid-template-columns:1fr !important; }
    #screen-smdt .action-bar { position:static; padding:10px 0 0; border-top:none; }
    #screen-breakdown .two-col { display:block !important; }
    #screen-breakdown .form-grid { grid-template-columns:1fr !important; }
    #screen-breakdown .action-bar { position:static; padding:10px 0 0; border-top:none; }
    .hist-mobile-card { padding:12px 10px; }
    .hist-mobile-actions .btn, .hist-mobile-actions button { min-height:38px; white-space:normal; }
    .action-bar { padding:8px 10px calc(8px + env(safe-area-inset-bottom)); }
    .action-bar .btn { min-height:44px; padding:10px 8px; font-size:14px; line-height:1.2; }
  }
/* v162-mobile-dashboard-repair */
@media (max-width: 760px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body, #root, #app, .app, .app-shell, .layout, .main, main,
  .main-content, .app-content, .page-content, .content, .page,
  .page-body, .view, .screen, .workspace, .workspace-main,
  .view-shell, .content-shell, .main-view, .dashboard,
  .dashboard-page, .dashboard-content, .dashboard-shell, .home-page,
  .history-page, .breakdown-page, .spare-page, .factory-map-page,
  .machines-page {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  .main, main, .main-content, .app-content, .page-content, .content,
  .page, .page-body, .view, .dashboard, .dashboard-page,
  .dashboard-content, .dashboard-shell {
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: hidden !important;
  }

  .dashboard-grid, .dash-grid, .stats-grid, .summary-grid,
  .metrics-grid, .cards-grid, .chart-grid, .dashboard-layout,
  .home-grid, .two-col, .two-column, .main-grid, .content-grid,
  .breakdown-grid, .spares-dashboard-grid, .spare-dashboard-grid,
  .report-grid, .dashboard-sections, .dashboard-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  [class*="grid"], [class*="Grid"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .stat-card, .metric-card, .summary-card, .chart-card,
  .dashboard-card, .panel, .section-card, .card, .table-card,
  .breakdown-card, .spare-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  /* v173: dailyhistory & dailywork cards need to expand for detail toggle / form dropdowns */
  #screen-dailyhistory .card,
  #screen-dailyhistory .card-body,
  #screen-dailywork .card,
  #screen-dailywork .card-body {
    overflow: visible !important;
  }

  .chart-card, .dashboard-card, .section-card, .panel {
    padding: 12px !important;
  }

  .chart-card canvas, .dashboard-card canvas, canvas {
    max-width: 100% !important;
    max-height: 240px !important;
  }

  .table-wrap, .table-responsive, .chart-detail-list, .history-list,
  .breakdown-list, .spare-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table {
    width: 100% !important;
    table-layout: fixed !important;
  }

  th, td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    padding: 8px 6px !important;
  }

  .top-nav, .main-tabs, .tabs, .tab-bar, .nav-tabs, .pill-tabs,
  .quick-nav, .page-tabs, .mobile-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    max-width: 100vw !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .top-nav::-webkit-scrollbar, .main-tabs::-webkit-scrollbar,
  .tabs::-webkit-scrollbar, .tab-bar::-webkit-scrollbar,
  .nav-tabs::-webkit-scrollbar, .pill-tabs::-webkit-scrollbar,
  .quick-nav::-webkit-scrollbar, .page-tabs::-webkit-scrollbar,
  .mobile-tabs::-webkit-scrollbar {
    display: none;
  }

  .top-nav > *, .main-tabs > *, .tabs > *, .tab-bar > *,
  .nav-tabs > *, .pill-tabs > *, .quick-nav > *, .page-tabs > *,
  .mobile-tabs > * {
    flex: 0 0 auto !important;
    min-width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
  }

  .top-nav button, .main-tabs button, .tabs button, .tab-bar button,
  .nav-tabs button, .pill-tabs button, .quick-nav button,
  .page-tabs button, .tab-button {
    padding: 7px 10px !important;
    min-height: 34px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .technician-banner, .user-mode-banner, .mode-banner, .role-banner,
  .role-strip, .mode-strip {
    padding: 4px 8px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    max-height: none !important;
  }

  .app-header, .page-header, .top-header {
    padding: 8px 10px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .app-header h1, .page-header h1, .top-header h1, .title {
    font-size: 20px !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
  }
}

@media (min-width: 761px) {
  .chart-card canvas, .dashboard-card canvas {
    max-height: 320px !important;
  }

  .spares-dashboard-grid, .spare-dashboard-grid, .breakdown-grid,
  .chart-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  }
}