/* =========================================================
   LAA Monitoring — tema "T-PRO" (sidebar gelap + konten terang)
   Brand: KAI Properti
   ========================================================= */
:root {
    /* -- dark tokens: dipakai sidebar & halaman login -- */
    --ink:        #171E45;
    --panel:      #1F2755;
    --panel-2:    #2A356E;
    --line:       #364784;
    --dark-text:  #E7ECF2;
    --dark-muted: #A6ADD1;

    /* -- light tokens: dipakai seluruh area konten -- */
    --bg:         #EFF2F6;
    --surface:    #FFFFFF;
    --surface-2:  #F6F8FB;
    --border:     #E3E7EE;
    --text:       #17202B;
    --muted:      #78838F;

    /* -- brand (KAI Properti) -- */
    --accent:       #1F2755;
    --accent-dark:  #131A3E;
    --accent-tint:  #E9EBF4;
    --brand-orange: #DD8A2B;

    --st-selesai:  #1FA85A;
    --st-progress: #DD9A2B;
    --st-tertunda: #E5534B;
    --st-belum:    #97A2AD;

    /* -- status jadwal per lokasi -- */
    --st-jadwal-cepat:       #2B6FD1;
    --st-jadwal-ontime:      #1FA85A;
    --st-jadwal-late:        #DD9A2B;
    --st-jadwal-percepatan:  #E5534B;
    --st-jadwal-kritis:      #9B1C1C;
    --st-jadwal-verylate:    #E5534B;

    --shadow-sm: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
    --shadow-md: 0 4px 10px rgba(16,24,40,0.06), 0 2px 4px rgba(16,24,40,0.05);

    --mono: 'IBM Plex Mono', 'Courier New', monospace;
    --sans: 'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    /* Pengaman: apapun yang terjadi di dalam halaman, body tidak pernah
       melebar ke samping melewati layar HP (mencegah "geser/zoom keluar"
       yang bikin tampilan terasa tidak pas layar). Elemen yang memang perlu
       geser (tabel, gantt chart, dsb.) sudah punya overflow-x:auto sendiri. */
    max-width: 100%;
    overflow-x: hidden;
}
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    min-height: 100vh;
}

/* ---------- Brand lockup (KAI Properti) — dipakai di sidebar & login ---------- */
.brand-logo-img {
    display: block;
    height: 30px;
    width: auto;
    flex-shrink: 0;
}
.brand-logo-img-lg { height: 56px; margin: 0 auto; }

/* ---------- Login page ---------- */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(43,87,204,0.14), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(221,138,43,0.08), transparent 40%),
        var(--ink);
}
.login-card {
    width: 340px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 32px 32px 36px;
    text-align: center;
}
.login-logo { display: flex; justify-content: center; margin-bottom: 14px; }
.login-card h1 { font-family: var(--mono); font-size: 18px; letter-spacing: 0.5px; color: var(--dark-text); }
.login-sub { color: var(--dark-muted); font-size: 13px; margin-top: 4px; margin-bottom: 24px; }
.login-card form { display: flex; flex-direction: column; text-align: left; gap: 4px; }
.login-card label { font-size: 12px; color: var(--dark-muted); margin-top: 10px; }
.login-card input {
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--dark-text);
    font-family: var(--sans);
    font-size: 14px;
}
.login-card input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.login-card button {
    margin-top: 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 11px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.login-card button:hover { background: var(--accent-dark); }
.login-error { color: var(--st-tertunda); font-size: 12px; min-height: 16px; margin-top: 10px; }
.login-hint { color: var(--dark-muted); font-size: 11px; margin-top: 18px; line-height: 1.6; }
.login-hint b { color: var(--dark-text); }

/* ---------- App shell: sidebar + topbar ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--ink);
    border-right: 1px solid var(--line);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px 14px; }
.brand-text h1 { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.4px; color: var(--dark-text); }
.brand-text span { font-size: 11px; color: var(--dark-muted); }
.sidebar-tagline {
    font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 1.6px;
    color: var(--dark-muted); padding: 0 18px 16px; border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
.sidebar-nav { padding: 0 10px 20px; }
.nav-group { margin-bottom: 18px; }
.nav-group-label { font-size: 10px; font-weight: 600; color: var(--dark-muted); letter-spacing: 1px; padding: 0 10px 6px; }
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 7px;
    font-size: 13px; font-weight: 500; color: var(--dark-text); text-decoration: none;
    margin-bottom: 2px;
}
.nav-item:hover { background: var(--panel-2); }
.nav-item.active { background: var(--accent); color: #fff; }
.nav-item.disabled { color: var(--dark-muted); cursor: default; opacity: 0.6; }
.nav-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; opacity: 0.85; }
.nav-icon svg { width: 17px; height: 17px; }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { opacity: 1; }
.nav-item.disabled .nav-icon { opacity: 0.5; }
.nav-badge { margin-left: auto; font-family: var(--mono); font-size: 9px; background: var(--panel-2); padding: 1px 6px; border-radius: 8px; color: var(--dark-muted); }

.main-col { flex: 1; min-width: 0; }

/* ---------- Tabel: scroll horizontal di layar sempit ---------- */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Mobile nav: sidebar jadi off-canvas + hamburger ---------- */
.btn-hamburger {
    display: none;
    align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0; margin-right: 6px;
    background: transparent; border: 1px solid var(--border); border-radius: 7px;
    color: var(--text); cursor: pointer;
}
.btn-hamburger svg { width: 19px; height: 19px; }
.sidebar-overlay {
    display: none; position: fixed; inset: 0; background: rgba(16,20,26,0.5); z-index: 1999;
}
@media (max-width: 900px) {
    .app-shell { display: block; }
    .btn-hamburger { display: inline-flex; }
    .sidebar {
        /* z-index dinaikkan di atas 1000 supaya selalu menang lawan widget pihak ketiga
           (mis. kontrol zoom Leaflet) yang punya z-index tinggi secara default. */
        position: fixed; top: 0; left: 0; z-index: 2000;
        width: 260px; max-width: 82vw;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: var(--shadow-md);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-overlay { display: block; }
    .main-col { width: 100%; min-width: 0; }
    .container { padding: 14px; }
    .topbar { padding: 12px 14px; gap: 8px; }
    .page-title { font-size: 15px; }
    .user-chip { display: none; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    /* Badge tanggal/jam/hijriah: paksa 1 baris + scroll ke samping, jangan
       sampai melebar ke banyak baris dan membengkakkan topbar sticky. */
    .today-date {
        max-width: 46vw; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        white-space: nowrap; font-size: 10.5px; padding: 5px 9px; gap: 4px; scrollbar-width: none;
    }
    .today-date::-webkit-scrollbar { display: none; }
}
@media (max-width: 480px) {
    .proyek-info-grid { grid-template-columns: 1fr !important; }
    .stats { grid-template-columns: 1fr 1fr; }
    .today-date { max-width: 38vw; }
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 20;
}
.page-title { font-size: 17px; font-weight: 700; color: var(--text); }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.user-chip { font-size: 13px; color: var(--muted); }
.user-chip b { color: var(--text); }
.btn-logout {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}
.btn-logout:hover { border-color: var(--st-tertunda); color: var(--st-tertunda); }

.container { max-width: 1320px; margin: 0 auto; padding: 24px; }

/* ---------- Buttons ---------- */
.btn {
    font-family: var(--sans); font-size: 13px; font-weight: 500;
    padding: 9px 16px; border-radius: 7px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-danger { color: var(--st-tertunda); }
.btn-danger:hover { border-color: var(--st-tertunda); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-icon { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 4px; }
.btn-icon:hover { background: var(--surface-2); color: var(--text); }

/* ---------- Page header / toolbar ---------- */
.page-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.page-toolbar h2 { font-size: 19px; font-weight: 700; color: var(--text); }
.page-toolbar p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.toolbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-select, .search-input {
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    border-radius: 7px; padding: 8px 10px; font-size: 13px; font-family: var(--sans);
    min-width: 0;
}
@media (max-width: 700px) {
    /* Baris toolbar (search, filter, tombol Cetak/Unduh/Unggah/Tambah) dulu
       dipaksa 1 baris tanpa bisa melipat, jadi tombol terakhir kepotong di
       tepi layar HP. Sekarang boleh melipat ke bawah, dan search/filter
       melebar penuh supaya enak disentuh di HP. */
    .toolbar-actions { width: 100%; }
    .toolbar-actions .search-input,
    .toolbar-actions .filter-select { flex: 1 1 130px; min-width: 0; width: auto; }
}

/* ---------- Data table ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); border-radius: 10px; overflow: hidden; }
.data-table th {
    text-align: left; padding: 11px 14px; color: var(--muted);
    font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border); letter-spacing: 0.3px;
}
.data-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.data-table tr:hover td { background: var(--surface-2); }
.data-table .row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.avatar-chip {
    width: 30px; height: 30px; border-radius: 50%; background: var(--accent-tint);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sans); font-size: 12px; color: var(--accent); font-weight: 700;
    border: 1px solid var(--border);
}
.tag {
    font-family: var(--sans); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 4px;
    background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.tag-kantor { background: var(--accent-tint); color: var(--accent); border-color: transparent; }

/* ---------- Form ---------- */
.form-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.form-grid.single { grid-template-columns: minmax(0,1fr); }
.form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-field.span-2 { grid-column: span 2; }
.form-field label { font-size: 12px; color: var(--muted); font-weight: 500; }
.form-field input, .form-field select, .form-field textarea {
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    border-radius: 7px; padding: 9px 11px; font-size: 13px; font-family: var(--sans);
    width: 100%; min-width: 0; box-sizing: border-box;
}
.form-field textarea { resize: vertical; min-height: 70px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
@media (max-width: 560px) { .form-grid { grid-template-columns: minmax(0,1fr); } .form-field.span-2 { grid-column: span 1; } }
.form-subhead { margin: 18px 0 4px; font-size: 13px; font-weight: 700; color: var(--text); border-top: 1px solid var(--border); padding-top: 14px; }
.form-subhint { margin: 0 0 12px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ---------- Upload dropzone ---------- */
.dropzone {
    border: 1.5px dashed var(--border); border-radius: 8px; padding: 28px;
    text-align: center; color: var(--muted); font-size: 13px; cursor: pointer;
    background: var(--surface-2);
    transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone.drag-over { border-color: var(--accent); background: var(--accent-tint); }
.dropzone-icon { font-size: 26px; margin-bottom: 6px; }
.file-preview-name { font-family: var(--sans); font-weight: 600; font-size: 12px; color: var(--accent); margin-top: 8px; word-break: break-all; }

.upload-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.upload-kondisi-col { display: flex; flex-direction: column; gap: 6px; }
.upload-kondisi-head { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); }
.dropzone-sm { padding: 14px 8px; }
.dropzone-sm .dropzone-icon { font-size: 20px; margin-bottom: 4px; }
.dropzone-sm .file-preview-name { font-size: 10.5px; margin-top: 6px; }
@media (max-width: 560px) { .upload-row-3 { grid-template-columns: 1fr; } }

/* ---------- Isu & Kendala ---------- */
.isu-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; background: var(--surface); }
.isu-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.isu-card-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.isu-card-date, .isu-card-lokasi { color: var(--muted); }
.isu-card-judul { font-size: 14px; font-weight: 700; color: var(--text); margin: 8px 0 4px; }
.isu-card-judul.isu-open { color: #C43D35; }
.isu-card-desk { font-size: 12.5px; color: var(--text); line-height: 1.55; margin-bottom: 6px; }
.isu-card-tindak { font-size: 12px; color: var(--muted); line-height: 1.55; }
.isu-card-tindak b { color: var(--text); font-weight: 600; }
.isu-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.muted { color: var(--muted); }

/* ---------- Gallery (dokumentasi) ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.gallery-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery-thumb { width: 100%; height: 140px; object-fit: cover; display: block; background: var(--surface-2); }
.gallery-doc-icon { width: 100%; height: 140px; display: flex; align-items: center; justify-content: center; font-size: 40px; background: var(--surface-2); }
.gallery-body { padding: 10px 12px; }
.gallery-title { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.gallery-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

/* ---------- Media (foto & dokumen) di kartu pekerjaan perawatan ---------- */
.pekerjaan-media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
@media (max-width: 700px) { .pekerjaan-media { grid-template-columns: 1fr; } }
.media-block label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.photo-thumb-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.photo-thumb-wrap { position: relative; width: 60px; height: 60px; }
.photo-thumb { width: 60px; height: 60px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); display: block; }
.doc-chip-list { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.doc-chip { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; padding: 5px 9px; background: var(--surface-2); border-radius: 6px; border: 1px solid var(--border); }
.doc-chip a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-chip a:hover { color: var(--accent); }
.upload-btn-label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.media-empty { font-size: 11px; color: var(--muted); margin: 6px 0; }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
    background: var(--ink); color: var(--dark-text); border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: 6px; padding: 11px 16px; font-size: 13px; box-shadow: 0 6px 18px rgba(16,24,40,0.25);
    animation: toast-in 0.2s ease-out;
}
.toast.error { border-left-color: var(--st-tertunda); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- Signal ticker (signature element) ---------- */
.signal-ticker {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 46px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 20px;
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
}
.signal-bar {
    flex: 1;
    min-width: 14px;
    border-radius: 2px 2px 0 0;
    cursor: pointer;
    position: relative;
    transition: opacity 0.15s;
}
.signal-bar:hover { opacity: 0.75; }
.signal-bar.st-progress { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .signal-bar.st-progress { animation: none; } }

/* ---------- Stat strip ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    border-left: 3px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.stat-card .num { font-family: var(--sans); font-size: 28px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.stat-card .num.small { font-size: 22px; }
.stat-card .lbl { font-size: 12px; color: var(--muted); margin-top: 2px; font-weight: 500; }
.stat-card .sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.stat-card.durasi     { border-left-color: var(--accent); }
.stat-card.rencana    { border-left-color: var(--st-progress); }
.stat-card.realisasi  { border-left-color: var(--st-selesai); }
.stat-card.deviasi    { border-left-color: var(--st-tertunda); }

/* Perbaikan: sama seperti bug .today-date, aturan .stats di atas (4 kolom)
   letaknya di file SETELAH aturan mobile di bagian atas, jadi di HP dia
   menimpa balik jadi 4 kolom sejajar (bukan 2x2) dan "kotak Deviasi" kepotong
   di tepi kanan layar. minmax(0,1fr) dipakai supaya kolom grid boleh
   menyusut (default 1fr tidak boleh lebih kecil dari konten di dalamnya). */
@media (max-width: 900px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .stat-card { padding: 12px 14px; }
    .stat-card .num { font-size: 22px; }
}

/* ---------- Strip ringkasan 3 kotak (mis. RAP: Operational Cost / Profit / GPM-NPM) ----------
   Dulu dipaksa 3 kolom lewat inline style di halaman, jadi di HP tidak pernah
   menyusut ke 2/1 kolom dan angka Rupiah yang panjang kepotong di tepi kartu.
   Pakai class ini (bukan inline style) supaya breakpoint di bawah berlaku. */
.stats-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) {
    .stats-3col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .stats-3col { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Kartu ringkasan Keuangan (menu Keuangan > Ringkasan) ---------- */
.fin-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.fin-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.fin-card-nested { background: var(--bg); border: 1px solid var(--accent); }
.fin-card-lbl { font-size: 12px; color: var(--muted); margin-bottom: 8px; line-height: 1.35; min-height: 32px; }
.fin-card-num { font-family: var(--sans); font-size: 21px; font-weight: 700; color: var(--text); }
.fin-card-link { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--accent); text-decoration: none; }
.fin-card-link:hover { text-decoration: underline; }
@media (max-width: 1200px) { .fin-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .fin-cards { grid-template-columns: repeat(2, 1fr); } }

/* Baris "UMD belum LPJ" -- mirip .loc-item tapi dengan indikator tenggat waktu. */
.fin-alert-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 18px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.fin-alert-row:last-child { border-bottom: none; }
.fin-alert-row.terlambat { background: rgba(229,83,75,0.06); }
.fin-alert-main { min-width: 0; }
.fin-alert-title { font-weight: 600; color: var(--text); }
.fin-alert-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.fin-alert-nums { text-align: right; flex-shrink: 0; }
.fin-alert-nums .sisa { font-weight: 700; color: var(--st-tertunda); }
.fin-alert-nums .deadline { font-size: 11px; margin-top: 2px; }
.fin-alert-nums .deadline.late { color: var(--st-tertunda); font-weight: 700; }
.fin-alert-nums .deadline.ok { color: var(--muted); }
.num.c-plus  { color: var(--st-selesai); }
.num.c-minus { color: var(--st-tertunda); }
.num.c-flat  { color: var(--muted); }
.num.lvl-cepat                { color: var(--st-jadwal-cepat); }
.num.lvl-on_schedule          { color: var(--st-jadwal-ontime); }
.num.lvl-terlambat            { color: var(--st-jadwal-late); }
.num.lvl-terlambat_percepatan { color: var(--st-jadwal-percepatan); }
.num.lvl-kritis                { color: var(--st-jadwal-kritis); }

/* ---------- Main grid: map + list ---------- */
.main-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr;
    gap: 16px;
}
@media (max-width: 980px) { .main-grid { grid-template-columns: 1fr; } }

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.panel-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 10px;
}
.panel-head h2 { font-size: 12px; font-family: var(--sans); font-weight: 700; letter-spacing: 0.5px; color: var(--muted); text-transform: uppercase; }
#map {
    height: 460px; width: 100%;
    /* Leaflet's internal panes/zoom-controls punya z-index sampai 1000 (dari leaflet.css),
       lebih tinggi dari sidebar (200) & overlay (199). Tanpa 'isolation', map jadi
       "bocor" tampil di atas menu/sidebar saat dibuka di HP. isolation:isolate mengunci
       semua z-index di dalam #map supaya tidak pernah lebih tinggi dari elemen di luar dirinya. */
    isolation: isolate;
    position: relative;
}

.loc-list { max-height: 460px; overflow-y: auto; }
.loc-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s;
}
.loc-item:hover { background: var(--surface-2); }
.loc-item:last-child { border-bottom: none; }
.status-dot { width: 10px; height: 10px; flex-shrink: 0; margin-top: 5px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.loc-info { flex: 1; min-width: 0; }
.loc-code { font-family: var(--sans); font-weight: 600; font-size: 10px; color: var(--accent); }
.loc-name { font-size: 13px; font-weight: 600; color: var(--text); }
.loc-job  { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-mini {
    width: 60px; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; flex-shrink: 0;
}
.progress-mini > div { height: 100%; }

/* Baris meta bobot + status pill di kanan-atas tiap item lokasi */
.loc-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.loc-bobot {
    font-size: 9.5px; font-weight: 700; color: var(--muted); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 20px; padding: 1.5px 8px; white-space: nowrap;
}
.loc-bobot b { color: var(--text); }

/* Bar progress ganda per lokasi: track pudar = Rencana, bar solid = Realisasi,
   plus label bobot & deviasi supaya langsung kebaca tanpa buka detail. */
.loc-progress-row { margin-top: 8px; }
.loc-progress-track {
    position: relative; width: 100%; height: 7px; border-radius: 4px;
    background: var(--border); overflow: hidden;
}
.loc-progress-rencana {
    position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px;
    background: var(--accent); opacity: 0.25; transition: width 0.3s;
}
.loc-progress-realisasi {
    position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px;
    transition: width 0.3s;
}
.loc-progress-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 8px; }
.loc-progress-legend { font-size: 10.5px; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.loc-progress-legend .lp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.loc-progress-legend .lp-realisasi b { color: var(--text); font-weight: 700; }
.loc-deviasi { font-size: 10.5px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.loc-deviasi.c-plus  { color: var(--st-selesai); }
.loc-deviasi.c-minus { color: var(--st-tertunda); }
.loc-deviasi.c-flat  { color: var(--muted); }
.loc-deviasi.lvl-cepat                { color: var(--st-jadwal-cepat); }
.loc-deviasi.lvl-on_schedule          { color: var(--st-jadwal-ontime); }
.loc-deviasi.lvl-terlambat            { color: var(--st-jadwal-late); }
.loc-deviasi.lvl-terlambat_percepatan { color: var(--st-jadwal-percepatan); }
.loc-deviasi.lvl-kritis                { color: var(--st-jadwal-kritis); }

/* Bar progress ganda (Rencana pudar + Realisasi gelap) -- dipakai di kolom
   PROGRESS tabel Lokasi & Progress, supaya langsung terlihat posisi aktual
   dibanding jadwal, bukan cuma bar polos tanpa makna. */
.progress-dual { display: flex; flex-direction: column; gap: 3px; width: 110px; }
.progress-dual-track {
    position: relative; width: 100%; height: 6px; border-radius: 3px;
    background: var(--border); overflow: hidden;
}
.progress-dual-rencana {
    position: absolute; left: 0; top: 0; height: 100%;
    background: var(--accent); opacity: 0.22; border-radius: 3px;
}
.progress-dual-realisasi {
    position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px;
}
.progress-dual-label { font-size: 10.5px; font-weight: 700; color: var(--text); }
.progress-dual-sub { font-weight: 500; color: var(--muted); margin-left: 3px; }
.status-pill {
    font-size: 9px; font-family: var(--sans); font-weight: 700; padding: 2.5px 7px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0;
}

/* status color utility classes (status perawatan mentah) */
.c-selesai     { color: var(--st-selesai); }
.c-progress    { color: var(--st-progress); }
.c-tertunda    { color: var(--st-tertunda); }
.c-belum_mulai { color: var(--st-belum); }
.bg-selesai     { background: var(--st-selesai); }
.bg-progress    { background: var(--st-progress); }
.bg-tertunda    { background: var(--st-tertunda); }
.bg-belum_mulai { background: var(--st-belum); }
.pill-selesai     { background: rgba(31,168,90,0.12); color: var(--st-selesai); }
.pill-progress    { background: rgba(221,154,43,0.14); color: var(--st-progress); }
.pill-tertunda     { background: rgba(229,83,75,0.12); color: var(--st-tertunda); }
.pill-belum_mulai { background: rgba(151,162,173,0.16); color: #647180; }

/* status jadwal per lokasi (On Schedule / Terlambat / Cepat / Terlambat Perlu Percepatan / Kritis) */
.c-cepat                { color: var(--st-jadwal-cepat); }
.c-on_schedule           { color: var(--st-jadwal-ontime); }
.c-terlambat             { color: var(--st-jadwal-late); }
.c-terlambat_percepatan  { color: var(--st-jadwal-percepatan); }
.c-kritis                { color: var(--st-jadwal-kritis); }
.c-sangat_terlambat      { color: var(--st-jadwal-verylate); }
.bg-cepat                { background: var(--st-jadwal-cepat); }
.bg-on_schedule           { background: var(--st-jadwal-ontime); }
.bg-terlambat             { background: var(--st-jadwal-late); }
.bg-terlambat_percepatan  { background: var(--st-jadwal-percepatan); }
.bg-kritis                { background: var(--st-jadwal-kritis); }
.bg-sangat_terlambat      { background: var(--st-jadwal-verylate); }
.pill-cepat                { background: rgba(43,111,209,0.13); color: var(--st-jadwal-cepat); }
.pill-on_schedule           { background: rgba(31,168,90,0.12); color: var(--st-jadwal-ontime); }
.pill-terlambat             { background: rgba(221,154,43,0.16); color: var(--st-jadwal-late); }
.pill-terlambat_percepatan  { background: rgba(229,83,75,0.14); color: var(--st-jadwal-percepatan); }
.pill-kritis                { background: rgba(155,28,28,0.15); color: var(--st-jadwal-kritis); }
.pill-sangat_terlambat      { background: rgba(229,83,75,0.14); color: var(--st-jadwal-verylate); }

/* ---------- Chart panel: Kurva S + Perhatian berdampingan ---------- */
.chart-wrap { padding: 18px; display: flex; align-items: flex-start; gap: 26px; }

/* Panel grafik tunggal (Rencana vs Realisasi Mingguan, Kumulatif & Deviasi) */
.mini-chart-wrap { padding: 18px; height: 260px; position: relative; }

.kurva-s-col { flex: 1; min-width: 0; }
.kurva-s-col .upt-progress-title { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.kurva-s-canvas-wrap { position: relative; width: 100%; height: 260px; }
.kurva-s-info { font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.kurva-s-info b { color: var(--text); }

/* Kolom "Perhatian" -- rangkuman isu terbuka, temuan K3, stok menipis, dst.
   Menggantikan donut Ringkasan Status lama, meniru gaya kotak "Perhatian"
   pada program T-PRO. */
.perhatian-col { flex-shrink: 0; width: 280px; border-left: 1px solid var(--border); padding-left: 24px; }
.perhatian-col .upt-progress-title { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.perhatian-list { display: flex; flex-direction: column; gap: 8px; }
.perhatian-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
    padding: 10px 12px; font-size: 12.5px; color: var(--text); text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
a.perhatian-row:hover { border-color: var(--accent); background: var(--accent-tint); }
.perhatian-row-label { display: flex; align-items: center; gap: 8px; }
.perhatian-row-chevron { color: var(--muted); font-size: 13px; }
.perhatian-badge {
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 700; background: var(--surface); color: var(--muted); border: 1px solid var(--border);
}
.perhatian-badge.attn { background: rgba(221,154,43,0.16); color: #A9711A; border-color: #DD9A2B66; }
.perhatian-badge.danger { background: rgba(229,83,75,0.14); color: #C43D35; border-color: #E5534B66; }

@media (max-width: 700px) { .chart-wrap { flex-direction: column; } .perhatian-col { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 16px; width: 100%; } }

/* ---------- Selektor "Data Minggu ke" ---------- */
.periode-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 11px 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.periode-bar-label { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.periode-bar-sub { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.periode-select {
    font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; min-width: 260px;
    cursor: pointer;
}
@media (max-width: 700px) { .periode-select { min-width: 0; width: 100%; } }

/* ---------- Data Umum Proyek ---------- */
.proyek-info-panel { margin-bottom: 16px; }
.proyek-info-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 24px;
    padding: 18px;
}
@media (max-width: 980px) { .proyek-info-grid { grid-template-columns: repeat(2, 1fr); } }
.proyek-info-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pi-label { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; color: var(--muted); text-transform: uppercase; }
.pi-value { font-size: 13px; font-weight: 600; color: var(--text); }

.today-date {
    font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--accent);
    background: var(--accent-tint); padding: 6px 12px; border-radius: 20px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
    max-width: 420px;
}
.today-date-sep { opacity: 0.4; }
#todayHijri { color: var(--muted); font-weight: 600; }
@media (max-width: 700px) { .today-date { max-width: 220px; justify-content: flex-start; } }

/* ---------- Perbaikan topbar HP: badge tanggal sempat "flex-wrap: wrap"
   dari aturan .today-date umum di atas, sehingga di HP badge pecah jadi
   3 baris dan mendorong tombol tema/ganti-password/Keluar sampai keluar
   layar (tidak pas layar). Kunci di sini supaya SELALU 1 baris + geser
   ke samping, dan kecilkan gap/ukuran tombol supaya semuanya pasti muat. */
@media (max-width: 900px) {
    .topbar { padding: 10px 12px; gap: 6px; }
    .topbar-right { gap: 6px; }
    .container { padding: 12px; }
    .today-date {
        flex-wrap: nowrap !important;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        max-width: 32vw;
        scrollbar-width: none;
    }
    .today-date::-webkit-scrollbar { display: none; }
    .btn-theme-toggle, #btnGantiPassword { width: 30px; height: 30px; flex-shrink: 0; }
    .btn-logout { padding: 7px 10px; font-size: 11.5px; flex-shrink: 0; white-space: nowrap; }
}
@media (max-width: 480px) {
    .page-title { font-size: 14px; }
    .today-date { max-width: 28vw; font-size: 9.5px; padding: 4px 7px; gap: 3px; }
    .btn-hamburger { width: 32px; height: 32px; margin-right: 4px; }
}

/* ---------- Galeri foto pekerjaan (filmstrip horizontal) ---------- */
.panel-head-link { font-size: 11px; font-weight: 600; color: var(--accent); text-decoration: none; }
.panel-head-link:hover { text-decoration: underline; }
.photo-strip {
    display: flex; gap: 12px; overflow-x: auto; padding: 16px 18px 20px;
    scroll-snap-type: x proximity;
}
.photo-strip-item {
    flex-shrink: 0; width: 190px; scroll-snap-align: start;
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    background: var(--surface-2); box-shadow: var(--shadow-sm);
}
.photo-strip-item img { width: 190px; height: 130px; object-fit: cover; display: block; background: var(--border); }
.photo-strip-caption { padding: 8px 10px; }
.photo-strip-caption .ps-upt { display: block; font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--accent); }
.photo-strip-caption .ps-judul { display: block; font-size: 12px; color: var(--text); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-strip::-webkit-scrollbar { height: 8px; }
.photo-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ---------- Modal / detail drawer ---------- */
.overlay {
    position: fixed; inset: 0; background: rgba(16,20,26,0.55);
    display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px;
}
.overlay.open { display: flex; }
.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 560px; max-width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
}
.modal-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: flex-start;
}
.modal-head h3 { font-size: 16px; font-weight: 700; color: var(--text); }
.modal-head span { font-family: var(--sans); font-weight: 600; font-size: 11px; color: var(--accent); }
.modal-close { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; }
.modal-body { padding: 18px 22px; }
/* Modal ID Card: beri ruang ekstra supaya kartu (85.6mm ≈ 324px) selalu
   tampil utuh di layar tanpa perlu di-scroll dulu di kebanyakan layar. */
.modal-idcard { max-height: 96vh; }
.modal-idcard .modal-body { display: flex; flex-direction: column; align-items: center; }
/* Modal daftar/scan wajah: dulu lebar dipatok 420px lewat inline style tanpa
   batas aman, jadi di HP sempit modal lebih lebar dari layar dan harus
   digeser ke samping untuk melihat judul/tombolnya. max-width pakai vw
   supaya selalu ada sedikit jarak aman ke tepi layar berapa pun lebarnya. */
.modal-enroll { width: 420px; max-width: min(420px, 92vw); }
.detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13px; color: var(--text); }
.detail-row span:first-child { color: var(--muted); }
.timeline { margin-top: 16px; }
.timeline-item { padding: 10px 0 10px 16px; border-left: 2px solid var(--border); position: relative; font-size: 13px; color: var(--text); }
.timeline-item::before {
    content: ''; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.timeline-item .t-time { color: var(--muted); font-size: 11px; font-family: var(--sans); }
.timeline-item .t-oleh { color: var(--accent); font-weight: 600; }

.empty { padding: 30px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------- Pratinjau & Unduh PDF (laporan.php) ----------
   Modal lebar untuk pratinjau PDF hasil export (jsPDF + html2canvas), meniru
   pola modal "Pratinjau PDF" di aplikasi T-PRO: judul + tombol Unduh PDF di
   kanan atas, viewer PDF di tengah, tombol Tutup. Lihat assets/js/laporan_pdf_export.js
   untuk cara PDF-nya disusun (landscape otomatis per-halaman berdasarkan
   class .report-doc-landscape, tidak bergantung pada dialog cetak browser
   yang terbukti tidak reliable untuk orientasi campuran). */
.modal-pdf-preview { width: min(1100px, 96vw); max-height: 92vh; display: flex; flex-direction: column; }
.modal-pdf-preview .modal-head { align-items: center; gap: 12px; flex-wrap: wrap; }
.modal-pdf-preview .modal-head-actions { display: flex; gap: 8px; align-items: center; }
.modal-pdf-preview .modal-body { padding: 0; flex: 1; display: flex; background: #525659; border-radius: 0 0 12px 12px; overflow: hidden; }
.modal-pdf-preview .modal-body iframe { width: 100%; height: 78vh; border: none; background: #525659; }
.modal-pdf-preview .pdf-export-progress { padding: 40px 20px; text-align: center; color: #fff; font-size: 13px; width: 100%; }
.btn-pdf-download { background: #fff; color: var(--accent); border: 1px solid var(--accent); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- ID Card (ukuran fisik tetap CR-80 potret: 53.98mm x 85.60mm) ---------- */
/* Latar kartu memakai file template asli: assets/img/id-card-kai-properti-bg.png
   (disalin dari id-card-kai-Properti.png dengan nama & NIP contoh dihapus/
   dihaluskan, supaya bisa dipakai ulang untuk semua personel). Posisi foto
   & teks di bawah ini diukur langsung dari koordinat piksel file tersebut. */
.id-card {
    position: relative;
    width: 53.98mm; height: 85.60mm;
    border-radius: 3mm;
    overflow: hidden;
    background-image: url("../img/id-card-kai-properti-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    box-shadow: var(--shadow-md);
    font-family: var(--sans);
    -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact;
}

.id-card-photo-wrap {
    position: absolute; left: 7.85mm; top: 19.1mm;
    width: 37.3mm; height: 37.3mm;
    z-index: 3;
}
.id-card-photo {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    background: #10163a; display: block;
}
.id-card-photo-fallback {
    width: 100%; height: 100%; border-radius: 50%;
    background: #364784;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sans); font-weight: 700; font-size: 9mm; color: #fff;
}

.id-card-bottom {
    position: absolute; left: 0; right: 0; top: 59.3mm;
    padding: 0 3mm;
    text-align: center;
}
.id-card-name { font-size: 3.3mm; font-weight: 800; letter-spacing: 0.1mm; color: #181818; text-transform: uppercase; line-height: 1.25; }
.id-card-nippm { font-size: 2.8mm; font-weight: 700; color: #181818; margin-top: 1.8mm; }
.id-card-meta { margin-top: 2.8mm; font-size: 2.15mm; color: #6B7492; }

/* ---------- ID Card — sisi belakang (nilai inti CITAR) ---------- */
.id-card-back {
    position: relative;
    width: 53.98mm; height: 85.60mm;
    border-radius: 3mm;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: var(--shadow-md);
    font-family: var(--sans);
    background: linear-gradient(160deg, #2A356E 0%, #1F2755 55%, #171E45 100%);
    -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact;
}
.id-card-back .id-card-logos { padding: 3mm 3.2mm 0; }
.id-card-back-citar {
    text-align: center; margin-top: 2.6mm;
    font-size: 8.2mm; font-weight: 900; letter-spacing: 0.6mm;
    color: #fff; line-height: 1; font-style: italic;
}
.id-card-back-citar .accent { color: #E76B25; }
.id-card-back-subtitle {
    text-align: center; font-size: 1.7mm; font-weight: 600; letter-spacing: 0.15mm;
    color: #B9C0DD; margin-top: 1.4mm; padding: 0 4mm; line-height: 1.3;
}
.id-card-back-body { display: flex; flex-direction: column; gap: 1.7mm; margin-top: 3.2mm; padding: 0 3.4mm; }
.id-card-back-row { display: flex; gap: 1.8mm; align-items: flex-start; }
.id-card-back-letter { font-size: 5mm; font-weight: 900; font-style: italic; color: #E76B25; line-height: 1; width: 5mm; flex-shrink: 0; }
.id-card-back-def { flex: 1; min-width: 0; }
.id-card-back-def b { display: block; font-size: 2.15mm; color: #fff; font-weight: 800; }
.id-card-back-def span { display: block; font-size: 1.55mm; color: #B9C0DD; line-height: 1.28; margin-top: 0.3mm; }
.id-card-back-footer {
    position: absolute; left: 0; right: 0; bottom: 2.8mm;
    display: flex; justify-content: space-between; align-items: flex-end; padding: 0 3.4mm;
}
.id-card-back-access { font-size: 3mm; font-weight: 900; font-style: italic; color: #E76B25; line-height: 1; }
.id-card-back-access small { display: block; font-size: 1.4mm; font-weight: 700; font-style: normal; color: #fff; letter-spacing: 0.2mm; margin-top: 0.4mm; }
.id-card-back-url { font-size: 1.9mm; color: #B9C0DD; font-weight: 600; }
.id-card-sheet-label { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); margin: 14px 0 6px; letter-spacing: 0.3px; text-transform: uppercase; }
.id-card-sheet-label:first-child { margin-top: 0; }

@media print {
    body * { visibility: hidden; }
    #idCardPrintHost, #idCardPrintHost * { visibility: visible; }
    #idCardPrintHost {
        display: flex !important;
        flex-direction: column; align-items: center;
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        margin: 0; padding: 10mm 0 0;
    }
    .id-card, .id-card-back { box-shadow: none; border: none; }
    .id-card-sheet-label { display: none; }
    .id-card-page { page-break-after: always; }
    .id-card-page:last-child { page-break-after: auto; }
    @page { size: auto; margin: 8mm; }
}
/* Kartu duplikat ini hanya dipakai sebagai sumber cetak (lihat printIdCard() di
   personel.js) — selalu disembunyikan di layar, ditaruh langsung di <body>
   supaya tidak pernah ikut ke-clip oleh .modal (overflow-y:auto) saat dicetak. */
#idCardPrintHost { display: none; }

/* =========================================================
   Cetak Daftar Personel (portrait) — tabel No/NIPPM/Nama/Jabatan/UPT/TTL,
   dipakai hanya saat print (lihat cetakDaftarPersonel() di personel.js).
   Host ditaruh langsung di <body>, di luar .container, dengan pola isolasi
   print yang sama seperti #idCardPrintHost / #ganttPrintArea di atas.
   ========================================================= */
#personelListPrintHost { display: none; }
.pl-wrap, .pl-wrap * { -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact; }
.pl-wrap { font-family: var(--sans); color: #17202B; padding: 10mm 12mm; box-sizing: border-box; }
.pl-head { display: flex; align-items: center; gap: 14px; text-align: left; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid #1F2755; }
.pl-head img { height: 42px; width: auto; display: block; flex-shrink: 0; }
.pl-head-text h1 { font-size: 15px; margin: 0 0 2px; }
.pl-head-text .pl-sub { font-size: 11px; color: #4B5563; margin: 0; }
.pl-meta { display: flex; justify-content: space-between; font-size: 10.5px; color: #4B5563; margin: 8px 0 10px; }
.pl-table { border-collapse: collapse; table-layout: fixed; width: 100%; border: 1px solid #9AA3AE; }
.pl-table th, .pl-table td { border-bottom: 1px solid #C7CDD6; border-right: 1px solid #C7CDD6; box-sizing: border-box; padding: 5px 6px; font-size: 9.5px; word-break: break-word; }
.pl-table th:last-child, .pl-table td:last-child { border-right: none; }
.pl-table thead th { background: #EDEFF3; font-weight: 700; text-align: left; border-top: 1px solid #9AA3AE; }
.pl-table td.pl-no { text-align: center; font-weight: 600; }
.pl-table td.pl-nama { font-weight: 600; white-space: normal; }
.pl-table .pl-ket { font-weight: 400; font-size: 9px; color: #6B7280; margin-top: 1px; white-space: normal; }
.pl-table tbody tr:nth-child(even) td { background: #FAFBFC; }
.pl-table tr { page-break-inside: avoid; break-inside: avoid; }
.pl-table thead { display: table-header-group; }

@media print {
    body * { visibility: hidden; }
    #personelListPrintHost, #personelListPrintHost * { visibility: visible; }
    #personelListPrintHost {
        display: block !important;
        position: absolute; left: 0; top: 0; width: 100%; margin: 0;
    }
}

/* ---------- Gantt Chart masterplan (custom, tree kiri + garis waktu kanan) ---------- */
.mgantt-scroll { overflow-x: auto; max-width: 100%; }
.mgantt-grid { display: grid; position: relative; }
.mg-cell { border-bottom: 1px solid var(--border); box-sizing: border-box; }
.mg-corner { position: sticky; left: 0; top: 0; z-index: 3; background: var(--surface-2); height: 44px; border-right: 1px solid var(--border); display: flex; align-items: center; padding-left: 14px; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.mg-sticky { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.mg-header { position: relative; background: var(--surface-2); overflow: hidden; }
.mg-month-row { position: relative; height: 20px; border-bottom: 1px solid var(--border); }
.mg-month { position: absolute; top: 0; height: 20px; line-height: 20px; font-size: 11px; font-weight: 600; color: var(--text); padding-left: 6px; border-left: 1px solid var(--border); box-sizing: border-box; white-space: nowrap; overflow: hidden; }
.mg-date-row { position: relative; height: 24px; }
.mg-date { position: absolute; top: 0; height: 24px; line-height: 24px; font-size: 10px; color: var(--muted); font-family: var(--mono); border-left: 1px solid var(--border); padding-left: 4px; box-sizing: border-box; }
.mg-tree { display: flex; align-items: center; gap: 6px; padding-right: 10px; border-right: 1px solid var(--border); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.mg-group-tree { font-weight: 700; }
.mg-tree-item { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; white-space: normal; }
.mg-tree-line1 { display: flex; align-items: center; gap: 6px; width: 100%; overflow: hidden; }
.mg-tree-line1 .mg-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.mg-tree-line2 { font-size: 10px; padding-left: 17px; }
.mg-tree-line2 b { font-size: 10px; font-weight: 700; }
.mg-toggle { cursor: pointer; color: var(--muted); font-size: 10px; width: 12px; flex-shrink: 0; user-select: none; }
.mg-toggle-spacer { width: 12px; flex-shrink: 0; }
.mg-label { overflow: hidden; text-overflow: ellipsis; }

/* Baris rincian item BOQ (breakdown Material Jaringan LAA / Bahan Pendukung
   Habis Pakai) -- indentasi level 3 di bawah item pekerjaan (kelompok). */
.mg-tree-child { color: var(--muted); font-size: 12px; }
.mg-tree-child .mg-label { flex-shrink: 0; max-width: 60%; }
.mg-bar-child { top: 10px; height: 14px; opacity: 0.85; border-color: var(--muted); color: var(--muted); }

/* Kolom R (Rencana) & A (Aktual) -- terpisah dari nama pekerjaan supaya tidak
   membingungkan, tetap sticky di kiri (ikut nempel saat scroll horizontal). */
.mg-corner-ra { display: flex; align-items: center; justify-content: center; padding-left: 0; font-size: 11.5px; font-weight: 700; color: var(--muted); cursor: default; }
.mg-ra-col { display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid var(--border); font-family: var(--mono); cursor: default; }
.mg-ra-col .mg-ra-val { font-size: 12px; font-weight: 700; }
.mg-ra-col-r .mg-ra-val { color: var(--muted); }
.mg-ra-col-a .mg-ra-val { color: var(--text); }
.mg-timeline { position: relative; }
.mg-alt { background: var(--surface-2); }
.mg-bar { position: absolute; top: 6px; height: 22px; border-radius: 5px; overflow: hidden; cursor: pointer; display: flex; align-items: center; }
.mg-bar-group { background: var(--muted); opacity: 0.35; border-radius: 3px; cursor: default; }
.mg-bar-progress { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,0.35); }
.mg-bar-tag { position: relative; font-size: 9px; font-weight: 800; padding-left: 7px; opacity: 0.9; flex-shrink: 0; }
.mg-bar-label { position: relative; font-size: 11px; font-weight: 600; color: #fff; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.mg-planned { background: var(--surface); border: 1.5px dashed currentColor; }
.mg-planned::before { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0.14; }
.mg-planned .mg-bar-label { position: relative; color: inherit; text-shadow: none; }
.mg-ongoing { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); }
.mg-baseline { top: 1px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--text), var(--text) 3px, transparent 3px, transparent 6px); opacity: 0.55; cursor: default; }
/* Bar "R" (Rencana): kotak putus-putus di atas -- selalu tampil kalau jadwal rencana ada. */
.mg-bar-r { top: 12px; height: 13px; background: var(--surface); border: 1.5px dashed currentColor; }
.mg-bar-r::before { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0.14; }
.mg-bar-r .mg-bar-tag, .mg-bar-r .mg-bar-label { position: relative; color: inherit; text-shadow: none; }
.mg-bar-r .mg-bar-label { font-size: 10px; }
/* Bar "A" (Aktual/Realisasi): kotak solid di bawah -- warnanya mengikuti status. */
.mg-bar-a { top: 27px; height: 13px; }
.mg-bar-a .mg-bar-label { font-size: 10px; }
.mg-bar-empty { pointer-events: auto; height: 100%; top: 0; }
.mg-today-line { position: absolute; top: 44px; width: 2px; background: var(--st-tertunda); opacity: 0.6; z-index: 1; pointer-events: none; }
.mgantt-legend-baseline { display: inline-block; width: 20px; height: 4px; margin-right: 6px; vertical-align: middle; background: repeating-linear-gradient(90deg, var(--text), var(--text) 3px, transparent 3px, transparent 6px); opacity: 0.6; }
.mgantt-legend-today { display: inline-block; width: 2px; height: 14px; margin-right: 6px; vertical-align: middle; background: var(--st-tertunda); }
.mgantt-legend-r { display: inline-block; width: 20px; height: 11px; margin-right: 6px; vertical-align: middle; background: var(--surface); border: 1.5px dashed var(--muted); border-radius: 2px; }
.mgantt-legend-a { display: inline-block; width: 20px; height: 11px; margin-right: 6px; vertical-align: middle; background: var(--muted); border-radius: 2px; }
.mono-cell { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-align: center; }

/* ---------- Tabs ---------- */
.tabs {
    display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
    background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 600;
    padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; font-family: var(--sans);
    white-space: nowrap; flex-shrink: 0;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; max-width: 100%; }
.tab-panel.active { display: block; }

/* ---------- Kiosk absensi ---------- */
.kiosk-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
@media (max-width: 900px) { .kiosk-grid { grid-template-columns: 1fr; } }
.kiosk-video-wrap { position: relative; background: #000; aspect-ratio: 4/3; }
.kiosk-video-wrap video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.kiosk-video-wrap canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleX(-1); }
.kiosk-result { padding: 16px 18px; min-height: 140px; }
.kiosk-result.match {
    display: flex; align-items: center; gap: 14px;
}
.kiosk-result .scan-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); }
.kiosk-result .scan-name { font-size: 16px; font-weight: 700; color: var(--text); }
.kiosk-result .scan-event { font-size: 13px; color: var(--accent); margin-top: 2px; font-weight: 600; }
.kiosk-log { max-height: 220px; overflow-y: auto; padding: 6px 18px 16px; }
.kiosk-log-item { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 12px; color: var(--text); }
.kiosk-log-item .t-time { color: var(--muted); font-family: var(--sans); }

/* ---------- Laporan cetak ---------- */
#reportContainer, #rabReportContainer, #bulananReportContainer, #suratJalanReportContainer { max-width: 900px; margin: 0 auto; padding: 0 24px 40px; overflow-x: hidden; }
/* Tabel dengan banyak kolom (mis. rekap absensi bulanan, bisa sampai 31 kolom
   tanggal) dibungkus wrapper ini supaya di layar (terutama HP) tabel yang
   lebar hanya di-scroll di dalam kartunya sendiri, tidak mendorong seluruh
   halaman melebar ke samping. Saat cetak, wrapper ini dikembalikan ke
   overflow visible supaya semua kolom tetap tercetak penuh di kertas. */
.report-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.report-doc {
    background: #fff; color: #1a1a1a; border-radius: 8px;
    padding: 36px 40px; font-family: var(--sans); font-size: 13px; line-height: 1.5;
    box-shadow: var(--shadow-sm); border: 1px solid var(--border);
}
.report-doc h1 { font-size: 18px; margin-bottom: 2px; }
.report-doc .report-sub { font-size: 12px; color: #555; margin-bottom: 4px; }
.report-doc .report-meta { font-size: 11px; color: #777; margin-bottom: 20px; }
.report-head { border-bottom: 2px solid #1a1a1a; padding-bottom: 12px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; }
.report-section { margin-bottom: 22px; }
.report-section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid #ddd; padding-bottom: 6px; margin-bottom: 10px; color: #1a1a1a; }
.report-doc table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 4px; }
.report-doc th { text-align: left; background: #f2f2f2; padding: 6px 8px; border: 1px solid #ddd; font-size: 11px; }
.report-doc td { padding: 6px 8px; border: 1px solid #ddd; }
.report-doc .kv-grid { display: grid; grid-template-columns: 160px 1fr; gap: 4px 10px; font-size: 12px; }
.report-doc .kv-grid div:nth-child(odd) { color: #666; }
.report-signature { display: flex; justify-content: flex-end; margin-top: 40px; }
.report-signature .sig-box { text-align: center; width: 220px; }
.report-signature .sig-line { border-top: 1px solid #333; margin-top: 60px; padding-top: 6px; font-size: 12px; }
.report-badge { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 4px; background: #eee; color: #333; }

/* Cetak "Semua Lokasi": beberapa lokasi digabung jadi 1 dokumen tanpa kop/letterhead
   berulang per lokasi -- pembatasnya cukup label ringkas + status per lokasi. */
.report-loc-divider { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #333; font-size: 12.5px; font-weight: 700; color: #1a1a1a; }
.report-loc-divider .report-loc-wilayah { font-size: 11px; font-weight: 400; color: #666; text-transform: none; }
.report-loc-divider:first-child { margin-top: 0; }

@media print {
    body * { visibility: hidden; }
    #appShellNoPrint { display: none !important; }
    #reportContainer, #reportContainer *,
    #rabReportContainer, #rabReportContainer *,
    #boqReportContainer, #boqReportContainer *,
    #bulananReportContainer, #bulananReportContainer *,
    #suratJalanReportContainer, #suratJalanReportContainer * { visibility: visible; }
    #reportContainer, #rabReportContainer, #boqReportContainer, #bulananReportContainer, #suratJalanReportContainer { position: absolute; top: 0; left: 0; right: 0; max-width: 100%; padding: 0; margin: 0; overflow-x: visible; }
    .report-doc { border-radius: 0; padding: 10mm; box-shadow: none; border: none; }
    .report-table-scroll { overflow-x: visible; }
    /* Setiap dokumen (per hari/minggu/bulan saat cetak rentang waktu) mulai di halaman baru. */
    .report-doc + .report-doc { page-break-before: always; break-before: page; }
}
/* Orientasi default: potret untuk semua jenis laporan cetak. Halaman #printOrientationStyle
   di laporan.php meng-override rule ini ke landscape khusus saat mencetak Gantt Chart
   (lihat laporan.js#setPrintOrientation). */
@media print { @page { size: portrait; margin: 8mm; } }

/* Tabel Prestasi Pekerjaan dicetak landscape (tabelnya sangat lebar -- 14 kolom) supaya
   tulisan tidak terlalu kecil, meskipun dokumen lain dalam rangkaian cetak yang sama
   (Laporan Mingguan, Rekap Kurva S) tetap potret. Ini dicapai lewat CSS Paged Media
   ("page" property + @page bernama) -- BUKAN lewat setPrintOrientation() JS, karena
   @page biasa berlaku untuk seluruh dokumen cetak, tidak bisa di-scope per elemen. */
@media print {
    .report-doc-landscape { page: reportLandscape; }
    @page reportLandscape { size: landscape; margin: 8mm; }
}

/* Kurva S -- opsi ukuran kertas A3 (lihat #ukuranKertasKurva di laporan.php &
   kurvaDocClass() di laporan.js): dipakai saat tabel kolom mingguan Kurva S terlalu
   lebar untuk A4 sehingga sebagian kolom/tulisan terpotong saat dicetak. Class
   "report-doc-a3" ditambahkan BERBARENGAN dengan "report-doc-landscape" (bukan
   pengganti), jadi selector di bawah ini sengaja dibuat lebih spesifik (2 class)
   supaya menang atas rule ".report-doc-landscape { page: reportLandscape }" di atas
   tanpa bergantung pada urutan CSS. Lebar halaman bertambah (A3 landscape = 420mm,
   vs A4 landscape = 297mm) tapi font-size tabel TIDAK berubah -- hasilnya kolom
   mingguan otomatis lebih lega karena tabel di dalamnya width:100% (lihat
   ".report-doc table" di atas), bukan lebar tetap. */
@media print {
    .report-doc-a3.report-doc-landscape { page: reportLandscapeA3; }
    @page reportLandscapeA3 { size: 420mm 297mm; margin: 8mm; }
}

/* ---------- Kop surat / kepala laporan cetak (kop, data umum proyek, ttd) ---------- */
.report-doc, .report-doc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact; }

.report-kop { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 3px solid var(--accent); }
.report-kop img { height: 44px; object-fit: contain; }
.report-kop-title { flex: 1; text-align: center; }
.report-kop-title h1 { font-size: 16.5px; letter-spacing: 0.3px; color: var(--accent); text-transform: uppercase; margin: 0; }
.report-kop-title .sub { font-size: 11.5px; color: #555; margin-top: 3px; }

.report-titlebar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 16px 0 16px; padding-bottom: 10px; border-bottom: 1px solid #ccc; }
/* Judul dokumen di bawah kop (mis. "Laporan Mingguan Proyek -- Seluruh Lokasi" /
   "Tabel Prestasi Pekerjaan -- Kumulatif Seluruh Lokasi") sengaja dibuat lebih kecil
   dari judul kop kapital (.report-kop-title h1, 16.5px) supaya hierarki kop tetap
   paling menonjol di halaman. */
.report-titlebar .doc-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: #1a1a1a; }
.report-titlebar .doc-meta { font-size: 11px; color: #777; margin-top: 2px; }
.report-titlebar .doc-wilayah { font-size: 11px; font-weight: 600; color: #555; white-space: nowrap; }

.status-pill { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 4px 13px; border-radius: 20px; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; }
.status-pill.st-ontime  { background: #E6F6EC; color: #158A46; border: 1px solid #1FA85A66; }
.status-pill.st-lambat  { background: #FDECEC; color: #C43D35; border: 1px solid #E5534B66; }
.status-pill.st-progress{ background: #FFF6E5; color: #A9711A; border: 1px solid #DD9A2B66; }
.status-pill.st-selesai { background: #E9EBF4; color: #1F2755; border: 1px solid #1F275566; }
.status-pill.st-belum   { background: #F1F2F4; color: #5B636B; border: 1px solid #97A2AD66; }

.report-info-box { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; margin-bottom: 22px; font-size: 12px; }
.report-info-box .info-row { display: grid; grid-template-columns: 118px 10px 1fr; padding: 3px 0; }
.report-info-box .info-row > b { font-weight: 700; color: #333; }
.report-info-box .info-row > span:last-child { color: #333; }
.detail-info-box .info-row { display: grid; grid-template-columns: 150px 10px 1fr; padding: 5px 0; font-size: 13px; border-bottom: 1px dashed var(--line); }
.detail-info-box .info-row:last-child { border-bottom: none; }
.detail-info-box .info-row > b { font-weight: 600; color: var(--muted); }

/* Modal Pemberkasan Karyawan (KTP/KK/Ijazah/dll) -- personel.php */
.berkas-slot-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.berkas-slot-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.berkas-slot-row .berkas-icon { font-size: 18px; flex-shrink: 0; }
.berkas-slot-info { flex: 1; min-width: 0; }
.berkas-slot-info .berkas-label { font-weight: 600; font-size: 13px; }
.berkas-slot-info .berkas-meta { font-size: 11px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.berkas-slot-info .berkas-meta.berkas-kosong { color: var(--muted); font-style: italic; }
.berkas-slot-actions { display: flex; gap: 4px; flex-shrink: 0; }
.berkas-lainnya-head { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.berkas-lainnya-head b { font-size: 13px; }

/* CATATAN PENTING (bug "teks header rusak/hilang" saat Cetak PDF, No/Uraian
   Pekerjaan/Satuan/Persen(%) blank navy tanpa teks): sebelumnya ada aturan
   `.report-doc table thead tr { background: var(--accent); }` di sini. Background
   itu SEPENUHNYA redundan karena setiap <th> di bawah sudah punya background yang
   persis sama (baris berikut) -- jadi tidak ada bedanya di rendering browser biasa.
   TAPI saat dirasterisasi lewat html2canvas (lihat assets/js/laporan_pdf_export.js),
   <tr> header kedua ikut dicat sebagai kotak solid setinggi barisnya sendiri, dan
   kotak itu menimpa teks sel <th rowspan="2"/"3"> (No, Uraian Pekerjaan, Satuan,
   Persen (%), R/A, dst) yang secara visual menjorok/vertical-align:middle ke area
   baris kedua tsb -- sehingga teksnya "hilang" tertutup warna navy di hasil cetak,
   padahal border & warna latarnya tetap tampak benar. Aturan `thead tr` background
   ini SENGAJA DIHAPUS (bukan cuma dikomentari) untuk memperbaikinya -- JANGAN
   ditambahkan lagi tanpa menguji ulang Cetak PDF pada tabel yang memakai rowspan
   header (Rencana & Realisasi, Tabel Prestasi, Kurva S Detail, dan versi
   gabungannya). */
.report-doc table thead th { background: var(--accent); color: #fff; border: 1px solid rgba(255,255,255,0.55); text-align: center; }
.report-doc table tfoot td { font-weight: 700; background: #f4f4f7; }
.report-doc table tbody tr.row-total { font-weight: 700; background: #f4f4f7; }

.sig-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; text-align: center; }
.sig-grid3 .sig-top-label { font-size: 11.5px; color: #333; }
.sig-grid3 .sig-perusahaan { font-size: 11.5px; font-weight: 700; color: #333; margin-top: 4px; }
.sig-grid3 .sig-jabatan { font-size: 11.5px; color: #555; margin-top: 1px; }
.sig-grid3 .sig-space { height: 50px; }
.sig-grid3 .sig-placeholder { font-size: 11.5px; color: #888; }
.sig-grid3 .sig-underline { border-top: 1px solid #333; width: 75%; margin: 4px auto 0; }
.sig-grid3 .sig-nipp { font-size: 11.5px; color: #333; margin-top: 4px; }


.report-empty-note { padding: 10px 12px; font-size: 12px; color: #777; background: #fafafa; border: 1px dashed #ddd; border-radius: 6px; }

/* ---------- Laporan Mingguan (gaya T-PRO): tabel Rencana&Realisasi, Rekap Kurva S, Tabel Prestasi ---------- */
.report-doc table.tbl-compact { font-size: 8.6px; table-layout: fixed; }
.report-doc table.tbl-compact th, .report-doc table.tbl-compact td { padding: 3px 4px; word-break: break-word; }
.report-doc table.tbl-compact th { font-size: 8.2px; vertical-align: middle; text-align: center; }
.report-doc table.tbl-compact td:nth-child(2) { text-align: left; }
.report-doc table.tbl-compact th.col-group, .report-doc table.tbl-compact td.col-group { border-left: 2px solid #cfd3e6; }
.report-doc table.tbl-compact th.num, .report-doc table.tbl-compact td.num { text-align: right; }
.report-doc table.tbl-realisasi td:nth-child(1) { text-align: left; }
.report-doc table tbody tr.row-current { background: #EEF1FB; font-weight: 700; }
/* Baris sekat lokasi di dalam tabel gabungan (Rencana&Realisasi / Tabel Prestasi Seluruh
   Lokasi) -- menggantikan .report-loc-divider versi lama (div terpisah di luar tabel)
   supaya sekat + status per lokasi tetap jadi 1 baris tabel yang ikut aturan cetak
   (page-break, header berulang) seperti baris lainnya. */
.report-doc table.tbl-compact td.loc-divider { text-align: left; padding: 5px 6px; background: #eef1fb; }
.report-doc table.tbl-compact td.loc-divider .report-loc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 9.5px; font-weight: 700; color: #1a1a1a; }
.report-doc table.tbl-compact td.loc-divider .status-pill { font-size: 7.8px; padding: 2px 8px; }
.report-doc .deviasi-line { display: flex; align-items: center; gap: 10px; font-size: 12.5px; margin: 10px 0 2px; }
.report-doc .deviasi-line b.dev-pos { color: #158A46; }
.report-doc .deviasi-line b.dev-neg { color: #C43D35; }

/* Kurva S detail per item (tabel mingguan W1..Wn, gaya kontraktor/T-PRO) --
   kolom mingguan sangat banyak (durasi proyek berbulan-bulan), jadi font & padding
   dibuat lebih ringkas lagi dibanding .tbl-compact biasa. */
.report-doc table.kurva-detail-table { font-size: 7.6px; }
.report-doc table.kurva-detail-table th, .report-doc table.kurva-detail-table td { padding: 2px 3px; }
.report-doc table.kurva-detail-table tr.kurva-detail-r { page-break-inside: avoid; break-inside: avoid; border-top: 1px solid #e2e4ee; }
.report-doc table.kurva-detail-table tr.kurva-detail-r td, .report-doc table.kurva-detail-table tr.kurva-detail-a td { color: #444; }
.kurva-ra-tag { font-weight: 700; font-size: 7.4px; }
.kurva-ra-tag.kurva-ra-r { color: #333; }
.kurva-ra-tag.kurva-ra-a { color: var(--accent); }
/* Kolom minggu berjalan saat ini ditandai garis putus-putus merah kiri & kanan,
   meniru garis vertikal merah pada contoh laporan referensi (T-PRO). */
.report-doc table.kurva-detail-table th.week-current,
.report-doc table.kurva-detail-table td.week-current { border-left: 1px dashed #C43D35; border-right: 1px dashed #C43D35; background: #FBEEED; }
.report-doc table.kurva-detail-table tfoot td { font-weight: 700; }
.report-doc table.kurva-detail-table tfoot tr.row-total td { background: #f4f4f7; }

/* ---------- Overlay grafik Kurva-S di atas tabel "Detail per Item Pekerjaan" ----------
   Garis Kumulatif Rencana/Realisasi digambar TRANSPARAN menumpang tabel (bukan
   di sampingnya), markernya presisi di kolom minggu tabel (dihitung dari elemen
   <th> minggu yang sudah dirender -- lihat applyKurvaSDetailOverlays() di
   laporan.js). Orientasi & warna disamakan dengan grafik "Kurva S — Rencana vs
   Realisasi" di Dashboard: 0% di bawah, 100% di atas; tinggi gambar dipatok ke
   tinggi <tbody> saja supaya TIDAK menyentuh baris ringkasan "Jumlah/Kumulatif/
   Deviasi" di <tfoot>. Tanpa garis/label sumbu (vertikal maupun horisontal)
   supaya tidak menutupi isi tabel. */
.kurva-detail-wrap { position: relative; }
.kurva-detail-scroll { position: relative; overflow-x: auto; }
.kurva-detail-overlay { position: absolute; inset: 0; pointer-events: none; }
.kurva-overlay-svg { display: block; width: 100%; height: 100%; }
.kurva-overlay-line-r { stroke: #1F2755; stroke-width: 2.4; opacity: 0.85; }
.kurva-overlay-line-a { stroke: #2B6FD1; stroke-width: 2.4; opacity: 0.85; }
.kurva-overlay-dot-r { fill: #1F2755; opacity: 0.9; }
.kurva-overlay-dot-a { fill: #2B6FD1; opacity: 0.9; }
.kurva-detail-legend { display: flex; gap: 16px; font-size: 9px; color: #555; margin-top: 8px; }
.kurva-detail-legend span { display: flex; align-items: center; gap: 5px; }
.kurva-detail-legend i { width: 14px; height: 0; border-top: 2.4px solid; display: inline-block; }
.kurva-detail-legend i.line-r { border-color: #1F2755; }
.kurva-detail-legend i.line-a { border-color: #2B6FD1; }

/* -- Gantt cetak: mini bar rencana/realisasi per baris item -- */
.gantt-print-wilayah { font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-tint); padding: 6px 10px; margin: 16px 0 4px; border-radius: 5px; }
.gantt-print-lokasi { font-size: 12px; font-weight: 700; color: #333; margin: 10px 0 4px; }
.gantt-print-table { width: 100%; border-collapse: collapse; font-size: 10.5px; margin-bottom: 6px; }
.gantt-print-table th { background: #f2f2f2; border: 1px solid #ddd; padding: 5px 6px; font-size: 10px; text-align: left; }
.gantt-print-table td { border: 1px solid #ddd; padding: 5px 6px; vertical-align: middle; }
.gantt-print-bar-track { position: relative; height: 20px; background: #f7f7f9; border-radius: 3px; min-width: 140px; }
.gantt-print-bar { position: absolute; top: 2px; height: 7px; border-radius: 2px; background: #B9C0DD; }
.gantt-print-bar.real { top: 11px; height: 7px; background: var(--accent); opacity: 0.95; }
.gantt-print-legend { display: flex; gap: 18px; font-size: 10.5px; color: #666; margin: 4px 0 12px; }
.gantt-print-legend span { display: inline-flex; align-items: center; gap: 5px; }
.gantt-print-legend i { width: 14px; height: 8px; display: inline-block; border-radius: 2px; }

/* ---------- Bahan Presentasi (PPT) — slide deck cetak, orientasi landscape ---------- */
.slide-page {
    background: #fff; color: #1a1a1a; border-radius: 10px;
    aspect-ratio: 16 / 9; width: 100%; box-sizing: border-box;
    padding: 26px 34px 20px; font-family: var(--sans);
    box-shadow: var(--shadow-sm); border: 1px solid var(--border);
    display: flex; flex-direction: column; overflow: hidden; position: relative;
}
.slide-page + .slide-page { margin-top: 24px; }
.slide-header { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 3px solid var(--accent); margin-bottom: 14px; }
.slide-header img.slide-logo { height: 34px; object-fit: contain; }
.slide-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent); }
.slide-title { font-size: 19px; font-weight: 800; color: #1a1a1a; margin-top: 1px; }
.slide-subtitle { font-size: 11.5px; color: #666; margin-top: 2px; }
.slide-body { flex: 1; min-height: 0; overflow: hidden; font-size: 12px; }
.slide-footer { display: flex; justify-content: space-between; font-size: 9.5px; color: #999; padding-top: 8px; margin-top: auto; border-top: 1px solid #eee; }
.slide-cover { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.slide-cover h1 { font-size: 26px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; margin: 6px 0 0; }
.slide-cover .cover-sub { font-size: 14px; color: #444; font-weight: 600; }
.slide-cover .cover-periode { font-size: 12.5px; color: #777; margin-top: 2px; }
.slide-cover img.cover-logo { height: 56px; object-fit: contain; margin-bottom: 8px; }
.slide-cover .cover-logos { display: flex; align-items: center; gap: 22px; margin-bottom: 6px; }

.slide-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.slide-kv-grid .info-row { display: grid; grid-template-columns: 140px 10px 1fr; padding: 4px 0; font-size: 12px; }
.slide-kv-grid .info-row > b { color: #333; }

.slide-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.slide-stat-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; text-align: center; }
.slide-stat-card .v { font-size: 20px; font-weight: 800; color: var(--accent); }
.slide-stat-card .l { font-size: 10px; color: #777; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.3px; }
.slide-status-row { display: flex; gap: 10px; }
.slide-status-chip { flex: 1; border-radius: 8px; padding: 9px 10px; text-align: center; font-size: 11px; }
.slide-status-chip .v { font-size: 17px; font-weight: 800; display: block; }

.slide-wilayah-bar-row { display: grid; grid-template-columns: 76px 1fr 50px 50px; align-items: center; gap: 10px; padding: 5px 0; font-size: 11px; }
.slide-wilayah-bar-track { position: relative; height: 14px; background: #f0f1f4; border-radius: 4px; overflow: hidden; }
.slide-wilayah-bar-track .b-rencana { position: absolute; top: 0; left: 0; height: 6px; background: #B9C0DD; border-radius: 3px 3px 0 0; }
.slide-wilayah-bar-track .b-real { position: absolute; bottom: 0; left: 0; height: 6px; background: var(--accent); border-radius: 0 0 3px 3px; }

.scurve-wrap { display: flex; gap: 16px; align-items: flex-start; }
.scurve-svg { flex: 1; }
.scurve-legend { font-size: 10.5px; color: #555; display: flex; flex-direction: column; gap: 6px; padding-top: 6px; min-width: 120px; }
.scurve-legend span { display: flex; align-items: center; gap: 6px; }
.scurve-legend i { width: 16px; height: 3px; display: inline-block; border-radius: 2px; }
.scurve-note { font-size: 9.5px; color: #999; margin-top: 6px; font-style: italic; }
.scurve-line-rencana { stroke: #B9C0DD; }
.scurve-line-realisasi { stroke: var(--accent); }
.scurve-dot-realisasi { fill: var(--accent); stroke: #fff; stroke-width: 1; }

.slide-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.slide-table th { background: var(--accent); color: #fff; text-align: left; padding: 5px 7px; font-size: 10px; border: 1px solid var(--accent); }
.slide-table td { padding: 5px 7px; border: 1px solid #ddd; }
.slide-table tbody tr:nth-child(even) { background: #fafafa; }
.slide-table tr.slide-total-row { font-weight: 700; background: #eef0f7 !important; }
.slide-table th.col-group, .slide-table td.col-group { border-left: 2px solid #ccc; }
/* Tabel rapat -- dipakai Slide 4b (Progress Per UPT) supaya SELURUH baris (s.d.
   15 UPT) muat dalam 1 slide saja tanpa keluar dari kertas (lihat permintaan
   revisi di buildSlidesWilayahUpt()/laporan.js). */
.slide-table-compact { font-size: 9px; }
.slide-table-compact th { padding: 3px 5px; font-size: 8.5px; }
.slide-table-compact td { padding: 2.5px 5px; }
/* Tabel lebar kolom TETAP (dipakai Slide Transaksi Material) supaya header
   tidak lagi ikut melebar mengikuti isi terpanjang -- lihat buildTransTable(). */
.slide-table-fixed { table-layout: fixed; }
.slide-table-fixed .col-nowrap-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Kartu grafik gaya "Kelola Kurva S" (dipakai Slide 4 — Presentasi Progress Mingguan) ---- */
.pp-chart-card { background: #fff; border: 1px solid #edeef3; border-radius: 12px; padding: 12px 14px 10px; box-shadow: 0 1px 4px rgba(20,20,40,0.05); }
.pp-chart-card h4 { margin: 0 0 8px; font-size: 11.5px; font-weight: 800; color: #1a1a1a; }
.pp-legend-row { display: flex; justify-content: center; gap: 18px; margin-bottom: 6px; }
.pp-legend-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; color: #555; font-weight: 600; }
.pp-legend-chip .sw { width: 20px; height: 11px; border-radius: 3px; display: inline-block; }
.pp-legend-chip .sw.rencana { background: rgba(91,155,240,0.22); border: 1.5px solid #5B9BF0; }
.pp-legend-chip .sw.realisasi { background: var(--accent); border: 1.5px solid var(--accent); }
.pp-legend-chip .sw.deviasi { background: #E3E6EE; border: 1.5px solid #C7CCDA; }

/* Slide 5 -- Informasi Wilayah: 19 lokasi dalam 1 halaman, grid 5 kolom x 4
   baris (persis 100% tinggi slide-body), tiap kartu overflow:hidden supaya
   TIDAK PERNAH keluar dari kertas walau daftar personelnya panjang -- lihat
   penyesuaian ukuran font otomatis (listFontPx) di buildSlidesInfoWilayah(). */
.slide-personnel-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: 6px; height: 100%; }
.slide-personnel-card { border: 1px solid #e2e4ec; border-radius: 6px; padding: 5px 7px; display: flex; flex-direction: column; overflow: hidden; background: #fff; min-height: 0; }
.slide-personnel-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1em; flex-shrink: 0; }
.slide-personnel-head b { color: var(--accent); }
.slide-personnel-head span { font-size: 0.85em; color: #999; }
.slide-personnel-lokasi { font-size: 0.92em; font-weight: 600; color: #333; margin: 1px 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.slide-personnel-list { list-style: none; margin: 0; padding: 0; overflow: hidden; flex: 1; min-height: 0; }
.slide-personnel-list li { line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slide-personnel-list li span { color: #888; }
.slide-personnel-empty { font-size: 0.9em; color: #aaa; font-style: italic; }

.slide-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slide-photo-grid figure { margin: 0; text-align: center; }
.slide-photo-grid img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; }
.slide-photo-grid figcaption { font-size: 9.5px; color: #666; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hirarki organisasi (Slide 1b), lihat buildSlideHirarki() di laporan.js */
.org-chart { display: flex; flex-direction: column; align-items: center; height: 100%; padding-top: 6px; }
.org-node { border-radius: 8px; text-align: center; }
.org-node.org-root { background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; padding: 10px 22px; }
.org-node.org-root .sub { font-size: 9.5px; font-weight: 500; color: #dfe3f5; margin-top: 2px; }
.org-connector { width: 1.5px; background: #ccc; height: 14px; }
.org-level { display: flex; justify-content: center; gap: 18px; width: 100%; flex: 1; }
.org-wilayah-col { display: flex; flex-direction: column; align-items: center; flex: 1; max-width: 260px; }
.org-node.org-wilayah { background: #eef0f7; border: 1.5px solid var(--accent); color: #1a1a1a; font-size: 11.5px; font-weight: 700; padding: 7px 14px; }
.org-node.org-wilayah .sub { font-size: 9px; font-weight: 500; color: #777; margin-top: 2px; }
.org-upt-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 10px; }
.org-node.org-upt { background: #fff; border: 1px solid #ccd0da; font-size: 9px; font-weight: 700; color: #333; padding: 4px 7px; min-width: 46px; }
.org-node.org-upt .sub { font-size: 7.5px; font-weight: 500; color: #888; margin-top: 1px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Notasi relasi "1 — N" pada garis hubung hirarki (Slide 1b), lihat
   buildSlideHirarki() -- connector1N di laporan.js. */
.org-connector-1n { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 22px; width: auto; background: none; position: relative; }
.org-connector-1n .cn-line { width: 1.5px; flex: 1; background: #ccc; }
.org-connector-1n .cn-label { font-size: 7.5px; font-weight: 800; color: var(--accent); background: #fff; border: 1px solid var(--accent); border-radius: 3px; padding: 0 3px; line-height: 1.3; }
.org-legend-1n { font-size: 8.5px; color: #999; text-align: center; margin-top: 10px; font-style: italic; }

/* Kotak perhatian, dipakai Slide Termin & slide lain yang butuh sorotan */
.slide-alert-box { border: 1px solid #F0C36D; background: #FFF7E6; border-radius: 8px; padding: 9px 12px; font-size: 10.5px; color: #7A5B00; margin-top: 10px; }
.slide-alert-box.ok { border-color: #9FD8B6; background: #EFFAF3; color: #1A6B3D; }
.slide-alert-box b { display: block; margin-bottom: 3px; font-size: 11px; }
.slide-alert-box ul { margin: 4px 0 0; padding-left: 16px; }
.slide-table td.stok-rendah { color: #C43D35; font-weight: 700; }

@media print {
    .slide-page {
        border-radius: 0; box-shadow: none; border: none;
        aspect-ratio: auto; width: 100%; height: 100%;
        page-break-inside: avoid;
    }
    .slide-page + .slide-page { margin-top: 0; page-break-before: always; break-before: page; }
}

/* ---------- Tombol tema gelap/terang ---------- */
.btn-theme-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 7px;
    background: transparent; border: 1px solid var(--border); color: var(--muted);
    cursor: pointer; flex-shrink: 0;
}
.btn-theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Panel-head aksi (mis. tombol edit Data Umum Proyek) ---------- */
.panel-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Kalau tombol/dropdown-nya banyak (mis. panel Stok Alat & Material di
   Inventaris: 2 dropdown + 4 tombol), di layar HP baris ini dulu tidak
   pernah melipat sehingga tombol terakhir kepotong di tepi layar dan
   tidak bisa dipencet sama sekali. Sekarang di bawah 700px baris aksi
   turun jadi baris sendiri penuh selebar panel supaya boleh melipat. */
@media (max-width: 700px) {
    .panel-head-actions { width: 100%; }
}
.btn-edit-inline {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--sans); font-size: 11px; font-weight: 600;
    background: transparent; border: 1px solid var(--border); color: var(--muted);
    padding: 5px 10px; border-radius: 6px; cursor: pointer;
}
.btn-edit-inline:hover { border-color: var(--accent); color: var(--accent); }
.btn-edit-inline svg { width: 12px; height: 12px; }

/* =========================================================
   Tema gelap — override token light untuk seluruh area konten.
   Sidebar & topbar dark tetap sama (sudah gelap secara default).
   ========================================================= */
[data-theme="dark"] {
    --bg:         #10141C;
    --surface:    #171C27;
    --surface-2:  #1E2430;
    --border:     #2B3242;
    --text:       #E7ECF2;
    --muted:      #8992A3;

    --accent-tint:  #232C4A;

    --ink:      #0C0F16;
    --panel:    #171C27;
    --panel-2:  #1E2430;
    --line:     #2B3242;
}
[data-theme="dark"] .sidebar { background: var(--ink); border-right-color: var(--line); }
[data-theme="dark"] .today-date { background: var(--accent-tint); }
[data-theme="dark"] .toast { background: #0C0F16; }

/* ---------- Rencana Pelaksanaan: tree Wilayah > Lokasi > Item Pekerjaan ---------- */
.tree-level1 {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    margin-bottom: 12px; overflow: hidden;
}
.tree-level1 > summary {
    padding: 13px 16px; cursor: pointer; list-style: none; display: flex; align-items: center;
    gap: 14px; flex-wrap: wrap; font-weight: 700; background: var(--surface-2);
}
.tree-level1 > summary::-webkit-details-marker { display: none; }
.tree-level1 > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.tree-level1[open] > summary::before { transform: rotate(90deg); }
.tree-level1-body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 10px; }

.tree-level2 {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.tree-level2 > summary {
    padding: 10px 14px; cursor: pointer; list-style: none; display: flex; align-items: center;
    gap: 12px; flex-wrap: wrap; font-weight: 600; font-size: 13px;
}
.tree-level2 > summary::-webkit-details-marker { display: none; }
.tree-level2 > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.tree-level2[open] > summary::before { transform: rotate(90deg); }

.tree-title { color: var(--text); }
.tree-range { font-size: 11px; color: var(--muted); font-family: var(--mono); margin-left: auto; }
@media (max-width: 900px) { .tree-range { margin-left: 0; } }

.rencana-table { font-size: 12.5px; }
.rencana-table th { font-size: 10px; text-align: center; }
.rencana-table td { text-align: center; vertical-align: middle; }
.rencana-table td:first-child { text-align: left; }
/* Baris rincian item BOQ (breakdown) di tab Rencana Pelaksanaan -- indentasi
   di bawah baris item pekerjaan (kelompok) induknya. */
.rincian-row td { background: var(--surface-2); }
.rincian-row .rincian-label { padding-left: 28px; color: var(--muted); font-weight: 400; font-size: 12px; }
.rencana-input {
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    border-radius: 6px; padding: 4px 6px; font-size: 12px; font-family: var(--mono);
}
.baseline-input {
    border: 1px dashed var(--border); background: var(--surface); color: var(--muted);
    border-radius: 6px; padding: 4px 6px; font-size: 12px; font-family: var(--mono);
}
.baseline-input:focus { color: var(--text); border-style: solid; }
.durasi-cell { font-family: var(--mono); color: var(--muted); }

/* ---------- Laporan Progress: kelompok RAB dapat diciutkan ---------- */
.kelompok-card {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    margin-bottom: 8px; cursor: pointer; transition: border-color .15s;
}
.kelompok-card:hover { border-color: var(--accent); }
.kelompok-card-main { flex: 1; min-width: 0; }
.kelompok-card-main b { display: block; font-size: 13px; color: var(--text); }
.kelompok-card-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.kelompok-card-progress { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.kelompok-card-progress span { font-size: 11px; color: var(--muted); font-family: var(--mono); width: 32px; text-align: right; }
.kelompok-chevron { color: var(--muted); font-size: 16px; flex-shrink: 0; }

/* =========================================================
   Cetak Gantt Chart (landscape) — tabel No / Uraian Pekerjaan /
   Status / Progress R-A / Gantt Chart, dipakai hanya saat print.
   ========================================================= */
.print-only { display: none; }

.pg-wrap, .pg-wrap * { -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact; }
.pg-wrap { font-family: var(--sans); color: #17202B; }
.pg-head { text-align: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid #1F2755; }
.pg-head-logo-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pg-head-logo-row img { height: 42px; width: auto; display: block; }
.pg-head-text { text-align: left; }
.pg-head-text h1 { font-size: 15px; margin: 0 0 2px; }
.pg-head-text .pg-sub { font-size: 11px; color: #4B5563; margin: 0; }
.pg-meta { display: flex; justify-content: space-between; font-size: 10.5px; color: #4B5563; margin: 8px 0 6px; }
.pg-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 10px; color: #4B5563; margin-bottom: 8px; }
.pg-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.pg-legend .pg-leg-ra { display: inline-flex; align-items: center; gap: 6px; }
.pg-legend .pg-swatch-r { display: inline-block; width: 16px; height: 6px; border: 1.2px dashed #17202B; }
.pg-legend .pg-swatch-a { display: inline-block; width: 16px; height: 6px; background: #1F2755; }

.pg-table { border-collapse: collapse; table-layout: fixed; border: 1px solid #9AA3AE; width: auto; }
.pg-table th, .pg-table td { border-bottom: 1px solid #C7CDD6; border-right: 1px solid #C7CDD6; box-sizing: border-box; overflow: hidden; padding: 0; }
.pg-table th:last-child, .pg-table td:last-child { border-right: none; }
.pg-table thead { display: table-header-group; }
.pg-table tr { page-break-inside: avoid; break-inside: avoid; }

.pg-table thead th {
    background: #EDEFF3; font-size: 10.5px; font-weight: 700; box-sizing: border-box;
    text-align: center; padding: 4px 3px; border-top: 1px solid #9AA3AE;
}
.pg-head-row1 th { height: 22px; border-bottom: 1px solid #C7CDD6; }
.pg-timeline-head-cell { position: relative; padding: 0 !important; height: 18px; }
.pg-period-row { position: relative; height: 18px; }
.pg-period { position: absolute; top: 0; height: 18px; line-height: 18px; font-size: 9.5px; font-weight: 600;
    text-align: center; border-left: 1px solid #C7CDD6; box-sizing: border-box; white-space: nowrap; overflow: hidden; }

.pg-table td.pg-no, .pg-table td.pg-uraian, .pg-table td.pg-status, .pg-table td.pg-ra-r, .pg-table td.pg-ra-a {
    padding: 3px 6px; font-size: 10px; text-align: center;
}
.pg-table td.pg-no { font-weight: 600; }
.pg-table td.pg-uraian { text-align: left; white-space: nowrap; text-overflow: ellipsis; }
.pg-table td.pg-status { display: table-cell; }
.pg-status-dot { width: 7px; height: 7px; border-radius: 2px; margin: 0 auto 2px; }
.pg-table td.pg-status .pg-status-label { font-size: 8.5px; font-weight: 700; text-transform: uppercase; }
.pg-table td.pg-ra-r, .pg-table td.pg-ra-a { font-family: var(--mono); font-weight: 700; }
.pg-table td.pg-ra-r { color: #4B5563; }
.pg-table td.pg-ra-a { color: #1F2755; }

.pg-row-lokasi td.pg-uraian { font-weight: 700; }
.pg-row-lokasi td { background: #F6F8FB; }
.pg-row-alt td { background: #FAFBFC; }

.pg-timeline-cell { position: relative; }
.pg-vline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dotted #B8C0CB; }
.pg-baseline { position: absolute; top: 3px; height: 3px; border-radius: 2px;
    background: repeating-linear-gradient(90deg, #17202B, #17202B 3px, transparent 3px, transparent 6px); opacity: 0.55; }
.pg-bar-r, .pg-bar-a {
    position: absolute; height: 13px; border-radius: 4px; box-sizing: border-box; overflow: hidden;
    display: flex; align-items: center;
}
.pg-bar-r { top: 8px; background: var(--surface, #fff); border: 1.2px dashed currentColor; }
.pg-bar-r::before { content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0.16; }
.pg-bar-a { top: 22px; }
.pg-bar-progress { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,0.35); }
.pg-bar-tag { position: relative; font-size: 7px; font-weight: 800; padding-left: 5px; flex-shrink: 0; opacity: 0.9; }
.pg-bar-r .pg-bar-tag, .pg-bar-r .pg-bar-label { color: inherit; }
.pg-bar-a .pg-bar-tag, .pg-bar-a .pg-bar-label { color: #fff; }
.pg-bar-label { position: relative; font-size: 7.5px; font-weight: 600; padding: 0 5px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.pg-today { position: absolute; top: 0; bottom: 0; width: 1px; background: #E5534B; z-index: 1; }

@media print {
    /* Ukuran halaman (landscape) diatur dinamis lewat JS (lihat cetakGanttChart()
       & <style id="printOrientationStyleGantt"> di ganttchart.php) -- BUKAN lewat
       @page bernama di sini, karena teknik "named page" (page:<nama> + @page <nama>)
       terbukti tidak reliable di beberapa versi Chrome saat file CSS-nya dimuat
       lewat http (perilakunya berbeda dari saat dites lewat file://). Menulis ulang
       @page generik (tanpa nama) lewat <style> yang diletakkan setelah stylesheet ini
       jauh lebih konsisten karena cuma mengandalkan urutan cascade biasa. */
    body * { visibility: hidden; }
    #ganttPrintArea, #ganttPrintArea * { visibility: visible; }
    #ganttPrintArea.print-only { display: block; }
    #ganttPrintArea { position: absolute; left: 0; top: 0; width: 100%; }
}

/* =========================================================
   Dashboard — panel tambahan: Kurva S (live), Rencana vs Realisasi
   per Termin, RAB per Kelompok Pekerjaan besar, dan daftar
   keterlambatan pekerjaan (per Wilayah > UPT).
   ========================================================= */
.panel-head-sub { font-size: 11px; color: var(--muted); font-weight: 500; }
.panel-head-desc { padding: 0 18px 14px; font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: -6px; }

/* ---------- Kurva S (live) ---------- */
.scurve-live-wrap { display: flex; gap: 22px; align-items: flex-start; padding: 18px; flex-wrap: wrap; }
.scurve-live-svg { flex: 1 1 480px; min-width: 260px; width: 100%; height: auto; }
.scurve-live-grid { stroke: var(--border); stroke-width: 1; }
.scurve-live-axis-line { stroke: var(--border); stroke-width: 1; }
.scurve-live-axis { fill: var(--muted); }
.scurve-live-rencana { stroke: #B9C0DD; }
[data-theme="dark"] .scurve-live-rencana { stroke: #4C5680; }
.scurve-live-realisasi { stroke: var(--accent); }
[data-theme="dark"] .scurve-live-realisasi { stroke: #8C9BFF; }
.scurve-live-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
[data-theme="dark"] .scurve-live-dot { fill: #8C9BFF; }
.scurve-live-legend { font-size: 11.5px; color: var(--muted); display: flex; flex-direction: column; gap: 8px; min-width: 210px; padding-top: 4px; }
.scurve-live-legend > span { display: flex; align-items: center; gap: 8px; color: var(--text); }
.scurve-live-legend i { width: 18px; height: 3px; display: inline-block; border-radius: 2px; background: var(--muted); flex-shrink: 0; }
.scurve-live-legend b { color: var(--text); }
.scurve-note { font-size: 10.5px; color: var(--muted); font-style: italic; margin-top: 4px; line-height: 1.45; }

/* ---------- Rencana vs Realisasi per Termin ---------- */
.termin-wrap { display: flex; gap: 22px; padding: 6px 18px 18px; flex-wrap: wrap; align-items: flex-start; }
.termin-chart-col { flex: 1 1 300px; min-width: 240px; }
.termin-table-col { flex: 1 1 440px; min-width: 320px; }
#terminTable th, #terminTable td { text-align: right; white-space: nowrap; }
#terminTable th:first-child, #terminTable td:first-child { text-align: left; white-space: normal; }
.termin-draft { color: var(--muted); font-style: italic; font-size: 12px; }

/* ---------- RAB per Kelompok Pekerjaan besar ---------- */
#rabKelompokTable th, #rabKelompokTable td { text-align: right; }
#rabKelompokTable th:first-child, #rabKelompokTable td:first-child { text-align: left; }
#rabKelompokTable td { font-family: var(--mono); font-size: 12px; }
#rabKelompokTable td:first-child { font-family: var(--sans); font-size: 13px; }

/* ---------- Daftar keterlambatan (Wilayah > UPT > Item) ---------- */
.delay-wilayah {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    margin: 0 18px 10px; overflow: hidden;
}
.delay-wilayah:last-child { margin-bottom: 18px; }
.delay-wilayah > summary {
    padding: 12px 16px; cursor: pointer; list-style: none; display: flex; align-items: center;
    gap: 10px; font-weight: 700; background: var(--surface-2);
}
.delay-wilayah > summary::-webkit-details-marker { display: none; }
.delay-wilayah > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.delay-wilayah[open] > summary::before { transform: rotate(90deg); }
.delay-wilayah-count {
    margin-left: auto; font-size: 11px; font-weight: 700; color: var(--st-jadwal-late);
    background: rgba(221,154,43,0.14); padding: 3px 11px; border-radius: 20px; flex-shrink: 0;
}
.delay-upt { border-top: 1px solid var(--border); }
.delay-upt > summary {
    padding: 10px 16px 10px 30px; cursor: pointer; list-style: none; display: flex; align-items: center;
    gap: 10px; font-size: 13px; font-weight: 600;
}
.delay-upt > summary::-webkit-details-marker { display: none; }
.delay-upt > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; margin-right: 2px; }
.delay-upt[open] > summary::before { transform: rotate(90deg); }
.delay-upt-count { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 500; }
.delay-item-row {
    display: flex; align-items: center; gap: 12px; padding: 9px 16px 9px 46px;
    border-top: 1px solid var(--border);
}
.delay-item-name { flex: 1; min-width: 0; color: var(--text); font-size: 12.5px; }
.delay-item-sub { color: var(--muted); font-size: 11px; margin-top: 1px; }
.delay-item-dev { font-family: var(--mono); font-weight: 700; font-size: 12px; width: 46px; text-align: right; flex-shrink: 0; }
.delay-item-dev.c-verylate { color: var(--st-jadwal-verylate); }
.delay-item-dev.c-late { color: var(--st-jadwal-late); }
.delay-empty-note { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------- Modul Inventaris Alat & Material ---------- */
.pill-jenis { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 11px; border-radius: 20px; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; }
.pill-jenis.masuk  { background: #E6F6EC; color: #158A46; border: 1px solid #1FA85A66; }
.pill-jenis.keluar { background: #FFF6E5; color: #A9711A; border: 1px solid #DD9A2B66; }
.pill-kategori { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 5px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.pill-kategori.alat     { background: var(--accent-tint); color: var(--accent); border-color: transparent; }
.pill-kategori.material { background: #FFF6E5; color: #A9711A; border-color: transparent; }
.stok-value { font-weight: 700; }
.stok-value.rendah { color: var(--st-tertunda); }
.stok-rendah-tag { font-size: 10px; color: var(--st-tertunda); font-weight: 600; margin-left: 6px; }
.item-row-remove { background: none; border: none; color: var(--st-tertunda); cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 8px; }

/* ---------- Baris dinamis Tenaga Kerja / Material / Alat (Catatan Harian, gaya TPRO) ---------- */
.dyn-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.dyn-row input { flex: 1; min-width: 0; }
.dyn-row input.dyn-qty { flex: 0 0 90px; }
.dyn-row-remove { background: none; border: none; color: var(--st-tertunda); cursor: pointer; font-size: 15px; line-height: 1; padding: 6px 8px; flex: 0 0 auto; }

/* Kop cetak Surat Jalan: sengaja lebih sederhana dari kop laporan lain --
   hanya logo KAI Properti (tanpa logo PT KAI) + alamat perusahaan di bawah nama,
   sesuai permintaan: "Kop Logo KAI Properti saja, alamat perusahaan". */
.sj-kop { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 3px solid var(--accent); }
.sj-kop img { height: 50px; object-fit: contain; }
.sj-kop-text h1 { font-size: 15.5px; letter-spacing: 0.2px; color: var(--accent); margin: 0; }
.sj-kop-text .sj-alamat { font-size: 11px; color: #555; margin-top: 3px; line-height: 1.4; }
.sj-doctitle { text-align: center; margin: 18px 0 4px; }
.sj-doctitle h2 { font-size: 15px; letter-spacing: 0.5px; text-transform: uppercase; margin: 0; color: #1a1a1a; }
.sj-doctitle .sj-nomor { font-size: 12px; color: #555; margin-top: 2px; }

/* ---------- Tutup Tahun / Reset Tahunan ---------- */
.tt-ringkasan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0 18px 18px; }
.tt-ringkasan-grid .empty { padding: 18px 0; }
.tt-stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.tt-stat-lbl { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.tt-stat-num { font-family: var(--sans); font-size: 19px; font-weight: 700; color: var(--text); }
.tt-tetap-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); background: var(--bg); border: 1px dashed var(--border); border-radius: 8px; padding: 10px 14px; }
@media (max-width: 1100px) { .tt-ringkasan-grid { grid-template-columns: repeat(2, 1fr); } }

.tt-steps { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.tt-step-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tt-step-status { font-size: 12.5px; color: var(--muted); }
.tt-step-status.ok { color: var(--st-selesai); font-weight: 600; }
.tt-step-status.warn { color: var(--st-tertunda); font-weight: 600; }

.tt-riwayat-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border); font-size: 13px; }
.tt-riwayat-row:last-child { border-bottom: none; }
.tt-riwayat-main { min-width: 0; }
.tt-riwayat-title { font-weight: 600; color: var(--text); }
.tt-riwayat-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ---------- Cetak Dokumentasi (Kop + foto per judul pekerjaan, menu Dokumentasi) ---------- */
.dok-judul-block { margin-bottom: 16px; page-break-inside: avoid; break-inside: avoid; }
.dok-judul-title { font-size: 12.5px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }
.dok-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dok-cell { border: 1px solid #ddd; border-radius: 6px; overflow: hidden; background: #fafafa; }
.dok-cell img { width: 100%; height: 160px; object-fit: cover; display: block; }
.dok-cell-empty { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #999; text-align: center; padding: 10px; }
.dok-cell-head { text-align: center; font-size: 10.5px; font-weight: 700; padding: 5px 0; color: #fff; letter-spacing: 0.3px; }
.dok-cell-head.k-0, .dok-cell-head.k-50, .dok-cell-head.k-100 { background: #97A2AD; }