/* ========================================================================== */
/* HR Reference UI                                                            */
/* A single, quiet product skin inspired by the supplied modular dashboard.   */
/* Colour is reserved for meaning, icons, progress and primary actions.        */
/* ========================================================================== */

:root {
  --ref-blue: #455ddc;
  --ref-pink: #f73463;
  --ref-purple: #9646ef;
  --ref-orange: #ff862e;
  --ref-mint: #43d1a7;
  --ref-slate-900: #222631;
  --ref-slate-800: #2f374c;
  --ref-slate-500: #727c94;
  --ref-slate-300: #a0a9c0;
  --ui-module-accent: var(--ref-blue);
  --ui-module-accent-2: var(--ref-mint);
  --ui-action-ink: #ffffff;
  --ui-card-accent: var(--ui-module-accent);
  --chart-1: var(--ref-blue);
  --chart-2: var(--ref-mint);
  --chart-3: var(--ref-orange);
  --chart-4: var(--ref-purple);
  --chart-5: var(--ref-pink);
  --chart-6: #35a9e8;
}

body[data-primary="#6366f1"] {
  --primary: var(--ref-blue);
  --primary-hover: #344bc8;
  --primary-light: #7184ed;
  --primary-subtle: rgba(69, 93, 220, .14);
  --secondary: #1eae87;
  --secondary-hover: #16896c;
  --secondary-light: var(--ref-mint);
  --glow: 0 7px 18px rgba(69, 93, 220, .2);
}

html[data-theme="dark"],
body[data-theme="dark"],
html[data-theme="dark"] body[data-ui-generation="4"],
body[data-ui-generation="4"][data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #15181f;
  --bg-surface: #1b1f28;
  --bg-card: #222631;
  --bg-elevated: #2a3040;
  --bg-soft: #1e222c;
  --bg-hover: #2d3341;
  --bg-active: #343c50;
  --control-bg: #1b1f28;
  --control-border: #3a4255;
  --text-primary: #f5f7fb;
  --text-secondary: #c6ccd8;
  --text-muted: #929bb0;
  --border: #343a49;
  --border-light: #41495c;
  --table-stripe: #1f232d;
  --surface-highlight: #303749;
  --success: #43d1a7;
  --success-subtle: rgba(67, 209, 167, .13);
  --warning: #ffad5c;
  --warning-subtle: rgba(255, 134, 46, .13);
  --danger: #ff6484;
  --danger-subtle: rgba(247, 52, 99, .14);
  --info: #7184ed;
  --info-subtle: rgba(69, 93, 220, .15);
  --purple: #b77af5;
  --purple-subtle: rgba(150, 70, 239, .14);
  --cyan: #52c7e8;
  --cyan-subtle: rgba(82, 199, 232, .13);
  --orange: #ff9a50;
  --orange-subtle: rgba(255, 134, 46, .13);
  --pink: #ff6f94;
  --pink-subtle: rgba(247, 52, 99, .13);
  --md-surface-1: var(--bg-card);
  --md-surface-2: var(--bg-elevated);
  --md-surface-3: var(--surface-highlight);
  --md-on-surface: var(--text-primary);
  --md-on-muted: var(--text-muted);
  --md-outline: var(--border);
  --md-shadow-1: 0 2px 4px rgba(0, 0, 0, .16), 0 8px 18px rgba(0, 0, 0, .1);
  --md-shadow-2: 0 5px 12px rgba(0, 0, 0, .2), 0 16px 32px rgba(0, 0, 0, .13);
  --md-shadow-3: 0 12px 28px rgba(0, 0, 0, .28), 0 28px 56px rgba(0, 0, 0, .18);
  --shadow: var(--md-shadow-1);
  --shadow-lg: var(--md-shadow-2);
  --shadow-xl: var(--md-shadow-3);
  --surface-shadow: var(--md-shadow-1);
  --surface-shadow-lg: var(--md-shadow-3);
}

html[data-theme="light"],
body[data-theme="light"],
html[data-theme="light"] body[data-ui-generation="4"],
body[data-ui-generation="4"][data-theme="light"] {
  color-scheme: light;
  --bg-base: #f1f3f7;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-elevated: #f7f8fb;
  --bg-soft: #eceff5;
  --bg-hover: #f0f3f8;
  --bg-active: #e6eaf3;
  --control-bg: #ffffff;
  --control-border: #cbd2df;
  --text-primary: #202633;
  --text-secondary: #4f5a6d;
  --text-muted: #667289;
  --border: #d9dee8;
  --border-light: #c8cfdd;
  --table-stripe: #fafbfc;
  --surface-highlight: #e9edf4;
  --success: #087e63;
  --success-subtle: #e4f7f1;
  --warning: #aa570b;
  --warning-subtle: #fff0df;
  --danger: #c82b50;
  --danger-subtle: #ffe7ed;
  --info: #344fc9;
  --info-subtle: #e9edff;
  --purple: #7935c7;
  --purple-subtle: #f1e8fc;
  --cyan: #167d9b;
  --cyan-subtle: #e3f5fa;
  --orange: #bd5a0d;
  --orange-subtle: #ffeddf;
  --pink: #bd2b55;
  --pink-subtle: #ffe8ee;
  --md-surface-1: var(--bg-card);
  --md-surface-2: var(--bg-elevated);
  --md-surface-3: var(--surface-highlight);
  --md-on-surface: var(--text-primary);
  --md-on-muted: var(--text-muted);
  --md-outline: var(--border);
  --md-shadow-1: 0 2px 5px rgba(35, 43, 62, .055), 0 8px 20px rgba(35, 43, 62, .045);
  --md-shadow-2: 0 5px 12px rgba(35, 43, 62, .075), 0 16px 34px rgba(35, 43, 62, .065);
  --md-shadow-3: 0 12px 28px rgba(35, 43, 62, .11), 0 28px 58px rgba(35, 43, 62, .09);
  --shadow: var(--md-shadow-1);
  --shadow-lg: var(--md-shadow-2);
  --shadow-xl: var(--md-shadow-3);
  --surface-shadow: var(--md-shadow-1);
  --surface-shadow-lg: var(--md-shadow-3);
}

body[data-ui-module="dashboard"] { --ui-module-accent: var(--ref-blue); --ui-module-accent-2: var(--ref-mint); }
body[data-ui-module="employees"] { --ui-module-accent: var(--ref-mint); --ui-module-accent-2: var(--ref-blue); --ui-action-ink: #15181f; }
body[data-ui-module="branches"], body[data-ui-module="orgchart"] { --ui-module-accent: var(--ref-purple); --ui-module-accent-2: var(--ref-mint); }
body[data-ui-module="attendance"], body[data-ui-module="attendance_exemptions"], body[data-ui-module="shifts"] { --ui-module-accent: var(--ref-orange); --ui-module-accent-2: var(--ref-blue); --ui-action-ink: #15181f; }
body[data-ui-module="payroll"], body[data-ui-module="adjustments"], body[data-ui-module="company_expenses"], body[data-ui-module="tax_invoices"], body[data-ui-module="sales_targets"] { --ui-module-accent: var(--ref-mint); --ui-module-accent-2: var(--ref-blue); --ui-action-ink: #15181f; }
body[data-ui-module="violations"] { --ui-module-accent: var(--ref-pink); --ui-module-accent-2: var(--ref-orange); --ui-action-ink: #15181f; }
body[data-ui-module="kpi"], body[data-ui-module="evaluations"], body[data-ui-module="people_intelligence"] { --ui-module-accent: var(--ref-purple); --ui-module-accent-2: var(--ref-blue); }
body[data-ui-module="reports"], body[data-ui-module="import_export"] { --ui-module-accent: var(--ref-blue); --ui-module-accent-2: var(--ref-mint); }
body[data-ui-module="documents"], body[data-ui-module="signing"], body[data-ui-module="contracts"], body[data-ui-module="licenses"], body[data-ui-module="rent_contracts"] { --ui-module-accent: var(--ref-purple); --ui-module-accent-2: var(--ref-orange); }
body[data-ui-module="assets"], body[data-ui-module="custodies"] { --ui-module-accent: var(--ref-mint); --ui-module-accent-2: var(--ref-orange); --ui-action-ink: #15181f; }
body[data-ui-module="clients"] { --ui-module-accent: var(--ref-blue); --ui-module-accent-2: var(--ref-pink); }
body[data-ui-module="notifications"] { --ui-module-accent: var(--ref-pink); --ui-module-accent-2: var(--ref-purple); --ui-action-ink: #15181f; }
body[data-ui-module="settings"] { --ui-module-accent: var(--ref-blue); --ui-module-accent-2: var(--ref-purple); }
body[data-ui-module="profile"], body[data-ui-module="portal"], body[data-ui-module="portal-login"] { --ui-module-accent: var(--ref-mint); --ui-module-accent-2: var(--ref-blue); --ui-action-ink: #15181f; }

@media screen {
  body[data-ui-generation="4"] {
    --radius-sm: 7px;
    --radius: 9px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    background: var(--bg-base) !important;
    color: var(--text-primary) !important;
  }

  /* Product shell */
  body[data-ui-generation="4"] .sidebar {
    background: var(--bg-surface) !important;
    border-inline-end: 1px solid var(--border) !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"] .sidebar::before,
  body[data-ui-generation="4"] .sidebar::after { display: none !important; }
  body[data-ui-generation="4"] .sidebar-logo {
    background: var(--bg-surface) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"] .sidebar-logo-icon,
  body[data-ui-generation="4"] .sidebar-logo img,
  body[data-ui-generation="4"] .user-avatar {
    background: var(--ui-module-accent) !important;
    color: var(--ui-action-ink) !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"] .nav-group-blue,
  body[data-ui-generation="4"] .nav-group-indigo { --grp-rgb: 69, 93, 220; --grp-hex: #7184ed; }
  body[data-ui-generation="4"] .nav-group-green,
  body[data-ui-generation="4"] .nav-group-teal { --grp-rgb: 67, 209, 167; --grp-hex: #43d1a7; }
  body[data-ui-generation="4"] .nav-group-orange { --grp-rgb: 255, 134, 46; --grp-hex: #ff9a50; }
  body[data-ui-generation="4"] .nav-group-purple { --grp-rgb: 150, 70, 239; --grp-hex: #b77af5; }
  body[data-ui-generation="4"] .nav-group-pink { --grp-rgb: 247, 52, 99; --grp-hex: #ff6f94; }
  body[data-ui-generation="4"] .nav-group-gray { --grp-rgb: 114, 124, 148; --grp-hex: #a0a9c0; }
  body[data-ui-generation="4"] .nav-group-toggle { border: 1px solid transparent !important; }
  body[data-ui-generation="4"] .nav-group-colored .nav-group-icon {
    background: rgba(var(--grp-rgb), .11) !important;
    color: var(--grp-hex) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"] .nav-group-toggle:hover,
  body[data-ui-generation="4"] .nav-group-colored.open > .nav-group-toggle {
    background: rgba(var(--grp-rgb), .065) !important;
    border-color: rgba(var(--grp-rgb), .13) !important;
  }
  body[data-ui-generation="4"] .nav-item.active,
  body[data-ui-generation="4"] .nav-group-colored .nav-item.active {
    background: rgba(var(--grp-rgb), .1) !important;
    color: var(--grp-hex) !important;
    border-color: rgba(var(--grp-rgb), .14) !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"] .nav-item.active::before { background: var(--grp-hex) !important; }

  body[data-ui-generation="4"] .topbar {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"] .topbar::after { display: none !important; }
  body[data-ui-generation="4"] :is(.topbar-toggle, .topbar-btn, .lang-toggle) {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"] :is(.topbar-toggle, .topbar-btn, .lang-toggle):hover {
    background: var(--bg-hover) !important;
    border-color: var(--border-light) !important;
    color: var(--ui-module-accent) !important;
    transform: none !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"] .topbar-search input {
    background: var(--control-bg) !important;
    border-color: var(--control-border) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
  }

  /* Page identity */
  body[data-ui-generation="4"] .page-content > .page-header {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"] .page-content > .page-header::before {
    width: 4px !important;
    background: var(--ui-module-accent) !important;
  }
  body[data-ui-generation="4"] .page-content > .page-header::after { display: none !important; content: none !important; }
  body[data-ui-generation="4"] .page-title:not(:has(.ui-title-icon, svg))::before,
  body[data-ui-generation="4"] .page-header h1:not(:has(.ui-title-icon, svg))::before,
  body[data-ui-generation="4"] .page-header h2:not(:has(.ui-title-icon, svg))::before,
  body[data-ui-generation="4"] .ui-title-icon {
    background: color-mix(in srgb, var(--ui-module-accent) 14%, var(--bg-elevated)) !important;
    color: var(--ui-module-accent) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"] :is(.page-title, .page-header h1, .page-header h2) { color: var(--text-primary) !important; }
  body[data-ui-generation="4"] :is(.page-subtitle, .page-header p) { color: var(--text-muted) !important; }
  body[data-ui-generation="4"][data-ui-module="dashboard"] .page-content > .page-header,
  html[data-theme="dark"] body[data-ui-generation="4"][data-ui-module="dashboard"] .page-content > .page-header {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"][data-ui-module="dashboard"] .page-content > .page-header :is(.page-title, h1, h2) { color: var(--text-primary) !important; }
  body[data-ui-generation="4"][data-ui-module="dashboard"] .page-content > .page-header :is(.page-subtitle, p) { color: var(--text-muted) !important; }

  /* Solid modular surfaces */
  body[data-ui-generation="4"] :is(.card, .section-card, .profile-card, .glass-pane, .prem-stat,
    .prem-filter, .filter-bar, .filter-panel, [class*="-filter-panel"], .table-wrapper,
    .table-responsive, .modal-content, .dropdown-menu, .toast, .p-card) {
    background-color: var(--bg-card) !important;
    background-image: none !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"] :is(.card, .section-card, .profile-card, .glass-pane, .prem-stat):hover {
    border-color: var(--border-light) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--md-shadow-1) !important;
  }
  body[data-ui-generation="4"] :is(.card-header, .card-footer, .glass-pane-header, .modal-header, .modal-footer) {
    background: var(--bg-elevated) !important;
    border-color: var(--border) !important;
  }
  body[data-ui-generation="4"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid, .prem-stats, .kpi-grid, .db-kpis, .fr-stats, .bi-kpis) > :nth-child(5n + 1) { --ui-card-accent: var(--ref-blue); }
  body[data-ui-generation="4"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid, .prem-stats, .kpi-grid, .db-kpis, .fr-stats, .bi-kpis) > :nth-child(5n + 2) { --ui-card-accent: var(--ref-mint); }
  body[data-ui-generation="4"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid, .prem-stats, .kpi-grid, .db-kpis, .fr-stats, .bi-kpis) > :nth-child(5n + 3) { --ui-card-accent: var(--ref-orange); }
  body[data-ui-generation="4"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid, .prem-stats, .kpi-grid, .db-kpis, .fr-stats, .bi-kpis) > :nth-child(5n + 4) { --ui-card-accent: var(--ref-purple); }
  body[data-ui-generation="4"] :is(.grid-2, .grid-3, .grid-4, .grid-auto, .stats-grid, .prem-stats, .kpi-grid, .db-kpis, .fr-stats, .bi-kpis) > :nth-child(5n) { --ui-card-accent: var(--ref-pink); }
  body[data-ui-generation="4"] :is(.stats-grid, .prem-stats, .kpi-grid, .db-kpis, .fr-stats, .bi-kpis) > * {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-block-start: 1px solid var(--border) !important;
  }
  body[data-ui-generation="4"] :is(.stat-icon, .md3-stat-icon, .prem-stat__icon, .kpi-icon, .fr-stat__icon, .bi-kpi__icon) {
    background: color-mix(in srgb, var(--ui-card-accent, var(--ui-module-accent)) 14%, var(--bg-elevated)) !important;
    color: var(--ui-card-accent, var(--ui-module-accent)) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Controls */
  body[data-ui-generation="4"] :is(.form-control, .form-select, textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
    select, .ts-control, .select2-selection) {
    background: var(--control-bg) !important;
    border-color: var(--control-border) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"] :is(.form-control, .form-select, textarea, input, select, .ts-control):focus {
    border-color: var(--ui-module-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-module-accent) 15%, transparent) !important;
  }
  body[data-ui-generation="4"] ::placeholder { color: var(--text-muted) !important; opacity: .85 !important; }
  body[data-ui-generation="4"] :is(.ts-dropdown, .select2-dropdown, .dropdown-menu) {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--md-shadow-3) !important;
  }
  body[data-ui-generation="4"] .btn { box-shadow: none !important; transform: none !important; }
  body[data-ui-generation="4"] .btn-primary {
    background: var(--ui-module-accent) !important;
    border-color: var(--ui-module-accent) !important;
    color: var(--ui-action-ink) !important;
  }
  body[data-ui-generation="4"] .btn-primary:hover { filter: brightness(1.08) !important; }
  body[data-ui-generation="4"] .btn-success { background: #087e63 !important; border-color: #087e63 !important; color: #fff !important; }
  body[data-ui-generation="4"] .btn-danger { background: #db3158 !important; border-color: #db3158 !important; color: #fff !important; }
  body[data-ui-generation="4"] :is(.btn-secondary, .btn-outline, .btn-outline-secondary) {
    background: var(--bg-elevated) !important;
    border-color: var(--border-light) !important;
    color: var(--text-secondary) !important;
  }

  /* Data and state */
  body[data-ui-generation="4"] :is(.table-wrapper, .table-responsive) { overflow-x: auto; }
  body[data-ui-generation="4"] :is(.table, table.table) thead th {
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-light) !important;
  }
  body[data-ui-generation="4"] :is(.table, table.table) tbody td { color: var(--text-primary) !important; border-bottom-color: var(--border) !important; }
  body[data-ui-generation="4"] :is(.table, table.table) tbody tr:nth-child(even) td { background: var(--table-stripe) !important; }
  body[data-ui-generation="4"] :is(.table, table.table) tbody tr:hover td { background: var(--bg-hover) !important; }
  body[data-ui-generation="4"] :is(.tabs, .fr-tabs, .portal-tabs-nav) { background: var(--bg-elevated) !important; border-color: var(--border) !important; box-shadow: none !important; }
  body[data-ui-generation="4"] :is(.tab-btn.active, .fr-tabs a.active, .portal-tabs-nav .active) {
    background: var(--ui-module-accent) !important;
    color: var(--ui-action-ink) !important;
    border-color: var(--ui-module-accent) !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"] :is(.badge, [class*="status-badge"], [class$="-badge"], [class*="-badge "]) {
    width: auto !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"] :is(.badge-success, .alert-success) { background: var(--success-subtle) !important; color: var(--success) !important; }
  body[data-ui-generation="4"] :is(.badge-warning, .alert-warning) { background: var(--warning-subtle) !important; color: var(--warning) !important; }
  body[data-ui-generation="4"] :is(.badge-danger, .alert-danger, .alert-error) { background: var(--danger-subtle) !important; color: var(--danger) !important; }
  body[data-ui-generation="4"] :is(.badge-info, .alert-info) { background: var(--info-subtle) !important; color: var(--info) !important; }
  body[data-ui-generation="4"] :is(.progress, .progress-track) { background: var(--bg-elevated) !important; border-color: var(--border) !important; }
  body[data-ui-generation="4"] :is(.progress-bar, .progress-fill) { background: var(--ui-card-accent, var(--ui-module-accent)) !important; }

  /* Finance modules expose their own tokens. */
  body[data-ui-generation="4"] .finance-records.expenses {
    --fr-exp-surface: var(--bg-card);
    --fr-exp-surface-soft: var(--bg-soft);
    --fr-exp-surface-strong: var(--bg-elevated);
    --fr-exp-border: var(--border);
    --fr-exp-border-strong: var(--border-light);
    --fr-exp-ink: var(--text-primary);
    --fr-exp-muted: var(--text-muted);
    --fr-exp-shadow: none;
    --fr-accent: var(--ui-module-accent);
    --fr-accent-2: var(--ui-module-accent-2);
  }

  /* Employee directory: remove the repeated bright bars and heavy card lift. */
  body[data-ui-generation="4"][data-ui-module="employees"] .view-grid .emp-card,
  body[data-ui-generation="4"][data-ui-module="employees"] .workforce-employees-page .emp-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body[data-ui-generation="4"][data-ui-module="employees"] .view-grid .emp-card:hover,
  body[data-ui-generation="4"][data-ui-module="employees"] .workforce-employees-page .emp-card:hover {
    transform: translateY(-1px) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--md-shadow-1) !important;
  }
  body[data-ui-generation="4"][data-ui-module="employees"] .emp-card::before,
  body[data-ui-generation="4"][data-ui-module="employees"] .emp-card-accent {
    height: 3px !important;
    background: var(--ui-module-accent) !important;
  }
  body[data-ui-generation="4"][data-ui-module="employees"] .emp-card[data-status="on_leave"]::before,
  body[data-ui-generation="4"][data-ui-module="employees"] .emp-card[data-status="on_leave"] .emp-card-accent { background: var(--ref-orange) !important; }
  body[data-ui-generation="4"][data-ui-module="employees"] .emp-card[data-status="terminated"]::before,
  body[data-ui-generation="4"][data-ui-module="employees"] .emp-card[data-status="terminated"] .emp-card-accent { background: var(--ref-pink) !important; }
  body[data-ui-generation="4"][data-ui-module="employees"] .emp-avatar {
    background: color-mix(in srgb, var(--ui-module-accent) 78%, var(--ref-blue)) !important;
    color: #15181f !important;
    border-radius: 13px !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"][data-ui-module="employees"] .emp-quick-icon {
    background: color-mix(in srgb, var(--ui-module-accent) 12%, var(--bg-elevated)) !important;
    color: var(--ui-module-accent) !important;
  }
  body[data-ui-generation="4"][data-ui-module="employees"] .emp-badges-row {
    border: 0 !important;
    background: transparent !important;
  }
  body[data-ui-generation="4"][data-ui-module="employees"] .workforce-primary-action {
    background: var(--bg-elevated) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
  }
  body[data-ui-generation="4"][data-ui-module="employees"] .workforce-primary-action:hover {
    background: var(--ui-module-accent) !important;
    border-color: var(--ui-module-accent) !important;
    color: var(--ui-action-ink) !important;
  }

  /* Dashboard keeps its board character without large saturated banners. */
  body[data-ui-generation="4"][data-ui-module="dashboard"] .notes-section {
    background-color: var(--bg-card) !important;
    background-image: radial-gradient(color-mix(in srgb, var(--text-muted) 18%, transparent) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"][data-ui-module="dashboard"] .notes-header {
    background: var(--bg-elevated) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
  }
}

@media screen and (max-width: 768px) {
  body[data-ui-generation="4"] { background: var(--bg-base) !important; }
  body[data-ui-generation="4"] .topbar { background: var(--bg-surface) !important; }
  body[data-ui-generation="4"] .page-content > .page-header { border-radius: 12px !important; }
  body[data-ui-generation="4"] :is(.card, .section-card, .profile-card, .glass-pane, .prem-stat,
    .prem-filter, .filter-bar, .filter-panel, [class*="-filter-panel"], .table-wrapper, .table-responsive) {
    border-radius: 12px !important;
  }
  body[data-ui-generation="4"] :is(.card, .section-card, .profile-card, .glass-pane, .prem-stat):hover {
    transform: none !important;
    box-shadow: none !important;
  }
  body[data-ui-generation="4"][data-ui-module="employees"] .emp-container.view-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  body[data-ui-generation="4"][data-ui-module="employees"] .workforce-employees-page .emp-head { padding: 13px 13px 10px !important; }
  body[data-ui-generation="4"][data-ui-module="employees"] .workforce-employees-page .emp-quick-meta { margin-inline: 13px !important; }
  body[data-ui-generation="4"][data-ui-module="employees"] .workforce-card-actions { padding: 10px 13px 13px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui-generation="4"] *,
  body[data-ui-generation="4"] *::before,
  body[data-ui-generation="4"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}