/* ====================================================================
   CERDAS — LEMBAR GAYA UTAMA (utilitas ringkas gaya Tailwind)
   ====================================================================
   CATATAN PENTING (lihat README bagian "Tentang Tailwind CSS"):
   Berkas ini BUKAN hasil build resmi Tailwind CSS. Karena batasan
   hosting bersama Hostinger melarang langkah build (Node/npm/CLI),
   dan berkas prebuilt resmi Tailwind berukuran sangat besar (tidak
   praktis untuk shared hosting), maka dibuat lembar gaya utilitas
   ringkas buatan sendiri yang meniru nama kelas & perilaku Tailwind
   untuk kelas-kelas yang benar-benar dipakai di aplikasi ini.
   100% lokal, tanpa CDN, siap dipakai offline oleh PWA.
   ==================================================================== */

@import url('fonts.css');

/* ---------- TOKEN WARNA & DESAIN ---------- */
:root{
    --color-primary:#0D9488;
    --color-primary-dark:#0f766e;
    --color-on-primary:#FFFFFF;
    --color-secondary:#2DD4BF;
    --color-accent:#D97706;
    --color-background:#F0FDFA;
    --color-surface:#FFFFFF;
    --color-foreground:#134E4A;
    --color-muted:#E8F1F4;
    --color-muted-foreground:#5b7d7a;
    --color-border:#5EEAD4;
    --color-destructive:#DC2626;
    --color-ring:#0D9488;
    --shadow-soft:0 2px 8px rgba(19,78,74,.08),0 1px 2px rgba(19,78,74,.06);
    --shadow-soft-md:0 6px 16px rgba(19,78,74,.10),0 2px 4px rgba(19,78,74,.06);
    --shadow-soft-lg:0 12px 28px rgba(19,78,74,.14),0 4px 8px rgba(19,78,74,.08);
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --status-hadir:#16A34A;
    --status-sakit:#2563EB;
    --status-izin:#D97706;
    --status-alpa:#DC2626;
    --status-terlambat:#7C3AED;
}
:root[data-theme="dark"]{
    --color-background:#0B1615;
    --color-surface:#122624;
    --color-foreground:#E6FFFA;
    --color-muted:#173330;
    --color-muted-foreground:#9fc7c2;
    --color-border:#1f4a45;
    --color-primary:#2DD4BF;
    --color-primary-dark:#5eead4;
    --color-on-primary:#04201d;
    --shadow-soft:0 2px 8px rgba(0,0,0,.35);
    --shadow-soft-md:0 6px 16px rgba(0,0,0,.4);
    --shadow-soft-lg:0 12px 28px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
        --color-background:#0B1615;
        --color-surface:#122624;
        --color-foreground:#E6FFFA;
        --color-muted:#173330;
        --color-muted-foreground:#9fc7c2;
        --color-border:#1f4a45;
        --color-primary:#2DD4BF;
        --color-primary-dark:#5eead4;
        --color-on-primary:#04201d;
    }
}

/* ---------- RESET ---------- */
[x-cloak]{display:none !important;}
*,*::before,*::after{box-sizing:border-box;border-color:var(--color-border);}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
    margin:0;background:var(--color-background);color:var(--color-foreground);
    font-family:'Fira Sans',system-ui,Arial,sans-serif;font-size:16px;line-height:1.5;
    overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-family:'Fira Sans',sans-serif;font-weight:700;margin:0;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
img{max-width:100%;display:block;}
table{border-collapse:collapse;}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--color-foreground);background:var(--color-surface);}
.numerik,.tabular-nums,td.angka,th.angka{font-variant-numeric:tabular-nums;font-family:'Fira Code','Fira Sans',monospace;}
:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;}}

/* ---------- LAYOUT ---------- */
.container{width:100%;max-width:1440px;margin:0 auto;padding:0 16px;}
.max-w-7xl{max-width:80rem;margin-left:auto;margin-right:auto;}
.max-w-2xl{max-width:42rem;}
.max-w-md{max-width:28rem;}
.mx-auto{margin-left:auto;margin-right:auto;}
.flex{display:flex;}
.inline-flex{display:inline-flex;}
.grid{display:grid;}
.hidden{display:none;}
.block{display:block;}
.flex-col{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.items-end{align-items:flex-end;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}
.justify-end{justify-content:flex-end;}
.flex-1{flex:1 1 0%;}
.flex-shrink-0{flex-shrink:0;}
.relative{position:relative;}
.absolute{position:absolute;}
.fixed{position:fixed;}
.sticky{position:sticky;}
.inset-0{top:0;right:0;bottom:0;left:0;}
.top-0{top:0;}.bottom-0{bottom:0;}.left-0{left:0;}.right-0{right:0;}
.z-10{z-index:10;}.z-20{z-index:20;}.z-30{z-index:30;}.z-40{z-index:40;}.z-50{z-index:50;}
.overflow-hidden{overflow:hidden;}
.overflow-x-auto{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.overflow-y-auto{overflow-y:auto;}
.w-full{width:100%;}.h-full{height:100%;}
.min-h-screen{min-height:100vh;}

/* Ukuran tetap untuk ikon SVG (svg tanpa lebar/tinggi eksplisit bisa melebar tak terkendali) */
svg{display:inline-block;flex-shrink:0;}
.w-2{width:8px;}.h-2{height:8px;}
.w-4{width:16px;}.h-4{height:16px;}
.w-5{width:20px;}.h-5{height:20px;}
.w-6{width:24px;}.h-6{height:24px;}
.w-7{width:28px;}.h-7{height:28px;}
.w-8{width:32px;}.h-8{height:32px;}
.w-10{width:40px;}.h-10{height:40px;}
.gap-1{gap:4px;}.gap-2{gap:8px;}.gap-3{gap:12px;}.gap-4{gap:16px;}.gap-6{gap:24px;}.gap-8{gap:32px;}
.grid-cols-1{grid-template-columns:repeat(1,1fr);}
.grid-cols-2{grid-template-columns:repeat(2,1fr);}
.grid-cols-3{grid-template-columns:repeat(3,1fr);}
.grid-cols-4{grid-template-columns:repeat(4,1fr);}

/* ---------- SPACING (skala 8/12/16/24/32 + tambahan kecil) ---------- */
.p-0{padding:0;}.p-1{padding:4px;}.p-2{padding:8px;}.p-3{padding:12px;}.p-4{padding:16px;}.p-6{padding:24px;}.p-8{padding:32px;}
.px-2{padding-left:8px;padding-right:8px;}.px-3{padding-left:12px;padding-right:12px;}.px-4{padding-left:16px;padding-right:16px;}.px-6{padding-left:24px;padding-right:24px;}
.py-1{padding-top:4px;padding-bottom:4px;}.py-2{padding-top:8px;padding-bottom:8px;}.py-3{padding-top:12px;padding-bottom:12px;}.py-4{padding-top:16px;padding-bottom:16px;}.py-6{padding-top:24px;padding-bottom:24px;}.py-8{padding-top:32px;padding-bottom:32px;}
.pb-safe{padding-bottom:calc(16px + env(safe-area-inset-bottom));}
.m-0{margin:0;}.mt-1{margin-top:4px;}.mt-2{margin-top:8px;}.mt-3{margin-top:12px;}.mt-4{margin-top:16px;}.mt-6{margin-top:24px;}.mt-8{margin-top:32px;}
.mb-1{margin-bottom:4px;}.mb-2{margin-bottom:8px;}.mb-3{margin-bottom:12px;}.mb-4{margin-bottom:16px;}.mb-6{margin-bottom:24px;}.mb-8{margin-bottom:32px;}
.ml-2{margin-left:8px;}.mr-2{margin-right:8px;}

/* ---------- TIPOGRAFI ---------- */
.text-xs{font-size:12px;}.text-sm{font-size:14px;}.text-base{font-size:16px;}.text-lg{font-size:18px;}.text-xl{font-size:24px;}.text-2xl{font-size:32px;}
.font-normal{font-weight:400;}.font-semibold{font-weight:600;}.font-bold{font-weight:700;}
.text-center{text-align:center;}.text-right{text-align:right;}.text-left{text-align:left;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.leading-tight{line-height:1.25;}

/* ---------- WARNA ---------- */
.bg-primary{background:var(--color-primary);}
.bg-primary-dark{background:var(--color-primary-dark);}
.text-on-primary{color:var(--color-on-primary);}
.bg-secondary{background:var(--color-secondary);}
.bg-accent{background:var(--color-accent);}
.text-accent{color:var(--color-accent);}
.bg-background{background:var(--color-background);}
.bg-surface{background:var(--color-surface);}
.bg-muted{background:var(--color-muted);}
.text-muted{color:var(--color-muted-foreground);}
.text-foreground{color:var(--color-foreground);}
.text-primary{color:var(--color-primary);}
.text-destructive{color:var(--color-destructive);}
.bg-destructive{background:var(--color-destructive);}
.border{border:1px solid var(--color-border);}
.border-t{border-top:1px solid var(--color-border);}
.border-b{border-bottom:1px solid var(--color-border);}
.rounded-sm{border-radius:var(--radius-sm);}
.rounded-md{border-radius:var(--radius-md);}
.rounded-lg{border-radius:var(--radius-lg);}
.rounded-full{border-radius:9999px;}
.shadow-soft{box-shadow:var(--shadow-soft);}
.shadow-soft-md{box-shadow:var(--shadow-soft-md);}
.shadow-soft-lg{box-shadow:var(--shadow-soft-lg);}
.opacity-60{opacity:.6;}
.opacity-0{opacity:0;}

/* ---------- KOMPONEN ---------- */
.card{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);padding:16px;}
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:44px;padding:10px 20px;border-radius:var(--radius-sm);border:none;
    font-weight:600;font-size:16px;transition:transform .15s ease-out,opacity .15s ease-out,background .15s ease-out;
    background:var(--color-muted);color:var(--color-foreground);
}
.btn:hover{opacity:.9;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--color-primary);color:var(--color-on-primary);}
.btn-accent{background:var(--color-accent);color:#fff;}
.btn-destructive{background:var(--color-destructive);color:#fff;}
.btn-outline{background:transparent;border:1.5px solid var(--color-border);color:var(--color-foreground);}
.btn-sm{min-height:36px;padding:6px 14px;font-size:14px;}
.btn-icon{min-width:44px;min-height:44px;padding:0;border-radius:var(--radius-sm);}
.btn:disabled{opacity:.5;cursor:not-allowed;}

.form-label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--color-foreground);}
.form-control{
    width:100%;min-height:44px;padding:10px 12px;border:1.5px solid var(--color-border);
    border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-foreground);
}
.form-control:focus{border-color:var(--color-ring);outline:2px solid var(--color-ring);outline-offset:1px;}
.form-error{color:var(--color-destructive);font-size:13px;margin-top:4px;}
.form-group{margin-bottom:16px;}

.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:9999px;font-size:12px;font-weight:600;}
.badge-hadir{background:#DCFCE7;color:var(--status-hadir);}
.badge-sakit{background:#DBEAFE;color:var(--status-sakit);}
.badge-izin{background:#FEF3C7;color:var(--status-izin);}
.badge-alpa{background:#FEE2E2;color:var(--status-alpa);}
.badge-terlambat{background:#EDE9FE;color:var(--status-terlambat);}

.table-wrap{width:100%;overflow-x:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-soft);}
table.tabel-data{width:100%;min-width:640px;background:var(--color-surface);}
table.tabel-data th{position:sticky;top:0;background:var(--color-muted);text-align:left;font-size:13px;font-weight:600;padding:10px 12px;white-space:nowrap;}
table.tabel-data td{padding:8px 12px;border-top:1px solid var(--color-border);font-size:14px;}
table.tabel-data th:first-child, table.tabel-data td:first-child{position:sticky;left:0;background:inherit;z-index:1;}
table.tabel-data tbody tr:hover{background:var(--color-muted);}

.kartu-baris{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-soft);padding:12px 16px;margin-bottom:10px;}
.kartu-baris .baris-item{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--color-border);font-size:14px;}
.kartu-baris .baris-item:last-child{border-bottom:none;}
.kartu-baris .baris-label{color:var(--color-muted-foreground);font-weight:600;}

.modal-overlay{position:fixed;inset:0;background:rgba(6,26,24,.5);display:flex;align-items:flex-end;justify-content:center;z-index:50;}
.modal-box{background:var(--color-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-width:640px;max-height:92vh;overflow-y:auto;padding:20px;box-shadow:var(--shadow-soft-lg);}
@media(min-width:768px){
    .modal-overlay{align-items:center;}
    .modal-box{border-radius:var(--radius-lg);}
}

.skeleton{background:linear-gradient(90deg,var(--color-muted) 25%,var(--color-border) 50%,var(--color-muted) 75%);background-size:200% 100%;animation:skeleton-loading 1.4s ease infinite;border-radius:var(--radius-sm);}
@keyframes skeleton-loading{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.empty-state{text-align:center;padding:48px 16px;color:var(--color-muted-foreground);}

/* ---------- NAVIGASI ---------- */
.sidebar{width:260px;background:var(--color-surface);box-shadow:var(--shadow-soft);height:100vh;position:sticky;top:0;overflow-y:auto;}
.sidebar-link{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);color:var(--color-foreground);font-size:14px;font-weight:600;margin:2px 8px;}
.sidebar-link.aktif{background:var(--color-primary);color:var(--color-on-primary);}
.sidebar-link:hover:not(.aktif){background:var(--color-muted);}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--color-surface);box-shadow:0 -2px 12px rgba(19,78,74,.12);display:flex;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:40;}
.bottom-nav-link{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--color-muted-foreground);min-width:56px;min-height:48px;justify-content:center;border-radius:var(--radius-sm);}
.bottom-nav-link.aktif{color:var(--color-primary);}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--color-surface);box-shadow:var(--shadow-soft);position:sticky;top:0;z-index:30;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:767px){
    .sidebar{display:none;}
    .container{padding:0 12px;}
    .grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:repeat(1,1fr);}
    .tabel-desktop{display:none;}
}
@media(min-width:768px){
    .kartu-mobile{display:none;}
    .bottom-nav{display:none;}
}
@media(min-width:768px) and (max-width:1023px){
    .sidebar{width:76px;}
    .sidebar .sidebar-label{display:none;}
    .grid-cols-3,.grid-cols-4{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:1024px){
    .md\:hidden{display:none;}
}

/* Util responsif berprefiks sederhana */
@media(min-width:768px){
    .md\:flex{display:flex;}
    .md\:grid{display:grid;}
    .md\:block{display:block;}
    .md\:hidden{display:none;}
    .md\:grid-cols-2{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:1024px){
    .lg\:flex{display:flex;}
    .lg\:grid{display:grid;}
    .lg\:block{display:block;}
    .lg\:hidden{display:none;}
    .lg\:grid-cols-3{grid-template-columns:repeat(3,1fr);}
    .lg\:grid-cols-4{grid-template-columns:repeat(4,1fr);}
}

/* ---------- STATUS ABSENSI (tombol besar layar sentuh) ---------- */
.tombol-status{min-width:44px;min-height:44px;border-radius:var(--radius-sm);border:1.5px solid var(--color-border);font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:4px;background:var(--color-surface);color:var(--color-foreground);transition:transform .15s ease-out,background .15s ease-out;}
.tombol-status:active{transform:scale(.95);}
.tombol-status.pilih-hadir.aktif{background:var(--status-hadir);color:#fff;border-color:var(--status-hadir);}
.tombol-status.pilih-sakit.aktif{background:var(--status-sakit);color:#fff;border-color:var(--status-sakit);}
.tombol-status.pilih-izin.aktif{background:var(--status-izin);color:#fff;border-color:var(--status-izin);}
.tombol-status.pilih-alpa.aktif{background:var(--status-alpa);color:#fff;border-color:var(--status-alpa);}
.tombol-status.pilih-terlambat.aktif{background:var(--status-terlambat);color:#fff;border-color:var(--status-terlambat);}