/* =====================================================
 * Nama Folder : public/assets/css
 * Nama File   : style.css
 * Versi File  : 3.0
 * Deskripsi   : Style utama aplikasi — layout sidebar,
 *               login, komponen kartu/tabel/modal/form,
 *               badge, flash message, dan responsive.
 * ===================================================== */

:root {
  --biru: #2563eb; --biru-tua: #1d4ed8; --navy: #0f2a43;
  --bg: #f1f5f9; --teks: #1e293b; --teks-muda: #64748b; --garis: #e2e8f0;
  --putih: #fff; --sukses: #16a34a; --bahaya: #dc2626;
  --radius: 10px; --shadow: 0 1px 3px rgba(15,42,67,.12);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI', system-ui, sans-serif; background:var(--bg); color:var(--teks); font-size:15px; }
a { color:var(--biru); text-decoration:none; }

/* ---------- LOGIN ---------- */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0f2a43 0%,#1d4ed8 100%); padding:20px; }
.login-card { background:var(--putih); border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.3);
  width:100%; max-width:420px; padding:40px 36px; }
.login-logo { width:64px; height:64px; margin:0 auto 16px; border-radius:16px;
  background:linear-gradient(135deg,#2563eb,#0f2a43); color:#fff; font-size:30px;
  display:flex; align-items:center; justify-content:center; }
.login-card h1 { font-size:22px; text-align:center; color:var(--navy); }
.login-card .sub { text-align:center; color:var(--teks-muda); font-size:13px; margin:6px 0 26px; }

/* ---------- FORM ---------- */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--navy); }
.form-control { width:100%; padding:10px 12px; border:1.5px solid var(--garis); border-radius:8px;
  font-size:14px; background:#fff; transition:border .15s; font-family:inherit; }
.form-control:focus { outline:none; border-color:var(--biru); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.field-error { color:var(--bahaya); font-size:12px; margin-top:4px; }

/* ---------- TOMBOL ---------- */
.btn { display:inline-flex; align-items:center; gap:6px; border:none; border-radius:8px;
  padding:10px 16px; font-size:14px; font-weight:600; cursor:pointer; transition:filter .15s; }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn-primary { background:var(--biru); color:#fff; }
.btn-primary:hover { filter:brightness(1.1); }
.btn-danger { background:var(--bahaya); color:#fff; }
.btn-outline { background:#fff; border:1.5px solid var(--garis); color:var(--teks); }
.btn-block { width:100%; justify-content:center; }
.btn-sm { padding:6px 10px; font-size:12.5px; border-radius:6px; }
.btn-edit { background:#eff6ff; color:#1d4ed8; }
.btn-hapus { background:#fee2e2; color:#b91c1c; }

/* ---------- LAYOUT ---------- */
.sidebar { position:fixed; top:0; left:0; bottom:0; width:250px; background:var(--navy);
  color:#cbd5e1; display:flex; flex-direction:column; z-index:50; }
.sidebar .brand { display:flex; gap:10px; align-items:center; padding:20px 18px;
  border-bottom:1px solid rgba(255,255,255,.08); color:#fff; }
.sidebar .brand .logo { width:38px; height:38px; border-radius:10px; background:var(--biru);
  display:flex; align-items:center; justify-content:center; font-size:19px; }
.sidebar .brand b { font-size:16px; letter-spacing:.5px; display:block; }
.sidebar .brand small { font-size:10.5px; color:#94a3b8; font-weight:400; }
.sidebar nav { padding:12px 10px; flex:1; overflow-y:auto; }
.sidebar .menu-label { font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px;
  color:#64748b; margin:14px 10px 6px; }
.sidebar a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  color:#cbd5e1; font-size:14px; margin-bottom:2px; }
.sidebar a:hover { background:rgba(255,255,255,.07); color:#fff; }
.sidebar a.active { background:var(--biru); color:#fff; font-weight:600; }
.sidebar a.disabled { opacity:.45; cursor:not-allowed; }
.sidebar a.disabled:hover { background:none; color:#cbd5e1; }
.soon { margin-left:auto; font-size:9.5px; background:rgba(255,255,255,.12);
  padding:2px 6px; border-radius:20px; text-transform:uppercase; }

.main { margin-left:250px; min-height:100vh; display:flex; flex-direction:column; }
.topbar { background:#fff; border-bottom:1px solid var(--garis); padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:40; }
.topbar h2 { font-size:18px; color:var(--navy); }
.userbox { display:flex; align-items:center; gap:12px; }
.userbox .info { text-align:right; line-height:1.25; }
.userbox .info b { font-size:13.5px; }
.userbox .info small { color:var(--teks-muda); font-size:11.5px; display:block; }
.avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#2563eb,#0f2a43);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.content { padding:26px 28px; flex:1; }

/* ---------- FLASH ---------- */
.flash { padding:12px 16px; border-radius:8px; margin-bottom:18px; font-size:14px; font-weight:500; }
.flash-sukses { background:#dcfce7; color:#14532d; border:1px solid #86efac; }
.flash-error  { background:#fee2e2; color:#7f1d1d; border:1px solid #fca5a5; }

/* ---------- KARTU & STATISTIK ---------- */
.card { background:#fff; border:1px solid var(--garis); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-body { padding:20px; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:22px; }
.stat { background:#fff; border:1px solid var(--garis); border-radius:var(--radius); padding:18px;
  box-shadow:var(--shadow); display:flex; gap:14px; align-items:center; }
.stat .icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:21px; flex-shrink:0; }
.stat b { font-size:24px; display:block; color:var(--navy); }
.stat span { font-size:12.5px; color:var(--teks-muda); }

/* ---------- TOOLBAR & TABEL ---------- */
.toolbar { display:flex; gap:10px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:16px; }
.toolbar .kiri { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.table-wrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:14px; }
table.data th { background:#f8fafc; text-align:left; padding:11px 14px; font-size:12px;
  text-transform:uppercase; letter-spacing:.6px; color:var(--teks-muda);
  border-bottom:1px solid var(--garis); white-space:nowrap; }
table.data td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--garis);
  vertical-align: top;
}
table.data tr:hover td { background:#f8fafc; }
.empty { text-align:center; color:var(--teks-muda); padding:36px 14px !important; }
.empty .big { font-size:34px; display:block; margin-bottom:8px; }

/* ---------- BADGE ---------- */
.badge { display:inline-block; padding:4px 10px; border-radius:20px; font-size:11.5px; font-weight:600; }
.badge-libur_nasional { background:#fee2e2; color:#b91c1c; }
.badge-cuti_bersama   { background:#fef3c7; color:#b45309; }
.badge-libur_instansi { background:#dbeafe; color:#1d4ed8; }
.badge-role { background:#eff6ff; color:#1d4ed8; font-size:11px; padding:3px 9px; }

/* ---------- MODAL ---------- */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,42,67,.55);
  z-index:100; align-items:center; justify-content:center; padding:18px; }
.modal-overlay.show { display:flex; }
.modal { background:#fff; border-radius:14px; width:100%; max-width:460px;
  box-shadow:0 24px 60px rgba(0,0,0,.28); animation:pop .16s ease-out; max-height:92vh; overflow-y:auto; }
@keyframes pop { from { transform:scale(.96); opacity:0; } to { transform:scale(1); opacity:1; } }
.modal-head { padding:18px 22px; border-bottom:1px solid var(--garis);
  display:flex; justify-content:space-between; align-items:center; }
.modal-head h3 { font-size:16px; color:var(--navy); }
.modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--teks-muda); }
.modal-body { padding:22px; }
.modal-foot { padding:16px 22px; border-top:1px solid var(--garis);
  display:flex; justify-content:flex-end; gap:10px; }

/* ---------- PROGRES ---------- */
.progres li { list-style:none; padding:9px 0; border-bottom:1px dashed var(--garis);
  font-size:14px; display:flex; gap:10px; align-items:center; }
.progres li:last-child { border:none; }
.progres .done { color:var(--sukses); font-weight:600; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px) {
  .sidebar { position:static; width:100%; }
  .sidebar nav { display:flex; flex-wrap:wrap; padding:8px; }
  .sidebar .menu-label { display:none; }
  .main { margin-left:0; }
  .userbox .info { display:none; }
  .content { padding:18px; }
}

/* ---------- INPUT PASSWORD + TOGGLE ---------- */
.pass-wrap { display:flex; gap:8px; align-items:stretch; }
.pass-wrap .form-control { flex:1; }
.pass-wrap .btn-sm { flex-shrink:0; }

/* ---------- TOAST PENGINGAT (Tahap 6c) ---------- */
.toast-reminder { position:fixed; right:20px; bottom:20px; z-index:150; width:340px;
  max-width:calc(100vw - 40px); background:#fff; border:1px solid var(--garis);
  border-left:4px solid #f59e0b; border-radius:12px; box-shadow:0 12px 32px rgba(15,42,67,.18);
  padding:14px; display:flex; gap:10px; animation:trIn .25s ease-out; }
@keyframes trIn { from { transform:translateY(14px); opacity:0; } to { transform:none; opacity:1; } }
.toast-reminder .tr-icon { font-size:24px; }
.toast-reminder .tr-body { flex:1; }
.toast-reminder .tr-body b { display:block; font-size:13.5px; color:var(--navy); margin-bottom:2px; }
.toast-reminder .tr-body p { font-size:12.5px; color:var(--teks-muda); margin:0 0 10px; }
.toast-reminder .tr-actions { display:flex; gap:6px; flex-wrap:wrap; }
.tr-close { background:none; border:none; cursor:pointer; color:var(--teks-muda);
  font-size:14px; flex-shrink:0; padding:2px 6px; }

  /* ---------- PWA (Tahap 6d) ---------- */
.pwa-install { position:fixed; left:50%; transform:translateX(-50%); bottom:20px; z-index:150;
  display:flex; align-items:center; gap:10px; background:var(--navy); color:#fff;
  padding:10px 12px 10px 16px; border-radius:14px; box-shadow:0 12px 32px rgba(15,42,67,.35);
  font-size:13.5px; animation:trIn .25s ease-out; max-width:calc(100vw - 32px); }
.pwa-install b { color:#fff; }
.pwa-install .pi-close { background:none; border:none; color:#94a3b8; cursor:pointer; font-size:13px; padding:2px 4px; }

.pwa-offline { display:none; position:fixed; top:10px; left:50%; transform:translateX(-50%);
  z-index:160; background:#7f1d1d; color:#fff; padding:8px 18px; border-radius:20px;
  font-size:12.5px; box-shadow:0 6px 18px rgba(0,0,0,.25); }
body.pwa-off .pwa-offline { display:block; }

/* ---------- RINCIAN ITEM TARGET ---------- */
.rincian-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:45vh; overflow-y:auto; }
.rincian-item { display:flex; align-items:flex-start; gap:10px; border:1px solid var(--garis); border-radius:8px; padding:10px 12px; background:#fff; }
.rincian-item input[type=checkbox] { width:17px; height:17px; margin-top:2px; cursor:pointer; flex-shrink:0; }
.rincian-item .ri-teks { flex:1; min-width:0; font-size:13.5px; }
.rincian-item .ri-teks b { display:block; }
.rincian-item .ri-teks small { color:var(--teks-muda); }
.rincian-item.selesai .ri-teks b { text-decoration:line-through; color:var(--teks-muda); }
.rincian-item .form-control { font-size:13px; padding:7px 10px; }
.rincian-kosong { text-align:center; color:var(--teks-muda); padding:20px; border:1px dashed var(--garis); border-radius:8px; list-style:none; }

/* ---------- DAFTAR TEKS BERNOMOR/BULLET (Uraian & Output) ---------- */
.daftar-teks { margin:4px 0; padding-left:20px; }
.daftar-teks li { margin-bottom:3px; line-height:1.55; }
table.info .daftar-teks { margin:0; padding-left:18px; }

/* ---------- FORMAT 2: FIELDSET & PANEL ---------- */
fieldset.fs {
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 20px 20px;
  margin-bottom: 18px;
}

fieldset.fs legend {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  padding: 3px 12px;
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: 20px;
}

.fs h4 {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--teks-muda);
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--garis);
  padding-bottom: 5px;
}

.filter-col .form-group {
  margin-bottom: 10px;
}

.filter-col label {
  font-size: 12px;
}

.gd-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.gd-bar .form-control {
  flex: 1;
  min-width: 240px;
}

.bulkbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* ---------- FILTER KOMPAK (Format 2) ---------- */
.grid-f {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0 22px;
}

.frow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.frow>label {
  width: 118px;
  flex-shrink: 0;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teks);
}

.frow>.form-control {
  flex: 1;
  min-width: 0;
}

.frow .s-d {
  font-size: 12px;
  color: var(--teks-muda);
  flex-shrink: 0;
}

@media (max-width:800px) {
  .grid-f {
    grid-template-columns: 1fr;
  }
}

/* ---------- BADGE LAMPIRAN & TOMBOL SALIN (Format 2) ---------- */
.badge-lampiran {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 20px;
  background: var(--biru);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  text-decoration: none;
}

.badge-lampiran:hover {
  filter: brightness(1.12);
}

.badge-lampiran.nol {
  background: transparent;
  border: 1.5px dashed var(--garis);
  color: var(--teks-muda);
}

.btn-copy {
  font-size: 11.5px;
  padding: 3px 9px;
  margin-top: 7px;
}

/* ---------- SALIN PER ITEM & GABUNG AI ---------- */
.copy-item {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--teks-muda);
  padding: 0 2px 0 7px;
  line-height: 1;
}

.copy-item:hover {
  color: var(--biru);
  transform: scale(1.2);
}

.aksi-copy {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 7px;
}

/* ---------- PILIH FOLDER DRIVE ---------- */
.pf-list { list-style:none; margin:0; padding:0; max-height:260px; overflow-y:auto;
  display:flex; flex-direction:column; gap:6px; }
.pf-item { border:1px solid var(--garis); border-radius:8px; padding:4px 10px; }
.pf-item:hover { background:#f8fafc; }
.pf-item.terpilih { border-color:var(--biru); background:#eff6ff; }

/* ---------- OVERLAY UNGGAH GOOGLE DRIVE ---------- */
.unggah-overlay { position:fixed; inset:0; z-index:180; background:rgba(15,42,67,.55);
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:16px; }
.unggah-overlay.show { display:flex; }
.spinner-ring { width:56px; height:56px; border-radius:50%;
  border:6px solid rgba(255,255,255,.25); border-top-color:#fff;
  animation:putar .8s linear infinite; }
@keyframes putar { to { transform:rotate(360deg); } }
.unggah-overlay p { color:#fff; font-size:14.5px; font-weight:600; text-align:center; margin:0; }
.unggah-overlay small { color:#cbd5e1; font-size:12px; margin-top:-8px; }

/* ---------- PEMETAAN KEGIATAN ---------- */
table.peta td, table.peta th { text-align:center; vertical-align:middle; }
table.peta th:first-child, table.peta td:first-child { text-align:left; }
.peta-kol { min-width:64px; }
.peta-kode { display:block; font-size:14px; color:var(--biru); font-weight:800; }
.peta-kol small { display:block; font-size:9.5px; font-weight:400; color:var(--teks-muda); white-space:normal; line-height:1.2; }
.peta-isi { display:inline-block; min-width:30px; padding:4px 8px; border-radius:8px;
  background:#dcfce7; color:#166534; font-weight:800; text-decoration:none; }
.peta-isi:hover { filter:brightness(1.05); }
.peta-kosong { color:#cbd5e1; }
tr.peta-libur td { background:#fee2e2 !important; }
tr.peta-weekend td { background:#f1f5f9; }
tr.peta-libur .peta-isi { background:#fecaca; color:#7f1d1d; }
.peta-ket { cursor:pointer; font-size:13px; }
.peta-ket:hover { color:var(--biru); }
.peta-tambah { color:#cbd5e1; font-size:12px; }
.peta-legend { list-style:none; padding:0; margin:8px 0 0; font-size:13px; column-gap:24px; columns:2; }
.peta-legend li { margin-bottom:4px; break-inside:avoid; }

/* ---------- KOLEKSI LINK GDRIVE ---------- */
.gd-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gd-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--garis);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}

.gd-item.aktif {
  border-color: var(--biru);
  background: #eff6ff;
}

.gd-aksi {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ---------- PEMETAAN v1.1: TANGGAL LENGKAP & JAM KERJA ---------- */
.peta-tgl {
  min-width: 96px;
}

.peta-tgl small {
  color: var(--teks-muda);
  font-size: 10.5px;
}

.peta-jam {
  font-size: 10.5px;
  color: var(--teks-muda);
  margin-top: 2px;
}

.peta-hari-jam {
  font-size: 10.5px;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  display: inline-block;
  font-weight: 700;
}

.peta-hari-jam.penuh {
  background: #dcfce7;
  color: #166534;
}

.peta-hari-jam.kurang {
  background: #fef3c7;
  color: #b45309;
}

.peta-hari-jam.liburkerja {
  background: #dbeafe;
  color: #1d4ed8;
}

/* ---------- PEMETAAN: STICKY HEADER & KOLOM TANGGAL ---------- */
.table-wrap.peta-wrap {
  max-height: calc(100vh - 290px);
  overflow: auto;
}

table.peta thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: 0 1px 0 var(--garis);
  /* pengganti border bawah yang ikut tergulung */
}

table.peta thead th:first-child,
table.peta td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 1px 0 0 var(--garis);
  /* pengganti border kanan */
}

/* Sel pojok kiri-atas: sticky dua arah → z-index tertinggi */
table.peta thead th:first-child {
  z-index: 4;
}

/* Warna sel tanggal mengikuti status baris (libur/weekend) */
table.peta tr.peta-libur td:first-child {
  background: #fee2e2 !important;
}

table.peta tr.peta-weekend td:first-child {
  background: #f1f5f9;
}

@media print {
  .table-wrap.peta-wrap {
    max-height: none;
    overflow: visible;
  }

  table.peta thead th,
  table.peta td:first-child {
    position: static;
  }
}

/* ---------- DIALOG SIKHAR (konfirmasi & alert) ---------- */
.dialog-sikhar { max-width:400px; text-align:center; }
.dialog-sikhar .dialog-ikon { font-size:48px; line-height:1; margin:4px 0 2px; }
.dialog-sikhar .modal-head { display:flex; justify-content:center; }
.dialog-sikhar .modal-head .modal-close { position:absolute; right:12px; top:10px; }
.dialog-sikhar .modal-foot { justify-content:center; gap:10px; }

/* ---------- POPOVER INFO INDUK (Format 3) ---------- */
#cpInfoPop { pointer-events:none; }

/* Tombol toggle Info Induk saat NONAKTIF sedikit redup */
#cpInfoInduk.btn-outline { opacity:.65; }

/* ---------- KOLON BUKTI: ADA/BELUM (Format 3) ---------- */
td.bukti-ada   { background:#f0fdf4 !important; border-left:3px solid var(--sukses); }
td.bukti-kosong { border-left:3px solid var(--garis); }
.btn-bukti.btn-primary { min-width:52px; }
.btn-bukti.btn-outline { min-width:52px; }