/* ===== PresensiApp Design System ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --primary: #004ac6;
  --primary-container: #2563eb;
  --on-primary: #ffffff;
  --on-primary-container: #eeefff;
  --surface: #f8f9ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #eff4ff;
  --surface-container: #e5eeff;
  --surface-container-high: #dce9ff;
  --surface-container-highest: #d3e4fe;
  --on-surface: #0b1c30;
  --on-surface-variant: #434655;
  --outline: #737686;
  --outline-variant: #c3c6d7;
  --background: #f8f9ff;
  --secondary: #565e74;
  --secondary-container: #dae2fd;
  --on-secondary-container: #5c647a;
  --tertiary: #006242;
  --tertiary-container: #007d55;
  --on-tertiary-container: #bdffdb;
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --inverse-surface: #213145;
  --inverse-on-surface: #eaf1ff;
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.1);
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--background); color:var(--on-surface); min-height:100vh; display:flex; font-size:16px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:inherit; }
input,select,textarea { font-family:inherit; }

/* Layout */
.app-wrapper { display:flex; width:100%; min-height:100vh; overflow-x:hidden; }
.main-content { flex:1; display:flex; flex-direction:column; margin-left:260px; min-height:100vh; transition: margin-left 0.3s ease; }
.main-content.expanded { margin-left: 0; }
.page-canvas { flex:1; padding:32px; overflow-y:auto; max-width:1440px; margin:0 auto; width:100%; }

/* Sidebar */
.sidebar { width:260px; background:var(--surface-container-lowest); border-right:1px solid var(--outline-variant); position:fixed; top:0; left:0; height:100vh; display:flex; flex-direction:column; z-index:50; box-shadow:var(--shadow-md); transition: transform 0.3s ease; }
.sidebar.closed { transform: translateX(-100%); }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:45; backdrop-filter:blur(2px); }
.sidebar-overlay.active { display:block; }
.sidebar-brand { padding:16px; border-bottom:1px solid var(--outline-variant); }
.sidebar-brand .brand-row { display:flex; align-items:center; gap:10px; }
.sidebar-brand .brand-icon { width:40px; height:40px; border-radius:var(--radius); background:var(--primary-container); color:var(--on-primary-container); display:flex; align-items:center; justify-content:center; }
.sidebar-brand h1 { font-size:20px; font-weight:700; color:var(--primary); line-height:28px; }
.sidebar-brand p { font-size:12px; font-weight:500; color:var(--on-surface-variant); margin-top:2px; }

.sidebar-nav { flex:1; padding:16px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.nav-link { display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:var(--radius); color:var(--on-surface-variant); font-size:14px; font-weight:600; letter-spacing:0.05em; transition:all .2s; }
.nav-link:hover { background:var(--surface-container-high); color:var(--primary); }
.nav-link.active { background:var(--secondary-container); color:var(--on-secondary-container); font-weight:600; }
.nav-link .material-symbols-outlined { font-size:20px; }

.sidebar-footer { padding:16px; border-top:1px solid var(--outline-variant); margin-top:auto; }
.sidebar-footer button { width:100%; padding:10px; border-radius:var(--radius); border:1px solid var(--outline-variant); background:transparent; color:var(--on-surface-variant); font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; transition:background .2s; }
.sidebar-footer button:hover { background:var(--surface-container-low); }

/* Top Bar */
.topbar { background:var(--surface); border-bottom:1px solid var(--outline-variant); box-shadow:var(--shadow-sm); display:flex; justify-content:space-between; align-items:center; height:64px; padding:0 24px; position:sticky; top:0; z-index:40; }
.topbar h2 { font-size:24px; font-weight:600; color:var(--on-surface); letter-spacing:-0.01em; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.topbar-time { font-size:14px; font-weight:600; color:var(--on-surface-variant); }
.topbar-btn { width:40px; height:40px; border-radius:var(--radius-full); border:none; background:transparent; color:var(--on-surface-variant); display:flex; align-items:center; justify-content:center; transition:background .15s; }
.topbar-btn:hover { background:var(--surface-container-low); }
.topbar-avatar { width:32px; height:32px; border-radius:var(--radius-full); background:var(--secondary-container); border:1px solid var(--outline-variant); overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--on-surface-variant); font-size:14px; font-weight:600; }

/* Cards */
.card { background:var(--surface-container-lowest); border:1px solid var(--outline-variant); border-radius:var(--radius-md); box-shadow:var(--shadow-md); transition:box-shadow .2s; overflow:hidden; }
.card:hover { box-shadow:var(--shadow-lg); }
.card-header { padding:20px 24px; border-bottom:1px solid var(--surface-container-high); display:flex; justify-content:space-between; align-items:center; }
.card-header h3,.card-header h4 { font-size:20px; font-weight:600; color:var(--on-surface); }
.card-body { padding:24px; }

/* Stat Cards */
.stat-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:24px; margin-bottom:32px; }
.stat-card { background:var(--surface-container-lowest); border:1px solid var(--outline-variant); border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:box-shadow .2s; }
.stat-card:hover { box-shadow:var(--shadow-lg); }
.stat-card .stat-deco { position:absolute; top:-16px; right:-16px; width:96px; height:96px; border-radius:0 0 0 100%; opacity:.08; }
.stat-card .stat-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.stat-card .stat-label { font-size:14px; font-weight:600; color:var(--on-surface-variant); letter-spacing:.05em; }
.stat-card .stat-icon { width:40px; height:40px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; }
.stat-card .stat-value { font-size:32px; font-weight:700; color:var(--on-surface); letter-spacing:-0.02em; }

/* Tables */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { text-align:left; padding:12px 16px; font-size:14px; font-weight:600; color:var(--on-surface-variant); letter-spacing:.05em; border-bottom:2px solid var(--outline-variant); }
.data-table td { padding:12px 16px; font-size:14px; border-bottom:1px solid #f1f5f9; color:var(--on-surface); }
.data-table tr:hover td { background:var(--surface-container-low); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--radius); font-size:14px; font-weight:600; letter-spacing:.05em; border:none; transition:all .15s; }
.btn-primary { background:var(--primary-container); color:var(--on-primary); }
.btn-primary:hover { background:var(--primary); }
.btn-outline { background:transparent; border:1px solid var(--outline-variant); color:var(--on-surface); }
.btn-outline:hover { background:var(--surface-container-low); }
.btn-danger { background:var(--error); color:var(--on-primary); }
.btn-danger:hover { opacity:.9; }
.btn-sm { padding:6px 12px; font-size:12px; }

/* Status Chips */
.chip { display:inline-flex; align-items:center; padding:4px 12px; border-radius:var(--radius-full); font-size:12px; font-weight:500; }
.chip-hadir { background:rgba(0,98,66,.1); color:var(--tertiary); border:1px solid rgba(0,125,85,.2); }
.chip-telat { background:var(--error-container); color:var(--on-error-container); }
.chip-alfa  { background:#fef3c7; color:#92400e; }
.chip-alpa  { background:#fee2e2; color:#991b1b; border:1px solid rgba(185,28,28,.2); } /* alias untuk jurnal harian */
.chip-sakit { background:#dbeafe; color:#1d4ed8; border:1px solid rgba(59,130,246,.2); }
.chip-izin  { background:#ede9fe; color:#6d28d9; border:1px solid rgba(139,92,246,.2); }
.chip-pulang { background:rgba(0,74,198,.1); color:var(--primary); border:1px solid rgba(0,74,198,.2); }
.chip-pla { background:rgba(230,100,0,.12); color:#b84500; border:1px solid rgba(230,100,0,.3); font-weight:700; }

/* Form Elements */
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label { font-size:14px; font-weight:600; color:var(--on-surface); letter-spacing:.05em; }
.form-input,.form-select,.form-textarea { width:100%; padding:10px 16px; border-radius:var(--radius); border:1px solid var(--outline-variant); background:var(--surface); color:var(--on-surface); font-size:16px; transition:all .2s; outline:none; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,74,198,.1); }
.form-input::placeholder { color:var(--outline); }

/* Flash Messages */
.flash { padding:12px 20px; border-radius:var(--radius); margin-bottom:24px; font-size:14px; font-weight:500; display:flex; align-items:center; gap:8px; animation:slideDown .3s ease; }
.flash-success { background:rgba(0,98,66,.1); color:var(--tertiary); border:1px solid rgba(0,125,85,.2); }
.flash-error { background:var(--error-container); color:var(--on-error-container); border:1px solid rgba(186,26,26,.2); }
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }

/* Scan Page */
.scan-layout { display:grid; grid-template-columns:2.5fr 1.5fr; gap:32px; height:calc(100vh - 160px); }
.scanner-card { display:flex; flex-direction:column; gap:24px; }
.mode-switcher { display:flex; background:var(--surface-container-lowest); border:1px solid var(--outline-variant); border-radius:var(--radius); padding:4px; box-shadow:var(--shadow-sm); width:fit-content; }
.mode-btn { padding:10px 24px; border-radius:6px; border:none; background:transparent; font-size:14px; font-weight:600; color:var(--on-surface-variant); display:flex; align-items:center; gap:8px; transition:all .2s; }
.mode-btn.active { background:var(--primary); color:var(--on-primary); box-shadow:var(--shadow-sm); }
.camera-view { flex:1; background:var(--surface-container-highest); border-radius:var(--radius); border:2px dashed rgba(0,74,198,.5); display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; min-height:480px; overflow:hidden; }
#reader video { object-fit:cover !important; width:100% !important; height:100% !important; border-radius:var(--radius); }
.camera-view .scan-line { position:absolute; width:100%; height:2px; background:var(--primary); top:50%; box-shadow:0 0 8px 2px rgba(37,99,235,.5); opacity:.7; animation:scanMove 2s infinite; }
@keyframes scanMove { 0%,100%{top:30%} 50%{top:70%} }
.camera-view .reticle { position:absolute; width:64px; height:64px; border-color:var(--primary); }
.camera-view .reticle.tl { top:32px; left:32px; border-top:4px solid; border-left:4px solid; border-radius:8px 0 0 0; }
.camera-view .reticle.tr { top:32px; right:32px; border-top:4px solid; border-right:4px solid; border-radius:0 8px 0 0; }
.camera-view .reticle.bl { bottom:32px; left:32px; border-bottom:4px solid; border-left:4px solid; border-radius:0 0 0 8px; }
.camera-view .reticle.br { bottom:32px; right:32px; border-bottom:4px solid; border-right:4px solid; border-radius:0 0 8px 0; }

.history-panel { display:flex; flex-direction:column; height:100%; }
.history-list { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; }
.history-item { padding:8px 12px; border-radius:var(--radius); border:1px solid var(--outline-variant); display:flex; align-items:center; justify-content:space-between; transition:box-shadow .2s; }
.history-item:hover { box-shadow:var(--shadow-lg); }
.history-item .avatar { width:40px; height:40px; border-radius:var(--radius-full); background:var(--surface-container-highest); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:var(--on-surface-variant); flex-shrink:0; }
.history-item .info { flex:1; margin-left:12px; }
.history-item .info .name { font-size:14px; font-weight:600; color:var(--on-surface); }
.history-item .info .detail { font-size:12px; color:var(--on-surface-variant); }

/* ===== Landscape Student Card (Screen Preview) ===== */
.card-print-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:20px; }

/* Landscape Card container - 85.60mm × 53.98mm ratio ~1.585:1 */
.lc-card { width:100%; max-width:370px; aspect-ratio:85.60/53.98; border-radius:10px; border:1px solid var(--outline-variant); box-shadow:var(--shadow-md); overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:box-shadow .2s,transform .15s; font-family:'Inter',sans-serif; }
.lc-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }

/* Header bar — logo kotak di kiri, teks di samping */
.lc-header { background:var(--primary); color:#fff; padding:6px 10px 5px; display:flex; justify-content:flex-start; align-items:center; gap:8px; flex-shrink:0; }
.lc-header-left { display:flex; align-items:center; gap:7px; min-width:0; flex:1; }
.lc-logo-box { width:30px; height:30px; background:#fff; border-radius:5px; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.lc-logo-box img { width:26px; height:26px; object-fit:contain; }
.lc-school-info { min-width:0; flex:1; }
.lc-card-type { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; line-height:1.2; }
.lc-school-name { font-size:8px; font-weight:500; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }

/* Body — padat, tanpa space kosong */
.lc-body { flex:1; display:flex; align-items:stretch; gap:8px; padding:6px 8px; overflow:hidden; }

/* Photo area */
.lc-photo { width:52px; height:68px; border-radius:4px; border:1.5px solid var(--outline-variant); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--surface-container); align-self:center; }
.lc-photo img { width:100%; height:100%; object-fit:cover; }
.lc-photo .material-symbols-outlined { font-size:26px; color:var(--outline); }

/* Info area */
.lc-info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.lc-name { font-size:12px; font-weight:700; color:var(--on-surface); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.lc-detail { display:flex; align-items:baseline; gap:4px; font-size:10px; }
.lc-label { font-weight:600; color:var(--on-surface-variant); font-size:9px; min-width:30px; flex-shrink:0; }
.lc-sep { color:var(--outline); font-size:9px; }
.lc-val { color:var(--on-surface); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10px; }

/* QR area */
.lc-qr { flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.lc-qr img { width:64px; height:64px; border-radius:4px; }
.lc-qr-label { font-size:7px; color:var(--on-surface-variant); text-align:center; }

/* Footer bar */
.lc-footer { background:var(--primary); color:rgba(255,255,255,.9); font-size:7px; padding:4px 10px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; }

/* Print page wrapper (screen: minimal) */
.print-page-group { margin-bottom:32px; }

/* Class Monitor Cards */
.class-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:24px; }
.class-card-header { padding:24px; border-bottom:1px solid var(--surface-container-high); background:var(--surface); display:flex; justify-content:space-between; align-items:flex-start; }
.class-stats { display:flex; gap:16px; }
.class-stat { text-align:center; }
.class-stat .num { font-size:24px; font-weight:600; color:var(--primary); }
.class-stat .num span { font-size:14px; color:var(--on-surface-variant); font-weight:400; }
.absent-list { padding:16px; }
.absent-item { display:flex; align-items:center; gap:12px; padding:8px; border-radius:var(--radius); background:rgba(255,218,214,.2); border:1px solid rgba(255,218,214,.5); margin-bottom:8px; }
.absent-item .initials { width:32px; height:32px; border-radius:var(--radius-full); background:var(--surface-container); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:var(--on-surface-variant); }

/* Filter Bar */
.filter-bar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:32px; }
.filter-bar .form-input,.filter-bar .form-select { width:auto; min-width:180px; padding:8px 16px; font-size:14px; }

/* Settings Page */
.settings-grid { display:grid; grid-template-columns:2fr 1fr; gap:32px; align-items:start; }
.danger-zone { background:rgba(255,218,214,.1); border-radius:var(--radius-md); border:1px solid rgba(186,26,26,.2); overflow:hidden; position:relative; }
.danger-zone::before { content:''; position:absolute; left:0; top:0; width:4px; height:100%; background:var(--error); }
.danger-zone .danger-header { padding:16px; border-bottom:1px solid rgba(186,26,26,.1); background:rgba(255,218,214,.2); }
.danger-zone .danger-body { padding:16px; }

/* Grid utils */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.gap-sm { gap:8px; }
.gap-md { gap:16px; }
.gap-lg { gap:24px; }
.mb-lg { margin-bottom:24px; }
.mb-xl { margin-bottom:32px; }
.mt-lg { margin-top:24px; }
.text-center { text-align:center; }

/* Page Title */
.page-title h1 { font-size:32px; font-weight:700; color:var(--on-surface); letter-spacing:-0.02em; }
.page-title p { font-size:16px; color:var(--on-surface-variant); margin-top:4px; }

/* Responsive */
@media(max-width:1024px) {
  .stat-grid { grid-template-columns:repeat(3,1fr); }
  .scan-layout { grid-template-columns:1fr; }
  .settings-grid { grid-template-columns:1fr; }
  .class-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left:0; }
  .main-content.expanded { margin-left:0; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .grid-2 { grid-template-columns:1fr; }
  .class-grid { grid-template-columns:1fr; }
  .card-grid { grid-template-columns:repeat(2,1fr); }
  .page-canvas { padding:16px; }
}
@media(max-width:480px) {
  .stat-grid { grid-template-columns:1fr; }
  .card-grid { grid-template-columns:1fr; }
  .filter-bar { flex-direction:column; }
  .filter-bar .form-input,.filter-bar .form-select { width:100%; }
}

/* Scan result animation */
.scan-result { animation:popIn .3s ease; }
@keyframes popIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }

/* ===== PRINT STYLES — F4 (215.9×330.2mm), 12 Kartu Landscape (2×6) ===== */
@media print {
  @page {
    size: 215.9mm 330.2mm; /* F4 paper */
    margin: 0;             /* Bersih dari header/footer browser */
  }

  /* Reset global */
  html, body {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 215.9mm !important;
    height: auto !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Bersihkan wrapper struktural */
  .app-wrapper,
  .main-content,
  .page-canvas {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  /* Sembunyikan semua elemen UI — area cetak BERSIH */
  .sidebar,
  .topbar,
  .no-print,
  header,
  .flex-between,
  .filter-bar {
    display: none !important;
  }

  /* ── Page group: setiap <div class="print-page-group"> = 1 halaman ── */
  .print-page-group {
    page-break-after: always !important;
    break-after: page !important;
    width: 215.9mm !important;
    height: 330.2mm !important;
    box-sizing: border-box !important;
    /* Centering 2 kartu (171.2mm) pada lebar F4 (215.9mm) */
    padding: 3.16mm 22.35mm !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  .print-page-group:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }

  /* ── Grid: 2 kolom × 6 baris = 12 kartu/halaman ── */
  .card-print-grid {
    display: grid !important;
    grid-template-columns: 85.60mm 85.60mm !important;
    grid-template-rows: repeat(6, 53.98mm) !important;
    gap: 0 !important;        /* Tight-fit agar muat 12 kartu */
    width: 171.20mm !important;  /* 2 × 85.60mm */
    height: 323.88mm !important; /* 6 × 53.98mm */
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* ── Landscape Card (print) ── */
  .lc-card {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    width: 85.60mm !important;
    height: 53.98mm !important;
    max-width: 85.60mm !important;
    aspect-ratio: auto !important;
    border-radius: 2mm !important;
    border: 0.25mm solid #bbb !important;
    background: #ffffff !important;
    box-shadow: none !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
  }

  /* ── Header — logo kotak di kiri saja ── */
  .lc-header {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: #004ac6 !important;
    color: #ffffff !important;
    padding: 1.8mm 2mm !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 2mm !important;
    flex-shrink: 0 !important;
    min-height: 10mm !important;
    max-height: 10mm !important;
    box-sizing: border-box !important;
  }

  .lc-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 1.8mm !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  /* Logo kotak — satu-satunya logo, di sisi kiri */
  .lc-logo-box {
    width: 7mm !important;
    height: 7mm !important;
    background: #ffffff !important;
    border-radius: 1mm !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }

  .lc-logo-box img {
    width: 6mm !important;
    height: 6mm !important;
    object-fit: contain !important;
  }

  /* Logo lingkaran lama — tidak dipakai, sembunyikan */
  .lc-logo-img,
  .lc-logo-placeholder { display: none !important; }

  .lc-school-info {
    min-width: 0 !important;
    flex: 1 !important;
  }

  .lc-card-type {
    font-size: 7pt !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
  }

  .lc-school-name {
    font-size: 5.5pt !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.85) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 55mm !important; /* lebih lebar karena tidak ada logo kanan */
  }

  /* ── Body — padat, tanpa space kosong ── */
  .lc-body {
    flex: 1 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 2mm !important;
    padding: 2mm 2mm !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* ── Photo ── lebih besar mengisi area kartu */
  .lc-photo {
    width: 17mm !important;
    height: 23mm !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    border-radius: 1mm !important;
    border: 0.3mm solid #ccc !important;
    overflow: hidden !important;
    background: #e8e8e8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .lc-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .lc-photo .material-symbols-outlined {
    font-size: 18pt !important;
    color: #999 !important;
  }

  /* ── Info ── */
  .lc-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 1mm !important;
  }

  .lc-name {
    font-size: 8.5pt !important;
    font-weight: 700 !important;
    color: #0b1c30 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 1.5mm !important;
    line-height: 1.1 !important;
  }

  .lc-detail {
    display: flex !important;
    align-items: baseline !important;
    gap: 1mm !important;
    font-size: 6.5pt !important;
    line-height: 1.4 !important;
  }

  .lc-label {
    font-weight: 600 !important;
    color: #555 !important;
    font-size: 6pt !important;
    min-width: 9mm !important;
    flex-shrink: 0 !important;
  }

  .lc-sep {
    color: #aaa !important;
    font-size: 6pt !important;
  }

  .lc-val {
    color: #0b1c30 !important;
    font-size: 6.5pt !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── QR Code — lebih besar ── */
  .lc-qr {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5mm !important;
  }

  .lc-qr img {
    width: 21mm !important;
    height: 21mm !important;
    display: block !important;
  }

  .lc-qr-label {
    font-size: 4.5pt !important;
    color: #777 !important;
    text-align: center !important;
  }

  /* ── Footer ── */
  .lc-footer {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: #004ac6 !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 5pt !important;
    padding: 1.5mm 2.5mm !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Switch Toggle Styles */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
.switch input:checked + .slider {
  background-color: var(--primary) !important;
}
.switch input:checked + .slider:before {
  transform: translateX(24px);
}

.chip-bolos { background:rgba(186,26,26,.08); color:var(--error); border:1px solid rgba(186,26,26,.2); font-weight:700; }

/* ── Laporan Tabs ─────────────────────────────────────────── */
.lap-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--outline-variant);
  margin-bottom: 24px; overflow-x: auto;
}
.lap-tab-link {
  padding: 12px 16px; font-weight: 600; white-space: nowrap;
  color: var(--on-surface-variant); text-decoration: none;
  border-bottom: 3px solid transparent; transition: color .15s, border-color .15s;
}
.lap-tab-link:hover { color: var(--on-surface); }
.lap-tab-active { color: var(--primary) !important; border-bottom-color: var(--primary) !important; }

/* ── Progress bar via data-attr (JS sets width) ───────────── */
.progress-bar { width: 0; transition: width .3s ease; }

/* ── Persentase badge (JS sets color by value) ────────────── */
.pct-badge { font-weight: 700; }

/* ── Role badge (JS sets color by role) ──────────────────── */
.role-badge {
  font-size: 11px; font-weight: 700;
  padding: 1px 6px;
  background: var(--surface-container);
  border-radius: 99px;
}
.role-badge[data-role="admin"]  { color: var(--error); }
.role-badge[data-role="bk"]     { color: var(--primary); }
.role-badge[data-role="piket"]  { color: #007d55; }
.role-badge[data-role="guru"]   { color: #008250; }