/* Dashboard chart colors. DevExpress palettes remain independent. */
:root {
    --dashboard-teal: #054F63;
    --dashboard-yellow: #FFC611;
    --dashboard-coral: #FF5756;
    --dashboard-mint: #3DAA8F;
    --dashboard-blue-gray: #7FA0A7;
    --dashboard-light-blue: #E1F0F9;
    --dashboard-warm-gray: #EEEAE9;
    --dashboard-light-gray: #EDEDEC;
    --dashboard-pale-mint: #BFD8D2;
    --dashboard-slate: #525D5F;
    --dashboard-aqua: #82D1C3;
    --dashboard-orange: #F7A100;
    --dashboard-brown: #6D4306;
    --dashboard-periwinkle-blue: #7895CC;
    --dashboard-light-green: #C7DEA9;
}

/* Color palette — LORI Charte Graphique officielle */
:root {
    --font-sans: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --navbar-height: 5rem;
    --mobile-navbar-height: 5rem;
    --admin-subnav-height: 5rem;
    /* Brand primaries (from charte graphique) */
    --turquoise-color: #064F63;
    --green-turquoise-color: #3CAA8F;
    --yellow-color: #FFC611;
    --corail-color: #FF5757;
    --water-gray-color: #7FA0A7;
    --light-grey-color: #F2F2F2;
    --sky-blue-color: #E2F0FA;
    --white-color: #FFFFFF;
    --light-blue: #E1F0F9;
    /* Derived / UI shades */
    --dark-teal-color: #025064;
    --dark-teal-color-shade: #024455;
    --dark-teal-color-shadow: #02506440;
    --mint-color: #3CAA8F;
    --mint-color-shade: #2d9078;
    --mint-color-shadow: #3CAA8F40;
    --light-grey-color-shadow: #F2F2F240;
    --black-color: #000000;
    --blue-grey-color: #5b7682;
    --green-color: #26b050;
    --corail-color-shadow: #FF575740;
    --red-color: #FF5757;
    --gray-color: #F2F2F2;
    --sky-gray-color: #E2F0FA;
}

.btn.text-white:hover,
.btn.text-white:focus {
    color: white !important;
    background-color: transparent ;
}
.tqg-left{
    width:20%;

}

.navbar-dropdown .dropdown-item:hover,
.navbar-dropdown .dropdown-item:focus,
.navbar-dropdown .dropdown-item:active {
    background-color: rgb(60, 170, 143);
    color: #fff;
    outline: none;
}




.nav-pills {
    --bs-nav-pills-link-active-bg: var(--turquoise-color) !important;
    --bs-nav-pills-link-active-color: #fff !important;
    --bs-nav-link-color: var(--turquoise-color) !important;
    --bs-nav-link-hover-color: var(--dark-teal-color) !important;
}

body .form-range {
    accent-color: #003B71 !important;
}
body .form-range::-webkit-slider-thumb {
    background-color: #003B71 !important;
}
body .form-range::-webkit-slider-thumb:active {
    background-color: #002A52 !important;
}
body .form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(0, 59, 113, 0.25) !important;
}
body .form-range::-moz-range-thumb {
    background-color: #003B71 !important;
    border: 0 !important;
}
body .form-range::-moz-range-thumb:active {
    background-color: #002A52 !important;
}
body .form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(0, 59, 113, 0.25) !important;
}
.tqg-middle{
    width:65%;
}

.yellow-result,
.red-result,
.teal-result,
.mint-result,
.blue-gray-result,
.light-blue-result,
.light-gray-result {
    border-radius: 0.5rem;
    width: fit-content;
    padding: 0.5rem 1.4rem;
    font-size: 1.5rem;
    font-weight: 5;
}

.yellow-result {
    background-color: var(--dashboard-yellow);
}

.red-result {
    background-color: var(--dashboard-coral);
    color: var(--white-color);
}

.teal-result {
    background-color: var(--dashboard-teal);
    color: var(--white-color);
}

.mint-result {
    background-color: var(--dashboard-mint);
    color: var(--white-color);
}

.blue-gray-result {
    background-color: var(--dashboard-blue-gray);
    color: var(--white-color);
}

.light-blue-result {
    background-color: var(--dashboard-light-blue);
}

.light-gray-result {
    background-color: var(--dashboard-light-gray);
}

.row {
    --bs-gutter-y: 1.5rem !important;
}

.form-action-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}


.experience-gauge {
    width: 100%;
}

.experience-gauge-labels {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    font-size: 0.8rem;
}

.experience-gauge-labels > div {
max-width: 45%;
}

.experience-gauge-labels > div:last-child {
    text-align: center;
}


.ethics-wrapper{
    background-color: white;
    padding: 2rem;
    border-radius: 1rem;
}

.ethics-warning {
    display:flex;
    flex-direction:column;
    border-radius: 0.5rem;
    padding: 2rem 2rem 2rem;
    color: var(--turquoise-color);
    background-color: var(--sky-blue-color);
}

.dash-span-bordered{
    padding-right: 1rem;
    border-right: 2px solid var(--mint-color);
    gap: 0.4rem;
}

.ethics-actions {
    display: flex;
}

.ethics-warning .ethics-actions {
    margin-top: 1.5rem;
}

.ethics-references {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--water-gray-color);
}

.ethics-references h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.ethics-references ol {
    padding-left: 1.25rem;
}

.ethics-references li {
    padding-bottom: 0.5rem;
}

.ethics-wrapper li, .ethics-wrapper p {
    padding-bottom: 1rem;
}


.ethics-separator {
    width: 10rem;
    height: 0.5rem;
    background-color: var(--green-turquoise-color);
    border-radius: 999px;
    margin: 2rem auto;
}

.form-action-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The global .btn (width:100%, max-width:20rem !important) would otherwise
       stretch a lone button to 320px and beat this max-width. */
    width: auto;
    min-width: 130px;
    max-width: 230px !important;
    min-height: 3.1rem;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
}
.dxbl-chart-legend-item span {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* DevExpress renders an "Outside" chart legend with position:absolute
   (its own base theme rule), so it never contributes to its container's
   height. With a long legend (e.g. 6 ethnicity labels wrapping to many
   lines) it overflows past the chart's fixed height and overlaps
   whatever comes right after the card in the page -- here, the
   "Personnes proches aidantes" bar. Forcing it back into normal flow
   lets the card grow to actually contain it. */
.chart-legend .dxbl-chart-legend {
    position: static;
}

/* Superseded by the fixed 70%/30% chart/legend split in dash.css
   (.dxbl-chart-with-legend-container rules), which needs dxbl-pie-chart's
   own Height to stay a definite pixel value -- forcing it to "auto" here
   made the container's height indeterminate, so the flex-basis
   percentages that split couldn't resolve and the legend just grew to
   fit its content instead of being capped at 30% with a scrollbar.
.pie-chart-compact dxbl-pie-chart {
    height: auto !important;
    min-height: 400px;
}
*/

/* DevExpress lays out legend items with flex-flow:row wrap, not a real
   grid, so which item starts "column 2" on each row depends on how much
   horizontal space the previous items' text took -- labels of different
   lengths (e.g. age ranges) make the second column drift out of vertical
   alignment from one row to the next. Forcing an actual 2-column grid
   makes every row's second item start at the same horizontal position. */
.chart-legend .dxbl-chart-legend-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
}

.chart-legend .dxbl-chart-legend-item {
    margin-right: 0 !important;
}

input[type="radio"] {
    accent-color: var(--turquoise-color);
}


.form-check-input,
.dash-filter-item input[type="checkbox"] {
    accent-color: var(--mint-color);
}

body .form-check-input:checked {
    background-color: var(--turquoise-color) !important;
    border-color: var(--turquoise-color) !important;
}

body .form-check-input:focus {
    border-color: var(--turquoise-color);
    box-shadow: 0 0 0 0.25rem var(--dark-teal-color-shadow);
}


body .form-select:focus {
    border-color: var(--turquoise-color);
    box-shadow: 0 0 0 0.25rem var(--dark-teal-color-shadow);
}

/* Square, check-style radio (keeps radio semantics) */
.square-radio {
    width: 20px;
    height: 20px;
    min-width: 20px; /* flex item: without this a long wrapping label squeezes it into a rectangle */
    flex-shrink: 0;
    box-sizing: border-box;
    appearance: none; /* hide native */
    -webkit-appearance: none;
    border: 2px solid #333;
    border-radius: 4px; /* square corners */
    background: #fff;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    margin: 0; /* align flush right */
}

.square-radio:focus {
outline: 2px solid var(--dark-teal-color-shadow); /* accessible focus */
outline-offset: 2px;
}

.square-radio:checked {
background: var(--turquoise-color); /* same as the banner */
border-color: var(--turquoise-color);
}

.square-radio:checked::after {
    content: "✓";
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

.confirmation-box-wrapper {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9999;
}

.progress-wrapper {
    width: 80%;
    max-width: 500px;
    margin: auto;
    padding-top: 1em;
}

.progress {
    height: 1rem;
    background-color: var(--light-grey-color);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: var(--mint-color);
    border-radius: 999px;
    transition: width 0.3s ease;
    background-color: var(--green-turquoise-color) !important;
}

.confirmation-box {
    width: 500px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.confirmation-text {
    font-size: 18px;
    text-align: center;
    margin-bottom: 24px;
}

.confirmation-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.confirmation-close-x {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--dark-teal-color);
    cursor: pointer;
}



/* Text */
.text-color-dark-teal {
    color: var(--dark-teal-color) !important;
}

.text-color-mint {
    color: var(--mint-color) !important;
}

.text-color-yellow {
    color: var(--yellow-color) !important;
}

.text-color-blue-grey {
    color: var(--blue-grey-color) !important;
}

/* ~Aesthetic~ */
.hidden {
    display: none !important;
}

.uppercase {
    text-transform: uppercase;
}

.lowecase {
    text-transform: lowercase;
}

.align-right {
    text-align: right !important;
}

.align-center {
    text-align: center !important
}

.align-left {
    text-align: left !important;
}

html, body {
    /* 100vh is the LARGEST possible mobile viewport (address bar
       hidden); with the address bar visible (the common case right
       after a page loads) the real visible area is shorter, so content
       sized to 100vh could extend past what's actually reachable --
       e.g. the EQ-5D-5L intro page's "Suivant" button, pushed to the
       bottom of this box via #content-eq5d5l, ending up just past the
       true bottom of the screen with nothing to scroll it into view
       (this box's own overflow:hidden below rules out page-level
       scroll, and the short intro page doesn't give its own internal
       scroll container (#content-eq5d5l) enough content to make
       scrolling that resolve it either). 100dvh tracks the real,
       current visible viewport instead; identical to 100vh wherever
       there's no dynamic browser toolbar (i.e. everywhere non-mobile). */
    height: 100dvh;
    margin: 0;
    overflow: hidden;
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Sans ca, Android Chrome applique son "text autosizing" (font boosting) sur
       les vrais telephones et gonfle certains blocs de texte (ex. .huge-title) au
       dela de leur taille CSS reelle, alors que l'emulation mobile de Chrome
       DevTools sur desktop ne reproduit pas cette heuristique. */
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* Filet de securite anti-scroll-lateral : une image plus large que son
   conteneur (ou sans largeur definie) est la cause la plus courante de
   defilement horizontal accidentel sur mobile. */
img {
    max-width: 100%;
    height: auto;
}

.page {
    height: 100dvh;
    font-family: var(--font-sans);
    color: var(--dark-teal-color) !important;
}

main {
    height: 100%;
    flex: 1;
}



/* === TOP ROW === */
.page-top-row {
    color: var(--white-color);
    background-color: var(--dark-teal-color);
    justify-content: space-between;
    height: 5rem;
    display: flex;
    align-items: center;
    padding: 0.3em;
}

.top-bar-image-container {
    height: var(--navbar-height);
    width: auto;
    flex-shrink: 0;
}

.top-bar-image {
    width: auto;
    height: 100%;
    object-fit: contain;
}

#selectLangBtn i.fas {
    margin-right: 0.125em !important;
}

.ok-btn {
    background-color: #f0f0f0;
    border: 1px solid #a9a9a9;
    color: #000;
    padding: 4px 30px;
    font-size: 15px;
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.1);
}

.ok-btn:hover {
    background-color: #e4e4e4;
}

.ok-btn:active {
    background-color: #dcdcdc;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.ok-btn:focus {
    outline: 2px solid #a6c8ff;
    outline-offset: 1px;
    }


/* Forms */
.qrentry-container {
    display: flex;
    align-items: center;
    gap: 2em;
    padding: 2em 3em !important;
}

.entry-card {
    min-height: 25rem;
    width: 36rem;
    max-width: 100%;
}


/* Forms */
.register-container {
    display: flex;
    flex-direction: column;
    /* justify-content:center only has room to work because #content is
       fixed below to actually grow to fill #main-div's height -- before
       that, this container always shrink-wrapped to its own content and
       centering silently did nothing, consistently across every auth
       page using it (long content, like the multi-step registration
       wizard, is unaffected: it simply overflows/scrolls as before). */
    justify-content: center;
    min-height: 100%;
    padding: 2em 3em;
}

.entry-card-wrapper {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
    width: 100%;
    margin-top: 2.5rem;
}

.entry-card {
    width: 45%;
    width: 39rem;
    min-height: 25rem;
    display: flex;
    flex-direction: column;
}

    .entry-card h2 {
        font-size: 1.7rem;
        font-weight: normal;
        margin-bottom: 2rem;
    }

.entry-card-text {
    flex: 1;
    font-size: 1rem;
}

    .entry-card-text p {
        margin-bottom: 1rem;
    }

    .entry-card-text-arrows p {
        display: flex;
        align-items: flex-start;
        gap: 0.6em;
    }

    .entry-card-text-arrows p::before {
        content: "\27A4";
        color: var(--green-turquoise-color);
        font-size: 1.1em;
        line-height: inherit;
        flex-shrink: 0;
    }

.entry-card-highlight {
    font-weight: 700;
    padding-top: 1rem;
}

.mobile-card .card.resource-card {
    background-color: var(--light-grey-color);
}

.card-title.resource-title {
    color: var(--turquoise-color);
    padding: 0.5em 0.75em 0.75em 0.75em;
}



#main-div {
    margin-top: calc(var(--navbar-height) + var(--admin-subnav-height)) !important;
    height: calc(100vh - var(--navbar-height) - var(--admin-subnav-height));
    background-color: lightcyan;
    background-image: url('../img/background/bg_hospital_blurred.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
}


#content {
    /* Was "flex: ;" (empty value = invalid, silently dropped), so this
       never grew to fill #main-div's height -- every page's content
       always shrink-wrapped instead of having the full viewport height
       available to center within. */
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 3% 10%;
}

.eq5d-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 2rem;
}


/*-------------CKEDITOR---------*/
.Ckeditor p {
    margin-bottom: 0.2rem;
}


.Ckeditoreq5s5l li {
    margin-left:2rem;
    padding-left:0.8rem;
    margin-bottom: 0.8rem;
}

Ckeditoreq5s5l ul {
    padding-left: unset;
}

/* ------- Layout ------- */
.vas-container {
    width: 200px;
    margin: auto;
    text-align: center;
    font-family: 'Poppins', 'sans-serif', Helvetica, Arial, sans-serif !important;
}

.vas-scale {
    position: relative;
    min-height: 400px;
    height: 100%;
    width: 100px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ------- Scale tick rows ------- */
.vas-tick-row {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    pointer-events: none; /* prevents hover blocking */
}

/* ------- Tick lines ------- */
.vas-tick-short {
    height: 1px;
    width: 12px;
    background-color: black;
}

.vas-tick-long {
    height: 1px;
    width: 28px;
    background-color: black;
    border: 1px solid black;
/*    margin-left: 8px;*/
/*    margin-right: 12px;*/
}

/* numbers aligned on the right */
.vas-tick-label {
    position: absolute;
    left: calc(50% + 40px); /* shift the number column */
    transform: translateY(-50%);
    font-size: 1rem;
    text-align: left;
    pointer-events: none;
}

/* small white line before long ones */
.vas-tick-white {
    height: 1px;
    width: 16px;
    background-color: white;
}

/* ------- Numbers ------- */
.vas-tick-number {
    font-size: 1rem;
}

/* ------- Selected dot ------- */
.vas-selected-dot {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
}

/* ------- Hover arrow ------- */
.vas-hover-arrow {
    position: absolute;
    left: 0;
    transform: translate(-100%, -50%);
    display: flex;
    align-items: center;
    z-index: 3;
}

.vas-hover-value {
    font-size: 1rem;
    margin-right: 4px;
}

.vas-hover-pointer {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid blue;
}



#content-eq5d5l {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 1200px;
    height: 100%;
    margin: auto;

}


.register-image {
    width: 100%;
    height: calc(100%);
    background-color: lightcyan;
    background-image: url('img/background/bg_hospital_blurred.jpg');
    background-size: cover; /* Scales image to cover the element */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling */
}

.register-form {
    color: var(--dark-teal-color);
    background-color: var(--white-color);
    padding: 1.5em 2em;
    border-radius: 1.75em;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
}

.register-form.account-register-form {
    width: 800px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.register-form .account-form {
    width: 100%;
}

.form-title {
    font-weight: bold;
    color: var(--dark-teal-color);
    margin-top: 0.5em;
}

.form-title i {
    margin-right: 0.35em;
}

.form-options {
    margin-top: 2.5em;
}

.form-iframe {
    width: 100%;
    height: 70vh;
    border: none;
}

.form-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    gap: 1rem 2.5rem;
    align-items: start;
}

.form-content-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    row-gap: 1em;
    margin-bottom: 25px;
}

.form-content-row {
    display: flex;
    flex-direction: row;
/*    flex-wrap: wrap;*/
    justify-content: left;
    align-items: center;
    gap: 0.5em;
}

.form-content-row.wrap {
    flex-wrap: wrap;
}

.form-content-row label {
    min-width: fit-content;
}

.form-content-row .form-control {
    flex: 1 1 0;
    min-width: 0;
}

.register-form .form-control {
    border: none;
    border-bottom: 2px solid var(--light-grey-color);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    padding: 0 0.25em;
    color: var(--dark-teal-color);
    transition: all 0.2s ease-out;
}

.register-form .form-control:focus {
    border-bottom-color: var(--light-grey-color); /* Maintain same color on focus */
    outline: none;
    box-shadow: none;
}

.login-form .form-control {
    border: 1px solid var(--light-grey-color);
    border-radius: 0.75em;
    background-color: var(--white-color);
    padding: 0.55em 1em;
}

.login-form .form-control:focus {
    border-color: var(--mint-color);
    box-shadow: 0 0 0 3px var(--mint-color-shadow);
}

.otp-input-group {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.otp-digit {
    width: 3rem;
    height: 3.5rem;
    font-size: 1.75rem;
    text-align: center;
    color: var(--dark-teal-color);
    background-color: var(--white-color);
    border: 1px solid var(--light-grey-color);
    border-radius: 0.75em;
    outline: none;
    transition: all 0.2s ease-out;
}

.otp-digit:focus {
    border-color: var(--mint-color);
    box-shadow: 0 0 0 3px var(--mint-color-shadow);
}

.login-form .form-control.otp-single-input {
    width: 11rem;
    margin: 0 auto;
    letter-spacing: 0.3em;
    font-size: 1.5rem;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
}

.mfa-resend-row {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    padding: 0 1rem;
}

.mfa-resend-btn {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    color: var(--dark-teal-color);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

.mfa-resend-btn:disabled {
    /* Was --light-grey-color (#F2F2F2, near-invisible on the white card) --
       this is the state shown on first load (cooldown just started), so it
       needs to stay clearly readable while still looking disabled. */
    color: var(--water-gray-color);
    text-decoration: none;
    cursor: default;
}

.mfa-resend-message {
    margin-top: 0.5rem;
}

.register-form .form-control.modified.valid {
    outline: none !important;
    border-color: var(--green-color);
}

.register-form .form-control.invalid {
    outline: none !important;
    border-color: var(--red-color);
}

.form-validation-msg {
    width: 100%;
    margin-top: 0.3em;
    font-size: 0.9em;
}

.form-content-section {
    padding: 1em;
    border-radius: 1em;
    border: var(--mint-color) solid 0.15em;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

.form-content-section-emphasis {
    padding: 1.5em;
    border-width: 0.25em;
    background-color: var(--mint-color-shadow);
    font-size: 1.1em;
}


/* === Form Select Component === */
.form-select-component-wrapper {
    position: relative;
    width: 100%;
    font-size: 0.9em;
    color: var(--dark-teal-color);
}

.form-select-component-display {
    padding: 0.25em 1.75em 0 0;
    border-bottom: 2px solid var(--light-grey-color);
    background: transparent;
    cursor: pointer;
    text-align: left;
    position: relative;
}

.form-select-component-display::after {
    content: "▼";
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mint-color);
    font-size: 1em;
}

.form-select-component-options {
    position: absolute;
    width: 100%;
    background: rgba(237, 237, 236, 0.95); /* var(--light-grey-color) */
    border-radius: 0.5em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 40vh;
    margin-top: 0.25em;
    text-align: left;
}

.form-select-component-option {
    padding: 0.6em 1em;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, transparent 0%, var(--dark-teal-color) 20%, var(--dark-teal-color) 80%, transparent 100%) 1;
    cursor: pointer;
    white-space: normal;
    overflow-wrap: anywhere;
}

.form-select-component-option:last-child {
    border-bottom: none;
}

.form-select-component-option:hover {
    background-color: rgba(57, 171, 144, 0.1); /* var(--mint-color) light hover */
}


/* === ToolTip Component === */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.tooltip-icon {
    color: var(--mint-color);
    cursor: help;
    font-size: 1.1em;
    outline: none;
    margin-right: 0.25em;
    vertical-align: text-top;
    position: relative;
    top: -0.1em;
}

.tooltip-bubble {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-51%);
    background: var(--light-grey-color);
    color: var(--dark-teal-color);
    padding: 1em 1.25em;
    border-radius: 0.5em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    width: max-content;
    max-width: min(420px, 90vw);
    font-size: 0.85em;
    white-space: normal;
    margin-top: 0.75em;
}

.tooltip-arrow {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--light-grey-color);
}

.tooltip-content {
    text-align: left;
    line-height: 1.4;
    font-weight: normal;
}

@media (max-width: 400px) {
    .tooltip-bubble {
        max-width: calc(100vw - 2rem);
    }
}


/* === Password show/hide toggle === */
.password-input-wrapper {
    position: relative;
    width: 100%;
}

.password-input-wrapper input {
    padding-right: 2.5rem;
    width: 100%;
}

.form-content-row .password-input-wrapper,
.form-content-row .login-field,
.form-content-row .dob-select-row {
    flex: 1 1 0;
    min-width: 0;
}

/* Day/month/year FormSelect trio (birthdate) instead of a native
   <input type="date">, whose per-segment mouse-wheel scroll is far too
   slow to dial in a birth year. */
.dob-select-row {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
}

.dob-select-row .form-select-component-wrapper:nth-child(1) {
    flex: 0 1 4.5em;
}

.dob-select-row .form-select-component-wrapper:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
}

.dob-select-row .form-select-component-wrapper:nth-child(3) {
    flex: 0 1 6em;
}

/* Disease / family-disease selectors (socio-demo questionnaire): each row
   pairs a main select with a side field that appears once a value is
   picked, side by side on desktop and stacked on mobile. flex-wrap (not
   just the media query below) is what actually makes this responsive: it
   lets fields drop to their own line whenever the row is too narrow to
   fit them all, instead of every field just shrinking to fit (which is
   what "min-width: 0" used to force, squeezing the disease dropdown down
   to a few unreadable pixels wide instead of wrapping). */
.dynamic-select-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.25em;
    margin-bottom: 1em;
}

.dynamic-select-main {
    flex: 1 1 11em;
    min-width: 11em;
}

.dynamic-select-side {
    flex: 1 1 11em;
    min-width: 11em;
}

.dynamic-select-side label {
    display: block;
    font-size: 0.85em;
    color: var(--turquoise-color);
    margin-bottom: 0.3em;
}

.dynamic-select-remove {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--water-gray-color);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25em 0.35em;
}

.dynamic-select-remove:hover {
    color: var(--corail-color);
}

.dynamic-select-other {
    flex: 1 1 100%;
    min-width: 11em;
    margin-top: 0.5em;
}

@media (max-width: 576px) {
    .dynamic-select-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5em;
    }

    .dynamic-select-main,
    .dynamic-select-side {
        min-width: 0;
    }
}

/* For contexts where the input can't be wrapped without breaking existing
   markup (e.g. Bootstrap's .form-floating, which needs input/label as direct
   siblings) — applied directly on the <input>/<InputText> instead. */
.password-toggle-input {
    padding-right: 2.5rem !important;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    color: var(--water-gray-color);
    cursor: pointer;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus {
    color: var(--turquoise-color);
}


/* === Checkbox Component === */
.checkbox-component {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    color: var(--dark-teal-color);
    margin-right: 1em;
    cursor: pointer;
    user-select: none;
}

.checkbox-component input[type="checkbox"] {
    display: none;
}

.checkbox-icon {
    width: 1.5em;
    height: 1.5em;
    border: 2px solid var(--mint-color);
    border-radius: 0.25em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5em;
    font-size: 1em;
/*    color: var(--mint-color);*/
    transition: background 0.2s, color 0.2s;
}

.checkbox-icon i {
    opacity: 0;
    transition: opacity 0.125s ease-in-out;
    font-size: 1.2em;
}

.checkbox-component input[type="checkbox"]:checked + .checkbox-icon i {
    opacity: 1;
}



/* ##### FLEX ##### */
.flex {
    display: flex;
    flex-direction: row;
    align-content: center;
    flex-wrap: wrap;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex p {
    vertical-align: middle;
}

.flex-c {
    display: flex;
    flex-direction: row;
    justify-content: center;
}


/* === Tables === */
/* Bootstrap's .table sets vertical-align: top on cells; center it instead */
.table td,
.table th {
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05) !important;
    box-shadow: none !important;
}

/* === Modals === */
.logout-confirm-backdrop {
    background-color: rgba(6, 79, 99, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2100;
}

/* Bootstrap's .modal-footer a flex-wrap:wrap par defaut : sur un modal etroit
   ca faisait passer les 2 boutons l'un sous l'autre au lieu de cote a cote. */
.logout-confirm-backdrop .modal-footer {
    flex-wrap: nowrap;
}

.logout-confirm-content {
    padding: 0.5rem;
}

.logout-confirm-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--corail-color-shadow);
    color: var(--corail-color);
    font-size: 1.25rem;
}

.logout-confirm-text {
    font-size: 1.05rem;
    color: var(--turquoise-color);
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .logout-confirm-backdrop .modal-dialog {
        margin: 0 1rem;
    }
}

.btn-greent {
    background-color: #319782 !important; 
    color: white !important;
    border: none !important;
    border-radius: 0px !important; 
}

/* === Buttons === */
.btn {
    cursor: pointer;
    width: 100%;
    min-width: 8em;
    border-radius: 0.75rem !important;
    transition: 0.2s all ease-out !important;
    max-width: 20rem !important;
    align-self: center;
}

.btn:disabled {
    opacity: .65;
    cursor: default;
}

/* Sizes */
.btn-full {
    width: 100%;
}

.btn.fit,
.btn-fit,
.btn-sm {
    width: fit-content;
    min-width: fit-content;
}

.btn-big {
    font-size: 1.25rem;
}

.btn-bigger {
    font-size: 1.5rem;
}

.btn-biggerer {
    font-size: 1.75rem;
}

.btn-huge {
    font-size: 2rem;
}

/* Icons */
.btn i.fas {
    margin-right: 0.5rem;
}

#langicon {
    margin-right: 0.1rem;
}

.btn-icon {
    min-width: fit-content;
}

.btn-icon i.fas {
    margin-right: 0 !important;
    min-width: 1.25rem;
}

/* Colors */
.btn-greent {
    background-color: var(--green-turquoise-color) !important;
    border-color: var(--mint-color) !important;
    color: white !important;
}

.btn-greent {
    background-color: var(--mint-color) !important;
    border-color: var(--mint-color) !important;
    color: white;
}

.btn-greent:hover {
    background-color: var(--mint-color-shade) !important;
    border-color: var(--mint-color-shade) !important;
    color: white;
}

.btn-greent:focus,
.btn-outline-mint:focus {
    box-shadow: 0 0 0 0.2rem var(--mint-color-shadow) !important;
}

.btn-outline-mint {
    background-color: transparent !important;
    border-color: var(--mint-color) !important;
    color: var(--mint-color);
}

.btn-outline-mint:hover {
    background-color: var(--light-grey-color-shadow) !important;
    border-color: var(--mint-color-shade) !important;
    color: var(--mint-color);
}

.btn-transparent-mint,
.btn-transparent-mint:hover {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--mint-color);
}

.btn-corail {
    background-color: var(--corail-color) !important;
    border-color: var(--corail-color) !important;
    color: white !important;
}

.btn-corail:hover {
    background-color: #e64545 !important;
    border-color: #e64545 !important;
    color: white !important;
}

.btn-corail:focus {
    box-shadow: 0 0 0 0.2rem var(--corail-color-shadow) !important;
}

.btn-transparent-mint:focus {
    box-shadow: 0 0 0 0.2rem var(--mint-color) !important;
}

.btn-transparent-white,
.btn-transparent-white:hover {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--white-color);
}

.btn-transparent-white:focus {
    box-shadow: 0 0 0 0.2rem var(--white-color) !important;
}

.btn-teal {
    background-color: var(--turquoise-color) !important;
    border-color: var(--turquoise-color) !important;
    color: white !important;
}

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

.btn-teal:focus {
    box-shadow: 0 0 0 0.2rem var(--dark-teal-color-shadow) !important;
}

/* Button bar */
[class*="btn-bar"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.btn-bar-c {
    justify-content: center;
    align-items: center;
}

.btnBar-r {
    justify-content: flex-end;
}


/* === LOGIN === */
.huge-title {
    font-size: 4em;
    font-weight: bold;
    text-align: center;
    color: var(--dark-teal-color);
    margin-bottom: 3rem;
    overflow-wrap: anywhere;
}

.large-title {
    font-size: 4em;
    font-weight: bold;
    text-align: center;
    color: var(--dark-teal-color);
    margin-bottom: 0.5em;
    overflow-wrap: anywhere;
    margin-bottom: 1rem;
}


.login-form {
    max-width: 85%;
    min-width: 60%;
    margin-inline: auto;
}

.login-form-wide {
    width: min(60vw, 900px);
    max-width: 1100px;
    padding: 3em 4em;
}

.login-form-wide .login-title {
    font-size: 1.75em;
}

.login-form-wide label {
    font-size: 1.25em;
}

.login-form-wide .form-control {
    font-size: 1.25em;
    padding: 0.4em 0.25em;
}

.login-form-wide #submitBtn {
    font-size: 1.5rem;
    padding: 0.6em 2.5em;
    border-radius: 0.75em;
}

.login-form-wide .login-link,
.login-form-wide .flex-c {
    font-size: 1.15em;
}

.login-title {
    color: var(--dark-teal-color);
    padding: 0.5em;
}

.login-link {
    color: var(--dark-teal-color);
    font-size: 0.9em;
    transition: 0.2s all ease-out;
}

.login-link:hover {
    color: var(--mint-color);
}

.login-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    width: fit-content;
    margin: 0 auto 1.25rem;
    padding: 0.4em 1em;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(2, 80, 100, 0.12);
    border-radius: 999px;
    color: var(--dark-teal-color);
    font-size: 0.85rem;
    font-weight: 600;
}

.login-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mint-color);
    flex-shrink: 0;
}

.login-subtitle {
    max-width: 30rem;
    margin: -2rem auto 2rem;
    color: var(--turquoise-color);
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

.login-card-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    margin-bottom: 1.5rem;
}

.login-mark {
    height: 1.75rem;
}

.login-field-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--turquoise-color);
    margin-bottom: 0.4em;
}

.login-field {
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.login-field-icon {
    flex-shrink: 0;
    color: var(--water-gray-color);
}

.login-field .form-control {
    flex: 1 1 0;
    min-width: 0;
}

.login-forgot-row {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 1.25rem;
    text-align: center;
    align-items: center;

}

.login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

.login-trust-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin-top: 1.5rem;
    color: var(--dark-teal-color);
    font-size: 0.8rem;
}

/* Field icon for Bootstrap's .form-floating (Gerer le compte pages).
   Added as an extra sibling of the input/label rather than a wrapper,
   since the floating-label CSS needs input+label to stay direct
   siblings of .form-floating. */
.form-floating-icon-group .form-control,
.form-floating-icon-group .form-label {
    padding-left: 2.5rem;
}

/* Bootstrap gives disabled/readonly inputs a light grey fill
   (.form-control:disabled) -- that made the email field (disabled)
   look like a filled pill while the phone number field (editable) in
   the same group stayed plain. Removed so both match the phone
   number's plain look. */
.form-floating-icon-group .form-control:disabled,
.form-floating-icon-group .form-control[readonly] {
    background-color: #fff;
}

/* The DevExpress/Bootstrap floating-label theme also gives a disabled
   field's *label* its own small grey chip behind the text
   (.form-floating>.form-control:disabled~label::after), separate from
   the field's own background above. Same reasoning: match the enabled
   phone number field's label, which has no chip. */
.form-floating-icon-group .form-control:disabled ~ label::after,
.form-floating-icon-group .form-control[readonly] ~ label::after {
    background-color: var(--bs-body-bg, #fff);
}

.form-floating-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--water-gray-color);
    pointer-events: none;
    z-index: 5;
}

/* Sociodemographic questionnaire: questions had no space between the
   label and the field right under it (plain <label>, no bottom margin
   by default). */
.sociodemo-form label {
    display: block;
    margin-bottom: 0.6rem;
}

.sociodemo-form .mb-3 {
    margin-bottom: 1.75rem !important;
}

/* Registration forms (#registerPati: RegisterPatient/RegisterPatientQr,
   #registerClin: RegisterClinician/RegisterClinicManager): questions
   were packed tight against each other and their fields. */
#registerPati .form-content-col,
#registerClin .form-content-col {
    row-gap: 1.75em;
}


html, body{
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}



.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Le contour bleu par defaut de .btn:focus jure sur le fond fonce de la
   navbar (cloche, globe, burger) : on le remplace par un liseré blanc plus
   discret, coherent avec les icones blanches deja presentes dans la navbar. */
#NavBar .btn:focus {
  box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.7);
}


/* === Page === */
main article.page-content {
    padding: 0 !important;
}

.page-content {
    height: calc(100% - 5rem);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--red-color);
}

.validation-message {
    color: var(--red-color);
}

body .text-danger {
    color: var(--red-color) !important;
}

body .alert-danger {
    color: var(--corail-color) !important;
    background-color: var(--corail-color-shadow) !important;
    border-color: var(--corail-color) !important;
    border-radius: 0.75rem;
    width: fit-content;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}


#adminMenu {
    position: absolute;
    right: 1rem;
    top: calc(100%);
    min-width: 230px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    list-style: none;
    padding: 8px 0;
    margin: 0;
    transform-origin: top right;
    transform: scale(0.92) translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.77, 0.2, 0.05, 1),
                opacity 0.25s ease;
    z-index: 1100;
}

#adminMenuToggle:has(input:checked) #adminMenu {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

#adminMenu li {
    padding: 0;
}

.admin-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 10px 18px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--turquoise-color);
    text-align: left;
    transition: all 0.15s ease;
    font-family: var(--font-sans);
    min-width: unset;
    border-radius: 0;
}

.admin-menu-item:hover {
    background: var(--sky-blue-color);
}

.admin-menu-item.mint:hover {
    background: var(--mint-color-shadow);
}

.admin-menu-item.red:hover {
    background: var(--corail-color-shadow);
}

/* === Admin Sub-Navbar Tabs === */
.sub-navbar {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    width: 100%;
    height: var(--admin-subnav-height);
    display: flex;
    flex-direction: row;
    z-index: 1020;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.admin-tab-btn {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    color: white;
    cursor: pointer;
    padding: 0.5rem 1.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 0;
    transition: filter 0.15s ease, transform 0.1s ease;
}

.admin-tab-btn:last-child {
    border-right: none;
}

.admin-tab-btn:hover {
    filter: brightness(1.18);
}

.admin-tab-btn:active {
    filter: brightness(0.88);
    transform: scale(0.99);
}

.admin-tab-btn span {
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.admin-tab-icon {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
    flex-shrink: 0;
    /* The icons are now colored #064F63 (charte turquoise) directly in the SVG
       files. This used to be forced via a filter() recolor hack tuned to
       approximate that hex from a black source -- but the recipe actually
       rendered rgb(11,47,83), a visibly navy-blue shade, not the charte
       teal. Coloring the SVGs themselves is exact and removes that drift. */
}

.mobile-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--turquoise-color);
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 10px;
    z-index: 2000;
}

.mobile-item {
    color: white;
    padding: 8px;
    text-align: left;
    background: none;
    border: none;
}
.burger-menu {
    display: none !important;
}
.mobile-menu {
    display: none !important;
}

.mobile-menu button:hover {
    background-color: var(--green-turquoise-color)
}
.mobile-item{
    text-align: center;
}


.lori-dash-grid{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem;
    width: 100%;
    max-width: 2100px;
}

.lori-dash-grid--span2{
    grid-column: span 2;

}

.lori-dash-grid--span3 {
    grid-column: span 3;
}

.survey-bar {
    display: flex;
    width: 100%;
    height: 32px;
    overflow: visible;
    border-radius: 8px;
}

.survey-segment {
    height: 100%;
    cursor: pointer;
}

/* Matches the hover hatching the DevExpress donut chart (PieChartCircleComponent)
   gets for free -- this bar is plain HTML/CSS, not a DevExpress chart, so it
   needs the same diagonal-stripe overlay added by hand. */
.survey-segment::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.35) 0,
        rgba(255, 255, 255, 0.35) 4px,
        transparent 4px,
        transparent 8px
    );
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
}

.survey-segment:hover::before {
    opacity: 1;
}

.survey-legend-color {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Center the legend columns; size them to the tile rather than the viewport. */
.survey-legend-container {
    container-type: inline-size;
    container-name: survey-legend;
}
.survey-legend-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 45%));
    justify-content: center;
    grid-auto-flow: row;
    column-gap: 0.75rem;
    max-height: 9rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.4rem;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.survey-legend-list:hover {
    scrollbar-color: var(--turquoise-color) transparent;
}

/* PercetageBarChart only -- offsets the legend to start under the
   chart's plot area (past the Y-axis's rotated title + tick labels)
   instead of the tile's left edge, so the swatches line up with the
   bars above them. Approximate: DevExpress computes that axis's actual
   reserved width itself, this isn't read from it -- first attempt
   (2.75rem) was too small against a real render, widened. */
.chart-legend-y-aligned {
    padding-left: 6rem;
}

.survey-legend-list::-webkit-scrollbar {
    width: 6px;
}

.survey-legend-list::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 3px;
}

.survey-legend-list:hover::-webkit-scrollbar-thumb {
    background-color: var(--turquoise-color);
}

.survey-legend-item {
    min-width: 0;
    flex-shrink: 0;
    margin-bottom: 0.4rem;
}

/* Same truncation as the DevExpress donut legend (.dxbl-chart-legend-text
   in dash.css) -- the title attribute on this span gives the browser's own
   tooltip (dark background, white text) with the full label. */
.survey-legend-label {
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}



.survey-segment:hover .survey-tooltip {
    opacity: 1;
    visibility: visible;
}

.survey-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    padding: .75rem;
    background: white;
    border: 1px solid #cfd8dc;
    border-radius: .25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
    z-index: 1000;
    color: #212529;
}

.survey-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

#NavBar {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    z-index: 1030;
    height: var(--navbar-height);
    background-color: var(--turquoise-color);
}
.admin-tab-icon {
    width: 1.1rem;
    height: 1.1rem;
    object-fit: contain;
}

.full-width-btn {
    width: 100% !important;
    max-width: none !important;
}

.app-logo-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.app-logo-sm {
    display: block;
    height: auto;
    max-width: 160px;
}


/*----------------------------------MOBILE*/
@media (max-width: 768px) {
    #content {
        padding: 2% 3%;
    }
    nav.d-flex {
        display: none !important;
    }
    [class*="btn-bar"] {
        gap: 0.3rem;
    }


    .burger-menu {
        display: block !important;
    }
    .mobile-menu {
        display: flex !important;
    }
    .btn-mobile-menu {
        display: block;
    }

}

.btn.btn-cancel,
.btn.btn-save {
    width: 220px;
    min-height: 3.1rem;
    font-size: 1rem;
}

/* AppNotification.razor -- brand-colored modal popup replacing raw
   Bootstrap alert-success/alert-danger/alert-warning banners, used outside
   Account/Identity pages (which keep their own cookie-based
   StatusMessage.razor). Modeled on the .logout-confirm-* modal already in
   this file, for visual consistency between the app's two modal styles. */
.app-notification-backdrop {
    background-color: rgba(6, 79, 99, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2100;
    /* StatusMessage.razor uses an <a> (not a <div>) for this class, since its
       Account/Identity pages are static-rendered and can't wire up an
       @onclick dismiss handler -- text-decoration:none keeps its message
       text from inheriting the link underline; harmless on the <div>
       AppNotification itself normally renders here. */
    text-decoration: none;
}

.app-notification-content {
    padding: 0.5rem;
    border-top: 5px solid transparent;
}

.app-notification-success {
    border-top-color: var(--mint-color);
}

.app-notification-error {
    border-top-color: var(--corail-color);
}

.app-notification-warning {
    border-top-color: var(--yellow-color);
}

.app-notification-info {
    border-top-color: var(--turquoise-color);
}

.app-notification-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    font-size: 1.25rem;
}

.app-notification-success .app-notification-icon-badge {
    background: var(--mint-color-shadow);
    color: var(--mint-color);
}

.app-notification-error .app-notification-icon-badge {
    background: var(--corail-color-shadow);
    color: var(--corail-color);
}

.app-notification-warning .app-notification-icon-badge {
    background: rgba(255, 198, 17, 0.16);
    color: var(--yellow-color);
}

.app-notification-info .app-notification-icon-badge {
    background: var(--sky-blue-color);
    color: var(--turquoise-color);
}

.app-notification-text {
    font-size: 1.05rem;
    color: var(--turquoise-color);
    margin-bottom: 0;
    /* Lets a multi-line message keep its line breaks instead of collapsing
       to a single run of text. */
    white-space: pre-line;
}

/* Used instead of stuffing every item into .app-notification-text as one
   "\n"-joined string (e.g. every unanswered required question at once) --
   real <li> markup wraps and spaces properly instead of running off the
   edge of the modal, and long lists scroll instead of overflowing it. */
.app-notification-list {
    list-style: disc;
    text-align: left;
    margin: 0.75rem 0 0;
    padding: 0 0 0 1.25rem;
    max-height: 45vh;
    overflow-y: auto;
    color: var(--turquoise-color);
    font-size: 0.95rem;
}

.app-notification-list li {
    margin-bottom: 0.5rem;
}

.app-notification-dialog-wide {
    max-width: 32rem;
}

@media (max-width: 480px) {
    .app-notification-backdrop .modal-dialog {
        margin: 0 1rem;
    }
}


/* Custom circuit-reconnect UI (see the #components-reconnect-modal markup
   in App.razor) -- blazor.web.js finds this element by id and only
   toggles components-reconnect-* classes on it, instead of building its
   own generic "Rejoining the server..." overlay. Visually matches
   AppNotification/.logout-confirm-* so a dropped connection reads as a
   Lori screen, not an unrelated system dialog. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    background-color: rgba(6, 79, 99, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2200;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-resume-failed {
    display: flex;
}

#components-reconnect-modal .reconnect-dialog {
    background: var(--white-color);
    border-radius: 1.75em;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    max-width: 22rem;
    width: 90%;
    text-align: center;
}

#components-reconnect-modal .reconnect-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--sky-blue-color);
    color: var(--turquoise-color);
    font-size: 1.25rem;
}

/* FontAwesome mutes .fa-spin to a 1ms no-op under prefers-reduced-motion,
   which silently kills this icon's only visual cue that a reconnect is in
   progress -- unlike decorative motion, this is status information, so it
   stays animated even with that OS/browser preference on. */
#components-reconnect-modal .reconnect-icon-badge i {
    animation: fa-spin 2s infinite linear !important;
}

/* Every state's text/buttons are in the DOM at once (the framework only
   toggles classes on the root element, it doesn't touch descendants) --
   hide everything by default and reveal only what matches the current
   components-reconnect-* class. */
#components-reconnect-modal p[data-state] {
    font-size: 1.05rem;
    color: var(--turquoise-color);
    margin-bottom: 0;
    display: none;
}

#components-reconnect-modal.components-reconnect-show p[data-state="default"] {
    display: block;
}

/* blazor.web.js keeps "components-reconnect-show" on the root alongside a
   more specific state class (e.g. "...-retrying" once a retry count is
   available) rather than swapping one for the other, so without this the
   "default" and "retrying" paragraphs were both matching and showing at
   once -- this wins on specificity (two classes) and hides "default"
   whenever a more specific state is also present. */
#components-reconnect-modal.components-reconnect-show.components-reconnect-retrying p[data-state="default"],
#components-reconnect-modal.components-reconnect-show.components-reconnect-failed p[data-state="default"],
#components-reconnect-modal.components-reconnect-show.components-reconnect-rejected p[data-state="default"],
#components-reconnect-modal.components-reconnect-show.components-reconnect-paused p[data-state="default"],
#components-reconnect-modal.components-reconnect-show.components-reconnect-resume-failed p[data-state="default"] {
    display: none;
}

#components-reconnect-modal.components-reconnect-retrying p[data-state="retrying"] {
    display: block;
}

#components-reconnect-modal.components-reconnect-failed p[data-state="failed"] {
    display: block;
}

#components-reconnect-modal.components-reconnect-rejected p[data-state="rejected"] {
    display: block;
}

#components-reconnect-modal.components-reconnect-paused p[data-state="paused"] {
    display: block;
}

#components-reconnect-modal.components-reconnect-resume-failed p[data-state="resume-failed"] {
    display: block;
}

#components-reconnect-modal .reconnect-btn {
    display: none;
    margin-top: 1.25rem;
    width: auto;
    min-width: 130px;
    max-width: 230px !important;
    min-height: 3.1rem;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-retry-btn,
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-retry-btn {
    display: inline-block;
}

#components-reconnect-modal.components-reconnect-rejected .reconnect-reload-btn,
#components-reconnect-modal.components-reconnect-paused .reconnect-reload-btn {
    display: inline-block;
}

/* Flags a specific question left unanswered after a failed Save/Next
   attempt, so the user can see exactly where without re-reading the
   notification against every block on the page. Cleared as soon as that
   question gets an answer (see HandleAnswerChanged). */
.question-missing {
    border-color: var(--corail-color) !important;
    background-color: #fff5f5 !important;
    box-shadow: 0 0 0 1px var(--corail-color);
}

/* Phrase d'introduction du socio-demo : style d'origine (label), mais
   separee de la question 1 par un espace. */
.sociodemo-intro {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
}

/* Les questions socio-demo n'ont pas de cadre a la base : on en ajoute un
   seulement quand la question est manquante. */
.sociodemo-question-missing {
    border: 1px solid var(--corail-color);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

/* The spinning icon only makes sense while actively retrying -- hide it
   once we've settled into a terminal state that needs user action. */
#components-reconnect-modal.components-reconnect-failed .reconnect-icon-badge,
#components-reconnect-modal.components-reconnect-rejected .reconnect-icon-badge,
#components-reconnect-modal.components-reconnect-paused .reconnect-icon-badge,
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-icon-badge {
    display: none;
}


/* .app-table -- consistent header/cell styling for the hand-rolled
   Bootstrap <table>s across Admin pages (each currently styles its own
   alignment/header ad hoc). Applied as an additional class alongside the
   existing "table ", not a replacement. */

/* Neutralizes the zebra striping (alternating white/grey rows) without
   needing to remove "" from every markup file. There's a
   pre-existing global rule (. > tbody > tr:nth-of-type(odd),
   further down this file) that forces the grey via background-color
   !important -- overriding the Bootstrap CSS variable alone doesn't
   beat that, so this matches the same selector/specificity to win. */
.app-table. > tbody > tr:nth-of-type(odd),
.app-table > tbody > tr:nth-of-type(odd) {
    background-color: var(--white-color) !important;
}

.app-table thead th {
    color: var(--turquoise-color);
    font-weight: 700;
    border-bottom: 2px solid var(--light-grey-color);
}

.app-table td,
.app-table th {
    text-align: center;
    vertical-align: middle;
}

.app-table td:first-child,
.app-table th:first-child {
    text-align: left;
}

/* .form-action-buttons is display:flex, so the table's own text-align:center
   has no effect on it (that only centers inline content) -- without this,
   the action buttons hug the left edge of their (wide, auto-sized) cell
   instead of sitting under the "Actions" header. */
.app-table .form-action-buttons {
    justify-content: center;
}


/* Generic Oui/Non confirmation modal (Confirm.razor) -- same treatment as
   .logout-confirm-*, kept separate since it's used for actions other than
   logout (e.g. locking a form). */
.confirm-backdrop {
    background-color: rgba(6, 79, 99, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2100;
}

.confirm-backdrop .modal-footer {
    flex-wrap: nowrap;
}

.confirm-content {
    padding: 0.5rem;
}

.confirm-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--corail-color-shadow);
    color: var(--corail-color);
    font-size: 1.25rem;
}

.confirm-text {
    font-size: 1.05rem;
    color: var(--turquoise-color);
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .confirm-backdrop .modal-dialog {
        margin: 0 1rem;
    }
}

/* Native file pickers render as the browser's grey system button; restyle the
   button part to match the app's buttons (the filename text stays native). */
input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 0.75rem;
    background-color: #319782;
    color: white;
    cursor: pointer;
    transition: 0.2s all ease-out;
}

input[type="file"]::file-selector-button:hover {
    background-color: var(--mint-color-shade);
}

/* The VAS scale's ticks/labels are absolutely positioned at fixed pixel
   offsets from .vas-scale's center (not percentages), so they don't shrink
   with a narrower container -- on a phone the 200px-wide .vas-container
   overflowed its w-25 column and got clipped by the viewport edge insteadof
   shrinking. zoom (unlike transform:scale) shrinks the box's actual layout
   footprint too, so the ticks scale down together with it and the column
   stays side-by-side with the question text instead of one falling below
   the other. */
@media (max-width: 480px) {
    .vas-container {
        zoom: 0.4;
    }
}

@media (min-width: 481px) and (max-width: 700px) {
    .vas-container {
        zoom: 0.55;
    }
}

@media (min-width: 701px) and (max-width: 900px) {
    .vas-container {
        zoom: 0.75;
    }
}

@container survey-legend (min-width: 700px) {
    .survey-legend-list {
        grid-template-columns: repeat(3, minmax(0, 32%));
    }
}
@container survey-legend (max-width: 419px) {
    .survey-legend-list {
        grid-template-columns: minmax(0, 95%);
    }
}

/* Family-history cards use their own layout instead of global form rows. */
.family-history-selector .family-disease-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    margin: .75rem 0;
    height: auto;
}
.family-disease-field, .family-relationships-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.family-history-selector .family-relationship-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
}
.family-relationship-select {
    flex: 1 1 12rem;
    min-width: 0;
}
.family-history-selector .form-action-buttons {
    flex: 0 0 auto;
    margin: 0;
}
.family-history-selector .family-disease-card label {
    position: static;
    margin: 0;
}
@media (max-width: 767.98px) {
    .family-history-selector .family-disease-card {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Personal chronic diseases: compact cards, including vertically stacked fields. */
.chronic-disease-selector .dynamic-select-row {
    gap: .5rem;
}
.chronic-disease-selector .form-action-buttons {
    margin: 0;
}
.chronic-disease-selector .dynamic-select-other {
    margin-top: 0;
}
@media (max-width: 576px) {
    .chronic-disease-selector .dynamic-select-main,
    .chronic-disease-selector .dynamic-select-side,
    .chronic-disease-selector .dynamic-select-other {
        flex: 0 0 auto;
        min-width: 0;
        width: 100%;
    }
    .chronic-disease-selector .dynamic-select-side label {
        position: static;
        margin: 0 0 .25rem;
    }
    .chronic-disease-selector .form-action-buttons {
        align-self: flex-end;
        width: auto;
    }
}

/* Shared presentation for personal and family chronic-disease cards. */
.chronic-disease-selector .sociodemo-disease-card,
.family-history-selector .sociodemo-disease-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: .5rem;
    padding: .5rem;
    margin: 0 0 .5rem;
}
.sociodemo-disease-card > .dynamic-select-main,
.sociodemo-disease-card > .dynamic-select-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.sociodemo-disease-card label {
    position: static;
    margin: 0;
}
.sociodemo-disease-card > .dynamic-select-other,
.sociodemo-disease-card > .disease-card-actions {
    grid-column: 1 / -1;
    min-width: 0;
}
.chronic-disease-selector .disease-card-actions,
.family-history-selector .disease-card-actions {
    width: 100%;
    margin: 0;
}
@media (max-width: 767.98px) {
    .chronic-disease-selector .sociodemo-disease-card,
    .family-history-selector .sociodemo-disease-card {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Separate the standalone None selector from the add-disease action. */
.chronic-disease-selector > .form-action-buttons {
    margin-top: .75rem;
}

@media (max-width: 767.98px) {
    /* Keep the disease and its Other input together before family links. */
    .family-history-selector .family-disease-field {
        grid-row: 1;
    }
    .family-history-selector .family-relationships-field {
        grid-row: 2;
    }
    .family-history-selector .disease-card-actions {
        grid-row: 3;
    }
}

/* Personal disease label matches its medication question. */
.chronic-disease-selector .dynamic-select-main > label {
    font-size: 0.85em;
}