/**
 * Theme-Aware Component Styles
 * CSS classes that properly support both light and dark themes
 * Use these instead of hardcoded Tailwind colors
 */

/* ===== BACKGROUNDS ===== */
.theme-bg-surface {
  background-color: var(--color-surface) !important;
}

.theme-bg-primary {
  background-color: var(--color-background) !important;
}

.theme-bg-secondary {
  background-color: var(--color-background-secondary) !important;
}

.theme-bg-elevated {
  background-color: var(--color-surface-elevated) !important;
}

.theme-bg-hover:hover {
  background-color: var(--color-hover) !important;
}

/* ===== TEXT COLORS ===== */
.theme-text-primary {
  color: var(--color-text-primary) !important;
}

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

.theme-text-tertiary {
  color: var(--color-text-tertiary) !important;
}

.theme-text-disabled {
  color: var(--color-text-disabled) !important;
}

.theme-text-accent {
  color: var(--color-primary) !important;
}

/* ===== BORDERS ===== */
.theme-border {
  border-color: var(--color-border) !important;
}

.theme-border-medium {
  border-color: var(--color-border-medium) !important;
}

.theme-border-strong {
  border-color: var(--color-border-strong) !important;
}

/* ===== BUTTONS ===== */
.theme-btn-primary {
  background-color: var(--color-primary);
  color: white;
  border: none;
}

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

.theme-btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

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

.theme-btn-success {
  background-color: var(--color-success);
  color: #FFFFFF;
  border: none;
}

.theme-btn-success:hover {
  background-color: var(--color-success-dark);
}

.theme-btn-warning {
  background-color: var(--color-warning);
  color: #FFFFFF;
  border: none;
}

.theme-btn-warning:hover {
  background-color: var(--color-warning-dark);
}

/* ===== FORM INPUTS ===== */
.theme-input,
.theme-select,
.theme-textarea {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.theme-input:focus,
.theme-select:focus,
.theme-textarea:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.theme-input::placeholder,
.theme-textarea::placeholder {
  color: var(--color-text-tertiary);
}

/* ===== CARDS ===== */
.theme-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.theme-card-elevated {
  background-color: var(--color-surface-elevated);
  box-shadow: var(--shadow-lg);
}

/* ===== DROPDOWNS ===== */
.theme-dropdown {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.theme-dropdown option {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

/* ===== TABLES ===== */
.theme-table {
  background-color: var(--color-surface);
}

.theme-table thead {
  background-color: var(--color-background-secondary);
  border-bottom: 2px solid var(--color-border);
}

.theme-table th {
  color: var(--color-text-secondary);
  font-weight: 600;
}

.theme-table td {
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}

.theme-table tbody tr:hover {
  background-color: var(--color-hover);
}

/* ===== BADGES ===== */
.theme-badge {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.theme-badge-primary {
  background-color: var(--color-primary);
  color: white;
}

.theme-badge-success {
  background-color: var(--color-success);
  color: white;
}

.theme-badge-warning {
  background-color: var(--color-warning);
  color: white;
}

.theme-badge-error {
  background-color: var(--color-error);
  color: white;
}

/* ===== ALERTS ===== */
.theme-alert {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  padding: 1rem;
  border-radius: 0.5rem;
}

.theme-alert-success {
  background-color: rgba(76, 175, 80, 0.1);
  border-color: var(--color-success);
  color: var(--color-success);
}

.theme-alert-warning {
  background-color: rgba(255, 152, 0, 0.1);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.theme-alert-error {
  background-color: rgba(244, 67, 54, 0.1);
  border-color: var(--color-error);
  color: var(--color-error);
}

.theme-alert-info {
  background-color: rgba(33, 150, 243, 0.1);
  border-color: var(--color-info);
  color: var(--color-info);
}

/* ===== LISTS ===== */
.theme-list-item {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.theme-list-item:hover {
  background-color: var(--color-hover);
}

/* ===== MODALS ===== */
.theme-modal {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-2xl);
}

.theme-modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

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

/* ===== NAVIGATION ===== */
.theme-nav-item {
  color: white;
}

.theme-nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.theme-nav-item.active,
.theme-nav-item-active {
  background-color: rgba(255, 255, 255, 0.15);
}

/* ===== STAT CARDS (for dashboard) ===== */
.theme-stat-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-md);
}

.theme-stat-card:hover {
  box-shadow: var(--shadow-lg);
}

.theme-stat-label {
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
  font-weight: 500;
}

.theme-stat-value {
  color: var(--color-text-primary);
  font-size: 1.875rem;
  font-weight: 700;
}

/* ===== LINKS ===== */
.theme-link {
  color: var(--color-primary);
  text-decoration: none;
}

.theme-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* ===== SCROLLBARS (for dark theme) ===== */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--color-background-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

/* ===== UTILITY CLASSES ===== */
.theme-shadow {
  box-shadow: var(--shadow-md);
}

.theme-shadow-lg {
  box-shadow: var(--shadow-lg);
}

.theme-divider {
  border-color: var(--color-border);
}

/* ===== GRADIENT BACKGROUNDS ===== */
/* Admin dashboard quick action cards - Sprint 11 Phase 2 Fix */
.theme-gradient-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.theme-gradient-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.theme-gradient-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.theme-gradient-orange {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.theme-gradient-teal {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

/* Text color for gradient backgrounds */
.theme-text-on-primary {
  color: white !important;
}

/* ===== SPRINT 22 SPECIFIC CLASSES ===== */
/* Chart Container - Standardized height for all dashboard charts */
.theme-chart-container {
    width: 100%;
    height: 300px;
    min-height: 250px;
    position: relative;
}

@media (max-width: 768px) {
    .theme-chart-container {
        height: 250px;
        min-height: 200px;
    }
}

/* Table Container - Responsive tables with theme-aware styling */
.theme-table-container {
    width: 100%;
    overflow-x: auto;
    font-size: 0.875rem; /* 14px */
}

.theme-table-container table {
    width: 100%;
    border-collapse: collapse;
}

.theme-table-container th,
.theme-table-container td {
    padding: 0.5rem;
    text-align: left;
    border: 1px solid var(--color-border);
}

.theme-table-container th {
    background-color: var(--color-background-secondary);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.theme-table-container tbody tr:hover {
    background-color: var(--color-background-hover);
}

.theme-table-container tbody tr {
    transition: background-color 0.2s ease;
}

/* Page Container - Sprint 22 unified dashboard */
.theme-page-container-responsive {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

@media (min-width: 768px) {
    .theme-page-container-responsive {
        padding: 1.5rem 2rem;
    }
}

/* Theme-aware card background (for loading overlay) */
.theme-bg-card {
    background-color: var(--color-surface);
}

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

/* ===== SESSION MODAL BUTTON (P2-5) ===== */
/* Primary button for session modal "Stay Logged In" */
.session-btn-primary {
    background-color: var(--color-btn-primary);
    transition: background-color 0.2s ease;
}

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

.session-btn-primary:active {
    background-color: var(--color-btn-primary-active);
}