/* ============================================================
   assets/css/style.css
   Tema Hijau Islami — Sistem Absensi Digital Madrasah
   ============================================================ */

:root {
  --primary:        #1a7a4a;
  --primary-dark:   #145f39;
  --primary-light:  #d4edda;
  --secondary:      #f0a500;
  --accent:         #2ecc71;
  --danger:         #e74c3c;
  --warning:        #f39c12;
  --info:           #3498db;
  --dark:           #1a2332;
  --sidebar-bg:     #0d2414;
  --sidebar-width:  260px;
  --topbar-height:  60px;
  --font:           'Plus Jakarta Sans', sans-serif;
  --border-radius:  12px;
  --shadow:         0 2px 12px rgba(0,0,0,0.08);
  --shadow-md:      0 4px 20px rgba(0,0,0,0.12);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font);
  background: #f4f6f9;
  color: #2d3748;
  margin: 0;
  overflow-x: hidden;
}

/* ---- SIDEBAR ---- */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1040;
  transition: transform .3s ease;
  scrollbar-width: thin;
  scrollbar-color: #2d4a2d transparent;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  gap: 10px;
}
.sidebar-brand-name {
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.3;
}
.sidebar-brand-sub {
  color: rgba(255,255,255,.5);
  font-size: .7rem;
}

.sidebar-nav {
  padding: 12px 0 20px;
}

.nav-section-title {
  color: rgba(255,255,255,.35);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 20px 4px;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: rgba(255,255,255,.65);
  font-size: .875rem;
  font-weight: 500;
  border-radius: 0;
  transition: all .2s;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.sidebar-nav .nav-link:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
  border-left-color: var(--accent);
}
.sidebar-nav .nav-link.active {
  background: rgba(46,204,113,.12);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}
.sidebar-nav .nav-link i { font-size: 1rem; width: 20px; text-align: center; }

.nav-group-toggle .submenu-caret {
  font-size: .75rem;
  width: auto;
  transition: transform .2s;
}
.nav-group-toggle[aria-expanded="true"] .submenu-caret {
  transform: rotate(180deg);
}
.nav-sublink {
  padding-left: 44px !important;
  font-size: .82rem !important;
}
.nav-sublink i.bi-dot {
  font-size: 1.4rem;
  width: 14px !important;
  margin-left: -4px;
}

/* ---- MAIN WRAPPER ---- */
.main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  transition: margin-left .3s ease;
}

/* ---- TOPBAR ---- */
.topbar {
  position: sticky;
  top: 0;
  height: var(--topbar-height);
  background: #fff;
  border-bottom: 1px solid #e8ecf0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  z-index: 1030;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.topbar-title {
  font-weight: 600;
  color: #2d3748;
  font-size: .95rem;
}
.sidebar-toggle {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #4a5568;
  padding: 6px 10px;
}
.avatar-initials {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.live-clock {
  font-family: 'Courier New', monospace;
  font-size: .8rem;
  font-weight: 600;
}

/* ---- PAGE CONTENT ---- */
.page-content {
  padding: 24px;
}

/* ---- CARDS ---- */
.card {
  border: none;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid #eef0f3;
  font-weight: 600;
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
  padding: 14px 20px;
}

/* Stat Cards */
.stat-card {
  border-radius: var(--border-radius);
  padding: 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}
.stat-card .stat-icon {
  font-size: 2rem;
  opacity: .85;
  margin-bottom: 8px;
}
.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.stat-card .stat-label {
  font-size: .8rem;
  opacity: .85;
  margin-top: 4px;
}
.bg-emerald  { background: linear-gradient(135deg, #1a7a4a, #27ae60); }
.bg-azure    { background: linear-gradient(135deg, #1565c0, #1976d2); }
.bg-amber    { background: linear-gradient(135deg, #e65100, #f57c00); }
.bg-violet   { background: linear-gradient(135deg, #6a1b9a, #8e24aa); }
.bg-rose     { background: linear-gradient(135deg, #b71c1c, #c62828); }
.bg-teal     { background: linear-gradient(135deg, #00695c, #00897b); }

/* ---- STATUS BADGES ---- */
.badge-hadir    { background: #d4edda; color: #155724; }
.badge-terlambat{ background: #fff3cd; color: #856404; }
.badge-izin     { background: #d1ecf1; color: #0c5460; }
.badge-sakit    { background: #fde8d8; color: #7e3a0a; }
.badge-alpha    { background: #f8d7da; color: #721c24; }

/* ---- TABLE ---- */
.table > :not(caption) > * > * { padding: .75rem 1rem; }
.table thead th {
  background: #f8fafb;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
}

/* ---- BUTTONS ---- */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* ---- QR Scanner ---- */
#qr-reader {
  border-radius: var(--border-radius);
  overflow: hidden;
  background: #000;
}
#qr-reader video {
  border-radius: var(--border-radius);
}
.scan-result-box {
  background: #fff;
  border-radius: var(--border-radius);
  border: 2px solid var(--primary);
  padding: 20px;
  text-align: center;
}
.scan-success { border-color: var(--accent); }
.scan-error   { border-color: var(--danger); }
.scan-pulse {
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; }
  50%      { opacity:.5; }
}

/* ---- QR Code Print ---- */
.qr-card-print {
  width: 85.6mm; height: 54mm;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  page-break-inside: avoid;
}
.qr-card-print .info { flex: 1; }
.qr-card-print .info .nama { font-size: .85rem; font-weight: 700; }
.qr-card-print .info .sub  { font-size: .65rem; color: #666; }

/* ---- Forms ---- */
.form-label { font-weight: 500; font-size: .875rem; color: #374151; }
.form-control, .form-select {
  border-radius: 8px;
  border-color: #d1d5db;
  font-size: .875rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26,122,74,.15);
}

/* ---- Responsive Sidebar ---- */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-wrapper { margin-left: 0; }
  .page-content { padding: 16px; }
}

/* ---- Overlay for mobile sidebar ---- */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1039;
}
.sidebar-overlay.show { display: block; }

/* ---- Login Page ---- */
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #0d2414 0%, #1a4a2a 40%, #1a7a4a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.login-logo {
  text-align: center;
  margin-bottom: 28px;
}
.login-logo .app-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: 8px;
}
.login-logo .app-sub {
  font-size: .8rem;
  color: #6b7280;
}

/* ---- Print ---- */
@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .main-wrapper { margin: 0; }
  .page-content { padding: 0; }
}