/* Pin the app to light rendering. Without this, iOS WKWebView / Safari in OS dark mode
   auto-dims white backgrounds (e.g. the back-button circle looked grey on iOS). */
:root {
    color-scheme: light;
}

/* Password show/hide eye (MudBlazor input adornment) is pulled flush to the right border by
   .mud-icon-button-edge-end (margin-inline-end:-12px). Inset it so it isn't stuck to the edge
   (~symmetric with the field's left text padding). Scoped to input adornments only. */
.mud-input-adornment-end .mud-icon-button-edge-end {
    margin-right: 4px !important;
    margin-inline-end: 4px !important;
}

/* ============================================================
   Segoe UI — self-hosted font faces
   ============================================================ */
@font-face {
    font-family: 'Segoe UI';
    src: url('fonts/SEGOEUIL.TTF') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Segoe UI';
    src: url('fonts/SEGOEUI.TTF') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Segoe UI';
    src: url('fonts/SEGOEUII.TTF') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Segoe UI';
    src: url('fonts/SEGUISB.TTF') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Segoe UI';
    src: url('fonts/SEGOEUIB.TTF') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Segoe UI';
    src: url('fonts/SEGOEUIZ.TTF') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ============================================================
   Poppins — self-hosted (Welcome screen tagline)
   ============================================================ */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   VisitPlus Design Tokens — sourced from Figma color palette
   ============================================================ */
:root {
    /* VisitPlus' own primary — FIXED, never per-network. The auth flow paints with this one:
       welcome, sign-in, registration, password reset, confirm-account, the biometrics intro, and
       the phone/T&C onboarding steps. At that point no health network has been chosen, and the
       palette cached in local storage from a previous session must not leak a hospital's colour
       onto those screens. The brand tokens below only take over from Home onward. Anything
       reachable before the health-network picker should reference this, NOT --vp-brand-primary.

       Belt and braces: BrandThemeProvider also suspends the --vp-brand-* overrides (and pins the
       MudBlazor theme) on every route in Constants.FIXED_BRAND_ROUTES, so shared chrome and
       MudBlazor's own markup — which no page's scoped CSS can reach — stay fixed there too. */
    --vp-visitplus-primary:         #26364a;
    --vp-visitplus-secondary:       #297381;

    /* Brand — PER HEALTH NETWORK. These default to VisitPlus' own colours; picking a health network
       overrides them on the document element with that network's published primaryColour /
       secondaryColour (BrandThemeService + js/brand-theme.js), and sign-out restores them.
       So: use var(--vp-brand-*) for anything that should follow the hospital — headers, primary
       buttons, active tabs, links, badges, focus rings. Do NOT use them for body/heading text or
       greyscale: those stay fixed across networks, and a maroon-branded hospital would otherwise
       recolour its own copy. The -darken/-lighten/-contrast shades are computed off the two hues
       in C# (BrandPalette) so they hold up on any hue a hospital publishes. */
    --vp-brand-primary:             var(--vp-visitplus-primary);
    --vp-brand-primary-darken:      #1a2535;
    --vp-brand-primary-lighten:     #344d6b;
    --vp-brand-primary-contrast:    #ffffff;
    --vp-brand-secondary:           var(--vp-visitplus-secondary);
    --vp-brand-secondary-darken:    #1e5560;
    --vp-brand-secondary-lighten:   #3490a0;
    --vp-brand-secondary-contrast:  #ffffff;

    /* Legacy alias. The per-page headers used to be themed by an inline --hm-accent on each page's
       own shell div, which could not reach the tab bar or the layout chrome. Kept as an alias of the
       brand primary so any remaining reference resolves to the same colour. */
    --hm-accent: var(--vp-brand-primary);

    /* Base */
    --vp-base-white: #ffffff;
    --vp-base-black: #000000;
    --vp-base-bg:    #eceff1;

    /* Gray */
    --vp-gray-50:  #f4f6f8;
    --vp-gray-100: #edeef1;
    --vp-gray-200: #d8dbdf;
    --vp-gray-300: #b6bac3;
    --vp-gray-400: #8e95a2;
    --vp-gray-500: #6b7280;
    --vp-gray-600: #5b616e;
    --vp-gray-700: #3d404a;
    --vp-gray-800: #2c2f34;
    --vp-gray-900: #222328;
    --vp-gray-950: #0e0f10;

    /* Red */
    --vp-red-50:  #fff1f2;
    --vp-red-100: #ffe0e1;
    --vp-red-200: #ffc6c9;
    --vp-red-300: #ff9fa4;
    --vp-red-400: #ff676e;
    --vp-red-500: #fb2c36;
    --vp-red-600: #e91923;
    --vp-red-700: #c4111a;
    --vp-red-800: #a21219;
    --vp-red-900: #86161b;
    --vp-red-950: #490609;

    /* Orange */
    --vp-orange-50:  #fff7ed;
    --vp-orange-100: #fff5e5;
    --vp-orange-200: #ffd9a8;
    --vp-orange-300: #ffbd70;
    --vp-orange-400: #ff9537;
    --vp-orange-500: #ff7105;
    --vp-orange-600: #f05b06;
    --vp-orange-700: #c74307;
    --vp-orange-800: #9e350e;
    --vp-orange-900: #7f2e0f;
    --vp-orange-950: #451405;

    /* Yellow */
    --vp-yellow-50:  #fffeea;
    --vp-yellow-100: #fff9c5;
    --vp-yellow-200: #fff485;
    --vp-yellow-300: #ffe846;
    --vp-yellow-400: #ffd81b;
    --vp-yellow-500: #ffba0a;
    --vp-yellow-600: #e28c00;
    --vp-yellow-700: #bb6302;
    --vp-yellow-800: #984c08;
    --vp-yellow-900: #7c3e0b;
    --vp-yellow-950: #481f00;

    /* Lime */
    --vp-lime-50:  #f8ffe4;
    --vp-lime-100: #eeffc5;
    --vp-lime-200: #dbff92;
    --vp-lime-300: #c2ff53;
    --vp-lime-400: #a7fb20;
    --vp-lime-500: #7ccf00;
    --vp-lime-600: #67b500;
    --vp-lime-700: #4e8902;
    --vp-lime-800: #3f6c08;
    --vp-lime-900: #375b0c;
    --vp-lime-950: #1a3300;

    /* Green */
    --vp-green-50:  #edfff4;
    --vp-green-100: #d5ffe6;
    --vp-green-200: #aeffcf;
    --vp-green-300: #70ffab;
    --vp-green-400: #2bfd7f;
    --vp-green-500: #00d656;
    --vp-green-600: #00c048;
    --vp-green-700: #00963c;
    --vp-green-800: #067534;
    --vp-green-900: #07602d;
    --vp-green-950: #003717;

    /* Blue */
    --vp-blue-50:  #eff5ff;
    --vp-blue-100: #ddf4ff;
    --vp-blue-200: #bfd7fe;
    --vp-blue-300: #93bbfd;
    --vp-blue-400: #609afa;
    --vp-blue-500: #3b82f6; /* NOTE: fails WCAG AA as TEXT on light fills (3.23:1 on blue-100). Use blue-700+ for text; this shade is for fills/large graphics only. */
    --vp-blue-600: #2570eb;
    --vp-blue-700: #1d64d8;
    --vp-blue-800: #1e55af;
    --vp-blue-900: #1e478a;
    --vp-blue-950: #172e54;

    /* Purple */
    --vp-purple-50:  #f7f3ff;
    --vp-purple-100: #efe9fe;
    --vp-purple-200: #e2d6fe;
    --vp-purple-300: #cbb5fd;
    --vp-purple-400: #ad8bfa;
    --vp-purple-500: #8b5cf6;
    --vp-purple-600: #713aed;
    --vp-purple-700: #5e28d9;
    --vp-purple-800: #4e21b6;
    --vp-purple-900: #421d95;
    --vp-purple-950: #2a1065;

    /* Pink */
    --vp-pink-50:  #fdf2f7;
    --vp-pink-100: #fce7f1;
    --vp-pink-200: #fbcfe5;
    --vp-pink-300: #f9a8d0;
    --vp-pink-400: #f472b2;
    --vp-pink-500: #ec4899;
    --vp-pink-600: #db2780;
    --vp-pink-700: #be186a;
    --vp-pink-800: #9d1759;
    --vp-pink-900: #83184d;
    --vp-pink-950: #50072b;

    /* Semantic aliases */
    --vp-color-error:   var(--vp-red-500);
    --vp-color-warning: var(--vp-orange-500);
    /* Info default is blue-700 so it meets WCAG AA (4.5:1) as text on light/blue-100 fills.
       blue-500 was only 3.23:1 on blue-100 and failed. Use --vp-blue-100 for the fill. */
    --vp-color-info:    var(--vp-blue-700);
    --vp-color-success: var(--vp-green-500);

    /* Typography */
    --vp-font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.status-bar-safe-area {
    display: none;
}

/* Override MudBlazor's default alert font size to match theme (15px) */
.mud-alert,
.mud-alert-message {
    font-size: 15px !important;
}

/* Ensure full viewport height for mobile apps */
html, body {
    font-family: var(--vp-font-family);
    margin: 0;
    padding: 0;
    height: 100%;
    /* 100vh is the LARGE viewport on a phone (address bar hidden). Pages size themselves
       with 100dvh (the CURRENT viewport), so the vh value leaves a strip of bare canvas
       below the page while the address bar is still showing. Keep both units in step. */
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    /* No rubber-band past the ends: the bounce exposes the white canvas behind the page. */
    overscroll-behavior-y: none;
}

/* Fix for iOS WebView - ensure app fills entire screen */
#app {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* On the WASM host #app is the scroller (body is position:fixed under 768px), so the
       bounce has to be stopped here as well as on body. */
    overscroll-behavior-y: none;
}
:root {
    --mud-appbar-height: 0px !important;
}
ol,
ul {
  padding-left: 2rem;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}
.main-layout {
    background-color: #eeeeee!important;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;
}
.mud-toolbar {
background-color: #fff!important;
}
.tc-sub-header {
    /* /terms-of-use is a public route reached from the registration T&C links, so it is pre-auth. */
    color: var(--vp-visitplus-primary);

    /* Body/body2-sm */
    font-family: var(--vp-font-family);
    font-size: var(--Font-Size-body2, 14px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Font-Line-Height-lineheight-body2, 20.02px); /* 143% */
    letter-spacing: var(--Font-Spacing-spacing-body2, 0.15px);
    margin-bottom: var(--Font-Size-body2, 15px);
}
/* .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 22px) calc(100% - 24px);
} */

.notification-badge {
    min-width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
    font-weight: bold !important;
    background-color: var(--vp-brand-primary) !important;
    color: white !important;
    border: 2px solid white !important;
    inset: auto auto calc(100% - 18px) calc(100% - 22px) !important;
    border-radius: 12px !important;
}
.show-box-container {
    background-color:#fff!important;
    overflow: hidden!important;
    flex: 1!important; 
    min-height: 0!important; 
    display: flex!important; 
    flex-direction: column;
    
    /* flex-direction: column; border-radius: 16px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important; */
}
.inner-scroller-no-scroll {
    flex: 1!important; 
    min-height: 0!important; 
    display: flex!important; 
    flex-direction: column!important;
}
.inner-scroller {
    flex: 1!important; 
    min-height: 0!important; 
    display: flex!important; 
    flex-direction: column!important;
    overflow-y: auto!important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* Internet Explorer 10+ */
}

.inner-scroller::-webkit-scrollbar {
    display: none !important; /* Safari and Chrome */
    width: 0 !important;
    background: transparent !important;
}

.inner-scroller::-webkit-scrollbar-track {
    background: transparent !important;
}

.inner-scroller::-webkit-scrollbar-thumb {
    background: transparent !important;
}
.brand-gradient {
    background-image: linear-gradient(to bottom right, var(--vp-brand-primary), var(--vp-brand-secondary));
}
.mud-text-primary {
    color: var(--vp-brand-primary);
}
.home-root-container {
    height: 100%;
    display: flex!important;
    flex-direction: column!important;
}
.home-root-container .mud-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.home-root-container .mud-tabs-tabbar {
    height: 64px;
    flex-shrink: 0;
}
/* Apply safe area only in native WebView (iOS/Android), not in web browsers */
.platform-native .top-safe-area{
    padding-top: 30px!important;
}
.platform-native .top-safe-area-non-auth{
    padding-top: 50px!important;
}


.home-root-container  .mud-tabs-panels {
    flex: 1!important;
    overflow-y: auto!important;
    min-height: 0;
    margin: 0px 30px 10px 30px;
    padding-bottom: 30px;
}
.main-layout {
    flex: 1 1 auto; 
    display: flex; 
    flex-direction: column;
    height: 100vh!important;
}
h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}
.keypad-button {
    border-radius: 50% !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.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+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) 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;
}
/* Appointments Page Styles */

/* Past Appointments Notice */
.past-notice-container {
    padding: 0px;
    margin-top: 20px;
}

.past-notice-text {
    font-family: var(--vp-font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5em;
    letter-spacing: 0.9375%;
    color: #272C34;
    text-align: left;
}

/* Search and Sort Controls */
.search-sort-container {
    padding: 0px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.search-field {
    flex: 1;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.15);
}

.search-field .mud-input-root {
    font-family: var(--vp-font-family);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.75em;
    letter-spacing: 0.9375%;
}

.sort-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sort-label {
    font-family: var(--vp-font-family);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.75em;
    letter-spacing: 0.9375%;
    color: #424242;
}

.sort-icon {
    color: #1C1B1F;
}

.sort-icon .mud-icon-root {
    width: 24px;
    height: 24px;
}

.sort-icon img {
    width: 24px;
    height: 24px;
    display: block;
}

.appointments-title {
    font-family: var(--vp-font-family);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.334em;
    text-align: center;
    color: #272C34;
    margin-bottom: 20px;
    margin-top: 20px;
}

.tabs-container {
    display: flex;
    justify-content: center;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
    padding: 0;
    margin-bottom: 0;
}

.appointments-tabs .mud-tabs-tabbar {
    background: transparent;
}

/* Reset all tab borders first */
.appointments-tabs .mud-tab {
    border-bottom: none !important;
}

/* Style for active tab */
.appointments-tabs .mud-tab.mud-tab-active {
    border-bottom: 2px solid var(--vp-brand-primary) !important;
}

.appointments-tabs .mud-tab.mud-tab-active .mud-tab-content {
    line-height: 1.57em;
    letter-spacing: 0.71%;
    color: var(--vp-brand-primary) !important;
}

/* Style for inactive tabs */
.appointments-tabs .mud-tab:not(.mud-tab-active) {
    border-bottom: none !important;
}

.appointments-tabs .mud-tab:not(.mud-tab-active) .mud-tab-content {
    line-height: 1.57em;
    letter-spacing: 0.71%;
    color: rgba(0, 0, 0, 0.38) !important;
}

.filter-container {
    padding: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.patient-select {
    width: 100%;
    background: white;
}
.mud-snackbar-location-top-right {
    right:0px !important;
    padding-left: 16px!important;
    padding-right: 16px!important;
}
.mud-alert-filled-info {
    background-color: #FFB400!important;
}

/* ============================================================
   App toast / snackbar — dark design system (Figma 1064:15658).
   Every snackbar: navy brand/primary surface, rounded, white body text, with a
   severity-coloured icon + .toast-title. Title+body via the ISnackbar
   .AddToast(title, message, severity) extension; a plain Snackbar.Add(msg)
   renders the dark surface with body text only.
   ============================================================ */
.mud-snackbar {
    border-radius: 16px !important;
    padding: 10px 16px 12px 12px !important; /* node 1064:15660 */
    width: calc(100vw - 20px) !important;     /* 10px gutter to each phone edge */
    max-width: 480px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
    box-shadow: 0 7px 11.8px rgba(0, 0, 0, 0.18) !important;
    align-items: flex-start;                  /* title aligns on the icon's line (not vertically centred) */
    gap: 12px;
}

/* TopCenter container: drop default side padding so the toast sits 10px from each edge. */
.mud-snackbar-location-top-center {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Force the black surface for every severity (overrides .mud-alert-filled-* incl. the
   legacy .mud-alert-filled-info override above). Figma: black bg, white body text. */
.mud-snackbar.mud-alert-filled-success,
.mud-snackbar.mud-alert-filled-error,
.mud-snackbar.mud-alert-filled-info,
.mud-snackbar.mud-alert-filled-warning,
.mud-snackbar.mud-alert-filled-normal,
.mud-snackbar.mud-alert-filled-dark {
    background: #26364a !important; /* brand/primary — the node is navy, not black */
    color: #ffffff !important;
}

.mud-snackbar .mud-snackbar-content-message {
    font-size: 14px;
    line-height: 1.3;
    color: #ffffff;
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
}

.mud-snackbar .toast-title,
.mud-snackbar .toast-body {
    text-align: left;
}

/* Severity icon: filled colour circle + white glyph, top-aligned on the title line (Figma). */
.mud-snackbar .mud-snackbar-icon {
    opacity: 1 !important;
    align-self: flex-start;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0 !important;
    padding: 0 !important;        /* MudBlazor's own 7px vertical padding would shift the glyph */
    border-radius: 50%;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* The glyphs are authored to fill their 24px box (the ring is 14.5px inside it), so the badge
   does not pad them in — that would shrink the ring below the design's. */
.mud-snackbar .mud-snackbar-icon .mud-icon-root {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.mud-snackbar .toast-title {
    display: block;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.2px;
    margin-bottom: 2px;
}

.mud-snackbar .toast-body {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: -0.4px;
    /* MudBlazor pads every child of .mud-snackbar-content-message by 12px, which opened a gap
       between title and body and left dead space at the bottom of the toast. */
    padding: 0 !important;
    margin: 0 !important;
}

/* Per-severity: icon circle background + title colour (Figma 1064:15658 tokens) */
.mud-snackbar.mud-alert-filled-success .mud-snackbar-icon { background-color: #00c048 !important; }
.mud-snackbar.mud-alert-filled-success .toast-title { color: #00d656 !important; }

.mud-snackbar.mud-alert-filled-error .mud-snackbar-icon { background-color: #e91923 !important; }
.mud-snackbar.mud-alert-filled-error .toast-title { color: #fb2c36 !important; }

.mud-snackbar.mud-alert-filled-info .mud-snackbar-icon { background-color: #609afa !important; }
.mud-snackbar.mud-alert-filled-info .toast-title { color: #93bbfd !important; }

.mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon { background-color: #ff7105 !important; }
.mud-snackbar.mud-alert-filled-warning .toast-title { color: #ff7105 !important; }
.appointments-list-container {
    padding: 0 0px;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px; /* Extra space at bottom to prevent cut-off */
    gap: 12px; /* Consistent spacing between cards */
    /* Hide scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.appointments-list-container::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

.appointment-card {
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.15);
    margin-bottom: 12px; /* Consistent spacing between cards */
    overflow: hidden; /* Ensure clean borders */
}

.appointment-content {
    width: 100%;
}

.date-section {
    width: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80px; /* Ensure consistent height */
}

.date-section.regular-appointment {
    background: color-mix(in srgb, var(--vp-brand-primary) 8%, transparent);
    border-left: 6px solid var(--vp-brand-primary);
}

.date-section.past-appointment {
    background: rgba(66, 66, 66, 0.06);
    border-left: 6px solid rgba(0, 0, 0, 0.54);
}

.date-section.new-appointment {
    background: rgba(0, 200, 83, 0.08);
    border-left: 6px solid #00C853;
}

.date-section.updated-appointment {
    background: rgba(255, 180, 0, 0.08);
    border-left: 6px solid #FFB400;
}
.date-section.waiting-appointment{
    background: rgba(66, 66, 66, 0.06);
    border-left: 6px solid #424242;
}
 
.mud-paper.date-section.cancel-requested-appointment {
    background: rgba(0, 0, 0, 0.06) !important;
    border-left: 6px solid #000000 !important;
}



.date-stack {
    padding: 0dvh; /* Reduced from 4px */
    height: 100%;
}
.left-border {
    height: 100% !important;
}
.day-of-week {
    font-family: var(--vp-font-family);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.43em; /* Adjusted for tighter spacing */
    letter-spacing: 0.71%;
    text-align: center;
    color: var(--vp-brand-primary);
    margin: 0;
    margin-bottom: 0px; /* Small gap between day and number */
}

/* Past appointment date text styling */
.past-appointment .day-of-week,
.past-appointment .day-number,
.past-appointment .month-year {
    color: rgba(0, 0, 0, 0.54) !important;
}

/* Updated appointment date text styling */
.updated-appointment .day-of-week,
.updated-appointment .day-number,
.updated-appointment .month-year {
    color: var(--vp-brand-primary) !important;
}

.day-number {
    font-family: var(--vp-font-family);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.18em; /* Tighter line height */
    letter-spacing: 0.74%;
    text-align: center;
    color: var(--vp-brand-primary);
    margin: 0;
    width: 44px;
    height: 40px; /* Adjusted height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.month-year {
    font-family: var(--vp-font-family);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.43em; /* Adjusted for consistency */
    letter-spacing: 0.71%;
    text-align: center;
    color: var(--vp-brand-primary);
    margin: 0;
    margin-top: 2px; /* Small gap between number and month */
}

.appointment-details {
    flex: 1;
    padding: 0;
}

.detail-row {
    padding: 10px 10px;
    min-height: auto;
}

.detail-row-container {
    border-bottom: 1px #E0E0E0 solid;
}

.detail-row-container .mud-container {
    padding: 0 !important;
}

.detail-row:last-child {
    border-bottom: none; /* Remove border from last item */
}

/* Ensure proper text wrapping in patient rows */
.patient-name-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.patient-row,
.referral-row {
    display: flex !important;
    align-items: flex-start !important;
    padding: 10px 10px !important;
    min-height: auto !important;
}

.patient-row > div:first-child,
.referral-row > div:first-child {
    flex: 1;
    min-width: 0; /* Critical to allow flex item to shrink */
}

.patient-row > div:last-child,
.referral-row > div:last-child {
    flex-shrink: 0 !important;
    align-self: flex-start !important;
}

/* Target MudBlazor's generated container classes */
.appointment-content {
    width: 100%;
}

.detail-content {
    flex: 1;
}

.detail-icon {
    color: #1C1B1F;
    width: 24px;
    height: 24px;
}

.patient-name {
    font-family: var(--vp-font-family);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.43em; /* Tighter line height */
    letter-spacing: 0.15px;
    color: #424242;
    margin: 0; /* Remove any default margin */
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.department-name, .hospital-name, .appointment-time  {
    font-family: var(--vp-font-family);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.43em; /* Tighter line height */
    letter-spacing: 0.15px;
    color: #424242;
    margin: 0; /* Remove any default margin */
}


.appointment-divider {
    margin: 0 0px; /* Reduced from 0 10px */
    height: 1px;
    background-color: #E0E0E0;
}

/* Base chip styling - common properties */
.status-chip {
    color: white !important;
    font-family: var(--vp-font-family);
    font-weight: 500;
    font-size: 10px!important;
    line-height: 1.585em;
    letter-spacing: 3.33%;
    height: 20px;
    padding: 0px 6px;
    margin-right: 0px;
}

/* Status-specific color variations */
.new-chip {
    background-color: var(--vp-brand-primary) !important; /* Purple for New */
}

.updated-chip {
    background-color: var(--vp-brand-primary) !important; /* Purple for Updated */
}

.waiting-chip {
    background-color: #000000 !important; /* Black for Waiting */
}

.accepted-chip {
    background-color: #4CAF50 !important; /* Green for Accepted */
}

.cancel-requested-chip,
.cancel-requested-chip.mud-chip,
.mud-chip.cancel-requested-chip {
    background-color: #000000 !important;
    border: none !important;
}

.cancel-requested-chip .mud-chip-content,
.cancel-requested-chip.mud-chip .mud-chip-content,
.mud-chip.cancel-requested-chip .mud-chip-content {
    color: #ffffff !important;
}
.mud-chip.mud-chip-size-small {
    height: 18px!important;
    padding: 0px 6px!important;
}

/* Override MudTextField label font-size to match chip text (12px) */
.mud-input-label {
    font-size: 12px !important;
}

/* Hide status chips for past appointments */
.appointment-card.past-appointment .status-chip {
    opacity: 0;
    visibility: hidden;
}

.expand-icon {
    margin-left: auto;
    color: #1C1B1F;
}

.expanded-address {
    font-family: var(--vp-font-family);
    font-weight: 400;
    font-size: 13px;
    color: #666;
    margin-left: 34px;
    padding: 0 8px; /* Reduced from 0 10px */
}

/* Bottom Navigation Styles */
.bottom-nav {
    width: 100%;
    height: 80px;
    border-top: 1px solid #E0E0E0;
    box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.12);
}

.tab-active {
    background: color-mix(in srgb, var(--vp-brand-primary) 6%, transparent);
    border-top: 3px solid var(--vp-brand-primary);
}

.tab-inactive {
    opacity: 0.5;
}

.tab-text {
    font-family: var(--vp-font-family);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 4%;
    text-align: center;
    margin-top: 2px;
}

.tab-text-active {
    color: var(--vp-brand-primary);
}

.tab-text-inactive {
    color: #272C34;
}
.mud-input-error .mud-input-control-helper-container {
    background-color: rgba(244, 67, 54, 0.1) !important; /* Dim red background similar to MudAlert Error */
    border-radius: 0px !important;
    padding: 12px 16px 12px 44px !important; /* Extra left padding for the icon */
    margin-top: 8px !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
}

/* Exclamation icon using CSS pseudo-element */
.mud-input-error .mud-input-control-helper-container::before {
    content: "!" !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    border: 1px solid #f44336;
    color: #f44336 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-family: var(--vp-font-family) !important;
}

/* Style the validation text */
.mud-input-error .mud-input-control-helper-container .mud-input-helper-text {
    color: #d32f2f !important; /* Darker red for better readability */
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    flex: 1 !important;
}
.icon-active {
    filter: brightness(0) saturate(100%) invert(17%) sepia(70%) saturate(2267%) hue-rotate(271deg) brightness(89%) contrast(95%);
}

.icon-inactive {
    filter: brightness(0) saturate(100%) invert(7%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(97%) contrast(85%);
}

/* Enhanced Mobile Optimizations */
/* Date Picker Styling */
.mud-picker-calendar-header-switch {
    color: #272C34 !important;
}

.mud-picker-year {
    color: #272C34 !important;
}

.mud-picker-year:hover {
    color: var(--vp-brand-primary) !important;
    background-color: color-mix(in srgb, var(--vp-brand-primary) 12%, transparent) !important;
}

.mud-picker-year.mud-picker-year-selected {
    color: #FFFFFF !important;
    background-color: var(--vp-brand-primary) !important;
}

.mud-picker-month {
    color: #272C34 !important;
}

.mud-picker-month:hover {
    color: var(--vp-brand-primary) !important;
    background-color: color-mix(in srgb, var(--vp-brand-primary) 12%, transparent) !important;
}

.mud-picker-month.mud-picker-month-selected {
    color: #FFFFFF !important;
    background-color: var(--vp-brand-primary) !important;
}

.mud-picker-calendar-header {
    color: #272C34 !important;
}

.mud-picker-calendar-day {
    color: #272C34 !important;
}

.mud-picker-calendar-day:hover {
    color: var(--vp-brand-primary) !important;
    background-color: color-mix(in srgb, var(--vp-brand-primary) 12%, transparent) !important;
}
.mud-picker-calendar-day.mud-selected {
    color: #FFFFFF !important;
    background-color: var(--vp-brand-primary) !important;
}
.mud-picker-calendar-day.mud-picker-calendar-day-selected {
    color: #FFFFFF !important;
    background-color: var(--vp-brand-primary) !important;
}

.mud-picker-calendar-day.mud-picker-calendar-day-today {
    border-color: var(--vp-brand-primary) !important;
}
.mud-picker-datepicker-toolbar .mud-button-label {
    color: #272C34 !important;
}
/* Navigation arrows */
.mud-picker-calendar-header .mud-icon-button {
    color: #272C34 !important;
}

.mud-picker-calendar-header .mud-icon-button:hover {
    color: var(--vp-brand-primary) !important;
    background-color: color-mix(in srgb, var(--vp-brand-primary) 12%, transparent) !important;
}

/* Improved scroll performance on mobile */
.inner-scroller, .appointments-list-container {
    -webkit-overflow-scrolling: touch;
}

/* Prevent zoom on input focus (iOS and Android) */
input, select, textarea, .mud-input-control input, .mud-select input {
    font-size: 16px !important; /* 16px or larger prevents zoom on iOS */
}

/* Prevent zoom on MudBlazor input components */
.mud-input-root input,
.mud-input-control input,
.mud-input-slot input,
.mud-select .mud-input-root,
.mud-autocomplete .mud-input-root,
.mud-textfield .mud-input-root {
    font-size: 16px !important; /* 16px or larger prevents zoom on iOS */
}

/* MudBlazor clamps the input to `height:1lh` + `overflow:hidden` with a tight
   1.1876em line-height. With the font bumped to 16px above and Segoe UI's tall
   descent metrics, descenders (g/y/p) and Vietnamese bottom diacritics fall
   outside the line box and get clipped. Widen the line box so a full glyph fits. */
.mud-input>input.mud-input-root,
div.mud-input-slot.mud-input-root,
.mud-input-slot input {
    line-height: 1.5 !important;
}

/* Disable user zoom completely */
html {
    touch-action: manipulation; /* Prevents double-tap zoom */
    -ms-touch-action: manipulation;
}

/* Better mobile typography */
@media (max-width: 480px) {
    .appointments-title {
        font-size: 20px;
        margin-bottom: 16px;
        margin-top: 16px;
    }
    
    
    
    .day-number {
        font-size: 30px;
    }
}

/* Enhanced safe area support */
@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: env(safe-area-inset-top);
        background-color: #f7f7f7;
        width: 100%;
        z-index: 1;
    }

    .flex-column, .navbar-brand {
        padding-left: env(safe-area-inset-left);
    }
    
    /* Bottom navigation safe area */
    
    
    /* Main content safe area adjustments */
    .main-layout {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* iOS specific fixes */
@supports (-webkit-appearance: none) {
    /* Disable tap highlight */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Better button appearance */
    .mud-button {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 8px;
    }
    
    /* Smooth scrolling */
    .inner-scroller {
        -webkit-overflow-scrolling: touch;
    }
}

/* Android specific optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    .appointment-card {
        transform: translateZ(0);
        will-change: transform;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .appointment-card {
        border-width: 0.5px;
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
    .appointments-title {
        font-size: 18px;
        margin-bottom: 12px;
        margin-top: 12px;
    }
    
    .date-section {
        min-height: 60px;
    }
    
    .day-number {
        font-size: 24px;
        height: 30px;
    }
}

/* Fix text wrapping in patient filter dropdowns for long names (MMCRP-525) */
/* These styles must be global to affect MudBlazor popovers */
.mud-list-item.mud-list-item-clickable.mud-ripple {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    min-height: 48px !important;
    height: auto !important;
    align-items: flex-start !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.mud-list-item .mud-list-item-text {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
}

/* Ensure dropdown popover doesn't overflow screen */
.mud-popover .mud-list {
    max-width: calc(100vw - 32px) !important;
}

.mud-popover-provider {
    max-width: 100vw !important;
}

/* ============================================================
   Consent checkbox — every "I accept the Terms & Conditions" screen
   ============================================================
   Design-system component 342:7479 (unchecked) / 342:7481 (checked):
   a Brand/secondary teal outline that fills Blue/600 when ticked.

   Global rather than per-page on purpose. The three consent screens
   (/register, /accept-terms, /confirm-social-account) had each styled
   their own checkbox and drifted to three different results — grey
   outline vs the Mud default, and a blue vs navy vs theme-primary
   fill. MudCheckBox's Color parameter cannot express the outline
   colour, so the states are set here and the pages only keep their
   own spacing. */
.vp-check .mud-button-root svg.mud-icon-root {
    color: #297381; /* unchecked: brand/secondary outline */
}

.vp-check .mud-checkbox-true svg.mud-icon-root {
    color: #2570eb !important; /* checked: blue/600 fill */
}

/* ============================================================
   Native date fields — the calendar affordance
   ============================================================
   <input type="date"> paints its own picker button, and Chromium's is a
   solid black calendar that has nothing to do with the design system's
   stroked Monotone set (VpIcons.Calendar, 24px grid). Repaint the
   pseudo-element rather than hide it: it stays the real button, so the
   picker still opens from a tap and keyboard focus is untouched.

   Grey #5b616e matches the other in-field adornments (search, chevrons).
   Firefox draws no indicator at all and WKWebView ignores the rule —
   in both the field is text-only, as it was before. */
input[type="date"]::-webkit-calendar-picker-indicator {
    width: 20px;
    height: 20px;
    opacity: 1;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b616e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='4'/%3E%3Cpath d='M5 10H19'/%3E%3Cpath d='M8 5V4'/%3E%3Cpath d='M16 5V4'/%3E%3C/svg%3E");
}