/* Import dyslexia-friendly font */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================= */
/* UNIFIED THEME SYSTEM                          */
/* All themes define the same CSS variables      */
/* Components use these variables for colors     */
/* To add a new theme: copy a theme block and    */
/* update the color values                       */
/* ============================================= */

/* === BASE THEME VARIABLES (defaults) === */
:root {
  /* Brand palette */
  --brand-50: #f0fdf4;
  --brand-100: #dcfce7;
  --brand-200: #bbf7d0;
  --brand-500: #22c55e;
  --brand-600: #16a34a;
  --brand-700: #15803d;
  --brand-800: #166534;
  
  /* Semantic colors */
  --accent: #16a34a;
  --accent-hover: #15803d;
  
  /* Page backgrounds */
  --page-bg: #f3f4f6;
  --page-bg-gradient: linear-gradient(to bottom, #f0fdf4 0%, #dcfce7 100%);
  
  /* Dashboard */
  --dashboard-bg: linear-gradient(to bottom, #f0fdf4 0%, #dcfce7 100%);
  --dashboard-gradient-from: #10b981;
  --dashboard-gradient-to: #059669;
  
  /* Cards */
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.1);
  --card-hover-border: rgba(16, 185, 129, 0.3);
  
  /* Modals */
  --modal-bg: #ffffff;
  --modal-border: #16a34a;
  --modal-shadow: 0 10px 25px rgba(16, 163, 74, 0.2);
  --modal-header-bg: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  
  /* Text colors */
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-on-accent: #ffffff;
  --heading-color: #15803d;
  
  /* Buttons - Primary */
  --btn-primary-bg: linear-gradient(135deg, #10b981, #059669);
  --btn-primary-text: #ffffff;
  --btn-primary-border: #059669;
  --btn-primary-hover-bg: linear-gradient(135deg, #059669, #047857);
  
  /* Buttons - Secondary */
  --btn-secondary-bg: linear-gradient(135deg, #dcfce7, #bbf7d0);
  --btn-secondary-text: #166534;
  --btn-secondary-border: #16a34a;
  --btn-secondary-hover-bg: linear-gradient(135deg, #bbf7d0, #86efac);
  
  /* Inputs */
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-focus-border: #16a34a;
  --input-text: #111827;
  
  /* Borders */
  --border-default: #e5e7eb;
  --border-accent: #16a34a;
  
  /* Footer */
  --footer-bg: #f3f4f6;
  --footer-text: #475569;
  
  /* Font scale (accessibility) */
  --font-scale: 1;
}

/* === FRESH GREEN THEME === */
/* FRESH Green is the default theme - it inherits all values from :root */
/* This selector exists so the theme system can apply body.theme-fresh-green */
body.theme-fresh-green {
  /* No overrides needed - uses root defaults */
}

/* === NARWHAL THEME (2025 REEFSCAPE) === */
body.theme-narwhal {
  --brand-50: #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --page-bg: #eff6ff;
  --page-bg-gradient: linear-gradient(to bottom, #eff6ff 0%, #dbeafe 100%);
  --dashboard-bg: linear-gradient(to bottom, #eff6ff 0%, #dbeafe 100%);
  --dashboard-gradient-from: #3b82f6;
  --dashboard-gradient-to: #2563eb;
  --card-hover-border: rgba(59, 130, 246, 0.3);
  --modal-bg: #eff6ff;
  --modal-border: #3b82f6;
  --modal-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
  --modal-header-bg: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  --text-primary: #1e3a8a;
  --text-secondary: #1e40af;
  --heading-color: #1d4ed8;
  --btn-primary-bg: linear-gradient(135deg, #3b82f6, #2563eb);
  --btn-primary-border: #1d4ed8;
  --btn-primary-hover-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
  --btn-secondary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe);
  --btn-secondary-text: #1e3a8a;
  --btn-secondary-border: #3b82f6;
  --btn-secondary-hover-bg: linear-gradient(135deg, #bfdbfe, #93c5fd);
  --footer-bg: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  --footer-text: #1e40af;
  position: relative;
  overflow-x: hidden;
  background: var(--page-bg-gradient) !important;
}

/* === VECTOR THEME (2024 CRESCENDO) === */
body.theme-vector {
  --brand-50: #fff7ed;
  --brand-100: #ffedd5;
  --brand-200: #fed7aa;
  --brand-500: #f97316;
  --brand-600: #ea580c;
  --brand-700: #c2410c;
  --brand-800: #9a3412;
  --accent: #ea580c;
  --accent-hover: #c2410c;
  --page-bg: #fff7ed;
  --page-bg-gradient: linear-gradient(to bottom, #fff7ed 0%, #ffedd5 100%);
  --dashboard-bg: linear-gradient(to bottom, #fff7ed 0%, #ffedd5 100%);
  --dashboard-gradient-from: #f97316;
  --dashboard-gradient-to: #ea580c;
  --card-hover-border: rgba(249, 115, 22, 0.3);
  --modal-bg: #fff7ed;
  --modal-border: #ea580c;
  --modal-shadow: 0 10px 25px rgba(234, 88, 12, 0.2);
  --modal-header-bg: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
  --text-primary: #9a3412;
  --text-secondary: #c2410c;
  --heading-color: #c2410c;
  --btn-primary-bg: linear-gradient(135deg, #f97316, #ea580c);
  --btn-primary-border: #c2410c;
  --btn-primary-hover-bg: linear-gradient(135deg, #ea580c, #c2410c);
  --btn-secondary-bg: linear-gradient(135deg, #fed7aa, #fdba74);
  --btn-secondary-text: #9a3412;
  --btn-secondary-border: #ea580c;
  --btn-secondary-hover-bg: linear-gradient(135deg, #fdba74, #fb923c);
  --footer-bg: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  --footer-text: #9a3412;
  position: relative;
  overflow-x: hidden;
  background: var(--page-bg-gradient) !important;
}

/* === REBUILT THEME (2026 ARCHAEOLOGY) === */
body.theme-rebuilt {
  --brand-50: #fffbeb;
  --brand-100: #fef3c7;
  --brand-200: #fde68a;
  --brand-500: #d97706;
  --brand-600: #b45309;
  --brand-700: #92400e;
  --brand-800: #78350f;
  --accent: #92400e;
  --accent-hover: #78350f;
  --page-bg: #fffbeb;
  --page-bg-gradient: linear-gradient(to bottom, #fffbeb 0%, #fef3c7 100%);
  --dashboard-bg: linear-gradient(to bottom, #fffbeb 0%, #fef3c7 100%);
  --dashboard-gradient-from: #d97706;
  --dashboard-gradient-to: #92400e;
  --card-hover-border: rgba(217, 119, 6, 0.3);
  --modal-bg: #fffbeb;
  --modal-border: #d97706;
  --modal-shadow: 0 10px 25px rgba(217, 119, 6, 0.2);
  --modal-header-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  --text-primary: #78350f;
  --text-secondary: #92400e;
  --heading-color: #92400e;
  --btn-primary-bg: linear-gradient(135deg, #d97706, #b45309);
  --btn-primary-border: #92400e;
  --btn-primary-hover-bg: linear-gradient(135deg, #b45309, #92400e);
  --btn-secondary-bg: linear-gradient(135deg, #fde68a, #fcd34d);
  --btn-secondary-text: #78350f;
  --btn-secondary-border: #d97706;
  --btn-secondary-hover-bg: linear-gradient(135deg, #fcd34d, #fbbf24);
  --footer-bg: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  --footer-text: #78350f;
  position: relative;
  overflow-x: hidden;
  background: var(--page-bg-gradient) !important;
}

/* === DARK MODE THEME === */
body.theme-dark-mode {
  --brand-50: #1e293b;
  --brand-100: #334155;
  --brand-200: #475569;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --brand-800: #075985;
  --accent: #0ea5e9;
  --accent-hover: #0284c7;
  --page-bg: #0f172a;
  --page-bg-gradient: linear-gradient(to bottom, #0f172a 0%, #1e293b 100%);
  --dashboard-bg: linear-gradient(to bottom, #0f172a 0%, #1e293b 100%);
  --dashboard-gradient-from: #0ea5e9;
  --dashboard-gradient-to: #0284c7;
  --card-bg: #1e293b;
  --card-border: #334155;
  --card-hover-border: rgba(14, 165, 233, 0.4);
  --modal-bg: linear-gradient(145deg, #0f172a 0%, #1e293b 55%, #1f2937 100%);
  --modal-border: rgba(148,163,184,0.25);
  --modal-shadow: 0 2px 4px -2px rgba(0,0,0,0.65), 0 12px 32px -8px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.03);
  --modal-header-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-on-accent: #ffffff;
  --heading-color: #e2e8f0;
  --btn-primary-bg: linear-gradient(135deg, #0ea5e9, #0284c7);
  --btn-primary-border: #0369a1;
  --btn-primary-hover-bg: linear-gradient(135deg, #0284c7, #0369a1);
  --btn-secondary-bg: linear-gradient(135deg, #334155, #475569);
  --btn-secondary-text: #f1f5f9;
  --btn-secondary-border: #64748b;
  --btn-secondary-hover-bg: linear-gradient(135deg, #475569, #64748b);
  --input-bg: #1e293b;
  --input-border: #475569;
  --input-focus-border: #0ea5e9;
  --input-text: #f1f5f9;
  --border-default: #334155;
  --footer-bg: #111827;
  --footer-text: #9ca3af;
  position: relative;
  overflow-x: hidden;
  background: var(--page-bg-gradient) !important;
}

/* ============================================= */
/* THEME-AWARE COMPONENT STYLES                  */
/* These use the CSS variables defined above     */
/* ============================================= */

/* Page background override for Tailwind bg-accent4 */
body.theme-fresh-green,
body.theme-narwhal,
body.theme-vector,
body.theme-rebuilt,
body.theme-dark-mode {
  background: var(--page-bg-gradient) !important;
}

/* Login screen theme-aware styling */
#login-screen {
  background: var(--page-bg-gradient, #f0fdf4) !important;
}

#login-screen > div:first-of-type {
  background: var(--card-bg, #ffffff) !important;
  border-color: var(--border-default, #e5e7eb) !important;
}

#login-screen h1 {
  color: var(--heading-color, #15803d) !important;
}

#login-screen p {
  color: var(--text-secondary, #4b5563) !important;
}

#login-screen input[type="text"],
#login-screen input[type="password"] {
  background: var(--input-bg, #ffffff) !important;
  border-color: var(--input-border, #e5e7eb) !important;
  color: var(--text-primary, #111827) !important;
}

#login-screen input[type="text"]:focus,
#login-screen input[type="password"]:focus {
  border-color: var(--accent, #16a34a) !important;
}

#login-screen #login-btn {
  background: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-border, #059669) !important;
}

#login-screen #create-user-btn {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text, #166534) !important;
  border-color: var(--btn-secondary-border, #16a34a) !important;
}

/* Create user screen theme-aware */
#create-user-screen {
  background: var(--page-bg-gradient, #f0fdf4) !important;
}

/* Dashboard background */
#dashboard {
  background: var(--dashboard-bg) !important;
}

/* Theme-aware text colors */
.text-accent {
  color: var(--accent) !important;
}

/* Dashboard heading gradient */
#dashboard h2 {
  background: linear-gradient(135deg, var(--dashboard-gradient-from), var(--dashboard-gradient-to));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Welcome heading - use solid color for readability */
#dashboard .text-accent,
#dashboard h2 .text-accent,
h3.text-2xl.font-bold.text-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--heading-color) !important;
  color: var(--heading-color) !important;
}

/* Modal welcome heading */
#modal-body .text-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--heading-color) !important;
  color: var(--heading-color) !important;
}

/* Card hover effects */
.card-button:hover {
  border-color: var(--card-hover-border) !important;
}

.card-button::before {
  background: linear-gradient(135deg, rgba(from var(--accent) r g b / 0.05), rgba(from var(--accent) r g b / 0.02));
}

/* Modal styling */
.theme-modal {
  background: var(--modal-bg) !important;
  color: var(--text-primary) !important;
  border: 2px solid var(--modal-border) !important;
  box-shadow: var(--modal-shadow) !important;
}

.theme-modal h3 {
  color: var(--heading-color) !important;
}

.theme-modal p {
  color: var(--text-secondary) !important;
}

.theme-modal .btn-secondary {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text) !important;
  border: 1px solid var(--btn-secondary-border) !important;
}

.theme-modal .btn-secondary:hover {
  background: var(--btn-secondary-hover-bg) !important;
}

.theme-modal .btn-danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #ffffff !important;
  border: 1px solid #dc2626 !important;
}

.theme-modal .btn-danger:hover {
  background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
}

/* Confirm dialog styling */
.confirm-title {
  color: var(--heading-color) !important;
}

.confirm-message {
  color: var(--text-secondary) !important;
}

.confirm-surface {
  background: var(--modal-bg) !important;
}

.confirm-primary-btn {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border: 1px solid var(--btn-primary-border) !important;
}

.confirm-primary-btn:hover {
  background: var(--btn-primary-hover-bg) !important;
}

.confirm-cancel-btn {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text) !important;
  border: 1px solid var(--btn-secondary-border) !important;
}

.confirm-cancel-btn:hover {
  background: var(--btn-secondary-hover-bg) !important;
}

.confirm-danger-btn {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #ffffff !important;
  border: 1px solid #dc2626 !important;
}

.confirm-danger-btn:hover {
  background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
}

/* Confirm dialog shell */
.confirm-btn--cancel {
  border-color: rgba(from var(--accent) r g b / 0.45) !important;
}

.confirm-btn--primary {
  background: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-border) !important;
}

/* Update modal styling */
.update-icon-wrapper {
  background: var(--btn-primary-bg) !important;
  box-shadow: 0 4px 12px rgba(from var(--accent) r g b / 0.4) !important;
}

.update-modal-title {
  color: var(--heading-color) !important;
}

.update-modal-text {
  color: var(--text-secondary) !important;
}

.update-btn-primary {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border: 1px solid var(--btn-primary-border) !important;
  box-shadow: 0 4px 12px rgba(from var(--accent) r g b / 0.3) !important;
}

.update-btn-primary:hover {
  background: var(--btn-primary-hover-bg) !important;
  box-shadow: 0 6px 16px rgba(from var(--accent) r g b / 0.4) !important;
}

/* Membership overview */
.membership-overview {
  background: var(--brand-50) !important;
  border: 2px solid var(--brand-200) !important;
  color: var(--text-primary) !important;
}

.membership-overview__header {
  background: var(--brand-200) !important;
  border-color: var(--brand-200) !important;
}

.membership-overview__title {
  color: var(--heading-color) !important;
}

.membership-overview__icon {
  color: var(--accent) !important;
}

.membership-overview__row {
  border-color: var(--brand-200) !important;
}

.mo-label {
  color: var(--text-primary) !important;
}

.mo-value {
  color: var(--text-primary) !important;
}

.mo-value--total {
  color: var(--heading-color) !important;
}

.mo-value--active {
  color: var(--accent) !important;
}

.mo-value--inactive {
  color: #dc2626 !important;
}

/* Blog empty state */
.blog-empty-state {
  color: var(--text-primary) !important;
}

.blog-empty-state__icon-wrapper {
  background: var(--brand-100) !important;
}

.blog-empty-state__title {
  color: var(--heading-color) !important;
}

.blog-empty-state__subtitle {
  color: var(--text-primary) !important;
}

.blog-empty-state__icon {
  color: var(--accent) !important;
}

/* Footer styling */
footer {
  background: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  border: none !important;
}

footer a {
  color: var(--accent) !important;
  text-decoration: underline;
}

footer a:hover {
  color: var(--accent-hover) !important;
}

/* Modal content backgrounds */
#modal-content {
  background: var(--modal-bg) !important;
  color: var(--text-primary) !important;
}

#modal-body {
  color: var(--text-secondary) !important;
}

/* Input dialog */
.input-dialog-textarea {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

.input-dialog-textarea:focus {
  border-color: var(--input-focus-border) !important;
}

/* ============================================= */
/* REEFSCAPE THEME DECORATIONS                   */
/* Underwater reef & fish ambiance               */
/* ============================================= */

/* Reef container - separate divs injected by JS or use outline approach */
/* Using a wrapper approach with fixed elements */

/* Left reef/coral decoration */
.reef-decoration-left {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 300px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Cpath d='M20 300 Q30 250 25 200 Q20 150 35 120 Q50 90 40 60' stroke='%23f97316' stroke-width='8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M35 120 Q55 100 70 110' stroke='%23f97316' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M25 180 Q10 160 5 140' stroke='%23f97316' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M60 300 Q70 260 65 220 Q60 180 75 150 Q90 120 85 90' stroke='%23ec4899' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3Cpath d='M75 150 Q95 140 105 155' stroke='%23ec4899' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M65 200 Q50 185 45 165' stroke='%23ec4899' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M100 300 Q110 270 105 240 Q100 210 110 180 Q120 150 115 120 Q110 90 120 60' stroke='%2322c55e' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M130 300 Q125 275 130 250 Q135 225 128 200 Q120 175 130 150' stroke='%2316a34a' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='45' cy='280' rx='35' ry='20' fill='%23a855f7' opacity='0.7'/%3E%3Cpath d='M20 280 Q30 275 40 280 Q50 285 60 280 Q70 275 80 280' stroke='%239333ea' stroke-width='2' fill='none'/%3E%3Ccircle cx='15' cy='250' r='4' fill='%23fb923c'/%3E%3Ccircle cx='25' cy='245' r='3' fill='%23fb923c'/%3E%3Ccircle cx='85' cy='260' r='4' fill='%23f472b6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;
}

/* Right reef/coral decoration */
.reef-decoration-right {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 300px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Cpath d='M180 300 Q170 250 175 200 Q180 150 165 120 Q150 90 160 60' stroke='%2306b6d4' stroke-width='8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M165 120 Q145 100 130 110' stroke='%2306b6d4' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M175 180 Q190 160 195 140' stroke='%2306b6d4' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M140 300 Q130 260 135 220 Q140 180 125 150 Q110 120 115 90' stroke='%23f43f5e' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3Cpath d='M125 150 Q105 140 95 155' stroke='%23f43f5e' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M100 300 Q90 270 95 240 Q100 210 90 180 Q80 150 85 120' stroke='%2322c55e' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M70 300 Q75 275 70 250 Q65 225 72 200 Q80 175 70 150' stroke='%2316a34a' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='160' cy='285' rx='30' ry='15' fill='%230ea5e9' opacity='0.7'/%3E%3Cellipse cx='50' cy='290' rx='25' ry='10' fill='%23fbbf24' opacity='0.6'/%3E%3Cpath d='M35 285 L30 265' stroke='%23f59e0b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M45 283 L42 260' stroke='%23f59e0b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M55 283 L58 260' stroke='%23f59e0b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M65 285 L70 265' stroke='%23f59e0b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
}

/* Swimming fish decoration */
.reef-fish {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  background-image: 
    /* Fish 1 - blue tang */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M5 12 Q0 8 5 4 L12 8 L12 16 L5 20 Q0 16 5 12' fill='%233b82f6'/%3E%3Cellipse cx='22' cy='12' rx='14' ry='8' fill='%233b82f6'/%3E%3Cpath d='M34 12 L40 6 L40 18 Z' fill='%233b82f6'/%3E%3Ccircle cx='30' cy='10' r='2' fill='white'/%3E%3Ccircle cx='31' cy='10' r='1' fill='%231e3a8a'/%3E%3C/svg%3E"),
    /* Fish 2 - clownfish */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3Cellipse cx='18' cy='11' rx='14' ry='9' fill='%23f97316'/%3E%3Cpath d='M4 11 L0 5 L0 17 Z' fill='%23f97316'/%3E%3Cpath d='M30 11 Q36 7 32 3 L28 7 L28 15 L32 19 Q36 15 30 11' fill='%23f97316'/%3E%3Cpath d='M10 2 L10 20' stroke='white' stroke-width='3'/%3E%3Cpath d='M22 3 L22 19' stroke='white' stroke-width='3'/%3E%3Ccircle cx='7' cy='9' r='2' fill='white'/%3E%3Ccircle cx='6' cy='9' r='1' fill='black'/%3E%3C/svg%3E"),
    /* Fish 3 - small yellow fish */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cellipse cx='14' cy='8' rx='10' ry='6' fill='%23fbbf24'/%3E%3Cpath d='M24 8 L28 4 L28 12 Z' fill='%23fbbf24'/%3E%3Cpath d='M4 8 L0 4 L0 12 Z' fill='%23f59e0b'/%3E%3Ccircle cx='8' cy='7' r='1.5' fill='white'/%3E%3Ccircle cx='8.5' cy='7' r='0.8' fill='black'/%3E%3C/svg%3E"),
    /* Fish 4 - purple angelfish */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cpath d='M16 2 Q8 6 6 14 Q8 22 16 26 Q24 22 26 14 Q24 6 16 2' fill='%238b5cf6'/%3E%3Cpath d='M26 14 L32 10 L32 18 Z' fill='%238b5cf6'/%3E%3Ccircle cx='10' cy='12' r='2' fill='white'/%3E%3Ccircle cx='10.5' cy='12' r='1' fill='%231e1b4b'/%3E%3C/svg%3E");
  background-size: 50px 30px, 45px 28px, 35px 20px, 40px 35px;
  background-position: 
    10% 15%,
    85% 25%,
    25% 70%,
    75% 55%;
  background-repeat: no-repeat;
  animation: fish-swim 25s ease-in-out infinite;
}

/* Fish swimming animation */
@keyframes fish-swim {
  0% { background-position: 10% 15%, 85% 25%, 25% 70%, 75% 55%; }
  25% { background-position: 30% 20%, 65% 30%, 45% 65%, 55% 50%; }
  50% { background-position: 50% 18%, 45% 22%, 65% 75%, 35% 60%; }
  75% { background-position: 70% 22%, 25% 28%, 85% 68%, 15% 52%; }
  100% { background-position: 10% 15%, 85% 25%, 25% 70%, 75% 55%; }
}

/* Bubbles decoration */
.reef-bubbles {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.4;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%2393c5fd' stroke-width='1.5'/%3E%3Ccircle cx='7' cy='7' r='2' fill='white' opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5' fill='none' stroke='%23bfdbfe' stroke-width='1'/%3E%3Ccircle cx='6' cy='6' r='1.5' fill='white' opacity='0.4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4' fill='none' stroke='%2360a5fa' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 24px 24px, 18px 18px, 14px 14px;
  background-repeat: no-repeat;
  animation: bubbles-rise 12s ease-in-out infinite;
}

@keyframes bubbles-rise {
  0% { background-position: 15% 95%, 50% 90%, 80% 92%; }
  50% { background-position: 20% 40%, 45% 35%, 85% 30%; }
  100% { background-position: 15% 95%, 50% 90%, 80% 92%; }
}

/* Make decorations more prominent on mobile */
@media screen and (max-width: 768px) {
  .reef-decoration-left,
  .reef-decoration-right {
    width: 180px;
    height: 250px;
    opacity: 0.8;
  }
  
  .reef-fish {
    opacity: 0.6;
  }
  
  .reef-bubbles {
    opacity: 0.5;
  }
}

/* ============================================= */
/* CRESCENDO THEME DECORATIONS                   */
/* Music notes, speakers & sound waves           */
/* ============================================= */

/* Left speaker decoration */
.crescendo-decoration-left {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 180px;
  height: 280px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 280'%3E%3C!-- Speaker cabinet --%3E%3Crect x='10' y='80' width='100' height='180' rx='8' fill='%231f2937' stroke='%23374151' stroke-width='2'/%3E%3Crect x='15' y='85' width='90' height='170' rx='6' fill='%23111827'/%3E%3C!-- Woofer --%3E%3Ccircle cx='60' cy='200' r='35' fill='%23374151'/%3E%3Ccircle cx='60' cy='200' r='28' fill='%231f2937'/%3E%3Ccircle cx='60' cy='200' r='12' fill='%23f97316'/%3E%3C!-- Tweeter --%3E%3Ccircle cx='60' cy='130' r='18' fill='%23374151'/%3E%3Ccircle cx='60' cy='130' r='12' fill='%231f2937'/%3E%3Ccircle cx='60' cy='130' r='5' fill='%23fbbf24'/%3E%3C!-- Sound waves --%3E%3Cpath d='M115 165 Q130 165 130 180 Q130 195 115 195' stroke='%23f97316' stroke-width='3' fill='none' opacity='0.6'/%3E%3Cpath d='M120 155 Q145 155 145 180 Q145 205 120 205' stroke='%23fb923c' stroke-width='3' fill='none' opacity='0.5'/%3E%3Cpath d='M125 145 Q160 145 160 180 Q160 215 125 215' stroke='%23fdba74' stroke-width='3' fill='none' opacity='0.4'/%3E%3C!-- Music note 1 --%3E%3Cellipse cx='145' cy='60' rx='10' ry='8' fill='%23f97316'/%3E%3Cpath d='M155 60 L155 25' stroke='%23f97316' stroke-width='3'/%3E%3Cpath d='M155 25 Q165 30 165 40' stroke='%23f97316' stroke-width='3' fill='none'/%3E%3C!-- Music note 2 --%3E%3Cellipse cx='50' cy='45' rx='8' ry='6' fill='%2322c55e'/%3E%3Cpath d='M58 45 L58 15' stroke='%2322c55e' stroke-width='2.5'/%3E%3Cpath d='M58 15 Q66 18 66 26' stroke='%2322c55e' stroke-width='2.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;
}

/* Right speaker decoration */
.crescendo-decoration-right {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 180px;
  height: 280px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 280'%3E%3C!-- Speaker cabinet --%3E%3Crect x='70' y='80' width='100' height='180' rx='8' fill='%231f2937' stroke='%23374151' stroke-width='2'/%3E%3Crect x='75' y='85' width='90' height='170' rx='6' fill='%23111827'/%3E%3C!-- Woofer --%3E%3Ccircle cx='120' cy='200' r='35' fill='%23374151'/%3E%3Ccircle cx='120' cy='200' r='28' fill='%231f2937'/%3E%3Ccircle cx='120' cy='200' r='12' fill='%233b82f6'/%3E%3C!-- Tweeter --%3E%3Ccircle cx='120' cy='130' r='18' fill='%23374151'/%3E%3Ccircle cx='120' cy='130' r='12' fill='%231f2937'/%3E%3Ccircle cx='120' cy='130' r='5' fill='%2322c55e'/%3E%3C!-- Sound waves (mirrored) --%3E%3Cpath d='M65 165 Q50 165 50 180 Q50 195 65 195' stroke='%233b82f6' stroke-width='3' fill='none' opacity='0.6'/%3E%3Cpath d='M60 155 Q35 155 35 180 Q35 205 60 205' stroke='%2360a5fa' stroke-width='3' fill='none' opacity='0.5'/%3E%3Cpath d='M55 145 Q20 145 20 180 Q20 215 55 215' stroke='%2393c5fd' stroke-width='3' fill='none' opacity='0.4'/%3E%3C!-- Music note 1 --%3E%3Cellipse cx='35' cy='55' rx='10' ry='8' fill='%233b82f6'/%3E%3Cpath d='M25 55 L25 20' stroke='%233b82f6' stroke-width='3'/%3E%3Cpath d='M25 20 Q15 25 15 35' stroke='%233b82f6' stroke-width='3' fill='none'/%3E%3C!-- Music note 2 (double) --%3E%3Cellipse cx='130' cy='40' rx='7' ry='5' fill='%2322c55e'/%3E%3Cellipse cx='150' cy='45' rx='7' ry='5' fill='%2322c55e'/%3E%3Cpath d='M137 40 L137 10 L157 15 L157 45' stroke='%2322c55e' stroke-width='2.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
}

/* Floating music notes */
.crescendo-notes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.45;
  background-image: 
    /* Quarter note */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cellipse cx='8' cy='34' rx='7' ry='5' fill='%23f97316'/%3E%3Cpath d='M15 34 L15 5' stroke='%23f97316' stroke-width='2.5'/%3E%3C/svg%3E"),
    /* Eighth note */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 40'%3E%3Cellipse cx='8' cy='34' rx='7' ry='5' fill='%2322c55e'/%3E%3Cpath d='M15 34 L15 8' stroke='%2322c55e' stroke-width='2.5'/%3E%3Cpath d='M15 8 Q25 12 25 22' stroke='%2322c55e' stroke-width='2.5' fill='none'/%3E%3C/svg%3E"),
    /* Double eighth */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='8' cy='34' rx='6' ry='4' fill='%233b82f6'/%3E%3Cellipse cx='28' cy='36' rx='6' ry='4' fill='%233b82f6'/%3E%3Cpath d='M14 34 L14 10 L34 14 L34 36' stroke='%233b82f6' stroke-width='2' fill='none'/%3E%3C/svg%3E"),
    /* Treble clef */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 50'%3E%3Cpath d='M15 45 Q5 40 8 30 Q12 20 15 15 Q18 10 15 5 Q12 10 12 20 Q12 35 20 40 Q25 35 22 28 Q18 22 15 25 Q12 28 15 32' stroke='%23a855f7' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 24px 40px, 28px 40px, 40px 40px, 30px 50px;
  background-position: 
    12% 20%,
    78% 15%,
    30% 65%,
    85% 55%;
  background-repeat: no-repeat;
  animation: notes-float 18s ease-in-out infinite;
}

@keyframes notes-float {
  0% { background-position: 12% 20%, 78% 15%, 30% 65%, 85% 55%; }
  25% { background-position: 18% 25%, 72% 20%, 38% 60%, 80% 50%; }
  50% { background-position: 15% 15%, 82% 25%, 25% 70%, 88% 60%; }
  75% { background-position: 20% 22%, 75% 12%, 35% 62%, 82% 52%; }
  100% { background-position: 12% 20%, 78% 15%, 30% 65%, 85% 55%; }
}

/* Sound wave bars (equalizer effect) */
.crescendo-equalizer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 60px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.crescendo-equalizer span {
  width: 8px;
  background: linear-gradient(to top, #f97316, #fbbf24);
  border-radius: 2px 2px 0 0;
  animation: equalizer-bar 0.8s ease-in-out infinite;
}

.crescendo-equalizer span:nth-child(1) { height: 20px; animation-delay: 0s; }
.crescendo-equalizer span:nth-child(2) { height: 35px; animation-delay: 0.1s; }
.crescendo-equalizer span:nth-child(3) { height: 25px; animation-delay: 0.2s; }
.crescendo-equalizer span:nth-child(4) { height: 45px; animation-delay: 0.15s; }
.crescendo-equalizer span:nth-child(5) { height: 30px; animation-delay: 0.25s; }
.crescendo-equalizer span:nth-child(6) { height: 50px; animation-delay: 0.05s; }
.crescendo-equalizer span:nth-child(7) { height: 35px; animation-delay: 0.2s; }
.crescendo-equalizer span:nth-child(8) { height: 40px; animation-delay: 0.1s; }
.crescendo-equalizer span:nth-child(9) { height: 28px; animation-delay: 0.3s; }
.crescendo-equalizer span:nth-child(10) { height: 22px; animation-delay: 0.15s; }

@keyframes equalizer-bar {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.5); }
}

/* Make CRESCENDO decorations more prominent on mobile */
@media screen and (max-width: 768px) {
  .crescendo-decoration-left,
  .crescendo-decoration-right {
    width: 160px;
    height: 250px;
    opacity: 0.8;
  }
  
  .crescendo-notes {
    opacity: 0.5;
  }
  
  .crescendo-equalizer {
    opacity: 0.6;
  }
}

/* ============================================= */
/* 2026 REBUILT THEME DECORATIONS                */
/* Archaeology/excavation/past games ambiance    */
/* ============================================= */

/* Left ruins/dig site decoration */
.rebuilt-decoration-left {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 300px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3C!-- Ground strata layers --%3E%3Crect x='0' y='260' width='200' height='40' fill='%2392400e'/%3E%3Crect x='0' y='230' width='200' height='30' fill='%23a8520f'/%3E%3Crect x='0' y='210' width='200' height='20' fill='%23b8621a'/%3E%3C!-- Ancient column ruins --%3E%3Crect x='20' y='120' width='25' height='140' fill='%23d4c5a9' rx='2'/%3E%3Crect x='15' y='110' width='35' height='15' fill='%23e8dcc6' rx='2'/%3E%3Crect x='18' y='255' width='30' height='10' fill='%23c9b896' rx='2'/%3E%3C!-- Broken column piece --%3E%3Crect x='55' y='200' width='20' height='60' fill='%23d4c5a9' rx='2' transform='rotate(15 65 230)'/%3E%3C!-- Fossil/artifact in wall --%3E%3Cpath d='M100 240 Q105 235 110 240 Q115 245 110 250 Q105 255 100 250 Q95 245 100 240' fill='%23f5f0e1' stroke='%23b8a07a' stroke-width='1'/%3E%3Cpath d='M100 245 Q103 243 106 245' stroke='%23a08060' stroke-width='1' fill='none'/%3E%3C!-- Pickaxe --%3E%3Cpath d='M140 180 L170 210' stroke='%2378350f' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M168 195 L180 200 L175 210 L165 205' fill='%236b7280' stroke='%234b5563' stroke-width='1'/%3E%3C!-- Ancient gear/cog (past games symbol) --%3E%3Ccircle cx='160' cy='140' r='18' fill='none' stroke='%23d97706' stroke-width='3' opacity='0.6'/%3E%3Ccircle cx='160' cy='140' r='8' fill='%23d97706' opacity='0.5'/%3E%3Cpath d='M160 118 L160 125 M160 155 L160 162 M138 140 L145 140 M175 140 L182 140' stroke='%23d97706' stroke-width='3' opacity='0.6'/%3E%3C!-- Small fossils scattered --%3E%3Ccircle cx='80' cy='275' r='3' fill='%23f5f0e1' stroke='%23b8a07a'/%3E%3Ccircle cx='120' cy='268' r='2' fill='%23f5f0e1' stroke='%23b8a07a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;
}

/* Right ruins/dig site decoration */
.rebuilt-decoration-right {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 300px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3C!-- Ground strata layers --%3E%3Crect x='0' y='260' width='200' height='40' fill='%2392400e'/%3E%3Crect x='0' y='230' width='200' height='30' fill='%23a8520f'/%3E%3Crect x='0' y='210' width='200' height='20' fill='%23b8621a'/%3E%3C!-- Broken arch --%3E%3Cpath d='M120 260 L120 180 Q150 140 180 180 L180 260' fill='none' stroke='%23d4c5a9' stroke-width='12' stroke-linecap='round'/%3E%3C!-- Ancient temple base --%3E%3Crect x='100' y='245' width='90' height='15' fill='%23e8dcc6' rx='2'/%3E%3C!-- Coral fossil (REEFSCAPE reference) --%3E%3Cpath d='M50 240 Q55 220 52 200 Q48 180 55 165' stroke='%23f97316' stroke-width='4' fill='none' opacity='0.5' stroke-linecap='round'/%3E%3Cpath d='M55 180 Q62 175 68 182' stroke='%23f97316' stroke-width='3' fill='none' opacity='0.5'/%3E%3C!-- Music note fossil (CRESCENDO reference) --%3E%3Cellipse cx='40' cy='265' rx='6' ry='4' fill='%23fbbf24' opacity='0.6'/%3E%3Cpath d='M46 265 L46 250' stroke='%23fbbf24' stroke-width='2' opacity='0.6'/%3E%3C!-- Ancient robot parts (generic past games) --%3E%3Crect x='70' y='250' width='12' height='8' fill='%236b7280' rx='1' opacity='0.7'/%3E%3Ccircle cx='76' cy='248' r='3' fill='%234b5563' opacity='0.7'/%3E%3C!-- Hieroglyph-style symbols --%3E%3Cpath d='M25 200 L30 190 L35 200 L30 195 Z' fill='%23d97706' opacity='0.5'/%3E%3Cpath d='M25 215 L35 215 M30 210 L30 220' stroke='%23d97706' stroke-width='2' opacity='0.5'/%3E%3C!-- Brush tool --%3E%3Crect x='145' y='130' width='4' height='35' fill='%2378350f' rx='1'/%3E%3Crect x='140' y='125' width='14' height='8' fill='%23a1a1aa' rx='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
}

/* Floating artifacts (past game symbols) */
.rebuilt-artifacts {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  background-image: 
    /* Gear/cog (generic robotics) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='10' fill='none' stroke='%23d97706' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='4' fill='%23d97706'/%3E%3Cpath d='M16 4v4M16 24v4M4 16h4M24 16h4M8 8l3 3M21 21l3 3M8 24l3-3M21 11l3-3' stroke='%23d97706' stroke-width='2'/%3E%3C/svg%3E"),
    /* Power cell/battery */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Crect x='2' y='4' width='20' height='26' rx='2' fill='%2322c55e' opacity='0.8'/%3E%3Crect x='8' y='0' width='8' height='4' rx='1' fill='%2316a34a'/%3E%3Cpath d='M12 10l-4 6h3v6l4-6h-3z' fill='white'/%3E%3C/svg%3E"),
    /* Star/award */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 2l3.5 7 7.5 1-5.5 5.3 1.3 7.7-6.8-3.6-6.8 3.6 1.3-7.7L3 10l7.5-1z' fill='%23fbbf24' stroke='%23d97706' stroke-width='1'/%3E%3C/svg%3E"),
    /* Wrench tool */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 4c3 0 5.5 2.5 5.5 5.5 0 .8-.2 1.6-.5 2.3l9.2 9.2c.8.8.8 2 0 2.8-.8.8-2 .8-2.8 0l-9.2-9.2c-.7.3-1.5.5-2.3.5C5 15 2.5 12.5 2.5 9.5c0-1 .3-2 .7-2.8l3.5 3.5 2.1-2.1-3.5-3.5c.8-.4 1.8-.7 2.7-.7z' fill='%236b7280' stroke='%234b5563'/%3E%3C/svg%3E");
  background-size: 40px 40px, 30px 40px, 35px 35px, 32px 32px;
  background-position: 
    15% 20%,
    80% 30%,
    35% 65%,
    70% 55%;
  background-repeat: no-repeat;
  animation: artifacts-float 30s ease-in-out infinite;
}

@keyframes artifacts-float {
  0% { background-position: 15% 20%, 80% 30%, 35% 65%, 70% 55%; }
  25% { background-position: 20% 18%, 75% 35%, 40% 60%, 65% 50%; }
  50% { background-position: 18% 25%, 82% 28%, 32% 68%, 72% 58%; }
  75% { background-position: 22% 22%, 78% 32%, 38% 62%, 68% 52%; }
  100% { background-position: 15% 20%, 80% 30%, 35% 65%, 70% 55%; }
}

/* Dust particles */
.rebuilt-dust {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.3;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='2' fill='%23d4b896'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'%3E%3Ccircle cx='3' cy='3' r='1.5' fill='%23c9a870'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23b8986a'/%3E%3C/svg%3E");
  background-size: 10px 10px, 8px 8px, 6px 6px;
  background-repeat: no-repeat;
  animation: dust-drift 15s ease-in-out infinite;
}

@keyframes dust-drift {
  0% { background-position: 20% 70%, 60% 80%, 85% 75%; }
  33% { background-position: 25% 65%, 55% 75%, 90% 70%; }
  66% { background-position: 18% 75%, 65% 85%, 80% 80%; }
  100% { background-position: 20% 70%, 60% 80%, 85% 75%; }
}

/* Make REBUILT decorations more prominent on mobile */
@media screen and (max-width: 768px) {
  .rebuilt-decoration-left,
  .rebuilt-decoration-right {
    width: 180px;
    height: 270px;
    opacity: 0.8;
  }
  
  .rebuilt-artifacts {
    opacity: 0.5;
  }
  
  .rebuilt-dust {
    opacity: 0.4;
  }
}

/* ============================================= */
/* DARK MODE OVERRIDES                           */
/* Additional dark mode specific styles          */
/* ============================================= */

body.theme-dark-mode .bg-white {
  background: #1e293b !important;
  color: #e2e8f0 !important; /* Softer white areas */
  border: 1px solid #475569 !important; /* Add subtle border */
}

body.theme-dark-mode input,
body.theme-dark-mode select,
body.theme-dark-mode textarea {
  background: #334155 !important;
  color: #e2e8f0 !important; /* Softer form text */
  border-color: #64748b !important; /* Brighter border */
}

body.theme-dark-mode input:focus,
body.theme-dark-mode select:focus,
body.theme-dark-mode textarea:focus {
  background: #475569 !important;
  border-color: #94a3b8 !important;
  color: #f1f5f9 !important; /* Bright only when focused */
}

body.theme-dark-mode input::placeholder {
  color: #94a3b8 !important; /* Keep placeholder bright for visibility */
}

body.theme-dark-mode .border-gray-200 {
  border-color: #475569 !important;
}

body.theme-dark-mode .text-gray-600 {
  color: #94a3b8 !important; /* Softer secondary text */
}

body.theme-dark-mode .text-gray-700 {
  color: #cbd5e1 !important; /* Moderate brightness */
}

body.theme-dark-mode .text-gray-800 {
  color: #e2e8f0 !important; /* Good contrast without being too bright */
}

body.theme-dark-mode .text-gray-900 {
  color: #f1f5f9 !important; /* Keep headings bright but not pure white */
}

body.theme-dark-mode .bg-gray-50 {
  background: #1e293b !important;
}

body.theme-dark-mode .bg-gray-100 {
  background: #334155 !important;
}

body.theme-dark-mode .hover\:bg-gray-50:hover {
  background: #334155 !important;
}

body.theme-dark-mode .hover\:bg-gray-100:hover {
  background: #475569 !important;
}

/* Dark Mode - Additional improvements */
body.theme-dark-mode button {
  color: #e2e8f0 !important; /* Softer button text */
  border-color: #64748b !important;
}

body.theme-dark-mode .card-button {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  color: #e2e8f0 !important; /* Softer card button text */
  border-color: #475569 !important;
}

/* Fix overly bright Active labels and status indicators */
body.theme-dark-mode .text-emerald-600,
body.theme-dark-mode .text-emerald-700,
body.theme-dark-mode .text-emerald-800 {
  color: #10b981 !important; /* More subdued emerald */
}

body.theme-dark-mode .text-green-600,
body.theme-dark-mode .text-green-700,
body.theme-dark-mode .text-green-800 {
  color: #059669 !important; /* More balanced green */
}

/* Fix bright sections in Blog Management and Member Stats */
body.theme-dark-mode .bg-emerald-50,
body.theme-dark-mode .bg-green-50 {
  background: #1e293b !important; /* Dark background instead of bright */
  color: #cbd5e1 !important; /* Readable text */
}

body.theme-dark-mode .bg-emerald-100,
body.theme-dark-mode .bg-green-100 {
  background: #334155 !important; /* Slightly lighter dark background */
  color: #cbd5e1 !important; /* Readable text */
}

/* Fix bright blue sections */
body.theme-dark-mode .bg-blue-50 {
  background: #1e293b !important; /* Dark background */
  color: #cbd5e1 !important; /* Readable text */
}

body.theme-dark-mode .bg-blue-100 {
  background: #334155 !important; /* Slightly lighter dark background */
  color: #cbd5e1 !important; /* Readable text */
}

/* Tone down bright text in headers and informational sections */
body.theme-dark-mode .text-blue-600,
body.theme-dark-mode .text-blue-700,
body.theme-dark-mode .text-blue-800 {
  color: #3b82f6 !important; /* More balanced blue */
}

/* Fix bright amber sections (like Student Notes instructions) */
body.theme-dark-mode .bg-amber-50 {
  background: #1e293b !important; /* Dark background */
  border-color: #475569 !important; /* Dark border */
}

body.theme-dark-mode .text-amber-800 {
  color: #fbbf24 !important; /* Softer amber text */
}

body.theme-dark-mode .text-amber-600 {
  color: #f59e0b !important; /* Balanced amber */
}

body.theme-dark-mode .border-amber-200 {
  border-color: #475569 !important; /* Dark border for amber sections */
}

/* Modal-specific Dark Mode fixes */
body.theme-dark-mode #modal-body .text-emerald-800,
body.theme-dark-mode #modal-body .text-green-800 {
  color: #10b981 !important; /* Readable green text in modals */
}

body.theme-dark-mode #modal-body .text-emerald-600,
body.theme-dark-mode #modal-body .text-green-600 {
  color: #34d399 !important; /* Slightly brighter for better readability */
}

body.theme-dark-mode #modal-body .text-emerald-700,
body.theme-dark-mode #modal-body .text-green-700 {
  color: #22c55e !important; /* Balanced green for modal text */
}

body.theme-dark-mode #modal-body .text-blue-800 {
  color: #3b82f6 !important; /* Readable blue text in modals */
}

body.theme-dark-mode #modal-body .text-blue-600 {
  color: #60a5fa !important; /* Slightly brighter blue */
}

body.theme-dark-mode #modal-body .text-blue-700 {
  color: #2563eb !important; /* Balanced blue for modal text */
}

body.theme-dark-mode #modal-body .text-amber-800 {
  color: #fbbf24 !important; /* Readable amber text in modals */
}

body.theme-dark-mode #modal-body .text-amber-600 {
  color: #f59e0b !important; /* Balanced amber */
}

/* === MODAL CONTENT THEMING FOR ALL THEMES === */

/* FRESH GREEN THEME - modal-content background */
body.theme-fresh-green #modal-content,
body:not([class*="theme-"]) #modal-content {
  background: #F3F4F6 !important;
  color: #14532d !important;
}

body.theme-fresh-green #modal-body,
body:not([class*="theme-"]) #modal-body {
  color: #166534 !important;
}

/* NARWHAL THEME - modal-content background */
body.theme-narwhal #modal-content {
  background: #eff6ff !important;
  color: #1e3a8a !important;
}

body.theme-narwhal #modal-body {
  color: #1e40af !important;
}

/* VECTOR THEME - modal-content background */
body.theme-vector #modal-content {
  background: #fff7ed !important;
  color: #9a3412 !important;
}

body.theme-vector #modal-body {
  color: #9a3412 !important;
}

/* REBUILT THEME - modal-content background */
body.theme-rebuilt #modal-content {
  background: #fffbeb !important;
  color: #78350f !important;
}

body.theme-rebuilt #modal-body {
  color: #92400e !important;
}

/* DARK MODE - modal-content background */
body.theme-dark-mode #modal-content {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid #64748b !important;
}

/* Ensure modal text content is readable */
body.theme-dark-mode #modal-body {
  color: #e2e8f0 !important; /* Default readable text for all modal content */
}

body.theme-dark-mode #modal-body p,
body.theme-dark-mode #modal-body span,
body.theme-dark-mode #modal-body div {
  color: #e2e8f0 !important; /* Ensure all text elements are readable */
}

body.theme-dark-mode #modal-body h1,
body.theme-dark-mode #modal-body h2,
body.theme-dark-mode #modal-body h3,
body.theme-dark-mode #modal-body h4 {
  color: #f1f5f9 !important; /* Slightly brighter for headings */
}

/* Override CSS variable-based backgrounds in Dark Mode */
body.theme-dark-mode #modal-body .bg-emerald-50,
body.theme-dark-mode #modal-body .bg-green-50 {
  background-color: #1e293b !important; /* Override the CSS variable with dark color */
}

body.theme-dark-mode #modal-body .bg-emerald-100,
body.theme-dark-mode #modal-body .bg-green-100 {
  background-color: #334155 !important; /* Override the CSS variable with dark color */
}

body.theme-dark-mode #modal-body .bg-blue-50 {
  background-color: #1e293b !important; /* Dark background for blue sections */
}

body.theme-dark-mode #modal-body .bg-blue-100 {
  background-color: #334155 !important; /* Slightly lighter dark background */
}

/* Fix gradient backgrounds in Dark Mode */
body.theme-dark-mode #modal-body .from-emerald-50,
body.theme-dark-mode #modal-body .from-green-50 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode #modal-body .from-emerald-100,
body.theme-dark-mode #modal-body .from-green-100 {
  --tw-gradient-from: #334155 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(51 65 85 / 0)) !important;
}

body.theme-dark-mode #modal-body .to-emerald-100,
body.theme-dark-mode #modal-body .to-green-100 {
  --tw-gradient-to: #334155 !important;
}

/* Catch-all for any remaining bright text elements */
body.theme-dark-mode .text-white {
  color: #e2e8f0 !important; /* Softer than pure white */
}

body.theme-dark-mode .text-gray-50 {
  color: #e2e8f0 !important; /* More readable than bright gray */
}

body.theme-dark-mode .text-gray-100 {
  color: #cbd5e1 !important; /* Balanced light text */
}

/* Fix any remaining bright backgrounds */
body.theme-dark-mode .bg-white {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

body.theme-dark-mode .bg-gray-50 {
  background: #1e293b !important;
}

body.theme-dark-mode .bg-gray-100 {
  background: #334155 !important;
}

/* Fix bright Active/Inactive status badges */
body.theme-dark-mode .bg-green-100 {
  background: #064e3b !important; /* Dark green background */
}

body.theme-dark-mode .bg-red-100 {
  background: #7f1d1d !important; /* Dark red background */
}

body.theme-dark-mode .text-green-800 {
  color: #34d399 !important; /* Readable green text */
}

body.theme-dark-mode .text-red-800 {
  color: #f87171 !important; /* Readable red text */
}

/* Fix bright yellow status indicators */
body.theme-dark-mode .bg-yellow-50 {
  background: #1e293b !important; /* Dark background instead of bright yellow */
}

body.theme-dark-mode .bg-yellow-100 {
  background: #451a03 !important; /* Dark amber background */
}

body.theme-dark-mode .text-yellow-800 {
  color: #fbbf24 !important; /* Readable yellow text */
}

body.theme-dark-mode .text-yellow-700 {
  color: #f59e0b !important; /* Readable amber text */
}

body.theme-dark-mode .border-yellow-200 {
  border-color: #475569 !important; /* Dark border for yellow sections */
}

/* === BLOG MANAGEMENT SEMANTIC BLOCKS === */
.blog-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.blog-stat-card {
  border-radius: 0.75rem;
  padding: 1rem;
  position: relative;
  isolation: isolate;
  display: flex;
  background: linear-gradient(135deg, var(--blog-stat-bg-from, #fafafa) 0%, var(--blog-stat-bg-to, #f5f5f5) 100%);
  border: 1px solid var(--blog-stat-border, #e5e7eb);
  box-shadow: 0 2px 4px -2px rgba(0,0,0,0.08), 0 4px 8px -2px rgba(0,0,0,0.04);
  transition: background .25s, border-color .25s;
}

.blog-stat-card__inner { display: flex; align-items: center; gap: 0.75rem; width: 100%; }
.blog-stat-card__icon-wrapper {
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--blog-stat-icon-bg, #6366f1);
  color: var(--blog-stat-icon-color, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 2px 4px -1px rgba(0,0,0,0.3);
}
.blog-stat-card__icon { width: 1.25rem; height: 1.25rem; }
.blog-stat-card__values { flex: 1; }
.blog-stat-card__label { font-size: .75rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; opacity: .9; }
.blog-stat-card__value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }

/* Theme variants (light themes retain subtle color identity) */
.blog-stat-card--total { --blog-stat-icon-bg: #9333ea; --blog-stat-bg-from:#faf5ff; --blog-stat-bg-to:#f3e8ff; --blog-stat-border:#e9d5ff; }
.blog-stat-card--published { --blog-stat-icon-bg:#0d9488; --blog-stat-bg-from:#f0fdfa; --blog-stat-bg-to:#ccfbf1; --blog-stat-border:#99f6e4; }
.blog-stat-card--drafts { --blog-stat-icon-bg:#f97316; --blog-stat-bg-from:#fff7ed; --blog-stat-bg-to:#ffedd5; --blog-stat-border:#fed7aa; }

/* Post list panel semantic wrapper */
.blog-posts-panel { border:1px solid var(--blog-panel-border,#d1fae5); background: var(--blog-panel-bg,#ffffff); border-radius:1.5rem; box-shadow:0 4px 12px -4px rgba(0,0,0,.18); overflow:hidden; }
.blog-posts-panel__header { padding:1rem 1.25rem; border-bottom:1px solid var(--blog-panel-border,#d1fae5); background: var(--blog-panel-header-bg,#f0fdf4); }
.blog-posts-panel__header h4 { font-weight:600; }

/* Dark mode adaptations */
body.theme-dark-mode .blog-stat-card { 
  --blog-stat-bg-from:#1e293b; 
  --blog-stat-bg-to:#0f172a;
  --blog-stat-border:#334155;
  background: linear-gradient(135deg,#1e293b 0%,#0f172a 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 4px 8px -4px rgba(0,0,0,.5);
}
body.theme-dark-mode .blog-stat-card__label { color:#94a3b8; }
body.theme-dark-mode .blog-stat-card__value { color:#f1f5f9; }
body.theme-dark-mode .blog-stat-card__icon-wrapper { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
body.theme-dark-mode .blog-stat-card--total { --blog-stat-icon-bg:#7c3aed; }
body.theme-dark-mode .blog-stat-card--published { --blog-stat-icon-bg:#0d9488; }
body.theme-dark-mode .blog-stat-card--drafts { --blog-stat-icon-bg:#f97316; }

body.theme-dark-mode .blog-posts-panel { 
  --blog-panel-border:#1e293b; 
  --blog-panel-bg:#0f172a; 
  background: linear-gradient(135deg,#0f172a 0%, #1e2533 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,0.03), 0 6px 14px -6px rgba(0,0,0,.6);
}
body.theme-dark-mode .blog-posts-panel__header { --blog-panel-header-bg:#1e293b; }
body.theme-dark-mode .blog-posts-panel__header h4 { color:#f1f5f9; }
body.theme-dark-mode .blog-posts-panel__header p { color:#94a3b8; }

/* Ensure empty state inherits dark background from panel while staying subtle */
body.theme-dark-mode #blog-post-empty.blog-empty-state { background: transparent !important; }

body.theme-dark-mode .hover\:bg-yellow-100:hover {
  background: #451a03 !important; /* Dark hover state for yellow */
}

/* Fix Member Statistics bright sections */
body.theme-dark-mode .from-amber-100 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .to-yellow-100 {
  --tw-gradient-to: #334155 !important;
}

body.theme-dark-mode .from-orange-100 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .to-amber-100 {
  --tw-gradient-to: #334155 !important;
}

body.theme-dark-mode .from-orange-50 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .to-amber-50 {
  --tw-gradient-to: #1e293b !important;
}

body.theme-dark-mode .border-amber-200,
body.theme-dark-mode .border-orange-200 {
  border-color: #475569 !important;
}

body.theme-dark-mode .text-amber-800,
body.theme-dark-mode .text-amber-700 {
  color: #fbbf24 !important; /* Readable amber text */
}

body.theme-dark-mode .text-orange-800,
body.theme-dark-mode .text-orange-600 {
  color: #fb923c !important; /* Readable orange text */
}

/* Fix Blog Management bright sections */
body.theme-dark-mode .from-purple-50 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .to-purple-100 {
  --tw-gradient-to: #334155 !important;
}

body.theme-dark-mode .from-teal-50 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .to-teal-100 {
  --tw-gradient-to: #334155 !important;
}

body.theme-dark-mode .border-purple-200,
body.theme-dark-mode .border-teal-200 {
  border-color: #475569 !important;
}

body.theme-dark-mode .text-purple-800,
body.theme-dark-mode .text-purple-900 {
  color: #c084fc !important; /* Readable purple text */
}

body.theme-dark-mode .text-teal-800,
body.theme-dark-mode .text-teal-900 {
  color: #5eead4 !important; /* Readable teal text */
}

body.theme-dark-mode .text-orange-900 {
  color: #fdba74 !important; /* Readable orange text for stats */
}

/* Fix Top Roles section (purple/violet gradients) */
body.theme-dark-mode .from-purple-100 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .to-violet-100 {
  --tw-gradient-to: #334155 !important;
}

body.theme-dark-mode .from-violet-50 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .to-violet-50 {
  --tw-gradient-to: #1e293b !important;
}

body.theme-dark-mode .text-purple-600,
body.theme-dark-mode .text-violet-600 {
  color: #c084fc !important; /* Readable purple/violet text */
}

/* Fix Historical Attendance section (rose/pink gradients) */
body.theme-dark-mode .from-rose-50 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .to-pink-50 {
  --tw-gradient-to: #1e293b !important;
}

body.theme-dark-mode .from-rose-100 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .to-pink-100 {
  --tw-gradient-to: #334155 !important;
}

body.theme-dark-mode .border-rose-200 {
  border-color: #475569 !important;
}

body.theme-dark-mode .text-rose-600,
body.theme-dark-mode .text-pink-600 {
  color: #f472b6 !important; /* Readable rose/pink text */
}

body.theme-dark-mode .text-teal-600 {
  color: #5eead4 !important; /* Readable teal text */
}

/* Additional gradient combinations */
body.theme-dark-mode .from-violet-100 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .to-violet-200 {
  --tw-gradient-to: #475569 !important;
}

body.theme-dark-mode .from-yellow-100 {
  --tw-gradient-from: #451a03 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(69 26 3 / 0)) !important;
}

body.theme-dark-mode .to-yellow-200 {
  --tw-gradient-to: #78350f !important;
}

body.theme-dark-mode .from-green-50 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .border-violet-200,
body.theme-dark-mode .border-violet-300 {
  border-color: #475569 !important;
}

body.theme-dark-mode .border-yellow-300 {
  border-color: #475569 !important;
}

/* Fix any remaining hover states for bright backgrounds */
body.theme-dark-mode .hover\:bg-blue-100:hover {
  background: #334155 !important;
}

/* Comprehensive text color fixes for all variants */
body.theme-dark-mode .text-violet-800,
body.theme-dark-mode .text-violet-700 {
  color: #c084fc !important;
}

body.theme-dark-mode .text-yellow-900 {
  color: #fbbf24 !important;
}

/* Fix Dynamic Placeholders section */
body.theme-dark-mode .bg-slate-100 {
  background: #334155 !important;
}

body.theme-dark-mode .text-slate-700 {
  color: #cbd5e1 !important;
}

body.theme-dark-mode .border-slate-300 {
  border-color: #475569 !important;
}

/* Fix Push Notifications Hub sections */
body.theme-dark-mode .bg-rose-100 {
  background: #450a0a !important; /* Dark rose background */
}

body.theme-dark-mode .text-rose-800 {
  color: #fb7185 !important; /* Readable rose text */
}

body.theme-dark-mode .border-rose-300 {
  border-color: #475569 !important;
}

body.theme-dark-mode .bg-purple-100 {
  background: #581c87 !important; /* Dark purple background */
}

body.theme-dark-mode .text-purple-800 {
  color: #c084fc !important; /* Readable purple text */
}

body.theme-dark-mode .border-purple-300 {
  border-color: #475569 !important;
}

/* Fix Drive Team Hub section */
body.theme-dark-mode .bg-cyan-100 {
  background: #164e63 !important; /* Dark cyan background */
}

body.theme-dark-mode .text-cyan-800 {
  color: #67e8f9 !important; /* Readable cyan text */
}

body.theme-dark-mode .border-cyan-300 {
  border-color: #475569 !important;
}

/* Fix Epic and Legendary badge sections */
body.theme-dark-mode .bg-purple-50 {
  background: #1e293b !important; /* Dark background for purple sections */
}

body.theme-dark-mode .bg-purple-100 {
  background: #581c87 !important; /* Dark purple background */
}

body.theme-dark-mode .border-purple-200 {
  border-color: #475569 !important;
}

body.theme-dark-mode .text-purple-800 {
  color: #e9d5ff !important; /* Readable purple text */
}

/* Fix rose/pink sections (Deploy Token modal "Admin Panel" checkbox) */
body.theme-dark-mode .bg-rose-50 {
  background: #450a0a !important; /* Dark rose background */
}

body.theme-dark-mode .bg-rose-100 {
  background: #7f1d1d !important; /* Slightly lighter dark rose */
}

body.theme-dark-mode .border-rose-200 {
  border-color: #7f1d1d !important; /* Dark rose border */
}

body.theme-dark-mode .text-rose-800 {
  color: #fda4af !important; /* Readable rose text */
}

/* Fix cyan sections (Debug Mode "Admin Panel Only" checkbox) */
body.theme-dark-mode .bg-cyan-50 {
  background: #164e63 !important; /* Dark cyan background */
}

body.theme-dark-mode .bg-cyan-100 {
  background: #0e7490 !important; /* Slightly lighter dark cyan */
}

body.theme-dark-mode .border-cyan-200 {
  border-color: #0e7490 !important; /* Dark cyan border */
}

body.theme-dark-mode .text-cyan-800 {
  color: #67e8f9 !important; /* Readable cyan text */
}

/* Hover states for colored sections */
body.theme-dark-mode .hover\:bg-purple-100:hover {
  background: #6b21a8 !important; /* Lighter dark purple on hover */
}

body.theme-dark-mode .hover\:bg-rose-100:hover {
  background: #991b1b !important; /* Lighter dark rose on hover */
}

body.theme-dark-mode .hover\:bg-cyan-100:hover {
  background: #0891b2 !important; /* Lighter dark cyan on hover */
}

body.theme-dark-mode .ring-purple-300 {
  --tw-ring-color: #a855f7 !important; /* Readable purple ring */
}

body.theme-dark-mode .ring-yellow-400 {
  --tw-ring-color: #facc15 !important; /* Readable yellow ring */
}

/* Fix confirm/delete screens */
body.theme-dark-mode .bg-red-50 {
  background: #450a0a !important; /* Dark red background */
}

body.theme-dark-mode .border-red-200 {
  border-color: #7f1d1d !important; /* Dark red border */
}

body.theme-dark-mode .hover\:bg-red-100:hover {
  background: #7f1d1d !important; /* Dark red hover */
}

body.theme-dark-mode .ring-red-300 {
  --tw-ring-color: #dc2626 !important; /* Readable red ring */
}

body.theme-dark-mode .text-red-900 {
  color: #f87171 !important; /* Readable red text */
}

/* Fix functional parameter badge sections */
body.theme-dark-mode .bg-indigo-50 {
  background: #1e1b4b !important; /* Dark indigo background */
}

body.theme-dark-mode .border-indigo-200 {
  border-color: #475569 !important;
}

body.theme-dark-mode .bg-pink-50 {
  background: #500724 !important; /* Dark pink background */
}

body.theme-dark-mode .border-pink-200 {
  border-color: #475569 !important;
}

body.theme-dark-mode .bg-gray-50 {
  background: #1e293b !important; /* Already defined but ensuring consistency */
}

body.theme-dark-mode .border-gray-200 {
  border-color: #475569 !important; /* Already defined but ensuring consistency */
}

/* Fix any remaining bright backgrounds for parameters */
body.theme-dark-mode .bg-emerald-50 {
  background: #1e293b !important; /* Already defined but ensuring consistency */
}

body.theme-dark-mode .border-emerald-200 {
  border-color: #475569 !important; /* Already defined but ensuring consistency */
}

/* Additional color variants that might appear */
body.theme-dark-mode .text-indigo-800,
body.theme-dark-mode .text-indigo-700 {
  color: #818cf8 !important; /* Readable indigo text */
}

body.theme-dark-mode .text-pink-800,
body.theme-dark-mode .text-pink-700 {
  color: #f472b6 !important; /* Readable pink text */
}

body.theme-dark-mode .text-gray-600 {
  color: #94a3b8 !important; /* Already defined but ensuring consistency */
}

body.theme-dark-mode .text-gray-900 {
  color: #f1f5f9 !important; /* Already defined but ensuring consistency */
}

/* Fix additional bright gradients that might appear */
body.theme-dark-mode .from-indigo-50 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .to-indigo-100 {
  --tw-gradient-to: #334155 !important;
}

body.theme-dark-mode .from-pink-50 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .to-pink-100 {
  --tw-gradient-to: #334155 !important;
}

body.theme-dark-mode .from-cyan-50 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .to-cyan-100 {
  --tw-gradient-to: #334155 !important;
}

/* Ensure all badge ring colors are readable */
body.theme-dark-mode .ring-indigo-300 {
  --tw-ring-color: #6366f1 !important;
}

body.theme-dark-mode .ring-pink-300 {
  --tw-ring-color: #ec4899 !important;
}

body.theme-dark-mode .ring-cyan-300 {
  --tw-ring-color: #06b6d4 !important;
}

body.theme-dark-mode .ring-emerald-300 {
  --tw-ring-color: #10b981 !important;
}

/* Fix any remaining text color variants */
body.theme-dark-mode .text-emerald-600 {
  color: #10b981 !important; /* Already defined but ensuring modal consistency */
}

body.theme-dark-mode .text-cyan-600 {
  color: #0891b2 !important; /* Readable cyan text */
}

/* Fix Blog Management "No posts found" section */
body.theme-dark-mode .text-emerald-800 {
  color: #10b981 !important; /* Already defined but ensuring consistency */
}

body.theme-dark-mode .text-emerald-600 {
  color: #34d399 !important; /* Already defined but ensuring consistency */
}

/* Fix Alumni parameter (teal color) */
body.theme-dark-mode .bg-teal-50 {
  background: #134e4a !important; /* Dark teal background */
}

body.theme-dark-mode .border-teal-200 {
  border-color: #475569 !important; /* Dark border for teal sections */
}

body.theme-dark-mode .text-teal-800,
body.theme-dark-mode .text-teal-700 {
  color: #5eead4 !important; /* Already defined but ensuring consistency */
}

/* Fix remaining badge sections and parameter chips */
body.theme-dark-mode .from-teal-50 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .to-teal-50 {
  --tw-gradient-to: #1e293b !important;
}

/* Fix confirm modal Dark Mode styling */
body.theme-dark-mode #confirm-modal .bg-white {
  /* Legacy confirm modal surface (before semantic refactor) */
  background: linear-gradient(145deg,#101a27 0%, #182434 55%, #1d2d41 100%) !important;
  color: #e2e8f0 !important;
}
/* Extra specificity: ensure container itself never shows light (mint) background in dark mode */
body.theme-dark-mode #confirm-modal .confirm-modal-container.theme-modal { 
  background: linear-gradient(145deg,#0f172a 0%, #162231 55%, #1c2a3b 100%) !important;
  border:1px solid rgba(100,116,139,0.28) !important;
}
/* Explicit class hook added by JS for redundancy */
body.theme-dark-mode #confirm-modal .confirm-modal-container.confirm-modal-dark { 
  background: linear-gradient(145deg,#0f172a 0%, #162231 55%, #1c2a3b 100%) !important;
  border:1px solid rgba(100,116,139,0.32) !important;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.65), 0 22px 48px -14px rgba(0,0,0,0.7) !important;
}

body.theme-dark-mode #confirm-title {
  color: #f1f5f9 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

body.theme-dark-mode #confirm-message {
  color: #94a3b8 !important;
}

/* Fix admin manager confirm dialog Dark Mode styling */
body.theme-dark-mode #modal-body .text-gray-800 {
  color: #f1f5f9 !important;
}

body.theme-dark-mode #modal-body .text-gray-600 {
  color: #cbd5e1 !important;
}

body.theme-dark-mode #modal-body .bg-gray-200 {
  background: #475569 !important;
}

body.theme-dark-mode #modal-body .text-gray-800 {
  color: #e2e8f0 !important;
}

body.theme-dark-mode #modal-body .hover\:bg-gray-300:hover {
  background: #64748b !important;
}

/* Fix remaining Membership Overview section gradients */
body.theme-dark-mode .from-amber-100.to-yellow-100 {
  background: linear-gradient(to right, #1e293b, #334155) !important;
}

/* Fix Historical Attendance header section */
body.theme-dark-mode .text-teal-600 {
  color: #5eead4 !important; /* Already defined but ensuring consistency */
}

/* Comprehensive modal override for all potential bright sections */
body.theme-dark-mode .modal .bg-white,
body.theme-dark-mode #modal .bg-white,
body.theme-dark-mode #modal-body .bg-white {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

/* Additional safety net for any missed bright gradients in modals */
body.theme-dark-mode #modal-body .from-amber-100,
body.theme-dark-mode #modal-body .from-yellow-100,
body.theme-dark-mode #modal-body .from-teal-100 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode #modal-body .to-amber-100,
body.theme-dark-mode #modal-body .to-yellow-100,
body.theme-dark-mode #modal-body .to-teal-100 {
  --tw-gradient-to: #334155 !important;
}

/* Fix any remaining bright text in statistical sections */
body.theme-dark-mode .text-amber-600 {
  color: #fbbf24 !important; /* Already defined but ensuring consistency */
}

body.theme-dark-mode .text-amber-700 {
  color: #f59e0b !important; /* Already defined but ensuring consistency */
}

/* Universal button hover and focus states */
.theme-modal .btn-secondary:focus,
.theme-modal .btn-danger:focus {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}

.theme-modal .btn-danger:hover {
  background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
}

/* Confirm modal container overrides to avoid default bg-white in index.html */
.confirm-modal-container { border-radius: 0.75rem; overflow: hidden; box-shadow: 0 20px 45px rgba(0,0,0,0.25); }
.confirm-modal-inner { border-radius: 0.75rem; }

/* Unified Confirm Modal Shell (index.html) */
/* Dynamic Confirm component (injected via JS) */
.confirm-host { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 10020; background: rgba(0,0,0,0.5); }
.confirm-host.is-open { display: flex; }
.confirm-backdrop { position:absolute; inset:0; background: rgba(15,23,42,0.45); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
.confirm-shell { position: relative; max-width: 32rem; width: calc(100% - 2.5rem); border-radius: 22px; overflow: hidden; border:1px solid rgba(148,163,184,0.35); box-shadow: 0 24px 60px -24px rgba(15,23,42,0.65), 0 18px 40px -20px rgba(15,23,42,0.55); }
.confirm-host.is-open .confirm-shell { animation: confirm-pop 220ms cubic-bezier(.22,.75,.32,1.1); }
.confirm-surface { position: relative; padding: 2.25rem 2.35rem 2rem; border-radius: inherit; background: linear-gradient(160deg,#ffffff 0%,#f8fafc 45%,#ecf0f8 100%); }
.confirm-surface::before { content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(148,163,184,0.28); pointer-events:none; }
.confirm-title { font-size: 1.35rem; font-weight: 800; margin-bottom: 0.65rem; letter-spacing: .15px; text-align:center; }
.confirm-message { margin-bottom: 1.5rem; color:#1e293b; line-height: 1.55; white-space: pre-line; text-align:center; }
.confirm-message strong { color:#0f172a; }
.confirm-actions { display:flex; justify-content:center; gap: .85rem; flex-wrap:wrap; }
.confirm-btn { padding: .65rem 1.25rem; border-radius: .75rem; font-weight: 650; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.confirm-btn:focus-visible { outline: 3px solid rgba(14,165,233,0.6); outline-offset: 3px; }
.confirm-btn:hover { transform: translateY(-1px); }
.confirm-btn--cancel { border:1px solid; background: linear-gradient(135deg,#f8fafc,#e2e8f0); color:#334155; box-shadow: 0 8px 18px -14px rgba(51,65,85,0.55); }
.confirm-btn--danger { border:1px solid; box-shadow: 0 12px 24px -14px rgba(220,38,38,0.55); }
.confirm-btn--primary { border:1px solid; box-shadow: 0 12px 24px -16px rgba(5,150,105,0.55); }
.confirm-icon-outer { display:flex; align-items:center; justify-content:center; margin-bottom: 1.35rem; }
.confirm-icon-stack { display:flex; align-items:center; justify-content:center; width:4rem; height:4rem; border-radius: 1.25rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 16px 32px -18px rgba(15,23,42,0.45); }
.confirm-icon-stack span { font-size: 1.9rem; line-height: 1; }
.confirm-icon-stack--danger { background: radial-gradient(circle at 30% 20%, rgba(254,215,170,0.9), rgba(248,113,113,0.9)); border:1px solid rgba(220,38,38,0.55); }
.confirm-icon-stack--info { background: radial-gradient(circle at 30% 20%, var(--brand-100, rgba(191,219,254,0.95)), var(--brand-500, rgba(59,130,246,0.85))); border:1px solid var(--accent, rgba(59,130,246,0.55)); }
.confirm-icon-stack--success { background: radial-gradient(circle at 30% 20%, rgba(187,247,208,0.95), rgba(52,211,153,0.85)); border:1px solid rgba(16,185,129,0.55); }
.confirm-icon-stack svg { width: 2.2rem; height: 2.2rem; }
body.theme-dark-mode .confirm-icon-stack--danger { background: radial-gradient(circle at 30% 20%, rgba(248,113,113,0.35), rgba(136,19,55,0.65)); border-color: rgba(248,113,113,0.55); }
body.theme-dark-mode .confirm-icon-stack--info { background: radial-gradient(circle at 30% 20%, rgba(96,165,250,0.25), rgba(30,58,138,0.65)); border-color: rgba(96,165,250,0.55); }
body.theme-dark-mode .confirm-icon-stack--success { background: radial-gradient(circle at 30% 20%, rgba(52,211,153,0.35), rgba(5,150,105,0.65)); border-color: rgba(52,211,153,0.55); }
/* Theme-aware info icon colors */
body.theme-fresh-green .confirm-icon-stack--info { background: radial-gradient(circle at 30% 20%, rgba(187,247,208,0.95), rgba(22,163,74,0.85)); border-color: rgba(22,163,74,0.55); }
body.theme-narwhal .confirm-icon-stack--info { background: radial-gradient(circle at 30% 20%, rgba(191,219,254,0.95), rgba(59,130,246,0.85)); border-color: rgba(59,130,246,0.55); }
body.theme-vector .confirm-icon-stack--info { background: radial-gradient(circle at 30% 20%, rgba(254,215,170,0.95), rgba(234,88,12,0.85)); border-color: rgba(234,88,12,0.55); }
body.theme-rebuilt .confirm-icon-stack--info { background: radial-gradient(circle at 30% 20%, rgba(254,243,199,0.95), rgba(217,119,6,0.85)); border-color: rgba(217,119,6,0.55); }
.confirm-shell .confirm-subtle-divider { height: 1px; width: 100%; background: linear-gradient(90deg,rgba(148,163,184,0),rgba(148,163,184,0.45),rgba(148,163,184,0)); margin: 1.25rem 0 1.5rem; }

/* Light theme tokens (default) */
body:not(.theme-dark-mode) .confirm-shell { border-color: rgba(148,163,184,0.35); }
body:not(.theme-dark-mode) .confirm-title { color:#0f172a; }
body:not(.theme-dark-mode) .confirm-btn--cancel { border-color:#cbd5f5; }
body:not(.theme-dark-mode) .confirm-btn--primary { background: linear-gradient(135deg,#10b981,#059669); color:#fff; border-color:#047857; }
body:not(.theme-dark-mode) .confirm-btn--primary:hover { filter: brightness(1.05); box-shadow: 0 16px 28px -22px rgba(16,185,129,0.65); }
body:not(.theme-dark-mode) .confirm-btn--danger { background: linear-gradient(125deg,#b91c1c,#ef4444 85%); color:#fff; border-color:#991b1b; }
body:not(.theme-dark-mode) .confirm-btn--danger:hover { filter: brightness(1.08); box-shadow: 0 18px 32px -20px rgba(248,113,113,0.55); }

/* Dark tokens */
body.theme-dark-mode .confirm-backdrop { background: rgba(2,6,23,0.7); }
body.theme-dark-mode .confirm-shell { background: linear-gradient(155deg,rgba(6,12,24,0.92) 0%,rgba(11,24,41,0.94) 55%,rgba(19,41,63,0.98) 100%); border-color: rgba(30,58,87,0.7); box-shadow: 0 0 0 1px rgba(15,23,42,0.9),0 24px 48px -20px rgba(3,7,18,0.85); }
body.theme-dark-mode .confirm-surface { background: linear-gradient(165deg,rgba(15,23,42,0.92) 0%,rgba(30,41,59,0.95) 60%,rgba(33,42,60,0.98) 100%); }
body.theme-dark-mode .confirm-title { color:#f8fafc; text-shadow:0 2px 6px rgba(2,6,23,.55); }
body.theme-dark-mode .confirm-message { color:#cbd5f5; }
body.theme-dark-mode .confirm-btn--cancel { background: linear-gradient(135deg,#1e293b,#273549); color:#e2e8f0; border-color:#3a4b5f; box-shadow: 0 12px 24px -18px rgba(15,23,42,0.65); }
body.theme-dark-mode .confirm-btn--cancel:hover { filter: brightness(1.05); box-shadow: 0 16px 28px -18px rgba(15,23,42,0.7); }
body.theme-dark-mode .confirm-btn--primary { background: linear-gradient(135deg,#0ea5e9,#0284c7); color:#e8f9ff; border-color:#0369a1; box-shadow: 0 0 0 1px rgba(14,165,233,0.4), 0 18px 32px -18px rgba(14,165,233,0.55); }
body.theme-dark-mode .confirm-btn--primary:hover { box-shadow: 0 0 0 1px rgba(14,165,233,0.6),0 22px 36px -18px rgba(2,132,199,0.6); }
body.theme-dark-mode .confirm-btn--danger { background: linear-gradient(125deg,#881337,#b91c1c 80%); color:#fff; border-color:#e11d48; box-shadow: 0 0 0 1px rgba(248,113,113,0.3),0 20px 40px -20px rgba(248,113,113,0.6); }
body.theme-dark-mode .confirm-btn--danger:hover { box-shadow: 0 0 0 1px rgba(248,113,113,0.55),0 28px 44px -22px rgba(248,113,113,0.6); }

/* Theme accents (fresh-green, narwhal, vector) influence cancel border + title tint slightly */
body.theme-fresh-green .confirm-title { color:#14532d; }
body.theme-fresh-green .confirm-btn--cancel { border-color:rgba(34,197,94,0.45); }
body.theme-fresh-green .confirm-btn--primary { background: linear-gradient(135deg,#22c55e,#16a34a); border-color:#15803d; }
body.theme-fresh-green .confirm-surface { background: linear-gradient(160deg,#f0fdf4 0%,#dcfce7 45%,#bbf7d0 100%); }

body.theme-narwhal .confirm-title { color:#1e3a8a; }
body.theme-narwhal .confirm-btn--cancel { border-color:rgba(37,99,235,0.45); }
body.theme-narwhal .confirm-btn--primary { background: linear-gradient(135deg,#3b82f6,#2563eb); border-color:#1d4ed8; }
body.theme-narwhal .confirm-surface { background: linear-gradient(160deg,#eff6ff 0%,#dbeafe 45%,#bfdbfe 100%); }

body.theme-vector .confirm-title { color:#9a3412; }
body.theme-vector .confirm-btn--cancel { border-color:rgba(234,88,12,0.45); }
body.theme-vector .confirm-btn--primary { background: linear-gradient(135deg,#f97316,#ea580c); border-color:#c2410c; }
body.theme-vector .confirm-surface { background: linear-gradient(160deg,#fff7ed 0%,#ffedd5 45%,#fed7aa 100%); }

body.theme-rebuilt .confirm-title { color:#78350f; }
body.theme-rebuilt .confirm-btn--cancel { border-color:rgba(217,119,6,0.45); }
body.theme-rebuilt .confirm-btn--primary { background: linear-gradient(135deg,#d97706,#b45309); border-color:#92400e; }
body.theme-rebuilt .confirm-surface { background: linear-gradient(160deg,#fffbeb 0%,#fef3c7 45%,#fde68a 100%); }

@keyframes confirm-pop {
  0% { transform: translateY(18px) scale(0.94); opacity: 0; }
  60% { transform: translateY(-4px) scale(1.01); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Primary (non-danger) confirm button styling across themes */
body.theme-fresh-green .confirm-primary-btn,
body:not([class*="theme-"]) .confirm-primary-btn { background: linear-gradient(135deg,#10b981,#059669) !important; color:#fff !important; border:1px solid #059669 !important; }
body.theme-fresh-green .confirm-primary-btn:hover,
body:not([class*="theme-"]) .confirm-primary-btn:hover { background: linear-gradient(135deg,#059669,#047857) !important; }

body.theme-narwhal .confirm-primary-btn { background: linear-gradient(135deg,#3b82f6,#2563eb) !important; color:#fff !important; border:1px solid #2563eb !important; }
body.theme-narwhal .confirm-primary-btn:hover { background: linear-gradient(135deg,#2563eb,#1d4ed8) !important; }

body.theme-vector .confirm-primary-btn { background: linear-gradient(135deg,#f97316,#ea580c) !important; color:#fff !important; border:1px solid #ea580c !important; }
body.theme-vector .confirm-primary-btn:hover { background: linear-gradient(135deg,#ea580c,#c2410c) !important; }

body.theme-rebuilt .confirm-primary-btn { background: linear-gradient(135deg,#d97706,#b45309) !important; color:#fff !important; border:1px solid #b45309 !important; }
body.theme-rebuilt .confirm-primary-btn:hover { background: linear-gradient(135deg,#b45309,#92400e) !important; }

body.theme-dark-mode .confirm-primary-btn { background: linear-gradient(135deg,#334155,#475569) !important; color:#f1f5f9 !important; border:1px solid #64748b !important; }
body.theme-dark-mode .confirm-primary-btn:hover { background: linear-gradient(135deg,#475569,#64748b) !important; }

/* ============================================= */
/* TOAST NOTIFICATIONS                           */
/* Semantic colors + theme-aware styling         */
/* ============================================= */

.toast {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 10020;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-radius: 1rem;
  min-width: 280px;
  max-width: 420px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%) scale(0.95);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 10px 20px -5px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.toast.opacity-100 {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  flex-shrink: 0;
}

.toast-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.toast-message {
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.35;
  flex: 1;
}

/* Success Toast - Green semantic color */
.toast-success {
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.95), rgba(220, 252, 231, 0.9));
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #166534;
}

.toast-icon-success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  box-shadow: 0 4px 12px -4px rgba(34, 197, 94, 0.5);
}

/* Fail Toast - Red semantic color */
.toast-fail {
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(254, 226, 226, 0.9));
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #991b1b;
}

.toast-icon-fail {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  box-shadow: 0 4px 12px -4px rgba(239, 68, 68, 0.5);
}

/* Theme-aware toast accents - adds subtle theme tint to the glow */
body.theme-fresh-green .toast { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(16, 185, 129, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; }
body.theme-narwhal .toast { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(59, 130, 246, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; }
body.theme-vector .toast { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(249, 115, 22, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; }
body.theme-rebuilt .toast { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(217, 119, 6, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; }

/* Dark Mode Toasts */
body.theme-dark-mode .toast-success {
  background: linear-gradient(135deg, rgba(20, 83, 45, 0.9), rgba(22, 101, 52, 0.85));
  border-color: rgba(34, 197, 94, 0.4);
  color: #bbf7d0;
}

body.theme-dark-mode .toast-fail {
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.9), rgba(153, 27, 27, 0.85));
  border-color: rgba(248, 113, 113, 0.4);
  color: #fecaca;
}

body.theme-dark-mode .toast {
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 10px 20px -5px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Mobile adjustments */
@media screen and (max-width: 640px) {
  .toast {
    top: 1rem;
    bottom: auto;
    right: 1rem;
    left: 1rem;
    max-width: none;
    min-width: auto;
    transform: translateY(-100%) scale(0.95);
  }
  
  .toast.opacity-100 {
    transform: translateY(0) scale(1);
  }
}

/* Dark mode confirm dialog (admin-manager showConfirmDialog) surface tweak */
body.theme-dark-mode .confirm-dialog-content {
  background: transparent !important; /* Inner content transparent; shell draws the surface */
}
body.theme-dark-mode .confirm-dialog-shell {
  background: linear-gradient(145deg,#0f172a 0%, #162231 55%, #1c2a3b 100%) !important;
  border: 1px solid rgba(100,116,139,0.28) !important;
  border-radius: 0.9rem !important;
  padding: 2.25rem 2rem !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 6px 14px -6px rgba(0,0,0,0.65),
    0 18px 42px -12px rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}
body.theme-dark-mode .confirm-dialog-actions { margin-top: .25rem; }
body.theme-dark-mode .confirm-dialog-shell .confirm-title { color:#f1f5f9 !important; }
body.theme-dark-mode .confirm-dialog-shell .confirm-message { color:#94a3b8 !important; }
}

/* Tone the generic legacy #confirm-modal inner if still present */
body.theme-dark-mode #confirm-modal .confirm-modal-inner,
body.theme-dark-mode #confirm-modal .bg-white.confirm-modal-inner {
  background: linear-gradient(145deg,#101a27 0%, #182434 55%, #1d2d41 100%) !important;
  border:1px solid rgba(100,116,139,0.25) !important;
  box-shadow:
    0 4px 10px -4px rgba(0,0,0,0.7),
    0 16px 38px -8px rgba(0,0,0,0.72) !important;
}

/* Subtle divider + heading clarity */
body.theme-dark-mode .confirm-title { text-shadow: 0 1px 1px rgba(0,0,0,0.4); }
body.theme-dark-mode .confirm-message { color:#94a3b8 !important; }

/* Buttons restyling for better depth */
body.theme-dark-mode .confirm-cancel-btn {
  background: linear-gradient(135deg,#1e293b,#273549) !important;
  color:#e2e8f0 !important;
  border:1px solid #3a4b5f !important;
  box-shadow: 0 2px 4px -2px rgba(0,0,0,0.6), 0 4px 10px -4px rgba(0,0,0,0.55) !important;
}
body.theme-dark-mode .confirm-cancel-btn:hover {
  background: linear-gradient(135deg,#273549,#33465c) !important;
  border-color:#4a5f75 !important;
}
body.theme-dark-mode .confirm-danger-btn {
  background: linear-gradient(135deg,#7f1d1d,#991b1b) !important;
  border:1px solid #dc2626 !important;
  color:#f8fafc !important;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.55), 0 6px 18px -6px rgba(220,38,38,0.35) !important;
}
body.theme-dark-mode .confirm-danger-btn:hover { background: linear-gradient(135deg,#991b1b,#b91c1c) !important; }

/* Accessibility focus states */
#confirm-modal button:focus-visible { outline:3px solid #0ea5e9; outline-offset:2px; }
body.theme-dark-mode #confirm-modal button:focus-visible { outline:3px solid #38bdf8; }

/* Input dialog textarea theming */
body.theme-dark-mode .input-dialog-textarea { background:#1e293b !important; color:#e2e8f0 !important; border-color:#334155 !important; }
body.theme-dark-mode .input-dialog-textarea::placeholder { color:#64748b !important; }
body.theme-narwhal .input-dialog-textarea { background:#eff6ff !important; border-color:#bfdbfe !important; }
body.theme-vector .input-dialog-textarea { background:#fff7ed !important; border-color:#fdba74 !important; }
body.theme-fresh-green .input-dialog-textarea,
body:not([class*="theme-"]) .input-dialog-textarea { background:#f0fdf4 !important; border-color:#bbf7d0 !important; }


/* === CONFIRM DIALOG CONTENT THEMING (admin-manager.js showConfirmDialog) === */

/* FRESH GREEN THEME */
body.theme-fresh-green .confirm-dialog-content,
body:not([class*="theme-"]) .confirm-dialog-content {
  background: transparent !important;
}

body.theme-fresh-green .confirm-title,
body:not([class*="theme-"]) .confirm-title {
  color: #15803d !important;
}

body.theme-fresh-green .confirm-message,
body:not([class*="theme-"]) .confirm-message {
  color: #166534 !important;
}

body.theme-fresh-green .confirm-cancel-btn,
body:not([class*="theme-"]) .confirm-cancel-btn {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
  color: #14532d !important;
  border: 1px solid #22c55e !important;
}

body.theme-fresh-green .confirm-cancel-btn:hover,
body:not([class*="theme-"]) .confirm-cancel-btn:hover {
  background: linear-gradient(135deg, #a7f3d0, #6ee7b7) !important;
}

body.theme-fresh-green .confirm-danger-btn,
body:not([class*="theme-"]) .confirm-danger-btn {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #ffffff !important;
  border: 1px solid #dc2626 !important;
}

body.theme-fresh-green .confirm-danger-btn:hover,
body:not([class*="theme-"]) .confirm-danger-btn:hover {
  background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
}

/* NARWHAL THEME */
body.theme-narwhal .confirm-title {
  color: #1d4ed8 !important;
}

body.theme-narwhal .confirm-message {
  color: #1e40af !important;
}

body.theme-narwhal .confirm-cancel-btn {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
  color: #1e3a8a !important;
  border: 1px solid #3b82f6 !important;
}

body.theme-narwhal .confirm-cancel-btn:hover {
  background: linear-gradient(135deg, #bfdbfe, #93c5fd) !important;
}

body.theme-narwhal .confirm-danger-btn {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #ffffff !important;
  border: 1px solid #dc2626 !important;
}

body.theme-narwhal .confirm-danger-btn:hover {
  background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
}

/* VECTOR THEME */
body.theme-vector .confirm-title {
  color: #c2410c !important;
}

body.theme-vector .confirm-message {
  color: #9a3412 !important;
}

body.theme-vector .confirm-cancel-btn {
  background: linear-gradient(135deg, #fed7aa, #fdba74) !important;
  color: #9a3412 !important;
  border: 1px solid #ea580c !important;
}

body.theme-vector .confirm-cancel-btn:hover {
  background: linear-gradient(135deg, #fdba74, #fb923c) !important;
}

body.theme-vector .confirm-danger-btn {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #ffffff !important;
  border: 1px solid #dc2626 !important;
}

body.theme-vector .confirm-danger-btn:hover {
  background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
}

/* REBUILT THEME */
body.theme-rebuilt .confirm-title {
  color: #92400e !important;
}

body.theme-rebuilt .confirm-message {
  color: #78350f !important;
}

body.theme-rebuilt .confirm-cancel-btn {
  background: linear-gradient(135deg, #fde68a, #fcd34d) !important;
  color: #78350f !important;
  border: 1px solid #d97706 !important;
}

body.theme-rebuilt .confirm-cancel-btn:hover {
  background: linear-gradient(135deg, #fcd34d, #fbbf24) !important;
}

body.theme-rebuilt .confirm-danger-btn {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #ffffff !important;
  border: 1px solid #dc2626 !important;
}

body.theme-rebuilt .confirm-danger-btn:hover {
  background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
}

/* === UPDATE NOTIFICATION MODAL THEMING === */

/* Update modal title and text theming */
.update-modal-title {
  color: #15803d !important; /* Default FRESH Green */
}

.update-modal-text {
  color: #166534 !important; /* Default FRESH Green */
}

/* Update icon wrapper (rocket) */
.update-icon-wrapper {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

/* Update primary button (Yes :D) */
.update-btn-primary {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: 1px solid #059669 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.update-btn-primary:hover {
  background: linear-gradient(135deg, #059669, #047857) !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
}

/* FRESH GREEN THEME */
body.theme-fresh-green .update-icon-wrapper,
body:not([class*="theme-"]) .update-icon-wrapper {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

body.theme-fresh-green .update-modal-title,
body:not([class*="theme-"]) .update-modal-title {
  color: #15803d !important;
}

body.theme-fresh-green .update-modal-text,
body:not([class*="theme-"]) .update-modal-text {
  color: #166534 !important;
}

body.theme-fresh-green .update-btn-primary,
body:not([class*="theme-"]) .update-btn-primary {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: 1px solid #059669 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

body.theme-fresh-green .update-btn-primary:hover,
body:not([class*="theme-"]) .update-btn-primary:hover {
  background: linear-gradient(135deg, #059669, #047857) !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
}

/* NARWHAL THEME */
body.theme-narwhal .update-icon-wrapper {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

body.theme-narwhal .update-modal-title {
  color: #1d4ed8 !important;
}

body.theme-narwhal .update-modal-text {
  color: #1e40af !important;
}

body.theme-narwhal .update-btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  color: #ffffff !important;
  border: 1px solid #2563eb !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

body.theme-narwhal .update-btn-primary:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4) !important;
}

/* VECTOR THEME */
body.theme-vector .update-icon-wrapper {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4) !important;
}

body.theme-vector .update-modal-title {
  color: #c2410c !important;
}

body.theme-vector .update-modal-text {
  color: #9a3412 !important;
}

body.theme-vector .update-btn-primary {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #ffffff !important;
  border: 1px solid #ea580c !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3) !important;
}

body.theme-vector .update-btn-primary:hover {
  background: linear-gradient(135deg, #ea580c, #c2410c) !important;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.4) !important;
}

/* REBUILT THEME */
body.theme-rebuilt .update-icon-wrapper {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4) !important;
}

body.theme-rebuilt .update-modal-title {
  color: #92400e !important;
}

body.theme-rebuilt .update-modal-text {
  color: #78350f !important;
}

body.theme-rebuilt .update-btn-primary {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  color: #ffffff !important;
  border: 1px solid #b45309 !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3) !important;
}

body.theme-rebuilt .update-btn-primary:hover {
  background: linear-gradient(135deg, #b45309, #92400e) !important;
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.4) !important;
}

/* DARK MODE THEME */
body.theme-dark-mode .update-icon-wrapper {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.5), 0 0 20px rgba(14, 165, 233, 0.2) !important;
}

body.theme-dark-mode .update-modal-title {
  color: #f1f5f9 !important;
}

body.theme-dark-mode .update-modal-text {
  color: #cbd5e1 !important;
}

body.theme-dark-mode .update-btn-primary {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #e8f9ff !important;
  border: 1px solid #0369a1 !important;
  box-shadow: 0 0 0 1px rgba(14,165,233,0.4), 0 4px 12px rgba(14,165,233,0.4) !important;
}

body.theme-dark-mode .update-btn-primary:hover {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  box-shadow: 0 0 0 1px rgba(14,165,233,0.6), 0 6px 16px rgba(14,165,233,0.5) !important;
}

/* === THEME-AWARE MEMBERSHIP OVERVIEW CARD === */
/* Base resets to avoid bright gradients sneaking in */
.membership-overview [class*="from-"],
.membership-overview [class*="to-"],
.membership-overview [class*="via-"] {
  /* Neutralize Tailwind gradient utilities inside this card */
  --tw-gradient-from: transparent !important;
  --tw-gradient-to: transparent !important;
  --tw-gradient-stops: transparent, transparent !important;
}

/* Default/FRESH Green */
body.theme-fresh-green .membership-overview,
body:not([class*="theme-"]) .membership-overview {
  background: #F3F4F6 !important; /* emerald-50 */
  border: 2px solid #a7f3d0 !important; /* emerald-200 */
  color: #14532d !important; /* emerald-900-ish for text */
}
body.theme-fresh-green .membership-overview__header,
body:not([class*="theme-"]) .membership-overview__header {
  background: #dcfce7 !important; /* emerald-100 */
  border-color: #a7f3d0 !important; /* emerald-200 */
}
body.theme-fresh-green .membership-overview__title,
body:not([class*="theme-"]) .membership-overview__title { color: #15803d !important; }
body.theme-fresh-green .membership-overview__icon,
body:not([class*="theme-"]) .membership-overview__icon { color: #16a34a !important; }
body.theme-fresh-green .membership-overview__row,
body:not([class*="theme-"]) .membership-overview__row { border-color: #a7f3d0 !important; }
body.theme-fresh-green .mo-label,
body:not([class*="theme-"]) .mo-label { color: #14532d !important; }
body.theme-fresh-green .mo-value,
body:not([class*="theme-"]) .mo-value { color: #166534 !important; }
body.theme-fresh-green .mo-value--total,
body:not([class*="theme-"]) .mo-value--total { color: #15803d !important; }
body.theme-fresh-green .mo-value--active,
body:not([class*="theme-"]) .mo-value--active { color: #16a34a !important; }
body.theme-fresh-green .mo-value--inactive,
body:not([class*="theme-"]) .mo-value--inactive { color: #dc2626 !important; }

/* Narwhal (blue) */
body.theme-narwhal .membership-overview {
  background: #eff6ff !important; /* blue-50 */
  border: 2px solid #bfdbfe !important; /* blue-200 */
  color: #1e3a8a !important; /* blue-800 */
}
body.theme-narwhal .membership-overview__header { background: #dbeafe !important; border-color: #bfdbfe !important; }
body.theme-narwhal .membership-overview__title { color: #1d4ed8 !important; }
body.theme-narwhal .membership-overview__icon { color: #2563eb !important; }
body.theme-narwhal .membership-overview__row { border-color: #bfdbfe !important; }
body.theme-narwhal .mo-label { color: #1e3a8a !important; }
body.theme-narwhal .mo-value { color: #1e40af !important; }
body.theme-narwhal .mo-value--total { color: #1d4ed8 !important; }
body.theme-narwhal .mo-value--active { color: #2563eb !important; }
body.theme-narwhal .mo-value--inactive { color: #dc2626 !important; }

/* Vector (orange) */
body.theme-vector .membership-overview {
  background: #fff7ed !important; /* orange-50 */
  border: 2px solid #fed7aa !important; /* orange-200 */
  color: #9a3412 !important; /* orange-800 */
}
body.theme-vector .membership-overview__header { background: #fed7aa !important; border-color: #fed7aa !important; }
body.theme-vector .membership-overview__title { color: #c2410c !important; }
body.theme-vector .membership-overview__icon { color: #ea580c !important; }
body.theme-vector .membership-overview__row { border-color: #fdba74 !important; }
body.theme-vector .mo-label { color: #9a3412 !important; }
body.theme-vector .mo-value { color: #9a3412 !important; }
body.theme-vector .mo-value--total { color: #c2410c !important; }
body.theme-vector .mo-value--active { color: #ea580c !important; }
body.theme-vector .mo-value--inactive { color: #dc2626 !important; }

/* Rebuilt (amber/archaeology) */
body.theme-rebuilt .membership-overview {
  background: #fffbeb !important; /* amber-50 */
  border: 2px solid #fde68a !important; /* amber-200 */
  color: #78350f !important; /* amber-800 */
}
body.theme-rebuilt .membership-overview__header { background: #fde68a !important; border-color: #fde68a !important; }
body.theme-rebuilt .membership-overview__title { color: #92400e !important; }
body.theme-rebuilt .membership-overview__icon { color: #d97706 !important; }
body.theme-rebuilt .membership-overview__row { border-color: #fcd34d !important; }
body.theme-rebuilt .mo-label { color: #78350f !important; }
body.theme-rebuilt .mo-value { color: #78350f !important; }
body.theme-rebuilt .mo-value--total { color: #92400e !important; }
body.theme-rebuilt .mo-value--active { color: #d97706 !important; }
body.theme-rebuilt .mo-value--inactive { color: #dc2626 !important; }

/* Dark Mode */
body.theme-dark-mode .membership-overview {
  background: #0f172a !important; /* slate-900 */
  border: 2px solid #334155 !important; /* slate-700 */
  color: #e2e8f0 !important; /* slate-200 */
}
body.theme-dark-mode .membership-overview__header { background: #1e293b !important; border-color: #334155 !important; }
body.theme-dark-mode .membership-overview__title { color: #f1f5f9 !important; }
body.theme-dark-mode .membership-overview__icon { color: #94a3b8 !important; }
body.theme-dark-mode .membership-overview__row { border-color: #334155 !important; }
body.theme-dark-mode .mo-label { color: #cbd5e1 !important; }
body.theme-dark-mode .mo-value { color: #e2e8f0 !important; }
body.theme-dark-mode .mo-value--total { color: #f8fafc !important; }
body.theme-dark-mode .mo-value--active { color: #22c55e !important; }
body.theme-dark-mode .mo-value--inactive { color: #f87171 !important; }

/* ============================ */
/* Blog Management: Empty State */
/* ============================ */

/* Neutralize gradients inside empty state to prevent bright backgrounds */
.blog-empty-state [class*="from-"],
.blog-empty-state [class*="to-"],
.blog-empty-state [class*="via-"] {
  --tw-gradient-from: transparent !important;
  --tw-gradient-to: transparent !important;
  --tw-gradient-stops: transparent, transparent !important;
}

/* Base layout/text defaults */
.blog-empty-state { color: inherit; }
.blog-empty-state__icon { color: currentColor; }

/* FRESH Green (default) */
body.theme-fresh-green .blog-empty-state,
body:not([class*="theme-"]) .blog-empty-state {
  color: #166534 !important; /* emerald-700 */
}
body.theme-fresh-green .blog-empty-state__icon-wrapper,
body:not([class*="theme-"]) .blog-empty-state__icon-wrapper {
  background: #dcfce7 !important; /* emerald-100 */
}
body.theme-fresh-green .blog-empty-state__title,
body:not([class*="theme-"]) .blog-empty-state__title { color: #15803d !important; }
body.theme-fresh-green .blog-empty-state__subtitle,
body:not([class*="theme-"]) .blog-empty-state__subtitle { color: #166534 !important; }
body.theme-fresh-green .blog-empty-state__icon,
body:not([class*="theme-"]) .blog-empty-state__icon { color: #16a34a !important; }

/* Narwhal */
body.theme-narwhal .blog-empty-state { color: #1e40af !important; }
body.theme-narwhal .blog-empty-state__icon-wrapper { background: #dbeafe !important; }
body.theme-narwhal .blog-empty-state__title { color: #1d4ed8 !important; }
body.theme-narwhal .blog-empty-state__subtitle { color: #1e40af !important; }
body.theme-narwhal .blog-empty-state__icon { color: #2563eb !important; }

/* Vector */
body.theme-vector .blog-empty-state { color: #9a3412 !important; }
body.theme-vector .blog-empty-state__icon-wrapper { background: #ffedd5 !important; }
body.theme-vector .blog-empty-state__title { color: #c2410c !important; }
body.theme-vector .blog-empty-state__subtitle { color: #9a3412 !important; }
body.theme-vector .blog-empty-state__icon { color: #ea580c !important; }

/* Rebuilt */
body.theme-rebuilt .blog-empty-state { color: #78350f !important; }
body.theme-rebuilt .blog-empty-state__icon-wrapper { background: #fef3c7 !important; }
body.theme-rebuilt .blog-empty-state__title { color: #92400e !important; }
body.theme-rebuilt .blog-empty-state__subtitle { color: #78350f !important; }
body.theme-rebuilt .blog-empty-state__icon { color: #d97706 !important; }

/* Dark Mode */
body.theme-dark-mode .blog-empty-state { color: #cbd5e1 !important; }
body.theme-dark-mode .blog-empty-state__icon-wrapper { background: #1f2937 !important; }
body.theme-dark-mode .blog-empty-state__title { color: #f1f5f9 !important; }
body.theme-dark-mode .blog-empty-state__subtitle { color: #cbd5e1 !important; }
body.theme-dark-mode .blog-empty-state__icon { color: #94a3b8 !important; }

/* ============================= */
/* Dark Mode: Alternate palettes */
/* ============================= */
/* Confirm modal: switch to deep cyan accents in dark mode */
body.theme-dark-mode .theme-modal { background:#0b1220 !important; border-color:#0e7490 !important; color:#e5e7eb !important; }
body.theme-dark-mode .confirm-title { color:#e5e7eb !important; }
body.theme-dark-mode .confirm-message { color:#94a3b8 !important; }
body.theme-dark-mode .confirm-primary-btn { background:linear-gradient(135deg,#0ea5e9,#06b6d4) !important; border-color:#0891b2 !important; color:#eaf6ff !important; }
body.theme-dark-mode .confirm-primary-btn:hover { background:linear-gradient(135deg,#0891b2,#0ea5e9) !important; }
body.theme-dark-mode .confirm-cancel-btn { background:linear-gradient(135deg,#0f172a,#1f2937) !important; color:#cbd5e1 !important; border:1px solid #334155 !important; }

/* Blog empty state: cool blue accent */
body.theme-dark-mode .blog-empty-state__icon-wrapper { background:#0b1220 !important; border:1px solid #0ea5e9 !important; }
body.theme-dark-mode .blog-empty-state__icon { color:#38bdf8 !important; }
body.theme-dark-mode .blog-empty-state__title { color:#e5e7eb !important; }
body.theme-dark-mode .blog-empty-state__subtitle { color:#9ca3af !important; }

/* Legendary badges: switch from gold to cool cyan in dark mode */
body.theme-dark-mode .badge-legendary { 
  /* Deep warm glow without high luminance */
  background: linear-gradient(135deg,#1e1b16 0%, #2c241b 55%, #3a2e1f 100%) !important; 
  border-color: #b45309 !important; 
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 4px 10px -4px rgba(0,0,0,0.6), 0 0 12px -2px rgba(180,83,9,0.25) !important;
}
body.theme-dark-mode .badge-legendary .badge-icon-wrapper { 
  --tw-ring-color:#f59e0b !important; 
  background: radial-gradient(circle at 35% 35%, #4a3724 0%, #35281c 60%, #2a2119 100%) !important; 
  box-shadow: 0 0 0 2px rgba(245,158,11,0.3), 0 2px 6px -2px rgba(0,0,0,0.5) !important;
}
body.theme-dark-mode .chip-legendary { 
  background: linear-gradient(145deg,#3b2718 0%, #2d2015 60%, #241b13 100%) !important; 
  color:#fbbf24 !important; 
  border:1px solid #b45309 !important; 
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 3px 6px -3px rgba(0,0,0,0.6) !important;
}

/* === Theme Selection Cards & Swatches === */
.theme-card { position: relative; cursor: pointer; }
.theme-card .theme-swatch-row { display:flex; gap:.5rem; }
.theme-card .theme-swatch { width:2.5rem; height:2.5rem; border-radius:.6rem; border:1px solid rgba(0,0,0,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); transition: transform .25s, box-shadow .25s; }
.theme-card:hover .theme-swatch { transform: scale(1.07); }

/* Swatch accessibility outline when selected */
.theme-card[aria-selected="true"] .theme-swatch { box-shadow: 0 0 0 2px var(--accent), inset 0 0 0 1px rgba(255,255,255,0.3); }

/* Theme-aware card selection states */
.theme-card.theme-card-selected { 
  border: 3px solid var(--accent) !important; 
  box-shadow: 0 0 0 3px var(--accent), 0 4px 12px rgba(0,0,0,0.15) !important;
}
.theme-card.theme-card-unselected { 
  border: 2px solid #e5e7eb !important;
}
.theme-card.theme-card-unselected:hover { 
  border-color: var(--accent) !important;
}

/* Dark mode: preserve true theme colors (override global bg-* darkening) */
body.theme-dark-mode .theme-card[data-theme] .theme-swatch { filter:none !important; }
body.theme-dark-mode .theme-card[data-theme="fresh-green"] .theme-swatch:nth-child(1) { background:#10b981 !important; }
body.theme-dark-mode .theme-card[data-theme="fresh-green"] .theme-swatch:nth-child(2) { background:#059669 !important; }
body.theme-dark-mode .theme-card[data-theme="fresh-green"] .theme-swatch:nth-child(3) { background:#047857 !important; }
body.theme-dark-mode .theme-card[data-theme="fresh-green"] .theme-swatch:nth-child(4) { background:#065f46 !important; }

body.theme-dark-mode .theme-card[data-theme="narwhal"] .theme-swatch:nth-child(1) { background:#3b82f6 !important; }
body.theme-dark-mode .theme-card[data-theme="narwhal"] .theme-swatch:nth-child(2) { background:#2563eb !important; }
body.theme-dark-mode .theme-card[data-theme="narwhal"] .theme-swatch:nth-child(3) { background:#1d4ed8 !important; }
body.theme-dark-mode .theme-card[data-theme="narwhal"] .theme-swatch:nth-child(4) { background:#1e40af !important; }

body.theme-dark-mode .theme-card[data-theme="vector"] .theme-swatch:nth-child(1) { background:#f97316 !important; }
body.theme-dark-mode .theme-card[data-theme="vector"] .theme-swatch:nth-child(2) { background:#22c55e !important; }
body.theme-dark-mode .theme-card[data-theme="vector"] .theme-swatch:nth-child(3) { background:#3b82f6 !important; }
body.theme-dark-mode .theme-card[data-theme="vector"] .theme-swatch:nth-child(4) { background:#ff6b35 !important; }

body.theme-dark-mode .theme-card[data-theme="rebuilt"] .theme-swatch:nth-child(1) { background:#fbbf24 !important; }
body.theme-dark-mode .theme-card[data-theme="rebuilt"] .theme-swatch:nth-child(2) { background:#f59e0b !important; }
body.theme-dark-mode .theme-card[data-theme="rebuilt"] .theme-swatch:nth-child(3) { background:#d97706 !important; }
body.theme-dark-mode .theme-card[data-theme="rebuilt"] .theme-swatch:nth-child(4) { background:#b45309 !important; }

body.theme-dark-mode .theme-card[data-theme="dark-mode"] .theme-swatch:nth-child(1) { background:#1f2937 !important; }
body.theme-dark-mode .theme-card[data-theme="dark-mode"] .theme-swatch:nth-child(2) { background:#111827 !important; }
body.theme-dark-mode .theme-card[data-theme="dark-mode"] .theme-swatch:nth-child(3) { background:#0f172a !important; }
body.theme-dark-mode .theme-card[data-theme="dark-mode"] .theme-swatch:nth-child(4) { background:#0d0d0d !important; }

/* High Contrast mode: add stronger outline for swatches */
body.high-contrast .theme-swatch { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000; }

/* ============================ */
/* Settings Modal Tab Navigation */
/* ============================ */
.settings-tab { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: .35rem; 
  color: #475569; /* slate-600 default */
  transition: color .25s ease, background .25s ease, border-color .25s ease;
  font-weight: 500;
}
.settings-tab svg { transition: color .3s ease, transform .25s ease; }
.settings-tab:hover svg { transform: translateY(-2px); }
.settings-tab[aria-selected="true"] { 
  color: var(--accent, #059669); 
  border-bottom-color: var(--accent, #059669) !important; 
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 100%);
}
.settings-tab[aria-selected="true"] svg { color: var(--accent, #059669); }
body.theme-dark-mode .settings-tab { color:#94a3b8; }
body.theme-dark-mode .settings-tab[aria-selected="true"] { background: linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(255,255,255,0.06)); }
body.theme-dark-mode .settings-tab[aria-selected="true"] svg { color: var(--accent,#0ea5e9); }
body.high-contrast .settings-tab { outline:2px solid #000; }
body.high-contrast .settings-tab[aria-selected="true"] { outline:2px solid var(--accent,#000); }

/* ============================ */
/* Badge Cards & Rarity Chips  */
/* ============================ */

/* Base card layout */
.badge-card { border-width: 2px; position: relative; }
.badge-item { background: transparent; }
.badge-icon-wrapper { transition: box-shadow .25s ease, transform .25s ease; }
.badge-icon-wrapper:hover { transform: scale(1.05); }
.badge-rarity-chip { font-weight: 600; letter-spacing: .25px; }

/* Common theme (default light) */
.badge-common { border-color: #e5e7eb !important; background: #f9fafb !important; }
.chip-common { background: #f3f4f6 !important; color: #374151 !important; }

.badge-rare { border-color: #bfdbfe !important; background: #eff6ff !important; }
.chip-rare { background: #dbeafe !important; color: #1e3a8a !important; }

.badge-epic { border-color: #e9d5ff !important; background: #f5f3ff !important; }
.chip-epic { background: #ede9fe !important; color: #5b21b6 !important; }

.badge-legacy { border-color: #fcd34d !important; background: #fffbeb !important; }
.chip-legacy { background: #fef3c7 !important; color: #92400e !important; }

/* Legendary toned down (light mode) */
.badge-legendary { border-color: #fbbf24 !important; background: #fefce8 !important; }
.chip-legendary { background: #fef3c7 !important; color: #b45309 !important; }

/* FRESH holographic container has inline gradient; only chip styled */
.badge-fresh { border-color: #6ee7b7 !important; }
.chip-fresh { background: #d1fae5 !important; color: #065f46 !important; }

/* Dark Mode adjustments */
body.theme-dark-mode .badge-card { background: #0f172a !important; border-color: #334155 !important; }
body.theme-dark-mode .badge-item { background: transparent !important; }
body.theme-dark-mode .badge-icon-wrapper { background: #1e293b !important; }
body.theme-dark-mode .badge-icon-wrapper:hover { box-shadow: 0 0 0 2px #475569, 0 0 12px rgba(148,163,184,0.25); }

body.theme-dark-mode .badge-common { border-color: #374151 !important; }
body.theme-dark-mode .chip-common { background: #1e293b !important; color: #e2e8f0 !important; }

body.theme-dark-mode .badge-rare { border-color: #1e3a8a !important; }
body.theme-dark-mode .chip-rare { background: #1e3a8a !important; color: #bfdbfe !important; }

body.theme-dark-mode .badge-epic { border-color: #5b21b6 !important; }
body.theme-dark-mode .chip-epic { background: #4c1d95 !important; color: #e9d5ff !important; }

body.theme-dark-mode .badge-legacy { border-color: #78350f !important; }
body.theme-dark-mode .chip-legacy { background: #451a03 !important; color: #fcd34d !important; }

/* Legendary in dark mode (strong contrast but not glowing) */
body.theme-dark-mode .badge-legendary { 
  border-color: #b45309 !important; 
  background: linear-gradient(135deg,#1e1b16 0%, #2c241b 55%, #3a2e1f 100%) !important; 
}
body.theme-dark-mode .chip-legendary { 
  background: linear-gradient(145deg,#3b2718 0%, #2d2015 60%, #241b13 100%) !important; 
  color: #fbbf24 !important; 
  border-color:#b45309 !important;
}

/* FRESH in dark mode */
body.theme-dark-mode .badge-fresh { border-color: #10b981 !important; }
body.theme-dark-mode .chip-fresh { background: #064e3b !important; color: #6ee7b7 !important; }

/* Neutralize any lingering bright yellow backgrounds inside badge-card */
body.theme-dark-mode .badge-card [class*="bg-yellow-50"],
body.theme-dark-mode .badge-card [class*="bg-yellow-100"],
body.theme-dark-mode .badge-card [class*="bg-amber-50"],
body.theme-dark-mode .badge-card [class*="bg-amber-100"] {
  background: #1e293b !important;
  color: #fbbf24 !important;
}


/* DARK MODE THEME */
body.theme-dark-mode .confirm-title {
  color: #f1f5f9 !important;
}

body.theme-dark-mode .confirm-message {
  color: #cbd5e1 !important;
}

body.theme-dark-mode .confirm-cancel-btn {
  background: linear-gradient(135deg, #475569, #64748b) !important;
  color: #f1f5f9 !important;
  border: 1px solid #64748b !important;
}

body.theme-dark-mode .confirm-cancel-btn:hover {
  background: linear-gradient(135deg, #64748b, #94a3b8) !important;
}

body.theme-dark-mode .confirm-danger-btn {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #ffffff !important;
  border: 1px solid #dc2626 !important;
}

body.theme-dark-mode .confirm-danger-btn:hover {
  background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
}

/* Theme-aware modal action buttons (Post Announcement, Save Changes, etc.) */

/* FRESH Green theme - keep emerald gradients */
body.theme-fresh-green .from-emerald-600.to-green-600,
body:not([class*="theme-"]) .from-emerald-600.to-green-600 {
  background: linear-gradient(to right, #059669, #16a34a) !important;
}

body.theme-fresh-green .hover\:from-emerald-700.hover\:to-green-700:hover,
body:not([class*="theme-"]) .hover\:from-emerald-700.hover\:to-green-700:hover {
  background: linear-gradient(to right, #047857, #15803d) !important;
}

/* NARWHAL theme - use blue gradients */
body.theme-narwhal .from-emerald-600.to-green-600 {
  background: linear-gradient(to right, #2563eb, #3b82f6) !important;
}

body.theme-narwhal .hover\:from-emerald-700.hover\:to-green-700:hover {
  background: linear-gradient(to right, #1d4ed8, #2563eb) !important;
}

/* VECTOR theme - use orange gradients */
body.theme-vector .from-emerald-600.to-green-600 {
  background: linear-gradient(to right, #ea580c, #f97316) !important;
}

body.theme-vector .hover\:from-emerald-700.hover\:to-green-700:hover {
  background: linear-gradient(to right, #c2410c, #ea580c) !important;
}

/* DARK MODE theme - use slate gradients with accent */
body.theme-dark-mode .from-emerald-600.to-green-600 {
  background: linear-gradient(to right, #475569, #64748b) !important;
}

body.theme-dark-mode .hover\:from-emerald-700.hover\:to-green-700:hover {
  background: linear-gradient(to right, #334155, #475569) !important;
}

/* Fix Blog Management "No posts found" section and post list area */

/* Fix the "No posts found" icon background gradient */
body.theme-dark-mode .from-emerald-100.to-teal-100 {
  background: linear-gradient(to bottom right, #1e293b, #134e4a) !important;
}

/* Fix the blog post list container and any gray backgrounds */
body.theme-dark-mode #blog-post-list {
  background: transparent !important;
}

body.theme-dark-mode .bg-gray-50 {
  background: #1e293b !important; /* Already defined but ensuring consistency */
}

body.theme-dark-mode .hover\:bg-gray-100:hover {
  background: #334155 !important; /* Already defined but ensuring consistency */
}

/* Additional fixes for blog-related white backgrounds */
body.theme-dark-mode #blog-editor-holder,
body.theme-dark-mode #blog-creator-holder {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid #475569 !important;
}

/* Ensure blog post cards are properly themed */
body.theme-dark-mode .border-gray-200 {
  border-color: #475569 !important; /* Already defined but ensuring consistency */
}

/* Fix any remaining white modal content areas */
body.theme-dark-mode .bg-white.rounded-lg.border {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

/* Comprehensive modal content area fix */
body.theme-dark-mode .modal .bg-white,
body.theme-dark-mode #modal .bg-white {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

/* AGGRESSIVE FIXES for stubborn bright sections */

/* Force override for Membership Overview - ultra specific targeting */
body.theme-dark-mode [class*="bg-gradient-to-r"][class*="from-amber-100"][class*="to-yellow-100"] {
  background: linear-gradient(to right, #1e293b, #334155) !important;
}

/* Alternative approach - target by content or structure */
body.theme-dark-mode div[class*="from-amber-100"],
body.theme-dark-mode div[class*="to-yellow-100"] {
  background: linear-gradient(to right, #1e293b, #334155) !important;
}

/* Nuclear option - force all amber/yellow gradients */
body.theme-dark-mode * {
  /* Only apply to elements with these specific classes */
}

body.theme-dark-mode *[class*="from-amber-100"] {
  background: linear-gradient(to right, #1e293b, #334155) !important;
}

body.theme-dark-mode *[class*="to-yellow-100"] {
  background: linear-gradient(to right, #1e293b, #334155) !important;
}

/* Force Blog Management "No posts found" area */
body.theme-dark-mode #blog-post-empty {
  background: transparent !important;
}

body.theme-dark-mode #blog-post-empty * {
  color: #e2e8f0 !important;
}

body.theme-dark-mode #blog-post-empty .text-emerald-600,
body.theme-dark-mode #blog-post-empty .text-emerald-800 {
  color: #10b981 !important;
}

/* Ultra-specific gradient override */
body.theme-dark-mode .w-16.h-16.bg-gradient-to-br.from-emerald-100.to-teal-100 {
  background: linear-gradient(to bottom right, #1e293b, #134e4a) !important;
}

/* Last resort: target by inline styles (if any exist) */
body.theme-dark-mode div[style*="background"] {
  background: #1e293b !important;
}

/* Fix Public Member Information - Active Members count label */
body.theme-dark-mode .text-violet-600 {
  color: #c084fc !important; /* Readable violet text */
}

body.theme-dark-mode .bg-violet-100 {
  background: #581c87 !important; /* Dark violet background */
}

body.theme-dark-mode .text-violet-800 {
  color: #c084fc !important; /* Readable violet text */
}

body.theme-dark-mode .from-violet-100 {
  --tw-gradient-from: #1e293b !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)) !important;
}

body.theme-dark-mode .to-violet-50 {
  --tw-gradient-to: #1e293b !important;
}

body.theme-dark-mode .border-violet-200 {
  border-color: #475569 !important;
}

/* Fix Raw Parameter String section */
body.theme-dark-mode .bg-slate-50 {
  background: #334155 !important; /* Dark slate background */
}

body.theme-dark-mode .text-slate-600 {
  color: #cbd5e1 !important; /* Readable slate text */
}

body.theme-dark-mode .border-slate-200 {
  border-color: #475569 !important; /* Dark slate border */
}

body.theme-dark-mode .border-slate-300 {
  border-color: #64748b !important; /* Slightly lighter dark border */
}

/* Ensure the parameter string display area is readable */
body.theme-dark-mode .bg-white.px-3.py-2 {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

/* SPECIFIC FIXES for Member Stats sections that are still bright */

/* Fix Membership Overview section - force override the gradient */
body.theme-dark-mode .bg-gradient-to-r.from-amber-100.to-yellow-100 {
  background: linear-gradient(to right, #1e293b, #334155) !important;
}

/* Fix Historical Attendance section - force override */
body.theme-dark-mode .bg-gradient-to-r.from-teal-50.to-teal-50 {
  background: linear-gradient(to right, #1e293b, #1e293b) !important;
}

body.theme-dark-mode .bg-teal-100 {
  background: #134e4a !important; /* Dark teal background */
}

/* Additional specific overrides for stubborn sections */
body.theme-dark-mode .bg-gradient-to-br.from-orange-50.to-amber-50 {
  background: linear-gradient(to bottom right, #1e293b, #1e293b) !important;
}

body.theme-dark-mode .bg-gradient-to-r.from-orange-100.to-amber-100 {
  background: linear-gradient(to right, #1e293b, #334155) !important;
}

/* Force all amber and yellow gradients to be dark */
body.theme-dark-mode [class*="from-amber-100"],
body.theme-dark-mode [class*="to-yellow-100"],
body.theme-dark-mode [class*="from-orange-100"],
body.theme-dark-mode [class*="to-amber-100"] {
  background: linear-gradient(to right, #1e293b, #334155) !important;
}

/* Force all teal gradients to be dark */
body.theme-dark-mode [class*="from-teal-50"],
body.theme-dark-mode [class*="to-teal-50"],
body.theme-dark-mode [class*="bg-teal-100"] {
  background: #134e4a !important;
}

/* SPECIFIC FIX (revised): In dark mode, remap yellows/ambers to cool neutral/cyan to reduce glare */

/* Generic yellow/amber backgrounds become deep slate */
body.theme-dark-mode .bg-yellow-50,
body.theme-dark-mode .bg-amber-50 { background: #0b1220 !important; }
body.theme-dark-mode .bg-yellow-100,
body.theme-dark-mode .bg-amber-100 { background: #0f172a !important; }

/* Borders switch to slate */
body.theme-dark-mode .border-yellow-200,
body.theme-dark-mode .border-amber-200 { border-color: #334155 !important; }
body.theme-dark-mode .border-yellow-300,
body.theme-dark-mode .border-amber-300 { border-color: #475569 !important; }

/* Rings re-colored to cyan accent to match dark palette */
body.theme-dark-mode .ring-yellow-400,
body.theme-dark-mode .ring-amber-400 { --tw-ring-color: #0ea5e9 !important; }

/* Text tones: avoid bright amber; use soft light or cyan */
body.theme-dark-mode .text-yellow-800,
body.theme-dark-mode .text-amber-800,
body.theme-dark-mode .text-yellow-700,
body.theme-dark-mode .text-amber-700 { color: #e5e7eb !important; }

/* Safety net for any yellow/amber utility combos */
body.theme-dark-mode [class*="bg-yellow-50"],
body.theme-dark-mode [class*="bg-yellow-100"],
body.theme-dark-mode [class*="bg-amber-50"],
body.theme-dark-mode [class*="bg-amber-100"] {
  background: #0b1220 !important;
}
body.theme-dark-mode [class*="border-yellow-"],
body.theme-dark-mode [class*="border-amber-"] { border-color: #334155 !important; }
body.theme-dark-mode [class*="text-yellow-"],
body.theme-dark-mode [class*="text-amber-"] { color: #e5e7eb !important; }

body.theme-dark-mode .card-button:hover {
  background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
  border-color: #64748b !important;
  color: #ffffff !important;
}

body.theme-dark-mode .text-emerald-800,
body.theme-dark-mode .text-emerald-700,
body.theme-dark-mode .text-emerald-600 {
  color: #10b981 !important; /* Bright emerald for dark mode */
}

body.theme-dark-mode .text-blue-800,
body.theme-dark-mode .text-blue-700,
body.theme-dark-mode .text-blue-600 {
  color: #3b82f6 !important; /* Bright blue for dark mode */
}

body.theme-dark-mode h1,
body.theme-dark-mode h2,
body.theme-dark-mode h3,
body.theme-dark-mode h4,
body.theme-dark-mode h5,
body.theme-dark-mode h6 {
  color: #ffffff !important; /* Pure white for all headings */
}

body.theme-dark-mode .font-semibold,
body.theme-dark-mode .font-bold {
  color: #f8fafc !important; /* Very bright for emphasis */
}

/* Dark Mode Modal improvements */
body.theme-dark-mode #modal {
  background-color: rgba(15, 23, 42, 0.9) !important; /* Darker modal backdrop */
}

body.theme-dark-mode #modal-content {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  border: 1px solid #475569 !important;
}

/* Dark Mode table/list improvements */
body.theme-dark-mode .border-b {
  border-color: #475569 !important;
}

body.theme-dark-mode .border-t {
  border-color: #475569 !important;
}

/* Dark Mode link colors */
body.theme-dark-mode a {
  color: #60a5fa !important; /* Bright blue links */
}

body.theme-dark-mode a:hover {
  color: #93c5fd !important; /* Lighter blue on hover */
}

/* Dark Mode gradient backgrounds */
body.theme-dark-mode .bg-gradient-to-r {
  background: linear-gradient(to right, #1e293b, #334155) !important;
  color: #f1f5f9 !important;
}

/* Dark Mode alert/info backgrounds */
body.theme-dark-mode .bg-blue-50 {
  background: #1e293b !important;
  border-color: #475569 !important;
}

body.theme-dark-mode .bg-emerald-50,
body.theme-dark-mode .bg-green-50 {
  background: #1e293b !important;
  border-color: #475569 !important;
}

body.theme-dark-mode .bg-yellow-50 {
  background: #1e293b !important;
  border-color: #475569 !important;
}

body.theme-dark-mode .bg-red-50 {
  background: #1e293b !important;
  border-color: #475569 !important;
}

/* === VECTOR THEME (2024 CRESCENDO) === */
body.theme-vector {
  --brand-50: #fff7ed;
  --brand-100: #fed7aa;
  --brand-200: #fb923c;
  --brand-500: #f97316;
  --brand-600: #ea580c;
  --brand-700: #c2410c;
  --brand-800: #92400e;
  --dashboard-gradient-from: #f97316;
  --dashboard-gradient-to: #22c55e;
}

/* Base dashboard background */
body.theme-vector #dashboard {
  position: relative;
  background:
    linear-gradient(135deg, #fff7ed 0%, #f0fdf4 100%),
    radial-gradient(circle at 10% 20%, rgba(249, 115, 22, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(34, 197, 94, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.02) 0%, transparent 50%);
  overflow: hidden;
}

/* Light streaks / dynamic color bars */
body.theme-vector #dashboard::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background:
    linear-gradient(90deg, #f97316 0%, transparent 25%),
    linear-gradient(-90deg, #3b82f6 0%, transparent 25%),
    linear-gradient(45deg, #22c55e 0%, transparent 30%),
    linear-gradient(-45deg, #f97316 0%, transparent 30%);
  mix-blend-mode: overlay;
  z-index: 0;
  animation: crescendoPulse 10s ease-in-out infinite alternate;
}

/* Music notes layer */
body.theme-vector #dashboard::after {
  content: '♪ 🎵 ♫ 🎶 ♪ 🎶 ♫ 🎵 🎶 ♫ ♪ 🎵 ♫ 🎶 🎵 ♬\a'
           '♫ 🎶 🎵 ♪ ♫ 🎵 🎶 ♪ 🎵 ♫ 🎶 🎵 ♪ ♫ 🎶 ♬\a'
           '🎶 ♫ 🎵 ♪ 🎶 ♫ 🎵 ♪ ♫ 🎶 🎵 ♪ ♫ 🎶 🎵 ♪\a'
           '♫ 🎵 🎶 ♪ ♫ 🎶 🎵 ♪ ♫ 🎵 🎶 ♪ ♫ 🎶 🎵 ♫\a'
           '♪ 🎵 ♫ 🎶 ♪ 🎶 ♫ 🎵 🎶 ♫ ♪ 🎵 ♫ 🎶 🎵 ♬';
  position: absolute;
  inset: 0;
  left: -50%;
  right: -50%;
  font-size: 1.45rem;
  opacity: 0.12;
  letter-spacing: 2.1rem;
  white-space: pre;
  text-align: center;
  line-height: 2.6rem;
  pointer-events: none;
  z-index: 1;
  color: rgba(249, 115, 22, 0.28);
  animation: float-music 22s linear infinite;
  transform: rotate(-2deg);
}

body.theme-vector #dashboard > * {
  position: relative;
  z-index: 2;
}

/* Buttons + section cards */
body.theme-vector .card-button {
  background: linear-gradient(135deg, #fff7ed 0%, #f0fdf4 100%) !important;
  border-color: #fed7aa !important;
}

body.theme-vector .card-button:hover {
  border-color: #f97316 !important;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.2) !important;
}

body.theme-vector .section-theme-swap {
  background: linear-gradient(to right, #fff7ed, #fed7aa) !important;
  border-color: #fb923c !important;
}

body.theme-vector .section-theme-swap h3,
body.theme-vector .section-theme-swap h4 {
  color: #c2410c !important;
}

body.theme-vector .section-theme-swap svg {
  color: #f97316 !important;
}

/* Footer reset */
footer {
  background: #fff7ed !important;
  color: #78350f !important;
  border: none !important;
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-top: 2rem !important;
  outline: none !important;
}

/* === Animations === */
@keyframes float-music {
  0%   { transform: translateY(0px) translateX(0) rotate(-2deg); }
  25%  { transform: translateY(-10px) translateX(10px) rotate(-2deg); }
  50%  { transform: translateY(-20px) translateX(20px) rotate(-2deg); }
  75%  { transform: translateY(-10px) translateX(10px) rotate(-2deg); }
  100% { transform: translateY(0px) translateX(0) rotate(-2deg); }
}

@keyframes crescendoPulse {
  0%   { opacity: 0.05; transform: scale(1) translateX(0); }
  50%  { opacity: 0.1; transform: scale(1.05) translateX(10px); }
  100% { opacity: 0.05; transform: scale(1) translateX(0); }
}

/* Dashboard header styling using theme variables */
#dashboard h2 {
  background: linear-gradient(135deg, var(--dashboard-gradient-from), var(--dashboard-gradient-to));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Wave emoji should not have gradient effect */
#dashboard h2 .wave-emoji {
  -webkit-text-fill-color: initial;
  background: none;
  filter: grayscale(0);
}

/* Dashboard themed elements */
body.theme-fresh-green #dashboard .text-accent {
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.theme-narwhal #dashboard .text-accent {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark mode: make welcome / dashboard / modal accent headings grayish for readability.
   This targets the dashboard header .text-accent (welcome) and modal welcome h3 instances
   which are injected as #modal-body .text-accent. Using !important to override
   existing gradient/background-clip rules for these specific scopes. */
body.theme-dark-mode #dashboard .text-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #e2e8f0 !important; /* soft gray */
  color: #e2e8f0 !important;
}

body.theme-dark-mode #modal-body .text-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #e2e8f0 !important; /* soft gray */
  color: #e2e8f0 !important;
}

/* Wider safety: cover specific welcome headings that use text-accent elsewhere */
body.theme-dark-mode h3.text-2xl.font-bold.text-accent,
body.theme-dark-mode #dashboard h2 .text-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  color: #e2e8f0 !important;
}

/* FRESH Green: make welcome headings solid darker green (use theme accent / brand-800)
   Remove gradient/background-clip in this scope so the text is readable and consistent. */
body.theme-fresh-green #dashboard .text-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  /* Use a slightly lighter green for welcome headings in FRESH Green (second-darkest)
     so it's distinct from the deepest brand color but still prominent. */
  color: var(--accent-1, var(--brand-700)) !important;
}

body.theme-fresh-green #modal-body .text-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--accent-1, var(--brand-700)) !important;
}

/* Wider safety: cover specific welcome headings that use text-accent elsewhere */
body.theme-fresh-green h3.text-2xl.font-bold.text-accent,
body.theme-fresh-green #dashboard h2 .text-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--accent-1, var(--brand-700)) !important;
}

/* VECTOR THEME: remove gradient for welcome headings and use solid theme accent (orange)
   so 'Welcome, <name>' is readable and consistent in Vector theme. */
body.theme-vector #dashboard .text-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  /* Use the theme's dashboard "to" green so Vector welcome headings are a lighter green */
  color: var(--dashboard-gradient-to, #22c55e) !important;
}

body.theme-vector #modal-body .text-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--dashboard-gradient-to, #22c55e) !important;
}

body.theme-vector h3.text-2xl.font-bold.text-accent,
body.theme-vector #dashboard h2 .text-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--dashboard-gradient-to, #22c55e) !important;
}

/* REBUILT THEME: use amber/brown tones for welcome headings
   so 'Welcome, <name>' is readable and consistent in REBUILT archaeology theme. */
body.theme-rebuilt #dashboard .text-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--brand-700, #92400e) !important;
}

body.theme-rebuilt #modal-body .text-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--brand-700, #92400e) !important;
}

body.theme-rebuilt h3.text-2xl.font-bold.text-accent,
body.theme-rebuilt #dashboard h2 .text-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--brand-700, #92400e) !important;
}

/* Tool card hover effects based on theme */
body.theme-fresh-green .card-button::before {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
}

body.theme-narwhal .card-button::before {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%);
}

body.theme-rebuilt .card-button::before {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.05) 0%, rgba(146, 64, 14, 0.05) 100%);
}

body.theme-fresh-green .card-button:hover {
  border-color: rgba(16, 185, 129, 0.3);
}

/* Button hover tweak */
body.theme-narwhal .card-button:hover {
  border-color: rgba(59, 130, 246, 0.3);
}

body.theme-rebuilt .card-button:hover {
  border-color: rgba(217, 119, 6, 0.3);
}

/* === REBUILT THEME DASHBOARD ARCHAEOLOGY DECOR === */
body.theme-rebuilt #dashboard {
  position: relative;
  background: linear-gradient(to bottom, #fffbeb 0%, #fef3c7 100%) !important;
  overflow: hidden;
}

/* --- Excavation site earth layers --- */
body.theme-rebuilt #dashboard::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  background-image:
    /* earth/sand shadows pushing in from the sides */
    linear-gradient(to right, rgba(120, 53, 15, 0.22) 0%, transparent 38%),
    linear-gradient(to left, rgba(120, 53, 15, 0.22) 0%, transparent 38%),

    /* left dig site silhouette */
    radial-gradient(ellipse 200px 500px at -80px 25%, rgba(146, 64, 14, 0.35) 0%, transparent 72%),
    radial-gradient(ellipse 160px 440px at -60px 60%, rgba(180, 83, 9, 0.28) 0%, transparent 75%),

    /* right ruins silhouette */
    radial-gradient(ellipse 220px 520px at calc(100% + 85px) 28%, rgba(146, 64, 14, 0.35) 0%, transparent 72%),
    radial-gradient(ellipse 170px 450px at calc(100% + 65px) 62%, rgba(180, 83, 9, 0.28) 0%, transparent 75%),

    /* center excavation pit */
    radial-gradient(ellipse 480px 220px at 50% 100%, rgba(217, 119, 6, 0.12) 0%, transparent 72%);
  background-repeat: no-repeat;
  filter: blur(0.6px);
  z-index: 0;
  animation: excavationFloat 20s ease-in-out infinite alternate;
}

/* --- Ancient ruins layer --- */
body.theme-rebuilt #dashboard::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* bottom left stone ruins */
    radial-gradient(ellipse 180px 310px at -90px 100%, rgba(146, 64, 14, 0.32) 0%, transparent 66%),
    radial-gradient(ellipse 140px 260px at -55px 88%, rgba(180, 83, 9, 0.26) 0%, transparent 72%),

    /* bottom right column ruins */
    radial-gradient(ellipse 190px 320px at calc(100% + 100px) 98%, rgba(146, 64, 14, 0.32) 0%, transparent 66%),
    radial-gradient(ellipse 150px 270px at calc(100% + 60px) 86%, rgba(180, 83, 9, 0.26) 0%, transparent 72%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: blur(0.5px);
  opacity: 0.85;
  animation: ruinsDrift 22s ease-in-out infinite alternate;
}

body.theme-rebuilt #dashboard > * {
  position: relative;
  z-index: 1;
}

@keyframes excavationFloat {
  0% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(-4px) translateX(1px); }
  100% { transform: translateY(0px) translateX(0px); }
}

@keyframes ruinsDrift {
  0% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(-6px) translateX(-2px); }
  100% { transform: translateY(0px) translateX(0px); }
}

/* === NARWHAL THEME DASHBOARD REEF DECOR === */
body.theme-narwhal #dashboard {
  position: relative;
  background: linear-gradient(to bottom, #eff6ff 0%, #dbeafe 100%);
  overflow: hidden;
}

/* --- Main coral branches (replacing triangles) --- */
body.theme-narwhal #dashboard::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    /* reef shadows pushing in from the sides */
    linear-gradient(to right, rgba(30,64,175,0.22) 0%, transparent 38%),
    linear-gradient(to left, rgba(30,64,175,0.22) 0%, transparent 38%),

    /* left reef silhouette cluster */
    radial-gradient(ellipse 220px 520px at -90px 20%, rgba(30,64,175,0.40) 0%, transparent 72%),
    radial-gradient(ellipse 180px 460px at -70px 55%, rgba(29,78,216,0.34) 0%, transparent 75%),
    radial-gradient(ellipse 200px 480px at -95px 88%, rgba(30,64,175,0.30) 0%, transparent 70%),

    /* right reef silhouette cluster */
    radial-gradient(ellipse 240px 540px at calc(100% + 95px) 22%, rgba(30,64,175,0.40) 0%, transparent 72%),
    radial-gradient(ellipse 190px 470px at calc(100% + 75px) 58%, rgba(29,78,216,0.34) 0%, transparent 75%),
    radial-gradient(ellipse 210px 500px at calc(100% + 100px) 90%, rgba(30,64,175,0.30) 0%, transparent 70%),

    /* subtle center depth */
    radial-gradient(ellipse 520px 260px at 50% 100%, rgba(59,130,246,0.12) 0%, transparent 72%);
  background-repeat: no-repeat;
  filter: blur(0.7px);
  z-index: 0;
  animation: reefFloat 18s ease-in-out infinite alternate;
}

/* --- Silhouette + fish layer --- */
body.theme-narwhal #dashboard::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* bottom left reef */
    radial-gradient(ellipse 190px 330px at -95px 100%, rgba(30,64,175,0.38) 0%, transparent 66%),
    radial-gradient(ellipse 150px 280px at -60px 86%, rgba(29,78,216,0.30) 0%, transparent 72%),

    /* bottom right reef */
    radial-gradient(ellipse 200px 340px at calc(100% + 110px) 98%, rgba(30,64,175,0.38) 0%, transparent 66%),
    radial-gradient(ellipse 160px 290px at calc(100% + 70px) 84%, rgba(29,78,216,0.30) 0%, transparent 72%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: blur(0.6px);
  opacity: 0.9;
  animation: fishDrift 25s ease-in-out infinite alternate;
}

/* --- Sunlight shimmer overlay --- */
body.theme-narwhal #dashboard::after,
body.theme-narwhal #dashboard::before {
  will-change: transform;
}

body.theme-narwhal #dashboard .sunlight {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.08) 2%,
    transparent 5%
  );
  mix-blend-mode: overlay;
  animation: lightWave 14s linear infinite;
  z-index: 1;
  pointer-events: none;
}

/* make all dashboard content sit above the reefs */
body.theme-narwhal #dashboard > * {
  position: relative;
  z-index: 2;
}

/* Footer styling override */
footer {
  background: #f8fafc !important;
  color: #475569 !important;
  border: none !important;
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-top: 2rem !important;
  outline: none !important;
}

/* --- Animations --- */
@keyframes reefFloat {
  0% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(-6px) translateX(2px); }
  100% { transform: translateY(0px) translateX(0px); }
}

@keyframes fishDrift {
  0% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(-10px) translateX(-4px); }
  100% { transform: translateY(0px) translateX(0px); }
}

@keyframes lightWave {
  0% { background-position: 0 0; }
  100% { background-position: 400px 400px; }
}


footer *, 
footer *::before, 
footer *::after {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  background: transparent !important;
}

/* Override Tailwind accent colors in footer specifically */
footer .text-accent {
  /* Use theme accent token (darkest by default) so footer links follow the currently selected theme.
     Keep !important to override legacy utility classes targeting footer. */
  color: var(--accent) !important;
}

body.theme-fresh-green footer {
  background: #F3F4F6 !important; /* Light green background to match theme */
  color: #475569 !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body.theme-fresh-green footer .text-accent {
  /* Ensure fresh-green footer accents still come from --accent (set by JS to brand tokens).
     This avoids hardcoded blues in the fresh-green theme. */
  color: var(--accent) !important;
}

body.theme-narwhal footer {
  background: linear-gradient(to bottom, #eff6ff 0%, #dbeafe 100%) !important;
  color: #475569 !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body.theme-dark-mode footer {
  background: #111827 !important; /* Dark mode background to match theme */
  color: #9ca3af !important; /* Comfortable dark mode text */
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body.theme-vector footer {
  background: linear-gradient(135deg, #fff7ed 0%, #f0fdf4 100%) !important;
  color: #475569 !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body.theme-rebuilt footer {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  color: #78350f !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Prevent any green colors from appearing in footer area */
body:not(.theme-fresh-green) footer {
  border-top-color: #d1d5db !important;
}

/* Completely override any possible green styling */
footer, 
footer *, 
body footer,
body footer *,
#dashboard + footer,
html footer {
  border-color: #d1d5db !important;
}

body.theme-fresh-green footer, 
body.theme-fresh-green footer * {
  border-color: #d1d5db !important;
}

/* Nuclear option: remove all green borders from any element that could affect footer */
body.theme-fresh-green *:not(#dashboard):not(#dashboard *):not(.card-button):not(.card-button *) {
  border-color: #d1d5db !important;
}

/* Specifically target elements that might be above footer */
#dashboard {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 2rem !important;
}

/* Ensure no element near footer has green borders */
body.theme-fresh-green #dashboard,
body.theme-fresh-green #tool-grid,
body.theme-fresh-green .grid {
  border: none !important;
  border-bottom: none !important;
}

/* Aggressive footer area cleanup - remove any possible green from surrounding elements */
body.theme-fresh-green footer::before,
body.theme-fresh-green footer::after {
  display: none !important;
}

/* Target any wrapper or container around footer */
body.theme-fresh-green body,
body.theme-fresh-green html {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
}

/* Remove any decorative lines that might appear around footer */
body.theme-fresh-green footer + *,
body.theme-fresh-green * + footer {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Force override any possible hr or divider elements near footer */
body.theme-fresh-green hr {
  border-color: #d1d5db !important;
  background-color: #d1d5db !important;
}

/* Remove any box-shadows that might create lines */
body.theme-fresh-green footer,
body.theme-fresh-green footer * {
  box-shadow: none !important;
}

/* Ensure body background extends fully - no gaps */
body.theme-fresh-green {
  background: #EBF7E3 !important;
  border: none !important;
}

/* Make sure main content area doesn't have bottom border */
body.theme-fresh-green #dashboard ~ * {
  border-top: none !important;
  border-bottom: none !important;
}

/* Override any Tailwind utility classes that might add borders */
body.theme-fresh-green .border-t,
body.theme-fresh-green .border-b,
body.theme-fresh-green .border-y {
  border-color: transparent !important;
}

/* Specifically target the area between dashboard and footer */
body.theme-fresh-green #dashboard + script + footer {
  border: none !important;
  margin-top: 0 !important;
  padding-top: 2rem !important;
}

body.theme-fresh-green footer a,
body.theme-narwhal footer a,
body.theme-dark-mode footer a,
body.theme-vector footer a,
body.theme-rebuilt footer a,
footer a {
  /* Footer links should use the theme's accent (darkest tone). */
  color: var(--accent) !important;
  text-decoration: underline;
}

body.theme-fresh-green footer a:hover,
body.theme-narwhal footer a:hover,
body.theme-dark-mode footer a:hover,
body.theme-vector footer a:hover,
body.theme-rebuilt footer a:hover,
footer a:hover {
  /* On hover use a slightly lighter accent (second darkest) for a visible affordance. */
  color: var(--accent-1) !important;
}

/* Animated bubbles effect for Narwhal theme */
@keyframes float-up {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }
  50% {
    opacity: 0.15;
  }
  100% {
    transform: translateY(-100vh) scale(1.2);
    opacity: 0;
  }
}

body.theme-narwhal #dashboard .card-button {
  position: relative;
  overflow: hidden;
}

body.theme-narwhal #dashboard .card-button::after {
  content: '○';
  position: absolute;
  bottom: -20px;
  left: 50%;
  color: rgba(59, 130, 246, 0.2);
  font-size: 0.5rem;
  animation: float-up 8s ease-in infinite;
  animation-delay: var(--bubble-delay, 0s);
  pointer-events: none;
}

/* Disable animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.theme-narwhal #dashboard .card-button::after {
    animation: none;
    display: none;
  }
}

/* Scale all rem-based font sizes */
html { font-size: calc(16px * var(--font-scale)); }

/* Dyslexia-friendly font - Atkinson Hyperlegible is specifically designed for better readability */
body.dyslexia-font {
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif !important;
}

body.dyslexia-font * {
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif !important;
}

/* High contrast mode - significant visual improvements for light themes */
body.high-contrast:not(.theme-dark-mode) {
  /* Stronger text contrast for light themes */
  color: #000000 !important;
}

body.high-contrast:not(.theme-dark-mode) .bg-white {
  background-color: #ffffff !important;
  color: #000000 !important;
}

body.high-contrast:not(.theme-dark-mode) .text-gray-600,
body.high-contrast:not(.theme-dark-mode) .text-gray-700,
body.high-contrast:not(.theme-dark-mode) .text-gray-800,
body.high-contrast:not(.theme-dark-mode) .text-gray-900 {
  color: #000000 !important;
}

/* Light themes high contrast headers */
body.high-contrast:not(.theme-dark-mode) .text-emerald-700,
body.high-contrast:not(.theme-dark-mode) .text-emerald-800,
body.high-contrast:not(.theme-dark-mode) .text-blue-700,
body.high-contrast:not(.theme-dark-mode) .text-blue-800 {
  color: #000000 !important;
  font-weight: 700 !important;
}

/* High contrast for light themes */
body.high-contrast:not(.theme-dark-mode) input,
body.high-contrast:not(.theme-dark-mode) select,
body.high-contrast:not(.theme-dark-mode) textarea {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
}

body.high-contrast:not(.theme-dark-mode) button {
  border: 3px solid #000000 !important;
  font-weight: 700 !important;
}

body.high-contrast:not(.theme-dark-mode) .border-gray-200,
body.high-contrast:not(.theme-dark-mode) .border-gray-300 {
  border-color: #000000 !important;
  border-width: 2px !important;
}

body.high-contrast:not(.theme-dark-mode) .card-button {
  border: 3px solid #000000 !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}

body.high-contrast:not(.theme-dark-mode) .card-button:hover {
  background-color: #f0f0f0 !important;
  border-color: #000000 !important;
}

body.high-contrast:not(.theme-dark-mode) a {
  color: #000000 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  font-weight: 700 !important;
}

body.high-contrast:not(.theme-dark-mode) .bg-gradient-to-r {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}

/* High contrast for dark mode - enhanced but keeping dark theme */
body.high-contrast.theme-dark-mode {
  color: #ffffff !important;
}

body.high-contrast.theme-dark-mode h1,
body.high-contrast.theme-dark-mode h2,
body.high-contrast.theme-dark-mode h3,
body.high-contrast.theme-dark-mode h4,
body.high-contrast.theme-dark-mode h5,
body.high-contrast.theme-dark-mode h6 {
  color: #ffffff !important;
  font-weight: 700 !important;
}

body.high-contrast.theme-dark-mode .text-gray-600,
body.high-contrast.theme-dark-mode .text-gray-700,
body.high-contrast.theme-dark-mode .text-gray-800,
body.high-contrast.theme-dark-mode .text-gray-900 {
  color: #ffffff !important;
}

body.high-contrast.theme-dark-mode input,
body.high-contrast.theme-dark-mode select,
body.high-contrast.theme-dark-mode textarea {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 3px solid #ffffff !important;
}

body.high-contrast.theme-dark-mode button {
  border: 3px solid #ffffff !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

body.high-contrast.theme-dark-mode .card-button {
  border: 3px solid #ffffff !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast.theme-dark-mode a {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  font-weight: 700 !important;
}

/* FRESH Green theme high contrast */
body.high-contrast.theme-fresh-green {
  --brand-50: #ffffff;
  --brand-100: #ffffff;
  --brand-200: #000000;
  --brand-500: #000000;
  --brand-600: #000000;
  --brand-700: #000000;
  --brand-800: #000000;
}

/* Narwhal theme high contrast */
body.high-contrast.theme-narwhal {
  --brand-50: #ffffff;
  --brand-100: #ffffff;
  --brand-200: #000000;
  --brand-500: #000000;
  --brand-600: #000000;
  --brand-700: #000000;
  --brand-800: #000000;
}

/* Dark mode high contrast - inverted */
body.high-contrast.theme-dark-mode {
  background: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast.theme-dark-mode .bg-white {
  background-color: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast.theme-dark-mode .text-gray-600,
body.high-contrast.theme-dark-mode .text-gray-700,
body.high-contrast.theme-dark-mode .text-gray-800,
body.high-contrast.theme-dark-mode .text-gray-900 {
  color: #ffffff !important;
}

body.high-contrast.theme-dark-mode input,
body.high-contrast.theme-dark-mode select,
body.high-contrast.theme-dark-mode textarea {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 3px solid #ffffff !important;
}

body.high-contrast.theme-dark-mode button {
  border: 3px solid #ffffff !important;
  color: #ffffff !important;
  background-color: #000000 !important;
}

body.high-contrast.theme-dark-mode .card-button {
  border: 3px solid #ffffff !important;
  background-color: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast.theme-dark-mode a {
  color: #ffffff !important;
}

/* Reduced motion */
body.reduced-motion * {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}

/* Enhanced focus indicators */
body.enhanced-focus *:focus {
  outline: 4px solid #3b82f6 !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

body.enhanced-focus button:focus,
body.enhanced-focus a:focus,
body.enhanced-focus input:focus,
body.enhanced-focus select:focus,
body.enhanced-focus textarea:focus {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3) !important;
}

/* Text spacing */
body.text-spacing {
  line-height: 1.8 !important;
  letter-spacing: 0.04em !important;
  word-spacing: 0.08em !important;
}

body.text-spacing p,
body.text-spacing li,
body.text-spacing div {
  line-height: 1.8 !important;
}

body.text-spacing h1,
body.text-spacing h2,
body.text-spacing h3 {
  margin-bottom: 1.2em !important;
}

/* Link underlines */
body.link-underlines a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

body.link-underlines a:hover {
  text-decoration-thickness: 3px !important;
}

/* Large cursor */
body.large-cursor,
body.large-cursor * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="white" stroke="black" stroke-width="1.5" d="M8 4 L8 24 L14 18 L18 28 L22 26 L18 16 L26 16 Z"/></svg>') 8 4, auto !important;
}

body.large-cursor button,
body.large-cursor a,
body.large-cursor input[type="button"],
body.large-cursor input[type="submit"] {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="white" stroke="black" stroke-width="1.5" d="M16 4 L20 14 L30 16 L20 18 L16 28 L12 18 L2 16 L12 14 Z"/></svg>') 16 16, pointer !important;
}

body.large-cursor input[type="text"],
body.large-cursor textarea {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32"><rect x="10" y="2" width="4" height="28" fill="black"/><rect x="6" y="2" width="12" height="4" fill="black"/><rect x="6" y="26" width="12" height="4" fill="black"/></svg>') 12 16, text !important;
}

/* PWA-specific styles */
/* Ensure the app works well in standalone mode */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  /* Hide elements that don't make sense in standalone */
  .browser-only {
    display: none !important;
  }
}

/* iOS PWA styles */
@supports (-webkit-touch-callout: none) {
  .ios-safe-area {
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Enhanced touch targets for mobile */
@media (pointer: coarse) {
  .card-button,

  /* Placeholder tokens (dynamic announcement placeholders) */
  .placeholder-token {
    display: inline-block;
    background: #e6f9ee;
    color: #0c6e35;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.2;
    border: 1px solid #b6e8c9;
    word-break: break-all;
  }
  /* Highlight placeholders inside manager list */
  .ann-placeholder-highlight {
    background: transparent;
    color: #16a34a !important; /* brighter green for better contrast */
    padding: 0;
    font-weight: 600;
    font-size: 90%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  }
  .btn,
  .btn-secondary,
  .btn-danger {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Larger touch areas for mobile */
  button, input, select, textarea {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* Improve scrolling on iOS */
.overflow-y-auto {
  -webkit-overflow-scrolling: touch;
}

/* Offline indicator */
.offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #DC2626;
  color: white;
  text-align: center;
  padding: 0.5rem;
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.offline-indicator.show {
  transform: translateY(0);
}

/* Pull-to-refresh indicator */
.ptr-element {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
  text-align: center;
  padding: 0 1rem;
  background: linear-gradient(to bottom, #f3f4f6, white);
}

.ptr-element.ptr-refresh {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Installation prompt styles */
.install-prompt {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background: #0C6E35;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 50;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.install-prompt.show {
  transform: translateY(0);
}

/* Update notification */
.update-notification {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #0C6E35, #2D8D5A);
  color: white;
  padding: 1rem;
  text-align: center;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.input {
  background-color: white;
  border: 1px solid #0C6E35;
  color: #1A1A1A;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  width: 16rem;
}
.btn {
  background-color: #0C6E35;
  color: white;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: #2D8D5A;
}

.btn-secondary {
  background-color: #6B7280;
  color: white;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
  border: none;
  cursor: pointer;
}
.btn-secondary:hover {
  background-color: #4B5563;
}

.btn-danger {
  background-color: #DC2626;
  color: white;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
  border: none;
  cursor: pointer;
}
.btn-danger:hover {
  background-color: #B91C1C;
}

.card-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Modal header brand color overrides using CSS variables (applies only inside modal) */
#modal-body .text-emerald-800 { color: var(--brand-800) !important; }
#modal-body .text-emerald-700 { color: var(--brand-700) !important; }
#modal-body .text-emerald-600 { color: var(--brand-600) !important; }
#modal-body .text-green-800 { color: var(--brand-800) !important; }
#modal-body .text-green-600 { color: var(--brand-600) !important; }

#modal-body .border-emerald-200 { border-color: var(--brand-200) !important; }
#modal-body .border-green-200 { border-color: var(--brand-200) !important; }

#modal-body .bg-emerald-50 { background-color: var(--brand-50) !important; }
#modal-body .bg-emerald-100 { background-color: var(--brand-100) !important; }
#modal-body .bg-green-50 { background-color: var(--brand-50) !important; }
#modal-body .bg-green-100 { background-color: var(--brand-100) !important; }

/* Tailwind gradient variable overrides */
#modal-body .from-emerald-50 { --tw-gradient-from: var(--brand-50) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0)); }
#modal-body .from-emerald-100 { --tw-gradient-from: var(--brand-100) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0)); }
#modal-body .from-green-50 { --tw-gradient-from: var(--brand-50) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0)); }
#modal-body .from-green-100 { --tw-gradient-from: var(--brand-100) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0)); }
#modal-body .from-emerald-500 { --tw-gradient-from: var(--brand-500) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0)); }

#modal-body .to-green-50 { --tw-gradient-to: var(--brand-50) !important; }
#modal-body .to-green-100 { --tw-gradient-to: var(--brand-100) !important; }
#modal-body .to-emerald-100 { --tw-gradient-to: var(--brand-100) !important; }
#modal-body .to-emerald-600, 
#modal-body .to-green-600 { --tw-gradient-to: var(--brand-600) !important; }


.card-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 51, 234, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: #cbd5e1;
}

.card-button:hover::before {
  opacity: 1;
}

.card-button:active {
  transform: translateY(-2px);
}
.card-button img {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.5rem;
}
#modal input,
#modal textarea,
#modal select {
  width: 100%;
  border: 1px solid #0C6E35;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

/* System Logs modal: keep filter controls aligned with action button */
#modal #logs-content-area input,
#modal #logs-content-area select {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.loader {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #0C6E35;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.home-dot.active {
  background-color: #0C6E35;
}

.home-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #D7F9D0;
  cursor: pointer;
}

/* Enhanced PWA Styles */
.fab-button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fab-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.fab-action {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.fab-action:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* PWA Install Prompt Animation */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.pwa-install-slide-in {
  animation: slideInRight 0.3s ease-out;
}

.pwa-install-slide-out {
  animation: slideOutRight 0.3s ease-in;
}

/* Offline Banner Styles */
#admin-offline-banner {
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Keyboard Shortcuts Guide */
#admin-shortcuts-guide,
#pwa-shortcuts {
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Share Button Styles */
.share-btn {
  background: linear-gradient(135deg, #0C6E35 0%, #065F2F 100%);
  border: none;
  box-shadow: 0 2px 4px rgba(12, 110, 53, 0.2);
  transition: all 0.2s ease;
}

.share-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(12, 110, 53, 0.3);
}

/* PWA Specific Media Queries */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .fab-container {
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
  
  #admin-shortcuts-guide,
  #pwa-shortcuts {
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

/* Enhanced Button Styles for PWA */
.btn-pwa-primary {
  background: linear-gradient(135deg, #0C6E35 0%, #065F2F 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px 0 rgba(12, 110, 53, 0.3);
}

.btn-pwa-primary:hover {
  background: linear-gradient(135deg, #065F2F 0%, #0C6E35 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px 0 rgba(12, 110, 53, 0.4);
}

/* Loading States for PWA */
.pwa-loading {
  position: relative;
  overflow: hidden;
}

.pwa-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Touch-friendly styles for mobile PWA */
@media (max-width: 768px) {
  .fab-button {
    width: 56px;
    height: 56px;
  }
  
  .fab-action {
    width: 48px;
    height: 48px;
  }
  
  button, .btn {
    min-height: 44px; /* iOS recommendation for touch targets */
    min-width: 44px;
  }
}

/* Force stable modal dimensions - fix for Tailwind CDN dynamic class issues */
#modal-content {
  max-width: min(98vw, 1800px) !important;
  width: 100% !important;
  max-height: 96vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* When the user prefers a comfortable modal width, avoid accidental small
   compact modal sizing (used only for quick-checkin). This ensures the
   settings modal (which may include modal-compact on some flows) expands
   to a usable size instead of staying tiny. */
body.modal-width-comfortable #modal-content.modal-compact {
  max-width: min(90vw, 900px) !important;
  padding: 1.5rem !important;
}

/* Mobile-only modal UX fixes */
@media (max-width: 640px) {
  /* Ensure the main modal content scrolls within viewport and leaves space for actions */
  #modal #modal-content {
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding-bottom: 4rem; /* avoid action buttons getting cut off at bottom */
  }

  /* Keep the close X always visible and tappable on mobile */
  #modal #close-modal {
    position: fixed;
    top: 12px;
    right: 24px;
    z-index: 1001;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 9999px;
    padding: 8px 12px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }

  /* Make filter/toolbars wrap instead of overflow off-screen */
  #modal .flex {
    flex-wrap: wrap;
  }

  /* Prevent pagination rows from overlapping adjacent buttons */
  #modal [id$="-pagination"],
  #modal #member-pagination,
  #modal #polls-pagination,
  #modal #member-polls-pagination,
  #modal #artist-pagination,
  #modal #attendance-pagination,
  #modal #log-pagination {
    margin-bottom: 0.5rem;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .fab-button,
  .fab-action {
    border: 2px solid currentColor;
  }
  
  .btn-pwa-primary {
    border: 2px solid #0C6E35;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .fab-button,
  .fab-action,
  .btn-pwa-primary,
  #admin-offline-banner,
  .pwa-install-slide-in,
  .pwa-install-slide-out {
    animation: none;
    transition: none;
  }
  
  .fab-button:hover,
  .fab-action:hover,
  .btn-pwa-primary:hover {
    transform: none;
  }
}

/* Checkbox styling fixes */
input[type="checkbox"] {
  margin-right: 0.5rem;
  margin-left: 0;
  width: 1rem;
  height: 1rem;
  accent-color: #0C6E35;
  cursor: pointer;
}

/* Ensure proper spacing for checkbox labels */
label.inline-flex {
  gap: 0.5rem !important;
  align-items: center;
}

label.inline-flex input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}

#modal input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  padding: 0;
  margin: 0;
}

/* Custom poll option check styles */
.custom-check { position: relative; }
.custom-check .checkmark { position: absolute; }
label .select-text { line-height: 1.2; }

input[type="radio"] {
  margin: 0;              /* remove browser default + your forced margin */
  width: 1rem;
  height: 1rem;
  accent-color: #0C6E35;
  cursor: pointer;
  flex-shrink: 0;          /* prevents radio from shrinking in flex */
}

/* Mobile Dashboard Fixes */
@media (max-width: 768px) {
  /* Dashboard header - prevent button wrapping and horizontal scroll */
  #dashboard .relative.flex {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  /* Move welcome message to top on mobile */
  #dashboard h2 {
    position: static !important;
    transform: none !important;
    order: -1;
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    white-space: normal;
  }
  
  /* Buttons container - wrap and center */
  #dashboard .flex.gap-3:first-child {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }
  
  /* Right side buttons container */
  #dashboard .flex.gap-3:last-child {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    order: 1;
  }
  
  /* Make dashboard buttons smaller on mobile */
  #dashboard .flex.gap-3 button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    min-width: auto;
  }
  
  /* Make dashboard button text and icons smaller */
  #dashboard .flex.gap-3 button svg {
    width: 0.875rem;
    height: 0.875rem;
  }
  
  /* Tool grid - 2 columns instead of 3 */
  #tool-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem;
  }
  
  /* Make tool cards smaller on mobile */
  #tool-grid .card-button {
    padding: 1.5rem 1rem;
  }
  
  /* Make tool card icons smaller */
  #tool-grid .card-button .text-4xl {
    font-size: 2rem;
  }
  
  /* Make tool card text smaller */
  #tool-grid .card-button .font-semibold {
    font-size: 0.875rem;
    margin-top: 0.5rem;
  }
  
  /* Remove horizontal padding to prevent scroll */
  #dashboard {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Ensure no horizontal overflow */
  #dashboard * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Full-screen modal styles */
.fullscreen-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 9999 !important;
}

/* Quick-checkin modal card (scoped small card for quick-checkin flows) */
.quick-modal-card {
  background: transparent; /* outer modal-compact provides background */
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
  width: 100%;
}

@media (max-width: 420px) {
  .quick-modal-card {
    max-width: calc(100% - 2rem);
  }
}

/* Scoped compact modal container used only for quick-checkin flows */
/* Quick checkin compact modal styling */
.modal-compact {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  padding: 2rem;
  max-width: 20rem;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.1);
}

@media (max-width: 420px) {
  #modal-content.modal-compact {
    padding: 1.5rem;
    max-width: calc(100% - 2rem);
  }
}

/* Quick checkin icon animation */
@keyframes quick-checkin-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.quick-checkin-icon {
  animation: quick-checkin-bounce 2s ease-in-out infinite;
}

/* Quick checkin button styles */
.quick-checkin-btn-primary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.quick-checkin-btn-primary:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.quick-checkin-btn-secondary {
  background: white;
  color: #374151;
  border: 1.5px solid #e5e7eb;
  transition: all 0.2s ease;
}

.quick-checkin-btn-secondary:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.fullscreen-modal .modal-content {
  height: 100% !important;
  border-radius: 0 !important;
}

.fullscreen-modal .modal-body {
  height: calc(100% - 120px) !important;
  overflow-y: auto;
}

.fullscreen-modal .modal-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10000;
  border-bottom: 1px solid #e5e7eb;
}

/* Progress bar styles */
.progress-container {
  margin-top: 0.5rem;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  width: 0%;
  transition: width 0.3s ease;
}

/* Enhanced Typography for Admin Content Display */
.admin-content p { margin-bottom: 12px; }
.admin-content h1, .admin-content h2, .admin-content h3, 
.admin-content h4, .admin-content h5, .admin-content h6 {
  margin: 16px 0 12px 0;
  font-weight: 600;
}
.admin-content ul, .admin-content ol { 
  margin-bottom: 12px; 
  padding-left: 20px; 
}
.admin-content blockquote {
  border-left: 3px solid #0C6E35;
  padding-left: 12px;
  margin: 12px 0;
  font-style: italic;
  background: #f8f9fa;
  padding: 12px;
  border-radius: 4px;
}

/* Custom rainbow gradient for FRESH badges */
.rainbow-gradient {
  background: linear-gradient(90deg,
    #ff0000 0%,
    #ffa500 16.67%,
    #ffff00 33.33%,
    #008000 50%,
    #0000ff 66.67%,
    #4b0082 83.33%,
    #ee82ee 100%);
  color: #1f2937; /* Dark text for contrast */
}

/* Holographic foil effect for FRESH badge chips */
.holographic-foil {
  background: linear-gradient(135deg,
    #ff8cf0 0%,
    #7ee8fa 16.67%,
    #4ade80 33.33%,
    #22d3ee 50%,
    #facc15 66.67%,
    #c084fc 83.33%,
    #ff8cf0 100%) !important;
  background-size: 200% 200% !important;
  animation: holographic-shimmer 3s ease-in-out infinite !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 15px rgba(255, 140, 240, 0.35) !important;
  position: relative !important;
}

.holographic-foil * {
  color: #fff !important;
}

@keyframes holographic-shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ==================== THEME-AWARE MODAL SECTIONS ==================== */
/* These sections swap colors between FRESH Green and Narwhal themes */

/* Create Member - Personal Info: Blue (FRESH) → Emerald (Narwhal) */
body.theme-fresh-green .section-create-personal-info {
  background-image: linear-gradient(to right, #eff6ff, #dbeafe) !important;
  border-bottom-color: #bfdbfe !important;
}
body.theme-fresh-green .section-create-personal-info .section-text { color: #1e3a8a !important; }
body.theme-fresh-green .section-create-personal-info .section-icon { color: #2563eb !important; }
body.theme-fresh-green .section-create-personal-info .section-desc { color: #1d4ed8 !important; }

body.theme-narwhal .section-create-personal-info {
  background-image: linear-gradient(to right, #ecfdf5, #d1fae5) !important;
  border-bottom-color: #a7f3d0 !important;
}
body.theme-narwhal .section-create-personal-info .section-text { color: #065f46 !important; }
body.theme-narwhal .section-create-personal-info .section-icon { color: #10b981 !important; }
body.theme-narwhal .section-create-personal-info .section-desc { color: #047857 !important; }

/* Create Member - Guest Attendance: Emerald (FRESH) → Blue (Narwhal) */
body.theme-fresh-green .section-create-guest-attendance {
  background-image: linear-gradient(to right, #ecfdf5, #d1fae5) !important;
  border-bottom-color: #a7f3d0 !important;
}
body.theme-fresh-green .section-create-guest-attendance .section-text { color: #065f46 !important; }
body.theme-fresh-green .section-create-guest-attendance .section-icon { color: #10b981 !important; }
body.theme-fresh-green .section-create-guest-attendance .section-desc { color: #047857 !important; }

body.theme-narwhal .section-create-guest-attendance {
  background-image: linear-gradient(to right, #eff6ff, #dbeafe) !important;
  border-bottom-color: #bfdbfe !important;
}
body.theme-narwhal .section-create-guest-attendance .section-text { color: #1e3a8a !important; }
body.theme-narwhal .section-create-guest-attendance .section-icon { color: #2563eb !important; }
body.theme-narwhal .section-create-guest-attendance .section-desc { color: #1d4ed8 !important; }

/* Admin Manager - Join Codes: Blue (FRESH) → Emerald (Narwhal) */
body.theme-fresh-green .section-join-codes {
  background-image: linear-gradient(to right, #eff6ff, #dbeafe) !important;
  border-bottom-color: #bfdbfe !important;
}
body.theme-fresh-green .section-join-codes .section-text { color: #1e3a8a !important; }
body.theme-fresh-green .section-join-codes .section-icon { color: #2563eb !important; }
body.theme-fresh-green .section-join-codes .section-desc { color: #1d4ed8 !important; }

body.theme-narwhal .section-join-codes {
  background-image: linear-gradient(to right, #ecfdf5, #d1fae5) !important;
  border-bottom-color: #a7f3d0 !important;
}
body.theme-narwhal .section-join-codes .section-text { color: #065f46 !important; }
body.theme-narwhal .section-join-codes .section-icon { color: #10b981 !important; }
body.theme-narwhal .section-join-codes .section-desc { color: #047857 !important; }

/* Edit Member - Personal Info: Blue (FRESH) → Teal (Narwhal) */
body.theme-fresh-green .section-edit-personal-info {
  background-image: linear-gradient(to right, #eff6ff, #dbeafe) !important;
  border-bottom-color: #bfdbfe !important;
}
body.theme-fresh-green .section-edit-personal-info .section-text { color: #1e3a8a !important; }
body.theme-fresh-green .section-edit-personal-info .section-icon { color: #2563eb !important; }
body.theme-fresh-green .section-edit-personal-info .section-desc { color: #1d4ed8 !important; }

body.theme-narwhal .section-edit-personal-info {
  background-image: linear-gradient(to right, #f0fdfa, #ccfbf1) !important;
  border-bottom-color: #99f6e4 !important;
}
body.theme-narwhal .section-edit-personal-info .section-text { color: #134e4a !important; }
body.theme-narwhal .section-edit-personal-info .section-icon { color: #14b8a6 !important; }
body.theme-narwhal .section-edit-personal-info .section-desc { color: #0f766e !important; }

/* Attendance Export Type: Blue (FRESH) → Teal (Narwhal) */
body.theme-fresh-green .section-attendance-export {
  background-image: linear-gradient(to right, #eff6ff, #dbeafe) !important;
  border-bottom-color: #bfdbfe !important;
}
body.theme-fresh-green .section-attendance-export h4 { color: #1e3a8a !important; }
body.theme-fresh-green .section-attendance-export svg { color: #2563eb !important; }

body.theme-narwhal .section-attendance-export {
  background-image: linear-gradient(to right, #f0fdfa, #ccfbf1) !important;
  border-bottom-color: #99f6e4 !important;
}
body.theme-narwhal .section-attendance-export h4 { color: #134e4a !important; }
body.theme-narwhal .section-attendance-export svg { color: #14b8a6 !important; }

/* Users - User Info: Blue (FRESH) → Lime (Narwhal) */
body.theme-fresh-green .section-user-info {
  background-image: linear-gradient(to right, #eff6ff, #dbeafe) !important;
  border-bottom-color: #bfdbfe !important;
}
body.theme-fresh-green .section-user-info .section-text { color: #1e3a8a !important; }
body.theme-fresh-green .section-user-info .section-icon { color: #2563eb !important; }
body.theme-fresh-green .section-user-info .section-desc { color: #1d4ed8 !important; }

body.theme-narwhal .section-user-info {
  background-image: linear-gradient(to right, #f7fee7, #ecfccb) !important;
  border-bottom-color: #d9f99d !important;
}
body.theme-narwhal .section-user-info .section-text { color: #3f6212 !important; }
body.theme-narwhal .section-user-info .section-icon { color: #84cc16 !important; }
body.theme-narwhal .section-user-info .section-desc { color: #4d7c0f !important; }

/* Communications Title: Blue (FRESH) → Lime (Narwhal) */
body.theme-fresh-green .section-comms-title {
  background-image: linear-gradient(to right, #eff6ff, #dbeafe) !important;
  border-bottom-color: #bfdbfe !important;
}
body.theme-fresh-green .section-comms-title h4 { color: #1e40af !important; }
body.theme-fresh-green .section-comms-title svg { color: #2563eb !important; }

body.theme-narwhal .section-comms-title {
  background-image: linear-gradient(to right, #f7fee7, #ecfccb) !important;
  border-bottom-color: #d9f99d !important;
}
body.theme-narwhal .section-comms-title h4 { color: #3f6212 !important; }
body.theme-narwhal .section-comms-title svg { color: #84cc16 !important; }

/* Dashboard Card Buttons - Theme-Aware */
/* These swap between Blue (FRESH) and Emerald (Narwhal) */
body.theme-fresh-green .card-theme-swap {
  background-image: linear-gradient(to bottom right, #eff6ff, #dbeafe) !important;
  border-color: #bfdbfe !important;
}
body.theme-fresh-green .card-theme-swap:hover { border-color: #93c5fd !important; }
body.theme-fresh-green .card-theme-swap .card-text { color: #2563eb !important; }

body.theme-narwhal .card-theme-swap {
  background-image: linear-gradient(to bottom right, #f0fdf4, #dcfce7) !important;
  border-color: #bbf7d0 !important;
}
body.theme-narwhal .card-theme-swap:hover { border-color: #86efac !important; }
body.theme-narwhal .card-theme-swap .card-text { color: #16a34a !important; }

/* Dashboard Sections - Theme-Aware (for section headers in modals) */
/* Default styling (fallback when no theme class present) */
.section-theme-swap {
  background-image: linear-gradient(to right, #eff6ff, #dbeafe) !important;
  border-color: #bfdbfe !important;
}
.section-theme-swap h3,
.section-theme-swap h4 { color: #1e40af !important; }
.section-theme-swap svg { color: #2563eb !important; }
.section-theme-swap p { color: #1e3a8a !important; }

/* FRESH Green Theme */
body.theme-fresh-green .section-theme-swap {
  background-image: linear-gradient(to right, #eff6ff, #dbeafe) !important;
  border-color: #bfdbfe !important;
}
body.theme-fresh-green .section-theme-swap h3,
body.theme-fresh-green .section-theme-swap h4 { color: #1e40af !important; }
body.theme-fresh-green .section-theme-swap svg { color: #2563eb !important; }
body.theme-fresh-green .section-theme-swap p { color: #1e3a8a !important; }

body.theme-narwhal .section-theme-swap {
  background-image: linear-gradient(to right, #f0fdf4, #dcfce7) !important;
  border-color: #bbf7d0 !important;
}
body.theme-narwhal .section-theme-swap h3,
body.theme-narwhal .section-theme-swap h4 { color: #15803d !important; }
body.theme-narwhal .section-theme-swap svg { color: #16a34a !important; }
body.theme-narwhal .section-theme-swap p { color: #14532d !important; }

/* Tab icon theme swap (for Join Codes icon) */
body.theme-fresh-green .section-icon-theme-swap {
  color: #2563eb !important; /* blue-600 */
}

body.theme-narwhal .section-icon-theme-swap {
  color: #16a34a !important; /* green-600 */
}

/* Legendary Badge Styling - Reef Savior (Aquatic holographic effect) */
.badge-chip[data-badge="reef-savior"] {
  background: linear-gradient(135deg, #67e8f9 0%, #22d3ee 25%, #06b6d4 50%, #0891b2 75%, #0e7490 100%) !important;
  background-size: 200% 200% !important;
  animation: aquatic-shimmer 4s ease-in-out infinite !important;
  color: white !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 20px rgba(34, 211, 238, 0.4) !important;
  font-weight: 600 !important;
}

.badge-chip[data-badge="reef-savior"]:hover {
  box-shadow: 0 6px 16px rgba(6, 182, 212, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 25px rgba(34, 211, 238, 0.5) !important;
  transform: translateY(-2px) !important;
}

@keyframes aquatic-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Settings helpers: density, modal width, card elevation, nav collapse --- */
/* Density: adjusts spacing and small paddings to change UI density */
body.density-compact .card,
body.density-compact .theme-card,
body.density-compact .panel-card {
  padding: 0.5rem !important;
}
body.density-compact .text-xs { font-size: 0.72rem !important; }
body.density-compact .px-4 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }

body.density-normal .card,
body.density-normal .theme-card,
body.density-normal .panel-card {
  padding: 1rem !important;
}

body.density-relaxed .card,
body.density-relaxed .theme-card,
body.density-relaxed .panel-card {
  padding: 1.5rem !important;
}

/* Nav collapsed: shrink a common nav selector if present (best-effort) */
body.nav-collapsed .main-nav,
body.nav-collapsed nav.site-nav,
body.nav-collapsed .sidebar {
  width: 64px !important;
}
body.nav-collapsed .main-content { margin-left: 64px !important; }

/* Modal width variants (override #modal-content) */
body.modal-width-comfortable #modal-content { max-width: 900px !important; width: min(96vw,900px) !important; }
body.modal-width-wide #modal-content { max-width: 1200px !important; width: min(98vw,1200px) !important; }
body.modal-width-full #modal-content { max-width: 100vw !important; width: 100vw !important; margin: 0 6px !important; }

/* Card elevation helpers - apply to elements with .card class */
.card { transition: box-shadow 160ms ease, transform 160ms ease; }
.card.card-elevation-none { box-shadow: none !important; }
.card.card-elevation-subtle { box-shadow: 0 1px 4px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04) !important; }
.card.card-elevation-pronounced { box-shadow: 0 6px 18px rgba(16,24,40,0.12) !important; transform: translateY(-1px); }

/* Utility: when cardElevation setting is applied to body via data attribute, map to .card styles */
body[data-card-elevation="none"] .card { box-shadow: none !important; }
body[data-card-elevation="subtle"] .card { box-shadow: 0 1px 4px rgba(16,24,40,0.06) !important; }
body[data-card-elevation="pronounced"] .card { box-shadow: 0 6px 18px rgba(16,24,40,0.12) !important; }

/* Small helpers for the theme cards row */
.theme-swatch-row { display:flex; gap:6px; margin-top:10px; }
.theme-swatch { width:22%; height:26px; border-radius:6px; border:1px solid rgba(0,0,0,0.06); }

/* Color-blind mode minimal adjustments (placeholders - refine later) */
body.colorblind-deuteranopia .theme-swatch { filter: contrast(0.98) saturate(0.78) !important; }
body.colorblind-protanopia .theme-swatch { filter: contrast(0.98) saturate(0.82) !important; }
body.colorblind-tritanopia .theme-swatch { filter: contrast(0.98) saturate(0.82) hue-rotate(-8deg) !important; }

/* Map appearance.cardElevation into data attribute for CSS convenience (set by JS) */
/* Note: JS sets body.dataset.cardElevation accordingly when applying settings. */

/* ============================================= */
/* MOBILE MODAL IMPROVEMENTS                     */
/* Phones only - better navigation & usability   */
/* ============================================= */
@media screen and (max-width: 640px) {
  /* Make modal nearly full-screen on mobile for better usability */
  #modal {
    padding: 0 !important;
    align-items: flex-end !important; /* Slide up from bottom like mobile sheets */
  }

  #modal-content {
    max-width: 100vw !important;
    width: 100vw !important;
    max-height: 95vh !important;
    min-height: 50vh !important;
    margin: 0 !important;
    padding: 1rem !important;
    padding-top: 3.5rem !important; /* Extra space for close button */
    border-radius: 1.5rem 1.5rem 0 0 !important; /* Rounded top corners only */
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.15) !important;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    overscroll-behavior: contain; /* Prevent scroll chaining */
  }

  /* Larger, more accessible close button on mobile */
  #modal-header {
    position: relative !important;
    min-height: 2.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  #close-modal {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 1.5rem !important;
    background: var(--card-bg, rgba(255, 255, 255, 0.98)) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid var(--border-default, rgba(0, 0, 0, 0.15)) !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: var(--text-primary, #374151) !important;
  }
  
  /* Ensure modal-content has proper positioning context and padding for button */
  #modal-content {
    position: relative !important;
    padding-top: 3.5rem !important;
  }

  /* Dark mode close button */
  body.theme-dark-mode #close-modal {
    background: rgba(30, 41, 59, 0.95) !important;
    color: #e2e8f0 !important;
    border-color: rgba(100, 116, 139, 0.4) !important;
  }

  /* Mobile modal footer with close button */
  #modal-footer {
    display: flex !important;
    position: sticky !important;
    bottom: -1.5rem !important;
    background: var(--card-bg, rgba(255, 255, 255, 0.98)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid var(--border-default, rgba(0, 0, 0, 0.1)) !important;
    padding: 1rem 1.5rem !important;
    margin: 1rem -1rem -1rem -1rem !important;
    justify-content: center !important;
    z-index: 50 !important;
  }

  #modal-footer button {
    width: 100% !important;
    max-width: 320px !important;
    padding: 0.875rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    border-radius: 0.75rem !important;
  }

  /* Dark mode footer */
  body.theme-dark-mode #modal-footer {
    background: rgba(30, 41, 59, 0.98) !important;
    border-color: rgba(100, 116, 139, 0.3) !important;
  }

  /* Better touch targets for buttons inside modals */
  #modal-body button,
  #modal-body .btn,
  #modal-body [role="button"] {
    min-height: 44px !important; /* Apple's recommended touch target */
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* Better touch targets for inputs inside modals */
  #modal-body input,
  #modal-body select,
  #modal-body textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  /* Larger tap targets for checkboxes and radio buttons */
  #modal-body input[type="checkbox"],
  #modal-body input[type="radio"] {
    min-width: 1.25rem !important;
    min-height: 1.25rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Better spacing for form groups */
  #modal-body .space-y-4 > * + *,
  #modal-body .space-y-6 > * + * {
    margin-top: 1.25rem !important;
  }

  /* Make grid layouts stack on mobile */
  #modal-body .grid-cols-2,
  #modal-body .grid-cols-3,
  #modal-body .lg\\:grid-cols-2,
  #modal-body .lg\\:grid-cols-3,
  #modal-body .md\\:grid-cols-2,
  #modal-body .md\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Better tab navigation in modals */
  #modal-body .flex.border-b,
  #modal-body [role="tablist"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem !important;
  }

  #modal-body .flex.border-b::-webkit-scrollbar,
  #modal-body [role="tablist"]::-webkit-scrollbar {
    display: none !important;
  }

  /* Tab buttons should be scrollable, not wrap */
  #modal-body .flex.border-b > button,
  #modal-body [role="tab"] {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }

  /* Improve table readability on mobile */
  #modal-body table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  #modal-body th,
  #modal-body td {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.875rem !important;
    white-space: nowrap !important;
  }

  /* Add drag indicator at top of modal */
  #modal-content::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    margin: 0 auto 0.75rem auto;
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
  }

  body.theme-dark-mode #modal-content::before {
    background: rgba(255, 255, 255, 0.3);
  }

  /* Confirm modal mobile improvements */
  #confirm-modal .confirm-modal-container {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    border-radius: 1.5rem 1.5rem 0 0 !important;
    padding: 1.5rem !important;
    padding-top: 2rem !important;
  }

  #confirm-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Larger confirm/cancel buttons */
  #confirm-modal button {
    min-height: 48px !important;
    font-size: 1rem !important;
    padding: 0.875rem 1.5rem !important;
  }
}

/* Extra small phones (iPhone SE, etc.) */
@media screen and (max-width: 375px) {
  #modal-content {
    padding: 0.75rem !important;
    padding-top: 3rem !important;
  }

  #modal-body {
    font-size: 0.9rem !important;
  }

  /* Stack buttons vertically on very small screens */
  #modal-body .flex.gap-2,
  #modal-body .flex.gap-3,
  #modal-body .flex.gap-4 {
    flex-direction: column !important;
  }

  #modal-body .flex.gap-2 > button,
  #modal-body .flex.gap-3 > button,
  #modal-body .flex.gap-4 > button {
    width: 100% !important;
  }
}