/* =========================================================
   PUSAT PENGATURAN WARNA UTAMA (THEME VARIABLES)
   Ubah kode warna hex di bawah ini untuk mengubah seluruh UI
   ========================================================= */
:root {
    /* Brand & Background Utama */
    --color-bg-app: #ffffff;            /* Background aplikasi/main content */
    --color-surface-white: #ffffff;      /* Background card, modal, sidebar */
    
    /* Text Color Palette */
    --color-text-main: #000000;          /* Judul, teks utama, header */
    --color-text-muted: #0c0b0b;         /* Subtitle, placeholder, label biasa */
    --color-text-light: #030303;         /* Teks nomor urut, caption kecil */

    /* Primary Accent (Tombol Utama, Header Sidebar, Active Menu) */
    --color-primary: #0094ca;           /* Dark slate / Black corporate */
    --color-primary-hover: #1e293b;     /* State hover tombol utama */
    --color-primary-text: #060606;      /* Teks di dalam tombol primary */

    /* Secondary Accent / Neutral Buttons */
    --color-neutral-bg: #10b981;        /* Background button netral/hover nav */
    --color-neutral-border: #000000;    /* Border subtle pada card & table */

    /* Semantic Status Colors (Presensi, Alert, Status) */
    --color-success: #10b981;           /* Hadir / Simpan (Emerald) */
    --color-success-bg: #ecfdf5;        /* Background badge success */
    --color-info: #3b82f6;              /* Sakit / Info (Blue) */
    --color-info-bg: #eff6ff;           /* Background badge info */
    --color-warning: #f59e0b;           /* Izin / Caution (Amber) */
    --color-warning-bg: #fffbeb;        /* Background badge warning */
    --color-danger: #ff0000;            /* Alpha / Hapus / Logout (Rose) */
    --color-danger-bg: #fef2f2;         /* Background badge danger */
}

/* =========================================================
   APLIKASI CLASS WARNA UNTUK UTILITY HOOK
   ========================================================= */

/* Application Background */
body {
    background-color: var(--color-bg-app) !important;
    color: var(--color-text-main) !important;
}

.bg-app { background-color: var(--color-bg-app) !important; }
.bg-surface { background-color: var(--color-surface-white) !important; }
.border-subtle { border-color: var(--color-neutral-border) !important; }

/* Text Utilities */
.text-main { color: var(--color-text-main) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-subtle { color: var(--color-text-light) !important; }

/* Navigation Styling */
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.75rem;
    color: var(--color-text-muted);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item:hover {
    color: var(--color-text-main);
    background-color: var(--color-neutral-bg);
}

.nav-item.active {
    color: var(--color-text-main);
    background-color: var(--color-neutral-bg);
    font-weight: 600;
}

/* Button Component Utilities */
.btn-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-primary-text) !important;
}
.btn-primary:hover {
    background-color: var(--color-primary-hover) !important;
}

.btn-success {
    background-color: var(--color-success) !important;
    color: #ffffff !important;
}
.btn-success:hover {
    opacity: 0.9;
}

.btn-danger-text {
    color: var(--color-danger) !important;
}
.btn-danger-text:hover {
    background-color: var(--color-danger-bg) !important;
}

/* Status Badges */
.badge-success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}
.badge-info {
    background-color: var(--color-info-bg);
    color: var(--color-info);
}
.badge-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
}

/* Custom Scrollbar Minimalist */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--color-neutral-border);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-light);
}