/* Jejep glass v2 - gaya "panel biru-teal" (sidebar berpanah, kartu berikon, breadcrumb). Dimuat setelah jejep-glass.css */
:root { --jx-ring: rgba(45,212,191,.55); --jx-card: rgba(255,255,255,.055); --jx-card-h: rgba(255,255,255,.09); }
html[data-skin="member"] { --jx-ring: rgba(167,139,250,.55); }

/* ---- sidebar ---- */
#sidebar { width: 262px !important; }
#sidebar > div:first-child { height: 76px !important; border-color: var(--jx-line) !important; }
.sidebar-group { margin: 20px 0 8px; padding: 0 10px; font-size: 10px; letter-spacing: .16em; color: rgba(168,181,199,.7); }
.sidebar-item { position: relative; padding: 11px 14px !important; margin-bottom: 3px !important; font-size: 13.5px !important; }
.sidebar-item svg { opacity: .9 !important; flex-shrink: 0; }
.sidebar-item::after {
  content: ""; margin-left: auto; width: 14px; height: 14px; opacity: .45; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sidebar-item.active::after, .sidebar-item:hover::after { opacity: .9; }
.sidebar-item.active { background: linear-gradient(90deg, var(--jx-soft), rgba(255,255,255,.04)) !important; box-shadow: inset 0 0 0 1px var(--jx-ring), 0 0 18px var(--jx-soft) !important; }

/* ---- topbar + breadcrumb ---- */
main > header.md\:flex, header.hidden.md\:flex { height: 68px !important; padding-left: 28px !important; padding-right: 28px !important; }
#crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--jx-mute); margin-right: 22px; white-space: nowrap; }
#crumb svg { width: 15px; height: 15px; }
#crumb b { color: var(--jx-text); font-weight: 600; }
#crumb i { font-style: normal; opacity: .5; }
header input[type="text"] { background: rgba(255,255,255,.07) !important; border-color: var(--jx-line) !important; }

/* ---- judul halaman ---- */
.tab-content > h2:first-child { font-size: 28px !important; letter-spacing: -.01em; margin-bottom: 4px !important; }
.tab-content > h2:first-child + p { font-size: 13.5px; margin-bottom: 22px !important; }

/* ---- kartu statistik berikon ---- */
.stat-card { padding: 18px 20px !important; transition: transform .2s, box-shadow .2s, border-color .2s; }
.stat-card:hover { border-color: var(--jx-ring) !important; transform: translateY(-2px); }
.stat-card > div:first-child { position: absolute; right: 16px; top: 16px; margin: 0 !important; }
.stat-card > div:first-child > div {
  width: 44px !important; height: 44px !important; border-radius: 13px !important;
  background: var(--jx-soft) !important; color: var(--jx-ah) !important; border: 1px solid var(--jx-ring);
}
.stat-card > div:first-child svg { width: 22px !important; height: 22px !important; }
.stat-card { position: relative; }
.stat-card p.uppercase { font-size: 11px !important; letter-spacing: .08em !important; color: var(--jx-mute) !important; }
.stat-card h3 { font-size: 30px !important; letter-spacing: -.02em; }

/* ---- panel & daftar ---- */
.glass-panel { padding: 22px !important; }
.glass-panel > h3:first-child, .glass-panel > div > h3:first-child { font-size: 15px !important; letter-spacing: -.005em; }
.glass-panel table thead th, table thead th { background: rgba(255,255,255,.06); color: var(--jx-mute); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
table tbody tr { border-top: 1px solid var(--jx-line); transition: background .15s; }
table tbody tr:hover { background: var(--jx-card-h); }
#stockList > div, #warrantyStockList > div { background: var(--jx-card) !important; border: 1px solid var(--jx-line) !important; border-radius: 12px !important; }
#stockList > div:hover, #warrantyStockList > div:hover { background: var(--jx-card-h) !important; border-color: var(--jx-ring) !important; }

/* ---- tombol sekunder ---- */
button.bg-\[\#1A1A1A\], .bg-\[\#1A1A1A\] { background: rgba(255,255,255,.08) !important; border: 1px solid var(--jx-line) !important; color: var(--jx-text) !important; border-radius: 12px !important; }
button.bg-\[\#1A1A1A\]:hover { border-color: var(--jx-ring) !important; background: var(--jx-card-h) !important; }
.btn-netflix { border-radius: 12px !important; }
@media (max-width: 768px) { #crumb { display: none; } #sidebar { width: min(290px, 84vw) !important; } .stat-card h3 { font-size: 26px !important; } }

/* kartu/baris gelap bawaan (kelas Tailwind hex, case-insensitive) */
[class*="bg-[#0a0a0a" i], [class*="bg-[#0A0A0A" i], [class*="bg-[#050505" i], [class*="bg-[#111" i], [class*="bg-[#000" i]:not(body):not(html):not(main):not(aside) {
  background-color: var(--jx-card) !important;
}
[class*="bg-[#0a0a0a" i] { border-color: var(--jx-line) !important; border-radius: 14px; }
[class*="bg-[#0a0a0a" i]:hover { background-color: var(--jx-card-h) !important; border-color: var(--jx-ring) !important; }
/* case-insensitive: dipakai agar #0A0A0A dan #0a0a0a sama-sama kena */