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

:root{
  --ink:        #1F2937;
  --slate:      #1F3B4D;   /* chalkboard navy */
  --slate-dark: #16293544;
  --gold:       #E3A857;   /* chalk gold accent */
  --gold-dark:  #C88A34;
  --paper:      #F6F4EE;   /* paper background */
  --paper-2:    #EFEBE0;
  --line:       #DDD6C4;
  --green:      #3E8E5A;
  --red:        #C1443B;
  --white:      #FFFFFF;
  --radius:     10px;
}

*{box-sizing:border-box;}

body{
  font-family:'Inter',sans-serif;
  background:var(--paper);
  color:var(--ink);
  margin:0;
}

h1,h2,h3,h4,.brand,.card-title,.page-title{
  font-family:'Poppins',sans-serif;
}

/* ---------- Layout ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:250px;
  flex-shrink:0;
  background:var(--slate);
  color:var(--paper);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}
.sidebar .brand{
  padding:22px 20px;
  font-weight:700;
  font-size:1.15rem;
  border-bottom:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; gap:10px;
}
.sidebar .brand .mark{
  width:34px;height:34px;border-radius:8px;
  background:var(--gold);
  display:flex;align-items:center;justify-content:center;
  color:var(--slate); font-weight:700;
}
.sidebar nav{ padding:14px 10px; flex:1; overflow-y:auto; }
.sidebar .nav-label{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:rgba(255,255,255,.45); padding:14px 12px 6px;
}
.sidebar a.nav-link{
  color:rgba(255,255,255,.82);
  padding:10px 12px;
  border-radius:8px;
  display:flex; align-items:center; gap:10px;
  font-size:.92rem;
  margin-bottom:2px;
  text-decoration:none;
  transition:background .15s ease;
}
.sidebar a.nav-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sidebar a.nav-link.active{ background:var(--gold); color:var(--slate); font-weight:600; }
.sidebar .user-box{
  padding:16px; border-top:1px solid rgba(255,255,255,.12);
  font-size:.85rem;
}
.sidebar .user-box a{ color:var(--gold); text-decoration:none; }

.main{ flex:1; min-width:0; }
.topbar{
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:14px 26px;
  display:flex; align-items:center; justify-content:space-between;
}
.topbar .page-title{ font-weight:600; font-size:1.15rem; margin:0; }
.content{ padding:26px; }

/* ---------- Components ---------- */
.stat-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
  display:flex; align-items:center; gap:14px;
}
.stat-card .icon{
  width:46px;height:46px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem; color:#fff; flex-shrink:0;
}
.stat-card .num{ font-family:'Poppins',sans-serif; font-size:1.5rem; font-weight:700; line-height:1; }
.stat-card .label{ font-size:.8rem; color:#6b7280; margin-top:4px; }

.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
}
.card-header{
  background:var(--white);
  border-bottom:1px solid var(--line);
  font-weight:600;
  border-radius:var(--radius) var(--radius) 0 0 !important;
}

.btn-primary{
  background:var(--slate); border-color:var(--slate);
}
.btn-primary:hover{ background:#142530; border-color:#142530; }
.btn-gold{ background:var(--gold); border-color:var(--gold); color:var(--slate); font-weight:600; }
.btn-gold:hover{ background:var(--gold-dark); border-color:var(--gold-dark); color:#fff; }

.table thead th{
  background:var(--paper-2);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#555;
  border-bottom:2px solid var(--line);
}
.table td, .table th{ vertical-align:middle; }

.badge-hadir{ background:#DDF3E4; color:var(--green); }
.badge-sakit{ background:#FDEBD3; color:#B8720F; }
.badge-izin{  background:#DCEBFB; color:#1D6FC7; }
.badge-alpa{  background:#FBDCDC; color:var(--red); }
.badge-terlambat{ background:#FCEACB; color:var(--gold-dark); }
.badge-pulangcepat{ background:#E7E1F5; color:#6544C4; }
.badge-prestasi{ background:#DDF3E4; color:var(--green); }
.badge-pelanggaran{ background:#FBDCDC; color:var(--red); }
.badge-konseling{ background:#E8E3F7; color:#6544C4; }

.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--slate) 0%, #0F1F29 100%);
  padding:20px;
}
.login-card{
  background:var(--white); border-radius:16px; padding:40px 36px;
  width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-card .mark{
  width:52px;height:52px;border-radius:12px;background:var(--gold);
  display:flex;align-items:center;justify-content:center;color:var(--slate);
  font-weight:700; font-size:1.3rem; margin-bottom:14px;
}

.required::after{ content:" *"; color:var(--red); }

@media (max-width: 860px){
  .sidebar{ position:fixed; left:-260px; z-index:1000; transition:left .2s ease; box-shadow:0 0 30px rgba(0,0,0,.3);}
  .sidebar.open{ left:0; }
  .app-shell{ display:block; }
  .content{ padding:16px; }
}

/* Grid tombol status absensi (Hadir/Sakit/Izin/Terlambat/Pulang Cepat/Alpha)
   supaya rapi 3 kolom x 2 baris, tidak ada tombol terakhir yang "nyangkut"
   sendirian di baris baru seperti kalau pakai btn-group bawaan Bootstrap. */
.status-btn-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(78px, 1fr));
  gap:4px;
  min-width:260px;
}
.status-btn-grid .btn{
  margin:0 !important;
  border-radius:6px !important;
  white-space:nowrap;
  padding:.25rem .4rem;
  font-size:.78rem;
}
@media (max-width: 860px){
  .status-btn-grid{ grid-template-columns: repeat(2, minmax(70px, 1fr)); min-width:0; }
}