/* ============================================================================
   dark-custom.css — Tema Gelap Dashboard Admin Leatique
   Palet "Modern Dark Indigo / Cyber-Clean" (permintaan Pak Vicky, 9 Okt 2026)
   - HANYA aktif saat <html class="dark-style"> ; mode terang TIDAK tersentuh.
   - Dimuat PALING AKHIR supaya menang cascade.
   ========================================================================== */

/* 1) Token warna ---------------------------------------------------------- */
html.dark-style {
  --lea-bg-1: #111214;
  --lea-bg-2: #1E1F29;
  --lea-surface: #2B2D31;
  --lea-surface-2: #313338;
  --lea-line: #3E4147;
  --lea-glow: rgba(88, 101, 242, .16);
  --lea-primary: #5865F2;
  --lea-primary-hover: #4752C4;
  --lea-heading: #FFFFFF;
  --lea-text: #DBDEE1;
  --lea-muted: #9BA0AC;
  --lea-link: #A5AEF9;
  --lea-link-hover: #C6CBFC;
}

/* 2) Latar gradasi indigo gelap ------------------------------------------- */
html.dark-style body {
  background-color: var(--lea-bg-1);
  background-image: linear-gradient(180deg, #111214 0%, #1E1F29 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: var(--lea-text);
}

html.dark-style .layout-page,
html.dark-style .content-wrapper { background: transparent; }

/* 3) Sidebar (menu) ------------------------------------------------------- */
html.dark-style .bg-menu-theme {
  background-color: var(--lea-surface) !important;
  box-shadow: inset -1px 0 0 rgba(88, 101, 242, .14);
}
html.dark-style .bg-menu-theme .app-brand { border-bottom: 1px solid rgba(88, 101, 242, .10); }
html.dark-style .bg-menu-theme .menu-inner .menu-item .menu-link { border-radius: .625rem; }
html.dark-style .bg-menu-theme .menu-inner > .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(90deg, rgba(88, 101, 242, .20) 0%, rgba(180, 92, 230, .10) 100%);
}
html.dark-style .bg-menu-theme .menu-inner > .menu-item:not(.active) > .menu-link:hover {
  background: rgba(88, 101, 242, .10);
}
html.dark-style .bg-menu-theme .ps__thumb-y { background: rgba(219, 222, 225, .35) !important; }

/* 4) Navbar --------------------------------------------------------------- */
html.dark-style .layout-navbar.navbar-detached {
  background-color: rgba(43, 45, 49, .92) !important;
  border: 1px solid rgba(88, 101, 242, .16);
  border-radius: 14px;
  box-shadow: 0 6px 24px -18px rgba(88, 101, 242, .55);
  backdrop-filter: blur(6px);
}

/* 5) Kartu & container ---------------------------------------------------- */
html.dark-style .card {
  background-color: var(--lea-surface);
  border: 1px solid var(--lea-glow);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(88, 101, 242, .05), 0 16px 40px -30px rgba(88, 101, 242, .6);
}
html.dark-style .card .card-header,
html.dark-style .card .card-footer { border-color: rgba(88, 101, 242, .12); }

/* 6) Tombol --------------------------------------------------------------- */
html.dark-style .btn {
  border-radius: .75rem;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html.dark-style .btn-primary:hover,
html.dark-style .btn-primary:focus,
html.dark-style .btn-primary.dropdown-toggle {
  background-color: var(--lea-primary-hover) !important;
  border-color: var(--lea-primary-hover) !important;
  box-shadow: 0 6px 18px -8px rgba(88, 101, 242, .7);
}

/* 7) Form ----------------------------------------------------------------- */
html.dark-style .form-control,
html.dark-style .form-select {
  background-color: var(--lea-surface-2);
  border-color: var(--lea-line);
  color: var(--lea-text);
  border-radius: .75rem;
}
html.dark-style .form-control:focus,
html.dark-style .form-select:focus {
  background-color: var(--lea-surface-2);
  border-color: var(--lea-primary);
  box-shadow: 0 0 0 .18rem rgba(88, 101, 242, .22);
  color: var(--lea-heading);
}
html.dark-style .form-control::placeholder { color: var(--lea-muted); opacity: .8; }

/* 8) Dropdown / modal / offcanvas / popover / toast ----------------------- */
html.dark-style .dropdown-menu,
html.dark-style .popover {
  background-color: var(--lea-surface);
  border: 1px solid var(--lea-glow);
  border-radius: 12px;
  box-shadow: 0 10px 34px -16px rgba(10, 12, 22, .9);
}
html.dark-style .dropdown-item { border-radius: .5rem; }
html.dark-style .modal-content,
html.dark-style .offcanvas {
  background-color: var(--lea-surface);
  border: 1px solid var(--lea-glow);
  border-radius: 16px;
}
html.dark-style .toast { background-color: rgba(43, 45, 49, .95); }

/* 9) Tabel ---------------------------------------------------------------- */
html.dark-style .table > thead { color: var(--lea-heading); }
html.dark-style .table-hover > tbody > tr:hover > * { background-color: rgba(88, 101, 242, .06); }

/* 10) Pagination ---------------------------------------------------------- */
html.dark-style .page-item.active .page-link {
  background-color: var(--lea-primary);
  border-color: var(--lea-primary);
  box-shadow: 0 4px 14px -6px rgba(88, 101, 242, .7);
}

/* 11) Scrollbar & seleksi ------------------------------------------------- */
html.dark-style ::-webkit-scrollbar-track { background: #17181C; }
html.dark-style ::-webkit-scrollbar-thumb { background: #3E4147; }
html.dark-style ::-webkit-scrollbar-thumb:hover { background: #4A4E58; }
html.dark-style ::selection { background: rgba(88, 101, 242, .35); color: #fff; }

/* 12) Perbaikan komponen khusus aplikasi ---------------------------------- */
/* titik "belum dibaca" notifikasi (di halaman Notifikasi memakai inline style) */
html.dark-style .dropdown-notifications-read span { background-color: var(--lea-primary) !important; }
/* baris varian produk yang disembunyikan */
html:not(.dark-style) .variant-hidden-row { background-color: #dcdcdc; }
html.dark-style .variant-hidden-row { background-color: rgba(255, 255, 255, .055) !important; }
/* komponen upload legacy (latar putih hardcoded) */
html.dark-style .file-upload,
html.dark-style .file-upload-2 { background-color: var(--lea-surface); border: 1px solid var(--lea-glow); border-radius: 16px; }
html.dark-style .image-title-wrap { color: var(--lea-text); }
html.dark-style .drag-text h4 { color: var(--lea-link) !important; }
html.dark-style .file-upload-btn { background: var(--lea-primary); border-color: var(--lea-primary); border-bottom-color: var(--lea-primary-hover); }
html.dark-style .file-upload-btn:hover { background: var(--lea-primary-hover); }
html.dark-style .text-blue { color: var(--lea-link); }
html.dark-style .text-link { color: var(--lea-muted); }
/* badge berlatar putih (mis. FileManager) */
html.dark-style .bg-white { background-color: var(--lea-surface) !important; }
/* dekorasi halaman login — diredupkan agar kalem di latar gelap */
html.dark-style .authentication-wrapper.authentication-basic .authentication-inner:before,
html.dark-style .authentication-wrapper.authentication-basic .authentication-inner:after { opacity: .45; }
/* popup konfirmasi */
html.dark-style .swal2-popup { border-radius: 16px; border: 1px solid var(--lea-glow); }
/* tombol toggle tema di navbar */
html:not(.dark-style) .style-switcher-toggle:hover i { color: #5865F2; }
html.dark-style .style-switcher-toggle:hover i { color: var(--lea-link); }
/* fokus keyboard yang jelas */
html.dark-style :focus-visible { outline: 2px solid rgba(88, 101, 242, .75); outline-offset: 2px; }

/* 13) Koreksi kontras (hasil uji visual) ---------------------------------- */
/* placeholder lebih jelas */
html.dark-style .form-control::placeholder { color: #A9AEB8; opacity: 1; }
/* teks sekunder naik sedikit */
html.dark-style .text-muted { color: #A3A8B4 !important; }

/* tombol putih (btn-white) -> tombol slate agar menyatu dengan tema gelap */
html.dark-style .btn-white { color: var(--lea-text); background-color: #3A3D45; border-color: #3A3D45; }
html.dark-style .btn-white:hover,
html.dark-style .btn-white:focus,
html.dark-style .btn-white.dropdown-toggle { color: #fff !important; background-color: #454A55 !important; border-color: #454A55 !important; }

/* badge & tombol status: warna solid digelapkan agar teks putih benar-benar kontras */
html.dark-style .badge.bg-info, html.dark-style .btn-info { background-color: #0E7490 !important; border-color: #0E7490; }
html.dark-style .btn-info:hover, html.dark-style .btn-info:focus { background-color: #0B5F77 !important; border-color: #0B5F77 !important; }
html.dark-style .badge.bg-success, html.dark-style .btn-success { background-color: #15803D !important; border-color: #15803D; }
html.dark-style .btn-success:hover, html.dark-style .btn-success:focus { background-color: #116330 !important; border-color: #116330 !important; }
html.dark-style .badge.bg-warning, html.dark-style .btn-warning { background-color: #B45309 !important; border-color: #B45309; }
html.dark-style .btn-warning:hover, html.dark-style .btn-warning:focus { background-color: #92400E !important; border-color: #92400E !important; }
html.dark-style .badge.bg-danger, html.dark-style .btn-danger { background-color: #B91C1C !important; border-color: #B91C1C; }
html.dark-style .btn-danger:hover, html.dark-style .btn-danger:focus { background-color: #991B1B !important; border-color: #991B1B !important; }
html.dark-style .badge.bg-secondary, html.dark-style .btn-secondary { background-color: #565A61 !important; border-color: #565A61; }
html.dark-style .btn-secondary:hover, html.dark-style .btn-secondary:focus { background-color: #4A4E55 !important; border-color: #4A4E55 !important; }

/* preloader (latar putih penuh) -> gelap, spinner indigo */
html.dark-style #preloader { background-color: #111214 !important; }
html.dark-style #preloader .preloader1 { border-color: #5865F2; }

/* halaman "tidak ada akses" (latar putih penuh) */
html.dark-style #access { background-color: #111214 !important; }

/* CKEditor chrome (toolbar/panel/dialog) saat tema gelap */
html.dark-style .cke_chrome { border-color: #3E4147 !important; background: #2B2D31; }
html.dark-style .cke_inner { background: #2B2D31; }
html.dark-style .cke_top { background: #313338 !important; border-bottom-color: #3E4147 !important; }
html.dark-style .cke_bottom { background: #313338 !important; border-top-color: #3E4147 !important; color: #9BA0AC; }
html.dark-style .cke_toolgroup { background: transparent !important; border-color: transparent !important; }
html.dark-style .cke_toolbar_separator { background-color: #3E4147 !important; }
html.dark-style a.cke_button { background: transparent !important; border-color: transparent !important; }
html.dark-style a.cke_button:hover, html.dark-style a.cke_button:focus { background: #3E4147 !important; }
html.dark-style a.cke_button.cke_button_on { background: #5865F2 !important; }
html.dark-style .cke_button_icon { filter: invert(.8); }
html.dark-style .cke_combo_text { color: #DBDEE1; }
html.dark-style a.cke_combo_button { background: #3A3D45 !important; border-color: #3E4147 !important; }
html.dark-style .cke_panel { background: #2B2D31 !important; border-color: #3E4147 !important; }
html.dark-style .cke_panel_listItem a { color: #DBDEE1; }
html.dark-style .cke_panel_listItem a:hover,
html.dark-style .cke_panel_listItem a:focus,
html.dark-style .cke_panel_listItem a.cke_light_background { background: #5865F2 !important; color: #fff; }
html.dark-style .cke_dialog { background: #2B2D31; }
html.dark-style .cke_dialog_title { background: #313338; color: #FFFFFF; text-shadow: none; }
html.dark-style .cke_dialog_contents { background: #2B2D31; }
html.dark-style .cke_dialog_ui_input_text,
html.dark-style .cke_dialog_ui_input_select { background: #313338; color: #DBDEE1; border-color: #3E4147; }
html.dark-style .cke_dialog_footer { background: #313338; }

/* ============================================================
   Logo putih khusus MODE GELAP
   (file: /media/leatique/leatique-logo-putih.png — spesifik tema)
   Mode terang TIDAK terpengaruh (logo lama tampil seperti biasa).
   ============================================================ */
.lea-logo-dark { display: none; }
html.dark-style .lea-logo-light { display: none; }
html.dark-style .lea-logo-dark { display: inline-block; }

/* Sidebar gelap: baris logo bawaan bertinggi tetap 64px (demo.css) — logo putih berbentuk
   hampir kotak butuh ruang lebih; tinggi dibuat otomatis HANYA di mode gelap agar tidak terpotong. */
html.dark-style .menu .app-brand.demo { height: auto !important; }

/* ============================================================
   PERBAIKAN 9 Okt 2026 — aturan yang ADA di core.css / theme-default.css
   (dipakai mode terang) tetapi HILANG di core-dark.css / theme-default-dark.css.
   Di mode gelap stylesheet core.css DITUKAR → aturan ini hilang → fitur rusak
   (terutama .upload__* + .img-bg: kotak upload runtuh / tidak terlihat).
   Semua baris di-scope html.dark-style agar mode terang 100% tidak berubah.
   ============================================================ */

/* --- Upload gambar/file (components/Upload.vue) — KRITIS --- */
html.dark-style .upload__box { padding: 40px; }
html.dark-style .upload__inputfile { width: .1px; height: .1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
html.dark-style .upload__btn { display: inline-block; font-weight: 600; color: #fff; text-align: center; min-width: 116px; padding: 5px; transition: all .3s ease; cursor: pointer; border: 2px solid; background-color: #4045ba; border-color: #4045ba; border-radius: 10px; line-height: 26px; font-size: 14px; }
html.dark-style .upload__btn:hover { background-color: unset; color: #A5AEF9; transition: all .3s ease; }
html.dark-style .upload__btn-box { margin-bottom: 10px; }
html.dark-style .upload__img-wrap { display: flex; flex-wrap: wrap; margin: 0 -10px; }
html.dark-style .upload__img-box { width: 200px; padding: 0 10px; margin-bottom: 12px; background: #fff; -webkit-transition: background 2s; transition: background 2s; cursor: pointer; }
html.dark-style .upload__img-box:hover { background: #e3e3e3; }
html.dark-style .upload__img-close { width: 24px; height: 24px; border-radius: 50%; background-color: rgba(0, 0, 0, .5); position: absolute; top: 10px; right: 10px; text-align: center; line-height: 24px; z-index: 1; cursor: pointer; }
html.dark-style .upload__img-close:after { content: "✖"; font-size: 14px; color: white; }
html.dark-style .upload__img-thumbnail { width: 24px; height: 24px; border-radius: 50%; background-color: rgba(59, 10, 254, .5); position: absolute; top: 10px; right: 39px; text-align: center; line-height: 24px; z-index: 1; cursor: pointer; color: #fff; }
html.dark-style .img-bg { background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; padding-bottom: 100%; }
html.dark-style .dipilih { border: 4px solid #000; border-radius: 11px; }
html.dark-style .upload__img-close-custom { width: 24px; height: 24px; border-radius: 50%; background-color: rgba(0, 0, 0, .5); position: absolute; top: 7px; right: -2px; text-align: center; line-height: 20px; z-index: 1; cursor: pointer; }
html.dark-style .upload__img-close-custom:after { content: "X"; font-size: 14px; color: white; }
html.dark-style .upload__img-box-custom { width: 100px; padding: 0 10px; margin-bottom: 12px; background: #fff; transition: background 2s; cursor: pointer; margin-right: 14px; border-radius: 6px; }

/* --- File Manager (modal) --- */
html.dark-style .fm-file-box { font-size: 25px !important; background: #e9ecef !important; color: #2B2D31 !important; width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: .25rem !important; }
html.dark-style .fm-icon-box { font-size: 32px !important; background: #ffffff !important; color: #2B2D31 !important; width: 52px !important; height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: .25rem !important; }
html.dark-style .fm-menu .list-group a { font-size: 16px !important; color: #DBDEE1 !important; display: flex !important; align-items: center !important; }
html.dark-style .folder-action { position: absolute !important; top: 14px !important; right: 14px !important; }
html.dark-style .file-manager-body { max-height: 100vw !important; overflow: scroll; }
html.dark-style .active-folder { border: 4px solid #5865F2 !important; }
html.dark-style .sidefile ul li { list-style-type: none; font-size: 17px; }
html.dark-style .max-14 { max-width: 14rem; }
html.dark-style .w-16 { width: 12px !important; height: 12px !important; }

/* --- Font & utility --- */
html.dark-style .font-20 { font-size: 20px !important; }
html.dark-style .font-24 { font-size: 24px !important; }
html.dark-style .font-30 { font-size: 30px !important; }
html.dark-style .fw-1rem { font-size: 1rem !important; }
html.dark-style .ti-sm { font-size: 20px; }
html.dark-style .ti-md { font-size: 25px; }
html.dark-style .radius-15 { border-radius: 15px !important; }
html.dark-style .cursor-cell { cursor: cell !important; }
html.dark-style .border-bottom-1 { border-bottom: 1px solid #d1d1d1 !important; }
html.dark-style .user-groups img { margin-left: -14px !important; border: 1px solid #e4e4e4 !important; padding: 2px !important; cursor: pointer !important; }

/* --- Override kecil yang hilang --- */
html.dark-style body { overflow-x: hidden; }
html.dark-style .ms-2 { margin-left: .5rem !important; }
html.dark-style .ms-auto { margin-left: auto !important; }
html.dark-style .border-danger { border: 1px solid; border-color: #ea5455 !important; }
html.dark-style .text-dark { color: #5d596c !important; }
html.dark-style .dropdown-menu .text-dark { color: #DBDEE1 !important; }
html.dark-style .ui-bordered { border: 1px solid #3E4147; }
html.dark-style .ui-star > *:last-child { color: rgba(219, 222, 225, .2); }
html.dark-style .disc-parent { padding: 5px; }
html.dark-style .disc-active { border: 1px solid #DBDEE1; border-radius: 14px; }
html.dark-style .discount-card { padding: 12px; color: white; border-radius: 12px; text-align: center; width: 120px; height: 100px; }
html.dark-style .timeline-event img { max-width: 200px !important; height: 100% !important; }
html.dark-style span.mention { color: #A5AEF9 !important; font-weight: bold !important; }
html.dark-style .comment * { font-size: var(--bs-body-font-size) !important; }

/* --- Scrollbar (dev override) --- */
html.dark-style .scroll { height: 435px !important; overflow-y: auto !important; }
html.dark-style .scroll::-webkit-scrollbar { height: 0px; }
html.dark-style .scroll::-webkit-scrollbar-thumb { background-color: #888; border-radius: 10px; }
html.dark-style ::-webkit-scrollbar { height: 6px !important; }
html.dark-style ::-webkit-scrollbar-track { background: transparent; }
html.dark-style ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }