/* ==========================================================
   AION UX 2026
   Small, intentionally last-loaded interaction layer.
   It avoids rewriting the visual system and only resolves
   workflow, responsive and accessibility concerns.
========================================================== */

:root {
    --app-text-muted: #5e6879;
}

body,
button,
input,
select,
textarea {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* The generic radio rule in older layers must never turn a checkbox into a radio. */
.form-card input[type="checkbox"],
.radio-row input[type="checkbox"],
.radio-input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
}

button:disabled,
button[aria-disabled="true"] {
    cursor: not-allowed !important;
    opacity: .55;
    transform: none !important;
    box-shadow: none !important;
}

/* ----------------------------------------------------------
   Progressive patient form
---------------------------------------------------------- */

.patient-form-status {
    display: grid;
    gap: 16px;
    margin: 0 0 24px;
    padding: 18px;
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-lg);
    background: linear-gradient(135deg, rgba(101, 84, 255, .055), rgba(57, 168, 255, .025) 48%, #fff 100%);
}

.patient-form-status-copy,
.report-readiness-heading,
.report-gate-heading,
.form-section-heading,
.uccap-group-legend-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.patient-form-status-copy h2 {
    margin: 2px 0 0;
    font-size: 18px;
}

.patient-save-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--app-border-soft);
    border-radius: 999px;
    background: #fff;
    color: var(--app-text-soft);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.patient-save-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--app-text-muted);
}

.patient-save-indicator.is-saved .patient-save-dot { background: var(--app-success); }
.patient-save-indicator.is-pending .patient-save-dot { background: var(--app-warning); }
.patient-save-indicator.is-saving .patient-save-dot {
    background: var(--app-primary);
    animation: aion-save-pulse 1s ease-in-out infinite alternate;
}
.patient-save-indicator.is-error .patient-save-dot { background: var(--app-danger); }

@keyframes aion-save-pulse {
    from { opacity: .35; transform: scale(.82); }
    to { opacity: 1; transform: scale(1); }
}

.report-readiness-card,
.report-gate {
    padding: 14px 15px;
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-md);
    background: rgba(255, 255, 255, .82);
}

.report-readiness-card.is-ready,
.report-gate.is-ready {
    border-color: color-mix(in srgb, var(--app-success) 30%, white);
    background: color-mix(in srgb, var(--app-success) 6%, white);
}

.report-readiness-heading span:first-child,
.report-gate-heading span:first-child {
    display: block;
    color: var(--app-text-muted);
    font-size: 11px;
    font-weight: 780;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.report-readiness-heading strong,
.report-gate-heading strong {
    display: block;
    margin-top: 2px;
    color: var(--app-text);
    font-size: 14px;
}

.report-readiness-percent,
.report-gate-heading > span {
    color: var(--app-primary);
    font-size: 18px;
    font-weight: 800;
}

.report-progress-track {
    position: relative;
    width: 100%;
    height: 7px;
    margin: 11px 0 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--app-surface-muted);
}

.report-progress-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--app-primary), var(--aion-azure, #39a8ff));
    transition: width .22s ease;
}

.report-readiness-card.is-ready .report-progress-track > span,
.report-gate.is-ready .report-progress-track > span {
    background: var(--app-success);
}

.report-readiness-card p,
.report-gate p {
    margin: 0;
    font-size: 12.5px;
}

.patient-form-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: var(--app-text-soft);
    font-size: 12px;
}

.save-required-badge {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    margin-left: 5px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .025em;
    vertical-align: middle;
}

.form-section-heading {
    margin-bottom: 16px;
}

.form-section-heading h2 {
    margin: 0;
}

.section-completion,
.group-completion-label,
.group-content-label,
.nav-completion-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--app-surface-muted);
    color: var(--app-text-muted);
    font-size: 10.5px;
    font-weight: 780;
    white-space: nowrap;
}

.section-completion.is-complete,
.group-completion-label.is-complete,
.nav-completion-badge.is-complete {
    background: color-mix(in srgb, var(--app-success) 10%, white);
    color: var(--app-success);
}

.uccap-nav-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nav-completion-dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--app-warning);
}

.nav-completion-dot.is-complete {
    background: var(--app-success);
}

/* Only show submenu entries for the active high-level section. */
[data-uccap-dynamic] .uccap-side-submenu {
    display: none !important;
}

[data-uccap-dynamic] .uccap-side-submenu.is-open {
    display: grid !important;
}

.uccap-group {
    position: relative;
}

.uccap-group > legend {
    width: 100%;
    padding-right: 0;
}

.uccap-group-legend-main {
    width: calc(100% - 38px);
}

.uccap-group-legend-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.uccap-group-toggle {
    position: absolute;
    top: 11px;
    right: 12px;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--app-text-muted) !important;
    box-shadow: none !important;
}

.uccap-group-toggle > span[aria-hidden="true"] {
    display: block;
    font-size: 19px;
    line-height: 1;
    transition: transform .16s ease;
}

.uccap-group:not(.is-collapsed) .uccap-group-toggle > span[aria-hidden="true"] {
    transform: rotate(180deg);
}

.uccap-group-toggle:hover,
.uccap-group-toggle:focus-visible {
    background: var(--app-surface-muted) !important;
    color: var(--app-primary) !important;
}

.uccap-group-body[hidden] {
    display: none !important;
}

.uccap-group.is-collapsed {
    padding-bottom: 10px !important;
}

/* ----------------------------------------------------------
   Report gate / pending requirements
---------------------------------------------------------- */

.ai-generator-panel {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr) !important;
}

.ai-generator-panel > .report-gate {
    grid-column: 1 / -1;
}

.report-gate.is-blocked {
    border-color: color-mix(in srgb, var(--app-warning) 26%, white);
    background: color-mix(in srgb, var(--app-warning) 6%, white);
}

.report-gate-actions {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.report-pending-details {
    flex: 1 1 300px;
    min-width: 0;
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-sm);
    background: #fff;
}

.report-pending-details summary {
    padding: 9px 11px;
    color: var(--app-primary);
    font-size: 12px;
    font-weight: 760;
    cursor: pointer;
}

.report-pending-details ul {
    max-height: 280px;
    margin: 0;
    padding: 2px 12px 12px 30px;
    overflow: auto;
}

.report-pending-details li {
    margin: 7px 0;
    color: var(--app-text-soft);
    font-size: 12px;
}

.report-pending-details li a {
    color: var(--app-primary);
    font-weight: 720;
}

.report-pending-details li span {
    display: block;
    color: var(--app-text-muted);
}

/* ----------------------------------------------------------
   Navigation: keep logout reachable on narrow screens
---------------------------------------------------------- */

@media (max-width: 560px) {
    .navbar .nav-right {
        display: flex !important;
        width: auto !important;
        margin-left: auto;
        padding-top: 10px !important;
    }

    .navbar .nav-user-name {
        display: none;
    }

    .navbar .nav-logout {
        flex: 0 0 auto !important;
        min-height: 38px;
        padding: 7px 10px;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 9px;
    }

    .patient-form-status-copy,
    .report-readiness-heading,
    .report-gate-heading,
    .form-section-heading,
    .uccap-group-legend-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .patient-save-indicator {
        width: 100%;
        justify-content: flex-start;
        white-space: normal;
    }

    .uccap-group-legend-main {
        width: calc(100% - 34px);
    }

    .section-completion,
    .group-completion-label,
    .group-content-label {
        white-space: normal;
    }

    .ai-generator-panel {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    [data-uccap-dynamic] .uccap-side-card {
        max-height: none !important;
    }

    [data-uccap-dynamic] .uccap-side-submenu.is-open {
        max-height: 220px;
        overflow: auto;
    }
}

/* ----------------------------------------------------------
   Feedback without blocking browser alerts
---------------------------------------------------------- */

.aion-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 5000;
    max-width: min(360px, calc(100vw - 32px));
    padding: 11px 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: var(--aion-abyss, #090b14);
    color: #fff;
    font-size: 13px;
    font-weight: 690;
    box-shadow: 0 18px 45px rgba(9,11,20,.22);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

.aion-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .patient-save-indicator.is-saving .patient-save-dot {
        animation: none;
    }

    .report-progress-track > span,
    .uccap-group-toggle > span[aria-hidden="true"],
    .aion-toast {
        transition: none;
    }
}

/* ----------------------------------------------------------
   Dashboard workspace: useful every day, not a marketing hero
---------------------------------------------------------- */

.dashboard-workspace {
    max-width: 1240px;
    margin: 0 auto;
}

.centre-welcome--compact {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 0;
    padding: 24px 26px;
}

.centre-welcome-copy h1 {
    margin-bottom: 5px;
}

.centre-welcome-copy p:last-child {
    margin: 0;
    color: var(--app-text-muted);
}

.centre-welcome-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}

.dashboard-stat-grid--workspace {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    max-width: none;
    margin-top: 16px;
}

.dashboard-stat-grid--workspace .dashboard-stat-card {
    min-height: 92px;
    padding: 17px 18px;
}

.dashboard-stat-card--text strong {
    font-size: 16px;
    line-height: 1.35;
}

.dashboard-work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, .75fr);
    gap: 16px;
    margin: 0 0 16px;
}

.dashboard-work-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-xs);
}

.dashboard-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.dashboard-card-heading h2 {
    margin: 2px 0 0;
    font-size: clamp(18px, 2vw, 22px);
}

.text-link {
    flex: 0 0 auto;
    color: var(--app-primary);
    font-size: 13px;
    font-weight: 760;
    text-decoration: none;
}

.text-link:hover {
    text-decoration: underline;
}

.dashboard-recent-list,
.dashboard-shortcut-list {
    display: grid;
    gap: 8px;
}

.dashboard-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-sm);
    color: inherit;
    background: var(--app-surface-soft);
    text-decoration: none;
    transition: border-color .14s ease, transform .14s ease, background .14s ease;
}

.dashboard-recent-item:hover,
.dashboard-recent-item:focus-visible {
    border-color: var(--app-border);
    background: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.dashboard-recent-main,
.dashboard-recent-meta {
    display: flex;
    min-width: 0;
}

.dashboard-recent-main {
    flex-direction: column;
    gap: 4px;
}

.dashboard-recent-main strong {
    overflow: hidden;
    color: var(--app-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-recent-main small,
.dashboard-recent-meta small {
    color: var(--app-text-muted);
}

.dashboard-recent-meta {
    flex: 0 0 auto;
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
    text-align: right;
}

.dashboard-empty-state {
    padding: 24px 18px;
    border: 1px dashed var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-soft);
}

.dashboard-empty-state p {
    margin: 6px 0 15px;
    color: var(--app-text-muted);
}

.dashboard-shortcut {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    padding: 12px;
    border-radius: var(--app-radius-sm);
    color: inherit;
    text-decoration: none;
}

.dashboard-shortcut:hover,
.dashboard-shortcut:focus-visible {
    background: var(--app-surface-soft);
    text-decoration: none;
}

.dashboard-shortcut-index {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--app-border-soft);
    border-radius: 9px;
    color: var(--app-primary);
    background: #fff;
    font-size: 11px;
    font-weight: 800;
}

.dashboard-shortcut strong,
.dashboard-shortcut small {
    display: block;
}

.dashboard-shortcut strong {
    margin-bottom: 3px;
    color: var(--app-text);
    font-size: 13px;
}

.dashboard-shortcut small {
    color: var(--app-text-muted);
    line-height: 1.4;
}

.dashboard-principle {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-soft);
}

.dashboard-principle .brand-mark {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
}

.dashboard-principle .brand-mark img {
    width: 100%;
    height: 100%;
}

.dashboard-principle p {
    margin: 3px 0 0;
    color: var(--app-text-muted);
    font-size: 13px;
}

/* ----------------------------------------------------------
   Patient list: scalable search + secondary action menu
---------------------------------------------------------- */

.patient-list-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 16px;
}

.patient-list-toolbar .patient-search-bar {
    margin: 0;
}

.patient-sort-field {
    display: grid;
    gap: 5px;
}

.patient-sort-field label {
    color: var(--app-text-muted);
    font-size: 11px;
    font-weight: 750;
}

.patient-sort-field select {
    min-width: 170px;
}

.patient-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
}

.patient-meta-line > span + span::before {
    content: '·';
    margin-right: 10px;
    color: var(--app-text-muted);
}

.patient-action-menu {
    position: relative;
}

.patient-action-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-sm);
    color: var(--app-text-muted);
    background: var(--app-surface);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
}

.patient-action-menu > summary::-webkit-details-marker {
    display: none;
}

.patient-action-menu[open] > summary,
.patient-action-menu > summary:hover {
    border-color: var(--app-border);
    color: var(--app-primary);
}

.patient-action-menu-content {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 40;
    display: grid;
    min-width: 180px;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--app-border-soft);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(20, 28, 45, .14);
}

.patient-action-menu-content form,
.patient-action-menu-content button {
    width: 100%;
    margin: 0;
}

@media (max-width: 820px) {
    .centre-welcome--compact {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .centre-welcome-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .dashboard-work-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .centre-welcome--compact {
        grid-template-columns: 1fr;
        padding: 19px;
    }

    .centre-welcome-logo {
        width: 48px;
        height: 48px;
    }

    .centre-welcome-actions,
    .centre-welcome-actions > * {
        width: 100%;
    }

    .dashboard-recent-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-recent-meta {
        width: 100%;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        text-align: left;
    }

    .dashboard-principle {
        align-items: flex-start;
    }

    .patient-list-toolbar {
        grid-template-columns: 1fr;
    }

    .patient-sort-field select {
        width: 100%;
    }

    .patient-action-menu-content {
        position: static;
        margin-top: 7px;
        box-shadow: none;
    }
}

/* Secondary actions stay available without competing with primary work. */
.patient-header-action-menu,
.table-action-menu {
    align-self: center;
}

.table-action-menu .patient-action-menu-content {
    min-width: 220px;
}

.credential-list dd {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.credential-list code {
    flex: 1 1 220px;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .patient-header-action-menu {
        width: 100%;
    }

    .patient-header-action-menu > summary {
        width: 100%;
    }

    .table-action-menu .patient-action-menu-content {
        position: static;
        margin-top: 7px;
        box-shadow: none;
    }
}

/* Menus inside scrollable tables must expand the row instead of being clipped. */
.table-action-menu .patient-action-menu-content {
    position: static;
    margin-top: 7px;
    box-shadow: none;
}

.patient-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    color: var(--app-text-muted);
    font-size: 12px;
}

.patient-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 560px) {
    .patient-list-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .patient-pagination > * {
        flex: 1 1 0;
        justify-content: center;
    }
}

/* ==========================================================
   AION UX 2026 · refinement pass 2
   Clearer navigation, search and contextual patient actions.
========================================================== */

/* Keep the product navigation readable before it becomes mobile. */
@media (max-width: 1120px) {
    .navbar .nav-centre-identity,
    .navbar .nav-user-name {
        display: none !important;
    }
}

/* One predictable mobile navbar wins over older overlapping rules. */
@media (max-width: 760px) {
    .navbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center !important;
        gap: 6px 10px;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        padding: 9px 14px 8px !important;
    }

    .navbar .nav-main {
        display: contents !important;
    }

    .navbar .nav-brand {
        grid-column: 1;
        grid-row: 1;
        width: max-content;
        min-height: 42px;
    }

    .navbar .nav-left {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex !important;
        width: 100% !important;
        min-width: 0;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding: 2px 0 1px;
    }

    .navbar .nav-left::-webkit-scrollbar {
        display: none;
    }

    .navbar .nav-left a {
        flex: 0 0 auto !important;
        width: auto !important;
        min-height: 36px;
        justify-content: center;
        white-space: nowrap;
    }

    .navbar .nav-right {
        grid-column: 2;
        grid-row: 1;
        display: flex !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: center;
    }

    .navbar .nav-user-name {
        display: none !important;
    }

    .navbar .nav-logout {
        flex: 0 0 auto !important;
        width: auto !important;
        min-height: 36px;
        padding: 7px 10px;
    }
}

.patient-search-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: stretch;
    gap: 8px;
}

.patient-search-bar input {
    min-width: 0;
}

.patient-search-bar button,
.patient-search-bar .patient-search-clear {
    width: auto !important;
    min-height: 50px;
    justify-content: center;
    white-space: nowrap;
}

.patient-empty-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 20px;
    background: var(--app-surface-soft);
}

.patient-empty-state .patient-meta {
    max-width: 680px;
}

.patient-diagnosis-meta {
    display: inline-block;
    max-width: min(480px, 46vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.ai-bottom-shortcut {
    align-items: center;
}

.ai-bottom-shortcut-action {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 620px) {
    .patient-search-bar {
        grid-template-columns: 1fr 1fr;
    }

    .patient-search-bar input {
        grid-column: 1 / -1;
    }

    .patient-search-bar button,
    .patient-search-bar .patient-search-clear {
        width: 100% !important;
    }

    .patient-empty-state,
    .ai-bottom-shortcut {
        align-items: stretch;
        flex-direction: column;
    }

    .patient-empty-state > a,
    .ai-bottom-shortcut-action,
    .ai-bottom-shortcut-action > a {
        width: 100%;
    }

    .ai-bottom-shortcut-action > a {
        justify-content: center;
    }

    .patient-diagnosis-meta {
        max-width: 100%;
        white-space: normal;
    }
}

/* The report area has one clear reading order: readiness, context, controls. */
.ai-generator-panel > .report-gate {
    grid-column: 1 / -1 !important;
    grid-row: 1;
}

.ai-generator-panel > .ai-generator-copy {
    grid-column: 1;
    grid-row: 2;
}

.ai-generator-panel > .ai-generator-form {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
}

.ai-generator-panel.is-blocked > .ai-generator-copy {
    grid-column: 1 / -1;
    max-width: 760px;
}

@media (max-width: 900px) {
    .ai-generator-panel > .report-gate,
    .ai-generator-panel > .ai-generator-copy,
    .ai-generator-panel > .ai-generator-form,
    .ai-generator-panel.is-blocked > .ai-generator-copy {
        grid-column: 1 !important;
        grid-row: auto;
        max-width: none;
    }
}

.dashboard-stat-link {
    color: inherit;
    text-decoration: none;
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease, background .14s ease;
}

.dashboard-stat-link:hover,
.dashboard-stat-link:focus-visible {
    border-color: var(--app-border);
    background: #fff;
    box-shadow: 0 10px 24px rgba(20, 28, 45, .08);
    text-decoration: none;
    transform: translateY(-1px);
}

.dashboard-stat-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--app-primary) 26%, transparent);
    outline-offset: 2px;
}

/* Patient action menus must be able to escape the rounded list container. */
.patient-list {
    overflow: visible !important;
}

.patient-list .patient-action-menu[open],
.patient-header-action-menu[open],
.table-action-menu[open] {
    z-index: 70;
}

/* Validation returned by background saves should point to the exact field. */
.form-field.has-autosave-error input,
.form-field.has-autosave-error textarea,
.form-field.has-autosave-error select,
.form-field.has-autosave-error .radio-row {
    border-color: #d92d20 !important;
    background: #fffafa !important;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .08) !important;
}

.autosave-field-error {
    margin-top: 6px !important;
}


/* Preserve rounded list edges while allowing dropdowns to escape the container. */
.patient-list > :first-child {
    border-top-left-radius: var(--app-radius-lg);
    border-top-right-radius: var(--app-radius-lg);
}

.patient-list > :last-child {
    border-bottom-right-radius: var(--app-radius-lg);
    border-bottom-left-radius: var(--app-radius-lg);
}

.patient-list > :only-child {
    border-radius: var(--app-radius-lg);
}

/* Ronda 3 — el cos de cada infant funciona com les històries recents d’Inici. */
.patient-list-card {
    position: relative;
    display: block;
    padding: 0;
    cursor: default;
}

.patient-list-card-link {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 16px 176px 16px 18px;
    color: inherit;
    text-decoration: none;
    transition: background .14s ease, box-shadow .14s ease;
}

.patient-list-card-link:hover,
.patient-list-card-link:focus-visible {
    color: inherit;
    text-decoration: none;
    background: var(--app-surface-soft);
}

.patient-list-card-link:hover .patient-name,
.patient-list-card-link:focus-visible .patient-name {
    color: var(--app-primary);
}

.patient-list-card-link:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid color-mix(in srgb, var(--app-primary) 28%, transparent);
    outline-offset: -3px;
}

.patient-list-card .patient-list-actions {
    position: absolute;
    top: 50%;
    right: 18px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transform: translateY(-50%);
}

.patient-list-card.is-inactive-patient .patient-list-card-link:hover,
.patient-list-card.is-inactive-patient .patient-list-card-link:focus-visible {
    background: #f7f6f3;
}

@media (max-width: 620px) {
    .patient-list-card {
        display: block;
    }

    .patient-list-card-link {
        padding: 16px 18px 10px;
    }

    .patient-list-card .patient-list-actions {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        padding: 0 18px 16px;
        transform: none;
    }

    .patient-list-card .patient-action-menu {
        margin-left: auto;
    }
}

/* ----------------------------------------------------------
   Clinical readiness — final visual parity
   Alertes i informació transversal comparteixen exactament
   la mateixa caixa; l'eina d'IA queda com a acció terciària.
---------------------------------------------------------- */
.clinical-readiness-card details.clinical-readiness-drawer {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    padding: 0;
    border: 1px solid #dfe3ea;
    border-radius: 11px;
    background: #fff;
    overflow: hidden;
    box-shadow: none;
}

.clinical-readiness-card details.clinical-readiness-drawer > summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #252936;
    font-size: 12px;
    font-weight: 760;
    line-height: 1.25;
    cursor: pointer;
    list-style: none;
    box-shadow: none;
}

.clinical-readiness-card details.clinical-readiness-drawer > summary::-webkit-details-marker {
    display: none;
}

.clinical-readiness-card details.clinical-readiness-drawer > summary::before {
    content: "▸";
    display: inline-block;
    flex: 0 0 auto;
    margin-right: 7px;
    color: #596170;
    transition: transform .16s ease;
}

.clinical-readiness-card details.clinical-readiness-drawer[open] > summary::before {
    transform: rotate(90deg);
}

.clinical-readiness-card details.clinical-readiness-drawer > summary:hover {
    background: #f8f9fb;
    color: #252936;
}

.clinical-readiness-card details.clinical-readiness-drawer[open] > summary {
    border-bottom: 1px solid #eceef2;
}

/* Evita que cap capa visual posterior faci visibles comptadors a zero. */
.clinical-readiness-card [hidden] {
    display: none !important;
}

/* Eina opcional: petita, blanca i amb una mica més d'aire respecte els desplegables. */
.clinical-readiness-card .clinical-organization-utility {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-top: 14px;
    padding: 0;
    border: 0;
}

.clinical-readiness-card .clinical-organization-utility .clinical-utility-button {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #d9dde5;
    border-radius: 8px;
    background: #fff;
    color: #4d5563;
    box-shadow: none;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transform: none;
}

.clinical-readiness-card .clinical-organization-utility .clinical-utility-button:hover {
    border-color: #c9ced8;
    background: #fff;
    color: #2f3744;
    box-shadow: 0 1px 3px rgba(25, 31, 45, .05);
    transform: none;
}

.clinical-readiness-card .clinical-organization-utility .clinical-utility-button:active {
    background: #f8f9fb;
    transform: none;
}

/* Quan una alerta o el menú lateral porta a un camp concret, remarquem només aquell control. */
[data-uccap-dynamic] .form-field.is-navigation-target {
    position: relative;
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(91, 91, 255, .14);
    background: rgba(91, 91, 255, .035);
    transition: box-shadow .2s ease, background .2s ease;
}

[data-uccap-dynamic] .form-field.is-navigation-target > label {
    color: #3949b9;
}

/* ----------------------------------------------------------
   Separació visual: dades estructurals vs revisió clínica
---------------------------------------------------------- */
.report-structure-panel {
    position: relative;
}

.report-structure-panel.is-ready {
    border-color: color-mix(in srgb, var(--app-success) 30%, white);
    background: color-mix(in srgb, var(--app-success) 5%, white);
}

.report-structure-status {
    color: var(--app-text-soft);
}

.clinical-review-panel {
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--app-primary) 16%, var(--app-border-soft));
    border-radius: var(--app-radius-md);
    background: color-mix(in srgb, var(--app-primary) 2.5%, white);
}

.clinical-review-panel-heading {
    margin-bottom: 12px;
}

.clinical-review-panel-heading > span {
    display: block;
    color: var(--app-text-muted);
    font-size: 11px;
    font-weight: 780;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.clinical-review-panel-heading > p {
    margin: 3px 0 0;
    color: var(--app-text-soft);
    font-size: 12.5px;
    line-height: 1.45;
}

.clinical-review-panel .clinical-readiness-stack {
    margin-top: 0;
}

.clinical-review-status {
    margin: 12px 1px 0 !important;
    color: var(--app-text-soft);
    font-size: 12.5px;
}

.clinical-review-panel--form {
    margin-top: 2px;
}

/* A la vista de la història, els dos indicadors ocupen files diferents. */
.ai-generator-panel > .report-structure-panel {
    grid-column: 1 / -1 !important;
    grid-row: 1;
}

.ai-generator-panel > .clinical-review-panel {
    grid-column: 1 / -1 !important;
    grid-row: 2;
}

.ai-generator-panel > .ai-generator-copy {
    grid-row: 3;
}

.ai-generator-panel > .ai-generator-form {
    grid-row: 3;
}

.ai-generator-panel.is-blocked > .ai-generator-copy {
    grid-row: 3;
}

@media (max-width: 900px) {
    .ai-generator-panel > .report-structure-panel,
    .ai-generator-panel > .clinical-review-panel,
    .ai-generator-panel > .ai-generator-copy,
    .ai-generator-panel > .ai-generator-form,
    .ai-generator-panel.is-blocked > .ai-generator-copy {
        grid-column: 1 !important;
        grid-row: auto;
        max-width: none;
    }
}

/* ==========================================================
   AION UX 2026 · account & delegated administration
========================================================== */

.navbar .nav-account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    max-width: 230px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(255, 255, 255, .045);
    color: rgba(255, 255, 255, .76);
    text-decoration: none;
}

.navbar .nav-account-link:hover {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

.navbar .nav-account-link.nav-active,
.navbar .nav-account-link.nav-active:hover {
    background: rgba(101, 84, 255, .2);
    border-color: rgba(130, 117, 255, .38);
    color: #fff;
}

.nav-account-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.nav-account-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 650;
}

.status-pill.is-admin {
    color: var(--app-primary);
    background: var(--app-primary-soft);
}

.status-pill.is-standard {
    color: var(--app-text-muted);
    background: var(--app-surface-muted);
}

.account-page {
    padding-bottom: 54px;
}

.account-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.account-access-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--app-border-soft);
    border-radius: 999px;
    background: var(--app-surface-muted);
    color: var(--app-text-muted);
    font-size: 12px;
    font-weight: 750;
}

.account-access-badge.is-admin {
    border-color: rgba(101, 84, 255, .2);
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

.account-flash {
    margin-top: 18px;
}

.account-summary-card {
    margin-top: 18px;
    padding: 26px;
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-xs);
}

.account-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.account-card-heading h2,
.account-card-heading p {
    margin-top: 0;
}

.account-card-heading h2 {
    margin-bottom: 0;
}

.account-card-heading .helper-text {
    max-width: 330px;
    margin-bottom: 0;
    text-align: right;
}

.account-readonly-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.account-readonly-grid > div {
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-soft);
}

.account-readonly-grid dt {
    margin-bottom: 5px;
    color: var(--app-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.account-readonly-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--app-text);
    font-weight: 650;
}

.account-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.account-setting-card {
    padding: 26px;
}

.account-setting-card > .helper-text {
    margin: -8px 0 12px;
}

.account-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: var(--app-radius-sm);
    background: var(--app-primary-soft);
    color: var(--app-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.account-password-requirements {
    margin: 14px 0 0;
}

@media (max-width: 1120px) {
    .navbar .nav-account-link {
        max-width: 185px;
    }
}

@media (max-width: 920px) {
    .navbar .nav-account-link {
        width: 38px;
        min-width: 38px;
        max-width: 38px;
        padding: 0;
    }

    .navbar .nav-account-label {
        display: none;
    }

    .account-settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .navbar .nav-right {
        gap: 4px !important;
    }

    .account-page-header,
    .account-card-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-card-heading .helper-text {
        max-width: none;
        text-align: left;
    }

    .account-readonly-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   AION UX 2026 · professional management modal
   Keep administration actions out of the table flow so rows
   remain compact and long labels are never clipped.
========================================================== */

.professional-actions-cell {
    width: 1%;
    white-space: nowrap;
}

.professional-manage-trigger {
    min-width: 96px;
}

.professional-actions-modal {
    padding: 24px;
}

.professional-actions-modal-card {
    width: min(100%, 560px);
    max-height: min(760px, calc(100vh - 48px));
    overflow-y: auto;
    padding: 0;
    border-radius: 20px;
}

.professional-actions-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 24px 19px;
    border-bottom: 1px solid var(--app-border-soft);
}

.professional-actions-modal-header .eyebrow {
    margin: 0 0 5px;
}

.professional-actions-modal-header h2 {
    margin: 0;
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.2;
}

.professional-actions-modal-meta {
    margin-top: 7px !important;
    color: var(--app-text-muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.professional-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--app-border-soft);
    border-radius: 10px;
    background: var(--app-surface);
    color: var(--app-text-muted);
    font: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.professional-modal-close:hover,
.professional-modal-close:focus-visible {
    border-color: var(--app-border);
    color: var(--app-primary);
    outline: none;
}

.professional-action-list {
    display: grid;
    gap: 8px;
    padding: 16px 18px 18px;
}

.professional-action-list form {
    margin: 0;
}

.professional-action-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    min-height: 66px;
    padding: 13px 15px;
    border: 1px solid var(--app-border-soft);
    border-radius: 13px;
    background: var(--app-surface);
    color: var(--app-text);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.professional-action-button:hover,
.professional-action-button:focus-visible {
    border-color: rgba(101, 84, 255, .30);
    background: var(--app-primary-soft);
    outline: none;
    transform: translateY(-1px);
}

.professional-action-button > span:first-child {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.professional-action-button strong {
    color: inherit;
    font-size: 13px;
    font-weight: 750;
}

.professional-action-button small {
    color: var(--app-text-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    white-space: normal;
}

.professional-action-arrow {
    flex: 0 0 auto;
    color: var(--app-text-muted);
    font-size: 22px;
    line-height: 1;
}

.professional-action-button.is-danger {
    border-color: rgba(180, 58, 69, .18);
    color: var(--app-danger);
    background: rgba(180, 58, 69, .035);
}

.professional-action-button.is-danger:hover,
.professional-action-button.is-danger:focus-visible {
    border-color: rgba(180, 58, 69, .30);
    background: rgba(180, 58, 69, .075);
}

.professional-actions-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 15px 18px 18px;
    border-top: 1px solid var(--app-border-soft);
    background: var(--app-surface-soft);
}

@media (max-width: 620px) {
    .professional-actions-modal {
        align-items: flex-end;
        padding: 10px;
    }

    .professional-actions-modal-card {
        width: 100%;
        max-height: calc(100vh - 20px);
        border-radius: 18px;
    }

    .professional-actions-modal-header {
        padding: 20px 18px 16px;
    }

    .professional-action-list {
        padding: 12px;
    }

    .professional-actions-modal-footer {
        padding: 12px;
    }

    .professional-actions-modal-footer .secondary-button {
        width: 100%;
    }
}

/* ----------------------------------------------------------
   Assignació de professionals als infants
---------------------------------------------------------- */
.patient-list-toolbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.patient-assignment-filter-field select {
    min-width: 165px;
}

.patient-list-card-link {
    padding-right: 390px;
}

.patient-list-card .patient-list-actions {
    gap: 14px;
}

.patient-assigned-professional {
    display: grid;
    max-width: 205px;
    gap: 2px;
    text-align: right;
    line-height: 1.2;
}

.patient-assigned-professional-label {
    color: var(--app-text-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.patient-assigned-professional-name {
    overflow: hidden;
    color: var(--app-text);
    font-size: 13px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-assigned-professional-name.is-unassigned {
    color: var(--app-text-muted);
    font-weight: 650;
}

.patient-action-menu-content--wide {
    min-width: 290px;
}

.patient-assignment-form {
    display: grid;
    gap: 7px;
}

.patient-assignment-form label {
    color: var(--app-text-muted);
    font-size: 11px;
    font-weight: 750;
}

.patient-assignment-form select {
    width: 100%;
    min-width: 0;
}

.patient-action-separator {
    height: 1px;
    margin: 2px 0;
    background: var(--app-border-soft);
}

@media (max-width: 940px) {
    .patient-list-card-link {
        padding-right: 315px;
    }

    .patient-assigned-professional {
        max-width: 140px;
    }
}

@media (max-width: 760px) {
    .patient-list-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .patient-list-toolbar .patient-search-bar {
        grid-column: 1 / -1;
    }

    .patient-assignment-filter-field select,
    .patient-sort-field select {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 620px) {
    .patient-list-card-link {
        padding-right: 18px;
    }

    .patient-list-card .patient-list-actions {
        align-items: flex-end;
        gap: 10px;
    }

    .patient-assigned-professional {
        max-width: min(56vw, 230px);
        text-align: left;
    }

    .patient-list-card .patient-action-menu {
        margin-left: auto;
    }

    .patient-action-menu-content--wide {
        min-width: min(290px, calc(100vw - 36px));
    }
}

/* ----------------------------------------------------------
   Correcció d'apilament del menú d'accions al llistat d'infants
   Evita que les dades i botons de les files següents se superposin
   al desplegable quan està obert.
---------------------------------------------------------- */
.patient-list-card:has(.patient-action-menu[open]) {
    z-index: 90;
}

.patient-list-card:has(.patient-action-menu[open]) .patient-list-actions {
    z-index: 91;
}

.patient-list-card:has(.patient-action-menu[open]) .patient-action-menu-content {
    z-index: 92;
}

.patient-action-menu-content--wide {
    width: 310px;
    max-width: calc(100vw - 36px);
}

.patient-assignment-form select,
.patient-assignment-form .secondary-button,
.patient-action-menu-content--wide > form > .compact-button {
    position: relative;
    z-index: 1;
}

@media (max-width: 620px) {
    .patient-action-menu-content--wide {
        width: min(310px, calc(100vw - 36px));
    }
}

/* ----------------------------------------------------------
   Compte actiu al navbar
   Manté permanentment el mateix aspecte que abans només es veia en hover.
---------------------------------------------------------- */
.navbar .nav-right a.nav-account-link.nav-active,
.navbar .nav-right a.nav-account-link.nav-active:hover,
.navbar .nav-right a.nav-account-link.nav-active:focus-visible {
    background: rgba(101, 84, 255, .2);
    border: 1px solid rgba(130, 117, 255, .38);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
    padding: 0 11px;
    min-height: 38px;
    border-radius: 999px;
    opacity: 1;
}

/* ----------------------------------------------------------
   Preparació d'informe des del botó superior
---------------------------------------------------------- */
.report-preparation-trigger {
    font: inherit;
}

.report-preparation-modal {
    z-index: 220;
}

.report-preparation-modal-card {
    width: min(440px, calc(100vw - 36px));
    max-width: 440px;
    padding: 24px;
}

.report-preparation-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.report-preparation-modal-header .eyebrow {
    margin-bottom: 7px;
}

.report-preparation-modal-header h2 {
    margin: 0;
}

.report-preparation-modal-close {
    display: inline-grid;
    flex: 0 0 auto;
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: var(--app-surface-soft);
    color: var(--app-text-soft);
    box-shadow: none;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

.report-preparation-modal-close:hover,
.report-preparation-modal-close:focus-visible {
    transform: none;
    border-color: var(--app-primary);
    background: var(--app-primary-soft);
    color: var(--app-primary);
    box-shadow: none;
}

.report-preparation-form {
    display: grid;
    gap: 22px;
}

.report-preparation-language {
    margin: 0;
}

.report-preparation-language select {
    width: 100%;
}

.report-preparation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.aion-generate-button {
    position: relative;
    min-width: 122px;
    overflow: hidden;
    border-color: transparent;
    background: linear-gradient(
        110deg,
        var(--aion-azure) 0%,
        var(--aion-iris) 30%,
        #8a63ff 55%,
        var(--aion-iris-deep) 75%,
        var(--aion-azure) 100%
    );
    background-size: 260% 100%;
    color: #fff;
    box-shadow: 0 10px 24px rgba(101, 84, 255, .23);
    animation: aion-report-gradient 3.4s ease-in-out infinite;
}

.aion-generate-button:hover,
.aion-generate-button:focus-visible {
    transform: translateY(-1px);
    border-color: transparent;
    background: linear-gradient(
        110deg,
        var(--aion-azure) 0%,
        var(--aion-iris) 30%,
        #8a63ff 55%,
        var(--aion-iris-deep) 75%,
        var(--aion-azure) 100%
    );
    background-size: 260% 100%;
    color: #fff;
    box-shadow: 0 14px 30px rgba(101, 84, 255, .30);
}

.aion-generate-button:disabled {
    animation: none;
    opacity: .72;
}

@keyframes aion-report-gradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aion-generate-button {
        animation: none;
    }
}

@media (max-width: 520px) {
    .report-preparation-modal-card {
        padding: 20px;
    }

    .report-preparation-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .report-preparation-actions > button {
        width: 100%;
    }
}

/* ==========================================================
   AION UX 2026 · resum d'alertes de la història clínica
========================================================== */
.patient-alert-overview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 16px;
    border: 1px solid #eadbc2;
    border-radius: 16px;
    background: linear-gradient(135deg, #fffdf8 0%, #fffaf0 100%);
    box-shadow: 0 8px 22px rgba(42, 38, 28, .045);
}

.patient-alert-overview--detail {
    margin: 18px 0 20px;
}

.patient-alert-overview--edit {
    margin: 0 0 16px;
    scroll-margin-top: 92px;
}

.patient-alert-overview-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #fff4db;
    color: #a66c0e;
    flex: 0 0 auto;
}

.patient-alert-overview-icon svg {
    width: 20px;
    height: 20px;
}

.patient-alert-overview-copy {
    min-width: 0;
}

.patient-alert-overview-copy > strong {
    display: block;
    color: #252735;
    font-size: 14px;
    font-weight: 780;
    line-height: 1.3;
}

.patient-alert-overview-copy > p {
    margin: 3px 0 0;
    color: #656876;
    font-size: 12.5px;
    line-height: 1.45;
}

.patient-alert-overview-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.patient-alert-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 680;
    line-height: 1;
}

.patient-alert-type-pill.is-blocking {
    border-color: #f2cbd0;
    background: #fff0f1;
    color: #972b36;
}

.patient-alert-type-pill.is-review {
    border-color: #f0dfb2;
    background: #fff8e7;
    color: #805b14;
}

.patient-alert-review-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(91, 91, 255, .22);
    border-radius: 11px;
    background: #fff;
    color: var(--app-primary);
    font-size: 12.5px;
    font-weight: 760;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.patient-alert-review-link:hover,
.patient-alert-review-link:focus-visible {
    border-color: rgba(91, 91, 255, .38);
    background: color-mix(in srgb, var(--app-primary) 5%, white);
    color: var(--app-primary);
    box-shadow: 0 6px 16px rgba(91, 91, 255, .09);
    transform: translateY(-1px);
}

.patient-alert-explanation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.patient-alert-explanation-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 11px;
}

.patient-alert-explanation-item.is-blocking {
    border-color: #f2cbd0;
    background: #fff0f1;
}

.patient-alert-explanation-item.is-review {
    border-color: #f0dfb2;
    background: #fff8e7;
}

.patient-alert-explanation-marker {
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-radius: 999px;
}

.patient-alert-explanation-item.is-blocking .patient-alert-explanation-marker {
    background: #c44754;
}

.patient-alert-explanation-item.is-review .patient-alert-explanation-marker {
    background: #d8a833;
}

.patient-alert-explanation-item strong,
.patient-alert-explanation-item span {
    display: block;
}

.patient-alert-explanation-item strong {
    margin-bottom: 2px;
    font-size: 11.5px;
    font-weight: 800;
}

.patient-alert-explanation-item.is-blocking strong {
    color: #8c2b35;
}

.patient-alert-explanation-item.is-review strong {
    color: #765314;
}

.patient-alert-explanation-item div > span {
    color: #63656f;
    font-size: 11.5px;
    line-height: 1.4;
}

#clinical-review-panel {
    scroll-margin-top: 92px;
}

@media (max-width: 760px) {
    .patient-alert-overview {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .patient-alert-review-link {
        grid-column: 1 / -1;
        width: 100%;
    }

    .patient-alert-explanation {
        grid-template-columns: 1fr;
    }
}


/* Avisos de connexió i sessió sense amagar ni esborrar el text pendent. */
.aion-connection-banner {
    position: sticky;
    top: 8px;
    z-index: 50;
    margin: 0 0 20px;
    padding: 14px 18px;
    border: 1px solid #d4a34d;
    border-radius: 14px;
    background: #fff7e5;
    color: #533a11;
    box-shadow: 0 6px 22px rgb(30 25 10 / 10%);
    animation: aion-status-appear 180ms ease-out;
}
.aion-connection-banner[hidden] { display: none; }
.aion-connection-banner p { margin: 0; color: inherit; }
.aion-connection-banner a { display: inline-block; margin-top: 8px; color: #49316b; text-decoration: underline; font-weight: 600; }
.navbar button.nav-logout { display: inline-flex; align-items: center; background: transparent; box-shadow: none; font: inherit; cursor: pointer; }
@keyframes aion-status-appear {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .aion-connection-banner { animation: none; }
}

/* Historial clínic versionat */
.patient-history-header .detail-subtitle {
    max-width: 760px;
    margin-bottom: 0;
}

.patient-history-info {
    margin: 0 0 22px;
    padding: 16px 18px;
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-muted);
}

.patient-history-info strong,
.patient-history-info p {
    margin: 0;
}

.patient-history-info p {
    margin-top: 5px;
    color: var(--app-text-muted);
    font-size: 14px;
}

.patient-history-empty {
    text-align: center;
}

.patient-history-empty h2 {
    margin-top: 0;
}

.patient-history-timeline {
    position: relative;
    display: grid;
    gap: 16px;
    padding-left: 28px;
}

.patient-history-timeline::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 8px;
    width: 2px;
    border-radius: 999px;
    background: var(--app-border);
}

.patient-history-entry {
    position: relative;
}

.patient-history-entry-marker {
    position: absolute;
    top: 24px;
    left: -27px;
    width: 14px;
    height: 14px;
    border: 3px solid var(--app-surface);
    border-radius: 50%;
    background: var(--app-text-muted);
    box-shadow: 0 0 0 1px var(--app-border);
}

.patient-history-entry.is-current .patient-history-entry-marker {
    background: var(--app-accent);
}

.patient-history-entry-card {
    padding: 18px 20px;
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-xs);
}

.patient-history-entry.is-current .patient-history-entry-card {
    border-color: color-mix(in srgb, var(--app-accent) 38%, var(--app-border-soft));
}

.patient-history-entry-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.patient-history-entry-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.patient-history-entry h2 {
    margin: 0;
    font-size: 16px;
}

.patient-history-entry-head p,
.patient-history-context {
    margin: 6px 0 0;
    color: var(--app-text-muted);
    font-size: 13px;
}

.patient-history-current-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--app-surface-muted);
    color: var(--app-accent);
    font-size: 11px;
    font-weight: 800;
}

.patient-history-restore-form {
    margin: 0;
    flex: 0 0 auto;
}

.patient-history-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.patient-history-fields span {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 9px;
    border: 1px solid var(--app-border-soft);
    border-radius: 999px;
    background: var(--app-surface-muted);
    color: var(--app-text-muted);
    font-size: 11.5px;
    font-weight: 650;
}

@media (max-width: 760px) {
    .patient-history-entry-head {
        display: grid;
    }

    .patient-history-restore-form,
    .patient-history-restore-form .secondary-button {
        width: 100%;
    }
}

/* =========================================================
   FAQs / guia d'ús
========================================================= */
.faq-page {
    max-width: 1180px;
}

.faq-page-header {
    align-items: flex-end;
    gap: 24px;
}

.faq-page-header > div:first-child {
    max-width: 780px;
}

.faq-profile-card {
    min-width: 250px;
    padding: 14px 16px;
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-xs);
}

.faq-profile-card span {
    display: block;
    margin-bottom: 3px;
    color: var(--app-text-muted);
    font-size: 11px;
    font-weight: 780;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.faq-profile-card strong {
    display: block;
    color: var(--app-text);
    font-size: 14px;
    line-height: 1.35;
}

.faq-tools {
    margin: 24px 0 14px;
    padding: 18px;
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-xs);
}

.faq-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.faq-search-wrap > svg {
    position: absolute;
    left: 16px;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: var(--app-text-muted);
    stroke-width: 1.8;
    stroke-linecap: round;
    pointer-events: none;
}

.faq-search-wrap input {
    width: 100%;
    min-height: 52px;
    padding: 12px 102px 12px 46px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-soft);
    color: var(--app-text);
    font-size: 15px;
}

.faq-search-wrap input:focus {
    outline: none;
    border-color: var(--app-primary);
    box-shadow: var(--app-focus);
}

.faq-search-clear {
    position: absolute;
    right: 9px;
    min-height: 34px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--app-radius-xs);
    background: transparent;
    color: var(--app-primary);
    font-size: 12px;
    font-weight: 760;
}

.faq-search-clear:hover {
    background: var(--app-primary-soft);
}

.faq-tools-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
}

.faq-result-count {
    margin: 0;
    color: var(--app-text-muted);
    font-size: 12px;
    font-weight: 680;
}

.faq-expand-actions {
    display: flex;
    gap: 8px;
}

.faq-expand-actions .secondary-button {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 12px;
}

.faq-category-nav {
    display: flex;
    gap: 8px;
    margin: 0 0 26px;
    padding: 2px 0 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.faq-category-nav a {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid var(--app-border-soft);
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-text-soft);
    font-size: 12px;
    font-weight: 720;
    text-decoration: none;
    white-space: nowrap;
}

.faq-category-nav a:hover,
.faq-category-nav a:focus-visible {
    border-color: color-mix(in srgb, var(--app-primary) 26%, var(--app-border));
    background: var(--app-primary-soft);
    color: var(--app-primary);
    outline: none;
}

.faq-sections {
    display: grid;
    gap: 22px;
}

.faq-section {
    scroll-margin-top: calc(var(--app-header-h) + 18px);
    padding: 22px;
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-xs);
}

.faq-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--app-border-soft);
}

.faq-section-heading .eyebrow {
    margin-bottom: 4px;
}

.faq-section-heading h2 {
    margin: 0 0 6px;
    font-size: clamp(20px, 2vw, 25px);
}

.faq-section-heading p:not(.eyebrow) {
    max-width: 730px;
    margin: 0;
    color: var(--app-text-soft);
    font-size: 13.5px;
}

.faq-section-count {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--app-surface-muted);
    color: var(--app-text-muted);
    font-size: 11px;
    font-weight: 760;
    white-space: nowrap;
}

.faq-list {
    display: grid;
    gap: 8px;
}

.faq-item {
    border: 1px solid var(--app-border-soft);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-soft);
    overflow: clip;
}

.faq-item[open] {
    border-color: color-mix(in srgb, var(--app-primary) 22%, var(--app-border-soft));
    background: var(--app-surface);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 54px;
    padding: 13px 15px;
    color: var(--app-text);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary:hover {
    background: color-mix(in srgb, var(--app-primary-soft) 55%, transparent);
}

.faq-item summary:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: -2px;
}

.faq-item summary svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--app-text-muted);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
}

.faq-item[open] summary svg {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 15px 15px;
}

.faq-answer p {
    max-width: 900px;
    margin: 0;
    color: var(--app-text-soft);
    font-size: 13.5px;
    line-height: 1.65;
}

.faq-empty-state {
    margin: 22px 0;
    padding: 30px 22px;
    border: 1px dashed var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface-soft);
    text-align: center;
}

.faq-empty-state strong {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
}

.faq-empty-state p {
    max-width: 650px;
    margin: 0 auto 16px;
    color: var(--app-text-soft);
    font-size: 13.5px;
}

.faq-help-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--app-primary) 18%, var(--app-border-soft));
    border-radius: var(--app-radius-lg);
    background: linear-gradient(135deg, var(--app-primary-soft), var(--app-surface));
}

.faq-help-card h2 {
    margin: 0 0 5px;
    font-size: 20px;
}

.faq-help-card p:not(.eyebrow) {
    max-width: 720px;
    margin: 0;
    color: var(--app-text-soft);
    font-size: 13.5px;
}

.faq-help-card .secondary-button {
    flex: 0 0 auto;
}

@media (max-width: 760px) {
    .faq-page-header,
    .faq-section-heading,
    .faq-tools-row,
    .faq-help-card {
        align-items: stretch;
        flex-direction: column;
    }

    .faq-profile-card {
        min-width: 0;
        width: 100%;
    }

    .faq-expand-actions {
        width: 100%;
    }

    .faq-expand-actions .secondary-button {
        flex: 1;
    }

    .faq-section {
        padding: 17px;
    }

    .faq-section-count {
        align-self: flex-start;
    }

    .faq-search-wrap input {
        padding-right: 84px;
    }

    .faq-help-card .secondary-button {
        align-self: flex-start;
    }
}

/* ==============================
   AION UX 2026 · trial patient privacy gate
============================== */

.patient-privacy-modal {
    z-index: 1300;
    backdrop-filter: blur(3px);
}

.patient-privacy-modal-card {
    width: min(100%, 650px);
    padding: 26px;
}

.patient-privacy-modal-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.patient-privacy-modal-heading .eyebrow {
    margin-bottom: 4px;
}

.patient-privacy-modal-heading h2 {
    margin: 0;
}

.patient-privacy-modal-icon {
    display: inline-flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid #f0c36a;
    border-radius: 50%;
    background: #fff8e8;
    color: #8a4b08;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.patient-privacy-modal-copy {
    display: grid;
    gap: 12px;
    color: var(--app-text-soft);
    line-height: 1.6;
}

.patient-privacy-modal-copy p {
    margin: 0;
}

.patient-privacy-modal-copy strong {
    color: var(--app-text);
}

.patient-privacy-acknowledgement {
    margin-top: 20px;
    border-color: rgba(98, 76, 255, 0.2);
    background: rgba(98, 76, 255, 0.055);
}

.patient-privacy-modal-error {
    margin: 16px 0 0;
}

.patient-privacy-modal-actions {
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 640px) {
    .patient-privacy-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .patient-privacy-modal-card {
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        padding: 20px;
    }

    .patient-privacy-modal-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .patient-privacy-modal-actions .secondary-button,
    .patient-privacy-modal-actions button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ----------------------------------------------------------
   Menú "Més accions" de la fitxa de l'infant
   El desplegable ha de flotar per sobre de la resta del contingut
   i no quedar retallat per la capçalera.
---------------------------------------------------------- */
.patient-detail-header {
    overflow: visible !important;
}

.patient-detail-header:has(.patient-header-action-menu[open]) {
    position: relative;
    z-index: 110;
}

.patient-header-action-menu[open] {
    position: relative;
    z-index: 120;
}

.patient-header-action-menu .patient-action-menu-content {
    z-index: 130;
}