/*
 |-----------------------------------------------------------------------
 | Faheem Brand Colors (Overrides Only)
 |-----------------------------------------------------------------------
 | Goal: Align system colors with Faheem logo identity without changing layout.
 | This file should be loaded after the main frontend/backend CSS to act as an override.
 */

:root {
    /* Brand palette (from logo) */
    --faheem-primary: #0ea5a5;         /* teal */
    --faheem-primary-rgb: 14, 165, 165;
    --faheem-primary-hover: #0b8f8f;
    --faheem-primary-active: #087575;

    --faheem-secondary: #4f46e5;       /* indigo */
    --faheem-secondary-rgb: 79, 70, 229;

    --faheem-accent: #ff5a6b;          /* coral */
    --faheem-accent-rgb: 255, 90, 107;

    --faheem-gold: #f5a524;            /* orange/gold */
    --faheem-gold-rgb: 245, 165, 36;

    --faheem-gradient: linear-gradient(135deg, var(--faheem-primary) 0%, var(--faheem-secondary) 100%);

    /* Backend theme primary */
    --skinColor: var(--faheem-primary);

    /* Frontend theme primary */
    --color-1: var(--faheem-primary);
    --primary-color: var(--faheem-primary);

    /* Bootstrap 5 color tokens (works for components using CSS vars) */
    --bs-primary: var(--faheem-primary);
    --bs-primary-rgb: var(--faheem-primary-rgb);
    --bs-link-color: var(--faheem-primary);
    --bs-link-hover-color: var(--faheem-primary-active);
    --bs-focus-ring-color: rgba(var(--faheem-primary-rgb), 0.25);
}

/* -------------------------------------------------------------------- */
/* Bootstrap-like utilities (covers many UI pieces across panels)         */
/* -------------------------------------------------------------------- */
.text-primary {
    color: var(--faheem-primary) !important;
}
.bg-primary {
    background-color: var(--faheem-primary) !important;
}
.border-primary {
    border-color: rgba(var(--faheem-primary-rgb), 0.35) !important;
}
.link-primary {
    color: var(--faheem-primary) !important;
}
.link-primary:hover,
a.link-primary:hover {
    color: var(--faheem-primary-active) !important;
}

.btn-primary,
.btn.btn-primary {
    background-color: var(--faheem-primary) !important;
    border-color: var(--faheem-primary) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:focus {
    background-color: var(--faheem-primary-hover) !important;
    border-color: var(--faheem-primary-hover) !important;
}
.btn-primary:active,
.btn.btn-primary:active,
.btn-primary.active,
.btn.btn-primary.active {
    background-color: var(--faheem-primary-active) !important;
    border-color: var(--faheem-primary-active) !important;
}

.btn-outline-primary,
.btn.btn-outline-primary {
    color: var(--faheem-primary) !important;
    border-color: rgba(var(--faheem-primary-rgb), 0.5) !important;
}
.btn-outline-primary:hover,
.btn.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn.btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--faheem-primary) !important;
    border-color: var(--faheem-primary) !important;
}

.badge.bg-primary,
.badge.text-bg-primary,
.text-bg-primary {
    background-color: var(--faheem-primary) !important;
    color: #fff !important;
}
.progress-bar.bg-primary,
.progress-bar {
    --bs-progress-bar-bg: var(--faheem-primary);
}

/* Select2 highlights */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgba(var(--faheem-primary-rgb), 0.12) !important;
    color: var(--faheem-primary-active) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--faheem-primary) !important;
    border-color: var(--faheem-primary) !important;
    color: #fff !important;
}

/* -------------------------------------------------------------------- */
/* Project-specific buttons (backend/frontend)                            */
/* -------------------------------------------------------------------- */
.ol-btn-primary {
    background: var(--faheem-primary) !important;
}
.ol-btn-primary:hover,
.ol-btn-primary:active {
    background-color: var(--faheem-primary-hover) !important;
}

.ol-btn-light-primary {
    color: var(--faheem-primary) !important;
    border-color: rgba(var(--faheem-primary-rgb), 0.35) !important;
}
.ol-btn-light-primary:hover,
.ol-btn-light-primary:active {
    background-color: rgba(var(--faheem-primary-rgb), 0.12) !important;
    color: var(--faheem-primary-active) !important;
}

/* Backend search hover (was hardcoded) */
.mobile-search-inner .btn-search:hover,
.mobile-search-inner .btn-search:active {
    background-color: var(--faheem-primary-hover) !important;
    color: #fff !important;
}

/* -------------------------------------------------------------------- */
/* Frontend gradients used widely (eBtn gradient, borders, etc.)          */
/* -------------------------------------------------------------------- */
.gradient,
.gradient-border,
.gradient-border2 {
    background-image: linear-gradient(to right, var(--faheem-primary) 0%, var(--faheem-secondary) 100%) !important;
}
.gradient-border-btn:hover,
.gradient-border-btn:active {
    background-image: linear-gradient(to right, var(--faheem-primary) 0%, var(--faheem-secondary) 100%) !important;
}

/* Offcanvas templates sometimes re-define theme vars: force our primary */
.offcanvas.offcanvas-start {
    --color-1: var(--faheem-primary);
}

/* Teacher register page (custom inline styles use old blue) */
.teacher-wizard-dot.active {
    background: var(--faheem-secondary) !important;
    border-color: var(--faheem-secondary) !important;
}
.subject-checkbox:hover,
.subject-checkbox.checked {
    border-color: var(--faheem-secondary) !important;
}
.subject-checkbox.checked {
    background: rgba(var(--faheem-secondary-rgb), 0.10) !important;
}
.accordion-button:not(.collapsed) {
    color: var(--faheem-secondary) !important;
    background-color: rgba(var(--faheem-secondary-rgb), 0.06) !important;
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--faheem-secondary-rgb), 0.25) !important;
}

/* -------------------------------------------------------------------- */
/* SVG hardcoded primary color mapping (components often use fill attr)   */
/* -------------------------------------------------------------------- */
svg [fill="#2F57EF"],
svg [fill="#2f57ef"] {
    fill: var(--faheem-primary) !important;
}
svg [stroke="#2F57EF"],
svg [stroke="#2f57ef"] {
    stroke: var(--faheem-primary) !important;
}
svg stop[stop-color="#2F57EF"],
svg stop[stop-color="#2f57ef"] {
    stop-color: var(--faheem-primary) !important;
}

/* Purple hover accents in some header templates */
.header-area .Userprofile .dropmenu-end a:hover svg path,
.Userprofile .dropmenu-end a:hover {
    color: var(--faheem-secondary) !important;
    fill: var(--faheem-secondary) !important;
}

/* Purple hover accents in some header templates */
.header-area .Userprofile .dropmenu-end a:hover svg path,
.Userprofile .dropmenu-end a:hover {
    color: var(--faheem-secondary) !important;
    fill: var(--faheem-secondary) !important;
}

/* -------------------------------------------------------------------- */
/* SVG hardcoded primary color mapping (components often use fill attr)   */
/* -------------------------------------------------------------------- */
svg [fill="#2F57EF"],
svg [fill="#2f57ef"] {
    fill: var(--faheem-primary) !important;
}
svg [stroke="#2F57EF"],
svg [stroke="#2f57ef"] {
    stroke: var(--faheem-primary) !important;
}
svg stop[stop-color="#2F57EF"],
svg stop[stop-color="#2f57ef"] {
    stop-color: var(--faheem-primary) !important;
}