/* ============================================================
   QuizPlatform — Bootstrap widget theming on top of app.css
   (the "Studio Indigo" design system). Targets the classes
   generated by the BootstrapTemplate widgets (Navbar, Button,
   Table, Form, Badge, Progress...) plus the app's own markup.
   ============================================================ */

/* ------------------------------------------------------------
   Navbar — always dark, brand gradient bar + "Q" logo mark
   ------------------------------------------------------------ */
.navbar {
    background: linear-gradient(120deg, #141a2e 0%, #1d2440 55%, #232a52 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 2px 14px rgba(10, 14, 30, .35);
}

.navbar .nav-link {
    color: #aeb6d6;
    border-radius: .5rem;
    padding: .4rem .9rem;
}

.navbar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.navbar .nav-link.active { color: #fff; background: rgba(124, 124, 232, .22); }
.navbar .dropdown-menu { --bs-dropdown-min-width: 11rem; }

.navbar-brand {
    font-family: "Sora", var(--bs-body-font-family);
    font-weight: 800;
    letter-spacing: .2px;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.navbar-brand::before {
    content: "Q";
    width: 34px;
    height: 34px;
    border-radius: .7rem;
    background: var(--qp-grad);
    box-shadow: 0 3px 10px rgba(139, 92, 246, .45);
    display: inline-grid;
    place-items: center;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
}

/* ------------------------------------------------------------
   Buttons — .btn-primary = brand gradient, .btn-secondary = ghost
   ------------------------------------------------------------ */
.btn-primary {
    --bs-btn-border-width: 0;
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--qp-brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--qp-brand);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--qp-brand);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--qp-brand);
    --bs-btn-disabled-border-color: transparent;
    background-image: var(--qp-grad);
    border: 0;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(91, 91, 214, .35);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active { filter: brightness(1.07); }

.btn-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--qp-line);
    --bs-btn-hover-color: var(--qp-brand);
    --bs-btn-hover-bg: var(--qp-brand-soft);
    --bs-btn-hover-border-color: var(--qp-brand);
    --bs-btn-active-color: var(--qp-brand);
    --bs-btn-active-bg: var(--qp-brand-soft);
    --bs-btn-active-border-color: var(--qp-brand);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--qp-line);
}

.btn-success, .btn-danger { border-width: 0; }

/* ------------------------------------------------------------
   Forms
   ------------------------------------------------------------ */
.form-control, .form-select {
    border-color: var(--qp-line);
    border-radius: .55rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--qp-brand);
    box-shadow: 0 0 0 .2rem var(--qp-brand-soft);
}

/* ------------------------------------------------------------
   Cards / modals
   ------------------------------------------------------------ */
.card { border-radius: .9rem; overflow: hidden; }

/* ------------------------------------------------------------
   Tables — table-qp head language on BootstrapTable markup
   ------------------------------------------------------------ */
.table {
    --bs-table-border-color: var(--qp-line);
    margin-bottom: 0;
}

.table > thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--bs-secondary-color);
    background: var(--qp-surface-tint);
    white-space: nowrap;
}

.table > tbody tr:last-child > td { border-bottom: 0; }

.row-actions .btn {
    --bs-btn-padding-y: .3rem;
    --bs-btn-padding-x: .55rem;
}

/* ------------------------------------------------------------
   Badges — soft tinted (overrides Bootstrap's solid text-bg-*)
   ------------------------------------------------------------ */
.badge { border-radius: 99rem; font-weight: 600; }

.badge.text-bg-primary,
.badge.bg-primary {
    background-color: var(--qp-brand-soft) !important;
    color: var(--qp-brand) !important;
    border: 1px solid color-mix(in srgb, var(--qp-brand) 30%, transparent);
}

.badge.text-bg-success,
.badge.bg-success {
    background-color: color-mix(in srgb, var(--qp-high) 14%, transparent) !important;
    color: var(--qp-high) !important;
    border: 1px solid color-mix(in srgb, var(--qp-high) 40%, transparent);
}

.badge.text-bg-danger,
.badge.bg-danger {
    background-color: color-mix(in srgb, var(--qp-low) 12%, transparent) !important;
    color: var(--qp-low) !important;
    border: 1px solid color-mix(in srgb, var(--qp-low) 40%, transparent);
}

.badge.text-bg-warning,
.badge.bg-warning {
    background-color: color-mix(in srgb, var(--qp-partial) 14%, transparent) !important;
    color: var(--qp-partial) !important;
    border: 1px solid color-mix(in srgb, var(--qp-partial) 40%, transparent);
}

.badge.text-bg-secondary,
.badge.bg-secondary {
    background-color: var(--qp-surface-tint) !important;
    color: var(--bs-secondary-color) !important;
    border: 1px solid var(--qp-line);
}

.badge.text-bg-info,
.badge.bg-info {
    background-color: color-mix(in srgb, var(--qp-mid) 12%, transparent) !important;
    color: var(--qp-mid) !important;
    border: 1px solid color-mix(in srgb, var(--qp-mid) 40%, transparent);
}

/* ------------------------------------------------------------
   Progress bars — score language
   ------------------------------------------------------------ */
.progress {
    --bs-progress-height: .55rem;
    --bs-progress-bg: var(--qp-track);
    --bs-progress-bar-bg: var(--qp-mid);
    border-radius: 99rem;
}

.progress-bar.bg-success { background-color: var(--qp-high) !important; }
.progress-bar.bg-primary { background-color: var(--qp-mid) !important; }
.progress-bar.bg-danger { background-color: var(--qp-low) !important; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer-min {
    color: var(--bs-secondary-color);
    font-size: .85rem;
    border-top: 1px solid var(--qp-line);
}

.footer-min a {
    color: inherit;
    text-decoration: none;
}

.footer-min a:hover {
    color: var(--qp-brand);
    text-decoration: underline;
}

/* ------------------------------------------------------------
   Privacy policy page (.legal-page, LegalFlow) — long prose,
   kept at a readable measure beside the page's container
   ------------------------------------------------------------ */
.legal-page {
    max-width: 46rem;
    margin-inline: auto;
}

.legal-page .legal-updated {
    font-size: .85rem;
}

.legal-page .legal-lead {
    margin-top: 1rem;
}

.legal-page h2 {
    font-family: "Sora", var(--bs-body-font-family);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1.6rem 0 .5rem;
}

.legal-page p,
.legal-page li {
    line-height: 1.65;
}

.legal-page ul {
    padding-left: 1.2rem;
    margin-bottom: 1rem;
}

.legal-page li {
    margin-bottom: .35rem;
}

/* ------------------------------------------------------------
   Quiz solving page — question cards (.quiz-question fieldsets)
   and choice options rendered as .opt rows
   ------------------------------------------------------------ */
.quiz-question {
    border: 1px solid var(--qp-line);
    border-radius: .9rem;
    padding: 1.15rem 1.3rem;
    margin-bottom: 1rem;
    background: var(--bs-body-bg);
}

.quiz-question legend {
    float: none;
    width: auto;
    padding: 0 .4rem;
    margin-left: .4rem;
    font-weight: 700;
    font-size: 1.02rem;
}

.quiz-question .form-check {
    border: 1px solid var(--qp-line);
    border-radius: .6rem;
    padding: .65rem .9rem .65rem 2.4rem;
    margin-bottom: .5rem;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.quiz-question .form-check:hover {
    border-color: var(--qp-brand);
    background: var(--qp-brand-soft);
}

.quiz-question .form-check:has(input:checked) {
    border-color: var(--qp-brand);
    background: var(--qp-brand-soft);
    box-shadow: inset 0 0 0 1px var(--qp-brand);
}

.quiz-question .form-check-input:checked {
    background-color: var(--qp-brand);
    border-color: var(--qp-brand);
}

.quiz-question .form-check-input:focus {
    border-color: var(--qp-brand);
    box-shadow: 0 0 0 .2rem var(--qp-brand-soft);
}

.quiz-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--qp-line);
    border-radius: .9rem;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.quiz-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--qp-grad);
    opacity: 0;
    transition: opacity .15s ease;
}

.quiz-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(30, 35, 80, .14);
    border-color: color-mix(in srgb, var(--qp-brand) 45%, var(--qp-line));
}

.quiz-card:hover::before { opacity: 1; }

/* ------------------------------------------------------------
   Floating countdown (timer.tpl.html)
   ------------------------------------------------------------ */
.quiz-timer-float {
    position: fixed;
    right: 1.4rem;
    bottom: 1.4rem;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: .7rem;
    background: #141a2e;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 99rem;
    padding: .55rem 1.15rem .55rem .6rem;
    box-shadow: 0 14px 34px rgba(10, 14, 30, .4);
    font-variant-numeric: tabular-nums;
}

.quiz-timer-float .bi { margin-right: .1rem; }

.quiz-timer-ring {
    --v: 100;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    position: relative;
    display: grid;
    place-items: center;
    background: conic-gradient(#7c7ce8 calc(var(--v) * 1%), rgba(255, 255, 255, .14) 0);
}

.quiz-timer-ring::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #141a2e;
}

.quiz-timer-ring .bi { position: relative; font-size: 1.05rem; color: #cfd6ee; }

.quiz-timer-value {
    font-family: "Sora", sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 1px;
}

.quiz-timer-float.low {
    animation: qp-pulse 1s infinite;
    border-color: rgba(248, 113, 113, .6);
}

.quiz-timer-float.low .quiz-timer-ring {
    background: conic-gradient(#f87171 calc(var(--v) * 1%), rgba(255, 255, 255, .14) 0);
}

@keyframes qp-pulse {
    0%, 100% { box-shadow: 0 14px 34px rgba(10, 14, 30, .4), 0 0 0 0 rgba(248, 113, 113, .35); }
    50%      { box-shadow: 0 14px 34px rgba(10, 14, 30, .4), 0 0 0 10px rgba(248, 113, 113, 0); }
}

/* ------------------------------------------------------------
   Result report
   ------------------------------------------------------------ */
.opt-result {
    border-radius: .55rem;
    padding: .5rem .8rem;
    border: 1px solid var(--qp-line);
    margin-bottom: .45rem;
}

.opt-result.correct {
    background: color-mix(in srgb, var(--qp-high) 10%, transparent);
    border-color: color-mix(in srgb, var(--qp-high) 40%, transparent);
}

.opt-result.wrong {
    background: color-mix(in srgb, var(--qp-low) 9%, transparent);
    border-color: color-mix(in srgb, var(--qp-low) 40%, transparent);
}

.compare-box {
    border: 1px solid var(--qp-line);
    border-radius: .6rem;
    background: var(--qp-surface-tint);
    padding: .7rem .9rem;
    font-size: .92rem;
}

.compare-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: .3rem;
}

/* ------------------------------------------------------------
   Owner panel / user panel
   ------------------------------------------------------------ */
.token-secret { word-break: break-all; }

.user-panel-menu {
    align-self: flex-start;
    overflow: hidden;
    position: sticky;
    top: 1.2rem;
    border: 1px solid var(--qp-line);
    background: var(--qp-surface-tint);
}

.user-panel-menu #sidebar { width: 100% !important; background: none !important; }
.user-panel-menu .nav-link {
    color: var(--bs-body-color);
    border-radius: .65rem;
    padding: .6rem .9rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    font-weight: 500;
    margin-bottom: .25rem;
    border: 1px solid transparent;
}

.user-panel-menu .nav-link .bi { font-size: 1.05rem; color: var(--bs-secondary-color); }
.user-panel-menu .nav-link:hover { background: var(--qp-surface-tint); text-decoration: none; }

.user-panel-menu .nav-link.active {
    background: var(--qp-grad);
    color: #fff;
    box-shadow: 0 6px 16px rgba(91, 91, 214, .3);
}

.user-panel-menu .nav-link.active .bi { color: #fff; }

.user-panel-content { min-width: 0; }

.question-card .question-text { white-space: pre-line; }

/* ------------------------------------------------------------
   bbc (fill-in-the-gap) questions: the sentence with the inline fields
   ------------------------------------------------------------ */
.bbc-text { white-space: pre-line; }

.bbc-text .bbc-field-select {
    width: auto;
    max-width: 14rem;
    display: inline-block;
    margin: 0 .15rem;
}

.bbc-text .bbc-field-input {
    width: 9rem;
    display: inline-block;
    margin: 0 .15rem;
}

.bbc-text hr.bbc-hr { margin: .5rem 0; }

.bbc-slot { padding: 0 .2rem; }

/* the answer chips of a solved bbc field (green = accepted, red = given, struck when typed wrong) */
.bbc-slot .bbc-answer {
    display: inline-block;
    padding: .05em .45em;
    border-radius: .45rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.bbc-slot .bbc-answer.bg-success {
    background-color: color-mix(in srgb, var(--qp-high) 15%, transparent) !important;
    color: var(--qp-high) !important;
    border-color: color-mix(in srgb, var(--qp-high) 45%, transparent);
}

.bbc-slot .bbc-answer.bg-danger {
    background-color: color-mix(in srgb, var(--qp-low) 12%, transparent) !important;
    color: var(--qp-low) !important;
    border-color: color-mix(in srgb, var(--qp-low) 45%, transparent);
}

/* the info icon next to the first shown correct answer of a bbc field that accepts more */
.bbc-info-link {
    margin-left: .1rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.bbc-info-link:hover { color: var(--qp-brand); text-decoration: none; }

/* ------------------------------------------------------------
   The bbc editor's visual mode (owner-panel question modal)
   ------------------------------------------------------------ */
.bbc-visual {
    min-height: 6rem;
    font-size: 1.05rem;
    line-height: 2.1;
    border-color: var(--qp-line);
    border-radius: 0 0 .6rem .6rem;
}

.bbc-visual hr.bbc-hr { margin: .9rem 0; border-color: var(--qp-line); }

.bbc-visual:focus {
    border-color: var(--qp-brand);
    box-shadow: 0 0 0 0.2rem var(--qp-brand-soft);
    outline: none;
}

.bbc-field {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    vertical-align: middle;
}

.bbc-field-marker {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color, #6c757d);
    border: 1px solid currentColor;
    border-radius: .25rem;
    padding: .1rem .3rem;
}

.bbc-visual .bbc-select-ctl { width: auto; max-width: 14rem; }
.bbc-visual .bbc-input-ctl { width: 9rem; }