/* ================================================================================== */
/* FILE: css/style.css                                                                */
/* Deskripsi: Berisi semua custom CSS untuk aplikasi Flow                              */
/* ================================================================================== */

/* Base Settings */
body {
    font-family: 'Inter', sans-serif;
    background-color: #F1F5F9;
    color: #334155;
}

/* Component: Thermal Receipt Preview */
.thermal-preview {
    font-family: 'Courier New', monospace;
    width: 100%;
    background: #fff;
    padding: 15px;
    border: 1px solid #e2e8f0;
    color: #000;
    font-size: 12px;
    line-height: 1.2;
}

/* Chips for Secretary Modal */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    /* text-xs */
    font-weight: 600;
    margin-bottom: 0.25rem;
    cursor: default;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.chip button {
    margin-left: 6px;
    opacity: 0.6;
    transition: opacity 0.2s;
    cursor: pointer;
}

.chip button:hover {
    opacity: 1;
}

/* Specific Chip Colors */
.chip-Sakit {
    background-color: #D1FAE5;
    color: #047857;
    border: 1px solid #A7F3D0;
}

/* emerald-100 */
.chip-Izin {
    background-color: #CFFAFE;
    color: #0891B2;
    border: 1px solid #A5F3FC;
}

/* cyan-100 */
.chip-Alpa {
    background-color: #FFE4E6;
    color: #BE123C;
    border: 1px solid #FDA4AF;
}

/* rose-100 */

/* Search Dropdown Items */
.search-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.875rem;
    border-bottom: 1px solid #f1f5f9;
}

.search-item:hover {
    background-color: #F8FAFC;
}

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

/* Responsive: pastikan chip area tidak terjepit pada layar kecil */
@media (max-width: 640px) {
    #secretary-attendance-modal .grid {
        height: auto !important;
    }
}

/* Hide Scrollbar helper */
.custom-scrollbar-none::-webkit-scrollbar {
    display: none;
}

.custom-scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom Scrollbar Slim */
.scrollbar-slim::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.scrollbar-slim::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-slim::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    /* slate-300 */
    border-radius: 10px;
}

.scrollbar-slim::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    /* slate-400 */
}

/* Export Buttons Styling */
.btn-export-xls {
    background-color: #ecfdf5;
    /* emerald-50 */
    color: #059669;
    /* emerald-600 */
    border: 1px solid #d1fae5;
    /* emerald-100 */
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    font-weight: 700;
    font-size: 0.75rem;
    /* text-xs */
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-export-xls:hover {
    background-color: #059669;
    color: #ffffff;
    border-color: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.btn-export-xls:active {
    transform: translateY(0px);
}

.btn-export-pdf {
    background-color: #fff1f2;
    /* rose-50 */
    color: #e11d48;
    /* rose-600 */
    border: 1px solid #ffe4e6;
    /* rose-100 */
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    font-weight: 700;
    font-size: 0.75rem;
    /* text-xs */
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-export-pdf:hover {
    background-color: #e11d48;
    color: #ffffff;
    border-color: #e11d48;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.btn-export-pdf:active {
    transform: translateY(0px);
}

/* Sidebar: No scrollbar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ================================================================================== */
/* TAILADMIN PRO DARK MODE OVERRIDES UNTUK KONTEN UTAMA                                */
/* ================================================================================== */

/* 1. Main Background */
.dark body,
.dark main,
.dark header,
.dark #main-sidebar,
.dark #admin-view {
    background-color: #101828 !important;
}

/* 2. Hilangkan efek dekoratif lingkaran gradien di pojok kanan atas stat card hanya pada Dark Mode */
.dark .bg-gradient-to-br {
    display: none !important;
}

/* 3. Cards, White Containers & Box Backgrounds */
.dark .bg-white,
.dark .bg-white\/50,
.dark .bg-slate-50\/50,
.dark .bg-slate-50\/30,
.dark .bg-slate-50\/20,
.dark .bg-slate-50\/10 {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: #1d2939 !important;
}

/* 4. Sticky Table Header (Opaque Solid Background agar teks tidak bertumpuk saat scroll) */
.dark thead,
.dark thead tr,
.dark thead th,
.dark th.sticky,
.dark .sticky {
    background-color: #161f30 !important;
    color: #98a2b3 !important;
    border-color: #1d2939 !important;
    opacity: 1 !important;
}

/* 5. Sub-containers, Table Headers & Colorful Card Headers (Laporan, dsb) */
.dark .bg-slate-50,
.dark .bg-slate-100,
.dark .bg-amber-50,
.dark .bg-emerald-50,
.dark .bg-rose-50,
.dark .bg-cyan-50,
.dark .bg-purple-50,
.dark .bg-indigo-50,
.dark .bg-blue-50,
.dark .bg-teal-50,
.dark .bg-sky-50,
.dark .bg-violet-50,
.dark .bg-fuchsia-50,
.dark th {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #98a2b3 !important;
    border-color: #1d2939 !important;
}

/* 6. Icon Background Boxes & Table View Buttons */
.dark table button,
.dark .bg-indigo-50,
.dark .bg-amber-50,
.dark .bg-rose-50,
.dark .bg-emerald-50,
.dark .bg-cyan-50,
.dark .bg-purple-50,
.dark .bg-teal-50,
.dark .bg-sky-50,
.dark .bg-violet-50,
.dark .bg-fuchsia-50,
.dark .bg-slate-200,
.dark .bg-indigo-50\/20,
.dark .bg-teal-50\/20,
.dark .bg-emerald-50\/20,
.dark .bg-indigo-50\/30,
.dark .bg-teal-50\/30,
.dark .bg-sky-50\/20,
.dark .bg-violet-50\/20,
.dark .bg-fuchsia-50\/20 {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: #1d2939 !important;
}

/* Dark Mode Export Buttons Override */
.dark .btn-export-xls {
    background-color: rgba(5, 150, 105, 0.15) !important;
    color: #34d399 !important;
    border-color: rgba(5, 150, 105, 0.3) !important;
}
.dark .btn-export-xls:hover {
    background-color: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
}
.dark .btn-export-pdf {
    background-color: rgba(225, 29, 72, 0.15) !important;
    color: #f43f5e !important;
    border-color: rgba(225, 29, 72, 0.3) !important;
}
.dark .btn-export-pdf:hover {
    background-color: #e11d48 !important;
    color: #ffffff !important;
    border-color: #e11d48 !important;
}

/* Warna Teks Ikon & Sub-judul yang Kontras di Dark Mode */
.dark .text-indigo-700, .dark .text-indigo-600 { color: #818cf8 !important; }
.dark .text-amber-800, .dark .text-amber-700, .dark .text-amber-600 { color: #fbbf24 !important; }
.dark .text-rose-800, .dark .text-rose-700, .dark .text-rose-600 { color: #f43f5e !important; }
.dark .text-emerald-800, .dark .text-emerald-700, .dark .text-emerald-600 { color: #34d399 !important; }
.dark .text-cyan-800, .dark .text-cyan-700, .dark .text-cyan-600 { color: #22d3ee !important; }
.dark .text-purple-800, .dark .text-purple-700, .dark .text-purple-600 { color: #c084fc !important; }
.dark .text-sky-800, .dark .text-sky-700, .dark .text-sky-600 { color: #38bdf8 !important; }
.dark .text-violet-800, .dark .text-violet-700, .dark .text-violet-600 { color: #a78bfa !important; }
.dark .text-fuchsia-800, .dark .text-fuchsia-700, .dark .text-fuchsia-600 { color: #e879f9 !important; }

.dark .ph-users-three {
    color: rgba(255, 255, 255, 0.08) !important;
}

/* 7. Class Badges (ALUMNI / Kelas) agar Terbaca Kontras */
.dark span.bg-indigo-50\/50,
.dark .bg-indigo-50\/50,
.dark td span.bg-indigo-50\/50 {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #818cf8 !important;
    border-color: #334155 !important;
}

/* 8. Badges & Count Pills di Card Header Laporan */
.dark .bg-amber-200\/50,
.dark .bg-emerald-200\/50,
.dark .bg-rose-200\/50,
.dark .bg-slate-200 {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* 9. Borders & Dividers */
.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-300,
.dark .border-slate-50,
.dark .border-amber-100,
.dark .border-emerald-100,
.dark .border-rose-100,
.dark .border-cyan-100,
.dark td,
.dark th {
    border-color: #1d2939 !important;
}

/* 10. Typography (Headings & Body Texts) */
.dark .text-slate-800,
.dark .text-slate-700,
.dark .text-slate-900,
.dark h1, .dark h2, .dark h3, .dark h4 {
    color: rgba(255, 255, 255, 0.9) !important;
}

.dark .text-slate-600,
.dark .text-slate-500,
.dark .text-slate-400 {
    color: #98a2b3 !important;
}

/* 11. Form Inputs, Select Boxes & Search Inputs (TailAdmin Pro Dropdown Styling) */
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark select,
.dark textarea {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: #1d2939 !important;
    border-radius: 0.75rem !important;
}

.dark select option {
    background-color: #101828 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #475467 !important;
}

/* 12. Tables Override */
.dark table tbody tr {
    background-color: transparent !important;
}

.dark table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* 13. Modals Override - Ensure ALL modal cards have a solid opaque dark background */
.dark .fixed.inset-0 .bg-white,
.dark .fixed .bg-white,
.dark [id*="modal"] .bg-white,
.dark [id*="modal"] .modal-content,
.dark [id*="modal"] .relative > .bg-white,
.dark [id*="modal"] .relative > div {
    background-color: #101828 !important;
    border-color: #1d2939 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    opacity: 1 !important;
}

/* Modal Inner Sub-containers (Header, Footer, Scrollable Areas) */
.dark .fixed.inset-0 .bg-slate-50,
.dark .fixed.inset-0 .bg-slate-50\/50,
.dark .fixed.inset-0 .bg-slate-100,
.dark [id*="modal"] .bg-slate-50,
.dark [id*="modal"] .bg-slate-50\/50,
.dark [id*="modal"] .bg-slate-100 {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: #1d2939 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Modal Backdrop Overlay (Semi-transparent with backdrop blur) */
.dark .absolute.inset-0[class*="bg-slate-900"],
.dark .absolute.inset-0[class*="bg-black"],
.dark .fixed.inset-0[class*="bg-slate-900"],
.dark .fixed.inset-0[class*="bg-black"] {
    background-color: rgba(15, 23, 42, 0.6) !important;
}

/* 14. Dropdowns & Badges Hover Adjustment */
.dark .hover\:bg-slate-100:hover,
.dark .hover\:bg-slate-50:hover,
.dark .hover\:bg-slate-200:hover,
.dark .hover\:bg-white\/5:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 15. Typography & Font-Size Standards (TailAdmin Pro Scale) */
table thead th {
    font-size: 0.75rem; /* text-xs (12px) */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Universal Modal Title Standard (text-lg / 18px font-bold) */
[id*="modal"] h3,
[id*="modal"] h2,
#class-report-title,
#recap-detail-title,
#modal-title,
#modal-class-title,
#modal-stu-title,
#modal-teacher-title,
#modal-adm-perm-title {
    font-size: 1.125rem !important; /* 18px */
    font-weight: 700 !important;
    line-height: 1.75rem !important;
}

/* 16. Settings Tab (Pengaturan) Dark Mode Overrides */
.dark #tab-settings .bg-white {
    background-color: #101828 !important;
}
.dark #tab-settings .bg-slate-50 {
    background-color: rgba(30, 41, 59, 0.4) !important;
}
.dark #tab-settings .bg-rose-50,
.dark #tab-settings .bg-rose-50\/50 {
    background-color: rgba(136, 19, 55, 0.2) !important;
}
.dark #tab-settings .bg-indigo-50,
.dark #tab-settings .bg-indigo-50\/50 {
    background-color: rgba(49, 46, 129, 0.3) !important;
}
.dark #tab-settings .text-slate-800,
.dark #tab-settings .text-slate-700,
.dark #tab-settings .text-rose-800,
.dark #tab-settings .text-indigo-900 {
    color: #ffffff !important;
}
.dark #tab-settings .text-slate-600,
.dark #tab-settings .text-slate-500,
.dark #tab-settings .text-rose-600,
.dark #tab-settings .text-indigo-700\/70 {
    color: #cbd5e1 !important; /* slate-300 */
}
.dark #tab-settings input[type="text"],
.dark #tab-settings input[type="date"],
.dark #tab-settings input[type="time"],
.dark #tab-settings input[type="number"],
.dark #tab-settings select {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border-color: #334155 !important;
}

/* 17. Perbaikan Legibilitas Toggle (Switch) di Dark Mode */
.dark input.peer:not(:checked) ~ div[class*="peer-checked:bg-"] {
    background-color: #475569 !important; /* Warna slate-600 untuk track OFF agar terbaca jelas */
}

/* 18. Pengecualian override background untuk tombol pilihan presensi (H/S/I/A) di modal presensi */
.dark table button.bg-emerald-500 { background-color: #10b981 !important; border-color: transparent !important; color: #fff !important; }
.dark table button.bg-indigo-500 { background-color: #6366f1 !important; border-color: transparent !important; color: #fff !important; }
.dark table button.bg-cyan-500 { background-color: #06b6d4 !important; border-color: transparent !important; color: #fff !important; }
.dark table button.bg-rose-500 { background-color: #f43f5e !important; border-color: transparent !important; color: #fff !important; }

/* ================================================================================== */
/* UI/UX DESIGN TOKENS (Standardized Components)                                        */
/* ================================================================================== */

/* 1. BUTTONS */
.btn-primary {
    background-color: #4f46e5; /* indigo-600 */
    color: #ffffff;
    border-radius: 0.5rem; /* rounded-lg */
    padding: 0.5rem 1rem;
    font-size: 0.875rem; /* text-sm */
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-primary:hover {
    background-color: #4338ca; /* indigo-700 */
}
.dark .btn-primary {
    background-color: #6366f1; /* indigo-500 for better contrast */
}
.dark .btn-primary:hover {
    background-color: #4f46e5;
}

.btn-secondary {
    background-color: #ffffff;
    color: #334155; /* slate-700 */
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 1px solid #cbd5e1; /* slate-300 */
    cursor: pointer;
}
.btn-secondary:hover {
    background-color: #f8fafc; /* slate-50 */
}
.dark .btn-secondary {
    background-color: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
    border-color: #334155;
}
.dark .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.btn-danger {
    background-color: #e11d48; /* rose-600 */
    color: #ffffff;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-danger:hover {
    background-color: #be123c; /* rose-700 */
}
.dark .btn-danger {
    background-color: #f43f5e;
}
.dark .btn-danger:hover {
    background-color: #e11d48;
}

.btn-danger-soft {
    background-color: #ffe4e6; /* rose-100 */
    color: #e11d48; /* rose-600 */
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-danger-soft:hover {
    background-color: #fecdd3; /* rose-200 */
}
.dark .btn-danger-soft {
    background-color: rgba(225, 29, 72, 0.15);
    color: #fb7185;
}
.dark .btn-danger-soft:hover {
    background-color: rgba(225, 29, 72, 0.25);
}

/* 2. TABLE HEADER */
.table-head {
    background-color: #f8fafc; /* slate-50 */
    color: #64748b; /* slate-500 */
    font-size: 0.625rem; /* 10px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dark .table-head {
    background-color: #161f30 !important;
    color: #98a2b3 !important;
    border-bottom: 1px solid #1d2939 !important;
}

/* 3. FORMS */
.form-label {
    display: block;
    font-size: 0.75rem; /* text-xs */
    font-weight: 700;
    color: #64748b; /* slate-500 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    margin-left: 0.25rem;
}
.dark .form-label {
    color: #94a3b8;
}

.form-input {
    width: 100%;
    padding: 0.625rem 1rem; /* py-2.5 px-4 */
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #e2e8f0; /* slate-200 */
    font-size: 0.875rem;
    color: #334155;
    background-color: #ffffff;
    transition: all 0.2s ease;
    outline: none;
}
.form-input:focus {
    border-color: #6366f1; /* indigo-500 */
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.dark .form-input {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: #1d2939 !important;
}
.dark .form-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}