/* ── Tenant theme variables (TenantThemeService.CssVariables overrides these per tenant and mode; defaults = the original
   "Midnight Indigo" dark look, used by pages outside the main layout such as sign-in). Page styles use these instead of
   fixed colors so every screen follows the tenant's theme. ── */
:root {
    --wt-bg: #0f172a; --wt-surface: #1e293b; --wt-raised: #334155; --wt-text: #f8fafc; --wt-text-secondary: #94a3b8;
    --wt-text-muted: #64748b; --wt-text-soft: #cbd5e1; --wt-lines: rgba(255,255,255,0.07); --wt-subtle: rgba(255,255,255,0.04);
    --wt-accent: #06b6d4; --wt-radius: 12px;
    --wt-font-title: Inter, 'Segoe UI', Helvetica, Arial, sans-serif; --wt-font-body: Inter, 'Segoe UI', Helvetica, Arial, sans-serif;
    /* Design scale shared by every page: spacing, elevation and motion. */
    --wt-space-1: 4px; --wt-space-2: 8px; --wt-space-3: 12px; --wt-space-4: 16px; --wt-space-5: 24px; --wt-space-6: 32px;
    --wt-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
    --wt-shadow-md: 0 4px 12px rgba(15,23,42,.10);
    --wt-ease: cubic-bezier(.2,.8,.2,1);
}
.rounded-lg { border-radius: var(--wt-radius) !important; }
.rounded-xl { border-radius: calc(var(--wt-radius) * 1.33) !important; }

html, body {
    font-family: var(--wt-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--wt-font-title); }

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

/* Keyboard users always see where they are (mouse clicks don't show the ring). */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.mud-button-root:focus-visible, .mud-icon-button:focus-visible, .mud-nav-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Quiet scrollbars that follow the theme. */
* { scrollbar-width: thin; scrollbar-color: var(--mud-palette-lines-inputs) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--mud-palette-lines-inputs); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Numbers line up in tables and figures. */
.mud-table-cell, .wt-num { font-variant-numeric: tabular-nums; }

/* Standard page structure (see Components/Shared/PageHeader.razor, EmptyState.razor, LoadingState.razor). */
.wt-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wt-space-4); flex-wrap: wrap; margin-bottom: var(--wt-space-5); }
.wt-page-header__title { display: flex; align-items: center; gap: var(--wt-space-3); min-width: 0; }
.wt-page-header__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-primary); }
.wt-page-header__actions { display: flex; align-items: center; gap: var(--wt-space-2); flex-wrap: wrap; }
.wt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: var(--wt-space-6) var(--wt-space-4); color: var(--mud-palette-text-secondary); }
.wt-empty__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: var(--wt-space-3);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent); }
.wt-state-card { border: 1px solid var(--mud-palette-lines-default); border-radius: calc(var(--wt-radius) * 1.33);
    background: var(--mud-palette-surface); padding: var(--wt-space-6) var(--wt-space-5); max-width: 560px; margin: var(--wt-space-6) auto; text-align: center; }
/* Dashboard "Get started" card (Components/Shared/SetupProgressCard.razor). */
.wt-setup-card { border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default));
    border-radius: calc(var(--wt-radius) * 1.33); padding: var(--wt-space-5);
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)), var(--mud-palette-surface) 60%); }
.wt-setup-card__step { display: flex; align-items: center; gap: var(--wt-space-3); padding: 10px 0; border-top: 1px solid var(--mud-palette-lines-default); }

/* Payroll progress (Components/Pages/Payroll/PayrollModule.razor): calculate → payslips → check → approve → sync. */
.wt-run-card { border: 1px solid var(--mud-palette-lines-default); border-radius: calc(var(--wt-radius) * 1.33);
    background: var(--mud-palette-surface); padding: var(--wt-space-5); }
.wt-run-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--wt-space-3); }
.wt-run-step { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--wt-radius);
    border: 1px solid var(--mud-palette-lines-default); }
.wt-run-step__dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent); color: var(--mud-palette-text-secondary); }
.wt-run-step--done .wt-run-step__dot { background: color-mix(in srgb, var(--mud-palette-success) 18%, transparent); color: var(--mud-palette-success); }
.wt-run-step--next { border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent); }
.wt-run-step--next .wt-run-step__dot { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.wt-run-step--attention { border-color: color-mix(in srgb, var(--mud-palette-warning) 55%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 7%, transparent); }
.wt-run-step--attention .wt-run-step__dot { background: var(--mud-palette-warning); color: #1f1300; }
.wt-run-step--waiting { opacity: .72; }

/* Hiring / Onboarding stage bar (Components/Pages/Onboarding/OnbNewHires.razor): people per stage; click to filter. */
.wt-stage-bar { display: flex; gap: var(--wt-space-2); overflow-x: auto; padding-bottom: 2px; }
.wt-stage { flex: 1 0 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer; text-align: left;
    padding: 10px 14px; border-radius: var(--wt-radius); border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit;
    transition: border-color .15s var(--wt-ease), background-color .15s var(--wt-ease); }
.wt-stage:hover { border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent); }
.wt-stage.on { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)); }
.wt-stage__count { font-size: 1.35rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wt-stage__label { font-size: .8125rem; color: var(--mud-palette-text-secondary); }

/* Sidebar: Simple / Full menu (Components/Layout/NavMenu.razor). Simple hides the advanced tools with CSS only, so search
   still finds every page. */
.wt-menu--simple .wt-adv { display: none !important; }
.wt-menu-mode { padding: 12px 12px 4px; }
.wt-menu-mode__switch { display: flex; width: 100%; padding: 3px; border-radius: 10px; gap: 2px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent); }
.wt-menu-mode__switch button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0;
    background: transparent; color: var(--mud-palette-text-secondary);
    font: inherit; font-size: .8125rem; font-weight: 600; padding: 6px 0; border-radius: 8px; cursor: pointer;
    transition: background-color .15s var(--wt-ease), color .15s var(--wt-ease); }
.wt-menu-mode__switch button .mud-icon-root { font-size: 1.05rem; }
.wt-menu-mode__switch button.on { background: var(--mud-palette-surface); color: var(--mud-palette-primary); box-shadow: var(--wt-shadow-sm); }
.wt-menu-mode__switch button:hover:not(.on) { color: var(--mud-palette-text-primary); }
.mud-drawer-mini:not(.mud-drawer--open) .wt-menu-mode, .mud-drawer--closed .wt-menu-mode { display: none; }

/* Loading placeholder (Components/Shared/LoadingState.razor): shimmer + a thin progress line; fades in after a beat so a
   quick load never flashes it. */
.wt-loading { position: relative; padding-top: 6px; animation: wt-fade-in .25s var(--wt-ease) .12s both; }
.wt-loading__bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; overflow: hidden; border-radius: 2px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.wt-loading__bar::after { content: ""; position: absolute; inset: 0; width: 35%;
    background: linear-gradient(90deg, transparent, var(--mud-palette-primary), transparent); animation: wt-bar 1.2s var(--wt-ease) infinite; }
.wt-loading__head { display: flex; gap: 16px; padding: 10px 4px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.wt-loading__row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--mud-palette-lines-default);
    animation: wt-fade-in .3s var(--wt-ease) both; }
.wt-loading__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.wt-loading__card { border: 1px solid var(--mud-palette-lines-default); border-radius: var(--wt-radius); padding: 16px; background: var(--mud-palette-surface); }
.wt-shimmer { border-radius: 6px; background: linear-gradient(90deg,
        color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent) 25%,
        color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent) 37%,
        color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent) 63%);
    background-size: 400% 100%; animation: wt-shimmer 1.4s ease infinite; }
@keyframes wt-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes wt-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@keyframes wt-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Phones and narrow windows (≤ 600px) ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    /* Page header: title first, the page's actions on their own full-width row underneath. */
    .wt-page-header { margin-bottom: var(--wt-space-4); gap: var(--wt-space-3); }
    .wt-page-header__title h1 { font-size: 1.2rem; }
    .wt-page-header__icon { width: 34px; height: 34px; }
    .wt-page-header__actions { width: 100%; }
    .wt-page-header__actions > * { flex: 1 1 auto; }
    /* Filter and search fields with a fixed desktop width never become wider than the screen. */
    .wt-page [style*="min-width"] { min-width: 0 !important; }
    /* Wide tables and grids scroll sideways inside their card instead of widening the page. */
    .wt-page .mud-table-container, .wt-page .mud-simple-table, .wt-page .mud-data-grid .mud-table-container { overflow-x: auto; }
    /* Dialogs use the screen, with a little margin, and scroll when tall. */
    .mud-dialog { margin: 8px !important; max-width: calc(100vw - 16px) !important; max-height: calc(100vh - 16px); }
    .mud-dialog .mud-dialog-content { max-height: calc(100vh - 160px); overflow-y: auto; }
    /* Cards and state panels: tighter padding; payroll steps stack. */
    .wt-state-card, .wt-setup-card, .wt-run-card { padding: var(--wt-space-4); margin-left: 0; margin-right: 0; }
    .wt-run-steps { grid-template-columns: 1fr; }
    .wt-setup-card__step { flex-wrap: wrap; }
    .wt-loading__cards { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

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

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ==========================================================================
   Worktrax Global Theme Engine Styles
   Supports seamless Dark Mode & Light Mode rendering across all modules
   ========================================================================== */

/* MudBlazor Paper & Surface Cards Defaults Override */
.kpi-card, .wt-card, .mud-paper {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
}

/* Select Dropdown Inputs Theme Fix */
.mud-select .mud-input-control,
.mud-select-input {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Tables Theme Fix */
.mud-table-root {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.mud-table-head .mud-table-cell {
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

.mud-table-body .mud-table-cell {
    color: var(--mud-palette-text-primary) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

/* Dialog & Modal Backdrop Fixes */
.mud-dialog {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Light Mode Overrides for Banner Cards & Text */
body:not(.mud-theme-dark) .wt-banner-title {
    color: #0f172a !important;
}

body:not(.mud-theme-dark) .wt-banner-subtitle {
    color: #475569 !important;
}

body.mud-theme-dark .wt-banner-title {
    color: #f8fafc !important;
}

body.mud-theme-dark .wt-banner-subtitle {
    color: #cbd5e1 !important;
}

/* Universal automatic override for hardcoded dark inline styles when in Light Mode */
body:not(.mud-theme-dark) [style*="color:#f8fafc"],
body:not(.mud-theme-dark) [style*="color: #f8fafc"],
body:not(.mud-theme-dark) [style*="color:#f1f5f9"],
body:not(.mud-theme-dark) [style*="color: #f1f5f9"],
body:not(.mud-theme-dark) [style*="color:#e2e8f0"],
body:not(.mud-theme-dark) [style*="color: #e2e8f0"],
body:not(.mud-theme-dark) [style*="color:#ffffff"],
body:not(.mud-theme-dark) [style*="color: #ffffff"] {
    color: var(--mud-palette-text-primary) !important;
}

body:not(.mud-theme-dark) [style*="color:#94a3b8"],
body:not(.mud-theme-dark) [style*="color: #94a3b8"],
body:not(.mud-theme-dark) [style*="color:#cbd5e1"],
body:not(.mud-theme-dark) [style*="color: #cbd5e1"],
body:not(.mud-theme-dark) [style*="color:#64748b"],
body:not(.mud-theme-dark) [style*="color: #64748b"],
body:not(.mud-theme-dark) [style*="color:#475569"],
body:not(.mud-theme-dark) [style*="color: #475569"],
body:not(.mud-theme-dark) [style*="color:#334155"],
body:not(.mud-theme-dark) [style*="color: #334155"] {
    color: var(--mud-palette-text-secondary) !important;
}

body:not(.mud-theme-dark) [style*="background:#0f172a"],
body:not(.mud-theme-dark) [style*="background: #0f172a"],
body:not(.mud-theme-dark) [style*="background:#1e293b"],
body:not(.mud-theme-dark) [style*="background: #1e293b"],
body:not(.mud-theme-dark) [style*="background:#334155"],
body:not(.mud-theme-dark) [style*="background: #334155"],
body:not(.mud-theme-dark) [style*="background:#1e1b4b"],
body:not(.mud-theme-dark) [style*="background: #1e1b4b"],
body:not(.mud-theme-dark) [style*="background:linear-gradient"],
body:not(.mud-theme-dark) [style*="background: linear-gradient"],
body:not(.mud-theme-dark) .summary-card,
body:not(.mud-theme-dark) .panel-card,
body:not(.mud-theme-dark) .plan-card {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

body:not(.mud-theme-dark) strong,
body:not(.mud-theme-dark) b {
    color: var(--mud-palette-text-primary);
}

body:not(.mud-theme-dark) [style*="border:1px solid rgba(255,255,255"],
body:not(.mud-theme-dark) [style*="border: 1px solid rgba(255,255,255"],
body:not(.mud-theme-dark) [style*="border-color:rgba(255,255,255"],
body:not(.mud-theme-dark) [style*="border-color: rgba(255,255,255"] {
    border-color: var(--mud-palette-lines-default) !important;
}

/* Day cells, table cells, skeleton, and chips in Light Mode */
body:not(.mud-theme-dark) th {
    color: var(--mud-palette-text-secondary) !important;
}

body:not(.mud-theme-dark) td {
    color: var(--mud-palette-text-primary) !important;
}

body:not(.mud-theme-dark) .attendance-hero,
body:not(.mud-theme-dark) .attendance-surface,
body:not(.mud-theme-dark) .attendance-report-surface {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}

/* Date/select popovers must paint above everything else on the page — on pages with a
   MudTabs strip (e.g. Reports) or other elevated cards directly below a filter bar, the
   default z-index left the popover's top portion rendering behind that content instead
   of fully on top of it. */
.mud-popover {
    z-index: 3000 !important;
}


/* ==========================================================================
   Responsive foundation — phones (<600px), tablets (600–959px), desktops.
   Page code keeps its desktop layout; these rules make the common patterns
   (title + action rows, filter bars, tables, dialogs, media) adapt.
   ========================================================================== */

/* Media and embedded content never wider than their container. */
.wt-page img, .wt-page video, .wt-page canvas, .wt-page iframe, .wt-page svg:not(.mud-icon-root) {
    max-width: 100%;
}

/* Long unbroken text (emails, ids, URLs) wraps instead of pushing the page wider. */
.wt-page .mud-typography, .wt-page td, .wt-page .mud-chip-content {
    overflow-wrap: break-word;
}

/* Tables scroll inside their card rather than widening the page. */
.wt-page .mud-table-container,
.wt-page .mud-simple-table,
.wt-page .mud-data-grid .mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Configured sidebar: a list's menu item stays highlighted on its record pages (same look as .active). */
.mud-navmenu .wt-nav-active .mud-nav-link:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
    font-weight: 500 !important;
    border-inline-end-style: solid;
    border-inline-end-width: 2px;
}

/* Navigation trail (Back to … + breadcrumbs) above every page. */
.wt-trail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: -4px 0 14px;
    min-height: 32px;
}
.wt-trail .wt-trail-back { text-transform: none; font-weight: 600; padding-left: 4px; }
.wt-trail .wt-trail-divider { width: 1px; height: 18px; background: var(--mud-palette-lines-default); }
.wt-trail .wt-trail-crumbs { padding: 0; font-size: 0.8rem; flex-wrap: wrap; }
.wt-trail .wt-trail-crumbs .mud-breadcrumb-item a { color: var(--mud-palette-text-secondary); }
.wt-trail .wt-trail-crumbs .mud-breadcrumb-item a:hover { color: var(--mud-palette-primary); }
.wt-trail .wt-trail-crumbs .mud-breadcrumb-item.mud-disabled > * { color: var(--mud-palette-text-primary); opacity: 1; font-weight: 600; }
@media (max-width: 599.98px) {
    .wt-trail { margin: -4px 0 10px; }
    .wt-trail .wt-trail-divider { display: none; }
}

/* Tenant name in the app bar truncates. */
.wt-tenant-name {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.mud-appbar .mud-toolbar {
    gap: 4px;
    overflow: hidden;
}

/* ── Tablets and phones ─────────────────────────────────────────────────── */
@media (max-width: 959.98px) {
    /* Title rows and toolbars wrap their buttons onto the next line. */
    .wt-page .d-flex.justify-space-between,
    .wt-page .d-flex.gap-1, .wt-page .d-flex.gap-2, .wt-page .d-flex.gap-3, .wt-page .d-flex.gap-4 {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    /* …except label/value pairs and chip rows that must stay on one line. */
    .wt-page .d-flex.flex-nowrap { flex-wrap: nowrap; }

    .wt-page .mud-table-pagination-toolbar {
        flex-wrap: wrap;
        height: auto;
        padding: 4px 8px;
    }
    .wt-page .mud-table-pagination-spacer { display: none; }

    .wt-tenant-name { max-width: 130px; }
}

/* ── Phones ─────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
    .wt-page .mud-typography-h3 { font-size: 1.9rem; }
    .wt-page .mud-typography-h4 { font-size: 1.5rem; }
    .wt-page .mud-typography-h5 { font-size: 1.2rem; }
    .wt-page .mud-typography-h6 { font-size: 1.05rem; }

    /* Inputs and buttons with desktop widths set inline go full width. */
    .wt-page .mud-input-control[style*="width"],
    .wt-page .mud-select[style*="width"],
    .wt-page .mud-picker[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .wt-page [style*="min-width"]:not(.mud-table-cell):not(th):not(td) {
        min-width: 0 !important;
    }

    /* Dialogs use (almost) the whole screen and stack their actions. */
    .mud-dialog {
        margin: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }
    .mud-dialog .mud-dialog-content { padding: 8px 16px; }
    .mud-dialog .mud-dialog-actions { flex-wrap: wrap; gap: 8px; }

    /* Tabs: smaller labels so more fit; the arrows scroll the rest. */
    .wt-page .mud-tab { min-width: 0; padding: 6px 12px; font-size: 0.8rem; }

    /* Stacked (card) table rows on phones: label left, value right. */
    .wt-page .mud-xs-table .mud-table-row { border-bottom: 1px solid var(--mud-palette-lines-default); }
    .wt-page .mud-xs-table .mud-table-cell { text-align: right; }
    .wt-page .mud-xs-table .mud-table-cell:before {
        text-align: left; padding-right: 12px; color: var(--mud-palette-text-secondary);
        overflow-wrap: normal; word-break: normal; hyphens: none; flex-shrink: 0; max-width: 45%;
    }

    .wt-page .mud-typography, .wt-page .mud-xs-table td { overflow-wrap: anywhere; }

    /* Grid gutters above 12px push cards past the phone's 12px page padding — cap them. */
    .wt-page .mud-grid-spacing-xs-4, .wt-page .mud-grid-spacing-xs-5, .wt-page .mud-grid-spacing-xs-6,
    .wt-page .mud-grid-spacing-xs-7, .wt-page .mud-grid-spacing-xs-8, .wt-page .mud-grid-spacing-xs-9,
    .wt-page .mud-grid-spacing-xs-10 {
        width: calc(100% + 12px);
        margin-left: -12px;
        margin-top: -12px;
    }
    .wt-page .mud-grid-spacing-xs-4 > .mud-grid-item, .wt-page .mud-grid-spacing-xs-5 > .mud-grid-item,
    .wt-page .mud-grid-spacing-xs-6 > .mud-grid-item, .wt-page .mud-grid-spacing-xs-7 > .mud-grid-item,
    .wt-page .mud-grid-spacing-xs-8 > .mud-grid-item, .wt-page .mud-grid-spacing-xs-9 > .mud-grid-item,
    .wt-page .mud-grid-spacing-xs-10 > .mud-grid-item {
        padding-left: 12px;
        padding-top: 12px;
    }

    /* Desktop-sized card padding (24–40px) is scaled down so content gets the width. */
    .wt-page .pa-6, .wt-page .pa-7 { padding: 16px !important; }
    .wt-page .pa-8, .wt-page .pa-9, .wt-page .pa-10 { padding: 20px !important; }
    .wt-page .px-6, .wt-page .px-8 { padding-left: 16px !important; padding-right: 16px !important; }

    /* Device-preview chassis (Worktrax Mobile App page) shrinks to the phone's width. */
    .wt-page .mobile-chassis-container { max-width: 100%; }

    .wt-tenant-name { display: none; }
    .mud-snackbar { max-width: calc(100vw - 24px); }
}

/* ── Notification centre (bell + /notifications) ───────────────────────── */
.wt-bell { position: relative; display: inline-flex; align-items: center; }
.wt-bell-pulse { animation: wt-bell-ring 0.9s ease-in-out 2; }
@keyframes wt-bell-ring {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); }
    60% { transform: rotate(8deg); } 80% { transform: rotate(-5deg); }
}
.wt-bell-panel { width: min(430px, calc(100vw - 16px)); max-height: min(640px, calc(100vh - 80px)); display: flex; flex-direction: column;
                 border-radius: 14px !important; overflow: hidden; border: 1px solid var(--mud-palette-lines-default); }
.wt-bell-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 8px 16px; }
.wt-bell-title { font-weight: 800; font-size: 16px; }
.wt-bell-sub { font-size: 12px; color: var(--mud-palette-text-secondary); }
.wt-bell-filters { display: flex; gap: 6px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--mud-palette-lines-default); }
.wt-bell-filters::-webkit-scrollbar { display: none; }
.wt-chip { --chip-color: var(--mud-palette-primary); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer;
           font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
           border: 1px solid var(--mud-palette-lines-default); background: transparent; color: var(--mud-palette-text-primary); }
.wt-chip:hover { border-color: var(--chip-color); }
.wt-chip.active { background: var(--chip-color); border-color: var(--chip-color); color: #fff; }
.wt-chip-count { background: rgba(127,127,127,.22); border-radius: 999px; padding: 0 6px; font-size: 11px; line-height: 16px; }
.wt-chip.active .wt-chip-count { background: rgba(255,255,255,.28); }
.wt-bell-list { overflow-y: auto; flex: 1 1 auto; min-height: 120px; }
.wt-bell-foot { border-top: 1px solid var(--mud-palette-lines-default); padding: 4px 8px; }
.wt-bell-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 32px 24px; color: var(--mud-palette-text-secondary); }
.wt-bell-empty .mud-icon-root { font-size: 34px; opacity: .6; }
.wt-bell-hint { font-size: 12px; max-width: 320px; opacity: .85; }

.wt-notif-group { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; padding: 6px 16px; font-size: 11px; font-weight: 800;
                  letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary);
                  background: var(--mud-palette-background-gray, var(--mud-palette-surface)); border-bottom: 1px solid var(--mud-palette-lines-default); }
.wt-notif { --wt-notif-color: var(--mud-palette-primary); position: relative; display: flex; gap: 12px; padding: 12px 12px 12px 16px; cursor: pointer;
            border-bottom: 1px solid var(--mud-palette-lines-default); transition: background .15s; outline: none; }
.wt-notif:hover, .wt-notif:focus-visible { background: var(--mud-palette-action-default-hover); }
.wt-notif-unread { background: color-mix(in srgb, var(--wt-notif-color) 7%, transparent); }
.wt-notif-unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--wt-notif-color); }
.wt-notif-icon { --wt-notif-color: var(--mud-palette-primary); position: relative; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
                 display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--wt-notif-color) 15%, transparent); }
.wt-notif .wt-notif-icon { --wt-notif-color: inherit; }
.wt-notif-sev { position: absolute; right: -2px; top: -2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--mud-palette-surface); }
.wt-notif-body { flex: 1 1 auto; min-width: 0; }
.wt-notif-title { font-size: 14px; line-height: 1.35; color: var(--mud-palette-text-primary); }
.wt-notif-unread .wt-notif-title { font-weight: 700; }
.wt-notif-message { font-size: 13px; line-height: 1.4; margin-top: 2px; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.wt-notif-compact .wt-notif-message { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wt-notif-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.wt-notif-cat { font-weight: 700; }
.wt-notif-dot { opacity: .5; }
.wt-notif-action { text-transform: none !important; font-weight: 600 !important; }
.wt-notif-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.wt-notif-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wt-notif-color); margin: 4px 4px 0 0; }
.wt-notif-hover { display: flex; opacity: 0; transition: opacity .15s; }
.wt-notif:hover .wt-notif-hover, .wt-notif:focus-within .wt-notif-hover { opacity: 1; }
@media (hover: none) { .wt-notif-hover { opacity: 1; } }

.wt-inbox-list { overflow: hidden; }
.wt-inbox-rail-list { display: flex; flex-direction: column; gap: 2px; }
.wt-rail-item { --rail-color: var(--mud-palette-primary); display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
                background: transparent; color: var(--mud-palette-text-primary); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.wt-rail-item:hover { background: var(--mud-palette-action-default-hover); }
.wt-rail-item.active { background: color-mix(in srgb, var(--rail-color) 14%, transparent); font-weight: 700; }
.wt-rail-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-rail-count { background: var(--mud-palette-error); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 700; line-height: 18px; }
@media (max-width: 959.98px) {
    .wt-inbox-rail-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
    .wt-inbox-rail-list::-webkit-scrollbar { display: none; }
    .wt-rail-item { width: auto; flex: 0 0 auto; }
    .wt-rail-label { overflow: visible; }
}
.wt-pref-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.wt-pref-row:last-child { border-bottom: 0; }

/* ── Record forms in dialogs / side panels (RecordFormLauncher, UI.MODAL_FORMS) ── */
.wt-form-dialog .wt-form-dialog-content,
.wt-side-panel .wt-form-dialog-content { padding-top: 4px; max-height: calc(100vh - 160px); overflow-y: auto; }
.mud-dialog-container.mud-dialog-center-right .wt-side-panel {
    height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; animation: wt-slide-in .18s ease-out;
}
.wt-side-panel .wt-form-dialog-content { max-height: calc(100vh - 64px); }
@keyframes wt-slide-in { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.wt-dialog-actions {
    position: sticky; bottom: 0; z-index: 2; padding: 12px 0 4px; margin-top: 8px;
    background: var(--mud-palette-surface); border-top: 1px solid var(--mud-palette-lines-default);
}
.wt-row-link:hover { background: rgba(99,102,241,0.08); }

/* ── Loading skeletons ── */
.wt-skeleton-row { height: 14px; border-radius: 6px; margin: 10px 0; background: linear-gradient(90deg, rgba(148,163,184,.10), rgba(148,163,184,.22), rgba(148,163,184,.10)); background-size: 200% 100%; animation: wt-shimmer 1.2s infinite linear; }
@keyframes wt-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Quick navigation (UI.QUICK_NAV) ── */
.wt-menu .wt-nav-filtering .mud-collapse-container,
.wt-menu.wt-nav-filtering .mud-collapse-container { height: auto !important; max-height: none !important; visibility: visible !important; }
.wt-menu.wt-nav-filtering .mud-typography-overline,
.wt-menu.wt-nav-filtering hr.mud-divider { display: none; }
.wt-quicknav .wt-menu-search .mud-input-slot { font-size: .85rem; }
.mud-drawer--closed.mud-drawer-mini .wt-quicknav .mud-nav-group .mud-collapse-container { display: none; }
.wt-palette .mud-dialog-content { padding: 0; }
.wt-palette-item { cursor: pointer; border-left: 3px solid transparent; }
.wt-palette-item.wt-palette-selected { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); border-left-color: var(--mud-palette-primary); }
.wt-palette-button { min-width: 220px; justify-content: flex-start; }

/* Collapsed sidebar rail: icons only (hover or the menu button opens the full sidebar). */
.mud-drawer-mini.mud-drawer--closed { overflow-x: hidden; }
.mud-drawer-mini.mud-drawer--closed .mud-nav-link-text,
.mud-drawer-mini.mud-drawer--closed .mud-typography-overline,
.mud-drawer-mini.mud-drawer--closed hr.mud-divider,
.mud-drawer-mini.mud-drawer--closed .mud-collapse-container,
.mud-drawer-mini.mud-drawer--closed .mud-nav-link-expand-icon { display: none !important; }
.mud-drawer-mini.mud-drawer--closed .mud-nav-link { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
.mud-drawer-mini.mud-drawer--closed .mud-nav-link .mud-icon-root { margin: 0 !important; }
.mud-drawer-mini .mud-drawer-content { transition: width .15s ease; }

/* ── Theme designer ── */
.wt-preset { width: 150px; padding: 10px; border-radius: 12px; border: 2px solid; cursor: pointer; transition: transform .12s ease; }
.wt-preset:hover { transform: translateY(-2px); }
.wt-preset-on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent); }
.wt-swatch { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }