/**
 * Theme Toggle CSS
 * 
 * This CSS file provides styling for light and dark mode themes
 * and the toggle switch to change between them.
 */

:root {
  /* Light Theme Variables (Default) */
  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;
  --bg-gradient-start: #f0f7ff;
  --bg-gradient-end: #ffffff;
  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --border-color: #e5e7eb;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --card-bg: #ffffff;
  --button-primary-bg: #2563eb;
  --button-primary-hover: #1d4ed8;
  --button-primary-text: #ffffff;
  --button-secondary-bg: #e5e7eb;
  --button-secondary-hover: #d1d5db;
  --button-secondary-text: #1f2937;
  --spinner-arrow-fill: #2563EB;
  --spinner-arrow-stroke: #1E40AF;
  --challenge-card-shadow: rgba(0, 0, 0, 0.1);
  --confetti-opacity: 1;
}

/* Dark Theme Variables */
[data-theme="dark"] {
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --bg-gradient-start: #0f172a;
  --bg-gradient-end: #1e293b;
  --text-primary: #f3f4f6;
  --text-secondary: #e5e7eb;
  --text-muted: #9ca3af;
  --border-color: #374151;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --card-bg: #1f2937;
  --button-primary-bg: #3b82f6;
  --button-primary-hover: #2563eb;
  --button-primary-text: #ffffff;
  --button-secondary-bg: #374151;
  --button-secondary-hover: #4b5563;
  --button-secondary-text: #f3f4f6;
  --spinner-arrow-fill: #3b82f6;
  --spinner-arrow-stroke: #2563eb;
  --challenge-card-shadow: rgba(0, 0, 0, 0.5);
  --confetti-opacity: 0.8;
}

/* Apply theme variables to elements */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.bg-gradient-custom {
  background-image: linear-gradient(to bottom, var(--bg-gradient-start), var(--bg-gradient-end));
}

.card-custom {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 6px var(--shadow-color);
}

.text-primary-custom {
  color: var(--text-primary);
}

.text-secondary-custom {
  color: var(--text-secondary);
}

.text-muted-custom {
  color: var(--text-muted);
}

.btn-primary-custom {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.btn-primary-custom:hover {
  background-color: var(--button-primary-hover);
}

.btn-secondary-custom {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

.btn-secondary-custom:hover {
  background-color: var(--button-secondary-hover);
}

/* Theme Toggle Switch */
.theme-toggle-container {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  justify-content: flex-end;
}

.theme-toggle-label {
  margin-right: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.theme-toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 26px;
}

.theme-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.4s;
  border-radius: 0;
}

.theme-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 0;
}

input:checked + .theme-toggle-slider {
  background-color: #3b82f6;
}

input:checked + .theme-toggle-slider:before {
  transform: translateX(26px);
}

/* Theme toggle icons */
.theme-toggle-slider:after {
  content: "☀️";
  position: absolute;
  left: 6px;
  top: 3px;
  font-size: 12px;
  transition: 0.4s;
  opacity: 1;
}

input:checked + .theme-toggle-slider:after {
  content: "🌙";
  left: 30px;
  opacity: 1;
}

/* Confetti adjustments for dark mode */
.confetti img {
  opacity: var(--confetti-opacity);
}

/* Challenge card adjustments */
.challenge-card {
  background-color: var(--card-bg);
  box-shadow: 0 4px 6px var(--challenge-card-shadow);
}

/* Footer adjustments */
footer {
  color: var(--text-muted);
}

/* Additional dark mode styles for common elements */
[data-theme="dark"] .bg-white {
  background-color: var(--card-bg) !important;
}

[data-theme="dark"] .bg-gray-100 {
  background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .bg-gray-50 {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .text-gray-700 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-900 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-600 {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .text-gray-500 {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .border-gray-100 {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-gray-200 {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-neutral-200 {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .text-neutral-700 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .hover\:bg-neutral-100:hover {
  background-color: var(--button-secondary-hover) !important;
}

[data-theme="dark"] .hover\:bg-gray-100:hover {
  background-color: var(--button-secondary-hover) !important;
}

[data-theme="dark"] .hover\:text-gray-700:hover {
  color: var(--text-primary) !important;
}

/* Navigation specific adjustments */
[data-theme="dark"] nav {
  background-color: var(--card-bg) !important;
}

[data-theme="dark"] .bg-green-800 {
  background-color: #059669 !important;
}

/* Button adjustments for dark mode */
[data-theme="dark"] .bg-blue-500 {
  background-color: var(--button-primary-bg) !important;
}

[data-theme="dark"] .hover\:bg-blue-600:hover {
  background-color: var(--button-primary-hover) !important;
}

/* Theme toggle specific positioning */
.theme-toggle-container {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .theme-toggle-container {
    margin-bottom: 0.25rem;
  }
  
  .theme-toggle-label {
    display: none;
  }
}

/* Enhanced header styles for manage.ejs */
.header-redesign {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 2px 4px var(--shadow-color);
}

/* Profile avatar enhancements */
.profile-avatar {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transition: all 0.2s ease;
}

.profile-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Action button improvements */
.action-button {
  position: relative;
  overflow: hidden;
}

.action-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.action-button:hover::before {
  left: 100%;
}

/* Free plan badge improvements */
.free-plan-badge {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* Dark mode enhancements for the new header */
[data-theme="dark"] .bg-green-600 {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

[data-theme="dark"] .border-gray-200 {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .shadow-lg {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .text-gray-400 {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .text-gray-600 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] .text-blue-600 {
  color: #60a5fa !important;
}

/* Comprehensive dark mode improvements for all sections */

/* Info boxes, tips, and alerts */
[data-theme="dark"] .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] .bg-yellow-50 {
  background-color: rgba(245, 158, 11, 0.1) !important;
}

[data-theme="dark"] .bg-yellow-100 {
  background-color: rgba(245, 158, 11, 0.2) !important;
}

[data-theme="dark"] .bg-green-50 {
  background-color: rgba(34, 197, 94, 0.1) !important;
}

[data-theme="dark"] .bg-green-100 {
  background-color: rgba(34, 197, 94, 0.2) !important;
}

[data-theme="dark"] .bg-red-50 {
  background-color: rgba(239, 68, 68, 0.1) !important;
}

[data-theme="dark"] .bg-red-100 {
  background-color: rgba(239, 68, 68, 0.2) !important;
}

/* Text colors for dark mode */
[data-theme="dark"] .text-blue-800 {
  color: #93c5fd !important;
}

[data-theme="dark"] .text-yellow-800 {
  color: #fbbf24 !important;
}

[data-theme="dark"] .text-green-800 {
  color: #4ade80 !important;
}

[data-theme="dark"] .text-red-800 {
  color: #f87171 !important;
}

/* Form inputs and textareas */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] input[type="search"]:focus,
[data-theme="dark"] input[type="url"]:focus,
[data-theme="dark"] input[type="tel"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  background-color: var(--bg-secondary) !important;
  border-color: var(--button-primary-bg) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Cards and containers */
[data-theme="dark"] .bg-slate-100 {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-slate-200 {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-slate-50 {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .text-slate-600 {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-slate-700 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-slate-800 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-slate-900 {
  color: var(--text-primary) !important;
}

/* Borders for dark mode */
[data-theme="dark"] .border-slate-200 {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-slate-300 {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-color) !important;
}

/* Tables */
[data-theme="dark"] table {
  background-color: var(--card-bg) !important;
}

[data-theme="dark"] th {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] td {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] tr:nth-child(even) {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] tr:hover {
  background-color: var(--bg-secondary) !important;
}

/* Buttons */
[data-theme="dark"] .bg-red-500 {
  background-color: #ef4444 !important;
}

[data-theme="dark"] .hover\:bg-red-600:hover {
  background-color: #dc2626 !important;
}

[data-theme="dark"] .bg-green-500 {
  background-color: #22c55e !important;
}

[data-theme="dark"] .hover\:bg-green-600:hover {
  background-color: #16a34a !important;
}

/* Modals and dropdowns */
[data-theme="dark"] .bg-gray-800 {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-gray-900 {
  background-color: var(--bg-primary) !important;
}

/* Special elements */
[data-theme="dark"] .shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .shadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .shadow-md {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4) !important;
}

/* File upload areas */
[data-theme="dark"] .border-dashed {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-dotted {
  border-color: var(--border-color) !important;
}

/* Chart and statistics cards - FIXED: More specific selectors */
[data-theme="dark"] .bg-white.rounded-lg,
[data-theme="dark"] .bg-white.rounded-xl,
[data-theme="dark"] .bg-white.rounded-md {
  background-color: var(--card-bg) !important;
}

/* Specific card-style elements only */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .card,
[data-theme="dark"] .widget {
  background-color: var(--card-bg) !important;
}

/* Additional specific fixes for manage.ejs sections */

/* Statistics cards at the top */
[data-theme="dark"] .bg-gradient-to-br {
  background: linear-gradient(to bottom right, var(--card-bg), var(--bg-secondary)) !important;
}

/* Info/tip boxes */
[data-theme="dark"] .bg-blue-50.border-blue-200 {
  background-color: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-theme="dark"] .bg-yellow-50.border-yellow-200 {
  background-color: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .bg-green-50.border-green-200 {
  background-color: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

/* Charts and canvas elements */
[data-theme="dark"] canvas {
  background-color: transparent !important;
}

[data-theme="dark"] .chart-container {
  background-color: var(--card-bg) !important;
}

/* Form sections */
[data-theme="dark"] .form-section {
  background-color: var(--card-bg) !important;
}

[data-theme="dark"] .form-group {
  background-color: var(--card-bg) !important;
}

/* File upload dropzones */
[data-theme="dark"] .dropzone {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .dropzone:hover {
  background-color: var(--bg-primary) !important;
}

/* Rating stars and widgets */
[data-theme="dark"] .rating-widget {
  background-color: var(--card-bg) !important;
}

[data-theme="dark"] .rating-summary {
  background-color: var(--card-bg) !important;
}

/* Access restriction cards */
[data-theme="dark"] .access-restricted {
  background-color: var(--card-bg) !important;
}

/* AI Assistant chat */
[data-theme="dark"] .chat-message {
  background-color: var(--card-bg) !important;
}

[data-theme="dark"] .chat-input {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Tab content areas */
[data-theme="dark"] .tab-content {
  background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .tab-pane {
  background-color: var(--bg-primary) !important;
}

/* Override for any remaining problematic elements */
[data-theme="dark"] .bg-white[class*="p-"],
[data-theme="dark"] .bg-white[class*="m-"],
[data-theme="dark"] .bg-white.rounded,
[data-theme="dark"] .bg-white.shadow {
  background-color: var(--card-bg) !important;
}

/* Special handling for specific components */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .widget,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] .content-wrapper {
  background-color: var(--card-bg) !important;
}

/* Fix for any remaining light backgrounds */
[data-theme="dark"] div[class*="bg-"][class*="50"],
[data-theme="dark"] div[class*="bg-"][class*="100"] {
  background-color: var(--card-bg) !important;
}

/* Text readability improvements */
[data-theme="dark"] .text-gray-800 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-900 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-black {
  color: var(--text-primary) !important;
}

/* Modal and Popup Improvements */

/* Modal overlays and backgrounds */
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-dialog,
[data-theme="dark"] .modal-content {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .modal-header {
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .modal-body {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .modal-footer {
  background-color: var(--bg-secondary) !important;
  border-top: 1px solid var(--border-color) !important;
}

/* Scorecard Configuration Modal */
[data-theme="dark"] .scorecard-config-modal {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .scorecard-config-modal .modal-title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .scorecard-config-modal .close {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .scorecard-config-modal .card-option {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .scorecard-config-modal .card-option:hover {
  background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .scorecard-config-modal .card-option.selected {
  background-color: var(--button-primary-bg) !important;
  border-color: var(--button-primary-bg) !important;
}

/* Template Selection Modal */
[data-theme="dark"] .template-selection-modal {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .template-selection-modal .template-card {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .template-selection-modal .template-card:hover {
  background-color: var(--bg-primary) !important;
}

/* Generic popup/overlay fixes */
[data-theme="dark"] .popup,
[data-theme="dark"] .overlay,
[data-theme="dark"] .dialog {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .popup-content:not(#preview-popup .popup-content),
[data-theme="dark"] .dialog-content {
  background-color: var(--bg-secondary) !important;
}

/* Preview popup content must be transparent to show parent's background */
#preview-popup .popup-content {
  background-color: transparent !important;
}

/* Alpine.js modals and overlays */
[data-theme="dark"] [x-data] .modal,
[data-theme="dark"] [x-data] .popup {
  background-color: var(--bg-secondary) !important;
}

/* Fixed positioning overlays - only for modal backdrops with specific bg classes */
[data-theme="dark"] .fixed.inset-0.bg-black\\/50,
[data-theme="dark"] .fixed.inset-0.bg-gray-500\\/75 {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Popup buttons and controls */
[data-theme="dark"] .popup .btn,
[data-theme="dark"] .modal .btn {
  background-color: var(--button-secondary-bg) !important;
  color: var(--button-secondary-text) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .popup .btn:hover,
[data-theme="dark"] .modal .btn:hover {
  background-color: var(--button-secondary-hover) !important;
}

[data-theme="dark"] .popup .btn-primary,
[data-theme="dark"] .modal .btn-primary {
  background-color: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
}

[data-theme="dark"] .popup .btn-primary:hover,
[data-theme="dark"] .modal .btn-primary:hover {
  background-color: var(--button-primary-hover) !important;
}

/* Checkbox and radio button styling in modals */
[data-theme="dark"] .modal input[type="checkbox"],
[data-theme="dark"] .popup input[type="checkbox"],
[data-theme="dark"] .modal input[type="radio"],
[data-theme="dark"] .popup input[type="radio"] {
  accent-color: var(--button-primary-bg) !important;
}

/* Select dropdowns in modals */
[data-theme="dark"] .modal select,
[data-theme="dark"] .popup select {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Close buttons */
[data-theme="dark"] .close,
[data-theme="dark"] .modal-close,
[data-theme="dark"] .popup-close {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .close:hover,
[data-theme="dark"] .modal-close:hover,
[data-theme="dark"] .popup-close:hover {
  color: var(--text-secondary) !important;
}

/* Specific component fixes */
[data-theme="dark"] .bg-gray-800.bg-opacity-50 {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .bg-gray-800.bg-opacity-75 {
  background-color: rgba(0, 0, 0, 0.9) !important;
}

/* Premium badges and labels in modals */
[data-theme="dark"] .badge-premium,
[data-theme="dark"] .premium-label {
  background-color: rgba(139, 92, 246, 0.2) !important;
  color: #a78bfa !important;
}

/* Feature section styling */
[data-theme="dark"] .feature-section {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .feature-section.disabled {
  background-color: var(--bg-secondary) !important;
  opacity: 0.6;
}

/* Modal container overrides - more specific selectors */
[data-theme="dark"] .modal-container,
[data-theme="dark"] .dialog-container {
  background-color: var(--bg-secondary) !important;
}

/* Scorecard Add Player Popup - Override inline white background */
[data-theme="dark"] #add-player-popup > div {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] #add-player-popup h3,
[data-theme="dark"] #add-player-popup label,
[data-theme="dark"] #color-selection-section > label {
  color: var(--text-primary) !important;
}

[data-theme="dark"] #add-player-popup #tap-photo-text {
  color: var(--text-muted) !important;
}

[data-theme="dark"] #add-player-popup #player-name-label {
  color: #60a5fa !important;
}

[data-theme="dark"] #add-player-popup #player-name-input {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] #add-player-popup #photo-empty-state {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] #add-player-popup #cancel-add-player {
  background: var(--button-secondary-bg) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .relative.transform {
  background-color: var(--bg-secondary) !important;
}

/* Specific fixes for the modals in the screenshots */

/* Create Scorecard Modal - the main modal container */
[data-theme="dark"] .create-scorecard-modal {
  background-color: var(--bg-secondary) !important;
}

/* Template selection cards */
[data-theme="dark"] .template-option-card {
  background-color: var(--card-bg) !important;
  border: 2px solid var(--border-color) !important;
}

[data-theme="dark"] .template-option-card:hover {
  background-color: var(--bg-primary) !important;
  border-color: var(--button-primary-bg) !important;
}

/* Scorecard configuration sections */
[data-theme="dark"] .hole-config-section {
  background-color: var(--card-bg) !important;
}

[data-theme="dark"] .hole-config-option {
  background-color: var(--card-bg) !important;
  border: 2px solid var(--border-color) !important;
}

[data-theme="dark"] .hole-config-option.selected {
  background-color: var(--button-primary-bg) !important;
  border-color: var(--button-primary-bg) !important;
  color: white !important;
}

[data-theme="dark"] .hole-config-option:hover {
  background-color: var(--bg-primary) !important;
}

/* Feature toggle sections */
[data-theme="dark"] .feature-toggle-section {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .feature-toggle-section.disabled {
  background-color: var(--bg-secondary) !important;
  opacity: 0.5;
}

/* Tailwind specific overrides for modals - only when combined with bg-white */
[data-theme="dark"] .max-w-md.bg-white,
[data-theme="dark"] .max-w-lg.bg-white,
[data-theme="dark"] .max-w-xl.bg-white,
[data-theme="dark"] .max-w-2xl.bg-white {
  background-color: var(--bg-secondary) !important;
}

/* Round classes that might be modals */
[data-theme="dark"] .rounded-lg.bg-white,
[data-theme="dark"] .rounded-xl.bg-white,
[data-theme="dark"] .rounded-2xl.bg-white,
[data-theme="dark"] .rounded-3xl.bg-white {
  background-color: var(--bg-secondary) !important;
}

/* Padding classes that are likely modal content */
[data-theme="dark"] .p-6.bg-white,
[data-theme="dark"] .p-8.bg-white,
[data-theme="dark"] .px-6.py-8.bg-white,
[data-theme="dark"] .px-8.py-6.bg-white {
  background-color: var(--bg-secondary) !important;
}

/* Specific modal backdrop overrides */
[data-theme="dark"] .fixed.inset-0.bg-black,
[data-theme="dark"] .fixed.inset-0.bg-gray-900 {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Modal content containers */
[data-theme="dark"] .modal-container {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .dialog-container {
  background-color: var(--bg-secondary) !important;
}

/* Alpine.js specific modal overrides */
[data-theme="dark"] [x-show] .bg-white,
[data-theme="dark"] [x-transition] .bg-white {
  background-color: var(--bg-secondary) !important;
}

/* Handle any remaining white sections in popups */
[data-theme="dark"] .popup-section,
[data-theme="dark"] .modal-section {
  background-color: var(--bg-secondary) !important;
}

/* Icon circles and badges in modals */
[data-theme="dark"] .icon-circle {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .status-badge {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
}

/* Override any inline styles that might be applied */
[data-theme="dark"] [style*="background-color: white"]:not(#preview-popup),
[data-theme="dark"] [style*="background-color: #ffffff"]:not(#preview-popup),
[data-theme="dark"] [style*="background-color: #fff"]:not(#preview-popup) {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] [style*="background: white"]:not(#preview-popup),
[data-theme="dark"] [style*="background: #ffffff"]:not(#preview-popup),
[data-theme="dark"] [style*="background: #fff"]:not(#preview-popup) {
  background-color: var(--bg-secondary) !important;
}


/* Dashboard Tabs Improvements */

/* Tab container styling */
.dashboard-tabs {
  display: flex;
  width: 100%;
  background-color: var(--bg-secondary);
  border-radius: 0;
  padding: 6px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px var(--shadow-color);
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

[data-theme="dark"] .dashboard-tabs {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Individual tab styling */
.dashboard-tab {
  flex: 1;
  min-width: 120px;
  padding: 12px 16px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  background-color: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.dashboard-tab:hover {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transform: translateY(-2px);
}

.dashboard-tab.active {
  background-color: var(--button-primary-bg);
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .dashboard-tab.active {
  background-color: var(--button-primary-bg);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Active tab indicator */
.dashboard-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0.8), rgba(255,255,255,0.3));
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

/* Responsive tab layout */
@media (max-width: 768px) {
  .dashboard-tabs {
    padding: 4px;
    border-radius: 0;
  }
  
  .dashboard-tab {
    min-width: 100px;
    padding: 10px 12px;
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  .dashboard-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  
  .dashboard-tab {
    flex: 0 0 auto;
    min-width: 90px;
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* Tab content area */
.dashboard-tab-content {
  background-color: var(--bg-primary);
  border-radius: 0;
  padding: 24px;
  margin-top: 1rem;
  box-shadow: 0 2px 8px var(--shadow-color);
}

[data-theme="dark"] .dashboard-tab-content {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Specific tab styling overrides */
[data-theme="dark"] .nav-tabs {
  background-color: var(--bg-secondary) !important;
  border: none !important;
  border-radius: 0;
  padding: 6px !important;
  margin-bottom: 1rem !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0;
  padding: 12px 16px !important;
  margin: 0 2px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  transform: translateY(-2px) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--button-primary-bg) !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

/* Tab pane content */
[data-theme="dark"] .tab-pane {
  background-color: var(--bg-primary) !important;
  border-radius: 0;
  padding: 24px !important;
  margin-top: 1rem !important;
}

/* Alternative tab styling for different implementations */
[data-theme="dark"] .dashboard-nav {
  background-color: var(--bg-secondary) !important;
  border-radius: 0;
  padding: 6px !important;
  display: flex !important;
  width: 100% !important;
  overflow-x: auto !important;
}

[data-theme="dark"] .dashboard-nav-item {
  flex: 1 !important;
  min-width: 120px !important;
  padding: 12px 16px !important;
  text-align: center !important;
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
}

[data-theme="dark"] .dashboard-nav-item:hover {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  transform: translateY(-2px) !important;
}

[data-theme="dark"] .dashboard-nav-item.active {
  background-color: var(--button-primary-bg) !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

/* Scrollbar styling for mobile */
.dashboard-tabs::-webkit-scrollbar {
  height: 4px;
}

.dashboard-tabs::-webkit-scrollbar-track {
  background: var(--bg-primary);
  border-radius: 0;
}

.dashboard-tabs::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 0;
}

.dashboard-tabs::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Ensure tabs fill the full width */
.dashboard-tabs-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Fix for any existing tab implementations */
[data-theme="dark"] .tabs-container {
  background-color: var(--bg-secondary) !important;
  border-radius: 0;
  padding: 6px !important;
  width: 100% !important;
}

[data-theme="dark"] .tab-button {
  flex: 1 !important;
  background-color: transparent !important;
  color: var(--text-secondary) !important;
  border: none !important;
  border-radius: 0;
  padding: 12px 16px !important;
  transition: all 0.3s ease !important;
}

[data-theme="dark"] .tab-button:hover {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .tab-button.active {
  background-color: var(--button-primary-bg) !important;
  color: white !important;
  font-weight: 600 !important;
}

/* ========================================
   DASHBOARD MAIN CONTENT AREA DARK MODE
   ======================================== */

/* Main content wrapper - the flex container */
[data-theme="dark"] .main-content-wrapper {
  background-color: var(--bg-primary) !important;
}

/* Main content area - where the tab content lives */
[data-theme="dark"] .main-content-area {
  background-color: var(--bg-primary) !important;
}

/* Sidebar modern dark mode */
[data-theme="dark"] .sidebar-modern {
  background-color: var(--bg-secondary) !important;
  border-right-color: var(--border-color) !important;
}

[data-theme="dark"] .sidebar-modern .sidebar-header-modern {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .sidebar-modern .sidebar-nav-modern {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .sidebar-item-modern {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .sidebar-item-modern:hover {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .sidebar-item-modern.sidebar-active {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #4ade80 !important;
}

[data-theme="dark"] .sidebar-item-modern .sidebar-icon {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .sidebar-item-modern:hover .sidebar-icon {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .sidebar-item-modern.sidebar-active .sidebar-icon {
  color: #4ade80 !important;
}

/* Sidebar overlay */
[data-theme="dark"] .sidebar-overlay {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Dashboard stat cards - LIGHT MODE explicit */
.stat-card {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

.stat-card-icon {
  background-color: #f3f4f6 !important;
}

/* Dashboard stat cards - DARK MODE */
[data-theme="dark"] .stat-card {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .stat-card:hover {
  border-color: #475569 !important;
}

[data-theme="dark"] .stat-card-icon {
  background-color: #334155 !important;
}

/* Tab content areas */
.tab-content {
  background-color: transparent !important;
}

[data-theme="dark"] .tab-content {
  background-color: transparent !important;
}

/* Main content wrapper - LIGHT MODE */
.main-content-wrapper {
  background-color: #f3f4f6 !important;
}

.main-content-area {
  background-color: #f3f4f6 !important;
}

/* Main content wrapper - DARK MODE */
[data-theme="dark"] .main-content-wrapper {
  background-color: #0f172a !important;
}

[data-theme="dark"] .main-content-area {
  background-color: #0f172a !important;
}

/* Sidebar - LIGHT MODE */
.sidebar-modern {
  background-color: #ffffff !important;
  border-right-color: #e5e7eb !important;
}

/* Sidebar - DARK MODE */
[data-theme="dark"] .sidebar-modern {
  background-color: #1e293b !important;
  border-right-color: #334155 !important;
}

/* Sidebar items - LIGHT MODE */
.sidebar-item-modern {
  color: #6b7280 !important;
}

.sidebar-item-modern:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

/* Sidebar items - DARK MODE */
[data-theme="dark"] .sidebar-item-modern {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .sidebar-item-modern:hover {
  background-color: #334155 !important;
  color: #f8fafc !important;
}

/* White cards/containers - LIGHT MODE (explicit) */
.bg-white {
  background-color: #ffffff !important;
}

/* White cards/containers - DARK MODE */
[data-theme="dark"] .bg-white {
  background-color: #1e293b !important;
}

/* Gray backgrounds - LIGHT MODE */
.bg-gray-50 {
  background-color: #f9fafb !important;
}

.bg-gray-100 {
  background-color: #f3f4f6 !important;
}

/* Gray backgrounds - DARK MODE */
[data-theme="dark"] .bg-gray-50 {
  background-color: #334155 !important;
}

[data-theme="dark"] .bg-gray-100 {
  background-color: #1e293b !important;
}

/* Text colors - LIGHT MODE */
.text-gray-900 {
  color: #111827 !important;
}

.text-gray-800 {
  color: #1f2937 !important;
}

.text-gray-700 {
  color: #374151 !important;
}

.text-gray-600 {
  color: #4b5563 !important;
}

.text-gray-500 {
  color: #6b7280 !important;
}

/* Text colors - DARK MODE */
[data-theme="dark"] .text-gray-900 {
  color: #f8fafc !important;
}

[data-theme="dark"] .text-gray-800 {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .text-gray-700 {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .text-gray-600 {
  color: #94a3b8 !important;
}

[data-theme="dark"] .text-gray-500 {
  color: #64748b !important;
}

/* Border colors - LIGHT MODE */
.border-gray-200 {
  border-color: #e5e7eb !important;
}

.border-gray-100 {
  border-color: #f3f4f6 !important;
}

/* Border colors - DARK MODE */
[data-theme="dark"] .border-gray-200 {
  border-color: #334155 !important;
}

[data-theme="dark"] .border-gray-100 {
  border-color: #475569 !important;
}

/* Free plan banner */
[data-theme="dark"] .free-plan-banner {
  background-color: #1e293b !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .free-plan-info {
  color: var(--text-primary) !important;
}

/* Quick Actions section in mobile sidebar */
[data-theme="dark"] .lg\:hidden .border-b {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .lg\:hidden .bg-gray-50 {
  background-color: var(--bg-secondary) !important;
}

/* Navigation bar dark mode */
[data-theme="dark"] .nav-mobile {
  background-color: var(--bg-secondary) !important;
  border-bottom-color: var(--border-color) !important;
}

/* ============================================
   WAIVER SECTION - FORCE LIGHT MODE STYLES
   Override Tailwind's prefers-color-scheme dark mode
   when the app theme is set to light (no data-theme="dark")
   ============================================ */

/* Light mode overrides for waiver section details/summary */
:root:not([data-theme="dark"]) details.bg-gray-50,
html:not([data-theme="dark"]) details.bg-gray-50,
body:not([data-theme="dark"]) details.bg-gray-50 {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
}

:root:not([data-theme="dark"]) details.bg-gray-50 summary,
html:not([data-theme="dark"]) details.bg-gray-50 summary,
body:not([data-theme="dark"]) details.bg-gray-50 summary {
  color: #1f2937 !important;
}

:root:not([data-theme="dark"]) details.bg-gray-50 summary svg,
html:not([data-theme="dark"]) details.bg-gray-50 summary svg,
body:not([data-theme="dark"]) details.bg-gray-50 summary svg {
  color: #4b5563 !important;
}

/* Light mode text colors inside waiver details */
:root:not([data-theme="dark"]) details.bg-gray-50 .text-gray-700,
html:not([data-theme="dark"]) details.bg-gray-50 .text-gray-700,
body:not([data-theme="dark"]) details.bg-gray-50 .text-gray-700 {
  color: #374151 !important;
}

:root:not([data-theme="dark"]) details.bg-gray-50 .text-gray-500,
html:not([data-theme="dark"]) details.bg-gray-50 .text-gray-500,
body:not([data-theme="dark"]) details.bg-gray-50 .text-gray-500 {
  color: #6b7280 !important;
}

:root:not([data-theme="dark"]) details.bg-gray-50 .text-gray-800,
html:not([data-theme="dark"]) details.bg-gray-50 .text-gray-800,
body:not([data-theme="dark"]) details.bg-gray-50 .text-gray-800 {
  color: #1f2937 !important;
}

/* Light mode border inside waiver details */
:root:not([data-theme="dark"]) details.bg-gray-50 .border-gray-200,
html:not([data-theme="dark"]) details.bg-gray-50 .border-gray-200,
body:not([data-theme="dark"]) details.bg-gray-50 .border-gray-200 {
  border-color: #e5e7eb !important;
}

/* Light mode toggle background inside waiver details */
:root:not([data-theme="dark"]) details.bg-gray-50 .bg-gray-300,
html:not([data-theme="dark"]) details.bg-gray-50 .bg-gray-300,
body:not([data-theme="dark"]) details.bg-gray-50 .bg-gray-300 {
  background-color: #d1d5db !important;
}

/* Light mode for Document Configuration section */
:root:not([data-theme="dark"]) .mb-8.p-6.bg-white,
html:not([data-theme="dark"]) .mb-8.p-6.bg-white,
body:not([data-theme="dark"]) .mb-8.p-6.bg-white {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

:root:not([data-theme="dark"]) .mb-8.p-6.bg-white .text-gray-900,
html:not([data-theme="dark"]) .mb-8.p-6.bg-white .text-gray-900,
body:not([data-theme="dark"]) .mb-8.p-6.bg-white .text-gray-900 {
  color: #111827 !important;
}

:root:not([data-theme="dark"]) .mb-8.p-6.bg-white .text-gray-700,
html:not([data-theme="dark"]) .mb-8.p-6.bg-white .text-gray-700,
body:not([data-theme="dark"]) .mb-8.p-6.bg-white .text-gray-700 {
  color: #374151 !important;
}

:root:not([data-theme="dark"]) .mb-8.p-6.bg-white .text-gray-600,
html:not([data-theme="dark"]) .mb-8.p-6.bg-white .text-gray-600,
body:not([data-theme="dark"]) .mb-8.p-6.bg-white .text-gray-600 {
  color: #4b5563 !important;
}

/* Light mode for waiver section option cards */
:root:not([data-theme="dark"]) .mb-8.p-6.bg-white .bg-white,
html:not([data-theme="dark"]) .mb-8.p-6.bg-white .bg-white,
body:not([data-theme="dark"]) .mb-8.p-6.bg-white .bg-white {
  background-color: #ffffff !important;
}

:root:not([data-theme="dark"]) .mb-8.p-6.bg-white .border-gray-300,
html:not([data-theme="dark"]) .mb-8.p-6.bg-white .border-gray-300,
body:not([data-theme="dark"]) .mb-8.p-6.bg-white .border-gray-300 {
  border-color: #d1d5db !important;
}

/* Light mode for waiver header stats */
:root:not([data-theme="dark"]) .bg-blue-50,
html:not([data-theme="dark"]) .bg-blue-50,
body:not([data-theme="dark"]) .bg-blue-50 {
  background-color: #eff6ff !important;
}

:root:not([data-theme="dark"]) .bg-green-50,
html:not([data-theme="dark"]) .bg-green-50,
body:not([data-theme="dark"]) .bg-green-50 {
  background-color: #f0fdf4 !important;
}

/* Light mode for waiver tab navigation */
:root:not([data-theme="dark"]) .border-b.border-gray-200,
html:not([data-theme="dark"]) .border-b.border-gray-200,
body:not([data-theme="dark"]) .border-b.border-gray-200 {
  border-color: #e5e7eb !important;
}

:root:not([data-theme="dark"]) .text-gray-500,
html:not([data-theme="dark"]) .text-gray-500,
body:not([data-theme="dark"]) .text-gray-500 {
  color: #6b7280 !important;
}

/* ============================================
   WAIVER CARDS - DARK MODE STYLES
   Only apply when html.dark class is present (app dark mode)
   ============================================ */

/* Blue card - Minor Guardian Protection - Dark Mode */
html.dark .bg-blue-50 {
  background-color: rgba(30, 64, 175, 0.25) !important;
}

html.dark .border-blue-400 {
  border-color: #3b82f6 !important;
}

html.dark .text-blue-900 {
  color: #bfdbfe !important;
}

html.dark .text-blue-700 {
  color: #93c5fd !important;
}

html.dark .text-blue-600 {
  color: #60a5fa !important;
}

/* Purple cards - AI Generator & Multiple Documents - Dark Mode */
html.dark .bg-purple-50 {
  background-color: rgba(126, 34, 206, 0.2) !important;
}

html.dark .border-purple-400 {
  border-color: #a855f7 !important;
}

html.dark .text-purple-900 {
  color: #e9d5ff !important;
}

html.dark .text-purple-700 {
  color: #d8b4fe !important;
}

html.dark .from-purple-50 {
  --tw-gradient-from: rgba(126, 34, 206, 0.2) !important;
}

html.dark .to-blue-50 {
  --tw-gradient-to: rgba(30, 64, 175, 0.2) !important;
}

/* Amber warning boxes - Dark Mode */
html.dark .bg-amber-50 {
  background-color: rgba(180, 83, 9, 0.2) !important;
}

html.dark .border-amber-400 {
  border-color: #f59e0b !important;
}

html.dark .text-amber-900 {
  color: #fef3c7 !important;
}

html.dark .text-amber-700 {
  color: #fcd34d !important;
}

html.dark .text-amber-600 {
  color: #fbbf24 !important;
}

/* Generate Waiver button & similar gradient buttons - preserve gradient and text color in both modes */
.bg-gradient-to-r.from-purple-600.to-blue-600,
.bg-gradient-to-r.from-purple-600.to-blue-600.hover\:from-purple-700.hover\:to-blue-700 {
  background: linear-gradient(to right, #9333ea, #2563eb) !important;
  color: #ffffff !important;
}

.bg-gradient-to-r.from-purple-600.to-blue-600:hover,
.bg-gradient-to-r.from-purple-600.to-blue-600.hover\:from-purple-700.hover\:to-blue-700:hover {
  background: linear-gradient(to right, #7e22ce, #1d4ed8) !important;
  color: #ffffff !important;
}

html.dark .bg-gradient-to-r.from-purple-600.to-blue-600,
[data-theme="dark"] .bg-gradient-to-r.from-purple-600.to-blue-600 {
  background: linear-gradient(to right, #9333ea, #2563eb) !important;
  color: #ffffff !important;
}

html.dark .bg-gradient-to-r.from-purple-600.to-blue-600:hover,
[data-theme="dark"] .bg-gradient-to-r.from-purple-600.to-blue-600:hover {
  background: linear-gradient(to right, #7e22ce, #1d4ed8) !important;
  color: #ffffff !important;
}

/* Ensure text-white is preserved on gradient buttons */
.bg-gradient-to-r.text-white {
  color: #ffffff !important;
}

/* ============================================
   NAVIGATION SECTION - Theme-Aware Styling
   Uses custom classes to avoid Tailwind dark: conflicts
   ============================================ */

/* Navigation section - LIGHT MODE (default) */
.nav-section {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* Navigation section - DARK MODE */
[data-theme="dark"] .nav-section,
html.dark .nav-section {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}

/* Mobile menu button - LIGHT MODE */
.nav-menu-btn {
  color: #374151 !important;
}

.nav-menu-btn:hover {
  background-color: #f3f4f6 !important;
}

/* Mobile menu button - DARK MODE */
[data-theme="dark"] .nav-menu-btn,
html.dark .nav-menu-btn {
  color: #e5e7eb !important;
}

[data-theme="dark"] .nav-menu-btn:hover,
html.dark .nav-menu-btn:hover {
  background-color: #374151 !important;
}

/* Navigation icon (hamburger menu) - LIGHT MODE */
.nav-icon {
  color: #111827 !important;
}

/* Navigation icon - DARK MODE */
[data-theme="dark"] .nav-icon,
html.dark .nav-icon {
  color: #ffffff !important;
}

/* Navigation greeting text - LIGHT MODE */
.nav-greeting {
  color: #374151 !important;
}

/* Navigation greeting text - DARK MODE */
[data-theme="dark"] .nav-greeting,
html.dark .nav-greeting {
  color: #e5e7eb !important;
}

/* Navigation action button - LIGHT MODE */
.nav-action-btn {
  color: #6b7280 !important;
}

.nav-action-btn:hover {
  color: #374151 !important;
  background-color: #f3f4f6 !important;
}

/* Navigation action button - DARK MODE */
[data-theme="dark"] .nav-action-btn,
html.dark .nav-action-btn {
  color: #9ca3af !important;
}

[data-theme="dark"] .nav-action-btn:hover,
html.dark .nav-action-btn:hover {
  color: #e5e7eb !important;
  background-color: #374151 !important;
}

/* ============================================
   GRADIENT BUTTONS - Preserve in all modes
   Staff Kiosk, Digital Signage, and similar buttons
   ============================================ */

/* Emerald/Teal gradient buttons (Staff Kiosk) - BOTH MODES */
.bg-gradient-to-r.from-emerald-500.to-teal-600,
.bg-gradient-to-r.from-emerald-500.to-teal-600.hover\:from-emerald-600.hover\:to-teal-700 {
  background: linear-gradient(to right, #10b981, #0d9488) !important;
  color: #ffffff !important;
}

.bg-gradient-to-r.from-emerald-500.to-teal-600:hover {
  background: linear-gradient(to right, #059669, #0f766e) !important;
  color: #ffffff !important;
}

/* Green/Emerald gradient buttons (Digital Signage) - BOTH MODES */
.bg-gradient-to-r.from-green-600.to-emerald-600,
.bg-gradient-to-r.from-green-600.to-emerald-600.hover\:from-green-700.hover\:to-emerald-700 {
  background: linear-gradient(to right, #16a34a, #059669) !important;
  color: #ffffff !important;
}

.bg-gradient-to-r.from-green-600.to-emerald-600:hover {
  background: linear-gradient(to right, #15803d, #047857) !important;
  color: #ffffff !important;
}

/* Ensure text-white class is always white on gradient buttons */
.bg-gradient-to-r.text-white,
.bg-gradient-to-r .text-white,
nav .bg-gradient-to-r {
  color: #ffffff !important;
}

nav .bg-gradient-to-r span {
  color: #ffffff !important;
}

nav .bg-gradient-to-r svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Staff Kiosk Button - Explicit styling to avoid Tailwind issues */
.staff-kiosk-btn {
  background: linear-gradient(to right, #10b981, #0d9488) !important;
  color: #ffffff !important;
}

.staff-kiosk-btn:hover {
  background: linear-gradient(to right, #059669, #0f766e) !important;
  color: #ffffff !important;
}

.staff-kiosk-btn span,
.staff-kiosk-btn svg {
  color: #ffffff !important;
}

.staff-kiosk-btn svg {
  stroke: #ffffff !important;
}

/* Emerald solid buttons - for "Open Staff Kiosk" and similar */
.bg-emerald-600 {
  background-color: #059669 !important;
  color: #ffffff !important;
}

.bg-emerald-600:hover,
.hover\:bg-emerald-700:hover {
  background-color: #047857 !important;
}

/* Emerald gradient backgrounds */
.from-emerald-500 {
  --tw-gradient-from: #10b981 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-teal-600 {
  --tw-gradient-to: #0d9488 !important;
}

.to-teal-500 {
  --tw-gradient-to: #14b8a6 !important;
}

/* Emerald gradient icon containers */
.bg-gradient-to-br.from-emerald-500.to-teal-500,
.bg-gradient-to-br.from-emerald-500.to-teal-600 {
  background: linear-gradient(to bottom right, #10b981, #0d9488) !important;
}

/* Ensure all emerald buttons have white text */
[class*="bg-emerald"] {
  color: #ffffff !important;
}

[class*="from-emerald"] {
  color: #ffffff !important;
}

/* ============================================
   GLOBAL FORM STYLING - SQUARE UI CONSISTENT
   ============================================ */

/* Form inputs - consistent border radius */
.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea {
  border-radius: 6px !important;
}

/* Cards and panels - consistent styling */
.rounded-lg {
  border-radius: 8px !important;
}

.rounded-xl {
  border-radius: 12px !important;
}

/* Buttons - consistent border radius */
button:not(.rounded-full):not([class*="rounded-"]),
.btn,
[class*="btn-"] {
  border-radius: 6px;
}

/* Dark mode form inputs */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}