/* Shared workspace layout. Loaded after the module and brand styles. */
:root {
  --layout-border: #e5ebf0;
  --layout-text: #283e50;
  --layout-muted: #71808e;
  --layout-bg: #f5f7fa;
  --layout-panel: #ffffff;
}
body { background: var(--layout-bg); color: var(--layout-text); }
.account-trigger { display: inline-flex; align-items: center; gap: 7px; color: var(--layout-text); }
.account-trigger:hover { color: #2f7bb2; }
.account-dialog-summary { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; }
.account-dialog-summary strong { font-size: 16px; }
.account-dialog-summary p { margin: 3px 0 0; }
.theme-settings-panel { margin-bottom: 20px; }
.theme-settings-panel .el-radio-button__inner { min-width: 86px; }
.bulk-import-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 12px; }
.bulk-import-actions .el-button + .el-button { margin-left: 0; }
.version-browser-heading, .version-browser-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.version-search-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 10px; }
.version-search-controls > .el-input { flex: 1 1 240px; }
.version-search-controls > .el-date-editor { flex: 1 1 300px; }
.version-quick-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.payroll-export-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.payroll-export-rules { margin-bottom: 18px; }
.payroll-export-rules .el-select { width: 100%; }
.payroll-export-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 12px; margin: 16px 0; }
.payroll-export-totals > div { background: var(--el-fill-color-light); padding: 14px; border: 1px solid var(--layout-border); border-radius: 10px; }
.payroll-export-totals span { display: block; color: var(--layout-muted); font-size: 12px; margin-bottom: 8px; }
.payroll-export-totals strong { color: var(--layout-text); font-variant-numeric: tabular-nums; font-size: 17px; }
.payroll-summary-ledger { margin-top: 20px; }
.payroll-summary-ledger > .quiet-note { padding: 0 20px; }
.payroll-export-filters .el-date-editor { width: 100%; }
@media (max-width: 760px) { .payroll-export-filters { grid-template-columns: minmax(0, 1fr); } }

html.hr-theme-dark, html.hr-theme-dark body {
  color-scheme: dark;
  --layout-bg: #111b26;
  --layout-panel: #1b2a39;
  --layout-border: #304456;
  --layout-text: #e6eef5;
  --layout-muted: #9eb0bf;
  --layout-accent: #8dccf3;
  --layout-raised: #203344;
  --layout-selected: #1f3b51;
  --layout-on-accent: #102232;
  --brand-blue: #8dccf3;
  --brand-blue-dark: #8dccf3;
  --brand-blue-soft: #1b3348;
  --brand-ink: #e6eef5;
  --brand-muted: #9eb0bf;
  --brand-line: #304456;
  --ink: #e6eef5;
  --muted: #9eb0bf;
  --green: #8dccf3;
  --line: #304456;
  --border: #304456;
  --el-color-primary: #8dccf3;
  --el-color-primary-rgb: 141, 204, 243;
  --el-color-primary-light-3: #365a74;
  --el-color-primary-light-5: #294c67;
  --el-color-primary-light-7: #213e56;
  --el-color-primary-light-8: #20394f;
  --el-color-primary-light-9: #1b3348;
  --el-color-primary-dark-2: #b4e2ff;
  --el-color-success: #7bcead;
  --el-color-success-light-3: #3b715d;
  --el-color-success-light-5: #2d5749;
  --el-color-success-light-7: #25483e;
  --el-color-success-light-8: #214036;
  --el-color-success-light-9: #1c3b34;
  --el-color-success-dark-2: #a6e3ca;
  --el-color-warning: #f0c27e;
  --el-color-warning-light-3: #78603d;
  --el-color-warning-light-5: #604c31;
  --el-color-warning-light-7: #50412d;
  --el-color-warning-light-8: #493b29;
  --el-color-warning-light-9: #413323;
  --el-color-warning-dark-2: #ffdaaa;
  --el-color-danger: #f3a0a6;
  --el-color-danger-light-3: #804c59;
  --el-color-danger-light-5: #623b47;
  --el-color-danger-light-7: #55343e;
  --el-color-danger-light-8: #4e303a;
  --el-color-danger-light-9: #482b35;
  --el-color-danger-dark-2: #ffc3c7;
  --el-color-error: var(--el-color-danger);
  --el-color-error-light-3: var(--el-color-danger-light-3);
  --el-color-error-light-5: var(--el-color-danger-light-5);
  --el-color-error-light-7: var(--el-color-danger-light-7);
  --el-color-error-light-8: var(--el-color-danger-light-8);
  --el-color-error-light-9: var(--el-color-danger-light-9);
  --el-color-error-dark-2: var(--el-color-danger-dark-2);
  --el-color-info: #b7c8d5;
  --el-color-info-light-3: #587182;
  --el-color-info-light-5: #415a6c;
  --el-color-info-light-7: #344c5f;
  --el-color-info-light-8: #2c4355;
  --el-color-info-light-9: #263b4a;
  --el-color-info-dark-2: #d2e0ea;
  background: var(--layout-bg);
  color: var(--layout-text);
  --el-bg-color: #1b2a39;
  --el-bg-color-page: #111b26;
  --el-bg-color-overlay: #203344;
  --el-text-color-primary: #e6eef5;
  --el-text-color-regular: #c5d2dc;
  --el-text-color-secondary: #9eb0bf;
  --el-text-color-placeholder: #9eb0bf;
  --el-text-color-disabled: #8298a8;
  --el-border-color: #304456;
  --el-border-color-light: #3a5063;
  --el-border-color-lighter: #304456;
  --el-border-color-extra-light: #2b3e50;
  --el-border-color-dark: #486074;
  --el-border-color-darker: #587185;
  --el-fill-color-blank: #1b2a39;
  --el-fill-color-light: #243849;
  --el-fill-color-lighter: #203344;
  --el-fill-color: #243849;
  --el-fill-color-dark: #30495d;
  --el-fill-color-darker: #3a566c;
  --el-fill-color-extra-light: #1f3040;
  --el-fill-color-empty: transparent;
  --el-disabled-bg-color: #1c2c3b;
  --el-disabled-text-color: #8298a8;
  --el-disabled-border-color: #304456;
  --el-mask-color: rgb(17 27 38 / 85%);
  --el-mask-color-extra-light: rgb(17 27 38 / 50%);
}
html.hr-theme-dark .app-shell { background: var(--layout-bg); color: var(--layout-text); }
html.hr-theme-dark .login-layout { background: var(--layout-bg); }
html.hr-theme-dark .login-intro { background: linear-gradient(145deg, #132a3b 0%, #102232 100%); }
html.hr-theme-dark .login-intro h1 { color: #e6eef5; }
html.hr-theme-dark .login-intro p, html.hr-theme-dark .intro-foot { color: #9eb0bf; }
html.hr-theme-dark .login-panel { background: #111b26; }
html.hr-theme-dark .login-card { background: var(--layout-panel); border-color: var(--layout-border); box-shadow: 0 16px 48px rgb(0 0 0 / 25%); }
html.hr-theme-dark .sidebar, html.hr-theme-dark .topbar { background: #162432; border-color: var(--layout-border); }
html.hr-theme-dark .sidebar .nav-button { color: #b7c8d5; }
html.hr-theme-dark .sidebar .nav-button:hover { background: #203547; color: #dcebf6; }
html.hr-theme-dark .sidebar .nav-button.active { color: #8dccf3; background: #1f3b51; }
html.hr-theme-dark .panel, html.hr-theme-dark .kpi, html.hr-theme-dark .directory-summary,
html.hr-theme-dark .history-event, html.hr-theme-dark .extra-filter-fields,
html.hr-theme-dark .el-dialog, html.hr-theme-dark .el-drawer { background: var(--layout-panel); color: var(--layout-text); border-color: var(--layout-border); }
html.hr-theme-dark .directory-summary strong, html.hr-theme-dark .history-event > strong { color: #e6eef5; }
html.hr-theme-dark .result-line, html.hr-theme-dark .attendance-kpis > div,
html.hr-theme-dark .employee-history > .history-explanation { background: #203344; border-color: var(--layout-border); }
html.hr-theme-dark .history-before { background: #263744; color: #b7c8d5; }
html.hr-theme-dark .history-after { background: #1e4057; color: #9dd7fa; }
html.hr-theme-dark .people-table .el-table, html.hr-theme-dark .diff-table .el-table,
html.hr-theme-dark .workspace .el-table { --el-table-bg-color: #1b2a39; --el-table-tr-bg-color: #1b2a39; --el-table-header-bg-color: #203344; --el-table-row-hover-bg-color: #243c4e; --el-table-text-color: #d5e1e9; --el-table-header-text-color: #a8bac8; --el-table-border-color: var(--layout-border); }
html.hr-theme-dark .el-input__wrapper, html.hr-theme-dark .el-textarea__inner { background: #203344; box-shadow: 0 0 0 1px var(--layout-border) inset; }
html.hr-theme-dark .el-input__inner, html.hr-theme-dark .el-textarea__inner { color: #e6eef5; }
html.hr-theme-dark .el-select-dropdown, html.hr-theme-dark .el-picker-panel { background: #203344; border-color: var(--layout-border); }
html.hr-theme-dark .el-select-dropdown__item, html.hr-theme-dark .el-picker-panel { color: #d5e1e9; }
html.hr-theme-dark .el-divider { border-color: var(--layout-border); }
html.hr-theme-dark .el-tabs__item, html.hr-theme-dark .el-form-item__label { color: #b7c8d5; }
html.hr-theme-dark .el-alert { --el-alert-bg-color: #203344; --el-alert-border-color: var(--layout-border); }
html.hr-theme-dark .panel, html.hr-theme-dark .kpi, html.hr-theme-dark .directory-summary,
html.hr-theme-dark .analytics-mapping-summary, html.hr-theme-dark .version-bar,
html.hr-theme-dark .snapshot-button.active, html.hr-theme-dark .child-dept,
html.hr-theme-dark .department-icon, html.hr-theme-dark .schedule-icon,
html.hr-theme-dark .section-number, html.hr-theme-dark .upload-symbol,
html.hr-theme-dark .import-upload-panel .el-upload-dragger,
html.hr-theme-dark .attendance-upload .el-upload-dragger,
html.hr-theme-dark .el-upload-dragger, html.hr-theme-dark .empty-state { background: var(--layout-panel); border-color: var(--layout-border); color: var(--layout-text); }
html.hr-theme-dark .el-card, html.hr-theme-dark .el-card__header, html.hr-theme-dark .el-card__body,
html.hr-theme-dark .el-popper, html.hr-theme-dark .el-popover, html.hr-theme-dark .el-dropdown-menu,
html.hr-theme-dark .el-message-box, html.hr-theme-dark .el-notification,
html.hr-theme-dark .el-picker-panel, html.hr-theme-dark .el-date-picker,
html.hr-theme-dark .el-time-panel, html.hr-theme-dark .el-autocomplete-suggestion { background: #203344; color: var(--layout-text); border-color: var(--layout-border); }
html.hr-theme-dark .el-table, html.hr-theme-dark .el-table__inner-wrapper,
html.hr-theme-dark .el-table__header-wrapper, html.hr-theme-dark .el-table__body-wrapper,
html.hr-theme-dark .el-table tr, html.hr-theme-dark .el-table th.el-table__cell,
html.hr-theme-dark .el-table td.el-table__cell { background: #1b2a39; color: #dbe7ef; border-color: var(--layout-border); }
html.hr-theme-dark .el-table th.el-table__cell { background: #203344; color: #b8c9d5; }
html.hr-theme-dark .el-table__body tr:hover > td.el-table__cell { background: #243c4e; }
html.hr-theme-dark .el-empty__description, html.hr-theme-dark .el-empty__description p,
html.hr-theme-dark .el-form-item__label, html.hr-theme-dark .el-checkbox__label,
html.hr-theme-dark .el-radio__label, html.hr-theme-dark .el-text, html.hr-theme-dark .muted,
html.hr-theme-dark .quiet-note, html.hr-theme-dark .form-hint, html.hr-theme-dark .cell-muted { color: #b7c8d5; }
html.hr-theme-dark .workspace h1, html.hr-theme-dark .workspace h2, html.hr-theme-dark .workspace h3,
html.hr-theme-dark .panel-heading h2, html.hr-theme-dark .list-top h2,
html.hr-theme-dark .directory-summary strong, html.hr-theme-dark .person-name,
html.hr-theme-dark .department-title p, html.hr-theme-dark .detail-grid dd { color: #e6eef5; }
html.hr-theme-dark .el-input__wrapper, html.hr-theme-dark .el-textarea__inner,
html.hr-theme-dark .el-select__wrapper, html.hr-theme-dark .el-date-editor.el-input__wrapper,
html.hr-theme-dark .el-input-number__decrease, html.hr-theme-dark .el-input-number__increase { background: #203344; border-color: var(--layout-border); color: #e6eef5; }
html.hr-theme-dark .el-input__inner::placeholder, html.hr-theme-dark .el-textarea__inner::placeholder { color: #8298a8; }
html.hr-theme-dark .el-select-dropdown__item:hover, html.hr-theme-dark .el-select-dropdown__item.is-hovering,
html.hr-theme-dark .el-dropdown-menu__item:hover { background: #2b4659; color: #fff; }
html.hr-theme-dark .el-upload-dragger:hover { border-color: #6aa9d2; background: #243c4e; }
html.hr-theme-dark .el-dialog__header, html.hr-theme-dark .el-dialog__body, html.hr-theme-dark .el-dialog__footer,
html.hr-theme-dark .el-drawer__header, html.hr-theme-dark .el-drawer__body { color: #e6eef5; border-color: var(--layout-border); }
html.hr-theme-dark .el-pagination button, html.hr-theme-dark .el-pager li { background: #203344; color: #b7c8d5; }
html.hr-theme-dark .el-pager li.is-active { color: #8dccf3; }
html.hr-theme-dark .extra-filters > summary { background: #203344; border-color: var(--layout-border); color: #b7c8d5; }
.app-shell { color: var(--layout-text); }
.sidebar { width: 216px; border-color: var(--layout-border); }
.sidebar .sidebar-brand { padding: 24px 24px 19px; gap: 11px; align-items: flex-start; }
.sidebar .brand-logo-sidebar { display: block; width: 142px; }
.sidebar .brand-symbol { display: none; }
.sidebar .sidebar-brand .brand-caption { display: block; text-align: left; }
.sidebar .brand-caption strong { font-size: 12px; font-weight: 400; letter-spacing: .5px; color: var(--layout-muted); }
.sidebar .brand-caption small { display: none; }
.sidebar .nav-links { display: flex; flex-direction: column; gap: 20px; padding: 10px 12px 20px; }
.nav-group { min-width: 0; }
.nav-group-title { margin: 0 0 7px; padding: 0 14px; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .5px; color: #8593a0; }
.nav-group-items { display: grid; gap: 3px; }
.sidebar .nav-button { width: 100%; min-height: 40px; padding: 9px 13px; gap: 11px; border-radius: 7px; font-size: 14px; line-height: 22px; font-weight: 400; color: #536474; white-space: nowrap; }
.sidebar .nav-button span { display: inline; }
.sidebar .nav-button svg { width: 18px; height: 18px; stroke-width: 1.65; opacity: .82; }
.sidebar .nav-button:hover { color: #245f8b; background: #f2f6fa; }
.sidebar .nav-button.active { color: #246b9e; background: #eaf3fa; box-shadow: inset 3px 0 #2f7bb2; font-weight: 600; }
.sidebar .nav-button.active svg { opacity: 1; }
.sidebar-foot { margin: auto 24px 18px; padding-top: 15px; font-size: 12px; border-color: var(--layout-border); }
.app-body { margin-left: 216px; }
.topbar { height: 60px; padding: 0 28px; border-color: var(--layout-border); }
.topbar-right { gap: 10px; }
.global-version-picker { display: inline-flex; align-items: center; gap: 7px; }
.global-version-label { color: var(--layout-muted); font-size: 12px; white-space: nowrap; }
.global-version-select { width: 210px !important; }
.global-version-select .el-input__wrapper { box-shadow: 0 0 0 1px #d8e4ec inset; }
.global-version-select .el-input__inner { font-size: 12px; }

.workspace { max-width: 1600px; padding: 24px 28px 36px; }
.page-heading { margin-bottom: 20px; gap: 18px; align-items: flex-start; }
.page-heading h1 { font-size: 24px; font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.page-heading p { font-size: 13px; line-height: 1.7; color: var(--layout-muted); margin-top: 6px; }
.workspace .eyebrow, .workspace .kpi-index { display: none; }
.heading-actions { flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.heading-actions .el-button + .el-button { margin-left: 0; }
.panel, .kpi { border-color: var(--layout-border); border-radius: 10px; box-shadow: none; }
.workspace h2 { font-size: 16px; line-height: 1.6; font-weight: 600; }
.workspace h3 { font-size: 14px; }
.panel-heading, .list-top { padding: 17px 20px; }
.panel-heading { border-color: var(--layout-border); }
.quiet-note { font-size: 12px; color: var(--layout-muted); line-height: 1.75; }
.sync-message { margin-bottom: 14px; }
.el-alert { line-height: 1.6; }
.el-alert__title { font-size: 13px; }
.kpis { gap: 14px; margin-bottom: 20px; }
.kpi { padding: 16px 18px; }
.kpi-value { font-size: 28px; }
.kpi-top, .kpi-caption, .kpi-value small { font-size: 12px; }
.directory-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); margin: 0 0 16px; padding: 15px 0; background: #fff; border: 1px solid var(--layout-border); border-radius: 10px; }
.directory-summary > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; padding: 0 20px; border-right: 1px solid var(--layout-border); }
.directory-summary > div:last-child { border-right: 0; }
.directory-summary > div > span { font-size: 12px; color: var(--layout-muted); }
.directory-summary strong { font-size: 22px; font-weight: 600; color: #273f52; line-height: 1.4; }
.directory-summary small { font-size: 12px; color: var(--layout-muted); }
.directory-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.directory-controls .organization-bar, .directory-controls .version-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0; margin: 0; border: 0; background: transparent; }
.directory-controls .version-select { width: 200px !important; }
.directory-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 16px; }
.directory-content { gap: 16px; }
.tree-panel { top: 16px; }
.tree-title { padding: 16px 16px 12px; }
.tree-search { padding: 0 12px 12px; }
.tree-panel .el-tree { font-size: 13px; --el-tree-node-content-height: 36px; }
.tree-count, .tree-foot { font-size: 12px; }
.tree-scroll { max-height: min(620px, 65vh); }
.list-top { padding-bottom: 12px; }
.list-count { font-size: 12px; color: var(--layout-muted); }
.toolbar { padding: 0 20px 16px; gap: 10px; }
.people-filters { justify-content: space-between; }
.people-search { max-width: 450px; min-width: 180px; }
.extra-filters { position: relative; flex-shrink: 0; }
.extra-filters > summary { cursor: pointer; border: 1px solid #d8e1e9; border-radius: 6px; padding: 5px 12px; font-size: 13px; line-height: 20px; background: #fff; color: #526475; }
.extra-filters[open] > summary { color: #246b9e; border-color: #9ebfd8; }
.extra-filter-fields { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: min(490px, 75vw); padding: 18px; border: 1px solid var(--layout-border); border-radius: 9px; background: #fff; box-shadow: 0 8px 28px rgb(35 60 80 / 12%); }
.extra-filter-fields .filter-select { width: 145px !important; }
.result-line { font-size: 12px; padding: 9px 20px; color: var(--layout-muted); background: #f8fafc; border-color: var(--layout-border); }
.people-table, .diff-table { padding: 0 12px; min-width: 0; }
.people-table .el-table, .diff-table .el-table, .workspace .el-table { font-size: 13px; --el-table-header-bg-color: #f7f9fb; --el-table-header-text-color: #748493; --el-table-border-color: #edf0f3; }
.people-table .el-table th.el-table__cell, .workspace .el-table th.el-table__cell { height: 42px; font-size: 12px; font-weight: 500; }
.people-table .el-table td.el-table__cell { padding: 11px 0; }
.person-name { font-size: 14px; font-weight: 500; }
.person-sub, .cell-muted, .contact-cell, .contact-cell small, .dept-tags .el-tag, .mapping-path { font-size: 12px; }
.person-cell { gap: 9px; }
.person-cell > div { min-width: 0; }
.contact-cell, .contact-cell small { overflow-wrap: anywhere; }
.dept-tags .el-tag { background: #f4f7fa; border-color: #e7edf2; }
.pagination { padding: 15px 20px; gap: 12px; flex-wrap: wrap; border-color: var(--layout-border); }
.pagination > .muted { font-size: 12px; }
.department-overview { padding: 20px; }
.department-figures { margin-top: 12px; padding-top: 12px; gap: 20px; flex-wrap: wrap; }
.department-figures strong { font-size: 20px; }
.child-departments { margin: 8px 0; gap: 8px; }
details.disclosure { margin-bottom: 16px; }
details.disclosure > summary { padding: 15px 20px; cursor: pointer; font-size: 14px; font-weight: 500; color: #425c70; line-height: 22px; }
details.disclosure > summary > span { margin-left: 12px; color: var(--layout-muted); font-size: 12px; font-weight: 400; }
details.disclosure > summary:focus-visible, .extra-filters > summary:focus-visible { outline: 2px solid #2f7bb2; outline-offset: 2px; }
details.disclosure[open] > summary { border-bottom: 1px solid var(--layout-border); }
.disclosure-body { padding: 16px 20px; }
.disclosure-body p + p { margin-top: 10px; }
.child-department-section { margin: 12px 0 0 !important; }
.child-department-section > summary { padding: 10px 0 !important; }
.settings-tabs { margin-bottom: 20px; }
.settings-tabs > .el-tabs__header { margin: 0; }
.settings-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.settings-layout > .settings-panel { max-width: none; }
.settings-panel { padding: 24px; }
.settings-panel p { margin: 8px 0 18px; line-height: 1.75; }
.settings-panel .form-hint { font-size: 12px; line-height: 1.7; }
.settings-panel .disclosure { border-top: 1px solid var(--layout-border); margin: 18px 0 0; }
.settings-panel .disclosure > summary { padding: 12px 0; }
.settings-panel .disclosure-body { padding: 8px 0 0; }
.settings-panel .disclosure-body p { margin: 6px 0 12px; }
.settings-panel .el-form-item { margin-bottom: 20px; }
.schedule-panel, .schedule-log { margin-bottom: 18px; }
.schedule-heading { gap: 14px; flex-wrap: wrap; }
.schedule-heading h2 { font-size: 18px; }
.schedule-form { gap: 24px; flex-wrap: wrap; }
.schedule-status { gap: 18px; }
.schedule-status span, .schedule-note, .timezone-note { font-size: 12px; }
.attendance-import .attendance-upload { border: 0; margin: 0; padding: 20px; gap: 20px; }
.attendance-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 16px; }
.attendance-detail-title { padding: 20px; flex-wrap: wrap; }
.attendance-downloads { flex-shrink: 1; justify-content: flex-start; }
.attendance-batches { max-height: 66vh; }
.attendance-batch { padding: 12px 10px; }
.attendance-batch strong { font-size: 13px; }
.attendance-batch span, .attendance-batch p { font-size: 12px; }
.attendance-kpis { gap: 10px; padding: 0 20px 18px; }
.attendance-kpis > div { padding: 13px 12px; border: 0; border-radius: 7px; background: #f7f9fb; }
.attendance-kpis strong { font-size: 24px; margin: 5px 0; }
.attendance-kpis span, .attendance-kpis small, .attendance-summary-note, .attendance-upload-hint { font-size: 12px; }
.attendance-results { padding: 0 20px 20px; margin-top: 16px; }
.attendance-filters .el-date-editor--daterange { width: 280px; max-width: 100%; flex-shrink: 0; }
.attendance-filters .el-input, .attendance-filters .el-select { max-width: 280px; }
.import-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
.import-layout .directory-content { gap: 16px; }
.import-layout .directory-content > details.disclosure { margin-bottom: 0; }
.import-upload-panel { padding: 20px; }
.import-upload-panel .section-number { display: none; }
.import-section-title { gap: 12px; flex-wrap: wrap; }
.import-section-title > .el-button { margin-left: auto; }
.import-template-choice { padding: 16px; margin-bottom: 18px; border: 1px solid var(--el-border-color-lighter); border-radius: 10px; background: var(--el-color-primary-light-9); }
.import-template-choice p { margin: 0 0 12px; color: var(--el-text-color-regular); font-size: 13px; line-height: 1.7; }
.import-template-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.import-template-actions .el-button + .el-button { margin-left: 0; }
.import-guide.disclosure { position: static; padding: 0; margin-top: 16px; }
.import-guide ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; margin: 0; }
.import-steps { padding: 18px; margin-bottom: 16px; }
.import-history .panel-heading { padding-top: 12px; padding-bottom: 12px; }
.import-history .people-table { padding-bottom: 12px; }
.snapshot-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 16px; }
.snapshot-button p, .snapshot-line, .change-badge, .analytics-note, .analytics-filter-note { font-size: 12px; }
.analytics-toolbar { gap: 16px; }
.analytics-card { padding: 20px; }
.analytics-mapping-summary { background: #fff; }
.analytics-card-title { gap: 10px; }
.trend-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; padding: 16px 20px; margin-bottom: 20px; }
.trend-controls > div:not(.el-date-editor) { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trend-control-label { color: #536474; font-size: 13px; white-space: nowrap; }
.trend-controls .el-radio-button__inner { padding: 8px 14px; font-size: 13px; font-weight: 400; }
.trend-controls .el-radio-button.is-active .el-radio-button__inner { background: #2f7bb2; border-color: #2f7bb2; }
.trend-controls .trend-preset { width: 150px; }
.trend-controls .el-date-editor { width: 285px; min-width: 240px; max-width: 100%; flex: 1 1 285px; }
.trend-controls .el-date-editor .el-range-input { font-size: 13px; }
.analytics-content > .el-alert { margin-bottom: 18px; }
.employee-detail-tabs { margin-top: 18px; }
.employee-detail-tabs .el-tabs__header { margin-bottom: 18px; }
.employee-detail-tabs .el-tabs__item { font-size: 14px; color: #536474; }
.employee-detail-tabs .el-tabs__item.is-active { color: #2f7bb2; font-weight: 600; }
.employee-detail-tabs .el-tabs__active-bar { background-color: #2f7bb2; }
.employee-history { min-width: 0; padding-bottom: 16px; }
.history-explanation { margin: 0 0 18px; color: #71808e; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.employee-history > .history-explanation { padding: 12px 14px; border-radius: 8px; background: #f3f7fa; }
.employee-history .el-timeline { padding-left: 6px; }
.employee-history .el-timeline-item { padding-bottom: 22px; }
.employee-history .el-timeline-item__timestamp { font-size: 12px; line-height: 1.7; color: #71808e; }
.employee-history .el-timeline-item__tail { border-color: #e1eaf1; }
.employee-history .el-timeline-item__node--primary { background-color: #2f7bb2; }
.history-event { padding: 14px 16px; border: 1px solid #e5ebf0; border-radius: 8px; background: #fff; }
.history-event > strong { display: block; color: #283e50; font-size: 14px; font-weight: 600; line-height: 1.7; overflow-wrap: anywhere; }
.history-event .history-explanation { margin: 6px 0 0; }
.history-field { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 4px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #edf1f5; font-size: 13px; line-height: 1.75; }
.history-field > span { grid-row: span 2; color: #536474; overflow-wrap: anywhere; }
.history-before, .history-after { min-width: 0; padding: 5px 9px; border-radius: 5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.history-before { color: #71808e; background: #f5f7f9; }
.history-after { color: #246b9e; background: #edf5fb; }
.history-event > .el-button { margin-top: 12px; font-size: 12px; }
.employee-history > .el-pagination { justify-content: center; padding-top: 8px; }
.payroll-ledger-heading { align-items: flex-start; gap: 16px; }
.payroll-ledger-heading .quiet-note { margin: 5px 0 0; max-width: 560px; }
.payroll-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-shrink: 0; }
.payroll-actions .el-button + .el-button { margin-left: 0; }
.payroll-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0 20px 18px; }
.payroll-filters > .el-input { width: 240px; }
.payroll-filters > .el-date-editor { width: 180px; }
.payroll-filters > .quiet-note { margin-left: auto; }
.payroll-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.payroll-net { color: #246b9e; font-weight: 600; }
.payroll-ledger .pagination { align-items: center; flex-wrap: wrap; gap: 12px; }
.payroll-ledger .pagination .quiet-note { max-width: 690px; }
.payroll-net-preview { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; margin: 6px 0 18px; border: 1px solid #dceaf4; border-radius: 8px; background: #f0f7fc; }
.payroll-net-preview span { color: #426680; font-size: 13px; }
.payroll-net-preview p { color: #71808e; font-size: 12px; margin: 5px 0 0; line-height: 1.7; }
.payroll-net-preview strong { color: #246b9e; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payroll-net-preview small { font-size: 13px; font-weight: 400; }
.payroll-dialog-actions, .payroll-type-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.payroll-dialog-actions .el-button + .el-button, .payroll-type-actions .el-button + .el-button { margin-left: 0; }
.payroll-legacy-confirm { height: auto; display: flex; align-items: flex-start; margin: 0 0 18px; }
.payroll-legacy-confirm .el-checkbox__input { margin-top: 3px; }
.payroll-legacy-confirm .el-checkbox__label { white-space: normal; line-height: 1.7; }
.payroll-type-note { margin: 0 0 18px; }
.payroll-type-editor { padding: 16px; margin-bottom: 20px; border: 1px solid #e5ebf0; border-radius: 8px; background: #f8fafc; }
.payroll-type-editor .el-form-item { margin-bottom: 14px; }
.permission-toolbar { flex-wrap: wrap; gap: 12px; }
.permission-toolbar p { margin: 0; }
.permission-config-dialog, .mapping-dialog, .el-dialog { max-width: calc(100vw - 32px); }
.el-drawer { max-width: 100vw; }
.el-dialog__body { overflow-wrap: anywhere; }
/* Module colors are explicit because the older module styles contain light-only
   literals. These rules also apply to dialogs and popovers teleported to body. */
html.hr-theme-dark .payroll-net { color: var(--layout-accent); }
html.hr-theme-dark .payroll-net-preview { background: var(--layout-selected); border-color: #365a74; }
html.hr-theme-dark .payroll-net-preview strong { color: var(--layout-accent); }
html.hr-theme-dark .payroll-net-preview span { color: var(--layout-text); }
html.hr-theme-dark .payroll-net-preview p { color: #b7c8d5; }
html.hr-theme-dark .payroll-type-editor,
html.hr-theme-dark .organization-bar,
html.hr-theme-dark .detail-dept,
html.hr-theme-dark .mapping-flow,
html.hr-theme-dark .mapping-summary > div,
html.hr-theme-dark .preview-summary > div,
html.hr-theme-dark .import-commit-bar,
html.hr-theme-dark .maintenance-hint,
html.hr-theme-dark .schedule-form,
html.hr-theme-dark .attendance-preserved-note { background: var(--layout-raised); color: var(--layout-text); border-color: var(--layout-border); }
html.hr-theme-dark .history-field { border-color: var(--layout-border); }
html.hr-theme-dark .history-field > span,
html.hr-theme-dark .trend-control-label,
html.hr-theme-dark .detail-grid dt,
html.hr-theme-dark .detail-dept p,
html.hr-theme-dark .mapping-flow small,
html.hr-theme-dark .mapping-path,
html.hr-theme-dark .mapping-auto-note,
html.hr-theme-dark .mapping-summary > div,
html.hr-theme-dark .organization-bar > span,
html.hr-theme-dark .history-explanation,
html.hr-theme-dark .employee-history .el-timeline-item__timestamp { color: var(--layout-muted); }
html.hr-theme-dark .employee-history .el-timeline-item__tail { border-color: var(--layout-border); }
html.hr-theme-dark .employee-history .el-timeline-item__node--primary { background-color: var(--layout-accent); }
html.hr-theme-dark .employee-detail-tabs .el-tabs__item { color: #b7c8d5; }
html.hr-theme-dark .employee-detail-tabs .el-tabs__item.is-active,
html.hr-theme-dark .employee-detail-tabs .el-tabs__item:hover { color: var(--layout-accent); }
html.hr-theme-dark .employee-detail-tabs .el-tabs__active-bar { background-color: var(--layout-accent); }
html.hr-theme-dark .kpi-value,
html.hr-theme-dark .department-figures strong,
html.hr-theme-dark .mapping-summary strong,
html.hr-theme-dark .permission-role-name,
html.hr-theme-dark .permission-editor-section h3,
html.hr-theme-dark .preview-summary strong,
html.hr-theme-dark .schedule-status strong { color: var(--layout-text); }
html.hr-theme-dark .kpi-top,
html.hr-theme-dark .contact-cell,
html.hr-theme-dark .department-figures,
html.hr-theme-dark .sidebar-foot,
html.hr-theme-dark .nav-group-title,
html.hr-theme-dark .scope-path,
html.hr-theme-dark .scope-path button,
html.hr-theme-dark .permission-scope,
html.hr-theme-dark .permission-editor-section p,
html.hr-theme-dark .permission-user-note,
html.hr-theme-dark .snapshot-summary p,
html.hr-theme-dark .change-field,
html.hr-theme-dark .change-arrow,
html.hr-theme-dark .overview-card p,
html.hr-theme-dark .import-section-title p,
html.hr-theme-dark .import-mode-row label,
html.hr-theme-dark .import-guide li,
html.hr-theme-dark .import-guide li strong,
html.hr-theme-dark .import-guide li p,
html.hr-theme-dark .import-upload-panel .el-upload-dragger p,
html.hr-theme-dark .preview-summary span,
html.hr-theme-dark .import-commit-bar p,
html.hr-theme-dark .result-summary,
html.hr-theme-dark .schedule-heading p,
html.hr-theme-dark .timezone-note,
html.hr-theme-dark .schedule-status span,
html.hr-theme-dark .schedule-note { color: var(--layout-muted); }
html.hr-theme-dark .import-row-error,
html.hr-theme-dark .change-before { color: var(--el-color-danger); }
html.hr-theme-dark .change-after,
html.hr-theme-dark .preview-summary .summary-success strong { color: var(--el-color-success); }
html.hr-theme-dark .preview-summary .summary-warning strong { color: var(--el-color-warning); }
html.hr-theme-dark .preview-summary .summary-danger { background: var(--el-color-danger-light-9); }
html.hr-theme-dark .preview-summary .summary-danger strong { color: var(--el-color-danger); }
html.hr-theme-dark .preview-summary .summary-info strong { color: var(--el-color-info); }
html.hr-theme-dark details.disclosure > summary { color: var(--layout-text); }
html.hr-theme-dark .user-avatar,
html.hr-theme-dark .person-avatar,
html.hr-theme-dark .tree-count,
html.hr-theme-dark .change-badge { background: var(--layout-raised); color: #b7c8d5; border-color: var(--layout-border); }
html.hr-theme-dark .change-badge strong,
html.hr-theme-dark .department-icon,
html.hr-theme-dark .schedule-icon,
html.hr-theme-dark .section-number,
html.hr-theme-dark .upload-symbol { color: var(--layout-accent); }
html.hr-theme-dark .tree-panel .el-tree { --el-tree-node-hover-bg-color: #243c4e; background: var(--layout-panel); color: #c5d2dc; }
html.hr-theme-dark .root-node { color: #c5d2dc; }
html.hr-theme-dark .root-node:hover { background: #243c4e; }
html.hr-theme-dark .root-node.active,
html.hr-theme-dark .tree-panel .el-tree-node.is-current > .el-tree-node__content { background: var(--layout-selected); color: var(--layout-accent); }
html.hr-theme-dark .tree-foot { background: var(--layout-raised); color: var(--layout-muted); border-color: var(--layout-border); }
html.hr-theme-dark .child-dept:hover { background: var(--layout-selected); border-color: #6aa9d2; }
html.hr-theme-dark .child-dept span:last-child { color: var(--layout-muted); }
html.hr-theme-dark .snapshot-button,
html.hr-theme-dark .attendance-batch { background: var(--layout-panel); color: var(--layout-text); }
html.hr-theme-dark .snapshot-button:hover,
html.hr-theme-dark .attendance-batch:hover { background: #243c4e; }
html.hr-theme-dark .snapshot-button.active,
html.hr-theme-dark .attendance-batch.active { background: var(--layout-selected); border-color: #6aa9d2; }
html.hr-theme-dark .snapshot-button strong,
html.hr-theme-dark .attendance-batch strong,
html.hr-theme-dark .attendance-detail-title h2,
html.hr-theme-dark .attendance-upload h2,
html.hr-theme-dark .attendance-upload-main,
html.hr-theme-dark .attendance-kpis strong { color: var(--layout-text); }
html.hr-theme-dark .snapshot-button p,
html.hr-theme-dark .attendance-batch span,
html.hr-theme-dark .attendance-batch p,
html.hr-theme-dark .attendance-intro p,
html.hr-theme-dark .attendance-upload p,
html.hr-theme-dark .attendance-upload-icon,
html.hr-theme-dark .attendance-upload-hint,
html.hr-theme-dark .attendance-upload-actions > span,
html.hr-theme-dark .attendance-detail-title p,
html.hr-theme-dark .attendance-kpis span,
html.hr-theme-dark .attendance-kpis small,
html.hr-theme-dark .attendance-summary-note,
html.hr-theme-dark .attendance-metric-missing { color: var(--layout-muted); }
html.hr-theme-dark .analytics-toolbar strong,
html.hr-theme-dark .analytics-toolbar > span,
html.hr-theme-dark .analytics-filter label,
html.hr-theme-dark .analytics-filter-note,
html.hr-theme-dark .analytics-record-note,
html.hr-theme-dark .analytics-card-title p,
html.hr-theme-dark .analytics-note,
html.hr-theme-dark .analytics-mapping-summary p,
html.hr-theme-dark .mapping-coverage-progress span,
html.hr-theme-dark .mapping-uncovered,
html.hr-theme-dark .distribution-label,
html.hr-theme-dark .distribution-label small,
html.hr-theme-dark .distribution-percent,
html.hr-theme-dark .turnover-line,
html.hr-theme-dark .company-distribution small,
html.hr-theme-dark .coverage-section > div:not(.el-progress),
html.hr-theme-dark .payroll-metrics span,
html.hr-theme-dark .quality-items strong,
html.hr-theme-dark .quality-items p { color: var(--layout-muted); }
html.hr-theme-dark .mapping-coverage-progress strong,
html.hr-theme-dark .turnover-line strong,
html.hr-theme-dark .department-bar > div:first-child,
html.hr-theme-dark .department-bar strong,
html.hr-theme-dark .company-distribution > div,
html.hr-theme-dark .company-distribution strong,
html.hr-theme-dark .coverage-section h3,
html.hr-theme-dark .payroll-metrics strong { color: var(--layout-text); }
html.hr-theme-dark .mapping-uncovered strong { color: var(--el-color-warning); }
html.hr-theme-dark .turnover-line,
html.hr-theme-dark .company-distribution > div,
html.hr-theme-dark .payroll-metrics > div { border-color: var(--layout-border); }
html.hr-theme-dark .trend-grid { stroke: var(--layout-border); }
html.hr-theme-dark .trend-line,
html.hr-theme-dark .trend-point { stroke: var(--layout-accent); }
html.hr-theme-dark .trend-point { fill: var(--layout-panel); }
html.hr-theme-dark .trend-value { fill: var(--layout-text); }
html.hr-theme-dark .trend-date { fill: var(--layout-muted); }
html.hr-theme-dark .overview-bar { background: #30495d; }
/* Set semantic component tokens on their owners; Element Plus declares some
   defaults locally, so root variables alone do not cover teleported controls. */
html.hr-theme-dark .el-button--primary:not(.is-plain):not(.is-text):not(.is-link) {
  --el-button-text-color: #102232; --el-button-bg-color: #8dccf3;
  --el-button-hover-text-color: #102232; --el-button-hover-bg-color: #b4e2ff;
  --el-button-hover-border-color: #b4e2ff; --el-button-active-text-color: #102232;
  --el-button-disabled-text-color: #8298a8;
}
html.hr-theme-dark .el-button--primary.is-plain,
html.hr-theme-dark .el-button--primary.is-text,
html.hr-theme-dark .el-button--primary.is-link {
  --el-button-text-color: #8dccf3; --el-button-hover-link-text-color: #b4e2ff;
  --el-button-hover-text-color: #102232; --el-button-active-text-color: #102232;
}
html.hr-theme-dark .el-button--primary.is-text,
html.hr-theme-dark .el-button--primary.is-link { --el-button-hover-text-color: #b4e2ff; --el-button-active-text-color: #b4e2ff; }
html.hr-theme-dark .el-button--success:not(.is-plain):not(.is-text):not(.is-link),
html.hr-theme-dark .el-button--warning:not(.is-plain):not(.is-text):not(.is-link),
html.hr-theme-dark .el-button--danger:not(.is-plain):not(.is-text):not(.is-link),
html.hr-theme-dark .el-button--info:not(.is-plain):not(.is-text):not(.is-link) { --el-button-text-color: #102232; --el-button-hover-text-color: #e6eef5; --el-button-active-text-color: #102232; }
html.hr-theme-dark .el-alert--primary { --el-alert-bg-color: var(--el-color-primary-light-9); }
html.hr-theme-dark .el-alert--success { --el-alert-bg-color: var(--el-color-success-light-9); }
html.hr-theme-dark .el-alert--warning { --el-alert-bg-color: var(--el-color-warning-light-9); }
html.hr-theme-dark .el-alert--error { --el-alert-bg-color: var(--el-color-danger-light-9); }
html.hr-theme-dark .el-alert--info { --el-alert-bg-color: var(--el-color-info-light-9); }
html.hr-theme-dark .el-alert.is-dark,
html.hr-theme-dark .el-alert.is-dark .el-alert__description { color: var(--layout-on-accent); }
html.hr-theme-dark .el-tag--dark { --el-tag-text-color: #102232; }
html.hr-theme-dark .dept-tags .el-tag { --el-tag-bg-color: #243849; --el-tag-border-color: #3a5063; --el-tag-text-color: #b7c8d5; background: #243849; border-color: #3a5063; color: #b7c8d5; }
html.hr-theme-dark .el-radio-button { --el-radio-button-checked-text-color: #102232; --el-radio-button-checked-bg-color: #8dccf3; --el-radio-button-checked-border-color: #8dccf3; }
html.hr-theme-dark .trend-controls .el-radio-button.is-active .el-radio-button__inner { background: #8dccf3; border-color: #8dccf3; color: #102232; }
html.hr-theme-dark .el-checkbox { --el-checkbox-checked-icon-color: #102232; }
html.hr-theme-dark .el-radio { --el-radio-input-bg-color: #102232; }
html.hr-theme-dark .el-switch { --el-switch-on-color: #2f7bb2; --el-switch-off-color: #3a5063; }
html.hr-theme-dark .el-tabs__item.is-active,
html.hr-theme-dark .el-tabs__item:hover { color: var(--layout-accent); }
html.hr-theme-dark .el-input-group__append,
html.hr-theme-dark .el-input-group__prepend { background: #243849; color: #b7c8d5; box-shadow: 0 1px 0 0 #304456 inset, 0 -1px 0 0 #304456 inset, -1px 0 0 0 #304456 inset; }
html.hr-theme-dark .el-select__placeholder { color: #e6eef5; }
html.hr-theme-dark .el-select__placeholder.is-transparent { color: #9eb0bf; }
html.hr-theme-dark .el-date-editor .el-range-input { background: transparent; color: #e6eef5; }
html.hr-theme-dark .el-date-editor .el-range-separator { color: #b7c8d5; }
html.hr-theme-dark .el-input__inner::placeholder,
html.hr-theme-dark .el-textarea__inner::placeholder,
html.hr-theme-dark .el-date-editor .el-range-input::placeholder { color: #9eb0bf; }
html.hr-theme-dark .el-picker-panel,
html.hr-theme-dark .el-date-picker,
html.hr-theme-dark .el-date-range-picker { --el-datepicker-text-color: #c5d2dc; --el-datepicker-header-text-color: #e6eef5; --el-datepicker-border-color: #304456; --el-datepicker-inner-border-color: #304456; --el-datepicker-inrange-bg-color: #1f3b51; --el-datepicker-inrange-hover-bg-color: #2b4659; --el-datepicker-active-color: #8dccf3; --el-datepicker-hover-text-color: #8dccf3; --el-datepicker-off-text-color: #8298a8; }
html.hr-theme-dark .el-picker-panel__sidebar,
html.hr-theme-dark .el-picker-panel__footer { background: #1b2a39; border-color: #304456; }
html.hr-theme-dark .el-picker-panel__shortcut,
html.hr-theme-dark .el-date-picker__header-label,
html.hr-theme-dark .el-picker-panel__icon-btn { color: #c5d2dc; }
html.hr-theme-dark .el-date-table td.current:not(.disabled) .el-date-table-cell__text,
html.hr-theme-dark .el-date-table td.selected .el-date-table-cell__text,
html.hr-theme-dark .el-date-table td.start-date .el-date-table-cell__text,
html.hr-theme-dark .el-date-table td.end-date .el-date-table-cell__text,
html.hr-theme-dark .el-month-table td.current:not(.disabled) .el-date-table-cell__text,
html.hr-theme-dark .el-month-table td.start-date .el-date-table-cell__text,
html.hr-theme-dark .el-month-table td.end-date .el-date-table-cell__text,
html.hr-theme-dark .el-year-table td.current:not(.disabled) .el-date-table-cell__text,
html.hr-theme-dark .el-year-table td.start-date .el-date-table-cell__text,
html.hr-theme-dark .el-year-table td.end-date .el-date-table-cell__text { color: #102232; }
html.hr-theme-dark .el-popper.is-light > .el-popper__arrow::before { background: #203344; border-color: #304456; }
html.hr-theme-dark .el-popper.is-dark > .el-popper__arrow::before { background: #203344; }
html.hr-theme-dark .el-table__body tr.hover-row > td.el-table__cell,
html.hr-theme-dark .el-table__body tr.current-row > td.el-table__cell { background: #243c4e; }
html.hr-theme-dark .el-table__expanded-cell { background: #1b2a39; }
html.hr-theme-dark .el-progress-bar__outer { background: #30495d; }
html.hr-theme-dark .el-progress__text { color: #c5d2dc; }
html.hr-theme-dark .el-skeleton { --el-skeleton-color: #243849; --el-skeleton-to-color: #30495d; }
html.hr-theme-dark .el-empty { --el-empty-fill-color-0: #1b2a39; --el-empty-fill-color-1: #344c5f; --el-empty-fill-color-2: #2d4558; --el-empty-fill-color-3: #415a6c; --el-empty-fill-color-4: #30495d; --el-empty-fill-color-5: #3a5367; --el-empty-fill-color-6: #284052; --el-empty-fill-color-7: #243849; --el-empty-fill-color-8: #203344; --el-empty-fill-color-9: #1b2a39; }
html.hr-theme-dark .global-version-select .el-input__wrapper { box-shadow: 0 0 0 1px #3a5063 inset; }
html.hr-theme-dark .account-trigger:hover { color: var(--layout-accent); }
@media (max-width: 1279px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
  .workspace { padding: 22px; }
  .directory-summary > div { padding: 0 14px; }
  .attendance-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .sidebar { width: 184px; }
  .app-body { margin-left: 184px; }
  .sidebar .sidebar-brand { padding: 22px 20px 16px; }
  .sidebar .nav-links { padding: 8px 10px 16px; gap: 16px; }
  .sidebar .nav-button { gap: 9px; padding: 9px 11px; }
  .directory-layout, .attendance-layout, .snapshot-layout { grid-template-columns: minmax(0, 1fr); }
  .tree-panel { position: static; }
  .tree-scroll { max-height: 230px; }
  .attendance-batches { max-height: 240px; }
  .attendance-upload { grid-template-columns: minmax(0, 1fr); }
  .page-heading { flex-wrap: wrap; }
  .analytics-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; border-right: 0; border-bottom: 1px solid var(--layout-border); }
  .sidebar .sidebar-brand { padding: 14px 16px 6px; flex-direction: row; align-items: center; gap: 14px; }
  .sidebar .brand-logo-sidebar { width: 105px; }
  .sidebar .nav-links { flex-direction: row; gap: 12px; padding: 8px 12px 12px; overflow-x: auto; overflow-y: hidden; }
  .nav-group { flex-shrink: 0; }
  .nav-group-title, .sidebar-foot { display: none; }
  .nav-group-items { display: flex; gap: 4px; }
  .sidebar .nav-button { width: auto; padding: 7px 10px; min-height: 36px; font-size: 13px; gap: 7px; }
  .sidebar .nav-button svg { width: 16px; height: 16px; }
  .sidebar .nav-button.active { box-shadow: inset 0 -2px #2f7bb2; }
  .app-body { margin-left: 0; }
  .topbar { height: auto; min-height: 54px; padding: 10px 16px; gap: 12px; flex-wrap: wrap; }
  .topbar-left > span, .topbar-right > .muted { display: none; }
  .topbar-right { gap: 6px; }
  .global-version-picker { order: -1; flex: 1 1 100%; }
  .global-version-select { flex: 1; width: auto !important; min-width: 0; }

  .workspace { padding: 20px 14px 28px; }
  .page-heading { display: block; margin-bottom: 16px; }
  .page-heading h1 { font-size: 22px; }
  .heading-actions { justify-content: flex-start; margin-top: 12px; }
  .directory-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .directory-summary > div { padding: 0 12px; }
  .directory-summary > div:nth-child(2n) { border-right: 0; }
  .directory-summary strong { font-size: 20px; }
  .directory-controls { align-items: stretch; }
  .directory-controls .version-bar { flex: 1 1 100%; }
  .directory-controls .version-select { flex: 1; width: auto !important; min-width: 0; }
  .directory-layout, .attendance-layout, .snapshot-layout, .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .tree-panel { position: static; }
  .tree-scroll { max-height: 220px; }
  .people-filters { padding: 0 14px 14px; }
  .people-search { min-width: 0; max-width: none; flex-basis: 100%; }
  .extra-filters { width: 100%; }
  .extra-filter-fields { position: static; width: 100%; margin-top: 8px; padding: 12px; box-shadow: none; }
  .people-table { padding: 0 6px; }
  .pagination { padding: 12px 14px; }
  .settings-panel { padding: 20px; }
  .schedule-status { grid-template-columns: minmax(0, 1fr); }
  .attendance-import .attendance-upload { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .attendance-batches { max-height: 230px; }
  .attendance-upload-actions { flex-wrap: wrap; }
  .attendance-detail-title { padding: 16px; }
  .attendance-kpis { padding: 0 16px 16px; }
  .attendance-results { padding: 0 14px 16px; }
  .attendance-filters > * { max-width: 100%; }
  .analytics-toolbar, .analytics-grid, .overview-grid, .import-guide ol { grid-template-columns: minmax(0, 1fr); }
  .analytics-toolbar { display: grid; }
  .trend-controls { padding: 14px; gap: 14px; }
  .trend-controls > div:not(.el-date-editor) { flex: 1 1 100%; justify-content: space-between; }
  .trend-controls .trend-preset { width: 200px; max-width: 70%; }
  .trend-controls .el-date-editor { width: 100%; min-width: 0; flex-basis: 100%; }
  .history-event { padding: 12px; }
  .history-field { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .history-field > span { grid-row: auto; font-size: 12px; }
  .payroll-ledger-heading { flex-direction: column; }
  .payroll-actions { width: 100%; }
  .payroll-filters { padding: 0 14px 16px; }
  .payroll-filters > .el-input { width: 100%; }
  .payroll-filters > .el-date-editor { flex: 1 1 180px; }
  .payroll-net-preview { flex-wrap: wrap; padding: 14px; }
  .payroll-net-preview strong { font-size: 21px; }
  .import-section-title > .el-button { margin-left: 0; }
  details.disclosure > summary { padding: 13px 16px; }
  details.disclosure > summary > span { display: block; margin-left: 18px; }
  .disclosure-body { padding: 14px 16px; }
  .el-dialog { --el-dialog-padding-primary: 18px; }
}