/* Shared light palette for the app and standalone account pages. */
html:not(.dark) { color-scheme: light; --light-page: #eaf0f2; --light-panel: #ffffff; --light-input: #eef3f4; --light-text: #172b32; --light-muted: #4d626c; --light-border: #cddce1; }
html:not(.dark) body { background-color: var(--light-page) !important; color: var(--light-text) !important; }
html:not(.dark) :is(.glass-overlay) { background-color: var(--light-panel) !important; color: var(--light-text); border-color: var(--light-border) !important; }
html:not(.dark) :is(.text-white, .text-gray-100, .text-gray-200, .text-gray-300, .text-on-surface, [class~="text-[#dde3ea]"]) { color: var(--light-text) !important; }
html:not(.dark) :is(.text-gray-400, .text-gray-500, .text-gray-600, .text-on-surface-variant) { color: var(--light-muted) !important; }
html:not(.dark) :is([class~="bg-[#0b1116]"], [class~="bg-[#0e1419]"], [class~="bg-[#090f14]"], [class~="bg-[#161c21]"], [class~="bg-[#12181f]"], [class~="bg-[#252b30]"], .bg-gray-800, .bg-gray-900, .bg-surface, .bg-surface-container, .bg-surface-container-low) { background-color: var(--light-input) !important; }
html:not(.dark) :is([class*="bg-[#0e1419]/"], [class*="bg-gray-800/"], [class~="bg-white/5"], [class~="bg-white/10"]) { background-color: rgba(255, 255, 255, 0.35) !important; }
html:not(.dark) :is([class*="border-white/"], .border-gray-700, .border-gray-800) { border-color: var(--light-border) !important; }
html:not(.dark) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), textarea, select, select option) { background-color: var(--light-input) !important; color: var(--light-text) !important; border-color: var(--light-border) !important; }
html:not(.dark) :is(input, textarea)::placeholder { color: #66777f !important; opacity: 1; }
html:not(.dark) input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px #eef2f3 inset !important; -webkit-text-fill-color: #202c32 !important; }
html:not(.dark) [class~="text-[#10b981]"] { color: #087b59 !important; }
html:not(.dark) :is(.text-red-400, .text-red-300) { color: #b42335 !important; }
html:not(.dark) :is(.text-amber-400, .text-amber-500, .text-amber-300) { color: #8a5509 !important; }
html:not(.dark) :is(.text-blue-400, .text-blue-300) { color: #245ab3 !important; }
html:not(.dark) [class~="hover:bg-white/5"]:hover, html:not(.dark) [class~="hover:bg-white/10"]:hover { background-color: rgba(255, 255, 255, 0.5) !important; }
html:not(.dark) :is(#quick-add-channel-modal > div, .usercard-container) { background-color: rgba(255, 255, 255, 0.95) !important; color: var(--light-text); }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #a6b9bc; }
html:not(.dark) :is(header, #main-sidebar) img { background: transparent !important; }
#header-logo-img,
#main-sidebar img[alt="Kickterino"],
.brand img,
img[alt="Kickterino"] {
  height: 40px !important;
  width: auto !important;
  max-height: 40px !important;
  object-fit: contain !important;
}
html:not(.dark) img#header-logo-img[src$="logo.png"],
html:not(.dark) #main-sidebar img[alt="Kickterino"][src$="logo.png"],
html:not(.dark) .brand img[src$="logo.png"],
html:not(.dark) img[alt="Kickterino"][src$="logo.png"] {
  content: url('/logo_light.png');
}
html:not(.dark) img#header-logo-img[src$="logo_offline.png"],
html:not(.dark) #main-sidebar img[alt="Kickterino"][src$="logo_offline.png"],
html:not(.dark) .brand img[src$="logo_offline.png"],
html:not(.dark) img[alt="Kickterino"][src$="logo_offline.png"] {
  content: url('/logo_offline_light.png');
}
html:not(.dark) body { isolation: isolate; }
html:not(.dark) #mob-section-chat > div:first-child { background: rgba(255,255,255,.22); backdrop-filter: blur(6px); }
html:not(.dark) :is(.glass-dark, .section-card) { border: 1px solid var(--light-border); box-shadow: 0 1px 3px rgba(25,35,40,.04); }
html:not(.dark) .section-card { border-radius: 20px; }
html:not(.dark) #channel-tabs .text-gray-400 { color: #475962 !important; }

/* Completely Transparent Sidebars & Header for Light Theme */
html:not(.dark) #liquid-glass-canvas { opacity: 1.0 !important; }
html:not(.dark) header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
html:not(.dark) :is(#main-sidebar, #mobile-bottom-nav) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-right-color: rgba(20, 45, 55, 0.08) !important;
}
html:not(.dark) #mob-section-flagged {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-left-color: rgba(20, 45, 55, 0.08) !important;
}
html:not(.dark) #chat-messages-wrapper > div { background-color: rgba(255,255,255,.9) !important; border-top-color: #dae4e8 !important; border-right-color: #dae4e8 !important; border-bottom-color: #dae4e8 !important; }
html:not(.dark) #action-logs > div { background-color: #ffffffd9 !important; }
html:not(.dark) #channel-tabs button { color: #35505c; }
html:not(.dark) #search-input { background-color: #eaf1f3 !important; box-shadow: inset 0 0 0 1px #d9e5e8; }
html:not(.dark) :is(h1, h2, h3, h4) { color: #192124; }
html:not(.dark) :is(input, textarea, select):focus-visible { outline: 2px solid #087b59; outline-offset: 2px; }
html:not(.dark) :is(button, a):focus-visible { outline: 2px solid #087b59; outline-offset: 3px; }
html:not(.dark) #nav-pill { background: #d6eee5; border-color: #a9d7c5 !important; box-shadow: none; }
html:not(.dark) #nav-links-container .nav-link { font-weight: 600; background: transparent; }
html:not(.dark) #nav-links-container .nav-link:hover { color: #087b59 !important; }
#nav-pill { pointer-events: none; transition-property: transform, height, opacity; transition-duration: 200ms; transition-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) { #nav-pill { transition: none; } }
html:not(.dark) :is(.chat-card, #logs-table-body tr) { box-shadow: none; }
html:not(.dark) #logs-table-body tr:nth-child(even) { background-color: #f8fafa; }
html:not(.dark) #logs-table-body tr:hover { background-color: #edf5f1; }
html:not(.dark) :is(.text-gray-700, .text-gray-800) { color: #344348; }
html:not(.dark) [class~="divide-white/5"] > :not([hidden]) ~ :not([hidden]) { border-color: var(--light-border); }
html:not(.dark) :is([class~="bg-[#10b981]"], [class~="bg-[#34d399]"]) { color: #062a1b !important; }
html:not(.dark) #profile-avatar { color: white !important; }

/* Smooth Theme Transitions & Animated Radial Switch */
body, header, aside, #main-sidebar, #mobile-bottom-nav, .glass-dark, .section-card, .usercard-container {
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 9999;
}