:root{
  --primary: #0b6b4f;
  --primary-dark: #084a37;
  --primary-light: #e8f5f0;
  --gold: #d4af37;
  --bg: #f5f3ee;
  --text-muted: #6b7280;
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow: 0 8px 24px rgba(11,107,79,0.10);
}

*{box-sizing:border-box;}
body{
  background: var(--bg);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #1f2937;
}

/* ===== Pola geometris islami untuk hero/kartu ===== */
.islamic-pattern{
  background-color: var(--primary);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.06) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 20px);
  position:relative;
}

.hero-card{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius-lg);
  color:#fff;
  padding: 28px 24px;
  box-shadow: var(--shadow);
}
.hero-card h1,.hero-card h2{color:#fff;}
.hero-card .accent-gold{color: var(--gold); letter-spacing:1px;}

.card-app{
  background:#fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  border: none;
}

.btn-primary-app{
  background: var(--primary);
  border-color: var(--primary);
  color:#fff;
  border-radius: 10px;
  font-weight:600;
}
.btn-primary-app:hover{ background: var(--primary-dark); color:#fff; }

.btn-outline-app{
  border: 1.5px solid var(--primary);
  color: var(--primary);
  border-radius: 10px;
  font-weight:600;
  background: transparent;
}
.btn-outline-app:hover{ background: var(--primary-light); color: var(--primary-dark); }

.sidebar{
  background: var(--primary-dark);
  min-height: 100vh;
  color: #fff;
}
.sidebar .brand{
  padding: 20px; font-weight:700; font-size:1.15rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar a{
  color: rgba(255,255,255,0.85);
  padding: 12px 20px;
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  font-size:.95rem;
  border-left:3px solid transparent;
}
.sidebar a:hover, .sidebar a.active{
  background: rgba(255,255,255,0.08);
  color:#fff;
  border-left:3px solid var(--gold);
}

.topbar{
  background:#fff;
  border-bottom: 1px solid #eee;
  padding: 14px 24px;
}

.stat-box{
  background:#fff;
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--primary);
}
.stat-box .num{ font-size:1.8rem; font-weight:700; color: var(--primary-dark); }
.stat-box .label{ color: var(--text-muted); font-size:.85rem; }

.badge-hadir{ background: #dcfce7; color:#15803d; }
.badge-terlambat{ background:#fef3c7; color:#b45309; }
.badge-alpha{ background:#fee2e2; color:#b91c1c; }
.badge-izin, .badge-sakit{ background:#e0e7ff; color:#4338ca; }
.badge-pulang{ background:#e5e7eb; color:#374151; }

/* ===== Kiosk Absen (tanpa login) ===== */
.kiosk-wrap{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: radial-gradient(circle at top, #0e7a5a, var(--primary-dark));
  color:#fff; text-align:center; padding: 20px;
}
.kiosk-clock{ font-size:2.6rem; font-weight:700; letter-spacing:1px; }
#qr-reader{ width:100%; max-width:420px; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); }
.kiosk-result{
  background:#fff; color:#111827; border-radius: var(--radius-lg);
  padding: 28px; max-width:420px; width:100%; box-shadow: var(--shadow);
}

/* ===== ID Card ===== */
.id-card{
  width: 340px; height: 214px; border-radius: 16px; overflow:hidden;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:#fff; position:relative; padding:16px; display:flex; gap:12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.id-card .photo{ width:80px; height:96px; object-fit:cover; border-radius:8px; border:2px solid var(--gold); background:#fff; }
.id-card .qr-box{ position:absolute; right:14px; bottom:14px; background:#fff; padding:4px; border-radius:6px; }
.id-card .school-name{ font-size:.72rem; letter-spacing:1px; color: var(--gold); text-transform:uppercase; font-weight:700;}
.id-card .student-name{ font-weight:700; font-size:1rem; margin-top:4px;}
.id-card .meta{ font-size:.75rem; color: rgba(255,255,255,0.85); }

@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; }
}