/* project-wide overrides on top of Bootstrap 5.3 */

/* ---------------------------------------------------------------------
   Palette rationale (see README note in base.html toggle comment too):
   blue is associated in the color-psychology / UX literature with lower
   stress and better concentration on focus-heavy tasks (problem solving,
   reading) — a good fit for a platform that's mostly "sit down and take
   a test/lesson". Purple is associated with confidence and creativity.
   So: blue-leaning indigo carries the *dominant* interactive color
   (buttons, links, active states — the "get things done" color), violet
   is a lighter secondary accent (badges, highlights) rather than the
   main color, keeping the overall feel calm/unobtrusive rather than loud.
   Backgrounds are off-white / near-black with a faint indigo tint rather
   than pure white/black, which is both easier on the eyes and reads as
   more "designed" than stark Bootstrap defaults.
   --------------------------------------------------------------------- */

:root {
    --bs-primary: #4F46E5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-primary-hover: #4338CA;
    --bs-primary-active: #3730A3;
    --bs-link-color: #4F46E5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338CA;
    --bs-link-hover-color-rgb: 67, 56, 202;

    --bs-body-bg: #F7F7FC;
    --bs-body-color: #1E1B29;
    --bs-secondary-bg: #EFEEFA;
    --bs-tertiary-bg: #F2F1FA;
    --bs-border-color: #E1DFF2;

    --accent-violet: #7C3AED;
    --brand-bar-bg: #312E81;
    --brand-bar-color: #EDEBFA;
}

[data-bs-theme="dark"] {
    --bs-primary: #818CF8;
    --bs-primary-rgb: 129, 140, 248;
    --bs-primary-hover: #A5B4FC;
    --bs-primary-active: #C7D2FE;
    --bs-link-color: #A5B4FC;
    --bs-link-color-rgb: 165, 180, 252;
    --bs-link-hover-color: #C7D2FE;
    --bs-link-hover-color-rgb: 199, 210, 254;

    --bs-body-bg: #14121F;
    --bs-body-color: #EDEBF7;
    --bs-secondary-bg: #211F38;
    --bs-tertiary-bg: #1C1A30;
    --bs-border-color: #322F4E;

    --accent-violet: #A78BFA;
    --brand-bar-bg: #1B1934;
    --brand-bar-color: #EDEBFA;
}

body {
    transition: background-color .15s ease, color .15s ease;
}

/* Buttons: .btn-primary's own --bs-btn-* variables are Bootstrap's compiled
   defaults (#0d6efd blue), NOT live references to --bs-primary — redefining
   --bs-primary alone does nothing here, every state needs setting explicitly. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-active);
    --bs-btn-active-border-color: var(--bs-primary-active);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* Navbar stays one constant brand color in both themes — an anchor users
   can orient by, rather than something that flips underneath them. */
.navbar.navbar-brand-bar {
    background-color: var(--brand-bar-bg) !important;
}
.navbar.navbar-brand-bar .navbar-brand,
.navbar.navbar-brand-bar .text-light {
    color: var(--brand-bar-color) !important;
}
.navbar.navbar-brand-bar a {
    text-decoration: none;
}
.navbar.navbar-brand-bar a:hover {
    opacity: .8;
}

.badge.text-bg-info {
    background-color: var(--accent-violet) !important;
    color: #fff !important;
}

/* Theme toggle button in the navbar */
.theme-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    color: var(--brand-bar-color);
    border-radius: 999px;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1rem;
}
.theme-toggle:hover {
    background: rgba(255, 255, 255, .12);
}

/* Character (gamification app) — plain CSS + emoji, no image assets. */
.character-stage {
    position: relative;
    height: 260px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease;
}
.character-blob {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
    transition: background-color .2s ease;
}
.character-eyes {
    font-size: 1.75rem;
    color: rgba(255, 255, 255, .9);
    letter-spacing: .25rem;
}
.character-accessory {
    position: absolute;
    bottom: 0.25rem;
    right: -0.5rem;
    font-size: 2rem;
}
.character-hat {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
}

/* Cards/list items: soft, consistent elevation instead of bare Bootstrap
   1px borders — reads calmer, less "boxy". */
.card,
.list-group-item {
    border-color: var(--bs-border-color);
}
.card {
    box-shadow: 0 1px 3px rgba(30, 27, 41, .06);
}
[data-bs-theme="dark"] .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* Tag picker (static/js/tag_picker.js) */
.tag-picker-wrap {
    display: block;
    max-width: 420px;
}
.tag-picker-panel {
    display: none;
}
.tag-picker-panel.show {
    display: block;
}
.tag-picker-list .form-check {
    padding-top: .15rem;
    padding-bottom: .15rem;
}

/* Rich text editor (static/js/rich_editor.js + Quill) */
.rich-editor-quill {
    background: var(--bs-body-bg);
}
.rich-editor-quill .ql-editor {
    min-height: 6rem;
}