/* Tosca theme with a red blood drop and a chest X-ray service icon. Loaded after readability.css. */
:root {
    --primary: #087f83;
    --primary-dark: #066a70;
    --ink: #193a43;
    --muted: #506d75;
    --border: #dcebe8;
    --background: #f3f9f8;
    --blue: #0b7f80;
    --violet: #168b83;
    --teal-light: #e8f6f3;
}

body { color: var(--ink); }
.lab-table th small { display: block; margin-top: 5px; font-weight: 400; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.lab-flag { display: inline-block; padding: 1px 6px; border-radius: 4px; color: #9b2437; background: #fff0f2; font-size: .85em; }
.report-note p { white-space: pre-line; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline-color: #09847f; }
.button { border-radius: 10px; }
.button-primary { background: #087f83; box-shadow: 0 4px 10px #087f831a; }
.button-primary:hover { background: #066a70; box-shadow: 0 5px 14px #087f8329; }
.button-secondary { border-color: #cfe9e6; }
.button-secondary:hover, .button-filter:hover { background: #f0fcfa; }
.section-kicker, .login-card .section-kicker, .page-heading .section-kicker { color: #397d75; }
.icon { stroke-width: 1.85; }
.title-with-icon, .inline-icon-label { display: flex; align-items: center; gap: 10px; }
.title-with-icon > .icon { color: #367a73; width: 23px; height: 23px; }
.heading-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; color: #337d74; background: #eefbfa; }
.heading-icon .icon { width: 25px; height: 25px; }

/* Deep tosca and fresh mint frame the sign-in screen without changing its layout. */
.login-story {
    background: radial-gradient(ellipse at 100% 90%, #399b87 0, transparent 55%), linear-gradient(145deg, #123e48, #14626b 62%, #258b83);
}
.login-story::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #4abcb0 0 34%, #86d4c0 34% 67%, #b6e4c3 67%); }
.login-story::after { border-color: #ffffff0f; box-shadow: 0 0 0 75px #ffffff03, 0 0 0 150px #ffffff03; }
.brand-light.hospital-brand small { color: #e2f9f6; }
.eyebrow { color: #e1f9f6; }
.eyebrow-line { background: #ffc884; }
.story-content > p { color: #e0f3f1; }
.service-preview { max-width: 420px; border-color: #ffffff20; }
.service-preview span { color: #e0f7f4; }
.service-icon { color: #dc3545; background: #fff0f1; border-color: #fbd1d6; width: 49px; height: 49px; flex: 0 0 49px; border-radius: 14px; }
.service-icon .icon { width: 25px; height: 25px; }
.service-preview-radiology .service-icon, .service-preview + .service-preview .service-icon { background: #d1eee9; border-color: #a3dbd1; color: #e2fff9; }
.service-check { color: #d9f7f3; }
.story-note { color: #e4f4f2; }
.story-note .icon { color: #ffbcaa; }
.story-footer { color: #d8f1ee; }
.login-main { background: linear-gradient(150deg, #fbfefe, #fff 42%, #f5fcfa); }
.login-mark { width: 56px; height: 56px; border-radius: 17px; background: #eefbfa; color: #337d74; }
.login-mark .icon { width: 27px; height: 27px; }
.tag-outline { color: #3c7b74; background: #f0fcfa; border-color: #daf1ee; border-radius: 20px; }
.input-wrap { border-radius: 11px; border-color: #b6d4d0; }
.input-wrap:focus-within { border-color: #65cabe; box-shadow: 0 0 0 4px #4bcabb12; }
.input-wrap .icon { color: #437770; }
.login-privacy .icon { color: #3b7c75; }
.demo-card { background: #fff5e7; border-color: #f1d9b8; border-radius: 12px; }
.demo-label { color: #885715; }
.demo-card p { color: #76572f; }
.button-demo { background: #fff; border-color: #e0c398; color: #81520e; }
.button-demo:hover { background: #fff9ef; }
.login-help { border-color: #e4f0ef; }

/* Tosca wayfinding is consistent across navigation, counts and reports. */
.dashboard-body { background: radial-gradient(ellipse at 80% 0, #eefbfa 0, transparent 42%), var(--background); }
.sidebar { background: linear-gradient(180deg, #fff 55%, #f8fefd); border-color: #e0f0ee; }
.sidebar::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #118d89 0 34%, #46b8aa 34% 67%, #8acdbc 67%); }
.sidebar-label { color: #517571; }
.nav-link { border: 1px solid transparent; border-radius: 11px; color: #507671; }
.nav-link .icon { width: 23px; height: 23px; color: #3d7870; }
.nav-link:nth-child(2) .icon { color: #1c7f73; }
.nav-link:nth-child(3) .icon { color: #3a7870; }
.nav-link:hover { background: #f0fcfa; }
.nav-link.active { background: #effcfa; color: #2c7b71; border-color: #e2f9f6; }
.nav-link:nth-child(2).active { background: #eefbfa; color: #1b7c70; border-color: #d5f6f2; }
.nav-link:nth-child(3).active { background: #ecfbf9; color: #347d75; border-color: #d9f7f3; }
.nav-link.active .nav-count { color: inherit; }
.nav-count { background: #ffffffc9; min-width: 25px; padding: 2px 5px; border-radius: 6px; text-align: center; }
.help-card { background: #fff7ee; border-color: #f0e1cd; border-radius: 13px; }
.help-card > .icon { color: #b57936; }
.help-card h3 { color: #74502b; }
.help-card p { color: #765e42; }
.logout-button { color: #705b6a; }
.logout-button .icon { color: #b45d67; }
.topbar { background: #ffffffed; border-color: #e1f1ef; }
.avatar { color: #26776b; background: #e4f4ed; }
.demo-banner { background: #fff6e8; color: #795a2a; border-color: #f0debd; border-radius: 11px; }
.demo-banner > .icon { color: #ae762a; width: 20px; height: 20px; }
.demo-pill { border-color: #d9be91; color: #825d26; background: #fffaf1; border-radius: 5px; }
.page-heading h1 { color: #24554f; }
.today-date { padding: 9px 13px; border: 1px solid #dcf1ef; border-radius: 10px; background: #ffffffb3; color: #4d7872; }
.today-date .icon { color: #407871; width: 18px; height: 18px; }
.patient-strip { border-color: #def0ee; border-radius: 14px; box-shadow: 0 3px 10px #23686010; }
.patient-icon { background: #e3f5f0; color: #267d6c; width: 44px; height: 44px; }
.patient-icon .icon { width: 23px; height: 23px; }
.verified { color: #356d65; background: #edf7f3; padding: 6px 9px; border-radius: 8px; }
.stat-card { border-radius: 14px; border: 1px solid #dff8f5; border-top: 3px solid #69d5c8; background: linear-gradient(130deg, #f3fcfb, #fff); box-shadow: 0 4px 11px #337e7508; }
.stat-card:nth-child(2) { background: linear-gradient(130deg, #f0fcfa, #fff); border-color: #d7f6f3; border-top-color: #4ad8c7; }
.stat-card:nth-child(3) { background: linear-gradient(130deg, #f2fcfb, #fff); border-color: #dcf8f4; border-top-color: #7acbc2; }
.stat-top { color: #467973; }
.stat-card:nth-child(2) .stat-top { color: #3a7d74; }
.stat-card:nth-child(3) .stat-top { color: #4c7a74; }
.stat-number { color: #2d7b72; }
.stat-card:nth-child(2) .stat-number { color: #217f75; }
.stat-card:nth-child(3) .stat-number { color: #3a7870; }
.stat-number > span { color: #537571; }
.stat-icon { width: 42px; height: 42px; border-radius: 12px; }
.stat-icon .icon { width: 23px; height: 23px; }
.teal { background: #ddf2ed; color: #167a75; }
.blue { background: #fff0f1; color: #c43445; }
.violet { background: #e3f4f0; color: #0c7774; }
.stat-foot { border-color: #e0f2f0; color: #517671; }
.blue-line { background: #d9626e; }
.violet-line { background: #5cb6a9; }
.results-panel { border-radius: 15px; border-color: #dfeeec; box-shadow: 0 4px 18px #2c686110; }
.panel-heading { background: linear-gradient(115deg, #fbfefe, #fff); }
.subtle-badge { color: #427770; background: #f2fcfb; border-color: #e0f3f1; border-radius: 8px; }
.result-tabs { border-color: #e0efed; }
.result-tab { min-height: 48px; }
.result-tab .icon { width: 19px; height: 19px; color: #487a75; }
.result-tab:nth-child(2) .icon { color: #1c7e72; }
.result-tab:nth-child(3) .icon { color: #3a7c75; }
.result-tab.selected { color: #307a71; border-bottom-color: #59c7ba; }
.result-tab:nth-child(2).selected { color: #1d7f74; border-bottom-color: #3ed6c4; }
.result-tab:nth-child(3).selected { color: #357d75; border-bottom-color: #6cccc1; }
.result-tab.selected span { background: #effcfa; color: inherit; }
.result-tab:nth-child(2).selected span { background: #edfbf9; }
.result-tab:nth-child(3).selected span { background: #eafbf9; }
.search-field input, .filter-select select { border-color: #c7e0dd; border-radius: 9px; }
.button-filter { color: #407c75; background: #f3fcfb; border-color: #dcf2ef; }
.results-table thead { background: #f3f9f8; }
.results-table th { color: #4e7974; border-color: #e5f2f0; }
.results-table td { border-color: #e9f5f4; }
.results-table tbody tr:hover { background: #fbfefe; }
.exam-icon { width: 42px; height: 44px; border-radius: 12px; }
.exam-icon .icon { width: 23px; height: 23px; }
.exam-title a { color: #295a54; }
.exam-title a:hover { color: #347c74; }
.type-label { border-radius: 6px; padding: 5px 8px; }
.text-blue { color: #217f74; background: #eefbfa; }
.text-violet { color: #397b74; background: #eafbf9; }
.ready { color: #2b715b; background: #ebf7f1; }
.pending { color: #8b611e; background: #fff3dc; }
.status-badge { border-radius: 7px; }
.detail-link { min-height: 44px; }
.detail-link .icon { width: 16px; height: 16px; }
.table-footer { background: #fcfefe; }
.result-guidance > .icon { color: #b78037; }
.workspace-footer .icon { color: #4e7772; }
.empty-icon { color: #457a73; background: #f0fcfa; }

/* Report accents keep laboratory and radiology easy to tell apart. */
.back-link { color: #407871; }
.report-document { border-radius: 15px; border-color: #dfeeec; box-shadow: 0 4px 18px #2c68610a; }
.report-lab { border-top: 4px solid #53d0c1; }
.report-radiology { border-top: 4px solid #77ccc2; }
.document-demo { color: #7b591f; border-color: #efdab7; background: #fff7e9; border-radius: 8px; }
.report-metadata dt { color: #4d7570; }
.report-metadata dt .icon { width: 16px; height: 16px; color: #517974; margin-right: 5px; }
.lab-result-heading h2 { color: #277b71; }
.lab-result-heading h2 .icon { width: 22px; height: 22px; color: #217e73; }
.lab-table thead { background: #ecfbf9; }
.lab-table thead th { color: #347c73; }
.lab-table tbody .lab-value { color: #1e7d71; }
.radiology-content h2 { display: flex; align-items: center; gap: 9px; color: #437770; }
.radiology-content h2 .icon { width: 21px; height: 21px; color: #427770; }
.radiology-content .conclusion { border-color: #76c8be; background: #effbfa; border-radius: 0 12px 12px 0; }
.radiology-content .conclusion h2 { color: #447a74; }
.report-note { background: #eefbf9; color: #467973; border-radius: 10px; }
.report-note .icon { color: #457972; width: 18px; height: 18px; }

/* Protected radiology image gallery and full-screen viewer. */
.radiology-gallery { margin: 28px 0; padding-top: 26px; border-top: 1px solid #dff0ee; }
.gallery-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.gallery-heading h2 { display: flex; gap: 9px; align-items: center; font-size: 1.1875rem; color: #3b7871; }
.gallery-heading h2 .icon { color: #427972; width: 24px; height: 24px; }
.gallery-heading p { margin-top: 5px; color: #567571; font-size: .9375rem; line-height: 1.7; }
.image-count { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; color: #3d7a73; background: #eafbf9; font-size: .8125rem; font-weight: 600; }
.radiology-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.radiology-image-card { margin: 0; overflow: hidden; min-width: 0; border: 1px solid #d9edeb; background: #fff; border-radius: 13px; }
.radiology-image-button { display: block; width: 100%; padding: 0; border: 0; background: #183633; cursor: zoom-in; }
.radiology-image-button:focus-visible { outline-offset: -4px; outline-color: #baf0ea; }
.radiology-thumbnail { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: contain; background: #183633; }
.radiology-image-meta { padding: 15px; }
.radiology-image-meta strong, .radiology-image-meta h3 { display: block; font-size: 1rem; color: #36524f; overflow-wrap: anywhere; }
.radiology-image-meta p, .radiology-image-meta small { display: block; color: #597773; font-size: .875rem; line-height: 1.6; margin-top: 5px; overflow-wrap: anywhere; }
.image-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.image-actions .button { flex: 1 1 auto; min-height: 44px; font-size: .875rem; padding: 9px 12px; }
.image-actions .button-primary { background: #087f83; }
.image-actions .button-primary:hover { background: #066a70; }
.image-actions .button-secondary { border-color: #d3ebe8; color: #437972; background: #fbfefe; }
.image-actions .icon { width: 18px; height: 18px; }
.gallery-empty { display: flex; align-items: flex-start; gap: 14px; border: 1px dashed #c7e6e2; border-radius: 12px; padding: 23px; background: #f7fdfc; color: #526f6c; }
.gallery-empty > .icon { width: 30px; height: 30px; color: #547874; }
.gallery-empty strong { display: block; font-size: 1rem; margin-bottom: 5px; }
.gallery-empty p { font-size: .9375rem; line-height: 1.7; }
.image-viewer { width: min(1120px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #436c67; border-radius: 16px; background: #13302d; color: #fff; box-shadow: 0 25px 100px #0008; }
.image-viewer::backdrop { background: #112e2bd9; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid #ffffff25; }
.viewer-toolbar h2, .viewer-toolbar strong { font-size: 1rem; font-weight: 650; overflow-wrap: anywhere; }
.viewer-toolbar .button { min-height: 44px; background: #29504b; border: 1px solid #58817c; color: #fff; }
.viewer-toolbar .button:hover { background: #3a6661; }
.viewer-toolbar .icon { width: 21px; height: 21px; }
.viewer-stage { display: grid; place-items: center; overflow: auto; min-height: 160px; max-height: calc(100dvh - 185px); background: #0b201e; }
.viewer-image { display: block; width: 100%; height: auto; max-height: calc(100dvh - 185px); object-fit: contain; }
.viewer-stage.is-zoomed { display: block; }
.viewer-stage.is-zoomed .viewer-image { width: auto; max-width: none; max-height: none; }
.viewer-caption { padding: 13px 18px 16px; color: #d9f0ed; font-size: .875rem; line-height: 1.65; }
.patient-photo-panel { margin-bottom: 24px; padding: 0 24px 24px; }
.patient-photo-panel .radiology-gallery { margin: 0; border: 0; }
.viewer-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.viewer-reset { min-width: 88px; font-size: .8125rem; }
.image-viewer-open { overflow: hidden; }
.image-viewer { margin: auto; }
.image-viewer[open] { display: flex; flex-direction: column; }
.viewer-stage { display: block; flex: 1; }
.viewer-image { margin: auto; }
.viewer-image[hidden], .viewer-error[hidden] { display: none; }
.viewer-error { padding: 28px; color: #fff; line-height: 1.7; }
.image-viewer[data-zoom="150"] .viewer-image { width: 150%; max-width: none; max-height: none; }
.image-viewer[data-zoom="200"] .viewer-image { width: 200%; max-width: none; max-height: none; }
.image-viewer[data-zoom="300"] .viewer-image { width: 300%; max-width: none; max-height: none; }

@media screen and (max-width: 960px) {
    .sidebar { padding-bottom: 7px; }
    .nav-link { border-radius: 10px; }
    .nav-link .icon { width: 22px; height: 22px; }
    .nav-count { display: none; }
    .login-story::before { height: 4px; }
    .stat-top { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
    .stat-top > span:first-child { min-height: 39px; }
    .stat-icon { display: grid; width: 32px; height: 32px; border-radius: 9px; }
    .stat-icon .icon { width: 20px; height: 20px; }
    .stat-number { margin-top: 2px; }
    .stat-card { border-radius: 12px; }
    .patient-strip { border-radius: 12px; }
    .result-tab { flex-direction: column; justify-content: center; gap: 5px; min-height: 68px; }
    .result-tab .icon { width: 20px; height: 20px; }
    .results-panel { border-radius: 13px; }
    .exam-icon { width: 38px; height: 40px; border-radius: 11px; }
    .exam-icon .icon { width: 22px; height: 22px; }
    .lab-table tbody th { background: #effcfa; color: #347b73; }
    .lab-table tbody .lab-value { color: #1e7d71; }
    .radiology-grid { gap: 14px; }
    .gallery-heading { align-items: flex-start; }
    .gallery-heading h2 { font-size: 1.0625rem; }
}
@media screen and (max-width: 600px) {
    .patient-photo-panel { padding: 0 16px 18px; }
    .viewer-controls { width: 100%; justify-content: space-between; flex-wrap: nowrap; gap: 4px; }
    .radiology-grid { grid-template-columns: 1fr; }
    .gallery-heading { flex-wrap: wrap; gap: 10px; }
    .gallery-empty { padding: 18px; gap: 11px; }
    .radiology-image-meta { padding: 14px; }
    .image-viewer { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
    .viewer-toolbar { padding: 12px; flex-wrap: wrap; }
    .viewer-toolbar h2, .viewer-toolbar strong { flex: 1; min-width: 0; }
    .viewer-toolbar .button { padding: 9px 11px; }
    .viewer-caption { padding: 12px; }
}
@media screen and (max-width: 380px) {
    .stat-top { font-size: .75rem; }
    .stat-card { padding-left: 9px; padding-right: 9px; }
    .result-tab { font-size: .8125rem; }
    .radiology-thumbnail { aspect-ratio: 1.25; }
}
@media print {
    body, .dashboard-body { background: #fff; color: #111; }
    .report-document { box-shadow: none; border: 0; border-radius: 0; }
    .report-heading h1, .radiology-content h2, .radiology-content .conclusion h2, .gallery-heading h2 { color: #222; }
    .radiology-content .conclusion, .report-note { background: #fff; border-color: #777; }
    .lab-table tbody .lab-value { color: #111; }
    .radiology-gallery { break-inside: auto; border-color: #aaa; }
    .radiology-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .radiology-image-card { break-inside: avoid; border: 1px solid #aaa; border-radius: 0; }
    .radiology-thumbnail { max-height: 70mm; background: #fff; }
    .radiology-image-meta { padding: 8px; }
    .radiology-image-meta strong, .radiology-image-meta h3 { font-size: 10pt; }
    .radiology-image-meta p, .radiology-image-meta small, .gallery-heading p { font-size: 9pt; color: #333; }
    .image-actions, .image-viewer, .image-count { display: none !important; }
    .gallery-empty { border-color: #aaa; background: #fff; color: #333; }
}