:root {
    --bg-main: #f8fafc;
    --sidebar-bg: transparent;
    --text-main: #1e293b;
    --text-light: #64748b;
    --primary: #0ea5e9;
    --primary-hover: #0284c7;
    --border-color: #e2e8f0;
    --white: #ffffff;
    --card-shadow: 0 4px 15px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.05);
    --card-shadow-hover: 0 15px 35px -5px rgba(14, 165, 233, 0.15), 0 5px 15px rgba(0,0,0,0.05);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    overflow: hidden; height: 100dvh;
    font-family: 'Inter', sans-serif;
    background-color: #0f172a;
    color: var(--text-main); line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.app-container {
    display: flex; height: 100dvh; overflow: hidden; max-width: 100vw; position: relative;
    width: 100%;
    background: #0f172a;

    background-image:
        radial-gradient(circle at 15% 50%, rgba(14, 165, 233, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.12) 0%, transparent 50%);
}

.sidebar { width: 270px; background-color: var(--sidebar-bg); color: #e2e8f0; display: flex; flex-direction: column; padding: 2rem 1.25rem; overflow-y: auto; overflow-x: hidden; flex-shrink: 0; z-index: 99; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s, padding 0.3s, opacity 0.3s; }
.brand { margin-bottom: 2.5rem; padding-left: 0.5rem; }
.brand h2 { font-size: 1.35rem; color: #38bdf8; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.75rem; text-shadow: 0 0 15px rgba(56, 189, 248, 0.4); }
.brand p { font-size: 0.75rem; color: #94a3b8; font-weight: 500; letter-spacing: 0.3px; }
.nav-links { display: flex; flex-direction: column; gap: 0.4rem; flex-grow: 1; }
.nav-btn { background: transparent; border: none; color: #94a3b8; text-align: left; padding: 0.85rem 1rem; border-radius: 0.75rem; cursor: pointer; font-size: 0.9rem; font-weight: 600; transition: var(--transition); display: flex; align-items: center; gap: 0.75rem; white-space: nowrap; position: relative; overflow: hidden;}
.reminder-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.68rem; font-weight: 800; margin-left: auto; box-shadow: 0 0 0 2px rgba(15,23,42,0.6); }
.nav-btn i { width: 18px; text-align: center; color: #64748b; transition: var(--transition); font-size: 1.05rem; }
.nav-btn:hover { background-color: rgba(255,255,255,0.05); color: #f8fafc; }
.nav-btn:hover i { color: #f8fafc; }
.nav-btn:active { transform: scale(0.98); }
.nav-btn.active { background-color: rgba(56, 189, 248, 0.1); color: #38bdf8; font-weight: 700; box-shadow: inset 4px 0 0 #38bdf8; }
.nav-btn.active i { color: #38bdf8; filter: drop-shadow(0 0 5px rgba(56,189,248,0.5)); }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.25rem; font-size: 0.8rem; color: #64748b; margin-top: auto; text-align: center; }

@media (min-width: 769px) {
    .app-container.sidebar-hidden .sidebar { width: 0; padding: 2rem 0; opacity: 0; pointer-events: none; box-shadow: none; }
}

.sidebar-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px); z-index: 998; display: none; opacity: 0; transition: opacity 0.3s; }
.sidebar-overlay.show { display: block; opacity: 1; }

.main-content {
    flex: 1; overflow-y: auto; padding: 2rem 2.5rem;
    background: var(--bg-main); transition: var(--transition);
    width: 100%;
    min-width: 0;
    margin: 1rem 1rem 1rem 0; border-radius: 1.5rem;
    box-shadow: -5px 0 30px rgba(0,0,0,0.4); position: relative;
}

.top-header {
    position: sticky; top: -2rem; z-index: 90;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;
    margin: -2rem -2.5rem 2rem -2.5rem; padding: 1.5rem 2.5rem;
    background: rgba(248, 250, 252, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.header-left { display: flex; align-items: center; gap: 1.25rem; }
.header-right { display: flex; align-items: center; gap: 1rem; }

.btn-sidebar-toggle { background: #ffffff; border: 1px solid var(--border-color); color: #0f172a; width: 42px; height: 42px; border-radius: 0.75rem; cursor: pointer; font-size: 1.1rem; box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: var(--transition); display: flex; align-items: center; justify-content: center; }
.btn-sidebar-toggle:hover { background-color: #0f172a; color: #fff; transform: scale(1.05); box-shadow: 0 5px 15px rgba(15,23,42,0.2); border-color: #0f172a; }
.top-header h1 { font-size: 1.6rem; font-weight: 800; color: #0f172a; letter-spacing: -0.5px; margin: 0; }

.btn-view-toggle { background: #ffffff; border: 1px solid var(--border-color); padding: 0.55rem 1rem; border-radius: 0.75rem; font-size: 0.85rem; font-weight: 600; color: #475569; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: var(--transition); box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.btn-view-toggle:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.btn-view-toggle.view-only { background: #ef4444; color: white; border-color: #ef4444; }

.btn-header-action { width: 40px; height: 40px; border-radius: 0.75rem; background: #ffffff; border: 1px solid var(--border-color); color: #475569; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; transition: var(--transition); box-shadow: 0 2px 5px rgba(0,0,0,0.02); flex-shrink: 0; }
.btn-header-action:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.btn-header-action.btn-logout:hover { background: #fef2f2; border-color: #fca5a5; color: #ef4444; }
.btn-header-action.push-active { background: #ecfdf5; border-color: #6ee7b7; color: #059669; }
.btn-header-action.push-active:hover { background: #d1fae5; border-color: #34d399; color: #047857; }

body.view-only .btn-add-employee,
body.view-only .btn-export,
body.view-only #btn-show-add-form,
body.view-only .ts-btn,
body.view-only .btn-save-note,
body.view-only .btn-forecast,
body.view-only .btn-autofill,
body.view-only .btn-lock,
body.view-only .shift-select,
body.view-only .btn-raport,
body.view-only #add-employee-form-container,
body.view-only .form-actions button[type="submit"],
body.view-only .btn-cancel,
body.view-only .btn-delete-log,
body.view-only .ho-btn-ack,
body.view-only .ts-action-grid { display: none !important; }

/* FIX: Kalkulator Batubara Batch (menu "Kalibrasi/Kalkulator" - tabel input
   massal) sebelumnya TIDAK ikut aturan Mode Lihat sama sekali — kolom input
   & tombol hapus-baris tetap bisa diklik/diketik, terlihat seperti mau
   tersimpan (status jadi "Menunggu…"), padahal kbBatchAutoSaveRow() memang
   sengaja tidak menyimpan apapun saat Mode Lihat aktif — jadi data yang
   diketik terlihat "hilang begitu saja" tanpa penjelasan. Sekarang kolom
   inputnya dikunci visual & fungsional juga saat Mode Lihat aktif. */
body.view-only .kb-batch-input,
body.view-only .kb-batch-del { pointer-events: none; opacity: 0.55; background: #f1f5f9 !important; }

/* PENGECUALIAN: "Mode View" dimaksudkan untuk mengunci pengeditan DATA YANG
   SUDAH ADA (supaya Foreman tidak salah pencet saat sekadar meninjau) — BUKAN
   untuk mengunci pengisian data KESELAMATAN yang baru, seperti P2H & Ambil/
   Kembalikan Kendaraan. Tanpa pengecualian ini, kalau Foreman lupa
   mengembalikan toggle-nya ke "Mode Edit" lalu HP-nya dipakai Driver untuk
   isi P2H, tombol Batal/Submit-nya hilang total TANPA keterangan apa pun —
   Driver jadi tidak bisa mengambil kendaraan sama sekali sampai ada yang
   sadar & mengubah toggle-nya. Jadi form ini SENGAJA selalu bisa disubmit,
   berapa pun status toggle Mode View/Edit-nya. */
body.view-only #modal-kendaraan-ambil .form-actions button[type="submit"],
body.view-only #modal-kendaraan-ambil .btn-cancel,
body.view-only #modal-kendaraan-kembali .form-actions button[type="submit"],
body.view-only #modal-kendaraan-kembali .btn-cancel { display: inline-block !important; }

.badge { padding: 0.4rem 1rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 0.3rem; }
.badge.foreman { background-color: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }

.content-section { display: none; animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.content-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.card { background: #ffffff; border-radius: 1.25rem; box-shadow: var(--card-shadow); border: 1px solid rgba(226, 232, 240, 0.8); padding: 1.75rem; margin-bottom: 1.5rem; transition: var(--transition); }
.card:hover { box-shadow: var(--card-shadow-hover); border-color: rgba(14, 165, 233, 0.3); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 1rem; }
.card-header h3 { font-size: 1.2rem; font-weight: 600; color: #0f172a; display: flex; align-items: center; gap: 0.5rem; }
.subtitle { color: var(--text-light); font-size: 0.8rem; margin-top: 0.25rem; }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }

.hero-stats-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.hero-stat-card {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; gap: 1.1rem;
    padding: 1.4rem 1.5rem; border-radius: 1.25rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.45), inset 0 0 0 1px rgba(255,255,255,0.04);
    transition: var(--transition);
}
.hero-stat-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -10px rgba(15, 23, 42, 0.55), inset 0 0 0 1px rgba(255,255,255,0.06); }
.hero-stat-card::before {
    content: ''; position: absolute; z-index: 0; top: -60px; right: -40px;
    width: 190px; height: 190px; border-radius: 50%;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 72%);
    opacity: 0.5;
}
.hero-stat-icon {
    position: relative; z-index: 1; flex-shrink: 0;
    width: 54px; height: 54px; border-radius: 1rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    background: var(--icon-bg); color: var(--accent-color);
    box-shadow: inset 0 0 0 1px var(--icon-ring);
}
.hero-stat-info { position: relative; z-index: 1; display: flex; flex-direction: column; }
.hero-stat-value { font-size: 2.15rem; font-weight: 800; line-height: 1; letter-spacing: -0.5px; color: #f8fafc; }
.hero-stat-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #94a3b8; margin-top: 0.35rem; }
.hero-stat-breakdown { font-size: 0.72rem; font-weight: 600; color: #cbd5e1; margin-top: 0.3rem; white-space: nowrap; }

.stat-onsite { border-left: 4px solid #10b981; --glow-color: rgba(16,185,129,0.55); --icon-bg: rgba(16,185,129,0.15); --accent-color: #34d399; --icon-ring: rgba(52,211,153,0.35); }
.stat-total  { border-left: 4px solid #0ea5e9; --glow-color: rgba(14,165,233,0.55); --icon-bg: rgba(14,165,233,0.15); --accent-color: #7dd3fc; --icon-ring: rgba(125,211,252,0.35); }
.stat-cuti   { border-left: 4px solid #8b5cf6; --glow-color: rgba(139,92,246,0.55); --icon-bg: rgba(139,92,246,0.15); --accent-color: #c4b5fd; --icon-ring: rgba(196,181,253,0.35); }
.stat-sakit  { border-left: 4px solid #f59e0b; --glow-color: rgba(245,158,11,0.55); --icon-bg: rgba(245,158,11,0.15); --accent-color: #fcd34d; --icon-ring: rgba(252,211,77,0.35); }
.dash-card { background: white; border-radius: 1rem; box-shadow: var(--card-shadow); border: 1px solid var(--border-color); padding: 1.5rem; transition: var(--transition); }
.dash-card:hover { box-shadow: var(--card-shadow-hover); }
.dash-card h4 { font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.dash-list { list-style: none; margin-top: 0.5rem; max-height: 200px; overflow-y: auto; }
.dash-list li { padding: 0.35rem 0; border-bottom: 1px solid #f1f5f9; font-size: 0.85rem; display: flex; justify-content: space-between; }
.urgent-highlight { color: #ef4444; font-weight: 700; }

.apr-table-wrap { border-radius: 1rem; overflow: auto; border: 1px solid var(--border-color); }
.apr-table { font-size: 0.78rem; border-collapse: separate; border-spacing: 0; }
.apr-table th, .apr-table td { padding: 9px 8px; }
.apr-head-row th { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #f1f5f9; font-weight: 700; }
.apr-subhead-row th { background: #334155; color: #e2e8f0; text-align: center; width: 72px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2px; }
.apr-subhead-muted { background: #475569 !important; }
.apr-th-sticky { position: sticky; z-index: 3; text-align: left; }
.apr-th-sticky-1 { left: 0; width: 70px; }
.apr-th-sticky-2 { left: 70px; min-width: 170px; }
.apr-th-group { text-align: center; border-bottom: 1px solid rgba(255,255,255,0.15); }
.apr-th-accent { text-align: center; font-size: 0.78rem; color: #0f172a; }
.apr-th-accent-amber { background: #fbbf24; }
.apr-th-accent-green { background: #34d399; }
.apr-th-accent-blue { background: #38bdf8; }

.apr-table tbody tr { background: #ffffff; transition: background 0.15s; }
.apr-table tbody tr:nth-child(even) { background: #f8fafc; }
.apr-table tbody tr:hover { background: #eff6ff; }
.apr-td-sticky { position: sticky; z-index: 1; background: inherit; border-right: 1px solid var(--border-color); }
.apr-td-sticky-1 { left: 0; width: 70px; font-weight: 700; color: #0f172a; }
.apr-td-sticky-2 { left: 70px; font-weight: 700; color: #334155; }
.apr-td-center { text-align: center; font-weight: 600; color: #334155; }
.apr-td-muted { text-align: center; font-weight: 600; color: #0369a1; background: rgba(56, 189, 248, 0.06); }
.apr-td-empty { text-align: center; color: #94a3b8; font-style: italic; }

.apr-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 3px 8px; border-radius: 6px; font-weight: 700; font-size: 0.74rem; }
.apr-badge-neutral { background: #f1f5f9; color: #475569; }
.apr-badge-danger { background: #fee2e2; color: #dc2626; }
.apr-badge-score { display: inline-block; font-size: 0.85rem; font-weight: 800; padding: 4px 12px; border-radius: 8px; }
.apr-badge-grade { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; color: #fff; margin: 0 auto; }

.search-wrapper { position: relative; flex: 1; max-width: 350px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 0.9rem; }
.search-box { width: 100%; padding: 0.65rem 1rem 0.65rem 2.5rem; border: 1px solid var(--border-color); border-radius: 0.75rem; font-size: 0.85rem; outline: none; transition: var(--transition); background: #fff; font-family: 'Inter', sans-serif; }
.search-box:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); }
.header-actions { display: flex; align-items: center; gap: 0.75rem; }

button { font-family: 'Inter', sans-serif; cursor: pointer; transition: var(--transition); }
.btn-export { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.btn-primary { background: var(--primary); color: white; border: none; padding: 0.6rem 1.2rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; box-shadow: 0 2px 5px rgba(14, 165, 233, 0.3); cursor: pointer; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background-position 0.35s ease; }
.btn-primary:active { transform: scale(0.97); }
.btn-add-employee { background: linear-gradient(135deg, #0ea5e9, #38bdf8); color: white; border: none; padding: 0.6rem 1.4rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3); }
.btn-forecast { padding: 0.5rem 1rem; background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white; border: none; border-radius: 0.5rem; font-weight: 600; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.4rem; box-shadow: 0 2px 5px rgba(139, 92, 246, 0.3); }
.btn-autofill { padding: 0.5rem 1rem; background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; border: none; border-radius: 0.5rem; font-weight: 600; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.4rem; box-shadow: 0 2px 5px rgba(59, 130, 246, 0.3); }
.btn-lock { padding: 0.5rem 1rem; background: linear-gradient(135deg, #eab308, #ca8a04); color: white; border: none; border-radius: 0.5rem; font-weight: 600; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.4rem; box-shadow: 0 2px 5px rgba(234, 179, 8, 0.3); }
.btn-lock.locked { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 2px 5px rgba(239, 68, 68, 0.3); }
.btn-cancel { padding: 0.6rem 1.25rem; border: 1px solid #cbd5e1; background: white; border-radius: 8px; font-weight: 600; font-size: 0.85rem; color: #475569; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); }
.btn-cancel:hover { border-color: #94a3b8; background-color: #f8fafc; }
.btn-cancel:active { transform: scale(0.97); }
.btn-save { padding: 0.6rem 1.5rem; background: var(--primary); color: white; border: none; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer; box-shadow: 0 2px 5px rgba(14, 165, 233, 0.3); transition: box-shadow 0.25s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease; }
.btn-save:hover { filter: brightness(1.07); box-shadow: 0 8px 20px -4px rgba(14, 165, 233, 0.45); }
.btn-save:active { transform: scale(0.97); }
.btn-save:disabled, .btn-primary:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

.table-responsive { overflow-x: auto; border-radius: 0.75rem; border: 1px solid var(--border-color); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.85rem; background: white; }
.data-table thead th { background-color: #f8fafc; color: #8a8a8a; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 1.2rem 1rem; border-bottom: 2px solid #e2e8f0; border-top: 1px solid #e2e8f0; white-space: nowrap; }
.data-table tbody tr { transition: all 0.2s ease; }
.data-table tbody tr:hover { background-color: #f8fafc; box-shadow: inset 3px 0 0 var(--primary); }
.data-table tbody td { padding: 1rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: var(--text-main); }
.data-table tbody tr:last-child td { border-bottom: none; }

.employee-profile { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.employee-profile-text { display: flex; flex-direction: column; }
.emp-avatar-sm { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 6px rgba(0,0,0,0.1); border: 2px solid #e2e8f0; flex-shrink: 0; }
.emp-name { font-weight: 700; color: #0f172a; font-size: 0.9rem; margin-bottom: 3px; }
.emp-pos { font-size: 0.75rem; color: #64748b; font-weight: 500; }

.avatar-upload-wrapper { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.avatar-preview-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color); box-shadow: 0 2px 8px rgba(0,0,0,0.08); flex-shrink: 0; background: #f1f5f9; }
.avatar-upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0.5rem 0.9rem; border: 1px solid var(--primary); color: var(--primary); background: rgba(14,165,233,0.06); border-radius: 0.5rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: var(--transition); }
.avatar-upload-btn:hover { background: var(--primary); color: #fff; }
.avatar-upload-hint { font-size: 0.7rem; color: #94a3b8; width: 100%; }
.kategori-badge { padding: 0.35rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; }
.kategori-staff { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.kategori-crew { background: #fdf4ff; color: #a21caf; border: 1px solid #f5d0fe; }
.action-cell { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; }
.status-pill { padding: 0.4rem 0.5rem; border-radius: 6px; font-size: 0.7rem; font-weight: 700; text-align: center; width: 100%; box-shadow: 0 1px 2px rgba(0,0,0,0.1); letter-spacing: 0.3px; }
.btn-raport { background: white; border: 1px solid #cbd5e1; color: #475569; padding: 0.4rem 0.5rem; border-radius: 6px; font-size: 0.7rem; font-weight: 700; cursor: pointer; width: 100%; display: flex; justify-content: center; align-items: center; gap: 0.4rem; }
.total-badge { background: #e0f2fe; color: #0369a1; padding: 0.5rem 1rem; border-radius: 2rem; font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }

.add-form-container { background: #ffffff; border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.04); animation: fadeSlideIn 0.25s ease; }
.form-header { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 2px solid #f1f5f9; }
.form-header h3 { font-size: 1.15rem; font-weight: 700; color: #0f172a; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.form-subtitle { font-size: 0.8rem; color: #64748b; margin: 0.25rem 0 0 0; }
.employee-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.input-group { display: flex; flex-direction: column; gap: 0.3rem; }
.input-group label { font-size: 0.75rem; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.3px; }
.input-group input, .input-group select { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid #cbd5e1; border-radius: 0.5rem; font-size: 0.85rem; font-family: inherit; background: #ffffff; transition: 0.2s ease; outline: none; }
.input-group input:focus, .input-group select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }

@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.timesheet-header { border-bottom: 2px solid #f1f5f9; padding-bottom: 1.25rem; }

.ts-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem; margin-top: 1.25rem; }
.ts-kpi-card {
    display: flex; align-items: center; gap: 0.85rem; text-align: left;
    background: #ffffff; border: 1.5px solid var(--border-color); border-radius: 14px;
    padding: 0.95rem 1.1rem; cursor: pointer; transition: var(--transition);
    position: relative; overflow: hidden;
}
.ts-kpi-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; transition: var(--transition); }
.ts-kpi-card:hover { border-color: #cbd5e1; box-shadow: 0 6px 14px -4px rgba(15, 23, 42, 0.1); transform: translateY(-2px); }

.ts-kpi-icon { width: 42px; height: 42px; min-width: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #fff; }
.kpi-icon-all { background: linear-gradient(135deg, #334155, #0f172a); }
.kpi-icon-urgent { background: linear-gradient(135deg, #f87171, #ef4444); }
.kpi-icon-cuti { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.kpi-icon-onsite { background: linear-gradient(135deg, #34d399, #10b981); }

.ts-kpi-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ts-kpi-value { font-size: 1.5rem; font-weight: 800; color: #0f172a; }
.ts-kpi-label { font-size: 0.72rem; font-weight: 600; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ts-kpi-card.active { background: #f8fafc; box-shadow: 0 6px 14px -4px rgba(15, 23, 42, 0.12); }
.ts-kpi-card.active::before { background: #0f172a; }
.ts-kpi-card.kpi-urgent.active::before { background: #ef4444; }
.ts-kpi-card.kpi-cuti.active::before { background: #8b5cf6; }
.ts-kpi-card.kpi-onsite.active::before { background: #10b981; }
.ts-kpi-card.active .ts-kpi-value { color: inherit; }

.ts-toolbar { display: flex; gap: 10px; margin-top: 1.1rem; align-items: center; flex-wrap: wrap; }

.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
#timesheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; align-items: stretch; }
.ts-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1.25rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.ts-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08); border-color: #cbd5e1; transform: translateY(-3px); }

.employee-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
.employee-header h4 { font-size: 1.05rem; font-weight: 800; color: #0f172a; margin: 0 0 4px 0; }
.employee-header p { font-size: 0.75rem; color: #64748b; margin: 0; font-weight: 500; }
.badge-status { padding: 0.3rem 0.75rem; border-radius: 20px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; color: white; }

.fatigue-bar-bg { height: 6px; background: #f1f5f9; border-radius: 10px; margin: 1rem 0 0.5rem; overflow: hidden; }
.fatigue-bar-fill { height: 100%; border-radius: 10px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.rencana-cuti-box { margin-top: 0.75rem; padding: 0.6rem 0.85rem; border-radius: 8px; font-size: 0.75rem; line-height: 1.5; background: #f8fafc; border: 1px solid #e2e8f0; }
/* Selama ini TIDAK ADA rule untuk .jatuh-tempo-box sama sekali (dari file
   asli) — jadi kotak "Jatuh Tempo Cuti" cuma mengandalkan warna inline
   tanpa padding/border-radius, terlihat mentah dibanding kotak "Rencana
   Cuti" tepat di atasnya yang sudah rapi. Disamakan gaya di sini supaya
   konsisten dengan tema kartu (warna tetap datang dari inline style JS,
   ini cuma menambah bentuk/spasi-nya). */
.jatuh-tempo-box { margin-top: 0.75rem; padding: 0.6rem 0.85rem; border-radius: 8px; font-size: 0.75rem; line-height: 1.5; display: flex; align-items: center; gap: 6px; }

.ts-info-pills { display: flex; gap: 6px; margin-top: 12px; margin-bottom: 15px; flex-wrap: wrap; justify-content: center; }
.info-pill { flex: 1 1 auto; min-width: 30%; display: flex; align-items: center; justify-content: center; gap: 4px; background: #f8fafc; border: 1px solid #e2e8f0; padding: 6px 4px; border-radius: 6px; font-size: 0.7rem; color: #475569; white-space: nowrap; letter-spacing: -0.2px; }
.info-pill strong { color: #0f172a; font-weight: 800; margin-left: 2px; }

.mini-chart-container { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px dashed #e2e8f0; }
.mini-chart-title { font-size: 0.65rem; font-weight: 700; color: #94a3b8; margin-bottom: 0.4rem; letter-spacing: 0.5px; text-transform: uppercase; }
.mini-chart-bars { display: flex; gap: 4px; align-items: flex-end; }
.mini-bar { flex: 1; height: 22px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 800; color: white; transition: transform 0.2s; }

.ts-action-grid { display: flex; flex-direction: column; gap: 8px; margin-top: auto; border-top: 1px solid #f1f5f9; padding-top: 15px; }
.ts-action-row { display: flex; gap: 8px; }
.ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; border: 1px solid transparent; width: 100%; }
.btn-half { flex: 1; }
.btn-outline-gray { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
.btn-outline-success { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.btn-outline-warning { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.btn-solid-blue { background: #3b82f6; color: white; }

.roster-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter-select, .month-select { padding: 0.5rem 1rem; border-radius: 0.5rem; border: 1px solid #cbd5e1; background-color: white; font-weight: 600; font-size: 0.8rem; color: #1e293b; outline: none; font-family: inherit; }

.roster-table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mobile-scroll-hint { display: none; }
.roster-table { min-width: 1400px; text-align: center; }
.roster-table th, .roster-table td { border-bottom: 1px solid #e2e8f0; border-right: 1px solid #f1f5f9; }
.sticky-col { position: sticky; left: 0; background: white; z-index: 10; box-shadow: 4px 0 10px -3px rgba(0,0,0,0.05); border-right: 1px solid #cbd5e1 !important; font-weight: 500; }
.roster-table thead .sticky-col { z-index: 11; background: #f8fafc; }

.shift-select { appearance: none; -webkit-appearance: none; outline: none; border: 1px solid transparent; padding: 0.4rem 0; border-radius: 6px; width: 100%; text-align: center; text-align-last: center; font-weight: 700; font-size: 0.75rem; transition: var(--transition); background: transparent; }
.shift-select:hover { border-color: #cbd5e1; background: #f8fafc; }

.pob-card { background: linear-gradient(135deg, #0f172a, #1e293b); color: white; padding: 1.5rem; border-radius: 1rem; margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; border-left: 5px solid #38bdf8; box-shadow: 0 10px 15px -5px rgba(0,0,0,0.2); flex-wrap: wrap; gap: 1rem; }
.pob-stats { display: flex; gap: 20px; font-size: 0.85rem; font-weight: 600; flex-wrap: wrap; }
.btn-copy-pob { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); padding: 0.5rem 1rem; border-radius: 0.5rem; color: white; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; }

.ho-filter-group { display: flex; gap: 6px; background: #f1f5f9; padding: 4px; border-radius: 10px; }
.ho-filter-btn { background: transparent; border: none; padding: 0.5rem 0.9rem; border-radius: 8px; font-size: 0.78rem; font-weight: 700; color: #64748b; transition: var(--transition); cursor: pointer; }
.ho-filter-btn.active { background: #0f172a; color: white; box-shadow: 0 2px 6px rgba(15,23,42,0.25); }

.handover-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.ho-empty-state { text-align: center; padding: 3rem 1rem; color: #94a3b8; }
.ho-empty-state i { font-size: 2.2rem; margin-bottom: 10px; display: block; }

.ho-card { background: #ffffff; border: 1px solid #e2e8f0; border-left: 4px solid #0ea5e9; border-radius: 12px; padding: 1.1rem 1.25rem; box-shadow: 0 2px 6px rgba(0,0,0,0.03); transition: var(--transition); }
.ho-card:hover { box-shadow: 0 8px 16px -4px rgba(0,0,0,0.08); }
.ho-card.ho-night { border-left-color: #6366f1; }
.ho-card.ho-acked { border-left-color: #10b981; }

.ho-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 0.6rem; flex-wrap: wrap; }
.ho-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ho-shift-badge { padding: 0.3rem 0.7rem; border-radius: 20px; font-size: 0.68rem; font-weight: 800; color: white; white-space: nowrap; }
.ho-shift-badge.ho-day { background: #3b82f6; }
.ho-shift-badge.ho-night { background: #6366f1; }
.ho-date { font-size: 0.8rem; font-weight: 700; color: #0f172a; }
.ho-author { font-size: 0.75rem; color: #64748b; }
.ho-ack-badge { font-size: 0.68rem; font-weight: 700; color: #059669; background: #ecfdf5; border: 1px solid #a7f3d0; padding: 0.25rem 0.6rem; border-radius: 20px; white-space: nowrap; }

.ho-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; margin-top: 0.6rem; }
.ho-field-label { font-size: 0.65rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
.ho-field-value { font-size: 0.83rem; color: #334155; line-height: 1.5; white-space: pre-line; }
.ho-issue-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 0.6rem 0.8rem; margin-top: 0.7rem; }
.ho-issue-box .ho-field-label { color: #b45309; }
.ho-issue-box .ho-field-value { color: #78350f; }

.ho-card-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dashed #e2e8f0; flex-wrap: wrap; }
.ho-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0.4rem 0.8rem; border-radius: 7px; font-size: 0.72rem; font-weight: 700; border: 1px solid transparent; cursor: pointer; transition: var(--transition); }
.ho-btn-ack { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.ho-btn-ack:hover { background: #059669; color: white; }
.ho-btn-delete { background: #fef2f2; color: #ef4444; border-color: #fca5a5; }
.ho-btn-delete:hover { background: #ef4444; color: white; }

/* PENTING: overlay ini SENGAJA dibuat bisa di-scroll sendiri (overflow-y +
   padding atas/bawah), bukan cuma mengandalkan scroll internal modal-content.
   Tanpa ini, form yang isinya panjang (mis. P2H Kendaraan) bisa membuat
   tombol paling bawah (Batal/Simpan) TIDAK TERJANGKAU sama sekali di HP —
   terlihat seperti "tombolnya hilang", padahal cuma ke-render di luar layar
   yang kelihatan, karena unit vh di browser HP tidak selalu sama dengan
   tinggi layar yang benar-benar terlihat (ada address bar dsb). Baris
   height:100dvh (dynamic viewport height) jadi fallback tambahan untuk itu —
   browser lama yang belum kenal dvh otomatis abaikan baris ini & tetap
   pakai height:100% di atasnya. */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; height: 100dvh; background: rgba(15, 23, 42, 0.7); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); animation: fadeInOverlay 0.25s cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; padding: 24px 0; box-sizing: border-box; }
@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }
.modal-content { background: white; padding: 2rem; border-radius: 1rem; width: 90%; max-width: 440px; box-shadow: 0 25px 30px -12px rgba(0,0,0,0.25); animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.modal-lg { max-width: 550px; }
.modal-msds-wide { max-width: 900px; width: 92%; }
.modal-xl { max-width: 850px; width: 95%; padding: 0; overflow: hidden; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-content h3 { margin-top: 0; margin-bottom: 0.75rem; color: #0f172a; font-size: 1.25rem; }
.modal-content label { display: block; margin-top: 1rem; margin-bottom: 0.35rem; font-size: 0.85rem; font-weight: 600; color: #334155; }
.modal-content input, .modal-content select { width: 100%; padding: 0.65rem; border: 1px solid #cbd5e1; border-radius: 0.5rem; font-size: 0.9rem; outline: none; }

.extra-section { margin-top: 1rem; padding: 0.75rem; background: #f9fafb; border-radius: 0.5rem; border: 1px solid #e5e7eb; }
.extra-dates { display: flex; gap: 0.75rem; }
.extra-dates .input-group { flex: 1; }
.warning-box { background: #fef2f2; border: 1px solid #fca5a5; padding: 10px; border-radius: 6px; margin-bottom: 12px; margin-top: 10px; }
.forecast-results { max-height: 250px; overflow-y: auto; background: #f8fafc; padding: 12px; border-radius: 6px; border: 1px solid #e2e8f0; font-size: 0.85rem; }

.raport-header { background: linear-gradient(135deg, #0f172a, #1e293b); color: white; padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 4px solid #38bdf8; }
.raport-profile { display: flex; align-items: center; gap: 1rem; }
.profile-avatar { font-size: 3rem; color: #e0f2fe; }
.btn-close-modal { background: rgba(255, 255, 255, 0.1); border: none; color: white; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; transition: all 0.2s; }
.btn-close-modal:hover { background: rgba(239, 68, 68, 0.8); }

.raport-body { padding: 1.5rem 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; background: #f8fafc; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; margin-bottom: 1rem; }
.stat-box { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; text-align: center; }
.stat-value { display: block; font-size: 1.25rem; font-weight: 800; }
.text-green { color: #10b981; } .text-blue { color: #3b82f6; } .text-purple { color: #8b5cf6; } .text-red { color: #ef4444; } .text-orange { color: #f59e0b; }

.chart-wrapper { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; height: 170px; }
.kpi-bars { margin-bottom: 1.5rem; }
.kpi-item { margin-bottom: 1rem; }
.kpi-bar-bg { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }

.supervisor-notes textarea { width: 100%; height: 85px; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-family: inherit; font-size: 0.85rem; resize: none; margin-top: 5px; }
.btn-save-note { background: #0ea5e9; color: white; border: none; padding: 8px; border-radius: 6px; font-weight: 600; cursor: pointer; width: 100%; margin-top: 10px; }

.raport-heatmap-section { padding: 0 2rem 2rem 2rem; background: #f8fafc; }
.heatmap-container { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; gap: 3px; background: white; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0; overflow-x: auto; }
.heatmap-box { width: 12px; height: 12px; border-radius: 2px; background: #e2e8f0; cursor: pointer; }
.heatmap-legend { display: flex; gap: 15px; margin-top: 10px; font-size: 0.75rem; color: #64748b; font-weight: 600; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.box { width: 12px; height: 12px; border-radius: 2px; }
.box-hadir { background: #10b981; } .box-malam { background: #1e3a8a; } .box-cuti { background: #ef4444; } .box-sakit { background: #f59e0b; } .box-kosong { background: #e2e8f0; }

#chart-tahunan { background: white; border-radius: 12px; padding: 1rem; }

@keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } }
.skeleton-row td, .skeleton-card { background: linear-gradient(to right, #f1f5f9 4%, #e2e8f0 25%, #f1f5f9 36%); background-size: 1000px 100%; animation: shimmer 2s infinite linear; color: transparent !important; border-color: transparent !important; }
.skeleton-card { height: 350px; border-radius: 16px; margin-bottom: 1.5rem; }

.login-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: #0f172a; display: flex; align-items: center; justify-content: center;
    z-index: 10000; font-family: 'Inter', sans-serif; overflow: hidden;
}
.bg-shape { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; animation: floatOrb 10s infinite alternate ease-in-out; z-index: 1; }
.shape-1 { width: 400px; height: 400px; background: #0ea5e9; top: -100px; left: -100px; }
.shape-2 { width: 300px; height: 300px; background: #8b5cf6; bottom: -50px; right: -50px; animation-delay: -3s; }
.shape-3 { width: 250px; height: 250px; background: #3b82f6; top: 40%; left: 50%; transform: translate(-50%, -50%); opacity: 0.3; animation-delay: -5s; }
@keyframes floatOrb { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, 30px) scale(1.1); } 100% { transform: translate(-30px, 50px) scale(0.9); } }

.login-card { background: rgba(30, 41, 59, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.5rem; padding: 2.5rem 2.5rem 2rem 2.5rem; width: 90%; max-width: 420px; color: white; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); z-index: 10; animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slideUpFade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.login-brand { text-align: center; margin-bottom: 2rem; }
.logo-hexagon { width: 70px; height: 70px; margin: 0 auto 15px auto; background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(56, 189, 248, 0.05)); border: 2px solid rgba(56, 189, 248, 0.3); border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(14, 165, 233, 0.2) inset; transform: rotate(45deg); }
.logo-hexagon i { font-size: 1.8rem; color: #38bdf8; transform: rotate(-45deg); filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8)); }
.login-brand h2 { font-size: 1.35rem; font-weight: 800; margin: 0 0 4px 0; letter-spacing: 1.5px; color: #f8fafc; }
.login-brand p { font-size: 0.85rem; color: #94a3b8; font-weight: 500; }

.modern-input-group { margin-bottom: 1.25rem; }
.modern-input-group label { display: block; font-size: 0.75rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; left: 1rem; color: #64748b; font-size: 1rem; transition: color 0.3s; }
.input-wrapper input { width: 100%; padding: 0.85rem 1rem 0.85rem 2.75rem; background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.75rem; color: #f1f5f9; font-size: 0.95rem; font-family: inherit; outline: none; transition: all 0.3s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
.input-wrapper input::placeholder { color: #475569; }
.input-wrapper input:focus { background: rgba(15, 23, 42, 0.6); border-color: #38bdf8; box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15), inset 0 2px 4px rgba(0,0,0,0.1); }
.input-wrapper input:focus + .input-icon, .input-wrapper input:not(:placeholder-shown) + .input-icon { color: #38bdf8; }

.login-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.75rem; font-size: 0.85rem; }
.remember-me { display: flex; align-items: center; gap: 8px; color: #cbd5e1; cursor: pointer; user-select: none; }
.remember-me input { display: none; }
.checkmark { width: 16px; height: 16px; border-radius: 4px; border: 1px solid #64748b; background: rgba(15, 23, 42, 0.4); display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.remember-me input:checked ~ .checkmark { background: #0ea5e9; border-color: #0ea5e9; }
.remember-me input:checked ~ .checkmark::after { content: '\f00c'; font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free'; font-weight: 900; font-size: 10px; color: white; }
.forgot-pass { color: #38bdf8; text-decoration: none; font-weight: 600; transition: 0.2s; }
.forgot-pass:hover { color: #bae6fd; text-decoration: underline; }

.btn-login { width: 100%; padding: 0.9rem; background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%); border: none; border-radius: 0.75rem; color: white; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4); transition: all 0.3s ease; }
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(37, 99, 235, 0.5); background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%); }
.error-message { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; font-size: 0.85rem; margin-top: 1rem; padding: 10px; border-radius: 8px; text-align: center; }
.login-footer { margin-top: 2rem; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 1rem; }
.login-footer p { font-size: 0.7rem; color: #64748b; margin: 0; letter-spacing: 0.3px; }

.kpi-profile { display: flex; align-items: flex-start; gap: 12px; }
.kpi-profile-info { display: flex; flex-direction: column; }
.kpi-profile-info strong { color: #0f172a; font-size: 0.9rem; }
.kpi-profile-info small { color: #64748b; font-size: 0.75rem; font-weight: 500; }
.kpi-avatar { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.1); border: 2px solid #e2e8f0; }

.kpi-widget { display: flex; flex-direction: column; gap: 6px; width: 110px; margin: 0 auto; }
.kpi-widget-header { display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.kpi-input-modern { width: 45px !important; border: none !important; border-bottom: 2px solid #cbd5e1 !important; border-radius: 0 !important; font-size: 1.15rem !important; font-weight: 800 !important; color: #0f172a !important; text-align: center; background: transparent !important; padding: 0 2px !important; transition: border-color 0.2s; -moz-appearance: textfield; appearance: textfield; }
.kpi-input-modern:focus { border-bottom-color: #0ea5e9 !important; outline: none; box-shadow: none !important; }
.kpi-input-modern::-webkit-inner-spin-button, .kpi-input-modern::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.kpi-suffix { font-size: 0.7rem; color: #94a3b8; font-weight: 700; }
.kpi-value-display { font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.kpi-breakdown { font-size: 0.62rem; color: #94a3b8; text-align: center; font-weight: 600; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.kpi-track { width: 100%; height: 6px; background: #e2e8f0; border-radius: 6px; overflow: hidden; }
.kpi-fill { height: 100%; border-radius: 6px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.modern-btn-raport { background: #f0f9ff; border: 1px solid #bae6fd; color: #0284c7; border-radius: 8px; padding: 0.55rem 0.75rem; font-weight: 700; transition: all 0.2s ease; }
.modern-btn-raport:hover { background: #0ea5e9; color: white; border-color: #0ea5e9; box-shadow: 0 4px 10px rgba(14, 165, 233, 0.25); }

.lab-tab-btn { background: transparent; border: 1px solid transparent; color: #64748b; padding: 0.6rem 1.2rem; border-radius: 8px; font-weight: 700; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; cursor: pointer; }
.lab-tab-btn:hover { background: #f1f5f9; color: #0f172a; }
.lab-tab-btn.active { background: #e0f2fe; color: #0284c7; border-color: #bae6fd; box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.1); }
.pt-badge { padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 800; display: inline-block; }
.pt-HJF { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; }
.pt-OST { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.pt-HPAL { background: #fdf4ff; color: #c026d3; border: 1px solid #f5d0fe; }
.pt-KAPAL { background: #ecfeff; color: #0e7490; border: 1px solid #99f6e4; }

.brief-header-card {
    background: linear-gradient(135deg, #0f172a, #1e293b); color: #f8fafc;
    padding: 1.5rem 1.75rem; border-radius: 1.25rem; margin-bottom: 1.5rem;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
    border-left: 5px solid #38bdf8; box-shadow: 0 10px 15px -5px rgba(0,0,0,0.2);
}
.brief-header-card h3 { margin: 0; font-size: 1.25rem; display: flex; align-items: center; gap: 0.5rem; color: #f8fafc; }
.brief-header-card .subtitle { color: #94a3b8; margin-top: 0.35rem; }
.brief-header-card .subtitle strong { color: #38bdf8; }
.brief-header-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
#btn-copy-brief { color: #f8fafc; }
#btn-copy-brief:hover { background: rgba(255,255,255,0.2); }

.brief-loading { text-align: center; padding: 3rem 1rem; color: #94a3b8; font-size: 0.95rem; }

.brief-section { background: #ffffff; border-radius: 1.25rem; box-shadow: var(--card-shadow); border: 1px solid rgba(226, 232, 240, 0.8); padding: 1.75rem; margin-bottom: 1.5rem; }
.brief-section-title { display: flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; font-weight: 700; color: #0f172a; margin-bottom: 1.1rem; padding-bottom: 0.85rem; border-bottom: 2px solid #f1f5f9; }
.brief-section-title i { color: #0ea5e9; }
.brief-section-note { font-size: 0.78rem; color: #94a3b8; margin-top: -0.6rem; margin-bottom: 1rem; }

.brief-mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.brief-mini-stat { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.9rem; padding: 1rem 1.1rem; text-align: center; }
.brief-mini-stat .val { font-size: 1.6rem; font-weight: 800; color: #0f172a; line-height: 1; }
.brief-mini-stat .lbl { font-size: 0.72rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 0.4rem; }
.brief-mini-stat.accent-green .val { color: #10b981; }
.brief-mini-stat.accent-purple .val { color: #8b5cf6; }
.brief-mini-stat.accent-amber .val { color: #f59e0b; }
.brief-mini-stat.accent-red .val { color: #ef4444; }
.brief-mini-stat.accent-blue .val { color: #0ea5e9; }

.brief-trend { display: flex; gap: 0.6rem; align-items: flex-end; height: 150px; padding: 0.5rem 0; }
.brief-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.brief-trend-bars { width: 100%; max-width: 42px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 0 0; overflow: hidden; height: 100%; background: #f1f5f9; }
.brief-trend-seg { width: 100%; }
.brief-trend-day { font-size: 0.68rem; font-weight: 700; color: #475569; text-align: center; }
.brief-trend-date { font-size: 0.6rem; color: #94a3b8; text-align: center; }
.brief-trend-legend { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: 1rem; justify-content: center; font-size: 0.72rem; color: #64748b; font-weight: 600; }
.brief-trend-legend span { display: inline-flex; align-items: center; gap: 5px; }
.brief-trend-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.brief-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.brief-list { list-style: none; }
.brief-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid #f1f5f9; font-size: 0.85rem; }
.brief-list li:last-child { border-bottom: none; }
.brief-empty { color: #94a3b8; font-size: 0.85rem; font-style: italic; padding: 0.5rem 0; }

.brief-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.brief-tag-danger { background: #fee2e2; color: #dc2626; }
.brief-tag-warn { background: #fef3c7; color: #b45309; }
.brief-tag-ok { background: #dcfce7; color: #15803d; }
.brief-tag-info { background: #e0f2fe; color: #0369a1; }
.brief-tag-neutral { background: #f1f5f9; color: #475569; }

.brief-lab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; align-items: start; }
.brief-lab-card { border: 1px solid #e2e8f0; border-radius: 0.9rem; padding: 1.1rem; background: #f8fafc; }
.brief-lab-card h5 { margin: 0 0 0.6rem 0; font-size: 0.85rem; color: #334155; display: flex; align-items: center; gap: 6px; }
.brief-lab-card .count { font-size: 1.8rem; font-weight: 800; color: #0f172a; }
.brief-lab-card .count small { font-size: 0.7rem; font-weight: 700; color: #94a3b8; }
.brief-lab-card .per-pt { margin-top: 0.5rem; display: flex; gap: 6px; flex-wrap: wrap; }
.brief-lab-card .brief-list li { font-size: 0.76rem; padding: 0.4rem 0; }
.brief-lab-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 0.85rem; background: none; border: none; color: #0284c7; font-weight: 700; font-size: 0.78rem; cursor: pointer; padding: 0; }
.brief-lab-link:hover { color: #0369a1; text-decoration: underline; }

.brief-copy-block { background: #0f172a; color: #cbd5e1; border-radius: 0.9rem; padding: 1rem 1.25rem; font-size: 0.78rem; white-space: pre-wrap; max-height: 260px; overflow-y: auto; font-family: 'SFMono-Regular', Consolas, monospace; line-height: 1.6; }

@media print {
    @page { size: A4; margin: 2.54cm 3.175cm; }
    .no-print, .sidebar, .top-header, .sidebar-overlay, #btn-toggle-view, #btn-ganti-password, .btn-logout { display: none !important; }
    body, html { overflow: visible !important; height: auto !important; background: white !important; }
    .app-container { display: block !important; background: none !important; height: auto !important; }
    .main-content { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; }
    .content-section { display: none !important; }
    #meeting-brief-section.content-section.active { display: block !important; }
    .brief-header-card { background: white !important; color: #0f172a !important; border: 1px solid #cbd5e1; }
    .brief-header-card .subtitle, .brief-header-card .subtitle strong { color: #334155 !important; }
    .brief-section { box-shadow: none !important; border: 1px solid #cbd5e1 !important; break-inside: avoid; }
}

@media (max-width: 768px) {
    .brief-two-col { grid-template-columns: 1fr; }
    .brief-header-card { flex-direction: column; align-items: flex-start; }
    .brief-header-actions { width: 100%; }
    .brief-header-actions button { flex: 1; justify-content: center; }
}

@media (max-width: 768px) {

    .app-container { position: relative; }
    .sidebar {
        position: fixed; top: 0; left: -270px; height: 100dvh; width: 270px; z-index: 999;
        box-shadow: 10px 0 30px rgba(15, 23, 42, 0.25);

        background-color: #0f172a;
        background-image:
            radial-gradient(circle at 20% 20%, rgba(14, 165, 233, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 85% 75%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
    }
    .app-container.sidebar-mobile-show .sidebar { transform: translateX(270px); }
    .main-content { margin: 0; border-radius: 0; padding: 1.25rem 1rem; }

    .top-header { margin: -1.25rem -1rem 1.5rem -1rem; padding: 1rem 1.25rem; top: -1.25rem; flex-direction: column; align-items: flex-start; gap: 15px; }
    .header-left { width: 100%; justify-content: flex-start; }
    .header-right { width: 100%; justify-content: space-between; }
    .top-header h1 { font-size: 1.35rem; }

    .card { padding: 1.25rem; border-radius: 1rem; }
    .card-header, .karyawan-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .search-wrapper, .search-box { width: 100%; max-width: 100%; }
    .header-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
    .header-actions button { flex: 1; text-align: center; justify-content: center; min-width: 45%; }
    .total-badge { width: 100%; justify-content: center; margin-top: 5px; }

    .modal-content { padding: 1.5rem; width: 95%; max-width: 100%; border-radius: 1rem; }
    .employee-form-grid { grid-template-columns: 1fr; }
    .form-actions { flex-direction: column; gap: 0.5rem; width: 100%; }
    .btn-cancel, .btn-save { width: 100%; text-align: center; justify-content: center; }

    .modal-content div[style*="grid-template-columns"],
    #form-arsip-dokumen div[style*="grid-template-columns"],
    #wadah-parameter { grid-template-columns: 1fr !important; gap: 10px !important; }

    .ts-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .ts-kpi-card { padding: 0.7rem 0.8rem; gap: 0.55rem; align-items: flex-start; }
    .ts-kpi-icon { width: 34px; height: 34px; min-width: 34px; font-size: 0.85rem; }
    .ts-kpi-value { font-size: 1.15rem; }
    .ts-kpi-label { font-size: 0.65rem; white-space: normal; line-height: 1.25; }
    .ts-toolbar { margin-top: 0.9rem; }
    #timesheet-grid { grid-template-columns: 1fr; gap: 1rem; }
    .ts-card { padding: 1.25rem; }
    .ts-info-pills { flex-wrap: wrap; gap: 8px; }
    .info-pill { min-width: 45%; flex: 1; font-size: 0.75rem; padding: 8px; }
    .ts-btn { padding: 10px; font-size: 0.8rem; }

    .lab-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; margin-bottom: 5px; scrollbar-width: none; }
    .lab-tabs::-webkit-scrollbar { display: none; }
    .lab-tab-btn { flex-shrink: 0; padding: 0.6rem 1rem; font-size: 0.8rem; }

    #karyawan-section .data-table thead, #kpi-section .data-table thead { display: none; }
    #karyawan-section .data-table tbody tr, #kpi-section .data-table tbody tr { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.2rem; border: 1px solid #e2e8f0; border-radius: 0.85rem; padding: 1.2rem; background: white; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
    #karyawan-section .data-table tbody td, #kpi-section .data-table tbody td { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border: none; font-size: 0.85rem; text-align: right; }
    #karyawan-section .data-table tbody td::before, #kpi-section .data-table tbody td::before { font-weight: 700; color: #64748b; margin-right: 1rem; text-align: left; }

    #karyawan-section .data-table tbody td:nth-child(1)::before { content: "NIK Pekerja"; }
    #karyawan-section .data-table tbody td:nth-child(2)::before { content: "Profil"; }
    #karyawan-section .data-table tbody td:nth-child(3)::before { content: "Kategori"; }
    #karyawan-section .data-table tbody td:nth-child(4)::before { content: "Sub Dept"; }
    #karyawan-section .data-table tbody td:nth-child(5)::before { content: "Join Date"; }
    #karyawan-section .data-table tbody td:nth-child(6)::before { content: "Tgl Sign-On"; }
    #karyawan-section .data-table tbody td:nth-child(7)::before { content: "Kontak"; }
    #karyawan-section .data-table tbody td:nth-child(8)::before { content: "Aksi Status"; display: none; }

    #kpi-section .data-table tbody td:nth-child(1)::before { content: "Profil Pekerja"; }
    #kpi-section .data-table tbody td:nth-child(2)::before { content: "HSE (Safety)"; }
    #kpi-section .data-table tbody td:nth-child(3)::before { content: "Proses Lab"; }
    #kpi-section .data-table tbody td:nth-child(4)::before { content: "Kehadiran"; }
    #kpi-section .data-table tbody td:nth-child(5)::before { content: "Menu Aksi"; display: none; }

    #karyawan-section .data-table tbody td > div.employee-profile, #kpi-section .data-table tbody td > div.kpi-profile { align-items: flex-end; text-align: right; }
    #karyawan-section .data-table tbody td:empty { display: none; }

    .action-cell { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; width: 100%; margin-top: 10px; border-top: 1px dashed #e2e8f0; padding-top: 10px; }
    .status-pill { width: 100%; margin-bottom: 5px; font-size: 0.75rem; padding: 6px; }
    .btn-edit-emp, .btn-delete-emp, .btn-raport { width: auto; flex: 1; text-align: center; justify-content: center; padding: 8px; }

    #jobdesk-section .data-table thead { display: none; }
    #jobdesk-section .table-responsive { overflow: visible; border: none; box-shadow: none; border-radius: 0; margin: 0; padding: 0; }
    #jobdesk-section .data-table { min-width: 0; width: 100%; }
    #jobdesk-section .data-table tbody tr {
        display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px;
        margin-bottom: 1.1rem; border: 1px solid #e2e8f0; border-radius: 0.9rem;
        background: white; box-shadow: 0 4px 6px rgba(0,0,0,0.02);
        padding: 1.1rem !important;
    }
    #jobdesk-section .data-table tbody td { padding: 0 !important; border: none !important; vertical-align: top !important; text-align: left !important; }
    #jobdesk-section .data-table tbody td:nth-child(1) { flex: 0 0 auto; }
    #jobdesk-section .data-table tbody td:nth-child(2) { flex: 1 1 auto; min-width: 0; }
    #jobdesk-section .data-table tbody td:nth-child(3),
    #jobdesk-section .data-table tbody td:nth-child(4),
    #jobdesk-section .data-table tbody td:nth-child(5) {
        flex: 1 1 100%; width: 100% !important; padding-top: 10px !important; border-top: 1px dashed #f1f5f9 !important;
    }
    #jobdesk-section .data-table tbody td:nth-child(3)::before,
    #jobdesk-section .data-table tbody td:nth-child(4)::before,
    #jobdesk-section .data-table tbody td:nth-child(5)::before {
        display: block; font-size: 0.65rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px;
    }
    #jobdesk-section .data-table tbody td:nth-child(3)::before { content: "Rincian Jobdesk"; }
    #jobdesk-section .data-table tbody td:nth-child(4)::before { content: "Penanggung Jawab"; }
    #jobdesk-section .data-table tbody td:nth-child(5)::before { content: "Pengawasan"; }

    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1.25rem; padding: 0 1.25rem; border: none; border-radius: 0; }
    .roster-table { min-width: 1100px; }
    #lab-data-section .data-table { min-width: 850px; }
    #sampling-section .data-table { min-width: 600px; }
    #arsip-section .data-table { min-width: 550px; }

    .roster-table th, .roster-table td { padding: 0.6rem 0.3rem; font-size: 0.75rem; }
    .sticky-col { left: 0; min-width: 140px; font-size: 0.8rem; padding-left: 0.5rem; z-index: 10; box-shadow: 2px 0 5px rgba(0,0,0,0.05); }
    .shift-select { font-size: 0.7rem; padding: 0.4rem 0; }

    .roster-controls { flex-wrap: wrap; gap: 8px; width: 100%; }
    .roster-controls select, .roster-controls button { font-size: 0.75rem; padding: 0.6rem; flex: 1 1 45%; text-align: center; justify-content: center; }

    .mobile-scroll-hint { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; color: #0284c7; background: #f0f9ff; border: 1px solid #bae6fd; padding: 6px 10px; border-radius: 8px; margin-bottom: 10px; width: fit-content; }

    .raport-body { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem 1rem; }
    .raport-header { flex-direction: column; align-items: flex-start; gap: 15px; padding: 1.25rem 1rem; }
    .raport-header > div { width: 100%; text-align: left; }
    #pob-card { flex-direction: column; align-items: flex-start; gap: 15px; }
    .btn-copy-pob { width: 100%; text-align: center; justify-content: center; }
}

.kb-mt-note { font-weight: 500; font-size: 0.68rem; color: #94a3b8; text-transform: none; }

:root {
    --font-display: 'Manrope', 'Inter', sans-serif;
    --shadow-soft: 0 1px 2px rgba(15,23,42,0.04), 0 8px 20px -6px rgba(15,23,42,0.08);
    --shadow-lift: 0 10px 24px -8px rgba(15,23,42,0.16), 0 2px 6px rgba(15,23,42,0.06);
    --ring-brand: 0 0 0 3px rgba(56,189,248,0.28);
}

html, body {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><circle cx='13' cy='13' r='7' fill='none' stroke='%2338bdf8' stroke-width='1.4' opacity='0.85'/><line x1='13' y1='0' x2='13' y2='6' stroke='%2338bdf8' stroke-width='1.4'/><line x1='13' y1='20' x2='13' y2='26' stroke='%2338bdf8' stroke-width='1.4'/><line x1='0' y1='13' x2='6' y2='13' stroke='%2338bdf8' stroke-width='1.4'/><line x1='20' y1='13' x2='26' y2='13' stroke='%2338bdf8' stroke-width='1.4'/><circle cx='13' cy='13' r='1.3' fill='%230f172a'/></svg>") 13 13, default;
}

a,
button:not(:disabled),
[class*="btn-"]:not(:disabled),
.nav-btn,
.lab-tab-btn,
.ho-btn,
.heatmap-box,
.modern-btn-raport,
input[type="checkbox"],
input[type="radio"],
select:not(:disabled),
label:has(input[type="radio"]),
label:has(input[type="checkbox"]),
summary,
[onclick]:not(:disabled) {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><circle cx='13' cy='13' r='7' fill='rgba(14,165,233,0.15)' stroke='%230ea5e9' stroke-width='2'/><line x1='13' y1='1' x2='13' y2='6' stroke='%230ea5e9' stroke-width='2'/><line x1='13' y1='20' x2='13' y2='25' stroke='%230ea5e9' stroke-width='2'/><line x1='1' y1='13' x2='6' y2='13' stroke='%230ea5e9' stroke-width='2'/><line x1='20' y1='13' x2='25' y2='13' stroke='%230ea5e9' stroke-width='2'/><circle cx='13' cy='13' r='2' fill='%230ea5e9'/></svg>") 13 13, pointer !important;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"],
input:not([type]), textarea, [contenteditable="true"] {
    cursor: text !important;
}

button:disabled, [class*="btn-"]:disabled, select:disabled,
input:disabled, .kb-readonly {
    cursor: not-allowed !important;
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--ring-brand);
}

.top-header h1, .brand h2, .login-brand h2, .card-header h3,
.brief-section-title, .raport-header h2, .dash-card h4,
.brief-header-card h3, h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}
.hero-stat-value { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

button, [class*="btn-"] {
    transition: transform 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
button:active:not(:disabled), [class*="btn-"]:active:not(:disabled) {
    transform: scale(0.97);
}
.btn-primary, .btn-add-employee, .btn-login {
    background-size: 160% 100%; background-position: 0% 0%;
}
.btn-primary:hover, .btn-add-employee:hover {
    background-position: 100% 0%;
    box-shadow: var(--shadow-lift);
}

.card, .dash-card, .brief-section, .ho-card {
    box-shadow: var(--shadow-soft);
}
.card:hover, .dash-card:hover {
    box-shadow: var(--shadow-lift);
}

.nav-btn {
    position: relative;
}
.nav-btn.active {
    background: linear-gradient(90deg, rgba(56,189,248,0.14), rgba(56,189,248,0.02));
}
.nav-btn:not(.active):hover i {
    transform: translateX(1px) scale(1.05);
}
.nav-btn i { transition: transform 0.2s ease, color 0.2s ease; }

.top-header {
    border-bottom: none;
    box-shadow: 0 1px 0 0 rgba(15,23,42,0.06);
}

.main-content::-webkit-scrollbar, .sidebar::-webkit-scrollbar,
.dash-list::-webkit-scrollbar, .table-responsive::-webkit-scrollbar,
textarea::-webkit-scrollbar, .forecast-results::-webkit-scrollbar {
    width: 8px; height: 8px;
}
.main-content::-webkit-scrollbar-track, .table-responsive::-webkit-scrollbar-track {
    background: transparent;
}
.main-content::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb,
.dash-list::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb, .forecast-results::-webkit-scrollbar-thumb {
    background: rgba(100,116,139,0.35); border-radius: 999px;
}
.main-content::-webkit-scrollbar-thumb:hover, .table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(14,165,233,0.55);
}
.sidebar::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.25); }
* { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,0.35) transparent; }

.login-container::before {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(148,163,184,0.15) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 75%);
}
.login-card { position: relative; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

.kb-batch-table { min-width: 2050px; font-size: 0.8rem; border-collapse: separate; border-spacing: 0; }
.kb-batch-table thead th { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #f1f5f9; font-weight: 700; padding: 10px 8px; white-space: nowrap; text-align: center; }
.kb-batch-table tbody td { padding: 5px 6px; border-bottom: 1px solid #e2e8f0; text-align: center; background: #fff; }
.kb-batch-table tbody tr:nth-child(even) td { background: #f8fafc; }
.kb-batch-table tbody tr:hover td { background: #eff6ff; }
.kb-batch-sticky { text-align: left !important; }
.kb-batch-table th:nth-child(1), .kb-batch-table td:nth-child(1) { position: sticky; left: 0; z-index: 2; width: 34px; }
.kb-batch-table th:nth-child(2), .kb-batch-table td:nth-child(2) { position: sticky; left: 34px; z-index: 2; width: 74px; }
.kb-batch-table th:nth-child(3), .kb-batch-table td:nth-child(3) { position: sticky; left: 108px; z-index: 2; width: 132px; }
.kb-batch-table th:nth-child(4), .kb-batch-table td:nth-child(4) { position: sticky; left: 240px; z-index: 2; box-shadow: 2px 0 4px rgba(0,0,0,0.06); }
.kb-batch-no { font-weight: 700; color: #64748b; width: 32px; }
.kb-batch-input { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 6px; font-size: 0.78rem; text-align: center; font-family: inherit; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.kb-batch-input:focus { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,0.12); }
.kb-batch-table td:nth-child(4) .kb-batch-input { text-align: left; min-width: 150px; }
.kb-batch-out { font-weight: 700; color: #0f172a; white-space: nowrap; }
.kb-batch-del { background: transparent; border: none; color: #ef4444; cursor: pointer; padding: 4px 8px; }
.kb-batch-del:hover { color: #b91c1c; }
.kb-batch-export { background: transparent; border: none; color: #1d4ed8; cursor: pointer; padding: 4px 8px; }
.kb-batch-export:hover { color: #1e3a8a; }
.kb-batch-export:disabled { color: #cbd5e1; cursor: not-allowed; }
.kb-batch-row-saved td { background: #ecfdf5 !important; }
.kb-batch-status { font-weight: 700; font-size: 0.75rem; white-space: nowrap; }

.kb-batch-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 1rem; }
.kb-batch-counter { font-size: 0.82rem; font-weight: 700; color: #0284c7; background: #f0f9ff; border: 1px solid #bae6fd; padding: 6px 12px; border-radius: 999px; }

@media (max-width: 768px) {
    .kb-mode-toggle { flex-wrap: wrap; }
    .kb-batch-toolbar { width: 100%; }
    .kb-batch-toolbar button { flex: 1 1 auto; }
    .kb-batch-counter { width: 100%; text-align: center; }
}

/* ===== HIRADC & IADL - tingkat risiko ===== */
.checklist-tag.risk-rendah { background: #dcfce7; color: #166534; }
.checklist-tag.risk-sedang { background: #fef9c3; color: #854d0e; }
.checklist-tag.risk-tinggi { background: #ffedd5; color: #c2410c; }
.checklist-tag.risk-ekstrem { background: #fee2e2; color: #dc2626; }

/* ===== Poles Mobile — putaran perbaikan khusus tampilan HP ===== */
@media (max-width: 768px) {
    /* FIX PENTING: ukuran font input sebelumnya 0.85rem (13.6px) — di
       bawah 16px, jadi Safari iOS otomatis nge-zoom tampilan tiap kali
       user ketuk field manapun (form terasa "kasar"/tersentak). Dinaikkan
       ke 16px KHUSUS di mobile supaya perilaku itu berhenti sepenuhnya. */
    .input-group input, .input-group select, .input-group textarea,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="date"], input[type="month"],
    input[type="search"], input[type="file"], select, textarea {
        font-size: 1rem !important;
    }

    /* Target sentuh tombol supaya konsisten nyaman (minimal ~44px),
       sesuai standar minimal touch target di iOS/Android. */
    .btn-primary, .btn-save, .btn-cancel, .arsip-filter-btn { min-height: 44px; }
    .checklist-checkbox { width: 26px; height: 26px; }

    /* Statistik ringkas (dipakai di Checklist Foreman, CAPA, HIRADC, IADL,
       B3, dst) — dulu bisa jatuh ke 1 kolom kalau kotaknya kebetulan lebih
       lebar dari separuh layar. Dipaksa 2 kolom rapi di HP. */
    .checklist-stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem; }
    .checklist-stat-box { padding: 0.75rem 0.85rem; }
    .checklist-stat-box .num { font-size: 1.35rem; }

    /* Kartu daftar (checklist-item) dipakai di banyak menu baru — rapikan
       padding & susun tombol aksi supaya tidak sempit di layar kecil. */
    .checklist-item { padding: 0.95rem 1rem; gap: 10px; }
    .checklist-teks { font-size: 0.88rem; }

    /* Petunjuk visual "geser untuk lihat lebih" pada SEMUA tabel yang bisa
       digeser horizontal — otomatis muncul di tabel mana pun tanpa perlu
       ditambahkan manual per halaman, lewat efek fade tipis di ujung kanan. */
    .table-responsive { position: relative; }
    .table-responsive::after {
        content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.9));
        pointer-events: none;
    }

    /* Toast notifikasi — pastikan tidak terlalu ke pinggir/kepotong di
       layar sangat sempit (320-375px), dan sedikit lebih lega dari atas. */
    .toast-notification { left: 16px !important; right: 16px !important; max-width: none !important; text-align: center; top: 14px !important; }

    /* Modal — beri sedikit jarak dari tepi atas/bawah layar di HP supaya
       tidak menempel penuh, terasa lebih "mengambang" dan elegan. */
    .modal-overlay { padding: 16px; align-items: flex-start; padding-top: 8vh; }
    .modal-content { max-height: 82vh; overflow-y: auto; }
}

/* Dukungan area aman (notch/home indicator) di iPhone modern — supaya
   sidebar & konten tidak tertutup notch/gesture bar. */
@supports (padding: max(0px)) {
    .sidebar { padding-top: max(2rem, env(safe-area-inset-top)); }
    .top-header { padding-top: max(1rem, env(safe-area-inset-top)); }
}

/* ===== Timer & Log Timbang Batubara ===== */
.kb-timer-card { border: 2px solid #fde68a; background: linear-gradient(180deg, #fffbeb 0%, #fff 70px); }
.kbt-sesi-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.kbt-sesi-card { background: #fff; border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.1rem 1.25rem; box-shadow: var(--card-shadow); }
.kbt-sesi-card.is-done { border-color: #86efac; background: #f0fdf4; }
.kbt-sesi-nama { font-weight: 800; font-size: 0.95rem; color: #0f172a; }
.kbt-sesi-meta { font-size: 0.75rem; color: #94a3b8; margin: 2px 0 12px; }
.kbt-timer-row { text-align: center; background: #f8fafc; border-radius: 0.75rem; padding: 0.9rem; margin-bottom: 10px; transition: background 0.3s ease; }
.kbt-timer-row.kbt-timer-ready { background: #fef3c7; animation: kbtPulseGlow 1.2s ease-in-out infinite; }
@keyframes kbtPulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); } }
.kbt-timer-display { font-size: 2.1rem; font-weight: 800; font-family: var(--font-display, inherit); color: #0f172a; font-variant-numeric: tabular-nums; line-height: 1; }
.kbt-timer-row.kbt-timer-ready .kbt-timer-display { color: #b45309; }
.kbt-timer-label { font-size: 0.72rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 4px; }
.kbt-status-done { text-align: center; font-size: 1.1rem; font-weight: 800; color: #16a34a; background: #dcfce7; border-radius: 0.75rem; padding: 0.9rem; margin-bottom: 10px; }
.kbt-status-done i { margin-right: 6px; }
.kbt-info-row { font-size: 0.78rem; color: #475569; text-align: center; margin-bottom: 12px; }
.kbt-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.kbt-btn-row button { flex: 1; min-width: 110px; font-size: 0.8rem; padding: 0.55rem 0.8rem; }
.kbt-btn-row .checklist-delete-btn { flex: none; width: 38px; }
.kbt-btn-pulse { animation: kbtBtnPulse 1s ease-in-out infinite; }
@keyframes kbtBtnPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

@media (max-width: 768px) {
    .kbt-sesi-list { grid-template-columns: 1fr; }
    .kbt-timer-display { font-size: 2.6rem; }
}

/* ===== Tombol Preset Batch Timer Batubara ===== */
.kbt-preset-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1rem 0 0.25rem; }
.kbt-preset-btn { flex: 1; min-width: 200px; background: #fff; border: 1.5px solid #fde68a; border-radius: 0.75rem; padding: 0.75rem 1rem; text-align: left; cursor: pointer; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, box-shadow 0.2s ease; }
.kbt-preset-btn:hover { border-color: #f59e0b; box-shadow: 0 6px 16px -4px rgba(245, 158, 11, 0.25); }
.kbt-preset-btn:active { transform: scale(0.97); }
.kbt-preset-btn i { color: #f59e0b; margin-right: 6px; }
.kbt-preset-label { font-weight: 700; font-size: 0.82rem; color: #0f172a; display: block; margin-top: 4px; }
.kbt-preset-durasi { font-size: 0.72rem; color: #b45309; font-weight: 700; }

@media (max-width: 768px) {
    .kbt-preset-btn { min-width: 100%; }
}

/* ===== Cek Isi Kotak P3K ===== */
.p3k-isi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.6rem; padding: 0.75rem 0.9rem; }
.p3k-isi-item { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #334155; }
.p3k-isi-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: #0ea5e9; cursor: pointer; }
.p3k-isi-item label { cursor: pointer; }

@media (max-width: 768px) {
    .p3k-isi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Absen Manual (Roster Bulanan, gaya dwibahasa ID-Mandarin) =====
   Direkonstruksi dari transkrip percakapan sebelumnya karena hilang saat
   file style.css sempat tertimpa versi tidak lengkap. */
.tulisan-tangan { font-family: 'Caveat', cursive; font-weight: 600; }
.absen-roster-kertas { background: #fff; border: 2px solid #0f172a; padding: 1.25rem 1.5rem; min-width: 1400px; }
.absen-roster-judul { text-align: center; font-weight: 800; font-size: 1.15rem; color: #0f172a; padding-bottom: 0.9rem; margin-bottom: 0; }
.absen-roster-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.absen-roster-table th, .absen-roster-table td { border: 1px solid #000; text-align: center; padding: 4px 2px; font-size: 0.72rem; overflow: hidden; white-space: nowrap; }
.absen-roster-table th { background: #fff; color: #0f172a; font-weight: 700; }
.absen-roster-th-no { width: 34px; }
.absen-roster-th-nama { width: 190px; text-align: left !important; padding-left: 8px !important; white-space: normal !important; }
.absen-roster-th-hari { width: 34px; }
.absen-roster-th-weekend { background: #f4a688 !important; }
.absen-roster-th-hari-id { font-size: 0.62rem; font-weight: 800; }
.absen-roster-th-hari-cn { font-size: 0.6rem; color: #475569; }
.absen-roster-th-tanggal { font-weight: 800; font-size: 0.78rem; }
.absen-roster-td-nama { text-align: left !important; padding-left: 8px !important; font-weight: 700; font-size: 0.76rem; color: #0f172a; white-space: normal !important; overflow: visible !important; }
.absen-roster-separator td { background: #cbd5e1; color: #0f172a; font-weight: 900; text-align: center; letter-spacing: 0.1em; padding: 4px 0; }
.absen-roster-td-shift { font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.05rem; height: 30px; }
.absen-shift-D { background: #d6ead0; color: #111827; }
.absen-shift-N { background: #1e3a8a; color: #fff; }
.absen-shift-C { background: #fbdcbb; color: #7c2d12; }
.absen-shift-TRV { background: #b7e3ef; color: #164e63; }
.absen-shift-Off { background: #ef3f3f; color: #111827; }
.absen-shift-I { background: #f6b26b; color: #7c2d12; }
.absen-shift-A1 { background: #111827; color: #fff; }
.absen-shift-e1 { background: #ffd966; color: #7c2d12; }
.absen-shift-COS { background: #c4b5fd; color: #3730a3; }
.absen-shift-kosong { background: #fff; }
.absen-roster-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1rem; font-size: 0.72rem; color: #1e293b; }
.absen-roster-legend-item { display: flex; align-items: center; gap: 5px; }
.absen-roster-legend-swatch { width: 20px; height: 16px; border: 1px solid #000; flex: none; }
.absen-roster-legend-text { line-height: 1.15; }
.absen-roster-legend-text small { display: block; color: #64748b; font-size: 0.62rem; }
.hw-font-0 { font-family: 'Caveat', cursive; }
.hw-font-1 { font-family: 'Kalam', cursive; }
.hw-font-2 { font-family: 'Shadows Into Light', cursive; }
.hw-font-3 { font-family: 'Patrick Hand', cursive; }
.hw-font-4 { font-family: 'Gochi Hand', cursive; }
.hw-font-5 { font-family: 'Reenie Beanie', cursive; }
.absen-font-cetak { font-family: 'Calibri', 'Segoe UI', sans-serif; font-weight: 600; }
.absen-roster-td-shift.is-editable { cursor: pointer; position: relative; }
.absen-roster-td-shift.is-editable:hover { outline: 2px solid #0ea5e9; outline-offset: -2px; }
.absen-roster-td-shift.is-future { background: #f8fafc !important; color: #cbd5e1 !important; cursor: default; }
.absen-cell-edit-select { font-family: inherit; font-weight: 700; font-size: 0.95rem; border: none; background: transparent; width: 100%; height: 100%; text-align: center; cursor: pointer; }

@media (max-width: 768px) {
    .absen-roster-kertas { padding: 1rem; }
}

/* ===== Materi Water Treatment Plant ==================================== */
.materi-wtp-wrap { display: flex; flex-direction: column; gap: 1.75rem; }
.materi-hero { display: flex; align-items: center; gap: 2rem; background: linear-gradient(135deg, #0c4a6e, #0369a1 55%, #0ea5e9); border-radius: 1.25rem; padding: 2rem 2.25rem; color: #fff; box-shadow: 0 20px 40px -15px rgba(3, 105, 161, 0.45); }
.materi-hero-text { flex: 1.3; }
.materi-hero-eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #bae6fd; }
.materi-hero-text h3 { font-family: var(--font-display, inherit); font-size: 1.5rem; line-height: 1.35; margin: 0.6rem 0 0.8rem; font-weight: 800; max-width: 34ch; }
.materi-hero-text p { font-size: 0.88rem; line-height: 1.6; color: #e0f2fe; max-width: 52ch; }
.materi-hero-photo { flex: 1; width: 100%; max-width: 280px; height: 190px; object-fit: cover; border-radius: 0.9rem; box-shadow: 0 15px 35px -10px rgba(0,0,0,0.4); }
.materi-tabs { display: flex; flex-wrap: wrap; gap: 8px; background: #f1f5f9; padding: 6px; border-radius: 14px; }
.materi-tab-btn { flex: 1 1 auto; min-width: 150px; border: none; background: transparent; color: #64748b; padding: 0.65rem 1rem; border-radius: 10px; font-size: 0.82rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: var(--transition); }
.materi-tab-btn:hover { color: #0369a1; }
.materi-tab-btn.active { background: #fff; color: #0369a1; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1); }
.materi-tab-panel { display: none; animation: materiFadeIn 0.35s ease; }
.materi-tab-panel.active { display: block; }
@keyframes materiFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.materi-panel-lead { color: #64748b; font-size: 0.9rem; margin-bottom: 1.25rem; max-width: 70ch; }
.materi-intro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; margin-bottom: 1.25rem; }
.materi-intro-card { background: #fff; border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.4rem; box-shadow: var(--card-shadow); transition: var(--transition); }
.materi-intro-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.materi-intro-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 0.9rem; }
.materi-intro-card h4 { font-size: 1rem; color: #0f172a; margin-bottom: 0.5rem; }
.materi-intro-card p { font-size: 0.85rem; line-height: 1.6; color: #475569; }
.materi-summary-card { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 1rem; padding: 1.4rem 1.6rem; }
.materi-summary-card h4 { font-size: 0.92rem; color: #075985; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 8px; }
.materi-summary-card p { font-size: 0.85rem; line-height: 1.85; color: #0c4a6e; }
.materi-stepper { display: flex; flex-direction: column; }
.materi-step { display: flex; gap: 1.25rem; }
.materi-step-marker-col { display: flex; flex-direction: column; align-items: center; flex: none; }
.materi-step-marker { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #0ea5e9, #0369a1); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35); flex: none; }
.materi-step-line { width: 2px; flex: 1; background: linear-gradient(#0ea5e9, #bae6fd); min-height: 24px; margin: 4px 0; }
.materi-step-content { flex: 1; padding-bottom: 1.75rem; }
.materi-step-num { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; color: #0ea5e9; margin-bottom: 0.2rem; }
.materi-step-content h4 { font-size: 1.05rem; color: #0f172a; margin-bottom: 0.5rem; }
.materi-step-content p { font-size: 0.85rem; line-height: 1.65; color: #475569; max-width: 78ch; }
.materi-param-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.75rem; }
.materi-param-tag { font-size: 0.7rem; font-weight: 700; background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; padding: 3px 10px; border-radius: 999px; }
.materi-param-tag.is-boiler { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.materi-chem-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.55rem; }
.materi-chem-tag { font-size: 0.7rem; font-weight: 700; background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; padding: 3px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.materi-photo-strip { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.materi-strip-photo { flex: 1; height: 150px; object-fit: cover; border-radius: 0.9rem; box-shadow: var(--card-shadow); }
.kontaminan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.kontaminan-card { background: #fff; border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--card-shadow); transition: var(--transition); }
.kontaminan-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.kontaminan-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 0.9rem; }
.kontaminan-card h4 { font-size: 1.05rem; color: #0f172a; margin-bottom: 0.5rem; }
.kontaminan-tag { display: inline-block; font-size: 0.68rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-bottom: 0.8rem; }
.kontaminan-card p { font-size: 0.84rem; line-height: 1.6; color: #475569; margin-bottom: 0.6rem; }
.kontaminan-contoh { font-size: 0.78rem !important; color: #64748b !important; padding-top: 0.6rem; border-top: 1px solid #f1f5f9; }
.boiler-stage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }
.boiler-stage-card { background: #fff; border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.3rem 1.4rem; box-shadow: var(--card-shadow); transition: var(--transition); }
.boiler-stage-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.boiler-stage-head { margin-bottom: 0.7rem; }
.boiler-stage-head h4 { font-size: 0.95rem; color: #0f172a; margin-bottom: 0.3rem; }
.boiler-stage-suhu { font-size: 0.72rem; font-weight: 700; color: #c2410c; display: flex; align-items: center; gap: 5px; }
.boiler-stage-note { font-size: 0.76rem; line-height: 1.6; color: #64748b; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid #f1f5f9; }
@media (max-width: 768px) {
    .materi-hero { flex-direction: column; text-align: center; padding: 1.5rem; }
    .materi-hero-text p { max-width: 100%; }
    .materi-hero-photo { max-width: 100%; }
    .materi-tab-btn { min-width: 42%; }
    .materi-photo-strip { flex-direction: column; }
    .materi-step { gap: 0.85rem; }
}

/* ===== Timesheet Kalender ==================================== */
.ts-view-toggle { display: flex; background: #f1f5f9; border-radius: 10px; padding: 4px; gap: 4px; }
.ts-view-btn { border: none; background: transparent; padding: 0.5rem 0.9rem; border-radius: 7px; font-size: 0.78rem; font-weight: 700; color: #64748b; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ts-view-btn:hover { color: #334155; }
.ts-view-btn.active { background: #fff; color: #0f172a; box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08); }
.ts-cal-header { display: flex; align-items: center; gap: 12px; margin: 1.25rem 0 0.85rem; }
.ts-cal-header h4 { margin: 0; font-size: 1rem; color: #0f172a; min-width: 160px; text-align: center; }
.ts-cal-nav-btn { border: 1px solid #e2e8f0; background: #fff; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; color: #475569; transition: 0.2s; }
.ts-cal-nav-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.ts-cal-today-btn { border: 1px solid #e2e8f0; background: #fff; padding: 0.45rem 0.9rem; border-radius: 8px; cursor: pointer; font-size: 0.75rem; font-weight: 700; color: #475569; transition: 0.2s; }
.ts-cal-today-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.ts-cal-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 1.1rem; font-size: 0.72rem; color: #475569; }
.ts-cal-legend span { display: flex; align-items: center; gap: 6px; }
.ts-cal-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.ts-cal-cell { font-size: 0.62rem; font-weight: 800; text-align: center; padding: 7px 1px; }
.roster-table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ts-filter-btn { border: 1px solid #e2e8f0; background: #fff; color: #64748b; padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: 0.2s; }
.ts-filter-btn:hover { border-color: #93c5fd; color: #1d4ed8; }
.ts-filter-btn.active:not(.ts-kpi-card) { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }

/* ===== Instruksi Kerja & SOP ==================================== */
.ik-sop-wrap { display: flex; flex-direction: column; }
.ik-sop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; }
.ik-sop-card { background: #fff; border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.3rem; box-shadow: var(--card-shadow); transition: var(--transition); cursor: pointer; display: flex; flex-direction: column; gap: 0.7rem; }
.ik-sop-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); border-color: #93c5fd; }
.ik-sop-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.ik-sop-icon.is-ik { background: #eff6ff; color: #1d4ed8; }
.ik-sop-icon.is-sop { background: #f5f3ff; color: #6d28d9; }
.ik-sop-card-tag { display: inline-block; align-self: flex-start; font-size: 0.65rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
.ik-sop-card-tag.is-ik { background: #eff6ff; color: #1d4ed8; }
.ik-sop-card-tag.is-sop { background: #f5f3ff; color: #6d28d9; }
.ik-sop-card-title { font-size: 0.95rem; font-weight: 800; color: #0f172a; line-height: 1.4; }
.ik-sop-card-meta { font-size: 0.72rem; color: #94a3b8; margin-top: auto; display: flex; align-items: center; gap: 5px; }
.ik-sop-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: #94a3b8; }
.ik-sop-viewer-modal { max-width: 800px; width: 92%; max-height: 88vh; display: flex; flex-direction: column; }
.ik-sop-viewer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid #f1f5f9; padding-bottom: 1rem; }
.ik-sop-viewer-head h3 { font-size: 1.15rem; color: #0f172a; margin: 0.4rem 0 0.3rem; }
.ik-sop-viewer-tag { display: inline-block; font-size: 0.65rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; }
.ik-sop-viewer-body { position: relative; flex: 1; min-height: 60vh; background: #f1f5f9; border-radius: 0.75rem; overflow: hidden; display: flex; }
.ik-sop-viewer-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.ik-sop-viewer-body img { max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; position: relative; }
.ik-sop-viewer-body .ik-sop-no-preview { padding: 3rem; text-align: center; color: #64748b; margin: auto; position: relative; }
@media (max-width: 768px) {
    .ik-sop-viewer-modal { width: 96%; max-height: 92vh; }
    .ik-sop-viewer-head { flex-direction: column; }
}

/* ===== Inventaris Bahan Kimia ==================================== */
.inv-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.inv-kpi-card { background: #fff; border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.1rem 1.3rem; box-shadow: var(--card-shadow); }
.inv-kpi-val { font-size: 1.8rem; font-weight: 800; color: #0f172a; }
.inv-kpi-label { font-size: 0.72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
.inv-kpi-card.is-warn .inv-kpi-val { color: #d97706; }
.inv-kpi-card.is-danger .inv-kpi-val { color: #dc2626; }
.inv-name-cell .inv-nama-id { font-weight: 800; color: #0f172a; font-size: 0.9rem; }
.inv-name-cell .inv-nama-formula { font-size: 0.76rem; color: #0369a1; font-weight: 700; }
.inv-name-cell .inv-nama-asli { font-size: 0.72rem; color: #94a3b8; }
.inv-name-cell .inv-bahaya-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.66rem; font-weight: 800; color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; padding: 1px 8px; border-radius: 999px; margin-top: 4px; }
.inv-stock-badge { font-weight: 800; font-size: 0.85rem; }
.inv-stock-badge.is-low { color: #dc2626; }
.inv-stock-min { font-size: 0.68rem; color: #94a3b8; display: block; }
.inv-exp-badge { font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; display: inline-block; }
.inv-exp-badge.is-ok { background: #f0fdf4; color: #16a34a; }
.inv-exp-badge.is-soon { background: #fffbeb; color: #b45309; }
.inv-exp-badge.is-expired { background: #fef2f2; color: #dc2626; }
.inv-exp-badge.is-none { background: #f1f5f9; color: #94a3b8; }
.inv-action-btn { border: none; background: #f1f5f9; color: #475569; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 0.8rem; margin: 0 2px; transition: var(--transition); }
.inv-action-btn:hover { transform: translateY(-1px); }
.inv-action-btn.is-out:hover { background: #fef3c7; color: #b45309; }
.inv-action-btn.is-in:hover { background: #dcfce7; color: #16a34a; }
.inv-action-btn.is-history:hover { background: #e0f2fe; color: #0369a1; }
.inv-action-btn.is-edit:hover { background: #ede9fe; color: #6d28d9; }
.inv-action-btn.is-delete:hover { background: #fef2f2; color: #dc2626; }
.inv-riwayat-item { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid #f1f5f9; font-size: 0.82rem; }
.inv-riwayat-item:last-child { border-bottom: none; }
.inv-riwayat-tag { font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.inv-riwayat-tag.is-in { background: #dcfce7; color: #16a34a; }
.inv-riwayat-tag.is-out { background: #fef3c7; color: #b45309; }

/* ===== Checklist Foreman - detail & timeline ==================================== */
.checklist-detail-modal { max-width: 640px; }
.checklist-detail-head { display: flex; align-items: flex-start; gap: 1rem; border-bottom: 1px solid #f1f5f9; padding-bottom: 1rem; margin-bottom: 1rem; }
.checklist-detail-head h3 { font-size: 1.1rem; color: #0f172a; margin: 0.4rem 0 0; line-height: 1.4; }
.checklist-detail-kategori { display: inline-block; font-size: 0.65rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #f5f3ff; color: #6d28d9; }
.checklist-detail-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.78rem; color: #64748b; margin-bottom: 1.25rem; }
.checklist-detail-subheading { font-size: 0.82rem; font-weight: 800; color: #0f172a; margin-bottom: 0.85rem; display: flex; align-items: center; gap: 6px; }
.checklist-timeline { display: flex; flex-direction: column; gap: 0; }
.checklist-timeline-item { position: relative; padding: 0 0 1.2rem 1.8rem; }
.checklist-timeline-item:last-child { padding-bottom: 0; }
.checklist-timeline-item::before { content: ""; position: absolute; left: 5px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; border: 2px solid #fff; box-shadow: 0 0 0 2px #e2e8f0; }
.checklist-timeline-item::after { content: ""; position: absolute; left: 9px; top: 14px; bottom: 0; width: 2px; background: #e2e8f0; }
.checklist-timeline-item:last-child::after { display: none; }
.checklist-timeline-item.is-selesai::before { background: #16a34a; box-shadow: 0 0 0 2px #bbf7d0; }
.checklist-timeline-item.is-dibuat::before { background: #0ea5e9; box-shadow: 0 0 0 2px #bae6fd; }
.checklist-timeline-title { font-weight: 700; font-size: 0.85rem; color: #0f172a; }
.checklist-timeline-date { font-size: 0.7rem; color: #94a3b8; margin-top: 1px; }
.checklist-timeline-note { font-size: 0.8rem; color: #475569; background: #f8fafc; padding: 0.55rem 0.75rem; border-radius: 0.5rem; margin-top: 0.5rem; line-height: 1.5; }
.checklist-timeline-evidence { margin-top: 0.6rem; }
.checklist-timeline-evidence img { max-width: 100%; max-height: 220px; border-radius: 0.5rem; border: 1px solid #e2e8f0; cursor: pointer; }
.checklist-timeline-evidence a { font-size: 0.78rem; color: #1d4ed8; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 768px) {
    .checklist-detail-modal { width: 96%; max-height: 90vh; }
}

/* ===== Arsip Dokumen ==================================== */
.arsip-filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.arsip-filter-btn { border: 1px solid #e2e8f0; background: #fff; color: #64748b; padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 7px; }
.arsip-filter-btn:hover { border-color: #c7d2fe; color: #4338ca; }
.arsip-filter-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; box-shadow: 0 3px 8px rgba(99, 102, 241, 0.3); }
.arsip-kategori-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 0.68rem; font-weight: 800; white-space: nowrap; }
.arsip-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
@media (max-width: 768px) {
    .arsip-form-grid { grid-template-columns: 1fr; }
}

.apr-th-accent-purple { background: #c4b5fd; }

.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nav-section-label { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #475569; padding: 1rem 1rem 0.4rem; }

/* ===== Checklist (modul dasar) — dipakai luas di Checklist Foreman, CAPA/
   PICA, HIRADC, IADL, Pelatihan K3, Drill Darurat, Inspeksi P3K, Logbook
   B3, dll — direkonstruksi dari transkrip karena hilang total. */
.checklist-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 1.25rem; }
.checklist-stat-box { background: #fff; border: 1px solid var(--border-color); border-radius: 0.9rem; padding: 0.9rem 1.1rem; box-shadow: var(--card-shadow); }
.checklist-stat-box .num { font-size: 1.6rem; font-weight: 800; color: #0f172a; line-height: 1; }
.checklist-stat-box .lbl { font-size: 0.7rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.35rem; }
.checklist-stat-box.is-overdue .num { color: #dc2626; }
.checklist-stat-box.is-done .num { color: #16a34a; }

.checklist-item { display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.1rem 1.3rem; margin-bottom: 0.8rem; box-shadow: var(--card-shadow); transition: var(--transition); cursor: pointer; }
.checklist-item:hover { box-shadow: var(--card-shadow-hover); border-color: #93c5fd; transform: translateY(-1px); }
.checklist-item.is-done { opacity: 0.65; background: #f8fafc; }
.checklist-checkbox { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid #cbd5e1; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-top: 2px; transition: var(--transition); background: #fff; }
.checklist-checkbox:hover { border-color: #0ea5e9; transform: scale(1.08); }
.checklist-checkbox.is-checked { background: #16a34a; border-color: #16a34a; color: #fff; }
.checklist-body { flex: 1; min-width: 0; }
.checklist-teks { font-weight: 700; color: #0f172a; font-size: 0.92rem; line-height: 1.5; }
.checklist-item.is-done .checklist-teks { text-decoration: line-through; color: #94a3b8; }
.checklist-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.5rem; align-items: center; }
.checklist-tag { font-size: 0.68rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.checklist-tag.is-penting { background: #fef2f2; color: #dc2626; }
.checklist-tag.is-overdue { background: #fef2f2; color: #dc2626; }
.checklist-tag.is-soon { background: #fffbeb; color: #b45309; }
.checklist-tag.is-due { background: #f0f9ff; color: #0369a1; }
.checklist-tag.is-proses { background: #eff6ff; color: #1d4ed8; }
.checklist-tag.is-menunggu { background: #fffbeb; color: #b45309; }
.checklist-tag.is-kategori { background: #f5f3ff; color: #6d28d9; }
.checklist-tag.is-evidence { background: #ecfdf5; color: #047857; }
.checklist-sub { font-size: 0.72rem; color: #94a3b8; margin-top: 0.45rem; }
.checklist-actions-inline { display: flex; align-items: flex-start; gap: 6px; flex: none; }
.checklist-progress-btn, .checklist-delete-btn { flex: none; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; transition: var(--transition); }
.checklist-progress-btn { background: #eff6ff; color: #1d4ed8; }
.checklist-progress-btn:hover { background: #dbeafe; transform: translateY(-1px); }
.checklist-delete-btn { background: #f1f5f9; color: #94a3b8; }
.checklist-delete-btn:hover { background: #fef2f2; color: #dc2626; }
.checklist-empty { text-align: center; padding: 3rem 1rem; color: #94a3b8; }

.msds-stok-link { display: block; margin-top: 3px; font-size: 0.7rem; font-weight: 700; color: #0369a1; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.msds-stok-link:hover { text-decoration: underline; }
.msds-stok-missing { display: block; margin-top: 3px; font-size: 0.68rem; font-weight: 600; color: #94a3b8; }

.inv-msds-link { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 800; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 2px 9px; border-radius: 999px; cursor: pointer; transition: var(--transition); }
.inv-msds-link:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(22, 101, 52, 0.2); }
.inv-msds-missing { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 800; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; padding: 2px 9px; border-radius: 999px; }

/* ===== Mini Trend Chart (Dashboard - Tren Kehadiran 7 Hari) ===== */
.mini-trend-chart { display: flex; align-items: flex-end; gap: 6px; height: 72px; padding-top: 0.25rem; }
.mini-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.mini-trend-bar-bg { width: 100%; max-width: 20px; flex: 1; display: flex; align-items: flex-end; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.mini-trend-bar-fill { width: 100%; background: linear-gradient(180deg, #38bdf8, #0ea5e9); border-radius: 4px 4px 0 0; transition: height 0.4s cubic-bezier(0.4,0,0.2,1); }
.mini-trend-bar-fill.is-today { background: linear-gradient(180deg, #fbbf24, #d97706); }
.mini-trend-label { font-size: 0.65rem; font-weight: 700; color: #94a3b8; margin-top: 4px; }
.mini-trend-label.is-today { color: #d97706; }

/* ============================================================================
   TOMBOL DARURAT & MUSTER CHECK
   ============================================================================ */
.darurat-float-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    border: none;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(220,38,38,0.5);
    cursor: pointer;
    animation: darurat-pulse 2.2s infinite;
}
.darurat-float-btn:hover { background: #b91c1c; }
@keyframes darurat-pulse {
    0% { box-shadow: 0 0 0 0 rgba(220,38,38,0.55); }
    70% { box-shadow: 0 0 0 14px rgba(220,38,38,0); }
    100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
.darurat-banner-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(76,5,5,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.darurat-banner-box {
    background: #fff;
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    padding: 24px;
    max-height: 90vh;
    overflow-y: auto;
}
.darurat-banner-head { display: flex; gap: 14px; align-items: flex-start; border-bottom: 2px solid #fee2e2; padding-bottom: 14px; margin-bottom: 14px; }
.darurat-banner-head i { color: #dc2626; font-size: 2rem; margin-top: 2px; }
.darurat-banner-head h2 { color: #dc2626; font-size: 1.3rem; margin: 0 0 4px; }
.darurat-banner-head p { color: #64748b; font-size: 0.82rem; margin: 0; }
.darurat-catatan { font-style: italic; color: #334155; margin-top: 6px !important; }
.btn-darurat-aman {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: #16a34a;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 16px;
}
.btn-darurat-aman:disabled { background: #86efac; cursor: default; }
.darurat-roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.darurat-roster-col { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 10px; max-height: 220px; overflow-y: auto; }
.darurat-roster-col.is-warn { background: #fef2f2; border-color: #fecaca; }
.darurat-roster-col.is-offduty { background: #eff6ff; border-color: #bfdbfe; }
.darurat-roster-col h4 { font-size: 0.75rem; margin: 0 0 8px; color: #166534; }
.darurat-roster-col.is-warn h4 { color: #b91c1c; }
.darurat-roster-col.is-offduty h4 { color: #1d4ed8; }
.darurat-offduty-note { font-size: 0.68rem; color: #64748b; margin: 0 0 8px; }
.darurat-offduty-tag { font-size: 0.62rem; font-weight: 700; color: #1d4ed8; background: #dbeafe; padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.darurat-roster-col ul { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; color: #334155; }
.darurat-roster-col li { padding: 3px 0; }
.darurat-roster-col li.muted { color: #94a3b8; font-style: italic; }
.btn-darurat-matikan {
    width: 100%;
    padding: 12px;
    border: 2px solid #dc2626;
    border-radius: 10px;
    background: #fff;
    color: #dc2626;
    font-weight: 700;
    cursor: pointer;
}
.btn-darurat-matikan:hover { background: #fef2f2; }
@media (max-width: 640px) {
    .darurat-roster { grid-template-columns: 1fr; }
    .darurat-float-btn { bottom: 16px; right: 16px; width: 50px; height: 50px; font-size: 1.2rem; }
}

/* ============================================================================
   BADGE SINKRON OFFLINE (OUTBOX)
   ============================================================================ */
.outbox-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-right: 8px;
}

/* ============================================================================
   BANNER STATUS KONEKSI — dibuat/diisi lewat JS (updateConnectionBanner() di
   script.js), tapi SEBELUM ini CSS-nya belum pernah dibuat sama sekali,
   jadi banner-nya kemungkinan besar tidak terlihat rapi (cuma <div> polos
   tanpa gaya). Sengaja diberi z-index PALING TINGGI di aplikasi (di atas
   modal & toast) — status koneksi harus selalu terlihat, termasuk saat
   sedang ada modal terbuka, karena langsung memengaruhi apakah data yang
   sedang diisi aman tersimpan atau tidak.
   ============================================================================ */
#connection-banner {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
    animation: connectionBannerSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#connection-banner strong { font-weight: 800; }
#connection-banner.is-offline {
    background: #b45309;
    color: #fff;
}
#connection-banner.is-offline i { color: #fef3c7; }
#connection-banner.is-reconnected {
    background: #15803d;
    color: #fff;
}
#connection-banner.is-reconnected i { color: #dcfce7; }
@keyframes connectionBannerSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 640px) {
    #connection-banner { font-size: 0.75rem; padding: 8px 12px; text-align: left; }
}

/* ============================================================================
   PETA PENYIMPANAN BAHAN KIMIA (ZONA)
   ============================================================================ */
.chem-zona-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 900px) {
    .chem-zona-grid { grid-template-columns: repeat(2, 1fr); }
}
.chem-zona-box {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.chem-zona-box:hover { border-color: #38bdf8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.chem-zona-box.is-conflict { border-color: #dc2626; background: #fef2f2; }
.chem-zona-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.chem-zona-head strong { font-size: 0.9rem; color: #0f172a; }
.chem-zona-rename { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 2px 6px; font-size: 0.8rem; }
.chem-zona-rename:hover { color: #0ea5e9; }
.chem-zona-count { font-size: 0.78rem; color: #64748b; margin-top: 6px; }
.chem-zona-warn { font-size: 0.72rem; color: #dc2626; font-weight: 700; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.chem-zona-conflict-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.85rem; }
.chem-zona-conflict-item:last-child { border-bottom: none; }
.chem-zona-conflict-item i { margin-top: 3px; }
.chem-zona-conflict-item.is-hard i { color: #dc2626; }
.chem-zona-conflict-item.is-soft i { color: #f59e0b; }
.chem-zona-conflict-reason { font-size: 0.75rem; color: #64748b; margin-top: 2px; }
.chem-zona-detail-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.85rem; }

/* Blok peta evakuasi & lokasi P3K/APAR di dalam banner darurat */
.darurat-evakuasi-block {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 16px;
}
.darurat-evakuasi-block.is-missing {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.darurat-evakuasi-block h4 { font-size: 0.8rem; color: #92400e; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.darurat-evakuasi-block p { font-size: 0.8rem; color: #334155; margin: 4px 0 0; }
.darurat-evakuasi-img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    cursor: zoom-in;
    display: block;
    margin-bottom: 6px;
}
.darurat-evakuasi-missing-peta { color: #94a3b8; font-style: italic; }

/* Status konfirmasi "Saya Aman" + berbagi lokasi GPS di banner darurat */
.darurat-status-aman {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.82rem;
    color: #166534;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.darurat-lokasi-ok, .darurat-lokasi-none {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.darurat-lokasi-ok { background: #dbeafe; color: #1d4ed8; }
.darurat-lokasi-none { background: #fef3c7; color: #92400e; }
.darurat-lokasi-note { font-size: 0.72rem; color: #64748b; margin: 6px 0 16px; }
.btn-darurat-update-lokasi {
    width: 100%;
    padding: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    margin-bottom: 16px;
}
.btn-darurat-update-lokasi:hover { background: #f1f5f9; }
.btn-darurat-lihat-peta {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: #1d4ed8;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
}
.btn-darurat-lihat-peta:hover { background: #1e40af; }

/* Blip lokasi anggota tim di peta Leaflet */
.darurat-blip-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #dc2626;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.4);
    animation: darurat-blip-pulse 1.6s infinite;
}
@keyframes darurat-blip-pulse {
    0% { box-shadow: 0 0 0 3px rgba(220,38,38,0.5); }
    70% { box-shadow: 0 0 0 10px rgba(220,38,38,0); }
    100% { box-shadow: 0 0 0 3px rgba(220,38,38,0); }
}

/* Blip yang datanya sudah lebih dari 5 menit (kemungkinan basi/tidak update lagi) */
.darurat-blip-dot.is-basi {
    background: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148,163,184,0.35);
    animation: none;
}

/* Tombol input suara (Web Speech API) di form Timbang Batubara */
.btn-kbt-voice {
    width: 100%;
    padding: 12px;
    border: 2px dashed #0ea5e9;
    border-radius: 12px;
    background: #f0f9ff;
    color: #0369a1;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-kbt-voice:hover { background: #e0f2fe; }
.btn-kbt-voice.is-listening {
    background: #fef2f2;
    border-color: #dc2626;
    color: #dc2626;
    animation: kbt-voice-pulse 1.2s infinite;
}
@keyframes kbt-voice-pulse {
    0% { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
    70% { box-shadow: 0 0 0 10px rgba(220,38,38,0); }
    100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
.kbt-voice-status { font-size: 0.75rem; color: #64748b; min-height: 1.2em; margin-bottom: 10px; }
.kbt-voice-status.is-ok { color: #16a34a; font-weight: 700; }
.kbt-voice-status.is-error { color: #dc2626; font-weight: 700; }

/* Tip permanen dikte keyboard HP, alternatif kalau tombol input suara custom gagal (khususnya iPhone) */
.kbt-voice-tip {
    font-size: 0.7rem;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 6px 10px;
    text-align: left;
    margin: 0 0 10px;
    line-height: 1.4;
}

/* ============================================================================
   SAMPLING MANUAL CONVEYOR 5 — kartu pemantauan keselamatan & kesehatan
   ============================================================================ */
.sampling-k5-card { border-top: 3px solid #0ea5e9; }
.sampling-k5-status-idle {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 1.5rem; text-align: center;
}
.btn-sampling-mulai {
    padding: 14px 28px; border: none; border-radius: 12px; background: #0ea5e9;
    color: #fff; font-weight: 800; font-size: 0.95rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
}
.btn-sampling-mulai:hover { background: #0284c7; }
.sampling-k5-active-card {
    background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 12px;
    padding: 1rem 1.2rem; margin-bottom: 10px; display: flex; align-items: center;
    justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.sampling-k5-active-card.is-overdue { background: #fef2f2; border-color: #fecaca; animation: sampling-overdue-pulse 1.6s infinite; }
@keyframes sampling-overdue-pulse {
    0% { box-shadow: 0 0 0 0 rgba(220,38,38,0.35); }
    70% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
    100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
.sampling-k5-active-info { display: flex; align-items: center; gap: 10px; }
.sampling-k5-active-info i { font-size: 1.4rem; color: #0ea5e9; }
.sampling-k5-active-card.is-overdue .sampling-k5-active-info i { color: #dc2626; }
.sampling-k5-active-name { font-weight: 800; color: #0f172a; font-size: 0.9rem; }
.sampling-k5-active-time { font-size: 0.75rem; color: #64748b; }
.sampling-k5-active-time strong { color: #0369a1; }
.sampling-k5-active-card.is-overdue .sampling-k5-active-time strong { color: #dc2626; }
.btn-sampling-selesai {
    padding: 8px 16px; border: none; border-radius: 8px; background: #16a34a;
    color: #fff; font-weight: 700; font-size: 0.8rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.sampling-ppe-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sampling-ppe-item {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    font-size: 0.82rem; cursor: pointer;
}
.sampling-ppe-item i { color: #0ea5e9; }
.sampling-kesehatan-pilihan { display: flex; gap: 8px; flex-wrap: wrap; }
.sampling-kesehatan-opt {
    flex: 1; text-align: center; padding: 10px 8px; border-radius: 10px;
    border: 2px solid #e2e8f0; cursor: pointer; font-size: 0.82rem; font-weight: 600;
}
.sampling-kesehatan-opt input { display: none; }
.sampling-kesehatan-opt:has(input:checked) { border-color: #0ea5e9; background: #f0f9ff; }
.sampling-riwayat-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.82rem; gap: 10px;
}
.sampling-riwayat-badge { font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sampling-riwayat-badge.is-baik { background: #dcfce7; color: #166534; }
.sampling-riwayat-badge.is-ringan { background: #fef3c7; color: #92400e; }
.sampling-riwayat-badge.is-berat { background: #fee2e2; color: #b91c1c; }
@media (max-width: 640px) {
    .sampling-ppe-checklist { grid-template-columns: 1fr; }
}

/* ============================================================================
   LAPORAN PENGAMBILAN SAMPLE (format WhatsApp otomatis) — Sampling Conveyor 5
   ============================================================================ */
.sampling-laporan-divider {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    font-size: 0.82rem; font-weight: 800; color: #0f172a;
    margin: 16px 0 10px; padding-top: 14px; border-top: 1px dashed #e2e8f0;
}
.sampling-laporan-divider i { color: #0ea5e9; }
.sampling-laporan-divider span { font-weight: 400; color: #94a3b8; font-size: 0.74rem; }
.sampling-waktu-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.sampling-waktu-row { display: flex; align-items: center; gap: 8px; }
.sampling-waktu-input {
    flex: 1; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.85rem;
}
.sampling-waktu-remove {
    width: 32px; height: 32px; flex-shrink: 0; border: 1px solid #fecaca; background: #fef2f2;
    color: #dc2626; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sampling-waktu-add-btn {
    width: 100%; padding: 9px; border: 1px dashed #cbd5e1; border-radius: 8px;
    background: #f8fafc; color: #0ea5e9; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.sampling-laporan-textarea {
    width: 100%; font-family: "Courier New", monospace; font-size: 0.8rem; line-height: 1.5;
    padding: 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc;
    color: #0f172a; resize: vertical; white-space: pre;
}
.btn-lihat-laporan-sample {
    margin-top: 4px; font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 6px;
    border: 1px solid #0ea5e9; color: #0ea5e9; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
}
.btn-lihat-laporan-sample:hover { background: #f0f9ff; }

/* ============================================================================
   PERINGATAN CUACA UNTUK SAMPLING (Open-Meteo, gratis tanpa API key)
   ============================================================================ */
.sampling-cuaca-banner {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    border-radius: 10px; font-size: 0.82rem; margin-bottom: 12px; font-weight: 600;
}
.sampling-cuaca-banner.is-bahaya { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.sampling-cuaca-banner.is-waspada { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.sampling-cuaca-banner.is-aman { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; font-weight: 500; }
.sampling-cuaca-banner.is-gagal { background: #f8fafc; border: 1px solid #e2e8f0; color: #94a3b8; font-weight: 500; }
.sampling-cuaca-setup {
    width: 100%; padding: 10px; border: 1px dashed #cbd5e1; border-radius: 10px;
    background: #f8fafc; color: #64748b; font-size: 0.78rem; cursor: pointer; margin-bottom: 12px;
}

/* ============================================================================
   LOG KENDARAAN SAMPLING (MOBIL LISTRIK)
   ============================================================================ */
.kendaraan-card { border-top: 3px solid #7c3aed; }
.kendaraan-status-idle {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 1.5rem; text-align: center;
}
.btn-kendaraan-ambil {
    padding: 14px 28px; border: none; border-radius: 12px; background: #7c3aed;
    color: #fff; font-weight: 800; font-size: 0.95rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
}
.btn-kendaraan-ambil:hover { background: #6d28d9; }
.kendaraan-battery-info { font-size: 0.78rem; color: #64748b; display: flex; align-items: center; gap: 6px; }
.kendaraan-battery-info.is-low { color: #dc2626; font-weight: 700; }
.kendaraan-active-card {
    background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 12px;
    padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.kendaraan-active-info { display: flex; align-items: center; gap: 10px; }
.kendaraan-active-info i { font-size: 1.4rem; color: #7c3aed; }
.kendaraan-active-name { font-weight: 800; color: #0f172a; font-size: 0.9rem; }
.kendaraan-active-detail { font-size: 0.75rem; color: #64748b; }
.kendaraan-active-detail strong { color: #6d28d9; }
.kendaraan-speed-row {
    font-size: 0.78rem; color: #0f172a; margin-top: 6px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.kendaraan-speed-row i { color: #7c3aed; }
.kendaraan-speed-row.is-over { color: #dc2626; font-weight: 700; }
.kendaraan-speed-row.is-over i { color: #dc2626; }
.kendaraan-speed-warning {
    font-size: 0.75rem; color: #dc2626; font-weight: 700; margin-top: 4px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.darurat-blip-dot.is-ngebut { animation: kendaraanNgebutPulse 1s ease-in-out infinite; }
@keyframes kendaraanNgebutPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.35); }
}
.btn-kendaraan-kembali {
    padding: 8px 16px; border: none; border-radius: 8px; background: #16a34a;
    color: #fff; font-weight: 700; font-size: 0.8rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.kendaraan-riwayat-item {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.82rem; gap: 10px;
}
.kendaraan-riwayat-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.btn-kendaraan-lihat-rute {
    padding: 5px 10px; border: 1px solid #ddd6fe; border-radius: 8px; background: #f5f3ff;
    color: #7c3aed; font-weight: 700; font-size: 0.72rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.btn-kendaraan-lihat-rute:hover { background: #ede9fe; border-color: #c4b5fd; }

/* ============================================================================
   FORM P2H (PEMERIKSAAN HARIAN) — Log Kendaraan Sampling
   ============================================================================ */
.p2h-modal-content { max-height: 88vh; max-height: 88dvh; overflow-y: auto; }
.p2h-header-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px;
}
.p2h-header-grid .input-group { margin-top: 1rem; }
.p2h-parkir-note {
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
    border-radius: 10px; padding: 10px 12px; font-size: 0.78rem; font-weight: 600;
    margin-top: 1rem; display: flex; align-items: flex-start; gap: 8px;
}
.p2h-section-block { margin-top: 1.4rem; }
.p2h-section-title {
    font-size: 0.88rem; font-weight: 800; color: #0f172a; margin: 0 0 0.6rem;
    padding-bottom: 6px; border-bottom: 2px solid #ede9fe;
}
.p2h-item-list { display: flex; flex-direction: column; gap: 8px; }
.p2h-item-row {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
}
.p2h-item-row.is-sedang { background: #fff7ed; border-color: #fed7aa; }
.p2h-item-row.is-tidak-selected { background: #fef2f2; border-color: #fecaca; }
.p2h-item-text { flex: 1 1 260px; min-width: 0; font-size: 0.78rem; color: #334155; line-height: 1.4; }
.p2h-item-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; background: #ede9fe; color: #6d28d9;
    font-size: 0.68rem; font-weight: 800; margin-right: 6px;
}
.p2h-item-row.is-sedang .p2h-item-num { background: transparent; color: #ea580c; width: auto; height: auto; }
.p2h-item-id-text { color: #0f172a; font-weight: 600; }
.p2h-item-zh-text { display: block; color: #94a3b8; font-size: 0.72rem; margin-top: 2px; }
.p2h-item-toggle { display: flex; gap: 6px; flex-shrink: 0; }
.p2h-toggle-btn {
    padding: 6px 12px; border: 1.5px solid #cbd5e1; border-radius: 8px; background: #fff;
    color: #64748b; font-weight: 700; font-size: 0.76rem; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.p2h-toggle-btn.is-active-baik { background: #16a34a; border-color: #16a34a; color: #fff; }
.p2h-toggle-btn.is-active-tidak { background: #dc2626; border-color: #dc2626; color: #fff; }
.p2h-item-keterangan {
    width: 100%; margin-top: 4px; border: 1px solid #fca5a5; border-radius: 8px;
    padding: 8px 10px; font-size: 0.8rem; font-family: inherit; resize: vertical; min-height: 44px;
}
.p2h-blokir-warning {
    background: #fef2f2; border: 1.5px solid #fca5a5; color: #991b1b;
    border-radius: 10px; padding: 12px 14px; font-size: 0.82rem; margin-top: 1.2rem;
}
.p2h-blokir-warning ul { margin: 6px 0 0 18px; padding: 0; }
.p2h-signature-block { margin-top: 1.4rem; }
.p2h-signature-block label { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 600; color: #334155; }
.p2h-signature-pad {
    width: 100%; max-width: 100%; height: 160px; border: 1.5px dashed #cbd5e1; border-radius: 10px;
    background: #fff; touch-action: none; cursor: crosshair; display: block;
}
.p2h-declaration {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 1rem;
    font-size: 0.78rem; color: #475569; line-height: 1.4; cursor: pointer;
}
.p2h-declaration input { margin-top: 2px; flex-shrink: 0; }
@media (max-width: 700px) {
    .p2h-header-grid { grid-template-columns: 1fr; }
    /* Tombol "Baik"/"Tidak" sebelumnya melebar sesuai teksnya masing-masing
       (jadi "Baik" & "Tidak" beda lebar, terlihat timpang tiap item-nya kalau
       diulang puluhan kali ke bawah). Di HP, paksa keduanya jadi 1 baris
       penuh & SAMA LEBAR (50/50) persis di bawah teks item — sekalian area
       sentuhnya dibesarkan supaya lebih gampang ditekan pakai jari/sarung
       tangan di lapangan. */
    .p2h-item-toggle { flex: 1 1 100%; width: 100%; }
    .p2h-toggle-btn { flex: 1; justify-content: center; padding: 10px 10px; font-size: 0.8rem; }
}

/* ============================================================================
   KONSELING PRIVAT — palet tenang (teal), sengaja beda dari palet
   darurat/alarm (merah) supaya tidak terasa menakutkan.
   ============================================================================ */
.konseling-disclaimer {
    background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 10px;
    padding: 12px 16px; font-size: 0.8rem; color: #0f766e; line-height: 1.6; margin-bottom: 1.25rem;
}
.konseling-chat-box {
    height: 50vh; min-height: 300px; overflow-y: auto; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.konseling-bubble { max-width: 75%; padding: 10px 14px; border-radius: 14px; font-size: 0.85rem; line-height: 1.5; }
.konseling-bubble.is-karyawan { align-self: flex-end; background: #0d9488; color: #fff; border-bottom-right-radius: 4px; }
.konseling-bubble.is-foreman { align-self: flex-start; background: #fff; border: 1px solid #e2e8f0; color: #0f172a; border-bottom-left-radius: 4px; }
.konseling-bubble-time { font-size: 0.65rem; opacity: 0.7; margin-top: 4px; }
.konseling-input-row { display: flex; gap: 10px; margin-top: 12px; }
.konseling-input-row textarea {
    flex: 1; padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: 10px;
    font-family: inherit; font-size: 0.85rem; resize: none;
}
.konseling-input-row button {
    width: 46px; border: none; border-radius: 10px; background: #0d9488; color: #fff; cursor: pointer; font-size: 1rem;
}
.konseling-input-row button:hover { background: #0f766e; }
.konseling-inbox-item {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 14px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 8px;
    cursor: pointer; transition: all 0.15s ease;
}
.konseling-inbox-item:hover { border-color: #5eead4; transform: translateY(-1px); }
.konseling-inbox-item.is-unread { background: #f0fdfa; border-color: #5eead4; }
.konseling-inbox-item strong { color: #0f172a; font-size: 0.88rem; }
.konseling-inbox-item p { color: #64748b; font-size: 0.78rem; margin-top: 3px; }
.konseling-badge-baru { background: #0d9488; color: #fff; font-size: 0.65rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }

/* ============================================================================
   PENYESUAIAN MOBILE TAMBAHAN — topbar & fitur-fitur baru (Sampling K5,
   Kendaraan, Konseling Privat, peta live) yang sebelumnya belum punya
   perlakuan khusus mobile. Aplikasi ini sebenarnya sudah punya fondasi
   mobile yang cukup matang (tabel->kartu, sidebar off-canvas, dst) — bagian
   ini melengkapi kesenjangan yang tertinggal dari fitur-fitur baru saja.
   ============================================================================ */
@media (max-width: 480px) {
    /* --- Topbar: sebelumnya penuh sesak (5-6 tombol + nama panjang di 1 baris) --- */
    .header-right { gap: 0.4rem; row-gap: 0.5rem; }
    .btn-view-toggle { padding: 0.5rem 0.65rem; font-size: 0.78rem; }
    .btn-view-toggle-label { display: none; } /* ikon mata/gembok saja cukup, teks "Mode Edit/View" disembunyikan */
    .btn-header-action { width: 34px; height: 34px; font-size: 0.8rem; }
    #user-badge {
        max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-size: 0.68rem; padding: 0.35rem 0.55rem; display: inline-block;
    }
    .outbox-badge { font-size: 0.6rem; padding: 3px 7px; }

    /* --- Kartu Sampling Conveyor 5 & Kendaraan: susun vertikal, tombol full-width --- */
    .sampling-k5-active-card, .kendaraan-active-card {
        flex-direction: column; align-items: flex-start; gap: 10px;
    }
    .btn-sampling-selesai, .btn-kendaraan-kembali { width: 100%; justify-content: center; }
    .sampling-k5-active-name, .kendaraan-active-name { font-size: 0.85rem; }

    /* --- Konseling Privat: chat lebih pendek & rapi di layar kecil --- */
    .konseling-chat-box { height: 60vh; min-height: 260px; padding: 12px; }
    .konseling-bubble { max-width: 85%; font-size: 0.8rem; }
    .konseling-input-row textarea { font-size: 0.8rem; padding: 8px 12px; }
    .konseling-disclaimer { font-size: 0.72rem; padding: 10px 12px; }
    .konseling-inbox-item { padding: 12px; }

    /* --- Modal peta live (Darurat/Sampling K5/Kendaraan): peta lebih pendek
       supaya modal tidak lebih tinggi dari layar HP --- */
    #darurat-peta-lokasi-map, #sampling-k5-peta-map, #kendaraan-peta-map {
        height: 260px !important;
    }
    .modal-content h3 { font-size: 1.05rem; }

    /* --- Banner Darurat: judul & tombol jangan terlalu besar di HP kecil --- */
    .darurat-banner-box { padding: 18px; max-height: 92vh; }
    .darurat-banner-head h2 { font-size: 1.1rem; }
    .darurat-evakuasi-img { max-height: 160px; }

    /* --- Peta Zona Kimia: 1 kolom di HP kecil (sebelumnya 2 kolom mulai 900px) --- */
    .chem-zona-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .chem-zona-box { padding: 10px; }

    /* --- Log Sampling/Kendaraan: pilihan kondisi kesehatan/body jangan
       terlalu sempit tiap kotaknya --- */
    .sampling-kesehatan-pilihan { flex-direction: column; }
    .sampling-kesehatan-opt { text-align: left; display: flex; align-items: center; gap: 8px; }

    /* --- Tombol darurat mengambang jangan menutupi konten paling bawah --- */
    .darurat-float-btn { bottom: 20px; right: 14px; }
}

/* Command Center (TV Mode) dibuka dari HP — bukan tujuan utamanya, tapi
   jangan sampai berantakan kalau kejadian. Susun grid 3 kolom jadi 1 kolom. */