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

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--bs-link-color, var(--medico-navy-700));
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

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

.content {
    padding-top: 1.1rem;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

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

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

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ==========================================================================
   Medico professional application themes
   This file loads after page styles and is the authoritative visual layer.
   Semantic state is carried by a restrained accent edge; actions retain the
   same navy surface and white label instead of changing to pastel colors.
   ========================================================================== */
:root,
[data-medico-theme="light"] {
    color-scheme: light;
    --medico-navy-950: #081f3d;
    --medico-navy-900: #0d2f57;
    --medico-navy-800: #143f70;
    --medico-navy-700: #1c528d;
    --medico-canvas: #f3f6fa;
    --medico-surface: #ffffff;
    --medico-surface-raised: #f8fafc;
    --medico-surface-muted: #edf2f7;
    --medico-text: #172033;
    --medico-text-muted: #536176;
    --medico-border: #c8d2df;
    --medico-border-strong: #8fa0b5;
    --medico-focus: #1773c7;
    --medico-danger: #b4232d;
    --medico-warning: #9a5b00;
    --medico-success: #14734b;
    --medico-info: #116f91;
    --medico-nav-link-color: #1c528d;
    --medico-action-bg: #0d2f57;
    --medico-action-fg: #ffffff;
    --medico-action-border: #143f70;
    --medico-action-hover-bg: #143f70;
    --medico-shadow: 0 2px 9px rgba(8, 31, 61, .10);
    --bs-body-color: var(--medico-text);
    --bs-body-bg: var(--medico-canvas);
    --bs-secondary-color: var(--medico-text-muted);
    --bs-secondary-bg: var(--medico-surface-muted);
    --bs-tertiary-bg: var(--medico-surface-raised);
    --bs-border-color: var(--medico-border);
    --bs-link-color: var(--medico-navy-700);
    --bs-link-hover-color: var(--medico-navy-950);
}

[data-medico-theme="dark"] {
    color-scheme: dark;
    --medico-navy-950: #07192f;
    --medico-navy-900: #102f54;
    --medico-navy-800: #174574;
    --medico-navy-700: #4f9ee8;
    --medico-canvas: #0b1220;
    --medico-surface: #111c2e;
    --medico-surface-raised: #17253a;
    --medico-surface-muted: #1c2c43;
    --medico-text: #f3f6fa;
    --medico-text-muted: #b8c4d3;
    --medico-border: #40516a;
    --medico-border-strong: #71829a;
    --medico-focus: #5db7ff;
    --medico-danger: #ff7882;
    --medico-warning: #ffc264;
    --medico-success: #54d59a;
    --medico-info: #62c9e9;
    --medico-nav-link-color: #7ec2ff;
    --medico-action-bg: #3d7ec4;
    --medico-action-fg: #ffffff;
    --medico-action-border: #7ec2ff;
    --medico-action-hover-bg: #4f9ee8;
    --medico-shadow: 0 3px 12px rgba(0, 0, 0, .35);
    --bs-body-color: var(--medico-text);
    --bs-body-bg: var(--medico-canvas);
    --bs-secondary-color: var(--medico-text-muted);
    --bs-secondary-bg: var(--medico-surface-muted);
    --bs-tertiary-bg: var(--medico-surface-raised);
    --bs-border-color: var(--medico-border);
    --bs-link-color: #7ec2ff;
    --bs-link-hover-color: #b7ddff;
}

[data-medico-theme="high-contrast"] {
    color-scheme: dark;
    --medico-navy-950: #000000;
    --medico-navy-900: #061a31;
    --medico-navy-800: #0b315b;
    --medico-navy-700: #7dd3fc;
    --medico-canvas: #000000;
    --medico-surface: #050505;
    --medico-surface-raised: #0e0e0e;
    --medico-surface-muted: #171717;
    --medico-text: #ffffff;
    --medico-text-muted: #f1f5f9;
    --medico-border: #ffffff;
    --medico-border-strong: #ffffff;
    --medico-focus: #67e8f9;
    --medico-danger: #ff8b94;
    --medico-warning: #ffd38a;
    --medico-success: #79e9b2;
    --medico-info: #8be5ff;
    --medico-nav-link-color: #8be5ff;
    --medico-action-bg: #ffffff;
    --medico-action-fg: #000000;
    --medico-action-border: #ffffff;
    --medico-action-hover-bg: #d7d7d7;
    --medico-shadow: 0 0 0 1px #ffffff;
    --bs-body-color: #ffffff;
    --bs-body-bg: #000000;
    --bs-secondary-color: #f1f5f9;
    --bs-secondary-bg: #171717;
    --bs-tertiary-bg: #0e0e0e;
    --bs-border-color: #ffffff;
    --bs-link-color: #8be5ff;
    --bs-link-hover-color: #ffffff;
}

html,
body,
.medico-shell,
.medico-shell-main,
.medico-shell-body {
    background: var(--medico-canvas) !important;
    color: var(--medico-text) !important;
}

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

h1, h2, h3, h4, h5, h6,
.text-body,
.text-dark {
    color: var(--medico-text) !important;
}

.text-muted,
.text-secondary,
.form-text,
small {
    color: var(--medico-text-muted) !important;
}

.medico-topbar {
    background: var(--medico-surface) !important;
    color: var(--medico-text) !important;
    border-color: var(--medico-border) !important;
    box-shadow: var(--medico-shadow);
}

.medico-system-menu {
    position: relative;
}

.medico-system-menu > summary {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    list-style: none;
    user-select: none;
}

.medico-system-menu > summary::-webkit-details-marker {
    display: none;
}

.medico-system-menu > summary::after {
    content: "\25BE";
    font-size: .7rem;
    margin-left: .45rem;
}

.medico-system-menu[open] > summary {
    background: var(--medico-action-bg) !important;
    border-color: var(--medico-action-border) !important;
    color: var(--medico-action-fg) !important;
}

.medico-system-menu-panel {
    background: var(--medico-surface);
    border: 1px solid var(--medico-border);
    border-radius: .45rem;
    box-shadow: var(--medico-shadow);
    display: grid;
    min-width: 15rem;
    padding: .4rem;
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    z-index: 1100;
}

.medico-system-menu-panel a {
    align-items: center;
    border-radius: .3rem;
    color: var(--medico-text);
    display: grid;
    gap: .65rem;
    grid-template-columns: 1.15rem 1fr;
    padding: .55rem .65rem;
    text-decoration: none;
}

.medico-system-menu-panel a:hover,
.medico-system-menu-panel a:focus-visible {
    background: var(--medico-surface-muted);
    color: var(--medico-nav-link-color);
    outline: 2px solid transparent;
}

.medico-shell-sidebar,
.medico-sidebar {
    background: var(--medico-navy-950) !important;
}

.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.accordion-item,
.offcanvas,
.popover,
.mc-dialog,
.mf-modal,
.chart-modal,
.portal-readable-card,
.e-card {
    background: var(--medico-surface) !important;
    color: var(--medico-text) !important;
    border-color: var(--medico-border) !important;
}

.card,
.modal-content,
.mc-dialog,
.mf-modal,
.chart-modal,
.portal-readable-card {
    box-shadow: var(--medico-shadow);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.mc-dialog-header,
.mc-dialog-footer,
.chart-modal-header,
.chart-modal-footer,
.accordion-button,
.dropdown-header {
    background: var(--medico-surface-raised) !important;
    color: var(--medico-text) !important;
    border-color: var(--medico-border) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
select,
textarea,
option,
.form-control,
.form-select,
.form-check-input,
.input-group-text,
.e-input-group,
.e-control-wrapper,
.e-input,
.e-dropdownbase,
.e-ddl,
.e-multiselect,
.e-richtexteditor,
.e-content,
[contenteditable="true"] {
    background-color: var(--medico-surface) !important;
    color: var(--medico-text) !important;
    border-color: var(--medico-border-strong) !important;
}

/* A checked box keeps its accent fill. Bootstrap paints the check/dash glyph in
   white on the accent background; the surface override above repainted it white
   on white, so every checked control read as unchecked (company permission grid
   showed four roles with no permissions). */
.form-check-input:checked,
.form-check-input:indeterminate {
    background-color: var(--medico-navy-800) !important;
    border-color: var(--medico-navy-800) !important;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder,
.e-input::placeholder {
    color: var(--medico-text-muted) !important;
    opacity: .9;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly],
fieldset:disabled .form-control {
    background: var(--medico-surface-muted) !important;
    color: var(--medico-text-muted) !important;
    opacity: 1;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible,
.e-btn:focus-visible,
a:focus-visible,
button:focus-visible {
    border-color: var(--medico-focus) !important;
    outline: 2px solid var(--medico-focus) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* One professional action language: navy surface, white label, state edge. */
.btn:not(.btn-link):not(.btn-close),
button:not(.help-btn):not(.btn-link):not(.btn-close):not(.medico-nav-link),
.e-btn,
.login-submit-btn,
.medico-shell-sidebar-toggle {
    --bs-btn-color: var(--medico-action-fg);
    --bs-btn-bg: var(--medico-action-bg);
    --bs-btn-border-color: var(--medico-action-border);
    --bs-btn-hover-color: var(--medico-action-fg);
    --bs-btn-hover-bg: var(--medico-action-hover-bg);
    --bs-btn-hover-border-color: var(--medico-focus);
    --bs-btn-active-color: var(--medico-action-fg);
    --bs-btn-active-bg: var(--medico-action-hover-bg);
    --bs-btn-active-border-color: var(--medico-focus);
    --bs-btn-disabled-color: var(--medico-text-muted);
    --bs-btn-disabled-bg: var(--medico-surface-muted);
    --bs-btn-disabled-border-color: var(--medico-border);
    background: var(--medico-action-bg) !important;
    border: 1px solid var(--medico-action-border) !important;
    color: var(--medico-action-fg) !important;
    font-weight: 600;
    text-decoration: none;
}

.btn:not(.btn-link):not(.btn-close):hover,
button:not(.help-btn):not(.btn-link):not(.btn-close):not(.medico-nav-link):hover,
.e-btn:hover,
.login-submit-btn:hover,
.medico-shell-sidebar-toggle:hover {
    background: var(--medico-action-hover-bg) !important;
    border-color: var(--medico-focus) !important;
    color: var(--medico-action-fg) !important;
}

.btn-success,
.btn-outline-success { border-left: 4px solid var(--medico-success) !important; }
.btn-danger,
.btn-outline-danger { border-left: 4px solid var(--medico-danger) !important; }
.btn-warning,
.btn-outline-warning { border-left: 4px solid var(--medico-warning) !important; }
.btn-info,
.btn-outline-info { border-left: 4px solid var(--medico-info) !important; }

.btn:disabled,
.btn.disabled,
button:not(.help-btn):disabled,
.e-btn:disabled,
.e-btn.e-disabled {
    background: var(--medico-surface-muted) !important;
    border-color: var(--medico-border) !important;
    color: var(--medico-text-muted) !important;
    cursor: not-allowed;
    opacity: .72;
}

.btn-link {
    color: var(--medico-nav-link-color) !important;
}

.nav-tabs,
.nav-pills {
    border-color: var(--medico-border) !important;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    background: var(--medico-surface-raised) !important;
    border-color: var(--medico-border) !important;
    color: var(--medico-text) !important;
    font-weight: 600;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background: var(--medico-action-bg) !important;
    border-color: var(--medico-focus) !important;
    color: var(--medico-action-fg) !important;
}

.table,
.portal-readable-table,
.e-grid,
.e-grid .e-table {
    --bs-table-color: var(--medico-text);
    --bs-table-bg: var(--medico-surface);
    --bs-table-border-color: var(--medico-border);
    --bs-table-striped-bg: var(--medico-surface-raised);
    --bs-table-striped-color: var(--medico-text);
    --bs-table-hover-bg: var(--medico-surface-muted);
    --bs-table-hover-color: var(--medico-text);
    color: var(--medico-text) !important;
    background: var(--medico-surface) !important;
    border-color: var(--medico-border) !important;
}

.table > :not(caption) > * > *,
.portal-readable-table th,
.portal-readable-table td,
.e-grid .e-rowcell,
.e-grid .e-headercell {
    background: inherit !important;
    color: var(--medico-text) !important;
    border-color: var(--medico-border) !important;
}

.alert {
    background: var(--medico-surface-raised) !important;
    color: var(--medico-text) !important;
    border: 1px solid var(--medico-border) !important;
    border-left-width: 5px !important;
}

.alert-danger { border-left-color: var(--medico-danger) !important; }
.alert-warning { border-left-color: var(--medico-warning) !important; }
.alert-success { border-left-color: var(--medico-success) !important; }
.alert-info,
.alert-primary { border-left-color: var(--medico-info) !important; }

.badge:not(.bg-success):not(.bg-danger):not(.bg-warning),
.portal-readable-badge {
    background: var(--medico-action-bg) !important;
    color: var(--medico-action-fg) !important;
    border: 1px solid var(--medico-action-border);
}

/* Bootstrap's default .badge.bg-warning text color is dark-on-yellow via `text-dark` on the element
   (ChartWatcherFindingsTable.SeverityCss already adds it); this rule only restores the yellow fill
   the blanket override above would otherwise steal. */
.badge.bg-warning {
    background: #f59e0b !important;
    color: #1a1a1a !important;
    border: 1px solid #d97706;
}

.bg-light,
.bg-white,
.bg-body,
.bg-body-tertiary {
    background-color: var(--medico-surface) !important;
    color: var(--medico-text) !important;
}

.border,
.border-top,
.border-end,
.border-bottom,
.border-start,
hr {
    border-color: var(--medico-border) !important;
}

.progress {
    background: var(--medico-surface-muted) !important;
    border: 1px solid var(--medico-border);
}

.progress-bar {
    background: var(--medico-navy-700) !important;
    color: #ffffff !important;
}

/* AI Portal owns custom flex surfaces rather than Bootstrap cards. */
.aiportal-page {
    background: var(--medico-canvas) !important;
    color: var(--medico-text) !important;
}

.aiportal-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 8px 16px;
    background: var(--medico-surface-raised);
    border-bottom: 1px solid var(--medico-border);
    position: relative;
    z-index: 3;
    overflow: visible;
}

.aiportal-chart-title {
    margin: 0;
    color: var(--medico-text) !important;
    font-size: 1.5rem;
}

.aiportal-working-section {
    color: var(--medico-text) !important;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin: .2rem 0 .15rem;
}

.aiportal-patient-summary {
    color: var(--medico-text-muted);
    font-size: .85rem;
}

.aiportal-toolbar {
    display: flex;
    flex: 1;
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.aiportal-action-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.aiportal-action-toolbar > .btn {
    flex: 0 0 auto;
    font-size: .78rem;
    line-height: 1.2;
    padding: .3rem .48rem;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.aiportal-action-toolbar > .badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

.aiportal-find-toolbar {
    display: flex;
    flex: 1 0 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.aiportal-find-input {
    flex: 1 1 12rem;
    min-width: 10rem;
    max-width: 20rem;
}

.aiportal-replace-input {
    flex: 1 1 11rem;
    min-width: 9rem;
    max-width: 18rem;
}

.aiportal-find-status {
    flex: 1 0 100%;
    color: var(--medico-text-muted);
    font-size: .8rem;
    text-align: right;
}

.aiportal-loading-strip {
    background: var(--medico-surface-muted);
    border-bottom: 1px solid var(--medico-border);
    color: var(--medico-text);
    padding: .75rem 1rem .85rem;
}

.aiportal-loading-summary {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.aiportal-loading-summary .spinner-border {
    color: var(--medico-focus);
    flex: 0 0 auto;
    margin-top: .15rem;
}

.aiportal-loading-title {
    color: var(--medico-text);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
}

.aiportal-loading-stage {
    color: var(--medico-focus);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
    margin-top: .22rem;
}

.aiportal-loading-detail {
    color: var(--medico-text-muted);
    font-size: .78rem;
    line-height: 1.4;
    margin-top: .2rem;
}

.aiportal-loading-progress {
    background: var(--medico-border);
    border-radius: 999px;
    height: .3rem;
    margin-top: .65rem;
    overflow: hidden;
    position: relative;
}

.aiportal-loading-progress-indicator {
    animation: aiportal-loading-progress 1.55s ease-in-out infinite;
    background: var(--medico-focus);
    border-radius: inherit;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    transform: translateX(-100%);
    width: 42%;
}

@keyframes aiportal-loading-progress {
    0% { transform: translateX(-100%); }
    55% { transform: translateX(105%); }
    100% { transform: translateX(240%); }
}

.aiportal-workspace-frame {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--medico-canvas);
}

.aiportal-tree-surface {
    width: 230px;
    min-width: 150px;
    max-width: 480px;
    resize: horizontal;
    padding: 8px;
    overflow: auto;
    background: var(--medico-surface);
    color: var(--medico-text);
    border-right: 1px solid var(--medico-border);
    font-size: .9rem;
}

.aiportal-search-label {
    color: var(--medico-text);
    font-weight: 600;
}

@media (max-width: 900px) {
    .aiportal-chart-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .aiportal-toolbar,
    .aiportal-find-toolbar {
        width: 100%;
        justify-content: flex-start;
    }

    .aiportal-action-toolbar {
        justify-content: flex-start;
        width: 100%;
    }

    .aiportal-find-status {
        text-align: left;
    }
}

.aiportal-context-menu {
    position: fixed;
    z-index: 2100;
    min-width: 150px;
    padding: 4px;
    background: var(--medico-surface);
    color: var(--medico-text);
    border: 1px solid var(--medico-border-strong);
    border-radius: 4px;
    box-shadow: var(--medico-shadow);
}

.aiportal-content-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0 12px;
    overflow: hidden;
    background: var(--medico-canvas);
    color: var(--medico-text);
}

.aiportal-section-heading {
    padding: 8px 0;
    color: var(--bs-link-color);
    border-bottom: 1px solid var(--medico-border);
    font-size: 1.1rem;
    font-weight: 600;
}

.aiportal-editor-surface {
    flex: 1;
    padding-top: 12px;
    overflow: auto;
    background: var(--medico-surface);
    color: var(--medico-text);
}

html[data-medico-theme="dark"] .aiportal-tree-surface button.btn-link,
body[data-medico-theme="dark"] .aiportal-tree-surface button.btn-link {
    color: #7ec2ff !important;
}

html[data-medico-theme="high-contrast"] .aiportal-tree-surface button.btn-link,
body[data-medico-theme="high-contrast"] .aiportal-tree-surface button.btn-link {
    color: #8be5ff !important;
}

[data-medico-theme="dark"] .login-form-panel,
[data-medico-theme="high-contrast"] .login-form-panel,
[data-medico-theme="dark"] .aiportal-workspace,
[data-medico-theme="high-contrast"] .aiportal-workspace,
[data-medico-theme="dark"] .aiportal-editor-pane,
[data-medico-theme="high-contrast"] .aiportal-editor-pane {
    background: var(--medico-canvas) !important;
    color: var(--medico-text) !important;
}

[data-medico-theme="dark"] .login-field-label,
[data-medico-theme="dark"] .login-product-name,
[data-medico-theme="high-contrast"] .login-field-label,
[data-medico-theme="high-contrast"] .login-product-name,
[data-medico-theme="dark"] .appt-info-value,
[data-medico-theme="high-contrast"] .appt-info-value {
    color: var(--medico-text) !important;
}

[data-medico-theme="dark"] .appt-info-bar,
[data-medico-theme="high-contrast"] .appt-info-bar,
[data-medico-theme="dark"] .iar-narrative,
[data-medico-theme="high-contrast"] .iar-narrative,
[data-medico-theme="dark"] .iar-ros-group,
[data-medico-theme="high-contrast"] .iar-ros-group {
    background: var(--medico-surface-raised) !important;
    color: var(--medico-text) !important;
    border-color: var(--medico-border) !important;
}

[data-medico-theme="high-contrast"] *,
[data-medico-theme="high-contrast"] *::before,
[data-medico-theme="high-contrast"] *::after {
    text-shadow: none !important;
}

/* AutoForm tabs and the selected tree node are navigation, not navy action pills.
   The global button rule must not hide the active subsection on dark/high-contrast. */
.autoform-tab-list button {
    background: var(--medico-surface) !important;
    border: 1.5px solid var(--medico-border-strong) !important;
    color: var(--medico-text) !important;
}

.autoform-tab-list button.active {
    background: var(--medico-action-bg) !important;
    border-color: var(--medico-action-border) !important;
    color: var(--medico-action-fg) !important;
}

.aiportal-html-tree-leaf.btn-light,
.aiportal-html-tree-group.btn-light,
.aiportal-html-tree-leaf.btn-light.active,
.aiportal-html-tree-group.btn-light.active {
    background: var(--medico-surface-raised) !important;
    border: 1px solid var(--medico-focus) !important;
    color: var(--medico-text) !important;
}

.aiportal-chartwatcher-report-link {
    background: none !important;
    border: none !important;
    color: var(--medico-nav-link-color) !important;
}

.aiportal-changelog-content {
    background: var(--medico-surface-muted) !important;
    border: 1px solid var(--medico-border);
    color: var(--medico-text) !important;
    border-radius: .35rem;
    padding: .35rem .5rem;
    max-height: 140px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .75rem;
    margin: 0;
}

/* Syncfusion Fluent2-dark / highcontrast CSS paints editor paragraphs with
   light-theme ink. Force clinical content onto the active Medico tokens. */
[data-medico-theme="dark"] .e-richtexteditor .e-content,
[data-medico-theme="dark"] .e-richtexteditor .e-content p,
[data-medico-theme="dark"] .e-richtexteditor .e-content li,
[data-medico-theme="dark"] .e-richtexteditor .e-content span,
[data-medico-theme="dark"] .e-richtexteditor .e-content div,
[data-medico-theme="dark"] .ql-editor,
[data-medico-theme="dark"] .ql-editor p,
[data-medico-theme="dark"] .ql-editor li,
[data-medico-theme="dark"] .portal-html-editor-body,
[data-medico-theme="dark"] .portal-html-editor-body p,
[data-medico-theme="dark"] .autoform-tab-summary-heading,
[data-medico-theme="dark"] .autoform-tab-summary-body,
[data-medico-theme="dark"] .autoform-group-title,
[data-medico-theme="dark"] .autoform-field-label,
[data-medico-theme="high-contrast"] .e-richtexteditor .e-content,
[data-medico-theme="high-contrast"] .e-richtexteditor .e-content p,
[data-medico-theme="high-contrast"] .e-richtexteditor .e-content li,
[data-medico-theme="high-contrast"] .e-richtexteditor .e-content span,
[data-medico-theme="high-contrast"] .e-richtexteditor .e-content div,
[data-medico-theme="high-contrast"] .ql-editor,
[data-medico-theme="high-contrast"] .ql-editor p,
[data-medico-theme="high-contrast"] .ql-editor li,
[data-medico-theme="high-contrast"] .portal-html-editor-body,
[data-medico-theme="high-contrast"] .portal-html-editor-body p,
[data-medico-theme="high-contrast"] .autoform-tab-summary-heading,
[data-medico-theme="high-contrast"] .autoform-tab-summary-body,
[data-medico-theme="high-contrast"] .autoform-group-title,
[data-medico-theme="high-contrast"] .autoform-field-label {
    color: var(--medico-text) !important;
}

[data-medico-theme="dark"] .e-richtexteditor,
[data-medico-theme="dark"] .e-rte-content,
[data-medico-theme="dark"] .e-richtexteditor .e-content,
[data-medico-theme="dark"] .ql-editor,
[data-medico-theme="dark"] .portal-html-editor-body,
[data-medico-theme="dark"] .portal-html-readonly,
[data-medico-theme="dark"] .autoform-tab-summary-section,
[data-medico-theme="dark"] .autoform-records-reference > details,
[data-medico-theme="high-contrast"] .e-richtexteditor,
[data-medico-theme="high-contrast"] .e-rte-content,
[data-medico-theme="high-contrast"] .e-richtexteditor .e-content,
[data-medico-theme="high-contrast"] .ql-editor,
[data-medico-theme="high-contrast"] .portal-html-editor-body,
[data-medico-theme="high-contrast"] .portal-html-readonly,
[data-medico-theme="high-contrast"] .autoform-tab-summary-section,
[data-medico-theme="high-contrast"] .autoform-records-reference > details {
    background: var(--medico-surface) !important;
    color: var(--medico-text) !important;
}

[data-medico-theme="dark"] .aiportal-html-tree .aiportal-node-empty,
[data-medico-theme="high-contrast"] .aiportal-html-tree .aiportal-node-empty {
    color: #ff8b94 !important;
}

[data-medico-theme="dark"] .aiportal-html-tree .aiportal-node-partial,
[data-medico-theme="high-contrast"] .aiportal-html-tree .aiportal-node-partial {
    color: #ffc264 !important;
}

[data-medico-theme="dark"] .aiportal-html-tree .aiportal-node-filled,
[data-medico-theme="high-contrast"] .aiportal-html-tree .aiportal-node-filled {
    color: #54d59a !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .aiportal-loading-progress-indicator {
        animation: none !important;
        opacity: .75;
        transform: none;
        width: 100%;
    }
}

/* Staff PIN modal and every form surface follow the active theme. Native inputs
   inherit color-scheme from dark/high-contrast; without these tokens the PIN field
   painted as a solid black bar on a hardcoded white card. */
.portal-pin-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: color-mix(in srgb, var(--medico-navy-950) 78%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-pin-card {
    background: var(--medico-surface) !important;
    color: var(--medico-text) !important;
    border: 1px solid var(--medico-border);
    border-radius: 16px;
    box-shadow: var(--medico-shadow);
    padding: 28px 24px;
    text-align: center;
    width: 300px;
}

.portal-pin-card h5 {
    color: var(--medico-text) !important;
}

.portal-pin-card .sub {
    color: var(--medico-text-muted) !important;
    margin-bottom: .5rem;
}

.portal-pin-input {
    width: 100%;
    padding: 12px;
    font-size: 22px;
    text-align: center;
    letter-spacing: .25em;
    margin-bottom: 8px;
    background: var(--medico-surface) !important;
    color: var(--medico-text) !important;
    border: 1px solid var(--medico-border-strong) !important;
}

.portal-pin-error {
    color: var(--medico-danger) !important;
    min-height: 20px;
    margin-bottom: 10px;
}

/* Syncfusion chrome (RTE toolbar, dropdowns, dialogs, schedule) is not a
   navy action button. The global button rule must not paint those controls
   as solid dark pills in any theme. */
.e-toolbar,
.e-rte-toolbar,
.e-toolbar-wrapper,
.e-grid-header,
.e-headercontent,
.e-schedule-toolbar-container,
.e-schedule .e-schedule-toolbar {
    background: var(--medico-surface-muted) !important;
    border-color: var(--medico-border) !important;
    color: var(--medico-text) !important;
}

.e-toolbar .e-tbar-btn,
.e-toolbar .e-tbar-btn .e-btn-icon,
.e-toolbar .e-tbar-btn .e-icons,
.e-rte-toolbar .e-tbar-btn,
.e-rte-toolbar .e-tbar-btn .e-btn-icon,
.e-toolbar-item button,
.e-hor-nav,
button.e-tbar-btn,
.e-toolbar .e-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--medico-text) !important;
}

.e-toolbar .e-tbar-btn:hover,
.e-toolbar .e-tbar-btn.e-active,
.e-rte-toolbar .e-tbar-btn:hover,
.e-rte-toolbar .e-tbar-btn.e-active {
    background: var(--medico-surface-raised) !important;
    color: var(--medico-text) !important;
}

.e-richtexteditor,
.e-rte-content,
.e-richtexteditor .e-content,
.e-popup,
.e-dropdownbase,
.e-ddl.e-popup,
.e-popup-open,
.e-dialog,
.e-dlg-content,
.e-calendar,
.e-datepicker,
.e-datetimepicker,
.e-timepicker,
.e-schedule,
.e-grid,
.e-list-parent,
.e-list-item,
.e-dropdownbase .e-list-item,
.maf__sheet,
.maf__titlebar,
.fb-wrapper,
.fb-wrapper .field-group input,
.fb-wrapper .field-group select,
.fb-wrapper .field-group textarea,
.preview-input,
.preview-textarea,
.preview-select {
    background: var(--medico-surface) !important;
    color: var(--medico-text) !important;
    border-color: var(--medico-border) !important;
}

.e-list-item.e-active,
.e-list-item.e-hover,
.e-dropdownbase .e-list-item.e-item-focus {
    background: var(--medico-surface-muted) !important;
    color: var(--medico-text) !important;
}

.form-label,
.form-label-sm,
label {
    color: var(--medico-text) !important;
}

.portal-claimant-shell,
.portal-loading,
.portal-error,
.portal-complete {
    background: var(--medico-canvas) !important;
    color: var(--medico-text) !important;
}

/* Live recording state: Dictate / Session Rec must be visibly red while on, not only relabelled.
   Scoped to the toolbar and stated explicitly so the navy toolbar theme does not neutralise it. */
.aiportal-action-toolbar > .btn.aiportal-recording-on,
.aiportal-action-toolbar > .btn.aiportal-recording-on:hover,
.aiportal-action-toolbar > .btn.aiportal-recording-on:focus {
    background-color: #dc2626;
    border-color: #b91c1c;
    color: #fff;
}