/* ===== PresensiApp Design System — Academic Corporate ===== */
/* ===== Tema: Orange (#FFA500) | SB Admin 2 Bootstrap 4 compat ===== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Warna Dasar Netral & Kontras Tinggi (Anti-AI Slop) */
  --primary: #1E3A8A;                 /* Royal Blue / Navy */
  --primary-rgb: 30, 58, 138;
  --primary-container: #EFF6FF;       /* Soft Blue Tint */
  --primary-dark: #0F172A;            /* Dark Navy */
  --on-primary: #ffffff;
  --on-primary-container: #1E3A8A;
  
  --surface: #F8FAFC;                 /* Off-white background */
  --surface-container-lowest: #ffffff;/* Pure White for Cards */
  --surface-container-low: #F1F5F9;   /* Slate Light */
  --surface-container: #E2E8F0;       /* Slate Medium */
  --surface-container-high: #CBD5E1;  /* Slate High */
  --surface-container-highest: #94A3B8;
  
  --on-surface: #0F172A;              /* Navy Gelap */
  --on-surface-variant: #475569;      /* Slate Grey */
  --outline: #94A3B8;
  --outline-variant: #CBD5E1;         /* Border tegas */
  --background: #F8FAFC;              /* Off-white */
  
  --secondary: #0F172A;
  --secondary-container: #EFF6FF;     /* Highlight background */
  --on-secondary-container: #1E3A8A;  /* Highlight text */
  --tertiary: #10B981;                /* Aksen Hijau Sukses */
  --tertiary-container: #E6F4EA;
  --on-tertiary-container: #065F46;
  
  --error: #EF4444;
  --error-container: #FFEBEE;
  --on-error-container: #991B1B;
  
  --inverse-surface: #0F172A;
  --inverse-on-surface: #F8FAFC;
  
  --gradient-digital-card: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
  --gradient-sidebar: linear-gradient(180deg, #1E3A8A 10%, #0F172A 100%);
  
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.08);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.1);
  
  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-body); background:var(--background); color:var(--on-surface); min-height:100vh; display:flex; font-size:15px; line-height:1.5; }
h1, h2, h3, h4, h5, h6, .font-heading { font-family:var(--font-heading); }
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); color:var(--on-primary); }
.btn-primary:hover { background:var(--primary-dark); }
.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); }

/* ── Portal Dashboard Layout (screen.png) ───────────────────── */
.portal-layout {
  display: grid;
  grid-template-columns: 3.2fr 1.25fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1024px) {
  .portal-layout {
    grid-template-columns: 1fr;
  }
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .portal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .portal-grid {
    grid-template-columns: 1fr;
  }
}

.portal-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.portal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px -4px rgba(15, 23, 42, 0.08);
  border-color: var(--primary);
}
.portal-card.active {
  border: 2px solid #b45309;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.15);
}
.portal-icon-box {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform 0.2s ease;
}
.portal-card:hover .portal-icon-box {
  transform: scale(1.08);
}
.portal-card h4 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1.3;
  margin-bottom: 6px;
}
.portal-card p {
  font-size: 12px;
  color: var(--on-surface-variant);
  line-height: 1.45;
}

.action-banner-brown {
  background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  box-shadow: 0 8px 16px -2px rgba(120, 53, 15, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.action-banner-brown:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -2px rgba(120, 53, 15, 0.35);
}
.action-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.role-badge[data-role="piket"]  { color: #007d55; }
.role-badge[data-role="guru_mapel"] { color: #f59e0b; }
.role-badge[data-role="guru"]   { color: #008250; }

/* ── Sidebar Dropdown Accordion & Badge Soon ────────────── */
.nav-dropdown {
  display: flex;
  flex-direction: column;
}
.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-radius: var(--radius);
  color: var(--on-surface-variant);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  user-select: none;
}
.nav-dropdown-toggle:hover {
  background: var(--surface-container-high);
  color: var(--primary);
}
.nav-dropdown-toggle .chevron-icon {
  transition: transform 0.25s ease;
  font-size: 20px;
}
.nav-dropdown.open .nav-dropdown-toggle .chevron-icon {
  transform: rotate(180deg);
}
.nav-dropdown.active .nav-dropdown-toggle {
  color: var(--primary);
  font-weight: 700;
}
.nav-dropdown-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding-left: 20px;
  margin-top: 4px;
  margin-bottom: 4px;
}
.nav-dropdown.open .nav-dropdown-menu {
  display: flex;
}
.nav-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--on-surface-variant);
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
  text-decoration: none;
}
.nav-dropdown-item:hover {
  background: var(--surface-container-low);
  color: var(--primary);
}
.nav-dropdown-item.active {
  background: rgba(255, 165, 0, 0.12);
  color: var(--primary-dark);
  font-weight: 700;
}

.badge-soon {
  font-size: 10px;
  font-weight: 700;
  background: rgba(144, 77, 0, 0.12);
  color: #904d00;
  border: 1px solid rgba(144, 77, 0, 0.2);
  border-radius: var(--radius-full);
  padding: 1px 6px;
  letter-spacing: 0.03em;
}

/* ===== SB Admin 2 Sidebar Compat (Bootstrap 4 collapse) ===== */
/* NOTE: class bg-gradient-* berada pada elemen yang SAMA dengan .sidebar,
   jadi pakai selector gabungan (.sidebar.bg-gradient-*) bukan descendant. */
.sidebar.bg-gradient-primary,
#accordionSidebar.bg-gradient-primary,
ul.sidebar.bg-gradient-primary,
.sidebar .bg-gradient-orange,
.sidebar .bg-gradient-primary {
  background: var(--gradient-sidebar) !important;
}
.sidebar .collapse-inner {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.35rem;
  margin: 0.25rem;
  padding: 0.25rem;
}
.sidebar .nav-item .nav-link span {
  font-size: .95rem;
}
.sidebar .nav-item .nav-link i {
  font-size: .95rem;
}
/* Submenu: selalu terbaca di atas gradien orange gelap */
.sidebar .nav-item .collapse .collapse-inner .collapse-item {
  color: #ffffff !important;
  font-weight: 500;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
.sidebar .nav-item .collapse .collapse-inner .collapse-item:active {
  color: #1f2937 !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
}
.sidebar .nav-item .collapse .collapse-inner .collapse-item.active {
  color: #1f2937 !important;
  background-color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 700;
}
/* Fix sidebar brand teks di atas gradien */
.sidebar .sidebar-brand-text { color: #ffffff !important; }
.sidebar .sidebar-brand-icon i { color: #ffffff !important; }
.sidebar hr.sidebar-divider { border-top: 1px solid rgba(255,255,255,0.2); }
.sidebar .sidebar-heading {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.13rem;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
}
.sidebar .nav-item .nav-link {
  color: rgba(255,255,255,0.85) !important;
}
.sidebar .nav-item .nav-link:hover {
  color: #ffffff !important;
}
.sidebar .nav-item.active .nav-link {
  color: #ffffff !important;
  font-weight: 700;
}
.sidebar .nav-item .nav-link i {
  color: rgba(255,255,255,0.7);
  margin-right: 0.25rem;
}
/* Chevron arrow rotasi */
.sidebar .nav-item .nav-link[aria-expanded='true'] .fa-angle-down {
  transform: rotate(180deg);
  transition: transform 0.2s;
}
.sidebar .nav-item .nav-link .fa-angle-down {
  margin-right: 0 !important;
  margin-left: auto !important;
  transition: transform 0.2s;
}

/* ============================================================
   DESIGN SYSTEM v1 — Konsistensi (versi 1) + Aksesibilitas WCAG AA
   Token utama sudah di :root (navy #1E3A8A). Bagian ini menstandarkan
   komponen agar seragam di seluruh 80+ view tanpa mengubah tiap markup.
   ============================================================ */

/* --- Konsistensi radius & border: satu sistem per halaman (Shape Lock) --- */
:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* --- Card: border 2px tegas (signature versi 1), bukan shadow generik --- */
.card {
  border: 1px solid var(--outline-variant) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
}
.card-header {
  border-bottom: 1px solid var(--outline-variant) !important;
  background: var(--surface-container-lowest) !important;
  font-family: var(--font-heading);
}
/* Header gradient navy (dipakai dashboard & beberapa halaman):
   jangan ditimpa background putih di atas — biarkan inline gradient tampil. */
.card-header[style*="linear-gradient"],
.card-header.bg-gradient-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
}
.card-header[style*="linear-gradient"] h6,
.card-header.bg-gradient-primary h6 { color: #fff !important; }

/* --- Page heading --- */
.page-heading { letter-spacing: -0.02em; }
.page-heading .h3 { font-weight: 800; }

/* --- Stat card (versi 1) --- */
.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow .15s ease;
}
.stat-card:hover { box-shadow: var(--shadow-hover); }
.stat-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.stat-icon-primary { background: var(--primary-container); color: var(--on-primary-container); border: 1px solid var(--primary-border, #BFDBFE); }
.stat-icon-success { background: var(--tertiary-container); color: var(--on-tertiary-container); border: 1px solid #A7F3D0; }
.stat-icon-warning { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.stat-icon-danger  { background: var(--error-container); color: var(--on-error-container); border: 1px solid #FECACA; }
.stat-info .stat-label { font-size: 12px; font-weight: 700; color: var(--on-surface-variant); text-transform: uppercase; letter-spacing: .04em; }
.stat-info .stat-value { font-size: 24px; font-weight: 800; color: var(--on-surface); line-height: 1.1; margin-top: 2px; }
.stat-info .stat-desc  { font-size: 12px; color: var(--on-surface-variant); margin-top: 4px; }

/* --- Status pill (versi 1): hadir/sakit/izin/alpa/bolos/draft --- */
.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 700; border: 1px solid transparent; white-space: nowrap;
}
.status-hadir { background: var(--tertiary-container); color: var(--on-tertiary-container); border-color: #A7F3D0; }
.status-sakit { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.status-izin  { background: var(--primary-container); color: var(--on-primary-container); border-color: #BFDBFE; }
.status-alpa  { background: #FEE2E2; color: #991B1B; border-color: #FECACA; }
.status-bolos { background: #F3F4F6; color: #374151; border-color: #E5E7EB; }
.status-draft { background: #F3F4F6; color: #4B5563; border-color: #E5E7EB; }

/* --- Presence selector (ramah gaptek) --- */
.presence-selector { display: flex; gap: 8px; }
.presence-option { flex: 1; position: relative; }
.presence-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.presence-label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 12px 8px; border: 2px solid var(--outline-variant); border-radius: var(--radius-sm);
  font-weight: 700; font-size: 13px; cursor: pointer; transition: all .15s ease; text-align: center;
  background: var(--surface-container-lowest);
}
.presence-option input:checked + .presence-label { border-width: 2px; }
.option-hadir input:checked + .presence-label { background: var(--tertiary-container); border-color: var(--tertiary); color: var(--on-tertiary-container); }
.option-sakit input:checked + .presence-label { background: #FEF3C7; border-color: #D97706; color: #92400E; }
.option-izin  input:checked + .presence-label { background: var(--primary-container); border-color: var(--primary); color: var(--on-primary-container); }
.option-alpa  input:checked + .presence-label { background: #FEE2E2; border-color: var(--error); color: #991B1B; }

/* --- Info alert (versi 1) --- */
.info-alert {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--primary-container); border: 1px solid var(--primary-border, #BFDBFE);
  border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 24px;
}
.info-alert-icon { font-size: 22px; color: var(--on-primary-container); flex-shrink: 0; }
.info-alert-text h5 { font-size: 14px; color: var(--on-primary-container); margin-bottom: 4px; font-weight: 700; }
.info-alert-text p  { font-size: 13px; color: var(--on-primary-container); margin: 0; }

/* --- Buttons: konsistensi border 2px + fokus aksesibel --- */
.btn { font-weight: 700; border-radius: var(--radius-sm); letter-spacing: .01em; }
.btn:focus, .btn-primary:focus { box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15); outline: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark, #172554); border-color: var(--primary-dark, #172554); }

/* --- Forms: label di atas, fokus jelas (design-rule.md) --- */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--on-surface); }
.form-control, .form-select {
  padding: 10px 14px; font-size: 14px;
  border: 1px solid var(--outline-variant); border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}
.form-label-required::after { content: ' *'; color: var(--error); }

/* --- Data table: header tegas, zebra lembut --- */
.table-responsive { border-radius: var(--radius-md); }
.data-table th {
  background: var(--surface-container-low);
  border-bottom: 2px solid var(--outline-variant);
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
}
.data-table td { border-bottom: 1px solid var(--outline-variant); vertical-align: middle; }
.data-table tbody tr:hover td { background: var(--surface-container-low); }

/* --- Tabs (versi 1) --- */
.nav-tabs { display: flex; gap: 8px; border-bottom: 2px solid var(--outline-variant); margin-bottom: 20px; flex-wrap: wrap; }
.tab-link {
  padding: 10px 18px; font-size: 14px; font-weight: 700; color: var(--on-surface-variant);
  border-bottom: 3px solid transparent; cursor: pointer; transition: all .15s ease;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
.tab-link:hover { color: var(--primary); }
.tab-link.active { color: var(--primary); border-bottom-color: var(--primary); }

/* --- Filter bar & search --- */
.filter-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.search-input-wrap { position: relative; flex: 1; min-width: 240px; }
.search-input-wrap .material-symbols-outlined, .search-input-wrap i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--on-surface-variant); font-size: 20px; pointer-events: none;
}
.search-input-wrap input { padding-left: 40px; }

/* --- Pagination --- */
.pagination-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--outline-variant); font-size: 13px; color: var(--on-surface-variant); }

/* --- Aksesibilitas: focus ring global (WCAG) --- */
a:focus, button:focus, .btn:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(30, 58, 138, 0.5);
  outline-offset: 2px;
}

/* --- Konsistensi font: heading selalu Plus Jakarta Sans --- */
h1, h2, h3, h4, h5, h6, .card-title, .stat-value, .page-heading h1 {
  font-family: var(--font-heading);
}

/* --- Spacing vertikal antar blok (design-rule.md: 24-32px) --- */
.mb-section { margin-bottom: 32px; }
.mb-card { margin-bottom: 20px; }

/* --- Responsive touch target (design-rule.md: min 48px) --- */
@media (max-width: 768px) {
  .btn, .form-control, .form-select { min-height: 44px; }
  .presence-label { min-height: 56px; }
}