/* =========================================================================
   AETHERIA THEME SYSTEM (DARK & LIGHT MODE)
   Fully Optimized for High Contrast & Complete Element Coverage
   ========================================================================= */

:root {
  --bg-main: #020305;
  --bg-card: linear-gradient(135deg, rgba(18, 12, 24, 0.95), rgba(5, 6, 10, 0.98));
  --bg-card-hover: linear-gradient(135deg, rgba(28, 18, 36, 0.95), rgba(10, 12, 18, 0.98));
  --bg-subtle: #070910;
  --bg-header: rgba(2, 3, 5, 0.95);
  --border-card: rgba(244, 63, 94, 0.3);
  --border-subtle: #1e2638;
  --text-title: #ffffff;
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  --input-bg: #070910;
  --input-border: #1e2638;
  --input-text: #ffffff;
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
  --slot-bg: #0c0f17;
  --slot-border: #1e293b;
  --terminal-bg: #0b0c0e;
}

html.light {
  --bg-main: #f1f5f9;
  --bg-card: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  --bg-card-hover: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(241, 245, 249, 1));
  --bg-subtle: #ffffff;
  --bg-header: rgba(255, 255, 255, 0.96);
  --border-card: rgba(226, 232, 240, 0.95);
  --border-subtle: #cbd5e1;
  --text-title: #0f172a;
  --text-main: #1e293b;
  --text-muted: #475569;
  --text-subtle: #64748b;
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --input-text: #0f172a;
  --shadow-card: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --slot-bg: #f1f5f9;
  --slot-border: #cbd5e1;
  --terminal-bg: #0b0c0e;
}

/* =========================================================================
   PERFORMANCE & HARDWARE ACCELERATION (SMOOTH 60-120 FPS ANIMATIONS)
   ========================================================================= */

html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Offload animations to GPU compositing layers without changing visual styling */
.supreme-card,
.btn-shimmer,
.animate-float,
.glow-gold,
.glow-rose,
.skin-spotlight,
.brand-logo-img,
#webChatToggleBtn {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Lazy decode and content-visibility optimization */
img {
  content-visibility: auto;
}

/* =========================================================================
   1. BASE STYLES & LAYOUT
   ========================================================================= */

body {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  transition: background-color 0.25s ease, color 0.25s ease;
}

html.light body,
html.light [class*="bg-[#020305]"]:not(header) {
  background-color: var(--bg-main) !important;
}

/* Header Navbar */
header {
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

html.light header,
html.light header[class*="bg-[#020305]"],
html.light header[class*="bg-[#09090b]"] {
  background-color: var(--bg-header) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html.light header a span.text-white,
html.light header h1.text-white,
html.light header span.text-white {
  color: #0f172a !important;
}

html.light header nav {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

html.light header nav button.text-zinc-400,
html.light header nav button.text-slate-400,
html.light header nav a.text-slate-400 {
  color: #475569 !important;
}

html.light header nav button.text-zinc-400:hover,
html.light header nav button.text-slate-400:hover,
html.light header nav a.text-slate-400:hover {
  color: #0f172a !important;
}

/* Left Sidebar Navbar (Admin Dashboard) */
aside, #adminSidebar {
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

html.light aside,
html.light #adminSidebar {
  background-color: var(--bg-header) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 1px 0 8px rgba(15, 23, 42, 0.05);
}

html.light #adminSidebar h1,
html.light #adminSidebar span.text-white {
  color: #0f172a !important;
}

html.light #adminSidebar nav button.text-zinc-400 {
  color: #475569 !important;
}

html.light #adminSidebar nav button.bg-zinc-800 {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #adminSidebar nav button:hover {
  background-color: #f1f5f9 !important;
}

html.light #adminSidebar [class*="bg-[#0c0d10]"] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Supreme Glass Cards & Panels */
.supreme-card, .glass-panel {
  background: var(--bg-card) !important;
  border-color: var(--border-card) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border-color 0.6s ease, box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

html.light .supreme-card::before {
  background: linear-gradient(
    60deg,
    transparent 40%,
    rgba(244, 63, 94, 0.03) 45%,
    rgba(244, 63, 94, 0.1) 50%,
    rgba(244, 63, 94, 0.03) 55%,
    transparent 60%
  ) !important;
}

html.light .supreme-card:hover {
  border-color: rgba(244, 63, 94, 0.5) !important;
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.12), 0 0 20px -2px rgba(244, 63, 94, 0.18) !important;
}

html.light .text-shimmer {
  background: linear-gradient(90deg, #e11d48, #be123c, #d97706, #b45309, #e11d48) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html.light .text-shimmer-gold {
  background: linear-gradient(90deg, #d97706, #b45309, #f59e0b, #92400e, #d97706) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Inputs & Form Elements Default */
.input-box, input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

/* =========================================================================
   2. LIGHT THEME - CARD, MODAL & SURFACE OVERRIDES
   ========================================================================= */

/* Main Surface Cards (e.g. #121215, .supreme-card) */
html.light [class*="bg-[#121215]"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: var(--text-main) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
}

/* Inner Panels & Secondary Containers */
html.light [class*="bg-[#09090b]"],
html.light [class*="bg-[#06080d]"],
html.light [class*="bg-[#07080a]"],
html.light [class*="bg-[#0b0c0e]"],
html.light [class*="bg-slate-950"],
html.light [class*="bg-zinc-950"] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: var(--text-main) !important;
}

/* Interactive Rows, Tab Bars, Inset Highlights */
html.light [class*="bg-[#18181b]"],
html.light [class*="bg-slate-900"],
html.light [class*="bg-zinc-900"] {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: var(--text-main) !important;
}

/* Active Tabs & Button Highlights */
html.light [class*="bg-zinc-800"],
html.light [class*="bg-slate-800"] {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Inline Code Elements */
html.light code[class*="bg-slate"],
html.light code[class*="bg-zinc"] {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* =========================================================================
   3. LIGHT THEME - BORDER SYSTEM
   ========================================================================= */

html.light [class*="border-zinc-800"],
html.light [class*="border-zinc-700"],
html.light [class*="border-zinc-600"],
html.light [class*="border-slate-800"],
html.light [class*="border-slate-700"],
html.light [class*="border-slate-900"],
html.light [class*="border-slate-950"],
html.light [class*="border-rose-950"] {
  border-color: #e2e8f0 !important;
}

/* =========================================================================
   4. LIGHT THEME - ACTION BUTTONS & BADGES (COLOR-CODED)
   ========================================================================= */

/* Emerald Actions (Approve, ON, Give Money) */
html.light [class*="bg-emerald-950"] {
  background-color: #dcfce7 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}
html.light [class*="bg-emerald-950"]:hover {
  background-color: #bbf7d0 !important;
}

/* Rose Actions (Reject, OFF, Ban, Logout, Delete) */
html.light [class*="bg-rose-950"] {
  background-color: #ffe4e6 !important;
  border-color: #fca5a5 !important;
  color: #be123c !important;
}
html.light [class*="bg-rose-950"]:hover {
  background-color: #fecdd3 !important;
}

/* Amber Actions (Restart, Kick, Reset) */
html.light [class*="bg-amber-950"] {
  background-color: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #b45309 !important;
}
html.light [class*="bg-amber-950"]:hover {
  background-color: #fde68a !important;
}

/* Purple Actions (Edit, Rank Management) */
html.light [class*="bg-purple-950"] {
  background-color: #f3e8ff !important;
  border-color: #d8b4fe !important;
  color: #7e22ce !important;
}
html.light [class*="bg-purple-950"]:hover {
  background-color: #e9d5ff !important;
}

/* Blue Actions (Invsee, Info, Set Balance, GoPay Box) */
html.light [class*="bg-blue-950"] {
  background-color: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}
html.light [class*="bg-blue-950"]:hover {
  background-color: #bfdbfe !important;
}

/* Neutral Buttons (e.g. Home, View Proof, Sig) */
html.light button[class*="bg-zinc-900"],
html.light a[class*="bg-zinc-900"],
html.light button[class*="bg-slate-900"],
html.light a[class*="bg-slate-900"] {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

html.light button[class*="bg-zinc-900"]:hover,
html.light a[class*="bg-zinc-900"]:hover,
html.light button[class*="bg-slate-900"]:hover,
html.light a[class*="bg-slate-900"]:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* =========================================================================
   5. LIGHT THEME - TYPOGRAPHY & CONTRAST
   ========================================================================= */

html.light h1:not(.dragon-title),
html.light h2, 
html.light h3, 
html.light h4, 
html.light strong.text-white {
  color: var(--text-title);
}

/* Teks putih generik di dalam card/container diubah agar terbaca jelas di Light Mode */
html.light .text-white:not([class*="bg-rose"]):not([class*="bg-emerald"]):not([class*="bg-indigo"]):not([class*="bg-cyan"]):not([class*="bg-amber"]):not([class*="bg-purple"]):not([class*="bg-blue"]):not(.btn-keep-white):not(.lang-toggle-badge) {
  color: var(--text-title) !important;
}

/* Slate & Zinc Text Hierarchies */
html.light [class*="text-slate-100"],
html.light [class*="text-slate-200"],
html.light [class*="text-slate-300"],
html.light [class*="text-zinc-100"],
html.light [class*="text-zinc-200"],
html.light [class*="text-zinc-300"] {
  color: var(--text-main) !important;
}

html.light [class*="text-slate-400"],
html.light [class*="text-zinc-400"] {
  color: var(--text-muted) !important;
}

html.light [class*="text-slate-500"],
html.light [class*="text-zinc-500"],
html.light [class*="text-slate-600"],
html.light [class*="text-zinc-600"] {
  color: var(--text-subtle) !important;
}

/* =========================================================================
   6. LIGHT THEME - FORM INPUTS & CONTROLS
   ========================================================================= */

html.light input:not([type="submit"]):not([type="button"]),
html.light select,
html.light textarea,
html.light .input-box {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Rank Badges in Light Mode */
html.light .badge-rank-owner {
  background: #ffe4e6 !important;
  color: #be123c !important;
  border-color: #fca5a5 !important;
}
html.light .badge-rank-admin {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border-color: #fcd34d !important;
}
html.light .badge-rank-mod {
  background: #f3e8ff !important;
  color: #7e22ce !important;
  border-color: #d8b4fe !important;
}
html.light .badge-rank-helper {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border-color: #93c5fd !important;
}
html.light .badge-rank-dragonian {
  background: #f3e8ff !important;
  color: #6b21a8 !important;
  border-color: #c084fc !important;
}
html.light .badge-rank-mvp {
  background: #cff4fc !important;
  color: #0891b2 !important;
  border-color: #67e8f9 !important;
}
html.light .badge-rank-vip {
  background: #dcfce7 !important;
  color: #15803d !important;
  border-color: #86efac !important;
}
html.light .badge-rank-default {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}

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

html.light input[type="date"] {
  color-scheme: light !important;
  color: #1e293b !important;
}

html.light input[type="file"]::file-selector-button {
  background-color: #e2e8f0 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
}

html.light input[type="file"]::file-selector-button:hover {
  background-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* =========================================================================
   7. LIGHT THEME - TABLES & LISTS
   ========================================================================= */

html.light thead,
html.light [class*="thead"] {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
}

html.light tr[class*="hover:bg-zinc-900"]:hover,
html.light tr[class*="hover:bg-slate-900"]:hover,
html.light tr:hover {
  background-color: #f8fafc !important;
}

/* =========================================================================
   8. LIGHT THEME - MODALS & BACKDROPS
   ========================================================================= */

html.light [class*="bg-black"],
html.light [class*="bg-black/85"],
html.light [class*="bg-black/90"] {
  background-color: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* =========================================================================
   9. TERMINAL CONSOLE & MINECRAFT INVENTORY SLOTS
   ========================================================================= */

/* Console Terminal Window (Menyesuaikan Tema Terang dengan Teks Kontras Tinggi) */
html.light #consoleTerminalWindow {
  background-color: #f8fafc !important;
  color: #1e293b !important;
  border-color: #e2e8f0 !important;
}

html.light #consoleTerminalWindow div {
  color: #334155;
}

html.light #consoleTerminalWindow .text-zinc-300 {
  color: #1e293b !important;
}

html.light #consoleTerminalWindow .text-zinc-600 {
  color: #94a3b8 !important;
}

html.light #consoleTerminalWindow .text-rose-400 {
  color: #dc2626 !important;
  font-weight: 600;
}

html.light #consoleTerminalWindow .text-amber-300 {
  color: #b45309 !important;
  font-weight: 600;
}

html.light #consoleCommandInput {
  color: #0f172a !important;
}

html.light #consoleCommandInput::placeholder {
  color: #94a3b8 !important;
}

/* Minecraft Inventory Slots */
html.light .mc-slot {
  background-color: var(--slot-bg) !important;
  border-color: var(--slot-border) !important;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.12);
}

html.light .mc-slot:hover {
  border-color: #f43f5e !important;
  background-color: #e2e8f0 !important;
}

/* =========================================================================
   10. LIGHT THEME - WEBCHAT & TOAST NOTIFICATIONS
   ========================================================================= */

html.light #webChatPopup {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12) !important;
}

html.light #webChatLog {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light #webChatLog span[class*="text-slate-200"] {
  color: #1e293b !important;
}

html.light #webChatLog [class*="border-slate-900"] {
  border-color: #e2e8f0 !important;
}

html.light #toast-container > div {
  background-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12) !important;
}

html.light #toast-container > div span {
  color: #0f172a !important;
}

/* =========================================================================
   11. LIGHT THEME - FOOTER
   ========================================================================= */

html.light footer {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

/* =========================================================================
   12. CONTROLS (BUTTONS & SWITCHERS)
   ========================================================================= */

.theme-toggle-btn, .lang-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.65rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-subtle);
  color: var(--text-main);
  user-select: none;
}

.theme-toggle-btn:hover, .lang-toggle-btn:hover {
  border-color: #f43f5e;
  transform: translateY(-1px);
}

.lang-toggle-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-family: 'Fira Code', monospace;
  font-weight: 700;
}

/* =========================================================================
   13. LIGHT THEME - IN-GAME CHAT & WHISPER FEED
   ========================================================================= */

html.light #ingameChatStream {
  background-color: #f8fafc !important;
}

html.light #ingameChatStream .bg-zinc-900\/30 {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: #e2e8f0 !important;
}

html.light #ingameChatStream .bg-zinc-900\/30:hover {
  background-color: #ffffff !important;
}

html.light #ingameChatStream .text-zinc-200,
html.light #ingameChatStream .text-zinc-100 {
  color: #0f172a !important;
}

html.light #ingameChatStream .bg-purple-950\/25 {
  background-color: rgba(243, 232, 255, 0.75) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
}

html.light #ingameChatStream .bg-purple-950\/25:hover {
  background-color: rgba(243, 232, 255, 0.95) !important;
}

html.light #ingameChatStream .text-purple-300 {
  color: #7e22ce !important;
}

html.light #ingameChatStream .text-amber-300 {
  color: #b45309 !important;
}

html.light #ingameChatStream .bg-rose-950\/20 {
  background-color: rgba(255, 228, 230, 0.75) !important;
  border-color: rgba(244, 63, 94, 0.45) !important;
}

html.light #ingameChatStream .text-rose-100 {
  color: #9f1239 !important;
}

html.light #ingameChatStream .bg-cyan-950\/20 {
  background-color: rgba(207, 250, 254, 0.75) !important;
  border-color: rgba(6, 182, 212, 0.45) !important;
}

html.light #ingameChatStream .bg-amber-950\/20 {
  background-color: rgba(254, 243, 199, 0.75) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
}

html.light #ingameChatStream .bg-amber-950\/20:hover {
  background-color: rgba(254, 243, 199, 0.95) !important;
}

html.light #ingameChatStream .text-amber-100 {
  color: #78350f !important;
}

html.light #ingameChatStream .bg-emerald-950\/20 {
  background-color: rgba(209, 250, 229, 0.75) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
}

html.light #ingameChatStream .bg-emerald-950\/20:hover {
  background-color: rgba(209, 250, 229, 0.95) !important;
}

html.light #ingameChatStream .text-emerald-100 {
  color: #065f46 !important;
}

/* =========================================================================
   14. NAVBAR BRAND LOGO (CIRCULAR EMBLEM)
   ========================================================================= */

.brand-logo-img {
  border-radius: 9999px !important;
  object-fit: cover !important;
  border: 1px solid rgba(244, 63, 94, 0.45) !important;
  background-color: var(--input-bg, #070910) !important;
  padding: 2px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.brand-logo-img:hover {
  transform: rotate(10deg) scale(1.1) !important;
  border-color: rgba(244, 63, 94, 0.85) !important;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.6) !important;
}

html.light .brand-logo-img {
  border-color: rgba(244, 63, 94, 0.5) !important;
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12) !important;
}