:root {
  --ats-radius-control: 6px;
  --ats-radius-panel: 8px;
  --ats-row-height: 54px;
  --ats-cell-pad-y: 10px;
  --ats-cell-pad-x: 12px;
  --ats-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
  --ats-shadow-panel: 0 8px 22px color-mix(in srgb, var(--shadow-color) 84%, transparent);
}

html[data-ui-density="compact"] {
  --ats-row-height: 42px;
  --ats-cell-pad-y: 7px;
  --ats-cell-pad-x: 9px;
}

/* Shared work-surface contract. Dynamic lists receive these classes from ui-system.js. */
.ats-scroll-region {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-muted) 48%, transparent)
    color-mix(in srgb, var(--border-color) 28%, transparent);
}

.ats-scroll-region:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.ats-scroll-region::-webkit-scrollbar { width: 10px; height: 10px; }
.ats-scroll-region::-webkit-scrollbar-track { background: color-mix(in srgb, var(--border-color) 28%, transparent); }
.ats-scroll-region::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text-muted) 48%, transparent);
  background-clip: padding-box;
}

.ats-data-region {
  position: relative;
  isolation: isolate;
}

.ats-data-region.has-horizontal-overflow {
  box-shadow: inset -12px 0 12px -14px color-mix(in srgb, var(--text-primary) 48%, transparent);
}

.ats-data-region.has-horizontal-overflow.scrolled-x {
  box-shadow:
    inset 12px 0 12px -14px color-mix(in srgb, var(--text-primary) 48%, transparent),
    inset -12px 0 12px -14px color-mix(in srgb, var(--text-primary) 48%, transparent);
}

#uiDensityBtn[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border-color));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-bg));
  color: var(--accent);
}

/* Tables and grid-like registers use one readable density scale. */
.staff-synthesis-list .staff-table th,
.staff-synthesis-list .staff-table td {
  padding: var(--ats-cell-pad-y) var(--ats-cell-pad-x);
}

#settingUserPage .user-access-row,
.drive-file-row,
.connected-device-row,
.server-audit-row,
.security-log-item,
.activity-log-item,
.access-approval-row,
.module-diagnostic-item,
.system-health-item {
  min-height: var(--ats-row-height);
  padding-block: var(--ats-cell-pad-y);
}

.staff-synthesis-list .staff-table tbody tr,
.user-access-row,
.drive-file-row,
.hr-employee-row,
.hr-contract-row,
.hr-request-row,
.connected-device-row,
.server-audit-row,
.security-log-item,
.activity-log-item,
.access-approval-row,
.module-diagnostic-item,
.system-health-item {
  min-height: var(--ats-row-height);
}

.staff-synthesis-list .staff-table td,
.user-access-row,
.drive-file-row,
.hr-employee-row,
.hr-contract-row,
.hr-request-row,
.connected-device-row,
.server-audit-row,
.security-log-item,
.activity-log-item,
.access-approval-row,
.module-diagnostic-item,
.system-health-item {
  font-size: 13px;
  line-height: 1.35;
}

.user-access-row,
.drive-file-row,
.hr-employee-row,
.hr-contract-row,
.hr-request-row,
.connected-device-row,
.server-audit-row,
.security-log-item,
.activity-log-item,
.access-approval-row,
.module-diagnostic-item,
.system-health-item {
  border-radius: var(--ats-radius-control);
}

.staff-table tbody tr:focus-visible,
.user-access-row:focus-visible,
.drive-file-row:focus-visible,
.hr-employee-row:focus-visible,
.connected-device-row:focus-visible,
.server-audit-row:focus-visible,
.security-log-item:focus-visible,
.activity-log-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Keep toolbar and headers visible while only the data region scrolls. */
.staff-list-dock-head,
.database-panel-head,
.drive-table-head,
.user-access-header {
  background: var(--table-header-bg);
}

.drive-table-head,
.user-access-header,
.staff-table thead th {
  position: sticky;
  top: 0;
  z-index: 8;
}

.staff-list-dock-head,
.settings-tab-bar {
  box-shadow: 0 5px 14px color-mix(in srgb, var(--shadow-color) 70%, transparent);
}

.settings-tab-bar {
  gap: 2px;
  overflow-x: auto;
  border-radius: var(--ats-radius-panel);
  background: var(--panel-bg);
  scrollbar-width: thin;
}

.settings-tab-bar .settings-tab {
  min-height: 38px;
  padding-inline: 13px;
  font-size: 12px;
}

/* Bounded lists. The page remains the only outer vertical scroll owner. */
#settingUserPage .user-access-list,
#settingUserPage .access-approval-list,
#settingUserPage .connected-device-list,
#settingUserPage .server-audit-log-list,
#settingUserPage .security-log-list,
#settingDiagnosticsPage .module-diagnostic-list,
#settingDiagnosticsPage .system-health-list,
#settingDiagnosticsPage .activity-log-list,
.staff-synthesis-list .staff-table-panel,
.drive-table-panel,
.hr-employee-list,
.hr-contract-list,
.hr-request-list,
.hr-operation-list {
  max-height: min(62vh, 660px);
}

.drive-table-panel .drive-file-list {
  max-height: none;
  overflow: visible;
}

.movement-list-panel .movement-cards {
  padding-bottom: 28px;
  scroll-padding-block: 12px 28px;
}

.movement-list-panel .movement-cards::after { content: none; }
.movement-list-panel .movement-card:last-child { scroll-margin-bottom: 28px; }

/* Preserve every column on narrow screens instead of silently hiding data. */
@media (max-width: 900px) {
  #settingUserPage .user-access-list,
  .drive-table-panel,
  .hr-employee-list {
    overflow-x: auto;
  }

  #settingUserPage .user-access-header,
  #settingUserPage .user-access-row {
    display: grid;
    min-width: 1080px;
  }

  .drive-table-head,
  .drive-file-row {
    display: grid;
    min-width: 900px;
  }

  .drive-file-row > span,
  .hr-employee-row > span:not(.hr-person-avatar) {
    display: block;
  }

  .hr-employee-row {
    grid-template-columns: 40px minmax(220px, 1fr) minmax(110px, .35fr) auto auto;
    min-width: 740px;
  }

  .staff-synthesis-list .staff-table { min-width: 980px; }
}

@media (max-width: 620px) {
  #settingUserPage .user-access-header { display: grid; }
  .settings-tab-bar .settings-tab { min-height: 40px; padding-inline: 11px; }
  .staff-synthesis-list .staff-table { min-width: 920px; }
}

@media (prefers-reduced-motion: reduce) {
  .ats-scroll-region { scroll-behavior: auto; }
}