* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter/InterVariable.woff2') format('woff2');
}

/* =========================================================
   1. PUSAT KOMANDO DARK MODE (INSTAGRAM STYLE - OLED BLACK)
   ========================================================= */
body.dark-mode {
    --dm-bg: #000000;           /* OLED Black */
    --dm-surface: #121212;      /* Surface Card */
    --dm-surface-hover: #262626;/* Hover State */
    --dm-border: #363636;       /* Border khas IG */
    --dm-text-main: #f5f5f5;    /* Teks Off-white */
    --dm-text-muted: #8e8e8e;   /* Teks Sekunder */
    --dm-primary: #0095f6;      /* IG Blue */
    --dm-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); 
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa; /* Background light mode yang soft */
    color: #212529;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text-main) !important;
}

/* =========================================================
   2. STYLING KARTU LOGIN & KOMPONEN BAAWAN
   ========================================================= */
body.dark-mode .card {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    box-shadow: var(--dm-shadow) !important;
    color: var(--dm-text-main) !important;
}

body.dark-mode .border-bottom {
    border-color: var(--dm-border) !important;
}

/* Teks dan Label */
body.dark-mode p, 
body.dark-mode label {
    color: var(--dm-text-main) !important;
}
body.dark-mode .text-muted {
    color: var(--dm-text-muted) !important;
}

/* Fix Logo IDE-LH */
body.dark-mode h2 {
    color: var(--dm-text-main) !important;
}
body.dark-mode h2 span {
    color: var(--dm-primary) !important; /* Biru IG untuk tulisan -LH */
}

/* =========================================================
   3. STYLING INPUT & FORM
   ========================================================= */
body.dark-mode .form-control {
    background-color: var(--dm-bg) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-main) !important;
}

body.dark-mode .form-control:focus {
    border-color: var(--dm-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 149, 246, 0.25) !important; /* Efek glow biru IG */
}

body.dark-mode .form-control::placeholder {
    color: var(--dm-text-muted) !important;
}

/* Fix Ikon Mata (Toggle Password) */
body.dark-mode .input-group-text {
    background-color: var(--dm-bg) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-main) !important;
}
body.dark-mode #toggleIcon {
    color: var(--dm-text-main) !important;
}

/* =========================================================
   4. STYLING BUTTONS & LINK
   ========================================================= */
body.dark-mode .btn-success {
    background-color: var(--dm-primary) !important; /* Tombol hijau diubah jadi biru IG biar matching */
    border-color: var(--dm-primary) !important;
    color: #fff !important;
    font-weight: 600;
}
body.dark-mode .btn-success:hover {
    filter: brightness(1.1);
}

body.dark-mode a, 
body.dark-mode .btn-link {
    color: var(--dm-primary) !important;
}

body.dark-mode #toggleDarkMode {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-main) !important;
}

/* =========================================================
   5. SWEETALERT DARK MODE OVERRIDE
   ========================================================= */
body.dark-mode .swal2-popup {
    background: var(--dm-surface) !important;
    color: var(--dm-text-main) !important;
    border: 1px solid var(--dm-border);
}
body.dark-mode .swal2-title,
body.dark-mode .swal2-html-container {
    color: var(--dm-text-main) !important;
}