@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Scoped to NavMenu via Blazor CSS isolation. Colors come from the CSS custom
   properties MainLayout sets on :root (see MainLayout.razor) since plain .razor.css
   files can't use @@ThemeService.X interpolation directly.

   Everything here targets markup rendered by MudBlazor's own child component
   (MudNavLink), not raw elements written in NavMenu.razor itself, so it needs the
   ::deep combinator to pierce into its render output.

   ::deep compiles to a plain descendant selector ([b-scopeid] .mud-nav-link), which
   only matches if some LITERAL HTML element in NavMenu.razor (component tags like
   <MudNavMenu> never get the scope attribute) sits as an ancestor of the MudNavLink
   markup. NavMenu.razor's root used to be <MudNavMenu> itself with nothing literal
   above it, so none of these rules ever matched anything — fixed by wrapping
   <MudNavMenu> in a literal <div class="nav-menu-root"> in NavMenu.razor. Same issue
   and same fix as Overview.razor / Overview.razor.css. */

.nav-section-label[b-28v5rtuadv] {
    font-family: 'Chillax', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    /* Was opacity:0.7 on top of var(--text-color) - that's what dulled these
       headings to a charcoal gray instead of the app's actual near-black
       text color. */
    color: var(--text-color);
    padding: 14px 20px 6px;
}

[b-28v5rtuadv] .mud-nav-link {
    font-family: 'Chillax', sans-serif;
    font-size: 1.35rem;
    border-radius: 8px;
    /* Right margin matches .nav-section-label's 20px padding-right above it -
       at the old 8px the nav item boxes hugged the drawer's right edge
       noticeably tighter than the section headings did. */
    margin: 2px 20px 2px 8px;
    /* MudBlazor's own .mud-nav-link is width:100% of its parent. Margin sits
       OUTSIDE a 100%-width box, so without this the 28px (20+8) of margin
       above pushes the box 28px past its container's right edge - invisible
       for a plain/transparent row, but very visible once .active/:hover give
       it a background, since that background gets clipped at the edge. Bites
       hardest on nested items under a MudNavGroup (see below), which have
       even less horizontal room to begin with. Subtracting the same 28px
       here keeps the box (border-box, so padding is included) inside its
       container while leaving the margin values themselves untouched. */
    width: calc(100% - 28px);
    box-sizing: border-box;
    transition: background-color 0.15s ease;
    align-items: center;
    /* Color="Color.Inherit" on <MudNavLink> (NavMenu.razor) just means "don't
       apply a MudBlazor palette color class" - with nothing here to inherit
       from, it fell through to MudBlazor's own default nav-link text color
       (a light gray), ignoring this app's theme entirely. .nav-section-label
       above already does this correctly; nav items themselves never did. */
    color: var(--text-color);
}

/* MudBlazor sizes its <svg> icons via fixed width/height attributes on the
   svg element itself, not font-size — so no font-size override (however
   specific/!important) changes the rendered pixel size. Width/height must
   be set directly. */
[b-28v5rtuadv] .mud-nav-link-icon {
    width: 1.6rem !important;
    height: 1.6rem !important;
    color: var(--text-color);
}

[b-28v5rtuadv] .mud-nav-link:hover {
    background-color: var(--hover-color);
}

[b-28v5rtuadv] .nav-badge-anchor {
    position: relative;
    display: inline-flex;
    align-items: center;
}

[b-28v5rtuadv] .nav-badge-dot {
    position: absolute;
    top: 1px;
    right: -12px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: #14b8a6;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}


/* MudBlazor's own base rule (.mud-nav-link.active:not(.mud-nav-link-disabled))
   forces color:var(--mud-palette-primary) on the active link regardless of the
   Color="Color.Inherit" param passed in markup — override it explicitly here,
   on both the text and the icon, or the active item's color still shifts. */
[b-28v5rtuadv] .mud-nav-link.active {
    background-color: var(--nav-active-bg) !important;
    border-radius: 8px;
    color: var(--text-black) !important;
}

[b-28v5rtuadv] .mud-nav-link.active .mud-nav-link-icon {
    color: var(--text-black) !important;
}

[b-28v5rtuadv] .mud-nav-link.active .mud-nav-link-text {
    font-weight: 700;
}

.logout-nav-button[b-28v5rtuadv] {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    /* app.css has `button { font-family: Poppins !important; }` — beats the
       Chillax font from ::deep .mud-nav-link since that rule has no !important. */
    font-family: 'Chillax', sans-serif !important;
}
/* /Components/Pages/Admin/AdminEmployees.razor.rz.scp.css */
/* Scoped to AdminEmployees.razor via Blazor CSS isolation. page-header-icon/
   page-title/page-subtitle sit on MudIcon/MudText (component tags), which
   never receive the scope attribute, so they need ::deep - see
   AbsenceForm.razor.css for the full explanation. The wrapping
   <div class="admin-employees-root"> in AdminEmployees.razor is the literal
   element ::deep anchors to. */

[b-4g1ej2991g] .page-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--hr-blue), var(--awexi-blue));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

[b-4g1ej2991g] .page-title {
    letter-spacing: -0.01em;
    font-weight: 700;
}

[b-4g1ej2991g] .page-subtitle {
    opacity: 0.75;
    max-width: 640px;
}
/* /Components/Pages/Admin/AdminEvents.razor.rz.scp.css */
/* Scoped to AdminEvents.razor via Blazor CSS isolation. page-header-icon/
   page-title/page-subtitle sit on MudIcon/MudText (component tags), which
   never receive the scope attribute, so they need ::deep - see
   AbsenceForm.razor.css for the full explanation. The wrapping
   <div class="admin-events-root"> in AdminEvents.razor is the literal
   element ::deep anchors to. */

[b-eqn4b86gbw] .page-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--hr-blue), var(--awexi-blue));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

[b-eqn4b86gbw] .page-title {
    letter-spacing: -0.01em;
    font-weight: 700;
}

[b-eqn4b86gbw] .page-subtitle {
    opacity: 0.75;
    max-width: 640px;
}
/* /Components/Pages/Admin/AdminLocations.razor.rz.scp.css */
/* Scoped to AdminLocations.razor via Blazor CSS isolation. page-header-icon/
   page-title/page-subtitle sit on MudIcon/MudText (component tags), which
   never receive the scope attribute, so they need ::deep - see
   AbsenceForm.razor.css for the full explanation. The wrapping
   <div class="admin-locations-root"> in AdminLocations.razor is the literal
   element ::deep anchors to. */

[b-p8pmjwchy1] .page-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--hr-blue), var(--awexi-blue));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

[b-p8pmjwchy1] .page-title {
    letter-spacing: -0.01em;
    font-weight: 700;
}

[b-p8pmjwchy1] .page-subtitle {
    opacity: 0.75;
    max-width: 640px;
}
/* /Components/Pages/Admin/AdminLogs.razor.rz.scp.css */
/* Scoped to AdminLogs.razor via Blazor CSS isolation. page-header-icon/
   page-title/page-subtitle sit on MudIcon/MudText (component tags), which
   never receive the scope attribute, so they need ::deep - see
   AbsenceForm.razor.css for the full explanation. The wrapping
   <div class="admin-logs-root"> in AdminLogs.razor is the literal element
   ::deep anchors to. The rest of this page's styling (stat cards, toolbar,
   timeline) now lives in Extra/ActivityLog.razor.css, next to the markup
   it belongs to. */

[b-b0yp8nvh43] .page-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--hr-blue), var(--awexi-blue));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

[b-b0yp8nvh43] .page-title {
    letter-spacing: -0.01em;
    font-weight: 700;
}

[b-b0yp8nvh43] .page-subtitle {
    opacity: 0.75;
    max-width: 640px;
}
/* /Components/Pages/Admin/AdminPending.razor.rz.scp.css */
/* Scoped to AdminPending.razor via Blazor CSS isolation. page-header-icon/
   page-title/page-subtitle sit on MudIcon/MudText (component tags), which
   never receive the scope attribute, so they need ::deep - see
   AbsenceForm.razor.css for the full explanation. The wrapping
   <div class="admin-pending-root"> in AdminPending.razor is the literal
   element ::deep anchors to. */

[b-xtjrbmmsp5] .page-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--hr-blue), var(--awexi-blue));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

[b-xtjrbmmsp5] .page-title {
    letter-spacing: -0.01em;
    font-weight: 700;
}

[b-xtjrbmmsp5] .page-subtitle {
    opacity: 0.75;
    max-width: 640px;
}
/* /Components/Pages/Admin/AdminSummaries.razor.rz.scp.css */
/* Scoped to AdminSummaries.razor via Blazor CSS isolation. page-header-icon/
   page-title/page-subtitle sit on MudIcon/MudText (component tags), which
   never receive the scope attribute, so they need ::deep - see
   AbsenceForm.razor.css for the full explanation. The wrapping
   <div class="admin-summaries-root"> in AdminSummaries.razor is the literal
   element ::deep anchors to. */

[b-8yoe68yeqg] .page-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--hr-blue), var(--awexi-blue));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

[b-8yoe68yeqg] .page-title {
    letter-spacing: -0.01em;
    font-weight: 700;
}

[b-8yoe68yeqg] .page-subtitle {
    opacity: 0.75;
    max-width: 640px;
}

[b-8yoe68yeqg] .admin-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 18px 20px;
    border-radius: 14px;
    background-color: var(--surface2);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[b-8yoe68yeqg] .admin-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

[b-8yoe68yeqg] .admin-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    color: #ffffff;
}

[b-8yoe68yeqg] .admin-stat-icon-blue {
    background-color: var(--hr-blue);
}

[b-8yoe68yeqg] .admin-stat-icon-orange {
    background-color: var(--awexi-orange);
}

[b-8yoe68yeqg] .admin-stat-icon-navy {
    background-color: var(--awexi-blue);
}

[b-8yoe68yeqg] .admin-stat-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

[b-8yoe68yeqg] .admin-stat-label {
    opacity: 0.75;
}

[b-8yoe68yeqg] .admin-stat-value {
    font-weight: 800;
}
/* /Components/Pages/Admin/AdminVacationSettings.razor.rz.scp.css */
/* Scoped to AdminVacationSettings.razor via Blazor CSS isolation.
   page-header-icon/page-title/page-subtitle sit on MudIcon/MudText
   (component tags), which never receive the scope attribute, so they need
   ::deep - see AbsenceForm.razor.css for the full explanation. The wrapping
   <div class="admin-vacationsettings-root"> in AdminVacationSettings.razor
   is the literal element ::deep anchors to. */

[b-8z9km5tjh6] .page-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--hr-blue), var(--awexi-blue));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

[b-8z9km5tjh6] .page-title {
    letter-spacing: -0.01em;
    font-weight: 700;
}

[b-8z9km5tjh6] .page-subtitle {
    opacity: 0.75;
    max-width: 640px;
}
/* /Components/Pages/Admin/Extra/ActivityLog.razor.rz.scp.css */
/* Scoped to ActivityLog.razor via Blazor CSS isolation. ::deep is required
   because every targeted element is rendered by a MudBlazor child component
   (MudPaper, MudText, MudIcon, MudChip) or is deep inside plain divs this
   file owns, not a raw element owned directly by this file — see
   Overview.razor.css's top-of-file comment for why the literal wrapping
   <div class="activity-log-root"> in the markup is required for ::deep to
   match anything at all. */

[b-h7tfyijr0d] .placeholder-card {
    border-radius: 14px;
    text-align: center;
}

[b-h7tfyijr0d] .placeholder-icon {
    width: 40px !important;
    height: 40px !important;
    opacity: 0.5;
}

[b-h7tfyijr0d] .placeholder-text {
    opacity: 0.75;
    max-width: 480px;
}

[b-h7tfyijr0d] .log-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    border-radius: 12px;
    padding: 16px 18px;
    background-color: var(--kpi-card-bg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

[b-h7tfyijr0d] .log-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--stat-color) 18%, transparent);
    color: var(--stat-color);
}

[b-h7tfyijr0d] .log-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-color);
}

[b-h7tfyijr0d] .log-stat-value-name {
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-h7tfyijr0d] .log-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

[b-h7tfyijr0d] .log-toolbar {
    border-radius: 14px;
    background-color: var(--surface1) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

[b-h7tfyijr0d] .log-search {
    max-width: 340px;
    flex: 1 1 260px;
}

[b-h7tfyijr0d] .log-actor-select {
    max-width: 200px;
    flex: 0 1 180px;
}

[b-h7tfyijr0d] .log-range-row {
    flex-shrink: 0;
}

[b-h7tfyijr0d] .range-chip {
    font-weight: 600;
}

[b-h7tfyijr0d] .category-chip {
    font-weight: 600;
    background-color: transparent;
}

[b-h7tfyijr0d] .category-chip-all.mud-chip-filled {
    background-color: var(--surface3) !important;
    color: var(--text-color) !important;
}

[b-h7tfyijr0d] .category-chip-icon {
    margin-right: 4px;
}

[b-h7tfyijr0d] .log-timeline {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

[b-h7tfyijr0d] .log-day-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-bottom: 12px;
    padding-left: 4px;
}

[b-h7tfyijr0d] .log-day-entries {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-h7tfyijr0d] .log-day-entries::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 17px;
    width: 2px;
    background: var(--border-color);
    z-index: 0;
}

[b-h7tfyijr0d] .log-entry {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    z-index: 1;
}

[b-h7tfyijr0d] .log-entry-node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--surface1);
    color: var(--entry-color);
    border: 2px solid var(--entry-color);
    box-shadow: 0 0 0 4px var(--surface1);
}

[b-h7tfyijr0d] .log-entry-card {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 12px;
    padding: 10px 16px;
    background-color: var(--surface1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[b-h7tfyijr0d] .log-entry-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

[b-h7tfyijr0d] .log-entry-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    background: var(--entry-color);
}

[b-h7tfyijr0d] .log-entry-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    font-size: 0.88rem;
    line-height: 1.4;
}

[b-h7tfyijr0d] .log-entry-actor {
    font-weight: 700;
    color: var(--text-color);
}

[b-h7tfyijr0d] .log-entry-super-admin-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 8px;
    border-radius: 999px;
    color: #ffffff;
    background: #fe9117;
}

[b-h7tfyijr0d] .log-entry-action {
    opacity: 0.85;
}

[b-h7tfyijr0d] .log-entry-target {
    font-weight: 700;
    color: var(--entry-color);
}

[b-h7tfyijr0d] .log-entry-time {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.55;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    [b-h7tfyijr0d] .log-entry-card {
        flex-wrap: wrap;
    }

    [b-h7tfyijr0d] .log-entry-time {
        margin-left: 42px;
    }
}
/* /Components/Pages/Admin/Extra/Calendar.razor.rz.scp.css */
/* Scoped to CalendarTab.razor via Blazor CSS isolation. ::deep is required
   because the target is rendered by MudPaper, not a raw element owned
   directly by this file — see Overview.razor.css's top-of-file comment for
   why the literal wrapping <div class="calendar-tab-root"> in the markup is
   required for ::deep to match anything at all.

   The shared .webbox/.switch-cell/.switch-cell-label/.custom-switch rules
   (identical to PendingVacaTab.razor's old copy) now live once in app.css.
   .cal-paper is this page's own padding/radius tweak on top of the shared
   .paper background - kept scoped here instead of redefining bare .paper
   again (that was already colliding with other pages' own .paper overrides,
   e.g. LocationsTab.razor's different radius value). .EventCard was dropped
   entirely - it wasn't applied to any element in this page's markup. */

[b-urar3v9piz] .cal-paper {
    padding: 10px;
    border-radius: 12px;
}
/* /Components/Pages/Admin/Extra/PendingVacaList.razor.rz.scp.css */
/* Scoped to PendingVacaTab.razor via Blazor CSS isolation. ::deep is required
   because the target is rendered by MudPaper, not a raw element owned
   directly by this file — see Overview.razor.css's top-of-file comment for
   why the literal wrapping <div class="pending-vaca-root"> in the markup is
   required for ::deep to match anything at all.

   The shared .webbox/.switch-cell/.switch-cell-label/.custom-switch rules
   (identical to CalendarTab.razor's old copy) now live once in app.css.
   .pending-paper is this page's own padding/radius tweak on top of the
   shared .paper background - kept scoped here instead of redefining bare
   .paper again. */

[b-t30ch89etn] .pending-paper {
    padding: 10px;
    border-radius: 12px;
}
/* /Components/Pages/Admin/Extra/VacaSettings.razor.rz.scp.css */
/* Scoped to VacaSettingsTab.razor via Blazor CSS isolation. ::deep is required
   because every targeted element is rendered by a MudBlazor child component
   (MudPaper, MudText, MudButton, MudDivider), not a raw element owned directly
   by this file — see Overview.razor.css's top-of-file comment for why the
   literal wrapping <div class="vaca-settings-root"> in the markup is required
   for ::deep to match anything at all. */

[b-rr5pxyujqw] .vaca-card {
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

[b-rr5pxyujqw] .vaca-section {
    padding: 8px 0;
}

[b-rr5pxyujqw] .vaca-section-title {
    font-weight: 700;
    margin-bottom: 14px;
}

[b-rr5pxyujqw] .vaca-days-input {
    max-width: 280px;
}

[b-rr5pxyujqw] .vaca-divider {
    margin: 20px 0;
}

[b-rr5pxyujqw] .vaca-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

[b-rr5pxyujqw] .vaca-submit {
    border-radius: 8px !important;
    background-color: var(--hr-blue) !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;
}

[b-rr5pxyujqw] .vaca-submit:hover {
    filter: brightness(110%);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}
/* /Components/Pages/Companies/AddCompany.razor.rz.scp.css */
/* Scoped to AddCompany.razor via Blazor CSS isolation. ::deep is required because
   every targeted element is rendered by a MudBlazor child component (MudText,
   MudPaper, MudButton), not a raw element owned directly by this file — see
   Overview.razor.css's top-of-file comment for why the literal wrapping
   <div class="add-company-root"> in the markup is required for ::deep to match
   anything at all. */

[b-1zqsvabwqt] .co-card {
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

[b-1zqsvabwqt] .co-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

[b-1zqsvabwqt] .co-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);
}

[b-1zqsvabwqt] .co-heading {
    flex-grow: 1;
    min-width: 0;
}

[b-1zqsvabwqt] .co-name {
    font-weight: 700;
    letter-spacing: -0.01em;
}

[b-1zqsvabwqt] .co-owner {
    opacity: 0.7;
    margin-top: 4px;
}

[b-1zqsvabwqt] .co-form {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

[b-1zqsvabwqt] .co-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

[b-1zqsvabwqt] .co-btn-primary,
[b-1zqsvabwqt] .co-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;
}

[b-1zqsvabwqt] .co-btn-primary {
    background-color: var(--hr-blue) !important;
}

[b-1zqsvabwqt] .co-btn-primary:hover {
    filter: brightness(110%);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

[b-1zqsvabwqt] .co-btn-secondary {
    background-color: var(--awexi-orange) !important;
}

[b-1zqsvabwqt] .co-btn-secondary:hover {
    filter: brightness(110%);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/* Below 480px the header (icon + title/subtitle) gets tight; drop the icon and
   let the heading take the freed width instead of wrapping awkwardly. Mirrors
   EditCompany.razor.css's equivalent breakpoint. */
@media (max-width: 480px) {
    [b-1zqsvabwqt] .co-icon {
        display: none;
    }
}
/* /Components/Pages/Companies/CompanyList.razor.rz.scp.css */
[b-80id5p1j0m] .cl-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

[b-80id5p1j0m] .cl-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);
}

[b-80id5p1j0m] .cl-heading {
    flex-grow: 1;
    min-width: 0;
}

[b-80id5p1j0m] .cl-title {
    font-weight: 700;
    letter-spacing: -0.01em;
}

[b-80id5p1j0m] .cl-subtitle {
    opacity: 0.7;
    margin-top: 4px;
}

[b-80id5p1j0m] .cl-btn-primary {
    flex-shrink: 0;
    border-radius: 8px !important;
    color: var(--text-white) !important;
    background-color: var(--hr-blue) !important;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

[b-80id5p1j0m] .cl-btn-primary:hover {
    filter: brightness(110%);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

[b-80id5p1j0m] .search-container {
    padding: 16px;
    border-radius: 12px;
    background-color: var(--surface2) !important;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.12);
    border-left: 4px solid var(--hr-blue);
    border-right: 4px solid var(--hr-blue);
}

[b-80id5p1j0m] .search-field {
    width: 100%;
}

[b-80id5p1j0m] .search-field-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

[b-80id5p1j0m] .company-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 24px;
}

[b-80id5p1j0m] .company-card {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    border-radius: 14px;
    padding: 16px 18px;
    transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out, border-left-color 0.25s ease;
    cursor: pointer;
}

[b-80id5p1j0m] .company-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.22);
    border-left-color: var(--hr-blue);
}

[b-80id5p1j0m] .company-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

[b-80id5p1j0m] .company-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

[b-80id5p1j0m] .company-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-80id5p1j0m] .name-text {
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-80id5p1j0m] .company-subline {
    opacity: 0.65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    [b-80id5p1j0m] .cl-icon {
        display: none;
    }
}
/* /Components/Pages/Companies/EditCompany.razor.rz.scp.css */
/* Scoped to EditCompany.razor via Blazor CSS isolation. ::deep is required because
   every targeted element is rendered by a MudBlazor child component, not a raw
   element owned directly by this file — see Overview.razor.css's top-of-file
   comment for why the literal wrapping <div class="edit-company-root"> in the
   markup is required for ::deep to match anything at all. */

[b-y2oa0i7ere] .co-card {
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

[b-y2oa0i7ere] .co-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

[b-y2oa0i7ere] .co-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);
}

[b-y2oa0i7ere] .co-heading {
    flex-grow: 1;
    min-width: 0;
}

[b-y2oa0i7ere] .co-name {
    font-weight: 700;
    letter-spacing: -0.01em;
}

[b-y2oa0i7ere] .co-owner {
    opacity: 0.7;
    margin-top: 4px;
}

[b-y2oa0i7ere] .co-edit-btn {
    flex-shrink: 0;
}

[b-y2oa0i7ere] .co-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

/* Mirrors Admin.razor's .admin-stat-card: label sits small and dim ABOVE the
   bold value, so the number reads as data inside a stat tile rather than
   competing with the page's actual heading (.co-name above) for attention. */
[b-y2oa0i7ere] .co-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 140px;
    padding: 10px 12px;
    border-radius: 12px;
    background-color: var(--surface2);
}

[b-y2oa0i7ere] .co-stat-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #ffffff;
}

[b-y2oa0i7ere] .co-stat-icon-blue {
    background-color: var(--hr-blue);
}

[b-y2oa0i7ere] .co-stat-icon-orange {
    background-color: var(--awexi-orange);
}

[b-y2oa0i7ere] .co-stat-icon-navy {
    background-color: var(--awexi-blue);
}

[b-y2oa0i7ere] .co-stat-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex-grow: 1;
}

[b-y2oa0i7ere] .co-stat-label {
    opacity: 0.75;
}

[b-y2oa0i7ere] .co-stat-value {
    font-weight: 800;
    line-height: 1.2;
}

[b-y2oa0i7ere] .co-stat-action {
    flex-shrink: 0;
    margin: -8px -8px -8px 0;
    opacity: 0.7;
}

[b-y2oa0i7ere] .co-stat-action:hover {
    opacity: 1;
}

[b-y2oa0i7ere] .co-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

[b-y2oa0i7ere] .co-btn-primary,
[b-y2oa0i7ere] .co-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;
}

[b-y2oa0i7ere] .co-btn-primary {
    background-color: var(--hr-blue) !important;
}

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

[b-y2oa0i7ere] .co-btn-secondary {
    background-color: var(--awexi-orange) !important;
}

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

/* Below 480px the header (icon + name/owner + edit button) gets tight; drop the
   icon and let the heading take the freed width instead of wrapping awkwardly. */
@media (max-width: 480px) {
    [b-y2oa0i7ere] .co-icon {
        display: none;
    }
}
/* /Components/Pages/Events/Absence/AbsenceForm.razor.rz.scp.css */
/* Scoped to AbsenceForm.razor via Blazor CSS isolation. Every selector here
   targets markup rendered by a MudBlazor child component (MudContainer,
   MudPaper, MudButton, MudText), not raw elements owned directly by this
   file, so everything uses ::deep - the scope attribute never attaches to
   component tags, only to literal HTML elements. ::deep needs a literal
   element as an ancestor to anchor to (it compiles to [b-scopeid] .selector),
   which is what the <div class="absence-form-root"> wrapper in
   AbsenceForm.razor provides. See Overview.razor.css for the same pattern. */

[b-st6ux1jwfq] .add-absence-container {
    display: flex;
    justify-content: center;
    padding: 16px;
}

[b-st6ux1jwfq] .main-paper {
    padding: 24px;
    border-radius: 20px;
    width: 700px;
    max-width: 100%;
    box-sizing: border-box;
    background-color: var(--surface1);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

[b-st6ux1jwfq] .back-button {
    margin-left: 10px;
    margin-top: -80px;
}

[b-st6ux1jwfq] .absence-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--hr-blue), var(--awexi-blue));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

[b-st6ux1jwfq] .page-title {
    letter-spacing: -0.01em;
    font-weight: 700;
}

[b-st6ux1jwfq] .selected-person-text {
    opacity: 0.75;
    word-break: break-word;
}

[b-st6ux1jwfq] .toggle-stack {
    gap: 8px;
    margin-bottom: 8px;
}

[b-st6ux1jwfq] .toggle-paper {
    display: inline-flex;
    align-items: center;
    padding: 6px 15px 6px 8px !important;
    margin-top: 15px;
    width: fit-content;
    background-color: var(--button-primary);
    border-radius: 24px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

[b-st6ux1jwfq] .toggle-paper:hover {
    transform: translateY(-2px);
}

[b-st6ux1jwfq] .toggle-paper-active {
    background-color: var(--awexi-orange);
}

/* Read-only display of the absence's existing type in edit mode (see
   GetTypeIcon/GetTypeLabel) - not a toggle/picker like add mode's, since
   type isn't editable once an absence exists. Same "selected" orange as
   .toggle-paper-active so it reads as selected/confirmed either way. */
[b-st6ux1jwfq] .type-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 15px 6px 8px !important;
    margin-top: 15px;
    width: fit-content;
    background-color: var(--button-primary);
    border-radius: 24px;
}

[b-st6ux1jwfq] .type-display-selected {
    background-color: var(--awexi-orange);
}

[b-st6ux1jwfq] .type-display-selected .type-text,
[b-st6ux1jwfq] .type-display-selected .mud-icon-root {
    color: #ffffff !important;
}

[b-st6ux1jwfq] .type-text {
    color: var(--text-color);
}

[b-st6ux1jwfq] .toggle-paper-active .type-text,
[b-st6ux1jwfq] .toggle-paper-active .mud-icon-root {
    color: #ffffff !important;
}

[b-st6ux1jwfq] .child-sickday-wrap {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.15s ease;
}

[b-st6ux1jwfq] .child-sickday-wrap.child-sickday-visible {
    max-height: 60px;
    opacity: 1;
    transition: max-height 0.25s ease, opacity 0.25s ease 0.1s;
}

[b-st6ux1jwfq] .date-fields-wrap {
    width: 100%;
    max-width: 500px;
}

[b-st6ux1jwfq] .date-fields-wrap .mud-input-slot {
    font-size: 20px !important;
}

[b-st6ux1jwfq] .date-gap {
    height: 35px;
}

[b-st6ux1jwfq] .small-button {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

[b-st6ux1jwfq] .submit-button {
    border-radius: 24px !important;
    font-size: 20px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    background: linear-gradient(135deg, var(--hr-blue), var(--awexi-blue)) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    margin-top: 20px;
}

[b-st6ux1jwfq] .submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

@media (max-width: 640px) {
    [b-st6ux1jwfq] .main-paper {
        padding: 16px;
        border-radius: 12px;
    }

    [b-st6ux1jwfq] .back-button {
        margin-top: -60px;
        margin-left: 4px;
    }

    [b-st6ux1jwfq] .page-title {
        font-size: 1.8rem !important;
    }

    [b-st6ux1jwfq] .toggle-paper,
    [b-st6ux1jwfq] .type-display {
        padding: 4px 8px;
    }

    [b-st6ux1jwfq] .type-text {
        font-size: 1.1rem !important;
    }

    [b-st6ux1jwfq] .submit-button {
        width: 48%;
    }

    [b-st6ux1jwfq] .date-gap {
        height: 24px;
    }
}
/* /Components/Pages/Events/Locations/CreateLocation.razor.rz.scp.css */
/* Scoped to CreateLocation.razor via Blazor CSS isolation. ::deep is required
   because every targeted element is rendered by a MudBlazor child component,
   not a raw element owned directly by this file — see Overview.razor.css's
   top-of-file comment for why the literal wrapping <div class="create-location-root">
   in the markup is required for ::deep to match anything at all. */

[b-99hvcehg45] .loc-card {
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

[b-99hvcehg45] .loc-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

[b-99hvcehg45] .loc-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);
}

[b-99hvcehg45] .loc-title {
    font-weight: 700;
    letter-spacing: -0.01em;
}

[b-99hvcehg45] .loc-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

[b-99hvcehg45] .loc-btn-primary {
    border-radius: 8px !important;
    background-color: var(--hr-blue) !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;
}

[b-99hvcehg45] .loc-btn-primary:hover {
    filter: brightness(110%);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

@media (max-width: 480px) {
    [b-99hvcehg45] .loc-icon {
        display: none;
    }
}
/* /Components/Pages/Events/Locations/EditLocation.razor.rz.scp.css */
/* Scoped to EditLocation.razor via Blazor CSS isolation. ::deep is required
   because every targeted element is rendered by a MudBlazor child component,
   not a raw element owned directly by this file — see Overview.razor.css's
   top-of-file comment for why the literal wrapping <div class="edit-location-root">
   in the markup is required for ::deep to match anything at all. */

[b-h2rj24yao9] .loc-card {
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

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

[b-h2rj24yao9] .loc-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);
}

[b-h2rj24yao9] .loc-title {
    font-weight: 700;
    letter-spacing: -0.01em;
}

[b-h2rj24yao9] .loc-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

[b-h2rj24yao9] .loc-btn-primary {
    border-radius: 8px !important;
    background-color: var(--hr-blue) !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;
}

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

@media (max-width: 480px) {
    [b-h2rj24yao9] .loc-icon {
        display: none;
    }
}
/* /Components/Pages/Events/Schedules/Schedule.razor.rz.scp.css */
/* Scoped to Schedule.razor via Blazor CSS isolation. ::deep is required because
   every targeted element is rendered by a MudBlazor child component or is deep
   inside the calendar grid markup, not a raw element owned directly by this
   file — see Overview.razor.css's top-of-file comment for why the literal
   wrapping <div class="schedule-page-root"> in the markup is required for
   ::deep to match anything at all.

   The per-event-type colors (Vacation/SickLeave/Maternity/Meeting/Training)
   are intentionally NOT theme tokens - they're a fixed categorical legend
   (green/red/purple/blue/orange) defined in Schedule.razor's @code block
   (GetEventColor-style switch) so they stay recognizable regardless of
   light/dark theme. Only this file's chrome (cards, headers, borders, hover
   states) uses var(--token) theme colors. */

[b-splc53rlci] .schedule-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--hr-blue), var(--awexi-blue));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

[b-splc53rlci] .page-title {
    letter-spacing: -0.01em;
    font-weight: 700;
}

[b-splc53rlci] .page-subtitle {
    opacity: 0.75;
}

/* Fixed rather than min-width: the single- and multi-person selects are two separate
   elements showing different text ("Jonas Bihrmann" vs several names joined), and a
   min-width alone let the field grow with its contents, so the control visibly changed
   size when the toggle was flipped. Pinned so both modes occupy identical space. */
/* Always its own full-width row in the wrapping header, in both modes.

   Targets .mud-select, NOT .schedule-person-select directly - confirmed against the real
   rendered DOM (not just the source) that Class="schedule-person-select" on <MudSelect>
   lands on an INNER wrapper (.mud-input-control.mud-select.schedule-person-select), while
   the actual flex item inside .schedule-header is that element's PARENT, a plain
   <div class="mud-select"> with no way to receive our Class. Every earlier attempt -
   fixed width, flex:1 1 0, flex:0 0 100% - was setting flex/width on the wrong element:
   the inner div's own sizing is governed by normal block layout against whatever width
   the outer .mud-select settles on, so none of it could touch the actual flex-item size
   no matter how forcefully applied (even width:100% !important had zero effect). :has()
   reaches the true flex item without a class of its own to select by; every browser this
   app targets already needs to support it for the @container queries elsewhere in this
   file, so it adds no new baseline requirement.

   flex-basis:100% forces it onto its own line and fills that line exactly, so the width
   is the header's width in every mode and at every viewport - no free-space arithmetic
   involved. min-width:0 stops MudBlazor's own intrinsic input width interfering. */
[b-splc53rlci] .mud-select:has(> .schedule-person-select) {
    flex: 0 0 100%;
    min-width: 0;
}

/* With the width pinned, a long list of names has to truncate instead of pushing the
   field wider or spilling past it. MudSelect renders its value into .mud-input-slot
   (and an input element in some variants), so both are covered. */
[b-splc53rlci] .schedule-person-select .mud-input-slot,
[b-splc53rlci] .schedule-person-select input {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid, not the markup's own flex justify-space-between: with space-between, the middle
   item's true position depends on how wide its two flanking siblings are - the arrow-button
   pair and the wider "I DAG"/Today button aren't the same width, so the week chip landed
   visibly left of true-center rather than centered in the bar. 1fr/auto/1fr columns give
   the middle item exactly the bar's true center regardless of what either side weighs;
   !important is needed to beat the markup's own d-flex/justify-space-between utility
   classes, which carry !important themselves (Bootstrap-utility convention). */
[b-splc53rlci] .schedule-toolbar {
    background: var(--surface1);
    border-radius: 14px;
    padding: 10px 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

[b-splc53rlci] .schedule-toolbar > .today-btn {
    justify-self: end;
}

/* Grid doesn't wrap the way flex-wrap did, so below the width the three columns actually
   need, fall back to the original stacked/wrapped flex layout rather than letting the
   Today button's column get squeezed. */
@media (max-width: 599.98px) {
    [b-splc53rlci] .schedule-toolbar {
        display: flex !important;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    [b-splc53rlci] .schedule-toolbar > .today-btn {
        justify-self: auto;
    }
}

[b-splc53rlci] .week-nav-btn {
    background: var(--surface2) !important;
    color: var(--text-color) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[b-splc53rlci] .week-nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

[b-splc53rlci] .week-range-chip {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-color) !important;
    opacity: 0.85;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* The week number is how people actually refer to a week here, so it leads and the date
   range reads as the supporting detail rather than the other way round. */
[b-splc53rlci] .week-number {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--surface2);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

[b-splc53rlci] .week-range-dates {
    font-weight: 500;
    opacity: 0.9;
}

[b-splc53rlci] .today-btn {
    color: var(--text-color) !important;
    opacity: 0.85;
    flex-shrink: 0;
}

[b-splc53rlci] .today-btn:hover {
    opacity: 1;
}

[b-splc53rlci] .calendar-card {
    background: var(--surface1) !important;
    border-radius: 16px;
    padding: 12px;
    padding-bottom: 0;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

/* Pins the header + absence rows to the top of the calendar's own scroll area. The
   sticky/z-index used to live on .calendar-header-grid, but that element sat outside
   .calendar-scroll, so its nearest scrolling ancestor was the page - it stuck to the
   viewport rather than to the calendar. Background matches .calendar-card so the hourly
   grid passing underneath doesn't show through. */
[b-splc53rlci] .calendar-sticky-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface1);
}

/* width:100% now, not calc(100% - 12px): this shares .calendar-scroll's content box with
   the body grid, so the scrollbar is already excluded for both. Subtracting a guessed
   12px on top is what knocked the columns out of alignment. */
[b-splc53rlci] .calendar-header-grid {
    display: grid;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
}

[b-splc53rlci] .calendar-scroll {
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

[b-splc53rlci] .calendar-scroll::-webkit-scrollbar {
    width: 8px;
}

[b-splc53rlci] .calendar-scroll::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 8px;
}

[b-splc53rlci] .calendar-body-grid {
    display: grid;
    cursor: default;
    position: relative;
}

[b-splc53rlci] .hdr {
    background: var(--grid2) !important;
    color: var(--text-color) !important;
    padding: 10px;
    text-align: center;
    transition: background 0.15s ease;
}

[b-splc53rlci] .time-hdr {
    text-align: left;
}

[b-splc53rlci] .calendar-allday-grid {
    display: grid;
    align-items: center;
    width: 100%;
    padding: 6px 0;
    min-height: 42px;
    border-bottom: 1px solid var(--border-color);
}

[b-splc53rlci] .allday-label {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.7;
    padding-left: 8px;
}

[b-splc53rlci] .allday-event {
    margin: 2px 4px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[b-splc53rlci] .allday-event.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

/* position/display/padding-bottom belong on every day header, not just today's. Applied
   only to .is-today they made that one cell 4px taller, and because grid rows size to
   their tallest cell the entire header row grew whenever the visible week contained
   today - so paging between weeks nudged the whole calendar up and down. Reserving the
   space unconditionally keeps the row height constant; the underline below is just
   painted into space that was already there. */
[b-splc53rlci] .day-name {
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
}

[b-splc53rlci] .day-date {
    font-size: 12px;
    opacity: 0.85;
}

[b-splc53rlci] .day-hdr.is-today {
    position: relative;
}

[b-splc53rlci] .day-hdr.is-today .day-name::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--hr-blue);
}

[b-splc53rlci] .corner-mark {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 3px solid transparent;
    pointer-events: none;
}

[b-splc53rlci] .corner-mark.corner-tl {
    top: 2px;
    left: 2px;
    border-top-color: var(--hr-blue);
    border-left-color: var(--hr-blue);
    border-top-left-radius: 8px;
}

[b-splc53rlci] .corner-mark.corner-tr {
    top: 2px;
    right: 2px;
    border-top-color: var(--hr-blue);
    border-right-color: var(--hr-blue);
    border-top-right-radius: 8px;
}

[b-splc53rlci] .corner-mark.corner-bl {
    bottom: 2px;
    left: 2px;
    border-bottom-color: var(--hr-blue);
    border-left-color: var(--hr-blue);
    border-bottom-left-radius: 8px;
}

[b-splc53rlci] .corner-mark.corner-br {
    bottom: 2px;
    right: 2px;
    border-bottom-color: var(--hr-blue);
    border-right-color: var(--hr-blue);
    border-bottom-right-radius: 8px;
}

[b-splc53rlci] .time-label {
    font-size: 12px;
    padding-left: 8px;
    align-self: start;
    color: var(--text-color) !important;
    opacity: 0.7;
}

[b-splc53rlci] .row-line {
    border-top: 1px dotted var(--border-color) !important;
}

/* Invisible click areas (only useful for admin) - they also carry the day separators,
   since there's already exactly one per day spanning the column's full height
   (grid-row: 1 / TotalMinutes) and they sit at z-index 1, under the events at z-index 2.
   So the line reads as a background divider rather than cutting across event boxes, and
   no extra markup is needed.

   2px dotted, not 1px: a dotted border's dots are as wide as the border itself, so at 1px
   they're single pixels and the line just reads as a faint solid hairline - the dotting
   is invisible at that size. 2px makes the dots actually legible as dots while still
   covering only about half the line, so it stays lighter than the 2px solid this started
   out as. box-sizing:border-box is global here (MudBlazor's reset), so the border sits
   inside the track and shifts nothing.

   Body-only, with no matching border on .day-hdr: the header cells already delimit the
   columns with their own background, so a second set of lines there adds nothing. They
   would now line up if added - all three grids share .calendar-scroll's content box - but
   that was not true before, and drawing lines in both grids is what exposed it. */
[b-splc53rlci] .day-click-area {
    background: transparent;
    z-index: 1;
    transition: background 0.15s ease;
    border-left: 2px dotted var(--border-color);
}

[b-splc53rlci] .clickable .day-click-area:hover {
    background: var(--hover-color);
    opacity: 0.5;
}

/* Events above the click areas */
[b-splc53rlci] .event-box {
    z-index: 2;
    margin: 2px;
    padding: 10px;
    background: var(--schedule-color) !important;
    color: var(--text-color) !important;
    border-radius: 8px;
    border-left: 4px solid var(--awexi-orange) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[b-splc53rlci] .event-box.clickable:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Small events: the fixed 10px padding can eat the entire box height,
   hiding the text completely. Compact events (60 min or less) get a
   much tighter padding so the single line of text always has room. */
[b-splc53rlci] .event-compact {
    padding: 2px 6px;
    gap: 0;
}

[b-splc53rlci] .event-title {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-splc53rlci] .event-meta {
    font-size: 12px;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Compact one-line text: ellipsis works only if it's single line + overflow hidden */
[b-splc53rlci] .compact-one-line {
    display: block;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-splc53rlci] .clickable {
    cursor: pointer;
}

/* OVERLAPS: shrink + shift into lanes. --slots/--slot are set inline per
   element in the markup (lane count/index), not theme tokens - left as-is. */
[b-splc53rlci] .event-overlap {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-right: 6px;
    box-sizing: border-box;
    width: calc(100% / var(--slots));
    left: calc(var(--slot) * (100% / var(--slots)));
}

/* ---- Multi-person view -------------------------------------------------------------
   Each selected person gets a palette colour by selection order, set on the element
   inline as --person-color / --person-color-soft (see PersonColorVars in Schedule.razor).
   Nothing here applies in single-person mode: the .event-person class is only emitted
   when the toggle is on, so the single-person grid keeps its existing colours exactly. */

/* Needs .event-person for specificity (0,3,0) and !important to beat the base
   ::deep .event-box rule (0,2,0), which sets background and border-left as !important.
   The tint is layered over --schedule-color rather than replacing it, so boxes keep
   their normal surface in both light and dark themes and only pick up the hue. */
[b-splc53rlci] .event-box.event-person {
    background: linear-gradient(var(--person-color-soft), var(--person-color-soft)), var(--schedule-color) !important;
    border-left-color: var(--person-color) !important;
}

/* Absence pills keep their tag colour (vacation/sick/maternity) so that meaning isn't
   lost, which leaves only this stripe - plus the name the markup prefixes - to say whose. */
[b-splc53rlci] .allday-event-person {
    border-left: 4px solid var(--person-color);
}

[b-splc53rlci] .person-legend {
    padding: 0 2px;
}

[b-splc53rlci] .person-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    background: var(--surface1);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

[b-splc53rlci] .person-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--person-color);
    flex-shrink: 0;
}

/* The empty-state chip sets no --person-color, so its dot needs a colour of its own or
   it renders as a hole. Muted and italic to read as a placeholder, not a real person. */
/* Deliberately not chip-shaped: it's a status readout sitting beside the chips, and
   giving it the same pill treatment would make it look like another selectable person. */
[b-splc53rlci] .person-legend-count {
    margin-left: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gray-text);
    white-space: nowrap;
}

/* At the cap, so the number explains why the remaining names went grey in the dropdown. */
[b-splc53rlci] .person-legend-count.person-legend-count-full {
    color: var(--awexi-orange);
}

/* Clicking a chip drops that person from the selection, so it has to look like a control
   rather than a label. Only applied in multi mode - the single-mode chip is a label. */
[b-splc53rlci] .person-legend-removable {
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

[b-splc53rlci] .person-legend-removable:hover {
    border-color: var(--person-color);
    background: var(--surface2);
}

[b-splc53rlci] .person-legend-remove {
    margin-left: 2px;
    font-size: 15px;
    line-height: 1;
    opacity: 0.5;
}

[b-splc53rlci] .person-legend-removable:hover .person-legend-remove {
    opacity: 1;
}

[b-splc53rlci] .person-legend-chip.person-legend-empty {
    color: var(--gray-text);
    font-style: italic;
    font-weight: 500;
}

[b-splc53rlci] .person-legend-empty .person-legend-dot {
    background: var(--border-color);
}

[b-splc53rlci] .multi-person-toggle {
    flex-shrink: 0;
}
/* /Components/Pages/Extra/CustomChart.razor.rz.scp.css */
/* Scoped to CustomChart via Blazor CSS isolation. donut-chart-wrapper/donut-info/
   donut-svg/donut-legend etc. are all literal elements authored directly in
   CustomChart.razor, so they scope normally without ::deep. .donut-title is applied
   via the Class parameter of a child <MudText>, so it needs ::deep to reach MudText's
   own rendered element. */

.donut-chart-wrapper[b-hc91ts8vas] {
    display: inline-flex;
    align-items: flex-start;
    gap: 28px;
    margin: 5px;
}

/* CustomChart is only ever used on Overview's "Total Employees" card, which
   sets up a container-query context named "ov-card" (Overview.razor.css) -
   querying that here, not viewport width, since the card can be full-width
   anywhere from a phone up to 1280px (MudItem lg="6") and a viewport-based
   @media has no way to tell a wide phone-width card apart from a wide desktop
   one. A fixed 140px svg (the Size passed from Overview.razor) plus the
   legend text needs roughly 340px of the card's CONTENT box (margin 2x5 +
   legend ~160 + gap 28 + donut 140) to sit side by side without wrapping -
   verified against a real card measuring 434px content width (474px
   border-box minus the card's own 20px+20px padding, which is what
   getBoundingClientRect() reports and what container queries do NOT include)
   that had plenty of room yet was still being wrapped+shrunk under the
   previous, too-generous 440px threshold. Below this, let the legend drop
   below the chart instead of overflowing past the card's edge, and shrink the
   svg a bit to match - inline-flex has no wrap fallback on its own. The
   width/height here override the Size param's inline SVG attributes - CSS
   wins over an SVG's own width/height attributes. (Scaling the svg UP on
   wider cards is the opposite adjustment, in Overview.razor.css next to the
   container's own definition, since it doesn't need this component's own
   literal-element scoping. That one's threshold is intentionally higher than
   this one - a card can have enough room to avoid wrapping without yet having
   ENOUGH extra room to justify growing the donut past its default 140px.) */
@container ov-card (max-width: 340px) {
    .donut-chart-wrapper[b-hc91ts8vas] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .donut-svg[b-hc91ts8vas] {
        width: 110px !important;
        height: 110px !important;
    }
}

.donut-info[b-hc91ts8vas] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

[b-hc91ts8vas] .donut-title {
    margin-bottom: 0;
}

.donut-svg circle[b-hc91ts8vas] {
    transition: stroke-dasharray 0.4s ease, stroke-dashoffset 0.4s ease;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.35));
}

/* fill is intentionally NOT set here. A CSS "fill" declaration always beats an
   SVG presentation attribute regardless of specificity or file order - so a
   rule here would silently override CustomChart.razor's fill="..." attribute
   in every theme, permanently killing the dark-mode gradient no matter what
   value that attribute held. fill is fully attribute-driven in markup instead:
   "currentColor" in light mode, "url(#gradientId)" in dark mode. */
.donut-center-text[b-hc91ts8vas] {
    font-size: 30px;
    font-weight: 700;
}

/* Glow only in dark mode - light mode's kpi-card-bg is a light blue and it
   just looked washed out against it. drop-shadow is the SVG-safe equivalent
   of text-shadow (text-shadow doesn't apply to SVG text in most browsers).
   .dark-mode is toggled on the app's MudLayout root in sync with ThemeService
   (see MainLayout.razor); no ::deep needed since donut-center-text is this
   component's own element. */
.dark-mode .donut-center-text[b-hc91ts8vas] {
    filter: drop-shadow(0 3px 10px rgba(112, 110, 244, 0.4));
}

.donut-legend[b-hc91ts8vas] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: inherit;
}

.donut-legend-item[b-hc91ts8vas] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.donut-legend-swatch[b-hc91ts8vas] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.15);
}

.donut-legend-label[b-hc91ts8vas] {
    font-weight: 500;
}

.donut-legend-value[b-hc91ts8vas] {
    opacity: 0.75;
}
/* /Components/Pages/Extra/EventCategoryTable.razor.rz.scp.css */
.event-category[b-rgsif9xg0f] {
    padding: 4px;
}

.event-empty[b-rgsif9xg0f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 16px;
    opacity: 0.6;
}

/* .event-empty-icon/.event-empty-text sit on MudIcon/MudText, not a literal
   element, so they need ::deep - the scope attribute never attaches to
   component tags, only literal HTML (see AbsenceForm.razor.css for the full
   explanation). The wrapping <div class="event-category"> above provides the
   scope-attribute ancestor ::deep anchors to. */
[b-rgsif9xg0f] .event-empty-icon {
    font-size: 48px !important;
    width: 48px;
    height: 48px;
}

[b-rgsif9xg0f] .event-empty-text {
    text-align: center;
}

.events-header-row[b-rgsif9xg0f] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 96px;
    padding: 16px 20px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
    border-bottom: 2px solid var(--awexi-orange);
}

.events-scroll-area[b-rgsif9xg0f] {
    height: 480px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
}

.events-row[b-rgsif9xg0f] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 96px;
    align-items: center;
    padding: 16px 20px;
    margin: 0 4px;
    background-color: var(--surface1);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

    .events-row:hover[b-rgsif9xg0f] {
        background-color: var(--surface1);
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    }

.events-col-date[b-rgsif9xg0f],
.events-col-status[b-rgsif9xg0f] {
    font-size: 0.95rem;
}

.events-col-actions[b-rgsif9xg0f] {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

[b-rgsif9xg0f] .child-sickday-chip {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    margin: 0 !important;
}

[b-rgsif9xg0f] .child-sickday-chip .mud-chip-content {
    min-width: 0;
    overflow: hidden;
}

.child-sickday-chip-text[b-rgsif9xg0f] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Desktop default: show the column version, hide the actions-bar version */
.events-status-mobile[b-rgsif9xg0f] {
    display: none;
}

@media (max-width: 640px) {
    .events-col-date[b-rgsif9xg0f] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

        .events-col-date[b-rgsif9xg0f]::before {
            content: attr(data-label);
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            opacity: 0.5;
            flex-shrink: 0;
        }

    .events-row[b-rgsif9xg0f] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px;
        padding: 14px 16px;
    }

    .events-status-desktop[b-rgsif9xg0f] {
        display: none;
    }

    .events-status-mobile[b-rgsif9xg0f] {
        display: block;
    }

    .events-col-actions[b-rgsif9xg0f] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid var(--border-color);
        padding-top: 10px;
        margin-top: 4px;
    }

    .events-actions-buttons[b-rgsif9xg0f] {
        display: flex;
        gap: 4px;
    }

        .events-actions-buttons .mud-icon-button[b-rgsif9xg0f] {
            width: 44px !important;
            height: 44px !important;
        }

            .events-actions-buttons .mud-icon-button .mud-icon-root[b-rgsif9xg0f] {
                font-size: 1.4rem !important;
            }

    .events-header-row[b-rgsif9xg0f] {
        display: none;
    }
}
/* /Components/Pages/Extra/PasswordStrengthChecklist.razor.rz.scp.css */
/* Scoped to PasswordStrengthChecklist.razor via Blazor CSS isolation. No ::deep needed -
   these are literal top-level elements in this file's own markup, so the scope attribute
   attaches to them directly. (.password-requirement-item/.met/.mismatch stay in app.css
   instead, since ManagePassword.razor also renders its own instance of that class
   directly, outside this component - see feedback memory on the isolation scope gotcha.) */

.password-strength-track[b-pb3wkncddr] {
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: var(--border-color);
    overflow: hidden;
}

.password-strength-fill[b-pb3wkncddr] {
    height: 100%;
    width: 0;
    border-radius: 4px;
    transition: width 0.2s ease, background-color 0.2s ease;
    background: #ef5c6e;
}

.password-strength-fill.weak[b-pb3wkncddr] {
    background: #ef5c6e;
}

.password-strength-fill.medium[b-pb3wkncddr] {
    background: #f0a63c;
}

.password-strength-fill.strong[b-pb3wkncddr] {
    background: #33c481;
}

.password-requirements[b-pb3wkncddr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
/* /Components/Pages/Overview.razor.rz.scp.css */
/* Scoped to Overview.razor via Blazor CSS isolation. Every selector here targets
   markup that's ultimately rendered by a MudBlazor child component (MudPaper,
   MudText, MudButton) or by CustomChart/ListComponent further down the tree, not
   raw elements owned directly by this file, so everything uses ::deep.

   ::deep only works if some element that's LITERALLY written in Overview.razor
   (not a component tag — Blazor's scope attribute never attaches to those, only
   to real HTML elements) sits as an ANCESTOR of the target markup, since the
   compiled rule becomes a plain descendant selector: [b-scopeid] .ov-card.
   Overview.razor's whole body used to be MudContainer > MudGrid > MudItem > ...
   with no literal element anywhere above the MudPaper cards, so nothing carried
   the scope attribute and every rule here silently matched zero elements. Fixed
   by wrapping the page body in a literal <div class="overview-root"> in
   Overview.razor — see the MS docs' Parent/Child example under "Child component
   support" in the CSS isolation article. */

[b-3tc7o4d96n] .page-title {
    letter-spacing: -0.01em;
    font-weight: 700;
}

[b-3tc7o4d96n] .page-subtitle {
    opacity: 0.8;
    max-width: 640px;
    line-height: 1.5;
}

/* container-type/container-name turn this card into a query container so its
   own children (below, and CustomChart's - see CustomChart.razor.css) can react
   to THIS ELEMENT's actual rendered width via @container, instead of the
   page's raw viewport width via @media. Those used to track each other closely
   because these cards always maxed out at half the viewport (MudItem sm="6"),
   but Overview.razor's grid breakpoints moved to lg="6" so the squished
   tablet-width range would stop forcing two cards into a too-narrow row - now a
   card can be the FULL viewport width anywhere from ~600px up to 1280px, which
   @media (max-width:599.98px) has no way to see. A @media rule keyed to
   viewport width was reading "is the viewport a phone" when what every rule
   below actually needs to know is "is THIS CARD narrow", and those stopped
   being the same question the moment the grid breakpoint changed. */
[b-3tc7o4d96n] .ov-card {
    container-type: inline-size;
    container-name: ov-card;
    border-radius: 9px;
    height: 100%;
    min-height: 200px;
    padding: 16px 20px;
    background-color: var(--kpi-card-bg);
    color: var(--gray-text);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

[b-3tc7o4d96n] .ov-title {
    font-weight: 900;
}

/* Modifier on .ov-card for the "Total employees" card: title+legend on the
   left, donut chart on the right. */
[b-3tc7o4d96n] .ov-card-with-chart {
    gap: 12px;
}

[b-3tc7o4d96n] .ov-info {
    flex-shrink: 0;
    gap: 10px;
}

[b-3tc7o4d96n] .ov-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-3tc7o4d96n] .ov-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

[b-3tc7o4d96n] .ov-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Wraps .ov-count-row + .ov-action-row so the mobile media query below can
   flip them from stacked rows to side-by-side without touching their own
   internal layout rules. flex-grow:1 here is what used to live directly on
   .ov-count-row - moved up a level so it still claims the card's remaining
   height (title excluded) now that count-row isn't ov-card's direct child. */
[b-3tc7o4d96n] .ov-count-action-row {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

[b-3tc7o4d96n] .ov-count-row {
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-right: 8%;
    overflow: hidden;
}

/* No color set here on purpose - it inherits .ov-card's color:var(--gray-text),
   same as the donut's center number and the "Total Absences" title, so light
   mode's "normal" look is naturally consistent across all three instead of
   diverging. (A previous version of this rule explicitly set
   color:var(--text-color), which in light mode is near-black - that's what
   made this number solid black while the title/donut stayed gray.) */
[b-3tc7o4d96n] .ov-count {
    font-weight: 700;
    font-size: 6rem;
    line-height: 1;
}

/* The dark-mode-only gradient/glow override lives in app.css, not here.
   ::deep scopes by appending the scope attribute to whatever's written
   immediately before it, so ".dark-mode ::deep .ov-count" compiles to
   ".dark-mode[b-xxxx] .ov-count" - requiring an element that's BOTH
   class="dark-mode" AND one of this component's own literal elements. But
   .dark-mode lives on MudLayout in MainLayout.razor, nowhere near Overview's
   scope, so that selector can never match - a real bug caught by inspecting
   the compiled bundle in obj/.../scopedcss/bundle/MyApp.styles.css. Plain
   unscoped CSS in app.css doesn't have this problem. */

/* @key="AbsenceCount" on the element (see Overview.razor) means Blazor mounts a brand
   new element every time the count changes, instead of updating the text of an
   existing one - so these play their "from" state fresh on every change, giving a
   digit-wheel "spin up/down" feel rather than an instant text swap. */
    [b-3tc7o4d96n] .ov-count.roll-up {
        animation: ov-roll-up-b-3tc7o4d96n 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    [b-3tc7o4d96n] .ov-count.roll-down {
        animation: ov-roll-down-b-3tc7o4d96n 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

@keyframes ov-roll-up-b-3tc7o4d96n {
    from {
        transform: translateY(60%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes ov-roll-down-b-3tc7o4d96n {
    from {
        transform: translateY(-60%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

[b-3tc7o4d96n] .ov-action-row {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: 12px;
}

[b-3tc7o4d96n] .ov-button {
    border-radius: 10px !important;
    background-color: var(--kpi-button-bg) !important;
    border: 1px solid var(--kpi-button-border-color) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    padding: 4px 22px !important;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Donut legend labels ("At Work"/"Absent") render inside CustomChart, further down
   the component tree, so this needs ::deep the same as everything else here. */
[b-3tc7o4d96n] .ov-card .donut-legend-label {
    font-weight: 700;
    border-radius: 4px;
}

/* CustomChart's own .donut-chart-wrapper carries a 5px margin on every side (see
   CustomChart.razor.css) so it doesn't hug the edges of whatever it's dropped
   into elsewhere in the app. On this card that top margin was the only thing
   separating "Total Employees"'s title from "Total Absences"'s title next to
   it - .ov-title (below) sits flush against .ov-card's own padding with no
   margin of its own, so the two titles were ~5px out of line. Zeroing just the
   top margin here (not the whole shorthand, so the horizontal/bottom spacing
   CustomChart relies on elsewhere is untouched) lines them back up. */
[b-3tc7o4d96n] .ov-card .donut-chart-wrapper {
    margin-top: 0;
}

/* Same story for weight: .ov-title (below) is forced to 900 so its <strong>
   can't push it any bolder, while CustomChart's own title class is a dead
   selector (see CustomChart.razor.css) - it renders at MudBlazor's default h6
   weight instead, visibly lighter than its sibling title. Match .ov-title so
   both read as the same weight of "title". */
[b-3tc7o4d96n] .ov-card .donut-title {
    font-weight: 900;
}

[b-3tc7o4d96n] .section-title {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

[b-3tc7o4d96n] .section-title-icon {
    color: var(--hr-blue);
    flex-shrink: 0;
}

/* .list-container itself needs overflow:auto/hidden (scrolling when the Absences
   list is too tall, plus a horizontal safety net on mobile - see ListComponent's
   own comments) - and overflow other than visible on an element clips THAT SAME
   element's own box-shadow, not just its children's. Shadow can't live here for
   that reason (moving it here earlier is why it stopped rendering entirely,
   on both lists, regardless of any padding/background tweaking). .list-outer
   is a plain wrapper with no overflow set, so its shadow always renders freely
   into .paper's padding - .list-container nested inside it keeps the scroll
   clipping with nothing of its own left to self-clip. */
[b-3tc7o4d96n] .list-outer {
    border-radius: 9px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

[b-3tc7o4d96n] .list-container {
    width: 100%;
    margin-top: 8px;
    flex-shrink: 0;
    border-radius: 9px;
    clip-path: inset(0 round 9px);
    transition: height 0.3s ease;
    overflow: auto;
}

[b-3tc7o4d96n] .list-container .scrollable-table {
    box-shadow: none;
}

    [b-3tc7o4d96n] .list-container.no-scroll {
        overflow: hidden;
    }

[b-3tc7o4d96n] .list-container .dense-table {
    font-size: 0.85rem;
}

[b-3tc7o4d96n] .list-container .dense-table .mud-table-cell {
    padding: 10px 14px !important;
    white-space: normal !important;
}

[b-3tc7o4d96n] .list-container .dense-table .mud-table-row.not-working .mud-table-cell {
    background-color: transparent !important;
}

[b-3tc7o4d96n] .list-container .dense-table .mud-table-row.not-working:hover .mud-table-cell {
    background-color: var(--hover-color) !important;
}

[b-3tc7o4d96n] .list-container .dense-table .mud-table-head .mud-table-cell {
    font-weight: 700;
}

[b-3tc7o4d96n] .fade-swap {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease, height 0.3s ease;
}

[b-3tc7o4d96n] .fade-count {
    display: inline-block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

[b-3tc7o4d96n] .fade-out {
    opacity: 0;
    transform: translateY(6px);
}

[b-3tc7o4d96n] .paper {
    background-color: var(--surface1);
    border-radius: 9px;
}

[b-3tc7o4d96n] .ov-calendar {
    height: 100%;
    min-height: 250px;
}

/* ============================================================================
   NARROW-CARD OVERRIDES - lay the count and the button out side by side to save
   vertical height, instead of the default stacked (button under the count).

   Gated on BOTH viewport and card width, and the viewport gate is load-bearing.
   Card width alone gets this exactly backwards on desktop: MudContainer Large
   (1280px) -> outer MudItem md="8" (~820px) -> inner MudItem lg="6" (~400px),
   so the card is at its NARROWEST on the widest screens, where lg="6" puts two
   cards in a row. Any viewport below the lg breakpoint drops lg="6", the card
   becomes full width (~820px), and it stacks. Net effect of a container-only
   query was side-by-side on big desktops and stacked everywhere else - the
   opposite of what's wanted.

   So: never side by side at >=960px viewport, whatever the card measures. Below
   that, still keyed to the card's own width (see .ov-card's container-type /
   container-name above) so a card sharing a row is judged on its real width.
   Threshold (440px) is the space "6rem count + ADD ABSENCE button" or "140px
   donut + legend" need side by side; under it they'd cram or overflow. Widening
   past the threshold only ever falls back to stacking, which cannot overflow.
   ============================================================================ */
@media (max-width: 959.98px) {
    @container ov-card (max-width: 440px) {
        [b-3tc7o4d96n] .ov-card {
            height: auto;
            min-height: 200px;
        }

        [b-3tc7o4d96n] .ov-count-action-row {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        [b-3tc7o4d96n] .ov-count-row {
            flex-grow: 0;
            align-items: center;
            justify-content: flex-start;
            padding-right: 0;
        }

        [b-3tc7o4d96n] .ov-action-row {
            margin-top: 0;
            padding-top: 0;
        }
    }
}

@container ov-card (min-width: 480px) {
    [b-3tc7o4d96n] .donut-svg {
        width: 170px !important;
        height: 170px !important;
    }
}

@container ov-card (min-width: 720px) {
    [b-3tc7o4d96n] .donut-svg {
        width: 200px !important;
        height: 200px !important;
    }
}
/* /Components/Pages/People/EditPeople.razor.rz.scp.css */
/* Scoped to EditPeople.razor via Blazor CSS isolation. ::deep is required because the
   targeted element is rendered by MudSelect, a child component - and needs a literal
   HTML ancestor from this file's own markup (the wrapping <div class="edit-person-root">)
   to actually attach the scope-ID descendant match to; see the CSS-isolation feedback
   memory for the exact failure mode this ran into when that ancestor was missing. */

[b-cdrf66fdaq] .custom-select-arrow .mud-select-input {
    --mud-palette-primary: var(--awexi-orange);
}
/* /Components/Pages/People/InfoPage.razor.rz.scp.css */
/* Scoped to InfoPage.razor via Blazor CSS isolation. ::deep is required because
   every targeted element is rendered by a MudBlazor child component (MudPaper,
   MudItem), not a raw element owned directly by this file — see
   Overview.razor.css's top-of-file comment for why the literal wrapping
   <div class="info-page-root"> in the markup is required for ::deep to match
   anything at all. Background color comes from the shared .paper class in
   app.css (var(--surface1)) instead of being redefined here. */

[b-00gmddtcjy] .content-box {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 24px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

[b-00gmddtcjy] .person-avatar {
    order: 2;
}

[b-00gmddtcjy] .person-info {
    order: 1;
}

@media (max-width: 600px) {
    [b-00gmddtcjy] .person-avatar {
        order: 1;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    [b-00gmddtcjy] .person-info {
        order: 2;
    }
}
/* /Components/Pages/People/Person.razor.rz.scp.css */
/* Scoped to Person.razor via Blazor CSS isolation. ::deep is required because
   every targeted element is rendered by a MudBlazor child component (MudPaper,
   MudStack, MudText, ...), not a raw element owned directly by this file — see
   Overview.razor.css's top-of-file comment for why the literal wrapping
   <div class="person-page-root"> in the markup is required for ::deep to match
   anything at all.

   This replaces both the old inline <style> block AND the separately-linked
   wwwroot/css/person.css (removed - see Person.razor's HeadContent history).
   That external file was unscoped/global, redefined .content-box with different
   values than the inline block (classic same-class-two-places collision), and
   most of its other rules (.scroll-box, .list-item, .dates-container, ...)
   targeted elements that no longer exist in this page's current markup - only
   its .person-actions layout rules were still actually needed, folded in below. */

[b-cygbb7tmvb] .content-box {
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

[b-cygbb7tmvb] .filter-bar {
    background-color: var(--surface2);
    border-radius: 16px;
    padding: 24px;
}

[b-cygbb7tmvb] .filter-content {
    width: 100%;
}

[b-cygbb7tmvb] .filter-label {
    white-space: nowrap;
}

[b-cygbb7tmvb] .filter-label-text {
    font-weight: 600;
    opacity: 0.8;
}

[b-cygbb7tmvb] .filter-divider {
    align-self: stretch;
    height: auto;
    width: 2px;
    margin: 0 6px;
    opacity: 0.6;
}

[b-cygbb7tmvb] .filter-picker {
    width: 170px;
}

[b-cygbb7tmvb] .filter-arrow {
    opacity: 0.5;
}

[b-cygbb7tmvb] .status-filter-wrap {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.25s ease, opacity 0.15s ease;
}

[b-cygbb7tmvb] .status-filter-wrap.status-filter-visible {
    max-width: 220px;
    opacity: 1;
    transition: max-width 0.25s ease, opacity 0.25s ease 0.1s;
}

/* Always rendered (reserves its width) so the Sort button stays pinned at the
   far right and toggling the filter doesn't reflow anything to its left -
   only opacity/clickability change, never layout. */
[b-cygbb7tmvb] .clear-filter-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

[b-cygbb7tmvb] .clear-filter-btn.clear-filter-active {
    opacity: 1;
    pointer-events: auto;
}

[b-cygbb7tmvb] .profile-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

[b-cygbb7tmvb] .profile-header-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
}

[b-cygbb7tmvb] .profile-name {
    line-height: 1.1;
}

[b-cygbb7tmvb] .profile-subtitle {
    opacity: 0.7;
}

[b-cygbb7tmvb] .profile-dept {
    opacity: 0.8;
}

[b-cygbb7tmvb] .profile-admin-actions {
    margin-top: 8px;
}

[b-cygbb7tmvb] .profile-contact-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 16px;
}

[b-cygbb7tmvb] .profile-contact-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-cygbb7tmvb] .profile-contact-icon {
    opacity: 0.6;
}

[b-cygbb7tmvb] .profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

[b-cygbb7tmvb] .profile-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    border-radius: 14px;
    background-color: var(--surface2);
}

[b-cygbb7tmvb] .profile-stat-icon {
    opacity: 0.5;
    font-size: 1.6rem !important;
}

[b-cygbb7tmvb] .profile-stat-value {
    font-weight: 700;
}

[b-cygbb7tmvb] .profile-stat-total {
    font-size: 0.9rem;
    opacity: 0.5;
    font-weight: 400;
}

[b-cygbb7tmvb] .profile-stat-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
}

/* Base flex layout previously only defined in the now-removed external
   person.css - without it the action buttons stack/wrap without the
   gap/centering this page's markup assumes. */
[b-cygbb7tmvb] .person-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

[b-cygbb7tmvb] .person-actions .mud-button-root {
    margin: 0 !important;
}

@media (max-width: 1200px) {
    [b-cygbb7tmvb] .content-box {
        max-width: 790px;
    }
}

@media (max-width: 650px) {
    [b-cygbb7tmvb] .profile-stats-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    [b-cygbb7tmvb] .profile-stat-card:nth-child(3) {
        grid-column: 1 / -1;
    }

    [b-cygbb7tmvb] .date-sort-picker {
        width: 100%;
    }

    [b-cygbb7tmvb] .date-sort-divider {
        display: none;
    }

    [b-cygbb7tmvb] .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    [b-cygbb7tmvb] .profile-contact-row {
        justify-content: center;
    }

    [b-cygbb7tmvb] .profile-admin-actions {
        justify-content: center;
        width: 100%;
    }

    [b-cygbb7tmvb] .person-actions {
        width: 100%;
    }
}