/* AirForce Institute Survey — site styles
   Brand identity extracted from the institute logo (شعار المعهد الوان.jpg):
   deep institute blue, dark navy, Egyptian flag red, eagle gold.
   Built on top of Bootstrap 5 RTL. */

/* --- Arabic font stack ----------------------------------------------------
   Drop Cairo or Tajawal woff2 files into wwwroot/fonts/ (see fonts/README.md)
   and uncomment the @font-face blocks below. The OS-stack fallback applies
   immediately while the bundled fonts are pending. */

/* @font-face {
    font-family: 'Tajawal';
    src: url('/fonts/Tajawal-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Tajawal';
    src: url('/fonts/Tajawal-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
} */

/* --- Brand tokens --------------------------------------------------------- */
:root {
    /* Covers Arabic + Latin (Tajawal/Cairo/Segoe UI/Arial), Greek (Segoe UI/Tahoma/Arial), and
       Korean (Malgun Gothic / Apple SD Gothic Neo / Noto Sans KR — system fonts; self-hosted
       woff2 subsets are a follow-up per additional-languages.plan.md §5.5). */
    --survey-font-arabic: 'Tajawal', 'Cairo', 'Segoe UI', 'Tahoma', 'Arial',
        'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Noto Sans CJK KR', sans-serif;

    --brand-blue: #0f4f84;
    --brand-blue-rgb: 15, 79, 132;
    --brand-blue-dark: #0a3c66;
    --brand-blue-light: #1b7fbd;
    --brand-sky: #3fa9f5;
    --brand-navy: #0a1f33;
    --brand-navy-soft: #142a44;
    /* Site-wide theme gradient — the navbar and every colored section header use this. */
    --brand-gradient: linear-gradient(135deg, #3f57b0 0%, #233a86 100%);
    --brand-red: #ce1126;
    --brand-red-rgb: 206, 17, 38;
    --brand-gold: #c9a14a;
    --brand-gold-soft: #d9b970;
    --brand-ink: #1a2332;
    --brand-muted: #5b6b80;
    --brand-bg: #f4f7fb;
    --brand-card-border: rgba(15, 79, 132, 0.14);
    --brand-card-shadow: 0 1px 2px rgba(10, 31, 51, 0.04), 0 4px 14px rgba(10, 31, 51, 0.06);
}

/* --- Bootstrap palette overrides ----------------------------------------- */
:root,
[data-bs-theme="light"] {
    --bs-primary: var(--brand-blue);
    --bs-primary-rgb: var(--brand-blue-rgb);
    --bs-link-color: var(--brand-blue);
    --bs-link-color-rgb: var(--brand-blue-rgb);
    --bs-link-hover-color: var(--brand-blue-dark);
    --bs-body-color: var(--brand-ink);
    --bs-body-bg: var(--brand-bg);
    --bs-border-color: var(--brand-card-border);
    --bs-danger: var(--brand-red);
    --bs-danger-rgb: var(--brand-red-rgb);
}

/* --- Base ----------------------------------------------------------------- */
/* Larger root size so the whole rem-based UI (text, spacing, buttons, cards)
   scales up — the audience skews older. Bump this one value to go bigger/smaller. */
html {
    font-size: 17px;
}

body {
    font-family: var(--survey-font-arabic);
    background-color: var(--brand-bg);
    color: var(--brand-ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
    min-height: 60vh;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--brand-navy);
    font-weight: 600;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

code {
    color: var(--brand-blue-dark);
    background-color: rgba(var(--brand-blue-rgb), 0.06);
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
}

/* --- Focus ring (branded) ------------------------------------------------- */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.15rem rgba(63, 169, 245, 0.35);
    border-color: var(--brand-blue-light);
}

/* --- Navbar (brand chrome) ------------------------------------------------ */
.site-header {
    background: var(--brand-gradient);
    box-shadow: 0 2px 0 0 var(--brand-gold), 0 4px 18px rgba(10, 31, 51, 0.18);
    border: 0;
}

.site-header .navbar {
    padding-top: 1.05rem;
    padding-bottom: 1.05rem;
}

.site-header .navbar-brand {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

/* Give the nav room to breathe: spacing between items and padded links that
   never break a label onto two lines. Logical props keep this correct in RTL. */
.site-header .navbar-nav {
    column-gap: 0.5rem;
}

.site-header .navbar-brand:hover {
    color: var(--brand-gold-soft);
    text-decoration: none;
}

.site-header .navbar-brand .brand-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    padding: 2px;
}

.site-header .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    padding-inline: 0.9rem;
    padding-block: 0.5rem;
    white-space: nowrap;
    border-radius: 0.5rem;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}

.site-header .nav-link.active,
.site-header .nav-item .nav-link[aria-current="page"] {
    color: var(--brand-gold-soft);
}

.site-header .navbar-text {
    color: rgba(255, 255, 255, 0.75);
}

.site-header .navbar-text strong {
    color: #fff;
}

.site-header .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.25);
}

.site-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.site-header .badge.bg-primary {
    background-color: var(--brand-gold) !important;
    color: var(--brand-navy);
}

.site-header .btn-link.nav-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.site-header .btn-link.nav-link:hover {
    color: #fff;
}

/* --- Buttons (brand) ------------------------------------------------------ */
.btn-primary {
    background: var(--brand-gradient);
    border-color: #233a86;
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible {
    background: var(--brand-gradient);
    border-color: #1c2f6e;
    color: #fff;
    filter: brightness(0.93);
}

.btn-outline-primary {
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--brand-navy);
    border-color: var(--brand-card-border);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}

.btn-danger {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #a40d1f;
    border-color: #a40d1f;
}

/* --- Cards (brand) -------------------------------------------------------- */
.card {
    border-color: var(--brand-card-border);
    box-shadow: var(--brand-card-shadow);
    border-radius: 0.6rem;
}

.card-header {
    background-color: rgba(var(--brand-blue-rgb), 0.04);
    border-bottom-color: var(--brand-card-border);
    font-weight: 600;
    color: var(--brand-navy);
}

/* --- Tables --------------------------------------------------------------- */
/* The gradient sits on the header row so it reads as one continuous bar; the
   cells are transparent (this also overrides Bootstrap's .table-light theads). */
.table thead tr {
    background: var(--brand-gradient);
}

.table thead th {
    background-color: transparent;
    color: #fff;
    font-weight: 600;
    border-bottom: 2px solid #1c2f6e;
}

/* Click-to-sort headers (enhanced by wwwroot/js/table-sort.js). A faint ⇅ hints
   the column is sortable; once active it shows ▲ (ascending) or ▼ (descending).
   margin-inline-start keeps the gap between label and glyph correct in RTL. */
.table thead th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.table thead th.sortable:hover,
.table thead th.sortable:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
    outline: none;
}

.table thead th.sortable::after {
    content: "⇅";
    margin-inline-start: 0.35rem;
    font-size: 0.8em;
    opacity: 0.45;
}

.table thead th.sortable[aria-sort="ascending"]::after {
    content: "▲";
    opacity: 0.95;
}

.table thead th.sortable[aria-sort="descending"]::after {
    content: "▼";
    opacity: 0.95;
}

/* Long answer/question text wraps inside its cell — and breaks an unbroken
   token if needed — so it always shows in full instead of overflowing the cell,
   stretching the table, or escaping its bounds. break-word (not anywhere) so a
   narrow column never collapses to one character per line (e.g. action buttons
   in a width:1% column). Applies to every table. */
.table td,
.table th {
    overflow-wrap: break-word;
}

/* Option chips in the bulk-import preview: wrap long sentences fully rather than
   forcing a single line, and align the text to the start. */
.preview-table .badge {
    white-space: normal;
    overflow-wrap: break-word;
    text-align: start;
}

/* Colour key beside an option label (replaces the chart legend in results tables). */
.result-swatch {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 0.2rem;
    margin-inline-end: 0.45rem;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

/* --- Form floating-label RTL polish -------------------------------------- */
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder {
    color: var(--bs-secondary-color);
    text-align: start;
}

/* --- Page accents --------------------------------------------------------- */
.breadcrumb-item a {
    color: var(--brand-blue);
}

.breadcrumb-item.active {
    color: var(--brand-muted);
}

/* Hero on the landing page */
.brand-hero {
    background: linear-gradient(135deg, rgba(var(--brand-blue-rgb), 0.06) 0%, rgba(var(--brand-blue-rgb), 0.0) 60%);
    border-radius: 0.75rem;
    padding: 2rem;
    border: 1px solid var(--brand-card-border);
}

.brand-hero .brand-hero-logo {
    width: 160px;
    height: 160px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(10, 31, 51, 0.15));
}

.brand-hero h1 {
    color: var(--brand-navy);
    font-weight: 700;
}

/* Login page card */
.login-card-wrap {
    margin-top: 2rem;
}

.login-card-wrap .login-logo {
    width: 110px;
    height: 110px;
    object-fit: contain;
    margin: 0 auto 1rem;
    display: block;
    filter: drop-shadow(0 4px 10px rgba(10, 31, 51, 0.18));
}

.login-card-wrap .card {
    border: 0;
    box-shadow: 0 8px 30px rgba(10, 31, 51, 0.12);
    border-radius: 0.75rem;
    overflow: hidden;
}

.login-card-wrap .card::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg,
    var(--brand-blue) 0%,
    var(--brand-blue-light) 35%,
    var(--brand-gold) 65%,
    var(--brand-red) 100%);
}

.login-card-wrap .card-body {
    padding: 1.75rem 1.5rem;
}

.login-card-wrap h1 {
    color: var(--brand-navy);
}

/* Dashboard cards */
.card-title {
    color: var(--brand-navy);
}

/* Stat / KPI cards */
.card .h3 {
    color: var(--brand-blue);
    font-weight: 700;
}

.card .h3.text-success {
    color: #1f7a4e !important;
}

/* --- Footer --------------------------------------------------------------- */
.site-footer {
    flex-shrink: 0;
    margin-top: 3rem;
    background: var(--brand-gradient);
    border-top: 3px solid var(--brand-gold);
    color: rgba(255, 255, 255, 0.85);
    padding: 1.25rem 0;
}

.site-footer .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

.site-footer .footer-mark {
    width: 28px;
    height: 28px;
    object-fit: contain;
    opacity: 0.85;
}

/* --- Alerts --------------------------------------------------------------- */
.alert-danger {
    background-color: rgba(var(--brand-red-rgb), 0.08);
    border-color: rgba(var(--brand-red-rgb), 0.25);
    color: #8e0d1c;
}

.alert-light {
    background-color: #fff;
    border-color: var(--brand-card-border);
}

/* ASP.NET Core renders a `validation-summary-valid alert alert-danger` div
   even when ModelState is clean (placeholder for client-side validation).
   Hide it so the page doesn't show an empty red box on first load. */
.validation-summary-valid {
    display: none !important;
}

.validation-summary-errors ul {
    margin-bottom: 0;
    padding-inline-start: 1.25rem;
}

.validation-summary-errors li {
    list-style: disc;
}

/* --- Badges --------------------------------------------------------------- */
.badge.bg-primary {
    background-color: var(--brand-blue) !important;
}

.badge.bg-secondary {
    background-color: var(--brand-muted) !important;
}

/* --- Admin list-page toolbar (title + primary action + filters) ----------- */
.page-toolbar {
    background: linear-gradient(180deg, rgba(var(--brand-blue-rgb), 0.07) 0%, rgba(var(--brand-blue-rgb), 0.03) 100%);
    border: 1px solid var(--brand-card-border);
    border-radius: 0.9rem;
    padding: 1.25rem 1.5rem;
}

/* Branded page title: blue text with a leading glyph that inherits the colour. */
.page-toolbar-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--brand-blue);
    font-weight: 700;
}

.page-toolbar-title .page-toolbar-icon {
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 auto;
}

/* White inputs read crisply against the tinted toolbar panel. */
.page-toolbar .form-control,
.page-toolbar .form-select {
    background-color: #fff;
}

/* --- Question-bank cards -------------------------------------------------- */
.bank-card {
    border: none;
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: var(--brand-card-shadow);
}

.bank-card-header {
    background: var(--brand-gradient);
    color: #fff;
    padding: 1.1rem 1.25rem;
}

.bank-card-header .bank-card-name {
    font-weight: 700;
    margin: 0;
}

.bank-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-radius: 2rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.2;
}

.bank-meta-icon {
    color: var(--brand-blue);
    opacity: 0.75;
}

.bank-stat {
    font-size: 0.85rem;
    padding: 0.45rem 0.8rem;
    border-radius: 2rem;
}

.bank-actions .btn {
    width: 2.9rem;
    height: 2.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border-radius: 0.6rem;
    padding: 0;
}

/* The details button carries text, so it breaks out of the square icon shape
   into an auto-width pill (same height as the icon buttons, white bold label). */
.bank-actions .bank-action-details {
    width: auto;
    gap: 0.4rem;
    padding: 0 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 2rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.bank-actions .bank-action-details:hover,
.bank-actions .bank-action-details:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
}

/* --- Survey cards --------------------------------------------------------- */
.survey-card {
    border: none;
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: var(--brand-card-shadow);
}

.survey-card-header {
    background: var(--brand-gradient);
    color: #fff;
    padding: 1.1rem 1.25rem;
}

.survey-card-title {
    font-weight: 700;
}

.survey-info-btn {
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-style: italic;
    font-weight: 700;
    text-decoration: none;
}

.survey-info-btn:hover {
    background: rgba(255, 255, 255, 0.32);
    color: #fff;
}

.survey-stat {
    border-radius: 0.6rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.survey-stat .survey-stat-num {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 0.4rem;
    padding: 0 0.5rem;
    min-width: 1.9rem;
    text-align: center;
}

/* --- Bank question management page ---------------------------------------- */
.bank-manage-header {
    background: var(--brand-gradient);
    color: #fff;
    border-radius: 0.9rem;
    padding: 1.25rem 1.5rem;
}

.bank-q-row {
    background: var(--brand-blue);
    color: #fff;
    border-radius: 0.6rem;
}

.bank-q-options {
    background: #fff;
    border: 1px solid var(--brand-card-border);
    border-top: none;
    border-radius: 0 0 0.6rem 0.6rem;
    margin-top: -0.35rem;
}

/* Collapsible per-type section headers on the bank-management page. */
.bank-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: rgba(var(--brand-blue-rgb), 0.08);
    border: 1px solid var(--brand-card-border);
    border-radius: 0.6rem;
    padding: 0.8rem 1.1rem;
    color: var(--brand-navy);
    font-weight: 700;
}

.bank-section-toggle:hover {
    background: rgba(var(--brand-blue-rgb), 0.14);
}

.bank-section-title {
    font-size: 1.1rem;
}

.bank-section-caret {
    display: inline-block;
    transition: transform 0.15s ease;
}

.bank-section-toggle.collapsed .bank-section-caret {
    transform: rotate(-90deg);
}

/* --- Bulk import (cream-themed upload wizard) ----------------------------- */
.bulk-import .bulk-header {
    background: var(--brand-gradient);
    color: #fff;
    border-radius: 0.9rem;
    padding: 1.5rem;
    text-align: center;
}

.bulk-import .bulk-card {
    background: #fdf4d3;
    border: 1px solid #efe1b0;
    border-radius: 0.8rem;
    padding: 1.25rem 1.5rem;
    color: #6f561c;
}

.bulk-import .bulk-instructions {
    border-inline-start: 5px solid var(--brand-blue);
}

.bulk-import .bulk-info-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
    font-style: italic;
    font-weight: 700;
    font-size: 0.85rem;
}

.bulk-import .bulk-steps {
    margin: 0;
    padding-inline-start: 1.25rem;
    line-height: 2;
}

.bulk-import .bulk-card code {
    color: #c0392b;
    background: transparent;
}

.bulk-import .bulk-section-label {
    color: #8a6d1f;
    font-weight: 600;
}

.bulk-import .bulk-input {
    background-color: #fdf4d3;
    border-color: #e6d49a;
    color: #5b4a1a;
}

.bulk-import .bulk-input:focus {
    background-color: #fffaf0;
    border-color: var(--brand-blue-light);
}

.bulk-import .bulk-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: #fdf4d3;
    border: 2px dashed #e0c879;
    border-radius: 0.8rem;
    padding: 2.25rem 1rem;
    text-align: center;
    cursor: pointer;
    color: #8a6d1f;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bulk-import .bulk-dropzone:hover {
    background: #fcefc4;
}

.bulk-import .bulk-dropzone.dragging {
    background: #fcefc4;
    border-color: var(--brand-blue);
    border-style: solid;
}

.bulk-import .bulk-dropzone .dz-icon {
    width: 3rem;
    height: 3rem;
    color: var(--brand-blue);
    margin-bottom: 0.4rem;
}

.bulk-import .bulk-dropzone .dz-title {
    font-weight: 700;
    color: #5b4a1a;
}

.bulk-import .bulk-dropzone .dz-sub {
    font-size: 0.9rem;
}

.bulk-import .bulk-dropzone .dz-hint {
    font-size: 0.8rem;
    opacity: 0.8;
}

.bulk-import .bulk-dropzone .dz-file {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2f9e44;
    margin-top: 0.35rem;
    min-height: 1rem;
}

.bulk-import .btn-template {
    background-color: #2f9e44;
    border-color: #2f9e44;
    color: #fff;
}

.bulk-import .btn-template:hover,
.bulk-import .btn-template:focus {
    background-color: #268838;
    border-color: #268838;
    color: #fff;
}

.bulk-import .btn-upload-questions {
    background: var(--brand-gradient);
    border-color: #233a86;
    color: #fff;
}

.bulk-import .btn-upload-questions:hover,
.bulk-import .btn-upload-questions:focus {
    color: #fff;
    filter: brightness(0.93);
}

.bulk-import .btn-upload-questions:disabled {
    background: var(--brand-gradient);
    border-color: #233a86;
    color: #fff;
    opacity: 0.55;
}

/* --- Survey create wizard ------------------------------------------------- */
.survey-wizard {
    max-width: 920px;
    background: #fff;
    border-radius: 0.9rem;
    box-shadow: var(--brand-card-shadow);
    overflow: hidden;
}

.survey-wizard .wizard-header {
    background: var(--brand-gradient);
    color: #fff;
    text-align: center;
    padding: 1.5rem;
}

.survey-wizard .wizard-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    background: #fdf4d3;
    border-bottom: 1px solid #efe1b0;
    padding: 0.75rem 1rem;
}

.survey-wizard .wizard-tab {
    background: none;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #8a6d1f;
    font-weight: 600;
}

.survey-wizard .wizard-tab-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: #e7d8aa;
    color: #5b4a1a;
    font-weight: 700;
    font-size: 0.9rem;
}

.survey-wizard .wizard-tab.active {
    color: var(--brand-navy);
}

.survey-wizard .wizard-tab.active .wizard-tab-num {
    background: var(--brand-gradient);
    color: #fff;
}

.survey-wizard .wizard-body {
    padding: 1.5rem;
}

.survey-wizard .wizard-instructions {
    background: #fdecd9;
    border-inline-start: 5px solid #d98b3a;
    border-radius: 0.6rem;
    padding: 1rem 1.25rem;
    color: #8a5a2b;
}

.survey-wizard .wizard-info-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
    font-style: italic;
    font-weight: 700;
    font-size: 0.85rem;
}

.survey-wizard .wizard-body .form-control,
.survey-wizard .wizard-body .form-select {
    background-color: #fdf4d3;
    border-color: #e6d49a;
}

.survey-wizard .wizard-body .form-control:focus,
.survey-wizard .wizard-body .form-select:focus {
    background-color: #fffaf0;
    border-color: var(--brand-blue-light);
}

.survey-wizard .wizard-section-title {
    color: var(--brand-blue);
    font-weight: 700;
    font-size: 1.05rem;
}

.survey-wizard .wizard-bank-cards {
    background: #fdf4d3;
    border: 1px solid #efe1b0;
    border-radius: 0.7rem;
    padding: 0.85rem;
}

.survey-wizard .wizard-bank-card {
    background: #fff;
    border: 1px solid #efe1b0;
    border-top: 3px solid var(--brand-blue);
    border-radius: 0.6rem;
    padding: 0.85rem 0.5rem;
    text-align: center;
    height: 100%;
}

.survey-wizard .wizard-bank-card.accent-single {
    border-top-color: #2f9e44;
}

.survey-wizard .wizard-bank-card.accent-multi {
    border-top-color: #1b7fbd;
}

.survey-wizard .wizard-bank-card .num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-navy);
    line-height: 1.2;
}

.survey-wizard .wizard-bank-card .lbl {
    font-size: 0.85rem;
    color: var(--brand-muted);
}

.survey-wizard .wizard-courses {
    background: #fdf4d3;
    border: 1px solid #efe1b0;
    border-radius: 0.7rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 22rem;
    overflow-y: auto;
}

.survey-wizard .wizard-course {
    background: #fff;
    border: 1px solid var(--brand-card-border);
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    margin: 0;
}

.survey-wizard .wizard-course:hover {
    background: #f4f7fb;
}

/* Selection-order number badge on the multi-category picker. */
.survey-wizard .category-order-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--brand-blue, #0f4f84);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

/* --- Page hero (gradient title bar, used across the respondent pages) ----- */
.page-hero {
    background: var(--brand-gradient);
    color: #fff;
    border-radius: 0.9rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.page-hero h1 {
    font-weight: 700;
}

/* Countdown pill on the timed take page (sits in the gradient hero). */
.take-timer {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2rem;
    padding: 0.35rem 1rem;
    font-weight: 700;
    white-space: nowrap;
}

.take-timer.warning {
    background: var(--brand-gold);
    color: var(--brand-navy);
}

.take-timer.expired {
    background: var(--brand-red);
    color: #fff;
}

/* Unanswered/invalid question cards are outlined in red after a failed submit. */
.question-card-invalid {
    border-color: #dc3545 !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

/* Full-screen notice shown when the user tries to leave an unfinished survey. */
.survey-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(20, 30, 70, 0.9);
}

.survey-lock-overlay[hidden] {
    display: none;
}

.survey-lock-box {
    width: 100%;
    max-width: 640px;
    text-align: center;
    background: #fff;
    border-radius: 1rem;
    border-top: 6px solid var(--brand-red);
    padding: 2.75rem 2rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35);
}

.survey-lock-icon {
    font-size: 3.75rem;
    line-height: 1;
    color: var(--brand-red);
    margin-bottom: 0.75rem;
}

.survey-lock-title {
    font-weight: 800;
    font-size: 2rem;
    color: var(--brand-navy);
    margin-bottom: 0.85rem;
}

.survey-lock-text {
    font-size: 1.2rem;
    line-height: 1.9;
    color: #444;
    margin-bottom: 1.85rem;
}

.page-hero a.btn-light {
    font-weight: 600;
}

/* --- Centered form card (simple create/edit forms) ----------------------- */
.form-card {
    max-width: 760px;
    background: #fff;
    border-radius: 0.9rem;
    box-shadow: var(--brand-card-shadow);
    overflow: hidden;
}

.form-card .form-card-header {
    background: var(--brand-gradient);
    color: #fff;
    padding: 1.25rem 1.5rem;
}

.form-card .form-card-body {
    padding: 1.5rem;
}

/* --- Multiple-choice answers: list of removable chips below the input ---- */
.answer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--brand-blue);
    color: #fff;
    border-radius: 2rem;
    padding: 0.2rem 0.75rem;
    font-size: 0.9rem;
}

.tag-chip button {
    border: 0;
    padding: 0;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tag-chip button:hover {
    background: rgba(255, 255, 255, 0.45);
}

/* Export page: themed cards (brand gradient, white text). The select controls keep
   their default light styling so the options stay readable. */
.export-card {
    background: var(--brand-gradient);
    color: #fff;
    border: 0;
}

.export-card .card-body,
.export-card h2,
.export-card label,
.export-card .form-check-label {
    color: #fff;
}

.export-card .form-text {
    color: rgba(255, 255, 255, 0.8) !important;
}