/* ==========================================================================
   LAYER 1: :ROOT TOKENS & GLOBAL ACCESSIBILITY STATES
   Safe, semantic foundations for the entire web application layout context.
   ========================================================================== */
:root {
    /* Global Canvas Framework */
    --bg-app-main: #f2f8ff; /* Central Light Blue main backdrop */
    --bg-card-surface: #ffffff; /* Pure White card surfaces */
    --border-neutral-subtle: rgba(0, 74, 119, 0.08);
    /* Typography & High-Contrast Gray Scale */
    --text-dark-primary: #1e293b; /* High-contrast charcoal text for body copy */
    --text-gray-muted: #595959; /* 4.5:1 WCAG compliant gray text replacement */
    /* Theme Core Design Tokens */
    --theme-purple-dark: #671f78; /* Primary Actions, Headers, Custom Brand Buttons */
    --theme-purple-light: #c0a2c7; /* Purple Tint backdrops / Danger backgrounds */

    --theme-green-dark: #006835; /* Success Content text and boundaries */
    --theme-green-light: #bbd7c9; /* Success backdrop containers */

    --theme-orange-dark: #a85b10; /* Warning Content text and boundaries */
    --theme-orange-light: #f8f1ea; /* Warning alert layouts */

    --theme-blue-dark: #004a77; /* Informational Content / Secondary actions */
    --theme-blue-light: #9cb8ca; /* Info container states */
    /* Structural Rules */
    --border-radius-base: 10px;
    --shadow-card-subtle: 0 4px 12px rgba(15, 23, 42, 0.04);
}

/* Base Document Overrides */
html, body {
    background-color: var(--bg-app-main) !important;
    color: var(--text-dark-primary) !important;
}

/* Global Text and Placeholder Contrast Fixes */
small, .text-muted, .time-stamp, .text-gray-300, .text-gray-400 {
    color: var(--text-gray-muted) !important;
}

[contenteditable="true"]:empty:not(:focus):before,
.form-content-editable[contenteditable="true"]:empty:not(:focus):before {
    color: var(--text-gray-muted) !important;
}

/* Global Focus Ring Safety System */
.form-control:focus, .custom-select:focus, .page-link:focus {
    border-color: var(--theme-purple-dark) !important;
    box-shadow: 0 0 0 0.2rem rgba(103, 31, 120, 0.22) !important;
}


/* ==========================================================================
   LAYER 2: EXPLICIT COMPONENT REFACTOR & DEVTOOLS WINNERS
   Direct overrides targeting known, specific elements to prevent regressions.
   ========================================================================== */

/* Generic Layout Standard Cards Conversion to White */
.card, .card-container {
    background: var(--bg-card-surface) !important;
    background-color: var(--bg-card-surface) !important;
    background-image: none !important;
    border: 1px solid var(--border-neutral-subtle) !important;
    border-radius: var(--border-radius-base) !important;
    box-shadow: var(--shadow-card-subtle) !important;
}

.card-header {
    border-bottom: 1px solid var(--border-neutral-subtle) !important;
    background: var(--bg-card-surface) !important;
}

/* Explicit Onboarding & Login Views Layout Targets */
.onboarding-auth-shell {
    background-size: cover;
    background-image: url('../img/svg/BackgroundLogin.svg');
    background-color: var(--bg-app-main);
    background-repeat: no-repeat;
    background-position: initial;
}

.auth-card-view {
    min-width: 400px;
    max-width: 460px;
    padding: 2.5rem !important;
    margin-top: 10vh;
}

.auth-card-logo {
    height: 140px;
    margin: -20px auto 1rem auto;
    display: block;
}

.btn-passport-submit {
    width: 100%;
    height: 60px;
    font-size: 1.25rem;
}

.loginFonts {
    font-family: inherit;
    font-weight: 700;
    font-size: 2rem;
    color: var(--theme-purple-dark) !important;
    text-align: center;
    display: block;
    margin-bottom: 1.5rem;
}


/* ==========================================================================
   LAYER 3: PRECISE FRAMEWORK REMAPS (PRESERVING SEMANTIC MEANING)
   Maintains separation of intent across standard layout hooks.
   ========================================================================== */

/* Custom App Identity Elements */
.btn-heroes-made {
    background-color: var(--theme-green-dark) !important;
    border-color: var(--theme-green-dark) !important;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 36px !important;
    padding: 0.5rem 1.5rem;
    transition: all 0.2s ease-in-out;
}

    .btn-heroes-made:hover, .btn-heroes-made:focus {
        background-color: #004221 !important; /* Fixed: Stays green, darkens safely */
        border-color: #004221 !important;
        color: #ffffff !important;
    }

.link-heroes-made {
    color: var(--theme-green-dark) !important;
    text-decoration: underline !important;
    font-weight: 600;
}

    .link-heroes-made:hover {
        color: var(--theme-purple-dark) !important; /* Text links changing color is fine */
    }

/* Framework Primary Actions (Mapped to brand Purple) */
.btn-primary, .bg-primary {
    background-color: var(--theme-purple-dark) !important;
    border-color: var(--theme-purple-dark) !important;
    color: #ffffff !important;
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: #491357 !important; /* Stays purple, darkens safely */
        border-color: #491357 !important;
    }

/* Framework Success Actions (Mapped to dark Green) */
.text-success {
    color: var(--theme-green-dark) !important;
}

.btn-success, .bg-success {
    background-color: var(--theme-green-dark) !important;
    border-color: var(--theme-green-dark) !important;
    color: #ffffff !important;
}

    .btn-success:hover, .btn-success:focus {
        background-color: #004221 !important; /* Stays green, darkens safely */
        border-color: #004221 !important;
    }

.alert-success, .bg-success-50, .bg-success-100 {
    background-color: var(--theme-green-light) !important;
    color: var(--theme-green-dark) !important;
    border-color: var(--theme-green-dark) !important;
}

/* Framework Warning Actions (Mapped to dark Orange) */
.text-warning {
    color: var(--theme-orange-dark) !important;
}

.btn-warning, .bg-warning {
    background-color: var(--theme-orange-dark) !important;
    border-color: var(--theme-orange-dark) !important;
    color: #ffffff !important;
}

    .btn-warning:hover, .btn-warning:focus {
        background-color: #7a4109 !important; /* Stays orange, darkens safely */
        border-color: #7a4109 !important;
    }

.alert-warning, .bg-warning-50, .bg-warning-100 {
    background-color: var(--theme-orange-light) !important;
    color: var(--theme-orange-dark) !important;
    border-color: var(--theme-orange-dark) !important;
}

/* Framework Danger Alerts (Mapped to Purple Light/Dark Matrix to align with design goals) */
.text-danger {
    color: var(--theme-purple-dark) !important;
}

.btn-danger, .bg-danger {
    background-color: var(--theme-purple-dark) !important;
    border-color: var(--theme-purple-dark) !important;
    color: #ffffff !important;
}

    .btn-danger:hover, .btn-danger:focus {
        background-color: #491357 !important; /* Stays purple, darkens safely */
        border-color: #491357 !important;
    }

.alert-danger, .bg-danger-50, .bg-danger-100 {
    background-color: var(--theme-purple-light) !important;
    color: var(--theme-purple-dark) !important;
    border-color: var(--theme-purple-dark) !important;
}

/* Framework Informational Contexts (Mapped to dark Blue to protect identity differences) */
.text-info {
    color: var(--theme-blue-dark) !important;
}

.btn-info, .bg-info {
    background-color: var(--theme-blue-dark) !important;
    border-color: var(--theme-blue-dark) !important;
    color: #ffffff !important;
}

    .btn-info:hover, .btn-info:focus {
        background-color: #003352 !important; /* Stays blue, darkens safely */
        border-color: #003352 !important;
    }

.alert-info, .bg-info-50, .bg-info-100 {
    background-color: var(--theme-blue-light) !important;
    color: var(--theme-blue-dark) !important;
    border-color: var(--theme-blue-dark) !important;
}

/* Strip dynamic background gradient utility overlays safely */
.bg-trans-gradient, .bg-primary-gradient, .bg-info-gradient,
.bg-success-gradient, .bg-warning-gradient, .bg-danger-gradient,
.bg-fusion-gradient, .bg-brand-gradient {
    background-image: none !important;
}

/* Unified Injected SVG Icon Standard Definitions */
.svg-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    max-width: 1em;
    max-height: 1em;
    vertical-align: -0.125em;
    color: inherit;
    fill: currentColor;
    flex-shrink: 0;
}

    /* SAFE FIX: Only colorize elements that aren't explicitly transparent */
    .svg-icon path:not([fill="none"]),
    .svg-icon circle:not([fill="none"]),
    .svg-icon rect:not([fill="none"]),
    .svg-icon polygon:not([fill="none"]),
    .svg-icon ellipse:not([fill="none"]) {
        fill: currentColor;
    }

    .svg-icon [stroke]:not([stroke="none"]) {
        stroke: currentColor;
    }


/* ==========================================================================
   LAYER 4: TEACHING GRID LAYOUT & CARD ARCHITECTURE COMPREHENSIVE OVERRIDES
   ========================================================================== */
.teaching-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 18px !important;
}

.teaching-card {
    border-radius: 18px !important;
    border: 1px solid transparent !important;
    padding: 16px 14px 14px !important;
    min-height: 230px !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-card-surface) !important;
}

.teaching-card-head {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.teaching-method-badge {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    flex: 0 0 auto !important;
}

.teaching-card-title {
    margin: 0 0 4px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    color: var(--text-dark-primary) !important;
}

.teaching-card-bestfor {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
}

.teaching-card-copy {
    margin: 0 0 18px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--text-gray-muted) !important;
}

.teaching-card-btn {
    min-height: 40px !important;
    border-radius: 12px !important;
    border: 1.5px solid transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    margin-top: auto !important;
}

    .teaching-card-btn + .teaching-card-btn {
        margin-top: 10px !important;
    }

/* Theme Modifier Passes */
.teaching-card-purple {
    border-color: var(--theme-purple-dark) !important;
}

    .teaching-card-purple .teaching-method-badge {
        background: var(--theme-purple-dark) !important;
        color: #ffffff !important;
    }

    .teaching-card-purple .teaching-card-bestfor {
        color: var(--theme-purple-dark) !important;
    }

.teaching-card-btn-purple {
    background: var(--theme-purple-dark) !important;
    color: #ffffff !important;
    border-color: var(--theme-purple-dark) !important;
}

    .teaching-card-btn-purple:hover {
        background: #491357 !important;
        border-color: #491357 !important;
    }

.teaching-card-green {
    border-color: var(--theme-green-dark) !important;
}

    .teaching-card-green .teaching-method-badge {
        background: var(--theme-green-dark) !important;
        color: #ffffff !important;
    }

    .teaching-card-green .teaching-card-bestfor {
        color: var(--theme-green-dark) !important;
    }

.teaching-card-btn-green {
    background: var(--theme-green-dark) !important;
    color: #ffffff !important;
    border-color: var(--theme-green-dark) !important;
}

    .teaching-card-btn-green:hover {
        background: #004221 !important;
        border-color: #004221 !important;
    }

.teaching-card-cyan {
    border-color: var(--theme-blue-dark) !important;
}

    .teaching-card-cyan .teaching-method-badge {
        background: var(--theme-blue-dark) !important;
        color: #ffffff !important;
    }

    .teaching-card-cyan .teaching-card-bestfor {
        color: var(--theme-blue-dark) !important;
    }

.teaching-card-btn-cyan {
    background: var(--theme-blue-dark) !important;
    color: #ffffff !important;
    border-color: var(--theme-blue-dark) !important;
}

    .teaching-card-btn-cyan:hover {
        background: #003352 !important;
        border-color: #003352 !important;
    }

.teaching-card-gold {
    border-color: var(--theme-orange-dark) !important;
}

    .teaching-card-gold .teaching-method-badge {
        background: var(--theme-orange-dark) !important;
        color: #ffffff !important;
    }

    .teaching-card-gold .teaching-card-bestfor {
        color: var(--theme-orange-dark) !important;
    }

.teaching-card-btn-gold {
    background: var(--theme-orange-dark) !important;
    color: #ffffff !important;
    border-color: var(--theme-orange-dark) !important;
}

    .teaching-card-btn-gold:hover {
        background: #7a4109 !important;
        border-color: #7a4109 !important;
    }

.teaching-card-btn.disabled {
    background: #E5E7EB !important;
    color: #55585D !important;
    opacity: .6 !important;
    pointer-events: none !important;
    border-color: transparent !important;
}