/*
 * Themes. <html data-theme="classic|dark|chalk|pastel" data-bs-theme="light|dark"> is rendered by the layout
 * from the rtg-theme cookie (switch: theme menu, site.js). Every theme defines the same --app-* variables;
 * site.css and landing.css use only these, Bootstrap components are adjusted below.
 */

/* ---------------------------------------------------------------- Klasyczny (default) */
:root,
[data-theme="classic"] {
    --app-bg: #f5f7fa;
    --app-surface: #ffffff;
    --app-surface-2: #f8f9fb;
    --app-border: #e3e7ee;
    --app-nav-bg: #1f3b64;
    --app-primary: #0d6efd;
    --app-primary-hover: #0b5ed7;
    --app-primary-fg: #ffffff;
    --app-primary-text: #0d6efd;
    --app-primary-rgb: 13, 110, 253;
    --app-selected-row: #eef5ff;
    --app-correct: #146c43;
    --app-line: #999999;
    --app-overlay: rgba(255, 255, 255, .75);
    --app-row-error: #fff1f1;
    --app-row-warning: #fffaf0;
    --app-hero-1: #1f3b64;
    --app-hero-2: #142a4a;
    --app-hero-glow: #2f5a96;
    --app-happy-bg: #f1f9f3;
    --app-happy-border: #cfe8d6;
    --app-scared-bg: #fdf2f1;
    --app-scared-border: #f5d0cc;
    --app-heading-font: inherit;
}

/* ---------------------------------------------------------------- Ciemny */
[data-theme="dark"] {
    --app-bg: #0e131a;
    --app-surface: #161d27;
    --app-surface-2: #1c2531;
    --app-border: #2a3443;
    --app-nav-bg: #0a101a;
    --app-primary: #4f8cff;
    --app-primary-hover: #3a78ee;
    --app-primary-fg: #ffffff;
    --app-primary-text: #7eabff;
    --app-primary-rgb: 79, 140, 255;
    --app-selected-row: #1b2a40;
    --app-correct: #5fd38d;
    --app-line: #5f6b7b;
    --app-overlay: rgba(0, 0, 0, .6);
    --app-row-error: rgba(220, 53, 69, .16);
    --app-row-warning: rgba(255, 193, 7, .12);
    --app-hero-1: #16243a;
    --app-hero-2: #0a1220;
    --app-hero-glow: #24406b;
    --app-happy-bg: rgba(46, 125, 50, .14);
    --app-happy-border: rgba(102, 187, 106, .35);
    --app-scared-bg: rgba(229, 57, 53, .12);
    --app-scared-border: rgba(239, 83, 80, .35);
    --app-heading-font: inherit;
    --bs-body-color: #dde3ea;
    --bs-secondary-color: rgba(221, 227, 234, .68);
}

/* ---------------------------------------------------------------- Kreda (school blackboard) */
[data-theme="chalk"] {
    --app-bg: #24392d;
    --app-surface: #2c4637;
    --app-surface-2: #31503f;
    --app-border: rgba(240, 238, 225, .2);
    --app-nav-bg: #6b4425;
    --app-primary: #f2d16b;
    --app-primary-hover: #e8c450;
    --app-primary-fg: #23392c;
    --app-primary-text: #f6dc8a;
    --app-primary-rgb: 242, 209, 107;
    --app-selected-row: rgba(242, 209, 107, .12);
    --app-correct: #b5f0a8;
    --app-line: rgba(240, 238, 225, .45);
    --app-overlay: rgba(20, 32, 25, .7);
    --app-row-error: rgba(255, 138, 128, .16);
    --app-row-warning: rgba(242, 209, 107, .14);
    --app-hero-1: #2f4d3b;
    --app-hero-2: #1d3024;
    --app-hero-glow: #3d6650;
    --app-happy-bg: rgba(181, 240, 168, .1);
    --app-happy-border: rgba(181, 240, 168, .35);
    --app-scared-bg: rgba(255, 138, 128, .1);
    --app-scared-border: rgba(255, 138, 128, .35);
    --app-heading-font: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    --bs-body-color: #f1efe4;
    --bs-secondary-color: rgba(241, 239, 228, .72);
    --bs-emphasis-color: #ffffff;
    --bs-border-color: rgba(240, 238, 225, .22);
    --bs-link-color-rgb: 246, 220, 138;
    --bs-link-hover-color-rgb: 255, 236, 170;
}

/* ---------------------------------------------------------------- Pastelowy */
[data-theme="pastel"] {
    --app-bg: #f7f3fc;
    --app-surface: #ffffff;
    --app-surface-2: #fbf8ff;
    --app-border: #e8def5;
    --app-nav-bg: linear-gradient(90deg, #9575cd 0%, #ba68c8 50%, #f06292 100%);
    --app-primary: #8e6cc8;
    --app-primary-hover: #7b58b8;
    --app-primary-fg: #ffffff;
    --app-primary-text: #7b58b8;
    --app-primary-rgb: 142, 108, 200;
    --app-selected-row: #f3ecfc;
    --app-correct: #2e7d5b;
    --app-line: #c5b6dc;
    --app-overlay: rgba(255, 255, 255, .75);
    --app-row-error: #fdeef3;
    --app-row-warning: #fff8e8;
    --app-hero-1: #8e6cc8;
    --app-hero-2: #c2649a;
    --app-hero-glow: #b39ddb;
    --app-happy-bg: #eefaf3;
    --app-happy-border: #c9ead8;
    --app-scared-bg: #fdf0f5;
    --app-scared-border: #f6cfe0;
    --app-heading-font: inherit;
    --bs-border-radius: .6rem;
    --bs-border-radius-sm: .45rem;
    --bs-border-radius-lg: .9rem;
    --bs-link-color-rgb: 123, 88, 184;
    --bs-link-hover-color-rgb: 94, 62, 150;
}

/* ---------------------------------------------------------------- shared rules */
html[data-theme] {
    --bs-body-bg: var(--app-surface);
    --bs-tertiary-bg: var(--app-surface-2);
    --bs-primary-rgb: var(--app-primary-rgb);
}

[data-theme="classic"],
[data-theme="dark"] {
    --bs-link-color-rgb: var(--app-primary-rgb);
}

body {
    background: var(--app-bg);
    color: var(--bs-body-color);
}

h1, h2, h3, .navbar-brand, .stat-value, .landing-title {
    font-family: var(--app-heading-font);
}

.app-navbar {
    background: var(--app-nav-bg);
}

.card {
    --bs-card-bg: var(--app-surface);
    --bs-card-border-color: var(--app-border);
    --bs-card-cap-bg: var(--app-surface);
}

/* Bootstrap's .bg-body reads --bs-body-bg-rgb (not themed) – card headers/footers use the theme surface instead. */
.bg-body {
    background-color: var(--app-surface) !important;
}

.btn-primary {
    --bs-btn-color: var(--app-primary-fg);
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-color: var(--app-primary-fg);
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-active-color: var(--app-primary-fg);
    --bs-btn-active-bg: var(--app-primary-hover);
    --bs-btn-active-border-color: var(--app-primary-hover);
    --bs-btn-disabled-color: var(--app-primary-fg);
    --bs-btn-disabled-bg: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--app-primary-text);
    --bs-btn-border-color: var(--app-primary-text);
    --bs-btn-hover-color: var(--app-primary-fg);
    --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-active-color: var(--app-primary-fg);
    --bs-btn-active-bg: var(--app-primary);
    --bs-btn-active-border-color: var(--app-primary);
}

.form-check-input:checked {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(var(--app-primary-rgb), .6);
    box-shadow: 0 0 0 .25rem rgba(var(--app-primary-rgb), .2);
}

.pagination {
    --bs-pagination-active-bg: var(--app-primary);
    --bs-pagination-active-border-color: var(--app-primary);
    --bs-pagination-active-color: var(--app-primary-fg);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--app-primary);
    --bs-dropdown-link-active-color: var(--app-primary-fg);
}

.text-primary {
    color: var(--app-primary-text) !important;
}

/* Dark-based themes: Bootstrap "light" variants would stay bright. */
[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--app-surface-2);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--app-border);
}

[data-bs-theme="dark"] .text-bg-light {
    color: var(--bs-body-color) !important;
    background-color: var(--app-surface-2) !important;
}

/* Kreda: a little chalk dust on the board. */
[data-theme="chalk"] body {
    background-image:
        radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, .05) 0, transparent 40%),
        radial-gradient(ellipse at 80% 60%, rgba(255, 255, 255, .04) 0, transparent 45%);
    background-attachment: fixed;
}

[data-theme="chalk"] .card {
    border-style: dashed;
}

[data-theme="chalk"] .btn-primary,
[data-theme="chalk"] .btn-outline-primary:hover {
    font-weight: 600;
}

/* Pastelowy: softer, rounder. */
[data-theme="pastel"] .btn {
    border-radius: 2rem;
}

[data-theme="pastel"] .card {
    box-shadow: 0 6px 18px rgba(142, 108, 200, .08) !important;
}

/* Kreda: yellow chalk needs dark text; outline buttons in chalk white. */
[data-theme="chalk"] .text-bg-primary {
    color: var(--app-primary-fg) !important;
}

[data-theme="chalk"] .btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: rgba(241, 239, 228, .45);
    --bs-btn-hover-color: #23392c;
    --bs-btn-hover-bg: #f1efe4;
    --bs-btn-hover-border-color: #f1efe4;
}

/* Navbar: longer labels (e.g. Spanish) stay on one line. */
.app-navbar .nav-link {
    white-space: nowrap;
}

@media (min-width: 1200px) {
    .app-navbar .navbar-nav .nav-link {
        padding-left: .45rem;
        padding-right: .45rem;
    }
}

.nav-icon {
    width: 1rem;
    height: 1rem;
    vertical-align: -.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
}

.lang-code {
    display: inline-block;
    min-width: 1.6rem;
    font-size: .75rem;
    font-weight: 600;
    opacity: .6;
}

/* Theme menu swatch */
.theme-dot {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .6);
    vertical-align: -.05rem;
}