/* ============================================
   NEXUS ZG - PREMIUM LIGHT THEME
   Elegant, refined, modern light interface
   ============================================ */

body.light {
  /* Premium Color Palette */
  --bg-base: #f8fafc;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-sunken: #f1f5f9;
  --bg-subtle: #e2e8f0;

  /* Gradient Backgrounds */
  --gradient-surface: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  --gradient-card: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  --gradient-sidebar: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  --gradient-accent: linear-gradient(135deg, #5865f2 0%, #7289da 100%);

  /* Text Colors */
  --text-primary: #1a1d23;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-subtle: #9ca3af;
  --text-normal: #1a1d23;
  --text-header: #1a1d23;

  /* Accent Colors */
  --accent-primary: #5865f2;
  --accent-secondary: #7289da;
  --accent-glow: rgba(88, 101, 242, 0.15);
  --color-primary: #5865f2;

  /* Borders & Shadows */
  --border-color: rgba(0, 0, 0, 0.12);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --glass-border: 1px solid rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);

  /* Glass Effects - Light version */
  --bg-glass-heavy: rgba(255, 255, 255, 0.95);
  --bg-glass-light: rgba(0, 0, 0, 0.03);
  --blur-base: 20px;

  /* === OVERRIDE ALL :root VARIABLES FROM BASE CSS === */
  --bg-darkest: #e5e7eb !important;
  --bg-dark: #f3f4f6 !important;
  --bg-primary: #ffffff !important;
  --bg-secondary: #f9fafb !important;
  --bg-tertiary: #f3f4f6 !important;
  --bg-card: #ffffff !important;
  --bg-hover: rgba(88, 101, 242, 0.08) !important;

  background: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%) !important;
  color: var(--text-primary) !important;
}


/* ============================================
   MAIN LAYOUT - CRITICAL APP.HTML OVERRIDES
   ============================================ */
body.light,
body.light html {
  background: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%) !important;
  color: #1a1d23 !important;
}

body.light #app-mount {
  background: transparent !important;
}

/* Server Rail - Override inline rgba(10, 10, 12) */
body.light #server-list {
  background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 100%) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.light .server-rail,
body.light .guild-list,
body.light #left,
body.light #leftRail {
  background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 100%) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Guild Items */
body.light .guild-item {
  background: #ffffff !important;
  color: #1a1d23 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light .guild-item:hover,
body.light .guild-item.selected {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  border-color: var(--accent-primary) !important;
}

/* Channel Sidebar */
body.light #sidebar {
  background: #ffffff !important;
  border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.light .channel-sidebar,
body.light .sidebar,
body.light #categoryList {
  background: #ffffff !important;
  border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.light #sidebar-header {
  background: #f9fafb !important;
  color: #1a1d23 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light #sidebar-header:hover {
  background: rgba(88, 101, 242, 0.08) !important;
}

body.light #channel-list {
  background: #ffffff !important;
}

/* Channel Items */
body.light .channel-item {
  color: #4b5563 !important;
}

body.light .channel-item:hover {
  background: rgba(88, 101, 242, 0.08) !important;
  color: #1a1d23 !important;
}

body.light .channel-item.selected {
  background: rgba(88, 101, 242, 0.15) !important;
  color: #5865f2 !important;
  border-left-color: #5865f2 !important;
}

body.light .category-header {
  color: #6b7280 !important;
}

/* Chat Area - Override inline rgba(10, 10, 12) */
body.light #chat-area {
  background: #f9fafb !important;
}

body.light #chat-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #1a1d23 !important;
}

body.light .header-hash {
  color: #6b7280 !important;
}

body.light #center,
body.light .chat-panel,
body.light .message-area,
body.light #centerEmpty,
body.light .center-empty {
  background: #f9fafb !important;
  color: #1a1d23 !important;
}

body.light #messages,
body.light .messages-list {
  background: #f9fafb !important;
  color: #1a1d23 !important;
}

/* Member List - Override inline rgba(10, 10, 12) */
body.light #member-list {
  background: #ffffff !important;
  border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.light #right,
body.light .member-list,
body.light .members-panel {
  background: #ffffff !important;
  border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.light .member-group-header {
  color: #6b7280 !important;
}

body.light .member-item {
  color: #4b5563 !important;
}

body.light .member-item:hover {
  background: rgba(88, 101, 242, 0.08) !important;
  color: #1a1d23 !important;
}

/* User Panel */
body.light #user-panel {
  background: #f3f4f6 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light .u-name {
  color: #1a1d23 !important;
}

body.light .u-discrim {
  color: #6b7280 !important;
}

body.light .icon-btn {
  color: #6b7280 !important;
}

body.light .icon-btn:hover {
  background: rgba(88, 101, 242, 0.1) !important;
  color: #5865f2 !important;
}

/* ============================================
   MESSAGES - Premium Styling
   ============================================ */
body.light .message-row {
  color: var(--text-primary) !important;
  background: transparent !important;
}

body.light .message-row:hover {
  background: rgba(88, 101, 242, 0.06) !important;
  border-radius: 8px !important;
}

body.light .message-content,
body.light .message-text,
body.light .msg-content,
body.light .message-body {
  color: var(--text-primary) !important;
  background: transparent !important;
}

body.light .message-username,
body.light .message-author {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

body.light .message-time {
  color: var(--text-muted) !important;
}

/* ============================================
   WELCOME CARD - Glassmorphism Effect
   ============================================ */
body.light .welcome-card,
body.light .welcome-card__header,
body.light .app-loading-card,
body.light [class*="welcome"] {
  background: var(--gradient-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: blur(10px) !important;
}

body.light .welcome-card h1,
body.light .welcome-card h2,
body.light .welcome-card__title {
  color: var(--text-primary) !important;
}

body.light .welcome-card p,
body.light .welcome-card span,
body.light .welcome-card__subtitle,
body.light .welcome-tips {
  color: var(--text-secondary) !important;
}

/* ============================================
   HEADER - Subtle gradient
   ============================================ */
body.light .channel-header,
body.light #channelHeader,
body.light .header-bar {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--text-primary) !important;
}

body.light .channel-header *,
body.light #channelHeader * {
  color: var(--text-primary) !important;
}

/* ============================================
   MODALS & PANELS - Premium Cards
   ============================================ */
body.light .modal,
body.light .modal-overlay {
  background: rgba(15, 23, 42, 0.4) !important;
  backdrop-filter: blur(8px) !important;
}

body.light .modal-content,
body.light .card,
body.light .admin-panel,
body.light .admin-panel-overlay .admin-panel {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-xl) !important;
  color: var(--text-primary) !important;
}

body.light .admin-panel-sidebar {
  background: var(--bg-sunken) !important;
  border-right: 1px solid var(--border-color) !important;
}

body.light .admin-sidebar-category {
  color: var(--text-muted) !important;
}

body.light .admin-panel-tab {
  color: var(--text-secondary) !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

body.light .admin-panel-tab:hover {
  background: rgba(0, 184, 148, 0.08) !important;
  color: var(--text-primary) !important;
}

body.light .admin-panel-tab.active {
  background: var(--accent-glow) !important;
  color: var(--accent-primary) !important;
  font-weight: 500 !important;
}

body.light .admin-panel-title,
body.light h1,
body.light h2,
body.light h3 {
  color: var(--text-primary) !important;
}

body.light .admin-panel-header {
  border-bottom: 1px solid var(--border-color) !important;
}

/* ============================================
   EXPLORE MODAL - Full Light Coverage
   ============================================ */
body.light .explore-modal,
body.light .explore-container,
body.light [class*="explore"] {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

body.light .explore-sidebar {
  background: var(--bg-sunken) !important;
}

body.light .explore-content {
  background: var(--bg-base) !important;
}

body.light .explore-header,
body.light .explore-title {
  color: var(--text-primary) !important;
}

body.light .explore-category,
body.light .explore-item {
  color: var(--text-secondary) !important;
}

body.light .explore-category:hover,
body.light .explore-item:hover {
  background: var(--accent-glow) !important;
  color: var(--accent-primary) !important;
}

body.light .explore-category.active {
  background: var(--accent-glow) !important;
  color: var(--accent-primary) !important;
}

/* ============================================
   DROPDOWN MENUS & CONTEXT MENUS
   ============================================ */
body.light .dropdown-menu,
body.light .context-menu,
body.light .popup,
body.light .popover,
body.light [class*="dropdown"],
body.light [class*="menu"]:not(.main-layout) {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text-primary) !important;
}

body.light .dropdown-item,
body.light .context-menu-item,
body.light .menu-item {
  color: var(--text-secondary) !important;
}

body.light .dropdown-item:hover,
body.light .context-menu-item:hover,
body.light .menu-item:hover {
  background: var(--accent-glow) !important;
  color: var(--accent-primary) !important;
}

/* ============================================
   PROFILE FOOTER & USER MENU
   ============================================ */
body.light .profile-footer,
body.light #profileFooter {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border-color) !important;
}

body.light #meBox {
  background: var(--bg-sunken) !important;
  border-radius: 8px !important;
}

body.light #meBox:hover {
  background: var(--accent-glow) !important;
}

body.light #meBox * {
  color: var(--text-primary) !important;
}

/* User Settings Popup */
body.light .user-settings-popup,
body.light .profile-popup,
body.light [class*="profile-menu"],
body.light [class*="user-menu"] {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text-primary) !important;
}

/* ============================================
   INPUTS & FORMS - Refined Style
   ============================================ */
body.light .admin-input,
body.light input,
body.light textarea,
body.light select {
  background: var(--bg-sunken) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

body.light input:focus,
body.light textarea:focus,
body.light select:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  outline: none !important;
}

body.light input::placeholder,
body.light textarea::placeholder {
  color: var(--text-subtle) !important;
}

/* ============================================
   BUTTONS - Premium Style
   ============================================ */
body.light .btn.primary,
body.light button.primary {
  background: var(--gradient-accent) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: var(--shadow-md), 0 0 20px var(--accent-glow) !important;
  font-weight: 500 !important;
}

body.light .btn.primary:hover,
body.light button.primary:hover {
  box-shadow: var(--shadow-lg), 0 0 30px var(--accent-glow) !important;
  transform: translateY(-1px) !important;
}

body.light .btn.ghost,
body.light button.ghost {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
}

body.light .btn.ghost:hover,
body.light button.ghost:hover {
  background: var(--accent-glow) !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

/* ============================================
   PREMIUM GROUPS & CARDS
   ============================================ */
body.light .premium-group {
  background: var(--bg-sunken) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm) !important;
}

body.light .p-label,
body.light .pp-header {
  color: var(--text-primary) !important;
}

body.light .p-desc,
body.light .admin-muted {
  color: var(--text-muted) !important;
}

body.light .p-switch {
  background: var(--bg-subtle) !important;
}

body.light .p-switch.checked {
  background: var(--accent-primary) !important;
}

/* ============================================
   COMPOSER - Modern Input
   ============================================ */
body.light #composer,
body.light .composer-container {
  background: transparent !important;
}

body.light #composer .composer-inner,
body.light .message-composer {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: 12px !important;
}

body.light #composer:focus-within .composer-inner {
  border-color: var(--accent-primary) !important;
  box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-glow) !important;
}

body.light #msgBox {
  color: var(--text-primary) !important;
  background: transparent !important;
}

body.light #msgBox::placeholder {
  color: var(--text-subtle) !important;
}

body.light .btn-attach,
body.light #emojiPickerBtn {
  color: var(--text-muted) !important;
}

body.light .btn-attach:hover,
body.light #emojiPickerBtn:hover {
  color: var(--accent-primary) !important;
  background: var(--accent-glow) !important;
}

/* ============================================
   SERVER ICONS - Soft Style
   ============================================ */
body.light .server-icon,
body.light .guild-icon,
body.light .badge-round {
  background: var(--bg-surface) !important;
  border: 2px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s ease !important;
}

body.light .server-icon:hover,
body.light .guild-icon:hover {
  border-color: var(--accent-primary) !important;
  box-shadow: var(--shadow-md), 0 0 12px var(--accent-glow) !important;
  transform: scale(1.05) !important;
}

body.light .server-icon.active,
body.light .guild-icon.active,
body.light .server-icon.selected {
  border-color: var(--accent-primary) !important;
  box-shadow: var(--shadow-md), 0 0 15px var(--accent-glow) !important;
}

/* ============================================
   CHANNEL ITEMS
   ============================================ */
body.light .channel-item,
body.light .channel-list-item {
  color: var(--text-secondary) !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

body.light .channel-item:hover,
body.light .channel-list-item:hover {
  background: rgba(0, 184, 148, 0.06) !important;
  color: var(--text-primary) !important;
}

body.light .channel-item.active,
body.light .channel-list-item.active {
  background: var(--accent-glow) !important;
  color: var(--accent-primary) !important;
  font-weight: 500 !important;
}

/* ============================================
   GLOBAL CHAT
   ============================================ */
body.light .global-chat-regions,
body.light .global-chat-welcome {
  background: transparent !important;
  color: var(--text-primary) !important;
}

body.light .global-chat-region-btn {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  box-shadow: var(--shadow-sm) !important;
}

body.light .global-chat-region-btn:hover,
body.light .global-chat-region-btn.active {
  background: var(--accent-glow) !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

/* ============================================
   SCROLLBARS - Refined
   ============================================ */
body.light ::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

body.light ::-webkit-scrollbar-track {
  background: var(--bg-sunken) !important;
  border-radius: 4px !important;
}

body.light ::-webkit-scrollbar-thumb {
  background: var(--bg-subtle) !important;
  border-radius: 4px !important;
}

body.light ::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary) !important;
}

/* ============================================
   LOADING STATES
   ============================================ */
body.light .app-loading-overlay {
  background: rgba(248, 250, 252, 0.95) !important;
  backdrop-filter: blur(10px) !important;
}

body.light .loading-skeleton-line {
  background: linear-gradient(90deg, var(--bg-sunken), var(--bg-surface), var(--bg-sunken)) !important;
  background-size: 200% 100% !important;
}

/* ============================================
   TOOLTIPS
   ============================================ */
body.light [data-tooltip],
body.light .tooltip {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ============================================
   SELECTION & FOCUS
   ============================================ */
body.light ::selection {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
}

body.light *:focus-visible {
  outline: 2px solid var(--accent-primary) !important;
  outline-offset: 2px !important;
}

/* ============================================
   FINAL OVERRIDES - FORCE LIGHT ON ALL DARK
   ============================================ */
body.light [style*="background: #"],
body.light [style*="background:#"],
body.light [style*="background-color: #"],
body.light [style*="background-color:#"] {
  background: var(--bg-surface) !important;
}

/* Force all text to be readable */
body.light * {
  --text-normal: var(--text-primary);
  --text-muted: var(--text-muted);
  --background-primary: var(--bg-surface);
  --background-secondary: var(--bg-sunken);
}

/* ============================================
   SETTINGS MODAL - Full Light Coverage
   ============================================ */
body.light #settingsModal,
body.light .settings-modal {
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(10px) !important;
}

body.light #settingsModal .admin-panel,
body.light #settingsModal>div,
body.light .admin-panel-main,
body.light .admin-panel-content {
  background: #ffffff !important;
  color: #0f172a !important;
}

body.light .premium-group {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

body.light .premium-group *,
body.light .p-label,
body.light .pp-header {
  color: #0f172a !important;
}

body.light .p-desc,
body.light .admin-muted {
  color: #64748b !important;
}

body.light .ss-field label {
  color: #334155 !important;
}

/* ============================================
   EXPLORE MODAL (#modalDiscovery) - Full Light Theme
   ============================================ */
body.light #modalDiscovery,
body.light .ss-modal {
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(10px) !important;
}

body.light #modalDiscovery .ss-container,
body.light .ss-disc-layout {
  background: #ffffff !important;
  color: #0f172a !important;
}

body.light .ss-disc-sidebar {
  background: #f1f5f9 !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light .ss-disc-sidebar *,
body.light .ss-nav-item,
body.light .disc-cat {
  color: #334155 !important;
}

body.light .ss-nav-item:hover,
body.light .disc-cat:hover {
  background: rgba(0, 184, 148, 0.1) !important;
}

body.light .ss-nav-item.active,
body.light .disc-cat.active {
  background: rgba(0, 184, 148, 0.15) !important;
  color: #00b894 !important;
}

body.light .ss-disc-main {
  background: #f8fafc !important;
  color: #0f172a !important;
}

body.light .ss-disc-hero {
  background: linear-gradient(135deg, #e2e8f0, #f1f5f9) !important;
}

body.light .ss-disc-hero *,
body.light .ss-disc-main * {
  color: #0f172a !important;
}

body.light .ss-disc-input,
body.light #discoverySearch {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}

body.light .ss-disc-input::placeholder {
  color: #94a3b8 !important;
}

body.light .ss-disc-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

body.light .ss-disc-card:hover {
  background: #f8fafc !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

body.light .ss-modal-close {
  color: #64748b !important;
}

body.light .ss-modal-close:hover {
  color: #0f172a !important;
}

body.light .ss-disc-header {
  color: #0f172a !important;
}

body.light .ss-disc-results {
  background: #f8fafc !important;
}

body.light .explore-modal *,
body.light .explore-container *,
body.light .explore-content * {
  color: #0f172a !important;
}

body.light .explore-sidebar {
  background: #f1f5f9 !important;
}

body.light .explore-search-input,
body.light .explore-search input {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}

body.light .explore-card,
body.light .server-card,
body.light .community-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

body.light .explore-card:hover,
body.light .server-card:hover {
  background: #f8fafc !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* ============================================
   STATUS INDICATORS - Light Theme
   ============================================ */
body.light .status-dot,
body.light #user-status-dot {
  border-color: #ffffff !important;
}

body.light .status-dot.online {
  background: #23a55a !important;
  box-shadow: 0 0 0 2px rgba(35, 165, 90, 0.2) !important;
}

body.light .status-dot.idle {
  background: #f0b232 !important;
}

body.light .status-dot.dnd {
  background: #f23f42 !important;
}

body.light .status-dot.offline {
  background: #80848e !important;
}

/* ============================================
   MEMBER ROLE HEADERS - Light Theme
   ============================================ */
body.light .member-role-header {
  color: #5c6370 !important;
}

body.light .member-group-header {
  color: #5c6370 !important;
}

body.light .member-name {
  color: #2e3338 !important;
}

body.light .member-item {
  color: #4b5563 !important;
}

body.light .member-item:hover {
  background: rgba(88, 101, 242, 0.08) !important;
  color: #1a1d23 !important;
}

body.light .member-item.offline {
  opacity: 0.55 !important;
}

body.light .member-avatar {
  background: #5865f2 !important;
}

/* ============================================
   SETTINGS MENU (Dropdown) - Light Theme
   ============================================ */
body.light .settings-menu {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

body.light .settings-menu-item {
  color: #4b5563 !important;
}

body.light .settings-menu-item:hover {
  background: rgba(88, 101, 242, 0.08) !important;
  color: #1a1d23 !important;
}

body.light .settings-menu-item.danger {
  color: #dc2626 !important;
}

body.light .settings-menu-item.danger:hover {
  background: rgba(220, 38, 38, 0.08) !important;
}

body.light .settings-menu-item.admin {
  color: #1a1d23 !important;
}

body.light .settings-menu-separator {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* ============================================
   USER PANEL - Light Theme
   ============================================ */
body.light #user-panel {
  background: rgba(243, 244, 246, 0.97) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light .user-avatar-section:hover {
  background: rgba(88, 101, 242, 0.08) !important;
}

body.light .username,
body.light #user-display-name {
  color: #1f2937 !important;
}

body.light .discriminator,
body.light #user-discrim {
  color: #6b7280 !important;
}

body.light .control-btn {
  color: #6b7280 !important;
}

body.light .control-btn:hover {
  background: rgba(88, 101, 242, 0.1) !important;
  color: #5865f2 !important;
}

body.light .control-btn.muted {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.08) !important;
}

/* ============================================
   COMPOSER - Light Theme Enhanced
   ============================================ */
body.light #composer-inner {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04) !important;
}

body.light #msg-input {
  color: #1f2937 !important;
  background: transparent !important;
}

body.light #msg-input::placeholder {
  color: #9ca3af !important;
}

/* ============================================
   MESSAGE AVATAR - Light Theme
   ============================================ */
body.light .message-avatar {
  background-color: #e5e7eb !important;
}

/* ============================================
   EMOJI PICKER & GIF MODAL - Light Theme
   ============================================ */
body.light .emoji-picker {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

body.light .emoji-picker button {
  background: rgba(0, 0, 0, 0.04) !important;
  color: inherit !important;
}

body.light .emoji-picker button:hover {
  background: rgba(88, 101, 242, 0.12) !important;
}

body.light .gif-modal-content {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #1f2937 !important;
}

body.light .gif-search input {
  background: #f3f4f6 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #1f2937 !important;
}

body.light .gif-grid img {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: #f3f4f6 !important;
}

/* ============================================
   PROFILE CARD - Light Theme
   ============================================ */
body.light .profile-card,
body.light .user-profile-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
  color: #1f2937 !important;
}

body.light .profile-card *,
body.light .user-profile-card * {
  color: #1f2937 !important;
}

/* ============================================
   SETTINGS DRAWER - Light Theme
   ============================================ */
body.light .ui-drawer-panel {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #1f2937 !important;
}

body.light .ui-drawer-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #1f2937 !important;
}

body.light .ui-drawer-title {
  color: #1f2937 !important;
}

body.light .ui-tab-btn {
  color: #6b7280 !important;
}

body.light .ui-tab-btn.active {
  color: #5865f2 !important;
  border-color: #5865f2 !important;
}

body.light .settings-section {
  background: #f9fafb !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light .settings-section-title {
  color: #6b7280 !important;
}

body.light .settings-label {
  color: #4b5563 !important;
}

body.light .settings-input,
body.light .settings-textarea,
body.light .settings-select {
  background: #f3f4f6 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #1f2937 !important;
}

body.light .toggle-slider {
  background: #d1d5db !important;
}

body.light .toggle input:checked+.toggle-slider {
  background: #5865f2 !important;
}

body.light .toggle-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.light .settings-section-desc {
  color: #6b7280 !important;
}

body.light .appearance-card {
  background: #f3f4f6 !important;
  border: 2px solid transparent !important;
  color: #1f2937 !important;
}

body.light .appearance-card:hover {
  background: #e5e7eb !important;
}

body.light .appearance-card.active {
  border-color: #5865f2 !important;
  background: rgba(88, 101, 242, 0.08) !important;
}

body.light .appearance-title {
  color: #1f2937 !important;
}

body.light .appearance-desc {
  color: #6b7280 !important;
}

/* ============================================
   SERVER SETTINGS MODAL - Light Theme
   ============================================ */
body.light .server-settings-modal {
  background: rgba(15, 23, 42, 0.4) !important;
}

body.light .server-settings-container {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

body.light .server-settings-sidebar {
  background: #f3f4f6 !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light .settings-sidebar-header {
  color: #6b7280 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light .settings-tab {
  color: #4b5563 !important;
}

body.light .settings-tab:hover {
  background: rgba(88, 101, 242, 0.08) !important;
  color: #1f2937 !important;
}

body.light .settings-tab.active {
  background: rgba(88, 101, 242, 0.12) !important;
  color: #5865f2 !important;
}

body.light .server-settings-content {
  background: #ffffff !important;
}

body.light .settings-content-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light .settings-content-header h2 {
  color: #1f2937 !important;
}

body.light .settings-close-btn {
  color: #6b7280 !important;
}

body.light .settings-close-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #1f2937 !important;
}

body.light .settings-content-body {
  color: #1f2937 !important;
}

/* Roles list in server settings */
body.light .role-item {
  background: #f9fafb !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #1f2937 !important;
}

body.light .role-item:hover {
  background: #f3f4f6 !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

body.light .role-name {
  color: #1f2937 !important;
}

body.light .role-count {
  color: #6b7280 !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light .role-edit-btn {
  color: #6b7280 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.light .role-edit-btn:hover {
  background: rgba(88, 101, 242, 0.1) !important;
  color: #5865f2 !important;
}

/* Channel items in server settings */
body.light .channel-item-row {
  background: #f9fafb !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light .channel-item-row:hover {
  background: #f3f4f6 !important;
}

/* ============================================
   MESSAGE ACTIONS - Light Theme
   ============================================ */
body.light .msg-action-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #4b5563 !important;
}

body.light .msg-action-btn:hover {
  background: rgba(88, 101, 242, 0.1) !important;
  border-color: #5865f2 !important;
  color: #5865f2 !important;
}

body.light .msg-reaction {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1f2937 !important;
}

body.light .msg-reaction.active {
  border-color: #5865f2 !important;
  background: rgba(88, 101, 242, 0.12) !important;
}

/* ============================================
   MISC REMAINING ELEMENTS
   ============================================ */
body.light .message-reply {
  border: 1px dashed rgba(0, 0, 0, 0.15) !important;
  color: #4b5563 !important;
}

body.light .message-reply .reply-author {
  color: #1f2937 !important;
}

body.light .message-reply .reply-label {
  color: #6b7280 !important;
}

body.light .msg-author {
  color: #1f2937 !important;
}

body.light .msg-text {
  color: #374151 !important;
}

body.light .msg-time {
  color: #9ca3af !important;
}

body.light .message-pinned-indicator {
  color: #5865f2 !important;
}