/* Internal workspace contract. Load last so every module shares these tokens.
   The login surface keeps its own layout; teleported editors share this contract. */
:root {
  --ui-accent: var(--brand-blue, #2f7bb2);
  --ui-accent-soft: var(--el-color-primary-light-9, #eaf2f7);
  --ui-panel: var(--layout-panel, #fff);
  --ui-soft: var(--el-fill-color-light, #f3f7fb);
  --ui-line: var(--layout-border, #e5ebf0);
  --ui-text: var(--layout-text, #283e50);
  --ui-muted: #617184;
  --ui-radius: 8px;
  --ui-gap: 16px;
  --ui-gutter: 24px;
  --ui-cell-padding: 6px;
  --ui-control-height: 32px;
  --ui-row-line: 22px;
  --ui-table-font: 13px;
}

html[data-hr-density="comfortable"] {
  --ui-gap: 20px;
  --ui-cell-padding: 10px;
  --ui-control-height: 36px;
  --ui-row-line: 24px;
  --ui-table-font: 14px;
}

html.hr-theme-dark { --ui-muted: var(--layout-muted, #9eb0bf); }

.app-shell, .el-dialog, .el-drawer {
  --el-font-size-base: 13px;
  --el-component-size: var(--ui-control-height);
  --el-border-radius-base: 6px;
  color: var(--ui-text);
  font-size: 13px;
  line-height: 1.65;
}

.app-shell .app-body, .app-shell .workspace { min-width: 0; }
.app-shell .workspace {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 22px var(--ui-gutter) 32px;
}
.app-shell .topbar { min-height: 56px; height: auto; padding: 10px var(--ui-gutter); gap: 12px; }
.app-shell .topbar-left, .app-shell .topbar-right { min-width: 0; }
.app-shell .topbar-right { flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; }
.app-shell .topbar-left { flex-shrink: 0; }
.app-shell .sidebar { border-color: var(--ui-line); }
.app-shell .sidebar .nav-links { gap: 16px; }
.app-shell .sidebar .nav-button {
  position: relative;
  min-height: 38px;
  padding: 8px 12px;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ui-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.app-shell .sidebar .nav-button:hover { color: var(--ui-text); background: var(--ui-soft); }
html .app-shell .sidebar .nav-button.active {
  background: var(--ui-accent-soft);
  border-color: color-mix(in srgb, var(--ui-accent) 12%, transparent);
  color: var(--ui-accent);
  font-weight: 600;
  box-shadow: none;
}
.app-shell .sidebar .nav-button.active::after {
  content: '';
  width: 5px;
  height: 5px;
  margin-left: auto;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  opacity: .75;
}
.app-shell .sidebar .nav-button.active svg { stroke-width: 1.8; opacity: 1; }
.app-shell .sidebar .nav-group-title { font-size: 11px; letter-spacing: .3px; }
/* Element Plus fields draw their own focus border; outlining their inner
   inputs adds a second, square border inside the rounded control. */
:is(.app-shell, .el-dialog, .el-drawer)
  :is(button, a, summary, [tabindex]):not(:where(
    .el-input__wrapper, .el-input__inner, .el-textarea__inner, .el-range-input,
    .el-select__input, .el-select__wrapper, .el-cascader, .el-cascader__search-input
  )):focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
}

/* A predictable hierarchy: page heading, summary, controls, data, pagination. */
.app-shell .workspace :is(.page-heading, .cbt-heading) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 18px;
}
.app-shell .workspace :is(.page-heading, .cbt-heading) > div:first-child { min-width: 0; flex: 1 1 300px; }
.app-shell .workspace :is(.page-heading, .cbt-heading) h1 {
  margin: 0;
  color: var(--ui-text);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
}
.app-shell .workspace :is(.page-heading, .cbt-heading) p { margin-top: 5px; color: var(--ui-muted); font-size: 13px; line-height: 1.7; }
.app-shell .workspace :is(.cbt-eyebrow, .qb-eyebrow) { display: none; }
.app-shell .workspace h2 { color: var(--ui-text); font-size: 16px; font-weight: 600; }
.app-shell .workspace h3 { color: var(--ui-text); font-size: 14px; font-weight: 600; }
.app-shell :is(.heading-actions, .cbt-heading-actions, .payroll-actions, .report-summary-actions) { min-width: 0; gap: 8px; flex-wrap: wrap; }
.app-shell :is(.panel, .kpi, .data-hub-panel, .monitor-widget, .qb-workspace) {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-panel);
  box-shadow: none;
}
.app-shell :is(.panel-heading, .list-top) { padding: 14px 16px; gap: 12px; flex-wrap: wrap; border-color: var(--ui-line); }
.app-shell :is(.panel-heading, .list-top) > div { min-width: 0; }
.app-shell :is(.panel-heading, .list-top) h2 { font-size: 15px; }
.app-shell :is(.directory-content, .cost-business-trends) { gap: var(--ui-gap); }
.app-shell :is(.overview-grid, .analytics-grid, .performance-grid, .internal-report-grid, .monitor-grid) { gap: var(--ui-gap); }
.app-shell :is(.overview-card, .analytics-card, .settings-panel) { padding: 20px; }
.app-shell :is(.quiet-note, .form-hint, .analytics-note, .performance-note, .scheme-formula, .list-count) { font-size: 12px; line-height: 1.7; }

.app-shell :is(.kpis, .data-hub-summary) { gap: var(--ui-gap); margin-bottom: 18px; }
.app-shell :is(.kpi, .data-hub-metric) { padding: 15px 18px; border-radius: var(--ui-radius); box-shadow: none; }
.app-shell :is(.kpi-value, .data-hub-metric > strong) { margin: 5px 0; color: var(--ui-text); font-size: 28px; font-weight: 600; line-height: 1.35; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.app-shell :is(.kpi-top, .kpi-caption, .data-hub-metric-label) { color: var(--ui-muted); font-size: 12px; }
.app-shell .data-hub-metric-label { padding-right: 36px; }
.app-shell .data-hub-metric-icon { top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 7px; }
.app-shell .data-hub-metric-icon svg { width: 19px; height: 19px; }
.app-shell .data-hub-metric-foot { margin-top: 10px; padding-top: 9px; font-size: 12px; }
.app-shell :is(.directory-summary, .attendance-kpis, .payroll-metrics, .performance-summary, .run-summary) { font-variant-numeric: tabular-nums; }
.app-shell :is(.directory-summary, .report-summary-metrics) { background: var(--ui-panel); border-color: var(--ui-line); }
.app-shell .report-summary-metrics { padding: 12px 16px; gap: 12px 24px; }
.app-shell .report-summary-metrics strong { color: var(--ui-text); }

/* Filter surfaces stay separate from headings and results. Existing flex/grid
   structure is retained, including specialized analysis and editor layouts. */
.app-shell :is(.people-filters, .payroll-filters, .attendance-filters) {
  margin: 0 16px 12px;
  padding: 12px;
  gap: 10px;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: var(--ui-soft);
}
.app-shell :is(.toolbar, .permission-toolbar, .monitor-toolbar, .mapping-toolbar, .internal-report-toolbar, .report-summary-toolbar) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.app-shell :is(.permission-toolbar, .monitor-toolbar, .report-summary-toolbar) {
  padding: 12px 16px;
  background: var(--ui-soft);
  border-bottom: 1px solid var(--ui-line);
}
.app-shell .permission-toolbar { margin-bottom: 12px; border: 1px solid var(--ui-line); border-radius: 6px; }
.app-shell .permission-toolbar > p { flex: 1 1 280px; color: var(--ui-muted); font-size: 12px; }
.app-shell .permission-toolbar > .el-input { width: 260px; max-width: 100%; }
.app-shell .monitor-toolbar { border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
.app-shell :is(.analytics-toolbar, .performance-toolbar, .trend-controls) { gap: 12px; border-color: var(--ui-line); background: var(--ui-panel); }
.app-shell :is(.toolbar, .payroll-filters, .attendance-filters, .monitor-toolbar) > :is(.el-input, .el-select, .el-date-editor) { max-width: 100%; }
.app-shell .people-search { flex: 1 1 220px; max-width: 360px; min-width: 0; }
.app-shell .extra-filter-fields { z-index: 30; background: var(--ui-panel); border-color: var(--ui-line); }
.app-shell :is(.result-line, .maintenance-hint) { margin-bottom: 12px; background: var(--ui-soft); color: var(--ui-muted); border-color: var(--ui-line); font-size: 12px; }

/* Tables use Element Plus height/scrollbar management. Keep its separate header,
   horizontal scrollbar, column resizing and fixed-column offsets intact. */
:is(.app-shell, .el-dialog, .el-drawer) .el-table {
  --el-table-bg-color: var(--ui-panel);
  --el-table-tr-bg-color: var(--ui-panel);
  --el-table-header-bg-color: var(--ui-soft);
  --el-table-header-text-color: var(--ui-muted);
  --el-table-text-color: var(--ui-text);
  --el-table-border-color: var(--ui-line);
  --el-table-row-hover-bg-color: var(--ui-accent-soft);
  --el-table-current-row-bg-color: var(--ui-accent-soft);
  --el-fill-color-blank: var(--ui-panel);
  max-width: 100%;
  font-size: var(--ui-table-font);
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}
:is(.app-shell, .el-dialog, .el-drawer) .el-table :is(td, th).el-table__cell {
  height: auto;
  padding: var(--ui-cell-padding) 0;
  font-size: var(--ui-table-font);
}
:is(.app-shell, .el-dialog, .el-drawer) .el-table th.el-table__cell {
  padding: 9px 0;
  background: var(--ui-soft);
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 600;
}
:is(.app-shell, .el-dialog, .el-drawer) .el-table .cell { padding: 0 12px; line-height: var(--ui-row-line); }
:is(.app-shell, .el-dialog, .el-drawer) .el-table .el-table__footer-wrapper td { background: var(--ui-soft); font-weight: 600; }
:is(.app-shell, .el-dialog, .el-drawer) .el-table .el-button.is-link { height: auto; min-height: 22px; padding: 2px 0; font-size: 12px; }
:is(.app-shell, .el-dialog, .el-drawer) .el-table .el-scrollbar__bar.is-horizontal { height: 8px; }
:is(.app-shell, .el-dialog, .el-drawer) .el-table .el-scrollbar__bar.is-vertical { width: 8px; }
:is(.app-shell, .el-dialog, .el-drawer) .el-scrollbar__thumb { background: var(--ui-muted); opacity: .35; }
.app-shell :is(.people-table, .diff-table) { min-width: 0; padding-left: 16px; padding-right: 16px; }
.app-shell .person-sub { font-size: 12px; line-height: 18px; }
.app-shell :is(.person-sub, .data-hub-table .quiet-note) { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.app-shell :is(.payroll-money, .payroll-net, .data-hub-metric strong, .monitor-metric) { font-variant-numeric: tabular-nums; }
.app-shell :is(.pagination, .qb-table-pagination, .data-hub-pagination) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--ui-line);
  background: var(--ui-panel);
  color: var(--ui-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.app-shell .qb-table-pagination { margin-top: 8px; padding: 10px 0 0; }
.app-shell :is(.pagination, .qb-table-pagination) > span { color: var(--ui-muted); font-size: 12px; }
:is(.app-shell, .el-dialog, .el-drawer) .el-pagination { flex-wrap: wrap; justify-content: flex-end; gap: 4px; row-gap: 8px; --el-pagination-font-size: 12px; }
:is(.app-shell, .el-dialog, .el-drawer) .el-pagination .el-select { min-width: 108px; }
:is(.app-shell, .el-dialog, .el-drawer) .el-empty { padding: 36px 16px; }
:is(.app-shell, .el-dialog, .el-drawer) .el-empty__description p { color: var(--ui-muted); font-size: 13px; }

/* Shared control sizes. Link/text buttons keep their lightweight presentation. */
:is(.app-shell, .el-dialog, .el-drawer) .el-button:not(.is-link):not(.is-text):not(.is-circle) {
  height: auto;
  min-height: var(--ui-control-height);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 18px;
}
:is(.app-shell, .el-dialog, .el-drawer) .el-button + .el-button { margin-left: 8px; }
:is(.app-shell, .el-dialog, .el-drawer) :is(.heading-actions, .payroll-actions, .report-summary-actions, .cbt-heading-actions, .qb-toolbar-actions, .qb-editor-actions, .data-hub-row-actions) > .el-button + .el-button { margin-left: 0; }
:is(.app-shell, .el-dialog, .el-drawer) :is(.el-input, .el-select, .el-textarea) { font-size: 13px; }
:is(.app-shell, .el-dialog, .el-drawer) :is(.el-input__wrapper, .el-select__wrapper) { min-height: var(--ui-control-height); border-radius: 6px; }
:is(.app-shell, .el-dialog, .el-drawer) :is(.el-input__inner, .el-select__selected-item, .el-textarea__inner) { font-size: 13px; }
:is(.app-shell, .el-dialog, .el-drawer) .el-form-item__label { font-size: 12px; }
:is(.app-shell, .el-dialog, .el-drawer) .el-tabs__item { font-size: 13px; }
:is(.app-shell, .el-dialog, .el-drawer) .el-tabs__item.is-active { font-weight: 600; }
:is(.app-shell, .el-dialog, .el-drawer) .el-tag { max-width: 100%; font-size: 12px; }

/* Data center and preparation editors inherit the same brand and surfaces. */
html .app-shell .data-hub-workspace {
  --hub-accent: var(--ui-accent);
  --hub-accent-soft: var(--ui-accent-soft);
  --hub-accent-line: var(--el-color-primary-light-5);
  --hub-soft: var(--ui-soft);
  --hub-surface: var(--ui-panel);
  --hub-line: var(--ui-line);
  --hub-text: var(--ui-text);
  --hub-muted: var(--ui-muted);
}
.app-shell .data-hub-workspace .el-button--primary:not(.is-link):not(.is-text):not(.is-plain) {
  --el-button-bg-color: var(--ui-accent);
  --el-button-border-color: var(--ui-accent);
  --el-button-hover-bg-color: var(--el-color-primary-dark-2);
  --el-button-hover-border-color: var(--el-color-primary-dark-2);
}
.app-shell .data-hub-tabs > .el-tabs__header { padding: 0 16px; }
.app-shell .data-hub-tabs > .el-tabs__header .el-tabs__item { height: 52px; padding: 0 18px; }
.app-shell .data-hub-tabs > .el-tabs__content { padding: 0 16px; }
.app-shell .data-hub-tabs .data-hub-toolbar { min-height: 72px; padding: 14px 0; }
.app-shell .data-hub-toolbar .quiet-note { font-size: 12px; }
.app-shell .data-hub-list-search.el-input { top: 10px; right: 16px; height: auto; }
.app-shell .data-hub-source-icon { width: 30px; height: 34px; border-radius: 6px; }
.app-shell .data-hub-item { gap: 10px; }
.app-shell .data-hub-table .cell { line-height: var(--ui-row-line); }
.app-shell .data-hub-table th.el-table__cell { height: auto; }
.app-shell .data-hub-table .data-hub-code { font-size: 12px; }

.el-dialog.data-prep-dialog, .el-dialog.data-prep-dialog .el-dialog__footer { background: var(--ui-panel); color: var(--ui-text); }
.el-dialog :is(.data-hub-resolved-sql, .data-hub-cache-guide) { background: var(--ui-soft); border-color: var(--ui-line); color: var(--ui-text); }
.el-dialog :is(.data-hub-cache-intro, .data-hub-result-meta, .data-hub-cache-status span) { color: var(--ui-muted); }
.el-dialog .data-hub-cache-status { border-color: var(--ui-line); }
.el-dialog .data-hub-cache-status strong { color: var(--ui-text); }
.el-dialog .data-hub-cache-guide .data-hub-cache-field-error { color: var(--el-color-danger); }
.el-dialog .data-prep-wizard { color: var(--ui-text); font-size: 13px; }
.el-dialog .data-prep-wizard :is(.data-prep-stage-nav, .data-prep-stage-content, .data-prep-field-list, .data-prep-code-hint, .data-prep-advanced pre) { background: var(--ui-soft); border-color: var(--ui-line); color: var(--ui-muted); }
.el-dialog .data-prep-wizard :is(section, .data-prep-input-card, .data-prep-step-card, .data-prep-input-head, .data-prep-step-head, .data-prep-output-grid, .data-prep-join-config, .data-prep-operation, .data-prep-visual-body, .data-prep-preview) { background: var(--ui-panel); border-color: var(--ui-line); color: var(--ui-text); }
.el-dialog .data-prep-wizard :is(.data-prep-stage-tab, .data-prep-stage-head p, .data-prep-input-head strong, .data-prep-step-head strong, .data-prep-field-list > strong, .data-prep-input-actions > span, .data-prep-preview-head span, .data-prep-preview-meta, .form-hint, .data-prep-footer span, .data-prep-run-log, .data-prep-run-log p, .data-prep-empty-preview) { font-size: 12px; color: var(--ui-muted); }
.el-dialog .data-prep-wizard :is(.data-prep-field-chip, .data-prep-field-chip strong, .data-prep-field-chip small, .data-prep-field-chip > span, .data-prep-code-hint code) { font-size: 12px; }
.el-dialog .data-prep-wizard .data-prep-stage-tab.is-active { background: var(--ui-accent-soft); color: var(--ui-accent); }
.el-dialog .data-prep-wizard .data-prep-stage-tab.is-active > span:first-child { background: var(--ui-accent); color: var(--layout-on-accent, #fff); }

/* BI remains a specialized editor, with readable type and the shared palette. */
.app-shell .qb-workspace {
  --qb-blue: var(--ui-accent);
  --qb-text: var(--ui-text);
  --qb-muted: var(--ui-muted);
  --qb-line: var(--ui-line);
  --qb-soft: var(--ui-soft);
  --el-color-primary: var(--ui-accent);
  --el-font-size-base: 13px;
  min-width: 0;
  color: var(--ui-text);
}
.app-shell .qb-workspace :is(.qb-resource-nav, .qb-editor-main, .qb-dashboard-view, .qb-field-search .el-input__wrapper, .qb-filter-config) { background: var(--ui-soft); border-color: var(--ui-line); }
.app-shell .qb-workspace :is(.qb-dashboard-card, .qb-data-pane, .qb-analysis-card, .qb-field-slots, .qb-config-pane, .qb-preview-grid > span, .qb-drop-zone:has(.qb-field-pill)) { background: var(--ui-panel); border-color: var(--ui-line); }
.app-shell .qb-workspace :is(.qb-drop-zone, .qb-view-switch, .qb-layout-item) { background: var(--ui-soft); border-color: var(--ui-line); color: var(--ui-muted); }
.app-shell .qb-workspace :is(.qb-component-item.is-active, .qb-layout-item.is-active) { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent); box-shadow: none; }
.app-shell .qb-workspace .qb-view-switch button.is-active { background: var(--ui-panel); color: var(--ui-accent); box-shadow: none; }
.app-shell .qb-workspace .qb-preview-empty-icon { background: var(--ui-accent-soft); color: var(--ui-accent); border-color: var(--ui-line); }
.app-shell .qb-workspace .qb-preview-error { background: var(--el-color-danger-light-9); }
.app-shell .qb-workspace :is(.qb-field-type, .qb-field-pill) { background: var(--el-color-info-light-9); color: var(--ui-muted); }
.app-shell .qb-workspace :is(.qb-field-type.is-numeric, .qb-field-pill.is-measure) { background: var(--ui-accent-soft); color: var(--ui-accent); }
.app-shell .qb-workspace .qb-status.is-draft { background: var(--el-color-warning-light-9); color: var(--el-color-warning); }
.app-shell .qb-workspace .qb-chart-types button { background: var(--ui-panel); border-color: var(--ui-line); color: var(--ui-muted); }
.app-shell .qb-workspace .qb-chart-types button:hover { background: var(--ui-soft); border-color: var(--ui-accent); }
.app-shell .qb-workspace .qb-chart-types button.is-active { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent); box-shadow: none; }
.app-shell .qb-workspace :is(.qb-chart-types button span, .qb-layout-item strong, .qb-layout-item small, .qb-component-item span) { font-size: 12px; color: inherit; }
.app-shell .qb-workspace .qb-config-tabs button { font-size: 12px !important; }
.app-shell .qb-workspace :is(.qb-nav-item.is-active, .qb-resource-item.is-active, .qb-analysis-guide, .qb-interaction-bar, .qb-guide-fields button, .qb-guide-charts button) { background: var(--ui-accent-soft); color: var(--ui-accent); border-color: var(--ui-line); }
.app-shell .qb-workspace .qb-guide-charts button.is-active { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--layout-on-accent, #fff); }
.app-shell .qb-workspace :is(.qb-nav-item, .qb-resource-item) { font-size: 12px !important; line-height: 20px; }
.app-shell .qb-workspace .qb-field-label { font-size: 12px !important; line-height: 20px; }
.app-shell .qb-workspace :is(.qb-page-heading h2, .qb-dashboard-heading h2) { color: var(--ui-text); font-size: 22px; letter-spacing: 0; }
.app-shell .qb-workspace :is(.qb-page-heading p, .qb-dashboard-heading p, .qb-library-summary, .qb-library-summary strong, .qb-table-toolbar > span, .qb-config-label, .qb-config-hint, .qb-config-switch, .qb-field-heading, .qb-field-empty p, .qb-preview-empty p, .qb-preview-error p, .qb-preview-footnote, .qb-canvas-count, .qb-space-label, .qb-brand-subtitle, .qb-interaction-heading > span) { color: var(--ui-muted); font-size: 12px; line-height: 1.7; }
.app-shell .qb-workspace :is(.qb-config-tabs button, .qb-field-pill, .qb-filter-config .el-select__selected-item, .qb-filter-config .el-input__inner, .qb-config-form .el-radio-button__inner, .qb-field-pill .el-select__selected-item, .qb-chart-types button > small) { font-size: 12px; }
.app-shell .qb-workspace .qb-field-heading small { color: var(--ui-muted); font-size: 11px; }
.app-shell .qb-workspace .qb-field-heading { flex-wrap: wrap; }
.app-shell .qb-workspace :is(.qb-pane-title, .qb-preview-head, .qb-preview-footnote, .qb-editor-toolbar, .qb-config-tabs, .qb-field-slots) { border-color: var(--ui-line); }
.app-shell .qb-workspace :is(.qb-analysis-guide p, .qb-analysis-guide > div:first-child > span) { color: var(--ui-muted); font-size: 12px; }
.app-shell .qb-workspace .qb-analysis-guide .qb-guide-next { color: var(--ui-accent); }
.app-shell .qb-workspace .qb-library { padding: 22px 24px; }
.app-shell .qb-workspace .qb-library-toolbar { margin-bottom: 16px; flex-wrap: wrap; }
.app-shell .qb-workspace .qb-brandbar { height: auto; min-height: 52px; padding: 12px 20px; flex-wrap: wrap; }
.app-shell .qb-workspace :is(.qb-editor-toolbar, .qb-canvas-toolbar, .qb-dashboard-toolbar) { flex-wrap: wrap; gap: 8px; }
.app-shell .qb-workspace .qb-toolbar-actions { flex-wrap: wrap; }
.app-shell .qb-workspace .qb-field-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app-shell .qb-workspace .qb-canvas-toolbar .el-button { font-size: 12px; }

.app-shell .cost-business-trends { --cbt-ink: var(--ui-text); --cbt-muted: var(--ui-muted); --cbt-panel: var(--ui-panel); --cbt-line: var(--ui-line); --cbt-soft: var(--ui-soft); }
.app-shell .cost-business-trends .cbt-heading { margin-bottom: 0; }
.app-shell .cost-business-trends .cbt-group-nav { box-shadow: none; }
.app-shell .cost-business-trends :is(.cbt-primary-filters, .cbt-controls-heading) { padding-left: 20px; padding-right: 20px; }
.app-shell .cost-business-trends .cbt-monthly :is(th, td) { padding: var(--ui-cell-padding) 12px; font-size: var(--ui-table-font); line-height: var(--ui-row-line); }
.app-shell .cost-business-trends .cbt-monthly thead th { font-size: 12px; font-weight: 600; }
.app-shell .cost-business-trends :is(.cbt-controls-description, .cbt-filter small, .cbt-employee-note, .cbt-group-mapping, .cbt-chart-heading p, .cbt-chart-foot) { font-size: 12px; }
.app-shell .monitor-widget { padding: 16px; }
.app-shell .monitor-table { scrollbar-width: thin; scrollbar-color: var(--ui-muted) transparent; }

/* Editors and detail views stay usable at short viewport heights. */
.el-dialog { max-width: calc(100vw - 32px); border: 1px solid var(--ui-line); border-radius: 10px; --el-dialog-padding-primary: 20px; }
.el-dialog .el-dialog__header { margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--ui-line); }
.el-dialog .el-dialog__title { color: var(--ui-text); font-size: 17px; font-weight: 600; }
.el-dialog .el-dialog__body { max-height: calc(100dvh - 210px); overflow-y: auto; overscroll-behavior: contain; padding-top: 16px; padding-bottom: 16px; scrollbar-width: thin; }
.el-dialog .el-dialog__footer { padding-top: 14px; border-top: 1px solid var(--ui-line); }
.el-dialog .el-dialog__footer:empty { display: none; }
.el-drawer .el-drawer__header { margin-bottom: 0; padding: 18px 20px; border-bottom: 1px solid var(--ui-line); }
.el-drawer .el-drawer__body { padding: 20px; overscroll-behavior: contain; }
.el-drawer .detail-grid { grid-template-columns: 100px minmax(0, 1fr); gap: 12px; }
.el-dialog :is(.form-hint, .quiet-note), .el-drawer :is(.form-hint, .quiet-note) { color: var(--ui-muted); font-size: 12px; }

@media (min-width: 1920px) {
  :root { --ui-gutter: 32px; }
  .app-shell .directory-layout { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (max-width: 1279px) {
  :root { --ui-gutter: 20px; }
  .app-shell .topbar { flex-wrap: wrap; }
  .app-shell .topbar-right { margin-left: auto; }
  .app-shell .workspace :is(.page-heading, .cbt-heading) { gap: 12px; }
}
@media (max-width: 900px) {
  .app-shell .data-hub-list-search.el-input { position: static; width: auto; margin: 14px 16px 0; }
  .app-shell .data-hub-tabs > .el-tabs__header .el-tabs__nav-wrap { margin-right: 0; }
  .app-shell .data-hub-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .app-shell .data-hub-metric { padding: 14px; }
  .app-shell .data-hub-metric-label { padding-right: 0; }
  .app-shell .data-hub-metric-icon { display: none; }
  .app-shell .data-hub-metric-foot { flex-wrap: wrap; gap: 4px; }
}
@media (max-width: 760px) {
  :root { --ui-gutter: 14px; --ui-gap: 12px; }
  .app-shell .workspace { padding-top: 18px; }
  .app-shell .topbar { padding: 10px 14px; gap: 8px; }
  .app-shell .topbar-right { flex: 1 1 100%; justify-content: flex-start; gap: 8px; }
  .app-shell .workspace :is(.page-heading, .cbt-heading) > div:first-child { flex-basis: 100%; }
  .app-shell .workspace :is(.page-heading, .cbt-heading) h1 { font-size: 22px; }
  .app-shell .heading-actions { justify-content: flex-start; margin-top: 0; }
  .app-shell :is(.panel-heading, .list-top) { padding: 12px 14px; }
  .app-shell :is(.people-filters, .payroll-filters, .attendance-filters) { margin-left: 10px; margin-right: 10px; padding: 10px; }
  .app-shell :is(.people-table, .diff-table) { padding-left: 8px; padding-right: 8px; }
  .app-shell .people-search { max-width: none; flex-basis: 100%; }
  .app-shell :is(.pagination, .data-hub-pagination) { padding: 12px 10px; }
  .app-shell .pagination .el-pagination { width: 100%; justify-content: flex-start; }
  .app-shell .data-hub-tabs > .el-tabs__header .el-tabs__item { padding: 0 12px; height: 46px; }
  .app-shell .data-hub-tabs > .el-tabs__content { padding: 0 12px; }
  .app-shell .data-hub-tabs .data-hub-toolbar { align-items: flex-start; gap: 10px; min-height: 0; }
  .app-shell .data-hub-metric > strong { font-size: 24px; }
  .app-shell .data-hub-metric-link { white-space: normal; }
  .app-shell .qb-workspace .qb-library { padding: 16px; }
  .app-shell .qb-workspace .qb-brandbar { padding: 12px 16px; }
  .app-shell .qb-workspace .qb-table-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .app-shell .qb-workspace .qb-table-toolbar .el-input { max-width: 100%; }
  .app-shell .cost-business-trends .cbt-primary-filters { padding: 16px; gap: 16px; }
  .el-dialog { max-width: calc(100vw - 20px); --el-dialog-padding-primary: 16px; }
  .el-dialog .el-dialog__body { max-height: calc(100dvh - 180px); }
  .el-drawer .el-drawer__body { padding: 16px; }
  .el-dialog :is(.data-hub-form-grid, .form-grid) { grid-template-columns: minmax(0, 1fr); }
  .el-dialog .data-hub-form-grid .span-2 { grid-column: auto; }
}
@media (max-width: 480px) {
  .app-shell .data-hub-summary { grid-template-columns: minmax(0, 1fr); }
  .app-shell .data-hub-metric { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; }
  .app-shell .data-hub-metric > strong { grid-column: 2; grid-row: 1; margin: 0; }
  .app-shell .data-hub-metric-foot { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell *, .el-dialog *, .el-drawer * { scroll-behavior: auto; transition-duration: .01ms; animation-duration: .01ms; animation-iteration-count: 1; }
}