/*
 * Theme "Nowoczesny" (data-theme="modern", the default). Two faces:
 *  - the teacher's part: smooth and calm – Inter, white cards with soft shadows, a violet-blue gradient;
 *  - the children's part (body.area-learn: Nauka, games, the student's duel): a school notebook – Nunito, squared paper,
 *    chunky buttons that press down like keys.
 * Everything clickable answers the pointer: it lifts, changes its frame or background on hover and moves back when left.
 * Every rule is scoped to [data-theme="modern"], so the other themes stay as they were.
 */

/* ---------------------------------------------------------------- colours */
[data-theme="modern"] {
    --app-bg: #f6f7fb;
    --app-surface: #ffffff;
    --app-surface-2: #f8f9fd;
    --app-border: #e6e8f0;
    --app-nav-bg: linear-gradient(90deg, #5b3df5 0%, #3d7bff 100%);
    --app-logo: #ffffff;
    --app-primary: #5b3df5;
    --app-primary-hover: #4a2ee0;
    --app-primary-fg: #ffffff;
    --app-primary-text: #5034e0;
    --app-primary-rgb: 91, 61, 245;
    --app-selected-row: #f1eeff;
    --app-correct: #0f8a5f;
    --app-line: #a3a8bd;
    --app-overlay: rgba(255, 255, 255, .78);
    --app-row-error: #fff1f1;
    --app-row-warning: #fff8eb;
    --app-hero-1: #5b3df5;
    --app-hero-2: #2f6bff;
    --app-hero-glow: #8b74ff;
    --app-happy-bg: #ecfaf3;
    --app-happy-border: #bfe9d4;
    --app-scared-bg: #fff0ef;
    --app-scared-border: #ffd0cb;
    --app-heading-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-link-color-rgb: 80, 52, 224;
    --bs-link-hover-color-rgb: 61, 34, 190;
    --bs-border-radius: .65rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: 1rem;
    --modern-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
    --modern-shadow-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 14px 32px rgba(16, 24, 40, .12);
    --modern-tint: #f3f0ff;
    --modern-frame: #e3e5ef;
    --modern-ink: #3a3f5c;
}

[data-theme="modern"] h1,
[data-theme="modern"] h2,
[data-theme="modern"] h3 {
    letter-spacing: -.015em;
}

/* ---------------------------------------------------------------- the top bar */
[data-theme="modern"] .app-navbar {
    box-shadow: 0 4px 18px rgba(61, 60, 200, .18);
}

[data-theme="modern"] .app-navbar .nav-link {
    border-radius: .55rem;
    transition: background-color .15s, color .15s;
}

[data-theme="modern"] .app-navbar .nav-link:hover,
[data-theme="modern"] .app-navbar .nav-link:focus-visible {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

[data-theme="modern"] .app-navbar .nav-link.active {
    background: rgba(255, 255, 255, .22);
}

/* ---------------------------------------------------------------- cards and tables */
[data-theme="modern"] .card {
    --bs-card-border-color: transparent;
    --bs-card-border-radius: 1rem;
    --bs-card-inner-border-radius: 1rem;
    --bs-card-cap-bg: var(--app-surface);
    box-shadow: var(--modern-shadow) !important;
}

[data-theme="modern"] .card-header {
    border-bottom-color: var(--app-border);
}

/* A card that is a link (or holds the link over all of it) rises under the pointer. */
[data-theme="modern"] a.card,
[data-theme="modern"] .card:has(.stretched-link),
[data-theme="modern"] .landing-feature {
    transition: transform .15s ease, box-shadow .15s ease;
}

[data-theme="modern"] a.card:hover,
[data-theme="modern"] .card:has(.stretched-link):hover {
    transform: translateY(-3px);
    box-shadow: var(--modern-shadow-hover) !important;
}

[data-theme="modern"] .table {
    --bs-table-hover-bg: #faf9ff;
}

[data-theme="modern"] .table > tbody > tr {
    transition: background-color .12s;
}

[data-theme="modern"] .table > tbody > tr:hover > * {
    background-color: #faf9ff;
}

[data-theme="modern"] .table > thead th {
    color: #6b7088;
    font-weight: 600;
}

[data-theme="modern"] .badge {
    font-weight: 600;
    border-radius: 999px;
    padding: .35em .7em;
}

/* ---------------------------------------------------------------- buttons */
[data-theme="modern"] .btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: .75rem;
    transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .12s;
}

[data-theme="modern"] .btn-sm {
    --bs-btn-border-radius: .55rem;
}

[data-theme="modern"] .btn-lg {
    --bs-btn-border-radius: .9rem;
}

/* Every button lifts a little under the pointer and settles when pressed. */
[data-theme="modern"] .btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-1px);
}

[data-theme="modern"] .btn:active:not(:disabled):not(.disabled) {
    transform: translateY(0);
}

[data-theme="modern"] .btn-primary {
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    background-image: linear-gradient(90deg, #5b3df5, #3d7bff);
    box-shadow: 0 6px 16px rgba(91, 61, 245, .28);
}

[data-theme="modern"] .btn-primary:hover {
    background-image: linear-gradient(90deg, #4f31ec, #2f6ff5);
    box-shadow: 0 9px 22px rgba(91, 61, 245, .38);
}

[data-theme="modern"] .btn-success,
[data-theme="modern"] .btn-danger,
[data-theme="modern"] .btn-warning,
[data-theme="modern"] .btn-secondary {
    box-shadow: 0 4px 12px rgba(16, 24, 40, .14);
}

[data-theme="modern"] .btn-success:hover,
[data-theme="modern"] .btn-danger:hover,
[data-theme="modern"] .btn-warning:hover,
[data-theme="modern"] .btn-secondary:hover {
    box-shadow: 0 7px 18px rgba(16, 24, 40, .2);
}

/* Outline buttons: white with a light frame; under the pointer the frame and the text take the colour and a tint fills them. */
[data-theme="modern"] .btn-outline-primary {
    --bs-btn-color: var(--app-primary-text);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #d9d2fd;
    --bs-btn-hover-color: var(--app-primary-text);
    --bs-btn-hover-bg: var(--modern-tint);
    --bs-btn-hover-border-color: var(--app-primary);
}

[data-theme="modern"] .btn-outline-secondary {
    --bs-btn-color: var(--modern-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--modern-frame);
    --bs-btn-hover-color: var(--app-primary-text);
    --bs-btn-hover-bg: var(--modern-tint);
    --bs-btn-hover-border-color: #b9adfb;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--modern-ink);
    --bs-btn-active-border-color: var(--modern-ink);
}

[data-theme="modern"] .btn-outline-danger {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #f3c4c4;
    --bs-btn-hover-color: #c22d2d;
    --bs-btn-hover-bg: #fff0f0;
    --bs-btn-hover-border-color: #e35d5d;
}

[data-theme="modern"] .btn-outline-success {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #bfe6d3;
    --bs-btn-hover-color: #0f7a52;
    --bs-btn-hover-bg: #ecfaf3;
    --bs-btn-hover-border-color: #2fb37c;
}

[data-theme="modern"] .btn[class*="btn-outline-"]:hover:not(:disabled):not(.disabled) {
    box-shadow: 0 4px 12px rgba(16, 24, 40, .08);
}

/* Row actions in tables: soft grey pills until pointed at. */
[data-theme="modern"] .table .btn-sm[class*="btn-outline-"]:not(:hover):not(:focus-visible):not(:active) {
    --bs-btn-bg: #f1f2f8;
    --bs-btn-border-color: transparent;
    --bs-btn-color: var(--modern-ink);
}

/* The chosen option of a group (radio / checkbox drawn as buttons) is filled. */
[data-theme="modern"] .btn-check:checked + .btn-outline-primary,
[data-theme="modern"] .btn-check:checked + .btn-outline-secondary {
    box-shadow: 0 4px 12px rgba(91, 61, 245, .22);
}

/* ---------------------------------------------------------------- links, menus, forms */
[data-theme="modern"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.card):not([class*="learn-"]):not(.list-group-item) {
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
    transition: color .12s, text-decoration-thickness .12s;
}

[data-theme="modern"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.card):not([class*="learn-"]):not(.list-group-item):hover {
    text-decoration-thickness: 2px;
}

[data-theme="modern"] .dropdown-menu {
    --bs-dropdown-border-color: var(--app-border);
    --bs-dropdown-border-radius: .85rem;
    --bs-dropdown-link-hover-bg: var(--modern-tint);
    --bs-dropdown-link-hover-color: var(--app-primary-text);
    padding: .4rem;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
}

[data-theme="modern"] .dropdown-item {
    border-radius: .55rem;
    transition: background-color .12s, color .12s, padding-left .12s;
}

[data-theme="modern"] .dropdown-item:hover:not(.active) {
    padding-left: 1.2rem;
}

[data-theme="modern"] .list-group-item-action {
    transition: background-color .12s, padding-left .12s;
}

[data-theme="modern"] .list-group-item-action:hover {
    background-color: var(--modern-tint);
    padding-left: 1.25rem;
}

[data-theme="modern"] .form-control,
[data-theme="modern"] .form-select {
    border-color: var(--modern-frame);
    border-radius: .65rem;
    transition: border-color .15s, box-shadow .15s;
}

[data-theme="modern"] .form-control:hover:not(:focus):not(:disabled),
[data-theme="modern"] .form-select:hover:not(:focus):not(:disabled) {
    border-color: #b9adfb;
}

[data-theme="modern"] .form-check-input {
    transition: border-color .12s, box-shadow .12s;
}

[data-theme="modern"] .form-check-input:hover:not(:disabled) {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--app-primary-rgb), .12);
}

[data-theme="modern"] .page-link {
    transition: background-color .12s, color .12s;
}

/* ---------------------------------------------------------------- the children's part: a school notebook */
[data-theme="modern"] body.area-learn {
    --bs-body-font-family: 'Nunito', system-ui, sans-serif;
    --app-heading-font: 'Nunito', system-ui, sans-serif;
    --kid-ink: #24324a;
    --kid-teal: #2bb3a3;
    --kid-teal-dark: #1f8f82;
    --kid-yellow: #ffc93c;
    --kid-mint: #d9f6f1;
    --kid-cream: #fff4c7;
    --kid-peach: #ffe1da;
    --kid-lilac: #e5e1ff;
    font-family: var(--bs-body-font-family);
    color: var(--kid-ink);
    background-color: #fffdf6;
    background-image:
        linear-gradient(#e3eef9 1px, transparent 1px),
        linear-gradient(90deg, #e3eef9 1px, transparent 1px);
    background-size: 22px 22px;
}

[data-theme="modern"] body.area-learn h1,
[data-theme="modern"] body.area-learn h2,
[data-theme="modern"] body.area-learn h3 {
    font-weight: 900;
    letter-spacing: 0;
}

[data-theme="modern"] body.area-learn .app-navbar {
    background: var(--kid-teal);
    border-bottom: 4px solid var(--kid-teal-dark);
    box-shadow: none;
}

[data-theme="modern"] body.area-learn .card {
    border: 2px solid var(--kid-ink);
    box-shadow: 4px 4px 0 var(--kid-ink) !important;
    border-radius: 1.1rem;
}

/* Chunky buttons: a dark frame and a "base" under them; they rise under the pointer and press down like keys. */
[data-theme="modern"] body.area-learn .btn {
    --bs-btn-font-weight: 800;
    --bs-btn-border-width: 2px;
    --bs-btn-border-color: var(--kid-ink);
    --bs-btn-hover-border-color: var(--kid-ink);
    --bs-btn-active-border-color: var(--kid-ink);
    border-color: var(--kid-ink);
    box-shadow: 0 4px 0 var(--kid-ink);
    transition: transform .08s, box-shadow .08s, background-color .12s, color .12s;
}

[data-theme="modern"] body.area-learn .btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--kid-ink);
}

[data-theme="modern"] body.area-learn .btn:active:not(:disabled):not(.disabled),
[data-theme="modern"] body.area-learn .btn-check:active + .btn {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--kid-ink);
}

[data-theme="modern"] body.area-learn .btn:disabled,
[data-theme="modern"] body.area-learn .btn.disabled {
    box-shadow: 0 2px 0 var(--kid-ink);
}

[data-theme="modern"] body.area-learn .btn-sm {
    --bs-btn-border-radius: .65rem;
    box-shadow: 0 3px 0 var(--kid-ink);
}

[data-theme="modern"] body.area-learn .btn-primary {
    --bs-btn-color: var(--kid-ink);
    --bs-btn-bg: var(--kid-yellow);
    --bs-btn-hover-color: var(--kid-ink);
    --bs-btn-hover-bg: #ffd35e;
    --bs-btn-active-color: var(--kid-ink);
    --bs-btn-active-bg: #f5b912;
    --bs-btn-disabled-color: var(--kid-ink);
    --bs-btn-disabled-bg: var(--kid-yellow);
    background-image: none;
}

[data-theme="modern"] body.area-learn .btn-outline-primary,
[data-theme="modern"] body.area-learn .btn-outline-secondary {
    --bs-btn-color: var(--kid-ink);
    --bs-btn-bg: #fff;
    --bs-btn-hover-color: var(--kid-ink);
    --bs-btn-hover-bg: var(--kid-mint);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--kid-teal);
}

[data-theme="modern"] body.area-learn .btn-check:checked + .btn-outline-primary,
[data-theme="modern"] body.area-learn .btn-check:checked + .btn-outline-secondary {
    box-shadow: 0 4px 0 var(--kid-ink);
}

/* Answer tiles of the quizzes: each in its own pastel colour, like sticky notes. */
[data-theme="modern"] body.area-learn .learn-options .btn:not(.btn-success):not(.btn-danger),
[data-theme="modern"] body.area-learn .learn-letters .btn:not(.btn-success):not(.btn-danger) {
    color: var(--kid-ink);
}

[data-theme="modern"] body.area-learn .learn-options .btn:nth-child(4n + 1):not(.btn-success):not(.btn-danger),
[data-theme="modern"] body.area-learn .learn-letters .btn:nth-child(4n + 1):not(.btn-success):not(.btn-danger) { background-color: var(--kid-mint); }
[data-theme="modern"] body.area-learn .learn-options .btn:nth-child(4n + 2):not(.btn-success):not(.btn-danger),
[data-theme="modern"] body.area-learn .learn-letters .btn:nth-child(4n + 2):not(.btn-success):not(.btn-danger) { background-color: var(--kid-cream); }
[data-theme="modern"] body.area-learn .learn-options .btn:nth-child(4n + 3):not(.btn-success):not(.btn-danger),
[data-theme="modern"] body.area-learn .learn-letters .btn:nth-child(4n + 3):not(.btn-success):not(.btn-danger) { background-color: var(--kid-peach); }
[data-theme="modern"] body.area-learn .learn-options .btn:nth-child(4n + 4):not(.btn-success):not(.btn-danger),
[data-theme="modern"] body.area-learn .learn-letters .btn:nth-child(4n + 4):not(.btn-success):not(.btn-danger) { background-color: var(--kid-lilac); }

/* The subject cards of Nauka and the game cards: notebook cards that rise under the pointer. */
[data-theme="modern"] body.area-learn .learn-subject {
    border: 2px solid var(--kid-ink);
    box-shadow: 4px 4px 0 var(--kid-ink);
    transition: transform .12s, box-shadow .12s, background-color .12s;
}

[data-theme="modern"] body.area-learn .learn-subject:hover,
[data-theme="modern"] body.area-learn .learn-subject:focus-visible {
    border-color: var(--kid-ink);
    background: var(--kid-cream);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--kid-teal);
}

[data-theme="modern"] body.area-learn .learn-subject:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--kid-ink);
}

[data-theme="modern"] body.area-learn .form-control,
[data-theme="modern"] body.area-learn .form-select {
    border: 2px solid var(--kid-ink);
}

[data-theme="modern"] body.area-learn .progress {
    border: 2px solid var(--kid-ink);
    border-radius: 999px;
    height: 1rem;
}

[data-theme="modern"] body.area-learn .progress-bar {
    background-image: repeating-linear-gradient(45deg, var(--kid-teal) 0 10px, #36c5b4 10px 20px);
}

/* Articles of Nauka (topics, formulas) stay easy to read: the notebook only behind them. */
[data-theme="modern"] body.area-learn article {
    color: var(--kid-ink);
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="modern"] .btn,
    [data-theme="modern"] .card,
    [data-theme="modern"] .learn-subject,
    [data-theme="modern"] .dropdown-item,
    [data-theme="modern"] .list-group-item-action {
        transition: none;
        transform: none !important;
    }
}

/* The top bar keeps its own buttons (e.g. "Nowy test") flat also in the children's part. */
[data-theme="modern"] body.area-learn .app-navbar .btn {
    --bs-btn-border-width: 1px;
    border-color: transparent;
    box-shadow: none;
}