/* Appearance CSS - Dynamic Organization Theming System */
/* This file provides CSS custom properties and utility classes for org-specific branding */

:root {
  /* ========================================
     DEFAULT COLOR PALETTE
     These are fallback values; actual values 
     are injected via JavaScript from org settings
     ======================================== */

  /* Site Branding */
  --color-primary: #f97316;
  --color-secondary: #1f2937;
  --color-accent: #fb923c;
  --color-background: #111827;
  --color-text: #f3f4f6;
  --color-header-bg: #1f2937;
  --color-sidebar-bg: #111827;
  --color-card-bg: #1f2937;
  --color-page-header-bg: #1f2937;
  --color-page-header-text: #ffffff;

  /* Navigation */
  --color-menu-link: #9ca3af;
  --color-menu-link-hover: #f97316;
  --color-menu-link-active: #f97316;
  --color-mobile-menu-bg: #1f2937;
  --color-mobile-menu-text: #ffffff;
  --color-hamburger-icon: #f97316;

  /* Buttons - Primary */
  --color-btn-primary-bg: #f97316;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: #ea580c;

  /* Buttons - Secondary */
  --color-btn-secondary-bg: #374151;
  --color-btn-secondary-text: #ffffff;
  --color-btn-secondary-hover: #4b5563;

  /* Buttons - Danger */
  --color-btn-danger-bg: #dc2626;
  --color-btn-danger-text: #ffffff;

  /* Buttons - Success */
  --color-btn-success-bg: #16a34a;
  --color-btn-success-text: #ffffff;

  /* Text & Typography */
  --color-heading: #ffffff;
  --color-paragraph: #d1d5db;
  --color-text-muted: #9ca3af;
  --color-hyperlink: #f97316;
  --color-hyperlink-hover: #fb923c;
  --color-icon: #f97316;
  --color-icon-muted: #6b7280;

  /* Borders */
  --color-border: #374151;
  --color-border-muted: #1f2937;

  /* Tabs */
  --color-tab-active-bg: #f97316;
  --color-tab-active-text: #ffffff;
  --color-tab-inactive-bg: #374151;
  --color-tab-inactive-text: #9ca3af;

  /* Win/Loss/Draw */
  --color-win: #22c55e;
  --color-loss: #ef4444;
  --color-draw: #6b7280;

  /* MMR/XP/LP */
  --color-mmr: #f97316;
  --color-xp: #3b82f6;
  --color-lp: #a855f7;

  /* Scoreboard */
  --color-scoreboard-bg: #1f2937;
  --color-scoreboard-text: #ffffff;
  --color-scoreboard-team1-bg: #374151;
  --color-scoreboard-team2-bg: #374151;
  --color-scoreboard-vs-bg: #f97316;
  --color-scoreboard-vs-text: #ffffff;

  /* Leaderboard */
  --color-leaderboard-bg: #1f2937;
  --color-leaderboard-heading: #ffffff;
  --color-leaderboard-row-bg: #111827;
  --color-leaderboard-row-alt: #1f2937;
  --color-leaderboard-text: #d1d5db;
  --color-leaderboard-link: #f97316;
  --color-leaderboard-rank1: #fbbf24;
  --color-leaderboard-rank2: #9ca3af;
  --color-leaderboard-rank3: #b45309;

  /* Tables */
  --color-table-header-bg: #374151;
  --color-table-header-text: #ffffff;
  --color-table-row-bg: #1f2937;
  --color-table-row-alt: #111827;
  --color-table-row-hover: #374151;
  --color-table-text: #d1d5db;
  --color-table-link: #f97316;
  --color-table-border: #374151;

  /* Cards */
  --color-card-bg: #1f2937;
  --color-card-border: #374151;
  --color-card-heading: #ffffff;
  --color-card-text: #d1d5db;
  --color-card-muted: #9ca3af;

  /* Events */
  --color-event-tag-bg: #f97316;
  --color-event-tag-text: #ffffff;
  --color-event-card-bg: #1f2937;
  --color-event-card-border: #374151;
  --color-event-card-title: #ffffff;
  --color-event-card-text: #d1d5db;
  --color-event-btn-gradient1: #f97316;
  --color-event-btn-gradient2: #ea580c;
  --color-event-btn-text: #ffffff;
  --color-event-status-active: #22c55e;
  --color-event-status-upcoming: #3b82f6;
  --color-event-status-completed: #6b7280;

  /* Teams */
  --color-team-card-bg: #1f2937;
  --color-team-card-border: #374151;
  --color-team-card-name: #ffffff;
  --color-team-card-tag: #f97316;
  --color-team-card-text: #d1d5db;
  --color-team-card-owner: #f97316;
  --color-team-card-stats: #9ca3af;

  /* My Teams */
  --color-myteams-bg: #111827;
  --color-myteams-card-bg: #1f2937;
  --color-myteams-heading: #ffffff;
  --color-myteams-text: #d1d5db;

  /* Invoices */
  --color-invoice-bg: #1f2937;
  --color-invoice-border: #374151;
  --color-invoice-heading: #ffffff;
  --color-invoice-text: #d1d5db;
  --color-invoice-amount: #f97316;
  --color-invoice-pending: #f59e0b;
  --color-invoice-paid: #22c55e;
  --color-invoice-overdue: #ef4444;

  /* Profiles */
  --color-profile-bg: #1f2937;
  --color-profile-border: #374151;
  --color-profile-name: #ffffff;
  --color-profile-text: #d1d5db;
  --color-profile-muted: #9ca3af;
  --color-profile-xp-bar: #3b82f6;
  --color-profile-xp-bg: #374151;

  /* Standings */
  --color-standings-bg: #1f2937;
  --color-standings-heading: #ffffff;
  --color-standings-row-bg: #111827;
  --color-standings-row-alt: #1f2937;
  --color-standings-text: #d1d5db;

  /* Stats */
  --color-stats-bg: #1f2937;
  --color-stats-heading: #ffffff;
  --color-stats-text: #d1d5db;
  --color-stats-value: #f97316;

  /* Rules */
  --color-rules-bg: #1f2937;
  --color-rules-heading: #ffffff;
  --color-rules-text: #d1d5db;
  --color-rules-link: #f97316;

  /* Forms/Inputs */
  --color-input-bg: #374151;
  --color-input-border: #4b5563;
  --color-input-text: #ffffff;
  --color-input-placeholder: #9ca3af;
  --color-input-focus: #f97316;

  /* Modals */
  --color-modal-bg: #1f2937;
  --color-modal-overlay: rgba(0, 0, 0, 0.75);
  --color-modal-heading: #ffffff;
  --color-modal-text: #d1d5db;

  /* Alerts */
  --color-alert-success-bg: #064e3b;
  --color-alert-success-text: #6ee7b7;
  --color-alert-error-bg: #7f1d1d;
  --color-alert-error-text: #fca5a5;
  --color-alert-warning-bg: #78350f;
  --color-alert-warning-text: #fcd34d;
  --color-alert-info-bg: #1e3a5f;
  --color-alert-info-text: #93c5fd;

  /* AI Chat Widget */
  --color-ai-chat-bubble-bg: #f97316;
  --color-ai-chat-bubble-icon: #ffffff;
  --color-ai-chat-header-bg: #f97316;
  --color-ai-chat-header-text: #ffffff;
  --color-ai-chat-body-bg: #0f0f0f;
  --color-ai-chat-input-bg: #1a1a1a;
  --color-ai-chat-user-msg-bg: #f97316;
  --color-ai-chat-user-msg-text: #ffffff;
  --color-ai-chat-bot-msg-bg: #1f2937;
  --color-ai-chat-bot-msg-text: #d1d5db;
  --color-ai-chat-send-btn-bg: #f97316;
  --color-ai-chat-send-btn-text: #ffffff;
}

/* ========================================
   UTILITY CLASSES
   These classes use CSS variables for theming
   ======================================== */

/* Background Colors */
.bg-theme-primary { background-color: var(--color-primary) !important; }
.bg-theme-secondary { background-color: var(--color-secondary) !important; }
.bg-theme-accent { background-color: var(--color-accent) !important; }
.bg-theme-background { background-color: var(--color-background) !important; }
.bg-theme-header { background-color: var(--color-header-bg) !important; }
.bg-theme-sidebar { background-color: var(--color-sidebar-bg) !important; }
.bg-theme-card { background-color: var(--color-card-bg) !important; }
.bg-theme-page-header { background-color: var(--color-page-header-bg) !important; }

/* Button Backgrounds */
.bg-theme-btn-primary { background-color: var(--color-btn-primary-bg) !important; }
.bg-theme-btn-primary:hover { background-color: var(--color-btn-primary-hover) !important; }
.bg-theme-btn-secondary { background-color: var(--color-btn-secondary-bg) !important; }
.bg-theme-btn-secondary:hover { background-color: var(--color-btn-secondary-hover) !important; }
.bg-theme-btn-danger { background-color: var(--color-btn-danger-bg) !important; }
.bg-theme-btn-success { background-color: var(--color-btn-success-bg) !important; }

/* Text Colors */
.text-theme-primary { color: var(--color-primary) !important; }
.text-theme-heading { color: var(--color-heading) !important; }
.text-theme-paragraph { color: var(--color-paragraph) !important; }
.text-theme-muted { color: var(--color-text-muted) !important; }
.text-theme-link { color: var(--color-hyperlink) !important; }
.text-theme-link:hover { color: var(--color-hyperlink-hover) !important; }
.text-theme-icon { color: var(--color-icon) !important; }
.text-theme-icon-muted { color: var(--color-icon-muted) !important; }
.text-theme-page-header { color: var(--color-page-header-text) !important; }

/* Button Text */
.text-theme-btn-primary { color: var(--color-btn-primary-text) !important; }
.text-theme-btn-secondary { color: var(--color-btn-secondary-text) !important; }
.text-theme-btn-danger { color: var(--color-btn-danger-text) !important; }
.text-theme-btn-success { color: var(--color-btn-success-text) !important; }

/* Navigation */
.text-theme-menu-link { color: var(--color-menu-link) !important; }
.text-theme-menu-link:hover { color: var(--color-menu-link-hover) !important; }
.text-theme-menu-active { color: var(--color-menu-link-active) !important; }
.bg-theme-mobile-menu { background-color: var(--color-mobile-menu-bg) !important; }
.text-theme-mobile-menu { color: var(--color-mobile-menu-text) !important; }
.text-theme-hamburger { color: var(--color-hamburger-icon) !important; }

/* Tabs */
.bg-theme-tab-active { background-color: var(--color-tab-active-bg) !important; }
.text-theme-tab-active { color: var(--color-tab-active-text) !important; }
.bg-theme-tab-inactive { background-color: var(--color-tab-inactive-bg) !important; }
.text-theme-tab-inactive { color: var(--color-tab-inactive-text) !important; }

/* Win/Loss/Draw */
.text-theme-win { color: var(--color-win) !important; }
.text-theme-loss { color: var(--color-loss) !important; }
.text-theme-draw { color: var(--color-draw) !important; }
.bg-theme-win { background-color: var(--color-win) !important; }
.bg-theme-loss { background-color: var(--color-loss) !important; }

/* MMR/XP/LP */
.text-theme-mmr { color: var(--color-mmr) !important; }
.text-theme-xp { color: var(--color-xp) !important; }
.text-theme-lp { color: var(--color-lp) !important; }

/* Borders */
.border-theme { border-color: var(--color-border) !important; }
.border-theme-muted { border-color: var(--color-border-muted) !important; }
.border-theme-primary { border-color: var(--color-primary) !important; }

/* Tables */
.bg-theme-table-header { background-color: var(--color-table-header-bg) !important; }
.text-theme-table-header { color: var(--color-table-header-text) !important; }
.bg-theme-table-row { background-color: var(--color-table-row-bg) !important; }
.bg-theme-table-row-alt { background-color: var(--color-table-row-alt) !important; }
.bg-theme-table-row-hover:hover { background-color: var(--color-table-row-hover) !important; }
.text-theme-table { color: var(--color-table-text) !important; }
.text-theme-table-link { color: var(--color-table-link) !important; }
.border-theme-table { border-color: var(--color-table-border) !important; }

/* Leaderboard */
.bg-theme-leaderboard { background-color: var(--color-leaderboard-bg) !important; }
.text-theme-leaderboard-heading { color: var(--color-leaderboard-heading) !important; }
.bg-theme-leaderboard-row { background-color: var(--color-leaderboard-row-bg) !important; }
.bg-theme-leaderboard-row-alt { background-color: var(--color-leaderboard-row-alt) !important; }
.text-theme-leaderboard { color: var(--color-leaderboard-text) !important; }
.text-theme-leaderboard-link { color: var(--color-leaderboard-link) !important; }
.text-theme-rank1 { color: var(--color-leaderboard-rank1) !important; }
.text-theme-rank2 { color: var(--color-leaderboard-rank2) !important; }
.text-theme-rank3 { color: var(--color-leaderboard-rank3) !important; }

/* Cards */
.bg-theme-card { background-color: var(--color-card-bg) !important; }
.border-theme-card { border-color: var(--color-card-border) !important; }
.text-theme-card-heading { color: var(--color-card-heading) !important; }
.text-theme-card { color: var(--color-card-text) !important; }
.text-theme-card-muted { color: var(--color-card-muted) !important; }

/* Events */
.bg-theme-event-tag { background-color: var(--color-event-tag-bg) !important; }
.text-theme-event-tag { color: var(--color-event-tag-text) !important; }
.bg-theme-event-card { background-color: var(--color-event-card-bg) !important; }
.border-theme-event-card { border-color: var(--color-event-card-border) !important; }
.text-theme-event-title { color: var(--color-event-card-title) !important; }
.text-theme-event { color: var(--color-event-card-text) !important; }
.text-theme-event-btn { color: var(--color-event-btn-text) !important; }
.text-theme-status-active { color: var(--color-event-status-active) !important; }
.text-theme-status-upcoming { color: var(--color-event-status-upcoming) !important; }
.text-theme-status-completed { color: var(--color-event-status-completed) !important; }

/* Teams */
.bg-theme-team-card { background-color: var(--color-team-card-bg) !important; }
.border-theme-team-card { border-color: var(--color-team-card-border) !important; }
.text-theme-team-name { color: var(--color-team-card-name) !important; }
.text-theme-team-tag { color: var(--color-team-card-tag) !important; }
.text-theme-team { color: var(--color-team-card-text) !important; }
.text-theme-team-owner { color: var(--color-team-card-owner) !important; }
.text-theme-team-stats { color: var(--color-team-card-stats) !important; }

/* Invoices */
.bg-theme-invoice { background-color: var(--color-invoice-bg) !important; }
.border-theme-invoice { border-color: var(--color-invoice-border) !important; }
.text-theme-invoice-heading { color: var(--color-invoice-heading) !important; }
.text-theme-invoice { color: var(--color-invoice-text) !important; }
.text-theme-invoice-amount { color: var(--color-invoice-amount) !important; }
.text-theme-invoice-pending { color: var(--color-invoice-pending) !important; }
.text-theme-invoice-paid { color: var(--color-invoice-paid) !important; }
.text-theme-invoice-overdue { color: var(--color-invoice-overdue) !important; }

/* Profiles */
.bg-theme-profile { background-color: var(--color-profile-bg) !important; }
.border-theme-profile { border-color: var(--color-profile-border) !important; }
.text-theme-profile-name { color: var(--color-profile-name) !important; }
.text-theme-profile { color: var(--color-profile-text) !important; }
.text-theme-profile-muted { color: var(--color-profile-muted) !important; }
.bg-theme-xp-bar { background-color: var(--color-profile-xp-bar) !important; }
.bg-theme-xp-bg { background-color: var(--color-profile-xp-bg) !important; }

/* Standings */
.bg-theme-standings { background-color: var(--color-standings-bg) !important; }
.text-theme-standings-heading { color: var(--color-standings-heading) !important; }
.bg-theme-standings-row { background-color: var(--color-standings-row-bg) !important; }
.bg-theme-standings-row-alt { background-color: var(--color-standings-row-alt) !important; }
.text-theme-standings { color: var(--color-standings-text) !important; }

/* Stats */
.bg-theme-stats { background-color: var(--color-stats-bg) !important; }
.text-theme-stats-heading { color: var(--color-stats-heading) !important; }
.text-theme-stats { color: var(--color-stats-text) !important; }
.text-theme-stats-value { color: var(--color-stats-value) !important; }

/* Rules */
.bg-theme-rules { background-color: var(--color-rules-bg) !important; }
.text-theme-rules-heading { color: var(--color-rules-heading) !important; }
.text-theme-rules { color: var(--color-rules-text) !important; }
.text-theme-rules-link { color: var(--color-rules-link) !important; }

/* Forms/Inputs */
.bg-theme-input { background-color: var(--color-input-bg) !important; }
.border-theme-input { border-color: var(--color-input-border) !important; }
.text-theme-input { color: var(--color-input-text) !important; }
.placeholder-theme-input::placeholder { color: var(--color-input-placeholder) !important; }
.focus-theme-input:focus { border-color: var(--color-input-focus) !important; outline-color: var(--color-input-focus) !important; }

/* Modals */
.bg-theme-modal { background-color: var(--color-modal-bg) !important; }
.bg-theme-modal-overlay { background-color: var(--color-modal-overlay) !important; }
.text-theme-modal-heading { color: var(--color-modal-heading) !important; }
.text-theme-modal { color: var(--color-modal-text) !important; }

/* Alerts */
.bg-theme-alert-success { background-color: var(--color-alert-success-bg) !important; }
.text-theme-alert-success { color: var(--color-alert-success-text) !important; }
.bg-theme-alert-error { background-color: var(--color-alert-error-bg) !important; }
.text-theme-alert-error { color: var(--color-alert-error-text) !important; }
.bg-theme-alert-warning { background-color: var(--color-alert-warning-bg) !important; }
.text-theme-alert-warning { color: var(--color-alert-warning-text) !important; }
.bg-theme-alert-info { background-color: var(--color-alert-info-bg) !important; }
.text-theme-alert-info { color: var(--color-alert-info-text) !important; }

/* Gradient Button Helper */
.bg-theme-event-btn-gradient {
  background: linear-gradient(to right, var(--color-event-btn-gradient1), var(--color-event-btn-gradient2)) !important;
}

/* Ring/Focus Colors */
.ring-theme-primary { --tw-ring-color: var(--color-primary) !important; }
.focus\:ring-theme-primary:focus { --tw-ring-color: var(--color-primary) !important; }

/* Hover Variants */
.hover\:bg-theme-primary:hover { background-color: var(--color-primary) !important; }
.hover\:bg-theme-btn-primary:hover { background-color: var(--color-btn-primary-hover) !important; }
.hover\:bg-theme-btn-secondary:hover { background-color: var(--color-btn-secondary-hover) !important; }
.hover\:text-theme-link:hover { color: var(--color-hyperlink-hover) !important; }
.hover\:text-theme-primary:hover { color: var(--color-primary) !important; }
.hover\:border-theme-primary:hover { border-color: var(--color-primary) !important; }

/* Body/Root Theming */
body {
  background-color: var(--color-background);
  color: var(--color-text);
}

/* Additional utility classes for theme variables */
.border-theme-loss { border-color: var(--color-loss) !important; }
.border-theme-win { border-color: var(--color-win) !important; }
.border-theme-xp { border-color: var(--color-xp) !important; }
.ring-theme-border { --tw-ring-color: var(--color-border) !important; }
.ring-theme-lp { --tw-ring-color: var(--color-lp) !important; }
.bg-theme-lp { background-color: var(--color-lp) !important; }

/* Table and Leaderboard specific utilities */
.bg-theme-table-header { background-color: var(--color-table-header-bg) !important; }
.text-theme-table-header { color: var(--color-table-header-text) !important; }

/* Alert text variations */
.text-theme-alert-success { color: var(--color-alert-success-text) !important; }
.text-theme-alert-error { color: var(--color-alert-error-text) !important; }
.text-theme-alert-warning { color: var(--color-alert-warning-text) !important; }
.text-theme-alert-info { color: var(--color-alert-info-text) !important; }

/* XP Bar */
.bg-theme-xp-bar { background-color: var(--color-profile-xp-bar) !important; }
.bg-theme-xp-bg { background-color: var(--color-profile-xp-bg) !important; }

/* Alert border utilities */
.border-theme-alert-warning { border-color: var(--color-alert-warning-text) !important; }
.ring-theme-alert-warning { --tw-ring-color: var(--color-alert-warning-text) !important; }
.ring-theme-xp { --tw-ring-color: var(--color-xp) !important; }
.focus\:border-theme-primary:focus { border-color: var(--color-primary) !important; }

/* Final utility classes for complete coverage */
.ring-theme-loss { --tw-ring-color: var(--color-loss) !important; }
.ring-theme-win { --tw-ring-color: var(--color-win) !important; }
.bg-theme-rank1 { background-color: var(--color-leaderboard-rank1) !important; }