/* Tricolor Dark Theme Variables */
:root {
  --bg-base: #161011;            /* Dark charcoal gray with a reddish hue */
  --bg-surface: rgba(22, 12, 14, 0.55);
  --bg-card: rgba(36, 18, 21, 0.65);
  
  --border-glow: rgba(176, 30, 35, 0.25);
  --border-glow-focus: rgba(176, 30, 35, 0.5);
  
  --color-primary: #b01e23;       /* Deep Hungarian Crimson Red */
  --color-primary-glow: #e5a93c;  /* Pálinka Gold for premium readability */
  --color-secondary: #ebdcdb;     /* Elegant warm white/silver for card headers */
  --color-accent: #2e7d32;        /* Hungarian Forest Green */
  
  --text-primary: #ffffff;
  --text-secondary: #d1c7c5;
  --text-muted: #9c8a88;
  
  --success: #2e7d32;             /* Forest Green for success elements */
  --warning: #f1c40f;
  --danger: #e74c3c;
  --info: #3498db;
  --bg-avatar-default: rgba(0, 0, 0, 0.45);
  --color-avatar-placeholder: rgba(255, 255, 255, 0.3);
  --bg-dialog-box: rgba(0, 0, 0, 0.20);
  --border-dialog-box: 1px solid rgba(255, 255, 255, 0.05);
  --bg-progress-track: rgba(255, 255, 255, 0.05);
  
  --bg-dropdown: rgba(20, 12, 8, 0.98);
  --border-dropdown: 1px solid var(--color-primary-glow);
  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.7);
  --border-dropdown-divider: rgba(255, 255, 255, 0.08);
  
  color-scheme: dark;
}

body {
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(99, 23, 26, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(46, 125, 50, 0.08) 0%, transparent 50%);
}

/* Specific theme overrides */
h1 {
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

.logo-section h1 {
  white-space: nowrap !important;
}

.schedule-card:hover {
  background: rgba(176, 30, 35, 0.15) !important;
}

.btn-primary {
  box-shadow: 0 0 10px rgba(176, 30, 35, 0.3);
}

.btn-primary:hover {
  box-shadow: 0 0 15px rgba(176, 30, 35, 0.6);
}

.glass-panel {
  border: 1px solid var(--border-glow);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lang-btn.active {
  border-color: var(--color-primary-glow) !important;
  color: var(--color-primary-glow) !important;
}

/* Sub-tabs overrides to remove fire theme colors */
.sub-tab-btn {
  color: var(--text-secondary) !important;
}

.sub-tab-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

.sub-tab-btn.active {
  background: rgba(176, 30, 35, 0.12) !important;
  border: 1px solid rgba(176, 30, 35, 0.3) !important;
  color: var(--color-primary-glow) !important;
  box-shadow: none !important;
}

/* Chat container & inputs styling */
.chat-messages-box {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(176, 30, 35, 0.15) !important;
}

.chat-messages-box + form input,
.chat-form input {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(176, 30, 35, 0.25) !important;
  color: #ffffff !important;
}

.chat-messages-box + form input:focus,
.chat-form input:focus {
  border-color: var(--color-primary-glow) !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

/* Chat bubble & message styling with refined colors */
.chat-message.self,
.chat-bubble.user {
  background: rgba(176, 30, 35, 0.25) !important;
  border: 1px solid rgba(176, 30, 35, 0.4) !important;
  color: #ffffff !important;
}

.chat-message.user,
.chat-bubble.bot {
  background: rgba(46, 125, 50, 0.18) !important;
  border: 1px solid rgba(46, 125, 50, 0.35) !important;
  color: #ffffff !important;
}

.chat-msg-meta,
.chat-bubble-meta {
  color: rgba(255, 255, 255, 0.55) !important;
}

.chat-msg-time {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Role badges contrast */
.chat-role-badge.admin {
  background: var(--color-primary) !important;
  color: #ffffff !important;
}

.chat-role-badge.member {
  background: var(--color-secondary) !important;
  color: #11090a !important;
}

/* Custom info banner & alerts colors - replace blue with warm amber/gold */
.alert-info {
  background: rgba(212, 175, 55, 0.1) !important;
  color: #ebdcdb !important; /* Soft warm silver/white for better contrast */
  border-color: rgba(212, 175, 55, 0.25) !important;
}

#pwa-install-banner,
#apple-pwa-install-banner {
  color: #ffffff !important;
}

/* Task Filter Chips Dark Theme Overrides */
.filter-chip {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--text-secondary) !important;
}

.filter-chip:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: var(--color-primary-glow) !important;
  color: var(--color-primary-glow) !important;
}

.filter-chip.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important; /* Solid Hungarian Crimson background requires white text for legibility */
  box-sizing: border-box !important;
  box-shadow: 0 0 10px rgba(176, 30, 35, 0.25) !important;
}