/**
 * Theme CSS
 *
 * Bootstrap variable overrides and component customization using design tokens.
 * This file bridges our design system with Bootstrap's styling.
 */

/* ===========================
   Bootstrap Variable Overrides
   =========================== */

:root {
  /* Map design tokens to Bootstrap theme colors */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 37, 99, 235;

  --bs-success: var(--color-success);
  --bs-success-rgb: 5, 150, 105;

  --bs-warning: var(--color-warning);
  --bs-warning-rgb: 255, 149, 0;

  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 220, 38, 38;

  --bs-info: var(--color-info);
  --bs-info-rgb: 56, 189, 248;

  /* Body styling */
  --bs-body-bg: var(--color-surface-1);
  --bs-body-color: var(--color-text-primary);
  --bs-body-font-family: var(--font-family-base);
  --bs-body-font-size: var(--font-size-base);
  --bs-body-line-height: var(--line-height-normal);

  /* Links */
  --bs-link-color: var(--color-text-link);
  --bs-link-hover-color: var(--color-text-link-hover);
  --bs-link-decoration: none;

  /* Border styling */
  --bs-border-width: 1px;
  --bs-border-color: var(--color-border-light);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-2xl: var(--radius-2xl);

  /* Spacing (align with Bootstrap's spacer) */
  --bs-gutter-x: var(--space-lg);
  --bs-gutter-y: var(--space-lg);
}

/* ===========================
   Card Component
   =========================== */

.card {
  background-color: var(--color-surface-0);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base);
}

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

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-md) var(--space-lg);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.card-body {
  padding: var(--space-lg);
}

.card-footer {
  background-color: transparent;
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-md) var(--space-lg);
}

/* Stat cards - typography only (layout in gradients.css) */
.stat-card .stat-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

.stat-card .stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  font-weight: var(--font-weight-medium);
}

.stat-card .stat-change {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.stat-card .stat-change.positive {
  color: var(--color-success);
}

.stat-card .stat-change.negative {
  color: var(--color-danger);
}

/* ===========================
   Button Component (Gradient Default)
   =========================== */

.btn {
  font-weight: var(--font-weight-medium);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  border: none;
}

.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: none;
}

/* Primary - Sky blue gradient (brighter for dark mode) */
.btn-primary {
  background: linear-gradient(135deg, #0284C7 0%, #38BDF8 50%, #0284C7 100%);
  background-size: 150% auto;
  color: white;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.2);
}

.btn-primary:hover {
  background-position: right center;
  color: white;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Success - Green gradient */
.btn-success {
  background: linear-gradient(135deg, #047857 0%, #10B981 50%, #047857 100%);
  background-size: 150% auto;
  color: white;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
}

.btn-success:hover {
  background-position: right center;
  color: white;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
  transform: translateY(-1px);
}

.btn-success:active {
  transform: translateY(0);
}

/* Warning - Orange gradient */
.btn-warning {
  background: linear-gradient(135deg, #D97706 0%, #F59E0B 50%, #D97706 100%);
  background-size: 150% auto;
  color: white;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.btn-warning:hover {
  background-position: right center;
  color: white;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  transform: translateY(-1px);
}

.btn-warning:active {
  transform: translateY(0);
}

/* Danger - Red gradient */
.btn-danger {
  background: linear-gradient(135deg, #B91C1C 0%, #EF4444 50%, #B91C1C 100%);
  background-size: 150% auto;
  color: white;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

.btn-danger:hover {
  background-position: right center;
  color: white;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
  transform: translateY(-1px);
}

.btn-danger:active {
  transform: translateY(0);
}

/* Info - Deep blue gradient */
.btn-info {
  background: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 50%, #1D4ED8 100%);
  background-size: 150% auto;
  color: white;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

.btn-info:hover {
  background-position: right center;
  color: white;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

.btn-info:active {
  transform: translateY(0);
}

/* Dark - Navy gradient */
.btn-dark {
  background: linear-gradient(135deg, #0A1628 0%, #1E3A5F 50%, #0A1628 100%);
  background-size: 150% auto;
  color: white;
  box-shadow: 0 2px 8px rgba(10, 22, 40, 0.3);
}

.btn-dark:hover {
  background-position: right center;
  color: white;
  box-shadow: 0 4px 12px rgba(10, 22, 40, 0.4);
  transform: translateY(-1px);
}

/* Secondary - Subtle gray gradient */
.btn-secondary {
  background: linear-gradient(135deg, #4B5563 0%, #6B7280 50%, #4B5563 100%);
  background-size: 150% auto;
  color: white;
  box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
}

.btn-secondary:hover {
  background-position: right center;
  color: white;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
  transform: translateY(-1px);
}

/* Light button - keep flat for contrast */
.btn-light {
  background: var(--color-surface-0);
  border: 1px solid var(--color-border-medium);
  color: var(--color-text-primary);
}

.btn-light:hover {
  background: var(--color-surface-1);
  color: var(--color-text-primary);
}

/* Outline variants - keep borders, subtle gradient on hover */
.btn-outline-primary {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline-primary:hover {
  background: linear-gradient(135deg, #0284C7 0%, #38BDF8 100%);
  border-color: transparent;
  color: white;
}

.btn-outline-secondary {
  background: transparent;
  border: 1px solid var(--color-border-medium);
  color: var(--color-text-secondary);
}

.btn-outline-secondary:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
}

.btn-outline-success {
  background: transparent;
  border: 1px solid var(--color-success);
  color: var(--color-success);
}

.btn-outline-success:hover {
  background: linear-gradient(135deg, #047857 0%, #10B981 100%);
  border-color: transparent;
  color: white;
}

.btn-outline-danger {
  background: transparent;
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

.btn-outline-danger:hover {
  background: linear-gradient(135deg, #B91C1C 0%, #EF4444 100%);
  border-color: transparent;
  color: white;
}

.btn-outline-warning {
  background: transparent;
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
}

.btn-outline-warning:hover {
  background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
  border-color: transparent;
  color: white;
}

.btn-outline-info {
  background: transparent;
  border: 1px solid var(--color-info);
  color: var(--color-info);
}

.btn-outline-info:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%);
  border-color: transparent;
  color: white;
}

/* Disabled state */
.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.btn-sm {
  padding: calc(var(--space-xs) + 2px) var(--space-sm);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-lg);
}

/* ===========================
   Form Controls
   =========================== */

.form-control,
.form-select {
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  border-color: var(--color-border-medium);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--focus-ring-width) rgba(56, 189, 248, 0.25);
  outline: none;
}

.form-control::placeholder {
  color: var(--color-text-tertiary);
}

.form-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-sm);
}

.form-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.form-check-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--focus-ring-width) rgba(37, 99, 235, 0.25);
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Input groups */
.input-group-text {
  background-color: var(--color-surface-2);
  border-color: var(--color-border-medium);
  color: var(--color-text-secondary);
}

/* ===========================
   Table Component
   =========================== */

.table {
  --bs-table-bg: var(--color-surface-0);
  --bs-table-color: var(--color-text-primary);
  --bs-table-border-color: var(--color-border-light);
}

.table th {
  background-color: var(--color-surface-1);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-secondary);
  border-bottom: 2px solid var(--color-border-medium);
  padding: var(--space-md);
}

.table td {
  padding: var(--space-md);
  vertical-align: middle;
}

.table-hover tbody tr:hover {
  background-color: var(--color-surface-1);
  cursor: pointer;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

[data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* ===========================
   Badge Component (Gradient Default)
   =========================== */

.badge {
  font-weight: var(--font-weight-medium);
  padding: calc(var(--space-xs) + 1px) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  border: none;
}

/* Gradient badges by default */
.badge.bg-primary {
  background: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%) !important;
  color: white !important;
}

.badge.bg-success {
  background: linear-gradient(135deg, #047857 0%, #10B981 100%) !important;
  color: white !important;
}

.badge.bg-warning {
  background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%) !important;
  color: white !important;
}

.badge.bg-danger {
  background: linear-gradient(135deg, #B91C1C 0%, #EF4444 100%) !important;
  color: white !important;
}

.badge.bg-info {
  background: linear-gradient(135deg, #0284C7 0%, #38BDF8 100%) !important;
  color: white !important;
}

.badge.bg-secondary {
  background: linear-gradient(135deg, #4B5563 0%, #6B7280 100%) !important;
  color: white !important;
}

.badge.bg-dark {
  background: linear-gradient(135deg, #0A1628 0%, #1E3A5F 100%) !important;
  color: white !important;
}

.badge.bg-light {
  background: var(--color-surface-1) !important;
  color: var(--color-text-primary) !important;
}

/* ===========================
   Alert Component
   =========================== */

.alert {
  border: none;
  border-left: 4px solid;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.alert-primary {
  background-color: rgba(37, 99, 235, 0.1);
  border-left-color: var(--color-primary);
  color: var(--color-primary-active);
}

.alert-success {
  background-color: rgba(5, 150, 105, 0.1);
  border-left-color: var(--color-success);
  color: var(--color-success-active);
}

.alert-warning {
  background-color: rgba(255, 149, 0, 0.1);
  border-left-color: var(--color-warning);
  color: var(--color-warning-active);
}

.alert-danger {
  background-color: rgba(220, 38, 38, 0.1);
  border-left-color: var(--color-danger);
  color: var(--color-danger-active);
}

.alert-info {
  background-color: rgba(56, 189, 248, 0.1);
  border-left-color: var(--color-info);
  color: var(--color-info-active);
}

/* ===========================
   Modal Component
   =========================== */

.modal-content {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  background-color: var(--color-surface-0);
}

.modal-header {
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-lg) var(--space-xl);
}

.modal-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xl);
}

.modal-body {
  padding: var(--space-xl);
}

.modal-footer {
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-lg) var(--space-xl);
}

/* ===========================
   Dropdown Component
   =========================== */

.dropdown-menu {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background-color: var(--color-surface-0);
  padding: var(--space-sm);
}

.dropdown-item {
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-primary);
  transition: background-color var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-surface-1);
  color: var(--color-text-primary);
}

.dropdown-item.active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.dropdown-divider {
  border-top-color: var(--color-border-light);
  margin: var(--space-sm) 0;
}

/* ===========================
   Breadcrumb Component
   =========================== */

.breadcrumb {
  background-color: transparent;
  padding: var(--space-md) 0;
  margin-bottom: var(--space-lg);
}

.breadcrumb-item {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.breadcrumb-item a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
  color: var(--color-text-link-hover);
}

.breadcrumb-item.active {
  color: var(--color-text-primary);
}

/* ===========================
   Pagination Component
   =========================== */

.pagination {
  gap: var(--space-xs);
}

.page-link {
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  padding: var(--space-sm) var(--space-md);
  transition: all var(--transition-fast);
}

.page-link:hover {
  background-color: var(--color-surface-1);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.page-link:focus {
  box-shadow: 0 0 0 var(--focus-ring-width) rgba(37, 99, 235, 0.25);
}

.page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.page-item.disabled .page-link {
  color: var(--color-text-disabled);
  background-color: var(--color-surface-2);
  border-color: var(--color-border-light);
}

/* ===========================
   Progress Component
   =========================== */

.progress {
  background-color: var(--color-surface-2);
  border-radius: var(--radius-full);
  height: 0.75rem;
  box-shadow: var(--shadow-inner);
}

.progress-bar {
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

/* ===========================
   Sidebar Styling
   =========================== */

.sidebar {
  background-color: var(--color-sidebar);
  width: var(--sidebar-width);
  min-height: 100vh;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-base);
}

.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.8);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xs);
  transition: all var(--transition-fast);
  font-size: var(--font-size-sm);
}

.sidebar .nav-link:hover {
  background-color: var(--color-sidebar-hover);
  color: var(--color-text-inverse);
}

.sidebar .nav-link.active {
  background-color: var(--color-sidebar-active);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}

.sidebar .nav-link i {
  margin-right: var(--space-sm);
  width: 1.25rem;
  text-align: center;
}

/* ===========================
   Navbar Styling
   =========================== */

.navbar {
  background-color: var(--color-surface-0);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md) var(--space-lg);
}

.navbar-brand {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  color: var(--color-primary);
}

/* ===========================
   Utility Classes
   =========================== */

/* Spacing utilities using design tokens */
.mt-token-sm { margin-top: var(--space-sm); }
.mt-token-md { margin-top: var(--space-md); }
.mt-token-lg { margin-top: var(--space-lg); }
.mt-token-xl { margin-top: var(--space-xl); }

.mb-token-sm { margin-bottom: var(--space-sm); }
.mb-token-md { margin-bottom: var(--space-md); }
.mb-token-lg { margin-bottom: var(--space-lg); }
.mb-token-xl { margin-bottom: var(--space-xl); }

.p-token-sm { padding: var(--space-sm); }
.p-token-md { padding: var(--space-md); }
.p-token-lg { padding: var(--space-lg); }
.p-token-xl { padding: var(--space-xl); }

/* Text utilities */
.text-primary-custom { color: var(--color-text-primary); }
.text-secondary-custom { color: var(--color-text-secondary); }
.text-tertiary-custom { color: var(--color-text-tertiary); }

/* Background utilities */
.bg-surface-0 { background-color: var(--color-surface-0); }
.bg-surface-1 { background-color: var(--color-surface-1); }
.bg-surface-2 { background-color: var(--color-surface-2); }