/* Kustomisasi Mode Gelap (Mozfactor Theme) */

html.lagom-dark-mode {
    /* Warna Background Utama (sebelah kanan) */
    --dark-mode-body-bg: #1e2633;
    --body-bg: var(--dark-mode-body-bg);

    /* Warna Background Sidebar Kiri */
    --app-nav-left-bg: #1e2633;

    /* Warna Kotak Panel (Services, Quotes, Invoices, dll) */
    --ui-block-bg: #293649;

    /* Warna Pembatas / Divider */
    --ui-block-divider-color: #3b4c66;

    /* Warna Hover pada menu/link kotak */
    --ui-block-link-hover-bg: #32425a;
    --ui-block-link-active-bg: #32425a;

    /* Warna Top Nav (jika ada) */
    --app-nav-top-bg: #293649;

    /* Warna teks default untuk Mode Gelap */
    --text-color: #d1d5db;
    --text-heading-color: #ffffff;
}

/* Memastikan background dashboard memiliki gradasi halus seperti gambar */
html.lagom-dark-mode body {
    background: linear-gradient(180deg, #273447 0%, #1e2633 100%) !important;
    background-attachment: fixed !important;
}

/* Memastikan sidebar transparan agar mengikuti gradasi atau warna serasi */
html.lagom-dark-mode .app-nav {
    background-color: transparent !important;
}

/* =========================================================
   KUSTOMISASI MODE TERANG (HALAMAN LOGIN & REGISTER)
   ========================================================= */

/* 1. Memberi warna background utama WHMCS (Light Mode) menjadi biru sangat muda */
html:not(.lagom-dark-mode) {
    --main-body-sidebar-content-bg: #eaf1f8 !important;
}

html:not(.lagom-dark-mode) .page-login .main-body-content {
    background-color: #eaf1f8 !important;
}

/* 2. Membuat kotak form login menjadi "Floating Card" yang putih bersih */
html:not(.lagom-dark-mode) .page-login .main-body-content>div {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    padding: 40px !important;
}

/* 3. Mempertegas bentuk kolom input agar tidak menyatu dengan background */
html:not(.lagom-dark-mode) .form-control {
    background-color: #f4f7f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    transition: all 0.25s ease-in-out !important;
}

/* 4. Efek 'Glow' biru yang premium saat user mengetik di kolom input */
html:not(.lagom-dark-mode) .form-control:focus {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
}

/* 5. Memperhalus tampilan tombol 'Login with Facebook / Google' */
html:not(.lagom-dark-mode) .btn-default {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

html:not(.lagom-dark-mode) .btn-default:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}