/*
 * ============================================================
 * GoodCharacter — Brand Theme Override
 * brand-override.css
 *
 * This file bridges theme.css variables into the existing style.css
 * variable system. It overrides the old --primary, --bg-sidebar etc.
 * with green brand values — without touching style.css at all.
 *
 * Load order: theme.css → style.css → brand-override.css
 * ============================================================
 */

:root {
    /* ---- Remapping old variables to green brand ---- */

    /* Primary: was indigo (#4f46e5) → now Deep Green */
    --primary:          #1A6B4A;
    --primary-hover:    #1F7D56;
    --primary-bg:       rgba(26, 107, 74, 0.1);

    /* Sidebar: was dark slate (#1e293b) → now Dark Charcoal Green */
    --bg-sidebar:       #0D1610;

    /* Page background: was cold gray (#f8fafc) → now warm off-white */
    --bg-body:          #F4F7F5;

    /* Card background stays white */
    --bg-card:          #FFFFFF;

    /* Borders: was cold (#e2e8f0) → now warm green-tinted */
    --border:           #D1E8DC;

    /* Text: was cold (#0f172a) → now warm near-black */
    --text:             #111B16;

    /* Secondary text: was cold (#475569) → warm green-gray */
    --text-sec:         #4A6357;

    /* Muted text */
    --text-muted:       #9BB5A8;

    /* Semantic — keep but shift to brand-consistent tones */
    --success:          #16A34A;
    --success-bg:       rgba(22, 163, 74, 0.1);
    --warning:          #D97706;
    --warning-bg:       rgba(217, 119, 6, 0.1);
    --danger:           #DC2626;
    --danger-bg:        rgba(220, 38, 38, 0.1);
    --info:             #0D9488;
    --info-bg:          rgba(13, 148, 136, 0.1);

    /* Radius */
    --radius:           8px;

    /* Shadow */
    --shadow:           0 1px 4px rgba(26, 107, 74, 0.07), 0 0 0 1px #D1E8DC;
}


/* =============================================
 * SIDEBAR — Brand Green Overrides
 * ============================================= */

.sidebar {
    background: var(--sidebar-bg, #0D1610);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.sidebar-header {
    background: #141F17;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Logo brand icon: was indigo gradient → now green gradient */
.sidebar-brand-icon {
    background: linear-gradient(135deg, #1A6B4A, #2D9966);
}

/* Accent text in logo */
.sidebar-brand-text span {
    color: #4DB87F;
}

/* Nav link default state */
.nav-link {
    color: #96ADA3;
    border-radius: 6px;
    transition: all 150ms ease;
}

/* Nav link hover */
.nav-link:hover {
    background: rgba(45, 153, 102, 0.08);
    color: #E8F2EC;
}

/* Nav link active */
.nav-link.active {
    background: rgba(26, 107, 74, 0.25);
    color: #FFFFFF;
    border-left: 3px solid #2D9966;
    padding-left: calc(.75rem - 3px);
}

.nav-link.active svg {
    opacity: 1;
    color: #4DB87F;
}

/* Nav section labels */
.nav-title {
    color: #3A4D43;
}

/* Nav badge */
.nav-badge {
    background: #1A6B4A;
}

/* User card at sidebar bottom */
.user-card {
    background: rgba(45, 153, 102, 0.08);
    border: 1px solid rgba(45, 153, 102, 0.15);
}

.user-avatar {
    background: linear-gradient(135deg, #1A6B4A, #2D9966);
}

.user-name {
    color: #E8F2EC;
}

.user-role {
    color: #5A7065;
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}


/* =============================================
 * HEADER / NAVBAR — Brand Overrides
 * ============================================= */

.header {
    background: #FFFFFF;
    border-bottom: 1px solid #D1E8DC;
}

.breadcrumb a {
    color: #1A6B4A;
}

.menu-btn {
    background: #F4F7F5;
    color: #4A6357;
}

.menu-btn:hover {
    background: #E8F5EF;
    color: #1A6B4A;
}


/* =============================================
 * BUTTONS — Brand Overrides
 * ============================================= */

.btn-primary {
    background: #1A6B4A;
    color: #FFFFFF;
    border: none;
}

.btn-primary:hover {
    background: #1F7D56;
}

.btn-primary:active {
    background: #114D34;
    filter: brightness(0.95);
}

.btn-secondary {
    background: transparent;
    color: #111B16;
    border: 1px solid #D1E8DC;
}

.btn-secondary:hover {
    background: #EBF7F1;
    border-color: #A3D9BB;
}


/* =============================================
 * STAT CARDS — Brand Overrides
 * ============================================= */

.stat-card {
    background: #FFFFFF;
    border: 1px solid #D1E8DC;
    box-shadow: 0 1px 4px rgba(26, 107, 74, 0.06);
}

/* Blue variant → repurposed as primary green */
.stat-card.blue::before { background: #1A6B4A; }
.stat-card.blue .stat-value { color: #1A6B4A; }
.stat-card.blue .stat-icon { background: rgba(26, 107, 74, 0.1); color: #1A6B4A; }


/* =============================================
 * CARDS — Brand Overrides
 * ============================================= */

.card {
    background: #FFFFFF;
    border: 1px solid #D1E8DC;
    box-shadow: 0 1px 4px rgba(26, 107, 74, 0.06);
}

.card-header {
    border-bottom: 1px solid #D1E8DC;
    background: #F4F7F5;
}


/* =============================================
 * TABLES — Brand Overrides
 * ============================================= */

th {
    background: #EBF7F1;
    color: #4A6357;
    letter-spacing: 0.04em;
}

th, td {
    border-bottom: 1px solid #D1E8DC;
}

tbody tr:hover td {
    background: #F0FAF4;
}


/* =============================================
 * FORMS / INPUTS — Brand Overrides
 * ============================================= */

.form-input,
.form-select {
    background: #FFFFFF;
    border: 1px solid #D1E8DC;
    color: #111B16;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-input:focus,
.form-select:focus {
    border-color: #2D9966;
    box-shadow: 0 0 0 3px rgba(45, 153, 102, 0.15);
}

.form-input::placeholder {
    color: #9BB5A8;
}


/* =============================================
 * BADGES — Brand Overrides
 * ============================================= */

.badge-green {
    background: rgba(22, 163, 74, 0.1);
    color: #16A34A;
}

.badge-blue {
    background: rgba(26, 107, 74, 0.1);
    color: #1A6B4A;
}


/* =============================================
 * AUTH PAGES — Brand Overrides
 * ============================================= */

.auth-side {
    background: linear-gradient(135deg, #0D1610 0%, #141F17 50%, #0A3D22 100%);
}

.auth-brand-icon {
    background: linear-gradient(135deg, #1A6B4A, #2D9966);
}

.auth-brand-text span {
    color: #4DB87F;
}

.auth-footer a {
    color: #1A6B4A;
}


/* =============================================
 * LOADER — Brand Overrides
 * ============================================= */

.loader {
    background: #F4F7F5;
}

.loader-spinner {
    border-color: #D1E8DC;
    border-top-color: #1A6B4A;
}

.loader-text span {
    color: #1A6B4A;
}


/* =============================================
 * QUIZ SCREEN — Brand Overrides
 * ============================================= */

.quiz-progress-fill {
    background: linear-gradient(90deg, #1A6B4A, #2D9966);
}

.option:hover {
    border-color: #1A6B4A;
    background: #EBF7F1;
}

.option.selected {
    border-color: #1A6B4A;
    background: #D4EFE1;
}

.quiz-nav-btn {
    background: #1A6B4A;
    color: #FFFFFF;
}

.quiz-nav-btn:hover {
    background: #1F7D56;
}

.quiz-nav-btn.prev {
    background: transparent;
    border: 1px solid #D1E8DC;
    color: #111B16;
}

.quiz-nav-btn.prev:hover {
    background: #EBF7F1;
    border-color: #A3D9BB;
}


/* =============================================
 * RESULT SCREEN — Brand Overrides
 * ============================================= */

.result-header {
    background: linear-gradient(135deg, #1A6B4A 0%, #2D9966 100%);
}

.result-score-circle {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.15);
}

.result-score-value {
    color: #FFFFFF;
}

.result-score-label {
    color: rgba(255, 255, 255, 0.8);
}


/* =============================================
 * SCROLLBAR — Brand Overrides
 * ============================================= */

::-webkit-scrollbar-thumb {
    background: #A3D9BB;
}

::-webkit-scrollbar-thumb:hover {
    background: #1A6B4A;
}

::-webkit-scrollbar-track {
    background: #EEF3F0;
}


/* =============================================
 * FOCUS RING — Accessibility
 * ============================================= */

:focus-visible {
    outline: 2px solid #2D9966;
    outline-offset: 2px;
}