/* HRConnect Design Platform v3. Generated; edit source modules only. */

/* source: public/assets/design-tokens.css */
/*
 * HRConnect Design System — foundation tokens.
 * Primitive values are global by design; presentation remains opt-in through
 * body.hrc-design-system-v1 in the theme, component and adapter layers.
 */
@layer reset, tokens, base, components, utilities, legacy-overrides;

@layer tokens {
    :root {
        /* Brand and neutral primitives. */
        --hrc-brand-50: #eff8ff;
        --hrc-brand-100: #dbeeff;
        --hrc-brand-200: #b9ddff;
        --hrc-brand-300: #82c4ff;
        --hrc-brand-400: #45a5ff;
        --hrc-brand-500: #1683ee;
        --hrc-brand-600: #0f6fd8;
        --hrc-brand-700: #0d58ad;
        --hrc-brand-800: #124b8c;
        --hrc-brand-900: #153f70;
        --hrc-indigo-700: #5b45c9;
        --hrc-indigo-800: #4c3bb8;
        --hrc-emerald-700: #047857;
        --hrc-emerald-800: #06634d;
        /* Static foregrounds never follow legacy surface remapping. */
        --hrc-static-white: #ffffff;
        --hrc-neutral-0: #ffffff;
        --hrc-neutral-25: #fbfcfe;
        --hrc-neutral-50: #f7f9fc;
        --hrc-neutral-100: #edf2f7;
        --hrc-neutral-200: #dbe4ef;
        --hrc-neutral-300: #c6d2e1;
        --hrc-neutral-400: #94a3b8;
        --hrc-neutral-500: #64748b;
        --hrc-neutral-600: #475569;
        --hrc-neutral-700: #334155;
        --hrc-neutral-800: #1e293b;
        --hrc-neutral-900: #0f172a;
        --hrc-neutral-950: #08111f;

        /* Status and domain semantics. */
        --hrc-success-50: #ecfdf5;
        --hrc-success-600: #047857;
        --hrc-warning-50: #fffbeb;
        --hrc-warning-600: #b45309;
        --hrc-danger-50: #fff1f2;
        --hrc-danger-600: #be123c;
        --hrc-info-50: #eff6ff;
        --hrc-info-600: #1d4ed8;
        --hrc-finance-income: #047857;
        --hrc-finance-expense: #be123c;
        --hrc-finance-receivable: #1d4ed8;
        --hrc-finance-payable: #b45309;
        --hrc-hr-active: #047857;
        --hrc-hr-onboarding: #1d4ed8;
        --hrc-hr-inactive: #64748b;
        --hrc-attendance-present: #047857;
        --hrc-attendance-late: #b45309;
        --hrc-attendance-absent: #be123c;
        --hrc-attendance-leave: #6d28d9;
        --hrc-attendance-overtime: #0369a1;

        /* Typography. */
        --hrc-font-sans: "Be Vietnam Pro", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --hrc-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
        --hrc-font-number: var(--hrc-font-sans);
        --hrc-text-xs: .75rem;
        --hrc-text-sm: .8125rem;
        --hrc-text-md: .875rem;
        --hrc-text-lg: 1rem;
        --hrc-text-xl: 1.25rem;
        --hrc-text-2xl: 1.625rem;
        --hrc-text-3xl: clamp(1.875rem, 3vw, 2.75rem);
        --hrc-leading-tight: 1.2;
        --hrc-leading-normal: 1.5;
        --hrc-leading-relaxed: 1.65;
        --hrc-tracking-eyebrow: .08em;
        --hrc-weight-regular: 400;
        --hrc-weight-medium: 500;
        --hrc-weight-semibold: 600;
        --hrc-weight-bold: 700;

        /* Spacing, layout and controls. */
        --hrc-space-0: 0;
        --hrc-space-1: .25rem;
        --hrc-space-2: .5rem;
        --hrc-space-3: .75rem;
        --hrc-space-4: 1rem;
        --hrc-space-5: 1.25rem;
        --hrc-space-6: 1.5rem;
        --hrc-space-8: 2rem;
        --hrc-space-10: 2.5rem;
        --hrc-space-12: 3rem;
        --hrc-container-sm: 720px;
        --hrc-container-md: 960px;
        --hrc-container-lg: 1280px;
        --hrc-container-xl: 1480px;
        --hrc-container-2xl: 1760px;
        --hrc-container-4k: 1920px;
        --hrc-page-max: var(--hrc-container-xl);
        --hrc-page-gutter: var(--hrc-space-4);
        --hrc-page-gutter-tablet: var(--hrc-space-4);
        --hrc-page-gutter-mobile: var(--hrc-space-3);
        --hrc-page-padding-inline: clamp(14px, 2.2vw, var(--hrc-space-8));
        --hrc-section-gap: clamp(var(--hrc-space-4), 2vw, var(--hrc-space-6));
        --hrc-card-padding: var(--hrc-section-gap);
        --hrc-row-density: var(--hrc-control-height);
        --hrc-table-column-min: 8rem;
        --hrc-layout-detail-min: 18rem;
        --hrc-layout-controls-min: 10rem;
        --hrc-layout-compact-metrics-min: 12rem;
        --hrc-hero-compact-min-height: 6rem;
        --hrc-popover-inline-size: 28rem;
        --hrc-popover-block-size: 24rem;
        --hrc-sheet-block-size: 48rem;
        --hrc-map-block-size: 32.5rem;
        --hrc-map-block-size-tablet: 26.25rem;
        --hrc-map-block-size-mobile: 22.5rem;
        --hrc-media-capture-ratio: 4 / 3;
        --hrc-grid-gap: 1.125rem;
        --hrc-control-height-sm: 44px;
        --hrc-control-height: 44px;
        --hrc-control-height-lg: 48px;
        --hrc-sidebar-width: 252px;
        --hrc-sidebar-collapsed: 72px;
        --hrc-topbar-height: 68px;
        --hrc-breakpoint-mobile: 640px;
        --hrc-breakpoint-tablet: 768px;
        --hrc-breakpoint-laptop: 1024px;
        --hrc-breakpoint-desktop: 1440px;
        --hrc-breakpoint-wide: 1920px;
        --hrc-breakpoint-4k: 3840px;
        --hrc-direction: ltr;

        /* Borders, radius, elevation and motion. */
        --hrc-border-width: 1px;
        --hrc-radius-xs: .375rem;
        --hrc-radius-sm: .625rem;
        --hrc-radius-md: .875rem;
        --hrc-radius-lg: 1.125rem;
        --hrc-radius-xl: 1.5rem;
        --hrc-radius-pill: 999px;
        --hrc-shadow-xs: 0 2px 8px rgba(15, 23, 42, .04);
        --hrc-shadow-sm: 0 6px 18px rgba(15, 23, 42, .055);
        --hrc-shadow-md: 0 16px 38px rgba(15, 23, 42, .075);
        --hrc-shadow-lg: 0 24px 64px rgba(15, 23, 42, .12);
        --hrc-opacity-disabled: .52;
        --hrc-opacity-muted: .72;
        --hrc-focus-width: 3px;
        --hrc-focus-offset: 2px;
        --hrc-motion-fast: 140ms;
        --hrc-motion-normal: 180ms;
        --hrc-motion-slow: 260ms;
        --hrc-motion-duration: var(--hrc-motion-normal);
        --hrc-ease-standard: cubic-bezier(.2, 0, 0, 1);
        --hrc-ease-emphasized: cubic-bezier(.2, .8, .2, 1);
        --hrc-ease-decelerate: cubic-bezier(0, 0, .2, 1);
        --hrc-motion-page: 320ms;
        --hrc-motion-overlay: 220ms;

        /* Enterprise v3 opacity, blur, density and media primitives. */
        --hrc-opacity-hidden: 0;
        --hrc-opacity-subtle: .08;
        --hrc-opacity-hover: .12;
        --hrc-opacity-pressed: .18;
        --hrc-opacity-overlay: .62;
        --hrc-blur-sm: 6px;
        --hrc-blur-md: 14px;
        --hrc-blur-lg: 24px;
        --hrc-density-compact: 44px;
        --hrc-density-standard: 44px;
        --hrc-density-comfortable: 48px;
        --hrc-touch-target: 44px;
        --hrc-icon-xs: 14px;
        --hrc-icon-sm: 16px;
        --hrc-icon-md: 20px;
        --hrc-icon-lg: 24px;
        --hrc-icon-xl: 32px;
        --hrc-illustration-sm: 120px;
        --hrc-illustration-md: 240px;
        --hrc-illustration-lg: 420px;
        --hrc-chart-stroke: 2px;
        --hrc-chart-point: 8px;
        --hrc-chart-pattern-size: 10px;
        --hrc-foldable-pane-min: 280px;
        --hrc-editor-min-height: 240px;
        --hrc-command-width: 640px;
        --hrc-calendar-cell: 44px;

        /* One shared stacking scale. */
        --hrc-z-base: 0;
        --hrc-z-sticky: 200;
        --hrc-z-dropdown: 1030;
        --hrc-z-tooltip: 1040;
        --hrc-z-drawer: 1045;
        --hrc-z-modal: 1120;
        --hrc-z-toast: 1140;
        --hrc-z-command: 1160;

        /* Compatibility aliases consumed by the existing ERP facade. */
        --hrc-content-max: var(--hrc-container-xl);
        --hrc-header-height: var(--hrc-topbar-height);
        --hrc-page-gap: var(--hrc-grid-gap);
        --hrc-radius-card: var(--hrc-radius-md);
        --hrc-radius-control: var(--hrc-radius-sm);
    }
}

/* source: public/assets/design-themes.css */
/* HRConnect Design System — semantic light/dark themes. */
@layer base {
    body.hrc-design-system-v1 {
        --hrc-color-brand: var(--hrc-brand-600);
        --hrc-color-brand-hover: var(--hrc-brand-700);
        --hrc-color-brand-soft: var(--hrc-brand-50);
        --hrc-color-bg-app: #f3f7fb;
        --hrc-color-surface: var(--hrc-neutral-0);
        --hrc-color-surface-soft: var(--hrc-neutral-50);
        --hrc-color-surface-raised: var(--hrc-neutral-0);
        --hrc-color-text: var(--hrc-neutral-900);
        --hrc-color-text-soft: var(--hrc-neutral-700);
        --hrc-color-text-muted: var(--hrc-neutral-500);
        --hrc-color-border: var(--hrc-neutral-200);
        --hrc-color-border-strong: var(--hrc-neutral-300);
        --hrc-color-focus: var(--hrc-brand-700);
        --hrc-color-success: var(--hrc-success-600);
        --hrc-color-success-soft: var(--hrc-success-50);
        --hrc-color-warning: var(--hrc-warning-600);
        --hrc-color-warning-soft: var(--hrc-warning-50);
        --hrc-color-danger: var(--hrc-danger-600);
        --hrc-color-danger-soft: var(--hrc-danger-50);
        --hrc-color-info: var(--hrc-info-600);
        --hrc-color-info-soft: var(--hrc-info-50);
        --hrc-focus-ring: 0 0 0 var(--hrc-focus-width) color-mix(in srgb, var(--hrc-color-focus) 34%, transparent);
        --hrc-action-primary: var(--hrc-brand-600);
        --hrc-action-primary-hover: color-mix(in srgb, var(--hrc-action-primary) 84%, var(--hrc-color-text));
        --hrc-action-secondary: #6d5ce7;
        --hrc-action-secondary-hover: color-mix(in srgb, var(--hrc-action-secondary) 84%, var(--hrc-color-text));
        --hrc-action-success: var(--hrc-success-600);
        --hrc-action-success-hover: color-mix(in srgb, var(--hrc-action-success) 84%, var(--hrc-color-text));
        --hrc-action-warning: var(--hrc-warning-600);
        --hrc-action-warning-hover: color-mix(in srgb, var(--hrc-action-warning) 84%, var(--hrc-color-text));
        --hrc-action-danger: var(--hrc-danger-600);
        --hrc-action-danger-hover: color-mix(in srgb, var(--hrc-action-danger) 84%, var(--hrc-color-text));
        --hrc-action-info: var(--hrc-info-600);
        --hrc-action-neutral: var(--hrc-neutral-700);
        --hrc-action-on-primary: var(--hrc-static-white);
        --hrc-action-on-secondary: var(--hrc-static-white);
        --hrc-action-on-success: var(--hrc-static-white);
        --hrc-action-on-warning: var(--hrc-static-white);
        --hrc-action-on-danger: var(--hrc-static-white);
        --hrc-action-on-info: var(--hrc-static-white);
        --hrc-action-on-neutral: var(--hrc-static-white);
        --hrc-action-on-solid: var(--hrc-action-on-primary);
        --hrc-action-cta-start: var(--hrc-action-primary);
        --hrc-action-cta-middle: var(--hrc-action-secondary);
        --hrc-action-cta-end: var(--hrc-action-success);
        --hrc-action-cta-start-hover: var(--hrc-action-primary-hover);
        --hrc-action-cta-middle-hover: var(--hrc-action-secondary-hover);
        --hrc-action-cta-end-hover: var(--hrc-action-success-hover);
        --hrc-action-cta-foreground: var(--hrc-static-white);
        --hrc-action-cta-background: linear-gradient(120deg, var(--hrc-action-cta-start), var(--hrc-action-cta-middle) 52%, var(--hrc-action-cta-end));
        --hrc-action-cta-background-hover: linear-gradient(120deg, var(--hrc-action-cta-start-hover), var(--hrc-action-cta-middle-hover) 52%, var(--hrc-action-cta-end-hover));
        --hrc-action-cta-shadow: 0 10px 24px color-mix(in srgb, var(--hrc-action-cta-start) 30%, transparent);
        --hrc-action-cta-shadow-active: 0 5px 14px color-mix(in srgb, var(--hrc-action-cta-start) 24%, transparent);
        --hrc-sidebar-surface:
            linear-gradient(
                160deg,
                color-mix(in srgb, var(--hrc-color-brand-soft) 78%, var(--hrc-color-surface)) 0%,
                var(--hrc-color-surface) 42%,
                color-mix(in srgb, var(--hrc-color-success-soft) 72%, var(--hrc-color-surface)) 100%
            );
        --hrc-sidebar-panel: color-mix(in srgb, var(--hrc-color-surface) 94%, transparent);
        --hrc-sidebar-text: var(--hrc-color-text);
        --hrc-sidebar-text-soft: var(--hrc-color-text-soft);
        --hrc-sidebar-text-muted: var(--hrc-color-text-muted);
        --hrc-sidebar-border: color-mix(in srgb, var(--hrc-color-brand) 18%, var(--hrc-color-border));
        --hrc-chart-1: #2563eb;
        --hrc-chart-2: #7c3aed;
        --hrc-chart-3: #059669;
        --hrc-chart-4: #d97706;
        --hrc-chart-5: #dc2626;
        --hrc-chart-6: #0891b2;
        --hrc-chart-7: #db2777;
        --hrc-chart-8: #4f46e5;
        --hrc-chart-9: #65a30d;
        --hrc-chart-10: #ea580c;
        --hrc-chart-11: #0d9488;
        --hrc-chart-12: #9333ea;

        /* Existing semantic names remain valid during progressive migration. */
        --hrc-canvas: var(--hrc-color-bg-app);
        --hrc-bg: var(--hrc-color-bg-app);
        --hrc-surface: var(--hrc-color-surface);
        --hrc-surface-soft: var(--hrc-color-surface-soft);
        --hrc-surface-raised: var(--hrc-color-surface-raised);
        --hrc-text: var(--hrc-color-text);
        --hrc-text-soft: var(--hrc-color-text-soft);
        --hrc-muted: var(--hrc-color-text-muted);
        --hrc-border: var(--hrc-color-border);
        --hrc-border-strong: var(--hrc-color-border-strong);
        --hrc-primary: var(--hrc-color-brand);
        --hrc-primary-strong: var(--hrc-color-brand-hover);
        --hrc-success: var(--hrc-color-success);
        --hrc-warning: var(--hrc-color-warning);
        --hrc-danger: var(--hrc-color-danger);
        --hrc-info: var(--hrc-color-info);
        --hrc-focus: var(--hrc-color-focus);

        /* Product-facing semantic aliases. Every application surface consumes
           these roles; Light/Dark themes only change the canonical --hrc-* map. */
        --color-text-primary: var(--hrc-color-text);
        --color-text-secondary: var(--hrc-color-text-soft);
        --color-text-muted: var(--hrc-color-text-muted);
        /* Inverse text belongs to always-dark media/overlay surfaces. Keep it
           independent from CTA foregrounds, which can legitimately switch to
           dark ink when a published action palette is sufficiently light. */
        --color-text-inverse: var(--hrc-static-white);
        --color-text-success: var(--hrc-color-success);
        --color-text-warning: var(--hrc-color-warning);
        --color-text-danger: var(--hrc-color-danger);
        --color-text-info: var(--hrc-color-info);
        --color-surface-canvas: var(--hrc-color-bg-app);
        --color-surface-primary: var(--hrc-color-surface);
        --color-surface-secondary: var(--hrc-color-surface-soft);
        --color-surface-raised: var(--hrc-color-surface-raised);
        --color-surface-overlay: color-mix(in srgb, var(--hrc-neutral-950) 62%, transparent);
        --color-surface-success: var(--hrc-color-success-soft);
        --color-surface-warning: var(--hrc-color-warning-soft);
        --color-surface-danger: var(--hrc-color-danger-soft);
        --color-surface-info: var(--hrc-color-info-soft);
        --color-border-default: var(--hrc-color-border);
        --color-border-strong: var(--hrc-color-border-strong);
        --color-border-success: color-mix(in srgb, var(--hrc-color-success) 36%, var(--hrc-color-border));
        --color-border-warning: color-mix(in srgb, var(--hrc-color-warning) 36%, var(--hrc-color-border));
        --color-border-danger: color-mix(in srgb, var(--hrc-color-danger) 36%, var(--hrc-color-border));
        --color-border-info: color-mix(in srgb, var(--hrc-color-info) 36%, var(--hrc-color-border));
        --color-icon-primary: var(--hrc-color-text);
        --color-icon-secondary: var(--hrc-color-text-muted);
        --color-icon-brand: var(--hrc-color-brand-hover);
        --color-icon-success: var(--hrc-color-success);
        --color-icon-warning: var(--hrc-color-warning);
        --color-icon-danger: var(--hrc-color-danger);
        --color-icon-info: var(--hrc-color-info);

        /* Canonical compatibility aliases: legacy ERP consumers inherit the
           published semantic theme instead of owning a parallel palette. */
        --erp152-bg: var(--hrc-color-bg-app);
        --erp152-card: var(--hrc-color-surface);
        --erp152-line: var(--hrc-color-border);
        --erp152-soft-line: var(--hrc-color-border-strong);
        --erp152-text: var(--hrc-color-text);
        --erp152-muted: var(--hrc-color-text-muted);
        --erp152-shadow: var(--hrc-shadow-sm);

        background: var(--hrc-color-bg-app);
        color: var(--hrc-color-text);
        font-family: var(--hrc-font-sans);
    }

    :is(html[data-qm-theme="dark"], html[data-hrc-theme="dark"]) body.hrc-design-system-v1 {
        --hrc-color-brand: #60a5fa;
        --hrc-color-brand-hover: #93c5fd;
        --hrc-color-brand-soft: #172554;
        --hrc-color-bg-app: #09111f;
        --hrc-color-surface: #101b2d;
        --hrc-color-surface-soft: #152238;
        --hrc-color-surface-raised: #18263d;
        --hrc-color-text: #eef4fb;
        --hrc-color-text-soft: #d3deeb;
        --hrc-color-text-muted: #9fb0c5;
        --hrc-color-border: #293a52;
        --hrc-color-border-strong: #3a4d68;
        --hrc-color-focus: #93c5fd;
        --hrc-color-success: #4ade80;
        --hrc-color-success-soft: #103525;
        --hrc-color-warning: #fbbf24;
        --hrc-color-warning-soft: #3b2b0b;
        --hrc-color-danger: #fb7185;
        --hrc-color-danger-soft: #441725;
        --hrc-color-info: #38bdf8;
        --hrc-color-info-soft: #102f47;
        --hrc-action-primary: #60a5fa;
        --hrc-action-primary-hover: #93c5fd;
        --hrc-action-secondary: #a99cfb;
        --hrc-action-secondary-hover: color-mix(in srgb, var(--hrc-action-secondary) 82%, var(--hrc-neutral-0));
        --hrc-action-success: #4ade80;
        --hrc-action-success-hover: color-mix(in srgb, var(--hrc-action-success) 82%, var(--hrc-neutral-0));
        --hrc-action-warning: #fbbf24;
        --hrc-action-danger: #fb7185;
        --hrc-action-info: #38bdf8;
        --hrc-action-neutral: #cbd5e1;
        --hrc-action-on-primary: var(--hrc-neutral-950);
        --hrc-action-on-secondary: var(--hrc-neutral-950);
        --hrc-action-on-success: var(--hrc-neutral-950);
        --hrc-action-on-warning: var(--hrc-neutral-950);
        --hrc-action-on-danger: var(--hrc-neutral-950);
        --hrc-action-on-info: var(--hrc-neutral-950);
        --hrc-action-on-neutral: var(--hrc-neutral-950);
        --hrc-action-on-solid: var(--hrc-action-on-primary);
        --hrc-action-cta-start: var(--hrc-action-primary);
        --hrc-action-cta-middle: var(--hrc-action-secondary);
        --hrc-action-cta-end: var(--hrc-action-success);
        --hrc-action-cta-start-hover: var(--hrc-action-primary-hover);
        --hrc-action-cta-middle-hover: var(--hrc-action-secondary-hover);
        --hrc-action-cta-end-hover: var(--hrc-action-success-hover);
        --hrc-action-cta-foreground: var(--hrc-neutral-950);
        --hrc-chart-1: #60a5fa;
        --hrc-chart-2: #a78bfa;
        --hrc-chart-3: #34d399;
        --hrc-chart-4: #fbbf24;
        --hrc-chart-5: #fb7185;
        --hrc-chart-6: #22d3ee;
        --hrc-chart-7: #f472b6;
        --hrc-chart-8: #818cf8;
        --hrc-chart-9: #a3e635;
        --hrc-chart-10: #fb923c;
        --hrc-chart-11: #2dd4bf;
        --hrc-chart-12: #c084fc;
        --hrc-shadow-xs: 0 2px 8px rgba(0, 0, 0, .16);
        --hrc-shadow-sm: 0 6px 18px rgba(0, 0, 0, .2);
        --hrc-shadow-md: 0 16px 38px rgba(0, 0, 0, .28);
        --hrc-shadow-lg: 0 24px 64px rgba(0, 0, 0, .38);
        color-scheme: dark;
    }

    :is(html[data-hrc-contrast="high"], html[data-hrc-theme="high-contrast"]) body.hrc-design-system-v1 {
        --hrc-color-bg-app: var(--hrc-neutral-0);
        --hrc-color-surface: var(--hrc-neutral-0);
        --hrc-color-surface-soft: var(--hrc-neutral-50);
        --hrc-color-surface-raised: var(--hrc-neutral-0);
        --hrc-color-text: var(--hrc-neutral-950);
        --hrc-color-text-soft: var(--hrc-neutral-900);
        --hrc-color-text-muted: var(--hrc-neutral-700);
        --hrc-color-border: var(--hrc-neutral-900);
        --hrc-color-border-strong: var(--hrc-neutral-950);
        --hrc-color-focus: var(--hrc-brand-700);
        --hrc-border-width: 2px;
        --hrc-focus-width: 3px;
        --hrc-shadow-xs: none;
        --hrc-shadow-sm: none;
        --hrc-shadow-md: none;
        --hrc-shadow-lg: none;
        color-scheme: light;
    }

    @media (prefers-color-scheme: dark) {
        html[data-hrc-theme="system"] body.hrc-design-system-v1 {
            --hrc-color-brand: #60a5fa;
            --hrc-color-brand-hover: #93c5fd;
            --hrc-color-brand-soft: #172554;
            --hrc-color-bg-app: #09111f;
            --hrc-color-surface: #101b2d;
            --hrc-color-surface-soft: #152238;
            --hrc-color-surface-raised: #18263d;
            --hrc-color-text: #eef4fb;
            --hrc-color-text-soft: #d3deeb;
            --hrc-color-text-muted: #9fb0c5;
            --hrc-color-border: #293a52;
            --hrc-color-border-strong: #3a4d68;
            --hrc-color-focus: #93c5fd;
            --hrc-color-success: #4ade80;
            --hrc-color-success-soft: #103525;
            --hrc-color-warning: #fbbf24;
            --hrc-color-warning-soft: #3b2b0b;
            --hrc-color-danger: #fb7185;
            --hrc-color-danger-soft: #441725;
            --hrc-color-info: #38bdf8;
            --hrc-color-info-soft: #102f47;
            --hrc-action-primary: #60a5fa;
            --hrc-action-primary-hover: #93c5fd;
            --hrc-action-secondary: #a99cfb;
            --hrc-action-secondary-hover: color-mix(in srgb, var(--hrc-action-secondary) 82%, var(--hrc-neutral-0));
            --hrc-action-success: #4ade80;
            --hrc-action-success-hover: color-mix(in srgb, var(--hrc-action-success) 82%, var(--hrc-neutral-0));
            --hrc-action-warning: #fbbf24;
            --hrc-action-danger: #fb7185;
            --hrc-action-info: #38bdf8;
            --hrc-action-neutral: #cbd5e1;
            --hrc-action-on-primary: var(--hrc-neutral-950);
            --hrc-action-on-secondary: var(--hrc-neutral-950);
            --hrc-action-on-success: var(--hrc-neutral-950);
            --hrc-action-on-warning: var(--hrc-neutral-950);
            --hrc-action-on-danger: var(--hrc-neutral-950);
            --hrc-action-on-info: var(--hrc-neutral-950);
            --hrc-action-on-neutral: var(--hrc-neutral-950);
            --hrc-action-on-solid: var(--hrc-action-on-primary);
            --hrc-action-cta-start: var(--hrc-action-primary);
            --hrc-action-cta-middle: var(--hrc-action-secondary);
            --hrc-action-cta-end: var(--hrc-action-success);
            --hrc-action-cta-start-hover: var(--hrc-action-primary-hover);
            --hrc-action-cta-middle-hover: var(--hrc-action-secondary-hover);
            --hrc-action-cta-end-hover: var(--hrc-action-success-hover);
            --hrc-action-cta-foreground: var(--hrc-neutral-950);
            color-scheme: dark;
        }
    }

    body.hrc-design-system-v1 :where(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
        outline-offset: var(--hrc-focus-offset);
        box-shadow: var(--hrc-focus-ring);
    }

    @media (forced-colors: active) {
        body.hrc-design-system-v1 :where(a, button, input, select, textarea, [tabindex]):focus-visible,
        body.hrc-design-system-v1 .hrc-switch input:focus-visible + .hrc-switch__track {
            outline: 3px solid Highlight;
            outline-offset: 2px;
            box-shadow: none;
            forced-color-adjust: auto;
        }
    }

    body.hrc-design-system-v1 [hidden] {
        display: none;
    }
}

/* source: public/assets/design-component-tokens.css */
/*
 * HRConnect Design System — component token layer.
 *
 * Contract: primitive tokens define raw values, semantic tokens describe intent,
 * and component tokens below are the only aliases reusable components consume.
 * Component aliases never introduce raw colors, dimensions or motion values.
 */
@layer tokens {
    body.hrc-design-system-v1 {
        --hrc-component-page-max: var(--hrc-page-max);
        --hrc-component-page-gutter: var(--hrc-page-padding-inline);
        --hrc-component-section-gap: var(--hrc-section-gap);

        --hrc-component-surface-bg: var(--hrc-color-surface);
        --hrc-component-surface-bg-soft: var(--hrc-color-surface-soft);
        --hrc-component-surface-fg: var(--hrc-color-text);
        --hrc-component-surface-muted: var(--hrc-color-text-muted);
        --hrc-component-surface-border: var(--hrc-color-border);
        --hrc-component-surface-radius: var(--hrc-radius-md);
        --hrc-component-surface-shadow: var(--hrc-shadow-sm);
        --hrc-component-surface-padding: var(--hrc-card-padding);

        --hrc-component-control-height: var(--hrc-control-height);
        --hrc-component-control-bg: var(--hrc-color-surface);
        --hrc-component-control-fg: var(--hrc-color-text);
        --hrc-component-control-border: var(--hrc-color-border);
        --hrc-component-control-radius: var(--hrc-radius-sm);
        --hrc-component-control-focus: var(--hrc-focus-ring);
        --hrc-component-control-disabled-opacity: var(--hrc-opacity-disabled);

        --hrc-component-button-primary-bg: var(--hrc-action-primary);
        --hrc-component-button-primary-bg-hover: var(--hrc-action-primary-hover);
        --hrc-component-button-primary-fg: var(--hrc-action-on-solid);
        --hrc-component-button-gap: var(--hrc-space-2);
        --hrc-component-button-padding-inline: var(--hrc-space-4);
        --hrc-component-button-radius: var(--hrc-radius-sm);

        --hrc-component-hero-bg: var(--hrc-color-surface);
        --hrc-component-hero-fg: var(--hrc-color-text);
        --hrc-component-hero-muted: var(--hrc-color-text-muted);
        --hrc-component-hero-border: var(--hrc-color-border);
        --hrc-component-hero-radius: var(--hrc-radius-lg);
        --hrc-component-hero-shadow: var(--hrc-shadow-sm);

        --hrc-component-kpi-bg: var(--hrc-color-surface);
        --hrc-component-kpi-fg: var(--hrc-color-text);
        --hrc-component-kpi-muted: var(--hrc-color-text-muted);
        --hrc-component-kpi-border: var(--hrc-color-border);
        --hrc-component-kpi-radius: var(--hrc-radius-md);

        --hrc-component-table-bg: var(--hrc-color-surface);
        --hrc-component-table-header-bg: var(--hrc-color-surface-soft);
        --hrc-component-table-fg: var(--hrc-color-text);
        --hrc-component-table-muted: var(--hrc-color-text-muted);
        --hrc-component-table-border: var(--hrc-color-border);
        --hrc-component-table-row-height: var(--hrc-row-density);

        --hrc-component-overlay-bg: var(--hrc-color-surface);
        --hrc-component-overlay-fg: var(--hrc-color-text);
        --hrc-component-overlay-border: var(--hrc-color-border);
        --hrc-component-overlay-radius: var(--hrc-radius-lg);
        --hrc-component-overlay-shadow: var(--hrc-shadow-lg);
        --hrc-component-overlay-backdrop: var(--color-surface-overlay);

        --hrc-component-badge-neutral-bg: var(--hrc-color-surface-soft);
        --hrc-component-badge-neutral-fg: var(--hrc-color-text-soft);
        --hrc-component-badge-success-bg: var(--hrc-color-success-soft);
        --hrc-component-badge-success-fg: var(--hrc-color-success);
        --hrc-component-badge-warning-bg: var(--hrc-color-warning-soft);
        --hrc-component-badge-warning-fg: var(--hrc-color-warning);
        --hrc-component-badge-danger-bg: var(--hrc-color-danger-soft);
        --hrc-component-badge-danger-fg: var(--hrc-color-danger);

        --hrc-component-motion-enter: var(--hrc-motion-normal);
        --hrc-component-motion-exit: var(--hrc-motion-fast);
        --hrc-component-motion-ease: var(--hrc-ease-standard);
        --hrc-component-focus-ring: var(--hrc-focus-ring);
        --hrc-component-focus-offset: var(--hrc-focus-offset);
    }
}

/* source: public/assets/design-components.css */
/* HRConnect Design System — reusable, opt-in components. */
@layer components {
    body.hrc-design-system-v1 .hrc-layout-page {
        display: grid;
        gap: var(--hrc-space-5);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-grid {
        display: grid;
        gap: var(--hrc-grid-gap);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-layout-container {
        width: min(100%, var(--hrc-container-xl));
        min-width: 0;
        margin-inline: auto;
        padding-inline: clamp(var(--hrc-space-4), 2vw, var(--hrc-space-8));
    }

    body.hrc-design-system-v1 :where(.hrc-surface, .hrc-card) {
        min-width: 0;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
        color: var(--hrc-color-text);
        box-shadow: var(--hrc-shadow-sm);
    }

    body.hrc-design-system-v1 .hrc-surface__header,
    body.hrc-design-system-v1 .hrc-surface__footer {
        padding: var(--hrc-space-4) var(--hrc-space-5);
    }

    body.hrc-design-system-v1 .hrc-surface__header {
        border-bottom: var(--hrc-border-width) solid var(--hrc-color-border);
    }

    body.hrc-design-system-v1 .hrc-surface__header[data-layout="split"] {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--hrc-space-3) var(--hrc-space-4);
    }

    body.hrc-design-system-v1 .hrc-surface__header[data-layout="split"] > :first-child {
        flex: 1 1 16rem;
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-surface__header[data-layout="split"] > :where(.hrc-badge, .hrc-tag, .hrc-status) {
        flex: 0 0 auto;
    }

    body.hrc-design-system-v1 .hrc-surface__header :where(h2, h3) {
        margin: 0;
        color: var(--hrc-color-text);
        font-size: var(--hrc-text-lg);
        line-height: var(--hrc-leading-tight);
    }

    body.hrc-design-system-v1 .hrc-empty {
        display: grid;
        place-items: center;
        gap: var(--hrc-space-2);
        min-height: 148px;
        padding: var(--hrc-space-6);
        color: var(--hrc-color-text-muted);
        text-align: center;
    }

    body.hrc-design-system-v1 .hrc-empty :where(h2, h3, p) {
        max-width: 620px;
        margin: 0;
    }

    body.hrc-design-system-v1 .hrc-empty :where(h2, h3) {
        color: var(--hrc-color-text);
        font-size: var(--hrc-text-lg);
    }

    body.hrc-design-system-v1 .hrc-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--hrc-space-6);
        min-height: 132px;
        padding: var(--hrc-space-6) var(--hrc-space-8);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-lg);
        background: var(--hrc-color-surface);
        background:
            linear-gradient(135deg, color-mix(in srgb, var(--hrc-color-brand) 10%, transparent), color-mix(in srgb, var(--hrc-attendance-overtime) 8%, transparent)),
            var(--hrc-color-surface);
        box-shadow: var(--hrc-shadow-sm);
    }

    body.hrc-design-system-v1 .hrc-hero__eyebrow {
        display: block;
        margin-bottom: var(--hrc-space-2);
        color: var(--hrc-color-brand);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-bold);
        letter-spacing: var(--hrc-tracking-eyebrow);
        text-transform: uppercase;
    }

    body.hrc-design-system-v1 .hrc-hero :where(h1, h2) {
        margin: 0 0 var(--hrc-space-2);
        color: var(--hrc-color-text);
        font-size: clamp(1.625rem, 2.25vw, 2rem);
        line-height: var(--hrc-leading-tight);
        letter-spacing: -.025em;
    }

    body.hrc-design-system-v1 .hrc-hero p {
        max-width: 840px;
        margin: 0;
        color: var(--hrc-color-text-muted);
        line-height: var(--hrc-leading-relaxed);
    }

    body.hrc-design-system-v1 .hrc-hero__actions,
    body.hrc-design-system-v1 .hrc-quick-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .hrc-breadcrumb {
        display: flex;
        align-items: center;
        gap: var(--hrc-space-2);
        min-height: 28px;
        margin: 0;
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
        line-height: var(--hrc-leading-normal);
    }

    body.hrc-design-system-v1 .hrc-breadcrumb :where(a, strong) {
        min-width: 0;
        overflow: hidden;
        color: var(--hrc-color-text-soft);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.hrc-design-system-v1 .hrc-tabs {
        display: flex;
        gap: var(--hrc-space-1);
        min-width: 0;
        overflow-x: auto;
        padding: var(--hrc-space-1);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
        scrollbar-width: thin;
    }

    body.hrc-design-system-v1 .hrc-tab {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: var(--hrc-space-2);
        min-height: max(var(--hrc-control-height), var(--hrc-touch-target));
        padding: var(--hrc-space-2) var(--hrc-space-4);
        border: 0;
        border-radius: var(--hrc-radius-sm);
        background: transparent;
        color: var(--hrc-color-text-muted);
        font: inherit;
        font-weight: var(--hrc-weight-semibold);
        text-decoration: none;
        transition: color var(--hrc-motion-fast) var(--hrc-ease-standard), background var(--hrc-motion-fast) var(--hrc-ease-standard);
    }

    body.hrc-design-system-v1 .hrc-tab:hover {
        background: var(--hrc-color-surface-soft);
        color: var(--hrc-color-text);
    }

    body.hrc-design-system-v1 .hrc-tab:is([aria-current="page"], [aria-selected="true"], [data-state="active"]) {
        background: var(--hrc-color-brand-soft);
        color: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 .hrc-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--hrc-space-3);
        min-width: 0;
        padding: var(--hrc-space-3);
        border: var(--hrc-border-width) solid var(--color-border-default);
        border-radius: var(--hrc-radius-md);
        background: var(--color-surface-primary);
        color: var(--color-text-primary);
        box-shadow: var(--hrc-shadow-xs);
    }

    body.hrc-design-system-v1 .hrc-search {
        position: relative;
        flex: 1 1 var(--hrc-foldable-pane-min);
        min-width: min(100%, var(--hrc-foldable-pane-min));
    }

    body.hrc-design-system-v1 .hrc-search :is(input, .hrc-input) {
        width: 100%;
        min-height: var(--hrc-touch-target);
        border-color: var(--color-border-strong);
        background: var(--color-surface-primary);
        color: var(--color-text-primary);
    }

    body.hrc-design-system-v1 .hrc-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--hrc-grid-gap);
    }

    body.hrc-design-system-v1 .hrc-kpi {
        --hrc-kpi-accent: var(--hrc-color-brand);
        --hrc-kpi-icon: var(--color-icon-brand);
        position: relative;
        overflow: hidden;
        display: grid;
        gap: var(--hrc-space-2);
        min-width: 0;
        padding: var(--hrc-space-5);
        border: var(--hrc-border-width) solid var(--color-border-default);
        border-radius: var(--hrc-radius-md);
        background: var(--color-surface-primary);
        box-shadow: var(--hrc-shadow-xs);
        transition:
            border-color var(--hrc-motion-normal) var(--hrc-ease-standard),
            box-shadow var(--hrc-motion-normal) var(--hrc-ease-standard),
            transform var(--hrc-motion-normal) var(--hrc-ease-standard);
    }

    body.hrc-design-system-v1 .hrc-kpi::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: var(--hrc-border-width);
        background: linear-gradient(90deg, var(--hrc-kpi-accent), transparent);
    }

    body.hrc-design-system-v1 .hrc-kpi[data-state="info"] {
        --hrc-kpi-accent: var(--hrc-color-info);
    }

    body.hrc-design-system-v1 .hrc-kpi[data-state="success"] {
        --hrc-kpi-accent: var(--hrc-color-success);
    }

    body.hrc-design-system-v1 .hrc-kpi[data-state="warning"] {
        --hrc-kpi-accent: var(--hrc-color-warning);
    }

    body.hrc-design-system-v1 .hrc-kpi[data-state="danger"] {
        --hrc-kpi-accent: var(--hrc-color-danger);
    }

    body.hrc-design-system-v1 .hrc-kpi[data-state="secondary"] {
        --hrc-kpi-accent: var(--hrc-action-secondary);
        --hrc-kpi-icon: var(--color-icon-brand);
    }

    body.hrc-design-system-v1 .hrc-kpi__icon {
        width: var(--hrc-control-height-sm);
        height: var(--hrc-control-height-sm);
        display: inline-grid;
        place-items: center;
        border-radius: var(--hrc-radius-sm);
        background: color-mix(in srgb, var(--hrc-kpi-accent) 12%, var(--color-surface-primary));
        color: var(--hrc-kpi-icon);
        font-size: var(--hrc-icon-sm);
    }

    @media (hover: hover) {
        body.hrc-design-system-v1 .hrc-kpi:hover {
            border-color: color-mix(in srgb, var(--hrc-kpi-accent) 42%, var(--color-border-default));
            box-shadow: var(--hrc-shadow-sm);
            transform: translateY(calc(var(--hrc-space-1) * -1));
        }
    }

    body.hrc-design-system-v1 .hrc-kpi__label {
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-sm);
        font-weight: var(--hrc-weight-medium);
    }

    body.hrc-design-system-v1 .hrc-kpi__value {
        overflow-wrap: anywhere;
        color: var(--hrc-color-text);
        font-family: var(--hrc-font-number);
        font-size: clamp(1.5rem, 2vw, 2rem);
        font-variant-numeric: tabular-nums;
        font-weight: var(--hrc-weight-bold);
        line-height: var(--hrc-leading-tight);
    }

    /*
     * KPI values are content, not fixed-width controls. Keep the native
     * contract resilient when a compatibility stylesheet gives <strong>
     * max-content sizing or single-line ellipsis.
     */
    body.hrc-design-system-v1 .hrc-kpi :where(strong, .hrc-kpi__value) {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
    }

    body.hrc-design-system-v1 .hrc-kpi__meta {
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
    }

    body.hrc-design-system-v1 .hrc-filter-panel,
    body.hrc-design-system-v1 .hrc-form-section {
        display: grid;
        gap: var(--hrc-space-4);
        min-width: 0;
        padding: var(--hrc-space-5);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
    }

    body.hrc-design-system-v1 .hrc-filter-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--hrc-space-3);
        align-items: end;
    }

    body.hrc-design-system-v1 .hrc-filter-chips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .hrc-date-input {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) max(var(--hrc-control-height), var(--hrc-touch-target));
        width: 100%;
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-date-input .hrc-date-display {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        padding-inline-end: calc(max(var(--hrc-control-height), var(--hrc-touch-target)) + var(--hrc-space-2));
    }

    body.hrc-design-system-v1 .hrc-date-input__trigger {
        z-index: 1;
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
        width: max(var(--hrc-control-height), var(--hrc-touch-target));
        min-width: max(var(--hrc-control-height), var(--hrc-touch-target));
        min-height: max(var(--hrc-control-height), var(--hrc-touch-target));
        color: var(--hrc-color-text-muted);
        border: 0;
        border-inline-start: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: 0 var(--hrc-control-radius) var(--hrc-control-radius) 0;
        background: transparent;
    }

    body.hrc-design-system-v1 .hrc-date-input__trigger:hover,
    body.hrc-design-system-v1 .hrc-date-input__trigger:focus-visible {
        color: var(--hrc-color-primary);
        background: var(--hrc-color-surface-subtle);
    }

    body.hrc-design-system-v1 .hrc-date-native-source {
        position: absolute;
        inset: auto 0 0 auto;
        width: 1px;
        height: 1px;
        padding: 0;
        opacity: 0;
        pointer-events: none;
    }

    body.hrc-design-system-v1 .hrc-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--hrc-space-1);
        min-height: 30px;
        padding: var(--hrc-space-1) var(--hrc-space-3);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-pill);
        background: var(--hrc-color-surface-soft);
        color: var(--hrc-color-text-soft);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-semibold);
    }

    body.hrc-design-system-v1 .hrc-btn,
    body.hrc-design-system-v1 .hrc-icon-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--hrc-space-2);
        min-height: max(var(--hrc-control-height), var(--hrc-touch-target));
        padding: var(--hrc-space-2) var(--hrc-space-4);
        border: var(--hrc-border-width) solid transparent;
        border-radius: var(--hrc-radius-sm);
        background: var(--hrc-color-brand);
        color: var(--hrc-action-on-primary);
        font: inherit;
        font-size: var(--hrc-text-md);
        font-weight: var(--hrc-weight-semibold);
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        transition: background var(--hrc-motion-fast) var(--hrc-ease-standard), border-color var(--hrc-motion-fast) var(--hrc-ease-standard), box-shadow var(--hrc-motion-fast) var(--hrc-ease-standard), translate var(--hrc-motion-fast) var(--hrc-ease-standard);
    }

    body.hrc-design-system-v1 .hrc-btn:hover,
    body.hrc-design-system-v1 .hrc-icon-btn:hover {
        background: var(--hrc-color-brand-hover);
        color: var(--hrc-action-on-solid);
    }

    body.hrc-design-system-v1 .hrc-btn:active,
    body.hrc-design-system-v1 .hrc-icon-btn:active {
        translate: 0 1px;
    }

    body.hrc-design-system-v1 .hrc-btn--secondary {
        border-color: var(--hrc-color-border);
        background: var(--hrc-color-surface);
        color: var(--hrc-color-text);
    }

    body.hrc-design-system-v1 .hrc-btn--secondary:hover {
        border-color: var(--hrc-color-brand);
        background: var(--hrc-color-brand-soft);
        color: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 .hrc-btn--danger {
        background: var(--hrc-color-danger);
        color: var(--hrc-action-on-danger);
    }

    body.hrc-design-system-v1 .hrc-btn--primary-cta {
        --hrc-button-loading-color: var(--hrc-action-cta-foreground);
        min-height: var(--hrc-touch-target);
        padding-inline: var(--hrc-space-4);
        border-color: transparent;
        border-radius: var(--hrc-radius-control);
        background: var(--hrc-action-cta-background);
        color: var(--hrc-action-cta-foreground);
        font-weight: var(--hrc-weight-semibold);
        box-shadow: var(--hrc-action-cta-shadow);
        transition:
            background var(--hrc-motion-normal) var(--hrc-ease-standard),
            box-shadow var(--hrc-motion-normal) var(--hrc-ease-standard),
            transform var(--hrc-motion-normal) var(--hrc-ease-standard);
    }

    body.hrc-design-system-v1 .hrc-btn--primary-cta :where(i, svg) {
        color: currentColor;
        fill: currentColor;
        stroke: currentColor;
    }

    body.hrc-design-system-v1 .hrc-btn--primary-cta:is(:hover, [data-demo-state="hover"]) {
        border-color: transparent;
        background: var(--hrc-action-cta-background-hover);
        color: var(--hrc-action-cta-foreground);
        box-shadow: var(--hrc-shadow-md);
        transform: translateY(-1px);
    }

    body.hrc-design-system-v1 .hrc-btn--primary-cta:is(:active, [data-demo-state="active"]) {
        background: var(--hrc-action-cta-background-hover);
        color: var(--hrc-action-cta-foreground);
        box-shadow: var(--hrc-action-cta-shadow-active);
        transform: translateY(1px);
    }

    body.hrc-design-system-v1 .hrc-btn--primary-cta:focus-visible {
        outline-color: var(--hrc-action-cta-start);
        box-shadow: var(--hrc-focus-ring), var(--hrc-action-cta-shadow);
    }

    body.hrc-design-system-v1 .hrc-btn--primary-cta:is(:disabled, [aria-disabled="true"], [data-state="disabled"]) {
        background: var(--hrc-action-cta-background);
        color: var(--hrc-action-cta-foreground);
        opacity: 1;
        box-shadow: none;
        transform: none;
    }

    body.hrc-design-system-v1 .hrc-icon-btn {
        width: max(var(--hrc-control-height), var(--hrc-touch-target));
        min-width: var(--hrc-touch-target);
        padding: 0;
    }

    body.hrc-design-system-v1 :where(.hrc-btn, .hrc-icon-btn):is(:disabled, [aria-disabled="true"], [data-state="disabled"]) {
        opacity: var(--hrc-opacity-disabled);
        cursor: not-allowed;
        pointer-events: none;
    }

    body.hrc-design-system-v1 :where(.hrc-btn, .hrc-icon-btn):is([data-state="loading"], [aria-busy="true"]) {
        color: transparent;
        cursor: progress;
        pointer-events: none;
    }

    body.hrc-design-system-v1 :where(.hrc-btn, .hrc-icon-btn):is([data-state="loading"], [aria-busy="true"])::after {
        position: absolute;
        width: 1rem;
        height: 1rem;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        color: var(--hrc-button-loading-color, var(--hrc-action-on-solid));
        content: "";
        animation: hrc-spin .8s linear infinite;
    }

    body.hrc-design-system-v1 .hrc-field {
        display: grid;
        gap: var(--hrc-space-2);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-field__label {
        color: var(--hrc-color-text-soft);
        font-size: var(--hrc-text-sm);
        font-weight: var(--hrc-weight-semibold);
    }

    body.hrc-design-system-v1 :where(.hrc-input, .hrc-select, .hrc-textarea) {
        width: 100%;
        min-width: 0;
        min-height: max(var(--hrc-control-height), var(--hrc-touch-target));
        padding: .625rem .75rem;
        border: var(--hrc-border-width) solid var(--hrc-color-border-strong);
        border-radius: var(--hrc-radius-sm);
        background: var(--hrc-color-surface);
        color: var(--hrc-color-text);
        font: inherit;
        transition: border-color var(--hrc-motion-fast) var(--hrc-ease-standard), box-shadow var(--hrc-motion-fast) var(--hrc-ease-standard);
    }

    body.hrc-design-system-v1 .hrc-textarea {
        min-height: 112px;
        resize: vertical;
    }

    body.hrc-design-system-v1 :where(.hrc-input, .hrc-select, .hrc-textarea):focus {
        border-color: var(--hrc-color-brand);
        box-shadow: var(--hrc-focus-ring);
    }

    body.hrc-design-system-v1 :where(.hrc-input, .hrc-select, .hrc-textarea):focus-visible {
        outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
        outline-offset: var(--hrc-focus-offset);
    }

    body.hrc-design-system-v1 :where(.hrc-input, .hrc-select, .hrc-textarea):is(:disabled, [readonly]) {
        background: var(--hrc-color-surface-soft);
        opacity: var(--hrc-opacity-disabled);
        cursor: not-allowed;
    }

    body.hrc-design-system-v1 .hrc-field[data-state="error"] :where(.hrc-input, .hrc-select, .hrc-textarea) {
        border-color: var(--hrc-color-danger);
    }

    body.hrc-design-system-v1 .hrc-field[data-state="success"] :where(.hrc-input, .hrc-select, .hrc-textarea) {
        border-color: var(--hrc-color-success);
    }

    body.hrc-design-system-v1 .hrc-field__message {
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
    }

    body.hrc-design-system-v1 .hrc-field[data-state="error"] .hrc-field__message {
        color: var(--hrc-color-danger);
    }

    body.hrc-design-system-v1 .hrc-check {
        display: inline-flex;
        align-items: flex-start;
        gap: var(--hrc-space-2);
        min-height: var(--hrc-touch-target);
        color: var(--hrc-color-text-soft);
        cursor: pointer;
    }

    body.hrc-design-system-v1 .hrc-check input {
        width: 1.125rem;
        height: 1.125rem;
        margin-top: .1rem;
        accent-color: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 .hrc-switch {
        position: relative;
        display: inline-grid;
        grid-template-columns: var(--hrc-touch-target) minmax(0, 1fr);
        align-items: center;
        gap: var(--hrc-space-2);
        min-height: var(--hrc-touch-target);
        cursor: pointer;
    }

    body.hrc-design-system-v1 .hrc-switch input {
        position: absolute;
        inset: 0 auto auto 0;
        width: var(--hrc-touch-target);
        height: var(--hrc-touch-target);
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }

    body.hrc-design-system-v1 .hrc-switch__track {
        position: relative;
        width: 42px;
        height: 24px;
        border: var(--hrc-border-width) solid var(--hrc-color-border-strong);
        border-radius: var(--hrc-radius-pill);
        background: var(--hrc-color-surface-soft);
        transition: background var(--hrc-motion-fast) var(--hrc-ease-standard);
    }

    body.hrc-design-system-v1 .hrc-switch__track::after {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--hrc-color-text-muted);
        content: "";
        transition: translate var(--hrc-motion-fast) var(--hrc-ease-standard), background var(--hrc-motion-fast) var(--hrc-ease-standard);
    }

    body.hrc-design-system-v1 .hrc-switch input:checked + .hrc-switch__track {
        background: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 .hrc-switch input:focus-visible + .hrc-switch__track {
        outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
        outline-offset: var(--hrc-focus-offset);
    }

    body.hrc-design-system-v1 .hrc-switch input:checked + .hrc-switch__track::after {
        background: var(--hrc-static-white);
        translate: 18px 0;
    }

    body.hrc-design-system-v1 .hrc-badge,
    body.hrc-design-system-v1 .hrc-tag,
    body.hrc-design-system-v1 .hrc-status {
        display: inline-flex;
        align-items: center;
        gap: var(--hrc-space-1);
        max-width: 100%;
        min-height: 26px;
        padding: .2rem .625rem;
        border-radius: var(--hrc-radius-pill);
        background: var(--hrc-color-info-soft);
        color: var(--hrc-color-info);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-semibold);
        line-height: 1.25;
    }

    body.hrc-design-system-v1 :where(.hrc-badge, .hrc-tag, .hrc-status)[data-state="success"] {
        background: var(--hrc-color-success-soft);
        color: var(--hrc-color-success);
    }

    body.hrc-design-system-v1 :where(.hrc-badge, .hrc-tag, .hrc-status)[data-state="warning"] {
        background: var(--hrc-color-warning-soft);
        color: var(--hrc-color-warning);
    }

    body.hrc-design-system-v1 :where(.hrc-badge, .hrc-tag, .hrc-status)[data-state="error"] {
        background: var(--hrc-color-danger-soft);
        color: var(--hrc-color-danger);
    }

    body.hrc-design-system-v1 .hrc-table-scroll {
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    body.hrc-design-system-v1 .hrc-table {
        width: 100%;
        min-width: 680px;
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
        color: var(--hrc-color-text);
        font-size: var(--hrc-text-sm);
    }

    body.hrc-design-system-v1 .hrc-table :where(th, td) {
        padding: .75rem 1rem;
        border: 0;
        border-bottom: var(--hrc-border-width) solid var(--hrc-color-border);
        background: var(--hrc-color-surface);
        text-align: left;
        vertical-align: middle;
    }

    body.hrc-design-system-v1 .hrc-table thead th {
        position: sticky;
        top: 0;
        z-index: var(--hrc-z-sticky);
        background: var(--hrc-color-surface-soft);
        color: var(--hrc-color-text-soft);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-bold);
        letter-spacing: .025em;
    }

    body.hrc-design-system-v1 .hrc-table tbody tr:nth-child(even) td {
        background: var(--hrc-color-surface-soft);
        background: color-mix(in srgb, var(--hrc-color-surface-soft) 55%, var(--hrc-color-surface));
    }

    body.hrc-design-system-v1 .hrc-table tbody tr:hover td {
        background: var(--hrc-color-brand-soft);
    }

    body.hrc-design-system-v1 .hrc-table :where([data-type="number"], [data-type="percentage"], [data-type="currency"]) {
        font-variant-numeric: tabular-nums;
        text-align: right;
        white-space: nowrap;
    }

    body.hrc-design-system-v1 .hrc-table [data-sticky="end"] {
        position: sticky;
        right: 0;
        z-index: calc(var(--hrc-z-sticky) + 1);
        background: var(--hrc-color-surface);
        box-shadow: var(--hrc-shadow-sm);
    }

    body.hrc-design-system-v1 .hrc-pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1 .hrc-pagination__pages {
        display: flex;
        flex-wrap: wrap;
        gap: var(--hrc-space-1);
    }

    body.hrc-design-system-v1 .hrc-pagination a {
        display: inline-grid;
        min-width: var(--hrc-control-height-sm);
        min-height: var(--hrc-control-height-sm);
        place-items: center;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-sm);
        color: var(--hrc-color-text-soft);
        text-decoration: none;
    }

    body.hrc-design-system-v1 .hrc-pagination a:is(:hover, [aria-current="page"]) {
        border-color: var(--hrc-color-brand);
        background: var(--hrc-color-brand-soft);
        color: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 .hrc-form-section__header,
    body.hrc-design-system-v1 .hrc-dialog__header,
    body.hrc-design-system-v1 .hrc-dialog__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1 .hrc-form-section__header :where(h2, h3),
    body.hrc-design-system-v1 .hrc-dialog__header :where(h2, h3) {
        margin: 0;
        color: var(--hrc-color-text);
        font-size: var(--hrc-text-xl);
    }

    body.hrc-design-system-v1 .hrc-form-footer {
        position: sticky;
        bottom: 0;
        z-index: var(--hrc-z-sticky);
        display: flex;
        justify-content: flex-end;
        gap: var(--hrc-space-2);
        padding: var(--hrc-space-4);
        border-top: var(--hrc-border-width) solid var(--hrc-color-border);
        background: var(--hrc-color-surface);
        background: color-mix(in srgb, var(--hrc-color-surface) 94%, transparent);
        backdrop-filter: blur(12px);
    }

    body.hrc-design-system-v1 .hrc-dialog,
    body.hrc-design-system-v1 .hrc-drawer {
        max-width: min(720px, calc(100vw - 2rem));
        max-height: min(86vh, 900px);
        padding: 0;
        overflow: hidden;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-lg);
        background: var(--hrc-color-surface);
        color: var(--hrc-color-text);
        box-shadow: var(--hrc-shadow-lg);
    }

    body.hrc-design-system-v1 .hrc-dialog::backdrop {
        background: var(--color-surface-overlay);
        backdrop-filter: blur(var(--hrc-blur-sm));
    }

    body.hrc-design-system-v1 .hrc-dialog__header,
    body.hrc-design-system-v1 .hrc-dialog__footer {
        padding: var(--hrc-space-4) var(--hrc-space-5);
        background: var(--hrc-color-surface);
    }

    body.hrc-design-system-v1 .hrc-dialog__header {
        border-bottom: var(--hrc-border-width) solid var(--hrc-color-border);
    }

    body.hrc-design-system-v1 .hrc-dialog__body {
        max-height: calc(86vh - 140px);
        overflow: auto;
        padding: var(--hrc-space-5);
        overscroll-behavior: contain;
    }

    body.hrc-design-system-v1 .hrc-dialog__footer {
        justify-content: flex-end;
        border-top: var(--hrc-border-width) solid var(--hrc-color-border);
    }

    body.hrc-design-system-v1 .hrc-dialog.hrc-dialog--sheet {
        position: fixed;
        inset: auto 0 0;
        width: 100%;
        max-width: 100%;
        max-height: min(80dvh, var(--hrc-sheet-block-size));
        margin: auto 0 0;
        border-radius: var(--hrc-radius-lg) var(--hrc-radius-lg) 0 0;
    }

    body.hrc-design-system-v1 .hrc-dialog.hrc-dialog--sheet .hrc-dialog__body {
        max-height: calc(min(80dvh, var(--hrc-sheet-block-size)) - 9rem);
    }

    body.hrc-design-system-v1 .hrc-dialog.hrc-dialog--sheet .hrc-dialog__footer {
        padding-bottom: calc(var(--hrc-space-4) + env(safe-area-inset-bottom, 0px));
    }

    body.hrc-design-system-v1 .hrc-dropdown,
    body.hrc-design-system-v1 .hrc-popover,
    body.hrc-design-system-v1 .hrc-combobox__list {
        z-index: var(--hrc-z-dropdown);
        min-width: 220px;
        max-width: min(420px, calc(100vw - 2rem));
        max-height: min(360px, calc(100vh - 2rem));
        overflow: auto;
        padding: var(--hrc-space-2);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface-raised);
        color: var(--hrc-color-text);
        box-shadow: var(--hrc-shadow-md);
        overflow-wrap: break-word;
        word-break: normal;
    }

    body.hrc-design-system-v1 .hrc-tooltip {
        z-index: var(--hrc-z-tooltip);
        max-width: 280px;
        padding: var(--hrc-space-2) var(--hrc-space-3);
        border-radius: var(--hrc-radius-sm);
        background: var(--hrc-neutral-950);
        color: var(--hrc-static-white);
        font-size: var(--hrc-text-xs);
        box-shadow: var(--hrc-shadow-md);
    }

    body.hrc-design-system-v1 .hrc-toast-region {
        position: fixed;
        right: var(--hrc-space-4);
        bottom: var(--hrc-space-4);
        z-index: var(--hrc-z-toast);
        display: grid;
        gap: var(--hrc-space-2);
        width: min(420px, calc(100vw - 2rem));
        pointer-events: none;
    }

    body.hrc-design-system-v1 .hrc-toast {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
        gap: var(--hrc-space-3);
        padding: var(--hrc-space-4);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-left: 4px solid var(--hrc-color-info);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface-raised);
        color: var(--hrc-color-text);
        box-shadow: var(--hrc-shadow-lg);
        pointer-events: auto;
    }

    body.hrc-design-system-v1 .hrc-toast[data-state="success"] {
        border-left-color: var(--hrc-color-success);
    }

    body.hrc-design-system-v1 .hrc-toast[data-state="error"] {
        border-left-color: var(--hrc-color-danger);
    }

    body.hrc-design-system-v1 .hrc-state {
        display: grid;
        justify-items: center;
        gap: var(--hrc-space-3);
        min-height: 180px;
        padding: var(--hrc-space-8);
        border: var(--hrc-border-width) dashed var(--hrc-color-border-strong);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface-soft);
        color: var(--hrc-color-text-muted);
        text-align: center;
    }

    body.hrc-design-system-v1 .hrc-state strong {
        color: var(--hrc-color-text);
        font-size: var(--hrc-text-lg);
    }

    body.hrc-design-system-v1 .hrc-state[data-state="error"] {
        border-color: var(--hrc-color-danger);
        background: var(--hrc-color-danger-soft);
        color: var(--hrc-color-danger);
    }

    body.hrc-design-system-v1 .hrc-state[data-state="success"] {
        border-color: var(--hrc-color-success);
        background: var(--hrc-color-success-soft);
        color: var(--hrc-color-success);
    }

    body.hrc-design-system-v1 .hrc-skeleton {
        min-height: 1rem;
        border-radius: var(--hrc-radius-xs);
        background: linear-gradient(90deg, var(--hrc-color-surface-soft), var(--hrc-color-border), var(--hrc-color-surface-soft));
        background-size: 200% 100%;
        animation: hrc-skeleton 1.4s ease-in-out infinite;
    }

    body.hrc-design-system-v1 .hrc-upload {
        display: grid;
        justify-items: center;
        gap: var(--hrc-space-3);
        min-height: 150px;
        padding: var(--hrc-space-6);
        border: 2px dashed var(--hrc-color-border-strong);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface-soft);
        color: var(--hrc-color-text-muted);
        text-align: center;
    }

    body.hrc-design-system-v1 .hrc-upload:is(:hover, [data-state="active"]) {
        border-color: var(--hrc-color-brand);
        background: var(--hrc-color-brand-soft);
        color: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 .hrc-image-preview {
        display: block;
        width: min(100%, 320px);
        aspect-ratio: 16 / 10;
        overflow: hidden;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface-soft);
        object-fit: cover;
    }

    body.hrc-design-system-v1 .hrc-media-capture {
        position: relative;
        display: grid;
        min-width: 0;
        overflow: hidden;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-lg);
        background: var(--hrc-neutral-950);
        color: var(--hrc-static-white);
    }

    body.hrc-design-system-v1 .hrc-media-capture__stage {
        position: relative;
        width: 100%;
        aspect-ratio: var(--hrc-media-capture-ratio);
        overflow: hidden;
    }

    body.hrc-design-system-v1 .hrc-media-capture__stage :where(video, img, canvas),
    body.hrc-design-system-v1 .hrc-media-capture__preview {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    body.hrc-design-system-v1 .hrc-media-capture__empty,
    body.hrc-design-system-v1 .hrc-media-capture__status {
        position: absolute;
        inset: auto var(--hrc-space-3) var(--hrc-space-3);
        z-index: 2;
        padding: var(--hrc-space-2) var(--hrc-space-3);
        border-radius: var(--hrc-radius-pill);
        background: color-mix(in srgb, var(--hrc-neutral-950) 78%, transparent);
        color: var(--hrc-static-white);
        font-size: var(--hrc-text-sm);
    }

    body.hrc-design-system-v1 .hrc-media-capture__empty {
        inset: 0;
        display: grid;
        place-items: center;
        border-radius: 0;
        text-align: center;
    }

    body.hrc-design-system-v1 .hrc-media-capture__guide {
        position: absolute;
        inset: 12% 20%;
        z-index: 1;
        border: 2px solid color-mix(in srgb, var(--hrc-static-white) 78%, transparent);
        border-radius: 48% 48% 42% 42%;
        pointer-events: none;
    }

    body.hrc-design-system-v1 .hrc-map,
    body.hrc-design-system-v1 [data-hrc-component="map"] {
        position: relative;
        width: 100%;
        min-width: 0;
        min-height: var(--hrc-map-block-size);
        overflow: hidden;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-lg);
        background: var(--hrc-color-surface-soft);
    }

    body.hrc-design-system-v1 .hrc-map > :where(canvas, iframe, .leaflet-container),
    body.hrc-design-system-v1 [data-hrc-component="map"] > :where(canvas, iframe, .leaflet-container) {
        width: 100%;
        height: 100%;
        min-height: inherit;
        border: 0;
    }

    body.hrc-design-system-v1 .hrc-action-dock {
        position: sticky;
        bottom: 0;
        z-index: var(--hrc-z-sticky);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--hrc-space-2);
        padding: var(--hrc-space-3);
        padding-bottom: calc(var(--hrc-space-3) + env(safe-area-inset-bottom, 0px));
        border-top: var(--hrc-border-width) solid var(--hrc-color-border);
        background: color-mix(in srgb, var(--hrc-color-surface) 94%, transparent);
        backdrop-filter: blur(var(--hrc-blur-md));
    }

    body.hrc-design-system-v1 .hrc-action-dock__primary,
    body.hrc-design-system-v1 .hrc-action-dock__utilities {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .hrc-action-dock__primary > :first-child {
        flex: 1 1 auto;
    }

    body.hrc-design-system-v1 .hrc-detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hrc-layout-detail-min)), 1fr));
        gap: var(--hrc-space-3);
        margin: 0;
        padding: var(--hrc-space-5);
    }

    body.hrc-design-system-v1 .hrc-detail-grid > div {
        display: grid;
        gap: var(--hrc-space-1);
        min-width: 0;
        padding: var(--hrc-space-4);
        border: var(--hrc-border-width) solid var(--color-border-default);
        border-radius: var(--hrc-radius-sm);
        background: var(--color-surface-secondary);
    }

    body.hrc-design-system-v1 .hrc-detail-grid dt {
        color: var(--color-text-muted);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-semibold);
    }

    body.hrc-design-system-v1 .hrc-detail-grid dd {
        min-width: 0;
        margin: 0;
        overflow-wrap: anywhere;
        color: var(--color-text-primary);
        font-weight: var(--hrc-weight-semibold);
    }

    body.hrc-design-system-v1 .hrc-document-viewer {
        overflow: hidden;
    }

    body.hrc-design-system-v1 .hrc-document-viewer__paper {
        width: min(100%, var(--hrc-container-md));
        min-width: 0;
        margin: var(--hrc-space-5) auto;
        padding: clamp(var(--hrc-space-4), 4vw, var(--hrc-space-10));
        overflow-x: auto;
        border: var(--hrc-border-width) solid var(--color-border-default);
        border-radius: var(--hrc-radius-md);
        background: var(--color-surface-primary);
        color: var(--color-text-primary);
        box-shadow: var(--hrc-shadow-md);
        line-height: var(--hrc-leading-relaxed);
    }

    body.hrc-design-system-v1 .hrc-document-viewer__paper :where(h1, h2, h3) {
        color: var(--color-text-primary);
        line-height: var(--hrc-leading-tight);
        text-wrap: balance;
    }

    body.hrc-design-system-v1 .hrc-document-viewer__paper h1 {
        font-size: clamp(var(--hrc-text-xl), 4vw, var(--hrc-text-3xl));
        text-align: center;
    }

    body.hrc-design-system-v1 .hrc-document-viewer__paper h2 {
        margin-top: var(--hrc-space-6);
        font-size: var(--hrc-text-lg);
    }

    body.hrc-design-system-v1 .hrc-document-viewer__paper :where(p, li, td, th) {
        overflow-wrap: anywhere;
    }

    body.hrc-design-system-v1 .hrc-document-viewer__paper table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

    body.hrc-design-system-v1 .hrc-document-viewer__paper :where(th, td) {
        padding: var(--hrc-space-2) var(--hrc-space-3);
        border: var(--hrc-border-width) solid var(--color-border-default);
        color: var(--color-text-primary);
        text-align: start;
        vertical-align: top;
    }

    body.hrc-design-system-v1 .hrc-document-viewer__paper th {
        background: var(--color-surface-secondary);
        font-weight: var(--hrc-weight-semibold);
    }

    body.hrc-design-system-v1 .hrc-contract-document {
        margin: 0;
    }

    body.hrc-design-system-v1 .hrc-contract-document__center {
        text-align: center;
    }

    body.hrc-design-system-v1 .hrc-contract-document__main-title {
        margin-block: var(--hrc-space-3);
        font-size: clamp(var(--hrc-text-xl), 4vw, var(--hrc-text-3xl));
        font-weight: var(--hrc-weight-bold);
        line-height: var(--hrc-leading-tight);
    }

    body.hrc-design-system-v1 .hrc-contract-document__minor-subtitle {
        color: var(--color-text-secondary);
        font-size: var(--hrc-text-sm);
        font-style: italic;
    }

    body.hrc-design-system-v1 .hrc-contract-document__bullet {
        padding-inline-start: var(--hrc-space-4);
    }

    body.hrc-design-system-v1 .hrc-contract-document__blank {
        min-height: var(--hrc-space-5);
    }

    body.hrc-design-system-v1 :where(
        .hrc-contract-document__signatures,
        .hrc-contract-document__signature-notes
    ) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--hrc-space-6);
        margin-top: var(--hrc-space-10);
        text-align: center;
    }

    body.hrc-design-system-v1 :where(
        .hrc-contract-document__signatures--three,
        .hrc-contract-document__signature-notes--three
    ) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.hrc-design-system-v1 .hrc-contract-document__signature-notes {
        margin-top: var(--hrc-space-2);
        color: var(--color-text-secondary);
        font-size: var(--hrc-text-sm);
        font-style: italic;
    }

    @media (max-width: 39.99rem) {
        body.hrc-design-system-v1 :where(
            .hrc-contract-document__signatures,
            .hrc-contract-document__signature-notes,
            .hrc-contract-document__signatures--three,
            .hrc-contract-document__signature-notes--three
        ) {
            grid-template-columns: 1fr;
        }
    }

    body.hrc-design-system-v1 .hrc-alert {
        display: flex;
        align-items: flex-start;
        gap: var(--hrc-space-3);
        padding: var(--hrc-space-4) var(--hrc-space-5);
        border: var(--hrc-border-width) solid var(--hrc-color-info);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-info-soft);
        color: var(--hrc-color-text);
    }

    body.hrc-design-system-v1 .hrc-alert[data-state="success"] {
        border-color: var(--hrc-color-success);
        background: var(--hrc-color-success-soft);
    }

    body.hrc-design-system-v1 .hrc-alert[data-state="warning"] {
        border-color: var(--hrc-color-warning);
        background: var(--hrc-color-warning-soft);
    }

    body.hrc-design-system-v1 .hrc-alert[data-state="error"] {
        border-color: var(--hrc-color-danger);
        background: var(--hrc-color-danger-soft);
    }

    body.hrc-design-system-v1 :where(.hrc-dashboard-meter, .hrc-onboarding__bar, .hrc-dashboard-score progress) {
        width: 100%;
        height: var(--hrc-space-2);
        overflow: hidden;
        border: 0;
        border-radius: var(--hrc-radius-pill);
        background: var(--hrc-color-surface-soft);
        accent-color: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 :where(.hrc-dashboard-meter, .hrc-onboarding__bar, .hrc-dashboard-score progress)::-webkit-progress-bar {
        border-radius: var(--hrc-radius-pill);
        background: var(--hrc-color-surface-soft);
    }

    body.hrc-design-system-v1 :where(.hrc-dashboard-meter, .hrc-onboarding__bar, .hrc-dashboard-score progress)::-webkit-progress-value {
        border-radius: var(--hrc-radius-pill);
        background: currentColor;
    }

    body.hrc-design-system-v1 :where(.hrc-dashboard-meter, .hrc-onboarding__bar, .hrc-dashboard-score progress)::-moz-progress-bar {
        border-radius: var(--hrc-radius-pill);
        background: currentColor;
    }

    body.hrc-design-system-v1 .hrc-value--success {
        color: var(--hrc-color-success);
    }

    body.hrc-design-system-v1 .hrc-value--info {
        color: var(--hrc-color-info);
    }

    body.hrc-design-system-v1 .hrc-value--warning {
        color: var(--hrc-color-warning);
    }

    body.hrc-design-system-v1 .hrc-value--danger {
        color: var(--hrc-color-danger);
    }

    body.hrc-design-system-v1 .hrc-dashboard {
        grid-template-columns: minmax(0, 1fr);
        width: min(100%, var(--hrc-container-xl));
        min-width: 0;
        margin-inline: auto;
        color: var(--hrc-color-text);
    }

    body.hrc-design-system-v1 .hrc-dashboard :where(h2, h3, p) {
        margin-top: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard :where(h2, h3) {
        color: var(--hrc-color-text);
        line-height: var(--hrc-leading-tight);
    }

    body.hrc-design-system-v1 .hrc-dashboard-copy {
        display: block;
        margin: 0;
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-sm);
        line-height: var(--hrc-leading-relaxed);
    }

    body.hrc-design-system-v1 .hrc-dashboard-label {
        display: block;
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-bold);
    }

    body.hrc-design-system-v1 .hrc-dashboard-hero {
        display: block;
    }

    body.hrc-design-system-v1 .hrc-dashboard-hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(var(--hrc-layout-detail-min), auto);
        align-items: center;
        gap: var(--hrc-space-6);
    }

    body.hrc-design-system-v1 .hrc-dashboard-score {
        display: grid;
        gap: var(--hrc-space-2);
        width: min(100%, var(--hrc-layout-detail-min));
        min-width: 0;
        max-width: 100%;
        padding: var(--hrc-space-4);
        border: var(--hrc-border-width) solid currentColor;
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
        box-shadow: var(--hrc-shadow-xs);
    }

    body.hrc-design-system-v1 .hrc-dashboard-score strong {
        color: currentColor;
        font-family: var(--hrc-font-number);
        font-size: var(--hrc-text-3xl);
        font-variant-numeric: tabular-nums;
        line-height: var(--hrc-leading-tight);
    }

    body.hrc-design-system-v1 .hrc-dashboard-score :where(span, small) {
        color: var(--hrc-color-text-muted);
    }

    body.hrc-design-system-v1 .hrc-dashboard-grid {
        display: grid;
        gap: var(--hrc-grid-gap);
        min-width: 0;
    }

    body.hrc-design-system-v1 :where(.hrc-dashboard-grid--auto, .hrc-dashboard-grid--actions) {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hrc-layout-detail-min)), 1fr));
    }

    body.hrc-design-system-v1 .hrc-dashboard-grid--foundation {
        grid-template-columns: minmax(0, 2fr) minmax(var(--hrc-layout-detail-min), 1fr);
    }

    body.hrc-design-system-v1 :where(.hrc-dashboard-grid--split, .hrc-dashboard-grid--charts, .hrc-dashboard-grid--two) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.hrc-design-system-v1 :where(.hrc-dashboard-grid--three, .hrc-dashboard-grid--metrics) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.hrc-design-system-v1 .hrc-dashboard-grid--three:has(> .hrc-dashboard-table-card) {
        grid-template-columns: repeat(
            auto-fit,
            minmax(min(100%, calc(var(--hrc-table-column-min) * 5)), 1fr)
        );
    }

    body.hrc-design-system-v1 .hrc-dashboard-panel {
        display: grid;
        align-content: start;
        gap: var(--hrc-space-4);
        padding: var(--hrc-space-5);
    }

    body.hrc-design-system-v1 .hrc-dashboard-panel :where(h2, h3, p) {
        margin-bottom: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-panel__header,
    body.hrc-design-system-v1 .hrc-dashboard-split,
    body.hrc-design-system-v1 .hrc-dashboard-person__quota {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1 .hrc-dashboard-stat {
        display: grid;
        gap: var(--hrc-space-1);
        min-width: var(--hrc-layout-detail-min);
        text-align: end;
    }

    body.hrc-design-system-v1 .hrc-dashboard-stat small {
        color: var(--hrc-color-text-muted);
    }

    body.hrc-design-system-v1 .hrc-dashboard-stat strong {
        font-family: var(--hrc-font-number);
        font-size: var(--hrc-text-3xl);
        line-height: var(--hrc-leading-tight);
    }

    body.hrc-design-system-v1 .hrc-dashboard-list,
    body.hrc-design-system-v1 .hrc-dashboard-tags,
    body.hrc-design-system-v1 .hrc-launchpad__list,
    body.hrc-design-system-v1 .hrc-onboarding__list,
    body.hrc-design-system-v1 .hrc-dashboard-ranking__list {
        display: grid;
        gap: var(--hrc-space-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-list > :where(li, div),
    body.hrc-design-system-v1 .hrc-dashboard-ranking__item {
        padding: var(--hrc-space-3);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-sm);
        background: var(--hrc-color-surface-soft);
    }

    body.hrc-design-system-v1 .hrc-dashboard-tags {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hrc-foldable-pane-min)), 1fr));
    }

    body.hrc-design-system-v1 .hrc-dashboard-tags > span {
        padding: var(--hrc-space-2) var(--hrc-space-3);
        border-radius: var(--hrc-radius-pill);
        background: var(--hrc-color-brand-soft);
        color: var(--hrc-color-brand);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-semibold);
    }

    body.hrc-design-system-v1 .hrc-dashboard-plan {
        display: grid;
        grid-template-columns: minmax(0, 1fr) repeat(4, auto);
        align-items: center;
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .hrc-dashboard-plan > div,
    body.hrc-design-system-v1 .hrc-dashboard-person,
    body.hrc-design-system-v1 .hrc-dashboard-follow,
    body.hrc-design-system-v1 .hrc-dashboard-metric {
        display: grid;
        gap: var(--hrc-space-2);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-plan[data-state="best"] {
        border-color: var(--hrc-color-success);
        background: var(--hrc-color-success-soft);
    }

    body.hrc-design-system-v1 .hrc-dashboard-person {
        padding: var(--hrc-space-4);
    }

    body.hrc-design-system-v1 .hrc-dashboard-person__quota {
        margin-top: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .hrc-dashboard-metric {
        padding: var(--hrc-space-4);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface-soft);
    }

    body.hrc-design-system-v1 .hrc-dashboard-metric strong {
        font-family: var(--hrc-font-number);
        font-size: var(--hrc-text-xl);
        font-variant-numeric: tabular-nums;
    }

    body.hrc-design-system-v1 .hrc-dashboard-disclosure {
        overflow: hidden;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-lg);
        background: var(--hrc-color-surface);
        box-shadow: var(--hrc-shadow-sm);
    }

    body.hrc-design-system-v1 .hrc-dashboard-disclosure__summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--hrc-space-4);
        padding: var(--hrc-space-5);
        color: var(--hrc-color-text);
        cursor: pointer;
        list-style: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-disclosure__summary::-webkit-details-marker {
        display: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-disclosure__copy {
        display: flex;
        align-items: center;
        gap: var(--hrc-space-3);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-disclosure__copy > span:last-child {
        display: grid;
        gap: var(--hrc-space-1);
    }

    body.hrc-design-system-v1 .hrc-dashboard-disclosure__copy small {
        color: var(--hrc-color-text-muted);
    }

    body.hrc-design-system-v1 .hrc-dashboard-disclosure__icon {
        display: inline-grid;
        flex: 0 0 var(--hrc-control-height);
        place-items: center;
        min-width: var(--hrc-control-height);
        min-height: var(--hrc-control-height);
        border-radius: var(--hrc-radius-sm);
        background: var(--hrc-color-brand-soft);
        color: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 .hrc-dashboard-disclosure__action {
        flex: 0 0 auto;
        color: var(--hrc-color-brand);
        font-weight: var(--hrc-weight-semibold);
    }

    body.hrc-design-system-v1 .hrc-dashboard-disclosure[open] .hrc-dashboard-disclosure__action i {
        transform: rotate(180deg);
    }

    body.hrc-design-system-v1 .hrc-dashboard-disclosure__body {
        display: grid;
        gap: var(--hrc-space-5);
        padding: 0 var(--hrc-space-5) var(--hrc-space-5);
        border-top: var(--hrc-border-width) solid var(--hrc-color-border);
    }

    body.hrc-design-system-v1 .hrc-dashboard > .hrc-kpi-grid .hrc-kpi,
    body.hrc-design-system-v1 .hrc-dashboard-grid--actions .hrc-kpi {
        border-color: color-mix(in srgb, var(--hrc-kpi-accent) 26%, var(--hrc-color-border));
        background: var(--hrc-color-surface);
        box-shadow: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard > .hrc-kpi-grid .hrc-kpi__value,
    body.hrc-design-system-v1 .hrc-dashboard-grid--actions .hrc-kpi__value {
        color: color-mix(in srgb, var(--hrc-kpi-accent) 78%, var(--hrc-color-text));
    }

    body.hrc-design-system-v1 .hrc-dashboard-grid--actions .hrc-kpi .hrc-btn {
        width: 100%;
        margin-top: auto;
        border-color: color-mix(in srgb, var(--hrc-kpi-accent) 28%, var(--hrc-color-border));
        background: color-mix(in srgb, var(--hrc-kpi-accent) 9%, var(--hrc-color-surface));
        color: color-mix(in srgb, var(--hrc-kpi-accent) 76%, var(--hrc-color-text));
    }

    body.hrc-design-system-v1 .hrc-dashboard-panel--action,
    body.hrc-design-system-v1 .hrc-dashboard-panel--timeline {
        border-color: color-mix(in srgb, var(--hrc-dashboard-panel-accent, var(--hrc-color-brand)) 22%, var(--hrc-color-border));
        background:
            linear-gradient(
                150deg,
                color-mix(in srgb, var(--hrc-dashboard-panel-accent, var(--hrc-color-brand)) 8%, var(--hrc-color-surface)) 0%,
                var(--hrc-color-surface) 52%
            );
    }

    body.hrc-design-system-v1 .hrc-dashboard-panel--action {
        --hrc-dashboard-panel-accent: var(--hrc-color-warning);
    }

    body.hrc-design-system-v1 .hrc-dashboard-panel--timeline {
        --hrc-dashboard-panel-accent: var(--hrc-color-info);
    }

    body.hrc-design-system-v1 .hrc-dashboard-panel__title {
        display: flex;
        align-items: center;
        gap: var(--hrc-space-3);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-panel__title > div {
        display: grid;
        gap: var(--hrc-space-1);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-panel__title h3 {
        margin: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-panel__icon,
    body.hrc-design-system-v1 .hrc-dashboard-report__icon,
    body.hrc-design-system-v1 .hrc-dashboard-insight__icon {
        display: inline-grid;
        flex: 0 0 var(--hrc-control-height);
        place-items: center;
        width: var(--hrc-control-height);
        height: var(--hrc-control-height);
        border-radius: var(--hrc-radius-sm);
        background: color-mix(in srgb, var(--hrc-dashboard-tone, var(--hrc-color-brand)) 14%, var(--hrc-color-surface));
        color: var(--hrc-dashboard-tone, var(--hrc-color-brand));
    }

    body.hrc-design-system-v1 .hrc-dashboard-panel__icon[data-tone="warning"] {
        --hrc-dashboard-tone: var(--hrc-color-warning);
    }

    body.hrc-design-system-v1 .hrc-dashboard-panel__icon[data-tone="info"] {
        --hrc-dashboard-tone: var(--hrc-color-info);
    }

    body.hrc-design-system-v1 .hrc-dashboard-panel--action .hrc-dashboard-list > li,
    body.hrc-design-system-v1 .hrc-dashboard-panel--timeline .hrc-dashboard-list > li {
        border-color: color-mix(in srgb, var(--hrc-dashboard-panel-accent) 20%, var(--hrc-color-border));
        background: color-mix(in srgb, var(--hrc-dashboard-panel-accent) 6%, var(--hrc-color-surface));
    }

    body.hrc-design-system-v1 .hrc-dashboard-report {
        display: grid;
        gap: 0;
        overflow: hidden;
        min-width: 0;
        border: var(--hrc-border-width) solid color-mix(in srgb, var(--hrc-color-brand) 24%, var(--hrc-color-border));
        border-radius: var(--hrc-radius-lg);
        background: var(--hrc-color-surface);
        box-shadow:
            0 18px 45px color-mix(in srgb, var(--hrc-color-brand) 9%, transparent),
            var(--hrc-shadow-sm);
    }

    body.hrc-design-system-v1 .hrc-dashboard-report__header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--hrc-space-4);
        padding: var(--hrc-space-5);
        background:
            radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--hrc-color-success) 15%, transparent), transparent 42%),
            linear-gradient(135deg, var(--hrc-color-brand-soft), var(--hrc-color-surface));
    }

    body.hrc-design-system-v1 .hrc-dashboard-report__icon {
        --hrc-dashboard-tone: var(--hrc-color-brand);
        width: var(--hrc-control-height-lg);
        height: var(--hrc-control-height-lg);
        font-size: var(--hrc-text-lg);
    }

    body.hrc-design-system-v1 .hrc-dashboard-report__copy {
        display: grid;
        gap: var(--hrc-space-1);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-report__copy :where(h2, p) {
        margin: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-report__copy p {
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-sm);
    }

    body.hrc-design-system-v1 .hrc-dashboard-report .hrc-dashboard-disclosure__body {
        padding: var(--hrc-space-5);
        border-top: var(--hrc-border-width) solid color-mix(in srgb, var(--hrc-color-brand) 16%, var(--hrc-color-border));
    }

    body.hrc-design-system-v1 .hrc-dashboard-report__insights {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--hrc-grid-gap);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-insight {
        --hrc-dashboard-tone: var(--hrc-color-brand);
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: var(--hrc-space-3);
        min-width: 0;
        padding: var(--hrc-space-4);
        border: var(--hrc-border-width) solid color-mix(in srgb, var(--hrc-dashboard-tone) 28%, var(--hrc-color-border));
        border-radius: var(--hrc-radius-md);
        background:
            linear-gradient(
                145deg,
                color-mix(in srgb, var(--hrc-dashboard-tone) 12%, var(--hrc-color-surface)) 0%,
                var(--hrc-color-surface) 72%
            );
    }

    body.hrc-design-system-v1 .hrc-dashboard-insight[data-tone="success"] {
        --hrc-dashboard-tone: var(--hrc-color-success);
    }

    body.hrc-design-system-v1 .hrc-dashboard-insight[data-tone="warning"] {
        --hrc-dashboard-tone: var(--hrc-color-warning);
    }

    body.hrc-design-system-v1 .hrc-dashboard-insight[data-tone="danger"] {
        --hrc-dashboard-tone: var(--hrc-color-danger);
    }

    body.hrc-design-system-v1 .hrc-dashboard-insight[data-tone="info"] {
        --hrc-dashboard-tone: var(--hrc-color-info);
    }

    body.hrc-design-system-v1 .hrc-dashboard-insight > span:last-child {
        display: grid;
        gap: var(--hrc-space-1);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-insight small {
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-semibold);
    }

    body.hrc-design-system-v1 .hrc-dashboard-insight strong {
        color: color-mix(in srgb, var(--hrc-dashboard-tone) 78%, var(--hrc-color-text));
        font-family: var(--hrc-font-number);
        font-size: var(--hrc-text-xl);
        font-variant-numeric: tabular-nums;
        line-height: var(--hrc-leading-tight);
        white-space: nowrap;
    }

    body.hrc-design-system-v1 .hrc-dashboard-onboarding,
    body.hrc-design-system-v1 .hrc-dashboard-launchpad,
    body.hrc-design-system-v1 .hrc-dashboard-table-card,
    body.hrc-design-system-v1 .hrc-dashboard-chart,
    body.hrc-design-system-v1 .hrc-dashboard-ranking {
        overflow: hidden;
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-onboarding .hrc-surface__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--hrc-space-4);
    }

    body.hrc-design-system-v1 .hrc-dashboard-onboarding .hrc-surface__header p,
    body.hrc-design-system-v1 .hrc-dashboard-launchpad .hrc-surface__header p,
    body.hrc-design-system-v1 .hrc-dashboard-chart .hrc-dashboard-panel__header p,
    body.hrc-design-system-v1 .hrc-dashboard-ranking .hrc-surface__header p {
        margin: var(--hrc-space-1) 0 0;
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-sm);
    }

    body.hrc-design-system-v1 .hrc-onboarding__progress {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--hrc-space-3);
        padding: var(--hrc-space-4) var(--hrc-space-5);
    }

    body.hrc-design-system-v1 .hrc-onboarding__list,
    body.hrc-design-system-v1 .hrc-launchpad__list {
        padding: 0 var(--hrc-space-5) var(--hrc-space-5);
    }

    body.hrc-design-system-v1 .hrc-onboarding__item,
    body.hrc-design-system-v1 .hrc-launchpad__list > li {
        overflow: hidden;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-sm);
    }

    body.hrc-design-system-v1 .hrc-onboarding__link,
    body.hrc-design-system-v1 .hrc-launchpad__link {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--hrc-space-3);
        min-height: var(--hrc-touch-target);
        padding: var(--hrc-space-3);
        color: var(--hrc-color-text);
        text-decoration: none;
    }

    body.hrc-design-system-v1 .hrc-onboarding__status,
    body.hrc-design-system-v1 .hrc-launchpad__icon {
        display: inline-grid;
        place-items: center;
        width: var(--hrc-control-height-sm);
        height: var(--hrc-control-height-sm);
        border-radius: var(--hrc-radius-sm);
        background: var(--hrc-color-brand-soft);
        color: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 .hrc-onboarding__item.is-complete .hrc-onboarding__status {
        background: var(--hrc-color-success-soft);
        color: var(--hrc-color-success);
    }

    body.hrc-design-system-v1 .hrc-onboarding__copy {
        display: grid;
        gap: var(--hrc-space-1);
    }

    body.hrc-design-system-v1 .hrc-onboarding__copy small,
    body.hrc-design-system-v1 .hrc-launchpad__link small {
        color: var(--hrc-color-text-muted);
    }

    body.hrc-design-system-v1 .hrc-empty-state {
        display: grid;
        justify-items: center;
        gap: var(--hrc-space-3);
        min-width: 0;
        padding: var(--hrc-space-5);
        color: var(--hrc-color-text-muted);
        text-align: center;
    }

    body.hrc-design-system-v1 .hrc-empty-state__icon {
        color: var(--hrc-color-success);
        font-size: var(--hrc-text-2xl);
    }

    body.hrc-design-system-v1 .hrc-dashboard-chart {
        display: grid;
        gap: var(--hrc-space-4);
        padding: var(--hrc-space-5);
    }

    body.hrc-design-system-v1 .hrc-dashboard-chart__canvas {
        position: relative;
        min-height: calc(var(--hrc-space-10) * 6);
    }

    body.hrc-design-system-v1 .hrc-dashboard-chart__canvas canvas {
        max-width: 100%;
        max-height: calc(var(--hrc-space-10) * 6);
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.86fr) minmax(23rem, 1fr);
        align-items: stretch;
        gap: var(--hrc-grid-gap);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-layout.is-chart-only {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-layout > .hrc-surface {
        height: 100%;
        min-width: 0;
        border-color: color-mix(in srgb, var(--hrc-color-brand) 15%, var(--hrc-color-border));
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
        box-shadow: none;
        backdrop-filter: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-chart {
        grid-template-rows: auto auto minmax(20rem, 1fr);
        align-self: stretch;
        gap: var(--hrc-space-3);
        height: 100%;
        padding: var(--hrc-space-4);
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-chart .hrc-dashboard-chart__canvas {
        align-self: stretch;
        width: 100%;
        height: 100%;
        min-height: 20rem;
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-chart .hrc-dashboard-chart__canvas canvas {
        display: block;
        width: 100%;
        height: 100%;
        max-height: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-kpis {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-kpi {
        display: grid;
        gap: var(--hrc-space-1);
        min-width: 0;
        padding: var(--hrc-space-2) var(--hrc-space-3);
        border: var(--hrc-border-width) solid
            color-mix(in srgb, var(--hrc-dashboard-kpi-tone, var(--hrc-color-brand)) 18%, var(--hrc-color-border));
        border-radius: var(--hrc-radius-md);
        background: color-mix(
            in srgb,
            var(--hrc-dashboard-kpi-tone, var(--hrc-color-brand)) 7%,
            var(--hrc-color-surface)
        );
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-kpi[data-state="success"] {
        --hrc-dashboard-kpi-tone: var(--hrc-color-success);
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-kpi[data-state="error"] {
        --hrc-dashboard-kpi-tone: var(--hrc-color-danger);
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-kpi[data-state="info"] {
        --hrc-dashboard-kpi-tone: var(--hrc-color-info);
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-kpi > span {
        display: flex;
        align-items: center;
        gap: var(--hrc-space-2);
        overflow: hidden;
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-semibold);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-kpi > span i {
        color: var(--hrc-dashboard-kpi-tone, var(--hrc-color-brand));
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-kpi > strong {
        min-width: 0;
        color: color-mix(
            in srgb,
            var(--hrc-dashboard-kpi-tone, var(--hrc-color-brand)) 78%,
            var(--hrc-color-text)
        );
        font-family: var(--hrc-font-number);
        font-size: var(--hrc-text-xl);
        font-variant-numeric: tabular-nums;
        line-height: var(--hrc-leading-tight);
        overflow-wrap: anywhere;
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-ranking {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        overflow: hidden;
        padding: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-ranking > .hrc-surface__header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: var(--hrc-space-4);
        padding: var(--hrc-space-4);
        border-bottom: var(--hrc-border-width) solid var(--hrc-color-border);
        background: var(--hrc-color-surface-soft);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__heading,
    body.hrc-design-system-v1 .hrc-dashboard-ranking__identity {
        display: flex;
        align-items: center;
        gap: var(--hrc-space-3);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__heading {
        align-items: flex-start;
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__heading > div {
        flex: 1 1 auto;
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__heading h2 {
        margin: var(--hrc-space-1) 0 0;
        max-width: 24ch;
        font-size: clamp(var(--hrc-text-base), 1.35vw, var(--hrc-text-lg));
        line-height: var(--hrc-leading-snug);
        text-wrap: balance;
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__icon {
        flex: 0 0 auto;
        display: inline-grid;
        place-items: center;
        width: var(--hrc-control-height);
        height: var(--hrc-control-height);
        color: var(--hrc-color-warning);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-warning-soft);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__year {
        display: grid;
        grid-template-columns: auto minmax(6.5rem, auto) auto;
        align-items: center;
        justify-content: end;
        gap: var(--hrc-space-2);
        width: 100%;
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__year label {
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-bold);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__year .hrc-select {
        min-width: 6.5rem;
        min-height: var(--hrc-control-height-sm);
        height: var(--hrc-control-height-sm);
        padding-block: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-ranking .hrc-dashboard-ranking__list {
        align-content: start;
        gap: 0;
        padding: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-ranking .hrc-dashboard-ranking__item {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        gap: var(--hrc-space-2);
        min-height: 5rem;
        padding: var(--hrc-space-3) var(--hrc-space-4);
        border: 0;
        border-bottom: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: 0;
        background: transparent;
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-ranking .hrc-dashboard-ranking__item:nth-child(even) {
        background: color-mix(in srgb, var(--hrc-color-surface-soft) 62%, transparent);
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-ranking .hrc-dashboard-ranking__item:hover {
        background: color-mix(in srgb, var(--hrc-color-brand) 5%, var(--hrc-color-surface));
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__identity {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-ranking .hrc-dashboard-ranking__rank {
        position: relative;
        width: 1.75rem;
        min-width: 1.75rem;
        min-height: 1.75rem;
        color: var(--hrc-color-text-muted);
        background: var(--hrc-color-surface-soft);
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-ranking .hrc-dashboard-ranking__rank i {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        opacity: .22;
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-ranking .hrc-dashboard-ranking__rank b {
        position: relative;
        z-index: 1;
        font-size: var(--hrc-text-xs);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__item[data-rank="1"] .hrc-dashboard-ranking__rank {
        color: var(--hrc-color-warning);
        background: var(--hrc-color-warning-soft);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__item[data-rank="2"] .hrc-dashboard-ranking__rank {
        color: var(--hrc-color-info);
        background: var(--hrc-color-info-soft);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__item[data-rank="3"] .hrc-dashboard-ranking__rank {
        color: var(--hrc-color-danger);
        background: var(--hrc-color-danger-soft);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__avatar {
        flex: 0 0 auto;
        width: 2.5rem;
        height: 2.5rem;
        overflow: hidden;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        box-shadow: var(--hrc-shadow-xs);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    body.hrc-design-system-v1 .hrc-dashboard-recruitment-ranking .hrc-dashboard-ranking__person {
        display: grid;
        justify-content: stretch;
        gap: var(--hrc-space-1);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__person :where(strong, small) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__person strong {
        font-size: var(--hrc-text-sm);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__person small {
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__metrics {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--hrc-space-2);
        padding-left: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__metrics > span {
        display: grid;
        gap: 0;
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__metrics b {
        color: var(--hrc-color-text);
        font-family: var(--hrc-font-number);
        font-size: var(--hrc-text-sm);
        font-variant-numeric: tabular-nums;
        line-height: var(--hrc-leading-tight);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__metrics small {
        color: var(--hrc-color-text-muted);
        font-size: .625rem;
        white-space: nowrap;
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__metrics [data-state="success"] b {
        color: color-mix(in srgb, var(--hrc-color-success) 75%, var(--hrc-color-text));
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__metrics [data-state="error"] b {
        color: color-mix(in srgb, var(--hrc-color-danger) 60%, var(--hrc-color-text));
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__metrics [data-state="info"] b {
        color: color-mix(in srgb, var(--hrc-color-info) 75%, var(--hrc-color-text));
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__progress {
        height: .375rem;
        margin-left: 0;
        overflow: hidden;
        border-radius: var(--hrc-radius-pill);
        background: var(--hrc-color-surface-soft);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__progress > i {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__note {
        display: flex;
        align-items: center;
        gap: var(--hrc-space-2);
        margin: 0;
        padding: var(--hrc-space-3) var(--hrc-space-4);
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
        border-top: var(--hrc-border-width) solid var(--hrc-color-border);
        background: var(--hrc-color-surface-soft);
    }

    @media (max-width: 75rem) {
        body.hrc-design-system-v1 .hrc-dashboard-recruitment-layout {
            grid-template-columns: minmax(0, 1fr);
        }

        body.hrc-design-system-v1 .hrc-dashboard-recruitment-ranking .hrc-dashboard-ranking__item {
            grid-template-columns: minmax(13rem, 1fr) minmax(18rem, .8fr);
        }

        body.hrc-design-system-v1 .hrc-dashboard-ranking__metrics {
            padding-left: 0;
        }

        body.hrc-design-system-v1 .hrc-dashboard-ranking__progress {
            grid-column: 1 / -1;
            margin-left: 0;
        }
    }

    @media (max-width: 48rem) {
        body.hrc-design-system-v1 .hrc-dashboard-recruitment-kpis {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        body.hrc-design-system-v1 .hrc-dashboard-recruitment-ranking > .hrc-surface__header,
        body.hrc-design-system-v1 .hrc-dashboard-recruitment-ranking .hrc-dashboard-ranking__item {
            grid-template-columns: minmax(0, 1fr);
        }

        body.hrc-design-system-v1 .hrc-dashboard-ranking__year {
            grid-template-columns: auto minmax(0, 1fr);
            justify-self: stretch;
        }

        body.hrc-design-system-v1 .hrc-dashboard-ranking__year .hrc-select {
            width: 100%;
        }

        body.hrc-design-system-v1 .hrc-dashboard-ranking__year .hrc-btn {
            grid-column: 1 / -1;
            width: 100%;
        }

        body.hrc-design-system-v1 .hrc-dashboard-recruitment-ranking .hrc-dashboard-ranking__item {
            min-height: 0;
            padding-inline: var(--hrc-space-4);
        }

        body.hrc-design-system-v1 .hrc-dashboard-ranking__metrics {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        body.hrc-design-system-v1 .hrc-dashboard-ranking__metrics > span {
            grid-template-columns: minmax(0, 1fr);
            gap: 0;
            padding: var(--hrc-space-1) var(--hrc-space-2);
            border-radius: var(--hrc-radius-sm);
            background: var(--hrc-color-surface-soft);
        }
    }

    body.hrc-design-system-v1 .hrc-dashboard-heatmap {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hrc-foldable-pane-min)), 1fr));
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .hrc-dashboard-heatmap > * {
        padding: var(--hrc-space-3);
        border-radius: var(--hrc-radius-sm);
        background: var(--hrc-color-brand-soft);
        color: var(--hrc-color-text);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__list {
        padding: var(--hrc-space-5);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__item,
    body.hrc-design-system-v1 .hrc-dashboard-ranking__person {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__rank {
        display: inline-grid;
        place-items: center;
        min-width: var(--hrc-control-height-sm);
        min-height: var(--hrc-control-height-sm);
        border-radius: var(--hrc-radius-pill);
        background: var(--hrc-color-brand-soft);
        color: var(--hrc-color-brand);
        font-weight: var(--hrc-weight-bold);
    }

    body.hrc-design-system-v1 .hrc-dashboard-filter-action {
        align-self: end;
    }

    body.hrc-design-system-v1 .hrc-dashboard-filter-note {
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
    }

    @media (max-width: 68.75rem) {
        body.hrc-design-system-v1 .hrc-dashboard-grid--foundation,
        body.hrc-design-system-v1 .hrc-dashboard-grid--three,
        body.hrc-design-system-v1 .hrc-dashboard-grid--metrics {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        body.hrc-design-system-v1 .hrc-dashboard-report__insights,
        body.hrc-design-system-v1 .hrc-kpi-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        body.hrc-design-system-v1 .hrc-dashboard-report__insights .hrc-dashboard-insight strong {
            overflow-wrap: anywhere;
            white-space: normal;
        }
    }

    @media (max-width: 48rem) {
        body.hrc-design-system-v1 .hrc-dashboard-hero__grid,
        body.hrc-design-system-v1 .hrc-dashboard-grid--foundation,
        body.hrc-design-system-v1 .hrc-dashboard-grid--split,
        body.hrc-design-system-v1 .hrc-dashboard-grid--charts,
        body.hrc-design-system-v1 .hrc-dashboard-grid--three,
        body.hrc-design-system-v1 .hrc-dashboard-grid--metrics,
        body.hrc-design-system-v1 .hrc-dashboard-grid--two,
        body.hrc-design-system-v1 .hrc-dashboard-report__insights,
        body.hrc-design-system-v1 .hrc-kpi-grid,
        body.hrc-design-system-v1 .hrc-filter-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        body.hrc-design-system-v1 .hrc-dashboard-report__header {
            grid-template-columns: auto minmax(0, 1fr);
        }

        body.hrc-design-system-v1 .hrc-dashboard-report__header > .hrc-badge {
            grid-column: 1 / -1;
            justify-self: start;
        }

        body.hrc-design-system-v1 .hrc-dashboard-plan {
            grid-template-columns: minmax(0, 1fr) auto;
        }

        body.hrc-design-system-v1 .hrc-dashboard-stat {
            min-width: 0;
            text-align: start;
        }

        body.hrc-design-system-v1 .hrc-dashboard-score {
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: var(--hrc-space-1) var(--hrc-space-3);
            width: 100%;
            min-width: 0;
            padding: var(--hrc-space-3);
        }

        body.hrc-design-system-v1 .hrc-dashboard-hero__grid {
            width: 100%;
            min-width: 0;
            gap: var(--hrc-space-4);
        }

        body.hrc-design-system-v1 .hrc-dashboard-score > strong {
            grid-row: 1 / span 2;
        }

        body.hrc-design-system-v1 .hrc-dashboard-score > progress {
            width: 100%;
        }

        body.hrc-design-system-v1 .hrc-dashboard-score > :where(span, small) {
            grid-column: 2;
        }

        body.hrc-design-system-v1 .hrc-map,
        body.hrc-design-system-v1 [data-hrc-component="map"] {
            min-height: var(--hrc-map-block-size-tablet);
        }
    }

    @media (max-width: 26.25rem) {
        body.hrc-design-system-v1 .hrc-dashboard-report__header {
            grid-template-columns: minmax(0, 1fr);
        }

        body.hrc-design-system-v1 .hrc-dashboard-report__icon {
            width: var(--hrc-control-height);
            height: var(--hrc-control-height);
        }

        body.hrc-design-system-v1 .hrc-dashboard-report .hrc-dashboard-disclosure__body,
        body.hrc-design-system-v1 .hrc-dashboard-report__header {
            padding: var(--hrc-space-4);
        }

        body.hrc-design-system-v1 .hrc-dashboard-insight strong {
            white-space: normal;
        }

        body.hrc-design-system-v1 .hrc-dashboard-disclosure__summary,
        body.hrc-design-system-v1 .hrc-dashboard-panel__header,
        body.hrc-design-system-v1 .hrc-dashboard-split {
            align-items: stretch;
            flex-direction: column;
        }

        body.hrc-design-system-v1 .hrc-dashboard-disclosure__action {
            align-self: flex-start;
        }

        body.hrc-design-system-v1 .hrc-dashboard-plan {
            grid-template-columns: minmax(0, 1fr);
        }

        body.hrc-design-system-v1 .hrc-map,
        body.hrc-design-system-v1 [data-hrc-component="map"] {
            min-height: var(--hrc-map-block-size-mobile);
        }

        body.hrc-design-system-v1 .hrc-action-dock {
            grid-template-columns: minmax(0, 1fr);
        }

        body.hrc-design-system-v1 .hrc-action-dock__utilities {
            justify-content: stretch;
        }

        body.hrc-design-system-v1 .hrc-action-dock__utilities > * {
            flex: 1 1 auto;
        }
    }

    /* Shared application patterns for complex ERP routes. */
    body.hrc-design-system-v1 .hrc-avatar {
        display: inline-grid;
        flex: 0 0 var(--hrc-control-height);
        place-items: center;
        width: var(--hrc-control-height);
        height: var(--hrc-control-height);
        overflow: hidden;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-pill);
        background: var(--hrc-color-brand-soft);
        color: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 .hrc-avatar :where(img, picture) {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    body.hrc-design-system-v1 .hrc-backdrop,
    body.hrc-design-system-v1 .hrc-overlay {
        position: fixed;
        inset: 0;
        z-index: var(--hrc-z-drawer);
        background: var(--color-surface-overlay);
        backdrop-filter: blur(var(--hrc-blur-sm));
    }

    body.hrc-design-system-v1 .hrc-backdrop[hidden],
    body.hrc-design-system-v1 .hrc-overlay[hidden] {
        display: none;
    }

    body.hrc-design-system-v1 .hrc-dialog:not(dialog) {
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: var(--hrc-z-modal);
        display: none;
        width: min(100% - (var(--hrc-space-4) * 2), var(--hrc-container-sm));
        transform: translate(-50%, -50%);
    }

    body.hrc-design-system-v1 .hrc-dialog:not(dialog):is(.open, [data-state="open"]) {
        display: block;
    }

    body.hrc-design-system-v1 .hrc-drawer {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: var(--hrc-z-modal);
        width: min(100%, var(--hrc-container-sm));
        max-width: 100%;
        max-height: none;
        border-radius: 0;
        transform: translateX(100%);
        transition: transform var(--hrc-motion-normal) var(--hrc-ease-standard);
    }

    body.hrc-design-system-v1 .hrc-drawer:is(.open, [open], [data-state="open"]) {
        transform: translateX(0);
    }

    body.hrc-design-system-v1 .hrc-drawer[data-placement="bottom"] {
        inset: auto 0 0;
        width: 100%;
        max-width: 100%;
        max-height: min(80dvh, var(--hrc-sheet-block-size));
        border-radius: var(--hrc-radius-lg) var(--hrc-radius-lg) 0 0;
        transform: translateY(100%);
    }

    body.hrc-design-system-v1 .hrc-drawer[data-placement="bottom"]:is(.open, [open], [data-state="open"]) {
        transform: translateY(0);
    }

    body.hrc-design-system-v1 .hrc-drawer > :not(.hrc-dialog__header) {
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-choice-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hrc-foldable-pane-min)), 1fr));
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1 .hrc-choice-card {
        min-height: var(--hrc-control-height-lg);
        padding: var(--hrc-space-3);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
        color: var(--hrc-color-text);
    }

    body.hrc-design-system-v1 .hrc-choice-card:is(.is-active, [aria-checked="true"], [aria-selected="true"]) {
        border-color: var(--hrc-color-brand);
        background: var(--hrc-color-brand-soft);
        color: var(--hrc-color-brand-hover);
    }

    body.hrc-design-system-v1 .hrc-list {
        display: grid;
        gap: var(--hrc-space-3);
        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body.hrc-design-system-v1 .hrc-list__item {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: var(--hrc-space-3);
        padding: var(--hrc-space-3);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
    }

    body.hrc-design-system-v1 .hrc-list__meta {
        display: grid;
        gap: var(--hrc-space-1);
        min-width: 0;
        color: var(--hrc-color-text-muted);
    }

    body.hrc-design-system-v1 .hrc-list__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .hrc-progress {
        width: 100%;
        height: var(--hrc-space-2);
        overflow: hidden;
        border-radius: var(--hrc-radius-pill);
        background: var(--hrc-color-surface-muted);
    }

    body.hrc-design-system-v1 .hrc-progress > * {
        width: var(--hrc-progress-value, 0%);
        height: 100%;
        border-radius: inherit;
        background: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 .hrc-meter {
        width: 100%;
        height: var(--hrc-space-2);
        overflow: hidden;
        border: 0;
        border-radius: var(--hrc-radius-pill);
        background: var(--hrc-color-surface-muted);
        accent-color: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 .hrc-meter::-webkit-progress-bar {
        border-radius: inherit;
        background: var(--hrc-color-surface-muted);
    }

    body.hrc-design-system-v1 .hrc-meter::-webkit-progress-value {
        border-radius: inherit;
        background: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 .hrc-meter::-moz-progress-bar {
        border-radius: inherit;
        background: var(--hrc-color-brand);
    }

    /* Enterprise workspace: reusable information architecture for dense modules. */
    body.hrc-design-system-v1 .hrc-workspace-layout {
        display: grid;
        grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
        gap: var(--hrc-grid-gap);
        min-width: 0;
        align-items: start;
    }

    body.hrc-design-system-v1 .hrc-section-nav {
        position: sticky;
        top: calc(var(--hrc-shell-header-height, 4rem) + var(--hrc-space-4));
        display: grid;
        gap: var(--hrc-space-1);
        min-width: 0;
        max-height: calc(100dvh - var(--hrc-shell-header-height, 4rem) - var(--hrc-space-8));
        overflow-y: auto;
        padding: var(--hrc-space-2);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
        box-shadow: var(--hrc-shadow-xs);
        scrollbar-width: thin;
    }

    body.hrc-design-system-v1 .hrc-section-nav__link {
        display: grid;
        grid-template-columns: var(--hrc-control-height-sm) minmax(0, 1fr);
        align-items: center;
        gap: var(--hrc-space-2);
        min-height: var(--hrc-touch-target);
        padding: var(--hrc-space-2) var(--hrc-space-3);
        border-radius: var(--hrc-radius-sm);
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-sm);
        font-weight: var(--hrc-weight-semibold);
        text-decoration: none;
    }

    body.hrc-design-system-v1 .hrc-section-nav__link > :first-child {
        display: grid;
        width: var(--hrc-control-height-sm);
        height: var(--hrc-control-height-sm);
        place-items: center;
        border-radius: var(--hrc-radius-sm);
        background: var(--hrc-color-surface-soft);
        color: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 .hrc-section-nav__link:is(:hover, [aria-current="page"]) {
        background: var(--hrc-color-brand-soft);
        color: var(--hrc-color-brand-hover);
    }

    body.hrc-design-system-v1 .hrc-section-nav__link[aria-current="page"] {
        box-shadow: inset 3px 0 0 var(--hrc-color-brand);
    }

    body.hrc-design-system-v1 .hrc-workspace-main {
        display: grid;
        gap: var(--hrc-space-5);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
        gap: var(--hrc-grid-gap);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-card__body {
        display: grid;
        gap: var(--hrc-space-3);
        min-width: 0;
        padding: var(--hrc-space-5);
    }

    body.hrc-design-system-v1 .hrc-card__footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--hrc-space-2);
        padding: var(--hrc-space-3) var(--hrc-space-5);
        border-top: var(--hrc-border-width) solid var(--hrc-color-border);
    }

    body.hrc-design-system-v1 .hrc-stack {
        display: grid;
        gap: var(--hrc-space-3);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-cluster {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--hrc-space-2);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-split {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--hrc-grid-gap);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-player-layout {
        display: grid;
        grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
        min-width: 0;
        min-height: min(70dvh, 52rem);
        overflow: hidden;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-lg);
        background: var(--hrc-color-surface);
        box-shadow: var(--hrc-shadow-sm);
    }

    body.hrc-design-system-v1 .hrc-player-outline {
        min-width: 0;
        max-height: min(70dvh, 52rem);
        overflow-y: auto;
        padding: var(--hrc-space-4);
        border-right: var(--hrc-border-width) solid var(--hrc-color-border);
        background: var(--hrc-color-surface-soft);
        scrollbar-width: thin;
    }

    body.hrc-design-system-v1 .hrc-player-content {
        min-width: 0;
        padding: clamp(var(--hrc-space-4), 3vw, var(--hrc-space-8));
        overflow-wrap: anywhere;
    }

    body.hrc-design-system-v1 .hrc-player-content :where(img, video, iframe, object, embed) {
        max-width: 100%;
    }

    body.hrc-design-system-v1 .hrc-mobile-section-select {
        display: none;
    }

    body.hrc-design-system-v1.hrc-scroll-locked {
        overflow: hidden;
    }

    @media (max-width: 48rem) {
        body.hrc-design-system-v1 .hrc-workspace-layout {
            grid-template-columns: minmax(0, 1fr);
        }

        body.hrc-design-system-v1 .hrc-section-nav {
            display: none;
        }

        body.hrc-design-system-v1 .hrc-mobile-section-select {
            display: grid;
        }

        body.hrc-design-system-v1 .hrc-split {
            grid-template-columns: minmax(0, 1fr);
        }

        body.hrc-design-system-v1 .hrc-player-layout {
            grid-template-columns: minmax(0, 1fr);
        }

        body.hrc-design-system-v1 .hrc-player-outline {
            max-height: 15rem;
            border-right: 0;
            border-bottom: var(--hrc-border-width) solid var(--hrc-color-border);
        }

        body.hrc-design-system-v1 .hrc-mobile-card-table {
            min-width: 0;
        }

        body.hrc-design-system-v1 .hrc-mobile-card-table :where(thead, th) {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
        }

        body.hrc-design-system-v1 .hrc-mobile-card-table :where(tbody, tr, td) {
            display: block;
            width: 100%;
        }

        body.hrc-design-system-v1 .hrc-mobile-card-table tr {
            margin-block: var(--hrc-space-3);
            padding: var(--hrc-space-3);
            border: var(--hrc-border-width) solid var(--hrc-color-border);
            border-radius: var(--hrc-radius-md);
            background: var(--hrc-color-surface);
        }

        body.hrc-design-system-v1 .hrc-mobile-card-table td {
            display: grid;
            grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
            gap: var(--hrc-space-3);
            border: 0;
        }

        body.hrc-design-system-v1 .hrc-mobile-card-table td::before {
            content: attr(data-label);
            color: var(--hrc-color-text-muted);
            font-size: var(--hrc-text-xs);
            font-weight: var(--hrc-weight-semibold);
        }

    }

    @keyframes hrc-spin {
        to { rotate: 360deg; }
    }

    @keyframes hrc-skeleton {
        to { background-position-x: -200%; }
    }
}

/* Dashboard command center — compact Enterprise SaaS composition. */
@layer components {
    body.hrc-design-system-v1 .hrc-dashboard {
        gap: var(--hrc-space-4);
    }

    body.hrc-design-system-v1 .hrc-dashboard-hero {
        padding: clamp(var(--hrc-space-5), 2vw, var(--hrc-space-7));
        overflow: hidden;
        border-color: color-mix(in srgb, var(--hrc-color-brand) 18%, var(--hrc-color-border));
        border-radius: var(--hrc-radius-md);
        background: color-mix(in srgb, var(--hrc-color-brand-soft) 30%, var(--hrc-color-surface));
        box-shadow: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(13rem, auto);
        gap: var(--hrc-space-6);
        align-items: center;
    }

    body.hrc-design-system-v1 .hrc-dashboard-hero .hrc-hero__content {
        max-width: 60rem;
    }

    body.hrc-design-system-v1 .hrc-dashboard-hero .hrc-hero__eyebrow {
        color: color-mix(in srgb, var(--hrc-color-brand) 75%, var(--hrc-color-text));
    }

    body.hrc-design-system-v1 .hrc-dashboard-hero h1 {
        margin-top: var(--hrc-space-1);
        font-size: clamp(24px, 3.125vw, 30px);
        letter-spacing: -.035em;
    }

    body.hrc-design-system-v1 .hrc-dashboard-hero p {
        max-width: 54rem;
        margin-top: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .hrc-dashboard-hero .hrc-hero__actions {
        margin-top: var(--hrc-space-4);
    }

    body.hrc-design-system-v1 .hrc-dashboard-hero__meta {
        display: grid;
        gap: var(--hrc-space-2);
        min-width: 13rem;
        padding: var(--hrc-space-4);
        border: 1px solid color-mix(in srgb, var(--hrc-color-brand) 24%, var(--hrc-color-border));
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
        box-shadow: none;
        backdrop-filter: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-hero__meta span,
    body.hrc-design-system-v1 .hrc-dashboard-hero__meta small {
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-sm);
    }

    body.hrc-design-system-v1 .hrc-dashboard-hero__meta span {
        display: flex;
        gap: var(--hrc-space-2);
        align-items: center;
        color: var(--hrc-color-success);
        font-weight: 700;
    }

    body.hrc-design-system-v1 .hrc-dashboard-hero__meta strong {
        color: var(--hrc-color-text);
        font-size: var(--hrc-text-lg);
    }

    body.hrc-design-system-v1 .hrc-dashboard-setup {
        overflow: clip;
        border-radius: var(--hrc-radius-md);
        box-shadow: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-setup > summary {
        display: flex;
        gap: var(--hrc-space-3);
        align-items: center;
        justify-content: space-between;
        min-height: 3rem;
        padding: var(--hrc-space-3) var(--hrc-space-4);
        cursor: pointer;
        color: var(--hrc-color-text);
        font-weight: 750;
        list-style: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-setup > summary::-webkit-details-marker {
        display: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-setup .hrc-onboarding__list {
        padding: 0 var(--hrc-space-4) var(--hrc-space-4);
    }

    body.hrc-design-system-v1 .hrc-dashboard-kpis {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1 .hrc-dashboard-kpis .hrc-kpi {
        min-height: 8rem;
        padding: var(--hrc-space-4);
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "icon label"
            "value value"
            "meta meta";
        column-gap: var(--hrc-space-2);
        align-content: start;
        border-color: color-mix(in srgb, var(--hrc-kpi-accent, var(--hrc-color-brand)) 20%, var(--hrc-color-border));
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
        box-shadow: none;
        transform: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-kpis .hrc-kpi:hover {
        border-color: color-mix(in srgb, var(--hrc-kpi-accent, var(--hrc-color-brand)) 30%, var(--hrc-color-border));
        box-shadow: none;
        transform: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-kpis .hrc-kpi__icon {
        grid-area: icon;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: var(--hrc-radius-sm);
    }

    body.hrc-design-system-v1 .hrc-dashboard-kpis .hrc-kpi__label {
        grid-area: label;
        align-self: center;
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-kpis .hrc-kpi__value {
        grid-area: value;
        min-width: 0;
        max-width: 100%;
        margin-top: var(--hrc-space-2);
        font-size: clamp(1.45rem, 2.1vw, 2rem);
        line-height: var(--hrc-leading-tight);
        overflow-wrap: anywhere;
        white-space: normal;
    }

    body.hrc-design-system-v1 .hrc-dashboard-kpis .hrc-kpi__meta {
        grid-area: meta;
        margin-top: var(--hrc-space-1);
    }

    body.hrc-design-system-v1 .hrc-dashboard-grid--command {
        grid-template-columns: minmax(0, 1.55fr) minmax(19rem, .75fr);
        gap: var(--hrc-space-4);
        align-items: stretch;
    }

    body.hrc-design-system-v1 .hrc-dashboard-action-center,
    body.hrc-design-system-v1 .hrc-dashboard-quick,
    body.hrc-design-system-v1 .hrc-dashboard-timeline {
        padding: var(--hrc-space-5);
        border-color: var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        box-shadow: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-section-header {
        display: flex;
        gap: var(--hrc-space-3);
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: var(--hrc-space-4);
    }

    body.hrc-design-system-v1 .hrc-dashboard-section-header h2 {
        margin-top: var(--hrc-space-1);
        font-size: var(--hrc-text-xl);
    }

    body.hrc-design-system-v1 .hrc-dashboard-action-list {
        display: grid;
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .hrc-dashboard-action {
        --hrc-action-tone: var(--hrc-color-info);
        --hrc-preserved-action-muted: color-mix(in srgb, var(--hrc-color-text-muted) 90%, var(--hrc-color-text));
        display: grid;
        grid-template-columns: minmax(4.5rem, 7.5rem) minmax(0, 1fr) auto;
        gap: var(--hrc-space-3);
        align-items: center;
        min-height: 4.5rem;
        padding: var(--hrc-space-3);
        color: var(--hrc-color-text);
        text-decoration: none;
        border: 1px solid var(--hrc-color-border);
        border-left: 3px solid var(--hrc-action-tone);
        border-radius: var(--hrc-radius-sm);
        background: var(--hrc-color-surface);
        transition: border-color var(--hrc-motion-fast), background var(--hrc-motion-fast);
    }

    body.hrc-design-system-v1 .hrc-dashboard-action[data-state="danger"] { --hrc-action-tone: color-mix(in srgb, var(--hrc-action-danger, var(--hrc-color-danger)) 60%, var(--hrc-color-text)); }
    body.hrc-design-system-v1 .hrc-dashboard-action[data-state="warning"] { --hrc-action-tone: color-mix(in srgb, var(--hrc-color-warning) 75%, var(--hrc-color-text)); }
    body.hrc-design-system-v1 .hrc-dashboard-action[data-state="success"] { --hrc-action-tone: var(--hrc-color-success); }

    body.hrc-design-system-v1 .hrc-dashboard-action:hover {
        border-color: color-mix(in srgb, var(--hrc-action-tone) 32%, var(--hrc-color-border));
        border-left-color: var(--hrc-action-tone);
        background: color-mix(in srgb, var(--hrc-action-tone) 4%, var(--hrc-color-surface));
        box-shadow: none;
        transform: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-action:focus-visible {
        outline: 2px solid var(--hrc-color-brand);
        outline-offset: 2px;
        box-shadow: var(--hrc-focus-ring);
    }

    body.hrc-design-system-v1 .hrc-dashboard-action__metric {
        min-width: 0;
        max-width: 100%;
        color: var(--hrc-action-tone);
        font-size: var(--hrc-text-xl);
        font-weight: 850;
        font-variant-numeric: tabular-nums;
        line-height: var(--hrc-leading-tight);
        overflow-wrap: anywhere;
    }

    body.hrc-design-system-v1 .hrc-dashboard-action__copy {
        display: grid;
        gap: var(--hrc-space-1);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-action__copy strong,
    body.hrc-design-system-v1 .hrc-dashboard-action__copy small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.hrc-design-system-v1 .hrc-dashboard-action__copy small {
        color: var(--hrc-preserved-action-muted);
    }

    body.hrc-design-system-v1 .hrc-dashboard-action__cta {
        display: inline-flex;
        gap: var(--hrc-space-2);
        align-items: center;
        color: color-mix(in srgb, var(--hrc-color-brand) 75%, var(--hrc-color-text));
        font-size: var(--hrc-text-sm);
        font-weight: 750;
        white-space: nowrap;
    }

    body.hrc-design-system-v1 .hrc-dashboard-command-aside {
        display: grid;
        grid-template-rows: auto 1fr;
        gap: var(--hrc-space-4);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-quick__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .hrc-dashboard-quick__grid a {
        display: grid;
        gap: var(--hrc-space-2);
        min-height: 4.5rem;
        padding: var(--hrc-space-3);
        color: var(--hrc-color-text);
        text-decoration: none;
        border: 1px solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-sm);
        background: var(--hrc-color-surface);
        font-size: var(--hrc-text-sm);
        font-weight: 750;
        transition: border-color var(--hrc-motion-fast), background var(--hrc-motion-fast);
    }

    body.hrc-design-system-v1 .hrc-dashboard-quick__grid a i {
        color: var(--hrc-color-brand);
        font-size: var(--hrc-text-lg);
    }

    body.hrc-design-system-v1 .hrc-dashboard-quick__grid a:hover {
        border-color: color-mix(in srgb, var(--hrc-color-brand) 36%, var(--hrc-color-border));
        background: color-mix(in srgb, var(--hrc-color-brand) 5%, var(--hrc-color-surface));
    }

    body.hrc-design-system-v1 .hrc-dashboard-timeline ul {
        display: grid;
        gap: var(--hrc-space-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-timeline li {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: var(--hrc-space-3);
        align-items: center;
        min-height: 3.25rem;
    }

    body.hrc-design-system-v1 .hrc-dashboard-timeline li > span {
        width: .625rem;
        height: .625rem;
        border: 2px solid var(--hrc-color-surface);
        border-radius: 999px;
        background: var(--hrc-color-brand);
        box-shadow: 0 0 0 3px var(--hrc-color-brand-soft);
    }

    body.hrc-design-system-v1 .hrc-dashboard-timeline li div {
        display: grid;
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-timeline li small {
        overflow: hidden;
        color: var(--hrc-color-text-muted);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.hrc-design-system-v1 .hrc-dashboard-timeline li a {
        display: grid;
        width: var(--hrc-touch-target);
        height: var(--hrc-touch-target);
        place-items: center;
        color: var(--hrc-color-brand);
        border-radius: var(--hrc-radius-md);
    }

    body.hrc-design-system-v1 .hrc-dashboard-report {
        display: grid;
        gap: var(--hrc-space-4);
        padding: var(--hrc-space-5);
        border: 1px solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
        box-shadow: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-report__header {
        padding: 0;
        border: 0;
        background: transparent;
    }

    body.hrc-design-system-v1 .hrc-dashboard-report__copy h2 {
        font-size: var(--hrc-text-xl);
    }

    body.hrc-design-system-v1 .hrc-dashboard-report .hrc-dashboard-disclosure__body {
        display: grid;
        gap: var(--hrc-space-4);
        padding: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-report .hrc-filter-panel {
        margin: 0;
        padding: var(--hrc-space-3);
        border-radius: var(--hrc-radius-sm);
        background: var(--hrc-color-surface-soft);
        box-shadow: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard :where(.hrc-input, .hrc-select),
    body.hrc-design-system-v1 .hrc-dashboard .qm-select-wrap,
    body.hrc-design-system-v1 .hrc-dashboard .qm-select-control {
        min-height: var(--hrc-touch-target);
    }

    body.hrc-design-system-v1 .hrc-dashboard-report .hrc-filter-panel .hrc-field :is(.hrc-input, .hrc-select) {
        height: var(--hrc-touch-target);
        min-height: var(--hrc-touch-target);
    }

    body.hrc-design-system-v1 .hrc-dashboard-ranking__year .hrc-select {
        height: var(--hrc-touch-target);
        min-height: var(--hrc-touch-target);
    }

    body.hrc-design-system-v1 .hrc-dashboard-report .qm-select-wrap {
        display: grid;
        min-height: var(--hrc-touch-target);
    }

    body.hrc-design-system-v1 .hrc-dashboard-report .qm-select-control {
        align-self: stretch;
    }

    body.hrc-design-system-v1 .hrc-dashboard-report .hrc-filter-grid {
        grid-template-columns: minmax(10rem, 1fr) minmax(8rem, .6fr) auto;
        gap: var(--hrc-space-3);
        align-items: end;
    }

    body.hrc-design-system-v1 .hrc-dashboard-report .hrc-dashboard-filter-note {
        grid-column: 1 / -1;
        margin: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-active-filters {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--hrc-space-2);
        min-width: 0;
    }

    body.hrc-design-system-v1 .hrc-dashboard-active-filters .hrc-btn {
        margin-inline-start: auto;
    }

    body.hrc-design-system-v1 .hrc-dashboard-grid--charts {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1 .hrc-dashboard-chart {
        min-height: 0;
        padding: var(--hrc-space-5);
        border-radius: var(--hrc-radius-md);
        box-shadow: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-chart__canvas {
        height: clamp(16rem, 27vw, 21rem);
        min-height: 16rem;
    }

    body.hrc-design-system-v1 .hrc-dashboard-chart[data-state="empty"] .hrc-dashboard-chart__canvas,
    body.hrc-design-system-v1 .hrc-dashboard-chart[data-state="error"] .hrc-dashboard-chart__canvas {
        display: grid;
        place-items: center;
    }

    body.hrc-design-system-v1 .hrc-dashboard-chart__canvas canvas[hidden] {
        display: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-table-card {
        margin: 0;
        overflow: hidden;
        border-radius: var(--hrc-radius-md);
        box-shadow: none;
    }

    body.hrc-design-system-v1 .hrc-dashboard-table-card .hrc-table-scroll {
        max-height: 24rem;
        overflow: auto;
    }

    body.hrc-design-system-v1 .hrc-dashboard-table-card .hrc-table thead {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    @media (min-width: 1024px) {
        body.hrc-design-system-v1 .hrc-dashboard-hero h1 {
            font-size: clamp(32px, 2.4vw, 40px);
        }
    }

    @media (max-width: 1279px) {
        body.hrc-design-system-v1 .hrc-dashboard-kpis {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 1023px) {
        body.hrc-design-system-v1 .hrc-dashboard-grid--command {
            grid-template-columns: minmax(0, 1fr);
        }

        body.hrc-design-system-v1 .hrc-dashboard-command-aside {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: auto;
        }
    }

    @media (max-width: 767px) {
        body.hrc-design-system-v1 .hrc-dashboard-hero__grid,
        body.hrc-design-system-v1 .hrc-dashboard-command-aside {
            grid-template-columns: minmax(0, 1fr);
        }

        body.hrc-design-system-v1 .hrc-dashboard-hero__meta {
            min-width: 0;
        }

        body.hrc-design-system-v1 .hrc-dashboard-kpis {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        body.hrc-design-system-v1 .hrc-dashboard-action {
            grid-template-columns: minmax(3.25rem, 5.5rem) minmax(0, 1fr) auto;
        }

        body.hrc-design-system-v1 .hrc-dashboard-action__copy small {
            white-space: normal;
        }

        body.hrc-design-system-v1 .hrc-dashboard-action__cta {
            width: 2.25rem;
            height: 2.25rem;
            gap: 0;
            justify-content: center;
            overflow: hidden;
            font-size: 0;
        }

        body.hrc-design-system-v1 .hrc-dashboard-action__cta i {
            color: currentColor;
            font-size: var(--hrc-icon-sm);
        }

        body.hrc-design-system-v1 .hrc-dashboard-report__header {
            align-items: flex-start;
        }

        body.hrc-design-system-v1 .hrc-dashboard-report .hrc-filter-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        body.hrc-design-system-v1 .hrc-dashboard-filter-action {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 559px) {
        body.hrc-design-system-v1 .hrc-dashboard {
            gap: var(--hrc-space-3);
        }

        body.hrc-design-system-v1 .hrc-dashboard-hero,
        body.hrc-design-system-v1 .hrc-dashboard-action-center,
        body.hrc-design-system-v1 .hrc-dashboard-quick,
        body.hrc-design-system-v1 .hrc-dashboard-timeline,
        body.hrc-design-system-v1 .hrc-dashboard-report,
        body.hrc-design-system-v1 .hrc-dashboard-chart {
            padding: var(--hrc-space-4);
            border-radius: var(--hrc-radius-md);
        }

        body.hrc-design-system-v1 .hrc-dashboard-hero .hrc-hero__actions,
        body.hrc-design-system-v1 .hrc-dashboard-hero .hrc-btn {
            width: 100%;
        }

        body.hrc-design-system-v1 .hrc-dashboard-kpis {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--hrc-space-2);
        }

        body.hrc-design-system-v1 .hrc-dashboard-kpis .hrc-kpi {
            min-height: 6.75rem;
        }

        body.hrc-design-system-v1 .hrc-dashboard-action {
            grid-template-columns: minmax(3rem, 5rem) minmax(0, 1fr) auto;
            min-height: 4rem;
        }

        body.hrc-design-system-v1 .hrc-dashboard-action__metric {
            min-width: 0;
            font-size: var(--hrc-text-lg);
        }

        body.hrc-design-system-v1 .hrc-dashboard-report__header {
            grid-template-columns: auto minmax(0, 1fr);
        }

        body.hrc-design-system-v1 .hrc-dashboard-report__header > .hrc-badge {
            grid-column: 1 / -1;
            justify-self: start;
        }

        body.hrc-design-system-v1 .hrc-dashboard-report .hrc-filter-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        body.hrc-design-system-v1 .hrc-dashboard-filter-action,
        body.hrc-design-system-v1 .hrc-dashboard-filter-note {
            grid-column: auto;
        }

        body.hrc-design-system-v1 .hrc-dashboard-filter-action .hrc-btn {
            width: 100%;
        }

        body.hrc-design-system-v1 .hrc-dashboard-active-filters .hrc-btn {
            width: 100%;
            margin-inline-start: 0;
        }

        body.hrc-design-system-v1 .hrc-dashboard-chart__canvas {
            height: 15rem;
            min-height: 15rem;
        }
    }
}

@layer utilities {
    body.hrc-design-system-v1 .hrc-u-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    body.hrc-design-system-v1 .hrc-u-number,
    body.hrc-design-system-v1 .hrc-u-percentage,
    body.hrc-design-system-v1 .hrc-u-currency {
        min-width: 0;
        overflow: visible;
        font-family: var(--hrc-font-number);
        font-variant-numeric: tabular-nums;
        text-align: right;
        text-overflow: clip;
        white-space: nowrap;
    }

    body.hrc-design-system-v1 .hrc-u-two-lines {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

/* source: public/assets/design-responsive.css */
/* HRConnect Design System — shared responsive, motion and print contracts. */
@layer components {
    body.hrc-design-system-v1 .qm-user-chip__meta {
        display: block;
        min-width: 0;
    }

    @media (max-width: 1439.98px) {
        body.hrc-design-system-v1 .hrc-layout-container {
            padding-inline: clamp(var(--hrc-space-4), 2vw, var(--hrc-space-6));
        }
    }

    @media (max-width: 1199.98px) {
        body.hrc-design-system-v1 .qm-user-chip__meta {
            display: none;
        }

        body.hrc-design-system-v1 :where(.hrc-kpi-grid, .hrc-filter-grid) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 1023.98px) {
        body.hrc-design-system-v1 .hrc-hero {
            grid-template-columns: minmax(0, 1fr);
            padding: var(--hrc-space-6);
        }

        body.hrc-design-system-v1 .hrc-hero__actions {
            justify-content: flex-start;
        }
    }

    @media (max-width: 767.98px) {
        body.hrc-design-system-v1 .hrc-layout-page {
            gap: var(--hrc-space-4);
        }

        body.hrc-design-system-v1 .hrc-layout-container {
            padding-inline: var(--hrc-space-3);
        }

        body.hrc-design-system-v1 :where(.hrc-kpi-grid, .hrc-filter-grid) {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--hrc-space-3);
        }

        body.hrc-design-system-v1 .hrc-hero {
            min-height: 0;
            padding: var(--hrc-space-5);
        }

        body.hrc-design-system-v1 .hrc-hero :where(h1, h2) {
            font-size: 1.5rem;
        }

        body.hrc-design-system-v1 :where(.hrc-hero__actions, .hrc-quick-actions) {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            width: 100%;
        }

        body.hrc-design-system-v1 :where(.hrc-hero__actions, .hrc-quick-actions) > :where(.hrc-btn, .btn) {
            width: 100%;
        }

        body.hrc-design-system-v1 .hrc-tab {
            min-height: var(--hrc-control-height-lg);
        }

        body.hrc-design-system-v1 .hrc-filter-panel,
        body.hrc-design-system-v1 .hrc-form-section {
            padding: var(--hrc-space-4);
        }

        body.hrc-design-system-v1 .hrc-dialog,
        body.hrc-design-system-v1 .hrc-drawer {
            width: calc(100vw - 1rem);
            max-width: none;
            max-height: calc(100dvh - 1rem);
            margin: .5rem;
        }

        body.hrc-design-system-v1 .hrc-dialog__body {
            max-height: calc(100dvh - 150px);
        }

        body.hrc-design-system-v1 .hrc-toast-region {
            inset: auto var(--hrc-space-2) var(--hrc-space-2);
            width: auto;
        }

        body.hrc-design-system-v1 .hrc-pagination {
            align-items: stretch;
        }
    }

    @media (max-width: 390px) {
        body.hrc-design-system-v1 .hrc-hero,
        body.hrc-design-system-v1 .hrc-filter-panel,
        body.hrc-design-system-v1 .hrc-form-section {
            padding: var(--hrc-space-4);
            border-radius: var(--hrc-radius-sm);
        }

        body.hrc-design-system-v1 .hrc-btn {
            min-height: var(--hrc-control-height-lg);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        body.hrc-design-system-v1 *,
        body.hrc-design-system-v1 *::before,
        body.hrc-design-system-v1 *::after {
            scroll-behavior: auto;
            transition-duration: .01ms;
            animation-duration: .01ms;
            animation-iteration-count: 1;
        }
    }

    @media print {
        body.hrc-design-system-v1 {
            background: var(--hrc-static-white);
            color: var(--hrc-neutral-900);
        }

        body.hrc-design-system-v1 :where(.qm-sidebar, .qm-topbar, .qm-mobile-drawer, .hrc-quick-actions, .hrc-form-footer, .hrc-toast-region, dialog:not([open])) {
            display: none;
        }

        body.hrc-design-system-v1 :where(.hrc-layout-container, .qm-content) {
            width: 100%;
            max-width: none;
            padding: 0;
        }

        body.hrc-design-system-v1 :where(.hrc-surface, .hrc-hero, .hrc-kpi, .hrc-filter-panel, .hrc-form-section, .hrc-table-scroll) {
            break-inside: avoid;
            border-color: var(--hrc-neutral-300);
            background: var(--hrc-static-white);
            color: var(--hrc-neutral-900);
            box-shadow: none;
        }

        body.hrc-design-system-v1 .hrc-table {
            min-width: 0;
        }

        body.hrc-design-system-v1 .hrc-table :where(th, td) {
            background: var(--hrc-static-white);
            color: var(--hrc-neutral-900);
        }
    }
}

/* source: public/assets/design-adapter-erp.css */
/*
 * ERP/Admin adapter. This bridge is intentionally unlayered because the
 * existing ERP stylesheets are also unlayered. Every rule remains opt-in and
 * namespaced, so it can win the legacy cascade without priority flags.
 */
body.hrc-design-system-v1.hrc-family-erp .qm-content {
    width: min(100%, var(--hrc-container-xl));
    max-width: var(--hrc-container-xl);
    min-width: 0;
    margin-inline: auto;
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-erp .qm-topbar {
    min-height: var(--hrc-topbar-height);
    border-bottom-color: var(--hrc-color-border);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-erp :where(.qm-sidebar, .qm-mobile-drawer) {
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-erp .qm-content :where(
    .card,
    .panel,
    .erp-card,
    .erp-panel,
    .sys-card,
    .module-card,
    .dashboard-card,
    .filter-card,
    .filter-panel,
    .search-panel,
    .table-card,
    .data-card
) {
    border-color: var(--hrc-color-border);
    background-color: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-erp .qm-content :where(.form-control, .form-select, input, select, textarea) {
    min-height: var(--hrc-control-height-sm);
    border-color: var(--hrc-color-border-strong);
    border-radius: var(--hrc-radius-sm);
}

body.hrc-design-system-v1.hrc-family-erp .qm-content .hrc-switch {
    position: relative;
}

body.hrc-design-system-v1.hrc-family-erp .qm-content .hrc-switch input {
    position: absolute;
    inset: 0 auto auto 0;
    width: 42px;
    height: 24px;
    min-height: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

body.hrc-design-system-v1.hrc-family-erp .qm-content :where(.dropdown-menu, .offcanvas, .modal-content) {
    border-color: var(--hrc-color-border);
    background: var(--hrc-color-surface-raised);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-erp .hrc-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
    body.hrc-design-system-v1.hrc-family-erp .hrc-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body.hrc-design-system-v1.hrc-family-erp .hrc-kpi-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * R3 priority-module bridge. The module class is resolved from the canonical
 * request path, including legacy aliases, so rollout selectors remain stable
 * without changing route, form, JavaScript, RBAC, or workspace contracts.
 */
body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-workers,
    .hrc-module-workforce,
    .hrc-module-attendance,
    .hrc-module-recruitment,
    .hrc-module-labor_data,
    .hrc-module-companies,
    .hrc-module-legal_entities,
    .hrc-module-officers,
    .hrc-module-individual_collaborators,
    .hrc-module-collaborators
) .qm-content {
    --hrc-module-accent: var(--hrc-color-brand);
    --hrc-module-accent-soft: var(--hrc-color-brand-soft);
    container-type: inline-size;
}

body.hrc-design-system-v1.hrc-family-erp.hrc-module-attendance .qm-content {
    --hrc-module-accent: var(--hrc-attendance-present);
    --hrc-module-accent-soft: var(--hrc-color-success-soft);
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-recruitment,
    .hrc-module-labor_data,
    .hrc-module-individual_collaborators,
    .hrc-module-collaborators
) .qm-content {
    --hrc-module-accent: var(--hrc-hr-onboarding);
    --hrc-module-accent-soft: var(--hrc-color-info-soft);
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-workers,
    .hrc-module-workforce,
    .hrc-module-attendance,
    .hrc-module-recruitment,
    .hrc-module-labor_data,
    .hrc-module-companies,
    .hrc-module-legal_entities,
    .hrc-module-officers,
    .hrc-module-individual_collaborators,
    .hrc-module-collaborators
) .qm-content :where(
    .wf-card,
    .wf-panel,
    .ld-panel,
    .ld-summary-card,
    .officer-card,
    .officer-metrics,
    .ic-panel,
    .ic4-card,
    .ic-public-card,
    .b360-card,
    .erp-panel,
    .erp-table-card,
    .panel,
    .card
) {
    min-width: 0;
    border-color: var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    box-shadow: var(--hrc-shadow-xs);
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-workers,
    .hrc-module-workforce,
    .hrc-module-attendance,
    .hrc-module-recruitment,
    .hrc-module-labor_data,
    .hrc-module-companies,
    .hrc-module-legal_entities,
    .hrc-module-officers,
    .hrc-module-individual_collaborators,
    .hrc-module-collaborators
) .qm-content :where(
    .wf-form-grid,
    .wf-need-grid,
    .ld-form-grid,
    .ic-form-grid,
    .officer-two-col,
    .officer-form,
    .b360-form-grid,
    .filter-grid
) {
    display: grid;
    min-width: 0;
    gap: var(--hrc-grid-gap);
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-workers,
    .hrc-module-workforce,
    .hrc-module-attendance,
    .hrc-module-recruitment,
    .hrc-module-labor_data,
    .hrc-module-companies,
    .hrc-module-legal_entities,
    .hrc-module-officers,
    .hrc-module-individual_collaborators,
    .hrc-module-collaborators
) .qm-content :where(
    .wf-table-wrap,
    .wf-drilldown-table-wrap,
    .wf-scoring-table-wrap,
    .ld-table-wrap,
    .ic-table-wrap,
    .officers-table-wrap,
    .erp-table-wrap,
    .table-responsive
) {
    max-width: 100%;
    border-color: var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-workers,
    .hrc-module-workforce,
    .hrc-module-attendance,
    .hrc-module-recruitment,
    .hrc-module-labor_data,
    .hrc-module-companies,
    .hrc-module-legal_entities,
    .hrc-module-officers,
    .hrc-module-individual_collaborators,
    .hrc-module-collaborators
) .qm-content :where(
    .wf-table,
    .wf-drilldown-table,
    .wf-scoring-table,
    .ic-table,
    .officers-table,
    .erp-table,
    table
) :where(th, td) {
    border-color: var(--hrc-color-border);
    vertical-align: middle;
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-workers,
    .hrc-module-workforce,
    .hrc-module-attendance,
    .hrc-module-recruitment,
    .hrc-module-labor_data,
    .hrc-module-companies,
    .hrc-module-legal_entities,
    .hrc-module-officers,
    .hrc-module-individual_collaborators,
    .hrc-module-collaborators
) .qm-content :where(
    .wf-btn,
    .wf-icon-btn,
    .ld-btn,
    .ld-icon-btn,
    .ic-btn,
    .ic-icon-btn,
    .officer-btn,
    .btn
) {
    min-height: var(--hrc-control-height);
    border-radius: var(--hrc-radius-control);
    transition:
        background var(--hrc-motion-fast) var(--hrc-ease-standard),
        border-color var(--hrc-motion-fast) var(--hrc-ease-standard),
        color var(--hrc-motion-fast) var(--hrc-ease-standard),
        box-shadow var(--hrc-motion-fast) var(--hrc-ease-standard);
}

body.hrc-design-system-v1.hrc-family-erp.hrc-module-individual_collaborators .qm-content :where(
    .ic-btn,
    .ic-icon-btn
) {
    min-height: var(--hrc-control-height-lg);
}

body.hrc-design-system-v1.hrc-family-erp.hrc-module-individual_collaborators .qm-content .ic-icon-btn {
    min-width: var(--hrc-control-height-lg);
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-workers,
    .hrc-module-workforce,
    .hrc-module-attendance,
    .hrc-module-recruitment,
    .hrc-module-labor_data,
    .hrc-module-companies,
    .hrc-module-legal_entities,
    .hrc-module-officers,
    .hrc-module-individual_collaborators,
    .hrc-module-collaborators
) .qm-content :where(
    .wf-date-control,
    .form-control,
    .form-select,
    input:not([type="checkbox"], [type="radio"], [type="hidden"]),
    select,
    textarea
) {
    min-height: var(--hrc-control-height);
    border-color: var(--hrc-color-border-strong);
    border-radius: var(--hrc-radius-control);
    background-color: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-workers,
    .hrc-module-workforce,
    .hrc-module-attendance,
    .hrc-module-recruitment,
    .hrc-module-labor_data,
    .hrc-module-companies,
    .hrc-module-legal_entities,
    .hrc-module-officers,
    .hrc-module-individual_collaborators,
    .hrc-module-collaborators
) .qm-content :where(
    .wf-btn,
    .wf-icon-btn,
    .ld-btn,
    .ld-icon-btn,
    .ic-btn,
    .ic-icon-btn,
    .officer-btn,
    .btn,
    input,
    select,
    textarea,
    a
):focus-visible {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
    box-shadow: var(--hrc-focus-ring);
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-workers,
    .hrc-module-workforce,
    .hrc-module-attendance,
    .hrc-module-recruitment,
    .hrc-module-labor_data,
    .hrc-module-companies,
    .hrc-module-legal_entities,
    .hrc-module-officers,
    .hrc-module-individual_collaborators,
    .hrc-module-collaborators
) .qm-content :where(
    .wf-btn,
    .ld-btn,
    .ic-btn,
    .officer-btn,
    .btn,
    input,
    select,
    textarea
):disabled {
    cursor: not-allowed;
    opacity: var(--hrc-opacity-disabled);
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-workers,
    .hrc-module-workforce,
    .hrc-module-attendance,
    .hrc-module-recruitment,
    .hrc-module-labor_data,
    .hrc-module-companies,
    .hrc-module-legal_entities,
    .hrc-module-officers,
    .hrc-module-individual_collaborators,
    .hrc-module-collaborators
) .qm-content :where(
    .wf-dialog-shell,
    .ld-dialog,
    .ic-dialog,
    .officer-dialog,
    .modal-content
) {
    max-width: min(100%, var(--hrc-container-md));
    max-height: min(90dvh, 900px);
    border-color: var(--hrc-color-border);
    border-radius: var(--hrc-radius-lg);
    background: var(--hrc-color-surface-raised);
    color: var(--hrc-color-text);
    overflow: hidden;
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-workers,
    .hrc-module-workforce,
    .hrc-module-attendance,
    .hrc-module-recruitment,
    .hrc-module-labor_data,
    .hrc-module-companies,
    .hrc-module-legal_entities,
    .hrc-module-officers,
    .hrc-module-individual_collaborators,
    .hrc-module-collaborators
) .qm-content :where(.wf-dialog-body, .ld-dialog-body, .ic-dialog-body, .officer-dialog-body, .modal-body) {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-workers,
    .hrc-module-workforce,
    .hrc-module-attendance,
    .hrc-module-recruitment,
    .hrc-module-labor_data,
    .hrc-module-companies,
    .hrc-module-legal_entities,
    .hrc-module-officers,
    .hrc-module-individual_collaborators,
    .hrc-module-collaborators
) .qm-content :where(
    .wf-empty,
    .ld-state,
    .ic-empty,
    .officers-empty,
    .officer-empty-inline,
    .empty-state
) {
    border-color: var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-muted);
}

@container (max-width: 767px) {
    body.hrc-design-system-v1.hrc-family-erp:is(
        .hrc-module-workers,
        .hrc-module-workforce,
        .hrc-module-attendance,
        .hrc-module-recruitment,
        .hrc-module-labor_data,
        .hrc-module-companies,
        .hrc-module-legal_entities,
        .hrc-module-officers,
        .hrc-module-individual_collaborators,
        .hrc-module-collaborators
    ) .qm-content :where(
        .wf-form-grid,
        .wf-need-grid,
        .ld-form-grid,
        .ic-form-grid,
        .officer-two-col,
        .officer-form,
        .b360-form-grid,
        .filter-grid
    ) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    body.hrc-design-system-v1.hrc-family-erp:is(
        .hrc-module-workers,
        .hrc-module-workforce,
        .hrc-module-attendance,
        .hrc-module-recruitment,
        .hrc-module-labor_data,
        .hrc-module-companies,
        .hrc-module-legal_entities,
        .hrc-module-officers,
        .hrc-module-individual_collaborators,
        .hrc-module-collaborators
    ) .qm-content :where(.wf-btn, .wf-icon-btn, .ld-btn, .ld-icon-btn, .ic-btn, .ic-icon-btn, .officer-btn, .btn) {
        min-height: var(--hrc-control-height-lg);
    }
}

/*
 * R2 shell contract. Existing qm-* selectors remain authoritative for layout;
 * these semantic classes provide a stable opt-in boundary and interaction
 * states without duplicating the legacy ERP component rules.
 */
body.hrc-design-system-v1.hrc-family-erp [data-hrc-shell="erp"] {
    background: var(--hrc-color-bg-app);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-erp :where(.hrc-layout-main, .hrc-layout-content) {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-family-erp .hrc-layout-sidebar {
    border-color: var(--hrc-color-border);
}

body.hrc-design-system-v1.hrc-family-erp .hrc-layout-topbar {
    border-color: var(--hrc-color-border);
    box-shadow: var(--hrc-shadow-xs);
}

body.hrc-design-system-v1.hrc-family-erp .hrc-navigation :where(.qm-nav-link, .qm-nav-sublink, .qm-nav-toggle) {
    border-radius: var(--hrc-radius-sm);
    color: var(--hrc-color-text-muted);
    transition:
        background var(--hrc-motion-fast) var(--hrc-ease-standard),
        color var(--hrc-motion-fast) var(--hrc-ease-standard),
        box-shadow var(--hrc-motion-fast) var(--hrc-ease-standard);
}

body.hrc-design-system-v1.hrc-family-erp .hrc-navigation :where(.qm-nav-link, .qm-nav-sublink, .qm-nav-toggle):hover {
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-erp .hrc-navigation :where(.qm-nav-link, .qm-nav-sublink).active,
body.hrc-design-system-v1.hrc-family-erp .hrc-navigation :where(.qm-nav-link, .qm-nav-sublink)[aria-current="page"] {
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-family-erp .hrc-shell-breadcrumb.hrc-breadcrumb {
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-family-erp .hrc-shell-breadcrumb.hrc-breadcrumb strong {
    color: var(--hrc-color-text);
}

/*
 * R4 collaboration, learning and customer-service modules. These rules bridge
 * existing module selectors to shared tokens without changing any behavior
 * hooks, route contracts or workspace boundaries.
 */
body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-zalo,
    .hrc-module-social_crm,
    .hrc-module-customer_portal,
    .hrc-module-lms,
    .hrc-module-documents
) .qm-content {
    min-width: 0;
    container-type: inline-size;
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-zalo,
    .hrc-module-social_crm,
    .hrc-module-customer_portal,
    .hrc-module-lms,
    .hrc-module-documents
) .qm-content :where(
    .zpm-section,
    .zws-card,
    .zws-panel,
    .scrm-dialog,
    .scrm-state,
    .marketing-card,
    .marketing-panel,
    .cs-card,
    .tr-card,
    .tr-course,
    .doclib-card,
    .doclib-panel,
    .doclib-feature-card
) {
    min-width: 0;
    border-color: var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    box-shadow: var(--hrc-shadow-xs);
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-zalo,
    .hrc-module-social_crm,
    .hrc-module-customer_portal,
    .hrc-module-lms,
    .hrc-module-documents
) .qm-content :where(
    .zpm-table-wrap,
    .zws-table-wrap,
    .marketing-table-wrap,
    .scrm-chat-history,
    .table-responsive,
    .doclib-list
) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-zalo,
    .hrc-module-social_crm,
    .hrc-module-customer_portal,
    .hrc-module-lms,
    .hrc-module-documents
) .qm-content :where(
    .scrm-btn,
    .mkt-icon-btn,
    .zpm-actions button,
    .zws-actions button,
    .doclib-card-actions button,
    .btn,
    button,
    input,
    select,
    textarea
) {
    min-height: var(--hrc-control-height);
    border-radius: var(--hrc-radius-control);
}

body.hrc-design-system-v1.hrc-family-erp:is(
    .hrc-module-zalo,
    .hrc-module-social_crm,
    .hrc-module-customer_portal,
    .hrc-module-lms,
    .hrc-module-documents
) .qm-content :where(a, button, input, select, textarea):focus-visible {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
    box-shadow: var(--hrc-focus-ring);
}

@container (max-width: 767px) {
    body.hrc-design-system-v1.hrc-family-erp:is(
        .hrc-module-zalo,
        .hrc-module-social_crm,
        .hrc-module-customer_portal,
        .hrc-module-lms,
        .hrc-module-documents
    ) .qm-content :where(
        .scrm-form-grid,
        .marketing-grid,
        .marketing-form,
        .cs-grid,
        .tr-grid,
        .doclib-admin-grid,
        .doclib-featured-grid,
        .doclib-form-row
    ) {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.hrc-design-system-v1.hrc-family-erp .qm-content :where(
    .nav-tabs,
    .tabs,
    .module-tabs,
    .erp-tabs,
    .sys-tabs,
    .zws-tabs
) {
    min-width: 0;
    border-color: var(--hrc-color-border);
    background: var(--hrc-color-surface);
    scrollbar-width: thin;
}

body.hrc-design-system-v1.hrc-family-erp .qm-content :where(
    .nav-tabs .nav-link,
    .tabs a,
    .tabs button,
    .module-tabs a,
    .module-tabs button,
    .erp-tabs a,
    .erp-tabs button,
    .sys-tabs a,
    .sys-tabs button,
    .zws-tabs a,
    .zws-tabs button
) {
    min-height: var(--hrc-control-height);
    border-radius: var(--hrc-radius-sm);
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-family-erp .qm-content :where(
    .nav-tabs .nav-link.active,
    .tabs .active,
    .tabs [aria-selected="true"],
    .module-tabs .active,
    .erp-tabs .active,
    .sys-tabs .active,
    .zws-tabs .active
) {
    border-color: transparent;
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

@media (max-width: 767.98px) {
    body.hrc-design-system-v1.hrc-family-erp .qm-content :where(
        .nav-tabs,
        .tabs,
        .module-tabs,
        .erp-tabs,
        .sys-tabs,
        .zws-tabs
    ) {
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    body.hrc-design-system-v1.hrc-family-erp .qm-content :where(
        .nav-tabs .nav-link,
        .tabs a,
        .tabs button,
        .module-tabs a,
        .module-tabs button,
        .erp-tabs a,
        .erp-tabs button,
        .sys-tabs a,
        .sys-tabs button,
        .zws-tabs a,
        .zws-tabs button
    ) {
        flex: 0 0 auto;
        min-height: var(--hrc-control-height-lg);
        scroll-snap-align: start;
    }
}

@media (max-width: 767.98px) {
    body.hrc-design-system-v1.hrc-family-erp:is(
        .hrc-module-zalo,
        .hrc-module-social_crm,
        .hrc-module-customer_portal,
        .hrc-module-lms,
        .hrc-module-documents
    ) .qm-content :where(
        .scrm-btn,
        .mkt-icon-btn,
        .zpm-actions button,
        .zws-actions button,
        .doclib-card-actions button,
        .btn,
        button
    ) {
        min-height: var(--hrc-control-height-lg);
    }
}

/* source: public/assets/design-adapter-finance.css */
/*
 * Finance adapter. It is deliberately unlayered because the existing finance
 * bundles are unlayered too; all rules remain opt-in and fully namespaced.
 */
body.hrc-design-system-v1.hrc-family-finance {
    --hrc-family-positive: var(--hrc-finance-income);
    --hrc-family-negative: var(--hrc-finance-expense);
    --hrc-family-primary: var(--hrc-finance-receivable);
    --hrc-family-attention: var(--hrc-finance-payable);
    --hrc-color-divider: var(--hrc-color-border, currentColor);
    --hrc-color-on-brand: var(--hrc-neutral-0, var(--hrc-color-surface));
    --hrc-color-surface-hover: color-mix(in srgb, var(--hrc-color-brand, currentColor) 8%, var(--hrc-color-surface, transparent));
    --hrc-color-surface-subtle: var(--hrc-color-surface-soft, var(--hrc-color-surface, transparent));
    --hrc-color-surface-muted: var(--hrc-color-surface-soft, var(--hrc-color-surface, transparent));
}

body.hrc-design-system-v1.hrc-family-finance .qm-content {
    min-width: 0;
    color: var(--hrc-color-text);
    container-type: inline-size;
}

body.hrc-design-system-v1.hrc-family-finance .qm-content :where(
    .accounting-page,
    .erp2050-shell,
    .erp-panel,
    .erp-table-card,
    .erp-form-card,
    .erp2050-summary-card,
    .erp2050-filter-panel,
    .finance-list-filter,
    .panel,
    .card
) {
    min-width: 0;
    border-color: var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    box-shadow: var(--hrc-shadow-xs);
}

body.hrc-design-system-v1.hrc-family-finance .qm-content :where(
    .finance-filter-grid,
    .erp-filter-grid,
    .erp2050-summary-grid,
    .erp-summary-grid
) {
    display: grid;
    min-width: 0;
    gap: var(--hrc-grid-gap);
}

body.hrc-design-system-v1.hrc-family-finance .qm-content :where(
    .finance-list-table-wrap,
    .erp-table-wrap,
    .table-responsive,
    .datatable-wrap
) {
    max-width: 100%;
    border-color: var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

body.hrc-design-system-v1.hrc-family-finance .qm-content :where(
    .erp-table,
    .erp2050-datatable,
    table
) :where(th, td) {
    border-color: var(--hrc-color-border);
    vertical-align: middle;
}

body.hrc-design-system-v1.hrc-family-finance .qm-content :where(
    .amount,
    .money,
    .erp-money,
    [data-type="currency"],
    [data-column-type="number"],
    [data-column-type="percentage"]
) {
    font-family: var(--hrc-font-number);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-family-finance .qm-content :where(.is-income, [data-finance-state="income"]) {
    color: var(--hrc-family-positive);
}

body.hrc-design-system-v1.hrc-family-finance .qm-content :where(.is-expense, [data-finance-state="expense"]) {
    color: var(--hrc-family-negative);
}

body.hrc-design-system-v1.hrc-family-finance .qm-content :where(
    .form-control,
    .form-select,
    input:not([type="checkbox"], [type="radio"], [type="hidden"]),
    select,
    textarea
) {
    min-height: var(--hrc-control-height);
    border-color: var(--hrc-color-border-strong);
    border-radius: var(--hrc-radius-control);
    background-color: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-finance .qm-content :where(.btn, .erp-btn, .finance-btn) {
    min-height: var(--hrc-control-height);
    border-radius: var(--hrc-radius-control);
    transition:
        background var(--hrc-motion-fast) var(--hrc-ease-standard),
        border-color var(--hrc-motion-fast) var(--hrc-ease-standard),
        color var(--hrc-motion-fast) var(--hrc-ease-standard),
        box-shadow var(--hrc-motion-fast) var(--hrc-ease-standard);
}

body.hrc-design-system-v1.hrc-family-finance .qm-content :where(
    .btn,
    .erp-btn,
    .finance-btn,
    input,
    select,
    textarea,
    a
):focus-visible {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
    box-shadow: var(--hrc-focus-ring);
}

body.hrc-design-system-v1.hrc-family-finance .qm-content :where(
    .accounting-empty-reset,
    .finance-data-empty,
    .empty-state
) {
    border-color: var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-muted);
}

@container (max-width: 767px) {
    body.hrc-design-system-v1.hrc-family-finance .qm-content :where(
        .finance-filter-grid,
        .erp-filter-grid,
        .erp2050-summary-grid,
        .erp-summary-grid
    ) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    body.hrc-design-system-v1.hrc-family-finance .qm-content :where(.btn, .erp-btn, .finance-btn) {
        min-height: var(--hrc-control-height-lg);
    }
}

/*
 * Native Accounting presentation contract.
 * Routes opt in explicitly; untouched Finance routes keep their compatibility
 * assets until they adopt this same contract.
 */
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-family-finance[data-hrc-native-presentation="accounting"] {
    --hrc-family-positive: var(--hrc-finance-income);
    --hrc-family-negative: var(--hrc-finance-expense);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.accounting-native-header, .accounting-native-page) {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-native-header {
    padding-block-start: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-unified-shell {
    display: grid;
    gap: var(--hrc-space-3);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-unified-head.hrc-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-page-hero-copy, .accounting-unified-actions, .finance-summary-copy) {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-page-hero-icon {
    display: inline-grid;
    width: var(--hrc-control-height-lg);
    height: var(--hrc-control-height-lg);
    place-items: center;
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-brand);
    color: var(--hrc-color-on-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-page-hero-copy :where(h1, p) {
    margin: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-page-hero-copy h1 {
    font-size: var(--hrc-text-2xl);
    line-height: var(--hrc-leading-tight);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-unified-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-action-label {
    width: 100%;
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
    text-align: end;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-tabs {
    margin: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-tab {
    min-width: max-content;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-tab.active {
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-module-nav {
    position: relative;
    z-index: var(--hrc-z-sticky);
    display: grid;
    grid-template-columns: minmax(12rem, auto) minmax(0, 1fr);
    align-items: center;
    gap: var(--hrc-space-3);
    min-width: 0;
    padding: var(--hrc-space-3);
    overflow: visible;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-module-nav__current {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--hrc-space-2);
    min-width: 0;
    padding-inline-end: var(--hrc-space-3);
    border-inline-end: var(--hrc-border-width) solid var(--hrc-color-border);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-module-nav__current-icon {
    display: inline-grid;
    width: var(--hrc-control-height-sm);
    height: var(--hrc-control-height-sm);
    place-items: center;
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-module-nav__current span:last-child {
    display: grid;
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-module-nav__current :where(small, strong) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-module-nav__current small {
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-filter-panel-copy {
    display: grid;
    gap: var(--hrc-space-1);
    min-width: 0;
    line-height: var(--hrc-leading-tight);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-filter-panel-copy :where(strong, small) {
    display: block;
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-module-nav__groups {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--hrc-space-2);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-nav-group {
    position: relative;
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-nav-group > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hrc-space-2);
    min-height: var(--hrc-control-height);
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-control);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text);
    cursor: pointer;
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-semibold);
    list-style: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-nav-group > summary::-webkit-details-marker {
    display: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-nav-group > summary span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-nav-group > summary:focus-visible {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
    box-shadow: var(--hrc-focus-ring);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-nav-group:is(.is-active, [open]) > summary {
    border-color: var(--hrc-color-brand);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-nav-group__chevron {
    transition: transform var(--hrc-motion-fast) var(--hrc-ease-standard);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-nav-group[open] .accounting-nav-group__chevron {
    transform: rotate(180deg);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-nav-group__menu {
    position: absolute;
    z-index: var(--hrc-z-dropdown);
    top: calc(100% + var(--hrc-space-2));
    inset-inline-start: 0;
    display: grid;
    width: max(100%, 18rem);
    max-height: min(26rem, 70vh);
    padding: var(--hrc-space-2);
    overflow-y: auto;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-lg);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-nav-group:last-child .accounting-nav-group__menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-nav-group__menu .accounting-tab {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hrc-space-2);
    min-width: 0;
    min-height: var(--hrc-control-height);
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border-radius: var(--hrc-radius-control);
    color: var(--hrc-color-text);
    text-decoration: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-nav-group__menu .accounting-tab:hover {
    background: var(--hrc-color-surface-hover);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-nav-group__menu .accounting-tab.active {
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-native-page {
    display: grid;
    gap: var(--hrc-section-gap);
    padding-block: var(--hrc-space-5) var(--hrc-space-8);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-summary-grid, .finance-transaction-overview) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--hrc-grid-gap);
    min-width: 0;
    margin: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-summary-card, .finance-transaction-summary-card) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--hrc-space-3);
    min-width: 0;
    padding: var(--hrc-card-padding);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    box-shadow: var(--hrc-shadow-xs);
    text-decoration: none;
    container-type: inline-size;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-summary-icon, .finance-transaction-summary-icon) {
    display: inline-grid;
    width: var(--hrc-control-height-sm);
    height: var(--hrc-control-height-sm);
    place-items: center;
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-summary-title, .finance-summary-meta, .finance-transaction-summary-copy small) {
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-summary-value, .finance-transaction-summary-copy strong) {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    color: var(--hrc-color-text);
    font-family: var(--hrc-font-number);
    font-size: clamp(var(--hrc-text-lg), 4cqi, var(--hrc-text-xl));
    font-variant-numeric: tabular-nums;
    line-height: var(--hrc-leading-tight);
    overflow-wrap: normal;
    text-overflow: clip;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.money, .amount, .erp-money, .hrc-u-currency, [data-type="currency"]) {
    min-width: max-content;
    max-width: none;
    overflow: visible;
    font-family: var(--hrc-font-number);
    font-variant-numeric: tabular-nums;
    text-align: right;
    text-overflow: clip;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.hrc-table-wrap, .table-responsive, .erp-table-wrap, .finance-list-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-transaction-group-nav, .finance-simple-ledger-heading) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrc-space-3);
    min-width: 0;
    padding: var(--hrc-space-4);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-divider);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-transaction-group-nav > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-simple-ledger-table {
    min-width: 58rem;
}

@media (max-width: 1199.98px) {
    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-module-nav:where(:not([hidden])) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-module-nav__current:where(:not([hidden])) {
        padding-inline-end: 0;
        padding-block-end: var(--hrc-space-3);
        border-inline-end: 0;
        border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-module-nav__groups:where(:not([hidden])) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-module-nav__groups > .accounting-nav-group:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.finance-summary-grid, .finance-transaction-overview) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-unified-head.hrc-hero {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-unified-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-action-label {
        text-align: start;
    }
}

@media (max-width: 767.98px) {
    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.accounting-nav-group > summary, .accounting-tab, .finance-summary-card, .finance-transaction-summary-card) {
        min-height: var(--hrc-touch-target);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-module-nav__groups:not([hidden]) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-nav-group__menu:not([hidden]) {
        position: static;
        width: 100%;
        max-height: none;
        margin-block-start: var(--hrc-space-2);
        box-shadow: var(--hrc-shadow-xs);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-unified-head.hrc-hero {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.finance-summary-grid, .finance-transaction-overview) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-unified-actions :where(.hrc-btn, .dropdown) {
        width: 100%;
    }
}

/*
 * Accounting premium composition.
 * Completes the native presentation contract for every Accounting route while
 * preserving the existing DOM, URL, form, permission and JavaScript contracts.
 */
body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"] {
    --hrc-accounting-income: var(--hrc-finance-income);
    --hrc-accounting-expense: var(--hrc-finance-expense);
    --hrc-accounting-receivable: var(--hrc-finance-receivable);
    --hrc-accounting-payable: var(--hrc-finance-payable);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.accounting-native-page, .accounting-page, .accounting-report-workspace) {
    width: 100%;
    min-width: 0;
    max-width: var(--hrc-content-max);
    margin-inline: auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.accounting-native-page, .accounting-page) {
    gap: var(--hrc-section-gap);
    padding-block: var(--hrc-space-5) var(--hrc-space-10);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.accounting-native-page, .accounting-page) > * {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.accounting-transaction-form-page, .accounting-debt-form-page) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hrc-section-gap);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(
    .panel,
    .erp-panel,
    .erp-form-card,
    .erp-table-card,
    .advance-panel,
    .finance-form-card,
    .finance-primary-card,
    .finance-simple-ledger,
    .accounting-category-editor
) {
    min-width: 0;
    margin: 0;
    overflow: visible;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(
    .panel-head,
    .erp-table-head,
    .advance-panel-head,
    .finance-list-toolbar,
    .finance-simple-ledger-heading,
    .hrc-table-toolbar
) {
    display: flex;
    min-width: 0;
    min-height: var(--hrc-control-height-lg);
    align-items: center;
    justify-content: space-between;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-4) var(--hrc-card-padding);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-divider);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.panel-head, .erp-table-head, .advance-panel-head, .finance-list-toolbar)
:where(h2, h3, p) {
    min-width: 0;
    margin: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.panel-head, .erp-table-head, .advance-panel-head, .finance-list-toolbar)
:where(h2, h3) {
    color: var(--hrc-color-text);
    font-size: var(--hrc-text-lg);
    font-weight: var(--hrc-weight-bold);
    line-height: var(--hrc-leading-tight);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.panel-head, .erp-table-head, .advance-panel-head, .finance-list-toolbar) p {
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.panel-body, .advance-content-block, .advance-panel > form, .erp-form-card > form) {
    min-width: 0;
    padding: var(--hrc-card-padding);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.grid-2, .accounting-overview-charts, .accounting-overview-cash-debt) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--hrc-grid-gap);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.grid-3, .accounting-overview-operations) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--hrc-grid-gap);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.grid-2, .grid-3) > * {
    min-width: 0;
    height: 100%;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-summary-grid, .finance-transaction-overview, .erp-kpi-grid, .erp2050-kpi-grid, .hrc-report-kpi-grid) {
    align-items: stretch;
    margin: 0;
}

/* Accounting dark select contrast contract: native menus retain the active surface, text and strong border tokens. */
html[data-hrc-theme="dark"] body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(select, .hrc-select, .form-select) {
    color-scheme: dark;
    background-color: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    border-color: var(--hrc-color-border-strong);
}

html[data-hrc-theme="dark"] body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(select, .hrc-select, .form-select) option {
    background-color: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-summary-card, .finance-transaction-summary-card, .erp2050-summary-card, .erp-kpi-card) {
    position: relative;
    min-height: calc(var(--hrc-control-height-lg) + var(--hrc-control-height-lg));
    overflow: hidden;
    border-color: var(--hrc-component-kpi-border);
    background: var(--hrc-component-kpi-bg);
    box-shadow: var(--hrc-shadow-sm);
    transition:
        transform var(--hrc-motion-fast) var(--hrc-ease-standard),
        border-color var(--hrc-motion-fast) var(--hrc-ease-standard),
        box-shadow var(--hrc-motion-fast) var(--hrc-ease-standard);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-summary-card, .finance-transaction-summary-card, .erp2050-summary-card, .erp-kpi-card)::before {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--hrc-space-1);
    background: var(--hrc-color-brand);
    content: "";
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-summary-card, .finance-transaction-summary-card, .erp2050-summary-card, .erp-kpi-card):hover {
    transform: translateY(calc(var(--hrc-space-1) * -1));
    border-color: var(--hrc-color-border-strong);
    box-shadow: var(--hrc-shadow-md);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-summary-card.is-teal::before,
body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-summary-card.is-green::before {
    background: var(--hrc-color-success);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-summary-card.is-orange::before {
    background: var(--hrc-color-warning);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-summary-card.is-red::before {
    background: var(--hrc-color-danger);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-summary-card.is-purple::before {
    background: var(--hrc-chart-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-summary-copy, .finance-transaction-summary-copy) {
    display: grid;
    align-content: center;
    gap: var(--hrc-space-1);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-summary-value, .finance-transaction-summary-copy strong, .erp2050-summary-card strong, .erp-kpi-card strong) {
    display: block;
    width: max-content;
    max-width: 100%;
    color: var(--hrc-component-kpi-fg);
    font-size: clamp(var(--hrc-text-lg), 2.4cqi, var(--hrc-text-2xl));
    font-weight: var(--hrc-weight-bold);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-summary-value, .finance-transaction-summary-copy strong).is-positive {
    color: var(--hrc-color-success);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-summary-value, .finance-transaction-summary-copy strong).is-negative {
    color: var(--hrc-color-danger);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-summary-icon, .finance-transaction-summary-icon, .debt-summary-icon) {
    flex: 0 0 auto;
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-filter-panel, .finance-list-filter, .erp-filter, .advance-filter, .accounting-debt-filter) {
    min-width: 0;
    margin: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-filter-panel {
    overflow: clip;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-filter-panel-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--hrc-space-3);
    min-width: 0;
    padding: var(--hrc-space-3) var(--hrc-card-padding);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-filter-panel-icon {
    display: inline-grid;
    width: var(--hrc-control-height-sm);
    height: var(--hrc-control-height-sm);
    place-items: center;
    border-radius: var(--hrc-radius-control);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-filter-panel-count {
    display: inline-grid;
    min-width: var(--hrc-control-height-sm);
    min-height: var(--hrc-control-height-sm);
    place-items: center;
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-filter-panel-body-inner, .finance-list-filter, .erp-filter, .advance-filter) {
    padding: var(--hrc-card-padding);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-filter-grid, .erp-filter-grid, .advance-filter, .accounting-doc-filter-form, .accounting-report-lite-filter) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: var(--hrc-space-3);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-filter-field, .hrc-filter-field, .field) {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-filter-actions, .hrc-form-actions, .accounting-actions, .advance-actions) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hrc-space-2);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-active-filter-chips, .finance-filter-active) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-3) var(--hrc-card-padding);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-divider);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.form-control, .form-select, .input, .hrc-input, .hrc-select, .hrc-textarea) {
    max-width: 100%;
    min-height: var(--hrc-control-height);
    border-color: var(--hrc-component-control-border);
    border-radius: var(--hrc-component-control-radius);
    background: var(--hrc-component-control-bg);
    color: var(--hrc-component-control-fg);
    box-shadow: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.form-control, .form-select, .input, .hrc-input, .hrc-select, .hrc-textarea):focus {
    border-color: var(--hrc-color-focus);
    outline: none;
    box-shadow: var(--hrc-component-control-focus);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.erp-form-grid, .hrc-form-grid, .advance-form-grid, .accounting-advances-form-grid, .finance-compact-fields) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--hrc-space-4);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-field-wide, .finance-classification-fieldset, .finance-attachment-field, .hrc-form-actions) {
    grid-column: 1 / -1;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.hrc-form-section, .finance-classification-fieldset, .finance-form-heading, .finance-compact-heading) {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.hrc-form-section {
    padding: var(--hrc-card-padding);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-form-heading, .finance-compact-heading) {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: var(--hrc-space-3);
    padding-block-end: var(--hrc-space-4);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-divider);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-current-attachment, .finance-readonly-notice, .finance-form-alert, .advance-flash) {
    min-width: 0;
    padding: var(--hrc-space-3) var(--hrc-space-4);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-control);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.erp-table-card, .finance-simple-ledger, .accounting-debt-ledger, .accounting-document-list-panel) {
    min-width: 0;
    overflow: clip;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(
    .finance-list-table-wrap,
    .finance-center-table-wrap,
    .finance-simple-ledger-wrap,
    .erp-table-wrap,
    .accounting-debt-wrap,
    .accounting-doc-table-wrap,
    .advance-table-wrap,
    .accounting-category-table-wrap,
    .accounting-report-lite-table-wrap,
    .table-responsive,
    .hrc-table-wrap,
    .hrc-table-scroll
) {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(table.erp-table, table.table, table.hrc-table, .finance-simple-ledger-table) {
    width: 100%;
    min-width: max-content;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--hrc-component-table-fg);
    font-variant-numeric: tabular-nums;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(table.erp-table, table.table, table.hrc-table, .finance-simple-ledger-table) thead th {
    position: sticky;
    z-index: var(--hrc-z-sticky);
    top: 0;
    min-width: max-content;
    min-height: var(--hrc-component-table-row-height);
    padding: var(--hrc-space-3) var(--hrc-space-4);
    overflow: visible;
    border-block-end: var(--hrc-border-width) solid var(--hrc-component-table-border);
    background: var(--hrc-component-table-header-bg);
    color: var(--hrc-component-table-muted);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
    letter-spacing: 0.01em;
    text-align: start;
    text-overflow: clip;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(table.erp-table, table.table, table.hrc-table, .finance-simple-ledger-table) tbody td {
    min-width: 0;
    padding: var(--hrc-space-3) var(--hrc-space-4);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-divider);
    background: var(--hrc-component-table-bg);
    color: var(--hrc-component-table-fg);
    font-size: var(--hrc-text-sm);
    line-height: var(--hrc-leading-normal);
    vertical-align: middle;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(table.erp-table, table.table, table.hrc-table, .finance-simple-ledger-table) tbody tr:nth-child(even) td {
    background: var(--hrc-color-surface-subtle);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(table.erp-table, table.table, table.hrc-table, .finance-simple-ledger-table) tbody tr:hover td {
    background: var(--hrc-color-surface-hover);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.money, .amount, .finance-simple-amount, .debt-money-value, .debt-currency) {
    min-width: max-content;
    overflow: visible;
    color: var(--hrc-color-text);
    font-family: var(--hrc-font-number);
    font-variant-numeric: tabular-nums;
    font-weight: var(--hrc-weight-semibold);
    text-align: end;
    text-overflow: clip;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-pagination, .erp2050-pagination, .hrc-pagination) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-3) var(--hrc-card-padding);
    border-block-start: var(--hrc-border-width) solid var(--hrc-color-divider);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-pagination-link {
    display: inline-grid;
    min-width: var(--hrc-control-height-sm);
    height: var(--hrc-control-height-sm);
    place-items: center;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-control);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-semibold);
    text-decoration: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-pagination-link:is(:hover, .is-active) {
    border-color: var(--hrc-color-brand);
    background: var(--hrc-color-brand);
    color: var(--hrc-color-on-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-data-empty, .empty-state, .hrc-empty-state, .advance-empty-row, .erp-empty-pad) {
    display: grid;
    min-height: calc(var(--hrc-control-height-lg) + var(--hrc-control-height-lg) + var(--hrc-control-height-lg));
    place-items: center;
    align-content: center;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-8) var(--hrc-card-padding);
    color: var(--hrc-color-text-muted);
    text-align: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-data-empty-icon, .hrc-empty-state__icon) {
    display: inline-grid;
    width: calc(var(--hrc-control-height-lg) + var(--hrc-space-2));
    height: calc(var(--hrc-control-height-lg) + var(--hrc-space-2));
    place-items: center;
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

/* Dashboard composition and charts. */
body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-overview-page {
    display: flex;
    flex-direction: column;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-overview-page > .accounting-overview-filter-panel {
    order: 1;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-overview-page > .accounting-overview-kpis {
    order: 2;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-overview-page > .accounting-overview-operations {
    order: 3;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-overview-page > .accounting-overview-charts {
    order: 4;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-overview-page > .accounting-overview-cash-debt {
    order: 5;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-overview-page > :not(
    .accounting-overview-filter-panel,
    .accounting-overview-kpis,
    .accounting-overview-operations,
    .accounting-overview-charts,
    .accounting-overview-cash-debt
) {
    order: 6;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-overview-operations .panel-body {
    min-height: calc(var(--hrc-control-height-lg) + var(--hrc-control-height-lg) + var(--hrc-control-height-lg));
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.action-list, .debt-list, .ai-risk-list) {
    display: grid;
    gap: var(--hrc-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.action-list, .debt-list, .ai-risk-list) li {
    min-width: 0;
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-control);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-muted);
    line-height: var(--hrc-leading-normal);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(var(--hrc-space-4), 1fr));
    align-items: end;
    gap: var(--hrc-space-2);
    min-height: 15rem;
    padding: var(--hrc-space-4);
    border: var(--hrc-border-width) solid var(--hrc-color-divider);
    border-radius: var(--hrc-radius-card);
    background:
        linear-gradient(to top, var(--hrc-color-divider) var(--hrc-border-width), transparent var(--hrc-border-width))
        var(--hrc-color-surface-soft);
    background-size: 100% 25%;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.chart .month {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--hrc-space-2);
    min-width: 0;
    height: 100%;
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
    text-align: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.chart .pair {
    display: flex;
    min-width: 0;
    height: 100%;
    align-items: flex-end;
    justify-content: center;
    gap: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.chart .pair i {
    display: block;
    width: min(28%, var(--hrc-space-3));
    min-height: var(--hrc-space-1);
    border-radius: var(--hrc-radius-xs) var(--hrc-radius-xs) 0 0;
    background: var(--hrc-chart-1);
    transition: height var(--hrc-motion-normal) var(--hrc-ease-decelerate);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.chart .pair .expense {
    background: var(--hrc-chart-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.chart .pair .profit {
    background: var(--hrc-chart-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--hrc-space-4);
    padding-block-start: var(--hrc-space-3);
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.legend span {
    display: inline-flex;
    align-items: center;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.legend i {
    width: var(--hrc-space-3);
    height: var(--hrc-space-3);
    border-radius: var(--hrc-radius-xs);
    background: var(--hrc-chart-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.legend .expense {
    background: var(--hrc-chart-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.legend .profit {
    background: var(--hrc-chart-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-expense-composition-body {
    display: grid;
    grid-template-columns: minmax(10rem, 0.9fr) minmax(11rem, 1.1fr);
    align-items: center;
    gap: var(--hrc-space-5);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-expense-donut {
    display: grid;
    width: min(12rem, 100%);
    aspect-ratio: 1;
    place-items: center;
    justify-self: center;
    border-radius: var(--hrc-radius-pill);
    background: var(--expense-composition, var(--hrc-color-surface-muted));
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-expense-donut::before {
    grid-area: 1 / 1;
    width: 60%;
    aspect-ratio: 1;
    border: var(--hrc-border-width) solid var(--hrc-color-divider);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-surface);
    content: "";
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-expense-donut span {
    z-index: var(--hrc-z-base);
    display: grid;
    grid-area: 1 / 1;
    gap: var(--hrc-space-1);
    max-width: 56%;
    color: var(--hrc-color-text-muted);
    text-align: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-expense-donut strong {
    color: var(--hrc-color-text);
    font-family: var(--hrc-font-number);
    font-size: var(--hrc-text-sm);
    line-height: var(--hrc-leading-tight);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-expense-legend {
    display: grid;
    gap: var(--hrc-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-expense-legend li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hrc-space-2);
    min-width: 0;
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-expense-legend li i {
    width: var(--hrc-space-3);
    height: var(--hrc-space-3);
    border-radius: var(--hrc-radius-pill);
    background: var(--expense-color, var(--hrc-chart-1));
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-expense-legend li i[data-hrc-palette="0"] {
    background: var(--hrc-chart-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-expense-legend li i[data-hrc-palette="1"] {
    background: var(--hrc-chart-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-expense-legend li i[data-hrc-palette="2"] {
    background: var(--hrc-chart-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-expense-legend li i[data-hrc-palette="3"] {
    background: var(--hrc-chart-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-expense-legend li i[data-hrc-palette="4"] {
    background: var(--hrc-chart-5);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.profit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hrc-space-3);
    min-width: 0;
    padding-block: var(--hrc-space-3);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-divider);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.profit-row:last-child {
    border-block-end: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.profit-row > div:first-child {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.profit-row .track {
    grid-column: 1 / -1;
    height: var(--hrc-space-2);
    overflow: hidden;
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-surface-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.profit-row .track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.ai-finance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--hrc-grid-gap);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.ai-metric {
    display: grid;
    gap: var(--hrc-space-2);
    min-width: 0;
    padding: var(--hrc-space-4);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.ai-metric strong {
    min-width: 0;
    color: var(--hrc-color-text);
    font-family: var(--hrc-font-number);
    font-size: var(--hrc-text-lg);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.spark, .track) {
    height: var(--hrc-space-2);
    overflow: hidden;
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-surface-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.spark, .track) > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.timeline li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--hrc-space-3);
    min-width: 0;
    padding-block: var(--hrc-space-3);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-divider);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.timeline li:last-child {
    border-block-end: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.timeline .dot {
    width: var(--hrc-space-3);
    height: var(--hrc-space-3);
    margin-block-start: var(--hrc-space-1);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-brand);
    box-shadow: 0 0 0 var(--hrc-space-1) var(--hrc-color-brand-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.timeline .dot.is-income {
    background: var(--hrc-accounting-income);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.timeline .dot.is-expense {
    background: var(--hrc-accounting-expense);
}

/* Transactions and debt center. */
body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-transaction-group-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hrc-space-3);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-transaction-group-copy, .finance-simple-ledger-title, .finance-simple-object, .finance-simple-company) {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.finance-simple-object, .finance-simple-company) {
    min-width: 14rem;
    max-width: 24rem;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.debt-type-switch {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hrc-space-2);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.debt-status-stack, .debt-row-actions, .finance-row-actions) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hrc-space-2);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.debt-primary, .debt-detail, .debt-owner, .debt-timeline) {
    display: grid;
    gap: var(--hrc-space-1);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.debt-col-object, .debt-col-detail, .debt-col-timeline) {
    min-width: 12rem;
    max-width: 24rem;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.debt-col-timeline {
    min-width: 10rem;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
table td.debt-col-object .debt-primary > *,
body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
table td.debt-col-detail .debt-detail > *,
body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
table td.debt-col-timeline .debt-timeline > * {
    min-width: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.debt-summary-table {
    display: grid;
    gap: var(--hrc-space-3);
    min-width: 0;
    padding: var(--hrc-card-padding);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.debt-summary-head {
    display: flex;
    align-items: center;
    gap: var(--hrc-space-3);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.erp2050-modal, .hrc-dialog) {
    max-width: min(42rem, calc(100vw - var(--hrc-space-6)));
    max-height: min(48rem, calc(100dvh - var(--hrc-space-6)));
    overflow: hidden;
    border: var(--hrc-border-width) solid var(--hrc-component-overlay-border);
    border-radius: var(--hrc-component-overlay-radius);
    background: var(--hrc-component-overlay-bg);
    color: var(--hrc-component-overlay-fg);
    box-shadow: var(--hrc-component-overlay-shadow);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.hrc-dialog__header, .hrc-dialog__footer) {
    position: sticky;
    z-index: var(--hrc-z-sticky);
    padding: var(--hrc-card-padding);
    background: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.hrc-dialog__header {
    top: 0;
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-divider);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.hrc-dialog__body {
    max-height: min(34rem, 60dvh);
    padding: var(--hrc-card-padding);
    overflow-y: auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.hrc-dialog__footer {
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: var(--hrc-space-2);
    border-block-start: var(--hrc-border-width) solid var(--hrc-color-divider);
}

/* Documents, advances and categories. */
body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.accounting-documents-page, .advance-request-page, .accounting-advances-page, .accounting-categories-page) {
    display: flex;
    flex-direction: column;
    gap: var(--hrc-section-gap);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.accounting-document-upload-panel, .accounting-document-list-panel, .advance-create-panel, .advance-filter-panel, .advance-list-panel, .advance-limit-panel) {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.accounting-doc-upload-form, .advance-form, .accounting-category-form) {
    min-width: 0;
    padding: var(--hrc-card-padding);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.hrc-upload, .finance-compact-attachment) {
    display: grid;
    min-height: calc(var(--hrc-control-height-lg) + var(--hrc-control-height-lg));
    place-items: center;
    gap: var(--hrc-space-2);
    padding: var(--hrc-card-padding);
    border: var(--hrc-border-width) dashed var(--hrc-color-border-strong);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-muted);
    text-align: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.hrc-upload, .finance-compact-attachment) input[type="file"]:not(.hrc-u-sr-only) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.hrc-upload .hrc-upload__trigger {
    min-height: max(44px, var(--hrc-control-height));
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.hrc-upload .hrc-upload__input.hrc-u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.hrc-upload .hrc-upload__input:focus-visible + .hrc-upload__trigger {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
    box-shadow: var(--hrc-focus-ring);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-compact-attachment .qm-upload-zone input[type="file"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-compact-attachment .finance-attachment-field,
body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-compact-attachment .qm-upload-zone {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.finance-compact-attachment .qm-upload-zone {
    grid-template-columns: minmax(0, 1fr);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.advance-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
    align-items: start;
    gap: var(--hrc-grid-gap);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.advance-detail-grid, .advance-action-grid) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hrc-space-3);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.advance-timeline {
    display: grid;
    gap: var(--hrc-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.advance-timeline-item {
    position: relative;
    min-width: 0;
    padding: var(--hrc-space-3) var(--hrc-space-4);
    border-inline-start: var(--hrc-space-1) solid var(--hrc-color-brand);
    border-radius: var(--hrc-radius-control);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-category-editor {
    overflow: clip;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-category-editor > summary {
    display: grid;
    min-height: var(--hrc-control-height-lg);
    gap: var(--hrc-space-1);
    align-content: center;
    padding: var(--hrc-space-3) var(--hrc-card-padding);
    color: var(--hrc-color-text);
    cursor: pointer;
    list-style: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-category-editor > summary::-webkit-details-marker {
    display: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-category-editor[open] > summary {
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-divider);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-category-form {
    grid-template-columns: minmax(12rem, 1.5fr) repeat(4, minmax(8rem, 1fr)) auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-category-tabs {
    display: flex;
    gap: var(--hrc-space-1);
    padding: var(--hrc-space-3) var(--hrc-card-padding);
    overflow-x: auto;
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-divider);
    scrollbar-width: thin;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-category-tabs button {
    min-height: var(--hrc-control-height-sm);
    flex: 0 0 auto;
    padding-inline: var(--hrc-space-3);
    border: 0;
    border-radius: var(--hrc-radius-control);
    background: transparent;
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-category-tabs button:is(:hover, .is-active) {
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-category-table code {
    display: inline-block;
    max-width: 16rem;
    padding: var(--hrc-space-1) var(--hrc-space-2);
    overflow: hidden;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-brand);
    font-family: var(--hrc-font-mono);
    font-size: var(--hrc-text-xs);
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-category-mobile-list {
    display: none;
}

/* Accounting control center: periods and real payment allocations. */
body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.accounting-periods-page, .accounting-allocations-page) {
    display: grid;
    gap: var(--hrc-space-5);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.accounting-periods-page, .accounting-allocations-page) .erp-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.accounting-periods-page, .accounting-allocations-page) .erp-panel-head p {
    max-width: 72ch;
    margin: var(--hrc-space-1) 0 0;
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-period-action-form {
    grid-template-columns: minmax(11rem, .65fr) minmax(18rem, 1.6fr) auto;
    align-items: end;
    margin-top: var(--hrc-space-5);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-period-inline-form {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) auto;
    gap: var(--hrc-space-2);
    align-items: center;
    min-width: min(100%, 20rem);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-period-inline-form input {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.accounting-periods-page, .accounting-allocations-page) .hrc-table-wrap {
    margin-top: var(--hrc-space-4);
}

/* Accounting reconciliation: one focused evidence form, readable queue on every viewport. */
body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-reconciliation-page {
    display: grid;
    gap: var(--hrc-space-5);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-reconciliation-page .erp-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-reconciliation-page .erp-panel-head p {
    max-width: 68ch;
    margin: var(--hrc-space-1) 0 0;
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-reconciliation-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    max-width: 64rem;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-reconciliation-confirm,
body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-reconciliation-form .actions {
    grid-column: 1 / -1;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-reconciliation-confirm label {
    display: flex;
    align-items: flex-start;
    gap: var(--hrc-space-2);
    color: var(--hrc-color-text-secondary);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-reconciliation-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hrc-space-3);
    margin: 0 0 var(--hrc-space-5);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-reconciliation-summary > div {
    min-width: 0;
    padding: var(--hrc-space-3);
    border: 1px solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-reconciliation-summary :where(dt, dd) {
    margin: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-reconciliation-summary dt {
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-reconciliation-summary dd {
    margin-top: var(--hrc-space-1);
    color: var(--hrc-color-text);
    font-weight: 700;
}

/* Reports. */
body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-report-workspace {
    display: grid;
    grid-template-columns: minmax(13rem, 0.24fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--hrc-grid-gap);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-report-content {
    display: grid;
    gap: var(--hrc-section-gap);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-report-content .hrc-report-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-report-sidebar {
    position: sticky;
    top: calc(var(--hrc-header-height) + var(--hrc-space-4));
    min-width: 0;
    overflow: clip;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-report-sidebar-head {
    display: flex;
    align-items: center;
    gap: var(--hrc-space-3);
    padding: var(--hrc-card-padding);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-divider);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-report-sidebar-icon {
    display: inline-grid;
    width: var(--hrc-control-height-sm);
    height: var(--hrc-control-height-sm);
    place-items: center;
    border-radius: var(--hrc-radius-control);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-report-sidebar nav {
    display: grid;
    gap: var(--hrc-space-1);
    padding: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-report-nav-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hrc-space-2);
    min-width: 0;
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border-radius: var(--hrc-radius-control);
    color: var(--hrc-color-text-muted);
    text-decoration: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-report-nav-link > i:first-child {
    display: inline-grid;
    width: var(--hrc-control-height-sm);
    height: var(--hrc-control-height-sm);
    place-items: center;
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-report-nav-link:is(:hover, .is-active) {
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.report-chart-grid, .hrc-chart-grid) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--hrc-grid-gap);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.report-chart-panel, .chart-panel, .hrc-chart-card, .chart-box) {
    min-width: 0;
    overflow: hidden;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.hrc-chart-card__header, .chart-panel > header) {
    padding: var(--hrc-space-4) var(--hrc-card-padding);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-divider);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.hrc-chart-card__plot, .chart-box) {
    min-height: 20rem;
    padding: var(--hrc-card-padding);
}

@media (max-width: 1199.98px) {
    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .finance-filter-panel-head {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .finance-filter-panel-toggle {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.finance-filter-grid, .erp-filter-grid, .advance-filter, .accounting-doc-filter-form, .accounting-report-lite-filter) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-category-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .ai-finance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.grid-2, .grid-3, .accounting-overview-charts, .accounting-overview-cash-debt, .accounting-overview-operations) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-report-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-report-sidebar {
        position: static;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-report-sidebar nav {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-report-nav-link {
        min-width: 13rem;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .advance-workspace {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.accounting-native-page, .accounting-page) {
        gap: var(--hrc-space-4);
        padding-block: var(--hrc-space-4) var(--hrc-space-8);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .finance-filter-panel-head {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .finance-filter-panel-toggle {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(
        .finance-filter-grid,
        .erp-filter-grid,
        .advance-filter,
        .accounting-doc-filter-form,
        .accounting-report-lite-filter,
        .erp-form-grid,
        .hrc-form-grid,
        .advance-form-grid,
        .accounting-advances-form-grid,
        .finance-compact-fields,
        .accounting-category-form,
        .advance-detail-grid,
        .advance-action-grid,
        .report-chart-grid,
        .hrc-chart-grid
    ) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.finance-summary-grid, .finance-transaction-overview, .erp-kpi-grid, .erp2050-kpi-grid, .hrc-report-kpi-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.finance-summary-card, .finance-transaction-summary-card, .erp2050-summary-card, .erp-kpi-card) {
        min-height: calc(var(--hrc-control-height-lg) + var(--hrc-space-8));
        padding: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.panel-head, .erp-table-head, .advance-panel-head, .finance-list-toolbar, .hrc-table-toolbar) {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.panel-body, .advance-content-block, .advance-panel > form, .erp-form-card > form, .hrc-form-section) {
        padding: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .chart {
        gap: var(--hrc-space-1);
        min-height: 13rem;
        padding: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .chart .month span {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-expense-composition-body {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-expense-donut {
        width: min(10rem, 70vw);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .ai-finance-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .timeline li {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .timeline li > .money {
        grid-column: 2;
        justify-self: start;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.finance-filter-actions, .hrc-form-actions, .accounting-actions, .advance-actions) {
        justify-content: stretch;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.finance-filter-actions, .hrc-form-actions, .accounting-actions, .advance-actions) > :where(.btn, .hrc-btn, button, a) {
        flex: 1 1 auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-category-table-wrap {
        display: none;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-category-mobile-list {
        display: grid;
        gap: var(--hrc-space-3);
        padding: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-category-mobile-list .erp-mobile-card {
        padding: var(--hrc-space-4);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-card);
        background: var(--hrc-color-surface);
        box-shadow: var(--hrc-shadow-xs);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.accounting-periods-page, .accounting-allocations-page) .erp-panel-head {
        display: grid;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.accounting-period-action-form, .accounting-period-inline-form) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-reconciliation-page .erp-panel-head,
    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-reconciliation-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-reconciliation-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .accounting-period-inline-form :where(input, button) {
        width: 100%;
    }
}

@media (max-width: 479.98px) {
    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.finance-summary-grid, .finance-transaction-overview, .erp-kpi-grid, .erp2050-kpi-grid, .hrc-report-kpi-grid) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .hrc-quick-actions {
        display: grid;
        width: 100%;
        padding: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .hrc-quick-actions > form,
    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .hrc-quick-actions > form > .hrc-btn {
        width: 100%;
        min-width: 0;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .hrc-quick-actions > form > .hrc-btn {
        gap: var(--hrc-space-1);
        padding-inline: var(--hrc-space-2);
        font-size: var(--hrc-text-xs);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .advance-create-panel .advance-form {
        padding: 0;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .advance-create-panel {
        padding: var(--hrc-space-2);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .advance-create-panel .field.readonly .hrc-input {
        padding-inline: var(--hrc-space-2);
        font-size: var(--hrc-text-sm);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.finance-summary-value, .finance-transaction-summary-copy strong, .erp2050-summary-card strong, .erp-kpi-card strong) {
        font-size: var(--hrc-text-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.finance-summary-card, .finance-transaction-summary-card, .erp2050-summary-card, .erp-kpi-card, .chart .pair i) {
        transition: none;
    }
}

/* Accounting labor settlement composition. Canonical, native-route scoped. */
body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.accounting-void-reason-input {
    width: calc(100% - 1rem);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-settlement-page {
    display: grid;
    gap: var(--hrc-space-5);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-tabs {
    display: flex;
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-1) 0;
    overflow-x: auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-tabs .hrc-tab {
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-notice {
    padding: var(--hrc-space-4);
    border: 1px solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-lg);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-notice[data-tone="danger"] {
    border-color: var(--hrc-color-danger);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-notice[data-tone="success"] {
    border-color: var(--hrc-color-success);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-notice[data-tone="info"] {
    border-color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-form-grid .field {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-form-grid .span-2 {
    grid-column: span 2;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-form-grid .span-4 {
    grid-column: 1 / -1;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-actions form {
    display: inline-flex;
    margin: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
form:is(.labor-cancel-form, .labor-allocation-form) {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) auto;
    gap: var(--hrc-space-2);
    min-width: min(100%, 24rem);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-allocation-form {
    grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 1.5fr) auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-money {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-status {
    display: inline-flex;
    align-items: center;
    padding: var(--hrc-space-1) var(--hrc-space-2);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-surface-soft);
    font-size: var(--hrc-text-xs);
    font-weight: 700;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.labor-status[data-status="posted"], .labor-status[data-status="approved"]) {
    color: var(--hrc-color-success);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.labor-status[data-status="conflict"], .labor-status[data-status="pending"]) {
    color: var(--hrc-color-warning);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-table-note {
    max-width: 28rem;
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-conflict-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-conflict-card {
    display: grid;
    gap: var(--hrc-space-1);
    padding: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-conflict-card span {
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-detail-panel {
    display: grid;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-detail-header :where(h2, p) {
    margin-block: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-detail-header p + * {
    margin-block-start: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-detail-eyebrow {
    color: var(--hrc-color-brand);
    font-size: var(--hrc-text-xs);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
:where(.labor-detail-header-actions, .labor-detail-actions) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-detail-actions {
    justify-content: space-between;
    padding-top: var(--hrc-space-4);
    border-top: 1px solid var(--hrc-color-border);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-detail-actions h3 {
    margin: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hrc-space-3);
    margin: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-detail-meta > div {
    min-width: 0;
    padding: var(--hrc-space-3);
    border: 1px solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-detail-meta dt {
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
    font-weight: 700;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-detail-meta dd {
    margin: var(--hrc-space-1) 0 0;
    color: var(--hrc-color-text);
    font-weight: 650;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-detail-meta .labor-detail-meta-wide {
    grid-column: 1 / -1;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-detail-hash {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--hrc-color-text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-detail-list {
    margin: var(--hrc-space-2) 0 0;
    padding-inline-start: var(--hrc-space-5);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
.labor-detail-table {
    min-width: 80rem;
}

@media (max-width: 1024px) {
    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .labor-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .labor-form-grid .span-4 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .labor-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .labor-form-grid :where(.span-2, .span-4) {
        grid-column: auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .labor-actions {
        align-items: stretch;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .labor-actions .btn {
        width: 100%;
        justify-content: center;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    form:is(.labor-cancel-form, .labor-allocation-form) {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .labor-detail-header {
        display: grid;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.labor-detail-header-actions, .labor-detail-actions) {
        align-items: stretch;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    :where(.labor-detail-header-actions .btn, .labor-detail-actions .labor-actions, .labor-detail-actions .btn) {
        width: 100%;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .labor-detail-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .labor-detail-meta .labor-detail-meta-wide {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="accounting"]
    .labor-settlement-page * {
        scroll-behavior: auto;
        transition: none;
    }
}
/* Canonical local-only stylesheet consumed by the governed Advance PDF renderer. */
.accounting-advance-export {
    font-family: "DejaVu Sans", sans-serif;
    font-size: 10px;
    color: var(--hrc-neutral-800);
}

.accounting-advance-export__title {
    margin-block-end: 12px;
    font-size: 18px;
    font-weight: 700;
}

.accounting-advance-export table {
    width: 100%;
    border-collapse: collapse;
}

.accounting-advance-export :where(th, td) {
    padding: 6px;
    border: 1px solid var(--hrc-neutral-300);
    vertical-align: top;
}

.accounting-advance-export th {
    background: var(--hrc-neutral-100);
    text-align: left;
}

/* source: public/assets/design-adapter-portal.css */
/*
 * Candidate and Employer portal bridge. Existing portal selectors remain the
 * behavior contract; every design-system rule is opt-in and namespaced.
 */
body.hrc-design-system-v1.hrc-family-portal {
    --hrc-container-xl: 1280px;
    background: var(--hrc-color-bg-app);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-portal :where(.portal-shell, .portal-main, .portal-workspace) {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-family-portal :where(.portal-header, .portal-sidebar) {
    border-color: var(--hrc-color-border);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-portal :where(
    .portal-card,
    .section-card,
    .portal-metric,
    .job-card,
    .member-card,
    .permission-state,
    .portal-verification,
    .empty-state
) {
    min-width: 0;
    border-color: var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    box-shadow: var(--hrc-shadow-xs);
}

body.hrc-design-system-v1.hrc-family-portal :where(.portal-menu, .portal-tabs) {
    max-width: 100%;
    scrollbar-width: thin;
}

body.hrc-design-system-v1.hrc-family-portal :where(.portal-menu a, .portal-menu button, .button, button, input, select, textarea) {
    min-height: var(--hrc-control-height);
    border-radius: var(--hrc-radius-control);
}

body.hrc-design-system-v1.hrc-family-portal :where(input, select, textarea) {
    border-color: var(--hrc-color-border-strong);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-portal :where(a, button, input, select, textarea):focus-visible {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
    box-shadow: var(--hrc-focus-ring);
}

body.hrc-design-system-v1.hrc-family-portal :where(.table-wrap, .chat-list, .timeline) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

@media (max-width: 767.98px) {
    body.hrc-design-system-v1.hrc-family-portal :where(.portal-main, .portal-hero, .form-grid, .metric-grid, .job-grid, .two-column) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-family-portal :where(.portal-menu, .portal-tabs) {
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    body.hrc-design-system-v1.hrc-family-portal :where(.portal-menu a, .portal-menu button, .button, button) {
        min-height: var(--hrc-control-height-lg);
        scroll-snap-align: start;
    }
}

/* source: public/assets/design-adapter-public.css */
/* Public, landing and public-verification bridge. */
body.hrc-design-system-v1.hrc-family-public {
    --hrc-container-xl: 1280px;
    --hrc-control-height: 44px;
    background: var(--hrc-color-bg-app);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-public :where(
    .tcv-header,
    .public-community-header,
    .public-header,
    .site-header
) {
    border-color: var(--hrc-color-border);
    background-color: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-public :where(
    main,
    .container,
    .section-inner,
    .jobs-shell,
    .company-shell,
    .public-community-main
) {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-family-public :where(
    .job-card,
    .company-card,
    .news-card,
    .gallery-card,
    .verify-card,
    .public-card,
    .filter-panel,
    .empty-state
) {
    min-width: 0;
    border-color: var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    box-shadow: var(--hrc-shadow-xs);
}

body.hrc-design-system-v1.hrc-family-public :where(button, .btn, .button, input, select, textarea) {
    min-height: var(--hrc-control-height);
    border-radius: var(--hrc-radius-control);
}

body.hrc-design-system-v1.hrc-family-public :where(input, select, textarea) {
    border-color: var(--hrc-color-border-strong);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-public :where(a, button, input, select, textarea):focus-visible {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
    box-shadow: var(--hrc-focus-ring);
}

body.hrc-design-system-v1.hrc-family-public :where(.table-wrap, .table-responsive) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

body.hrc-design-system-v1.hrc-family-public :where(.badge) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    body.hrc-design-system-v1.hrc-family-public :where(button, .btn, .button) {
        min-height: var(--hrc-control-height-lg);
    }
}

/* source: public/assets/design-adapter-auth.css */
/* Authentication, MFA, Passkey and onboarding bridge. */
body.hrc-design-system-v1.hrc-family-auth {
    --hrc-container-xl: 560px;
    --hrc-color-bg-app: color-mix(in srgb, var(--hrc-color-surface-soft) 58%, var(--hrc-color-border));
    min-height: 100dvh;
    background: var(--hrc-color-bg-app);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-auth :where(.auth-shell, .auth-main, main.container) {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-family-auth :where(.auth-panel, .card) {
    width: min(100%, var(--hrc-container-xl));
    min-width: 0;
    border-color: var(--hrc-color-border);
    border-radius: var(--hrc-radius-lg);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    box-shadow: var(--hrc-shadow-md);
}

body.hrc-design-system-v1.hrc-family-auth .auth-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    border-color: var(--hrc-color-border);
    border-radius: var(--hrc-radius-lg);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    box-shadow: var(--hrc-shadow-md);
}

body.hrc-design-system-v1.hrc-family-auth :where(.form-control, input, select, textarea, button, .btn) {
    min-height: var(--hrc-control-height-lg);
    border-radius: var(--hrc-radius-control);
}

body.hrc-design-system-v1.hrc-family-auth :where(.form-control, input, select, textarea) {
    border-color: var(--hrc-color-border-strong);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-auth :where(a, button, input, select, textarea):focus-visible {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
    box-shadow: var(--hrc-focus-ring);
}

body.hrc-design-system-v1.hrc-family-auth :where(button, input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: var(--hrc-opacity-disabled);
}

/* source: public/assets/design-adapter-superadmin.css */
/* Platform Super Admin bridge on top of the existing protected ERP shell. */
body.hrc-design-system-v1.hrc-family-superadmin {
    --hrc-color-brand: var(--hrc-action-secondary);
    --hrc-color-brand-hover: color-mix(in srgb, var(--hrc-action-secondary) 82%, var(--hrc-color-text));
    --hrc-color-brand-soft: color-mix(in srgb, var(--hrc-action-secondary) 8%, var(--hrc-color-surface));
    background: var(--hrc-color-bg-app);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-superadmin :where(.qm-content, .sa-page, .sa-grid-2, .sa-form-grid) {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-family-superadmin :where(.qm-sidebar, .qm-topbar) {
    border-color: var(--hrc-color-border);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-superadmin :where(
    .sa-panel,
    .sa-kpis-v3 > *,
    .sa-danger-zone,
    .sa-empty,
    .card
) {
    min-width: 0;
    border-color: var(--hrc-color-border);
    border-radius: var(--hrc-radius-card);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    box-shadow: var(--hrc-shadow-xs);
}

body.hrc-design-system-v1.hrc-family-superadmin :where(.sa-table-wrap, .table-responsive) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

body.hrc-design-system-v1.hrc-family-superadmin :where(.sa-btn, button, input, select, textarea) {
    min-height: var(--hrc-control-height);
    border-radius: var(--hrc-radius-control);
}

body.hrc-design-system-v1.hrc-family-superadmin :where(input, select, textarea) {
    border-color: var(--hrc-color-border-strong);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-superadmin :where(a, button, input, select, textarea):focus-visible {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
    box-shadow: var(--hrc-focus-ring);
}

/*
 * Design System and UI Governance are the Super Admin reference surfaces.
 * This unlayered adapter intentionally loads after legacy ERP bundles so the
 * canonical semantic contract wins without page-specific overrides.
 */
body.hrc-design-system-v1.hrc-family-superadmin.ui-governance-route {
    --hrc-shell-text: var(--hrc-color-text);
    background: var(--hrc-color-bg-app);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-superadmin.ui-governance-route .ui-governance-page {
    background: var(--hrc-color-bg-app);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-superadmin.ui-governance-route .ui-governance-page :where(
    input,
    select,
    textarea
) {
    border-color: var(--hrc-color-border-strong);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-superadmin.ui-governance-route .ui-governance-page :where(
    input,
    textarea
)::placeholder {
    color: var(--hrc-color-text-muted);
    opacity: 1;
}

body.hrc-design-system-v1.hrc-family-superadmin.ui-governance-route .ui-governance-page :where(
    .ui-hero h1,
    .ui-card h2,
    .ui-card h3
) {
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-family-superadmin.ui-governance-route .ui-governance-page :where(
    .ui-hero p,
    .ui-card p,
    .ui-helper,
    .ui-toc h2
) {
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-family-superadmin.ui-governance-route .ui-governance-page :where(
    .ui-tab,
    .ui-toc a,
    .ui-config-nav button
) {
    color: var(--hrc-color-text-soft);
}

body.hrc-design-system-v1.hrc-family-superadmin.ui-governance-route .ui-governance-page :where(
    .ui-tab[aria-selected="true"],
    .ui-toc a[aria-current="true"],
    .ui-config-nav button[aria-selected="true"]
) {
    color: var(--hrc-action-secondary);
}

body.hrc-design-system-v1.hrc-family-superadmin.ui-governance-route .ui-governance-page .hrc-btn--primary-cta {
    --hrc-button-loading-color: var(--hrc-action-cta-foreground);
    border-color: transparent;
    background: var(--hrc-action-cta-background);
    color: var(--hrc-action-cta-foreground);
    opacity: 1;
    box-shadow: var(--hrc-action-cta-shadow);
}

body.hrc-design-system-v1.hrc-family-superadmin.ui-governance-route .ui-governance-page .hrc-btn--primary-cta:is(:hover, [data-demo-state="hover"]) {
    background: var(--hrc-action-cta-background-hover);
    color: var(--hrc-action-cta-foreground);
}

body.hrc-design-system-v1.hrc-family-superadmin.ui-governance-route .ui-governance-page .hrc-btn--primary-cta:is(:disabled, [aria-disabled="true"], [data-state="disabled"]) {
    background: var(--hrc-action-cta-background);
    color: var(--hrc-action-cta-foreground);
    opacity: 1;
    box-shadow: none;
}

body.hrc-design-system-v1.hrc-family-superadmin.ui-governance-route .ui-governance-page .hrc-btn--primary-cta:is([data-state="loading"], [aria-busy="true"])::after {
    color: var(--hrc-action-cta-foreground);
}

body.hrc-design-system-v1.hrc-family-superadmin.ui-governance-route .ui-governance-page .hrc-btn--primary-cta:is([data-state="loading"], [aria-busy="true"]) {
    color: transparent;
}

html[data-qm-theme="dark"] body.hrc-design-system-v1.hrc-family-superadmin {
    --hrc-color-brand: color-mix(in srgb, var(--hrc-action-secondary) 65%, var(--hrc-color-text));
    --hrc-color-brand-hover: color-mix(in srgb, var(--hrc-action-secondary) 35%, var(--hrc-color-text));
    --hrc-color-brand-soft: color-mix(in srgb, var(--hrc-action-secondary) 18%, var(--hrc-color-bg-app));
}

@media (max-width: 767.98px) {
    body.hrc-design-system-v1.hrc-family-superadmin :where(.sa-grid-2, .sa-form-grid, .sa-form-4) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-family-superadmin :where(.sa-btn, button) {
        min-height: var(--hrc-control-height-lg);
    }
}

/* source: public/assets/design-enterprise-v3.css */
/*
 * HRConnect Design System v3 enterprise primitives.
 * Values originate from design-tokens.css and design-themes.css.
 */
@layer hrc-platform {
    body.hrc-design-system-v1.hrc-design-platform-v3 :where(.hrc-btn, .hrc-icon-btn) {
        min-width: var(--hrc-touch-target);
        min-height: var(--hrc-touch-target);
        isolation: isolate;
        overflow: hidden;
    }

    body.hrc-design-system-v1.hrc-design-platform-v3 :where(button, input:not([type="hidden"]), select) {
        min-height: var(--hrc-touch-target);
    }

    body.hrc-design-platform-v3 .hrc-btn--primary {
        background: var(--hrc-action-primary);
        color: var(--hrc-action-on-solid);
    }

    body.hrc-design-platform-v3 .hrc-btn--primary:hover {
        background: var(--hrc-action-primary-hover);
    }

    body.hrc-design-platform-v3 .hrc-btn--outline {
        border-color: var(--hrc-action-primary);
        background: transparent;
        color: var(--hrc-action-primary);
    }

    body.hrc-design-platform-v3 .hrc-btn--ghost,
    body.hrc-design-platform-v3 .hrc-btn--text {
        border-color: transparent;
        background: transparent;
        color: var(--hrc-action-primary);
        box-shadow: none;
    }

    body.hrc-design-platform-v3 .hrc-btn--soft {
        border-color: transparent;
        background: var(--hrc-color-brand-soft);
        color: var(--hrc-action-primary);
    }

    body.hrc-design-platform-v3 .hrc-btn--gradient {
        background: linear-gradient(135deg, var(--hrc-action-primary), var(--hrc-action-secondary), var(--hrc-action-success));
        color: var(--hrc-action-on-solid);
    }

    body.hrc-design-platform-v3 .hrc-btn--danger {
        background: var(--hrc-action-danger);
        color: var(--hrc-action-on-solid);
    }

    body.hrc-design-platform-v3 .hrc-btn--warning {
        background: var(--hrc-action-warning);
        color: var(--hrc-action-on-solid);
    }

    body.hrc-design-platform-v3 .hrc-btn--success {
        background: var(--hrc-action-success);
        color: var(--hrc-action-on-solid);
    }

    body.hrc-design-platform-v3 .hrc-btn--info {
        background: var(--hrc-action-info);
        color: var(--hrc-action-on-solid);
    }

    body.hrc-design-platform-v3 .hrc-btn--neutral {
        background: var(--hrc-action-neutral);
        color: var(--hrc-action-on-solid);
    }

    body.hrc-design-platform-v3 .hrc-btn--sm {
        padding-inline: var(--hrc-space-3);
        font-size: var(--hrc-text-sm);
    }

    body.hrc-design-platform-v3 .hrc-btn--md {
        padding-inline: var(--hrc-space-4);
        font-size: var(--hrc-text-md);
    }

    body.hrc-design-platform-v3 .hrc-btn--lg {
        padding-inline: var(--hrc-space-5);
        font-size: var(--hrc-text-lg);
    }

    body.hrc-design-platform-v3 .hrc-btn[data-icon-only],
    body.hrc-design-platform-v3 .hrc-icon-btn {
        width: var(--hrc-touch-target);
        padding: var(--hrc-space-2);
    }

    body.hrc-design-platform-v3 .hrc-btn-group,
    body.hrc-design-platform-v3 .hrc-split-button {
        display: inline-flex;
        align-items: stretch;
    }

    body.hrc-design-platform-v3 .hrc-btn-group > *,
    body.hrc-design-platform-v3 .hrc-split-button > * {
        border-radius: 0;
    }

    body.hrc-design-platform-v3 .hrc-btn-group > :first-child,
    body.hrc-design-platform-v3 .hrc-split-button > :first-child {
        border-start-start-radius: var(--hrc-radius-sm);
        border-end-start-radius: var(--hrc-radius-sm);
    }

    body.hrc-design-platform-v3 .hrc-btn-group > :last-child,
    body.hrc-design-platform-v3 .hrc-split-button > :last-child {
        border-start-end-radius: var(--hrc-radius-sm);
        border-end-end-radius: var(--hrc-radius-sm);
    }

    body.hrc-design-platform-v3 [data-ripple]::after {
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: radial-gradient(circle, color-mix(in srgb, currentColor var(--hrc-opacity-pressed), transparent), transparent);
        content: "";
        opacity: var(--hrc-opacity-hidden);
        scale: .6;
        transition: opacity var(--hrc-motion-fast) var(--hrc-ease-standard), scale var(--hrc-motion-fast) var(--hrc-ease-standard);
    }

    body.hrc-design-platform-v3 [data-ripple]:active::after {
        opacity: 1;
        scale: 1;
    }

    body.hrc-design-platform-v3 :where(.hrc-data-grid, .hrc-calendar, .hrc-editor, .hrc-ai-chat, .hrc-command-palette) {
        min-width: 0;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
        color: var(--hrc-color-text);
        box-shadow: var(--hrc-shadow-sm);
    }

    body.hrc-design-platform-v3 .hrc-data-grid {
        max-width: 100%;
        overflow: auto;
        overscroll-behavior-inline: contain;
        scrollbar-gutter: stable;
    }

    body.hrc-design-platform-v3 .hrc-data-grid [role="gridcell"] {
        min-width: var(--hrc-foldable-pane-min);
        padding: var(--hrc-space-3);
        border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
    }

    body.hrc-design-platform-v3 .hrc-calendar {
        display: grid;
        grid-template-columns: repeat(7, minmax(var(--hrc-calendar-cell), 1fr));
        max-width: 100%;
        gap: var(--hrc-space-1);
        overflow-x: auto;
        padding: var(--hrc-space-4);
        overscroll-behavior-inline: contain;
    }

    body.hrc-design-platform-v3 .hrc-calendar button {
        min-width: var(--hrc-calendar-cell);
        min-height: var(--hrc-calendar-cell);
        border: 0;
        border-radius: var(--hrc-radius-sm);
        background: transparent;
        color: inherit;
    }

    body.hrc-design-platform-v3 .hrc-calendar button:is([aria-selected="true"], [aria-pressed="true"]) {
        background: var(--hrc-action-primary);
        color: var(--hrc-action-on-solid);
    }

    body.hrc-design-platform-v3 .hrc-editor {
        display: grid;
        grid-template-rows: auto minmax(var(--hrc-editor-min-height), 1fr);
        overflow: hidden;
    }

    body.hrc-design-platform-v3 .hrc-editor__toolbar,
    body.hrc-design-platform-v3 .hrc-ai-chat__composer {
        display: flex;
        flex-wrap: wrap;
        gap: var(--hrc-space-2);
        padding: var(--hrc-space-3);
        border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
    }

    body.hrc-design-platform-v3 .hrc-editor__content,
    body.hrc-design-platform-v3 .hrc-ai-chat__messages {
        min-height: var(--hrc-editor-min-height);
        padding: var(--hrc-space-4);
        overflow: auto;
    }

    body.hrc-design-platform-v3 .hrc-command-palette {
        position: fixed;
        inset-block-start: var(--hrc-space-12);
        inset-inline-start: 50%;
        z-index: var(--hrc-z-modal);
        width: min(var(--hrc-command-width), calc(100% - var(--hrc-space-6)));
        max-height: calc(100dvh - var(--hrc-space-12));
        overflow: auto;
        padding: var(--hrc-space-4);
        translate: -50% 0;
    }

    body.hrc-design-platform-v3 .ui-playground-stage .hrc-command-palette {
        position: static;
        width: 100%;
        max-height: none;
        translate: none;
    }

    body.hrc-design-platform-v3 :where(.hrc-timeline, .hrc-funnel, .hrc-heatmap) {
        display: grid;
        gap: var(--hrc-space-3);
        min-width: 0;
    }

    body.hrc-design-platform-v3 .hrc-timeline > * {
        padding-inline-start: var(--hrc-space-5);
        border-inline-start: var(--hrc-chart-stroke) solid var(--hrc-chart-1);
    }

    body.hrc-design-platform-v3 .hrc-funnel {
        grid-template-columns: repeat(auto-fit, minmax(var(--hrc-foldable-pane-min), 1fr));
    }

    body.hrc-design-platform-v3 .hrc-funnel > *,
    body.hrc-design-platform-v3 .hrc-heatmap > * {
        padding: var(--hrc-space-3);
        border-radius: var(--hrc-radius-sm);
        background: color-mix(in srgb, var(--hrc-chart-1) var(--hrc-opacity-hover), var(--hrc-color-surface));
    }

    body.hrc-design-platform-v3 .hrc-gauge {
        aspect-ratio: 2 / 1;
        border-radius: var(--hrc-radius-pill) var(--hrc-radius-pill) 0 0;
        background: conic-gradient(from 270deg, var(--hrc-chart-1) var(--hrc-gauge-value, 50%), var(--hrc-color-border) 0);
    }

    body.hrc-design-platform-v3 .hrc-page-enter {
        animation: hrc-v3-page-enter var(--hrc-motion-page) var(--hrc-ease-emphasized) both;
    }

    body.hrc-design-platform-v3 :where(dialog[open], .hrc-drawer[data-state="open"]) {
        animation: hrc-v3-overlay-enter var(--hrc-motion-overlay) var(--hrc-ease-decelerate) both;
    }

    [dir="rtl"] body.hrc-design-platform-v3 :where(.hrc-toolbar, .hrc-breadcrumb, .hrc-btn-group, .hrc-split-button) {
        direction: rtl;
    }

    @keyframes hrc-v3-page-enter {
        from { opacity: var(--hrc-opacity-hidden); translate: 0 var(--hrc-space-2); }
    }

    @keyframes hrc-v3-overlay-enter {
        from { opacity: var(--hrc-opacity-hidden); scale: .98; }
    }

    @media (forced-colors: active) {
        body.hrc-design-platform-v3 :where(.hrc-btn, .hrc-data-grid, .hrc-calendar, .hrc-editor, .hrc-ai-chat, .hrc-command-palette) {
            border: var(--hrc-border-width) solid CanvasText;
            forced-color-adjust: auto;
        }
    }

    @media (prefers-contrast: more) {
        body.hrc-design-platform-v3 {
            --hrc-border-width: 2px;
            --hrc-focus-width: 3px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        body.hrc-design-platform-v3 .hrc-page-enter,
        body.hrc-design-platform-v3 :where(dialog[open], .hrc-drawer[data-state="open"]) {
            animation: none;
        }
    }

    @media (max-width: 640px) {
        body.hrc-design-platform-v3 .hrc-command-palette {
            inset-block-start: var(--hrc-space-3);
            width: calc(100% - var(--hrc-space-4));
            max-height: calc(100dvh - var(--hrc-space-6));
        }

        body.hrc-design-platform-v3 .hrc-funnel {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (horizontal-viewport-segments: 2) {
        body.hrc-design-platform-v3 .hrc-foldable-layout {
            display: grid;
            grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
            gap: env(viewport-segment-left 1 0);
        }
    }
}

.hrc-preserve-lines {
    white-space: pre-line;
}

.hrc-support-access-banner {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 46px;
    padding: 8px 16px;
    background: var(--hrc-action-secondary);
    color: var(--hrc-action-on-solid);
}

.hrc-support-access-banner span {
    flex: 1;
}

.hrc-support-access-banner form {
    margin: 0;
}

.hrc-support-access-banner button {
    border: 1px solid var(--hrc-action-on-solid);
    border-radius: 9px;
    padding: 6px 11px;
    background: var(--hrc-action-on-solid);
    color: var(--hrc-action-secondary);
    font-weight: 800;
}

.hrc-support-access-banner + .qm-app {
    padding-top: 46px;
}

.hrc-session-expired {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    background: var(--hrc-color-bg-app);
    color: var(--hrc-color-text);
    font-family: var(--hrc-font-sans);
}

.hrc-session-expired__card {
    max-width: 520px;
    margin: 24px;
    padding: 24px;
    border: 1px solid var(--hrc-color-border);
    border-radius: 18px;
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-md);
}

.hrc-session-expired__card h1 {
    margin: 0 0 10px;
    font-size: 24px;
}

.hrc-session-expired__card p {
    color: var(--hrc-color-text-muted);
    line-height: 1.6;
}

.hrc-session-expired__action {
    display: inline-flex;
    margin-top: 8px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--hrc-action-primary);
    color: var(--hrc-action-on-solid);
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 700px) {
    .hrc-support-access-banner {
        position: relative;
        display: grid;
    }

    .hrc-support-access-banner + .qm-app {
        padding-top: 0;
    }
}

@layer components {
    body.hrc-design-system-v1 :where(.hrc-widget, .hrc-saved-views, .hrc-bulk-actions, .hrc-quick-actions, .hrc-activity-feed) {
        min-width: 0;
        border: var(--hrc-border-width) solid var(--hrc-component-surface-border);
        border-radius: var(--hrc-component-surface-radius);
        background: var(--hrc-component-surface-bg);
        color: var(--hrc-component-surface-fg);
        box-shadow: var(--hrc-component-surface-shadow);
    }

    body.hrc-design-system-v1 .hrc-widget {
        display: grid;
        gap: var(--hrc-space-3);
        padding: var(--hrc-component-surface-padding);
    }

    body.hrc-design-system-v1 :where(.hrc-search, .hrc-filter) {
        display: flex;
        min-width: 0;
        flex-wrap: wrap;
        align-items: end;
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1 .hrc-search > :where(input, [role="searchbox"]),
    body.hrc-design-system-v1 .hrc-filter > :where(label, .hrc-field) {
        flex: 1 1 var(--hrc-layout-controls-min);
        min-width: 0;
    }

    body.hrc-design-system-v1 :where(.hrc-saved-views, .hrc-bulk-actions, .hrc-quick-actions) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--hrc-space-2);
        padding: var(--hrc-space-3);
    }

    body.hrc-design-system-v1 .hrc-bulk-actions[hidden] {
        display: none;
    }

    body.hrc-design-system-v1 .hrc-activity-feed {
        display: grid;
        gap: 0;
        overflow: clip;
    }

    body.hrc-design-system-v1 .hrc-activity-feed > * {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--hrc-space-3);
        padding: var(--hrc-space-4);
        border-block-end: var(--hrc-border-width) solid var(--hrc-component-surface-border);
    }

    body.hrc-design-system-v1 .hrc-activity-feed > :last-child {
        border-block-end: 0;
    }

    body.hrc-design-system-v1 .hrc-activity-feed time {
        color: var(--hrc-component-surface-muted);
        font-variant-numeric: tabular-nums;
    }

    @media (max-width: 640px) {
        body.hrc-design-system-v1 :where(.hrc-search, .hrc-filter) {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
        }
    }
}

/* source: public/assets/design-native-contract.css */
/*
 * HRConnect Native conformance contract.
 *
 * This is the final, unlayered SSoT contract for routes that explicitly opt in
 * through hrc-native-presentation-route. It loads after the platform adapters
 * so legacy shell CSS cannot redefine Native layout or component geometry.
 */
body.hrc-design-system-v1.hrc-native-presentation-route {
    overflow-x: clip;
    background: var(--hrc-color-bg-app);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-skip-link {
    position: fixed;
    z-index: var(--hrc-z-toast);
    inset: var(--hrc-space-3) auto auto var(--hrc-space-3);
    display: inline-flex;
    align-items: center;
    min-height: var(--hrc-touch-target);
    padding: var(--hrc-space-3) var(--hrc-space-4);
    translate: 0 -160%;
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-text);
    color: var(--hrc-color-bg-app);
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-bold);
    box-shadow: var(--hrc-shadow-lg);
    transition: translate var(--hrc-motion-fast) var(--hrc-ease-standard);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-skip-link:focus {
    translate: 0;
    color: var(--hrc-color-bg-app);
}

@media (min-width: 992px) {
    body.hrc-design-system-v1.hrc-native-presentation-route .qm-main.hrc-layout-main {
        padding-inline-start: var(--hrc-menu-width);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.erp-sidebar-collapsed .qm-main.hrc-layout-main {
        padding-inline-start: var(--hrc-menu-rail);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.erp-sidebar-collapsed
    .hrc-layout-sidebar .hrc-navigation .hrc-navigation__section-toggle {
        display: none;
        width: 0;
        min-width: 0;
        max-width: 0;
        height: 0;
        min-height: 0;
        padding: 0;
        overflow: hidden;
    }
}

body.hrc-design-system-v1.hrc-native-presentation-route :where(*, *::before, *::after) {
    box-sizing: border-box;
}

body.hrc-design-system-v1.hrc-native-presentation-route :where(
    .hrc-layout-main,
    .hrc-layout-content,
    .hrc-page-host,
    .hrc-page-shell,
    .hrc-page-container,
    .hrc-content-container,
    .hrc-layout-page,
    .hrc-layout-container
) {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route .qm-content.hrc-layout-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--hrc-space-5) 0 var(--hrc-space-8);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-page-host,
body.hrc-design-system-v1.hrc-native-presentation-route .hrc-page-shell {
    width: 100%;
}

body.hrc-design-system-v1.hrc-native-presentation-route :where(
    .hrc-page-container,
    .hrc-content-container,
    .hrc-layout-container
) {
    width: min(100%, var(--hrc-page-max));
    max-width: var(--hrc-page-max);
    margin-inline: auto;
    padding-inline: var(--hrc-page-gutter);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-page-container {
    container-name: hrc-native-page;
    container-type: inline-size;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-shell-breadcrumb {
    width: min(100%, var(--hrc-page-max));
    max-width: var(--hrc-page-max);
    margin-inline: auto;
    padding-inline: var(--hrc-page-gutter);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-layout-page {
    display: grid;
    align-content: start;
    gap: var(--hrc-section-gap);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-hero[data-layout="stack"] {
    display: block;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--hrc-grid-gap);
    width: 100%;
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-grid[data-layout="split"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-grid[data-layout="primary-aside"] {
    grid-template-columns: minmax(0, 2fr) minmax(var(--hrc-layout-detail-min), 1fr);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-grid[data-layout="three"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route
:is(.hrc-grid[data-layout="auto"], .hrc-grid[data-layout="detail"]) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hrc-layout-detail-min)), 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-grid[data-layout="controls"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hrc-layout-controls-min)), 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-grid[data-layout="compact-metrics"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hrc-layout-compact-metrics-min)), 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route :where(
    .hrc-hero,
    .hrc-section,
    .hrc-card,
    .hrc-surface,
    .hrc-toolbar,
    .hrc-filter-panel,
    .hrc-form-section,
    .hrc-table-shell,
    .hrc-table-scroll
) {
    min-width: 0;
    max-width: 100%;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hrc-space-6);
    width: 100%;
    min-height: 132px;
    padding: var(--hrc-space-6) var(--hrc-space-8);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-lg);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--hrc-color-brand) 10%, transparent), color-mix(in srgb, var(--hrc-attendance-overtime) 8%, transparent)),
        var(--hrc-color-surface);
    color: var(--hrc-color-text);
    box-shadow: var(--hrc-shadow-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-hero[data-density="compact"] {
    min-height: var(--hrc-hero-compact-min-height);
    padding: var(--hrc-space-4) var(--hrc-space-6);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-hero__content {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hrc-space-2);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route :where(.hrc-section, .hrc-card, .hrc-surface) {
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    box-shadow: var(--hrc-shadow-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route :where(.hrc-card, .hrc-surface) {
    padding: var(--hrc-space-5);
}

/* Recruitment performance owns an edge-to-edge ranked list. This unlayered
 * native contract prevents the generic surface and browser list padding from
 * collapsing the narrow 35% card. */
body.hrc-design-system-v1.hrc-native-presentation-route
    .hrc-dashboard-recruitment-layout > .hrc-dashboard-recruitment-ranking {
    padding: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route
    .hrc-dashboard-recruitment-layout > .hrc-dashboard-recruitment-chart {
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route
    .hrc-dashboard-recruitment-chart .hrc-dashboard-chart__canvas canvas {
    width: 100%;
    height: 100%;
    max-height: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route
    .hrc-dashboard-recruitment-ranking > .hrc-dashboard-ranking__list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-section {
    display: grid;
    gap: var(--hrc-space-4);
    padding: var(--hrc-space-5);
}

body.hrc-design-system-v1.hrc-native-presentation-route :where(.hrc-toolbar, .hrc-table-toolbar, .hrc-form-actions) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-section:has(> .hrc-table-toolbar) {
    position: relative;
}

body.hrc-design-system-v1.hrc-native-presentation-route
.hrc-section:has(> .hrc-table-toolbar) > .hrc-popover:not([hidden]) {
    position: absolute;
    inset-block-start: calc(var(--hrc-space-5) + var(--hrc-control-height) + var(--hrc-space-3));
    inset-inline-end: var(--hrc-space-5);
    z-index: var(--hrc-z-dropdown);
    display: grid;
    gap: var(--hrc-space-3);
    width: min(var(--hrc-popover-inline-size), calc(100vw - (var(--hrc-page-gutter) * 2)));
    max-width: calc(100% - (var(--hrc-space-5) * 2));
    max-height: min(60vh, var(--hrc-popover-block-size));
    overflow: auto;
    overscroll-behavior: contain;
}

body.hrc-design-system-v1.hrc-native-presentation-route :where(.hrc-filter-panel, .hrc-form-section) {
    display: grid;
    gap: var(--hrc-space-4);
    width: 100%;
    padding: var(--hrc-space-5);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-filter-panel__body[hidden] {
    display: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-filter-panel__body,
body.hrc-design-system-v1.hrc-native-presentation-route .hrc-filter-panel__content {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-filter-panel__content {
    display: grid;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-filter-panel__mobile-header {
    display: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-filter-panel__toggle[aria-expanded="true"] i {
    rotate: 180deg;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: var(--hrc-space-3);
    width: 100%;
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-filter-grid[data-columns="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-filter-grid > .hrc-form-actions {
    grid-column: auto;
    align-self: end;
    justify-content: flex-start;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-filter-note {
    grid-column: 1 / -1;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-filter-grid > [data-span="2"] {
    grid-column: span 2;
}

body.hrc-design-system-v1.hrc-native-presentation-route :where(.hrc-field, .hrc-filter-field) {
    display: grid;
    align-content: end;
    gap: var(--hrc-space-2);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-checkbox-target {
    display: inline-grid;
    place-items: center;
    width: var(--hrc-touch-target);
    min-width: var(--hrc-touch-target);
    height: var(--hrc-touch-target);
    min-height: var(--hrc-touch-target);
    margin: calc((var(--hrc-touch-target) - var(--hrc-icon-md)) / -2) 0;
    border-radius: var(--hrc-radius-sm);
    cursor: pointer;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-checkbox-target > input[type="checkbox"] {
    width: var(--hrc-icon-md);
    min-width: var(--hrc-icon-md);
    height: var(--hrc-icon-md);
    min-height: var(--hrc-icon-md);
    margin: 0;
    accent-color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-checkbox-target:focus-within {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
}

body.hrc-design-system-v1.hrc-native-presentation-route :where(.hrc-field__label, .hrc-label) {
    max-width: 100%;
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-semibold);
    line-height: var(--hrc-leading-normal);
    overflow-wrap: normal;
    word-break: normal;
}

body.hrc-design-system-v1.hrc-native-presentation-route :where(.hrc-form-grid, .hrc-grid-form) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--hrc-space-4);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-form-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(var(--hrc-kpi-columns, 4), minmax(0, 1fr));
    gap: var(--hrc-grid-gap);
    width: 100%;
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-kpi {
    min-width: 0;
    overflow: hidden;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-report-kpi-grid {
    --hrc-kpi-columns: 5;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-report-navigation {
    display: flex;
    align-items: stretch;
    gap: var(--hrc-space-2);
    width: 100%;
    min-width: 0;
    padding: var(--hrc-space-2);
    overflow-x: auto;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-sm);
    scrollbar-width: thin;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-report-navigation__item {
    display: flex;
    flex: 1 0 clamp(13rem, 22vw, 20rem);
    align-items: center;
    gap: var(--hrc-space-3);
    min-width: min(100%, 13rem);
    min-height: var(--hrc-touch-target);
    padding: var(--hrc-space-3) var(--hrc-space-4);
    border: var(--hrc-border-width) solid transparent;
    border-radius: var(--hrc-radius-sm);
    color: var(--hrc-color-text-soft);
    text-decoration: none;
    white-space: normal;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-report-navigation__item > i {
    flex: 0 0 auto;
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-report-navigation__item > span {
    display: grid;
    gap: var(--hrc-space-1);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-report-navigation__item :where(strong, small) {
    overflow-wrap: normal;
    word-break: normal;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-report-navigation__item small {
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-report-navigation__item:is(:hover, .is-active, [aria-current="page"]) {
    border-color: color-mix(in srgb, var(--hrc-color-brand) 26%, var(--hrc-color-border));
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
    gap: var(--hrc-grid-gap);
    width: 100%;
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-chart-card {
    display: grid;
    gap: var(--hrc-space-4);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-chart-card__header {
    display: grid;
    gap: var(--hrc-space-1);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-chart-card__header :where(h2, p) {
    margin: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-chart-card__header p {
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-chart-card__plot {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: clamp(14rem, 28vw, 20rem);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-chart-card__plot > canvas {
    width: 100%;
    max-width: 100%;
    height: 100%;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-chart-state {
    display: grid;
    place-items: center;
    min-height: 12rem;
    padding: var(--hrc-space-5);
    color: var(--hrc-color-text-muted);
    text-align: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-sparkline {
    display: flex;
    align-items: end;
    gap: var(--hrc-space-1);
    height: var(--hrc-space-6);
    overflow: hidden;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-sparkline > i {
    flex: 1 1 0;
    min-width: 3px;
    max-width: var(--hrc-space-2);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-gauge {
    display: grid;
    grid-template-columns: var(--hrc-control-height-lg) minmax(0, 1fr);
    align-items: center;
    gap: var(--hrc-space-3);
    min-width: 0;
    aspect-ratio: auto;
    border-radius: 0;
    background: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-gauge > div {
    display: grid;
    place-items: center;
    width: var(--hrc-control-height-lg);
    height: var(--hrc-control-height-lg);
    border-radius: var(--hrc-radius-pill);
    background: conic-gradient(var(--hrc-color-brand) var(--hrc-progress-value, 0%), var(--hrc-color-border) 0);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-heatmap {
    display: grid;
    grid-template-columns: repeat(7, minmax(18px, 1fr));
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-heatmap > .hrc-tag {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1;
    padding: 0;
    border: var(--hrc-border-width) solid color-mix(in srgb, var(--hrc-chart-1) 24%, var(--hrc-color-border));
    border-radius: var(--hrc-radius-xs);
    background: color-mix(in srgb, var(--hrc-chart-1) 18%, var(--hrc-color-surface));
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-heatmap > .hrc-tag[data-level="1"] {
    background: color-mix(in srgb, var(--hrc-chart-1) 34%, var(--hrc-color-surface));
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-heatmap > .hrc-tag[data-level="2"] {
    background: color-mix(in srgb, var(--hrc-chart-1) 52%, var(--hrc-color-surface));
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-heatmap > .hrc-tag[data-level="3"] {
    background: color-mix(in srgb, var(--hrc-chart-1) 72%, var(--hrc-color-surface));
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-heatmap > .hrc-tag[data-risk="1"] {
    border-color: var(--hrc-color-danger);
    background: var(--hrc-color-danger-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-timeline > * {
    display: grid;
    gap: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-dashboard-plan {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
}

body.hrc-design-system-v1.hrc-native-presentation-route :where(.hrc-table-shell, .hrc-table-scroll) {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-table {
    width: 100%;
    min-width: max(100%, calc(var(--hrc-table-column-min) * var(--hrc-table-columns, 6)));
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-table[data-hrc-columns="3"] {
    --hrc-table-columns: 3;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-table[data-hrc-columns="4"] {
    --hrc-table-columns: 4;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-table[data-hrc-columns="5"] {
    --hrc-table-columns: 5;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-table[data-hrc-columns="6"] {
    --hrc-table-columns: 6;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-table[data-hrc-columns="7"] {
    --hrc-table-columns: 7;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-table[data-hrc-columns="8"] {
    --hrc-table-columns: 8;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-table[data-hrc-columns="9"] {
    --hrc-table-columns: 9;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-table[data-hrc-columns="10"] {
    --hrc-table-columns: 10;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-table :where(th, td) {
    min-width: 0;
    height: var(--hrc-row-density);
    padding: var(--hrc-space-3) var(--hrc-space-4);
    border-bottom: var(--hrc-border-width) solid var(--hrc-color-border);
    color: var(--hrc-color-text);
    line-height: var(--hrc-leading-normal);
    vertical-align: middle;
    overflow-wrap: normal;
    word-break: normal;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-table th {
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
    text-align: start;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-table td {
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route
.hrc-table-shell[data-density="compact"] .hrc-table :is(th, td) {
    height: auto;
    padding-block: var(--hrc-space-2);
    line-height: var(--hrc-leading-tight);
}

/* Keep Native button hover fallbacks self-contained in the versioned Platform
 * bundle. A cache-busted Governance runtime may still override these internal
 * defaults through the public --hrc-runtime-* policy variables. */
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-ui-governance-runtime[data-hrc-native-presentation="dashboard"] {
    --hrc-native-primary-background-hover: var(--hrc-color-brand-hover);
    --hrc-native-primary-border-hover: transparent;
    --hrc-native-primary-color-hover: var(--hrc-action-on-primary);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-ui-governance-runtime[data-hrc-native-presentation="dashboard"][data-ui-button-policy="solid"] {
    --hrc-native-primary-border-hover: var(--hrc-color-brand-hover);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-ui-governance-runtime[data-hrc-native-presentation="dashboard"][data-ui-button-policy="outline"] {
    --hrc-native-primary-background-hover: var(--hrc-color-brand-soft);
    --hrc-native-primary-border-hover: var(--hrc-primary);
    --hrc-native-primary-color-hover: var(--hrc-primary);
}

/* The governance control plane is shared by legacy and Native routes. Keep
 * its foreground policy unlayered so its later runtime layer cannot restore
 * a Light-only white foreground in Dark mode. */
body.hrc-design-system-v1.hrc-ui-governance-runtime[data-ui-button-policy="soft-gradient"] {
    --hrc-runtime-primary-color: var(--hrc-action-cta-foreground);
}

body.hrc-design-system-v1.hrc-ui-governance-runtime[data-ui-button-policy="solid"] {
    --hrc-runtime-primary-color: var(--hrc-action-on-primary);
}

body.hrc-design-system-v1.hrc-ui-governance-runtime[data-ui-button-policy="outline"] {
    --hrc-runtime-primary-color: var(--hrc-primary);
}

body.hrc-design-system-v1.hrc-native-presentation-route :is(.hrc-btn, .hrc-icon-btn) {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: var(--hrc-space-2);
    min-width: var(--hrc-touch-target);
    min-height: max(var(--hrc-control-height), var(--hrc-touch-target));
    padding: var(--hrc-space-2) var(--hrc-space-4);
    border: var(--hrc-border-width) solid var(--hrc-runtime-primary-border, transparent);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-runtime-primary-background, var(--hrc-color-brand));
    color: var(--hrc-runtime-primary-color, var(--hrc-action-on-solid));
    font: inherit;
    font-size: var(--hrc-text-md);
    font-weight: var(--hrc-weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--hrc-motion-fast) var(--hrc-ease-standard),
        border-color var(--hrc-motion-fast) var(--hrc-ease-standard),
        box-shadow var(--hrc-motion-fast) var(--hrc-ease-standard),
        translate var(--hrc-motion-fast) var(--hrc-ease-standard);
}

body.hrc-design-system-v1.hrc-native-presentation-route :is(.hrc-btn, .hrc-icon-btn):hover {
    border-color: var(--hrc-runtime-primary-border-hover, var(--hrc-native-primary-border-hover, var(--hrc-runtime-primary-border, transparent)));
    background: var(--hrc-runtime-primary-background-hover, var(--hrc-native-primary-background-hover, var(--hrc-color-brand-hover)));
    color: var(--hrc-runtime-primary-color-hover, var(--hrc-native-primary-color-hover, var(--hrc-runtime-primary-color, var(--hrc-action-on-solid))));
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-btn--secondary {
    border-color: var(--hrc-color-border);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-btn--secondary:hover {
    border-color: var(--hrc-color-brand);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-btn--wrap {
    max-width: 100%;
    min-height: max(var(--hrc-control-height), var(--hrc-touch-target));
    height: auto;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-btn--danger {
    background: var(--hrc-action-danger);
    color: var(--hrc-action-on-danger);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-btn--warning {
    background: var(--hrc-action-warning);
    color: var(--hrc-action-on-warning);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-btn--success {
    background: var(--hrc-action-success);
    color: var(--hrc-action-on-success);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-btn--info {
    background: var(--hrc-action-info);
    color: var(--hrc-action-on-info);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-btn--neutral {
    background: var(--hrc-action-neutral);
    color: var(--hrc-action-on-neutral);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-btn--danger:hover {
    background: var(--hrc-action-danger);
    color: var(--hrc-action-on-danger);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-btn--warning:hover {
    background: var(--hrc-action-warning);
    color: var(--hrc-action-on-warning);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-btn--success:hover {
    background: var(--hrc-action-success);
    color: var(--hrc-action-on-success);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-btn--info:hover {
    background: var(--hrc-action-info);
    color: var(--hrc-action-on-info);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-btn--neutral:hover {
    background: var(--hrc-action-neutral);
    color: var(--hrc-action-on-neutral);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-btn--primary-cta {
    min-height: var(--hrc-touch-target);
    border-color: transparent;
    border-radius: var(--hrc-radius-control);
    background: var(--hrc-action-cta-background);
    color: var(--hrc-action-cta-foreground);
    box-shadow: var(--hrc-action-cta-shadow);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-btn--primary-cta:is(:hover, :active) {
    border-color: transparent;
    background: var(--hrc-action-cta-background-hover);
    color: var(--hrc-action-cta-foreground);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-icon-btn {
    flex-basis: max(var(--hrc-control-height), var(--hrc-touch-target));
    width: max(var(--hrc-control-height), var(--hrc-touch-target));
    padding: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route :where(.hrc-btn, .hrc-icon-btn) :where(i, svg) {
    flex: 0 0 auto;
    width: 1em;
    text-align: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route :where(.hrc-input, .hrc-select, .hrc-textarea) {
    width: 100%;
    min-width: 0;
    min-height: max(var(--hrc-control-height), var(--hrc-touch-target));
    padding: .625rem .75rem;
    border: var(--hrc-border-width) solid var(--hrc-color-border-strong);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    font: inherit;
    line-height: var(--hrc-leading-normal);
}

body.hrc-design-system-v1.hrc-native-presentation-route :where(.hrc-badge, .hrc-status, .hrc-tag) {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    gap: var(--hrc-space-1);
    max-width: 100%;
    min-height: 26px;
    padding: .2rem .625rem;
    border-radius: var(--hrc-radius-pill);
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-avatar {
    display: inline-grid;
    flex: 0 0 var(--hrc-control-height);
    place-items: center;
    width: var(--hrc-control-height);
    height: var(--hrc-control-height);
    min-width: var(--hrc-control-height);
    overflow: hidden;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-avatar :where(img, picture) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.hrc-design-system-v1.hrc-native-presentation-route .hrc-form-section__header,
body.hrc-design-system-v1.hrc-native-presentation-route .hrc-form-section__header > * {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route
.hrc-form-section__header > :where(.hrc-badge, .hrc-status, .hrc-tag) {
    white-space: normal;
    overflow-wrap: anywhere;
}

@container hrc-native-page (max-width: 75rem) {
    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-grid[data-layout="three"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container hrc-native-page (max-width: 64rem) {
    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-hero__actions {
        justify-content: flex-start;
    }
}

@container hrc-native-page (max-width: 48rem) {
    body.hrc-design-system-v1.hrc-native-presentation-route :is(
        .hrc-grid[data-layout="primary-aside"],
        .hrc-grid[data-layout="split"],
        .hrc-grid[data-layout="three"]
    ) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1199.98px) {
    body.hrc-design-system-v1.hrc-native-presentation-route :is(.hrc-filter-grid, .hrc-kpi-grid, .hrc-grid[data-layout="three"], .hrc-grid[data-layout="four"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 1023.98px) {
    body.hrc-design-system-v1.hrc-native-presentation-route :where(
        .hrc-page-container,
        .hrc-content-container,
        .hrc-layout-container
    ) {
        padding-inline: var(--hrc-page-gutter-tablet);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-hero {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--hrc-space-6);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-hero__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    body.hrc-design-system-v1.hrc-native-presentation-route .qm-content.hrc-layout-content {
        padding-block: var(--hrc-space-3) var(--hrc-space-6);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route :where(
        .hrc-page-container,
        .hrc-content-container,
        .hrc-layout-container
    ) {
        padding-inline: var(--hrc-page-gutter-mobile);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-layout-page {
        gap: var(--hrc-space-4);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-form-section__header {
        align-items: stretch;
        flex-direction: column;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route
    .hrc-form-section__header > :where(.hrc-badge, .hrc-status, .hrc-tag) {
        width: 100%;
        justify-content: flex-start;
        text-align: start;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route :is(.hrc-filter-grid[data-columns], .hrc-filter-grid, .hrc-kpi-grid, .hrc-form-grid, .hrc-grid-form, .hrc-grid) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-filter-grid > [data-span] {
        grid-column: auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-hero {
        min-height: 0;
        padding: var(--hrc-space-5);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-hero[data-density="compact"] {
        min-height: 0;
        padding: var(--hrc-space-4);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-hero__actions,
    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-form-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route :where(.hrc-hero__actions, .hrc-form-actions) > :where(.hrc-btn, .hrc-icon-btn) {
        width: 100%;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route :where(.hrc-filter-panel, .hrc-form-section, .hrc-section) {
        padding: var(--hrc-space-4);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-filter-panel__mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--hrc-space-3);
        margin-bottom: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route
    .hrc-section:has(> .hrc-table-toolbar) > .hrc-popover:not([hidden]) {
        position: static;
        width: 100%;
        max-width: 100%;
        max-height: none;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-tab {
        flex: 0 0 auto;
        min-width: max-content;
        padding-inline: var(--hrc-space-2);
        white-space: nowrap;
        scroll-snap-align: start;
    }
}

@media (max-width: 48rem) {
    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-detail-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--hrc-space-4);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-mobile-card-table {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-mobile-card-table colgroup {
        display: none;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-mobile-card-table :where(thead, th) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-mobile-card-table :where(tbody, tr, td) {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-mobile-card-table tbody {
        display: grid;
        gap: var(--hrc-space-3);
        padding: 0;
        background: transparent;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-mobile-card-table tr {
        display: grid;
        margin: 0;
        padding: var(--hrc-space-3);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
        overflow: visible;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-mobile-card-table td {
        display: grid;
        grid-template-columns: minmax(6.5rem, 2fr) minmax(0, 3fr);
        gap: var(--hrc-space-3);
        height: auto;
        border: 0;
        white-space: normal;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-mobile-card-table td::before {
        content: attr(data-label);
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-semibold);
    }

    /*
     * Dashboard analytics are comparison tables, not record lists. Keep
     * their column relationship intact and contain horizontal navigation
     * inside the focusable table region.
     */
    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-dashboard .hrc-table-scroll {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-gutter: stable;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-dashboard .hrc-table.hrc-mobile-card-table {
        display: table;
        width: max-content;
        min-width: max(100%, calc(var(--hrc-table-column-min) * 4));
        max-width: none;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-dashboard .hrc-table.hrc-mobile-card-table colgroup {
        display: table-column-group;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-dashboard .hrc-table.hrc-mobile-card-table thead {
        position: static;
        display: table-header-group;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-dashboard .hrc-table.hrc-mobile-card-table tbody {
        display: table-row-group;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-dashboard .hrc-table.hrc-mobile-card-table tr {
        display: table-row;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-dashboard .hrc-table.hrc-mobile-card-table th,
    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-dashboard .hrc-table.hrc-mobile-card-table td {
        display: table-cell;
        width: auto;
        min-width: var(--hrc-table-column-min);
        max-width: none;
        height: auto;
        padding: var(--hrc-space-3);
        overflow: visible;
        clip: auto;
        white-space: nowrap;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-dashboard .hrc-table.hrc-mobile-card-table th {
        position: sticky;
        top: 0;
        z-index: var(--hrc-z-sticky);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route
    .hrc-dashboard .hrc-table.hrc-mobile-card-table :where(th, td):first-child {
        min-width: calc(var(--hrc-table-column-min) * 2);
        max-width: calc(var(--hrc-table-column-min) * 3);
        white-space: normal;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-dashboard .hrc-table.hrc-mobile-card-table td::before {
        content: none;
        display: none;
    }
}

@media (max-width: 390px) {
    body.hrc-design-system-v1.hrc-native-presentation-route :where(.hrc-hero, .hrc-filter-panel, .hrc-form-section, .hrc-section) {
        border-radius: var(--hrc-radius-sm);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .hrc-mobile-card-table td {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--hrc-space-1);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route
    .hrc-mobile-card-table td:where(.money, .amount, .erp-money, [data-type="currency"]) {
        min-width: 0;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr);
        overflow: visible;
        text-align: start;
        white-space: nowrap;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route
    .hrc-mobile-card-table td:where(.money, .amount, .erp-money, [data-type="currency"])::before {
        white-space: normal;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route :where(.hrc-btn, .hrc-icon-btn) {
        min-height: var(--hrc-touch-target);
    }
}

body.hrc-design-system-v1.hrc-native-presentation-route
:where(.hrc-upload, [data-hrc-upload]) input[type="file"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route
:where(.hrc-upload, [data-hrc-upload]) input[type="file"]::file-selector-button {
    max-width: 50%;
    margin-inline-end: var(--hrc-space-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Native ERP navigation contract.
 *
 * The sidebar is an always-expanded information architecture on desktop.
 * Tablet/mobile retain the responsive offcanvas boundary, while every
 * authorized business group inside the drawer remains visible and expanded.
 */
html body.hrc-design-system-v1.qm-erp2050 {
    --qm-sidebar: var(--hrc-sidebar-width);
    --hrc-sidebar-surface:
        linear-gradient(
            160deg,
            color-mix(in srgb, var(--hrc-color-brand-soft) 78%, var(--hrc-color-surface)) 0%,
            var(--hrc-color-surface) 42%,
            color-mix(in srgb, var(--hrc-color-success-soft) 72%, var(--hrc-color-surface)) 100%
        );
}

html body.hrc-design-system-v1.qm-erp2050 .qm-sidebar.hrc-layout-sidebar {
    width: var(--hrc-sidebar-width) !important;
    min-width: var(--hrc-sidebar-width) !important;
    max-width: var(--hrc-sidebar-width) !important;
    flex: 0 0 var(--hrc-sidebar-width) !important;
    padding: var(--hrc-space-3) var(--hrc-space-3) var(--hrc-space-4) !important;
    border-inline-end: var(--hrc-border-width) solid var(--hrc-sidebar-border);
    background: var(--hrc-sidebar-surface) !important;
    color: var(--hrc-sidebar-text);
    box-shadow: 8px 0 28px color-mix(in srgb, var(--hrc-color-brand) 7%, transparent) !important;
    overflow: hidden !important;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-brand {
    flex: 0 0 auto;
    gap: var(--hrc-space-3);
    min-width: 0;
    min-height: 58px;
    margin: 0;
    padding: var(--hrc-space-2) var(--hrc-space-2) var(--hrc-space-3) !important;
    border: var(--hrc-border-width) solid color-mix(in srgb, var(--hrc-color-brand) 14%, var(--hrc-color-border)) !important;
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-sidebar-panel) !important;
    color: var(--hrc-sidebar-text) !important;
    box-shadow: var(--hrc-shadow-xs);
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-brand:is(:hover, :focus-visible) {
    color: var(--hrc-color-brand) !important;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-brand :is(.qm-brand-logo, .qm-brand-mark) {
    width: 40px;
    height: 40px;
    padding: var(--hrc-space-1);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-sm) !important;
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-xs) !important;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-brand span {
    display: block !important;
    min-width: 0;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-brand strong {
    color: var(--hrc-sidebar-text) !important;
    font-size: var(--hrc-text-md) !important;
    font-weight: var(--hrc-weight-bold) !important;
    line-height: var(--hrc-leading-tight);
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-brand small {
    max-width: 10.5rem;
    margin-top: var(--hrc-space-1);
    color: var(--hrc-sidebar-text-muted) !important;
    font-size: var(--hrc-text-xs);
    line-height: var(--hrc-leading-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-nav {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column !important;
    gap: var(--hrc-space-1) !important;
    min-height: 0;
    max-height: none !important;
    margin: var(--hrc-space-3) 0 0 !important;
    padding: 0 var(--hrc-space-1) var(--hrc-space-4) 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-color: var(--hrc-color-border-strong) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-nav-group {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 0;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    visibility: visible !important;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-nav-group:last-child {
    border-bottom: 0 !important;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-nav-group[data-menu-tone="people"] {
    --hrc-nav-icon-color: var(--hrc-color-brand);
    --hrc-nav-icon-bg: color-mix(in srgb, var(--hrc-color-brand) 14%, var(--hrc-sidebar-panel));
    --hrc-nav-icon-foreground: var(--hrc-action-on-primary);
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-nav-group[data-menu-tone="recruitment"] {
    --hrc-nav-icon-color: var(--hrc-action-secondary);
    --hrc-nav-icon-bg: color-mix(in srgb, var(--hrc-action-secondary) 14%, var(--hrc-sidebar-panel));
    --hrc-nav-icon-foreground: var(--hrc-action-on-secondary);
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-nav-group[data-menu-tone="attendance"] {
    --hrc-nav-icon-color: var(--hrc-color-success);
    --hrc-nav-icon-bg: color-mix(in srgb, var(--hrc-color-success) 14%, var(--hrc-sidebar-panel));
    --hrc-nav-icon-foreground: var(--hrc-action-on-success);
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-nav-group[data-menu-tone="support"] {
    --hrc-nav-icon-color: var(--hrc-color-info);
    --hrc-nav-icon-bg: color-mix(in srgb, var(--hrc-color-info) 14%, var(--hrc-sidebar-panel));
    --hrc-nav-icon-foreground: var(--hrc-action-on-info);
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-nav-group[data-menu-tone="workspace"] {
    --hrc-nav-icon-color: var(--hrc-color-warning);
    --hrc-nav-icon-bg: color-mix(in srgb, var(--hrc-color-warning) 14%, var(--hrc-sidebar-panel));
    --hrc-nav-icon-foreground: var(--hrc-action-on-warning);
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-nav-group[data-menu-tone="finance"] {
    --hrc-nav-icon-color: var(--hrc-color-danger);
    --hrc-nav-icon-bg: color-mix(in srgb, var(--hrc-color-danger) 14%, var(--hrc-sidebar-panel));
    --hrc-nav-icon-foreground: var(--hrc-action-on-danger);
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-nav-group[data-menu-tone="system"] {
    --hrc-nav-icon-color: var(--hrc-action-neutral);
    --hrc-nav-icon-bg: color-mix(in srgb, var(--hrc-action-neutral) 14%, var(--hrc-sidebar-panel));
    --hrc-nav-icon-foreground: var(--hrc-action-on-neutral);
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-nav-group > .qm-nav-title {
    position: static !important;
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 0 !important;
    margin: 0 !important;
    padding: var(--hrc-space-1) var(--hrc-space-2) var(--hrc-space-2) !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--hrc-sidebar-text-muted) !important;
    font-size: .6875rem !important;
    font-weight: var(--hrc-weight-bold) !important;
    letter-spacing: var(--hrc-tracking-eyebrow) !important;
    line-height: var(--hrc-leading-tight) !important;
    text-transform: uppercase;
    cursor: default;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-nav-group.is-active > .qm-nav-title {
    color: var(--hrc-sidebar-text-muted) !important;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-nav-items,
html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) .qm-nav-group.is-collapsed > .qm-nav-items {
    position: static !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: var(--hrc-space-1) !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    visibility: visible !important;
    transform: none !important;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) :is(.qm-nav-link, .qm-nav-sublink) {
    position: relative;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: var(--hrc-space-2) !important;
    width: 100%;
    min-width: 0;
    min-height: var(--hrc-touch-target) !important;
    height: auto !important;
    max-height: none !important;
    padding: var(--hrc-space-2) var(--hrc-space-2) !important;
    border: var(--hrc-border-width) solid transparent !important;
    border-radius: var(--hrc-radius-sm) !important;
    background: transparent !important;
    color: var(--hrc-sidebar-text-soft) !important;
    font-size: var(--hrc-text-sm) !important;
    font-weight: var(--hrc-weight-semibold) !important;
    line-height: 1.3 !important;
    text-decoration: none;
    box-shadow: none !important;
    overflow: visible !important;
    transition:
        background-color var(--hrc-motion-fast) var(--hrc-ease-standard),
        border-color var(--hrc-motion-fast) var(--hrc-ease-standard),
        color var(--hrc-motion-fast) var(--hrc-ease-standard),
        translate var(--hrc-motion-fast) var(--hrc-ease-standard) !important;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) :is(.qm-nav-link, .qm-nav-sublink) :is(i, .qm-menu-icon) {
    display: inline-grid !important;
    place-items: center;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: var(--hrc-radius-xs);
    background: var(--hrc-nav-icon-bg, var(--hrc-color-surface-soft)) !important;
    color: var(--hrc-nav-icon-color, var(--hrc-color-text-muted)) !important;
    font-size: var(--hrc-text-sm) !important;
    opacity: 1;
    transition:
        background-color var(--hrc-motion-fast) var(--hrc-ease-standard),
        color var(--hrc-motion-fast) var(--hrc-ease-standard);
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer)
.qm-nav-group[data-menu-tone] .qm-nav-items :is(.qm-nav-link, .qm-nav-sublink) > :is(i, .qm-menu-icon) {
    background: var(--hrc-nav-icon-bg) !important;
    color: var(--hrc-nav-icon-color) !important;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) :is(.qm-nav-link, .qm-nav-sublink) .qm-menu-text,
html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) :is(.qm-nav-link, .qm-nav-sublink) > span:not(.qm-menu-icon) {
    display: block !important;
    min-width: 0;
    max-width: 100%;
    color: inherit !important;
    line-height: inherit !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    -webkit-line-clamp: unset !important;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) :is(.qm-nav-link, .qm-nav-sublink):hover {
    border-color: color-mix(in srgb, var(--hrc-color-brand) 14%, var(--hrc-color-border)) !important;
    background: var(--hrc-color-surface-soft) !important;
    color: var(--hrc-color-brand-hover) !important;
    translate: 2px 0;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) :is(.qm-nav-link, .qm-nav-sublink):hover :is(i, .qm-menu-icon) {
    background: color-mix(in srgb, var(--hrc-nav-icon-color, var(--hrc-color-brand)) 16%, var(--hrc-color-surface)) !important;
    color: var(--hrc-nav-icon-color, var(--hrc-color-brand)) !important;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) :is(.qm-nav-link, .qm-nav-sublink).active {
    border-color: color-mix(in srgb, var(--hrc-color-brand) 22%, var(--hrc-color-border)) !important;
    background: var(--hrc-color-brand-soft) !important;
    color: var(--hrc-color-brand-hover) !important;
    box-shadow: inset 3px 0 0 var(--hrc-color-brand) !important;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) :is(.qm-nav-link, .qm-nav-sublink).active :is(i, .qm-menu-icon) {
    background: var(--hrc-nav-icon-color, var(--hrc-color-brand)) !important;
    color: var(--hrc-nav-icon-foreground, var(--hrc-action-on-primary)) !important;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer)
.qm-nav-group[data-menu-tone] .qm-nav-items :is(.qm-nav-link, .qm-nav-sublink).active > :is(i, .qm-menu-icon) {
    background: var(--hrc-nav-icon-color) !important;
    color: var(--hrc-nav-icon-foreground) !important;
}

html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) :is(.qm-nav-link, .qm-nav-sublink):focus-visible {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
}

html body.hrc-design-system-v1.qm-erp2050 .qm-mobile-drawer.hrc-layout-sidebar {
    width: min(92vw, 360px) !important;
    max-width: 360px !important;
    border-inline-end: var(--hrc-border-width) solid var(--hrc-sidebar-border);
    background: var(--hrc-sidebar-surface) !important;
    color: var(--hrc-sidebar-text);
    box-shadow: var(--hrc-shadow-lg);
}

html body.hrc-design-system-v1.qm-erp2050 .qm-mobile-drawer :is(.offcanvas-header, .offcanvas-body) {
    background: transparent !important;
    color: var(--hrc-color-text) !important;
}

html body.hrc-design-system-v1.qm-erp2050 .qm-mobile-drawer .offcanvas-header {
    min-height: 68px;
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border-bottom: var(--hrc-border-width) solid var(--hrc-color-border);
}

html body.hrc-design-system-v1.qm-erp2050 .qm-mobile-drawer .offcanvas-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 var(--hrc-space-3) var(--hrc-space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
}

html body.hrc-design-system-v1.qm-erp2050 .qm-mobile-drawer .btn-close {
    filter: none !important;
    opacity: .72;
}

@media (min-width: 992px) {
    html body.hrc-design-system-v1.qm-erp2050 .qm-main.hrc-layout-main,
    html body.hrc-design-system-v1.qm-erp2050.erp-sidebar-collapsed .qm-main.hrc-layout-main,
    html body.hrc-design-system-v1.qm-erp2050.workers-sidebar-collapsed .qm-main.hrc-layout-main {
        width: 100%;
        min-width: 0;
        padding-inline-start: var(--hrc-sidebar-width) !important;
    }
}

@media (max-width: 991.98px) {
    html body.hrc-design-system-v1.qm-erp2050 .qm-main.hrc-layout-main {
        padding-inline-start: 0 !important;
    }
}

/* Dashboard Native cascade bridge.
 *
 * Keep the golden-page overrides in the final Native contract authority so
 * generic Native surfaces cannot reintroduce gradients, shadows or Light-only
 * control colors. The three priority flags only counter older unscoped legacy
 * rules in the core bundle and remain strictly route-scoped and token-driven.
 */
body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="dashboard"] .hrc-dashboard {
    --hrc-shell-text: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="dashboard"] .hrc-dashboard :is(
    .hrc-dashboard-hero,
    .hrc-dashboard-setup,
    .hrc-dashboard-action-center,
    .hrc-dashboard-quick,
    .hrc-dashboard-timeline,
    .hrc-dashboard-chart,
    .hrc-dashboard-recruitment-ranking,
    .hrc-dashboard-table-card
) {
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
    box-shadow: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="dashboard"] .hrc-dashboard :where(
    .hrc-input,
    .hrc-select
) {
    border-color: var(--hrc-color-border-strong);
    background: var(--hrc-color-surface) !important;
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="dashboard"] .hrc-dashboard-ranking__year label {
    color: var(--hrc-color-text-soft) !important;
}

body.hrc-design-system-v1.hrc-native-presentation-route[data-hrc-native-presentation="dashboard"] .hrc-dashboard-table-card .hrc-table th {
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text) !important;
}

@media (forced-colors: active) {
    body.hrc-design-system-v1.hrc-native-presentation-route :where(a, button, input, select, textarea, [tabindex]):focus-visible,
    html body.hrc-design-system-v1.qm-erp2050 :is(.qm-sidebar, .qm-mobile-drawer) :is(.qm-brand, .qm-nav-link, .qm-nav-sublink):focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
        forced-color-adjust: auto;
    }
}

/* source: public/assets/design-attendance-contract.css */
/*
 * HRConnect Native Attendance workspace contract.
 * Shared by the attendance operations dashboard and attendance history.
 * Tokens and primitives are defined by Design Platform v3.
 */
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace {
    --attendance-sticky-index: 3.25rem;
    --attendance-sticky-name: 13rem;
    --attendance-sticky-code: 8rem;
    width: min(100%, var(--hrc-page-max));
    max-width: var(--hrc-page-max);
    margin-inline: auto;
    color: var(--hrc-color-text);
}

/* Attendance Center v396: one canonical workspace for dashboard, monthly
   timesheet, detail, requests and approval queue. */
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__hero {
    min-height: auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace > .attendance-center__hero h1 {
    font-size: clamp(32px, 2.4vw, 40px);
    line-height: var(--hrc-leading-tight);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__hero-meta,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__tab,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__density {
    display: flex;
    align-items: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__hero-meta {
    flex-wrap: wrap;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__tabs {
    display: var(--attendance-tabs-display, flex);
    position: sticky;
    z-index: var(--hrc-z-sticky);
    inset-block-start: var(--hrc-topbar-height);
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-2);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-xl);
    background: color-mix(in srgb, var(--hrc-color-surface) 94%, transparent);
    box-shadow: var(--hrc-shadow-sm);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    backdrop-filter: blur(var(--hrc-space-3));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__tab-switcher {
    position: sticky;
    z-index: var(--hrc-z-sticky);
    inset-block-start: var(--hrc-topbar-height);
    display: var(--attendance-tab-switcher-display, none);
    gap: var(--hrc-space-1);
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-xl);
    background: color-mix(in srgb, var(--hrc-color-surface) 96%, transparent);
    box-shadow: var(--hrc-shadow-sm);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
    backdrop-filter: blur(var(--hrc-space-3));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__tab-switcher .hrc-select {
    width: 100%;
    min-height: var(--hrc-touch-target);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__tab {
    flex: 1 0 auto;
    justify-content: center;
    gap: var(--hrc-space-2);
    min-height: var(--hrc-touch-target);
    padding: var(--hrc-space-2) var(--hrc-space-4);
    border-radius: var(--hrc-radius-lg);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-semibold);
    line-height: var(--hrc-leading-tight);
    text-decoration: none;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__tab:hover,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__tab:focus-visible {
    background: var(--hrc-color-surface-muted);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__tab:focus-visible {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__tab.is-active {
    background: color-mix(in srgb, var(--hrc-color-brand) 12%, var(--hrc-color-surface));
    color: var(--hrc-color-brand);
    box-shadow: inset 0 0 0 var(--hrc-border-width) color-mix(in srgb, var(--hrc-color-brand) 24%, var(--hrc-color-border));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__tab b {
    display: inline-grid;
    place-items: center;
    min-width: var(--hrc-space-6);
    min-height: var(--hrc-space-6);
    padding-inline: var(--hrc-space-1);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-danger);
    color: var(--color-text-inverse);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter-summary {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hrc-space-3);
    min-height: var(--hrc-touch-target);
    color: var(--hrc-color-text);
    cursor: pointer;
    list-style: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter-summary::-webkit-details-marker {
    display: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter-hint,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter-description {
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter-description {
    margin-block: var(--hrc-space-1) var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter-summary > i:last-child {
    transition: rotate var(--hrc-motion-fast) var(--hrc-ease-standard);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter-shell[open] .attendance-center__filter-summary > i:last-child {
    rotate: 180deg;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter .hrc-form-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__panel[hidden],
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__legacy-overview[hidden] {
    display: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__overview {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__timeline,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__pending-preview {
    display: grid;
    gap: var(--hrc-space-2);
    margin-block-start: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__timeline .acc-time-item,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__pending-preview .acc-rank {
    min-width: 0;
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-lg);
    background: var(--hrc-color-surface-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__timeline .acc-time-item {
    display: grid;
    gap: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__timeline :where(strong, small, p),
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__pending-preview :where(strong, small) {
    min-width: 0;
    overflow-wrap: anywhere;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__embedded {
    display: grid;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__density {
    gap: var(--hrc-space-2);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__density .hrc-select {
    width: auto;
    min-height: var(--hrc-control-height);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__legend-shell {
    margin-block: var(--hrc-space-3);
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-lg);
    background: var(--hrc-color-surface-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__legend-shell > summary {
    color: var(--hrc-color-text);
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-semibold);
    cursor: pointer;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__table[data-density="compact"] :where(th, td) {
    padding-block: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__table[data-density="comfortable"] :where(th, td) {
    padding-block: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrc-space-3);
    margin-block-start: var(--hrc-space-4);
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-lg);
    background: var(--hrc-color-surface-muted);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__pagination > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__pagination strong {
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance [data-native-surface^="attendance-"] :where(code, .font-monospace, input[name*="ip"], input[name*="cidr"], input[name*="gateway"]) {
    font-family: var(--hrc-font-mono);
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 75rem) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__overview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 64rem) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace > .attendance-center__hero h1 {
        font-size: clamp(24px, 7vw, 30px);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__tabs {
        position: static;
        justify-content: flex-start;
        width: 100%;
        margin-inline: 0;
        padding-inline: var(--hrc-space-2);
        border-radius: var(--hrc-radius-lg);
        box-shadow: none;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__tab {
        flex: 0 0 auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__kpis {
        grid-template-columns: 1fr;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter .hrc-form-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter .hrc-form-actions > * {
        width: 100%;
    }
}

@media (max-width: 35.99875rem) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace[data-native-surface="attendance-dashboard"] {
        --attendance-tabs-display: none;
        --attendance-tab-switcher-display: grid;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter-shell:not([open]) {
        padding-block: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter-summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter-summary .attendance-center__filter-hint {
        display: none;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-center__filter-description {
        margin-block-start: var(--hrc-space-2);
    }
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace :where(h1, h2, h3, h4, h5, h6, p) {
    margin-block-start: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace :where(h1, h2, h3, h4, h5, h6) {
    color: var(--hrc-color-text);
    letter-spacing: normal;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace h1 {
    margin-block-end: var(--hrc-space-2);
    font-size: clamp(var(--hrc-text-2xl), 2.4vw, var(--hrc-text-3xl));
    font-weight: var(--hrc-weight-bold);
    line-height: var(--hrc-leading-tight);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace h2 {
    margin-block-end: var(--hrc-space-1);
    font-size: var(--hrc-text-xl);
    font-weight: var(--hrc-weight-bold);
    line-height: var(--hrc-leading-tight);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace p {
    margin-block-end: 0;
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-sm);
    line-height: var(--hrc-leading-relaxed);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace .hrc-hero {
    min-height: 116px;
    padding: var(--hrc-space-5) var(--hrc-space-6);
    background:
        radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--hrc-color-info) 15%, transparent), transparent 32%),
        linear-gradient(135deg, color-mix(in srgb, var(--hrc-color-brand) 10%, var(--hrc-color-surface)), var(--hrc-color-surface));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--hrc-space-2);
    margin-block-end: var(--hrc-space-2);
    color: var(--hrc-color-brand);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
    letter-spacing: var(--hrc-tracking-eyebrow);
    text-transform: uppercase;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-section-heading,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-title,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-section-title,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hrc-space-4);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-section-heading > *,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-title > *,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-section-title > * {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-filter-section,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-filter {
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-4);
    box-shadow: var(--hrc-shadow-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-filter-section .attendance-section-heading p,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-filter .attendance-section-heading p {
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace :where(.form-control, .form-select, .hrc-input, .hrc-select) {
    width: 100%;
    min-width: 0;
    min-height: var(--hrc-control-height);
    border-color: var(--hrc-color-border);
    border-radius: var(--hrc-radius-sm);
    background-color: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    font-size: var(--hrc-text-sm);
    line-height: var(--hrc-leading-normal);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace :where(.form-control, .form-select, .hrc-input, .hrc-select):focus {
    border-color: var(--hrc-color-brand);
    box-shadow: 0 0 0 var(--hrc-focus-width) color-mix(in srgb, var(--hrc-color-brand) 20%, transparent);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace textarea.form-control {
    min-height: calc(var(--hrc-control-height-lg) * 1.4);
    resize: vertical;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace :where(.acc-card, .history-card, .attendance-metric-section, .attendance-request-center) {
    min-width: 0;
    padding: var(--hrc-space-5);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly {
    display: grid;
    gap: var(--hrc-space-4);
    overflow: hidden;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--hrc-space-2);
    margin-block-end: var(--hrc-space-1);
    color: var(--hrc-color-brand);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
    letter-spacing: var(--hrc-tracking-eyebrow);
    text-transform: uppercase;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__scope {
    display: grid;
    justify-items: end;
    gap: var(--hrc-space-1);
    padding: var(--hrc-space-3) var(--hrc-space-4);
    border: var(--hrc-border-width) solid color-mix(in srgb, var(--hrc-color-info) 28%, var(--hrc-color-border));
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-info-soft);
    color: var(--hrc-color-text);
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__scope span {
    color: var(--hrc-color-info);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__scope strong {
    font-size: var(--hrc-text-lg);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__filters {
    grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr) minmax(12rem, 1.4fr) minmax(7rem, .7fr) minmax(6rem, .65fr) auto;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-4);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__field {
    display: grid;
    align-content: end;
    gap: var(--hrc-space-2);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__field > span {
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__actions {
    display: flex;
    align-items: end;
    gap: var(--hrc-space-2);
    min-width: max-content;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__summary > div {
    display: grid;
    gap: var(--hrc-space-1);
    min-width: 0;
    padding: var(--hrc-space-3) var(--hrc-space-4);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-inline-start: calc(var(--hrc-border-width) * 3) solid var(--hrc-color-brand);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__summary span {
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__summary strong {
    font-size: var(--hrc-text-xl);
    line-height: var(--hrc-leading-tight);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__legend > span {
    display: inline-flex;
    align-items: center;
    gap: var(--hrc-space-2);
    min-height: var(--hrc-control-height-sm);
    padding: var(--hrc-space-1) var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__legend b {
    display: grid;
    place-items: center;
    min-width: var(--hrc-space-6);
    height: var(--hrc-space-6);
    border-radius: var(--hrc-radius-xs);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__table-scroll {
    position: relative;
    max-height: 38rem;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__table {
    width: max(100%, 86rem);
    min-width: 86rem;
    table-layout: fixed;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__table :where(th, td) {
    height: var(--hrc-row-density);
    padding: var(--hrc-space-2);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
    background: var(--hrc-color-surface);
    font-size: var(--hrc-text-xs);
    text-align: center;
    vertical-align: middle;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__table thead th {
    position: sticky;
    z-index: calc(var(--hrc-z-sticky) + 1);
    inset-block-start: 0;
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-soft);
    font-weight: var(--hrc-weight-bold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__table .amt-sticky {
    position: sticky;
    z-index: var(--hrc-z-sticky);
    background: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__table thead .amt-sticky {
    z-index: calc(var(--hrc-z-sticky) + 2);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-col-index {
    inset-inline-start: 0;
    width: var(--attendance-sticky-index);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-col-name {
    inset-inline-start: var(--attendance-sticky-index);
    width: var(--attendance-sticky-name);
    text-align: start;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-col-name strong,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-col-name small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-col-name small {
    margin-block-start: var(--hrc-space-1);
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-col-code {
    inset-inline-start: calc(var(--attendance-sticky-index) + var(--attendance-sticky-name));
    width: var(--attendance-sticky-code);
    box-shadow: var(--hrc-shadow-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-day-header,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-day {
    width: var(--hrc-control-height);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-day-header b,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-day-header small {
    display: block;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-day-header small {
    margin-block-start: var(--hrc-space-1);
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-day-header.is-weekend,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-day.is-weekend {
    background: color-mix(in srgb, var(--hrc-color-info-soft) 70%, var(--hrc-color-surface));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-status {
    display: inline-grid;
    place-items: center;
    width: var(--hrc-touch-target);
    height: var(--hrc-touch-target);
    padding: 0;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-soft);
    font: inherit;
    font-weight: var(--hrc-weight-bold);
    flex: 0 0 var(--hrc-touch-target);
    min-width: var(--hrc-touch-target);
    min-height: var(--hrc-touch-target);
    cursor: help;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-status:is(.is-full, .is-compensation) {
    border-color: color-mix(in srgb, var(--hrc-attendance-present) 28%, var(--hrc-color-border));
    background: var(--hrc-color-success-soft);
    color: var(--hrc-attendance-present);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-status:is(.is-late, .is-early, .is-missing, .is-pending) {
    border-color: color-mix(in srgb, var(--hrc-attendance-late) 28%, var(--hrc-color-border));
    background: var(--hrc-color-warning-soft);
    color: var(--hrc-attendance-late);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-status.is-absent {
    border-color: color-mix(in srgb, var(--hrc-attendance-absent) 28%, var(--hrc-color-border));
    background: var(--hrc-color-danger-soft);
    color: var(--hrc-attendance-absent);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-status:is(.is-leave, .is-trip, .is-project) {
    border-color: color-mix(in srgb, var(--hrc-attendance-leave) 28%, var(--hrc-color-border));
    background: color-mix(in srgb, var(--hrc-attendance-leave) 10%, var(--hrc-color-surface));
    color: var(--hrc-attendance-leave);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__note {
    display: flex;
    align-items: flex-start;
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-3);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-info-soft);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__error,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .locked-alert {
    padding: var(--hrc-space-3) var(--hrc-space-4);
    border: var(--hrc-border-width) solid color-mix(in srgb, var(--hrc-color-danger) 32%, var(--hrc-color-border));
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-danger-soft);
    color: var(--hrc-color-danger);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-kpi,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-kpi {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--hrc-space-2);
    min-height: 118px;
    padding: var(--hrc-space-4);
    overflow: hidden;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-kpi::before,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--hrc-border-width) * 3);
    background: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-kpi > span,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-kpi > span {
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-kpi > b,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-kpi > b {
    color: var(--hrc-color-text);
    font-size: var(--hrc-text-2xl);
    line-height: var(--hrc-leading-tight);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-kpi > small {
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
    line-height: var(--hrc-leading-normal);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-kpi .badge {
    justify-self: start;
    margin-block-start: auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-layout {
    align-items: start;
    grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .75fr);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-layout > :where(div, aside) {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-card {
    display: grid;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-section-title h2 {
    font-size: var(--hrc-text-lg);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-section-title span {
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-ring {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: var(--hrc-control-height-lg);
    height: var(--hrc-control-height-lg);
    border-radius: var(--hrc-radius-pill);
    background: conic-gradient(var(--hrc-color-brand) var(--hrc-progress-value, 0%), var(--hrc-color-border) 0);
    box-shadow: inset 0 0 0 var(--hrc-space-2) var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-ring b {
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-ai,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-mini {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-alert,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-mini > div {
    min-width: 0;
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-alert.success {
    border-color: color-mix(in srgb, var(--hrc-color-success) 30%, var(--hrc-color-border));
    background: var(--hrc-color-success-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-alert.warning {
    border-color: color-mix(in srgb, var(--hrc-color-warning) 30%, var(--hrc-color-border));
    background: var(--hrc-color-warning-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-alert.danger {
    border-color: color-mix(in srgb, var(--hrc-color-danger) 30%, var(--hrc-color-border));
    background: var(--hrc-color-danger-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-alert.info {
    border-color: color-mix(in srgb, var(--hrc-color-info) 30%, var(--hrc-color-border));
    background: var(--hrc-color-info-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-alert small,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-mini span {
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-mini > div {
    display: grid;
    gap: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-mini b {
    font-size: var(--hrc-text-lg);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-heat {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-dot {
    aspect-ratio: 1;
    border-radius: var(--hrc-radius-xs);
    background: var(--hrc-color-border);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-dot.l1 {
    background: color-mix(in srgb, var(--hrc-color-info) 28%, var(--hrc-color-surface));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-dot.l2 {
    background: color-mix(in srgb, var(--hrc-color-info) 56%, var(--hrc-color-surface));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-dot.l3 {
    background: var(--hrc-color-info);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-timeline {
    display: grid;
    gap: var(--hrc-space-2);
    max-height: 42rem;
    padding-inline-end: var(--hrc-space-1);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-time-item,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-rank {
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-time-item p {
    margin-block-start: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-rank {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-rank small {
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-period-field {
    display: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-period-field.is-active {
    display: grid;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-card {
    display: grid;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-table-wrap,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .table-responsive {
    position: relative;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-table {
    width: max(100%, 78rem);
    min-width: 78rem;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .pending-table {
    width: max(100%, 54rem);
    min-width: 54rem;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance :where(.history-table, .pending-table) thead th {
    position: sticky;
    z-index: calc(var(--hrc-z-sticky) + 1);
    inset-block-start: 0;
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-table :where(th, td),
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .pending-table :where(th, td) {
    padding: var(--hrc-space-3);
    font-size: var(--hrc-text-sm);
    vertical-align: middle;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-table :where(th, td):first-child {
    position: sticky;
    z-index: var(--hrc-z-sticky);
    inset-inline-start: 0;
    width: 11rem;
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-table thead th:first-child {
    z-index: calc(var(--hrc-z-sticky) + 2);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-selfie-link {
    display: inline-flex;
    border-radius: var(--hrc-radius-sm);
    overflow: hidden;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-selfie-img {
    display: block;
    width: var(--hrc-control-height-lg);
    height: var(--hrc-control-height-lg);
    border-radius: var(--hrc-radius-sm);
    object-fit: cover;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-map {
    position: relative;
    min-width: 7rem;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-map > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--hrc-space-2);
    min-height: var(--hrc-control-height-sm);
    color: var(--hrc-color-brand);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
    cursor: pointer;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-map iframe {
    display: block;
    width: min(18rem, 72vw);
    height: 12rem;
    margin-block-start: var(--hrc-space-2);
    border: 0;
    border-radius: var(--hrc-radius-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-map-meta,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-map-address {
    max-width: 18rem;
    margin-block-start: var(--hrc-space-2);
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
    overflow-wrap: anywhere;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-metric-section,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-request-center {
    display: grid;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-kpi.approved::before {
    background: var(--hrc-color-success);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-kpi.pending::before {
    background: var(--hrc-color-warning);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-kpi.rejected::before {
    background: var(--hrc-color-danger);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-kpi.regional::before {
    background: var(--hrc-color-info);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .request-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance details.compact-request-card {
    padding: 0;
    overflow: hidden;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance details.compact-request-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrc-space-3);
    min-height: calc(var(--hrc-touch-target) + var(--hrc-space-4));
    padding: var(--hrc-space-4);
    cursor: pointer;
    list-style: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance details.compact-request-card > summary::-webkit-details-marker {
    display: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance details.compact-request-card > summary span {
    display: grid;
    gap: var(--hrc-space-1);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance details.compact-request-card > summary strong {
    color: var(--hrc-color-text);
    font-size: var(--hrc-text-lg);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance details.compact-request-card > summary small {
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    line-height: var(--hrc-leading-normal);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance details.compact-request-card > summary i {
    color: var(--hrc-color-brand);
    transition: rotate var(--hrc-motion-fast) var(--hrc-ease-standard);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance details.compact-request-card[open] > summary {
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance details.compact-request-card[open] > summary i {
    rotate: 180deg;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .request-form {
    display: grid;
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .request-form .form-label {
    margin: var(--hrc-space-2) 0 0;
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .request-form .row {
    row-gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-empty {
    padding: var(--hrc-space-6);
    color: var(--hrc-color-text-soft);
    text-align: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace .hrc-filter-panel :where(.hrc-input, .hrc-select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea),
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace .request-form :where(.form-control, .form-select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea),
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance [data-native-surface^="attendance-"] .hrc-filter-panel :where(.hrc-input, .hrc-select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea),
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance [data-native-surface^="attendance-"] :where(.hrc-btn, button),
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__legend-shell > summary,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-map > summary,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-map-open,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-selfie-link {
    min-height: var(--hrc-touch-target);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-4);
    border-block-start: var(--hrc-border-width) solid var(--hrc-color-border);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-pagination > span:not(.hrc-btn) {
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-pagination [aria-disabled="true"] {
    opacity: var(--hrc-opacity-disabled);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-map-status {
    display: flex;
    align-items: center;
    gap: var(--hrc-space-2);
    min-height: var(--hrc-touch-target);
    margin-block-end: var(--hrc-space-3);
    padding: var(--hrc-space-3) var(--hrc-space-4);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-map-status[data-state="success"] {
    border-color: color-mix(in srgb, var(--hrc-color-success) 34%, var(--hrc-color-border));
    color: var(--hrc-color-success);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-map-status[data-state="error"] {
    border-color: color-mix(in srgb, var(--hrc-color-danger) 34%, var(--hrc-color-border));
    color: var(--hrc-color-danger);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-map-status[data-state="offline"] {
    border-color: color-mix(in srgb, var(--hrc-color-warning) 34%, var(--hrc-color-border));
    color: var(--hrc-color-warning);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-map-canvas,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance #gpsMap {
    min-height: clamp(20rem, 56vh, 42rem);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance #gpsMap {
    width: 100%;
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance #gpsMap .leaflet-control-zoom a {
    display: grid;
    width: var(--hrc-touch-target);
    height: var(--hrc-touch-target);
    place-items: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-map-popup {
    display: grid;
    gap: var(--hrc-space-1);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-map-popup span,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-map-privacy {
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-map-privacy {
    display: flex;
    align-items: flex-start;
    gap: var(--hrc-space-2);
    margin-block: var(--hrc-space-3) 0;
}

@media (max-width: 1399.98px) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__field--employee {
        grid-column: span 2;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__actions {
        grid-column: span 2;
    }
}

@media (max-width: 1180px) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .request-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    }
}

@media (max-width: 820px) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace .hrc-hero {
        min-height: 0;
        padding: var(--hrc-space-5);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-section-heading,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-title,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-section-title,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__heading {
        align-items: stretch;
        flex-direction: column;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__scope {
        justify-items: start;
        width: 100%;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__filters,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace .hrc-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__field--employee,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__actions,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace .hrc-filter-grid > [data-span="2"] {
        grid-column: 1 / -1;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-grid,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-kpi,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-kpi {
        min-height: 104px;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace {
        --attendance-sticky-index: 2.75rem;
        --attendance-sticky-name: 9rem;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace :where(.acc-card, .history-card, .attendance-metric-section, .attendance-request-center),
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-filter-section,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-filter {
        padding: var(--hrc-space-4);
        border-radius: var(--hrc-radius-sm);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace .hrc-filter-grid,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__filters {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__field--employee,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__actions,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace .hrc-filter-grid > [data-span="2"],
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace .hrc-form-actions {
        grid-column: auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__actions,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace .hrc-form-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        min-width: 0;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__actions > *,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-workspace .hrc-form-actions > * {
        width: 100%;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__summary {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .attendance-monthly__table {
        min-width: 74rem;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-col-code {
        position: static;
        box-shadow: none;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .amt-status {
        width: var(--hrc-touch-target);
        height: var(--hrc-touch-target);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .acc-heat {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-table-wrap,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .table-responsive {
        overflow: visible;
        border: 0;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance :is(.history-table, .pending-table) {
        display: block;
        width: 100%;
        min-width: 0;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance :is(.history-table, .pending-table) thead {
        position: absolute;
        overflow: hidden;
        width: var(--hrc-space-1);
        height: var(--hrc-space-1);
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance :is(.history-table, .pending-table) :where(tbody, tr, td) {
        display: block;
        width: 100%;
        min-width: 0;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance :is(.history-table, .pending-table) tbody {
        display: grid;
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance :is(.history-table, .pending-table) tbody tr {
        padding: var(--hrc-space-3);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
        box-shadow: var(--hrc-shadow-sm);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance :is(.history-table, .pending-table) tbody td {
        position: static;
        display: grid;
        grid-template-columns: minmax(7rem, .8fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--hrc-space-3);
        min-height: var(--hrc-touch-target);
        padding: var(--hrc-space-2);
        border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
        background: transparent;
        box-shadow: none;
        text-align: end;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-table tbody td:first-child {
        position: static;
        width: 100%;
        background: transparent;
        box-shadow: none;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance :is(.history-table, .pending-table) tbody td:last-child {
        border-block-end: 0;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance :is(.history-table, .pending-table) tbody td::before {
        content: attr(data-label);
        color: var(--hrc-color-text-soft);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-semibold);
        text-align: start;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .history-map {
        justify-self: end;
        text-align: start;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance .request-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance details.compact-request-card > summary i {
        transition: none;
    }
}

/* Keep the production attendance filter and density controls at the canonical touch target. */
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance
    .attendance-workspace[data-native-surface="attendance-dashboard"]
    .attendance-filter-section.hrc-filter-panel
    :is(input.form-control, select.form-select, input.hrc-input, select.hrc-select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select),
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance
    .attendance-workspace[data-native-surface="attendance-dashboard"]
    .request-form
    :is(input.form-control, select.form-select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select),
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance
    [data-native-surface^="attendance-"]
    .hrc-form-section
    :is(input.hrc-input, select.hrc-select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select),
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance
    .attendance-workspace[data-native-surface="attendance-dashboard"]
    .attendance-center__density
    :is(.form-select, .hrc-select, select),
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance
    .attendance-workspace[data-native-surface="attendance-dashboard"]
    .attendance-center__tab-switcher
    :is(.form-select, .hrc-select, select) {
    min-height: var(--hrc-touch-target);
    height: var(--hrc-touch-target);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance
    [data-native-surface^="attendance-"]
    .hrc-checkbox {
    min-height: var(--hrc-touch-target);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-attendance
    [data-native-surface^="attendance-"]
    .hrc-filter-panel
    .qm-select-control {
    min-width: var(--hrc-touch-target);
    min-height: var(--hrc-touch-target);
}

/* source: public/assets/design-attendance-mobile-contract.css */
/* HRConnect Attendance Mobile v3.0.31 — visual parity with the approved mobile reference. */
body.hrc-design-system-v1 .attendance-mobile {
    /* Canonical shared Native contract; bundled by Design Platform v3. */
    display: grid;
    width: min(100%, var(--hrc-container-sm));
    margin-inline: auto;
    color: var(--color-text-primary);
}

body.hrc-design-system-v1 .attendance-mobile__header {
    position: relative;
    display: grid;
    gap: var(--hrc-space-5);
    padding: var(--hrc-space-5);
    border: var(--hrc-border-width) solid var(--color-border-default);
    border-radius: var(--hrc-radius-xl);
    background: var(--color-surface-primary);
    box-shadow: var(--hrc-shadow-sm);
}

body.hrc-design-system-v1 .attendance-mobile__brand {
    display: flex;
    align-items: center;
    gap: var(--hrc-space-3);
    color: var(--color-icon-brand);
    font-size: var(--hrc-text-xl);
    font-weight: var(--hrc-weight-bold);
    line-height: var(--hrc-leading-tight);
}

body.hrc-design-system-v1 .attendance-mobile__brand i {
    font-size: var(--hrc-icon-xl);
}

body.hrc-design-system-v1 .attendance-mobile__brand-logo {
    width: var(--hrc-icon-xl);
    height: var(--hrc-icon-xl);
    border-radius: var(--hrc-radius-sm);
    object-fit: contain;
}

body.hrc-design-system-v1 .attendance-mobile__identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1 .attendance-mobile__avatar {
    overflow: hidden;
    display: grid;
    place-items: center;
    width: calc(var(--hrc-touch-target) + var(--hrc-space-2));
    height: calc(var(--hrc-touch-target) + var(--hrc-space-2));
    border-radius: var(--hrc-radius-pill);
    background: var(--color-surface-info);
    color: var(--color-text-info);
    font-size: var(--hrc-text-lg);
    font-weight: var(--hrc-weight-bold);
}

body.hrc-design-system-v1 .attendance-mobile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.hrc-design-system-v1 .attendance-mobile__employee {
    display: grid;
    min-width: var(--hrc-space-0);
}

body.hrc-design-system-v1 .attendance-mobile__employee strong {
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--hrc-text-lg);
    font-weight: var(--hrc-weight-bold);
    line-height: var(--hrc-leading-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hrc-design-system-v1 .attendance-mobile__employee small {
    overflow: hidden;
    margin-block-start: var(--hrc-space-1);
    color: var(--color-text-secondary);
    font-size: var(--hrc-text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hrc-design-system-v1 .attendance-mobile__shift-status {
    min-height: var(--hrc-control-height);
    padding-inline: var(--hrc-space-3);
    border-radius: var(--hrc-radius-pill);
    font-size: var(--hrc-text-sm);
    white-space: nowrap;
}

body.hrc-design-system-v1 .attendance-mobile__live-clock {
    position: absolute;
    overflow: hidden;
    width: var(--hrc-space-0);
    height: var(--hrc-space-0);
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body.hrc-design-system-v1 .attendance-mobile__form {
    position: relative;
    display: grid;
    gap: var(--hrc-space-3);
    min-height: var(--hrc-space-0);
}

body.hrc-design-system-v1 .attendance-camera {
    position: relative;
    min-height: var(--hrc-space-0);
    padding: var(--hrc-space-2);
    border: var(--hrc-border-width) solid var(--color-border-default);
    border-radius: var(--hrc-radius-xl);
    background: var(--color-surface-primary);
    box-shadow: var(--hrc-shadow-sm);
    overflow: hidden;
}

body.hrc-design-system-v1 .attendance-camera > .hrc-visually-hidden {
    position: absolute;
    overflow: hidden;
    width: var(--hrc-space-1);
    height: var(--hrc-space-1);
    margin: calc(var(--hrc-space-1) * -1);
    padding: var(--hrc-space-0);
    border: var(--hrc-space-0);
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body.hrc-design-system-v1 .attendance-camera__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    max-height: min(42dvh, calc(var(--hrc-control-height-lg) * 6));
    min-height: calc(var(--hrc-control-height-lg) * 5);
    aspect-ratio: 4 / 3;
    border-radius: var(--hrc-radius-lg);
    background:
        radial-gradient(circle at top, color-mix(in srgb, var(--color-icon-brand) 18%, transparent), transparent),
        var(--color-surface-secondary);
    overflow: hidden;
    isolation: isolate;
}

body.hrc-design-system-v1 .attendance-camera__stage :where(video, img, canvas) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Front-camera framing is mirrored for the employee while the hidden canvas
   keeps the sensor orientation used by liveness checks and stored evidence. */
body.hrc-design-system-v1 .attendance-camera__stage :is(#aiCameraVideo, #aiCameraPreview) {
    transform: scaleX(-1);
    transform-origin: center;
}

body.hrc-design-system-v1 .attendance-camera__stage :where(video, img, canvas)[hidden] {
    display: none;
}

body.hrc-design-system-v1 .attendance-camera__empty {
    position: absolute;
    z-index: var(--hrc-z-base);
    inset: var(--hrc-space-3);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-5);
    color: var(--color-text-secondary);
    text-align: center;
}

body.hrc-design-system-v1 .attendance-camera__empty[hidden] {
    display: none;
}

body.hrc-design-system-v1 .attendance-camera__empty i {
    color: var(--color-icon-brand);
    font-size: calc(var(--hrc-icon-xl) + var(--hrc-space-4));
}

body.hrc-design-system-v1 .attendance-camera__empty strong {
    color: var(--color-text-primary);
    font-size: var(--hrc-text-lg);
}

body.hrc-design-system-v1 .attendance-camera__empty span {
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1 .attendance-camera__face-guide {
    position: absolute;
    z-index: var(--hrc-z-base);
    inset-block-start: 20%;
    inset-inline-start: 50%;
    width: min(58%, calc(var(--hrc-control-height-lg) * 4));
    aspect-ratio: 3 / 4;
    border: calc(var(--hrc-border-width) * 2) dashed var(--color-text-inverse);
    border-radius: var(--hrc-radius-pill);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity var(--hrc-motion-fast) var(--hrc-ease-standard);
}

body.hrc-design-system-v1 .attendance-camera.is-camera-active .attendance-camera__face-guide {
    opacity: 1;
}

body.hrc-design-system-v1 .attendance-camera__status {
    position: absolute;
    overflow: hidden;
    width: var(--hrc-space-0);
    height: var(--hrc-space-0);
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body.hrc-design-system-v1 .attendance-camera__note {
    position: absolute;
    z-index: var(--hrc-z-dropdown);
    inset-inline: var(--hrc-space-4);
    inset-block-end: var(--hrc-space-4);
    display: none;
    margin: var(--hrc-space-0);
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border-radius: var(--hrc-radius-md);
    background: color-mix(in srgb, var(--color-surface-overlay) 82%, transparent);
    color: var(--color-text-inverse);
    font-size: var(--hrc-text-xs);
    line-height: var(--hrc-leading-normal);
    backdrop-filter: blur(var(--hrc-space-2));
}

body.hrc-design-system-v1 .attendance-camera:has(#aiFaceStatus[data-state="error"]) .attendance-camera__note {
    display: block;
}

body.hrc-design-system-v1 .attendance-camera.is-camera-active .attendance-camera__note {
    display: block;
}

body.hrc-design-system-v1 .attendance-mobile__context {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr);
    align-items: center;
    gap: var(--hrc-space-3);
    min-height: calc(var(--hrc-touch-target) + var(--hrc-space-4));
    padding: var(--hrc-space-3) var(--hrc-space-4);
    border: var(--hrc-border-width) solid var(--color-border-default);
    border-radius: var(--hrc-radius-xl);
    background: var(--color-surface-primary);
    box-shadow: var(--hrc-shadow-sm);
}

body.hrc-design-system-v1 .attendance-mobile__context-item {
    display: flex;
    align-items: center;
    gap: var(--hrc-space-2);
    min-width: var(--hrc-space-0);
    margin: var(--hrc-space-0);
    padding: var(--hrc-space-0);
    border: var(--hrc-space-0);
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    text-align: start;
}

body.hrc-design-system-v1 .attendance-mobile__context-item > i {
    flex: var(--hrc-space-0) var(--hrc-space-0) auto;
    color: var(--color-icon-brand);
    font-size: var(--hrc-icon-md);
}

body.hrc-design-system-v1 .attendance-mobile__context-item span {
    display: grid;
    min-width: var(--hrc-space-0);
}

body.hrc-design-system-v1 .attendance-mobile__context-item strong {
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hrc-design-system-v1 .attendance-mobile__context-item small {
    overflow: hidden;
    margin-block-start: var(--hrc-space-1);
    color: var(--color-text-secondary);
    font-size: var(--hrc-text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hrc-design-system-v1 .attendance-mobile__context-divider {
    width: var(--hrc-space-1);
    height: var(--hrc-space-1);
    border-radius: var(--hrc-radius-pill);
    background: var(--color-icon-secondary);
}

body.hrc-design-system-v1 .attendance-mobile__gps-action {
    min-height: var(--hrc-touch-target);
    cursor: pointer;
}

body.hrc-design-system-v1 .attendance-mobile__gps-action:focus-visible {
    border-radius: var(--hrc-radius-md);
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
}

body.hrc-design-system-v1 .attendance-mobile__gps-action[aria-busy="true"] .attendance-mobile__gps-check {
    display: none;
}

body.hrc-design-system-v1 .attendance-mobile__gps-check {
    margin-inline-start: auto;
    color: var(--color-icon-success);
}

body.hrc-design-system-v1 .attendance-mobile__form:not(.is-gps-ready) .attendance-mobile__gps-check {
    display: none;
}

body.hrc-design-system-v1 .attendance-mobile__policy,
body.hrc-design-system-v1 .attendance-mobile__gps-message {
    position: absolute;
    overflow: hidden;
    width: var(--hrc-space-0);
    height: var(--hrc-space-0);
    margin: var(--hrc-space-0);
    padding: var(--hrc-space-0);
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body.hrc-design-system-v1 .attendance-mobile__dock {
    display: grid;
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1 .attendance-mobile__cta {
    display: grid;
}

body.hrc-design-system-v1 .attendance-mobile__cta .hrc-btn {
    width: 100%;
    min-height: calc(var(--hrc-control-height-lg) + var(--hrc-space-3));
    border-radius: var(--hrc-radius-pill);
    font-size: var(--hrc-text-xl);
    font-weight: var(--hrc-weight-bold);
    box-shadow: var(--hrc-shadow-md);
}

body.hrc-design-system-v1 .attendance-mobile__cta .hrc-btn i {
    font-size: var(--hrc-icon-xl);
}

body.hrc-design-system-v1 .attendance-mobile__utility-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1 .attendance-mobile__history-link,
body.hrc-design-system-v1 .attendance-mobile__erp-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: var(--hrc-space-2);
    min-height: var(--hrc-touch-target);
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border: var(--hrc-space-0);
    background: transparent;
    color: var(--color-text-info);
    font: inherit;
    font-size: var(--hrc-text-md);
    font-weight: var(--hrc-weight-medium);
    cursor: pointer;
    text-decoration: none;
}

body.hrc-design-system-v1 .attendance-mobile__history-link:hover,
body.hrc-design-system-v1 .attendance-mobile__erp-link:hover {
    color: var(--color-text-primary);
}

body.hrc-design-system-v1 .attendance-mobile__history-link:focus-visible,
body.hrc-design-system-v1 .attendance-mobile__erp-link:focus-visible {
    border-radius: var(--hrc-radius-md);
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
}

body.hrc-design-system-v1 .attendance-mobile__eyebrow {
    display: block;
    margin-block-end: var(--hrc-space-1);
    color: var(--color-icon-brand);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
    letter-spacing: var(--hrc-tracking-eyebrow);
}

body.hrc-design-system-v1 .attendance-sheet {
    width: min(calc(100% - var(--hrc-space-6)), var(--hrc-container-sm));
    max-height: calc(100dvh - var(--hrc-space-6));
    margin: auto;
    padding: var(--hrc-space-0);
    border: var(--hrc-border-width) solid var(--color-border-default);
    border-radius: var(--hrc-radius-xl);
    background: var(--color-surface-primary);
    color: var(--color-text-primary);
    box-shadow: var(--hrc-shadow-lg);
    overflow: hidden;
}

body.hrc-design-system-v1 .attendance-sheet::backdrop {
    background: var(--color-surface-overlay);
}

body.hrc-design-system-v1 .attendance-sheet__header,
body.hrc-design-system-v1 .attendance-sheet__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-4);
    background: var(--color-surface-primary);
}

body.hrc-design-system-v1 .attendance-sheet__header {
    border-block-end: var(--hrc-border-width) solid var(--color-border-default);
}

body.hrc-design-system-v1 .attendance-sheet__header h2 {
    margin: var(--hrc-space-0);
    color: var(--color-text-primary);
    font-size: var(--hrc-text-xl);
    line-height: var(--hrc-leading-tight);
}

body.hrc-design-system-v1 .attendance-sheet__body {
    max-height: calc(100dvh - var(--hrc-space-12) - var(--hrc-control-height-lg) - var(--hrc-control-height-lg));
    padding: var(--hrc-space-4);
    overflow: auto;
    overscroll-behavior: contain;
}

body.hrc-design-system-v1 .attendance-sheet__footer {
    justify-content: flex-end;
    border-block-start: var(--hrc-border-width) solid var(--color-border-default);
}

body.hrc-design-system-v1 .attendance-sheet__footer--utilities {
    justify-content: center;
}

body.hrc-design-system-v1 .attendance-help {
    display: grid;
    gap: var(--hrc-space-3);
    margin: var(--hrc-space-0);
    padding-inline-start: var(--hrc-space-6);
    color: var(--color-text-primary);
}

body.hrc-design-system-v1 .attendance-history__summary {
    margin-block-end: var(--hrc-space-4);
}

body.hrc-design-system-v1 .attendance-selfie-thumb {
    width: var(--hrc-touch-target);
    height: var(--hrc-touch-target);
    border-radius: var(--hrc-radius-sm);
    object-fit: cover;
}

body.hrc-design-system-v1.hrc-module-attendance .attendance-mobile .attendance-camera__stage > :where(img, canvas) {
    transform: none;
}

@media (max-width: 48rem) {
    body.hrc-design-system-v1.hrc-family-erp.hrc-module-attendance[data-hrc-native-presentation="attendance-mobile"] {
        height: 100dvh;
        min-height: var(--hrc-space-0);
        padding: var(--hrc-space-0);
        background: var(--color-surface-primary);
        overflow: hidden;
    }

    body.hrc-design-system-v1.hrc-module-attendance[data-hrc-native-presentation="attendance-mobile"] .hrc-skip-link,
    body.hrc-design-system-v1.hrc-module-attendance[data-hrc-native-presentation="attendance-mobile"] .qm-sidebar,
    body.hrc-design-system-v1.hrc-module-attendance[data-hrc-native-presentation="attendance-mobile"] .qm-mobile-drawer,
    body.hrc-design-system-v1.hrc-module-attendance[data-hrc-native-presentation="attendance-mobile"] .qm-topbar,
    body.hrc-design-system-v1.hrc-module-attendance[data-hrc-native-presentation="attendance-mobile"] .hrc-shell-breadcrumb {
        display: none;
    }

    body.hrc-design-system-v1.hrc-module-attendance[data-hrc-native-presentation="attendance-mobile"] .qm-app,
    body.hrc-design-system-v1.hrc-module-attendance[data-hrc-native-presentation="attendance-mobile"] .qm-main,
    body.hrc-design-system-v1.hrc-module-attendance[data-hrc-native-presentation="attendance-mobile"] .qm-content {
        display: block;
        width: 100%;
        height: 100dvh;
        min-height: var(--hrc-space-0);
        margin: var(--hrc-space-0);
        padding: var(--hrc-space-0);
        overflow: hidden;
    }

    body.hrc-design-system-v1 .attendance-mobile {
        grid-template-rows: auto minmax(0, 1fr);
        gap: var(--hrc-space-3);
        width: 100%;
        height: 100dvh;
        padding:
            max(var(--hrc-space-4), env(safe-area-inset-top))
            var(--hrc-space-4)
            calc(var(--hrc-control-height-lg) * 2 + var(--hrc-space-10) + var(--hrc-space-2) + env(safe-area-inset-bottom));
        background: var(--color-surface-primary);
        overflow: hidden;
    }

    body.hrc-design-system-v1 .attendance-mobile__header {
        gap: var(--hrc-space-4);
        padding: var(--hrc-space-0);
        border: var(--hrc-space-0);
        border-radius: var(--hrc-space-0);
        box-shadow: none;
    }

    body.hrc-design-system-v1 .attendance-mobile__brand {
        gap: var(--hrc-space-2);
        font-size: var(--hrc-text-xl);
    }

    body.hrc-design-system-v1 .attendance-mobile__brand i {
        font-size: var(--hrc-icon-lg);
    }

    body.hrc-design-system-v1 .attendance-mobile__identity {
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1 .attendance-mobile__avatar {
        width: var(--hrc-touch-target);
        height: var(--hrc-touch-target);
        font-size: var(--hrc-text-md);
    }

    body.hrc-design-system-v1 .attendance-mobile__employee strong {
        font-size: var(--hrc-text-lg);
    }

    body.hrc-design-system-v1 .attendance-mobile__employee small,
    body.hrc-design-system-v1 .attendance-mobile__shift-status {
        font-size: var(--hrc-text-xs);
    }

    body.hrc-design-system-v1 .attendance-mobile__shift-status {
        min-height: calc(var(--hrc-control-height) - var(--hrc-space-1));
        padding-inline: var(--hrc-space-3);
    }

    body.hrc-design-system-v1 .attendance-mobile__form {
        grid-template-rows: minmax(0, 1fr) auto;
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1 .attendance-camera {
        padding: var(--hrc-space-2);
        border-radius: var(--hrc-radius-lg);
    }

    body.hrc-design-system-v1 .attendance-camera__stage {
        height: 100%;
        max-height: none;
        min-height: var(--hrc-space-0);
        aspect-ratio: auto;
        border-radius: var(--hrc-radius-md);
    }

    body.hrc-design-system-v1 .attendance-camera__empty {
        inset: var(--hrc-space-2);
        padding: var(--hrc-space-3);
    }

    body.hrc-design-system-v1 .attendance-camera__empty i {
        font-size: var(--hrc-icon-xl);
    }

    body.hrc-design-system-v1 .attendance-camera__empty strong {
        font-size: var(--hrc-text-md);
    }

    body.hrc-design-system-v1 .attendance-camera__empty span {
        font-size: var(--hrc-text-xs);
    }

    body.hrc-design-system-v1 .attendance-mobile__context {
        min-height: calc(var(--hrc-touch-target) + var(--hrc-space-2));
        gap: var(--hrc-space-2);
        padding: calc(var(--hrc-space-2) - var(--hrc-border-width)) var(--hrc-space-3);
        border-radius: var(--hrc-radius-lg);
    }

    body.hrc-design-system-v1 .attendance-mobile__context-item {
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .attendance-mobile__context-item > i {
        font-size: var(--hrc-icon-sm);
    }

    body.hrc-design-system-v1 .attendance-mobile__context-item strong {
        font-size: var(--hrc-text-xs);
    }

    body.hrc-design-system-v1 .attendance-mobile__context-item small {
        display: none;
    }

    body.hrc-design-system-v1 .attendance-mobile__dock {
        position: fixed;
        z-index: var(--hrc-z-sticky);
        inset-inline: var(--hrc-space-4);
        inset-block-end: var(--hrc-space-0);
        gap: var(--hrc-space-1);
        padding: var(--hrc-space-3) var(--hrc-space-0) calc(var(--hrc-space-2) + env(safe-area-inset-bottom));
        background: linear-gradient(to top, var(--color-surface-primary), color-mix(in srgb, var(--color-surface-primary) 92%, transparent));
    }

    body.hrc-design-system-v1 .attendance-mobile__cta .hrc-btn {
        min-height: calc(var(--hrc-touch-target) + var(--hrc-space-3));
        font-size: var(--hrc-text-lg);
    }

    body.hrc-design-system-v1 .attendance-mobile__history-link,
    body.hrc-design-system-v1 .attendance-mobile__erp-link {
        min-height: var(--hrc-control-height);
        padding-block: var(--hrc-space-1);
        font-size: var(--hrc-text-sm);
    }

    body.hrc-design-system-v1 .attendance-sheet {
        inset: auto 0 0;
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - var(--hrc-space-8));
        margin: auto var(--hrc-space-0) var(--hrc-space-0);
        box-sizing: border-box;
        border-end-start-radius: var(--hrc-space-0);
        border-end-end-radius: var(--hrc-space-0);
    }

    body.hrc-design-system-v1 .attendance-sheet__body {
        max-height: calc(100dvh - var(--hrc-space-12) - var(--hrc-control-height-lg) - var(--hrc-control-height-lg) - var(--hrc-control-height-lg));
        padding-block-end: calc(var(--hrc-space-5) + env(safe-area-inset-bottom));
    }
}

@media (max-width: 23rem), (max-height: 42rem) {
    body.hrc-design-system-v1 .attendance-mobile {
        gap: var(--hrc-space-2);
        padding:
            max(var(--hrc-space-3), env(safe-area-inset-top))
            var(--hrc-space-3)
            calc(var(--hrc-control-height-lg) * 2 + var(--hrc-space-10) + var(--hrc-space-2) + env(safe-area-inset-bottom));
    }

    body.hrc-design-system-v1 .attendance-mobile__header {
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .attendance-mobile__brand {
        font-size: var(--hrc-text-lg);
    }

    body.hrc-design-system-v1 .attendance-mobile__identity {
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .attendance-mobile__avatar {
        width: var(--hrc-control-height);
        height: var(--hrc-control-height);
    }

    body.hrc-design-system-v1 .attendance-mobile__employee strong {
        font-size: var(--hrc-text-md);
    }

    body.hrc-design-system-v1 .attendance-mobile__context {
        min-height: var(--hrc-touch-target);
        padding-block: var(--hrc-space-1);
    }

    body.hrc-design-system-v1 .attendance-mobile__dock {
        inset-inline: var(--hrc-space-3);
        padding-block-start: var(--hrc-space-2);
    }

    body.hrc-design-system-v1 .attendance-mobile__cta .hrc-btn {
        min-height: var(--hrc-touch-target);
        font-size: var(--hrc-text-md);
    }

    body.hrc-design-system-v1 .attendance-mobile__history-link {
        min-height: var(--hrc-touch-target);
        font-size: var(--hrc-text-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.hrc-design-system-v1 .attendance-mobile *,
    body.hrc-design-system-v1 .attendance-mobile *::before,
    body.hrc-design-system-v1 .attendance-mobile *::after {
        scroll-behavior: auto;
        transition-duration: var(--hrc-space-0);
        animation-duration: var(--hrc-space-0);
    }
}

/* source: public/assets/design-workforce-contract.css */
/*
 * HRConnect Native Workforce workspace contract.
 * Shared by all eight Workforce coordination states. Business hooks keep their
 * wf-* names; presentation is owned exclusively by Design Platform v3.
 */
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-shell {
    display: grid;
    width: min(100%, var(--hrc-page-max));
    max-width: var(--hrc-page-max);
    min-width: 0;
    margin-inline: auto;
    gap: var(--hrc-section-gap);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-shell :where(h1, h2, h3, p) {
    margin-block-start: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-shell :where(h1, h2, h3) {
    color: var(--hrc-color-text);
    line-height: var(--hrc-leading-tight);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-shell p {
    color: var(--hrc-color-text-soft);
    line-height: var(--hrc-leading-relaxed);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--hrc-space-5);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-hero-copy {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-hero-actions {
    justify-content: flex-end;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-hero-kpis {
    grid-column: 1 / -1;
    --hrc-kpi-columns: 4;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-kpi {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-kpi > div {
    display: grid;
    min-width: 0;
    gap: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-scope-badge, .wf-badge, .wf-identity-status) {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    gap: var(--hrc-space-2);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
    line-height: var(--hrc-leading-tight);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-scope-badge, .wf-badge) {
    min-height: var(--hrc-control-height-sm);
    padding-inline: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-badge.green,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-identity-status.success {
    border-color: color-mix(in srgb, var(--hrc-color-success) 30%, var(--hrc-color-border));
    background: var(--hrc-color-success-soft);
    color: var(--hrc-color-success);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-badge.red,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-identity-status.error {
    border-color: color-mix(in srgb, var(--hrc-color-danger) 30%, var(--hrc-color-border));
    background: var(--hrc-color-danger-soft);
    color: var(--hrc-color-danger);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-badge.orange,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-identity-status.warning {
    border-color: color-mix(in srgb, var(--hrc-color-warning) 34%, var(--hrc-color-border));
    background: var(--hrc-color-warning-soft);
    color: var(--hrc-color-warning);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-identity-status.checking {
    border-color: color-mix(in srgb, var(--hrc-color-info) 30%, var(--hrc-color-border));
    background: var(--hrc-color-info-soft);
    color: var(--hrc-color-info);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-tabs {
    position: sticky;
    top: var(--hrc-topbar-height);
    z-index: var(--hrc-z-sticky);
    width: 100%;
    max-width: 100%;
    padding: var(--hrc-space-2);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: color-mix(in srgb, var(--hrc-color-surface) 94%, transparent);
    box-shadow: var(--hrc-shadow-xs);
    overflow-x: auto;
    scrollbar-width: thin;
    backdrop-filter: blur(var(--hrc-space-3));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-tabs .hrc-tab {
    flex: 0 0 auto;
    min-height: var(--hrc-control-height);
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-toolbar, .wf-subfilters) {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(11rem, .8fr) minmax(16rem, 1.6fr) auto;
    align-items: end;
    min-width: 0;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-4);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-subfilters {
    grid-template-columns: repeat(4, minmax(10rem, 1fr)) auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-toolbar, .wf-subfilters, .wf-form-grid) label {
    display: grid;
    min-width: 0;
    gap: var(--hrc-space-2);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-search {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(
    .wf-toolbar,
    .wf-subfilters,
    .wf-form-grid,
    .wf-chat,
    .wf-combobox-popover
) :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), select, textarea) {
    width: 100%;
    min-width: 0;
    min-height: var(--hrc-control-height);
    border: var(--hrc-border-width) solid var(--hrc-color-border-strong);
    border-radius: var(--hrc-radius-control);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    font: inherit;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce textarea {
    resize: vertical;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-date-control,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-datetime-control {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-date-control {
    position: relative;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-date-control input {
    padding-inline-end: calc(var(--hrc-control-height) + var(--hrc-space-2));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-date-trigger {
    position: absolute;
    inset-inline-end: 0;
    display: inline-grid;
    place-items: center;
    width: var(--hrc-control-height);
    height: var(--hrc-control-height);
    border: 0;
    background: transparent;
    color: var(--hrc-color-text-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-panel, .wf-card) {
    min-width: 0;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-panel {
    display: grid;
    gap: var(--hrc-space-5);
    padding: var(--hrc-space-5);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-card {
    padding: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-section-head > * {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-section-head h2 {
    margin-block-end: var(--hrc-space-1);
    font-size: var(--hrc-text-xl);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-eyebrow, .wf-section-kicker) {
    display: inline-flex;
    align-items: center;
    gap: var(--hrc-space-2);
    margin-block-end: var(--hrc-space-2);
    color: var(--hrc-color-brand);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
    letter-spacing: var(--hrc-tracking-eyebrow);
    text-transform: uppercase;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(
    .wf-stats-grid,
    .wf-queue-summary,
    .wf-two-col
) {
    display: grid;
    min-width: 0;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-stats-grid, .wf-queue-summary) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-mini-stat {
    display: grid;
    min-width: 0;
    gap: var(--hrc-space-1);
    padding: var(--hrc-space-4);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-inline-start: calc(var(--hrc-border-width) * 3) solid var(--hrc-color-brand);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-mini-stat :where(span, small) {
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-mini-stat strong {
    color: var(--hrc-color-text);
    font-size: var(--hrc-text-xl);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-table-wrap table {
    width: 100%;
    min-width: max(100%, 52rem);
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-table-wrap :where(th, td) {
    padding: var(--hrc-space-3);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
    text-align: start;
    vertical-align: middle;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-table-wrap th {
    position: sticky;
    top: 0;
    z-index: var(--hrc-z-base);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-table-wrap tbody tr:hover td {
    background: color-mix(in srgb, var(--hrc-color-brand) 4%, var(--hrc-color-surface));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-table-wrap tbody tr:last-child td {
    border-block-end: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-inline-actions, .wf-card-actions) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-card-actions {
    justify-content: flex-end;
    margin-block-start: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-btn, .wf-icon-btn, .wf-file-btn, .wf-combobox-trigger) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--hrc-control-height);
    gap: var(--hrc-space-2);
    padding-inline: var(--hrc-space-4);
    border: var(--hrc-border-width) solid transparent;
    border-radius: var(--hrc-radius-control);
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-semibold);
    line-height: var(--hrc-leading-tight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-btn-sm {
    min-height: var(--hrc-control-height-sm);
    padding-inline: var(--hrc-space-3);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-icon-btn {
    width: var(--hrc-control-height);
    padding: 0;
    border-color: var(--hrc-color-border);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-btn-primary) {
    background: var(--hrc-color-brand);
    color: var(--hrc-static-white);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-btn-secondary, .wf-file-btn, .wf-combobox-trigger) {
    border-color: var(--hrc-color-border-strong);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-btn-ghost {
    background: transparent;
    color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-btn-danger {
    background: var(--hrc-color-danger);
    color: var(--hrc-static-white);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-alert, .wf-empty, .wf-site-empty) {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-4);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-alert-danger {
    border-color: color-mix(in srgb, var(--hrc-color-danger) 30%, var(--hrc-color-border));
    background: var(--hrc-color-danger-soft);
    color: var(--hrc-color-danger);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-form-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-span-2 {
    grid-column: span 2;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-span-3 {
    grid-column: 1 / -1;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-need-card, .wf-upload-zone) {
    min-width: 0;
    padding: var(--hrc-space-4);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-need-head {
    display: flex;
    justify-content: space-between;
    gap: var(--hrc-space-3);
    margin-block-end: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-need-grid {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) repeat(3, minmax(5rem, .7fr));
    align-items: center;
    min-width: 0;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-shift-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-shift-options label > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--hrc-control-height);
    gap: var(--hrc-space-2);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-control);
    background: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-shift-options input {
    position: absolute;
    opacity: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-shift-options input:checked + span {
    border-color: var(--hrc-color-brand);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand-hover);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-upload-grid,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-document-review {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-upload-zone {
    display: grid;
    align-content: start;
    gap: var(--hrc-space-3);
    border-style: dashed;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-upload-zone:focus-within,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-upload-zone:hover {
    border-color: var(--hrc-color-brand);
    background: var(--hrc-color-brand-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-upload-placeholder {
    display: grid;
    justify-items: center;
    gap: var(--hrc-space-2);
    padding-block: var(--hrc-space-4);
    color: var(--hrc-color-text-soft);
    text-align: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-upload-preview {
    display: grid;
    gap: var(--hrc-space-2);
    margin: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-upload-preview img,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-document-review img {
    width: 100%;
    max-height: 18rem;
    border-radius: var(--hrc-radius-sm);
    object-fit: contain;
    background: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-combobox {
    position: relative;
    display: block;
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-combobox-trigger {
    justify-content: space-between;
    width: 100%;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-combobox-popover,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-calendar {
    position: absolute;
    z-index: var(--hrc-z-dropdown);
    display: grid;
    width: min(24rem, calc(100vw - (var(--hrc-page-gutter-mobile) * 2)));
    gap: var(--hrc-space-3);
    margin-block-start: var(--hrc-space-2);
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface-raised);
    box-shadow: var(--hrc-shadow-lg);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-combobox-list {
    display: grid;
    max-height: 18rem;
    overflow-y: auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-combobox-option {
    display: grid;
    gap: var(--hrc-space-1);
    min-height: var(--hrc-control-height);
    padding: var(--hrc-space-3);
    border-radius: var(--hrc-radius-sm);
    color: var(--hrc-color-text);
    cursor: pointer;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-combobox-option:hover {
    background: var(--hrc-color-brand-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-calendar-head,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-calendar-week,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: center;
    gap: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-calendar-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-calendar :where(button, span) {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: var(--hrc-control-height-sm);
    border: 0;
    border-radius: var(--hrc-radius-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-calendar button:hover {
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand-hover);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-inbox {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    align-items: stretch;
    padding: 0;
    overflow: hidden;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-inbox > aside {
    min-width: 0;
    padding: var(--hrc-space-4);
    border-inline-end: var(--hrc-border-width) solid var(--hrc-color-border);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-conversation {
    display: grid;
    gap: var(--hrc-space-1);
    width: 100%;
    min-height: var(--hrc-control-height-lg);
    padding: var(--hrc-space-3);
    border: 0;
    border-radius: var(--hrc-radius-sm);
    background: transparent;
    color: var(--hrc-color-text);
    text-align: start;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-conversation:hover,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-conversation.active {
    background: var(--hrc-color-brand-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-chat {
    display: grid;
    grid-template-rows: auto minmax(18rem, 1fr) auto auto;
    min-width: 0;
    min-height: 34rem;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-chat > header,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-chat > form,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-reply-indicator {
    padding: var(--hrc-space-4);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-chat > form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: var(--hrc-space-2);
    border-block-start: var(--hrc-border-width) solid var(--hrc-color-border);
    border-block-end: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-messages {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-4);
    overflow-y: auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-message {
    display: grid;
    align-self: flex-start;
    width: min(80%, 42rem);
    gap: var(--hrc-space-1);
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-message.mine {
    align-self: flex-end;
    border-color: color-mix(in srgb, var(--hrc-color-brand) 24%, var(--hrc-color-border));
    background: var(--hrc-color-brand-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-person, .wf-attachment) {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--hrc-control-height);
    height: var(--hrc-control-height);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand-hover);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-progress {
    display: block;
    width: 100%;
    height: var(--hrc-space-2);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-neutral-100);
    overflow: hidden;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-dialog {
    width: min(56rem, calc(100vw - (var(--hrc-page-gutter) * 2)));
    max-width: 100%;
    max-height: calc(100dvh - (var(--hrc-page-gutter) * 2));
    padding: 0;
    border: 0;
    border-radius: var(--hrc-radius-lg);
    background: transparent;
    overflow: visible;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-dialog::backdrop {
    background: color-mix(in srgb, var(--hrc-color-text) 42%, transparent);
    backdrop-filter: blur(var(--hrc-space-1));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-dialog-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: calc(100dvh - (var(--hrc-page-gutter) * 2));
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-lg);
    background: var(--hrc-color-surface-raised);
    box-shadow: var(--hrc-shadow-lg);
    overflow: hidden;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-dialog-shell-compact {
    width: min(100%, var(--hrc-container-md));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-dialog-shell > :where(header, footer) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-4) var(--hrc-space-5);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-dialog-shell > header {
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-dialog-shell > footer {
    justify-content: flex-end;
    border-block-start: var(--hrc-border-width) solid var(--hrc-color-border);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-dialog-body {
    display: grid;
    min-height: 0;
    gap: var(--hrc-space-4);
    padding: var(--hrc-space-5);
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-field-error {
    min-height: var(--hrc-text-sm);
    color: var(--hrc-color-danger);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-has-error :where(input, select, textarea, .wf-combobox-trigger) {
    border-color: var(--hrc-color-danger);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-toast-region {
    position: fixed;
    inset: auto var(--hrc-space-5) var(--hrc-space-5) auto;
    z-index: var(--hrc-z-toast);
    display: grid;
    width: min(24rem, calc(100vw - (var(--hrc-page-gutter-mobile) * 2)));
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-toast {
    padding: var(--hrc-space-3) var(--hrc-space-4);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface-raised);
    color: var(--hrc-color-text);
    box-shadow: var(--hrc-shadow-lg);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-toast.success {
    border-inline-start: calc(var(--hrc-border-width) * 3) solid var(--hrc-color-success);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-toast.error {
    border-inline-start: calc(var(--hrc-border-width) * 3) solid var(--hrc-color-danger);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(
    .wf-btn,
    .wf-icon-btn,
    .wf-date-trigger,
    .wf-file-btn,
    .wf-combobox-trigger,
    .wf-conversation
):focus-visible {
    outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
    outline-offset: var(--hrc-focus-offset);
    box-shadow: var(--hrc-focus-ring);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(
    .wf-btn,
    .wf-icon-btn,
    .wf-date-trigger,
    .wf-file-btn,
    .wf-combobox-trigger
):disabled {
    cursor: not-allowed;
    opacity: var(--hrc-opacity-disabled);
}

@media (max-width: 1199.98px) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-toolbar, .wf-subfilters) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-stats-grid, .wf-queue-summary) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-hero-actions,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-hero-kpis {
        grid-column: auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-hero-actions {
        justify-content: flex-start;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-hero-kpis {
        --hrc-kpi-columns: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-hero-kpis .hrc-kpi__meta {
        display: none;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-hero-kpis .wf-kpi {
        gap: var(--hrc-space-2);
        padding: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(
        .wf-toolbar,
        .wf-subfilters,
        .wf-two-col,
        .wf-form-grid,
        .wf-form-grid-compact,
        .wf-upload-grid,
        .wf-document-review,
        .wf-inbox
    ) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-span-2,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-span-3 {
        grid-column: 1 / -1;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-inbox > aside {
        border-inline-end: 0;
        border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-chat {
        min-height: 30rem;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-dialog {
        width: calc(100vw - (var(--hrc-page-gutter-mobile) * 2));
        max-height: calc(100dvh - (var(--hrc-page-gutter-mobile) * 2));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-dialog-shell {
        max-height: calc(100dvh - (var(--hrc-page-gutter-mobile) * 2));
    }
}

@media (max-width: 479.98px) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-stats-grid, .wf-queue-summary) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-panel,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-card,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-dialog-body {
        padding: var(--hrc-space-4);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-inline-actions > .wf-btn {
        flex: 1 1 100%;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-need-grid {
        grid-template-columns: minmax(6rem, 1fr) repeat(3, minmax(3.5rem, .65fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-chat > form {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-chat > form textarea {
        grid-column: 1 / -1;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-message {
        width: 92%;
    }
}

@media (max-width: 359.98px) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-hero-kpis .wf-kpi {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce .wf-hero-kpis .wf-kpi-icon {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workforce :where(.wf-toast, .wf-dialog-shell) {
        animation: none;
        transition: none;
    }
}

/* source: public/assets/design-workers-contract.css */
/*
 * HRConnect Native Workers domain contract.
 * Generic structure belongs to hrc-* primitives. This file only maps stable
 * worker-* business hooks for Worker 360, lifecycle and related overlays.
 */
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-confirm-qr {
    display: block;
    width: min(100%, calc(var(--hrc-control-height-lg) * 5));
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-export-builder-backdrop,
    .worker-drawer-backdrop,
    .worker-status-modal-backdrop,
    .worker-lifecycle-modal-backdrop,
    .worker-employment-modal-backdrop
) {
    z-index: var(--hrc-z-drawer);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-export-builder,
    .worker-status-modal,
    .worker-lifecycle-modal,
    .worker-employment-modal
) {
    width: min(calc(100% - (var(--hrc-space-4) * 2)), var(--hrc-container-sm));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-status-modal,
    .worker-lifecycle-modal,
    .worker-employment-modal
) > form {
    display: grid;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-export-builder {
    grid-template-rows: auto auto minmax(calc(var(--hrc-control-height) * 4), 1fr) auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-export-builder:is(.open, [data-state="open"]) {
    display: grid;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-export-builder-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    gap: var(--hrc-space-2);
    padding: 0 var(--hrc-space-5) var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-export-builder-count {
    margin-inline-start: auto;
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-export-builder-list {
    display: grid;
    align-content: start;
    min-height: 0;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-export-column {
    display: grid;
    grid-template-columns: var(--hrc-control-height-sm) minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-2);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-export-column.is-selected {
    border-color: var(--hrc-color-brand);
    background: var(--hrc-color-brand-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-export-column.is-dragging {
    opacity: var(--hrc-opacity-disabled);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-export-column label {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--hrc-space-2);
    margin: 0;
    color: var(--hrc-color-text);
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-export-column label span {
    min-width: 0;
    overflow-wrap: anywhere;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-export-drag,
    .worker-export-order button
) {
    width: var(--hrc-control-height-sm);
    height: var(--hrc-control-height-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-export-order {
    display: grid;
    grid-template-columns: repeat(2, var(--hrc-control-height-sm));
    gap: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-export-builder-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-export-builder-error,
    .worker-employment-error,
    .worker-lifecycle-form-message
) {
    min-width: 0;
    margin: 0;
    color: var(--hrc-color-danger);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer {
    display: flex;
    flex-direction: column;
    width: clamp(var(--hrc-container-sm), 58vw, calc(var(--hrc-container-sm) + (var(--hrc-space-8) * 3)));
    max-width: 100%;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer[aria-hidden="true"] {
    visibility: hidden;
    pointer-events: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer[aria-hidden="false"] {
    visibility: visible;
    pointer-events: auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-head {
    flex: 0 0 auto;
    align-items: flex-start;
    gap: var(--hrc-space-3);
    background: var(--hrc-color-surface-raised);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-head__profile {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-head__avatar {
    flex: 0 0 auto;
    width: calc(var(--hrc-control-height-lg) + var(--hrc-space-3));
    height: calc(var(--hrc-control-height-lg) + var(--hrc-space-3));
    overflow: hidden;
    border-radius: var(--hrc-radius-md);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-head__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-head__identity {
    display: grid;
    min-width: 0;
    gap: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-head__identity h3 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-head__identity p {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-head__status {
    justify-self: start;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hrc-space-2);
    margin-inline-start: auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-drawer-head,
    .worker-status-modal-head
) :where(h2, h3, p) {
    margin-block-start: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-drawer-head,
    .worker-status-modal-head
) p {
    margin-block-end: 0;
    color: var(--hrc-color-text-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-drawer-head,
    .worker-status-modal-head,
    .worker-attendance-heading,
    .worker-lifecycle-console__head
) span {
    color: var(--hrc-color-brand);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
    letter-spacing: var(--hrc-tracking-eyebrow);
    text-transform: uppercase;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-tabs {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    padding: var(--hrc-space-2) var(--hrc-space-4);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: 0;
    overflow: visible;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-tabs .hrc-tab {
    flex: 0 0 auto;
    min-height: var(--hrc-control-height-sm);
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-tabs .hrc-tab.active {
    border-color: var(--hrc-color-brand);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand-hover);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-tabs__more {
    position: relative;
    flex: 0 0 auto;
    margin-inline-start: auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-tabs__more > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--hrc-space-2);
    list-style: none;
    cursor: pointer;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-tabs__more > summary::-webkit-details-marker {
    display: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-tabs__menu {
    position: absolute;
    z-index: var(--hrc-z-dropdown);
    inset-block-start: calc(100% + var(--hrc-space-2));
    inset-inline-end: 0;
    display: grid;
    min-width: calc(var(--hrc-control-height-lg) * 4);
    gap: var(--hrc-space-1);
    padding: var(--hrc-space-2);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface-raised);
    box-shadow: var(--hrc-shadow-lg);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-tabs__more:not([open]) > .worker-drawer-tabs__menu {
    display: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-tabs__menu .hrc-tab {
    width: 100%;
    justify-content: flex-start;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-tabs__menu [data-drawer-mobile-tab] {
    display: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-body {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-pane {
    display: none;
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-pane.active {
    display: block;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-drawer-grid,
    .worker-score-grid,
    .worker-attendance-metrics
) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-drawer-grid > div,
    .worker-score-grid > div,
    .worker-attendance-metrics > div
) {
    display: grid;
    min-width: 0;
    gap: var(--hrc-space-1);
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-drawer-grid,
    .worker-score-grid,
    .worker-attendance-metrics
) span,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-note {
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-drawer-grid,
    .worker-score-grid,
    .worker-attendance-metrics
) :where(b, strong) {
    min-width: 0;
    color: var(--hrc-color-text);
    overflow-wrap: anywhere;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-info-tools
) {
    grid-column: 1 / -1;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-grid > .worker-info-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    min-width: 0;
    gap: var(--hrc-space-3);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-attendance-id-card,
    .worker-avatar-upload-card
) {
    display: grid;
    align-content: start;
    min-width: 0;
    height: 100%;
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-attendance-id-card > b {
    font-size: var(--hrc-text-sm);
    line-height: var(--hrc-leading-tight);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-attendance-id-card > form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    gap: var(--hrc-space-2);
    margin-block-start: auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-attendance-id-card > form :where(input, button) {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-attendance-id-card > form button {
    width: var(--hrc-control-height);
    padding-inline: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-drawer-management-head,
    .worker-uniform-head,
    .worker-attendance-heading
) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-avatar-upload-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    gap: var(--hrc-space-3);
    margin-block-start: auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-avatar-upload-preview-group {
    display: grid;
    justify-items: center;
    min-width: 0;
    gap: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-avatar-upload-preview {
    display: inline-grid;
    place-items: center;
    width: calc(var(--hrc-space-8) + var(--hrc-space-8) + var(--hrc-space-4));
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-avatar-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-avatar-upload-preview-group > small {
    max-width: calc(var(--hrc-space-8) + var(--hrc-space-8) + var(--hrc-space-8));
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
    line-height: var(--hrc-leading-tight);
    text-align: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-avatar-upload-row > .hrc-btn {
    justify-self: end;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    line-height: var(--hrc-leading-tight);
    text-align: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-pane[data-drawer-pane="info"] .worker-drawer-grid {
    gap: var(--hrc-space-2);
}

@media (min-width: 1024px) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-grid > .worker-info-tools {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-management {
    display: grid;
    gap: var(--hrc-space-3);
    margin-block-start: var(--hrc-space-4);
    padding: var(--hrc-space-4);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-management-head small {
    display: block;
    margin-block-start: var(--hrc-space-1);
    color: var(--hrc-color-text-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-drawer-management-actions,
    .worker-attendance-toolbar
) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-cccd-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-cccd-preview img {
    display: block;
    width: 100%;
    max-height: var(--hrc-editor-min-height);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface-soft);
    object-fit: contain;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-uniform-form,
    .worker-uniform-list,
    .worker-attendance-list,
    .worker-employment-history
) {
    display: grid;
    min-width: 0;
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-uniform-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-uniform-choices {
    grid-template-columns: repeat(2, minmax(calc(var(--hrc-control-height) * 2), 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-attendance-heading {
    align-items: flex-start;
    margin-block-end: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-attendance-toolbar {
    margin-block-end: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-attendance-toolbar select {
    min-width: calc(var(--hrc-control-height) * 3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-attendance-connection,
    .worker-attendance-state
) {
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-attendance-row {
    display: grid;
    grid-template-columns: minmax(calc(var(--hrc-control-height) * 2), .8fr) minmax(0, 1.4fr) repeat(2, minmax(calc(var(--hrc-control-height) * 2), .8fr));
    align-items: center;
    min-width: calc(var(--hrc-control-height) * 12);
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-3);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-attendance-row-head {
    position: sticky;
    top: 0;
    z-index: var(--hrc-z-base);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-attendance-status {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    min-height: var(--hrc-control-height-sm);
    padding-inline: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-employment-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    min-width: 0;
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-employment-dot {
    width: var(--hrc-space-3);
    height: var(--hrc-space-3);
    margin-block-start: var(--hrc-space-1);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-image-preview {
    position: fixed;
    inset: 0;
    z-index: var(--hrc-z-modal);
    display: grid;
    place-items: center;
    padding: var(--hrc-space-4);
    background: var(--color-surface-overlay);
    backdrop-filter: blur(var(--hrc-blur-sm));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-image-preview[hidden] {
    display: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-image-preview > button {
    position: fixed;
    inset-block-start: var(--hrc-space-4);
    inset-inline-end: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-image-preview img {
    display: block;
    max-width: min(100%, var(--hrc-container-md));
    max-height: calc(100dvh - (var(--hrc-space-8) * 2));
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-lg);
    object-fit: contain;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-status-modal-body,
    .worker-employment-modal-grid,
    .worker-lifecycle-form-grid
) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-status-modal-body,
    .worker-employment-modal-grid,
    .worker-lifecycle-form-grid
) label {
    display: grid;
    min-width: 0;
    gap: var(--hrc-space-2);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-status-modal-body,
    .worker-employment-modal-grid,
    .worker-lifecycle-form-grid
) :where(input, select, textarea) {
    width: 100%;
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-employment-wide,
    .worker-temporary-leave-fields,
    .worker-lifecycle-form-wide
) {
    grid-column: 1 / -1;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-status-choice-fieldset {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-status-choice-fieldset legend {
    margin-block-end: var(--hrc-space-3);
    color: var(--hrc-color-text);
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-status-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-status-choice-grid button {
    min-height: var(--hrc-control-height-lg);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-status-choice-grid button:is(:hover, :focus-visible, .is-active) {
    border-color: var(--hrc-color-brand);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand-hover);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-status-modal-actions {
    flex-wrap: wrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-status-flow-help,
    .worker-status-form-error
) {
    grid-column: 1 / -1;
    min-height: var(--hrc-space-5);
    margin: 0;
    padding: var(--hrc-space-3);
    border-radius: var(--hrc-radius-sm);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-status-flow-help {
    background: var(--hrc-color-info-soft);
    color: var(--hrc-color-info);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-status-form-error:not(:empty) {
    background: var(--hrc-color-danger-soft);
    color: var(--hrc-color-danger);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-status-form-error:empty {
    display: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page {
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page > .hrc-hero {
    min-height: 0;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-3) var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page > .hrc-hero h1 {
    font-size: var(--hrc-text-2xl);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page > .hrc-hero p {
    max-width: var(--hrc-container-sm);
    margin-block-end: 0;
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page > .hrc-section {
    padding: var(--hrc-space-2) var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page > .hrc-filter-panel {
    padding: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page .hrc-filter-grid {
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page #workerFilter > div > .hrc-toolbar {
    min-height: 0;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 0 var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page #workerFilter > div > .hrc-toolbar > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page #workerFilter > div > .hrc-toolbar :where(h2, p) {
    margin: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page #workerFilter > div > .hrc-toolbar p {
    margin-block-start: var(--hrc-space-1);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page #workerFilter .hrc-form-actions {
    align-self: end;
    flex-wrap: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page #workerFilter .hrc-form-actions .hrc-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: var(--hrc-space-3);
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-company-cell strong,
    .worker-source-name,
    .worker-phone,
    .worker-date-cell,
    .worker-leave-cell > span
) {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page .hrc-table-scroll {
    overscroll-behavior-inline: contain;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page [data-worker-table] {
    min-width: var(--hrc-container-md);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page .worker-identity-main > [data-worker-drawer] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-employment-error,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-form-message {
    min-height: var(--hrc-space-5);
    padding-inline: var(--hrc-space-5);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-form-grid textarea {
    min-height: calc(var(--hrc-control-height) * 2);
    resize: vertical;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-form-message.is-success {
    color: var(--hrc-color-success);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-console {
    margin-block-end: var(--hrc-space-5);
    overflow: hidden;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-console__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-4);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
    background: var(--hrc-color-info-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-console__head > div {
    display: grid;
    min-width: 0;
    gap: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-console__head strong {
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-summary > :where(span, div) {
    min-width: 0;
    padding: var(--hrc-space-3);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-summary strong {
    display: block;
    margin-block-start: var(--hrc-space-1);
    color: var(--hrc-color-text);
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-tabs {
    width: 100%;
    max-width: 100%;
    padding: 0 var(--hrc-space-4) var(--hrc-space-3);
    overflow-x: auto;
    scrollbar-width: thin;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-tabs button {
    flex: 0 0 auto;
    min-height: var(--hrc-control-height-sm);
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-tabs button.is-active {
    border-color: var(--hrc-color-brand);
    background: var(--hrc-color-brand);
    color: var(--hrc-static-white);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-list {
    display: grid;
    gap: var(--hrc-space-2);
    padding: 0 var(--hrc-space-4) var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-empty {
    padding: var(--hrc-space-5);
    border: var(--hrc-border-width) dashed var(--hrc-color-border-strong);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text-soft);
    text-align: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-item__main {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
    .worker-lifecycle-item__top,
    .worker-lifecycle-item__meta,
    .worker-lifecycle-item__actions
) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-item__top strong {
    color: var(--hrc-color-text);
    overflow-wrap: anywhere;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-item__meta {
    margin-block-start: var(--hrc-space-2);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-item__note {
    margin: var(--hrc-space-2) 0 0;
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
    white-space: pre-wrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-item__actions {
    align-content: flex-start;
    justify-content: flex-end;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-item__actions button {
    min-height: var(--hrc-control-height-sm);
    padding-inline: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand-hover);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-item__actions button.is-danger {
    border-color: color-mix(in srgb, var(--hrc-color-danger) 36%, var(--hrc-color-border));
    background: var(--hrc-color-danger-soft);
    color: var(--hrc-color-danger);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-badge {
    display: inline-flex;
    align-items: center;
    min-height: var(--hrc-space-6);
    padding-inline: var(--hrc-space-2);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-info-soft);
    color: var(--hrc-color-info);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-badge[data-status="approved"] {
    background: var(--hrc-color-success-soft);
    color: var(--hrc-color-success);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-badge:is([data-status="rejected"], [data-status="cancelled"]) {
    background: var(--hrc-color-danger-soft);
    color: var(--hrc-color-danger);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-badge:is([data-status^="pending"], [data-status="needs_evidence"]) {
    background: var(--hrc-color-warning-soft);
    color: var(--hrc-color-warning);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hrc-space-3);
    margin: var(--hrc-space-4) 0 var(--hrc-space-3);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-section-title span {
    font-weight: var(--hrc-weight-bold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-section-title small {
    color: var(--hrc-color-text-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-bell {
    position: relative;
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-bell__button {
    position: relative;
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-bell__count {
    position: absolute;
    inset-block-start: calc(var(--hrc-space-1) * -1);
    inset-inline-end: calc(var(--hrc-space-1) * -1);
    display: inline-grid;
    place-items: center;
    min-width: var(--hrc-space-5);
    height: var(--hrc-space-5);
    padding-inline: var(--hrc-space-1);
    border: calc(var(--hrc-border-width) * 2) solid var(--hrc-color-surface);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-danger);
    color: var(--hrc-static-white);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-bold);
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-bell__panel {
    position: absolute;
    z-index: var(--hrc-z-dropdown);
    inset-block-start: calc(100% + var(--hrc-space-3));
    inset-inline-end: 0;
    width: min(var(--hrc-popover-inline-size), calc(100vw - (var(--hrc-space-3) * 2)));
    max-height: min(var(--hrc-popover-block-size), calc(100dvh - var(--hrc-topbar-height) - var(--hrc-space-5)));
    overflow: hidden;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface-raised);
    box-shadow: var(--hrc-shadow-lg);
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-bell__panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-4);
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-bell__panel header div {
    display: grid;
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-bell__panel header strong {
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-bell__panel header small {
    color: var(--hrc-color-text-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-bell__panel header button {
    border: 0;
    background: transparent;
    color: var(--hrc-color-brand-hover);
    font-size: var(--hrc-text-xs);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-bell__list {
    max-height: calc(var(--hrc-popover-block-size) - (var(--hrc-control-height) * 2));
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-bell__list > p {
    margin: 0;
    padding: var(--hrc-space-6) var(--hrc-space-4);
    color: var(--hrc-color-text-soft);
    text-align: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-notification {
    display: grid;
    grid-template-columns: var(--hrc-space-3) minmax(0, 1fr);
    gap: var(--hrc-space-3);
    width: 100%;
    padding: var(--hrc-space-3) var(--hrc-space-4);
    border: 0;
    border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text);
    text-align: start;
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-notification:hover {
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-notification__dot {
    width: var(--hrc-space-2);
    height: var(--hrc-space-2);
    margin-block-start: var(--hrc-space-1);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-border-strong);
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-notification.is-unread .worker-lifecycle-notification__dot {
    background: var(--hrc-color-brand);
    box-shadow: 0 0 0 var(--hrc-space-1) var(--hrc-color-brand-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-notification :where(strong, span, time) {
    display: block;
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-notification strong {
    color: var(--hrc-color-text);
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-notification span {
    margin-block-start: var(--hrc-space-1);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-notification time {
    margin-block-start: var(--hrc-space-1);
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
}

@media (max-width: 1024px) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-status-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
        .worker-drawer-grid,
        .worker-score-grid,
        .worker-attendance-metrics,
        .worker-status-modal-body,
        .worker-employment-modal-grid,
        .worker-lifecycle-form-grid,
        .worker-lifecycle-summary
    ) {
        grid-template-columns: 1fr;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
        .worker-employment-wide,
        .worker-temporary-leave-fields,
        .worker-lifecycle-form-wide
    ) {
        grid-column: auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-item {
        grid-template-columns: 1fr;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-item__actions {
        justify-content: flex-start;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer {
        inset: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        padding: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-head__actions {
        width: 100%;
        margin-inline-start: 0;
        justify-content: flex-start;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-head__actions .worker-drawer-close {
        margin-inline-start: auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-tabs {
        padding-inline: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-tabs > [data-drawer-primary-tab] {
        display: none;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-tabs__menu [data-drawer-mobile-tab] {
        display: inline-flex;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-tabs__more {
        margin-inline-start: auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page > .hrc-section .hrc-table-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page > .hrc-section .hrc-toolbar {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        width: max-content;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page [data-worker-table] {
        min-width: 0;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page > .hrc-hero {
        padding: var(--hrc-space-4);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page > .hrc-section,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page > .hrc-filter-panel {
        padding: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page #workerFilter > div > .hrc-toolbar,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .workers-page #workerFilter .hrc-form-actions {
        flex-wrap: wrap;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
        .worker-export-builder,
        .worker-status-modal,
        .worker-lifecycle-modal,
        .worker-employment-modal
    ) {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        max-height: min(92dvh, var(--hrc-sheet-block-size));
        margin: 0;
        border-radius: var(--hrc-radius-lg) var(--hrc-radius-lg) 0 0;
        transform: translateY(var(--hrc-space-3));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
        .worker-export-builder,
        .worker-status-modal,
        .worker-lifecycle-modal,
        .worker-employment-modal
    ):is(.open, [data-state="open"]) {
        transform: translateY(0);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
        .worker-export-builder-foot,
        .worker-status-modal-actions,
        .worker-lifecycle-modal .hrc-dialog__footer,
        .worker-employment-modal .hrc-dialog__footer
    ) {
        position: sticky;
        bottom: 0;
        padding-bottom: calc(var(--hrc-space-4) + env(safe-area-inset-bottom, 0px));
        background: var(--hrc-color-surface);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-export-builder-foot {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-export-builder-error {
        grid-column: 1 / -1;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-cccd-preview {
        grid-template-columns: 1fr;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route .worker-lifecycle-bell__panel {
        position: fixed;
        inset: var(--hrc-topbar-height) var(--hrc-space-3) auto;
        width: auto;
        max-height: calc(100dvh - var(--hrc-topbar-height) - var(--hrc-space-4));
    }
}

@media (max-width: 390px) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
        .worker-uniform-item,
        .worker-status-choice-grid
    ) {
        grid-template-columns: 1fr;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-uniform-choices {
        width: 100%;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers :where(
        .worker-lifecycle-console__head,
        .worker-avatar-upload-row,
        .worker-attendance-heading
    ) {
        align-items: stretch;
        flex-direction: column;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-lifecycle-console__head .hrc-btn {
        width: 100%;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-head__actions :where(.hrc-btn) {
        flex: 1 1 auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-workers .worker-drawer-head__profile {
        align-items: flex-start;
    }
}

/* source: public/assets/design-labor-data-contract.css */
/* HRConnect Native Labor Data contract. SSoT: /modules/system/design-system.php */
[data-native-surface="labor-data"] {
  --ld-bg: var(--hrc-color-bg-app);
  --ld-card: var(--hrc-color-surface);
  --ld-text: var(--hrc-color-text);
  --ld-muted: var(--hrc-color-text-muted);
  --ld-line: var(--hrc-color-border);
  --ld-brand: var(--hrc-color-brand);
  --ld-brand-2: var(--hrc-color-brand-hover);
  --ld-danger: var(--hrc-color-danger);
}
:where(.ld-shell,.ld-dialog,.ld-toasts){--ld-bg:var(--ui2030-bg,var(--bg,var(--hrc-color-bg-app)));--ld-card:var(--ui2030-surface,var(--card,var(--hrc-color-surface)));--ld-text:var(--ui2030-text,var(--text,var(--hrc-color-text)));--ld-muted:var(--ui2030-muted,var(--muted,var(--hrc-color-text-muted)));--ld-line:var(--ui2030-border,color-mix(in srgb, var(--hrc-color-text) 8%, transparent));--ld-brand:var(--hrc-color-brand);--ld-brand-2:var(--hrc-color-brand);--ld-danger:var(--hrc-color-danger)}.ld-shell{max-width:1680px;margin:0 auto;padding:24px 28px 48px;color:var(--ld-text)}
.ld-shell *{box-sizing:border-box}.ld-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:26px 28px;border:1px solid var(--ld-line);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--ld-card) 88%,var(--hrc-color-brand-soft)),var(--ld-card));box-shadow:0 14px 36px color-mix(in srgb, var(--hrc-color-text) 8%, transparent)}
.ld-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--ld-brand);font-size:12px;font-weight:800;letter-spacing:.12em}.ld-hero h1{margin:8px 0 5px;font-size:32px;line-height:1.1}.ld-hero p{margin:0;color:var(--ld-muted)}.ld-hero-actions,.ld-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ld-btn,.ld-icon-btn,.ld-mode button,.ld-kpi{font:inherit}.ld-btn{min-height:44px;border:1px solid transparent;border-radius:12px;padding:9px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:750;text-decoration:none;cursor:pointer}.ld-btn-primary{background:linear-gradient(135deg,var(--ld-brand),var(--hrc-color-brand-hover));color:var(--hrc-color-surface)}.ld-btn-secondary{background:var(--ld-card);border-color:var(--ld-line);color:var(--ld-text)}.ld-btn-ghost{background:transparent;border-color:var(--ld-line);color:var(--ld-muted)}.ld-btn:hover{transform:translateY(-1px)}.ld-btn:focus-visible,.ld-icon-btn:focus-visible,.ld-mode button:focus-visible,.ld-kpi:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--ld-brand-2) 35%,transparent);outline-offset:2px}
.ld-mode{display:inline-flex;margin:18px 0 14px;padding:4px;border:1px solid var(--ld-line);border-radius:14px;background:var(--ld-card)}.ld-mode button{min-height:44px;border:0;border-radius:10px;padding:8px 16px;background:transparent;color:var(--ld-muted);font-weight:800;cursor:pointer}.ld-mode button.active{background:var(--ld-brand);color:var(--hrc-color-surface)}.ld-kpis{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px;margin-bottom:16px}.ld-kpi{min-height:122px;text-align:left;border:1px solid var(--ld-line);border-radius:16px;padding:16px;background:var(--ld-card);color:var(--ld-text);cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 6px 18px color-mix(in srgb, var(--hrc-color-text) 8%, transparent)}.ld-kpi span{display:flex;align-items:center;gap:8px;color:var(--ld-muted);font-size:13px;font-weight:700}.ld-kpi i{color:var(--ld-brand)}.ld-kpi strong{font-size:30px;line-height:1}.ld-kpi.active{border-color:var(--ld-brand-2);box-shadow:0 0 0 2px color-mix(in srgb,var(--ld-brand-2) 18%,transparent)}
.ld-panel{border:1px solid var(--ld-line);border-radius:16px;background:var(--ld-card);box-shadow:0 8px 24px color-mix(in srgb, var(--hrc-color-text) 8%, transparent)}.ld-filters{display:grid;grid-template-columns:minmax(260px,2fr) repeat(5,minmax(140px,1fr)) auto;gap:10px;padding:14px;margin-bottom:14px}.ld-search{position:relative}.ld-search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ld-muted)}.ld-search input{padding-left:38px}.ld-filters input,.ld-filters select,.ld-dialog input,.ld-dialog select,.ld-dialog textarea{width:100%;min-height:44px;border:1px solid var(--ld-line);border-radius:11px;background:var(--ld-card);color:var(--ld-text);padding:10px 12px}.ld-dialog textarea{resize:vertical}.ld-bulk{position:sticky;top:74px;z-index:6;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 14px;margin-bottom:12px;border:1px solid color-mix(in srgb,var(--ld-brand) 30%,var(--ld-line));border-radius:14px;background:color-mix(in srgb,var(--ld-card) 90%,var(--hrc-color-brand-soft));backdrop-filter:blur(14px)}.ld-bulk strong{margin-right:auto}
.ld-list-panel{overflow:hidden}.ld-table-wrap{overflow:auto}.ld-table-wrap table{width:100%;border-collapse:collapse;min-width:1160px}.ld-table-wrap th{position:sticky;top:0;background:color-mix(in srgb,var(--ld-card) 94%,var(--hrc-color-border));z-index:1;color:var(--ld-muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;text-align:left}.ld-table-wrap th,.ld-table-wrap td{padding:14px;border-bottom:1px solid var(--ld-line);vertical-align:top}.ld-table-wrap tbody tr:hover{background:color-mix(in srgb,var(--ld-brand-2) 5%,transparent)}.ld-person{display:flex;gap:10px;min-width:220px}.ld-avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--hrc-color-brand-soft),var(--hrc-color-brand-soft));color:var(--hrc-color-success);display:grid;place-items:center;font-weight:900;flex:0 0 auto}.ld-cell strong,.ld-cell small{display:block}.ld-cell small{margin-top:4px;color:var(--ld-muted);line-height:1.35}.ld-tag{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800;background:var(--hrc-color-border);color:var(--hrc-color-text-soft)}.ld-tag.hot{background:var(--hrc-color-danger-soft);color:var(--hrc-color-danger)}.ld-tag.potential{background:var(--hrc-color-warning-soft);color:var(--hrc-color-warning)}.ld-tag.normal{background:var(--hrc-color-brand-soft);color:var(--hrc-color-brand)}.ld-tag.unsuitable{background:var(--hrc-color-surface-soft);color:var(--hrc-color-text-muted)}.ld-tag.status{background:var(--hrc-color-brand-soft);color:var(--hrc-color-success)}.ld-dup{color:var(--hrc-color-warning);font-size:12px;font-weight:800}.ld-row-actions{display:flex;gap:6px}.ld-icon-btn{width:44px;height:44px;border:1px solid var(--ld-line);border-radius:11px;background:var(--ld-card);color:var(--ld-text);cursor:pointer}.ld-icon-btn.danger{color:var(--ld-danger)}
.ld-pagination{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;color:var(--ld-muted)}.ld-pagination>div{display:flex;align-items:center;gap:10px}.ld-state{min-height:210px;display:flex;align-items:center;justify-content:center;gap:14px;padding:32px;text-align:left;color:var(--ld-muted)}.ld-state>i{font-size:28px}.ld-state strong{display:block;color:var(--ld-text);font-size:17px}.ld-state p{margin:5px 0}.ld-error{color:var(--hrc-color-danger)}.ld-loading{padding:18px}.ld-loading span{display:block;height:54px;margin:10px;border-radius:12px;background:linear-gradient(90deg,var(--hrc-color-border) 25%,var(--hrc-color-surface-soft) 50%,var(--hrc-color-border) 75%);background-size:200% 100%;animation:ld-shimmer 1.3s infinite}@keyframes ld-shimmer{to{background-position:-200% 0}}
.ld-dialog{width:min(760px,calc(100vw - 28px));max-height:calc(100vh - 28px);padding:0;overflow:auto;border:1px solid var(--ld-line);border-radius:18px;background:var(--ld-card);color:var(--ld-text);box-shadow:0 28px 80px color-mix(in srgb, var(--hrc-color-text) 8%, transparent);isolation:isolate}.ld-dialog::backdrop{background:color-mix(in srgb, var(--hrc-color-text) 8%, transparent);backdrop-filter:blur(5px)}.ld-dialog>form,.ld-dialog-body{padding:20px}.ld-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.ld-dialog h2{margin:4px 0 0;font-size:24px}.ld-dialog h3{margin:0 0 12px}.ld-dialog footer{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.ld-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.ld-form-grid label,.ld-detail label,.ld-owner-dialog label{display:block}.ld-form-grid label>span,.ld-detail label>span,.ld-owner-dialog label>span{display:block;margin-bottom:6px;font-size:13px;font-weight:750}.ld-span-2{grid-column:span 2}.ld-span-3{grid-column:1/-1}.ld-form-error{min-height:20px;margin:10px 0 0;color:var(--hrc-color-danger);font-weight:700}.ld-dialog[data-editor]{width:min(1080px,calc(100vw - 32px));overflow:hidden}.ld-dialog[data-editor]>form{display:flex;max-height:calc(100vh - 32px);padding:0;overflow:hidden;flex-direction:column}.ld-dialog[data-editor] header{flex:none;margin:0;padding:18px 24px 14px;border-bottom:1px solid var(--ld-line);background:color-mix(in srgb,var(--ld-card) 96%,var(--hrc-color-brand-soft))}.ld-dialog[data-editor] .ld-form-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px;min-height:0;padding:18px 24px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.ld-dialog[data-editor] .ld-form-error{flex:none;margin:0;padding:6px 24px 0}.ld-dialog[data-editor] footer{flex:none;margin:0;padding:14px 24px 18px;border-top:1px solid var(--ld-line);background:color-mix(in srgb,var(--ld-card) 96%,var(--hrc-color-surface-soft))}.ld-detail{width:min(1050px,calc(100vw - 28px))}.ld-detail-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px}.ld-detail-grid>section,.ld-links{border:1px solid var(--ld-line);border-radius:14px;padding:16px}.ld-summary-list{display:grid;gap:10px}.ld-summary-list div{border-bottom:1px solid var(--ld-line);padding-bottom:8px}.ld-summary-list small,.ld-timeline small{display:block;color:var(--ld-muted)}.ld-summary-list strong{display:block;margin-top:3px}.ld-detail form{display:grid;gap:9px}.ld-timeline{max-height:360px;overflow:auto;margin-top:15px;padding-left:16px;border-left:2px solid var(--ld-line)}.ld-timeline article{position:relative;padding:0 0 16px 10px}.ld-timeline article:before{content:"";position:absolute;left:-21px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--ld-brand)}.ld-timeline p{margin:4px 0}.ld-links{margin-top:18px}.ld-links>div{display:flex;gap:9px;flex-wrap:wrap}.ld-import-help{padding:12px;border-radius:12px;background:color-mix(in srgb,var(--ld-brand-2) 8%,var(--ld-card))}.ld-drop{display:grid;place-items:center;gap:8px;min-height:150px;margin-top:14px;border:2px dashed var(--ld-line);border-radius:14px;cursor:pointer}.ld-drop i{font-size:34px;color:var(--hrc-color-success)}.ld-drop input{position:absolute;width:1px;height:1px;opacity:0}.ld-toasts{position:fixed;right:20px;bottom:20px;z-index:1000;display:grid;gap:8px}.ld-toast{max-width:360px;padding:13px 16px;border-radius:12px;background:var(--hrc-color-text);color:var(--hrc-color-surface);box-shadow:0 12px 30px color-mix(in srgb, var(--hrc-color-text) 8%, transparent)}
@media(max-width:1439px){.ld-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.ld-filters{grid-template-columns:repeat(4,minmax(0,1fr))}.ld-search{grid-column:span 2}}
@media(max-width:1023px){.ld-shell{padding:18px}.ld-hero{align-items:flex-start;flex-direction:column}.ld-hero-actions{width:100%}.ld-hero-actions .ld-btn{flex:1}.ld-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ld-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.ld-search{grid-column:span 2}.ld-detail-grid{grid-template-columns:1fr}.ld-dialog[data-editor] .ld-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ld-span-3{grid-column:1/-1}}
@media(max-width:767px){.ld-shell{padding:12px 12px 36px}.ld-hero{padding:20px 16px;border-radius:15px}.ld-hero h1{font-size:25px}.ld-hero-actions{display:grid;grid-template-columns:1fr 1fr}.ld-hero-actions [data-create]{grid-column:span 2}.ld-mode{width:100%}.ld-mode button{flex:1}.ld-kpis{gap:9px}.ld-kpi{min-height:112px;padding:13px}.ld-kpi strong{font-size:28px}.ld-filters{grid-template-columns:1fr;padding:11px}.ld-search{grid-column:auto}.ld-bulk{top:58px;align-items:stretch;flex-direction:column}.ld-bulk strong{margin:0}.ld-table-wrap{overflow:visible}.ld-table-wrap table,.ld-table-wrap thead,.ld-table-wrap tbody,.ld-table-wrap tr,.ld-table-wrap td{display:block;min-width:0}.ld-table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden}.ld-table-wrap tr{padding:13px;border-bottom:1px solid var(--ld-line)}.ld-table-wrap td{border:0;padding:6px 0}.ld-table-wrap td:first-child{float:right}.ld-table-wrap td:before{content:attr(data-label);display:block;color:var(--ld-muted);font-size:11px;font-weight:800;text-transform:uppercase}.ld-person{min-width:0}.ld-row-actions{justify-content:flex-end}.ld-pagination{align-items:flex-start;gap:10px;flex-direction:column}.ld-form-grid{grid-template-columns:1fr}.ld-span-2,.ld-span-3{grid-column:auto}.ld-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:14px}.ld-dialog>form,.ld-dialog-body{padding:15px}.ld-dialog h2{font-size:21px}.ld-dialog[data-editor]{width:calc(100vw - 12px)}.ld-dialog[data-editor]>form{max-height:calc(100dvh - 12px)}.ld-dialog[data-editor] header{padding:14px 15px 12px}.ld-dialog[data-editor] .ld-form-grid{grid-template-columns:1fr;padding:14px 15px}.ld-dialog[data-editor] .ld-form-error{padding:5px 15px 0}.ld-dialog[data-editor] footer{padding:12px 15px 14px}.ld-dialog[data-editor] footer .ld-btn{flex:1}.ld-inline{display:grid;grid-template-columns:1fr}.ld-links>div{display:grid}.ld-links .ld-btn{width:100%}}
html[data-qm-theme="dark"] .ld-dialog h2,html[data-qm-theme="dark"] .ld-dialog h3,html[data-qm-theme="dark"] .ld-dialog label>span{color:var(--ld-text)}html[data-qm-theme="dark"] .ld-dialog input:not([type="hidden"]),html[data-qm-theme="dark"] .ld-dialog select,html[data-qm-theme="dark"] .ld-dialog textarea,html[data-qm-theme="dark"] .ld-dialog .qm-select-control{border-color:var(--ld-line);background:var(--ui2030-surface-soft,var(--hrc-color-text));color:var(--ld-text)}html[data-qm-theme="dark"] body.qm-erp2050 .qm-content .ld-dialog .qm-select-control{border-color:var(--ld-line);background:var(--ui2030-surface-soft,var(--hrc-color-text));color:var(--ld-text);color-scheme:dark}html[data-qm-theme="dark"] .ld-dialog input::placeholder,html[data-qm-theme="dark"] .ld-dialog textarea::placeholder{color:var(--ld-muted)}
@media(prefers-reduced-motion:reduce){.ld-shell *{scroll-behavior:auto;transition:none;animation-duration:.01ms;animation-iteration-count:1}}

/* Native compact workspace composition. Existing ld-* names are behavior hooks
   owned by this registered domain contract, never a route-local adapter. */
[data-native-surface="labor-data"].ld-shell {
  box-sizing: border-box;
  width: min(100%, var(--hrc-page-max));
  max-width: var(--hrc-page-max);
  margin-inline: auto;
  padding: var(--hrc-space-5) var(--hrc-page-gutter) var(--hrc-space-10);
}

[data-native-surface="labor-data"] .ld-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, .72fr);
  align-items: center;
  min-height: 9.5rem;
  padding: var(--hrc-space-6);
  border-radius: var(--hrc-radius-xl);
  box-shadow: var(--hrc-shadow-xs);
}

[data-native-surface="labor-data"] .ld-hero h1 {
  margin: var(--hrc-space-2) 0 var(--hrc-space-1);
  font-size: clamp(32px, 2.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

[data-native-surface="labor-data"] .ld-hero-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hrc-space-2);
  padding: var(--hrc-space-3);
  border: var(--hrc-border-width) solid var(--hrc-color-border);
  border-radius: var(--hrc-radius-lg);
  background: color-mix(in srgb, var(--hrc-color-surface) 88%, transparent);
  box-shadow: var(--hrc-shadow-xs);
}

[data-native-surface="labor-data"] .ld-action-label {
  grid-column: 1 / -1;
  color: var(--hrc-color-text-muted);
  font-size: var(--hrc-text-xs);
  font-weight: 800;
}

[data-native-surface="labor-data"] .ld-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hrc-space-3);
}

[data-native-surface="labor-data"] .ld-kpi {
  min-width: 0;
  min-height: 7rem;
  padding: var(--hrc-space-4);
  border-radius: var(--hrc-radius-lg);
  box-shadow: var(--hrc-shadow-xs);
}

[data-native-surface="labor-data"] .ld-filters {
  grid-template-columns: minmax(16rem, 2fr) repeat(3, minmax(10rem, 1fr)) auto;
  align-items: end;
  gap: var(--hrc-space-3);
  padding: var(--hrc-space-4);
}

[data-native-surface="labor-data"] .ld-filter-field > span:first-child {
  display: block;
  margin-bottom: var(--hrc-space-1);
  color: var(--hrc-color-text-muted);
  font-size: var(--hrc-text-xs);
  font-weight: 750;
}

[data-native-surface="labor-data"] .ld-list-panel {
  border-radius: var(--hrc-radius-lg);
  box-shadow: var(--hrc-shadow-sm);
}

[data-native-surface="labor-data"] .ld-record-flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hrc-space-1);
  margin-top: var(--hrc-space-2);
}

[data-native-surface="labor-data"] .ld-progress,
[data-native-surface="labor-data"] .ld-record-flags .ld-dup {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding-inline: var(--hrc-space-2);
  border-radius: var(--hrc-radius-pill);
  font-size: var(--hrc-text-xs);
  font-weight: 750;
}

[data-native-surface="labor-data"] .ld-check-hit {
  display: inline-grid;
  width: var(--hrc-touch-target, 44px);
  min-width: var(--hrc-touch-target, 44px);
  height: var(--hrc-touch-target, 44px);
  place-items: center;
  cursor: pointer;
}

[data-native-surface="labor-data"] .ld-check-hit input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--hrc-color-brand);
}

[data-native-surface="labor-data"] .ld-check-hit:focus-within {
  border-radius: var(--hrc-radius-md);
  outline: 3px solid color-mix(in srgb, var(--hrc-color-brand) 35%, transparent);
  outline-offset: 1px;
}

[data-native-surface="labor-data"] .ld-import-dialog {
  width: min(60rem, calc(100vw - 28px));
}

[data-native-surface="labor-data"] .ld-import-result {
  display: grid;
  gap: var(--hrc-space-3);
  margin-top: var(--hrc-space-4);
}

[data-native-surface="labor-data"] .ld-import-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hrc-space-2);
}

[data-native-surface="labor-data"] .ld-import-summary > div {
  padding: var(--hrc-space-3);
  border: var(--hrc-border-width) solid var(--hrc-color-border);
  border-radius: var(--hrc-radius-md);
  background: var(--hrc-color-surface-soft);
}

[data-native-surface="labor-data"] .ld-import-summary small,
[data-native-surface="labor-data"] .ld-import-preview small {
  display: block;
  color: var(--hrc-color-text-muted);
}

[data-native-surface="labor-data"] .ld-import-summary strong {
  display: block;
  margin-top: var(--hrc-space-1);
  font-size: var(--hrc-text-xl);
}

[data-native-surface="labor-data"] .ld-import-preview {
  max-height: min(48vh, 30rem);
  overflow: auto;
  border: var(--hrc-border-width) solid var(--hrc-color-border);
  border-radius: var(--hrc-radius-lg);
}

[data-native-surface="labor-data"] .ld-import-preview table {
  width: 100%;
  border-collapse: collapse;
}

[data-native-surface="labor-data"] .ld-import-preview th,
[data-native-surface="labor-data"] .ld-import-preview td {
  padding: var(--hrc-space-3);
  border-bottom: var(--hrc-border-width) solid var(--hrc-color-border);
  text-align: left;
  vertical-align: top;
}

[data-native-surface="labor-data"] .ld-table-wrap {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

[data-native-surface="labor-data"] .ld-data-table {
  table-layout: fixed;
}

[data-native-surface="labor-data"] .ld-data-table th:first-child {
  width: 3.5rem;
}

[data-native-surface="labor-data"] .ld-data-table th:last-child {
  width: 8.5rem;
}

body.hrc-design-system-v1.hrc-native-presentation-route
[data-native-surface="labor-data"] :is(.ld-btn, .ld-icon-btn, .ld-mode button, .ld-kpi) {
  min-height: var(--hrc-control-height-lg);
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

body.hrc-design-system-v1.hrc-native-presentation-route
[data-native-surface="labor-data"] .ld-icon-btn {
  min-width: var(--hrc-control-height-lg);
}

@media (max-width: 1199px) {
  [data-native-surface="labor-data"] .ld-hero {
    grid-template-columns: 1fr;
  }

  [data-native-surface="labor-data"] .ld-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-native-surface="labor-data"] .ld-search {
    grid-column: span 2;
  }
}

@media (max-width: 1023px) {
  body.hrc-design-system-v1.hrc-native-presentation-route [data-native-surface="labor-data"] .ld-kpis,
  [data-native-surface="labor-data"] .ld-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  body.hrc-design-system-v1.hrc-native-presentation-route
  [data-native-surface="labor-data"] .ld-hero h1 {
    font-size: clamp(24px, 7vw, 30px);
  }
}

@media (max-width: 767px) {
  [data-native-surface="labor-data"].ld-shell {
    padding: var(--hrc-space-3) var(--hrc-page-gutter-mobile) var(--hrc-space-8);
  }

  [data-native-surface="labor-data"] .ld-hero {
    padding: var(--hrc-space-4);
    border-radius: var(--hrc-radius-lg);
  }

  [data-native-surface="labor-data"] .ld-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-native-surface="labor-data"] .ld-hero-actions [data-create] {
    grid-column: 1 / -1;
  }

  body.hrc-design-system-v1.hrc-native-presentation-route [data-native-surface="labor-data"] .ld-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hrc-space-2);
  }

  [data-native-surface="labor-data"] .ld-filters {
    grid-template-columns: 1fr;
  }

  [data-native-surface="labor-data"] .ld-search {
    grid-column: auto;
  }

  body.hrc-design-system-v1.hrc-native-presentation-route
  [data-native-surface="labor-data"] .ld-data-table td {
    border: 0;
  }

  [data-native-surface="labor-data"] .ld-import-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-native-surface="labor-data"] .ld-import-preview table,
  [data-native-surface="labor-data"] .ld-import-preview thead,
  [data-native-surface="labor-data"] .ld-import-preview tbody,
  [data-native-surface="labor-data"] .ld-import-preview tr,
  [data-native-surface="labor-data"] .ld-import-preview td {
    display: block;
  }

  [data-native-surface="labor-data"] .ld-import-preview thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}

@media (max-width: 359px) {
  [data-native-surface="labor-data"] .ld-hero-actions {
    grid-template-columns: 1fr;
  }

  [data-native-surface="labor-data"] .ld-hero-actions [data-create] {
    grid-column: auto;
  }
}

/* source: public/assets/design-officers-contract.css */
/*
 * Officers native presentation contract.
 *
 * This file extends Design Platform primitives for the Officers directory and
 * Officer 360 surfaces. It intentionally contains no business or permission
 * rules and uses only Design System tokens.
 */
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-page {
    width: 100%;
    min-width: 0;
    gap: var(--hrc-space-4);
}

/*
 * The shared legacy shell still carries 40/42px important control floors.
 * Keep the compatibility correction local to Officers so every real form,
 * modal and pagination action exposes the canonical 44px target.
 */
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-page
:where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not(.officer-file-input),
    select,
    button,
    .btn,
    .hrc-btn,
    .officer-tabs a,
    .officers-pagination a
) {
    min-height: var(--hrc-touch-target, 44px) !important;
    min-block-size: var(--hrc-touch-target, 44px) !important;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-page
:where(button, .btn, .hrc-btn, .officer-tabs a, .officers-pagination a) {
    min-width: var(--hrc-touch-target, 44px) !important;
    min-inline-size: var(--hrc-touch-target, 44px) !important;
}

/*
 * The unlayered legacy shell assigns every submit button a blue/teal gradient
 * whose white-text stop misses AA. Keep Officers primary actions on the
 * canonical CTA palette, which is validated as one foreground across all stops.
 */
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
.officers-page .hrc-btn--primary {
    border-color: transparent;
    background: linear-gradient(
        135deg,
        var(--hrc-action-cta-start),
        var(--hrc-action-cta-middle),
        var(--hrc-action-cta-end)
    ) !important;
    color: var(--hrc-action-cta-foreground) !important;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers:is(
    .is-dark,
    .dark,
    .dark-mode,
    .theme-dark,
    [data-theme="dark"],
    [data-bs-theme="dark"]
) .officers-page :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
) {
    border-color: var(--hrc-color-border) !important;
    background: var(--hrc-color-surface) !important;
    color: var(--hrc-color-text) !important;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers:is(
    .is-dark,
    .dark,
    .dark-mode,
    .theme-dark,
    [data-theme="dark"],
    [data-bs-theme="dark"]
) .officers-page .hrc-table thead th {
    color: var(--hrc-color-text-soft) !important;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers:is(
    .is-dark,
    .dark,
    .dark-mode,
    .theme-dark,
    [data-theme="dark"],
    [data-bs-theme="dark"]
) .officers-page label {
    color: var(--hrc-color-text-soft) !important;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
.officers-page :where(input, textarea)::placeholder {
    color: var(--hrc-color-text-muted) !important;
    opacity: 1;
}

/* Keep the keyboard indicator immediate and above legacy outline resets. */
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
.officers-page :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: var(--hrc-focus-width, 3px) solid var(--hrc-color-focus) !important;
    outline-offset: var(--hrc-focus-offset, 2px) !important;
    box-shadow: var(--hrc-focus-ring) !important;
    transition: none !important;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-field-error {
    display: block;
    margin-top: var(--hrc-space-1);
    color: var(--hrc-color-danger-text, var(--hrc-color-danger));
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
:where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--hrc-color-danger) !important;
    box-shadow: 0 0 0 var(--hrc-border-width) var(--hrc-color-danger) !important;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
.officers-page > :where(.officers-hero, .officers-filter, .officers-results, .officer-card, .officer-tabs) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    border-color: color-mix(in srgb, var(--hrc-color-brand) 20%, var(--hrc-color-border));
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--hrc-color-success) 12%, transparent), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--hrc-color-brand) 8%, var(--hrc-color-surface)), var(--hrc-color-surface));
    box-shadow: var(--hrc-shadow-md);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-hero-copy {
    display: grid;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-hero-copy h1,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-profile-heading h1 {
    margin: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-hero-copy p,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-profile-heading p {
    max-width: 68ch;
    margin: 0;
    color: var(--hrc-color-text-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-kpis {
    grid-column: 1 / -1;
    margin-top: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-kpis .hrc-kpi {
    min-height: 8rem;
    border-top: calc(var(--hrc-border-width) * 2) solid var(--hrc-kpi-accent, var(--hrc-color-brand));
    background: color-mix(in srgb, var(--hrc-kpi-accent, var(--hrc-color-brand)) 4%, var(--hrc-color-surface));
    box-shadow: var(--hrc-shadow-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-kpis .hrc-kpi:nth-child(1) {
    --hrc-kpi-accent: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-kpis .hrc-kpi:nth-child(2) {
    --hrc-kpi-accent: var(--hrc-color-success);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-kpis .hrc-kpi:nth-child(3) {
    --hrc-kpi-accent: var(--hrc-color-info);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-kpis .hrc-kpi:nth-child(4) {
    --hrc-kpi-accent: var(--hrc-color-warning);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: var(--hrc-space-4);
    border-color: color-mix(in srgb, var(--hrc-color-brand) 14%, var(--hrc-color-border));
    background: color-mix(in srgb, var(--hrc-color-brand) 2%, var(--hrc-color-surface));
    box-shadow: var(--hrc-shadow-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-filter > * {
    grid-column: 1 / -1;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-filter-header,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-filter-header {
    justify-content: space-between;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-filter-header > div {
    display: grid;
    gap: var(--hrc-space-1);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-filter-header :where(h2, p) {
    margin: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-filter-header p {
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
.officers-page :where(.hrc-empty, [role="alert"], [aria-busy="true"]) :where(p, span) {
    color: var(--hrc-color-text-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
.officers-results :where(.officers-empty, .officers-error, .officers-loading) {
    background: var(--hrc-color-surface-soft) !important;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-filter .hrc-filter-grid {
    grid-template-columns: minmax(14rem, 2fr) repeat(3, minmax(10rem, 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-filter-actions {
    grid-column: auto;
    justify-content: flex-end;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-results {
    padding: 0;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--hrc-color-brand) 12%, var(--hrc-color-border));
    box-shadow: var(--hrc-shadow-md);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-results-head {
    padding: var(--hrc-space-3) var(--hrc-space-4);
    border-bottom: var(--hrc-border-width) solid var(--hrc-color-border);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-results-copy {
    display: grid;
    gap: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-results-copy small {
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table {
    min-width: 80rem;
    table-layout: fixed;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table thead th {
    position: sticky;
    top: 0;
    z-index: var(--hrc-z-sticky);
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table th:nth-child(1) { width: 13rem; }
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table th:nth-child(2) { width: 7.5rem; }
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table th:nth-child(3) { width: 10rem; }
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table th:nth-child(4) { width: 10rem; }
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table th:nth-child(5) { width: 12rem; }
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table th:nth-child(6) { width: 7rem; }
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table th:nth-child(7) { width: 9rem; }
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table th:nth-child(8) { width: 7rem; }
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table th:nth-child(9) { width: 4.5rem; }

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table :is(th, td):last-child {
    position: sticky;
    right: 0;
    z-index: calc(var(--hrc-z-sticky) + 1);
    background: var(--hrc-color-surface);
    box-shadow: calc(var(--hrc-space-1) * -1) 0 var(--hrc-space-3) color-mix(in srgb, var(--hrc-color-text) 5%, transparent);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table thead th:last-child {
    z-index: calc(var(--hrc-z-sticky) + 2);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table tbody tr:nth-child(even) td:last-child {
    background: color-mix(in srgb, var(--hrc-color-brand) 2%, var(--hrc-color-surface));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table tbody tr:hover td:last-child {
    background: var(--hrc-color-brand-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table tbody tr {
    transition: background-color var(--hrc-motion-fast) var(--hrc-ease-standard);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table tbody tr:hover {
    background: var(--hrc-color-brand-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--hrc-color-brand) 2%, var(--hrc-color-surface));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table tbody tr:nth-child(even):hover {
    background: var(--hrc-color-brand-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table td {
    vertical-align: middle;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table td > small,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-person small {
    display: block;
    margin-top: var(--hrc-space-1);
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-person {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: start;
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-person > div,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-profile-heading {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-avatar {
    flex: 0 0 auto;
    overflow: hidden;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-cell-truncate {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers :where(.officer-type-stack, .officer-head-badges) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
:where(.officer-pill, .officer-status, .officer-head-badges .hrc-badge) {
    max-width: 100%;
    white-space: nowrap;
}

/*
 * Light semantic success/warning foregrounds are not readable on the matching
 * soft state surfaces in Dark mode. Keep Officer state text on the canonical
 * theme foreground and win the later unlayered legacy shell locally.
 */
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers:is(.dark, .dark-mode, .is-dark, .theme-dark, [data-theme="dark"])
.officers-page :where(.hrc-badge, .hrc-status, .hrc-tag):is([data-state="success"], [data-state="warning"]) {
    color: var(--hrc-color-text) !important;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-profile-progress {
    display: grid;
    gap: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-progress {
    width: 100%;
    height: var(--hrc-space-2);
    border: 0;
    border-radius: var(--hrc-radius-pill);
    appearance: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-progress::-webkit-progress-bar {
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-progress::-webkit-progress-value {
    border-radius: var(--hrc-radius-pill);
    background: linear-gradient(90deg, var(--hrc-color-brand), var(--hrc-color-success));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-progress::-moz-progress-bar {
    border-radius: var(--hrc-radius-pill);
    background: linear-gradient(90deg, var(--hrc-color-brand), var(--hrc-color-success));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-4);
    border-top: var(--hrc-border-width) solid var(--hrc-color-border);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-pagination .active {
    border-color: var(--hrc-color-brand);
    background: var(--hrc-color-brand);
    color: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-profile-head {
    align-items: center;
    border-color: color-mix(in srgb, var(--hrc-color-brand) 20%, var(--hrc-color-border));
    background:
        radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--hrc-color-success) 12%, transparent), transparent 32%),
        linear-gradient(135deg, color-mix(in srgb, var(--hrc-color-brand) 8%, var(--hrc-color-surface)), var(--hrc-color-surface));
    box-shadow: var(--hrc-shadow-md);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-profile-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: start;
    width: 100%;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-avatar-lg {
    width: 5rem;
    height: 5rem;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-tabs {
    position: sticky;
    top: var(--hrc-header-height);
    z-index: var(--hrc-z-sticky);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
    gap: var(--hrc-space-1);
    overflow: visible;
    padding: var(--hrc-space-2);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-lg);
    background: color-mix(in srgb, var(--hrc-color-surface) 90%, transparent);
    box-shadow: var(--hrc-shadow-md);
    backdrop-filter: blur(var(--hrc-blur-sm));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-tabs a {
    min-height: var(--hrc-touch-target);
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border-radius: var(--hrc-radius-sm);
    color: var(--hrc-color-text-soft);
    font-weight: var(--hrc-weight-semibold);
    line-height: var(--hrc-leading-tight);
    text-align: center;
    text-decoration: none;
    transition:
        background-color var(--hrc-motion-fast) var(--hrc-ease-standard),
        color var(--hrc-motion-fast) var(--hrc-ease-standard),
        box-shadow var(--hrc-motion-fast) var(--hrc-ease-standard);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-tabs a:hover {
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-tabs a.active,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-tabs a[aria-current="page"] {
    background: var(--hrc-color-brand-soft);
    color: var(--hrc-color-brand-hover);
    box-shadow: inset 0 0 0 var(--hrc-border-width) color-mix(in srgb, var(--hrc-color-brand) 24%, transparent);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-card {
    margin: 0;
    border-color: color-mix(in srgb, var(--hrc-color-brand) 10%, var(--hrc-color-border));
    box-shadow: var(--hrc-shadow-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-card > h2,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-card-head h2 {
    margin: 0;
    color: var(--hrc-color-text);
    font-size: var(--hrc-text-xl);
    line-height: var(--hrc-leading-tight);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-card-head {
    align-items: start;
    margin-bottom: var(--hrc-space-3);
    padding-bottom: var(--hrc-space-3);
    border-bottom: var(--hrc-border-width) solid var(--hrc-color-divider);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-card-head > div {
    display: grid;
    gap: var(--hrc-space-1);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-card-head p,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-help {
    margin: 0;
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
:where(.officer-dashboard, .officer-two-col, .officer-form, .officer-mini-form, .officer-identity-grid) {
    width: 100%;
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-form,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-mini-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-field-wide {
    grid-column: span 2;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
:where(.officer-list, .officer-chip-list, .officer-branch-list, .officer-zalo-results) {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-list {
    display: grid;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-list article {
    min-width: 0;
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface-soft);
    transition:
        border-color var(--hrc-motion-fast) var(--hrc-ease-standard),
        box-shadow var(--hrc-motion-fast) var(--hrc-ease-standard),
        transform var(--hrc-motion-fast) var(--hrc-ease-standard);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-list article:hover {
    border-color: color-mix(in srgb, var(--hrc-color-brand) 28%, var(--hrc-color-border));
    box-shadow: var(--hrc-shadow-sm);
    transform: translateY(-1px);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-list :where(strong, span, p) {
    overflow-wrap: anywhere;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-empty-inline {
    display: block;
    width: 100%;
    padding: var(--hrc-space-4);
    border: var(--hrc-border-width) dashed var(--hrc-color-border-strong);
    border-radius: var(--hrc-radius-sm);
    color: var(--hrc-color-text-muted);
    text-align: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--hrc-touch-target);
    min-height: var(--hrc-touch-target);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-readonly-field {
    display: flex;
    align-items: center;
    min-height: var(--hrc-control-height);
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-control-radius);
    background: var(--hrc-color-surface-soft);
    color: var(--hrc-color-text);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
.officer-chip-list > span:not(.officer-empty-inline, .hrc-tag) {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--hrc-touch-target) - var(--hrc-space-2));
    padding: var(--hrc-space-1) var(--hrc-space-3);
    border: var(--hrc-border-width) solid color-mix(in srgb, var(--hrc-color-info) 24%, var(--hrc-color-border));
    border-radius: var(--hrc-radius-pill);
    background: color-mix(in srgb, var(--hrc-color-info) 8%, var(--hrc-color-surface));
    color: var(--hrc-color-text);
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-company-scope-form {
    display: grid;
    gap: var(--hrc-space-3);
    margin-top: var(--hrc-space-4);
    padding-top: var(--hrc-space-4);
    border-top: var(--hrc-border-width) solid var(--hrc-color-divider);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-company-scope-form > label,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-form label,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-mini-form label {
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-multi-select {
    display: grid;
    gap: var(--hrc-space-1);
    max-height: 17.5rem;
    padding: var(--hrc-space-2);
    overflow: auto;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-multi-select label {
    display: flex;
    align-items: center;
    gap: var(--hrc-space-2);
    min-height: var(--hrc-touch-target);
    margin: 0;
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-color-surface);
    cursor: pointer;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-multi-select label:hover {
    background: var(--hrc-color-brand-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-multi-select label[hidden] {
    display: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-multi-select input {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--hrc-color-brand);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-inline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: var(--hrc-space-2);
    align-items: end;
    margin-block: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hrc-space-2);
    margin-top: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-inline-actions form {
    margin: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-branch-list {
    display: grid;
    gap: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-branch-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-branch-list > div > span {
    display: grid;
    gap: var(--hrc-space-1);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-branch-list small {
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-identity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hrc-space-4);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-dropzone {
    position: relative;
    min-width: 0;
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) dashed color-mix(in srgb, var(--hrc-color-brand) 44%, var(--hrc-color-border));
    border-radius: var(--hrc-radius-lg);
    background: color-mix(in srgb, var(--hrc-color-brand) 4%, var(--hrc-color-surface));
    outline: none;
    transition:
        border-color var(--hrc-motion-fast) var(--hrc-ease-standard),
        background-color var(--hrc-motion-fast) var(--hrc-ease-standard),
        box-shadow var(--hrc-motion-fast) var(--hrc-ease-standard);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-dropzone:focus-visible,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-dropzone.is-dragging {
    border-color: var(--hrc-color-brand);
    background: var(--hrc-color-brand-soft);
    box-shadow: var(--hrc-focus-ring);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-dropzone.is-deleting {
    opacity: var(--hrc-opacity-disabled);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-dropzone-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrc-space-2);
    margin-bottom: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-dropzone-head span {
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-image-preview {
    display: grid;
    place-items: center;
    min-height: 13.75rem;
    overflow: hidden;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-md);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text-muted);
    text-align: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-image-preview img {
    display: block;
    width: 100%;
    height: 13.75rem;
    object-fit: contain;
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-dropzone-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hrc-space-2);
    margin-top: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-dropzone-actions label {
    display: flex;
    align-items: center;
    gap: var(--hrc-space-1);
    margin: 0;
    color: var(--hrc-color-danger);
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-identity-form > .officer-form-actions {
    margin-top: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-ctv-summary .officer-metrics {
    margin-bottom: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-referral-link {
    display: grid;
    gap: var(--hrc-space-1);
    margin-top: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-ctv-table {
    min-width: 48rem;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-ctv-table th {
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-ctv-table td small {
    display: block;
    margin-top: var(--hrc-space-1);
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
:where(.officer-zalo-current, .officer-zalo-contact) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-lg);
    background: color-mix(in srgb, var(--hrc-color-info) 4%, var(--hrc-color-surface));
    box-shadow: var(--hrc-shadow-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-avatar {
    display: grid;
    place-items: center;
    width: var(--hrc-touch-target);
    height: var(--hrc-touch-target);
    overflow: hidden;
    border-radius: var(--hrc-radius-md);
    background: linear-gradient(135deg, var(--hrc-color-brand), var(--hrc-color-info));
    color: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
:where(.officer-zalo-current, .officer-zalo-contact) > div {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
:where(.officer-zalo-current, .officer-zalo-contact) small {
    display: block;
    margin-block: var(--hrc-space-1);
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hrc-space-2);
    margin-top: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-reason {
    flex-basis: 100%;
    color: var(--hrc-color-text-muted);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-toolbar {
    display: grid;
    gap: var(--hrc-space-2);
    margin-bottom: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-tabs button {
    min-height: calc(var(--hrc-touch-target) - var(--hrc-space-1));
    padding: var(--hrc-space-1) var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-color-surface);
    color: var(--hrc-color-text-soft);
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-tabs button.active {
    border-color: var(--hrc-color-brand);
    background: var(--hrc-color-brand);
    color: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-results {
    display: grid;
    gap: var(--hrc-space-2);
    margin-block: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .modal-backdrop.show {
    z-index: var(--hrc-z-modal);
    opacity: var(--hrc-opacity-overlay);
    pointer-events: auto;
    backdrop-filter: blur(var(--hrc-blur-sm));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
:is(#officerZaloDirectory, #officerZaloChat) {
    z-index: calc(var(--hrc-z-modal) + 10);
    pointer-events: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
:is(#officerZaloDirectory, #officerZaloChat).show,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
:is(#officerZaloDirectory, #officerZaloChat) :where(.modal-dialog, .modal-content) {
    pointer-events: auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
:is(#officerZaloDirectory, #officerZaloChat) .modal-content {
    overflow: hidden;
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-xl);
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-lg);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
:is(#officerZaloDirectory, #officerZaloChat) .modal-header,
body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
:is(#officerZaloDirectory, #officerZaloChat) .modal-footer {
    position: sticky;
    z-index: var(--hrc-z-sticky);
    border-color: var(--hrc-color-divider);
    background: color-mix(in srgb, var(--hrc-color-surface) 92%, transparent);
    backdrop-filter: blur(var(--hrc-blur-sm));
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
:is(#officerZaloDirectory, #officerZaloChat) .modal-header {
    top: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
:is(#officerZaloDirectory, #officerZaloChat) .modal-footer {
    bottom: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-modal .modal-dialog {
    width: min(42rem, 100%);
    max-width: none;
    height: 100%;
    margin: 0 0 0 auto;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-modal .modal-content {
    height: 100%;
    border-radius: var(--hrc-radius-xl) 0 0 var(--hrc-radius-xl);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-head > div {
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-head h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-body {
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: var(--hrc-space-3);
    background: var(--hrc-color-surface-soft);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-load-older {
    align-self: center;
    margin-bottom: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-state {
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-sm);
    text-align: center;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-messages {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: var(--hrc-space-2);
    overflow: auto;
    padding: var(--hrc-space-2);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-message {
    display: flex;
    max-width: 82%;
    flex-direction: column;
    align-self: flex-start;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-message.is-out {
    align-self: flex-end;
    align-items: flex-end;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-message.has-error > small {
    color: var(--hrc-color-danger);
    font-weight: var(--hrc-weight-semibold);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-bubble {
    max-width: 100%;
    padding: var(--hrc-space-2) var(--hrc-space-3);
    border: var(--hrc-border-width) solid var(--hrc-color-border);
    border-radius: var(--hrc-radius-lg) var(--hrc-radius-lg) var(--hrc-radius-lg) var(--hrc-radius-sm);
    background: var(--hrc-color-surface);
    box-shadow: var(--hrc-shadow-sm);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-message.is-out .officer-zalo-chat-bubble {
    border-color: transparent;
    border-radius: var(--hrc-radius-lg) var(--hrc-radius-lg) var(--hrc-radius-sm) var(--hrc-radius-lg);
    background: linear-gradient(135deg, var(--hrc-color-brand), var(--hrc-color-info));
    color: var(--hrc-color-surface);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-bubble p {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-message > small {
    margin-top: var(--hrc-space-1);
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-xs);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-attachment {
    display: flex;
    align-items: center;
    gap: var(--hrc-space-1);
    margin-top: var(--hrc-space-2);
    padding: var(--hrc-space-2);
    border: var(--hrc-border-width) solid color-mix(in srgb, var(--hrc-color-border) 70%, transparent);
    border-radius: var(--hrc-radius-md);
    background: color-mix(in srgb, var(--hrc-color-surface) 88%, transparent);
    color: var(--hrc-color-text);
    font-weight: var(--hrc-weight-semibold);
    overflow-wrap: anywhere;
    text-decoration: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-attachment.is-image {
    padding: var(--hrc-space-1);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-attachment img {
    display: block;
    max-width: 100%;
    max-height: 16.25rem;
    border-radius: var(--hrc-radius-sm);
    object-fit: contain;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--hrc-space-2);
    padding: var(--hrc-space-3);
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-compose textarea {
    grid-column: 1 / 2;
    resize: none;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
.officer-zalo-chat-compose > [data-zalo-chat-send] {
    grid-column: 2;
    grid-row: 2;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-tools {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: var(--hrc-space-1);
    min-width: 0;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-tools span {
    min-width: 0;
    overflow: hidden;
    color: var(--hrc-color-text-muted);
    font-size: var(--hrc-text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-send-state {
    grid-column: 1 / -1;
    color: var(--hrc-color-text-muted);
}

@media (max-width: 1199.98px) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-filter .hrc-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-form,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-mini-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-hero,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-filter .hrc-filter-grid,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-two-col,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-form,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-mini-form {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-filter-actions,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-field-wide {
        grid-column: auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-results {
        padding: var(--hrc-space-3);
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-results-head {
        margin: calc(var(--hrc-space-3) * -1) calc(var(--hrc-space-3) * -1) 0;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-sm);
        background: var(--hrc-color-surface);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table {
        min-width: 100%;
        table-layout: auto;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table tbody {
        display: grid;
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
        padding: 0;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-lg);
        background: var(--hrc-color-surface);
        box-shadow: var(--hrc-shadow-sm);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table td {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: var(--hrc-space-1);
        min-width: 100%;
        width: 100%;
        max-width: none;
        padding: var(--hrc-space-3);
        border: 0;
        border-bottom: var(--hrc-border-width) solid var(--hrc-color-divider);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table td::before {
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-semibold);
        letter-spacing: var(--hrc-tracking-eyebrow);
        line-height: var(--hrc-leading-tight);
        text-transform: uppercase;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table td:first-child,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table td:last-child,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table td[colspan] {
        grid-column: 1 / -1;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-table td:last-child {
        position: static;
        justify-items: end;
        border-bottom: 0;
        background: var(--hrc-color-surface);
        box-shadow: none;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-cell-truncate {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-profile-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-avatar-lg {
        width: 4rem;
        height: 4rem;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-tabs {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-inline-form {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-identity-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-branch-list > div,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-dropzone-actions {
        align-items: stretch;
        flex-direction: column;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
    :where(.officer-zalo-current, .officer-zalo-contact) {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
    :where(.officer-zalo-current, .officer-zalo-contact) > .hrc-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-modal .modal-dialog {
        width: 100%;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-zalo-chat-modal .modal-content {
        border-radius: 0;
    }
}

@media (max-width: 390px) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-kpis .hrc-kpi {
        min-height: 0;
        padding: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officers-kpis .hrc-kpi__value {
        font-size: var(--hrc-text-xl);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
    :where(.officer-pill, .officer-status, .officer-head-badges .hrc-badge) {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
    .officers-page,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
    .officers-page *,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
    .officers-page *::before,
    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers
    .officers-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }

    body.hrc-design-system-v1.hrc-native-presentation-route.hrc-module-officers .officer-list article:hover {
        transform: none;
    }
}