/* =========================================
   1) THEME TOKENS (CSS variables)
   ========================================= */
:root {
    /* Brand colors */
    --color-brand-main: #605da8;
    --color-brand-main-rgb: 96, 93, 168;
    --color-brand-dark: #4a4788;
    --color-brand-light: #d1d1e1;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-border-light: #eff4f8;
    /* Typography */
    --font-family-base: 'Rubik', 'Karla', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Bootstrap overrides */
    --bs-warning: var(--color-brand-main) !important;
    --bs-warning-rgb: var(--color-brand-main-rgb) !important;
}

/* =========================================
   2) BASE ELEMENTS
   ========================================= */
body {
    background: linear-gradient(135deg, #d1d1e1 0%, #c0ebf1 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* =========================================
   3) BOOTSTRAP OVERRIDES (buttons, text, bg)
   ========================================= */
.btn-warning {
    background-color: var(--color-brand-main) !important;
    border-color: var(--color-brand-main) !important;
    color: var(--color-white) !important;
    padding: 1rem 0;
    text-transform: uppercase;
}

    .btn-warning:hover {
        background-color: var(--color-brand-dark) !important;
        border-color: var(--color-brand-dark) !important;
    }

.bg-warning {
    background-color: var(--color-brand-main) !important;
    border-color: var(--color-brand-main) !important;
    color: var(--color-white) !important;
}

.text-warning {
    color: var(--color-brand-main) !important;
}

/* Custom outline button using Bootstrap v5 vars */
.btn-outline-turquase {
    --bs-btn-color: var(--color-brand-dark) !important;
    --bs-btn-border-color: var(--color-brand-dark) !important;
    --bs-btn-hover-color: var(--color-white) !important;
    --bs-btn-hover-bg: var(--color-brand-dark) !important;
    --bs-btn-hover-border-color: var(--color-brand-dark) !important;
    --bs-btn-focus-shadow-rgb: 14, 107, 102 !important;
    --bs-btn-active-color: var(--color-white) !important;
    --bs-btn-active-bg: var(--color-brand-dark) !important;
    --bs-btn-active-border-color: var(--color-brand-dark) !important;
    --bs-btn-active-shadow: inset 0 0.2rem 0.3rem rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: var(--color-brand-dark) !important;
    --bs-btn-disabled-bg: transparent !important;
    --bs-btn-disabled-border-color: var(--color-brand-dark) !important;
    border: 0.1rem solid var(--color-brand-dark) !important;
}

/* =========================================
   4) LAYOUT / CONTAINERS
   ========================================= */
.navbar {
    background-color: var(--color-white) !important;
    border: 0.1rem solid var(--color-border-light);
    box-shadow: 0 0 0.3rem 0.3rem rgba(0, 0, 0, 0.05);
    padding: 1.3rem !important;
}

.card-wrapper {
    background-color: var(--color-white);
    border: 0.1rem solid var(--color-border-light);
    border-radius: 0.9rem;
    overflow-x: auto;
    min-width: 0;
}

.card-medium {
    max-width: 45rem !important;
}

.card-small {
    max-width: 35rem !important;
}

/* Home page layout */
.home-page-shell {
    min-height: calc(100vh - 8.75rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-form-wrapper {
    max-width: 53.75rem;
    width: 100%;
    margin: 0 auto;
}

.home-form-card {
    background-color: #f0f5fa;
    border-radius: 0.75rem;
    min-height: 20rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
}

    .home-form-card .card-body {
        display: flex;
    }

.home-form {
    flex: 1;
}

.home-form-actions {
    margin-top: auto;
}

.home-code-input {
    padding: 1rem 0;
}

/* Profile page layout */
.profile-page-shell {
    min-height: calc(100vh - 8.75rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-form-wrapper {
    max-width: 53.75rem;
    width: 100%;
    margin: 0 auto;
}

.profile-card {
    background: rgba(240, 245, 250, 0.9);
    border: 0.1rem solid rgba(255, 255, 255, 0.65);
    border-radius: 0.9rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(6px);
}

.profile-field {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.08);
}

    .profile-field:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

/* Results page layout */
.results-page-shell {
    min-height: calc(100vh - 8.75rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.results-card {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 0.9rem;
    border: 0.1rem solid var(--color-border-light);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.14);
}

.results-subtitle {
    color: var(--color-brand-dark);
    font-family: var(--font-family-base);
    font-size: 1.05rem;
}

.resultContent {
    font-family: var(--font-family-base);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-black);
}

/* =========================================
   5) TYPOGRAPHY / HEADINGS / TEXT BLOCKS
   ========================================= */
.titleHome {
    color: var(--color-black) !important;
    font-family: var(--font-family-base) !important;
    font-size: 2.5rem;
    font-weight: 700;
}

.paragraphHome {
    color: var(--color-brand-dark) !important;
    font-family: var(--font-family-base);
    font-size: 1.1rem;
}

.paragraphHomeGuideline {
    color: var(--color-black) !important;
    font-family: var(--font-family-base);
    font-size: 1.1rem;
}

.paragraphTestTitleCard {
    color: var(--color-white) !important;
    font-family: var(--font-family-base);
    font-size: 1.4rem;
    font-weight: 600;
}

.labeled {
    font-family: var(--font-family-base);
    font-size: 0.8rem;
}

.CardFormTitleSection {
    font-family: var(--font-family-base);
    font-size: 1.1rem;
    text-align: center;
    font-weight: 600;
}

.GroupFormTitleSection {
    color: var(--color-brand-main) !important;
    padding: 0.6rem;
    text-align: center;
    text-transform: uppercase;
}

/* =========================================
   6) FORM TWEAKS / INLINE LAYOUT
   ========================================= */
.form-text-custom {
    padding: 0.4rem 2.3rem 0.4rem 0.8rem !important;
}

.aligned {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* =========================================
   7) UTILITIES (one-offs; prefer Bootstrap utilities when possible)
   ========================================= */
.bgr-white {
    background-color: var(--color-white);
}

/* =========================================
   8) QUESTION IMAGES (same-size box for all; image fits inside, never cropped)
   ========================================= */
.question-image-wrapper {
    width: 100%;
    max-width: 40rem;
    max-height: 30rem;
}

.question-image {
    display: block;
    max-width: 100%;
    max-height: 30rem;
    width: auto;
    height: auto;
}

/* Questionnaire table/cell: constrain so content stays inside form */
.table-responsive.table {
   table-layout: fixed;
   width: 100%;
}
.table td.text-center:first-child,
.table th.text-center:first-child {
   width: 2.5rem;
}
.table .questionnaire-cell {
   min-width: 0;
   width: auto;
}

/* Question: min 400px so it never squishes; row wraps when container is narrow */
.questionnaire-question-inline {
   flex: 1 1 0;
   min-width: 400px;
}

/* When answers would take >40% of screen: stack (question above, answers below) and show answers in a column */
@media (max-width: 900px) {
   .questionnaire-question-inline {
      flex: none;
      width: 100%;
      min-width: 100%;
   }
   .questionnaire-answers-inline {
      min-width: 100%;
      flex-direction: column;
      align-items: stretch;
   }
}

/* Small screens: dropdown full width, stacked layout already from above */
@media (max-width: 767px) {
   .table .form-select {
      width: 100%;
   }
   .questionnaire-question-inline {
      flex: none;
      width: 100%;
      min-width: 100%;
   }
   .questionnaire-answers-inline {
      min-width: 100%;
      flex-direction: column;
      align-items: stretch;
   }
}