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

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

a, .btn-link {
    color: var(--mud-palette-primary);
}

.btn-primary {
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary-darken);
}

/* Bootstrap 5.1 fixes its own blue for the button's hover, focus and press, and for a link's hover; the scheme's
   primary, darker, instead (the user, 2026-10-30: Staffing Science's teal turned blue on Login). */
.btn-primary:hover,
.btn-primary:focus,
.btn-check:focus + .btn-primary,
.btn-primary:active,
.btn-primary:active:focus {
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary-darken);
    border-color: var(--mud-palette-primary-darken);
}

a:hover, .btn-link:hover {
    color: var(--mud-palette-primary-darken);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--mud-palette-surface), 0 0 0 0.25rem var(--mud-palette-primary);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

.invalid {
    outline: 1px solid var(--mud-palette-error);
}

.validation-message {
    color: var(--mud-palette-error);
}

.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."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--mud-palette-lines-inputs);
}

.bodypanel {
    background-color: transparent;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    page-break-inside: avoid;
}

/* Home's cards (2026-10-28), laid out as ZakiLibrary's Book sections: each row wraps rather than squashing, and every
   card in a line is as tall as the tallest (flexbox's stretch). Unlike Zaki's sections they never get bigger than
   their own width (--card-basis, 220px unless a card sets its own), however wide the screen; but they give a little
   before a row wraps (2026-10-30, the user): a row's cards narrow together to 180px (--card-min) before the last
   drops to the next line. Wrapping goes by the 180px start; growing stops at the 220px cap. */
.home-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.home-card {
    flex: 1 1 var(--card-min, 180px);
    max-width: var(--card-basis, 220px);
}

/* A module's image (ModuleImage.razor, 2026-10-30): the SVG is a stencil painted in the scheme's primary colour, so it
   follows the colour scheme; "coming soon" ones in a light grey. Shown whole and inset (the sidebar's logo); Home's
   cards fill instead (below). */
.module-image {
    width: 100%;
    background-color: var(--mud-palette-primary);
    -webkit-mask: var(--module-image) center / contain no-repeat content-box;
    mask: var(--module-image) center / contain no-repeat content-box;
    padding: 16px;
    box-sizing: border-box;
}

.module-image-muted {
    background-color: var(--mud-palette-lines-inputs);
}

/* On Home's cards the picture fills the card, cropped at the edges, as the card media did before the images became
   stencils: the user's choice (2026-10-28, f096b12; restored 2026-10-30 after 66300af inset them). */
.home-card .module-image {
    padding: 0;
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* A job plan session on the Clinicians page's Job Plans tab (2026-10-28): solid when it runs every week, striped in a
   lighter primary when only in some weeks, so the difference doesn't rest on colour alone. */
.jobplan-session {
    width: 100%;
    height: 100%;
    border: 1px solid var(--mud-palette-surface);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mud-palette-primary);
}

.jobplan-session-part-week {
    background: repeating-linear-gradient(45deg, var(--mud-palette-primary) 0 8px, color-mix(in srgb, var(--mud-palette-primary) 70%, var(--mud-palette-surface)) 8px 16px);
}

    .jobplan-session-part-week .mud-typography {
        text-shadow: 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 70%, black);
    }

/* The Job Plans calendar's week stands for every week of a plan, so its headers show day names only, not this week's
   dates ("Mon 26"). The calendar draws each as one piece of text with no template, Monday first (FirstDayOfWeek), so
   the text is hidden and the day name drawn in its place; the cell keeps its aria-label. */
.jobplan-week .mud-cal-week-header > div:not(:first-child) {
    font-size: 0;
}

    .jobplan-week .mud-cal-week-header > div:not(:first-child)::before {
        font-size: 0.875rem;
    }

.jobplan-week .mud-cal-week-header > div:nth-child(2)::before { content: "Mon"; }
.jobplan-week .mud-cal-week-header > div:nth-child(3)::before { content: "Tue"; }
.jobplan-week .mud-cal-week-header > div:nth-child(4)::before { content: "Wed"; }
.jobplan-week .mud-cal-week-header > div:nth-child(5)::before { content: "Thu"; }
.jobplan-week .mud-cal-week-header > div:nth-child(6)::before { content: "Fri"; }
.jobplan-week .mud-cal-week-header > div:nth-child(7)::before { content: "Sat"; }
.jobplan-week .mud-cal-week-header > div:nth-child(8)::before { content: "Sun"; }

.mud-expand-panel-header {
    padding: 0px !important;
}

/* Tabs in sentence case, as buttons are (2026-10-29): MudBlazor's CSS sets tabs in capitals, outside the theme. */
.mud-tab {
    text-transform: none;
}

.tabHeader {
    text-transform: none;
    border-right: none;
    min-height: 10px !important;
}

/* Service Capacity's report colours: Standard's, the defaults. The layouts set the organisation's scheme's over them
   (AppTheme.ReportStyle; docs/colour-design.md, stage 3). Bands: 1 Review / Normal working time, 2 Rationalise,
   3 Optimal / Out of hours. */
:root {
    --report-band-1: #c0e6f5;
    --report-band-2: #f5e6c0;
    --report-band-3: #daf2d0;
    --csp-color: #13beec;
    --osp-color: #ec4113;
    --msp-color: #00a9a5;
    --ci-color: #8e8e8e;
    --demand-color: #ad13ec;
    --activity-color: #ec4113;
}

/*This is for highlighting an updated control*/
@keyframes pulse-animation {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 8px color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
    }

    100% {
        transform: scale(1);
    }
}

.pulse {
    animation: pulse-animation 0.4s ease-out;
}

/* The transparent file input stretched over an import drop area (MudFileUpload InputClass;
   MudBlazor 9 made InputStyle obsolete). Clicking or dropping on the area reaches the input. */
.file-upload-overlay-input {
    opacity: 0;
}

/* The row selected in user management's departments table (UserManagement_AccessEditor). */
.um-selected > td {
    background-color: var(--mud-palette-primary-hover) !important;
}

/* Dark mode (docs/colour-design.md, stage 4, 2026-10-30). Heron.MudCalendar's hover and selected cell are a 5% black,
   invisible on a dark background: MudBlazor's own hover colour instead, which has a dark version. */
@media (hover: hover) {
    .mud-cal-month-link:hover,
    .mud-cal-week-link:hover {
        background-color: var(--mud-palette-action-default-hover);
    }
}

.cell-selected {
    background-color: var(--mud-palette-action-default-hover);
}

/* The page area is all the page's colour (the user, 2026-10-30): MudBlazor's tab bars, layout papers and tables take
   the surface colour, which in dark (and Staffing Science's light) made each tab one lighter block; boxes are told apart
   by their thin lines, as .bodypanel's are. Dialogs, menus and tooltips are drawn outside it, so keep the surface and
   stand out. MainLayout only: print stays on white paper. Charts draw on it too (ThemeColours.Ground). */
.page-area {
    --mud-palette-surface: var(--mud-palette-background);
}

/* The same for the sidebar, in its own colour (white in Staffing Science's light, its page a near-white): its logo
   sat in a paper of the surface colour, a lighter block on the sidebar (the user, 2026-10-30). */
.mud-drawer {
    --mud-palette-surface: var(--mud-palette-drawer-background);
}

/* The sidebar is the page's colour, or near it, in both modes, its edge the cards' thin line and no shadow (MainLayout's drawer has
   no elevation; the user, 2026-10-30): a shadow marks the edge in light but not on a dark page. */
.mud-drawer.mud-drawer-pos-left {
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* Bootstrap's inputs on the account pages stay white otherwise. */
.form-control,
.form-control:focus {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-inputs);
}

.form-floating > label {
    color: var(--mud-palette-text-secondary);
}