/* Login — isi kolom hitam pekat, glow tipis hanya di luar (dark mode) */

/* Latar belakang halaman auth agar kaca kartu terlihat */
.dark .fi-simple-layout {
    background:
        radial-gradient(ellipse 70% 45% at 50% 35%, rgba(124, 58, 237, 0.22), transparent 62%),
        radial-gradient(ellipse 55% 40% at 75% 65%, rgba(37, 99, 235, 0.16), transparent 58%),
        radial-gradient(ellipse 45% 35% at 20% 70%, rgba(236, 72, 153, 0.1), transparent 55%),
        #050508 !important;
}

/* Kartu login/register — efek kaca (yang dicentang) */
.dark .fi-simple-main {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-top-color: rgba(255, 255, 255, 0.36) !important;
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(40, 42, 52, 0.38) 28%,
            rgba(18, 18, 24, 0.55) 100%
        ) !important;
    background-color: rgba(24, 26, 32, 0.42) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 12px 40px rgba(0, 0, 0, 0.45) !important;
}

.dark .fi-simple-main .markom-login-glow {
    overflow: visible !important;
}

.dark .fi-simple-main .markom-login-glow > * {
    overflow: visible !important;
}

.dark .fi-simple-main .markom-login-glow .fi-input-wrp,
.dark .fi-simple-main .markom-login-glow .fi-input-wrp:focus-within {
    position: relative !important;
    z-index: 1;
    overflow: visible !important;
    min-height: 2.85rem;
    border-radius: 9999px !important;
    border: none !important;
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    --tw-bg-opacity: 1 !important;
    box-shadow: var(--markom-login-glow-shadow) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    transition: box-shadow 0.2s ease;
}

/* Garis gradient tipis di tepi saja */
.dark .fi-simple-main .markom-login-glow .fi-input-wrp::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--markom-login-glow-border);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.dark .fi-simple-main .markom-login-glow .fi-input-wrp:focus-within {
    box-shadow: var(--markom-login-glow-shadow-focus) !important;
}

/* Nama + Kata sandi: glow kuning (dark mode) */
.dark .fi-simple-main .markom-login-glow--name,
.dark .fi-simple-main .markom-login-glow--password {
    --markom-login-glow-border: linear-gradient(90deg, #fde68a 0%, #facc15 45%, #f59e0b 100%);
    --markom-login-glow-shadow:
        -2px 0 6px -1px rgba(250, 204, 21, 0.55),
        2px 0 6px -1px rgba(245, 158, 11, 0.55);
    --markom-login-glow-shadow-focus:
        -3px 0 8px 0 rgba(250, 204, 21, 0.75),
        3px 0 8px 0 rgba(245, 158, 11, 0.75);
}

/* Label Nama / Kata sandi — kuning (dark mode saja) */
.dark .fi-simple-main .markom-login-glow--name .fi-fo-field-wrp-label,
.dark .fi-simple-main .markom-login-glow--password .fi-fo-field-wrp-label,
.dark .fi-simple-main .markom-login-glow--name label,
.dark .fi-simple-main .markom-login-glow--password label {
    color: #facc15 !important;
}

.dark .fi-simple-main .markom-login-glow--name .fi-fo-field-wrp-label .fi-fo-field-wrp-required-mark,
.dark .fi-simple-main .markom-login-glow--password .fi-fo-field-wrp-label .fi-fo-field-wrp-required-mark {
    color: #f87171 !important;
}

.dark .fi-simple-main .markom-login-glow .fi-input-wrp > * {
    position: relative;
    z-index: 1;
}

/* Isi kolom hitam pekat (kalahkan gaya Filament / autofill browser) */
.dark .fi-simple-main .markom-login-glow .fi-input,
.dark .fi-simple-main .markom-login-glow .fi-input:focus,
.dark .fi-simple-main .markom-login-glow .fi-input:hover,
.dark .fi-simple-main .markom-login-glow input[type='text'],
.dark .fi-simple-main .markom-login-glow input[type='password'] {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #f8fafc !important;
    caret-color: #f8fafc;
    border-radius: 9999px !important;
    min-height: 2.5rem;
    --tw-bg-opacity: 1 !important;
}

.dark .fi-simple-main .markom-login-glow .fi-input:-webkit-autofill,
.dark .fi-simple-main .markom-login-glow .fi-input:-webkit-autofill:hover,
.dark .fi-simple-main .markom-login-glow .fi-input:-webkit-autofill:focus,
.dark .fi-simple-main .markom-login-glow input:-webkit-autofill,
.dark .fi-simple-main .markom-login-glow input:-webkit-autofill:hover,
.dark .fi-simple-main .markom-login-glow input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f8fafc !important;
    caret-color: #f8fafc !important;
    transition: background-color 99999s ease-out;
    box-shadow: 0 0 0 1000px #000000 inset !important;
    -webkit-box-shadow: 0 0 0 1000px #000000 inset !important;
}

.dark .fi-simple-main .markom-login-glow .fi-input::placeholder {
    color: rgba(148, 163, 184, 0.85) !important;
}

.dark .fi-simple-main .markom-login-glow--password .fi-input-wrp .fi-icon-btn {
    border-radius: 0.85rem;
    margin-inline-end: 0.25rem;
    color: #e5e7eb;
    background: transparent !important;
}

/* Tombol Masuk — efek kaca (glass) */
.dark .fi-simple-main .markom-login-glass-btn.fi-btn,
.dark .fi-simple-main .markom-login-glass-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 2.85rem;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-top-color: rgba(255, 255, 255, 0.38) !important;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(42, 44, 52, 0.45) 22%,
            rgba(22, 22, 28, 0.72) 100%
        ) !important;
    background-color: rgba(28, 30, 36, 0.55) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 6px 18px rgba(0, 0, 0, 0.35) !important;
    color: #e8eaed !important;
    font-weight: 600 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.dark .fi-simple-main .markom-login-glass-btn.fi-btn:hover,
.dark .fi-simple-main .markom-login-glass-btn:hover {
    border-color: rgba(251, 191, 36, 0.55) !important;
    border-top-color: rgba(253, 224, 71, 0.85) !important;
    background:
        linear-gradient(
            180deg,
            rgba(253, 224, 71, 0.28) 0%,
            rgba(180, 120, 20, 0.35) 28%,
            rgba(40, 32, 12, 0.82) 100%
        ) !important;
    background-color: rgba(60, 45, 10, 0.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(254, 243, 199, 0.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(251, 191, 36, 0.35),
        0 0 18px 2px rgba(251, 191, 36, 0.55),
        0 0 36px 6px rgba(245, 158, 11, 0.35),
        0 8px 22px rgba(0, 0, 0, 0.4) !important;
    color: #fef3c7 !important;
}

.dark .fi-simple-main .markom-login-glass-btn.fi-btn:focus-visible,
.dark .fi-simple-main .markom-login-glass-btn:focus-visible {
    border-color: rgba(251, 191, 36, 0.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(254, 243, 199, 0.4),
        0 0 0 2px rgba(251, 191, 36, 0.45),
        0 0 22px 4px rgba(251, 191, 36, 0.5) !important;
    color: #fef3c7 !important;
}

.dark .fi-simple-main .markom-login-glass-btn.fi-btn:active,
.dark .fi-simple-main .markom-login-glass-btn:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 3px 10px rgba(0, 0, 0, 0.3) !important;
}

.dark .fi-simple-main .markom-login-glass-btn .fi-btn-label {
    color: inherit !important;
}

/* ============================================================
   Login / register — light mode (selaras Dashboard Progress ivory)
   ============================================================ */

html:not(.dark) .fi-simple-layout {
    --mdp-canvas: #f3f0e9;
    --mdp-surface: #fffdf8;
    --mdp-surface-soft: #f8f5ee;
    --mdp-yellow: #f6c928;
    --mdp-yellow-soft: #fff4bf;
    --mdp-ink: #252525;
    --mdp-muted: #706d66;
    --mdp-line: #ded9ce;
    --mdp-line-strong: #cbc4b7;
    --mdp-shadow: 0 8px 24px rgb(70 61 43 / 0.06);
    font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(246, 201, 40, 0.14), transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 80%, rgba(222, 217, 206, 0.55), transparent 60%),
        var(--mdp-canvas) !important;
    color: var(--mdp-ink);
}

html:not(.dark) .fi-simple-main {
    border-radius: 1.25rem !important;
    border: 1px solid var(--mdp-line) !important;
    background: var(--mdp-surface) !important;
    box-shadow: var(--mdp-shadow) !important;
    color: var(--mdp-ink);
}

html:not(.dark) .fi-simple-main .fi-simple-header-heading,
html:not(.dark) .fi-simple-main .fi-logo,
html:not(.dark) .fi-simple-main h1 {
    font-family: "Outfit", ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 700 !important;
    color: var(--mdp-ink) !important;
    letter-spacing: -0.02em;
}

html:not(.dark) .fi-simple-main .fi-simple-header-subheading,
html:not(.dark) .fi-simple-main .fi-simple-subheading,
html:not(.dark) .fi-simple-main p {
    color: var(--mdp-muted) !important;
}

html:not(.dark) .fi-simple-main .markom-login-glow .fi-fo-field-wrp-label,
html:not(.dark) .fi-simple-main .markom-login-glow label,
html:not(.dark) .fi-simple-main .fi-fo-field-wrp-label,
html:not(.dark) .fi-simple-main label {
    color: var(--mdp-ink) !important;
    font-weight: 600 !important;
}

html:not(.dark) .fi-simple-main .markom-login-glow .fi-input-wrp,
html:not(.dark) .fi-simple-main .fi-input-wrp {
    min-height: 2.85rem;
    border-radius: 9999px !important;
    border: 1px solid var(--mdp-line-strong) !important;
    background: var(--mdp-surface-soft) !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

html:not(.dark) .fi-simple-main .markom-login-glow .fi-input-wrp:focus-within,
html:not(.dark) .fi-simple-main .fi-input-wrp:focus-within {
    border-color: #ebcd5f !important;
    background: #fffef9 !important;
    box-shadow: 0 0 0 3px rgba(246, 201, 40, 0.22) !important;
}

html:not(.dark) .fi-simple-main .markom-login-glow .fi-input-wrp::after {
    content: none !important;
    display: none !important;
}

html:not(.dark) .fi-simple-main .markom-login-glow .fi-input,
html:not(.dark) .fi-simple-main .markom-login-glow input,
html:not(.dark) .fi-simple-main .fi-input,
html:not(.dark) .fi-simple-main input[type='text'],
html:not(.dark) .fi-simple-main input[type='password'],
html:not(.dark) .fi-simple-main input[type='email'] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--mdp-ink) !important;
    caret-color: var(--mdp-ink);
    border-radius: 9999px !important;
}

html:not(.dark) .fi-simple-main .markom-login-glow .fi-input::placeholder,
html:not(.dark) .fi-simple-main .fi-input::placeholder {
    color: rgba(112, 109, 102, 0.75) !important;
}

html:not(.dark) .fi-simple-main .markom-login-glow .fi-input:-webkit-autofill,
html:not(.dark) .fi-simple-main .markom-login-glow input:-webkit-autofill,
html:not(.dark) .fi-simple-main input:-webkit-autofill {
    -webkit-text-fill-color: var(--mdp-ink) !important;
    caret-color: var(--mdp-ink) !important;
    transition: background-color 99999s ease-out;
    box-shadow: 0 0 0 1000px var(--mdp-surface-soft) inset !important;
    -webkit-box-shadow: 0 0 0 1000px var(--mdp-surface-soft) inset !important;
}

html:not(.dark) .fi-simple-main .markom-login-glow--password .fi-input-wrp .fi-icon-btn {
    color: var(--mdp-muted) !important;
    background: transparent !important;
}

html:not(.dark) .fi-simple-main .markom-login-glass-btn.fi-btn,
html:not(.dark) .fi-simple-main .markom-login-glass-btn,
html:not(.dark) .fi-simple-main .fi-btn-color-primary {
    width: 100%;
    min-height: 2.85rem;
    border-radius: 9999px !important;
    border: 1px solid var(--mdp-ink) !important;
    background: var(--mdp-ink) !important;
    color: #fff !important;
    font-family: "Outfit", ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

html:not(.dark) .fi-simple-main .markom-login-glass-btn.fi-btn:hover,
html:not(.dark) .fi-simple-main .markom-login-glass-btn:hover,
html:not(.dark) .fi-simple-main .fi-btn-color-primary:hover {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgb(70 61 43 / 0.14) !important;
}

html:not(.dark) .fi-simple-main .markom-login-glass-btn .fi-btn-label,
html:not(.dark) .fi-simple-main .fi-btn-color-primary .fi-btn-label {
    color: #fff !important;
}

html:not(.dark) .fi-simple-main a {
    color: var(--mdp-ink) !important;
    font-weight: 600;
    text-decoration-color: rgba(246, 201, 40, 0.7);
}

html:not(.dark) .fi-simple-main a:hover {
    color: #1a1a1a !important;
}

html:not(.dark) .fi-simple-main .fi-checkbox-input,
html:not(.dark) .fi-simple-main input[type='checkbox'] {
    accent-color: var(--mdp-yellow);
}

html:not(.dark) .fi-simple-main .fi-fo-checkbox .fi-fo-field-wrp-label {
    color: var(--mdp-muted) !important;
    font-weight: 500 !important;
}