/* Inter is self-hosted rather than linked from a CDN: this deploys to internal
   networks where fonts.googleapis.com may be unreachable, and Radzen already
   self-hosts its own faces. One variable file covers weights 400-700.
   font-display:swap keeps text visible while it loads. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/Inter-Variable-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    font-family: Inter, "Segoe UI", sans-serif;
    color: var(--hrmc-text);
    /* Radzen components read their own variable; point it at the same stack so
       controls and shell chrome stop rendering in two different typefaces. */
    --rz-text-font-family: Inter, "Segoe UI", sans-serif;
    background: var(--hrmc-shell-bg);
    --hrmc-action-primary: #C65D00;
    --hrmc-action-primary-hover: #A94F00;
    --hrmc-action-success: #4F772D;
    --hrmc-action-success-hover: #3F6124;
    --hrmc-action-info: #52616B;
    --hrmc-action-info-hover: #404D55;
    --hrmc-action-danger: #B64032;
    --hrmc-action-danger-hover: #963428;
    --hrmc-brand: #E3810D; --hrmc-brand-strong: #A85400;
    --hrmc-brand-hover: #A85400;
    --hrmc-brand-soft: #FFF0D9;
    --hrmc-brand-edge: #FFC08F;
    --hrmc-shell-bg: #F4F7F5;
    --hrmc-surface: #FFFFFF;
    --hrmc-surface-muted: #F4F7F5;
    --hrmc-border: #DFE8E2;
    --hrmc-text: #263D36;
    --hrmc-text-muted: #64736C;
    --hrmc-sidebar-submenu: #AD5600;
    --hrmc-sidebar-hover: #954900;
    --hrmc-on-brand: #FFFFFF;
    /* Hero derives from the brand hue, matching how Warm Executive and
       Corporate Blue are built. Previously slate blue against an orange
       brand, which is what made the dashboard read as two palettes. */
    --hrmc-hero-start: #5A3413;
    --hrmc-hero-end: #A2600F;
    --hrmc-hero-eyebrow: #FFC17A;
    --hrmc-grid-heading: #5F6D73;
    /* Grid headers need their own foreground: --hrmc-on-brand flips to near-black
       in dark mode (correct on the light amber brand, wrong on a header bar). */
    --hrmc-grid-heading-text: #FFFFFF;
    /* Heroes stay dark gradients in dark mode, so their text must stay light
       even though --hrmc-on-brand flips for the light amber brand. */
    --hrmc-hero-text: #FFFFFF;
    /* Semantic action fills (info/success/danger) stay dark in both modes, so
       their label stays light even where --hrmc-on-brand flips to near-black. */
    --hrmc-on-action: #FFFFFF;
    --hrmc-sidebar-text: #FFF8F1;
    --hrmc-sidebar-muted: #FFECD8;
    --hrmc-sidebar-active: #A85400; --hrmc-sidebar-edge: #FFC08F;
    --hrmc-shadow: rgba(31,42,46,.09);
    --hrmc-status-success-bg: #EAF3ED;
    --hrmc-status-success-text: #1F5B33;
    --hrmc-status-warning-bg: #FDF1DC;
    --hrmc-status-warning-text: #7A4B08;
    --hrmc-status-danger-bg: #FBEDEB;
    --hrmc-status-danger-text: #9B2318;
    --hrmc-status-info-bg: #E9F1F5;
    --hrmc-status-info-text: #1B4E6B;
}

body { margin:0; }
.hrmc-shell { min-height:100vh; background:var(--hrmc-shell-bg); color:var(--hrmc-text); }

/* Palette tokens are keyed off the theme class alone, not .hrmc-shell, so that
   overlays rendered outside the shell — the appearance drawer — inherit the
   palette being previewed instead of falling back to the:root defaults. */
.theme-warm-executive {
    --hrmc-action-primary:#A34A00; --hrmc-action-primary-hover:#863D00;
    --hrmc-brand:#A34A00; --hrmc-brand-strong:#A34A00; --hrmc-brand-hover:#863D00; --hrmc-brand-soft:#FFF4EA; --hrmc-brand-edge:#FFB15F;
    --hrmc-shell-bg:#F6F5F3; --hrmc-surface:#FFFFFF; --hrmc-surface-muted:#F0EEEA; --hrmc-border:#E4E2DE;
    --hrmc-text:#1F2A2E; --hrmc-text-muted:#5A6A70; --hrmc-sidebar-submenu:#8A3E00; --hrmc-sidebar-hover:#6D3100;
    --hrmc-action-info:#59463B; --hrmc-action-info-hover:#44342C;
    --hrmc-hero-start:#4B352B; --hrmc-hero-end:#805033; --hrmc-hero-eyebrow:#FFD19F;
    --hrmc-grid-heading:#5B514B; --hrmc-sidebar-text:#FFF8F2; --hrmc-sidebar-muted:#FFE0C4; --hrmc-sidebar-active:#6D3100; --hrmc-sidebar-edge:#FFB15F;
    --hrmc-shadow:rgba(73,48,34,.10);
}
.theme-corporate-blue {
    --hrmc-action-primary:#245B78; --hrmc-action-primary-hover:#19465F;
    --hrmc-brand:#245B78; --hrmc-brand-strong:#245B78; --hrmc-brand-hover:#19465F; --hrmc-brand-soft:#E9F3F7; --hrmc-brand-edge:#76A7BF;
    --hrmc-shell-bg:#F4F7F8; --hrmc-surface:#FFFFFF; --hrmc-surface-muted:#EDF3F5; --hrmc-border:#D7E3E8;
    --hrmc-text:#1D3542; --hrmc-text-muted:#586D78; --hrmc-sidebar-submenu:#1D4B64; --hrmc-sidebar-hover:#163C51;
    --hrmc-action-info:#356D88; --hrmc-action-info-hover:#24556F;
    --hrmc-hero-start:#173F56; --hrmc-hero-end:#357A98; --hrmc-hero-eyebrow:#BFE9F7;
    --hrmc-grid-heading:#496874; --hrmc-sidebar-text:#F3FBFF; --hrmc-sidebar-muted:#BFE3F1; --hrmc-sidebar-active:#12374B; --hrmc-sidebar-edge:#76A7BF;
    --hrmc-shadow:rgba(25,70,95,.11);
}
.theme-forest-green {
    --hrmc-action-primary:#1F5B39; --hrmc-action-primary-hover:#17462C;
    --hrmc-brand:#2E7D4F; --hrmc-brand-strong:#1F5B39; --hrmc-brand-hover:#17462C;
    --hrmc-brand-soft:#E8F3EC; --hrmc-brand-edge:#7FC49B;
    --hrmc-shell-bg:#F4F8F5; --hrmc-surface:#FFFFFF; --hrmc-surface-muted:#EDF4EF; --hrmc-border:#D9E6DE;
    --hrmc-text:#16261D; --hrmc-text-muted:#54675B; --hrmc-grid-heading:#54675B;
    --hrmc-sidebar-submenu:#17462C; --hrmc-sidebar-hover:#123E28;
    --hrmc-action-info:#52616B; --hrmc-action-info-hover:#404D55;
    --hrmc-hero-start:#123522; --hrmc-hero-end:#2E7D4F; --hrmc-hero-eyebrow:#9FD9B6;
    --hrmc-sidebar-text:#F1F8F3; --hrmc-sidebar-muted:#CFE8DA;
    --hrmc-sidebar-active:#123E28; --hrmc-sidebar-edge:#7FC49B;
    --hrmc-shadow:rgba(18,45,32,.10);
}
.theme-graphite {
    --hrmc-action-primary:#35434D; --hrmc-action-primary-hover:#29353D;
    --hrmc-brand:#4A5A66; --hrmc-brand-strong:#35434D; --hrmc-brand-hover:#29353D;
    --hrmc-brand-soft:#EEF2F4; --hrmc-brand-edge:#93A6B3;
    --hrmc-shell-bg:#F5F7F8; --hrmc-surface:#FFFFFF; --hrmc-surface-muted:#EDF1F3; --hrmc-border:#DCE3E7;
    --hrmc-text:#1B242A; --hrmc-text-muted:#57656F; --hrmc-grid-heading:#57656F;
    --hrmc-sidebar-submenu:#29353D; --hrmc-sidebar-hover:#1F2A31;
    --hrmc-action-info:#52616B; --hrmc-action-info-hover:#404D55;
    --hrmc-hero-start:#1E282F; --hrmc-hero-end:#46596A; --hrmc-hero-eyebrow:#A9BECC;
    --hrmc-sidebar-text:#F2F5F7; --hrmc-sidebar-muted:#CBD8E0;
    --hrmc-sidebar-active:#1F2A31; --hrmc-sidebar-edge:#93A6B3;
    --hrmc-shadow:rgba(27,36,42,.10);
}


/* Shared HRMC action palette. Keep every workflow visually consistent with
   Organization Setup, regardless of the Radzen button style used by a page. */
.hrmc-shell .rz-button-primary,
.hrmc-shell .rz-button.rz-primary {
    background:var(--hrmc-action-primary) !important;
    background-color:var(--hrmc-action-primary) !important;
    border-color:var(--hrmc-action-primary) !important;
    color:var(--hrmc-on-action) !important;
}
.hrmc-shell .rz-button-primary:hover,
.hrmc-shell .rz-button-primary:focus,
.hrmc-shell .rz-button.rz-primary:hover,
.hrmc-shell .rz-button.rz-primary:focus,
.hrmc-shell .rz-button.rz-primary:focus-visible {
    background:var(--hrmc-action-primary-hover) !important;
    background-color:var(--hrmc-action-primary-hover) !important;
    border-color:var(--hrmc-action-primary-hover) !important;
    color:var(--hrmc-on-brand) !important;
}
.hrmc-shell .rz-button-success,
.hrmc-shell .rz-button.rz-success {
    background:var(--hrmc-action-success) !important;
    background-color:var(--hrmc-action-success) !important;
    border-color:var(--hrmc-action-success) !important;
    color:var(--hrmc-on-action) !important;
}
.hrmc-shell .rz-button-success:hover,
.hrmc-shell .rz-button-success:focus,
.hrmc-shell .rz-button.rz-success:hover,
.hrmc-shell .rz-button.rz-success:focus,
.hrmc-shell .rz-button.rz-success:focus-visible {
    background:var(--hrmc-action-success-hover) !important;
    background-color:var(--hrmc-action-success-hover) !important;
    border-color:var(--hrmc-action-success-hover) !important;
    color:var(--hrmc-on-brand) !important;
}
.hrmc-shell .rz-button-info,
.hrmc-shell .rz-button.rz-info {
    background:var(--hrmc-action-info) !important;
    background-color:var(--hrmc-action-info) !important;
    border-color:var(--hrmc-action-info) !important;
    color:var(--hrmc-on-action) !important;
}
.hrmc-shell .rz-button-info:hover,
.hrmc-shell .rz-button-info:focus,
.hrmc-shell .rz-button.rz-info:hover,
.hrmc-shell .rz-button.rz-info:focus,
.hrmc-shell .rz-button.rz-info:focus-visible {
    background:var(--hrmc-action-info-hover) !important;
    background-color:var(--hrmc-action-info-hover) !important;
    border-color:var(--hrmc-action-info-hover) !important;
    color:var(--hrmc-on-brand) !important;
}
.hrmc-shell .rz-button-danger,
.hrmc-shell .rz-button.rz-danger,
.hrmc-shell .rz-button.rz-error {
    background:var(--hrmc-action-danger) !important;
    background-color:var(--hrmc-action-danger) !important;
    border-color:var(--hrmc-action-danger) !important;
    color:var(--hrmc-on-action) !important;
}
.hrmc-shell .rz-button-danger:hover,
.hrmc-shell .rz-button-danger:focus,
.hrmc-shell .rz-button.rz-danger:hover,
.hrmc-shell .rz-button.rz-danger:focus,
.hrmc-shell .rz-button.rz-danger:focus-visible,
.hrmc-shell .rz-button.rz-error:hover,
.hrmc-shell .rz-button.rz-error:focus,
.hrmc-shell .rz-button.rz-error:focus-visible {
    background:var(--hrmc-action-danger-hover) !important;
    background-color:var(--hrmc-action-danger-hover) !important;
    border-color:var(--hrmc-action-danger-hover) !important;
    color:var(--hrmc-on-brand) !important;
}
.hrmc-shell .rz-button-secondary,
.hrmc-shell .rz-button.rz-secondary {
    background:var(--hrmc-action-info) !important;
    background-color:var(--hrmc-action-info) !important;
    border-color:var(--hrmc-action-info) !important;
    color:var(--hrmc-on-action) !important;
}
.hrmc-shell .rz-button-secondary:hover,
.hrmc-shell .rz-button-secondary:focus,
.hrmc-shell .rz-button.rz-secondary:hover,
.hrmc-shell .rz-button.rz-secondary:focus,
.hrmc-shell .rz-button.rz-secondary:focus-visible {
    background:var(--hrmc-action-info-hover) !important;
    background-color:var(--hrmc-action-info-hover) !important;
    border-color:var(--hrmc-action-info-hover) !important;
    color:var(--hrmc-on-brand) !important;
}
.hrmc-shell .rz-tabview-nav li.rz-tabview-selected,
.hrmc-shell .rz-tabview-nav li.rz-tabview-selected::after {
    background-color:var(--hrmc-action-primary) !important;
    border-color:var(--hrmc-action-primary) !important;
}
.hrmc-shell .rz-tabview-nav li.rz-tabview-selected a,
.hrmc-shell .rz-tabview-nav li.rz-tabview-selected .rz-tabview-title,
.hrmc-shell .rz-tabview-nav li.rz-tabview-selected .rzi {
    color:var(--hrmc-on-brand) !important;
}
/* Alerts are tinted, not solid: the semantic rules further down own their
   colours. The former solid-block rules and their forced-white child text
   were left behind by that change and made tinted alert content unreadable
   (white on a pale ground), so they are removed rather than overridden. */
.hrmc-shell .rz-alert:is(.rz-danger,.rz-error,.rz-alert-danger,.rz-alert-error) {
    position:sticky;
    /* Matches the sticky header, which now collapses responsively. */
    top:calc(var(--hrmc-header-height, 72px) + 10px);
    z-index:1200;
    box-shadow:0 10px 30px var(--hrmc-shadow);
}
.hrmc-shell .rz-alert :is(strong,b){font-weight:600}
.hrmc-shell .rz-alert a {
    color:inherit;
    font-weight:600;
    text-decoration:underline;
}
.hrmc-header { background:var(--hrmc-surface); border-bottom:1px solid var(--hrmc-border); box-shadow:0 4px 20px rgba(23,65,39,.07); }
.hrmc-header-content { width:100%; min-height:72px; padding:0 22px 0 0; box-sizing:border-box; display:grid; grid-template-columns:300px minmax(180px,1fr) minmax(300px,620px) minmax(260px,1fr); gap:24px; align-items:center; }
.hrmc-brand { align-self:stretch; display:flex; align-items:center; gap:12px; padding:0 18px; background:var(--hrmc-brand-strong); color:var(--hrmc-on-brand) ; text-decoration:none; min-width:0; }
.hrmc-brand-mark { width:42px; height:42px; border-radius:9px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; padding:3px; box-sizing:border-box; background:var(--hrmc-surface); box-shadow:0 6px 16px rgba(5,38,33,.22); }
.hrmc-brand-mark i:nth-child(1){background:var(--hrmc-text);border-radius:5px 0 0 0}.hrmc-brand-mark i:nth-child(2){background:var(--hrmc-text-muted);border-radius:0 5px 0 0}.hrmc-brand-mark i:nth-child(3){background:var(--hrmc-text);border-radius:0 0 0 5px}.hrmc-brand-mark i:nth-child(4){background:var(--hrmc-text-muted);border-radius:0 0 5px 0}
.hrmc-brand > span:last-child { display:flex; flex-direction:column; line-height:1.05; }
.hrmc-brand strong { font-size:18px; letter-spacing:.04em; }
.hrmc-brand small { color:var(--hrmc-brand-soft); font-size:11px; margin-top:5px; white-space:nowrap; }
.hrmc-workspace{display:flex;flex-direction:column;line-height:1.15;min-width:0}.hrmc-workspace small{font-size:10px;letter-spacing:.13em;font-weight:700;color:var(--hrmc-text-muted)}.hrmc-workspace strong{font-size:14px;color:var(--hrmc-text-muted);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrmc-search-wrap { height:42px; position:relative; display:flex; align-items:center; background:var(--hrmc-surface); border:1px solid var(--hrmc-border); border-radius:10px; padding-left:38px; transition:.2s ease; }
.hrmc-search-wrap:focus-within { background:var(--hrmc-surface); border-color:var(--hrmc-brand); box-shadow:0 0 0 3px rgba(80,80,80,.12); }
.hrmc-search-wrap > .material-symbols-outlined { position:absolute; left:12px; color:var(--hrmc-text-muted); font-size:20px; }
.hrmc-menu-search { width:100%; }
.hrmc-menu-search.rz-dropdown { border:0; background:transparent; box-shadow:none; }
.hrmc-account { justify-self:end; display:flex; align-items:center; gap:10px; min-width:0; }
/* ── Appearance drawer ─────────────────────────────────────────────
   Styled from the shell tokens so the panel follows whichever palette
   is currently previewed, rather than staying white on every theme. */
.hrmc-theme-button{width:40px;height:40px;border:1px solid var(--hrmc-border);border-radius:12px;background:var(--hrmc-brand-soft);color:var(--hrmc-brand);display:grid;place-items:center;cursor:pointer;transition:background .15s ease,color .15s ease}
.hrmc-theme-button:hover{background:var(--hrmc-brand-edge);color:var(--hrmc-brand-hover)}
.hrmc-theme-button:focus-visible{outline:2px solid var(--hrmc-brand);outline-offset:2px}

.hrmc-theme-backdrop{position:fixed;inset:0;border:0;padding:0;background:rgba(18,28,32,.42);z-index:2998;cursor:default;animation:hrmc-fade .18s ease}

.hrmc-theme-drawer{
    position:fixed;z-index:2999;right:0;top:0;
    width:min(430px,100vw);height:100vh;height:100dvh;box-sizing:border-box;
    background:var(--hrmc-surface);color:var(--hrmc-text);
    padding:24px;box-shadow:-18px 0 48px rgba(20,30,35,.22);
    display:flex;flex-direction:column;gap:20px;overflow-y:auto;
    animation:hrmc-slide .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes hrmc-fade{from{opacity:0}to{opacity:1}}
@keyframes hrmc-slide{from{transform:translateX(18px);opacity:0}to{transform:none;opacity:1}}

.hrmc-theme-drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.hrmc-theme-drawer-head small{display:block;color:var(--hrmc-brand);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.hrmc-theme-drawer-head h2{margin:8px 0 5px;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.hrmc-theme-drawer-head p{margin:0;font-size:13px;color:var(--hrmc-text-muted);line-height:1.45;max-width:36ch}
.hrmc-theme-close{flex:0 0 auto;border:1px solid var(--hrmc-border);background:var(--hrmc-surface-muted);color:var(--hrmc-text-muted);border-radius:10px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer}
.hrmc-theme-close:hover{color:var(--hrmc-text);border-color:var(--hrmc-text-muted)}
.hrmc-theme-close:focus-visible{outline:2px solid var(--hrmc-brand);outline-offset:2px}

.hrmc-theme-options{display:grid;gap:10px}
.hrmc-theme-option{
    width:100%;box-sizing:border-box;
    border:1px solid var(--hrmc-border);border-radius:13px;
    background:var(--hrmc-surface);color:inherit;
    padding:12px;display:grid;grid-template-columns:92px 1fr 22px;gap:13px;
    align-items:center;text-align:left;cursor:pointer;font:inherit;
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.hrmc-theme-option:hover{border-color:var(--hrmc-text-muted);background:var(--hrmc-surface-muted)}
.hrmc-theme-option:focus-visible{outline:2px solid var(--hrmc-brand);outline-offset:2px}
.hrmc-theme-option.is-selected{border-color:var(--hrmc-brand);background:var(--hrmc-brand-soft);box-shadow:inset 0 0 0 1px var(--hrmc-brand)}
.hrmc-theme-option strong{display:block;font-size:14px;font-weight:600;letter-spacing:-.005em}
.hrmc-theme-option small{display:block;margin-top:3px;font-size:12px;color:var(--hrmc-text-muted);line-height:1.35}
.hrmc-theme-check{color:var(--hrmc-brand);font-size:22px}

/* Miniature workspace preview:dark rail, brand header, canvas, accent chip.
   Reads far faster than four equal colour stripes when choosing a palette. */
.hrmc-theme-swatch{
    height:56px;border-radius:9px;overflow:hidden;
    border:1px solid rgba(0,0,0,.12);
    display:grid;grid-template-columns:21px 1fr;grid-template-rows:15px 1fr;
}
.hrmc-theme-swatch i{display:block;min-width:0}
.hrmc-theme-swatch i:nth-child(4){grid-area:1/1/3/2}
.hrmc-theme-swatch i:nth-child(1){grid-area:1/2/2/3}
.hrmc-theme-swatch i:nth-child(3){grid-area:2/2/3/3}
.hrmc-theme-swatch i:nth-child(2){grid-area:2/2/3/3;z-index:1;align-self:center;justify-self:start;width:28px;height:8px;margin-left:8px;border-radius:3px}

.hrmc-theme-company-default{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--hrmc-border);border-radius:12px;padding:13px;background:var(--hrmc-surface-muted);cursor:pointer}
.hrmc-theme-company-default input{margin:3px 0 0;accent-color:var(--hrmc-brand);width:16px;height:16px;flex:0 0 16px;cursor:pointer}
.hrmc-theme-company-default strong{display:block;font-size:13px;font-weight:600}
.hrmc-theme-company-default small{display:block;margin-top:3px;font-size:12px;color:var(--hrmc-text-muted);line-height:1.4}

.hrmc-theme-message{border-radius:10px;background:var(--hrmc-surface-muted);color:var(--hrmc-text);border-left:3px solid var(--hrmc-text);padding:10px 13px;font-size:13px;font-weight:600}
.hrmc-theme-message.is-error{background:var(--hrmc-status-danger-bg);color:var(--hrmc-status-danger-text);border-left-color:var(--hrmc-status-danger-text)}

.hrmc-theme-actions{margin-top:auto;position:sticky;bottom:-24px;display:flex;justify-content:space-between;gap:10px;padding:14px 0 0;background:var(--hrmc-surface);border-top:1px solid var(--hrmc-border)}
.hrmc-theme-actions button{border-radius:9px;padding:10px 15px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.hrmc-theme-actions button:focus-visible{outline:2px solid var(--hrmc-brand);outline-offset:2px}
.hrmc-theme-use-default{border:1px solid var(--hrmc-border);background:var(--hrmc-surface);color:var(--hrmc-text-muted)}
.hrmc-theme-use-default:hover{color:var(--hrmc-text);border-color:var(--hrmc-text-muted)}
.hrmc-theme-save{border:1px solid var(--hrmc-brand);background:var(--hrmc-brand-strong);color:var(--hrmc-on-brand);display:flex;align-items:center;gap:7px}
.hrmc-theme-save:hover{background:var(--hrmc-brand-hover);border-color:var(--hrmc-brand-hover)}
.hrmc-theme-save .material-symbols-outlined{font-size:18px}

@media (max-width:480px){
    .hrmc-theme-drawer{width:100vw;padding:20px}
    .hrmc-theme-drawer-head h2{font-size:21px}
    .hrmc-theme-actions{flex-direction:column-reverse}
    .hrmc-theme-actions button{width:100%;justify-content:center}
}

/* ── Shared list conventions ───────────────────────────────────────
   Status chips and quiet row actions. Semantic colours are deliberately
   fixed rather than palette-derived:"active" must read as active in every
   palette, and status is a separate scale from the brand accent. Neutral
   and brand variants do follow the tokens. Currently used by the Employees
   page only; the classes are inert everywhere else until adopted. */
.hrmc-chip{
    display:inline-flex;align-items:center;gap:5px;
    padding:3px 9px;border-radius:999px;
    font-size:11px;font-weight:600;line-height:1.35;letter-spacing:.005em;white-space:nowrap;
}
.hrmc-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 5px}
.hrmc-chip.is-ok{background:var(--hrmc-surface-muted);color:var(--hrmc-text)}
.hrmc-chip.is-warn{background:var(--hrmc-brand-soft);color:var(--hrmc-text)}
.hrmc-chip.is-bad{background:var(--hrmc-status-danger-bg);color:var(--hrmc-status-danger-text)}
.hrmc-chip.is-info{background:var(--hrmc-status-info-bg);color:var(--hrmc-status-info-text)}
.hrmc-chip.is-neutral{background:var(--hrmc-surface-muted);color:var(--hrmc-text-muted)}
.hrmc-chip.is-brand{background:var(--hrmc-brand-soft);color:var(--hrmc-brand-hover)}

/* Quiet at rest, accent on hover — so a filled control never repeats on
   every row and the page keeps one primary action. */
.hrmc-row-actions{display:flex;gap:4px;align-items:center}
/* Row actions are outlined, not filled: readable at a glance without a
   wall of solid colour on every row. Semantic intent stays in the label. */
.hrmc-shell :is(.run-actions,.row-actions,.hrmc-row-actions,.grid-actions,.table-actions,.card-actions,.panel-actions,.toolbar-actions,.action-row,.actions) .rz-button{
    background:var(--hrmc-surface)!important;
    border:1px solid var(--hrmc-border)!important;
    color:var(--hrmc-text)!important;
    box-shadow:none!important;font-weight:600!important;
}
.hrmc-shell :is(.run-actions,.row-actions,.hrmc-row-actions,.grid-actions,.table-actions,.card-actions,.panel-actions,.toolbar-actions,.action-row,.actions) .rz-button:hover{
    background:var(--hrmc-surface-muted)!important;border-color:var(--hrmc-text-muted)!important;
}
/* Semantic row actions keep their meaning through the label colour. */
.hrmc-shell :is(.run-actions,.row-actions,.hrmc-row-actions,.grid-actions,.actions) .rz-button:is(.rz-danger,.rz-error,.rz-button-danger){color:var(--hrmc-status-danger-text)!important;border-color:var(--hrmc-status-danger-bg)!important}
.hrmc-shell :is(.run-actions,.row-actions,.hrmc-row-actions,.grid-actions,.actions) .rz-button:is(.rz-danger,.rz-error,.rz-button-danger):hover{background:var(--hrmc-status-danger-bg)!important;border-color:var(--hrmc-status-danger-text)!important}
.hrmc-shell :is(.run-actions,.row-actions,.hrmc-row-actions,.grid-actions,.actions) .rz-button:is(.rz-success,.rz-button-success){color:var(--hrmc-status-success-text)!important;border-color:var(--hrmc-status-success-bg)!important}
.hrmc-shell :is(.run-actions,.row-actions,.hrmc-row-actions,.grid-actions,.actions) .rz-button:is(.rz-success,.rz-button-success):hover{background:var(--hrmc-status-success-bg)!important;border-color:var(--hrmc-status-success-text)!important}
.hrmc-shell :is(.run-actions,.row-actions,.hrmc-row-actions,.grid-actions,.actions) .rz-button[disabled]{color:var(--hrmc-text-muted)!important;background:var(--hrmc-surface-muted)!important;opacity:.7}
.hrmc-row-actions .rz-button:focus-visible{outline:2px solid var(--hrmc-brand);outline-offset:1px}

.hrmc-cell-strong{font-weight:600;color:var(--hrmc-text)}
.hrmc-cell-note{display:block;width:max-content;margin-top:3px}
@media (prefers-reduced-motion:reduce){
    .hrmc-theme-drawer,.hrmc-theme-backdrop{animation:none}
    .hrmc-theme-button,.hrmc-theme-option{transition:none}
}

/* HRMC design-system layout:palette-independent structure and rhythm. */
.hrmc-shell,.hrmc-shell .rz-component{font-family:Inter,"Segoe UI",sans-serif}.hrmc-body h1{font-weight:700;letter-spacing:-.025em}.hrmc-body h2,.hrmc-body h3{font-weight:700;letter-spacing:-.012em}.hrmc-body label,.hrmc-body .rz-form-field-label{font-weight:600}.hrmc-body small,.hrmc-body .text-muted{color:var(--hrmc-text-muted)}
.hrmc-shell .rz-card{border-radius:7px;border-color:var(--hrmc-border);background:var(--hrmc-surface);box-shadow:0 1px 2px rgba(31,42,46,.06)}
.hrmc-shell .rz-button{border-radius:5px;min-height:34px;font-weight:700;letter-spacing:.01em}.hrmc-shell .rz-button:not(.rz-button-primary):not(.rz-primary):not(.rz-button-danger):not(.rz-danger):not(.rz-button-success):not(.rz-success){box-shadow:none}
.hrmc-shell input:not([type=checkbox]):not([type=radio]),.hrmc-shell select,.hrmc-shell textarea,.hrmc-shell .rz-dropdown,.hrmc-shell .rz-numeric,.hrmc-shell .rz-datepicker{border-radius:5px}.hrmc-shell input:focus,.hrmc-shell select:focus,.hrmc-shell textarea:focus,.hrmc-shell .rz-state-focused{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--hrmc-brand-edge) 55%,transparent)!important;border-color:var(--hrmc-brand)!important}
.hrmc-shell .rz-datatable,.hrmc-shell .rz-data-grid{border:1px solid var(--hrmc-border);border-radius:7px;overflow:hidden;background:var(--hrmc-surface)}.hrmc-shell .rz-grid-table tbody tr:hover{background:var(--hrmc-brand-soft)}.hrmc-shell .rz-grid-table td{border-color:var(--hrmc-border)}
.hrmc-shell .rz-dialog{border-radius:7px;box-shadow:0 16px 40px rgba(31,42,46,.16)}.hrmc-shell .rz-dialog-titlebar{border-bottom:1px solid var(--hrmc-border);background:var(--hrmc-surface)}
.hrmc-shell .rz-badge{border-radius:999px;font-weight:700}.hrmc-shell .rz-alert{border-radius:5px;box-shadow:none;border-left-width:3px}
.hrmc-notification-bell{position:relative;width:40px;height:40px;border:1px solid var(--hrmc-border);border-radius:12px;display:grid;place-items:center;color:var(--hrmc-text);background:var(--hrmc-brand-soft);text-decoration:none;transition:.18s ease}.hrmc-notification-bell:hover{background:var(--hrmc-brand-soft);color:var(--hrmc-brand-hover);transform:translateY(-1px)}.hrmc-notification-bell b{position:absolute;right:-5px;top:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--hrmc-status-danger-text);color:var(--hrmc-on-brand);font-size:10px;display:grid;place-items:center;border:2px solid var(--hrmc-surface)}
.hrmc-password-link{height:40px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:1px solid var(--hrmc-border);border-radius:12px;background:var(--hrmc-surface);color:var(--hrmc-text-muted);text-decoration:none;transition:.18s ease;font-size:11px;font-weight:700}.hrmc-password-link .material-symbols-outlined{font-size:20px;color:var(--hrmc-brand)}.hrmc-password-link:hover{color:var(--hrmc-brand);border-color:var(--hrmc-brand);transform:translateY(-1px)}
@media(max-width:1400px){.hrmc-password-label{display:none}.hrmc-password-link{width:40px;padding:0}}

.notification-page{max-width:1180px;margin:0 auto;padding:28px 22px 60px}.notification-hero{background:linear-gradient(130deg,var(--hrmc-text),var(--hrmc-text-muted));color:white;border-radius:20px;padding:28px 30px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 14px 35px rgba(39,67,77,.15)}.notification-hero h1{font-size:34px;margin:4px 0 6px}.notification-hero p{margin:0;color:var(--hrmc-text-muted)}.notification-kicker{font-size:11px;letter-spacing:.15em;color:var(--hrmc-brand);font-weight:700}.notification-mark-all{border:0;border-radius:10px;padding:11px 15px;background:var(--hrmc-brand-hover);color:var(--hrmc-on-brand);font-weight:700;display:flex;gap:7px;align-items:center;cursor:pointer}.notification-mark-all .material-symbols-outlined{font-size:19px}.notification-toolbar{display:flex;justify-content:space-between;align-items:center;margin:18px 2px 10px;color:var(--hrmc-text-muted)}.notification-toolbar label{display:flex;align-items:center;gap:8px}.notification-list{background:white;border:1px solid var(--hrmc-border);border-radius:16px;overflow:hidden;box-shadow:0 8px 26px rgba(44,62,56,.07)}.notification-row{width:100%;border:0;border-bottom:1px solid var(--hrmc-border);background:white;padding:18px 20px;display:grid;grid-template-columns:44px 1fr 12px auto;gap:14px;align-items:center;text-align:left;cursor:pointer}.notification-row:last-child{border-bottom:0}.notification-row:hover{background:var(--hrmc-brand-soft)}.notification-row.is-unread{background:var(--hrmc-brand-soft)}.notification-icon{width:42px;height:42px;border-radius:12px;background:var(--hrmc-brand-soft);color:var(--hrmc-brand-hover);display:grid;place-items:center}.notification-copy{display:flex;flex-direction:column;gap:3px}.notification-copy strong{color:var(--hrmc-text);font-size:15px}.notification-copy span{color:var(--hrmc-text-muted)}.notification-copy small{color:var(--hrmc-text-muted);margin-top:3px}.notification-dot{width:9px;height:9px;border-radius:50%;background:var(--hrmc-brand-hover)}.notification-open{display:flex;align-items:center;gap:5px;color:var(--hrmc-brand-hover);font-weight:700}.notification-open .material-symbols-outlined{font-size:18px}.notification-empty{padding:60px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--hrmc-text-muted)}.notification-empty .material-symbols-outlined{font-size:42px;color:var(--hrmc-brand-hover)}
.hrmc-avatar { width:36px; height:36px; flex:0 0 36px; border-radius:50%; display:grid; place-items:center; background:var(--hrmc-brand-soft); color:var(--hrmc-brand); font-size:12px; font-weight:700; }
.hrmc-account-name { display:flex; flex-direction:column; max-width:135px; line-height:1.15; }
.hrmc-account-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.hrmc-account-name small { color:var(--hrmc-text-muted); margin-top:3px; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.hrmc-logout { display:flex; align-items:center; gap:6px; padding:9px 14px; border:1px solid var(--hrmc-brand); border-radius:8px; background:var(--hrmc-brand-strong); color:var(--hrmc-on-brand) ; text-decoration:none; font-weight:700; font-size:12px; white-space:nowrap; box-shadow:0 5px 14px rgba(40,50,50,.18); }
.hrmc-logout:hover { background:var(--hrmc-brand-hover); border-color:var(--hrmc-brand-hover); color:var(--hrmc-on-brand) ; }
.hrmc-logout .material-symbols-outlined { font-size:18px; }
.hrmc-shell .hrmc-sidebar { background:var(--hrmc-brand-strong)!important; border-right:0; box-shadow:6px 0 24px rgba(40,50,50,.14); }
.hrmc-sidebar-label { padding:24px 20px 10px; color:var(--hrmc-brand-edge); font-size:10px; font-weight:700; letter-spacing:.16em; }
.hrmc-sidebar .rz-panel-menu { background:transparent; border:0; }
.hrmc-sidebar .rz-navigation-item-link { color:var(--hrmc-text-muted); border-radius:8px; margin:2px 10px; }
.hrmc-sidebar .rz-navigation-item-link .rzi,
.hrmc-sidebar .rz-navigation-item-link .material-symbols-outlined { color:var(--hrmc-on-brand) !important; }
.hrmc-sidebar .rz-navigation-item-link:hover { background:rgba(255,255,255,.08); color:var(--hrmc-on-brand); }
.hrmc-sidebar .rz-navigation-item-active > .rz-navigation-item-link,
.hrmc-sidebar .rz-navigation-item-link-active,
.hrmc-sidebar .rz-navigation-item-wrapper-active > .rz-navigation-item-link { background:var(--hrmc-brand-strong) !important; color:var(--hrmc-on-brand) !important; margin-left:0 !important; margin-right:0 !important; border-radius:0 !important; width:100%; box-sizing:border-box; }
.hrmc-sidebar { scrollbar-color:var(--hrmc-brand) transparent; scrollbar-width:thin; }
.hrmc-sidebar::-webkit-scrollbar { width:8px; }
.hrmc-sidebar::-webkit-scrollbar-track { background:transparent; }
.hrmc-sidebar::-webkit-scrollbar-thumb { background:var(--hrmc-brand); border-radius:8px; border:2px solid var(--hrmc-brand); }
.hrmc-sidebar .rz-navigation-menu { background:var(--hrmc-sidebar-submenu) !important; }
.hrmc-sidebar .rz-navigation-menu .rz-navigation-item{background:transparent !important}
.hrmc-sidebar .rz-navigation-menu .rz-navigation-item-link{background:transparent !important;color:var(--hrmc-brand-soft) !important;border-radius:7px}
.hrmc-sidebar .rz-navigation-menu .rz-navigation-item-link:hover{background:var(--hrmc-sidebar-hover) !important;color:var(--hrmc-on-brand) !important}
.hrmc-sidebar .rz-panel-menu .rz-navigation-menu,.hrmc-sidebar .rz-panel-menu .rz-navigation-menu *{background-color:transparent !important;color:var(--hrmc-brand-soft) !important}
.hrmc-sidebar .rz-panel-menu .rz-navigation-menu .rz-navigation-item-link:hover{background-color:var(--hrmc-sidebar-hover) !important;color:var(--hrmc-on-brand) !important}
@media (min-width:768px) {
    .hrmc-header-content { grid-template-columns:72px minmax(180px,1fr) minmax(300px,620px) minmax(260px,1fr); }
    .hrmc-brand { justify-content:center; padding:0; }
    .hrmc-brand > span:last-child { display:none; }
    .hrmc-brand-mark { width:40px; height:40px; flex:0 0 40px; }
    .hrmc-sidebar {
        width:72px !important;
        overflow-x:hidden !important;
        transition:width .2s ease, box-shadow .2s ease;
        z-index:1001;
    }
    .hrmc-sidebar.is-pinned { width:300px !important; box-shadow:10px 0 28px rgba(123,58,0,.22); }
    .hrmc-shell.is-menu-pinned .hrmc-header-content { grid-template-columns:300px minmax(140px,1fr) minmax(280px,620px) minmax(240px,1fr); }
    .hrmc-shell.is-menu-pinned .hrmc-brand { justify-content:flex-start; padding:0 16px; background:var(--hrmc-brand-strong); color:var(--hrmc-on-brand); }
    .hrmc-shell.is-menu-pinned .hrmc-brand > span:last-child { display:flex; flex-direction:column; }
    .hrmc-shell.is-menu-pinned .hrmc-brand strong,.hrmc-shell.is-menu-pinned .hrmc-brand small { color:var(--hrmc-on-brand); }
    .hrmc-body {
        margin-inline-start:0 !important;
        min-width:0;
        transition:none;
    }
    .hrmc-sidebar-top{height:58px;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
    .hrmc-sidebar-toggle{width:52px;height:42px;flex:0 0 52px;margin:8px 10px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:var(--hrmc-on-brand);display:grid;place-items:center;cursor:pointer}
    .hrmc-sidebar-toggle:hover{background:rgba(255,255,255,.22)}
    .hrmc-sidebar-label { padding:0 10px; color:var(--hrmc-brand-edge); font-size:10px; font-weight:700; letter-spacing:.16em; overflow:hidden; white-space:nowrap; }
    .hrmc-sidebar:not(.is-pinned) .hrmc-sidebar-label{display:none}
    .hrmc-sidebar .rz-navigation-item-link { min-height:44px; overflow:hidden; white-space:nowrap; }
    .hrmc-sidebar .rz-navigation-item-link .rzi,
    .hrmc-sidebar .rz-navigation-item-link .material-symbols-outlined { min-width:32px; margin-inline-end:12px; }
    .hrmc-sidebar:not(.is-pinned) .rz-navigation-item-text,
    .hrmc-sidebar:not(.is-pinned) .rz-navigation-item-icon + span,
    .hrmc-sidebar:not(.is-pinned) .rz-navigation-item-link > span:not(.rzi):not(.material-symbols-outlined),
    .hrmc-sidebar:not(.is-pinned) .rz-navigation-item-wrapper > .rz-navigation-item-link .rz-navigation-item-expand-icon { opacity:0; }
    .hrmc-sidebar:not(.is-pinned) .rz-navigation-menu { display:none !important; }
}
@media (max-width:768px) {
    .hrmc-header-content { grid-template-columns:76px 1fr; padding:0 12px 0 0; gap:12px; }
    .hrmc-brand {padding:0 14px}.hrmc-brand > span:last-child,.hrmc-workspace,.hrmc-account-name { display:none; }
    .hrmc-search-wrap { grid-column:2; grid-row:1; min-width:0; }
    .hrmc-account { display:none; }
}
.hrmc-body { padding:1.75rem; }
.hrmc-summary-card { min-height:8.5rem; border:1px solid var(--hrmc-border); box-shadow:0 8px 24px rgba(23, 32, 51, .05); }
.hrmc-grid-card { border:1px solid var(--hrmc-border); box-shadow:0 8px 24px rgba(23, 32, 51, .05); }
.hrmc-grid-search { width:min(100%, 34rem); }
.hrmc-form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:1rem; margin-top:1rem; }
.hrmc-form-grid label { display:flex; flex-direction:column; gap:.4rem; font-size:.875rem; color:var(--hrmc-text-muted); }
.hrmc-form-grid .rz-textbox, .hrmc-form-grid .rz-dropdown { width:100%; min-height:2.5rem; box-sizing:border-box; }

/* Employee workspace:the lifecycle card language is shared across the full
   employee flow and derives its accent from the selected palette. */
.hrmc-page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.hrmc-operation-card{
    border:1px solid var(--hrmc-border);
    border-top:4px solid var(--hrmc-brand);
    border-radius:7px;
    padding:1.25rem;
    background:var(--hrmc-surface);
    box-shadow:0 3px 14px rgba(31,42,46,.08);
}
.hrmc-operation-card>.rz-text-h5:first-child{display:block;margin-bottom:.25rem;color:var(--hrmc-text)}
.hrmc-configuration-section{margin-top:1rem;padding:1rem;border:1px solid var(--hrmc-border);border-radius:7px;background:var(--hrmc-surface-muted)}
.hrmc-section-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.hrmc-sticky-actions{position:sticky;bottom:.75rem;z-index:8;padding:.75rem;border:1px solid var(--hrmc-border);border-radius:7px;background:color-mix(in srgb,var(--hrmc-surface) 94%,transparent);box-shadow:0 8px 24px rgba(31,42,46,.12);backdrop-filter:blur(8px)}
.hrmc-employee-page .hrmc-form-grid label{color:var(--hrmc-text-muted);font-weight:600}
.hrmc-employee-page .hrmc-form-grid small{font-weight:400;line-height:1.35}
@media(max-width:700px){.hrmc-operation-card{padding:1rem}.hrmc-sticky-actions{bottom:.35rem}}
.material-symbols-outlined {
    font-family:"Material Symbols";
    font-weight:normal;
    font-style:normal;
    font-size:24px;
    line-height:1;
    letter-spacing:normal;
    text-transform:none;
    display:inline-block;
    white-space:nowrap;
    word-wrap:normal;
    direction:ltr;
    font-feature-settings:"liga";
    -webkit-font-feature-settings:"liga";
    -webkit-font-smoothing:antialiased;
}
@media (max-width:1600px) {
    .dash .metric-grid { grid-template-columns:repeat(3, minmax(170px, 1fr)) !important; }
}
.dash h1:focus { outline:none; }
.dash .today .rzi { font-size:17px; }
.dash .people-mark .rzi { font-size:62px; color:var(--hrmc-brand-edge); }
.dash .action-type .rzi { font-size:20px; }
.dash .empty-state > .rzi { font-size:40px; color:var(--hrmc-status-success-text); }
.dash .quick-grid .rzi { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; grid-row:1/3; font-size:19px; }
.dash .quick-grid .rzi.green { background:var(--hrmc-brand-soft); color:var(--hrmc-brand-hover); }
.dash .quick-grid .rzi.blue { background:var(--hrmc-status-info-bg); color:#3d72bb; }
.dash .quick-grid .rzi.amber { background:var(--hrmc-brand-soft); color:var(--hrmc-brand-hover); }
.dash .quick-grid .rzi.violet { background:#eee9ff; color:#7157c8; }
.dash .quick-grid .rzi.coral { background:var(--hrmc-status-danger-bg); color:#d65b4b; }
.dash .quick-grid .rzi.navy { background:var(--hrmc-status-info-bg); color:var(--hrmc-text-muted); }
.dash .metric-card { min-width:0; overflow:hidden; }
.dash .metric-copy { min-width:0; padding-right:12px; }
/* Dashboard visual system follows the selected workspace palette. */
.dash .dash-hero{background:linear-gradient(118deg,var(--hrmc-hero-start),var(--hrmc-hero-end)) !important;box-shadow:0 18px 45px var(--hrmc-shadow) !important}
.dash .eyebrow{color:var(--hrmc-hero-eyebrow) !important}.dash .hero-copy p{color:color-mix(in srgb,var(--hrmc-on-brand) 86%,transparent) !important}.dash .people-mark .rzi{color:color-mix(in srgb,var(--hrmc-on-brand) 82%,transparent) !important}
.dash .metric-card,.dash .panel{border-color:var(--hrmc-border) !important;box-shadow:0 8px 24px var(--hrmc-shadow) !important}
.dash .mint .metric-icon,.dash .rzi.green,.dash .blue .metric-icon,.dash .navy .metric-icon{background:var(--hrmc-brand-soft) !important;color:var(--hrmc-brand) !important}
.dash .section-label,.dash .panel-head>a{color:var(--hrmc-brand-hover) !important}.dash .empty-state>.rzi{color:var(--hrmc-brand) !important}.dash .empty-state b{color:var(--hrmc-text) !important}
.dash .ring{background:conic-gradient(var(--hrmc-brand) calc(var(--progress)*1%),var(--hrmc-surface-muted) 0) !important}.dash .readiness-steps .done>span{background:var(--hrmc-brand) !important}
.dash .primary-action{background:linear-gradient(100deg,var(--hrmc-brand-hover),var(--hrmc-brand)) !important}.dash .workforce-number{background:linear-gradient(110deg,var(--hrmc-brand-soft),var(--hrmc-surface)) !important}
.dash .pulse-row i.green,.dash .pulse-bar i.green{background:var(--hrmc-brand) !important}
.dash .dashboard-filters{margin:18px 0 0;padding:14px 18px;background:var(--hrmc-surface);border:1px solid var(--hrmc-border);border-radius:14px;display:flex;align-items:end;gap:14px;box-shadow:0 7px 20px var(--hrmc-shadow)}
.dash .dashboard-filters>div{display:grid;gap:5px;min-width:220px}.dash .dashboard-filters label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hrmc-brand-hover)}.dash .dashboard-filters span{margin-left:auto;align-self:center;color:var(--hrmc-text-muted);font-size:12px}
@media(max-width:768px){.dash .dashboard-filters{align-items:stretch;flex-direction:column}.dash .dashboard-filters>div{min-width:0}.dash .dashboard-filters span{margin-left:0}}

/* ========================================================================
   Palette-aware application skin
   ------------------------------------------------------------------------
   Page-specific component styles historically carried fixed orange, blue
   and slate values.  These rules intentionally live last and use the shared
   design tokens so every authenticated HRMC page follows the active palette.
   Semantic success/warning/danger colours remain independent of branding.
   ======================================================================== */
/* Must match .hrmc-sidebar, which uses --hrmc-brand-strong. Using the lighter
   --hrmc-brand here made the company-name block a visibly different shade from
   the menu directly beneath it, most obviously on the custom palette. */
.hrmc-shell .hrmc-brand,
.hrmc-shell.is-menu-pinned .hrmc-brand{
    background:var(--hrmc-brand-strong)!important;
    color:var(--hrmc-on-brand)!important;
}
.hrmc-shell .hrmc-sidebar-label{color:var(--hrmc-sidebar-muted)!important}
.hrmc-shell .hrmc-sidebar .rz-navigation-item-link{color:var(--hrmc-sidebar-text)!important}
.hrmc-shell .hrmc-sidebar .rz-navigation-item-link .rzi,
.hrmc-shell .hrmc-sidebar .rz-navigation-item-link .material-symbols-outlined{color:var(--hrmc-sidebar-text)!important}
.hrmc-shell .hrmc-sidebar .rz-navigation-item-active>.rz-navigation-item-link,
.hrmc-shell .hrmc-sidebar .rz-navigation-item-link-active,
.hrmc-shell .hrmc-sidebar .rz-navigation-item-wrapper-active>.rz-navigation-item-link{background:var(--hrmc-sidebar-active)!important;color:var(--hrmc-on-brand)!important;box-shadow:inset 3px 0 0 var(--hrmc-sidebar-edge)!important}
.hrmc-shell .hrmc-sidebar{scrollbar-color:var(--hrmc-sidebar-active) transparent}
.hrmc-shell .hrmc-sidebar::-webkit-scrollbar-thumb{background:var(--hrmc-sidebar-active);border-color:var(--hrmc-brand)}
.hrmc-shell .hrmc-sidebar .rz-navigation-menu .rz-navigation-item-link,
.hrmc-shell .hrmc-sidebar .rz-panel-menu .rz-navigation-menu *{color:var(--hrmc-sidebar-text)!important}

.hrmc-shell .hrmc-notification-bell{border-color:var(--hrmc-border);background:var(--hrmc-surface);color:var(--hrmc-brand)}
.hrmc-shell .hrmc-notification-bell:hover{background:var(--hrmc-brand-soft);color:var(--hrmc-brand-hover)}

/* One hero language for operational workspaces. */
.hrmc-shell :is(.hrmc-page-hero,.page-hero,.lifecycle-hero,.performance-hero,.recruitment-hero,.document-hero,.notification-hero,.reports-hero,.workspace-hero,.device-hero,.analytics-hero){
    background:linear-gradient(125deg,var(--hrmc-hero-start),var(--hrmc-hero-end))!important;
    color:var(--hrmc-hero-text)!important;
    border:0!important;
    border-radius:18px!important;
    box-shadow:0 14px 34px var(--hrmc-shadow)!important;
}
.hrmc-shell :is(.hrmc-page-hero,.page-hero,.lifecycle-hero,.performance-hero,.recruitment-hero,.document-hero,.notification-hero,.reports-hero,.workspace-hero,.device-hero,.analytics-hero) :is(h1,h2,h3,p){color:inherit!important}
.hrmc-shell :is(.performance-hero,.recruitment-hero,.document-hero,.notification-hero,.hrmc-page-hero) :is(.eyebrow,.notification-kicker,.kicker){color:var(--hrmc-hero-eyebrow)!important}

/* Forms, workflow editors and information cards share the lifecycle card. */
.hrmc-shell :is(.hrmc-operation-card,.operation-card,.operation-panel,.editor,.filter-card,.history,.storage-card,.editor-card,.register-card,.workflow-card,.panel-card,.content-card,.settings-card){
    background:var(--hrmc-surface)!important;
    color:var(--hrmc-text)!important;
    border:1px solid var(--hrmc-border)!important;
    border-top:4px solid var(--hrmc-brand)!important;
    border-radius:12px!important;
    box-shadow:0 5px 18px var(--hrmc-shadow)!important;
}
.hrmc-shell :is(.accent-editor,.workflow-note,.document-permission-note){border-color:var(--hrmc-border)!important;border-left-color:var(--hrmc-brand)!important;background:var(--hrmc-brand-soft)!important;color:var(--hrmc-text)!important}
.hrmc-shell :is(.accent-editor){border-top-color:var(--hrmc-brand)!important}
.hrmc-shell :is(.workflow-note,.document-permission-note) :is(b,.material-symbols-outlined){color:var(--hrmc-brand-hover)!important}

/* Tabs and page navigation use brand tokens, never a page-owned accent. */
.hrmc-shell :is(.stage-tabs,.workspace-tabs) button.active,
.hrmc-shell .rz-tabview-nav li.rz-tabview-selected a,
.hrmc-shell .rz-tabview-nav li.rz-state-active a{background:var(--hrmc-brand-strong)!important;color:var(--hrmc-on-brand)!important;border-color:var(--hrmc-brand)!important}
.hrmc-shell :is(.stage-tabs,.workspace-tabs) button.active span{background:var(--hrmc-brand-soft)!important;color:var(--hrmc-brand-hover)!important}

/* Native and shared tables use the same readable heading treatment. */
.hrmc-data-table{overflow:auto;border:1px solid var(--hrmc-border);border-radius:8px;background:var(--hrmc-surface)}
.hrmc-data-table table{width:100%;border-collapse:collapse}
.hrmc-data-table th,
.hrmc-shell .hrmc-body table:not(.rz-grid-table) thead th,
.hrmc-shell :is(.matrix-head,.score-head,.assessment-header){background:var(--hrmc-grid-heading)!important;color:var(--hrmc-grid-heading-text)!important}
.hrmc-data-table th,.hrmc-data-table td{padding:.7rem;border-bottom:1px solid var(--hrmc-border);text-align:left}
.hrmc-data-table tbody tr:hover,
.hrmc-shell .hrmc-body table:not(.rz-grid-table) tbody tr:hover{background:var(--hrmc-brand-soft)}
.hrmc-shell .rz-grid-table thead th{background:var(--hrmc-grid-heading)!important;color:var(--hrmc-grid-heading-text)!important}

/* Reusable status output. */
.hrmc-status-chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:var(--hrmc-brand-soft);color:var(--hrmc-brand-hover);font-size:11px;font-weight:700;white-space:nowrap}
.hrmc-shell :is(.assignment-note,.assessment-summary,.dashboard-focus,.rating-strip,.matrix-total,.upload-progress,.current-attachment){background:var(--hrmc-brand-soft)!important;color:var(--hrmc-text)!important;border-color:var(--hrmc-brand-edge)!important}
.hrmc-shell :is(.step-label,.template-count,.upload-progress b,.current-attachment a,.notification-open){color:var(--hrmc-brand-hover)!important}
.hrmc-shell :is(.template-link,.download,.notification-mark-all){background:var(--hrmc-brand-strong)!important;color:var(--hrmc-on-brand)!important}

/* Performance and recruitment page-owned colours. */
.hrmc-shell :is(.performance-page,.recruitment-page) .stage-tabs button.active{background:var(--hrmc-brand-strong)!important}
.hrmc-shell :is(.performance-page,.recruitment-page) :is(.workflow-note,.accent-editor,.review-drawer){border-color:var(--hrmc-border)!important;border-top-color:var(--hrmc-brand)!important}
.hrmc-shell :is(.performance-page,.recruitment-page) :is(.matrix-row.selected,.dashboard-focus,.assignment-note,.assessment-summary){background:var(--hrmc-brand-soft)!important;color:var(--hrmc-text)!important}
.hrmc-shell .review-drawer{background:var(--hrmc-surface)!important;border-top-color:var(--hrmc-brand)!important}
.hrmc-shell .review-drawer :is(.score-grid:not(.score-head),.score-grid:not(.score-head)>div,.review-comments,.drawer-actions){background:var(--hrmc-surface)!important}

/* Document cards and notification centre. */
.hrmc-shell .document-summary article{background:var(--hrmc-surface)!important;border-color:var(--hrmc-border)!important;border-top-color:var(--hrmc-brand)!important}
.hrmc-shell .document-summary article>span,
.hrmc-shell .notification-icon{background:var(--hrmc-brand-soft)!important;color:var(--hrmc-brand)!important}
.hrmc-shell .storage-track i{background:linear-gradient(90deg,var(--hrmc-brand-hover),var(--hrmc-brand))!important}
.hrmc-shell .notification-list,.hrmc-shell .notification-row{background:var(--hrmc-surface)!important;border-color:var(--hrmc-border)!important}
.hrmc-shell .notification-row:hover,.hrmc-shell .notification-row.is-unread{background:var(--hrmc-brand-soft)!important}
.hrmc-shell .notification-dot{background:var(--hrmc-brand)!important}

/* Radzen alerts keep meaning but use the softer semantic system. */
/* Radzen 10 renders severity as ".rz-alert.rz-info" (not ".rz-alert-info") and
   reads its colours from custom properties, so we set those rather than fight
   the background with !important. Tinted, not solid: a filled block in the
   semantic hue fights every brand palette. */
.hrmc-shell .rz-alert:is(.rz-info,.rz-alert-info){--rz-alert-background-color:var(--hrmc-status-info-bg);--rz-alert-color:var(--hrmc-status-info-text);--rz-alert-title-color:var(--hrmc-status-info-text);--rz-alert-icon-color:var(--hrmc-status-info-text);background:var(--hrmc-status-info-bg)!important;color:var(--hrmc-status-info-text)!important;border:1px solid var(--hrmc-status-info-text)!important}
.hrmc-shell .rz-alert:is(.rz-success,.rz-alert-success){--rz-alert-background-color:var(--hrmc-status-success-bg);--rz-alert-color:var(--hrmc-status-success-text);--rz-alert-title-color:var(--hrmc-status-success-text);--rz-alert-icon-color:var(--hrmc-status-success-text);background:var(--hrmc-status-success-bg)!important;color:var(--hrmc-status-success-text)!important;border:1px solid var(--hrmc-status-success-text)!important}
.hrmc-shell .rz-alert:is(.rz-warning,.rz-alert-warning,.rz-alert-warn){--rz-alert-background-color:var(--hrmc-status-warning-bg);--rz-alert-color:var(--hrmc-status-warning-text);--rz-alert-title-color:var(--hrmc-status-warning-text);--rz-alert-icon-color:var(--hrmc-status-warning-text);background:var(--hrmc-status-warning-bg)!important;color:var(--hrmc-status-warning-text)!important;border:1px solid var(--hrmc-status-warning-text)!important}
.hrmc-shell .rz-alert:is(.rz-danger,.rz-error,.rz-alert-danger,.rz-alert-error){--rz-alert-background-color:var(--hrmc-status-danger-bg);--rz-alert-color:var(--hrmc-status-danger-text);--rz-alert-title-color:var(--hrmc-status-danger-text);--rz-alert-icon-color:var(--hrmc-status-danger-text);background:var(--hrmc-status-danger-bg)!important;color:var(--hrmc-status-danger-text)!important;border:1px solid var(--hrmc-status-danger-text)!important}
.hrmc-shell .rz-alert :is(.rz-alert-title,.rz-alert-message,.rz-alert-icon){color:inherit!important}

@media print{
    .hrmc-shell .hrmc-body table:not(.rz-grid-table) thead th{background:var(--hrmc-surface-muted)!important;color:var(--hrmc-text)!important}
}

/* Page-isolated CSS compatibility layer. Razor CSS isolation adds an attribute
   selector, so these deliberately stronger rules keep every authenticated
   workspace on the selected palette. */
.hrmc-shell .hrmc-body :is(.device-hero,.performance-hero,.recruitment-hero,.reports-hero,.lifecycle-hero){
    background:linear-gradient(125deg,var(--hrmc-hero-start),var(--hrmc-hero-end))!important;
    color:var(--hrmc-on-brand)!important;
    border-color:transparent!important;
    box-shadow:0 14px 34px var(--hrmc-shadow)!important;
}
.hrmc-shell .hrmc-body :is(.device-hero,.performance-hero,.recruitment-hero,.reports-hero,.lifecycle-hero) :is(h1,h2,h3,p){color:inherit!important}
.hrmc-shell .hrmc-body :is(.device-hero,.performance-hero,.recruitment-hero,.reports-hero) :is(small,.eyebrow,span){color:var(--hrmc-hero-eyebrow)!important}

.hrmc-shell .hrmc-body :is(.device-panel,.editor,.filter-card,.workflow-note,.review-drawer,.permission-module,.increment-report,.rotation-editor,.policy-view,.report-links button){
    background:var(--hrmc-surface)!important;
    color:var(--hrmc-text)!important;
    border-color:var(--hrmc-border)!important;
    box-shadow:0 5px 18px var(--hrmc-shadow)!important;
}
.hrmc-shell .hrmc-body :is(.device-panel,.accent-editor,.review-drawer,.increment-report){border-top-color:var(--hrmc-brand)!important}
.hrmc-shell .hrmc-body :is(.workflow-note,.agent-key,.cycle-preview,.policy-view,.timetable-summary,.rating-strip,.report-meta>div,.module-title){
    background:var(--hrmc-brand-soft)!important;
    border-color:var(--hrmc-brand-edge)!important;
    color:var(--hrmc-text)!important;
}
.hrmc-shell .hrmc-body :is(.workflow-note,.agent-key,.cycle-preview,.timetable-summary){border-left-color:var(--hrmc-brand)!important}
.hrmc-shell .hrmc-body :is(.policy-view strong,.report-title small,.report-meta small,.module-title button,.report-links b){color:var(--hrmc-brand-hover)!important}

.hrmc-shell .hrmc-body :is(.device-tabs,.stage-tabs) .active,
.hrmc-shell .hrmc-body .step-number,
.hrmc-shell .hrmc-body :is(.hrmc-primary,.mini:not(.test),.process-button){
    background:var(--hrmc-brand-hover)!important;
    border-color:var(--hrmc-brand-hover)!important;
    color:var(--hrmc-on-brand)!important;
}
.hrmc-shell .hrmc-body :is(.device-kpis button,.summary-grid article){
    background:var(--hrmc-surface)!important;
    color:var(--hrmc-text)!important;
    border-color:var(--hrmc-border)!important;
    border-top-color:var(--hrmc-brand)!important;
    box-shadow:0 5px 18px var(--hrmc-shadow)!important;
}
.hrmc-shell .hrmc-body .device-kpis button b{color:var(--hrmc-text)!important}
.hrmc-shell .hrmc-body .device-kpis button span{color:var(--hrmc-text-muted)!important}
.hrmc-shell .hrmc-body :is(.rotation-head,.score-head,.report-table thead,.device-panel th){background:var(--hrmc-grid-heading)!important;color:var(--hrmc-grid-heading-text)!important}
.hrmc-shell .hrmc-body .report-table tfoot{background:var(--hrmc-brand-soft)!important;color:var(--hrmc-brand-hover)!important}
.hrmc-shell .hrmc-body .report-links i{background:var(--hrmc-brand-soft)!important;color:var(--hrmc-brand)!important}
.hrmc-shell .hrmc-body .report-links button:hover{border-color:var(--hrmc-brand)!important;box-shadow:0 9px 24px var(--hrmc-shadow)!important}

/* Dashboard role selector and all dashboard content respond to the palette. */
.hrmc-shell .dash .dashboard-mode-panel{
    background:linear-gradient(135deg,var(--hrmc-surface),var(--hrmc-surface-muted))!important;
    border:1px solid var(--hrmc-border)!important;
    /* Declared here too: a later redesign in the scoped sheet had zeroed the
       radius, leaving the workspace chooser square against rounded siblings. */
    border-radius:18px!important;
    box-shadow:0 10px 28px var(--hrmc-shadow)!important;
}
.hrmc-shell .dash .mode-heading{border-color:var(--hrmc-border)!important}
.hrmc-shell .dash .mode-heading>span{color:var(--hrmc-brand-hover)!important}
.hrmc-shell .dash .mode-heading>strong{color:var(--hrmc-text)!important}
.hrmc-shell .dash .mode-heading>small{color:var(--hrmc-text-muted)!important}
.hrmc-shell .dash .dashboard-mode-panel .profile-card{
    background:var(--hrmc-surface)!important;
    color:var(--hrmc-text)!important;
    border-color:var(--hrmc-border)!important;
    border-top-color:var(--hrmc-brand-edge)!important;
    box-shadow:0 4px 13px var(--hrmc-shadow)!important;
}
.hrmc-shell .dash .dashboard-mode-panel .profile-card:hover{border-color:var(--hrmc-brand-edge)!important;box-shadow:0 9px 20px var(--hrmc-shadow)!important}
.hrmc-shell .dash .dashboard-mode-panel .profile-card:nth-child(n){border-top-color:var(--hrmc-brand)!important}
.hrmc-shell .dash .dashboard-mode-panel .profile-icon{background:var(--hrmc-brand-soft)!important;color:var(--hrmc-brand)!important}
.hrmc-shell .dash .dashboard-mode-panel .profile-copy small{color:var(--hrmc-text-muted)!important}
.hrmc-shell .dash .dashboard-mode-panel .profile-state{color:var(--hrmc-text-muted)!important}
.hrmc-shell .dash .dashboard-mode-panel .profile-card.active{
    background:linear-gradient(135deg,var(--hrmc-hero-start),var(--hrmc-hero-end))!important;
    color:var(--hrmc-on-brand)!important;
    border-color:var(--hrmc-hero-start)!important;
    border-top-color:var(--hrmc-hero-eyebrow)!important;
    box-shadow:0 10px 24px var(--hrmc-shadow)!important;
}
.hrmc-shell .dash .dashboard-mode-panel .profile-card.active .profile-icon{background:var(--hrmc-brand)!important;color:var(--hrmc-on-brand)!important}
.hrmc-shell .dash .dashboard-mode-panel .profile-card.active .profile-copy small{color:color-mix(in srgb,var(--hrmc-on-brand) 78%,transparent)!important}
.hrmc-shell .dash .dashboard-mode-panel .profile-card.active .profile-state{color:var(--hrmc-hero-eyebrow)!important}

/* Structural action colours are branded. Destructive and state actions keep
   their semantic red/green meaning through Radzen danger/success classes. */
.hrmc-shell .hrmc-body .rz-button.rz-button-primary,
.hrmc-shell .hrmc-body .rz-button.rz-primary{
    background:var(--hrmc-brand)!important;
    border-color:var(--hrmc-brand)!important;
    color:var(--hrmc-on-brand)!important;
}
.hrmc-shell .hrmc-body .rz-button.rz-button-primary:hover,
.hrmc-shell .hrmc-body .rz-button.rz-primary:hover{background:color-mix(in srgb,var(--hrmc-brand-hover) 84%,#000)!important;border-color:color-mix(in srgb,var(--hrmc-brand-hover) 84%,#000)!important}
.hrmc-shell .hrmc-body .rz-button.rz-button-light,
.hrmc-shell .hrmc-body .rz-button.rz-light{background:var(--hrmc-surface-muted)!important;border-color:var(--hrmc-border)!important;color:var(--hrmc-text)!important}

/* Theme drawer is itself part of the application shell. */
.hrmc-shell .hrmc-theme-drawer{background:var(--hrmc-surface)!important;color:var(--hrmc-text)!important;border-color:var(--hrmc-border)!important}
.hrmc-shell .hrmc-theme-option{background:var(--hrmc-surface)!important;color:var(--hrmc-text)!important;border-color:var(--hrmc-border)!important}
.hrmc-shell .hrmc-theme-option:hover,.hrmc-shell .hrmc-theme-option.is-selected{background:var(--hrmc-brand-soft)!important;border-color:var(--hrmc-brand)!important}

/* Authenticated workspace design contract. These selectors intentionally
   outrank Razor-isolated legacy styles so palette changes are complete. */
.hrmc-shell .hrmc-body .hrmc-page-hero {
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:1rem!important;
    min-height:126px!important;margin:0 0 1rem!important;padding:1.55rem 1.8rem!important;
    border:0!important;border-radius:16px!important;
    background:linear-gradient(125deg,var(--hrmc-hero-start),var(--hrmc-hero-end))!important;
    color:var(--hrmc-hero-text)!important;box-shadow:0 14px 34px var(--hrmc-shadow)!important;
}
.hrmc-shell .hrmc-body .hrmc-page-hero :is(h1,h2,h3,h4,h5,h6,p,.rz-text){color:inherit!important}
/* The hero is a flex row so a title can sit opposite an action group. Most pages
   instead place the title and subtitle as bare children, which in a row would put
   them side by side. Rather than force one flex behaviour to serve both shapes,
   select on the shape: a hero with no element wrapper is a plain title block and
   becomes a column; a hero that wraps its text in a div keeps the two-column
   title-versus-actions layout. */
.hrmc-shell .hrmc-body .hrmc-page-hero:not(:has(> div)):not(:has(> .rz-stack)){
    flex-direction:column!important;align-items:flex-start!important;
    justify-content:center!important;gap:.2rem!important;
}
.hrmc-shell .hrmc-body .hrmc-page-hero > :is(h1,h2,h3,h4,h5,h6,p,[class*="rz-text"]){margin:0!important}
.hrmc-shell .hrmc-body .hrmc-page-hero .rz-button{box-shadow:0 5px 14px var(--hrmc-shadow)!important}
.hrmc-shell .hrmc-body :is(.hrmc-operation-card,.operation-panel,.editor-card,.content-card,.settings-card,.panel-card,.register-card,.workflow-card),
.hrmc-shell .hrmc-body .rz-card.hrmc-operation-card {
    background:var(--hrmc-surface)!important;color:var(--hrmc-text)!important;
    border:1px solid var(--hrmc-border)!important;border-top:4px solid var(--hrmc-brand)!important;
    border-radius:14px!important;box-shadow:0 7px 22px var(--hrmc-shadow)!important;
}
.hrmc-shell .hrmc-body .danger-panel{border-top-color:var(--hrmc-status-danger-text)!important}

/* Radzen primitives used throughout setup, payroll, attendance and policies. */
.hrmc-shell .hrmc-body :is(.rz-card,.rz-panel,.rz-fieldset,.rz-dialog-content,.rz-data-grid){color:var(--hrmc-text)!important;border-color:var(--hrmc-border)!important}
/* Plain RadzenCards previously missed the accented top bar that the named
   operation-card classes get, so pages built from RadzenCard (every master
   setup screen) looked flat next to pages that used the named classes. */
.hrmc-shell .hrmc-body > * .rz-card,
.hrmc-shell .hrmc-body > .rz-card{
    border:1px solid var(--hrmc-border)!important;
    border-top:4px solid var(--hrmc-brand)!important;
    border-radius:14px!important;
    box-shadow:0 7px 22px var(--hrmc-shadow)!important;
}
/* A card inside a card is a sub-panel, not a section: no second accent bar. */
.hrmc-shell .hrmc-body .rz-card .rz-card,
.hrmc-shell .hrmc-body .rz-dialog-content .rz-card{
    border-top:1px solid var(--hrmc-border)!important;
    border-radius:10px!important;box-shadow:none!important;
}
.hrmc-shell .hrmc-body :is(.rz-card,.rz-panel,.rz-fieldset,.rz-dialog-content){background:var(--hrmc-surface)!important}
.hrmc-shell .hrmc-body :is(.rz-datatable-thead th,.rz-grid-table thead th,.rz-data-grid thead th){background:var(--hrmc-grid-heading)!important;color:var(--hrmc-grid-heading-text)!important;border-color:var(--hrmc-border)!important}
.hrmc-shell .hrmc-body :is(.rz-datatable-tbody td,.rz-grid-table tbody td,.rz-data-grid tbody td){background:var(--hrmc-surface)!important;color:var(--hrmc-text)!important;border-color:var(--hrmc-border)!important}
.hrmc-shell .hrmc-body :is(.rz-datatable-tbody tr:hover td,.rz-grid-table tbody tr:hover td,.rz-data-grid tbody tr:hover td){background:var(--hrmc-brand-soft)!important}
.hrmc-shell .hrmc-body .rz-button:not(.rz-button-danger):not(.rz-danger):not(.rz-button-success):not(.rz-success):not(.rz-button-light):not(.rz-light){background:var(--hrmc-brand-hover)!important;border-color:var(--hrmc-brand-hover)!important;color:var(--hrmc-on-brand)!important}
.hrmc-shell .hrmc-body .rz-button:not(.rz-button-danger):not(.rz-danger):not(.rz-button-success):not(.rz-success):not(.rz-button-light):not(.rz-light):hover{background:var(--hrmc-brand-hover)!important;border-color:var(--hrmc-brand-hover)!important}
.hrmc-shell .hrmc-body .rz-button:is(.rz-button-danger,.rz-danger){background:var(--hrmc-status-danger-text)!important;border-color:var(--hrmc-status-danger-text)!important;color:var(--hrmc-on-brand)!important}
.hrmc-shell .hrmc-body .rz-button:is(.rz-button-success,.rz-success){background:var(--hrmc-status-success-text)!important;border-color:var(--hrmc-status-success-text)!important;color:var(--hrmc-on-brand)!important}

/* Older organization/setup pages contain isolated !important declarations. */
.hrmc-shell .hrmc-body .organization-setup-page .organization-edit,
.hrmc-shell .hrmc-body .organization-setup-page .rz-tabview-nav li.rz-tabview-selected a{background:var(--hrmc-brand)!important;border-color:var(--hrmc-brand)!important;color:var(--hrmc-on-brand)!important}
.hrmc-shell .hrmc-body .organization-setup-page .organization-edit:hover{background:var(--hrmc-brand-hover)!important}
.hrmc-shell .hrmc-body .organization-setup-page .organization-delete{background:var(--hrmc-status-danger-text)!important;color:var(--hrmc-on-brand)!important}
.hrmc-shell .hrmc-body .organization-setup-page .organization-message{background:var(--hrmc-status-success-bg)!important;color:var(--hrmc-status-success-text)!important}
.hrmc-shell .hrmc-body .organization-setup-page .organization-info{background:var(--hrmc-status-info-bg)!important;color:var(--hrmc-status-info-text)!important}

/* Lifecycle, Performance and Recruitment include component-scoped legacy hues. */
.hrmc-shell .hrmc-body .lifecycle-table th,
.hrmc-shell .hrmc-body :is(.performance-table,.recruitment-table,.template-table,.score-table) th{background:var(--hrmc-grid-heading)!important;color:var(--hrmc-grid-heading-text)!important}
/* Fallback so EVERY table heading reads the same, including the 20 tables that
   carry no class of their own and previously fell through to browser defaults
   (bold near-black on transparent, unreadable next to the styled grids).
   The @media print rule above is more specific and still wins when printing. */
.hrmc-shell .hrmc-body table thead th{
    background:var(--hrmc-grid-heading)!important;
    color:var(--hrmc-grid-heading-text)!important;
    border-color:var(--hrmc-border)!important;
}
.hrmc-shell .hrmc-body table thead th :is(i,.rzi,span){color:inherit!important}

/* Short headings ("Code", "Actions") were truncating to "Co…" / "Acti…": Radzen
   gives the title flex:auto but the sort and filter icons sit in the same box and
   claim the width first. Tighten the icon footprint so the label wins. */
.hrmc-shell .hrmc-body :is(.rz-grid-table,.rz-datatable,.rz-data-grid) thead th .rz-column-title{
    gap:.12rem!important;min-width:0!important;
}
.hrmc-shell .hrmc-body :is(.rz-grid-table,.rz-datatable,.rz-data-grid) thead th :is(.rz-sortable-column-icon,.rz-grid-filter-icon,.rzi){
    font-size:15px!important;width:auto!important;min-width:0!important;margin:0!important;padding:0!important;
}
.hrmc-shell .hrmc-body :is(.rz-grid-table,.rz-datatable,.rz-data-grid) thead th .rz-column-title-content{
    min-width:0!important;flex:1 1 auto!important;
}

/* Row actions: most grids wrap their buttons in .hrmc-row-actions, but several
   place them bare in the cell. Space them here so both spellings look alike
   without editing every page. */
.hrmc-shell .hrmc-body :is(.rz-grid-table,.rz-datatable,.recruitment-table,.performance-table,.template-table,.score-table,.lifecycle-table,.report-table,.matrix-table,.history-table,.ledger-table) td .rz-button + .rz-button{
    margin-left:.3rem;
}

/* ---- report filter panel -------------------------------------------------
   Report pages used to put their whole filter grid inside the hero, which is a
   flex row, so the title was squeezed into a narrow column and wrapped. The
   filters now live in their own panel; the grid is auto-fit so a trailing odd
   control stretches instead of leaving ragged holes. */
.hrmc-shell .hrmc-body .hrmc-filter-panel{
    margin:0 0 1rem;padding:1.15rem 1.25rem .9rem;
    background:var(--hrmc-surface);
    border:1px solid var(--hrmc-border);
    border-top:4px solid var(--hrmc-brand);
    border-radius:14px;
    box-shadow:0 7px 22px var(--hrmc-shadow);
}
.hrmc-shell .hrmc-body .hrmc-filter-panel .rz-row{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
    gap:.85rem 1rem!important;margin:0!important;
}
.hrmc-shell .hrmc-body .hrmc-filter-panel .rz-row > *{
    width:auto!important;max-width:none!important;flex:none!important;
    padding:0!important;margin:0!important;
}
/* the trailing full-width column holds the actions: give it its own bar */
.hrmc-shell .hrmc-body .hrmc-filter-panel .rz-row > .rz-col-12:last-child{
    grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5rem;
    margin-top:.35rem!important;padding-top:.85rem!important;
    border-top:1px solid var(--hrmc-border);
}
.hrmc-shell .hrmc-body .hrmc-filter-panel .rz-form-field,
.hrmc-shell .hrmc-body .hrmc-filter-panel .rz-dropdown,
.hrmc-shell .hrmc-body .hrmc-filter-panel .rz-datepicker{width:100%!important}
@media (max-width:640px){
    .hrmc-shell .hrmc-body .hrmc-filter-panel{padding:1rem}
    .hrmc-shell .hrmc-body .hrmc-filter-panel .rz-row{grid-template-columns:1fr}
}
.hrmc-shell .hrmc-body :is(.status-pill,.stage-chip,.performance-status){background:var(--hrmc-status-warning-bg)!important;color:var(--hrmc-status-warning-text)!important;border-color:color-mix(in srgb,var(--hrmc-status-warning-text) 24%,transparent)!important}
.hrmc-shell .hrmc-body :is(.performance-workspace,.recruitment-workspace) :is(.accent-card,.metric-card,.summary-card,.workspace-card){background:var(--hrmc-surface)!important;color:var(--hrmc-text)!important;border-color:var(--hrmc-border)!important;border-top-color:var(--hrmc-brand)!important;box-shadow:0 7px 22px var(--hrmc-shadow)!important}

/* ══════════════════════════════════════════════════════════════════
   INTERFACE KIT — buttons, grids, cards, toolbars
   Centralised so every page inherits the same conventions and every
   colour resolves from the active palette. Applied app-wide; platform
   admin keeps its own operator styling.
   ══════════════════════════════════════════════════════════════════ */

/* ── Buttons ───────────────────────────────────────────────────────
   One filled primary per region. Labels never wrap inside a button,
   but a group of buttons wraps instead of overflowing its column —
   this is what was clipping the last action on Salary Generation. */
.hrmc-shell .rz-button{
    font-weight:600;letter-spacing:.005em;white-space:nowrap;
    border-radius:6px;min-height:34px;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.hrmc-shell .rz-button.rz-button-sm,
.hrmc-shell .rz-button-sm{min-height:28px;padding:4px 10px;font-size:12px}
.hrmc-shell .rz-button .rz-button-text{white-space:nowrap}
.hrmc-shell .rz-button:focus-visible{outline:2px solid var(--hrmc-brand);outline-offset:2px}
.hrmc-shell .rz-button[disabled]{opacity:.55;cursor:not-allowed}

/* Any horizontal cluster of actions wraps rather than clipping. */
.hrmc-shell :is(.run-actions,.row-actions,.hrmc-row-actions,.grid-actions,.table-actions,
    .card-actions,.panel-actions,.toolbar-actions,.action-row,.actions){
    display:flex;flex-wrap:wrap;align-items:center;gap:6px;white-space:normal;min-width:0;
}

/* Radzen stacks used as page toolbars: keep them on the baseline and let
   them wrap on narrow viewports instead of pushing content off-screen. */
.hrmc-shell .hrmc-body .rz-stack[class*="horizontal"]{flex-wrap:wrap;align-items:center;min-width:0}

/* ── Data grids ────────────────────────────────────────────────────
   Grids scroll inside their own container; the page body never scrolls
   sideways. Action cells wrap so fixed column widths cannot clip. */
.hrmc-shell .rz-datatable,
.hrmc-shell .rz-datagrid{max-width:100%;border-radius:8px;border-color:var(--hrmc-border)}
.hrmc-shell .rz-data-grid-data,
.hrmc-shell .rz-datatable-data-wrapper{overflow-x:auto}

.hrmc-shell .rz-grid-table td{border-color:var(--hrmc-border)!important;color:var(--hrmc-text)}
.hrmc-shell .rz-grid-table tbody tr:hover td{background:var(--hrmc-surface-muted)!important}
.hrmc-shell .rz-grid-table tbody tr.rz-state-highlight td,
.hrmc-shell .rz-grid-table tbody tr.rz-selected td{background:var(--hrmc-brand-soft)!important;color:var(--hrmc-text)!important}
/* The cell holding row actions must never force a horizontal clip. */
.hrmc-shell .rz-grid-table td:last-child{white-space:normal}
.hrmc-shell .rz-pager{background:var(--hrmc-surface-muted);border-color:var(--hrmc-border)}
.hrmc-shell .rz-pager-element.rz-state-active{background:var(--hrmc-brand-hover)!important;color:var(--hrmc-on-brand)!important}

/* ── Cards & panels ────────────────────────────────────────────────*/
/* Card treatment promoted from the lifecycle page so all 52 RadzenCard
   pages share one design: surface, brand top accent, soft elevation. */
.hrmc-shell .rz-card,
.hrmc-shell .hrmc-body :is(.operation-panel,.operation-card,.hrmc-operation-card,.editor-card,.content-card,.settings-card,.panel-card,.register-card,.workflow-card){
    background:var(--hrmc-surface);color:var(--hrmc-text);
    border:1px solid var(--hrmc-border);
    border-top:4px solid var(--hrmc-brand-hover);
    border-radius:10px;
    box-shadow:0 3px 14px var(--hrmc-shadow);
}
/* Semantic card accents, palette-driven. */
.hrmc-shell :is(.rz-card,.operation-panel).danger-panel,
.hrmc-shell :is(.rz-card,.operation-panel).is-danger{border-top-color:var(--hrmc-status-danger-text)}
.hrmc-shell :is(.rz-card,.operation-panel).is-success{border-top-color:var(--hrmc-status-success-text)}
.hrmc-shell :is(.rz-card,.operation-panel).is-warning{border-top-color:var(--hrmc-status-warning-text)}
.hrmc-shell :is(.rz-card,.operation-panel).is-info{border-top-color:var(--hrmc-status-info-text)}
/* Cards nested inside another card stay flat, so panels don't stripe. */
.hrmc-shell .rz-card .rz-card{border-top-width:1px;border-top-color:var(--hrmc-border);box-shadow:none}
.hrmc-shell .rz-fieldset,
.hrmc-shell .rz-panel{background:var(--hrmc-surface);border-color:var(--hrmc-border);border-radius:8px}

/* ── Form controls ─────────────────────────────────────────────────*/
.hrmc-shell :is(.rz-textbox,.rz-dropdown,.rz-datepicker,.rz-numeric,.rz-textarea,.rz-lookup){
    border-color:var(--hrmc-border);border-radius:6px;min-width:0;max-width:100%;
}
.hrmc-shell :is(.rz-textbox,.rz-dropdown,.rz-datepicker,.rz-numeric,.rz-textarea):focus-within{
    border-color:var(--hrmc-brand);box-shadow:0 0 0 3px var(--hrmc-brand-soft);
}
.hrmc-shell .rz-form-field-label,
.hrmc-shell label{color:var(--hrmc-text)}

/* ── Overflow safety ───────────────────────────────────────────────
   Wide content scrolls inside its own container rather than pushing the
   page sideways, which is what cut buttons off the right edge. */
.hrmc-shell .hrmc-body{overflow-x:hidden;min-width:0}
.hrmc-shell .hrmc-body :is(.table-wrap,.run-grid-wrap,.report-wrap,.grid-wrap){overflow-x:auto;max-width:100%}
.hrmc-shell .hrmc-body table{max-width:100%}

@media (max-width:768px){
    .hrmc-shell .hrmc-body .rz-stack[class*="horizontal"]{gap:8px}
    .hrmc-shell :is(.run-actions,.row-actions,.hrmc-row-actions,.grid-actions,.card-actions){width:100%}
}

/* ══════════════════════════════════════════════════════════════════
   RADZEN VARIABLE BRIDGE
   Radzen paints 162 component classes from its own variables. Overriding
   its rendered output one component at a time is why !important kept
   growing and why checkboxes, switches, radios, tabs and chart series
   still rendered Material indigo. Feeding Radzen the palette instead
   themes every component at once, including any added later.
   Declared per palette so it follows the user's selection.
   ══════════════════════════════════════════════════════════════════ */
.hrmc-shell,
.theme-classic-orange,
.theme-warm-executive,
.theme-corporate-blue,
.theme-forest-green,
.theme-graphite{
    --rz-primary:var(--hrmc-brand-strong);
    --rz-primary-light:var(--hrmc-brand);
    --rz-primary-lighter:var(--hrmc-brand-edge);
    --rz-primary-dark:var(--hrmc-brand-hover);
    --rz-primary-darker:var(--hrmc-brand-hover);
    --rz-primary-contrast-text:var(--hrmc-on-brand);
    --rz-secondary:var(--hrmc-brand);
    --rz-secondary-light:var(--hrmc-brand-edge);
    --rz-secondary-dark:var(--hrmc-brand-hover);

    --rz-success:var(--hrmc-status-success-text);
    --rz-success-light:var(--hrmc-status-success-bg);
    --rz-warning:var(--hrmc-status-warning-text);
    --rz-warning-light:var(--hrmc-status-warning-bg);
    --rz-danger:var(--hrmc-status-danger-text);
    --rz-danger-light:var(--hrmc-status-danger-bg);
    --rz-info:var(--hrmc-status-info-text);
    --rz-info-light:var(--hrmc-status-info-bg);

    --rz-base-background-color:var(--hrmc-surface);
    --rz-body-background-color:var(--hrmc-shell-bg);
    --rz-text-color:var(--hrmc-text);
    --rz-text-secondary-color:var(--hrmc-text-muted);
    --rz-border-color:var(--hrmc-border);
    --rz-border-radius:6px;

    /* Chart series: brand-led, then the semantic set, so charts stop
       rendering Material purple and follow the palette too. */
    --rz-series-1:var(--hrmc-brand-strong);
    --rz-series-2:var(--hrmc-status-info-text);
    --rz-series-3:var(--hrmc-status-success-text);
    --rz-series-4:var(--hrmc-status-warning-text);
    --rz-series-5:var(--hrmc-status-danger-text);
    --rz-series-6:var(--hrmc-brand-edge);
}

/* Selection controls read the primary variable directly, so these now
   follow the palette without a per-component override. */
.hrmc-shell .rz-chkbox-box.rz-state-active,
.hrmc-shell .rz-radiobutton-box.rz-state-active{background-color:var(--hrmc-brand-strong);border-color:var(--hrmc-brand-strong)}
.hrmc-shell .rz-switch.rz-switch-checked .rz-switch-circle{background-color:var(--hrmc-brand-strong)}
.hrmc-shell :is(.rz-chkbox-box,.rz-radiobutton-box,.rz-switch):focus-visible{outline:2px solid var(--hrmc-brand);outline-offset:2px}

/* ── Focus visibility ──────────────────────────────────────────────
   One ring on everything focusable, so keyboard position is never lost. */
.hrmc-shell :is(a,button,[role="button"],input,select,textarea,
    .rz-button,.rz-textbox,.rz-dropdown,.rz-datepicker,.rz-numeric,
    .rz-tabview-nav a,.rz-pager-element):focus-visible{
    outline:2px solid var(--hrmc-brand);outline-offset:2px;border-radius:4px;
}

/* Complete Radzen family mapping: base, light, lighter, dark, darker and
   on-* contrast text for every brand and semantic family. Chart series 7-24
   stay as shipped: multi-series charts need many distinguishable hues. */
.hrmc-shell,
.theme-classic-orange,
.theme-warm-executive,
.theme-corporate-blue,
.theme-forest-green,
.theme-graphite{
    --rz-primary:var(--hrmc-brand-strong);
    --rz-primary-light:var(--hrmc-brand);
    --rz-primary-lighter:var(--hrmc-brand-soft);
    --rz-primary-dark:var(--hrmc-brand-hover);
    --rz-primary-darker:var(--hrmc-brand-hover);
    --rz-on-primary:var(--hrmc-on-brand);
    --rz-on-primary-light:var(--hrmc-on-brand);
    --rz-on-primary-dark:var(--hrmc-on-brand);
    --rz-on-primary-darker:var(--hrmc-on-brand);
    --rz-on-primary-lighter:var(--hrmc-brand-hover);
    --rz-secondary:var(--hrmc-brand);
    --rz-secondary-light:var(--hrmc-brand-edge);
    --rz-secondary-lighter:var(--hrmc-brand-soft);
    --rz-secondary-dark:var(--hrmc-brand-hover);
    --rz-secondary-darker:var(--hrmc-brand-hover);
    --rz-on-secondary:var(--hrmc-on-brand);
    --rz-on-secondary-light:var(--hrmc-on-brand);
    --rz-on-secondary-dark:var(--hrmc-on-brand);
    --rz-on-secondary-darker:var(--hrmc-on-brand);
    --rz-on-secondary-lighter:var(--hrmc-brand-hover);
    --rz-success:var(--hrmc-status-success-text);
    --rz-success-light:var(--hrmc-status-success-text);
    --rz-success-lighter:var(--hrmc-status-success-bg);
    --rz-success-dark:var(--hrmc-status-success-text);
    --rz-success-darker:var(--hrmc-status-success-text);
    --rz-on-success:var(--hrmc-on-brand);
    --rz-on-success-light:var(--hrmc-on-brand);
    --rz-on-success-dark:var(--hrmc-on-brand);
    --rz-on-success-darker:var(--hrmc-on-brand);
    --rz-on-success-lighter:var(--hrmc-status-success-text);
    --rz-warning:var(--hrmc-status-warning-text);
    --rz-warning-light:var(--hrmc-status-warning-text);
    --rz-warning-lighter:var(--hrmc-status-warning-bg);
    --rz-warning-dark:var(--hrmc-status-warning-text);
    --rz-warning-darker:var(--hrmc-status-warning-text);
    --rz-on-warning:var(--hrmc-on-brand);
    --rz-on-warning-light:var(--hrmc-on-brand);
    --rz-on-warning-dark:var(--hrmc-on-brand);
    --rz-on-warning-darker:var(--hrmc-on-brand);
    --rz-on-warning-lighter:var(--hrmc-status-warning-text);
    --rz-danger:var(--hrmc-status-danger-text);
    --rz-danger-light:var(--hrmc-status-danger-text);
    --rz-danger-lighter:var(--hrmc-status-danger-bg);
    --rz-danger-dark:var(--hrmc-status-danger-text);
    --rz-danger-darker:var(--hrmc-status-danger-text);
    --rz-on-danger:var(--hrmc-on-brand);
    --rz-on-danger-light:var(--hrmc-on-brand);
    --rz-on-danger-dark:var(--hrmc-on-brand);
    --rz-on-danger-darker:var(--hrmc-on-brand);
    --rz-on-danger-lighter:var(--hrmc-status-danger-text);
    --rz-info:var(--hrmc-status-info-text);
    --rz-info-light:var(--hrmc-status-info-text);
    --rz-info-lighter:var(--hrmc-status-info-bg);
    --rz-info-dark:var(--hrmc-status-info-text);
    --rz-info-darker:var(--hrmc-status-info-text);
    --rz-on-info:var(--hrmc-on-brand);
    --rz-on-info-light:var(--hrmc-on-brand);
    --rz-on-info-dark:var(--hrmc-on-brand);
    --rz-on-info-darker:var(--hrmc-on-brand);
    --rz-on-info-lighter:var(--hrmc-status-info-text);
}

/* Notification toasts and semantic borders read their own variables. */
.hrmc-shell,
.theme-classic-orange,
.theme-warm-executive,
.theme-corporate-blue,
.theme-forest-green,
.theme-graphite{
    --rz-primary-color:var(--hrmc-brand-strong);
    --rz-border-primary:var(--hrmc-brand-strong);
    --rz-border-danger:var(--hrmc-status-danger-text);
    --rz-danger-rgb:155,35,24;
    --rz-notification-success-color:var(--hrmc-status-success-text);
    --rz-notification-success-background-color:var(--hrmc-status-success-bg);
    --rz-notification-success-icon-color:var(--hrmc-status-success-text);
    --rz-notification-warning-color:var(--hrmc-status-warning-text);
    --rz-notification-warning-background-color:var(--hrmc-status-warning-bg);
    --rz-notification-warning-icon-color:var(--hrmc-status-warning-text);
    --rz-notification-info-color:var(--hrmc-status-info-text);
    --rz-notification-info-background-color:var(--hrmc-status-info-bg);
    --rz-notification-info-icon-color:var(--hrmc-status-info-text);
    --rz-notification-error-color:var(--hrmc-status-danger-text);
    --rz-notification-error-background-color:var(--hrmc-status-danger-bg);
    --rz-notification-error-icon-color:var(--hrmc-status-danger-text);
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE
   Follows the OS setting, and only when the user has not pinned a
   palette. Redefines tokens only — no component rule is duplicated, so
   everything built on the tokens adapts without further work.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme:dark){
    :root:not([data-hrmc-appearance="light"]) .hrmc-shell{
        --hrmc-shell-bg:#121a1e;
        --hrmc-surface:#1a2429;
        --hrmc-surface-muted:#212d33;
        --hrmc-border:#2d3b42;
        --hrmc-text:#e4ecef;
        --hrmc-text-muted:#9bacb3;
        --hrmc-grid-heading:#2A3742;
        --hrmc-grid-heading-text:#DDE6EC;
        --hrmc-hero-text:#E8EEF2;
        --hrmc-on-action:#F2F5F7;
        --hrmc-brand:#E8913A;
        --hrmc-brand-strong:#C96A18;
        --hrmc-brand-hover:#E8913A;
        --hrmc-brand-soft:#2b1f14;
        --hrmc-brand-edge:#F0A961;
        --hrmc-on-brand:#16110c;
        --hrmc-hero-start:#20303a;
        --hrmc-hero-end:#314855;
        --hrmc-hero-eyebrow:#F0A961;
        --hrmc-sidebar-text:#e8eef0;
        --hrmc-sidebar-muted:#a9bcc4;
        --hrmc-sidebar-active:#C96A18;
        --hrmc-sidebar-edge:#F0A961;
        --hrmc-shadow:rgba(0,0,0,.42);
        --hrmc-status-success-bg:#16241c; --hrmc-status-success-text:#79c497;
        --hrmc-status-warning-bg:#271e11; --hrmc-status-warning-text:#dcae63;
        --hrmc-status-danger-bg:#2b1a18;  --hrmc-status-danger-text:#ec8b81;
        --hrmc-status-info-bg:#152730;    --hrmc-status-info-text:#87bcd6;
    }
}

/* ── Header progressive collapse ───────────────────────────────────
   The account cluster grew to five controls (appearance, notifications,
   avatar, name, log out) but its grid track still reserved 260px, while
   the search track was pinned at a 300px minimum and could not shrink.
   The two overlapped. Search now shrinks, then drops out entirely, and
   the account text collapses to the avatar before anything collides. */
.hrmc-shell .hrmc-search-wrap{min-width:0}

@media (max-width:1280px){
    .hrmc-shell .hrmc-header-content{grid-template-columns:72px minmax(120px,1fr) minmax(0,1fr) auto;gap:16px}
    .hrmc-shell.is-menu-pinned .hrmc-header-content{grid-template-columns:300px minmax(100px,1fr) minmax(0,1fr) auto}
    .hrmc-shell .hrmc-account-name{display:none}
}
@media (max-width:1024px){
    /* Search is a convenience: drop it before anything overlaps. Every
       destination remains reachable from the sidebar. */
    .hrmc-shell .hrmc-header-content{grid-template-columns:72px minmax(0,1fr) auto;gap:12px}
    .hrmc-shell.is-menu-pinned .hrmc-header-content{grid-template-columns:300px minmax(0,1fr) auto}
    .hrmc-shell .hrmc-search-wrap{display:none}
}
@media (max-width:768px){
    .hrmc-shell .hrmc-header-content{grid-template-columns:72px minmax(0,1fr) auto;padding-right:12px;gap:10px}
    .hrmc-shell .hrmc-workspace{display:none}
    .hrmc-shell .hrmc-account{display:flex}
    .hrmc-shell .hrmc-logout span:not(.material-symbols-outlined){display:none}
    .hrmc-shell .hrmc-logout{padding:9px 11px}
}

/* Row actions inside any data-grid cell, wrapped or not. Leave Types and the
   other master pages put bare buttons in the cell, so a wrapper-class rule
   never reached them and they kept Radzen's filled treatment. */
/* The blanket brand-fill rule above carries specificity (0,9,0) through its
   :not() chain, so a plain grid-cell selector loses to it. Matching that chain
   inside the grid context is what lets row actions stay outlined. */
.hrmc-shell .hrmc-body :is(.rz-grid-table,.rz-datatable,.recruitment-table,.performance-table,.template-table,.score-table,.lifecycle-table,.report-table,.matrix-table,.history-table,.ledger-table) td .rz-button:not(.rz-button-danger):not(.rz-danger):not(.rz-button-success):not(.rz-success):not(.rz-button-light):not(.rz-light){
    background:var(--hrmc-surface)!important;
    border:1px solid var(--hrmc-border)!important;
    color:var(--hrmc-text)!important;
    box-shadow:none!important;font-weight:600!important;
}
.hrmc-shell :is(.rz-grid-table,.rz-datatable,.recruitment-table,.performance-table,.template-table,.score-table,.lifecycle-table,.report-table,.matrix-table,.history-table,.ledger-table) td .rz-button:hover{
    background:var(--hrmc-surface-muted)!important;border-color:var(--hrmc-text-muted)!important;
}
.hrmc-shell .hrmc-body :is(.rz-grid-table,.rz-datatable,.recruitment-table,.performance-table,.template-table,.score-table,.lifecycle-table,.report-table,.matrix-table,.history-table,.ledger-table) td .rz-button:is(.rz-danger,.rz-error,.rz-button-danger){background:var(--hrmc-surface)!important;color:var(--hrmc-status-danger-text)!important;border-color:var(--hrmc-status-danger-bg)!important}
.hrmc-shell .hrmc-body :is(.rz-grid-table,.rz-datatable,.recruitment-table,.performance-table,.template-table,.score-table,.lifecycle-table,.report-table,.matrix-table,.history-table,.ledger-table) td .rz-button:is(.rz-danger,.rz-error,.rz-button-danger):hover{background:var(--hrmc-status-danger-bg)!important;border-color:var(--hrmc-status-danger-text)!important}
.hrmc-shell .hrmc-body :is(.rz-grid-table,.rz-datatable,.recruitment-table,.performance-table,.template-table,.score-table,.lifecycle-table,.report-table,.matrix-table,.history-table,.ledger-table) td .rz-button:is(.rz-success,.rz-button-success){background:var(--hrmc-surface)!important;color:var(--hrmc-status-success-text)!important;border-color:var(--hrmc-status-success-bg)!important}
.hrmc-shell .hrmc-body :is(.rz-grid-table,.rz-datatable,.recruitment-table,.performance-table,.template-table,.score-table,.lifecycle-table,.report-table,.matrix-table,.history-table,.ledger-table) td .rz-button:is(.rz-success,.rz-button-success):hover{background:var(--hrmc-status-success-bg)!important;border-color:var(--hrmc-status-success-text)!important}
.hrmc-shell :is(.rz-grid-table,.rz-datatable,.recruitment-table,.performance-table,.template-table,.score-table,.lifecycle-table,.report-table,.matrix-table,.history-table,.ledger-table) td .rz-button[disabled]{color:var(--hrmc-text-muted)!important;background:var(--hrmc-surface-muted)!important;opacity:.7}
/* Sort and filter affordances must stay visible on the dark header. */
.hrmc-shell :is(.rz-grid-table,.rz-datatable) thead th :is(.rz-sortable-column-icon,.rzi,.rz-grid-filter-icon,i){color:var(--hrmc-grid-heading-text)!important;opacity:.85}

.hrmc-shell .hrmc-body :is(.rz-grid-table,.rz-datatable,.recruitment-table,.performance-table,.template-table,.score-table,.lifecycle-table,.report-table,.matrix-table,.history-table,.ledger-table) td .rz-button:is(.rz-light,.rz-button-light){background:var(--hrmc-surface)!important;border:1px solid var(--hrmc-border)!important;color:var(--hrmc-text)!important;box-shadow:none!important}

/* ══════════════════════════════════════════════════════════════════
   CUSTOM PALETTE
   The company supplies one brand colour; every other token is derived
   from it with color-mix so a single value drives the whole workspace.
   Derivations lean heavily toward black for anything that carries white
   text, so even a pale brand choice stays readable.
   ══════════════════════════════════════════════════════════════════ */
.theme-custom{
    --hrmc-brand-strong:color-mix(in srgb, var(--hrmc-brand) 62%, #14100c);
    --hrmc-brand-hover:color-mix(in srgb, var(--hrmc-brand) 48%, #14100c);
    --hrmc-brand-soft:color-mix(in srgb, var(--hrmc-brand) 12%, #ffffff);
    --hrmc-brand-edge:color-mix(in srgb, var(--hrmc-brand) 55%, #ffffff);
    --hrmc-action-primary:var(--hrmc-brand-strong);
    --hrmc-action-primary-hover:var(--hrmc-brand-hover);

    --hrmc-hero-start:color-mix(in srgb, var(--hrmc-brand) 26%, #12171a);
    --hrmc-hero-end:color-mix(in srgb, var(--hrmc-brand) 70%, #14100c);
    --hrmc-hero-eyebrow:color-mix(in srgb, var(--hrmc-brand) 60%, #ffffff);

    --hrmc-sidebar-text:#FFFFFF;
    --hrmc-sidebar-muted:color-mix(in srgb, var(--hrmc-brand) 22%, #ffffff);
    --hrmc-sidebar-active:color-mix(in srgb, var(--hrmc-brand) 42%, #14100c);
    --hrmc-sidebar-edge:color-mix(in srgb, var(--hrmc-brand) 58%, #ffffff);
    --hrmc-sidebar-submenu:color-mix(in srgb, var(--hrmc-brand) 46%, #14100c);
    --hrmc-sidebar-hover:color-mix(in srgb, var(--hrmc-brand) 38%, #14100c);

    /* Surfaces pick up a trace of the brand so the workspace reads as one
       family rather than a coloured header on a grey page. */
    --hrmc-shell-bg:color-mix(in srgb, var(--hrmc-brand) 4%, #F7F7F6);
    --hrmc-surface:#FFFFFF;
    --hrmc-surface-muted:color-mix(in srgb, var(--hrmc-brand) 7%, #F4F4F3);
    --hrmc-border:color-mix(in srgb, var(--hrmc-brand) 12%, #DEDEDC);
    --hrmc-grid-heading:color-mix(in srgb, var(--hrmc-brand) 18%, #5A6066);
    --hrmc-shadow:rgba(24,24,26,.10);
}
/* Fallback for engines without color-mix: the built-in default, never a
   broken page. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
    .theme-custom{
        --hrmc-brand-strong:#A85400; --hrmc-brand-hover:#A85400;
        --hrmc-brand-soft:#FFF0D9; --hrmc-brand-edge:#FFC08F;
        --hrmc-sidebar-active:#A85400; --hrmc-sidebar-edge:#FFC08F;
    }
}

/* Custom-palette colour picker in the appearance drawer. */
.hrmc-theme-custom{display:flex;gap:11px;align-items:center;border:1px solid var(--hrmc-border);border-radius:12px;padding:12px 13px;background:var(--hrmc-surface-muted);cursor:pointer}
.hrmc-theme-custom input[type=color]{width:40px;height:40px;flex:0 0 40px;padding:0;border:1px solid var(--hrmc-border);border-radius:9px;background:none;cursor:pointer}
.hrmc-theme-custom input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.hrmc-theme-custom input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}
.hrmc-theme-custom>span{display:flex;flex-direction:column;min-width:0;flex:1}
.hrmc-theme-custom strong{font-size:13px;font-weight:600}
.hrmc-theme-custom small{font-size:11.5px;color:var(--hrmc-text-muted);line-height:1.4;margin-top:2px}
.hrmc-theme-custom code{font-family:"IBM Plex Mono",Consolas,monospace;font-size:11px;color:var(--hrmc-text-muted);flex:0 0 auto}
.hrmc-theme-custom input[type=color]:focus-visible{outline:2px solid var(--hrmc-brand);outline-offset:2px}

/* A hero that also carries page actions: keep the copy left, actions right,
   both inside the banner. */
.hrmc-shell .hrmc-page-hero.rz-stack{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.hrmc-shell .hrmc-page-hero.rz-stack>div:first-child{min-width:0;flex:1}

/* Header height as a token so sticky offsets track the responsive collapse
   instead of assuming a fixed 72px bar. */
.hrmc-shell{--hrmc-header-height:72px}
@media (max-width:768px){ .hrmc-shell{--hrmc-header-height:60px} }

/* ======================================================================
   CANONICAL HRMC DASHBOARD CARD
   Use .hrmc-dashboard-card-grid and .hrmc-dashboard-card for every new
   dashboard metric. The selected workspace palette supplies every colour.
   ====================================================================== */
.hrmc-shell .hrmc-dashboard-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:14px;
}
.hrmc-shell .hrmc-dashboard-card{
    position:relative;
    isolation:isolate;
    min-width:0;
    min-height:132px;
    overflow:hidden;
    padding:19px 18px;
    border:1px solid var(--hrmc-border)!important;
    border-top:4px solid var(--hrmc-brand)!important;
    border-radius:14px!important;
    background:linear-gradient(145deg,var(--hrmc-surface) 0%,var(--hrmc-surface) 64%,var(--hrmc-brand-soft) 100%)!important;
    color:var(--hrmc-text)!important;
    box-shadow:0 8px 24px var(--hrmc-shadow)!important;
    text-decoration:none;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.hrmc-shell .hrmc-dashboard-card::after{
    content:"";
    position:absolute;
    z-index:-1;
    width:92px;
    height:92px;
    right:-34px;
    bottom:-42px;
    border:15px solid var(--hrmc-brand-edge);
    border-radius:50%;
    opacity:.32;
}
.hrmc-shell .hrmc-dashboard-card:hover{
    transform:translateY(-4px);
    border-color:var(--hrmc-brand-edge)!important;
    box-shadow:0 14px 32px var(--hrmc-shadow)!important;
}
.hrmc-shell .hrmc-dashboard-card:focus-visible{
    outline:3px solid var(--hrmc-brand-edge);
    outline-offset:3px;
}
.hrmc-shell .hrmc-dashboard-card__icon{
    width:44px!important;
    height:44px!important;
    flex:0 0 44px;
    border:1px solid var(--hrmc-brand-edge);
    border-radius:12px!important;
    background:var(--hrmc-brand-soft)!important;
    color:var(--hrmc-brand-strong)!important;
    box-shadow:inset 0 0 0 1px var(--hrmc-surface);
}
.hrmc-shell .hrmc-dashboard-card__content{
    position:relative;
    z-index:1;
    gap:5px!important;
    padding-right:18px!important;
}
.hrmc-shell .hrmc-dashboard-card__content small{
    color:var(--hrmc-text-muted)!important;
    font-size:10px!important;
    font-weight:700!important;
    letter-spacing:.08em!important;
}
.hrmc-shell .hrmc-dashboard-card__content strong{
    color:var(--hrmc-text)!important;
    font-size:25px!important;
    font-weight:700!important;
    letter-spacing:-.025em;
}
.hrmc-shell .hrmc-dashboard-card__content em{
    color:var(--hrmc-text-muted)!important;
    font-size:12px!important;
    line-height:1.35;
}
.hrmc-shell .hrmc-dashboard-card__arrow{
    right:14px!important;
    bottom:14px!important;
    color:var(--hrmc-brand-strong)!important;
    transition:transform .18s ease;
}
.hrmc-shell .hrmc-dashboard-card:hover .hrmc-dashboard-card__arrow{transform:translate(2px,-2px)}
@media (max-width:700px){
    .hrmc-shell .hrmc-dashboard-card-grid{grid-template-columns:1fr}
    .hrmc-shell .hrmc-dashboard-card{min-height:116px}
}

/* Report printing: keep filters interactive on screen, print only the report,
   and release the application shell's scrolling viewport so rows can flow
   naturally onto as many pages as required. */
@media print{
    html,body,.rz-layout,.rz-body,.hrmc-shell,.hrmc-main,.hrmc-body{
        width:100%!important;
        min-width:0!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        margin:0!important;
        padding:0!important;
        overflow:visible!important;
        position:static!important;
    }
    body{background:#fff!important}
    html body .hrmc-shell .hrmc-body .no-print,
    html body .hrmc-shell .hrmc-sidebar,
    html body .hrmc-shell .hrmc-topbar,
    html body .rz-sidebar,
    html body .rz-header{display:none!important}
    :is(.employee-report,.attendance-report,.operational-report,.loan-report){
        display:block!important;
        width:100%!important;
        min-width:0!important;
        min-height:0!important;
        height:auto!important;
        max-height:none!important;
        margin:0!important;
        padding:0!important;
        overflow:visible!important;
        border:0!important;
        box-shadow:none!important;
    }
    :is(.employee-report,.attendance-report,.operational-report,.loan-report) .report-table-scroll,
    .loan-report .ledger-table-wrap{
        width:100%!important;
        max-height:none!important;
        overflow:visible!important;
    }
    :is(.employee-report,.attendance-report,.operational-report,.loan-report) table{
        width:100%!important;
        page-break-inside:auto;
    }
    :is(.employee-report,.attendance-report,.operational-report,.loan-report) thead{display:table-header-group}
    :is(.employee-report,.attendance-report,.operational-report,.loan-report) tfoot{display:table-footer-group}
    :is(.employee-report,.attendance-report,.operational-report,.loan-report) tr{
        break-inside:avoid;
        page-break-inside:avoid;
    }
    :is(.employee-report,.attendance-report,.operational-report,.loan-report) :is(.report-footer,footer){
        break-inside:avoid;
        page-break-inside:avoid;
    }
    @page{size:A4 landscape;margin:8mm}
}
.ess-page{display:grid;gap:1.25rem}.ess-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}.ess-eyebrow{font-size:.75rem;font-weight:800;letter-spacing:.14em}.ess-month-control{display:grid;gap:.35rem;min-width:190px}.ess-month-control label{font-size:.78rem;font-weight:700}.ess-month-control input{width:100%;padding:.65rem .75rem;border:1px solid var(--hrmc-border);border-radius:8px;background:var(--hrmc-surface);color:var(--hrmc-text)}.ess-loading{min-height:240px;display:flex;align-items:center;justify-content:center;gap:1rem;color:var(--hrmc-text-muted)}.ess-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.85rem}.ess-summary article{display:flex;align-items:center;gap:.75rem;padding:1rem;background:var(--hrmc-surface);border:1px solid var(--hrmc-border);border-top:4px solid var(--hrmc-brand);border-radius:12px;box-shadow:0 5px 18px var(--hrmc-shadow)}.ess-summary article>span{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--hrmc-brand-soft);color:var(--hrmc-brand)}.ess-summary small,.ess-profile-grid small{display:block;color:var(--hrmc-text-muted);font-size:.75rem}.ess-summary strong{display:block;margin-top:.15rem;font-size:1.15rem;color:var(--hrmc-text)}.ess-tabs{background:var(--hrmc-surface);border:1px solid var(--hrmc-border);border-top:4px solid var(--hrmc-brand);border-radius:14px;overflow:hidden;box-shadow:0 7px 22px var(--hrmc-shadow)}.ess-panel{padding:1.25rem}.ess-profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem;padding-bottom:1.25rem}.ess-profile-grid>div{padding:.85rem;border:1px solid var(--hrmc-border);border-radius:9px;background:var(--hrmc-surface-muted)}.ess-profile-grid strong{display:block;margin-top:.3rem}.ess-form-heading,.ess-section-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:0 0 1rem}.ess-form-heading{padding-top:1.25rem;border-top:1px solid var(--hrmc-border)}.ess-form-heading h2,.ess-section-heading h2{margin:0}.ess-form-heading p,.ess-section-heading p{margin:.25rem 0 0;color:var(--hrmc-text-muted)}.ess-contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:1rem}.ess-contact-grid label{display:grid;gap:.4rem;font-size:.8rem;font-weight:700}.ess-contact-grid input,.ess-contact-grid textarea{width:100%;padding:.7rem;border:1px solid var(--hrmc-border);border-radius:8px;background:var(--hrmc-surface);color:var(--hrmc-text)}.ess-contact-grid textarea{min-height:88px;resize:vertical}.ess-contact-grid .ess-wide{grid-column:span 3}.ess-download{font-weight:700;color:var(--hrmc-brand-hover)}@media(max-width:1200px){.ess-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.ess-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.ess-hero{align-items:stretch;flex-direction:column}.ess-summary,.ess-profile-grid,.ess-contact-grid{grid-template-columns:1fr}.ess-contact-grid .ess-wide{grid-column:auto}.ess-panel{padding:.85rem}}
.ess-punch-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;margin-bottom:1.25rem;border:1px solid var(--hrmc-border);border-left:4px solid var(--hrmc-brand);border-radius:10px;background:var(--hrmc-surface-muted)}.ess-punch-card h2,.ess-punch-card p{margin:.2rem 0}.ess-split,.ess-request-forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.ess-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:1rem}.ess-form-grid label{display:grid;gap:.4rem;font-size:.8rem;font-weight:700}.ess-form-grid :is(input,textarea,select),.ess-ticket-actions input{width:100%;padding:.7rem;border:1px solid var(--hrmc-border);border-radius:8px;background:var(--hrmc-surface);color:var(--hrmc-text)}.ess-form-grid textarea{min-height:90px;resize:vertical}.ess-form-grid .ess-wide{grid-column:span 2}.ess-form-grid .ess-check{display:flex;align-items:center;flex-direction:row}.ess-form-grid .ess-check input{width:auto}.ess-balance-list{display:grid;gap:.75rem}.ess-balance-list article{display:grid;grid-template-columns:1fr auto;gap:.25rem;padding:.85rem;border:1px solid var(--hrmc-border);border-radius:9px;background:var(--hrmc-surface-muted)}.ess-balance-list small{grid-column:1/-1;color:var(--hrmc-text-muted)}.ess-subheading{margin:1.5rem 0 .75rem;padding-top:1rem;border-top:1px solid var(--hrmc-border)}.ess-ticket-list,.ess-notifications{display:grid;gap:1rem;margin-top:1.5rem}.ess-ticket-list>article,.ess-notifications>article{padding:1rem;border:1px solid var(--hrmc-border);border-radius:10px;background:var(--hrmc-surface)}.ess-ticket-list header,.ess-notifications>article,.ess-ticket-actions{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.ess-ticket-list header small{display:block;margin-top:.2rem;color:var(--hrmc-text-muted)}.ess-message{max-width:80%;padding:.7rem;margin-top:.75rem;border-radius:9px;background:var(--hrmc-surface-muted)}.ess-message.from-hr{margin-left:auto;border-left:3px solid var(--hrmc-brand)}.ess-message p,.ess-notifications p{margin:.25rem 0}.ess-ticket-actions{margin-top:.75rem}.ess-notifications .is-unread{border-left:4px solid var(--hrmc-brand);background:var(--hrmc-brand-soft)}@media(max-width:900px){.ess-split,.ess-request-forms{grid-template-columns:1fr}}@media(max-width:720px){.ess-form-grid{grid-template-columns:1fr}.ess-form-grid .ess-wide{grid-column:auto}.ess-punch-card,.ess-ticket-list header,.ess-notifications>article,.ess-ticket-actions{align-items:stretch;flex-direction:column}.ess-message{max-width:100%}}
.tax-policy-page{display:grid;gap:1.25rem}.tax-policy-page .hrmc-page-hero{display:flex;align-items:center;justify-content:space-between;gap:1rem}.tax-policy-layout{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:1rem}.tax-policy-list,.tax-policy-editor{background:var(--hrmc-surface);border:1px solid var(--hrmc-border);border-top:4px solid var(--hrmc-brand);border-radius:12px;box-shadow:0 5px 18px var(--hrmc-shadow)}.tax-policy-list{padding:.85rem;align-self:start}.tax-policy-list-heading,.tax-policy-editor-heading,.tax-band-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}.tax-policy-list-heading h2,.tax-policy-editor-heading h2,.tax-band-heading h3{margin:0}.tax-policy-list-heading span{display:grid;place-items:center;min-width:30px;height:30px;border-radius:999px;background:var(--hrmc-brand-soft);color:var(--hrmc-brand-hover);font-weight:800}.tax-policy-option{display:grid;gap:.35rem;width:100%;padding:.85rem;margin-top:.6rem;text-align:left;border:1px solid var(--hrmc-border);border-radius:9px;background:var(--hrmc-surface);color:var(--hrmc-text);cursor:pointer}.tax-policy-option:hover,.tax-policy-option.selected{border-color:var(--hrmc-brand);background:var(--hrmc-brand-soft)}.tax-policy-option span,.tax-policy-option small,.tax-policy-empty,.tax-policy-editor-heading p,.tax-band-heading p{color:var(--hrmc-text-muted)}.tax-policy-editor{padding:1.15rem}.tax-policy-editor-heading{padding-bottom:1rem;border-bottom:1px solid var(--hrmc-border)}.tax-policy-editor-heading p,.tax-band-heading p{margin:.25rem 0 0}.tax-policy-actions,.tax-policy-save{display:flex;gap:.55rem;flex-wrap:wrap}.tax-policy-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1rem 0}.tax-policy-fields label{display:grid;gap:.4rem;font-size:.8rem;font-weight:700}.tax-policy-fields input,.tax-band-table input{width:100%;padding:.65rem;border:1px solid var(--hrmc-border);border-radius:7px;background:var(--hrmc-surface);color:var(--hrmc-text)}.tax-policy-check{display:flex!important;align-items:center;align-self:end;min-height:42px}.tax-policy-check input{width:auto}.tax-band-heading{margin:1.25rem 0 .75rem}.tax-band-table{width:100%;border-collapse:collapse}.tax-band-table th,.tax-band-table td{padding:.65rem}.tax-band-delete{display:grid;place-items:center;border:0;background:var(--hrmc-status-danger-bg);color:var(--hrmc-status-danger-text);border-radius:7px;cursor:pointer}.tax-policy-save{margin-top:1rem}.hrmc-primary,.hrmc-secondary,.hrmc-danger{display:inline-flex;align-items:center;gap:.35rem;padding:.65rem .85rem;border-radius:7px;font-weight:700;cursor:pointer;border:1px solid transparent}.hrmc-secondary{background:var(--hrmc-surface-muted);color:var(--hrmc-text);border:1px solid var(--hrmc-border)}.hrmc-danger{background:var(--hrmc-status-danger-text);color:var(--hrmc-on-brand);border:1px solid var(--hrmc-status-danger-text)}@media(max-width:950px){.tax-policy-layout{grid-template-columns:1fr}.tax-policy-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.tax-policy-page .hrmc-page-hero,.tax-policy-editor-heading,.tax-band-heading{align-items:stretch;flex-direction:column}.tax-policy-fields{grid-template-columns:1fr}}

/* ---- analytics workspace ------------------------------------------------
   This page shipped with markup but no stylesheet: 11 of its 13 classes had no
   rule anywhere, so it rendered as unstyled HTML. Everything below is
   token-driven so it tracks the active palette and dark mode. */
.hrmc-shell .hrmc-body .analytics-hero{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:1rem}
.hrmc-shell .hrmc-body .analytics-hero > div{flex:1 1 auto;min-width:0}
.hrmc-shell .hrmc-body .analytics-hero .rzi,
.hrmc-shell .hrmc-body .analytics-hero .rz-icon{font-size:2.6rem;opacity:.45}
.hrmc-shell .hrmc-body .analytics-hero > div > span:first-child{
    display:block;font-size:.72rem;font-weight:800;letter-spacing:.16em;
    color:var(--hrmc-hero-eyebrow)!important;margin-bottom:.35rem;
}

/* Filter strip. The panel shell comes from .hrmc-filter-panel; this only lays
   out the Field children, which are not wrapped in a Radzen row here. */
.hrmc-shell .hrmc-body .analytics-filter{
    display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem 1rem;
}
.hrmc-shell .hrmc-body .analytics-filter > *{flex:0 1 15rem;min-width:0}
.hrmc-shell .hrmc-body .analytics-filter > .rz-button{flex:0 0 auto}
.hrmc-shell .hrmc-body .analytics-filter small{
    flex:1 1 100%;color:var(--hrmc-text-muted);font-size:.78rem;
}

/* Board switcher */
.hrmc-shell .hrmc-body .analytics-tabs{
    display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem;padding:.35rem;
    background:var(--hrmc-surface);border:1px solid var(--hrmc-border);border-radius:12px;
}
.hrmc-shell .hrmc-body .analytics-tabs button{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.55rem .95rem;border:1px solid transparent;border-radius:9px;
    background:transparent;color:var(--hrmc-text-muted);
    font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;
    transition:background .15s,color .15s,border-color .15s;
}
.hrmc-shell .hrmc-body .analytics-tabs button:hover{
    background:var(--hrmc-brand-soft);color:var(--hrmc-brand-strong);
}
.hrmc-shell .hrmc-body .analytics-tabs button.active{
    background:var(--hrmc-brand-hover);border-color:var(--hrmc-brand-hover);
    color:var(--hrmc-on-brand);box-shadow:0 4px 12px var(--hrmc-shadow);
}
.hrmc-shell .hrmc-body .analytics-tabs button .rzi{font-size:1.05rem}

/* Board title row */
.hrmc-shell .hrmc-body .board-heading{
    display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
    gap:1rem;margin:0 0 .9rem;
}
.hrmc-shell .hrmc-body .board-heading > div > span:first-child{
    display:block;font-size:.68rem;font-weight:800;letter-spacing:.15em;
    color:var(--hrmc-brand-hover);margin-bottom:.2rem;
}
.hrmc-shell .hrmc-body .board-heading h2{margin:0;font-size:1.35rem;color:var(--hrmc-text)}
.hrmc-shell .hrmc-body .board-heading p{margin:.25rem 0 0;color:var(--hrmc-text-muted);max-width:70ch}
.hrmc-shell .hrmc-body .board-actions{display:flex;gap:.5rem;flex-wrap:wrap}

/* Metric tiles. .metric-card already inherits the shared card surface. */
.hrmc-shell .hrmc-body .metric-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))!important;
    gap:.85rem;margin:0 0 1.25rem;
}
.hrmc-shell .hrmc-body .metric-card{
    display:grid;gap:.2rem;padding:1rem 1.1rem;text-align:left;
    /* these are <button> elements: the UA grey background and 2px border win
       unless we state the card surface explicitly. */
    background:var(--hrmc-surface)!important;
    border:1px solid var(--hrmc-border)!important;
    border-top:4px solid var(--hrmc-brand)!important;
    border-radius:12px;cursor:pointer;font:inherit;
    box-shadow:0 6px 18px var(--hrmc-shadow);
    transition:transform .15s,box-shadow .15s,border-color .15s;
}
.hrmc-shell .hrmc-body .metric-card:hover{
    transform:translateY(-2px);
    border-color:var(--hrmc-brand-edge)!important;
    box-shadow:0 10px 24px var(--hrmc-shadow)!important;
}
.hrmc-shell .hrmc-body .metric-card > span{
    font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--hrmc-text-muted);
}
.hrmc-shell .hrmc-body .metric-card > strong{
    font-size:1.6rem;line-height:1.15;color:var(--hrmc-text);
    font-variant-numeric:tabular-nums;
}
.hrmc-shell .hrmc-body .metric-card > small{
    color:var(--hrmc-text-muted);font-size:.75rem;line-height:1.4;
}

/* Series cards */
.hrmc-shell .hrmc-body .series-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));gap:1rem;
}
.hrmc-shell .hrmc-body .series-card{
    padding:1.1rem 1.2rem;background:var(--hrmc-surface);
    border:1px solid var(--hrmc-border);border-top:4px solid var(--hrmc-brand);
    border-radius:14px;box-shadow:0 7px 22px var(--hrmc-shadow);
}
.hrmc-shell .hrmc-body .series-card > header{
    display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.9rem;
}
.hrmc-shell .hrmc-body .series-card header > div > span:first-child{
    display:block;font-size:.65rem;font-weight:800;letter-spacing:.15em;color:var(--hrmc-brand-hover);
}
.hrmc-shell .hrmc-body .series-card header h3{margin:.15rem 0 0;font-size:1.05rem;color:var(--hrmc-text)}
.hrmc-shell .hrmc-body .series-card header small{color:var(--hrmc-text-muted);white-space:nowrap}

/* Bar rows. The native progress element is repainted rather than replaced, so
   the markup and its accessible value stay exactly as authored. */
.hrmc-shell .hrmc-body .bar-list{display:grid;gap:.7rem}
.hrmc-shell .hrmc-body .bar-row{display:grid;gap:.3rem}
.hrmc-shell .hrmc-body .bar-row > div{
    display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
}
.hrmc-shell .hrmc-body .bar-row span{
    color:var(--hrmc-text);font-size:.85rem;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hrmc-shell .hrmc-body .bar-row strong{
    color:var(--hrmc-brand-strong);font-size:.85rem;
    font-variant-numeric:tabular-nums;white-space:nowrap;
}
.hrmc-shell .hrmc-body .bar-row progress{
    -webkit-appearance:none;appearance:none;
    display:block;width:100%;height:8px;border:0;border-radius:999px;
    background:var(--hrmc-surface-muted);overflow:hidden;
}
.hrmc-shell .hrmc-body .bar-row progress::-webkit-progress-bar{
    background:var(--hrmc-surface-muted);border-radius:999px;
}
.hrmc-shell .hrmc-body .bar-row progress::-webkit-progress-value{
    background:linear-gradient(90deg,var(--hrmc-brand-hover),var(--hrmc-brand));border-radius:999px;
}
.hrmc-shell .hrmc-body .bar-row progress::-moz-progress-bar{
    background:var(--hrmc-brand-hover);border-radius:999px;
}

/* Empty and loading states */
.hrmc-shell .hrmc-body .series-card .empty{
    margin:0;padding:1.4rem;text-align:center;color:var(--hrmc-text-muted);
    background:var(--hrmc-surface-muted);border:1px dashed var(--hrmc-border);border-radius:10px;
}
.hrmc-shell .hrmc-body .analytics-loading{
    display:grid;place-items:center;gap:.9rem;min-height:260px;
    color:var(--hrmc-text-muted);
    background:var(--hrmc-surface);border:1px solid var(--hrmc-border);border-radius:14px;
}
@media (max-width:768px){
    .hrmc-shell .hrmc-body .series-grid{grid-template-columns:1fr}
    .hrmc-shell .hrmc-body .metric-grid{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))!important}
    .hrmc-shell .hrmc-body .analytics-filter > *{flex:1 1 100%}
}


/* ==== OWNER CONSOLE =======================================================
   The platform admin portal deliberately does NOT inherit the tenant palette.
   An operator switching between a client workspace and the vendor console must
   never be in doubt which one they are looking at, so the console keeps a cool
   slate identity of its own while the HRMC mark stays warm for brand
   continuity. These tokens are independent of --hrmc-* on purpose. */
.owner-shell{
    --own-ink:#0F1D26;
    --own-ink-2:#3A4E5B;
    --own-ink-3:#6B8090;
    --own-paper:#F3F6F8;
    --own-surface:#FFFFFF;
    --own-sunk:#E9EFF2;
    --own-line:#D5DFE5;
    --own-line-2:#BECCD4;
    --own-nav-top:#20404F;
    --own-nav-mid:#1A3441;
    --own-nav-bot:#132832;
    --own-nav-text:#EAF2F6;
    --own-nav-muted:#9DB4C1;
    --own-accent:#0F7A78;
    --own-accent-soft:#E4F1F0;
    --own-mark:#C05F17;
    --own-mark-2:#8A4310;
    --own-ok:#1B6B45;   --own-ok-bg:#E9F2ED;
    --own-warn:#8A5406; --own-warn-bg:#FBF2E4;
    --own-bad:#8C3128;  --own-bad-bg:#FAEDEB;
    --own-shadow:rgba(15,29,38,.10);
}
@media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .owner-shell{
        --own-ink:#DFE8ED;
        --own-ink-2:#A8BAC5;
        --own-ink-3:#7A8E9B;
        --own-paper:#0C1419;
        --own-surface:#141F26;
        --own-sunk:#101A20;
        --own-line:#22323C;
        --own-line-2:#2E404C;
        --own-nav-top:#162B36;
        --own-nav-mid:#122430;
        --own-nav-bot:#0D1C25;
        --own-nav-text:#E4EEF3;
        --own-nav-muted:#8AA3B1;
        --own-accent:#4FB5B0;
        --own-accent-soft:#102A2A;
        --own-mark:#E08A3C;
        --own-mark-2:#C06A20;
        --own-ok:#6FC79A;   --own-ok-bg:#12241B;
        --own-warn:#DFA451; --own-warn-bg:#2A2013;
        --own-bad:#EF8A7F;  --own-bad-bg:#2A1614;
        --own-shadow:rgba(0,0,0,.34);
    }
}
:root[data-theme="dark"] .owner-shell{
    --own-ink:#DFE8ED; --own-ink-2:#A8BAC5; --own-ink-3:#7A8E9B;
    --own-paper:#0C1419; --own-surface:#141F26; --own-sunk:#101A20;
    --own-line:#22323C; --own-line-2:#2E404C;
    --own-nav-top:#162B36; --own-nav-mid:#122430; --own-nav-bot:#0D1C25;
    --own-nav-text:#E4EEF3; --own-nav-muted:#8AA3B1;
    --own-accent:#4FB5B0; --own-accent-soft:#102A2A;
    --own-mark:#E08A3C; --own-mark-2:#C06A20;
    --own-ok:#6FC79A; --own-ok-bg:#12241B;
    --own-warn:#DFA451; --own-warn-bg:#2A2013;
    --own-bad:#EF8A7F; --own-bad-bg:#2A1614;
    --own-shadow:rgba(0,0,0,.34);
}

/* ---- shell ---- */
.owner-shell{background:var(--own-paper)!important;color:var(--own-ink)!important}
.owner-sidebar{
    background:linear-gradient(180deg,var(--own-nav-top) 0%,var(--own-nav-mid) 58%,var(--own-nav-bot) 100%)!important;
    box-shadow:8px 0 28px var(--own-shadow)!important;
}
.owner-brand{border-bottom:1px solid rgba(255,255,255,.10)!important;color:var(--own-nav-text)!important;text-decoration:none!important}
.owner-brand small{color:var(--own-nav-muted)!important}
.owner-logo{
    background:linear-gradient(145deg,var(--own-mark),var(--own-mark-2))!important;
    box-shadow:0 8px 20px rgba(0,0,0,.34)!important;color:#fff!important;
}
.nav-caption{
    color:var(--own-nav-muted)!important;letter-spacing:.15em;
    font-size:9.5px;font-weight:800;padding:0 20px 8px;
}

/* ---- navigation ----------------------------------------------------------
   NavLink renders a bare <a> with no class of its own, so without these it
   inherits the browser's underlined anchor styling. */
.owner-sidebar nav a,
.owner-sidebar a:not(.owner-brand):not(.owner-signout){
    display:flex;align-items:center;gap:11px;
    padding:9px 20px;margin:1px 10px 1px 0;
    border-radius:0 9px 9px 0;
    border-left:3px solid transparent;
    color:var(--own-nav-text)!important;
    text-decoration:none!important;
    font-size:13.5px;font-weight:600;line-height:1.3;
    transition:background .15s,border-color .15s;
}
.owner-sidebar nav a .material-symbols-outlined,
.owner-sidebar a .material-symbols-outlined{
    font-size:19px;flex:0 0 auto;opacity:.82;
}
.owner-sidebar nav a:hover,
.owner-sidebar a:not(.owner-brand):not(.owner-signout):hover{
    background:rgba(255,255,255,.08);
}
.owner-sidebar nav a.active,
.owner-sidebar a.active:not(.owner-brand){
    background:rgba(255,255,255,.13);
    border-left-color:var(--own-accent);
    font-weight:700;
}
.owner-sidebar nav a.active .material-symbols-outlined{opacity:1;color:var(--own-accent)}
.owner-side-note{
    margin:auto 14px 16px;padding:12px 13px;border-radius:11px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
    color:var(--own-nav-muted);
}
.owner-side-note strong,.owner-side-note b{color:var(--own-nav-text);display:block;font-size:12.5px}

/* ---- top bar ---- */
.owner-topbar{
    background:var(--own-surface)!important;
    border-bottom:1px solid var(--own-line)!important;
    box-shadow:0 2px 10px var(--own-shadow);
}
.owner-context b,.owner-context strong{color:var(--own-ink)!important}
.owner-context small,.owner-context span{color:var(--own-ink-3)!important}
.owner-avatar{
    background:var(--own-accent-soft)!important;color:var(--own-accent)!important;
    border:1px solid var(--own-line)!important;font-weight:700;
}
.owner-main{background:var(--own-paper)!important}
.owner-content{background:transparent!important}

/* ---- one card language ---- */
.owner-shell :is(.owner-card,.owner-panel,.metric-card,.client-card,.signup-panel,
  .edit-card,.package-card,.storage-card,.owner-section,.clients-panel){
    background:var(--own-surface)!important;
    border:1px solid var(--own-line)!important;
    border-top:4px solid var(--own-accent)!important;
    border-radius:14px!important;
    box-shadow:0 7px 22px var(--own-shadow)!important;
    color:var(--own-ink)!important;
}
.owner-shell :is(h1,h2,h3,h4){color:var(--own-ink)}
.owner-shell p{color:var(--own-ink-2)}

/* ---- tables ---- */
.owner-shell table{width:100%;border-collapse:collapse;background:var(--own-surface)}
.owner-shell thead th{
    background:var(--own-nav-mid)!important;color:var(--own-nav-text)!important;
    text-align:left;font-size:11px!important;font-weight:700!important;
    letter-spacing:.06em;text-transform:uppercase;
    padding:11px 13px!important;border:0!important;white-space:nowrap;
}
.owner-shell tbody td{
    padding:11px 13px!important;border-bottom:1px solid var(--own-line)!important;
    color:var(--own-ink-2);font-size:12.5px;vertical-align:middle;
}
.owner-shell tbody tr:last-child td{border-bottom:0!important}
.owner-shell tbody tr:hover td{background:var(--own-sunk)}

/* ---- controls: colour only, never layout ---------------------------------
   Pages position their own icons and set their own heights; forcing padding
   here slid the search placeholder under its magnifier. */
.owner-shell :is(input,select,textarea){
    background:var(--own-surface);color:var(--own-ink);
    border:1px solid var(--own-line);border-radius:8px;font:inherit;
}
.owner-shell :is(input,select,textarea):focus{
    outline:none;border-color:var(--own-accent);
    box-shadow:0 0 0 3px var(--own-accent-soft);
}

/* Only unclassed buttons get the default treatment; a button the page has
   already styled keeps its own look. */
.owner-shell button:not([class]){
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.6rem .95rem;border-radius:8px;border:1px solid transparent;
    background:var(--own-accent);color:#fff;font:inherit;font-weight:700;font-size:12.5px;cursor:pointer;
}
.owner-shell button:not([class]):hover{filter:brightness(.92)}

/* ---- row actions: outline, so a long table does not read as a wall ---- */
.owner-shell .row-actions{gap:5px}
.owner-shell .row-actions button{
    padding:5px 9px!important;border-radius:6px!important;
    font-size:10.5px!important;font-weight:700!important;
    background:var(--own-surface)!important;
    border:1px solid var(--own-line)!important;
    color:var(--own-ink-2)!important;
    transition:background .13s,border-color .13s,color .13s;
}
.owner-shell .row-actions button .material-symbols-outlined{font-size:14px;opacity:.75}
.owner-shell .row-actions button:hover{
    background:var(--own-accent-soft)!important;
    border-color:var(--own-accent)!important;
    color:var(--own-accent)!important;
}
.owner-shell .row-actions button:hover .material-symbols-outlined{opacity:1}
.owner-shell .row-actions button.edit{
    background:var(--own-accent)!important;border-color:var(--own-accent)!important;color:#fff!important;
}
.owner-shell .row-actions button.edit:hover{filter:brightness(.92)}
.owner-shell .row-actions button.edit .material-symbols-outlined{opacity:1}

/* ---- badges ---- */
.owner-shell .action-badge{
    background:var(--own-ok-bg)!important;color:var(--own-ok)!important;
    border:1px solid currentColor;border-radius:999px!important;
    padding:3px 10px!important;font-size:10.5px!important;
}
.owner-shell .own-chip{
    display:inline-flex;align-items:center;gap:.35rem;
    padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;
    background:var(--own-sunk);color:var(--own-ink-2);border:1px solid var(--own-line);
}
.owner-shell .own-chip.is-ok{background:var(--own-ok-bg);color:var(--own-ok);border-color:currentColor}
.owner-shell .own-chip.is-warn{background:var(--own-warn-bg);color:var(--own-warn);border-color:currentColor}
.owner-shell .own-chip.is-bad{background:var(--own-bad-bg);color:var(--own-bad);border-color:currentColor}

/* ---- page hero ---- */
.owner-shell .owner-hero,
.owner-shell .clients-heading{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:1.4rem 1.6rem;margin:0 0 1rem;border-radius:16px;
    background:linear-gradient(125deg,var(--own-nav-top),var(--own-nav-mid));
    color:var(--own-nav-text);box-shadow:0 12px 30px var(--own-shadow);
}
.owner-shell :is(.owner-hero,.clients-heading) h1{margin:0;font-size:1.7rem;color:var(--own-nav-text)!important}
.owner-shell :is(.owner-hero,.clients-heading) p{margin:.3rem 0 0;color:var(--own-nav-muted)!important;font-size:.9rem}
.owner-shell :is(.owner-hero,.clients-heading) > div > span:first-child{
    display:block;font-size:.68rem;font-weight:800;letter-spacing:.16em;color:var(--own-accent);
}
/* the count block that sits in the hero */
.owner-shell :is(.owner-hero,.clients-heading) .client-count,
.owner-shell :is(.owner-hero,.clients-heading) > :last-child:not(div){
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
    border-radius:12px;padding:.7rem 1.1rem;text-align:right;color:var(--own-nav-text);
}
@media (max-width:820px){
    .owner-shell :is(.owner-hero,.clients-heading){flex-direction:column;align-items:flex-start}
}


/* ==== RESPONSIVE HARDENING ================================================
   The shell, header and filter panels already collapse at 1280/1024/768, but
   the page hero was a non-wrapping flex row: its title and action group both
   refused to shrink, so on a narrow screen the hero set a floor wider than the
   viewport and pushed the entire body into horizontal scroll. Everything below
   removes a min-width floor rather than adding new layout. */

/* nothing in the shell may establish a width floor */
.hrmc-shell,.hrmc-shell .hrmc-body,.hrmc-shell .hrmc-main{min-width:0}
.hrmc-shell .hrmc-body > *{min-width:0}

/* heroes wrap, and their two halves are allowed to shrink */
.hrmc-shell .hrmc-body :is(.hrmc-page-hero,.page-hero,.lifecycle-hero,.performance-hero,
  .recruitment-hero,.document-hero,.notification-hero,.reports-hero,.workspace-hero,
  .device-hero,.analytics-hero){
    flex-wrap:wrap!important;
}
.hrmc-shell .hrmc-body :is(.hrmc-page-hero,.page-hero,.analytics-hero) > *{min-width:0}

/* long words and codes must not set a floor either */
.hrmc-shell .hrmc-body :is(h1,h2,h3,p,td,th){overflow-wrap:anywhere}

@media (max-width:768px){
    /* stack the hero: title over actions */
    .hrmc-shell .hrmc-body :is(.hrmc-page-hero,.page-hero,.lifecycle-hero,.performance-hero,
      .recruitment-hero,.document-hero,.notification-hero,.reports-hero,.workspace-hero,
      .device-hero,.analytics-hero){
        flex-direction:column!important;
        align-items:flex-start!important;
        gap:.85rem!important;
        min-height:0!important;
        padding:1.1rem 1.15rem!important;
    }
    .hrmc-shell .hrmc-body :is(.hrmc-page-hero,.page-hero,.analytics-hero) .rz-text-h3,
    .hrmc-shell .hrmc-body :is(.hrmc-page-hero,.page-hero,.analytics-hero) h1{
        font-size:1.35rem!important;line-height:1.2!important;
    }
    /* action groups inside a hero go full width and wrap */
    .hrmc-shell .hrmc-body :is(.hrmc-page-hero,.page-hero,.analytics-hero) .rz-stack,
    .hrmc-shell .hrmc-body :is(.hrmc-page-hero,.page-hero,.analytics-hero) > div:last-child{
        width:100%;display:flex;flex-wrap:wrap;gap:.5rem;
    }

    /* metric strips: two up rather than a squeezed four */
    .hrmc-shell .hrmc-body .metric-grid{grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr))!important}

    /* every table scrolls inside its own box, never the page */
    .hrmc-shell .hrmc-body :is(.rz-datatable,.rz-data-grid,.rz-grid-table,table){max-width:100%}
    .hrmc-shell .hrmc-body :is(.hrmc-data-table,.table-wrap,.report-wrap,.grid-wrap,
      .client-table-wrap,.ledger-table-wrap,.report-table-scroll,.table-scroll){
        overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
    }

    /* toolbars and button rows wrap instead of overflowing */
    .hrmc-shell .hrmc-body :is(.rz-stack[class*="horizontal"],.hrmc-row-actions,
      .row-actions,.board-actions,.hrmc-filter-actions){flex-wrap:wrap!important}

    /* cards and panels get tighter padding so content keeps its room */
    .hrmc-shell .hrmc-body :is(.rz-card,.hrmc-operation-card,.hrmc-filter-panel,
      .series-card,.ess-panel){padding:.9rem!important}
}

@media (max-width:520px){
    /* single column for anything still trying to sit side by side */
    .hrmc-shell .hrmc-body .metric-grid{grid-template-columns:1fr!important}
    .hrmc-shell .hrmc-body :is(.series-grid,.ess-summary,.ess-profile-grid,
      .ess-contact-grid,.ess-form-grid,.ess-split,.ess-request-forms){grid-template-columns:1fr!important}
    .hrmc-shell .hrmc-body .analytics-tabs{overflow-x:auto;flex-wrap:nowrap}
    .hrmc-shell .hrmc-body .analytics-tabs button{white-space:nowrap}
    /* buttons in a hero go full width so they are reachable with a thumb */
    .hrmc-shell .hrmc-body :is(.hrmc-page-hero,.analytics-hero) .rz-button{flex:1 1 auto;justify-content:center}
}

/* the salary report is the one table that is not inside a scrolling wrapper */
.hrmc-shell .hrmc-body .salary-report{max-width:100%;overflow-x:auto;display:block}

/* owner console follows the same rules */
@media (max-width:768px){
    .owner-shell{flex-direction:column}
    .owner-sidebar{position:static!important;width:100%!important;flex:0 0 auto!important;inset:auto!important}
    .owner-sidebar nav{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px}
    .owner-sidebar nav a{margin:0;border-radius:8px;border-left:0;border-bottom:3px solid transparent;padding:8px 12px}
    .owner-sidebar nav a.active{border-left:0;border-bottom-color:var(--own-accent)}
    .owner-side-note{display:none}
    .owner-shell :is(.owner-hero,.clients-heading){flex-direction:column;align-items:flex-start;padding:1.1rem}
    .owner-shell .client-table-wrap{overflow-x:auto;max-width:100%}
}