/* Theme layer. Day is the default and needs no overrides; night overrides tokens and the few surface classes
   that hard-code light colours. Bootstrap's own components follow via data-bs-theme="dark" (set by theme.js). */

html {
    transition: background-color .2s ease;
}

body {
    background-color: var(--surface-page, #e1e6e9);
}

:root[data-vecs-mode="night"] {
    color-scheme: dark;
    --surface-page: #11171c;
    --surface-card: #1a2229;
    --surface-card-border: #34414b;
}

/* Surfaces */
:root[data-vecs-mode="night"] .bg-color-white,
:root[data-vecs-mode="night"] .bg-white {
    background-color: var(--surface-card) !important;
}

:root[data-vecs-mode="night"] .border,
:root[data-vecs-mode="night"] .list-group-item {
    border-color: var(--surface-card-border) !important;
}

/* Brand blues are too dark to read as text on a dark surface, so use the pastel tints instead. */
:root[data-vecs-mode="night"] .color-primary,
:root[data-vecs-mode="night"] .color-primary-dark {
    color: var(--primary-pastel-pale) !important;
}

:root[data-vecs-mode="night"] .color-gray-dark {
    color: #b4bcc2 !important;
}

/* Outline buttons and KPI tiles hard-code a white fill. Only the resting state is changed; their hover rules
   (coloured fill, white text) already work on a dark page. */
:root[data-vecs-mode="night"] [class*="button-"][class*="-outline"]:not(:hover),
:root[data-vecs-mode="night"] .button-white:not(:hover) {
    background-color: var(--surface-card) !important;
}

:root[data-vecs-mode="night"] .button-primary-outline:not(:hover),
:root[data-vecs-mode="night"] .button-white:not(:hover) {
    color: var(--primary-pastel-pale);
}

:root[data-vecs-mode="night"] .button-error-dark-outline:not(:hover) {
    color: var(--error-light);
}

/* Grey utility fills are used for nested panels (card > panel > row), so each tier gets its own step of
   lightness. Text stays light, so these must be dark fills. */
:root[data-vecs-mode="night"] {
    --surface-raised: #232e37;
    --surface-raised-2: #2f3d49;
}

:root[data-vecs-mode="night"] .bg-color-gray-light {
    background-color: var(--surface-raised) !important;
}

:root[data-vecs-mode="night"] .bg-color-gray-medium {
    background-color: var(--surface-raised) !important;
}

:root[data-vecs-mode="night"] .bg-color-gray,
:root[data-vecs-mode="night"] .bg-color-gray-medium .bg-color-gray-light {
    background-color: var(--surface-raised-2) !important;
}

:root[data-vecs-mode="night"] .bd-color-primary,
:root[data-vecs-mode="night"] .bd-color-primary-faded {
    border-color: #4f6a82 !important;
}

/* Pastel fills stay light in night mode, so give their text a dark colour instead of the inherited light one */
:root[data-vecs-mode="night"] [class*="bg-color-"][class*="-pastel"],
:root[data-vecs-mode="night"] .bg-color-secondary-light,
:root[data-vecs-mode="night"] .bg-color-success-light {
    color: #10202e;
}

:root[data-vecs-mode="night"] .button-primary-dark-outline:not(:hover) {
    color: var(--primary-pastel-pale);
}

/* Report a Fault panels hard-code white / gray-light fills */
:root[data-vecs-mode="night"] .rf-step-card,
:root[data-vecs-mode="night"] .rf-accordion-summary,
:root[data-vecs-mode="night"] .rf-accordion-body,
:root[data-vecs-mode="night"] .rf-fault-step-group,
:root[data-vecs-mode="night"] .rf-fault-step-card,
:root[data-vecs-mode="night"] .rf-fault-step-image-wrap {
    background-color: var(--surface-card);
    border-color: var(--surface-card-border);
}

:root[data-vecs-mode="night"] .rf-accordion-summary,
:root[data-vecs-mode="night"] .rf-accordion-body strong,
:root[data-vecs-mode="night"] .rf-fault-group-title {
    color: var(--primary-pastel-pale);
}

/* Pastel alert keeps its light fill, so it needs dark text rather than the inherited light text */
:root[data-vecs-mode="night"] .rf-clinical-alert,
:root[data-vecs-mode="night"] .rf-clinical-alert * {
    color: #3b0d12;
}

:root[data-vecs-mode="night"] .text-secondary {
    color: #aab3ba !important;
}

:root[data-vecs-mode="night"] .nav-tabs .nav-link.active {
    color: var(--primary-pastel-pale) !important;
}

/* Patient App Insights table: white rows and a gray-light header with light text */
:root[data-vecs-mode="night"] .insights-flexgrid-header {
    background-color: var(--surface-raised-2);
    color: var(--primary-pastel-pale);
}

:root[data-vecs-mode="night"] .insights-flexgrid-row {
    background-color: var(--surface-card);
    border-bottom-color: var(--surface-card-border);
}

:root[data-vecs-mode="night"] .insights-flexgrid-row:hover {
    background-color: var(--surface-raised-2);
}

:root[data-vecs-mode="night"] .insights-col-date {
    color: #b4bcc2;
}

/* Keep the page legible when images/logos assume a light backdrop */
:root[data-vecs-mode="night"] img:not(.logo) {
    filter: brightness(.9);
}

/* Calmer night colours.
   The palette is tuned for a white page: the same fully saturated greens, blues, pinks, reds and mustards look much
   louder as large fills on a dark one. Solid fills (status bars, task circles, tile blocks, the red status box, the
   header and footer) are mixed toward the card surface, which keeps each hue but takes most of the intensity out
   (50-70% of the original; the red status box stays strongest because it is a safety signal). White icons and text on
   them gain contrast because the fills are darker. Only fills are changed: the colour variables are also used for text
   and borders, which stay as they were so they keep passing AA. */
:root[data-vecs-mode="night"] {
    --calm-success: color-mix(in srgb, #6bae78 52%, var(--surface-card));
    --calm-secondary: color-mix(in srgb, #ba950a 52%, var(--surface-card));
    --calm-error-soft: color-mix(in srgb, #d29397 52%, var(--surface-card));
    --calm-error: color-mix(in srgb, #9e1a29 70%, var(--surface-card));
    --calm-primary: color-mix(in srgb, #09549f 55%, var(--surface-card));
    --calm-gray: color-mix(in srgb, #8b8b8b 50%, var(--surface-card));
    --calm-pastel: color-mix(in srgb, #66a9d9 50%, var(--surface-card));
}

:root[data-vecs-mode="night"] .bg-color-success-faded,
:root[data-vecs-mode="night"] .bg-color-success,
:root[data-vecs-mode="night"] .button-success-faded,
:root[data-vecs-mode="night"] .button-success {
    background-color: var(--calm-success) !important;
}

:root[data-vecs-mode="night"] .bg-color-secondary-dark,
:root[data-vecs-mode="night"] .button-secondary-dark {
    background-color: var(--calm-secondary) !important;
}

/* Workflow task circle in progress (AutoTasks.razor): the calm yellow like the calm green / red circles beside it */
:root[data-vecs-mode="night"] .task-state-host.task-state-progress {
    background-color: var(--calm-secondary) !important;
}

:root[data-vecs-mode="night"] .bg-color-error-faded,
:root[data-vecs-mode="night"] .button-error-faded {
    background-color: var(--calm-error-soft) !important;
}

:root[data-vecs-mode="night"] .bg-color-error-dark,
:root[data-vecs-mode="night"] .bg-color-error,
:root[data-vecs-mode="night"] .button-error-dark,
:root[data-vecs-mode="night"] .button-error {
    background-color: var(--calm-error) !important;
}

:root[data-vecs-mode="night"] .bg-color-primary,
:root[data-vecs-mode="night"] .button-primary {
    background-color: var(--calm-primary) !important;
}

:root[data-vecs-mode="night"] .bg-color-gray-dark,
:root[data-vecs-mode="night"] .button-gray-dark {
    background-color: var(--calm-gray) !important;
}

/* The top banner hard-codes its blue to cyan gradient (the footer uses the --primary gradient) */
:root[data-vecs-mode="night"] .topBanner {
    background: linear-gradient(90deg, color-mix(in srgb, #01538b 65%, var(--surface-card)) 0%, color-mix(in srgb, #01538b 65%, var(--surface-card)) 17%, color-mix(in srgb, #00c5d6 45%, var(--surface-card)) 91%);
}

/* The light-blue chips and banners on the details page (URN, referral source, buttons) are `button-primary-pastel`: a pale
   fill with white text, which was 2.54:1 and very bright on a dark page. The calmer fill makes the white text pass (about 6:1). */
:root[data-vecs-mode="night"] .button-primary-pastel:not(:hover) {
    background-color: var(--calm-pastel) !important;
    border-color: var(--calm-pastel) !important;
    color: var(--white);
}

/* Header and footer gradient (the --primary-dark to --primary gradient shared by the app header and the footer) */
:root[data-vecs-mode="night"] .bg-primary-secondary-gradient {
    background: linear-gradient(25deg, color-mix(in srgb, #05325f 60%, var(--surface-card)) 27%, var(--calm-primary) 67%);
}

/* Outline buttons and tiles fill with the full colour on hover: use the calm fills, so a hover is not a flash of the
   brightest colour on the page */
:root[data-vecs-mode="night"] .button-success-faded-outline:hover,
:root[data-vecs-mode="night"] .button-success-outline:hover {
    background-color: var(--calm-success) !important;
}

:root[data-vecs-mode="night"] .button-secondary-dark-outline:hover {
    background-color: var(--calm-secondary) !important;
}

:root[data-vecs-mode="night"] .button-error-faded-outline:hover {
    background-color: var(--calm-error-soft) !important;
}

:root[data-vecs-mode="night"] .button-error-dark-outline:hover,
:root[data-vecs-mode="night"] .button-error-outline:hover {
    background-color: var(--calm-error) !important;
}

:root[data-vecs-mode="night"] .button-primary-outline:hover {
    background-color: var(--calm-primary) !important;
}

/* Tile text takes its colour from the tile's button class: the full-strength mustard (90% saturated), green and pink
   were the loudest text on the page. Softer, less saturated tones of the same hues still pass AA (all above 6:1 on the
   card). The error one was the brightest red-pink. */
:root[data-vecs-mode="night"] .button-secondary-dark-outline:not(:hover) {
    color: #cbb673;
}

:root[data-vecs-mode="night"] .button-success-faded-outline:not(:hover),
:root[data-vecs-mode="night"] .button-success-outline:not(:hover) {
    color: #93c09d;
}

:root[data-vecs-mode="night"] .button-error-faded-outline:not(:hover) {
    color: #cfa2a6;
}

:root[data-vecs-mode="night"] .button-gray-dark-outline:not(:hover) {
    color: #aeb6bc;
}

:root[data-vecs-mode="night"] .button-error-dark-outline:not(:hover) {
    color: #e0888c;
}

/* The warning triangle in the red status box was #9e1a29 on the dark card (about 1.5:1, barely visible): a lighter
   red so it reads, without the full-strength fill */
:root[data-vecs-mode="night"] .color-error-dark {
    color: #d4797f !important;
}

/* Raised sections in night mode.
   In light mode the sections of the encounter list (totals tiles, search and sort bar, situational dashboard, filter
   chip, patient status box, "Go to record") are separated by drop shadows on a white card. A dark navy shadow is invisible
   on a dark card, and they all sat on the same surface (#1a2229), so nothing separated them. Dark interfaces show
   elevation with a lighter surface instead: each of these is one step lighter than the card (--surface-raised), with a
   fine light top edge and a soft dark shadow for the larger ones. Light mode is unchanged. */
:root[data-vecs-mode="night"] {
    --night-lift: inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 8px rgba(0, 0, 0, .45);
    --night-lift-small: inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* Totals tiles: the tile and its inner colour-coded button */
:root[data-vecs-mode="night"] .encounter-page .widget,
:root[data-vecs-mode="night"] .encounter-page .widget [class*="button-"][class*="-outline"]:not(:hover) {
    background-color: var(--surface-raised) !important;
}

:root[data-vecs-mode="night"] .encounter-page .widget {
    box-shadow: var(--night-lift) !important;
}

/* Search, sort and direction controls */
:root[data-vecs-mode="night"] #search_id,
:root[data-vecs-mode="night"] #ManageSearchBar #sort_id .dropdown-toggle,
:root[data-vecs-mode="night"] #ManageSearchBar .button-primary-outline:not(:hover) {
    background-color: var(--surface-raised) !important;
    box-shadow: var(--night-lift-small);
}

/* ...but once a sort is chosen the dropdown keeps its orange tint and the thick bottom bar (the rule above would replace both) */
:root[data-vecs-mode="night"] #ManageSearchBar #sort_id .dropdown-toggle.sort-active {
    background-color: color-mix(in srgb, var(--tertiary) 8%, var(--surface-raised)) !important;
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--tertiary) 85%, transparent), var(--night-lift-small);
}

/* Situational dashboard bar and the "filters applied" chip */
:root[data-vecs-mode="night"] #FilterWidgets .accordion {
    background-color: var(--surface-raised) !important;
    box-shadow: var(--night-lift) !important;
}

:root[data-vecs-mode="night"] #SelectedFilters .container {
    background-color: var(--surface-raised);
}

/* `--primary-light` (#0085b3) is 3.8:1 on the card and 3.3:1 on a raised surface, so text in it (the search box, links) fails AA
   in night mode; the softer blue already used for the URN link is about 5.2:1 */
:root[data-vecs-mode="night"] .color-primary-light {
    color: #4caaca !important;
}

/* Patient status box and "Go to record" inside each row */
:root[data-vecs-mode="night"] .encounter-row [id^="mainPatientStatus_"] [title],
:root[data-vecs-mode="night"] .encounter-row button[title="Click to view encounter details"]:not(:hover):not(:active) {
    background-color: var(--surface-raised) !important;
    box-shadow: var(--night-lift-small);
}

@media (prefers-reduced-motion: reduce) {
    html {
        transition: none;
    }
}

/* Encounter details in night mode: the strip and the two task panels are raised one step like the list's sections, and the
   referral pill is a tint of the pale blue with a light text */
:root[data-vecs-mode="night"] .presentation-strip,
:root[data-vecs-mode="night"] .task-checklist,
:root[data-vecs-mode="night"] .task-list {
    background-color: var(--surface-raised) !important;
    box-shadow: var(--night-lift-small);
}

:root[data-vecs-mode="night"] .presentation-strip {
    border-color: var(--surface-card-border);
}

:root[data-vecs-mode="night"] .presentation-strip > div + div {
    border-left-color: var(--surface-card-border);
}

:root[data-vecs-mode="night"] .presentation-strip .button-primary-pastel:not(:hover) {
    background-color: color-mix(in srgb, var(--primary-pastel-pale) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--primary-pastel-pale) 35%, transparent) !important;
    color: #cfe5f5;
}

:root[data-vecs-mode="night"] .presentation-strip .button-primary-pastel:hover {
    background-color: color-mix(in srgb, var(--primary-pastel-pale) 22%, transparent) !important;
    color: #cfe5f5;
}

/* External referral popup in night mode (see app.css "External referral popup") */
:root[data-vecs-mode="night"] #externalReferralDetails {
    background-color: rgba(0, 0, 0, .62) !important;
}

:root[data-vecs-mode="night"] #externalReferralDetails .modal-content {
    border-color: var(--surface-card-border);
    background-color: var(--surface-card) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4) !important;
}

:root[data-vecs-mode="night"] #externalReferralDetails .modal-header,
:root[data-vecs-mode="night"] #externalReferralDetails .modal-footer {
    border-color: var(--surface-card-border) !important;
    background-color: var(--surface-raised);
}

:root[data-vecs-mode="night"] #externalReferralDetails .modal-header .text-primary {
    background-color: color-mix(in srgb, var(--primary-pastel-pale) 14%, transparent);
    color: var(--primary-pastel-pale) !important;
}

:root[data-vecs-mode="night"] #externalReferralDetails .modal-title {
    color: var(--primary-pastel-pale);
}

:root[data-vecs-mode="night"] #externalReferralDetails .modal-body .row {
    border-bottom-color: var(--surface-card-border);
}

:root[data-vecs-mode="night"] #externalReferralDetails .accordion {
    border-color: var(--surface-card-border);
}

:root[data-vecs-mode="night"] #externalReferralDetails .accordion-button {
    background-color: var(--surface-raised);
    color: var(--primary-pastel-pale);
}

:root[data-vecs-mode="night"] #externalReferralDetails .btn-close:hover {
    background-color: rgba(255, 255, 255, .1);
}

:root[data-vecs-mode="night"] #externalReferralDetails .btn-primary {
    --bs-btn-bg: var(--calm-primary);
    --bs-btn-border-color: var(--calm-primary);
    --bs-btn-hover-bg: color-mix(in srgb, #09549f 75%, var(--surface-card));
    --bs-btn-hover-border-color: color-mix(in srgb, #09549f 75%, var(--surface-card));
}

/* My profile in night mode: header and cards sit on the raised surface like the list's sections */
:root[data-vecs-mode="night"] .profile-header,
:root[data-vecs-mode="night"] .profile-card {
    background-color: var(--surface-raised);
    border-color: var(--surface-card-border);
    box-shadow: var(--night-lift-small);
}

:root[data-vecs-mode="night"] .profile-avatar {
    background-color: color-mix(in srgb, var(--primary) 70%, var(--surface-card));
}

:root[data-vecs-mode="night"] .profile-pill {
    background-color: color-mix(in srgb, var(--primary-pastel-pale) 12%, transparent);
    border-color: color-mix(in srgb, var(--primary-pastel-pale) 35%, transparent);
    color: #cfe5f5;
}

:root[data-vecs-mode="night"] .profile-missing {
    color: var(--error-light);
}

:root[data-vecs-mode="night"] .theme-switch-row,
:root[data-vecs-mode="night"] .theme-group,
:root[data-vecs-mode="night"] .theme-current .theme-preview {
    border-color: var(--surface-card-border);
}

:root[data-vecs-mode="night"] .theme-switch-track {
    background-color: var(--surface-card-border);
}

:root[data-vecs-mode="night"] .theme-switch[aria-checked="true"] .theme-switch-track,
:root[data-vecs-mode="night"] .theme-card-badge {
    background-color: var(--primary-pastel);
}

:root[data-vecs-mode="night"] .theme-card-badge {
    box-shadow: 0 0 0 2px var(--surface-raised);
    color: #0d1820;
}

:root[data-vecs-mode="night"] .theme-card-thumb {
    box-shadow: 0 0 0 1px var(--surface-card-border);
}

:root[data-vecs-mode="night"] .theme-card:hover .theme-card-thumb {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-pastel) 55%, transparent);
}

:root[data-vecs-mode="night"] .theme-card:has(input:checked) .theme-card-thumb {
    box-shadow: 0 0 0 3px var(--primary-pastel);
}

:root[data-vecs-mode="night"] .profile-card .theme-card:has(input:checked),
:root[data-vecs-mode="night"] .theme-pick-hint {
    color: #fff;
}

:root[data-vecs-mode="night"] .theme-group > summary:hover {
    background-color: color-mix(in srgb, var(--primary-pastel) 8%, transparent);
}

:root[data-vecs-mode="night"] .theme-group-on {
    background-color: color-mix(in srgb, var(--primary-pastel) 16%, transparent);
    color: #fff;
}

/* About in night mode: the user grid hairlines follow the card border */
:root[data-vecs-mode="night"] .about-users th,
:root[data-vecs-mode="night"] .about-users td {
    border-bottom-color: var(--surface-card-border);
}

/* Seasonal decorations in the side margins (see each theme's stylesheet): how much of its full size a decoration keeps
   between 1300px and 1699px. The page is 1140px wide up to 1399px and 1320px from 1400px, so the margin is about 80-130px,
   then 40-90px, then 90-190px; the steps follow that. At 1700px and up the decorations are full size. */
:root {
    --decor-scale: 1;
}

@media (min-width: 1300px) and (max-width: 1399.98px) {
    :root { --decor-scale: .45; }
}

@media (min-width: 1400px) and (max-width: 1499.98px) {
    :root { --decor-scale: .3; }
}

@media (min-width: 1500px) and (max-width: 1599.98px) {
    :root { --decor-scale: .5; }
}

@media (min-width: 1600px) and (max-width: 1699.98px) {
    :root { --decor-scale: .75; }
}

/* The darkened orange text is too dim on the dark surface; use the orange itself */
:root[data-vecs-mode="night"] .btn.sort-active,
:root[data-vecs-mode="night"] .btn.sort-active:hover {
    color: var(--tertiary);
}

/* Login menu dropdown on the dark surface */
:root[data-vecs-mode="night"] .login-menu .dropdown-menu {
    --bs-dropdown-bg: var(--surface-raised, var(--surface-card));
    --bs-dropdown-link-color: #e3e8ec;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .08);
    --bs-dropdown-divider-bg: var(--surface-card-border);
    border-color: var(--surface-card-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

:root[data-vecs-mode="night"] .login-menu .dropdown-menu > li:last-child .dropdown-item {
    color: #e59aa0;
}


/* Themes with a character cursor (wand, ball, medal) set it on the whole page, so over the message history there was nothing to
   show where a click-and-drag would start. Over the history text the cursor is the text cursor, so the starting point is clear
   when copying a link or a message. Buttons and links inside keep their own cursors. */
:root[data-vecs-theme] .message-history-content,
:root[data-vecs-theme] .messaging-history-row {
    cursor: text;
}

:root[data-vecs-theme] .message-history-content :is(a, button, [type="button"]) {
    cursor: pointer;
}


/* Dark mode, active sort group: the full orange text and edges were far brighter than everything around them. Use a muted,
   slightly warm tone for the text and a fainter edge and bar; the tick, the "Sorted by" wording and the bar are still there. */
:root[data-vecs-mode="night"] #ManageSearchBar .sort-group .btn.sort-active,
:root[data-vecs-mode="night"] #ManageSearchBar .sort-group .btn.sort-active:hover,
:root[data-vecs-mode="night"] #ManageSearchBar .sort-group .sort-reset,
:root[data-vecs-mode="night"] #ManageSearchBar .sort-group .sort-reset:hover {
    color: color-mix(in srgb, var(--tertiary) 55%, #d9dfe4);
    border-color: color-mix(in srgb, var(--tertiary) 28%, transparent) !important;
}

:root[data-vecs-mode="night"] #ManageSearchBar .sort-group .btn.sort-active {
    background-color: color-mix(in srgb, var(--tertiary) 6%, var(--surface-raised)) !important;
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--tertiary) 55%, transparent);
}

:root[data-vecs-mode="night"] #ManageSearchBar .sort-group .sort-reset {
    background: transparent;
}

:root[data-vecs-mode="night"] #ManageSearchBar .sort-group .btn.sort-active:hover,
:root[data-vecs-mode="night"] #ManageSearchBar .sort-group .sort-reset:hover {
    background-color: color-mix(in srgb, var(--tertiary) 12%, var(--surface-raised)) !important;
}

/* Dark mode, summary tiles: the icon and number colours were mixed toward white; keep them lighter than the card but calmer */
:root[data-vecs-mode="night"] .encounter-page .encounter-tile > .p-2.fs-4 {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface-card, #1a2229)) !important;
    color: color-mix(in srgb, var(--accent) 55%, #cfd6dc) !important;
}

:root[data-vecs-mode="night"] .encounter-page .encounter-tile [class*="-outline"],
:root[data-vecs-mode="night"] .encounter-page .encounter-tile:hover [class*="-outline"] {
    color: color-mix(in srgb, var(--accent) 22%, #d5dce1) !important;
}