/**
 * theme.css - Cross-cutting theme rules for dark/light mode support
 *
 * This file contains global theme-related styles that:
 * 1. Ensure consistent color theming across components
 * 2. Handle Bootstrap dark mode integration
 * 3. Provide smooth theme transitions
 *
 * CSS variables are defined in base.html (:root and [data-bs-theme="dark"])
 */

/* ================================================================
   SMOOTH THEME TRANSITIONS
   Prevent jarring color changes when theme toggles
   ================================================================ */
:root {
  /* Color properties transition smoothly */
  --theme-transition-duration: 0.2s;
  --theme-transition-timing: ease-out;
}

/* Apply transitions to common color properties */
body,
.card,
.navbar,
.modal-content,
.dropdown-menu,
.popover,
.tooltip,
.alert,
input,
textarea,
select,
button,
.btn {
  transition:
    background-color var(--theme-transition-duration)
      var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing);
}

/* Disable transitions on first load (prevents flash) */
.theme-loading,
.theme-loading * {
  transition: none !important;
}

/* ================================================================
   DRAW.IO SVG CONTAINERS
   Force light mode for diagrams (they have baked-in colors)
   ================================================================ */
.drawio-svg-container svg,
.diagram-container svg,
[data-diagram-type="drawio"] svg {
  color-scheme: light !important;
}

/* ================================================================
   SVG COLOR VARIABLES
   Two-tier system for educational diagrams
   ================================================================ */

/* --- Type 2: Formal HSC Drawings (adapt to theme) --- */
:root {
  --svg-formal-stroke: #000000;
  --svg-formal-fill: #ffffff;
  --svg-formal-text: #000000;
  --svg-formal-fill-alt: #f8f9fa;
}

[data-bs-theme="dark"] {
  --svg-formal-stroke: #e0e0e0;
  --svg-formal-fill: #2d2d2d;
  --svg-formal-text: #e0e0e0;
  --svg-formal-fill-alt: #3d3d3d;
}

/* --- Wrapper Classes --- */

/* Type 1: Examination - fixed colors, no dark mode adaptation */
.svg-examination,
.svg-examination svg {
  color-scheme: light only !important;
}

/* Type 2: Formal - adapts to theme via CSS variables */
.svg-formal svg {
  color-scheme: inherit;
}

/* Transparent backgrounds for all SVG types */
.svg-examination svg,
.svg-formal svg {
  background: transparent !important;
  background-color: transparent !important;
}

/* ================================================================
   FORCED COLORS (WINDOWS HIGH CONTRAST) SUPPORT
   Let the system override colors for accessibility
   ================================================================ */
@media (forced-colors: active) {
  /* Allow forced colors to work naturally */
  * {
    forced-color-adjust: auto;
  }

  /* Some components should not be adjusted */
  .theme-toggle-icon,
  .diagram-container svg {
    forced-color-adjust: none;
  }

  /* SVG containers: let system override colors for accessibility */
  .svg-examination svg,
  .svg-formal svg {
    forced-color-adjust: auto;
  }
}

/* ================================================================
   CARD BORDERS & SHADOWS
   Boost faint default shadow-sm for both themes
   ================================================================ */
[data-bs-theme="light"] .card.shadow-sm {
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15) !important;
}

[data-bs-theme="dark"] .card.shadow-sm {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15) !important;
}

[data-bs-theme="dark"] .card.shadow-sm:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4) !important;
}

/* ================================================================
   PREFERS-REDUCED-MOTION
   Respect user's motion preferences
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --theme-transition-duration: 0s;
  }
}

/* ================================================================
   SECTION GRADIENT UTILITY CLASSES
   Apply platform section gradients from the CSS token system.
   ================================================================ */
.bg-gradient-challenges {
  background: var(--app-section-challenges);
  color: #fff;
}
.bg-gradient-hsc {
  background: var(--app-section-hsc);
  color: #fff;
}
.bg-gradient-learning {
  background: var(--app-section-learning);
  color: #fff;
}
.bg-gradient-validators {
  background: var(--app-section-validators);
  color: #fff;
}
.bg-gradient-flipcards {
  background: var(--app-section-flipcards);
  color: #fff;
}

/* Windows High Contrast Mode Support for gradient classes */
@media (forced-colors: active) {
  .bg-gradient-challenges,
  .bg-gradient-hsc,
  .bg-gradient-learning,
  .bg-gradient-validators,
  .bg-gradient-flipcards {
    forced-color-adjust: none;
  }
}