* {
    font-family: 'Poppins', sans-serif;
}

.mud-root, /* Main MudBlazor root container */
.mud-typography, /* Typography wrappers */
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4,
.mud-typography-h5, .mud-typography-h6, .mud-typography-subtitle1, .mud-typography-subtitle2,
.mud-typography-body1, .mud-typography-body2, .mud-typography-button,
.mud-typography-caption, .mud-typography-overline, /* Typography variants */
.mud-button, /* Buttons */
.mud-input-root, /* Inputs */
.mud-select-root, /* Selects */
.mud-table-root, /* Tables */
html, body {
    font-family: 'Poppins', sans-serif;
}

input, select, textarea, button {
    font-family: 'Poppins', sans-serif !important;
}

a, .btn-link {
    color: #006bb7;
}

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

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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: #929292;
}

/* Shared card-panel background used across the Admin tabs and People edit page.
   Was previously copy-pasted as an identical (and, because none of those .razor
   <style> blocks were CSS-isolated, globally-colliding) rule in 7+ separate files. */
.paper {
    background-color: var(--surface1);
}

/* Shared "form card" shell (header icon + title, card shape, action buttons) used by
   both CreatePeople.razor and EditPeople.razor - kept here rather than per-page CSS
   isolation since both pages need it identically. */
.form-card {
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.form-header-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--hr-blue);
    color: var(--text-white);
}

.form-title {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.form-btn-primary,
.form-btn-secondary {
    border-radius: 8px !important;
    color: var(--text-white) !important;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.form-btn-primary {
    background-color: var(--hr-blue) !important;
}

.form-btn-primary:hover {
    filter: brightness(110%);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.form-btn-secondary {
    background-color: var(--awexi-orange) !important;
}

.form-btn-secondary:hover {
    filter: brightness(110%);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

@media (max-width: 480px) {
    .form-header-icon {
        display: none;
    }
}

/* Shared compact labeled-checkbox row, used anywhere a boolean field (e.g. "Flex Job")
   sits in one of the forms above. Plain (unscoped) selectors are used deliberately here,
   not per-page CSS isolation with ::deep - see feedback memory on the CSS-isolation
   scope-ancestor gotcha this caused when it lived in a page-scoped file. */
.flex-job-field {
    margin: 8px 0 !important;
}

.flex-job-toggle .mud-checkbox {
    margin: 0 !important;
}

.flex-job-toggle .mud-icon-button {
    padding: 0 !important;
}

/* Overview page KPI card and section styling moved to Overview.razor.css
   (CSS-isolated, using ::deep — see that file for why). */

/* Shared list/table look — used by ListComponent, LocationsTab,
   AcceptVacations (unified here so every list matches). */
.scrollable-table {
    margin: 0;
    border-radius: 9px !important;
    border: 1px solid var(--border-color);
    /* Offset+blur previously totaled ~18px (4px + 14px), well past the 8px
       padding-bottom .list-container (Overview.razor.css) gives this room to
       render in - the shadow got cut off mid-fade instead of tapering to
       nothing, reading as a visible gray band rather than a soft shadow.
       2px + 4px = 6px max reach, comfortably inside that 8px gap. */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

    .scrollable-table .mud-table-container {
        border-radius: 9px !important;
        overflow: hidden !important;
        clip-path: inset(0 round 9px);
        background-color: var(--surface2);
        border: 1px solid var(--border-color);
    }
    .scrollable-table .mud-data-grid {
        border-radius: 9px !important;
        overflow: hidden !important;
    }

.dense-table {
    font-size: 0.6rem;
}

    /* MudBlazor gives every .mud-table-cell its own explicit background-color,
       and a cell's own background always paints over its row's background
       under `display: table-row`/`table-cell` layout — so row-state
       backgrounds (hover, not-working, ...) must target the cells, not just
       the row, or they're invisible regardless of color/!important. */
    .dense-table .mud-table-row:hover .mud-table-cell {
        background-color: var(--hover-color) !important;
        transition: background-color 0.2s ease-in-out;
    }

    .dense-table .mud-table-row.not-working .mud-table-cell {
        background-color: var(--surface4) !important;
    }

    .dense-table .mud-table-row.not-working:hover .mud-table-cell {
        background-color: var(--hover-color) !important;
    }

    .dense-table .mud-table-cell {
        border-bottom: 1px solid var(--border-color);
        padding: 2px 6px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
    }

        .dense-table .mud-table-cell:first-child,
        .dense-table .mud-table-cell:last-child {
            border-bottom: none;
        }

            .dense-table .mud-table-cell:first-child::after,
            .dense-table .mud-table-cell:last-child::after {
                content: "";
                position: absolute;
                bottom: 0;
                height: 1px;
                background-color: var(--border-color);
                left: 0;
                right: 0;
            }

            .dense-table .mud-table-cell:first-child::after {
                left: 16px; /* inset from the card's left edge */
            }

            .dense-table .mud-table-cell:last-child::after {
                right: 16px; /* inset from the card's right edge */
            }

    .dense-table .mud-table-row:last-child .mud-table-cell::after {
        display: none; /* inset divider only needed between rows */
    }

    .dense-table .mud-table-row:last-child .mud-table-cell {
        border-bottom: 1px solid var(--border-color);
    }

    .dense-table .mud-table-row {
        cursor: pointer;
    }

    .dense-table .mud-table-head .mud-table-cell {
        background-color: var(--hr-blue);
        color: white;
    }

.clickable {
    cursor: pointer;
}

/* Shared "event/vacation filter" switch styling - used by CalendarTab and
   PendingVacaTab (Admin tabs). Was previously copy-pasted identically
   (including the inline Style= on every single MudSwitch) across both
   unscoped <style> blocks. #4caf50/#388e3c (checked-state green) are a
   fixed accent for this switch's "on" state, not tied to the light/dark
   theme, so left as plain hex rather than a var(--token). */
.custom-switch {
    --mud-palette-primary: var(--awexi-orange);
    --mud-palette-success: var(--hr-blue);
}

.mud-switch.custom-switch .mud-switch-track {
    background-color: var(--border-color) !important;
    transition: background-color 0.3s;
}

.mud-switch.custom-switch.mud-switch-checked .mud-switch-track {
    background-color: #4caf50 !important;
}

.mud-switch.custom-switch .mud-switch-thumb {
    background-color: var(--surface1) !important;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s;
}

.mud-switch.custom-switch.mud-switch-checked .mud-switch-thumb {
    background-color: #388e3c !important;
}

.webbox {
    margin: 10px auto;
    padding: 20px;
    border-radius: 16px;
}

.switch-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.switch-cell-label {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 2.4em;
    line-height: 1.2em;
    text-align: center;
}

/* .dark-mode/.light-mode are toggled on MainLayout.razor's MudLayout root, kept
   in sync with ThemeService. Overview.razor.css can't express this override
   itself - Blazor's ::deep scoping requires the .dark-mode ancestor to be one
   of Overview's own elements, but it lives on MudLayout instead, so the rule
   has to live here in plain, unscoped CSS. Gradient/glow only in dark mode -
   light mode's kpi-card-bg is a light blue and the effect just looked washed
   out and muddy against it, so light mode keeps the plain solid number
   (Overview.razor.css's own .ov-count rule already sets that).

   Selector and !important both matter here, not just one: Overview.razor.css
   compiles to "[b-xxxx] .ov-count" (two selectors' worth of specificity) and
   loads AFTER this file in App.razor, so a plain ".dark-mode .ov-count" (same
   specificity) would lose that tie on load order alone and the "color"
   declarations below would be silently overridden back to solid - which is
   exactly what happened the first time this was written as just ".dark-mode
   .ov-count" with no !important. Adding .ov-card raises specificity so this
   wins outright regardless of file order; !important on color removes any
   doubt for that specific property, since it's the one actually in conflict. */
.dark-mode .ov-card .ov-count {
    background: linear-gradient(135deg, var(--text-color) 35%, var(--hr-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow: 0 4px 24px rgba(112, 110, 244, 0.35);
}

/* Light mode: title + count number are plain solid white per the reference
   design, not the muted --gray-text they inherit from .ov-card by default.
   Dark mode is untouched (title stays gray, count keeps its gradient above).
   Same specificity/order trap as the rule above - Overview.razor.css compiles
   .ov-title/.ov-count to two-class-equivalent scoped selectors that load
   AFTER this file, so equal specificity would lose that tie. .overview-root
   is the literal wrapper div every Overview.razor rule scopes through (see
   Overview.razor.css's own top-of-file comment) - three classes here beats
   two regardless of file order, and !important removes any doubt on color.

   .donut-title is "Total Employees"'s own title, rendered inside CustomChart
   rather than as a plain .ov-title MudText like "Total Absences" - it was
   missing from this rule entirely, so in light mode it stayed the default
   muted gray while its sibling card's title turned solid white right next
   to it. Same treatment here keeps them matching; dark mode (not listed)
   is untouched either way. */
.light-mode .overview-root .ov-title,
.light-mode .overview-root .ov-count,
.light-mode .overview-root .donut-title {
    color: #ffffff !important;
}

/* Same treatment for the donut's center number, which is SVG (fill, not
   color) - fill="currentColor" is set in CustomChart.razor's markup for
   light mode already, so setting this element's own "color" here just
   changes what that currentColor resolves to. .donut-chart-wrapper is
   CustomChart's own literal root element, giving the three-class specificity
   margin needed for the same load-order reason as above. */
.light-mode .donut-chart-wrapper .donut-center-text {
    color: #ffffff !important;
}

.password-requirement-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--gray-text);
    opacity: 0.55;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.password-requirement-item .mud-icon-root {
    color: var(--gray-text);
    transition: color 0.15s ease;
}

.password-requirement-item.met {
    opacity: 1;
    color: var(--text-color);
}

.password-requirement-item.met .mud-icon-root {
    color: #33c481;
}

.password-requirement-item.mismatch {
    opacity: 1;
    color: #ef5c6e;
}

.password-requirement-item.mismatch .mud-icon-root {
    color: #ef5c6e;
}