/* ===============================
   GLOBAL
================================ */
*{
  box-sizing:border-box;
  font-family:'Rubik', sans-serif;
}

body{
  margin:0;
  background:#f4f6f8;
  color:#333;
}

.app{
  max-width:480px;
  margin:auto;
  min-height:100vh;
  background:#fff;
  animation:fadeUp .45s ease;
}

/* PAGE ANIMATION */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ===============================
   HEADER (TINGGI + HALUS)
================================ */
.header{
  background:linear-gradient(135deg,#1b9cdc,#38b6ff);
  padding:28px 20px 36px;
  border-bottom-left-radius:32px;
  border-bottom-right-radius:32px;
  color:#fff;
  min-height:160px;
  animation:slideDown .5s ease;
}

@keyframes slideDown{
  from{ transform:translateY(-20px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

.header-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.header-left{
  flex:1;
}

.header-org{
  font-size:11px;
  letter-spacing:.5px;
  opacity:.9;
}

.header-name{
  font-size:18px;
  font-weight:700;
  margin:4px 0;
  line-height:1.25;
}

.header-nip{
  font-size:12px;
  opacity:.9;
}

.header-avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#fff;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.header-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.header-bottom{
  margin-top:20px;
  display:flex;
  justify-content:space-between;
  font-size:12px;
}

.header-meta{
  display:flex;
  align-items:center;
  gap:6px;
}

/* ===============================
   CARD GLOBAL
================================ */
.summary-card,
.menu-card,
.news-card,
.student-card{
  margin:20px 16px;
  padding:16px;
  background:#fff;
  border-radius:24px;
  box-shadow:0 10px 26px rgba(0,0,0,.12);
}

/* ===============================
   SUMMARY
================================ */
.summary-title{
  font-size:13px;
  color:#777;
}

.summary-value{
  font-size:22px;
  font-weight:700;
  margin-top:4px;
}

/* ===============================
   MENU GRID
================================ */
.menu-title{
  font-size:15px;
  font-weight:700;
  margin-bottom:12px;
}

.menu-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.menu-item {
  padding: 4px 2px;
  border-radius: 10px;
  text-align: center;
}

.menu-item:hover{
  transform:translateY(-2px);
}

.menu-item:active{
  transform:scale(.97);
}

.menu-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  background:#f0f7ff;
  color:#1b9cdc;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin:auto;
  position:relative;
  overflow:hidden;
}

.menu-icon::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(27,156,220,.12);
  opacity:0;
  transition:.2s;
}

.menu-item:active .menu-icon::after{
  opacity:1;
}

.menu-icon i {
  font-size: 18px; /* lebih kecil */
}

.menu-label {
  font-size: 11px; /* lebih kecil */
  margin-top: 4px;
  font-weight: 500;
  color:#444;
  line-height:1.2;
}
a.menu-item,
a.menu-item:visited,
a.menu-item:hover,
a.menu-item:active,
a.menu-item:focus {
  text-decoration: none !important;
  color: inherit !important;
}
/* ===============================
   NEWS
================================ */
.news-item{
  display:flex;
  gap:12px;
}

.news-img{
  width:72px;
  height:72px;
  border-radius:16px;
  background:#ddd;
}

.news-content h4{
  font-size:14px;
  margin:0 0 4px;
}

.news-content p{
  font-size:12px;
  color:#777;
  margin:0;
}

/* ===============================
   STUDENT LIST
================================ */
.student-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.student-item{
  display:flex;
  align-items:center;
  padding:14px;
  border-radius:16px;
  background:#f6f8fb;
  transition:transform .2s ease;
}

.student-item:hover{
  transform:translateY(-2px);
}

.student-item:active{
  transform:scale(.98);
}

.student-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:14px;
  margin-right:12px;
}


/* Laki-laki → Biru */
.avatar-l{
  background:#1b9cdc;
}

/* Perempuan → Merah (soft) */
.avatar-p{
  background:#e76f51;
}

/* Default */
.avatar-default{
  background:#9aa0a6;
}

.student-info{
  flex:1;
}

.student-name{
  font-size:14px;
  font-weight:600;
  margin-bottom:2px;
}

.student-meta{
  font-size:12px;
  color:#777;
}

/* ===============================
   ICON BUTTON
================================ */
.icon-btn{
  width:28px;
  height:28px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

.edit{
  background:#e7f1ff;
  color:#1b9cdc;
}

/* ===============================
   DATATABLES (CARD MODE)
================================ */
table.dataTable{
  border:none;
}

table.dataTable.no-footer{
  border-bottom:none;
}

#tblSiswa thead{
  display:none;
}

.dataTables_paginate{
  margin-top:12px;
  text-align:center;
}

.dataTables_paginate .paginate_button{
  padding:4px 10px!important;
  border-radius:8px;
  margin:0 2px;
  transition:.2s;
}

.dataTables_paginate .paginate_button:hover{
  background:#1b9cdc!important;
  color:#fff!important;
}

/* =========================
   BOTTOM NAVIGATION
========================= */
.bottom-nav{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  max-width:480px;
  width:100%;
  height:70px;
  background:#fff;
  display:flex;
  justify-content:space-around;
  align-items:center;
  border-top:1px solid #eee;
  z-index:2000;
  overflow:visible; /* PENTING */
}

/* ITEM BIASA */
.bottom-nav .nav-item{
  flex:1;
  text-align:center;
  font-size:11px;
  color:#888;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  transition:.2s ease;
}

.bottom-nav .nav-item i{
  font-size:20px;
}

/* ACTIVE */
.bottom-nav .nav-item.active{
  color:#1b9cdc;
}

/* =========================
   TOMBOL TENGAH (QR ABSENSI)
========================= */
.bottom-nav .nav-main{
  flex:none;                 /* 🔥 ini kunci */
  width:64px;
  height:64px;
  border-radius:50%;
  background:#1b9cdc;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;
  top:-26px;

  box-shadow:0 14px 28px rgba(27,156,220,.45);
  color:#fff;
}

/* ICON QR */
.bottom-nav .nav-main i{
  font-size:30px;
  color:#fff;
}

/* GAMBAR QR */
.bottom-nav .nav-main img{
  width:36px;
  height:36px;
  object-fit:contain;
  display:block;
}

/* TAP EFFECT */
.bottom-nav .nav-main:active{
  transform:scale(.92);
}

/* SPACE BAWAH KONTEN */
.app{
  padding-bottom:90px;
}


/* ===============================
   DELETE BUTTON
================================ */
.delete{
  background:#ffeaea;
  color:#e74c3c;
  margin-right:6px;
}

/* ===============================
   FIX SPACING AFTER HEADER
================================ */
.student-card{
  margin-top:32px;        /* naik ke area biru */
  padding-top:20px;
}

/* ===============================
   CARD HEADER RAPi
================================ */
.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}

.menu-title{
  font-size:16px;
  font-weight:700;
  margin:0;
}

/* ===============================
   TOMBOL ADD RAPi
================================ */
.btn-add{
  width:36px;
  height:36px;
  border-radius:12px;
  background:#1b9cdc;
  color:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:18px;
  text-decoration:none;

  box-shadow:0 8px 18px rgba(27,156,220,.4);
}

.btn-add:active{
  transform:scale(.92);
}

/* ===============================
   STUDENT ITEM LEBIH HALUS
================================ */
.student-item{
  background:#f8fafc;
  padding:16px;
}

/* ===============================
   ACTION BUTTON ALIGN
================================ */
.student-item .icon-btn{
  margin-left:6px;
}



/* ===============================
   TOP NAVBAR
================================ */
.top-navbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
}

.nav-back{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#f1f3f5;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#333;
  text-decoration:none;
}

.nav-title{
  font-size:16px;
  font-weight:600;
}

/* ===============================
   FORM
================================ */
.input-card{
  margin-top:12px;
}

.form-title{
  font-size:18px;
  font-weight:700;
  margin:0 0 4px;
}

.form-desc{
  font-size:13px;
  color:#777;
  margin-bottom:16px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}

.form-group label{
  font-size:13px;
  color:#444;
}

.form-group input,
.form-group select{
  height:44px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid #ddd;
  background:#f6f8fb;
  font-size:14px;
  outline:none;
}

.form-group input:focus,
.form-group select:focus{
  border-color:#1b9cdc;
}

.form-group.error input,
.form-group.error select{
  border:1.5px solid #e74c3c;
  background:#fff6f6;
}

.form-error{
  font-size:12px;
  color:#e74c3c;
  margin-top:6px;
  display:none;
}

/* MUNCUL SAAT ERROR */
.form-group.error .form-error{
  display:block;
}

/* ANIMASI HALUS */
.form-error{
  animation:fadeError .25s ease;
}

@keyframes fadeError{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ===============================
   BUTTON
================================ */
.btn-primary{
  width:100%;
  height:48px;
  border:none;
  border-radius:16px;
  background:#1b9cdc;
  color:#fff;
  font-size:15px;
  font-weight:600;
  margin-top:10px;
  box-shadow:0 10px 22px rgba(27,156,220,.35);
}

.btn-primary:active{
  transform:scale(.97);
}

/* ===============================
   BACK DASHBOARD BUTTON
================================ */
.btn-back-dashboard{
  display:flex;
  align-items:center;
  gap:6px;

  padding:6px 14px;
  border-radius:999px;

  background:rgba(255,255,255,.18);
  color:#fff;

  font-size:12px;
  text-decoration:none;

  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  transition:all .25s ease;
}

/* ICON */
.btn-back-dashboard i{
  font-size:14px;
}

/* HOVER */
.btn-back-dashboard:hover{
  background:rgba(255,255,255,.28);
  transform:translateX(-2px);
}

/* ACTIVE / TAP */
.btn-back-dashboard:active{
  transform:scale(.95);
}

/* BASE ACTION BUTTON (EDIT & HAPUS) */
.btn-action{
  width:100%;
  height:42px;
  border:none;
  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:14px;
  font-weight:600;
  cursor:pointer;

  transition:.2s ease;
  text-decoration:none;
}

/* EDIT — SOFT BLUE */
.btn-edit{
  background:#eaf4fd;
  color:#1b9cdc;
  margin-bottom:10px;
}

.btn-edit:hover{
  background:#dff0ff;
}

.btn-edit:active{
  transform:scale(.97);
}

/* DELETE — SOFT RED */
.btn-delete{
  background:#fdecea;
  color:#e63946;
}

.btn-delete:hover{
  background:#f9d7d5;
}

.btn-delete:active{
  transform:scale(.97);
}

.btn-save {
  width: 100%;
  height: 50px;

  background: #1f9ad6;
  color: #fff;

  border: none;
  border-radius: 14px; /* bikin kapsul */

  font-size: 16px;
  font-weight: 600;
  letter-spacing: .3px;

  cursor: pointer;

  box-shadow: 0 8px 20px rgba(31,154,214,.25);
  transition: all .2s ease;
}

.btn-save:hover {
  background: #188fc8;
}

.btn-save:active {
  transform: scale(.97);
  box-shadow: 0 4px 10px rgba(31,154,214,.25);
}

.btn-save:focus {
  outline: none;
}

/* ===============================
   SPLASH SCREEN (TAMBAHAN)
================================ */
.splash{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#1b9cdc,#38b6ff);
}

.splash-box{
  text-align:center;
  color:#fff;
  animation:fadeUp .6s ease;
}

.splash-logo{
  width:96px;
  height:96px;
  border-radius:28px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:auto;
  box-shadow:0 14px 30px rgba(0,0,0,.25);
}

.splash-logo i{
  font-size:48px;
  color:#1b9cdc;
}

.splash-title{
  font-size:22px;
  font-weight:700;
  margin-top:18px;
}

.splash-desc{
  font-size:13px;
  opacity:.9;
  margin-top:6px;
}

/* ===============================
   SPLASH LOADING TEXT (PUTIH)
================================ */
.splash-loading{
  margin-top:16px;
  font-size:18px;
  font-weight:700;
  letter-spacing:.4px;
  color:#fff;                         /* 🤍 PUTIH */
  animation:loadingBlink 1.4s ease-in-out infinite;
}

/* ANIMASI KEDIP HALUS */
@keyframes loadingBlink{
  0%{
    opacity:1;
  }
  50%{
    opacity:.4;
  }
  100%{
    opacity:1;
  }
}
/* ===============================
   SPLASH LOGO ROTATE
================================ */
.splash-logo{
  animation:logoFloat 3s ease-in-out infinite;
}

.splash-logo i{
  animation:logoRotate 2.8s linear infinite;
}

/* LOGO NAIK TURUN HALUS */
@keyframes logoFloat{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
  100%{ transform:translateY(0); }
}

/* LOGO MUTER */
@keyframes logoRotate{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
/* ===============================
   LOADING TEXT (BESAR & TEBAL)
================================ */
.loading-text{
  margin-top:16px;
  font-size:18px;        /* lebih besar */
  font-weight:700;       /* tebal */
  letter-spacing:.4px;
  color:#1b9cdc;
}


/* ===== HERO ===== */
.hero-wrapper{
  padding:12px 16px 0;
}

.hero-image{
  width:100%;
  height:230px;
  object-fit:cover;
  border-radius:28px;
  display:block;
}

/* ===== LOGIN CARD ===== */
.login-card{
  margin:-80px 16px 0;
  background:#fff;
  border-radius:24px;
  padding:22px 20px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  position:relative;
  z-index:10;
}

.login-card h1{
  margin:0;
  font-size:18px;
  font-weight:700;
  text-align:center;
}

.login-card p{
  margin:6px 0 20px;
  font-size:13px;
  text-align:center;
  color:#666;
}

/* ===== FORM ===== */
.form-group{
  margin-bottom:14px;
}

.form-group label{
  font-size:12px;
  color:#555;
  margin-bottom:6px;
  display:block;
}

.form-group input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #ddd;
  background:#f3f6f9;
  font-size:14px;
  outline:none;
}

.form-group input:focus{
  border-color:#1b9cdc;
  background:#fff;
}

.form-group.error input,
.form-group.error select{
  border-color:#e63946;
}

.form-error{
  font-size:12px;
  color:#e63946;
  margin-top:4px;
}

/* ===== BUTTON ===== */
.btn-login{
  width:100%;
  padding:13px;
  background:#1b9cdc;
  border:none;
  border-radius:16px;
  color:#fff;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}

/* ===== EXTRA ===== */
.login-extra{
  margin-top:14px;
  text-align:center;
  font-size:12px;
}

.login-extra a{
  color:#1b9cdc;
  text-decoration:none;
  font-weight:500;
}

/* ===== SPACER ===== */
.spacer{
  height:70px;
}

/* ===============================
   ALERT ERROR GLOBAL
================================ */
.alert{
  position:relative;
  padding:14px 16px;
  border-radius:16px;
  margin:16px;
  font-size:13px;
  line-height:1.5;
  animation:fadeError .35s ease;
}

.alert-danger{
  background:#fff3f3;
  border:1.5px solid #f5c2c2;
  color:#c0392b;
  box-shadow:0 6px 18px rgba(231,76,60,.15);
}

/* LIST */
.alert-danger ul{
  padding-left:18px;
  margin:0;
}

.alert-danger li{
  margin-bottom:4px;
}

/* ICON */
.alert-danger::before{
  content:"⚠️";
  margin-right:6px;
}

/* CLOSE BUTTON */
.alert-close{
  position:absolute;
  top:10px;
  right:12px;
  border:none;
  background:none;
  font-size:18px;
  cursor:pointer;
  color:#c0392b;
}

.alert-close:hover{
  opacity:.7;
}

/* ANIMASI */
@keyframes fadeError{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}


.menu-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.menu-row .student-name{
  font-weight:400;
  color:#333;
}

/* LINK HANYA PANAH */
.menu-arrow-link{
  color:#777;
  font-size:18px;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.menu-arrow-link:hover{
  color:#1b9cdc;
}

/* GARIS PEMBATAS HALUS */
.student-item{
  border-bottom:1px solid #eee;
}

.student-item:last-child{
  border-bottom:none;
}

/* ===============================
   LOGOUT BUTTON - SOFT BLUE
================================ */
.btn-logout{
  width:100%;
  height:46px;
  border:none;
  border-radius:14px;

  background:#eaf4fd;          /* soft blue */
  color:#1b9cdc;               /* biru utama */

  font-size:14px;
  font-weight:600;

  cursor:pointer;
  transition:all .25s ease;
}

/* HOVER */
.btn-logout:hover{
  background:#dff0ff;
}

/* ACTIVE / TAP */
.btn-logout:active{
  transform:scale(.97);
  background:#d3ebff;
}

/* WRAPPER */
.logout-box{
  margin-top:12px;
  padding:16px;
  background:#f7f9fc;
}

/* FOOTER */
.app-footer{
  padding:12px 16px;
  font-size:13px;
  color:#1b9cdc;
}

/* SWEETALERT ULTRA MINI */
.swal-ultra-mini{
  border-radius:14px !important;
}

/* ICON */
.swal-ultra-mini .swal2-icon{
  margin:4px auto 6px !important;
  transform:scale(.8);   /* icon lebih kecil */
}

/* TITLE */
.swal-ultra-mini .swal2-title{
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  margin:0 0 4px !important;
}

/* TEXT */
.swal-ultra-mini .swal2-html-container,
.swal-ultra-mini .swal2-content{
  font-size:12px !important;
  line-height:1.3 !important;
  margin:0 !important;
}

/* BUTTON OK */
.swal-ultra-mini .swal2-confirm{
  height:32px !important;
  min-width:70px !important;
  padding:0 14px !important;
  font-size:12px !important;
  border-radius:8px !important;
}

.swal-ultra-mini .swal2-cancel{
  height:32px !important;
  min-width:70px !important;
  padding:0 14px !important;
  font-size:12px !important;
  border-radius:8px !important;
}

/* BUTTON WRAPPER */
.swal-ultra-mini .swal2-actions{
  margin-top:8px !important;
}
/* ICON POP ANIMATION */
.swal-ultra-mini .swal2-icon{
  animation: iconPop .35s ease-out;
}

@keyframes iconPop{
  0%{
    transform:scale(.6);
    opacity:0;
  }
  70%{
    transform:scale(1.05);
    opacity:1;
  }
  100%{
    transform:scale(.8); /* nyatu sama size icon kecil */
  }
}

/* DETAIL ROW */
.detail-row{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid #eee;
  font-size:14px;
}

.detail-row:last-child{
  border-bottom:none;
}

.detail-label{
  color:#777;
}

.detail-value{
  font-weight:500;
  color:#333;
}

/* BADGE */
.badge-active{
  color:#1b9cdc;
  font-weight:600;
}

.manual-status{
  margin-top:4px;
  padding:4px 6px;
  border-radius:6px;
  font-size:12px;
  border:1px solid #ddd;
  width:130px;
}

.status-badge{
  font-size:11px;
  padding:3px 8px;
  border-radius:12px;
  display:inline-block;
  margin-top:4px;
}

.status-hadir{ background:#d1e7dd; color:#0f5132; }
.status-izin{ background:#cff4fc; color:#055160; }
.status-sakit{ background:#f8d7da; color:#842029; }
.status-terlambat{ background:#fff3cd; color:#664d03; }

/* QUICK BUTTON */
.quick-action{
  display:flex;
  gap:8px;
  margin-top:6px;
}

.absen-btn{
  width:26px;
  height:26px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  cursor:pointer;
  transition:all 0.2s ease;
  opacity:0.5;
  transform:scale(1);
}

/* Saat dipilih */
.absen-btn.active{
  width:34px;
  height:34px;
  font-size:16px;
  opacity:1;
  transform:scale(1.2);
  box-shadow:0 0 0 2px #fff, 0 0 8px rgba(0,0,0,0.15);
  z-index:2;
}

.absen-btn.hadir{ background:#d1e7dd; color:#0f5132; }
.absen-btn.terlambat{ background:#fff3cd; color:#664d03; }
.absen-btn.izin{ background:#cff4fc; color:#055160; }
.absen-btn.sakit{ background:#f8d7da; color:#842029; }

/* ROW COLOR */
.status-row-hadir{ background:#f0fff4; }
.status-row-terlambat{ background:#fffdf3; }
.status-row-izin{ background:#f0fbff; }
.status-row-sakit{ background:#fff5f5; }