/* =============================================================================
   Clinica Sante patient-portal theme.
   Brand-aligns Bootstrap 5.3.3 WITHOUT a Sass build by overriding its CSS custom
   properties (upgrade-safe) plus a small set of branded component classes. The lone
   !important (on .text-primary) is required to beat Bootstrap's same-named utility.
   MUST be loaded AFTER bootstrap.min.css and site.css so it wins the cascade.
   Palette derived from images/logo-sante.png: orange primary + green accent.
   ============================================================================= */

:root {
    /* Brand tokens */
    --clinica-primary: #ee7723;
    --clinica-primary-dark: #c75e12;
    --clinica-primary-rgb: 238, 119, 35;
    --clinica-accent: #5fa52a;
    --clinica-accent-dark: #4d8a22;
    --clinica-accent-rgb: 95, 165, 42;
    /* Document-green for the buletin side of the login: labels, step badges and the solid
       submit fill. Deeper than --clinica-accent so white text on it clears WCAG AA
       (~5.1:1, where the lighter brand green reaches only ~3.0:1). Reserved for the
       buletin identity — portal chrome keeps --clinica-accent above. */
    --clinica-accent-strong: #2e7d32;
    --clinica-accent-strong-dark: #1b5e20;
    --clinica-accent-strong-rgb: 46, 125, 50;
    --clinica-surface: #ffffff;
    --clinica-page-bg: #f5f7f6;

    /* Bootstrap overrides (consumed at runtime across components) */
    --bs-primary: var(--clinica-primary);
    --bs-primary-rgb: var(--clinica-primary-rgb);
    --bs-link-color: var(--clinica-primary-dark);
    --bs-link-color-rgb: 199, 94, 18;
    --bs-link-hover-color: #a44d0e;
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;
    --bs-body-bg: var(--clinica-page-bg);
    --bs-body-color: #1f2a24;
    --bs-secondary-color: #5d6b63;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Bootstrap computes .btn-* colors from compiled Sass, not --bs-primary at runtime,
   so rebrand via the --bs-btn-* component variables that .btn DOES read at runtime. */
.btn-primary {
    --bs-btn-bg: var(--clinica-primary);
    --bs-btn-border-color: var(--clinica-primary);
    --bs-btn-hover-bg: var(--clinica-primary-dark);
    --bs-btn-hover-border-color: var(--clinica-primary-dark);
    --bs-btn-active-bg: var(--clinica-primary-dark);
    --bs-btn-active-border-color: var(--clinica-primary-dark);
    --bs-btn-disabled-bg: var(--clinica-primary);
    --bs-btn-disabled-border-color: var(--clinica-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--clinica-primary-dark);
    --bs-btn-border-color: var(--clinica-primary);
    --bs-btn-hover-bg: var(--clinica-primary);
    --bs-btn-hover-border-color: var(--clinica-primary);
    --bs-btn-active-bg: var(--clinica-primary-dark);
    --bs-btn-active-border-color: var(--clinica-primary-dark);
}

.text-primary { color: var(--clinica-primary-dark) !important; }

/* ---- Layout shell + cards ---------------------------------------------------- */
.clinica-shell { max-width: 56rem; margin-inline: auto; }
#documente-page.clinica-shell { max-width: 72rem; }

.clinica-card {
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}

/* ---- Document card (stacked list under lg: phone + tablet) -------------------- */
.doc-card { margin-bottom: .75rem; }
.doc-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .25rem;
}
.doc-card__head .doc-card__meta { margin-bottom: 0; }
.doc-card__date { color: var(--bs-body-color); font-size: .95rem; font-weight: 700; }
/* Label + value meta lines (Punct de recoltare / Cod). Long point names wrap cleanly. */
.doc-card__meta { font-size: .85rem; margin-bottom: .25rem; overflow-wrap: anywhere; }
.doc-card__meta-label { color: var(--bs-secondary-color); }
.doc-card .btn { min-height: 2.75rem; }
.doc-card .clinica-doc-actions { margin-top: .75rem; }

/* Tablet (>= md, < lg): two cards per row so a wide screen isn't one stretched column;
   phone (< md) stays single-column. At >= lg the table takes over (Bootstrap .d-lg-none
   hides #results-cards). A pinned (document-login) card spans the full width so its
   emphasis isn't halved. */
@media (min-width: 48rem) and (max-width: 61.98rem) {
    #results-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .75rem;
    }
    #results-cards .doc-card { margin-bottom: 0; }
    /* Equal-height cards per row: each card stretches to its row's height and its body is a
       flex column with the action pinned to the bottom (margin-top:auto), so a longer
       recoltation point in one card never leaves its neighbour ragged — the action groups
       line up. The full-width pinned card is alone on its row, so it's unaffected. */
    #results-cards .doc-card .card-body { display: flex; flex-direction: column; }
    #results-cards .doc-card .clinica-doc-actions { margin-top: auto; padding-top: .75rem; }
    #results-cards .doc-card.clinica-doc-highlight { grid-column: 1 / -1; }
}

/* ---- Unknown recoltation point placeholder ----------------------------------- */
/* Muted + italic so "Nespecificat" reads as an absent value, visually distinct from a
   real recoltation-point name, in both the desktop table and the mobile cards. */
.clinica-point-unknown { color: var(--bs-secondary-color); font-style: italic; }

/* ---- Touch-friendly controls on small screens ------------------------------- */
@media (max-width: 47.98rem) {
    .clinica-touch .form-control,
    .clinica-touch .form-select,
    .clinica-touch .btn { min-height: 2.75rem; }
}

/* ---- Document-guided patient login ------------------------------------------- */
.clinica-login-shell {
    width: 100%;
    max-width: 56rem;
    min-width: 0;
}

/* Per-document accent, inherited by both tabs and overridden on the buletin one below:
   cerere = orange primary, buletin = green accent. Same single-variable idea as the
   sheet tokens further down, so a tab and its pane can never disagree on colour. */
#login-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    padding: .4rem;
    background: #f3f6f4;
    border: 1px solid #d6ddd8;
    border-radius: .7rem;

    --clinica-tab-accent-rgb: var(--clinica-primary-rgb);
    --clinica-tab-ink: var(--clinica-primary-dark);
    --clinica-tab-ink-strong: #8d3f08;
    --clinica-tab-hover-bg: #fff8f2;
    --clinica-tab-active-bg: #fff1e7;
}

#login-tabs .clinica-login-tab--buletin {
    --clinica-tab-accent-rgb: var(--clinica-accent-strong-rgb);
    --clinica-tab-ink: var(--clinica-accent-strong);
    --clinica-tab-ink-strong: var(--clinica-accent-strong-dark);
    --clinica-tab-hover-bg: #f1f8f2;
    --clinica-tab-active-bg: #e8f3e9;
}

#login-tabs .nav-item { min-width: 0; }

#login-tabs .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    width: 100%;
    min-height: 4rem;
    padding: .55rem .35rem;
    /* Per-tab ink in every state. This was a single green for both tabs, which left the
       cerere label green whenever it was neither hovered nor active (idle and plain
       :focus), contradicting its orange accent. */
    color: var(--clinica-tab-ink);
    background: #fff;
    border: 1px solid #bdc9c1;
    border-radius: .48rem;
    box-shadow: 0 1px 2px rgba(31, 42, 36, .05);
    font-size: clamp(.76rem, .7rem + .3vw, .9rem);
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

#login-tabs .nav-link i {
    font-size: 1.1rem;
    line-height: 1;
}

#login-tabs .nav-link:not(.active):hover {
    color: var(--clinica-tab-ink-strong);
    background: var(--clinica-tab-hover-bg);
    border-color: rgba(var(--clinica-tab-accent-rgb), .72);
}

#login-tabs .nav-link.active {
    color: var(--clinica-tab-ink-strong);
    background: var(--clinica-tab-active-bg);
    border-color: rgba(var(--clinica-tab-accent-rgb), .82);
    box-shadow: 0 2px 5px rgba(var(--clinica-tab-accent-rgb), .14);
}

#login-tabs .nav-link:focus-visible {
    outline: 3px solid rgba(var(--clinica-tab-accent-rgb), .42);
    outline-offset: 2px;
}

/* One accent trio per login pane. Everything tinted inside a sheet — step badges, the
   submit button, the password toggle, input focus — reads these instead of the brand
   tokens directly, so a single modifier class recolours the whole form. */
.clinica-login-sheet {
    min-width: 0;
    overflow: hidden;
    background: var(--clinica-surface);
    border: 1px solid rgba(var(--clinica-accent-rgb), .25);
    border-radius: .65rem;
    box-shadow: 0 2px 8px rgba(31, 42, 36, .06);

    --clinica-sheet-accent: var(--clinica-primary);
    --clinica-sheet-accent-dark: var(--clinica-primary-dark);
    --clinica-sheet-accent-rgb: var(--clinica-primary-rgb);
}

.clinica-login-sheet--buletin {
    --clinica-sheet-accent: var(--clinica-accent-strong);
    --clinica-sheet-accent-dark: var(--clinica-accent-strong-dark);
    --clinica-sheet-accent-rgb: var(--clinica-accent-strong-rgb);
}

/* Same runtime --bs-btn-* technique as the global .btn-primary rebrand above, re-pointed
   at the pane's accent. Bootstrap reads these per element, so scoping works without a
   Sass build or a second button class in the markup. */
.clinica-login-sheet .btn-primary {
    --bs-btn-bg: var(--clinica-sheet-accent);
    --bs-btn-border-color: var(--clinica-sheet-accent);
    --bs-btn-hover-bg: var(--clinica-sheet-accent-dark);
    --bs-btn-hover-border-color: var(--clinica-sheet-accent-dark);
    --bs-btn-active-bg: var(--clinica-sheet-accent-dark);
    --bs-btn-active-border-color: var(--clinica-sheet-accent-dark);
    --bs-btn-disabled-bg: var(--clinica-sheet-accent);
    --bs-btn-disabled-border-color: var(--clinica-sheet-accent);
}

.clinica-login-sheet .btn-outline-primary {
    --bs-btn-color: var(--clinica-sheet-accent-dark);
    --bs-btn-border-color: var(--clinica-sheet-accent);
    --bs-btn-hover-bg: var(--clinica-sheet-accent);
    --bs-btn-hover-border-color: var(--clinica-sheet-accent);
    --bs-btn-active-bg: var(--clinica-sheet-accent-dark);
    --bs-btn-active-border-color: var(--clinica-sheet-accent-dark);
}

/* Bootstrap compiles .form-control:focus from Sass, so the --bs-primary override at the
   top of this file never reached it and both panes focused in stock blue. Restate it
   against the pane accent to keep the focus ring visible and on-brand. */
.clinica-login-sheet .form-control:focus {
    border-color: var(--clinica-sheet-accent);
    box-shadow: 0 0 0 .25rem rgba(var(--clinica-sheet-accent-rgb), .25);
}

/* ---- Document model chooser (login "vezi model" links + preview modals) ------- */
/* One shared row for both samples (not per tab): a colour-coded document label plus
   a "vezi model" link that opens the matching preview modal, joined by a "sau" pill. */
.clinica-model-chooser__lead {
    margin: 0 0 .5rem;
    text-align: center;
    color: var(--bs-body-color);
}

.clinica-model-chooser {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: .85rem;
    row-gap: .5rem;
    margin-bottom: 1rem;
    line-height: 1.5;
    text-align: center;
}

.clinica-model-chooser__doc { font-weight: 700; }
.clinica-model-chooser__doc--cerere { color: var(--clinica-primary-dark); }
.clinica-model-chooser__doc--buletin { color: var(--clinica-accent-strong); }

.clinica-model-chooser__link {
    font-weight: 600;
    text-decoration: underline;
}
.clinica-model-chooser__link--cerere { color: var(--clinica-primary-dark); }
.clinica-model-chooser__link--cerere:hover { color: var(--clinica-primary); }
.clinica-model-chooser__link--buletin { color: var(--clinica-accent-strong); }
.clinica-model-chooser__link--buletin:hover { color: var(--clinica-accent-strong-dark); }

.clinica-model-chooser__link:focus-visible {
    outline: 3px solid rgba(var(--clinica-primary-rgb), .42);
    outline-offset: 2px;
    border-radius: .15rem;
}

/* Neutral "sau" connector pill (matches the PM sample's slate badge). */
.clinica-model-chooser__sau {
    display: inline-flex;
    align-items: center;
    padding: .15rem .7rem;
    border-radius: 999px;
    background: #1f2a24;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.clinica-model-dialog { max-width: min(56rem, calc(100vw - 2rem)); }

.clinica-model-modal {
    overflow: hidden;
    border: 0;
    border-top: .25rem solid var(--clinica-primary);
    box-shadow: 0 1rem 3rem rgba(31, 42, 36, .22);
}

.clinica-model-modal--buletin { border-top-color: var(--clinica-accent-strong); }

.clinica-model-modal .modal-header { border-bottom-color: rgba(var(--clinica-accent-rgb), .18); }
.clinica-model-modal--cerere .modal-title i { color: var(--clinica-primary-dark); }
.clinica-model-modal--buletin .modal-title i { color: var(--clinica-accent-strong); }

.clinica-model-modal__tools {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.clinica-model-modal__tools .btn-close { margin: 0; }

/* The body is the scroll container: a zoomed (full-size) image overflows it and is
   panned by scrolling, while the header/footer stay put. */
.clinica-model-modal__body {
    max-height: calc(100vh - 10rem);
    max-height: calc(100dvh - 10rem);
    padding: 1rem;
    overflow: auto;
    background: var(--clinica-page-bg);
}

.clinica-model-preview { margin: 0; }

.clinica-model-preview__img {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
    background: #fff;
    border: 1px solid #d6ddd8;
    border-radius: .5rem;
    cursor: zoom-in;
}

/* Zoomed: render at natural size and let .clinica-model-modal__body scroll to pan. */
.clinica-model-preview__img.is-zoomed {
    width: auto;
    max-width: none;
    cursor: zoom-out;
}

.clinica-model-preview__caption {
    margin-top: .75rem;
    margin-bottom: 0;
    color: var(--bs-secondary-color);
    font-size: .82rem;
    line-height: 1.45;
    text-align: center;
}

@media (max-width: 35.98rem) {
    .clinica-model-dialog { max-width: none; }
    .clinica-model-modal {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
        border-top-width: .2rem;
        border-radius: .8rem;
    }
    .clinica-model-modal .modal-header { padding: .7rem .85rem; }
    .clinica-model-modal .modal-title { font-size: 1rem; }
    .clinica-model-modal__body {
        max-height: calc(100vh - 9rem);
        max-height: calc(100dvh - 9rem);
        padding: .6rem;
    }
    .clinica-model-preview__caption { font-size: .78rem; }
}

.clinica-login-sheet__access {
    width: 100%;
    max-width: 42rem;
    min-width: 0;
    margin-inline: auto;
    padding: 1rem;
}

.clinica-login-sheet__title {
    margin: 0 0 .8rem;
    font-size: .96rem;
    font-weight: 700;
    line-height: 1.4;
}

.clinica-access-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: clinica-access-step;
}

.clinica-access-steps > li {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    gap: .55rem;
    counter-increment: clinica-access-step;
}

.clinica-access-steps > li + li { margin-top: .85rem; }

.clinica-access-steps > li::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    color: #fff;
    background: var(--clinica-sheet-accent, var(--clinica-primary));
    border-radius: 50%;
    content: counter(clinica-access-step);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1;
}

.clinica-access-step__content { min-width: 0; }

.clinica-access-step__content > p {
    margin: .1rem 0 .45rem;
    font-size: .84rem;
    line-height: 1.4;
}

.clinica-access-step__content .form-label {
    margin-bottom: .3rem;
    font-size: .84rem;
    font-weight: 600;
}

@media (max-width: 35.98rem) {
    #login-tabs {
        gap: .4rem;
        padding: .3rem;
    }

    #login-tabs .nav-link {
        gap: .12rem;
        min-height: 3.5rem;
        padding: .38rem .25rem;
    }

    #login-tabs .nav-link i { font-size: 1rem; }

    .clinica-login-sheet__access { padding: .8rem .75rem .85rem; }

    .clinica-login-sheet__title { margin-bottom: .65rem; }

    .clinica-access-steps > li + li { margin-top: .7rem; }

    .clinica-access-step__content > p {
        margin-bottom: .35rem;
        line-height: 1.35;
    }

    .clinica-login-sheet :is(input, button) { scroll-margin-block: 5.5rem; }
}

@media (min-width: 36rem) {
    #login-tabs .nav-link {
        flex-direction: row;
        gap: .45rem;
        min-height: 3.5rem;
    }
}

/* ---- Sortable table headers -------------------------------------------------- */
.clinica-th-sort { padding: 0 !important; user-select: none; }
.clinica-sort-button {
    width: 100%;
    min-height: 2.75rem;
    padding: .5rem;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    font: inherit;
}
.clinica-sort-button:hover { color: var(--clinica-primary-dark); }
.clinica-sort-button:focus-visible {
    position: relative;
    z-index: 3;
    outline: 3px solid rgba(var(--clinica-primary-rgb), .42);
    outline-offset: -3px;
}
.clinica-sort-ico { font-size: .75rem; opacity: .5; margin-left: .15rem; }
.clinica-th-sort[aria-sort="ascending"] .clinica-sort-ico,
.clinica-th-sort[aria-sort="descending"] .clinica-sort-ico { opacity: 1; color: var(--clinica-primary-dark); }
/* The two long headers may wrap to two lines instead of widening their column; the short
   headers keep the default nowrap above. */
.clinica-th-sort[data-sort="point"] .clinica-sort-button { white-space: normal; }

/* Table cell tuning: long recoltation-point names wrap on word boundaries; numeric codes
   are right-aligned (via .text-end on cell + header) with tabular figures and never wrap. */
.clinica-cell-point { overflow-wrap: anywhere; }
.clinica-cell-code { overflow-wrap: anywhere; }
.clinica-document-code-block {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
}
.clinica-document-code {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.clinica-document-code-value--numeric {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.clinica-document-source,
.clinica-document-duplicate {
    max-width: 100%;
    font-size: .78rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.clinica-document-source { color: var(--clinica-accent-dark); font-weight: 600; }
.clinica-document-duplicate { color: var(--bs-secondary-color); font-weight: 600; }

/* ---- Sticky result controls + internally scrolling desktop table ------------- */
.clinica-results-toolbar {
    top: var(--marketing-header-mobile-height, 3.625rem);
    z-index: 1020;
    margin-bottom: .55rem;
    padding: .3rem 0 .45rem;
    background: var(--clinica-page-bg);
    box-shadow: 0 .45rem .7rem -.7rem rgba(31, 42, 36, .4);
}

.clinica-results-toolbar .clinica-greeting {
    margin-bottom: .35rem;
    font-size: clamp(1.1rem, .98rem + .8vw, 1.45rem);
    line-height: 1.25;
}

.clinica-filter-card .card-body { padding: .55rem .65rem; }

.clinica-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: .5rem;
}

.clinica-filter-field { min-width: 0; }
.clinica-filter-field--search,
.clinica-filter-submit { grid-column: 1 / -1; }

.clinica-filter-field .form-label {
    margin-bottom: .22rem;
    color: var(--bs-secondary-color);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
}

.clinica-filter-field :is(.form-control, .form-select) { min-width: 0; }
#filter-submit { min-width: 6.5rem; white-space: nowrap; }

.clinica-shared-sort {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .5rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(var(--clinica-accent-rgb), .16);
}

.clinica-shared-sort #sort-dir { width: 2.75rem; padding-inline: .5rem; }

.clinica-results-table-scroll {
    max-height: 72vh;
    max-height: 72dvh;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.clinica-results-table-scroll:focus-visible {
    outline: 3px solid rgba(var(--clinica-primary-rgb), .42);
    outline-offset: 2px;
}

.clinica-results-table-scroll thead th {
    position: sticky;
    z-index: 2;
    top: 0;
    background: #f8f9fa;
    box-shadow: inset 0 -1px 0 rgba(31, 42, 36, .14);
}

.clinica-results-table { width: 100%; table-layout: fixed; }
.clinica-col-code { width: 13rem; }
.clinica-col-date { width: 8.5rem; }
.clinica-col-status { width: 10rem; }
.clinica-col-actions { width: 10rem; }

.clinica-cell-actions { overflow-wrap: anywhere; }

.clinica-doc-actions {
    display: inline-flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .4rem;
}

.clinica-doc-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    white-space: nowrap;
}

.clinica-doc-actions--card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

.clinica-doc-actions--card .btn {
    min-width: 0;
    padding-inline: .45rem;
}
.clinica-doc-actions--card .btn:only-child { grid-column: 1 / -1; }

.clinica-pdf-unavailable[aria-disabled="true"] {
    color: #4f5b55;
    background: #eef1ef;
    border-color: #9aa49f;
    cursor: not-allowed;
}

.clinica-status-text { overflow-wrap: anywhere; }

/* ---- Result explanation flow ------------------------------------------------- */
.clinica-explanation-dialog { max-width: min(52rem, calc(100vw - 2rem)); }

.clinica-explanation-modal {
    min-height: min(39rem, calc(100dvh - 2rem));
    overflow: hidden;
    border: 0;
    border-top: .25rem solid var(--clinica-primary);
    box-shadow: 0 1rem 3rem rgba(31, 42, 36, .22);
}

.clinica-explanation-modal .modal-header { border-bottom-color: rgba(var(--clinica-accent-rgb), .18); }
.clinica-explanation-modal .modal-title i { color: var(--clinica-primary-dark); }
.clinica-explanation-modal .modal-footer { border-top-color: rgba(var(--clinica-accent-rgb), .18); }
.clinica-explanation-modal__body { display: flex; min-height: 24rem; padding: 1.5rem; }
.clinica-explanation-state { width: 100%; margin: auto; }

.clinica-explanation-modal__body:has(#explanation-loading:not(.d-none)) {
    padding: 0;
    background: #fdfcfa;
}

.clinica-hermes-waiting {
    --clinica-hermes-ink: #38332c;
    --clinica-hermes-muted: #8a8378;
    --clinica-hermes-accent: #e2711d;
    --clinica-hermes-accent-soft: rgba(226, 113, 29, .13);
    --clinica-hermes-hairline: rgba(56, 51, 44, .14);
    --clinica-hermes-card: #fff;
    --clinica-hermes-coat: #f8f7f4;
    --clinica-hermes-coat-line: rgba(56, 51, 44, .2);
    --clinica-hermes-skin: #eec092;
    --clinica-hermes-hair: #4a3b2f;
    --clinica-hermes-steth: #4e463e;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 30rem;
    padding: clamp(1rem, 3vw, 2rem);
    overflow: hidden;
    color: var(--clinica-hermes-ink);
    background: #fdfcfa;
}

.clinica-hermes-waiting > * + * { margin-top: clamp(1rem, 2.5vh, 1.75rem); }

.clinica-hermes-scene {
    display: block;
    flex: 0 0 auto;
    width: min(21.25rem, 82vw);
    max-width: 100%;
    height: auto;
}

.clinica-hermes-doctor,
.clinica-hermes-head,
.clinica-hermes-eyes,
.clinica-hermes-checkmark {
    transform-box: fill-box;
    transform-origin: center;
}

.clinica-hermes-head { transform-origin: 50% 92%; }
.clinica-hermes-sheet { filter: drop-shadow(0 .3rem .65rem rgba(56, 51, 44, .08)); }
.clinica-hermes-highlight { opacity: 0; }
.clinica-hermes-checkmark { opacity: 0; }

.clinica-hermes-waiting--active .clinica-hermes-doctor {
    animation: clinica-hermes-breathe 5.2s ease-in-out infinite;
}

.clinica-hermes-waiting--active .clinica-hermes-head {
    animation: clinica-hermes-nod 9.5s ease-in-out infinite;
}

.clinica-hermes-waiting--active .clinica-hermes-eyes {
    animation: clinica-hermes-blink 4.7s infinite;
}

.clinica-hermes-waiting--active .clinica-hermes-r0 .clinica-hermes-highlight {
    animation: clinica-hermes-highlight-0 9.5s linear infinite;
}

.clinica-hermes-waiting--active .clinica-hermes-r1 .clinica-hermes-highlight {
    animation: clinica-hermes-highlight-1 9.5s linear infinite;
}

.clinica-hermes-waiting--active .clinica-hermes-r2 .clinica-hermes-highlight {
    animation: clinica-hermes-highlight-2 9.5s linear infinite;
}

.clinica-hermes-waiting--active .clinica-hermes-r3 .clinica-hermes-highlight {
    animation: clinica-hermes-highlight-3 9.5s linear infinite;
}

.clinica-hermes-waiting--active .clinica-hermes-r0 .clinica-hermes-checkmark {
    animation: clinica-hermes-check-0 9.5s linear infinite;
}

.clinica-hermes-waiting--active .clinica-hermes-r1 .clinica-hermes-checkmark {
    animation: clinica-hermes-check-1 9.5s linear infinite;
}

.clinica-hermes-waiting--active .clinica-hermes-r2 .clinica-hermes-checkmark {
    animation: clinica-hermes-check-2 9.5s linear infinite;
}

.clinica-hermes-waiting--active .clinica-hermes-r3 .clinica-hermes-checkmark {
    animation: clinica-hermes-check-3 9.5s linear infinite;
}

.clinica-hermes-check {
    position: relative;
    display: grid;
    width: 6rem;
    height: 6rem;
    place-items: center;
    color: var(--clinica-hermes-accent);
}

.clinica-hermes-check__halo {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(226, 113, 29, .18);
    border-radius: 50%;
    background: var(--clinica-hermes-accent-soft);
}

.clinica-hermes-waiting--active .clinica-hermes-check__halo {
    animation: clinica-hermes-halo 2.6s ease-in-out infinite;
}

.clinica-hermes-check__document { font-size: 2.75rem; }

.clinica-hermes-check__stars {
    position: absolute;
    top: .55rem;
    right: .35rem;
    padding: .15rem;
    background: #fdfcfa;
    border-radius: 50%;
    font-size: 1.35rem;
}

.clinica-hermes-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 32rem;
    text-align: center;
}

.clinica-hermes-copy > * + * { margin-top: .75rem; }

.clinica-hermes-eyebrow {
    margin-bottom: 0;
    color: var(--clinica-hermes-accent);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .22em;
    line-height: 1.5;
    text-transform: uppercase;
}

.clinica-hermes-title {
    margin-bottom: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.25rem, 2.5vw, 1.55rem);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: .005em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

#explanation-loading-title:focus {
    outline: none;
    box-shadow: none;
}

#explanation-result-title:focus {
    outline: .2rem solid var(--clinica-primary-dark);
    outline-offset: .2rem;
    border-radius: .2rem;
}

.clinica-hermes-waiting[data-variant="check"] .clinica-hermes-title {
    font-family: inherit;
    font-size: clamp(1.15rem, 2.2vw, 1.35rem);
    font-weight: 650;
}

.clinica-hermes-message {
    max-width: 28rem;
    margin-bottom: 0;
    color: var(--clinica-hermes-muted);
    font-size: .95rem;
    line-height: 1.55;
    text-wrap: balance;
}

.clinica-hermes-messages {
    position: relative;
    width: 100%;
    min-height: 1.5em;
    color: var(--clinica-hermes-muted);
    font-size: .92rem;
    line-height: 1.5;
    letter-spacing: .01em;
}

.clinica-hermes-messages span {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.clinica-hermes-waiting--active .clinica-hermes-messages span {
    animation: clinica-hermes-message-cycle 28s linear infinite both;
}

.clinica-hermes-waiting--active .clinica-hermes-messages span:nth-child(2) { animation-delay: 7s; }
.clinica-hermes-waiting--active .clinica-hermes-messages span:nth-child(3) { animation-delay: 14s; }
.clinica-hermes-waiting--active .clinica-hermes-messages span:nth-child(4) { animation-delay: 21s; }

.clinica-hermes-bar {
    width: 9.25rem;
    height: 2px;
    overflow: hidden;
    background: var(--clinica-hermes-hairline);
    border-radius: 999px;
}

.clinica-hermes-bar i {
    display: block;
    width: 34%;
    height: 100%;
    background: var(--clinica-hermes-accent);
    border-radius: inherit;
    opacity: .6;
}

.clinica-hermes-waiting--active .clinica-hermes-bar i {
    animation: clinica-hermes-slide 3.4s ease-in-out infinite;
}

@keyframes clinica-hermes-breathe {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(2.6px); }
}

@keyframes clinica-hermes-blink {
    0%, 91.5%, 95.5%, 100% { transform: scaleY(1); }
    93.5% { transform: scaleY(.08); }
}

@keyframes clinica-hermes-halo {
    0%, 100% { opacity: .65; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes clinica-hermes-slide {
    0% { transform: translateX(-110%); }
    60%, 100% { transform: translateX(320%); }
}

@keyframes clinica-hermes-message-cycle {
    0% { opacity: 0; }
    2.5%, 22% { opacity: 1; }
    25%, 100% { opacity: 0; }
}

@keyframes clinica-hermes-nod {
    0%, 13.2% { transform: rotate(0); }
    15.2% { transform: rotate(4.5deg); }
    17.7%, 31.1% { transform: rotate(0); }
    33.1% { transform: rotate(4.5deg); }
    35.6%, 48.9% { transform: rotate(0); }
    50.9% { transform: rotate(4.5deg); }
    53.4%, 66.8% { transform: rotate(0); }
    68.8% { transform: rotate(4.5deg); }
    71.3%, 100% { transform: rotate(0); }
}

@keyframes clinica-hermes-highlight-0 {
    0%, 5.3% { opacity: 0; }
    7.4%, 13.2% { opacity: .55; }
    15.2%, 100% { opacity: 0; }
}

@keyframes clinica-hermes-highlight-1 {
    0%, 23.2% { opacity: 0; }
    25.3%, 31.1% { opacity: .55; }
    33.1%, 100% { opacity: 0; }
}

@keyframes clinica-hermes-highlight-2 {
    0%, 41.1% { opacity: 0; }
    43.2%, 48.9% { opacity: .55; }
    50.9%, 100% { opacity: 0; }
}

@keyframes clinica-hermes-highlight-3 {
    0%, 58.9% { opacity: 0; }
    61%, 66.8% { opacity: .55; }
    68.8%, 100% { opacity: 0; }
}

@keyframes clinica-hermes-check-0 {
    0%, 13.2% { opacity: 0; transform: scale(.5); }
    14.8% { opacity: 1; transform: scale(1.12); }
    16.2%, 92% { opacity: 1; transform: scale(1); }
    96%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes clinica-hermes-check-1 {
    0%, 31.1% { opacity: 0; transform: scale(.5); }
    32.7% { opacity: 1; transform: scale(1.12); }
    34.1%, 92% { opacity: 1; transform: scale(1); }
    96%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes clinica-hermes-check-2 {
    0%, 48.9% { opacity: 0; transform: scale(.5); }
    50.5% { opacity: 1; transform: scale(1.12); }
    51.9%, 92% { opacity: 1; transform: scale(1); }
    96%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes clinica-hermes-check-3 {
    0%, 66.8% { opacity: 0; transform: scale(.5); }
    68.4% { opacity: 1; transform: scale(1.12); }
    69.8%, 92% { opacity: 1; transform: scale(1); }
    96%, 100% { opacity: 0; transform: scale(1); }
}

@media (max-width: 35.98rem) {
    .clinica-hermes-waiting {
        min-height: 23rem;
        padding: 1rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
    }

    .clinica-hermes-waiting > * + * { margin-top: .9rem; }
    .clinica-hermes-scene { width: min(17.5rem, 80vw); }
    .clinica-hermes-messages { min-height: 3em; }
    .clinica-hermes-eyebrow { letter-spacing: .17em; }
}

@media (max-height: 42rem) {
    .clinica-explanation-modal__body { min-height: 0; }

    .clinica-hermes-waiting {
        min-height: 14rem;
        padding-block: .6rem;
        overflow-y: auto;
    }

    .clinica-hermes-waiting > * + * { margin-top: .55rem; }
    .clinica-hermes-scene { width: min(10rem, 44vh, 50vw); }
    .clinica-hermes-check { width: 4.5rem; height: 4.5rem; }
    .clinica-hermes-check__document { font-size: 2.15rem; }
    .clinica-hermes-check__stars { top: .25rem; right: .1rem; font-size: 1.05rem; }
    .clinica-hermes-copy > * + * { margin-top: .35rem; }
    .clinica-hermes-eyebrow { font-size: .62rem; }
    .clinica-hermes-title { font-size: 1.08rem; }
    .clinica-hermes-message,
    .clinica-hermes-messages { font-size: .8rem; }
    .clinica-hermes-messages { min-height: 1.5em; }
}

@media (prefers-reduced-motion: reduce) {
    .clinica-hermes-doctor,
    .clinica-hermes-head,
    .clinica-hermes-eyes,
    .clinica-hermes-check__halo,
    .clinica-hermes-highlight,
    .clinica-hermes-checkmark,
    .clinica-hermes-messages span,
    .clinica-hermes-bar i {
        animation: none !important;
        transform: none !important;
    }

    .clinica-hermes-messages span { opacity: 0; }
    .clinica-hermes-messages span:first-child { opacity: 1; }
    .clinica-hermes-highlight,
    .clinica-hermes-checkmark { opacity: 0; }
    .clinica-hermes-r0 .clinica-hermes-checkmark { opacity: .7; }
    .clinica-hermes-bar i {
        width: 100%;
        opacity: .45;
    }
}

.clinica-explanation-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    color: var(--clinica-primary-dark);
    background: rgba(var(--clinica-primary-rgb), .12);
    border-radius: 50%;
    font-size: 1.55rem;
}

.clinica-explanation-state__icon--error {
    color: #9a5c00;
    background: rgba(var(--bs-warning-rgb), .2);
}

.clinica-explanation-consent-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.clinica-explanation-consent-heading .clinica-explanation-state__icon { flex: 0 0 auto; margin: 0; }

.clinica-explanation-notice {
    padding: 1rem;
    background: #f7f9f8;
    border: 1px solid rgba(var(--clinica-accent-rgb), .25);
    border-radius: .65rem;
    font-size: .9rem;
    line-height: 1.55;
}

.clinica-explanation-consent-check {
    padding: .85rem .9rem .85rem 2.5rem;
    background: #fff8f2;
    border: 1px solid rgba(var(--clinica-primary-rgb), .32);
    border-radius: .65rem;
}

.clinica-explanation-consent-check .form-check-input { margin-top: .18rem; }

.clinica-explanation-modal .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    border: .12rem solid #aebdb4;
    accent-color: var(--clinica-primary);
}

.clinica-explanation-modal .form-check-input:checked {
    background-color: var(--clinica-primary);
    border-color: var(--clinica-primary);
}

.clinica-explanation-modal .form-check-input:focus {
    border-color: var(--clinica-primary-dark);
    box-shadow: 0 0 0 .22rem rgba(var(--clinica-primary-rgb), .2);
}

.clinica-explanation-modal .form-select:focus {
    border-color: var(--clinica-primary);
    box-shadow: 0 0 0 .22rem rgba(var(--clinica-primary-rgb), .16);
}

.clinica-explanation-progress { height: .45rem; background: #edf1ee; }
.clinica-explanation-progress .progress-bar { background: var(--clinica-primary); transition: width .2s ease; }

.clinica-explanation-options { display: grid; gap: .65rem; }

.clinica-explanation-option {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    min-height: 3rem;
    padding: .75rem .85rem;
    cursor: pointer;
    background: #fff;
    border: 1px solid #d6ddd8;
    border-radius: .65rem;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.clinica-explanation-option:hover { border-color: rgba(var(--clinica-primary-rgb), .7); }
.clinica-explanation-option:has(.form-check-input:checked) {
    background: #fff6ef;
    border-color: var(--clinica-primary);
    box-shadow: 0 0 0 .15rem rgba(var(--clinica-primary-rgb), .12);
}
.clinica-explanation-option .form-check-input { flex: 0 0 auto; margin-top: .2rem; }

.clinica-explanation-scale { max-width: 18rem; }

.clinica-explanation-result-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.clinica-explanation-frame {
    display: block;
    width: 100%;
    min-height: 28rem;
    height: 58vh;
    height: 58dvh;
    background: #fff;
    border: 1px solid #d6ddd8;
    border-radius: .5rem;
}

.clinica-explanation-modal .modal-footer .btn { min-width: 7rem; }

@media (min-width: 48rem) {
    .clinica-filter-grid {
        grid-template-columns: minmax(12rem, 1.6fr) minmax(8rem, 1fr) minmax(8rem, 1fr) auto;
    }

    .clinica-filter-field--search,
    .clinica-filter-submit { grid-column: auto; }
}

@media (min-width: 62rem) {
    .clinica-results-toolbar { top: var(--marketing-header-desktop-height, 3.625rem); }
    .clinica-explanation-dialog { max-width: 56rem; }
}

@media (max-width: 35.98rem) {
    .clinica-results-toolbar {
        margin-bottom: .4rem;
        padding-block: .2rem .35rem;
    }

    .clinica-results-toolbar .clinica-greeting {
        margin-bottom: .25rem;
        font-size: 1.05rem;
    }

    .clinica-filter-card .card-body { padding: .5rem; }
    .clinica-filter-grid { gap: .4rem; }
    .clinica-shared-sort { gap: .4rem; margin-top: .4rem; padding-top: .4rem; }
    .clinica-doc-actions--card .btn { font-size: .8rem; }

    .clinica-explanation-dialog { max-width: none; }
    .clinica-explanation-modal {
        min-height: 0;
        max-height: calc(100dvh - 1rem);
        border-top-width: .2rem;
        border-radius: .8rem;
    }
    .clinica-explanation-modal:has(#explanation-result:not(.d-none)) {
        height: calc(100dvh - 1rem);
    }
    .clinica-explanation-modal .modal-header { padding: .8rem 1rem; }
    .clinica-explanation-modal__body { min-height: 0; padding: 1rem; }
    .clinica-explanation-modal__body:has(#explanation-result:not(.d-none)) { overflow: hidden; }
    .clinica-explanation-modal .modal-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
        padding: .75rem 1rem;
    }
    .clinica-explanation-modal .modal-footer .btn { width: 100%; min-width: 0; margin: 0 !important; }
    .clinica-explanation-modal .modal-footer #explanation-primary:not(.d-none) { grid-column: 1 / -1; }
    .clinica-explanation-modal .modal-footer #explanation-cancel { grid-column: 1 / -1; grid-row: 2; }
    .clinica-explanation-modal #explanation-consent,
    .clinica-explanation-modal #explanation-question,
    .clinica-explanation-modal #explanation-result { margin-top: 0; }
    .clinica-explanation-modal #explanation-result:not(.d-none) {
        display: flex;
        flex-direction: column;
        min-height: 0;
        margin: 0;
    }
    .clinica-explanation-consent-heading { align-items: flex-start; gap: .75rem; }
    .clinica-explanation-notice { padding: .8rem; font-size: .84rem; line-height: 1.5; }
    .clinica-explanation-consent-check { padding: .75rem .75rem .75rem 2.25rem; }
    .clinica-explanation-modal #explanation-result:not(.d-none) .clinica-explanation-frame {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }
}

/* ---- Document-list greeting ---------------------------------------------------
   "Bun venit, {Prenume Nume}!" above the filters. clamp() scales the heading from
   ~20px at 390px viewports to 28px at desktop, so no media query is needed; the
   name alone is brand-colored (always large bold text, so the ~3.6:1 contrast of
   --clinica-primary-dark on the page background passes WCAG AA for large text). */
.clinica-greeting {
    font-size: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
    font-weight: 700;
    margin-bottom: 1rem;
    overflow-wrap: break-word; /* pathological long names wrap instead of overflowing */
}

.clinica-greeting__name { color: var(--clinica-primary-dark); }

/* ---- Highlighted (document-login matched) row / card ------------------------- */
/* The tint must beat .table-striped, which paints td backgrounds via
   --bs-table-bg-type — so target the cells directly. */
tr.clinica-doc-highlight > td { background: rgba(var(--clinica-primary-rgb), .10); }
.doc-card.clinica-doc-highlight {
    border-color: rgba(var(--clinica-primary-rgb), .55);
    box-shadow: 0 0 0 2px rgba(var(--clinica-primary-rgb), .22);
}
.clinica-badge-highlight { background: var(--clinica-primary); color: #fff; font-weight: 600; }