/* ==========================================================================
   SIM-Asrama SR 1 Pasuruan — tema desktop
   ========================================================================== */
:root {
  --brand-900:#4a0d17; --brand-700:#8a1526; --brand-600:#a51c2e; --brand-500:#c0293c;
  --brand-050:#fdeeef; --ink:#0f172a; --muted:#64748b; --line:#e6ebf1;
  --bg:#f4f6f9; --amber:#f59e0b; --rose:#e11d48; --violet:#6366f1; --pink:#db2777;
  --radius:16px; --shadow:0 8px 24px rgba(15,23,42,.06);
}
* { box-sizing:border-box; }
body.view-desktop { margin:0; background:var(--bg); color:var(--ink);
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; }
.icn { width:18px; height:18px; flex:none; }
a { color:var(--brand-700); }

/* ---------- topbar ---------- */
.topbar { position:sticky; top:0; z-index:40; display:flex; justify-content:space-between;
  align-items:center; gap:16px; padding:14px 26px; background:#fff; border-bottom:1px solid var(--line); }
.topbar-left { display:flex; align-items:center; gap:12px; }
.brand-badge { width:44px; height:44px; border-radius:14px; background:linear-gradient(140deg,var(--brand-600),var(--brand-900));
  color:#fff; display:grid; place-items:center; }
.brand-badge .icn { width:22px; height:22px; }
.brand-title { font-size:1.15rem; font-weight:800; margin:0; letter-spacing:-.2px; }
.brand-sub { margin:0; font-size:.76rem; color:var(--muted); }
.tag { border-radius:999px; font-size:.72rem; font-weight:700; padding:4px 10px; white-space:nowrap; }
.tag-jenjang { background:var(--brand-050); color:var(--brand-700); border:1px solid #f4cdd5; }
.tag-aktif { background:#fad7dc; color:var(--brand-700); font-style:normal; }
.tag-mini { background:#eef2f7; color:#475569; font-style:normal; font-size:.66rem; margin-left:auto; }
.topbar-right { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tp-chip, .role-chip { display:flex; align-items:center; gap:8px; background:#fdf6f7; border:1px solid #f2c9d1;
  border-radius:12px; padding:9px 14px; font-size:.85rem; }
.tp-chip strong { color:var(--brand-700); }
.role-chip { background:#f6f8fb; border-color:var(--line); }
.view-toggle { display:flex; align-items:center; gap:8px; text-decoration:none; font-weight:600; font-size:.85rem;
  color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:12px; padding:9px 14px; }
.view-toggle:hover { border-color:var(--brand-500); color:var(--brand-700); }

/* ---------- layout ---------- */
.body { display:grid; grid-template-columns:270px 1fr; align-items:start; }
.sidebar { position:sticky; top:73px; height:calc(100vh - 73px); background:#fff; border-right:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:space-between; padding:18px 14px; }
.side-nav { display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.side-link { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px;
  text-decoration:none; color:#334155; font-weight:600; font-size:.9rem; }
.side-link span.side-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; }
.side-link:hover { background:#faf3f4; }
.side-link.active { background:linear-gradient(120deg,var(--brand-600),var(--brand-700)); color:#fff;
  box-shadow:0 8px 18px rgba(165,28,46,.28); }
.side-link.active .tag-mini { background:rgba(255,255,255,.2); color:#fff; }
.side-user { display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); padding-top:14px; margin-top:12px; }
.side-user strong { display:block; font-size:.86rem; }
.side-user small { color:var(--brand-600); font-size:.75rem; }
.side-logout { margin-left:auto; color:var(--muted); }
.content { padding:24px 26px 60px; min-height:calc(100vh - 73px); }

/* ---------- kartu & judul ---------- */
.card { border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); background:#fff; }
.card-soft { padding:20px 22px; margin-bottom:18px; }
/* Gedung/kamar nonaktif tetap terlihat tetapi diredupkan. */
.row-off { opacity:.58; }
tr.row-off td { background:#f8fafc; text-decoration:line-through; text-decoration-color:#cbd5e1; }
.card.row-off:hover { opacity:.82; }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.page-title { display:flex; align-items:center; gap:10px; font-size:1.35rem; font-weight:800; margin:0 0 6px; }
.page-title .icn { width:22px; height:22px; color:var(--brand-600); }
.page-desc { color:var(--muted); font-size:.9rem; margin:0; max-width:70ch; }
.section-title { display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.02rem; margin:0; }

/* ---------- hero tahun aktif ---------- */
.hero { background:linear-gradient(120deg,var(--brand-700),var(--brand-900)); color:#fff;
  border-radius:20px; padding:26px 28px; margin-bottom:18px; position:relative; overflow:hidden; }
.hero::after { content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  border-radius:50%; background:rgba(255,255,255,.06); }
.hero-label { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:6px 14px; font-size:.75rem;
  letter-spacing:.6px; font-weight:700; }
.hero h2 { color:#ffd84d; font-size:2rem; font-weight:800; margin:14px 0 8px; }
.hero p { margin:0; color:#f6d7db; max-width:70ch; }
.hero-side { background:rgba(30,4,8,.42); border-radius:14px; padding:16px 18px; min-width:250px; }
.hero-side h6 { color:#ffb4c0; letter-spacing:.5px; font-size:.72rem; font-weight:800; }
.hero-side div { display:flex; justify-content:space-between; font-size:.85rem; padding:3px 0; color:#f4d3d8; }
.hero-side b { color:#fff; }

/* ---------- note / alert ---------- */
.note { display:flex; gap:12px; border-radius:14px; padding:16px 18px; margin-bottom:18px; font-size:.9rem; }
.note-blue { background:#eef4ff; border:1px solid #d8e5ff; color:#1e3a8a; }
.note-red { background:#fff1f3; border:1px solid #ffd7de; color:#9f1239; }
.note-amber { background:#fffbeb; border:1px solid #fde9b8; color:#92400e; }
.note .icn { width:20px; height:20px; flex:none; }
.note code { background:rgba(15,23,42,.07); padding:2px 6px; border-radius:6px; font-size:.8rem; }
.alert { border-radius:14px; border:none; }
.alert-success { background:#e9f9f0; color:#065f46; }
.alert-warning { background:#fff8e6; color:#92400e; }
.alert-danger { background:#fdecef; color:#9f1239; }

/* ---------- statistik ---------- */
.stat-card { border-left:4px solid var(--brand-500); }
.stat-card .num { font-size:1.6rem; font-weight:800; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.stat-box { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center; }
.stat-box .k { font-size:.7rem; letter-spacing:.5px; font-weight:800; text-transform:uppercase; }
.stat-box .v { font-size:1.5rem; font-weight:800; }
.stat-hadir { background:#eefaf3; } .stat-hadir .k { color:#065f46; }
.stat-sakit { background:#fff1f3; } .stat-sakit .k { color:var(--rose); }
.stat-izin-pulang { background:#fffbeb; } .stat-izin-pulang .k { color:#b45309; }
.stat-izin { background:#eff4ff; } .stat-izin .k { color:#1d4ed8; }
.stat-haid { background:#fff0f6; } .stat-haid .k { color:var(--pink); }
.stat-alfa { background:#fff1f2; } .stat-alfa .k { color:#b91c1c; }
.stat-belum { background:#f4f6f9; } .stat-belum .k { color:var(--muted); }

/* ---------- tabel ---------- */
.table-wrap { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
table.sim { width:100%; border-collapse:collapse; }
table.sim thead th { background:#f7f9fc; text-transform:uppercase; font-size:.72rem; letter-spacing:.5px;
  color:#475569; text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); }
table.sim tbody td { padding:14px 16px; border-bottom:1px solid #f1f5f9; font-size:.88rem; vertical-align:middle; }
table.sim tbody tr:hover { background:#fafcfd; }
table.sim tbody tr:last-child td { border-bottom:none; }
.cell-sub { color:var(--muted); font-size:.78rem; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem; color:#334155; }

/* ---------- avatar & badge ---------- */
.avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; display:inline-grid; place-items:center;
  background:linear-gradient(140deg,#f8d7db,#f2bcc6); color:var(--brand-700); font-weight:800; font-size:.85rem; flex:none; }
.avatar-sm { width:32px; height:32px; font-size:.72rem; }
.avatar-lg { width:56px; height:56px; font-size:1.05rem; }
.pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 12px;
  font-size:.76rem; font-weight:700; border:1px solid transparent; }
.pill-success { background:#e7f8ef; color:#065f46; border-color:#c6ecd8; }
.pill-danger { background:#fdeaee; color:#9f1239; border-color:#f8ccd6; }
.pill-warning { background:#fff6e0; color:#92400e; border-color:#f7e2b0; }
.pill-primary { background:#eaf1ff; color:#1e40af; border-color:#cfe0ff; }
.pill-pink { background:#ffeaf3; color:#9d174d; border-color:#fbd0e3; }
.pill-grey { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }
.pill-violet { background:#f1eeff; color:#4c1d95; border-color:#ddd5fb; }
.pill-dark { background:#1f2937; color:#fff; }

/* ---------- tombol ---------- */
.btn { border-radius:12px; font-weight:700; font-size:.86rem; padding:10px 16px; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; cursor:pointer; }
.btn:focus { box-shadow:0 0 0 3px rgba(192,41,60,.25); }
.btn-brand { background:var(--brand-600); color:#fff; } .btn-brand:hover { background:var(--brand-700); color:#fff; }
.btn-amber { background:var(--amber); color:#fff; } .btn-amber:hover { background:#d98806; color:#fff; }
.btn-rose { background:var(--rose); color:#fff; } .btn-rose:hover { background:#b3123a; color:#fff; }
.btn-violet { background:var(--violet); color:#fff; } .btn-violet:hover { background:#4f46e5; color:#fff; }
.btn-ghost { background:#fff; color:#334155; border-color:var(--line); } .btn-ghost:hover { border-color:#cbd5e1; }
.btn-sm { padding:6px 11px; font-size:.78rem; border-radius:10px; }
.btn-locked { background:#f1f5f9; color:#94a3b8; cursor:not-allowed; }

/* ---------- chip filter ---------- */
.chips { display:flex; gap:9px; flex-wrap:wrap; }
.chip { border:1px solid var(--line); background:#fff; border-radius:12px; padding:9px 14px; font-size:.84rem;
  font-weight:600; color:#475569; cursor:pointer; text-decoration:none; display:inline-flex; gap:7px; align-items:center; }
.chip:hover { border-color:#cbd5e1; }
.chip.active { background:var(--brand-600); border-color:var(--brand-600); color:#fff; box-shadow:0 6px 14px rgba(165,28,46,.25); }
.chip.active .icn { color:#fff; }

/* ---------- quick access ---------- */
.quick { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.quick a { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 12px; text-align:center;
  text-decoration:none; color:var(--ink); font-weight:700; font-size:.82rem; transition:.15s; }
.quick a:hover { transform:translateY(-2px); border-color:var(--brand-500); box-shadow:var(--shadow); }
.quick .qi { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin:0 auto 8px;
  background:var(--brand-050); color:var(--brand-700); }
.quick .qi.q-blue { background:#eaf1ff; color:#1d4ed8; }
.quick .qi.q-violet { background:#f1eeff; color:#4c1d95; }
.quick .qi.q-amber { background:#fff6e0; color:#b45309; }
.quick .qi.q-rose { background:#fdeaee; color:#9f1239; }

/* ---------- form ---------- */
.form-control, .form-select { border-radius:12px; border:1px solid var(--line); padding:10px 12px; font-size:.88rem; }
.form-control:focus, .form-select:focus { border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(192,41,60,.15); }
label.form-label { font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:#475569; }
.search-box { position:relative; }
.search-box .icn { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#94a3b8; }
.search-box input { padding-left:38px; border-radius:12px; }

/* ---------- absensi cepat ---------- */
.qmark { display:inline-flex; gap:5px; flex-wrap:wrap; }
.qmark button { min-width:34px; border:1px solid var(--line); background:#fff; border-radius:9px; padding:6px 9px;
  font-size:.76rem; font-weight:800; color:#475569; cursor:pointer; }
.qmark button:hover { border-color:var(--brand-500); }
.qmark button.on { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.qmark button.on-haid { background:var(--pink); border-color:var(--pink); color:#fff; }
.qmark button.on-alfa { background:#1f2937; border-color:#1f2937; color:#fff; }
.locked-cell { color:#a51c2e; font-size:.8rem; display:flex; align-items:center; gap:6px; }

/* ---------- notifikasi ---------- */
.notif-btn { position:fixed; right:22px; bottom:22px; width:52px; height:52px; border-radius:50%; border:none;
  background:var(--brand-600); color:#fff; display:grid; place-items:center; box-shadow:0 10px 22px rgba(165,28,46,.35); z-index:60; }
.notif-count { position:absolute; top:-2px; right:-2px; background:var(--rose); color:#fff; border-radius:999px;
  font-size:.68rem; padding:2px 6px; font-style:normal; }
.notif-panel { position:fixed; right:22px; bottom:84px; width:330px; max-height:60vh; overflow:auto; background:#fff;
  border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 40px rgba(15,23,42,.18); display:none; z-index:61; }
.notif-panel.open { display:block; }
.notif-head { padding:12px 14px; font-weight:800; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; }
.notif-item { display:block; padding:12px 14px; border-bottom:1px solid #f1f5f9; text-decoration:none; color:var(--ink); }
.notif-item strong { display:block; font-size:.85rem; }
.notif-item span { display:block; font-size:.79rem; color:var(--muted); }
.notif-item em { font-size:.7rem; color:#94a3b8; font-style:normal; }
.notif-item.unread { background:var(--brand-050); }
.notif-empty { padding:16px 14px; color:var(--muted); font-size:.85rem; }

/* ---------- kamera / scanner ---------- */
.scanner-stage { background:#0b1220; border-radius:16px; min-height:280px; display:grid; place-items:center;
  position:relative; overflow:hidden; color:#94a3b8; }
.scanner-stage video, .scanner-stage canvas { width:100%; border-radius:16px; display:block; }
.scan-frame { position:absolute; inset:14% 22%; border:2px dashed rgba(255,255,255,.7); border-radius:14px; }
.scan-result { margin-top:12px; }

/* ---------- login ---------- */
.bare-shell { min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1000px 500px at 10% -10%, var(--brand-050), transparent), var(--bg); }
.login-card { width:min(940px,100%); display:grid; grid-template-columns:1.05fr .95fr; background:#fff;
  border-radius:22px; overflow:hidden; box-shadow:0 24px 60px rgba(74,13,23,.18); border:1px solid var(--line); }
.login-side { background:linear-gradient(150deg,var(--brand-700),var(--brand-900)); color:#fff; padding:34px; }
.login-side h2 { font-weight:800; font-size:1.5rem; }
.login-side ul { padding-left:18px; color:#f6d7db; font-size:.88rem; line-height:1.9; }
.login-form { padding:34px; }
.demo-accounts { background:#f8fafc; border:1px dashed var(--line); border-radius:12px; padding:12px 14px; font-size:.78rem; }
.demo-accounts code { background:#fff; border:1px solid var(--line); border-radius:5px; padding:0 4px; }

/* ---------- cetak ---------- */
.print-only { display:none; }
@media print {
  .topbar, .sidebar, .notif-btn, .notif-panel, .no-print { display:none !important; }
  .content { padding:0; } body { background:#fff; } .card { box-shadow:none; }
  .print-only { display:block; }
}

/* ---------- responsif dasar ---------- */
@media (max-width: 992px) {
  .body { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; flex-direction:row; gap:10px; overflow-x:auto; align-items:center; }
  .side-nav { flex-direction:row; }
  .side-link span.side-label { max-width:none; }
  .side-user { display:none; }
  .tag-mini { display:none; }
  .login-card { grid-template-columns:1fr; }
  .login-side { padding:24px; }
}

/* ---------- DataTables: pembungkus & perkakas ------------------------------- */
.dataTables_wrapper { padding:0 16px 14px; }
.sim-tbl-top, .sim-tbl-foot { display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; padding:12px 0; }
.sim-tbl-foot { border-top:1px solid var(--line); }
.dataTables_length label, .dataTables_filter label, .dataTables_info {
  font-size:.82rem; color:var(--muted); display:flex; align-items:center; gap:8px; margin:0; }
.dataTables_length select, .dataTables_filter input {
  border:1px solid var(--line); border-radius:10px; padding:6px 10px; font-size:.85rem;
  background:#fff; color:var(--ink); }
.dataTables_filter input { min-width:210px; }
.dataTables_length select:focus, .dataTables_filter input:focus {
  outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-050); }
.dataTables_wrapper .dataTables_filter input::placeholder { color:#9aa7b8; }

table.sim.dataTable thead th.sorting_asc,
table.sim.dataTable thead th.sorting_desc { background:var(--brand-050); color:var(--brand-900); }
table.sim.dataTable thead th.sorting_asc:before,
table.sim.dataTable thead th.sorting_desc:before { bottom:auto; opacity:.55; }
table.sim.dataTable tbody td { white-space:normal; }
.dataTables_scroll table.sim.dataTable { margin:0 !important; }
.dataTables_scrollBody { border:none !important; }

.dataTables_paginate { display:flex; align-items:center; gap:6px; }
.dataTables_paginate .paginate_button { border:1px solid var(--line); border-radius:10px;
  padding:6px 12px; font-size:.82rem; font-weight:600; background:#fff; color:var(--ink) !important; }
.dataTables_paginate .paginate_button.current { background:var(--brand-600);
  border-color:var(--brand-600); color:#fff !important; }
.dataTables_paginate .paginate_button:hover { border-color:var(--brand-500);
  background:var(--brand-050) !important; color:var(--brand-700) !important; }
.dataTables_paginate .paginate_button.disabled { opacity:.45; pointer-events:none; }

/* ---------- Select2 menyatu dengan form Bootstrap 5 ------------------------- */
.select2-container { width:100% !important; }
.select2-container--bootstrap-5 .select2-selection { border-color:var(--line); border-radius:10px; }
.select2-container--bootstrap-5:focus-within .select2-selection,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
  border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-050); }
.select2-container--bootstrap-5 .select2-dropdown { border-color:var(--brand-500); }
.select2-container--bootstrap-5 .select2-results__option--selected {
  background:var(--brand-050); color:var(--brand-900); font-weight:700; }
.select2-container--bootstrap-5 .select2-results__option--highlighted { background:var(--brand-600); }
.select2-container--bootstrap-5 .select2-search__field:focus {
  outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-050); }
.modal .select2-dropdown { z-index:1060; }
td .select2-container--bootstrap-5 .select2-selection--single,
.d-flex .select2-container--bootstrap-5 .select2-selection--single { min-height:38px; }

@media (max-width: 768px) {
  .sim-tbl-top, .sim-tbl-foot { flex-direction:column; align-items:flex-start; }
  .dataTables_filter input { min-width:0; width:100%; }
}


/* ---------- kepala dokumen ekspor (hanya tampil pada hasil JPG/PDF) ---------- */
.ekspor-head { display:none; padding:14px 18px 12px; background:#fff; border-bottom:2px solid var(--brand-700); }
.ekspor-head .ek-kop { display:flex; align-items:center; gap:12px; }
.ekspor-head .ek-logo { width:46px; height:46px; border-radius:50%; background:var(--brand-700); color:#fff;
  display:grid; place-items:center; font-weight:800; font-family:Arial,Helvetica,sans-serif; }
.ekspor-head h4 { margin:0; font-size:1.05rem; font-weight:800; color:var(--ink); }
.ekspor-head h5 { margin:12px 0 2px; font-size:.95rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  color:var(--brand-700); }
.ekspor-head .ek-sub, .ekspor-head .ek-meta { margin:2px 0 0; font-size:.78rem; color:var(--muted); }