/* =========================================================
   MJN NET GLOBAL THEME
   ========================================================= */

:root {
    --mjn-bg: #0f172a;
    --mjn-bg-secondary: #111827;
    --mjn-card: #ffffff;
    --mjn-text: #111827;
    --mjn-text-secondary: #64748b;
    --mjn-border: #e2e8f0;
    --mjn-input: #ffffff;
    --mjn-header: #1e293b;
}

/* =========================
   DARK MODE
   ========================= */

html.mjn-dark {
    color-scheme: dark;

    --mjn-bg: #0f172a;
    --mjn-bg-secondary: #111827;
    --mjn-card: #1e293b;
    --mjn-text: #f8fafc;
    --mjn-text-secondary: #cbd5e1;
    --mjn-border: #334155;
    --mjn-input: #0f172a;
    --mjn-header: #1e293b;
}

/* =========================
   LIGHT MODE
   ========================= */

html.mjn-light {
    color-scheme: light;

    --mjn-bg: #f1f5f9;
    --mjn-bg-secondary: #ffffff;
    --mjn-card: #ffffff;
    --mjn-text: #111827;
    --mjn-text-secondary: #64748b;
    --mjn-border: #e2e8f0;
    --mjn-input: #ffffff;
    --mjn-header: #ffffff;
}

/* =========================
   BODY GLOBAL
   ========================= */

html,
body {
    transition:
        background-color .25s ease,
        color .25s ease !important;
}

html.mjn-dark body {
    background-color: var(--mjn-bg) !important;
    color: var(--mjn-text) !important;
}

html.mjn-light body {
    background-color: var(--mjn-bg) !important;
    color: var(--mjn-text) !important;
}

/* =========================
   TEKS GLOBAL
   ========================= */

html.mjn-dark h1,
html.mjn-dark h2,
html.mjn-dark h3,
html.mjn-dark h4,
html.mjn-dark h5,
html.mjn-dark h6,
html.mjn-dark strong,
html.mjn-dark label,
html.mjn-dark p,
html.mjn-dark span {
    border-color: var(--mjn-border);
}

html.mjn-dark .text-gray-500,
html.mjn-dark .text-gray-600,
html.mjn-dark .text-gray-700,
html.mjn-dark .text-slate-500,
html.mjn-dark .text-slate-600,
html.mjn-dark .text-slate-700 {
    color: var(--mjn-text-secondary) !important;
}

/* =========================
   CARD / PANEL
   ========================= */

html.mjn-dark .card,
html.mjn-dark .bg-white,
html.mjn-dark .bg-gray-50,
html.mjn-dark .bg-gray-100,
html.mjn-dark .bg-slate-50,
html.mjn-dark .bg-slate-100 {
    background-color: var(--mjn-card) !important;
    color: var(--mjn-text) !important;
}

html.mjn-dark .border,
html.mjn-dark .border-gray-100,
html.mjn-dark .border-gray-200,
html.mjn-dark .border-gray-300,
html.mjn-dark .border-slate-100,
html.mjn-dark .border-slate-200 {
    border-color: var(--mjn-border) !important;
}

/* =========================
   INPUT
   ========================= */

html.mjn-dark input,
html.mjn-dark textarea,
html.mjn-dark select {
    background-color: var(--mjn-input) !important;
    color: var(--mjn-text) !important;
    border-color: var(--mjn-border) !important;
}

html.mjn-dark input::placeholder,
html.mjn-dark textarea::placeholder {
    color: #94a3b8 !important;
}

/* =========================
   TABLE
   ========================= */

html.mjn-dark table {
    color: var(--mjn-text) !important;
}

html.mjn-dark th,
html.mjn-dark td {
    border-color: var(--mjn-border) !important;
}

html.mjn-dark thead {
    background-color: #172033 !important;
}

/* =========================
   HEADER / NAVBAR
   ========================= */

html.mjn-dark header,
html.mjn-dark nav,
html.mjn-dark .navbar,
html.mjn-dark .header {
    background-color: var(--mjn-header) !important;
    border-color: var(--mjn-border) !important;
}

/* =========================
   LINK
   ========================= */

html.mjn-dark a:not(.btn):not([class*="bg-"]) {
    color: inherit;
}

/* =========================
   GLOBAL THEME BUTTON
   ========================= */

#mjnGlobalThemeButton {
    position: fixed !important;
    right: 18px !important;
    bottom: 18px !important;

    z-index: 999999 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    min-width: 125px !important;
    height: 44px !important;

    padding: 0 15px !important;

    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 999px !important;

    background: #ffffff !important;
    color: #111827 !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;

    box-shadow:
        0 8px 30px rgba(0,0,0,.25) !important;

    cursor: pointer !important;

    transition:
        all .25s ease !important;
}

html.mjn-dark #mjnGlobalThemeButton {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}

#mjnGlobalThemeButton:hover {
    transform: translateY(-2px) !important;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 768px) {

    #mjnGlobalThemeButton {
        right: 14px !important;
        bottom: 14px !important;

        min-width: 110px !important;
        height: 42px !important;

        font-size: 12px !important;
    }
}

/* =========================================================
   MJN NET - FORCE LIGHT MODE
   Mode gelap dinonaktifkan secara permanen
   ========================================================= */

html {
    color-scheme: light !important;
}

html,
body {
    background: #f5f9fc !important;
    color: #17324d !important;
}

/* Tailwind dark mode - override */
.dark\:bg-gray-900 {
    background-color: #f5f9fc !important;
}

.dark\:bg-gray-800 {
    background-color: #ffffff !important;
}

.dark\:text-white {
    color: #17324d !important;
}

.dark\:text-gray-100,
.dark\:text-gray-200,
.dark\:text-gray-300,
.dark\:text-gray-400 {
    color: #17324d !important;
}

/* Background utama */
.bg-gray-100 {
    background-color: #f5f9fc !important;
}

/* Header */
.bg-white {
    background-color: #ffffff !important;
}

/* Paksa halaman utama tetap terang */
.min-h-screen {
    background-color: #f5f9fc !important;
}

/* Form */
input,
textarea,
select {
    color-scheme: light !important;
    background-color: #ffffff !important;
    color: #17324d !important;
}

/* Mobile */
@media (max-width: 768px) {
    html,
    body,
    .min-h-screen {
        background: #f5f9fc !important;
    }

    .dark\:bg-gray-900 {
        background-color: #f5f9fc !important;
    }

    .dark\:bg-gray-800 {
        background-color: #ffffff !important;
    }
}