:root{
  --green:#047857;--green2:#065f46;--blue:#2563eb;--purple:#7c3aed;--amber:#d97706;--red-real:#dc2626;
  --bg:#f8fafc;--card:#fff;--text:#0f172a;--muted:#64748b;--line:#e2e8f0;
  /* Palet Warna Kids Friendly */
  --c-blue:#e0f2fe; --ct-blue:#0369a1;
  --c-green:#dcfce7; --ct-green:#15803d;
  --c-purple:#f3e8ff; --ct-purple:#7e22ce;
  --c-orange:#ffedd5; --ct-orange:#c2410c;
  --c-teal:#ccfbf1; --ct-teal:#0f766e;
  --c-pink:#fce7f3; --ct-pink:#be185d;
  --c-indigo:#e0e7ff; --ct-indigo:#4338ca;
  --c-yellow:#fef9c3; --ct-yellow:#a16207;
  --c-emerald:#d1fae5; --ct-emerald:#065f46;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
.app{display:none;min-height:100vh}
.app.active{display:flex}

/* Animasi dan Toggle Sidebar Desktop & Mobile */
aside{position:fixed;left:0;top:0;bottom:0;width:290px;background:#0f172a;color:white;padding:22px;overflow:auto;z-index:100;transition: transform .3s ease;}
main{margin-left:290px;flex:1;padding:24px; transition: margin-left .3s ease; max-width: 100vw;}
body.sidebar-closed aside { transform: translateX(-100%); }
body.sidebar-closed main { margin-left: 0; }

.brand{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.logo-group{display:flex;align-items:center;gap:8px}
.logo-group img{width:48px;height:48px;object-fit:contain;background:#fff;padding:3px;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,.2)}

.brand h1{font-size:18px;margin:0}
.brand p{margin:4px 0 0;color:#cbd5e1;font-size:12px}

nav button{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#cbd5e1;text-align:left;padding:13px 14px;border-radius:15px;margin-bottom:8px;font-weight:700;cursor:pointer; transition:.2s;}
nav button.active,nav button:hover{background:linear-gradient(135deg,#059669,#047857);color:#fff}

header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px; flex-wrap: wrap;}
header h2{margin:0;font-size:25px} 
header p{margin:5px 0 0;color:var(--muted)}

.card{background:white;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 3px 15px #0f172a0d;margin-bottom:18px}
.hero{background:linear-gradient(135deg,#047857,#0d9488,#2563eb);border-radius:26px;color:white;padding:27px;margin-bottom:18px}
.hero h2{font-size:32px;margin:7px 0}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.stat{border-left:7px solid var(--green)}
.stat h2{font-size:34px;margin:8px 0 0}

table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{padding:12px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
th{background:#f8fafc;font-weight:700;color:var(--muted)}

input,select,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:14px;background:white;font:inherit; margin-bottom: 5px;}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); border-color: transparent; background: #f0fdf4; }
label{display:block;font-size:13px;font-weight:700;margin:0 0 7px}

.btn{border:0;border-radius:14px;padding:12px 16px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition: .2s}
.btn:active{transform: scale(0.96)}
.btn:disabled{opacity: 0.5; cursor: not-allowed}
.green{background:var(--green);color:white}
.blue{background:var(--blue);color:white}
.red{background:var(--red-real);color:white}
.amber{background:var(--amber);color:white}
.light{background:#e2e8f0;color:#0f172a}

.badge{display:inline-block;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;background:#e2e8f0}
.b-green{background:var(--c-green);color:var(--ct-green)}
.b-blue{background:var(--c-blue);color:var(--ct-blue)}
.b-red{background:#fee2e2;color:var(--red-real)}
.b-amber{background:var(--c-orange);color:var(--ct-orange)}
.b-emerald{background:var(--c-emerald);color:var(--ct-emerald)}

.section{display:none}
.section.active{display:block}

/* TAMPILAN ORTU PREMIUM 3D */
.parent-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 16px; 
  margin-top: 20px; 
}
.icon-box { 
  border-radius: 20px; 
  padding: 18px 8px; 
  text-align: center; 
  cursor: pointer; 
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 6px; 
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 4px 0 rgba(0,0,0,0.05), 0 10px 20px -5px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}
.icon-box::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
  pointer-events: none;
}
.icon-box:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 8px 0 rgba(0,0,0,0.05), 0 15px 30px -10px rgba(0,0,0,0.2); 
}
.icon-box:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 5px 10px rgba(0,0,0,0.1);
}
.icon-box span { font-size: 30px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.icon-box b { font-size: 12px; font-weight: 800; letter-spacing: -0.2px; line-height: 1.1; }

.box-blue { background: #bae6fd; color: #0369a1; }
.box-green { background: #bbf7d0; color: #15803d; }
.box-purple { background: #e9d5ff; color: #7e22ce; }
.box-orange { background: #fed7aa; color: #c2410c; }
.box-teal { background: #99f6e4; color: #0f766e; }
.box-pink { background: #fbcfe8; color: #be185d; }
.box-indigo { background: #c7d2fe; color: #4338ca; }
.box-yellow { background: #fef9c3; color: #a16207; }
.box-emerald { background: #d1fae5; color: #065f46; }
.box-red { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

/* Notifikasi Badge */
.notif-badge { position: absolute; top: 8px; right: 8px; background: #ef4444; color: white; font-size: 9px; font-weight: 800; padding: 3px 6px; border-radius: 10px; box-shadow: 0 2px 5px rgba(239,68,68,0.5); z-index: 10; border: 1px solid #f87171; pointer-events: none; }
.notif-badge.pulse { animation: pulse-notif 2s infinite; }
@keyframes pulse-notif { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 5px rgba(239,68,68,0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,0); } }

/* Galeri Photo Grid */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; }
.gallery-item { background: white; border-radius: 15px; overflow: hidden; border: 1px solid var(--line); position: relative; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.gallery-item img { width: 100%; height: 180px; object-fit: cover; display: block; cursor: pointer; }
.gallery-info { padding: 10px; font-size: 12px; }
.gallery-info b { display: block; margin-bottom: 4px; }
.gallery-info small { color: var(--muted); }

.back-btn { margin-bottom: 20px; padding: 10px 20px; background: #f1f5f9; border-radius: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); color: var(--muted); }

/* Modal Custom untuk Konfirmasi */
#customConfirm { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 5000; display: none; align-items: center; justify-content: center; padding: 20px; }
.confirm-card { background: white; padding: 24px; border-radius: 24px; width: 100%; max-width: 350px; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.3); }

/* Copy Toast */
#copyToast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #0f172a; color: white; padding: 10px 20px; border-radius: 99px; font-size: 13px; font-weight: 700; z-index: 6000; display: none; box-shadow: 0 10px 15px rgba(0,0,0,0.2); }

.login-screen { position: fixed; inset: 0; background: linear-gradient(135deg, #0f172a, #047857); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.login-card { background: white; padding: 40px; border-radius: 32px; width: 100%; max-width: 420px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); text-align: center; }

/* Login Tabs Multi-Role */
.login-tabs { display: flex; gap: 5px; margin-bottom: 25px; background: #f1f5f9; padding: 6px; border-radius: 14px; flex-wrap: wrap; justify-content: center;}
.login-tabs button { flex: 1; border: 0; padding: 10px 5px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 12px; color: var(--muted); background: transparent; transition: .2s; }
.login-tabs button.active { background: white; color: var(--green); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.hidden-admin-tab { display: none; width: 100%; margin-top: 5px; background: #fee2e2 !important; color: #dc2626 !important; }
.hidden-admin-tab.active { background: #dc2626 !important; color: white !important; }

.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 90; display: none; }
.sidebar-overlay.active { display: block; }
.loading-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.98); display: flex; align-items: center; justify-content: center; z-index: 2000; display: none; flex-direction: column; gap: 15px;}

/* Styling Rekap Absensi Interaktif */
.rekap-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.rekap-table th, .rekap-table td { padding: 6px 4px; font-size: 11px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; vertical-align: middle; }
.rekap-table th { background: #f8fafc; color: var(--muted); font-weight: 700; border-top: 1px solid var(--line); }
.rekap-table td:first-child, .rekap-table th:first-child { border-left: 1px solid var(--line); }
.sticky-col { position: sticky; left: 0; background: #fff; z-index: 2; border-right: 2px solid var(--line) !important; font-weight: bold; min-width: 140px; text-align: left !important; padding-left: 10px !important; }
.rekap-table th.sticky-col { background: #f8fafc; z-index: 3; }
.sum-col { font-weight: 800; background: #f8fafc; }
.abs-cell { cursor: pointer; transition: 0.1s; font-weight: 800; user-select: none; }
.abs-cell:hover { background: #e2e8f0; transform: scale(1.1); }
.abs-cell:active { transform: scale(0.9); }
.col-holiday { background-color: #ffe4e6 !important; color: #e11d48 !important; }
.th-clickable { cursor: pointer; transition: 0.2s; }
.th-clickable:hover { background-color: #fecdd3 !important; }
.bg-h { background-color: #dcfce7 !important; color: #15803d !important; }
.bg-s { background-color: #e0f2fe !important; color: #0369a1 !important; }
.bg-i { background-color: #ffedd5 !important; color: #c2410c !important; }
.bg-a { background-color: #fee2e2 !important; color: #dc2626 !important; }

/* Styling Chat System */
.chat-container { height: 350px; overflow-y: auto; padding: 15px; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 15px; background: #f8fafc; display: flex; flex-direction: column; gap: 10px; }
.msg { padding: 12px 16px; border-radius: 16px; max-width: 85%; position: relative; font-size: 13px; line-height: 1.4; word-wrap: break-word; }
.msg.teacher { background: #dcfce7; align-self: flex-end; border-bottom-right-radius: 4px; border: 1px solid #bbf7d0; }
.msg.parent { background: white; align-self: flex-start; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg small { display: block; font-size: 10px; color: var(--muted); margin-top: 5px; text-align: right; }
.msg-actions { position: absolute; top: -12px; right: 10px; display: none; background: white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-radius: 8px; padding: 2px; border: 1px solid var(--line); }
.msg:hover .msg-actions { display: flex; gap: 2px; }
.msg-actions button { border: none; background: transparent; cursor: pointer; padding: 4px 6px; border-radius: 6px; font-size: 12px; transition: .2s; }
.msg-actions button:hover { background: #f1f5f9; }

@media(max-width:900px){
  aside{transform:translateX(-100%);z-index:100}
  aside.open{transform:translateX(0)}
  main{margin-left:0;padding:14px; width: 100%;}
  body.sidebar-closed aside { transform: translateX(-100%); }
  
  /* Form menjadi 1 kolom agar tidak berdesakan */
  .g2, .g3, .g4, .g5 {grid-template-columns:1fr}
  .parent-grid { grid-template-columns: repeat(2, 1fr); }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
  table { min-width: 650px; }
  header { flex-direction: column; align-items: flex-start; gap: 15px; }
  .header-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
}

.copy-btn { cursor: pointer; padding: 4px; border-radius: 6px; background: #f1f5f9; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; transition: .2s; }
.copy-btn:hover { background: #e2e8f0; }
.copy-btn svg { width: 14px; height: 14px; fill: var(--muted); }

/* Cetak Kartu Siswa Styling */
@media print {
    body > *:not(#printArea) { display: none !important; }
    #printArea { display: block !important; width: 100%; }
    .id-card { page-break-inside: avoid; margin-bottom: 20px; }
}
#printArea { display: none; }
.id-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 20px; }
.id-card { border: 2px solid #047857; border-radius: 12px; overflow: hidden; background: white; font-family: Arial, sans-serif; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.id-card-header { background: #047857; color: white; padding: 15px 10px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px; }
.id-card-header img { width: 40px; height: 40px; background: white; border-radius: 50%; padding: 2px; }
.id-card-header h3 { margin: 0; font-size: 16px; line-height: 1.2; }
.id-card-body { padding: 20px; text-align: center; }
.id-card-photo { width: 90px; height: 110px; background: #e2e8f0; border: 2px solid #047857; border-radius: 8px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #64748b; }
.id-card-info { text-align: left; font-size: 13px; line-height: 1.8; margin-bottom: 10px;}
.id-card-info table { width: 100%; margin: 0; border: none; }
.id-card-info td { padding: 2px 0; border: none; font-size: 12px;}
.id-card-footer { background: #f1f5f9; padding: 10px; text-align: center; font-size: 11px; font-weight: bold; color: #047857; border-top: 1px solid #e2e8f0; }




@media print {
    th:last-child,
    td:last-child {
        display:none !important;
    }
}