/* ===== Bootstrap učebnica – vlastné štýly (nadstavba nad Bootstrap 5.3.8) ===== */
:root {
  --uc-accent: #7c3aed;
  --uc-accent-2: #4f46e5;
  --uc-grad: linear-gradient(135deg, #8b5cf6 0%, #5b21d6 55%, #3b1d9e 100%);
  --uc-code-bg: #0f172a;
  --uc-code-fg: #e2e8f0;
  --uc-radius: .85rem;
}
[data-bs-theme="dark"] { --uc-code-bg: #0b1020; }

body { background: var(--bs-body-bg); }
.app-main { min-height: calc(100vh - 56px - 52px); }
.app-navbar { background: var(--uc-grad); box-shadow: 0 2px 14px rgb(59 29 158 / .35); }
.app-navbar .nav-link.active, .app-navbar .nav-link:hover { color: #fff; }
.app-navbar .nav-link.active { font-weight: 600; box-shadow: inset 0 -2px 0 rgb(255 255 255 / .85); }
.brand-logo { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .6rem;
  background: rgb(255 255 255 / .16); font-size: 1.3rem; color: #fff; }
.brand-logo-lg { width: 3.2rem; height: 3.2rem; font-size: 1.9rem; background: var(--uc-grad); }
.brand-sub { font-size: .7rem; opacity: .8; font-weight: 400; }
.search-btn kbd { background: rgb(255 255 255 / .18); color: #fff; font-size: .68rem; padding: .05rem .3rem; }
:root[data-bs-theme="light"] .theme-icon-dark, :root[data-bs-theme="dark"] .theme-icon-light { display: none; }
.app-footer { border-top: 1px solid var(--bs-border-color); padding: 1rem 0; color: var(--bs-secondary-color); font-size: .85rem; }
.dropdown-menu { --bs-dropdown-border-radius: .7rem; box-shadow: 0 .6rem 1.6rem rgb(0 0 0 / .15); }

/* --- Hlavička modulu ------------------------------------------------ */
.module-icon { display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: .8rem;
  background: var(--uc-grad); color: #fff; font-size: 1.4rem; }
.module-kicker { letter-spacing: .08em; font-size: .7rem; }
.module-tabs .nav-link { --bs-nav-pills-link-active-bg: var(--uc-accent); border-radius: 2rem; padding: .35rem .9rem; font-size: .92rem; }

/* --- Prihlásenie ---------------------------------------------------- */
.login-page { background: var(--bs-tertiary-bg); }
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; }
.login-art { height: 100%; min-height: 100vh; background: var(--uc-grad); color: #fff; padding: 4rem; display: flex; flex-direction: column;
  justify-content: center; gap: 3rem; position: relative; overflow: hidden; }
.login-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: .5rem; height: 9rem; }
.login-grid span { background: rgb(255 255 255 / .13); border: 1px solid rgb(255 255 255 / .25); border-radius: .4rem; display: grid;
  place-items: end center; padding-bottom: .3rem; font-size: .75rem; opacity: .9; animation: colrise 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * .13s); }
@keyframes colrise { 0%,100% { transform: scaleY(.55); transform-origin: bottom; } 50% { transform: scaleY(1); transform-origin: bottom; } }
.login-chip { background: rgb(255 255 255 / .16); color: #fff; padding: .25rem .6rem; border-radius: 2rem; }
.login-card { width: min(440px, 92%); margin: 2rem auto; border-radius: 1.2rem; }
@media (max-width: 991.98px) { .login-wrap { grid-template-columns: 1fr; } .login-art { display: none; } }

/* --- Dashboard ------------------------------------------------------ */
.dash-hero { background: var(--uc-grad); color: #fff; border-radius: 1.2rem; padding: 2rem; position: relative; overflow: hidden; }
.dash-hero::after { content: "\F1A6"; font-family: "bootstrap-icons"; position: absolute; right: -1rem; bottom: -3.2rem; font-size: 14rem; opacity: .08; }
.dash-hero .btn-light { color: var(--uc-accent-2); font-weight: 600; }
.stat-num { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.stat-box { background: rgb(255 255 255 / .14); border-radius: .8rem; padding: .7rem 1.1rem; text-align: center; min-width: 5.5rem; }
.module-card { transition: transform .15s, box-shadow .15s; border-radius: var(--uc-radius); }
.module-card:hover { transform: translateY(-3px); box-shadow: 0 .8rem 1.8rem rgb(76 29 149 / .16); }
.syllabus td, .syllabus th { vertical-align: middle; }
.syllabus .hour { width: 5.2rem; font-weight: 700; color: var(--uc-accent); white-space: nowrap; }
.syllabus tr.is-test td { background: var(--bs-warning-bg-subtle); }
.syllabus tr.is-self td { background: var(--bs-info-bg-subtle); }
.ring { --p: 0; width: 5.6rem; height: 5.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.15rem;
  background: conic-gradient(#fff calc(var(--p) * 1%), rgb(255 255 255 / .22) 0); position: relative; color: #fff; }
.ring::before { content: ""; position: absolute; inset: .5rem; border-radius: 50%; background: #4a2bb8; }
.ring span { position: relative; }

/* --- Rozloženie lekcie ---------------------------------------------- */
.lesson-wrap { max-width: 1640px; margin: 0 auto; }
.lesson-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.lesson-side { position: sticky; top: 4.6rem; max-height: calc(100vh - 5.4rem); overflow-y: auto; font-size: .9rem; padding-right: .3rem; }
.lesson-side .list-group-item { border: 0; border-radius: .6rem !important; padding: .45rem .7rem; display: flex; gap: .6rem; align-items: baseline; background: transparent; }
.lesson-side .list-group-item.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; }
.lesson-side .h-num { font-weight: 700; color: var(--uc-accent); min-width: 1.9rem; }
.lesson-side .done-mark { margin-left: auto; color: var(--bs-success); visibility: hidden; }
.lesson-side .is-done .done-mark { visibility: visible; }
.lesson-toc { margin: .15rem 0 .6rem .9rem; border-left: 1px solid var(--bs-border-color); }
.lesson-toc .nav-link { padding: .2rem .75rem; font-size: .82rem; color: var(--bs-secondary-color); border-left: 2px solid transparent; margin-left: -1px; border-radius: 0; }
.lesson-toc .nav-link:hover { color: var(--bs-body-color); }
.lesson-toc .nav-link.active { color: var(--uc-accent); border-left-color: var(--uc-accent); font-weight: 600; }
.lesson-toc .nav-link.sub { padding-left: 1.5rem; font-size: .78rem; }
@media (max-width: 991.98px) { .lesson-layout { grid-template-columns: 1fr; } .lesson-side { position: static; max-height: none; } }

.lesson-hero { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-left: .4rem solid var(--uc-accent);
  border-radius: var(--uc-radius); padding: 1.3rem 1.5rem; }
.lesson-body { font-size: 1.04rem; line-height: 1.7; }
.lesson-body h2 { margin-top: 2.6rem; padding-top: .6rem; font-size: 1.65rem; scroll-margin-top: 4.8rem; border-top: 1px solid var(--bs-border-color); }
.lesson-body h2 .anchor, .lesson-body h3 .anchor { opacity: 0; margin-left: .4rem; font-size: .7em; text-decoration: none; }
.lesson-body h2:hover .anchor, .lesson-body h3:hover .anchor { opacity: .6; }
.lesson-body h3 { margin-top: 1.8rem; font-size: 1.3rem; scroll-margin-top: 4.8rem; }
.lesson-body table { width: 100%; font-size: .93rem; }
.lesson-body :not(pre) > code { background: var(--bs-tertiary-bg); color: var(--bs-danger-text-emphasis); border-radius: .3rem; padding: .1rem .35rem; font-size: .88em; border: 1px solid var(--bs-border-color-translucent); }
.lesson-body blockquote { margin: 0; }
.lesson-body img { max-width: 100%; }
.step-num { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--uc-accent); color: #fff; font-weight: 700; font-size: .85rem; margin-right: .4rem; }

.callout { border-left: .3rem solid var(--c, var(--bs-primary)); background: color-mix(in srgb, var(--c, var(--bs-primary)) 9%, var(--bs-body-bg));
  border-radius: .6rem; padding: .8rem 1.1rem; margin: 1.2rem 0; }
.callout > :last-child { margin-bottom: 0; }
.callout > :first-child { margin-top: 0; }
.callout-title { font-weight: 700; display: flex; gap: .45rem; align-items: center; color: var(--c); margin-bottom: .2rem; }
.callout-tip { --c: #16a34a; } .callout-warn { --c: #d97706; } .callout-err { --c: #dc2626; }
.callout-note { --c: #2563eb; } .callout-trick { --c: #9333ea; } .callout-zapamataj { --c: #0891b2; }

/* --- Kód a živé ukážky ---------------------------------------------- */
pre.code, .code-pre { background: var(--uc-code-bg); color: var(--uc-code-fg); border-radius: .7rem; padding: 1rem 1.1rem; margin: 1rem 0; overflow: auto;
  font-size: .86rem; line-height: 1.55; tab-size: 2; position: relative; }
pre.code code { color: inherit; background: none; padding: 0; border: 0; font-size: inherit; }
.tok-tag { color: #7dd3fc; } .tok-attr { color: #fbbf24; } .tok-str { color: #86efac; } .tok-com { color: #64748b; font-style: italic; }
.tok-kw { color: #c4b5fd; } .tok-num { color: #fdba74; } .tok-sel { color: #7dd3fc; } .tok-prop { color: #fbbf24; } .tok-fn { color: #f9a8d4; }
.copy-btn { position: absolute; top: .45rem; right: .45rem; opacity: 0; transition: opacity .15s; z-index: 2; }
pre.code:hover .copy-btn, .demo:hover .copy-btn { opacity: 1; }
.lang-label { position: absolute; top: .35rem; right: 3.3rem; font-size: .65rem; text-transform: uppercase; color: #64748b; letter-spacing: .08em; }

.demo { border: 1px solid var(--bs-border-color); border-radius: var(--uc-radius); margin: 1.4rem 0; background: var(--bs-body-bg); overflow: hidden; }
.demo-bar { display: flex; align-items: center; gap: .3rem; padding: .35rem .6rem; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); flex-wrap: wrap; }
.demo-bar .demo-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); margin-right: .4rem; }
.demo-bar .btn { --bs-btn-padding-y: .12rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .8rem; }
.demo-stage { background: repeating-conic-gradient(var(--bs-tertiary-bg) 0 25%, var(--bs-body-bg) 0 50%) 0 0 / 18px 18px; padding: 0; display: flex; justify-content: center; }
.demo-frame { border: 0; background: #fff; width: 100%; transition: width .2s; display: block; min-height: 60px; max-width: 100%; }
.demo[data-dark="1"] .demo-frame { background: #212529; }
.demo-code { display: none; } .demo.show-code .demo-code { display: block; }
.demo-code pre.code { margin: 0; border-radius: 0; max-height: 26rem; }
.demo-width-badge { font-size: .72rem; color: var(--bs-secondary-color); margin-left: auto; font-variant-numeric: tabular-nums; }

.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.editor-pane { display: flex; flex-direction: column; min-width: 0; }
textarea.code-input { width: 100%; flex: 1; min-height: 16rem; resize: vertical; border: 0; display: block; outline: 0; padding: 1rem; background: var(--uc-code-bg); color: var(--uc-code-fg);
  font: .84rem/1.55 var(--bs-font-monospace); tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; border-radius: 0; }
.editor .editor-preview { border-left: 1px solid var(--bs-border-color); min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 991.98px) { .editor { grid-template-columns: 1fr; } .editor .editor-preview { border-left: 0; border-top: 1px solid var(--bs-border-color); } }

/* --- Kvíz ----------------------------------------------------------- */
.quiz { border: 1px solid var(--bs-border-color); border-radius: var(--uc-radius); padding: 1rem 1.2rem; margin: 1.4rem 0; background: var(--bs-tertiary-bg); }
.quiz .q-title { font-weight: 700; margin-bottom: .6rem; }
.quiz label { display: flex; gap: .6rem; padding: .4rem .7rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; margin-bottom: .35rem;
  background: var(--bs-body-bg); cursor: pointer; align-items: center; }
.quiz label:hover { border-color: var(--uc-accent); }
.quiz label.ok { border-color: var(--bs-success); background: var(--bs-success-bg-subtle); }
.quiz label.bad { border-color: var(--bs-danger); background: var(--bs-danger-bg-subtle); }
.quiz .q-explain { display: none; margin-top: .6rem; }
.quiz.answered .q-explain { display: block; }

/* --- Cvičenia ------------------------------------------------------- */
.ex-card { border-radius: var(--uc-radius); transition: box-shadow .15s, transform .15s; }
.ex-card:hover { box-shadow: 0 .5rem 1.2rem rgb(0 0 0 / .1); transform: translateY(-2px); }
.ex-card.is-done { border-color: var(--bs-success); }
.ex-card .ex-state { color: var(--bs-success); display: none; }
.ex-card.is-done .ex-state { display: inline; }
.diff-dots i { font-size: .65rem; color: var(--bs-secondary-bg); } .diff-dots i.on { color: var(--bs-warning); }
.check-list li { display: flex; gap: .55rem; align-items: flex-start; padding: .35rem .6rem; border-radius: .45rem; }
.check-list li .bi { margin-top: .15rem; }
.check-list li.ok { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.check-list li.bad { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.check-list li.idle { color: var(--bs-secondary-color); }
.score-badge { font-size: 1.1rem; }
.sticky-panel { position: sticky; top: 4.6rem; }

/* --- Nástroje ------------------------------------------------------- */
.tool-preview { border: 1px solid var(--bs-border-color); border-radius: var(--uc-radius); overflow: hidden; background: #fff; }
.snippet-btn { text-align: left; }
.glossary-row[hidden] { display: none; }
.tip-card { border-radius: var(--uc-radius); }
.tip-card .card-header { font-weight: 600; }
.palette-sw { height: 4.2rem; border-radius: .6rem; display: flex; align-items: flex-end; padding: .4rem .6rem; font-size: .78rem; cursor: pointer; border: 1px solid rgb(0 0 0 / .08); }
.box-model { display: grid; place-items: center; }
.bm-margin { background: #fde6c8; border: 2px dashed #f59e0b; padding: 1.4rem; border-radius: .5rem; color: #92400e; }
.bm-padding { background: #cfeccf; border: 2px dashed #16a34a; padding: 1.4rem; border-radius: .4rem; color: #166534; }
.bm-content { background: #bfdbfe; border: 2px solid #2563eb; padding: .7rem 1.5rem; text-align: center; color: #1e3a8a; border-radius: .3rem; }

/* --- Testy a písomky ------------------------------------------------ */
.q-bank-row.selected { background: var(--bs-primary-bg-subtle); }
.q-type { font-size: .7rem; }
.script-box { max-height: 28rem; }
.variant-tab .nav-link { font-weight: 600; }
.exam-sheet { background: #fff; color: #111; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: 2rem; max-width: 52rem; margin: 0 auto; box-shadow: 0 .4rem 1.4rem rgb(0 0 0 / .08); }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.3rem; }

.kbd-hint kbd { font-size: .75rem; }
.search-item mark { background: #fde68a; color: inherit; padding: 0 .1rem; border-radius: .2rem; }
.search-item .kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
@media print { .print-hide, .lesson-side { display: none !important; } .lesson-layout { display: block; } .app-main { min-height: 0; } }