/* ========================================================================
   UTILITY CLASSES
   ========================================================================

   All utility classes organized by category. These classes use CSS variables
   defined in 1-variables.css and automatically work in both light/dark modes.

   Categories:
   - Background Colors
   - Text Colors
   - Borders
   - Shadows
   - Typography & Text Decoration
   - Spacing (Width/Height)

   ======================================================================== */

/* ========================================================================
   BACKGROUND COLORS
   ======================================================================== */

.bg-primary { background: var(--primary) !important; }
.bg-primary-10 { background: var(--primary-10) !important; }
.bg-primary-15 { background: var(--primary-15) !important; }
.bg-primary-25 { background: var(--primary-25) !important; }

.bg-accent { background-color: var(--accent-25) !important; color: var(--text) !important; }
.bg-accent-10 { background: var(--accent-10) !important; }
.bg-accent-15 { background: var(--accent-15) !important; }

.bg-neutral { background: var(--neutral) !important; }
.bg-neutral-10 { background: var(--neutral-10) !important; }
.bg-neutral-15 { background: var(--neutral-15) !important; }

.bg-light { background-color: var(--surface) !important; }
.bg-dark { background-color: #1a1a1a !important; }
.bg-white { background-color: var(--surface) !important; }
.bg-body { background-color: var(--background) !important; }
.bg-surface { background-color: var(--surface) !important; }
.bg-transparent { background-color: transparent !important; }

.bg-danger { background-color: var(--danger-15) !important; }
.bg-success { background-color: var(--success-15) !important; }
.bg-info { background-color: var(--neutral-15) !important; }
.bg-warning { background-color: var(--warning-15) !important; }

/* ========================================================================
   TEXT COLORS
   ======================================================================== */

.text-primary {
  color: var(--primary) !important;
  filter: brightness(0.85);
}

html[data-theme="dark"] .text-primary {
  filter: brightness(1.0);
}

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

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

.text-cta {
  color: var(--cta) !important;
  filter: brightness(0.85);
}

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

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

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

.text-light {
  color: var(--neutral) !important;
}

.text-white {
  color: var(--text-inverse) !important;
}

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

.text-body {
  color: var(--text-75) !important;
}

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

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

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

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

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

/* ========================================================================
   BORDERS
   ======================================================================== */

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

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

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

.border-dark {
  border: 2px solid var(--border-heavy);
}

.border-heavy {
  border: 2px solid var(--border-heavy) !important;
}

.border-top {
  border-top: 1px solid var(--border) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--border) !important;
}

.border-start {
  border-left: 1px solid var(--border) !important;
}

.border-end {
  border-right: 1px solid var(--border) !important;
}

.border-left {
  border-left: 1px solid var(--border) !important;
}

.border-right {
  border-right: 1px solid var(--border) !important;
}

/* ========================================================================
   SHADOWS
   ======================================================================== */

.shadow-sm {
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

/* ========================================================================
   TYPOGRAPHY & TEXT DECORATION
   ======================================================================== */

.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
  color: inherit !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

/* ========================================================================
   SPACING (Width/Height)
   ======================================================================== */

.w-10 { width: 10% !important; }
.w-20 { width: 20% !important; }
.w-40 { width: 40% !important; }
.w-45 { width: 45% !important; }

/* Min-width utilities */
.mw-200 { min-width: 200px; }
.mw-250 { min-width: 250px; }
.mw-300 { min-width: 300px; }
.mw-350 { min-width: 350px; }
.mw-400 { min-width: 400px; }
.mw-450 { min-width: 450px; }
.mw-500 { min-width: 500px; }

/* Cursor utilities */
.cursor-pointer { cursor: pointer !important; }

/* Text size utilities */
.small {
  font-size: 0.875em;
}

/* ========================================================================
   TABLE UTILITIES
   ======================================================================== */

/* Small table variant - same size as <small> text */
.table-sm {
  font-size: 0.875rem;
}

.table-sm td, .table-sm th {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

/* ========================================================================
   BUTTON UTILITIES
   ======================================================================== */

/* Extra small button size */
.btn-xs {
  font-size: 0.625rem !important;
  padding: 0.25rem 0.375rem !important;
  border-radius: 0.2rem !important;
  line-height: 1.2 !important;
}

/* Mobile-specific button adjustments */
@media (max-width: 576px) {
  .btn {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
  }

  .btn-sm {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.5rem !important;
  }

  .btn-lg {
    font-size: 1rem !important;
    padding: 0.75rem 1rem !important;
  }

  .btn-xs {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.3rem !important;
  }
}

/* ========================================================================
   BADGES
   ======================================================================== */

.badge-primary {
  background: var(--primary-25);
  color: var(--primary-dark) !important;
}

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

.badge-secondary {
  background: var(--accent-25);
  color: var(--text-75) !important;
}

.badge-neutral {
  background: var(--background);
  color: var(--text-75) !important;
}

.badge-success {
  background: var(--success-25);
  color: var(--success) !important;
}

.badge-warning {
  background: var(--warning-25);
  color: var(--warning) !important;
}

.badge-danger {
  background: var(--danger-25);
  color: var(--danger) !important;
}

.badge-cta {
  background: var(--cta-50);
  border-color: var(--cta-dark);
  color: var(--primary-dark) !important;
}

/* Outline badges */
.badge.badge-outline-primary {
  color: var(--primary) !important;
  background-color: transparent !important;
  border: 1px solid var(--primary) !important;
}

.badge.badge-outline-secondary {
  color: var(--accent-75) !important;
  background-color: transparent !important;
  border: 1px solid var(--accent-75) !important;
}

.badge.badge-outline-success {
  color: #198754 !important;
  background-color: transparent !important;
  border: 1px solid #198754 !important;
}

.badge-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}

.badge-outline-secondary {
  color: var(--accent);
  border-color: var(--accent);
}

/* Badge background utilities */
.badge.bg-light {
  background-color: var(--border) !important;
  color: var(--text) !important;
}

.badge.bg-dark {
  background-color: #1a1a1a !important;
  color: #f7fafc !important;
}

/* ========================================================================
   FORM VALIDATION
   ======================================================================== */

/* Form validation state */
.form-control.is-invalid,
.form-select.is-invalid,
textarea.is-invalid {
  border-color: var(--danger) !important;
  background-color: var(--danger-10) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
textarea.is-invalid:focus {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 0.25rem var(--danger-25) !important;
}

/* ========================================================================
   ALERTS
   ======================================================================== */

.alert-primary {
  background-color: var(--primary-15) !important;
  border-color: var(--primary-50) !important;
  color: var(--text-75) !important;
}

.alert-primary > .bi {
  color: var(--primary) !important;
}

.alert-light {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.alert-dark {
  background-color: #1a1a1a !important;
  border-color: #333 !important;
  color: #e2e8f0 !important;
}

.alert-success {
  background-color: var(--success-15) !important;
  border-color: var(--success) !important;
  color: var(--text) !important;
}

.alert-danger {
  background-color: var(--danger-15) !important;
  border-color: var(--danger) !important;
  color: var(--text) !important;
}

.alert-warning, .alert-info {
  background-color: var(--accent-15) !important;
  border-color: var(--accent-33) !important;
  color: var(--text-75) !important;
}

.alert-warning, .alert-info > .bi {
  color: var(--accent) !important;
}

.alert-cta {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
  border-color: var(--warning) !important;
  color: #333 !important;
}

.alert-cta h6, .alert-cta p, .alert-cta ul, .alert-cta li, .alert-cta strong, .alert-cta .small {
  color: #333 !important;
}

.alert-cta .text-muted {
  color: #555 !important;
}

/* ========================================================================
   HELPER CLASSES
   ======================================================================== */

.is-invalid {
  background-color: var(--danger-15) !important;
}