/* Tricolor Light Theme Variables */
:root {
  --bg-base: #f4f3f0;             /* Soft off-white/warm gray */
  --bg-surface: rgba(255, 255, 255, 0.45);
  --bg-card: #ffffff;             /* White cards for maximum contrast and pop */
  
  --border-glow: rgba(176, 30, 35, 0.12);
  --border-glow-focus: rgba(176, 30, 35, 0.3);
  
  --color-primary: #b01e23;       /* Hungarian Crimson Red */
  --color-primary-glow: #d9383a;  /* Crimson glow */
  --color-secondary: #221f1e;     /* Charcoal for card headers (high contrast) */
  --color-accent: #287a43;        /* Hungarian Forest Green */
  
  --text-primary: #221f1e;        /* Dark Charcoal */
  --text-secondary: #5c5452;      /* Medium Charcoal */
  --text-muted: #8e8280;          /* Disabled/Muted */
  
  --success: #287a43;             /* Deep readable green */
  --warning: #b35c00;             /* Deep readable orange */
  --danger: #b32424;              /* Deep readable red */
  --info: #1a689c;                /* Deep readable blue */
  --bg-avatar-default: rgba(0, 0, 0, 0.08);
  --color-avatar-placeholder: rgba(0, 0, 0, 0.35);
  --bg-dialog-box: rgba(0, 0, 0, 0.05);
  --border-dialog-box: 1px solid rgba(0, 0, 0, 0.08);
  --bg-progress-track: rgba(0, 0, 0, 0.08);
  
  --bg-dropdown: rgba(255, 255, 255, 0.95);
  --border-dropdown: 1px solid rgba(0, 0, 0, 0.15);
  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.12);
  --border-dropdown-divider: rgba(0, 0, 0, 0.08);
  
  color-scheme: light;
}

body {
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(176, 30, 35, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(40, 122, 67, 0.04) 0%, transparent 50%);
  color: var(--text-primary);
}

/* Specific theme overrides */
h1 {
  background: none !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
}

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

.schedule-card:hover {
  background: #eceae6 !important;
}

#pwa-install-banner,
#apple-pwa-install-banner {
  color: var(--text-primary) !important;
}

header {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

header h1 {
  background: none !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

/* Fix theme selector inline style overrides for light theme */
#theme-selector {
  background: #ffffff !important;
  color: #221f1e !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

#theme-selector option {
  background: #ffffff !important;
  color: #221f1e !important;
}

.glass-panel {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
  background: var(--bg-surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav-link.active, nav ul li a.active {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
}

nav ul li a {
  color: var(--text-secondary);
}

nav ul li a:hover {
  color: var(--color-primary);
}

/* Buttons */
.btn-primary {
  color: #11090a !important;
}

.btn-primary:hover {
  color: #11090a !important;
}

.btn-secondary {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.btn-secondary:hover {
  background: rgba(0, 0, 0, 0.09) !important;
}

.btn-danger {
  color: var(--danger) !important;
  border-color: rgba(179, 36, 36, 0.3) !important;
}

.btn-danger:hover {
  background: rgba(179, 36, 36, 0.08) !important;
  border-color: var(--danger) !important;
}

.btn-success {
  background: var(--success) !important;
  color: #ffffff !important;
  border-color: rgba(40, 122, 67, 0.3) !important;
}

.btn-success:hover {
  background: var(--success) !important;
  filter: brightness(1.15) !important;
  color: #ffffff !important;
}


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

/* Form controls */
.form-control, select, input, textarea {
  background: #ffffff !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.form-control:focus, select:focus, input:focus, textarea:focus {
  border-color: var(--color-primary) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(176, 30, 35, 0.1) !important;
}

/* Popups & dialogs */
dialog {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 10px 45px rgba(0, 0, 0, 0.12) !important;
  color: var(--text-primary) !important;
}

dialog h2, dialog h3 {
  color: var(--text-primary) !important;
}

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

.chat-messages-box + form input,
.chat-form input {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: var(--text-primary) !important;
}

.chat-messages-box + form input:focus,
.chat-form input:focus {
  border-color: var(--color-primary) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(176, 30, 35, 0.1) !important;
}

/* Chat bubbles styling with refined colors and readable text */
.chat-message.self,
.chat-bubble.user {
  background: #fbd6d5 !important;
  color: #8c1c1c !important;
  border: 1px solid rgba(176, 30, 35, 0.25) !important;
}

.chat-message.user,
.chat-bubble.bot {
  background: #e2f2e6 !important;
  color: #1b522c !important;
  border: 1px solid rgba(40, 122, 67, 0.25) !important;
}

.chat-msg-meta,
.chat-bubble-meta {
  color: #5c5452 !important;
}

.chat-msg-time {
  color: #8e8280 !important;
}

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

.chat-role-badge.member {
  background: var(--text-primary) !important;
  color: #ffffff !important;
}

.chat-container {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.chat-input-area {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.card, .stat-card, .event-card, .task-card, .poll-card, .member-card {
  background: var(--bg-card) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

.card:hover, .stat-card:hover, .event-card:hover, .task-card:hover, .poll-card:hover, .member-card:hover {
  border-color: rgba(176, 30, 35, 0.25) !important;
}

.sub-tab-btn {
  color: var(--text-secondary) !important;
}

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

/* Custom info banner & alerts colors - replace blue with warm amber/gold */
.alert-info {
  background: rgba(179, 142, 36, 0.08) !important;
  color: #8c6b1c !important; /* Deep readable gold/amber */
  border-color: rgba(179, 142, 36, 0.2) !important;
}

/* Dashboard news card overrides for light theme */
.dashboard-news-card {
  background: var(--bg-card) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.dashboard-news-card:hover {
  background: #eceae6 !important;
  border-color: rgba(176, 30, 35, 0.25) !important;
}

/* Light theme RSVP status badge overrides for readability */
.member-rsvp-badge.rsvp-member {
  background: rgba(40, 122, 67, 0.15) !important;
  color: var(--success) !important;
  border: 1px solid rgba(40, 122, 67, 0.3) !important;
}

.member-rsvp-badge.rsvp-visitor {
  background: rgba(26, 104, 156, 0.15) !important;
  color: var(--info) !important;
  border: 1px solid rgba(26, 104, 156, 0.3) !important;
}

.member-rsvp-badge.rsvp-unsure {
  background: rgba(179, 92, 0, 0.12) !important;
  color: var(--warning) !important;
  border: 1px solid rgba(179, 92, 0, 0.3) !important;
}

.member-rsvp-badge.rsvp-not-going {
  background: rgba(179, 36, 36, 0.15) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(179, 36, 36, 0.3) !important;
}

.badge-early-pass {
  background: rgba(179, 92, 0, 0.12) !important;
  color: var(--warning) !important;
  border: 1px solid rgba(179, 92, 0, 0.3) !important;
}

/* HunDroid Chat Assistant Light Theme Overrides */
#hundroid-chat-dialog {
  background: #ffffff !important;
  border: 1px solid var(--border-glow-focus) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
}

#hundroid-chat-dialog .chat-header {
  background: rgba(176, 30, 35, 0.05) !important; /* Soft crimson tint */
  border-bottom: 1px solid rgba(176, 30, 35, 0.15) !important;
}

#hundroid-chat-dialog .chat-title-area h4 {
  color: var(--text-primary) !important;
}

#hundroid-chat-dialog .chat-title-area .chat-subtitle {
  color: var(--text-secondary) !important;
}

#hundroid-chat-messages {
  background: #ffffff !important;
}

#hundroid-chat-dialog .chat-bubble.bot {
  background: rgba(0, 0, 0, 0.03) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

#hundroid-chat-dialog .chat-bubble.user {
  background: rgba(176, 30, 35, 0.08) !important; /* Light crimson bubble */
  color: #b01e23 !important; /* Crimson text */
  border: 1px solid rgba(176, 30, 35, 0.2) !important;
}

#hundroid-chat-dialog .chat-input-area {
  background: rgba(0, 0, 0, 0.02) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

#hundroid-chat-dialog .chat-input-area input {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: var(--text-primary) !important;
}

#hundroid-chat-dialog .chat-input-area input:focus {
  border-color: var(--color-primary) !important;
}

/* Detail Drawer Light Theme Overrides */
.detail-drawer {
  background: #ffffff !important;
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.08) !important;
}

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

.drawer-tabs {
  background: rgba(0, 0, 0, 0.03) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.drawer-tab-btn:hover {
  background: rgba(0, 0, 0, 0.02) !important;
}

.drawer-tab-btn.active {
  background: rgba(176, 30, 35, 0.05) !important;
  border-bottom-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.drawer-form-actions-sticky {
  background: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Custom comparison table for proposed changes inside drawer */
.comparison-table-wrapper {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.comparison-table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.comparison-table thead tr {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* Searchable dropdown select overrides for light theme */
.searchable-select-input {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: var(--text-primary) !important;
}

.searchable-select-input:focus {
  background: #ffffff !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(176, 30, 35, 0.1) !important;
}

.searchable-dropdown-list {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

.searchable-dropdown-item {
  color: var(--text-primary) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.searchable-dropdown-item:hover {
  background: rgba(176, 30, 35, 0.06) !important;
  color: var(--color-primary) !important;
}

.searchable-dropdown-item.selected {
  background: rgba(176, 30, 35, 0.12) !important;
  color: var(--color-primary) !important;
}

/* Chat container inside task drawer overrides */
.drawer-chat-container {
  background: #fbf9f6 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.drawer-chat-container .chat-header {
  background: #f1ede5 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: var(--text-primary) !important;
}

.drawer-chat-container .chat-messages {
  background: #fbf9f6 !important;
}

.drawer-chat-container .chat-message.system {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: var(--text-secondary) !important;
}

.drawer-chat-container .chat-form {
  background: #f1ede5 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.drawer-chat-container .chat-form input {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: var(--text-primary) !important;
}

.drawer-chat-container .chat-form input:focus {
  background: #ffffff !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(176, 30, 35, 0.1) !important;
}

.drawer-chat-container .chat-msg-meta {
  color: var(--text-secondary) !important;
}

.drawer-chat-container .chat-msg-time {
  color: var(--text-muted) !important;
  opacity: 0.85 !important;
}

/* Profile hover bubble light theme override */
[data-theme="tricolor-light"] .profile-hover-bubble {
  background: #ffffff !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  color: var(--text-primary) !important;
}

[data-theme="tricolor-light"] .profile-hover-bubble #profile-hover-name {
  color: var(--text-primary) !important;
}

[data-theme="tricolor-light"] .profile-hover-bubble #profile-hover-role {
  color: var(--color-primary) !important;
}

[data-theme="tricolor-light"] .profile-hover-bubble #profile-hover-years {
  color: var(--text-secondary) !important;
}

[data-theme="tricolor-light"] .profile-hover-bubble #profile-hover-attending,
[data-theme="tricolor-light"] .profile-hover-bubble #profile-hover-arrival {
  color: var(--text-primary) !important;
}

[data-theme="tricolor-light"] .profile-hover-bubble div,
[data-theme="tricolor-light"] .profile-hover-bubble span {
  color: var(--text-secondary);
}

/* Light Theme overrides for filter chips */
[data-theme="tricolor-light"] .filter-chip {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: var(--text-secondary) !important;
}

[data-theme="tricolor-light"] .filter-chip:hover {
  background: rgba(176, 30, 35, 0.06) !important;
  border-color: rgba(176, 30, 35, 0.2) !important;
  color: var(--color-primary) !important;
}

[data-theme="tricolor-light"] .filter-chip.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}