/**
 * Brand Color Overrides - Minimal Essential Fixes Only
 * Fixes legacy inline styles that can't be changed in templates
 */

/* ========================================
   LEGACY INLINE STYLE OVERRIDES
   Fix hardcoded old Bootstrap colors in templates
   ======================================== */

/* Old Bootstrap primary (#0d6efd) → New primary (#1565C0) */
[style*="color: #0d6efd"],
[style*="color:#0d6efd"] {
    color: #1565C0 !important;
}

[style*="background: #0d6efd"],
[style*="background:#0d6efd"],
[style*="background-color: #0d6efd"],
[style*="background-color:#0d6efd"] {
    background-color: #1565C0 !important;
}

[style*="border-color: #0d6efd"],
[style*="border-color:#0d6efd"] {
    border-color: #1565C0 !important;
}

/* Hover states for quiz matching/true-false options */
.true-false-option:hover,
.matching-item:hover {
    border-color: #1565C0 !important;
}

.true-false-option.selected,
.matching-item.selected {
    background: #1565C0 !important;
    color: white !important;
    border-color: #1565C0 !important;
}

/* Fill blank inputs */
.fill-blank-input:focus {
    border-color: #1565C0 !important;
    box-shadow: 0 0 0 0.2rem rgba(21, 101, 192, 0.15) !important;
}

/* ========================================
   MODAL ENHANCEMENTS
   ======================================== */

.modal-header {
    background: linear-gradient(135deg, #1565C0 0%, #0d47a1 100%);
    color: white;
    border-bottom: none;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

/* Bootstrap lays the header out title-then-close in source order, which puts
   the close button on the wrong side of an RTL dialog. Reversing the row is
   what the curriculum generator modal already did locally; doing it here
   covers every modal instead. */
[dir="rtl"] .modal-header {
    flex-direction: row-reverse;
}

/* ========================================
   LAYOUT: .container-fluid should actually be fluid
   The vendor theme caps it at max-width: 1200px, which contradicts
   Bootstrap's own naming (container-fluid = always full width) and
   leaves large empty gutters on wide screens while data tables inside
   (quiz list, student list, etc.) are squeezed into less room than
   they have, forcing avoidable horizontal scrolling.
   ======================================== */
.body-wrapper .container-fluid {
    max-width: none;
}

/* On phones, a flat 1.5rem (24px) of page padding on both sides - stacked
   on top of the card's own internal padding - eats a big share of an
   already-narrow screen. Reclaim it below the sm breakpoint regardless of
   which .px-* utility a given page happens to use. */
@media (max-width: 575.98px) {
    /* base.html wraps {% block content %} in its own bare .container-fluid,
       and almost every content template wraps its own markup in a SECOND,
       more specific .container-fluid.px-4 - the two paddings stack. Reduce
       the outer one to near-zero and let the inner one (below) do the work,
       so pages get one consistent gutter instead of two added together. */
    .body-wrapper .container-fluid {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    .body-wrapper .container-fluid.px-4,
    .body-wrapper .container-fluid.px-3 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    .body-wrapper .body-wrapper-inner {
        margin-left: 0.35rem;
        margin-right: 0.35rem;
    }
}

/* ========================================
   TYPOGRAPHY: keep tooltips/popovers on-brand
   The vendor theme's default font (Manrope, via --bs-font-sans-serif)
   leaks into .tooltip/.popover even though the rest of the UI uses
   Cairo/Inter. Match the body's font choice instead.
   ======================================== */
[dir="rtl"] .tooltip,
[dir="rtl"] .popover {
    font-family: var(--font-arabic);
}

[dir="ltr"] .tooltip,
[dir="ltr"] .popover {
    font-family: var(--font-latin);
}

/* ========================================
   ACCESSIBILITY & REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Stacked fractions inside question / answer text */
.math-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 0.25em;
  line-height: 1.18;
  font-size: 1em;
  unicode-bidi: isolate;
  text-align: center;
}

.math-frac-num {
  padding: 0 0.25em 0.05em;
  border-bottom: 2px solid currentColor;
}

.math-frac-den {
  padding: 0.05em 0.25em 0;
}