/* =============================================================
   KONVEKSI21 — Light Luxury Theme
   Aktif saat: html[data-theme="light"]
   Hanya override CSS Variables + targeted overrides.
   Tidak mengubah struktur apapun.
   ============================================================= */

/* ── Anti-flash: sembunyikan sebelum theme siap ──────────────── */
html:not([data-theme]) { visibility: hidden; }
html[data-theme]        { visibility: visible; }

/* ══════════════════════════════════════════════════════════════
   DARK LUXURY (default — pastikan baseline tetap terdefinisi)
══════════════════════════════════════════════════════════════ */
html[data-theme="dark"],
html:not([data-theme="light"]) {
    color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT LUXURY
══════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
    color-scheme: light;

    /* ── Core Backgrounds ─────────────────────────────────── */
    --color-black-deep:   #eef1f4;
    --color-black:        #f8f9fa;
    --color-black-light:  #ffffff;
    --color-black-soft:   #f2f4f7;
    --color-black-muted:  #e4e7ec;
    --color-dark-card:    #ffffff;
    --color-dark-border:  #dde1e9;

    /* ── Gold (dipertahankan, sedikit digelapkan agar kontras) */
    --color-gold:         #c9a227;
    --color-gold-dark:    #a8841a;
    --color-gold-light:   #dbb84e;
    --color-gold-pale:    #f0d080;
    --color-gold-muted:   rgba(201,162,39,.12);
    --color-gold-glow:    rgba(201,162,39,.28);

    /* ── Text ─────────────────────────────────────────────── */
    --color-white:        #1c2333;
    --color-white-soft:   #2a3347;
    --color-white-muted:  #374055;
    --color-gray-100:     #1c2333;
    --color-gray-200:     #2e3a52;
    --color-gray-300:     #4a5570;
    --color-gray-400:     #5a6480;
    --color-gray-500:     #778090;
    --color-gray-600:     #9aa0ad;
    --color-gray-700:     #c8cdd7;
    --color-gray-800:     #e4e7ec;

    /* ── Semantic ─────────────────────────────────────────── */
    --color-success:      #15803d;
    --color-success-bg:   rgba(21,128,61,.1);
    --color-danger:       #b91c1c;
    --color-danger-bg:    rgba(185,28,28,.1);
    --color-warning:      #b45309;
    --color-warning-bg:   rgba(180,83,9,.1);
    --color-info:         #0e7490;
    --color-info-bg:      rgba(14,116,144,.1);

    /* ── Shadows ──────────────────────────────────────────── */
    --shadow-sm:      0 1px 4px rgba(0,0,0,.08);
    --shadow-md:      0 4px 12px rgba(0,0,0,.1);
    --shadow-lg:      0 10px 28px rgba(0,0,0,.13);
    --shadow-xl:      0 20px 48px rgba(0,0,0,.16);
    --shadow-gold:    0 4px 20px rgba(201,162,39,.25);
    --shadow-gold-lg: 0 8px 32px rgba(201,162,39,.35);
    --shadow-inset:   inset 0 2px 4px rgba(0,0,0,.06);

    /* ── Navbar ───────────────────────────────────────────── */
    --navbar-bg: #ffffff;
}

/* ══════════════════════════════════════════════════════════════
   ELEMENT OVERRIDES — Light Mode
══════════════════════════════════════════════════════════════ */

/* ── Body & Base ─────────────────────────────────────────── */
html[data-theme="light"] body {
    background-color: #f8f9fa;
    color: #374055;
    transition: background-color .35s ease, color .35s ease;
}

/* Smooth transition untuk semua elemen */
html[data-theme="light"] *,
html[data-theme="light"] *::before,
html[data-theme="light"] *::after {
    transition-property: background-color, border-color, color, box-shadow, fill;
    transition-duration: .3s;
    transition-timing-function: ease;
}
/* Kecualikan animasi & transform agar tidak rusak */
html[data-theme="light"] *[class*="animate"],
html[data-theme="light"] *[style*="transition"] {
    transition-property: background-color, border-color, color !important;
}

/* ── Announcement Bar ───────────────────────────────────── */
html[data-theme="light"] .announcement-bar,
html[data-theme="light"] .k-announce {
    background: linear-gradient(90deg, #fefce8, #fef9e7, #fefce8) !important;
    border-bottom-color: rgba(201,162,39,.3) !important;
    color: #78580a !important;
}
html[data-theme="light"] .announcement-bar strong,
html[data-theme="light"] .k-announce strong { color: #a8841a !important; }

/* ── Navbar (k-navbar class) ────────────────────────────── */
html[data-theme="light"] .k-navbar,
html[data-theme="light"] .navbar {
    background: rgba(255,255,255,.97) !important;
    border-bottom-color: #dde1e9 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
    backdrop-filter: blur(12px) !important;
}

html[data-theme="light"] .k-brand-name,
html[data-theme="light"] .brand-name { color: #1c2333 !important; }
html[data-theme="light"] .k-brand-sub,
html[data-theme="light"] .brand-tagline { color: #c9a227 !important; }

html[data-theme="light"] .k-nav-link,
html[data-theme="light"] .nav-link { color: #5a6480 !important; }
html[data-theme="light"] .k-nav-link:hover,
html[data-theme="light"] .k-nav-link.active,
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active {
    color: #c9a227 !important;
    background-color: rgba(201,162,39,.09) !important;
}

html[data-theme="light"] .k-search-input {
    background: #f2f4f7 !important;
    border-color: #dde1e9 !important;
    color: #1c2333 !important;
}
html[data-theme="light"] .k-search-input::placeholder { color: #9aa0ad !important; }
html[data-theme="light"] .k-search-input:focus {
    background: #fff !important;
    border-color: #c9a227 !important;
    box-shadow: 0 0 0 3px rgba(201,162,39,.15) !important;
}

html[data-theme="light"] .k-icon-btn,
html[data-theme="light"] .navbar-icon-btn {
    background: #f2f4f7 !important;
    border-color: #dde1e9 !important;
    color: #5a6480 !important;
}
html[data-theme="light"] .k-icon-btn:hover,
html[data-theme="light"] .navbar-icon-btn:hover {
    background: rgba(201,162,39,.1) !important;
    border-color: #c9a227 !important;
    color: #c9a227 !important;
}

html[data-theme="light"] .k-profile-btn {
    background: #f2f4f7 !important;
    border-color: #dde1e9 !important;
    color: #5a6480 !important;
}
html[data-theme="light"] .k-profile-name { color: #1c2333 !important; }

/* ── Dropdowns ──────────────────────────────────────────── */
html[data-theme="light"] .k-notif-panel,
html[data-theme="light"] .k-profile-panel,
html[data-theme="light"] .k-cat-dropdown,
html[data-theme="light"] .nav-dropdown {
    background: #ffffff !important;
    border-color: #dde1e9 !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.14) !important;
}

html[data-theme="light"] .k-cat-item,
html[data-theme="light"] .nav-dropdown-item,
html[data-theme="light"] .k-notif-item,
html[data-theme="light"] .k-profile-item {
    color: #5a6480 !important;
}
html[data-theme="light"] .k-cat-item:hover,
html[data-theme="light"] .nav-dropdown-item:hover,
html[data-theme="light"] .k-notif-item:hover,
html[data-theme="light"] .k-profile-item:hover {
    background: rgba(201,162,39,.08) !important;
    color: #c9a227 !important;
}
html[data-theme="light"] .k-notif-item.unread {
    background: rgba(201,162,39,.06) !important;
}
html[data-theme="light"] .k-notif-head,
html[data-theme="light"] .k-notif-head-title,
html[data-theme="light"] .k-profile-head { border-color: #dde1e9 !important; }
html[data-theme="light"] .k-notif-head-title { color: #1c2333 !important; }
html[data-theme="light"] .k-profile-head-name { color: #1c2333 !important; }
html[data-theme="light"] .k-notif-title { color: #2a3347 !important; }
html[data-theme="light"] .k-notif-msg { color: #778090 !important; }
html[data-theme="light"] .k-notif-time { color: #9aa0ad !important; }
html[data-theme="light"] .k-notif-footer {
    border-top-color: #dde1e9 !important;
    color: #c9a227 !important;
}
html[data-theme="light"] .k-notif-footer:hover { background: rgba(201,162,39,.07) !important; }

html[data-theme="light"] .k-profile-role {
    background: rgba(201,162,39,.1) !important;
    color: #a8841a !important;
    border-color: rgba(201,162,39,.25) !important;
}
html[data-theme="light"] .k-profile-divider,
html[data-theme="light"] .nav-profile-divider { background: #dde1e9 !important; }
html[data-theme="light"] .k-profile-head-email { color: #778090 !important; }
html[data-theme="light"] .k-profile-item-admin { color: #a8841a !important; }
html[data-theme="light"] .k-profile-item-danger { color: #b91c1c !important; }

/* ── Mobile menu ────────────────────────────────────────── */
html[data-theme="light"] .k-mobile-menu {
    background: #ffffff !important;
    border-bottom-color: #dde1e9 !important;
}
html[data-theme="light"] .k-mobile-nav-link { color: #5a6480 !important; }
html[data-theme="light"] .k-mobile-nav-link:hover { background: rgba(201,162,39,.08) !important; color: #c9a227 !important; }
html[data-theme="light"] .k-mobile-search input {
    background: #f2f4f7 !important;
    border-color: #dde1e9 !important;
    color: #1c2333 !important;
}

/* ── Cards ──────────────────────────────────────────────── */
html[data-theme="light"] .product-card {
    background: #ffffff !important;
    border-color: #dde1e9 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
html[data-theme="light"] .product-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.13) !important;
    border-color: rgba(201,162,39,.4) !important;
}

/* ── Hero Section ───────────────────────────────────────── */
html[data-theme="light"] .hero { background-color: #eef1f4 !important; }
html[data-theme="light"] .hero-overlay {
    background: linear-gradient(135deg, rgba(238,241,244,.9) 0%, rgba(238,241,244,.7) 50%, rgba(238,241,244,.85) 100%) !important;
}
html[data-theme="light"] .hero-title { color: #1c2333 !important; }
html[data-theme="light"] .hero-subtitle { color: #5a6480 !important; }
html[data-theme="light"] .hero-stat-number { color: #c9a227 !important; }
html[data-theme="light"] .hero-stat-label { color: #778090 !important; }

/* ── Section Headers ────────────────────────────────────── */
html[data-theme="light"] .section-header h2,
html[data-theme="light"] .section-header .section-title-underline { color: #1c2333 !important; }
html[data-theme="light"] .section-header p { color: #778090 !important; }

/* ── Forms ──────────────────────────────────────────────── */
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select {
    background-color: #ffffff !important;
    border-color: #cdd2dc !important;
    color: #1c2333 !important;
}
html[data-theme="light"] .form-control::placeholder { color: #9aa0ad !important; }
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .form-select:focus {
    background-color: #fff !important;
    border-color: #c9a227 !important;
    box-shadow: 0 0 0 3px rgba(201,162,39,.15) !important;
}
html[data-theme="light"] .form-label { color: #4a5570 !important; }
html[data-theme="light"] .form-check-label { color: #5a6480 !important; }

/* ── Buttons ────────────────────────────────────────────── */
html[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #c9a227, #dbb84e) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(201,162,39,.35) !important;
}
html[data-theme="light"] .btn-primary:hover {
    background: linear-gradient(135deg, #a8841a, #c9a227) !important;
    color: #ffffff !important;
}
html[data-theme="light"] .btn-outline-gold {
    color: #c9a227 !important;
    border-color: #c9a227 !important;
}
html[data-theme="light"] .btn-outline-gold:hover {
    background-color: #c9a227 !important;
    color: #fff !important;
}
html[data-theme="light"] .btn-secondary {
    background-color: #eef1f4 !important;
    border-color: #cdd2dc !important;
    color: #374055 !important;
}

/* ── Tables ─────────────────────────────────────────────── */
html[data-theme="light"] .table,
html[data-theme="light"] .table-dark {
    --bs-table-bg: #ffffff !important;
    --bs-table-color: #2a3347 !important;
    --bs-table-border-color: #dde1e9 !important;
    --bs-table-striped-bg: #f8f9fa !important;
    --bs-table-hover-bg: #f2f4f7 !important;
    color: #2a3347 !important;
}
html[data-theme="light"] .table-dark th,
html[data-theme="light"] .table thead th {
    background: #f2f4f7 !important;
    color: #5a6480 !important;
    border-color: #dde1e9 !important;
}
html[data-theme="light"] .table td,
html[data-theme="light"] .table-dark td { border-color: #eef1f4 !important; }

/* ── Badges ─────────────────────────────────────────────── */
html[data-theme="light"] .badge.bg-secondary { background-color: #eef1f4 !important; color: #5a6480 !important; }

/* ── Pagination ─────────────────────────────────────────── */
html[data-theme="light"] .page-link {
    background-color: #ffffff !important;
    border-color: #cdd2dc !important;
    color: #5a6480 !important;
}
html[data-theme="light"] .page-item.active .page-link {
    background: linear-gradient(135deg, #c9a227, #dbb84e) !important;
    border-color: #c9a227 !important;
    color: #fff !important;
}

/* ── Modal / Alert ──────────────────────────────────────── */
html[data-theme="light"] .alert { border-color: #dde1e9 !important; }
html[data-theme="light"] .modal-content {
    background-color: #ffffff !important;
    border-color: #cdd2dc !important;
}

/* ── Scrollbar ──────────────────────────────────────────── */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f2f4f7; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cdd2dc; border-radius: 4px; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #c9a227; }

/* ── Admin Panel ────────────────────────────────────────── */
html[data-theme="light"] .admin-body { background-color: #f2f4f7 !important; }
html[data-theme="light"] .admin-topnav {
    background: #ffffff !important;
    border-bottom-color: #dde1e9 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.07) !important;
}
html[data-theme="light"] .admin-sidebar {
    background: #ffffff !important;
    border-right-color: #dde1e9 !important;
}
html[data-theme="light"] .admin-card,
html[data-theme="light"] .admin-stat-card {
    background: #ffffff !important;
    border-color: #dde1e9 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
html[data-theme="light"] .admin-nav-link { color: #778090 !important; }
html[data-theme="light"] .admin-nav-link.active {
    color: #c9a227 !important;
    background: rgba(201,162,39,.09) !important;
    border-left-color: #c9a227 !important;
}
html[data-theme="light"] .admin-nav-link:hover { background: rgba(201,162,39,.06) !important; color: #1c2333 !important; }
html[data-theme="light"] .admin-nav-group-label { color: #9aa0ad !important; }
html[data-theme="light"] .admin-form-control {
    background: #ffffff !important;
    border-color: #cdd2dc !important;
    color: #1c2333 !important;
}
html[data-theme="light"] .admin-stat-value { color: #1c2333 !important; }
html[data-theme="light"] .admin-stat-label { color: #778090 !important; }
html[data-theme="light"] .admin-page-title { color: #1c2333 !important; }
html[data-theme="light"] .admin-table th { background: #f2f4f7 !important; color: #778090 !important; }
html[data-theme="light"] .admin-table td { color: #374055 !important; border-bottom-color: #f2f4f7 !important; }
html[data-theme="light"] .admin-user-menu,
html[data-theme="light"] .admin-notif-panel {
    background: #ffffff !important;
    border-color: #dde1e9 !important;
}
html[data-theme="light"] .admin-user-menu-item { color: #5a6480 !important; }
html[data-theme="light"] .admin-user-menu-name { color: #1c2333 !important; }
html[data-theme="light"] .admin-user-menu-email { color: #778090 !important; }
html[data-theme="light"] .admin-user-btn {
    background: #f2f4f7 !important;
    border-color: #dde1e9 !important;
    color: #5a6480 !important;
}
html[data-theme="light"] .admin-user-name { color: #1c2333 !important; }

/* ── Footer ─────────────────────────────────────────────── */
html[data-theme="light"] .footer {
    background-color: #1c2333 !important;
    border-top-color: #2e3a52 !important;
}

/* ── Toast ──────────────────────────────────────────────── */
html[data-theme="light"] .toast {
    background-color: #ffffff !important;
    border-color: #dde1e9 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
}
html[data-theme="light"] .toast-title { color: #1c2333 !important; }
html[data-theme="light"] .toast-message { color: #778090 !important; }

/* ══════════════════════════════════════════════════════════════
   EYE TOGGLE BUTTON STYLES
══════════════════════════════════════════════════════════════ */
.k21-theme-eye-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.05);
    cursor: pointer;
    color: #aaaaaa;
    font-size: 1rem;
    transition: color .2s, background .2s, border-color .2s, transform .15s;
    flex-shrink: 0;
    outline: none;
}
.k21-theme-eye-btn:hover {
    color: #c9a227;
    border-color: rgba(201,162,39,.45);
    background: rgba(201,162,39,.1);
}
.k21-theme-eye-btn:active { transform: scale(.93); }

/* Light mode state */
html[data-theme="light"] .k21-theme-eye-btn {
    border-color: #dde1e9;
    background: #f2f4f7;
    color: #5a6480;
}
html[data-theme="light"] .k21-theme-eye-btn:hover {
    border-color: #c9a227;
    background: rgba(201,162,39,.09);
    color: #c9a227;
}

/* Icon transition */
.k21-theme-eye-btn .theme-eye-open,
.k21-theme-eye-btn .theme-eye-close {
    position: absolute;
    transition: opacity .2s ease, transform .2s ease;
    line-height: 1;
}

/* Default state (dark): show eye-open, hide eye-slash */
.k21-theme-eye-btn .theme-eye-open  { opacity: 1; transform: scale(1); }
.k21-theme-eye-btn .theme-eye-close { opacity: 0; transform: scale(.7); }

/* Light mode: hide eye-open, show eye-slash */
html[data-theme="light"] .k21-theme-eye-btn .theme-eye-open  { opacity: 0; transform: scale(.7); }
html[data-theme="light"] .k21-theme-eye-btn .theme-eye-close { opacity: 1; transform: scale(1); }

/* Tooltip label */
.k21-theme-eye-btn::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.8);
    color: #fff;
    font-size: .68rem;
    font-weight: 500;
    padding: .25rem .55rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    z-index: 999;
}
.k21-theme-eye-btn:hover::after { opacity: 1; }

html[data-theme="light"] .k21-theme-eye-btn::after { background: rgba(30,35,50,.85); }