/* ========================================
   COMPREHENSIVE THEME APPLICATION
   Applies theme variables to ALL page elements
   ======================================== */

/* Map template system variables to theme variables */
:root {
  --bg-primary: var(--theme-background) !important;
  --bg-secondary: var(--theme-background) !important;
  --bg-tertiary: var(--theme-background) !important;
  --bg-hover: var(--theme-surface) !important;
  --text-primary: var(--theme-text) !important;
  --text-secondary: var(--theme-text-secondary) !important;
  --text-tertiary: var(--theme-text-secondary) !important;
  --border-color: var(--theme-border) !important;
  --border-color-light: var(--theme-border) !important;
  --template-primary: var(--theme-primary) !important;
  --template-secondary: var(--theme-secondary) !important;
}

/* Project type buttons in create project wizard */
.project-type-btn {
  background: var(--theme-background) !important;
  color: var(--theme-text) !important;
  border: 2px solid var(--theme-primary) !important;
}

.project-type-btn:hover {
  background: var(--theme-surface) !important;
  border-color: var(--theme-primary) !important;
}

.project-type-btn .icon {
  color: var(--theme-text) !important;
}

/* ========================================
   1. GLOBAL DEFAULTS
   ======================================== */

body {
  background: var(--theme-background, #ffffff) !important;
  color: var(--theme-text, #1a1a1a) !important;
}

* {
  border-color: var(--theme-border, #e0e0e0);
}

/* Force theme colors on common elements */
div, section, nav, header, footer, main, aside {
  background-color: inherit;
  color: inherit;
}

/* ========================================
   2. CARDS & CONTAINERS
   ======================================== */

.card,
.modal-content,
.checkout-modal,
#mainPanel,
#weekCard,
#monthCard,
#timesCard,
#marketplace-container,
#projects-container,
#main-site-nav,
.wizard-cards-container,
.provider-card,
.service-card,
.template-card,
.project-card,
.task-card {
  background: var(--theme-surface, #f8f9fa) !important;
  border-color: var(--theme-border, #e0e0e0) !important;
  color: var(--theme-text, #1a1a1a) !important;
}

/* ========================================
   3. NAVIGATION & TABS
   ======================================== */

#main-site-nav {
  background: var(--theme-surface, #f8f9fa) !important;
  border-bottom-color: var(--theme-border, #e0e0e0);
}

/* Navigation containers - tab layout */
.marketplace-nav {
  display: flex;
  gap: 0 !important;
  padding: 0 !important;
  background: var(--theme-surface, #f8f9fa) !important;
  border-bottom: 1px solid var(--theme-border, #e0e0e0);
  flex-wrap: wrap;
}

.project-tracker-nav,
.template-browser-nav {
  background: var(--theme-surface, #f8f9fa) !important;
  border-bottom-color: var(--theme-border, #e0e0e0);
}

/* ========================================
   3. NAVIGATION - TAB AND BUTTON STYLES
   ======================================== */

/* Tab-style navigation (marketplace, project tracker) */
.marketplace-tab,
.project-tab,
.project-tab-btn,
.template-tab,
.filter-tab,
.view-btn {
  flex: 1 !important;
  background: var(--theme-background, #ffffff) !important;
  color: var(--theme-text, #1a1a1a) !important;
  border-color: var(--theme-border, #e0e0e0) !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.marketplace-tab:hover,
.project-tab:hover,
.project-tab-btn:hover,
.template-tab:hover,
.filter-tab:hover,
.view-btn:hover {
  background: var(--theme-surface, #f8f9fa) !important;
  color: var(--theme-primary, #667eea) !important;
  border-color: var(--theme-primary, #667eea) !important;
}

.marketplace-tab.active,
.project-tab.active,
.project-tab-btn.active,
.template-tab.active,
.filter-tab.active,
.view-btn.active {
  background: var(--theme-primary, #667eea) !important;
  color: var(--theme-text-on-primary, #ffffff) !important;
  border-bottom-color: var(--theme-primary, #667eea) !important;
}

/* Main navigation buttons - no additional styles needed, inherit from .header-btn */

/* Header button hover - keep same colors, just change background */
.header-btn:hover {
  background: var(--theme-surface, #f8f9fa) !important;
}

.header-btn.section-nav-btn.active,
.section-nav-btn.active,
.book-studio-btn.active {
  background: var(--theme-primary, #667eea) !important;
  color: var(--theme-text-on-primary, #ffffff) !important;
  border-color: var(--theme-primary, #667eea) !important;
}

/* ========================================
   4. BUTTONS - ALL TYPES
   ======================================== */

/* Primary Action Buttons */
.btn-primary,
.checkout-submit-btn,
.btn-modal-confirm,
.book-service-btn,
.cta-float,
#continue {
  background: var(--theme-primary, #667eea) !important;
  color: var(--theme-text-on-primary, #ffffff) !important;
  border-color: var(--theme-primary, #667eea) !important;
}

.btn-primary:hover,
.checkout-submit-btn:hover,
.btn-modal-confirm:hover,
.book-service-btn:hover,
.cta-float:hover,
#continue:hover {
  background: var(--theme-primary-alt, #764ba2) !important;
  border-color: var(--theme-primary-alt, #764ba2) !important;
}

/* Secondary Buttons */
.btn-secondary,
.btn-modal-cancel,
.back-button,
.btn,
button[class*="btn-"] {
  background: var(--theme-surface, #f8f9fa) !important;
  color: var(--theme-text, #1a1a1a) !important;
  border-color: var(--theme-border, #e0e0e0) !important;
}

/* All header navigation buttons same height and style (matches login button) */
.header-btn {
  height: 53px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--theme-background, #ffffff) !important;
  color: var(--theme-text, #1a1a1a) !important;
  border: 2px solid var(--theme-primary, #667eea) !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.btn-secondary:hover,
.btn-modal-cancel:hover,
.back-button:hover,
.btn:hover,
button[class*="btn-"]:hover {
  background: var(--theme-background, #ffffff) !important;
  border-color: var(--theme-primary, #667eea) !important;
  color: var(--theme-primary, #667eea) !important;
}

/* Account & Login Buttons - no additional styles needed, inherit from .header-btn */

/* Book Studio Button - no additional styles needed, inherit from .header-btn */

/* Section Navigation */
.section-nav-btn.active {
  background: var(--theme-primary, #667eea) !important;
  color: var(--theme-text-on-primary, #ffffff) !important;
  border-color: var(--theme-primary, #667eea) !important;
}

/* ========================================
   5. INPUTS & FORMS
   ======================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="number"],
input[type="search"],
textarea,
select,
.filter-select,
.native-select,
.task-select {
  background: var(--theme-background, #ffffff) !important;
  border-color: var(--theme-border, #e0e0e0);
  color: var(--theme-text, #1a1a1a);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--theme-primary, #667eea);
  outline-color: var(--theme-primary, #667eea);
}

.form-group,
.checkout-form-group,
.selector-group {
  background: var(--theme-surface, #f8f9fa) !important;
  border-color: var(--theme-border, #e0e0e0);
}

/* ========================================
   6. CALENDAR ELEMENTS
   ======================================== */

/* Month Calendar */
.cal .day {
  background: var(--theme-background, #ffffff) !important;
  border-color: var(--theme-border, #e0e0e0);
  color: var(--theme-text, #1a1a1a);
}

.cal .day:hover {
  background: var(--theme-surface, #f8f9fa) !important;
  border-color: var(--theme-primary, #667eea);
}

.cal .day.selected {
  background: var(--theme-primary, #667eea) !important;
  color: var(--theme-text-on-primary, #ffffff);
  border-color: var(--theme-primary, #667eea);
}

.cal .day.today {
  border-color: var(--theme-accent, #43e97b);
}

.cal-head {
  background: var(--theme-surface, #f8f9fa) !important;
  color: var(--theme-text, #1a1a1a);
}

/* Week Calendar */
.weekcol {
  background: var(--theme-background, #ffffff) !important;
  border-color: var(--theme-border, #e0e0e0);
}

.weekcol.active,
.weekcol:hover {
  background: var(--theme-surface, #f8f9fa) !important;
}

.weekday {
  background: var(--theme-surface, #f8f9fa) !important;
  color: var(--theme-text, #1a1a1a);
}

.weekbar {
  background: var(--theme-surface, #f8f9fa) !important;
  border-bottom-color: var(--theme-border, #e0e0e0);
}

.week-title {
  color: var(--theme-text, #1a1a1a);
}

/* Timeline blocks - keep service-specific colors but ensure text contrast */
.tl-block {
  color: var(--theme-text-on-primary, #ffffff);
}

.tl-busy {
  background: var(--theme-border, #e0e0e0) !important;
}

/* ========================================
   7. MODALS & OVERLAYS
   ======================================== */

.modal-overlay,
.checkout-modal-overlay,
.wizard-overlay,
.calendar-modal-backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.modal-header,
.checkout-modal-header {
  background: var(--theme-surface, #f8f9fa) !important;
  border-bottom-color: var(--theme-border, #e0e0e0);
  color: var(--theme-text, #1a1a1a);
}

.modal-body,
.checkout-modal-body {
  background: var(--theme-background, #ffffff) !important;
  color: var(--theme-text, #1a1a1a);
}

.modal-footer,
.checkout-modal-footer {
  background: var(--theme-surface, #f8f9fa) !important;
  border-top-color: var(--theme-border, #e0e0e0);
}

.checkout-modal-close {
  color: var(--theme-text, #1a1a1a);
  background: transparent;
  border: none;
}

.checkout-modal-close:hover {
  color: var(--theme-primary, #667eea);
}

/* ========================================
   8. MARKETPLACE ELEMENTS
   ======================================== */

.marketplace-header h2,
.template-browser-header h2,
.projects-header h2,
.project-header h1 {
  color: var(--theme-text, #1a1a1a);
}

.subtitle,
.provider-tagline {
  color: var(--theme-text, #1a1a1a) !important;
}

.marketplace-filters,
.template-filters,
.projects-actions {
  background: var(--theme-surface, #f8f9fa) !important;
  border-color: var(--theme-border, #e0e0e0);
}

.provider-card,
.service-card,
.marketplace-grid > * {
  background: var(--theme-surface, #f8f9fa) !important;
  border-color: var(--theme-border, #e0e0e0);
  color: var(--theme-text, #1a1a1a);
}

.provider-card:hover,
.service-card:hover,
.marketplace-grid > *:hover {
  border-color: var(--theme-primary, #667eea);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.provider-rating,
.service-card .price {
  color: var(--theme-primary, #667eea);
}

.earnings-card {
  background: linear-gradient(135deg, var(--theme-primary, #667eea) 0%, var(--theme-primary-alt, #764ba2) 100%);
  color: var(--theme-text-on-primary, #ffffff);
}

/* ========================================
   9. PROJECT TRACKER ELEMENTS
   ======================================== */

.project-header {
  background: var(--theme-surface, #f8f9fa) !important;
  border-bottom-color: var(--theme-border, #e0e0e0);
}

.project-title-section h1 {
  color: var(--theme-text, #1a1a1a);
}

.project-meta {
  color: var(--theme-text, #1a1a1a) !important;
}

.status-badge {
  background: var(--theme-surface, #f8f9fa) !important;
  color: var(--theme-text, #1a1a1a);
  border-color: var(--theme-border, #e0e0e0);
}

.status-badge.active,
.status-badge.in-progress {
  background: var(--theme-success, #10b981) !important;
  color: #ffffff;
}

.status-badge.completed {
  background: var(--theme-info, #3b82f6) !important;
  color: #ffffff;
}

.status-badge.pending,
.status-badge.on-hold {
  background: var(--theme-warning, #f59e0b) !important;
  color: #ffffff;
}

.status-badge.cancelled {
  background: var(--theme-error, #ef4444) !important;
  color: #ffffff;
}


.project-card,
.task-card,
.timeline-item {
  background: var(--theme-background, #ffffff) !important;
  border-color: var(--theme-border, #e0e0e0);
  color: var(--theme-text, #1a1a1a);
}

.project-card:hover,
.task-card:hover {
  border-color: var(--theme-primary, #667eea);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ========================================
   10. TEMPLATES & WIZARDS
   ======================================== */

.wizard-trigger {
  background: var(--theme-background, #ffffff) !important;
  border-color: var(--theme-border, #e0e0e0);
  color: var(--theme-text, #1a1a1a);
}

.wizard-trigger:hover {
  background: var(--theme-surface, #f8f9fa) !important;
  border-color: var(--theme-primary, #667eea);
}

.wizard-value {
  color: var(--theme-text, #1a1a1a);
}

.wizard-icon,
.date-icon {
  color: var(--theme-text, #1a1a1a) !important;
}

.date-trigger {
  background: var(--theme-background, #ffffff) !important;
  border-color: var(--theme-border, #e0e0e0);
  color: var(--theme-text, #1a1a1a);
}

.date-trigger:hover {
  background: var(--theme-surface, #f8f9fa) !important;
  border-color: var(--theme-primary, #667eea);
}

.template-card,
.templates-grid > * {
  background: var(--theme-surface, #f8f9fa) !important;
  border-color: var(--theme-border, #e0e0e0);
  color: var(--theme-text, #1a1a1a);
}

.template-card:hover,
.templates-grid > *:hover {
  border-color: var(--theme-primary, #667eea);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ========================================
   11. DROPDOWNS & MENUS
   ======================================== */

.dropdown-menu,
#color-scheme-dropdown-menu {
  background: var(--theme-surface, #f8f9fa) !important;
  border-color: var(--theme-border, #e0e0e0);
  color: var(--theme-text, #1a1a1a);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#color-scheme-options {
  background: var(--theme-surface, #f8f9fa) !important;
}

/* ========================================
   12. UTILITY & STATUS ELEMENTS
   ======================================== */

.loading-spinner,
.spinner,
.checkout-spinner {
  border-color: var(--theme-border, #e0e0e0);
  border-top-color: var(--theme-primary, #667eea);
}

.loading-state {
  color: var(--theme-text, #1a1a1a) !important;
}

.hint,
.fitHint {
  color: var(--theme-text, #1a1a1a) !important;
  background: var(--theme-surface, #f8f9fa) !important;
}

.error,
#err {
  color: var(--theme-error, #ef4444);
  background: var(--theme-surface, #f8f9fa) !important;
  border-left-color: var(--theme-error, #ef4444);
}

.progress-text {
  color: var(--theme-text, #1a1a1a) !important;
}

/* ========================================
   13. LISTS & GRIDS
   ======================================== */

.projects-grid,
.marketplace-grid,
.services-grid,
.portfolio-grid,
.templates-grid {
  gap: 20px;
}

.projects-grid > *,
.marketplace-grid > *,
.services-grid > *,
.portfolio-grid > *,
.templates-grid > * {
  background: var(--theme-surface, #f8f9fa) !important;
  border-color: var(--theme-border, #e0e0e0);
}

.dependencies-list,
.files-list,
.linked-items-list,
.comments-placeholder {
  background: var(--theme-background, #ffffff) !important;
  border-color: var(--theme-border, #e0e0e0);
  color: var(--theme-text, #1a1a1a);
}

/* ========================================
   14. TEXT & TYPOGRAPHY
   ======================================== */

/* Force all text to use high contrast colors */
h1, h2, h3, h4, h5, h6,
p, span, div, label, td, th, li,
.subtitle, .description, .label, .text,
.project-card-subtitle,
.project-progress-label,
.stat-label,
.project-card-description,
.empty-state-message,
.error-state-message,
.loading-state,
.project-meta,
.progress-text {
  color: var(--theme-text, #1a1a1a) !important;
}

.site-title {
  color: var(--theme-text, #1a1a1a) !important;
}

/* Links stay colored for visibility */
a {
  color: var(--theme-primary, #667eea);
}

a:hover {
  color: var(--theme-primary-alt, #764ba2);
}

/* Override any remaining hardcoded grays */
[style*="color: #666"],
[style*="color: #999"],
[style*="color: #6b7280"],
[style*="color: #9ca3af"],
[style*="color: #374151"] {
  color: var(--theme-text, #1a1a1a) !important;
}

/* ========================================
   15. SCROLLBARS (Webkit)
   ======================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--theme-background, #ffffff) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--theme-border, #e0e0e0) !important;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-text-secondary, #666666) !important;
}

/* ========================================
   16. TRANSITIONS
   ======================================== */

body,
.card,
.modal-content,
button,
input,
select,
textarea,
a {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease;
}

/* ========================================
   17. SPECIFIC ELEMENT OVERRIDES
   ======================================== */

/* Override any remaining hardcoded whites/grays */
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"] {
  background: var(--theme-surface, #f8f9fa) !important;
}

[style*="background: #f5f5f5"],
[style*="background: #f9fafb"] {
  background: var(--theme-background, #ffffff) !important;
}

[style*="color: #333"],
[style*="color: #1a1a1a"] {
  color: var(--theme-text, #1a1a1a) !important;
}

[style*="color: #666"],
[style*="color: #6b7280"] {
  color: var(--theme-text-secondary, #666666) !important;
}

/* Month title bar */
.monthbar {
  background: var(--theme-surface, #f8f9fa) !important;
  border-bottom-color: var(--theme-border, #e0e0e0);
}

.mTitleBox {
  color: var(--theme-text, #1a1a1a);
}

/* Top header */
.top-header {
  background: transparent;
}

/* Filter modal button */
#filterModalButton {
  background: var(--theme-primary, #667eea) !important;
  color: var(--theme-text-on-primary, #ffffff);
}

#filterModalButton:hover {
  background: var(--theme-primary-alt, #764ba2) !important;
}

/* Portfolio items */
.portfolio-item {
  background: var(--theme-surface, #f8f9fa) !important;
  border-color: var(--theme-border, #e0e0e0);
}

/* Provider info */
.provider-info h2,
.provider-info p {
  color: var(--theme-text, #1a1a1a);
}

/* Service prices */
.price {
  color: var(--theme-primary, #667eea);
}