/*
 * YoloWork core design system.
 *
 * This is the only stylesheet entrypoint in the product. Pages inherit tokens
 * and components from here; module selectors below are reserved for layout and
 * domain-specific states, never for private copies of shared controls.
 */
@layer modules, ui-core, ui-layout;

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro-light.woff") format("woff");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@layer modules {
/* Personnel page 22: one visual and interaction contract for every personnel screen. */
.personnel-screen {
  display: grid;
  gap: var(--ds-sp-4);
  min-width: 0;
}

.personnel-screen > .page-head,
.personnel-screen > .section,
.personnel-screen > .notice,
.personnel-screen > .personnel-header-controls,
.personnel-screen > .payroll-toolbar,
.personnel-screen > .payroll-dashboard,
.personnel-screen > .payroll-ledger-head,
.personnel-screen > .payroll-departments {
  margin-bottom: 0;
}

.personnel-page-head {
  min-height: 78px;
  align-items: flex-start;
}

.personnel-page-head > :first-child > p,
.personnel-list-head > :first-child {
  min-height: 0;
}

.personnel-page-head h1 {
  margin-top: var(--ds-sp-1);
  font-size: 28px;
  font-weight: var(--ds-weight-bold);
}

.personnel-page-head p {
  max-width: 720px;
  margin-top: var(--ds-sp-1);
  color: var(--ds-muted);
  font-size: var(--ds-font-base);
}

.personnel-header-controls {
  min-height: 60px;
  padding: var(--ds-sp-2);
  border: 1px solid var(--ds-line);
  background: var(--ds-surface);
}

.personnel-header-controls .personnel-directory-switch,
.segmented-control.personnel-reference-switch {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
}

.personnel-header-controls .personnel-directory-switch a,
.personnel-reference-switch a {
  min-height: var(--ds-control-compact);
  border: 1px solid transparent;
  border-radius: var(--ds-r-2);
  background: transparent;
  color: var(--ds-text-soft);
  font-size: var(--ds-font-sm);
  font-weight: var(--ds-weight-semibold);
}

.personnel-header-controls .personnel-directory-switch a.is-active,
.personnel-reference-switch a.is-active {
  border-color: var(--ds-accent);
  background: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
  box-shadow: none;
}

.personnel-settings-menu > summary {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-color: var(--ds-line);
  background: var(--ds-surface);
}

.personnel-directory-surface {
  padding: var(--ds-sp-4);
  overflow: visible;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.personnel-directory-primary-row,
.personnel-directory-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-3);
}

.personnel-directory-primary-row {
  margin-bottom: var(--ds-sp-4);
}

.personnel-directory-primary-row h2 {
  margin-top: var(--ds-sp-1);
  font-size: var(--ds-font-lg);
}

.personnel-directory-primary-row p {
  margin-top: var(--ds-sp-1);
  color: var(--ds-muted);
  font-size: var(--ds-font-sm);
}

.personnel-directory-toolbar {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: var(--ds-sp-3);
}

.personnel-search-field,
.personnel-source-field {
  flex: 1 1 240px;
  max-width: 300px;
}

.personnel-search-field .text-input,
.personnel-source-field .text-input {
  font-size: var(--ds-font-md);
}

.personnel-filter-form {
  margin-left: auto;
}

.personnel-local-filter-status {
  min-width: 72px;
  color: var(--ds-muted);
  font-size: var(--ds-font-xs);
  text-align: right;
}

.personnel-table th,
.personnel-table td {
  height: 56px;
  padding: var(--ds-sp-3) var(--ds-sp-4);
}

.personnel-table th {
  background: var(--ds-surface-muted);
  color: var(--ds-muted);
}

.personnel-table th:first-child { width: 30%; }
.personnel-table th:nth-child(2) { width: 34%; }
.personnel-table th:nth-child(3) { width: 18%; }

.personnel-table td:nth-child(2) {
  display: table-cell;
}

.personnel-role-stack {
  display: grid;
  gap: 2px;
}

.personnel-role-stack small,
.role-master-row small {
  display: block;
  margin-top: 2px;
  color: var(--ds-muted);
  font-size: var(--ds-font-xs);
}

.personnel-role-name {
  color: var(--ds-text-soft);
  font-weight: var(--ds-weight-medium);
}

.roles-master-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 430px;
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
}

.roles-master-list {
  background: var(--ds-surface-muted);
}

.role-master-row {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-2) var(--ds-sp-4);
  border-bottom: 1px solid var(--ds-line);
  cursor: pointer;
}

.role-master-row:hover,
.role-master-row:focus-visible {
  background: var(--ds-accent-soft);
}

.role-master-row > span:first-child {
  min-width: 0;
}

.role-master-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-master-count {
  min-width: 26px;
  color: var(--ds-muted);
  font-size: var(--ds-font-sm);
  text-align: right;
}

.workshop-create-dropdown > summary {
  list-style: none;
}

.workshop-create-dropdown > summary::-webkit-details-marker {
  display: none;
}

.workshop-create-form {
  width: min(420px, calc(100vw - var(--ds-sp-8)));
  grid-template-columns: 1fr;
  padding: var(--ds-sp-4);
}

.workshop-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-sp-3);
}

.workshop-card {
  display: grid;
  min-height: 176px;
  align-content: start;
  gap: var(--ds-sp-2);
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
  transition: border-color var(--ds-motion-fast) var(--ds-ease),
    background var(--ds-motion-fast) var(--ds-ease),
    transform var(--ds-motion-fast) var(--ds-ease);
}

.workshop-card:hover,
.workshop-card:focus-visible {
  border-color: var(--ds-accent);
  background: var(--ds-accent-soft);
  transform: translateY(-1px);
}

.workshop-card-head,
.workshop-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-2);
}

.workshop-card-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--ds-r-full);
  background: var(--workshop-color, var(--ds-accent));
}

.workshop-card-color-2 { --workshop-color: #f47b20; }
.workshop-card-color-3 { --workshop-color: #8156d9; }
.workshop-card-color-4 { --workshop-color: var(--ds-success); }
.workshop-card-color-5 { --workshop-color: #d34f73; }
.workshop-card-color-6 { --workshop-color: var(--ds-warning); }

.workshop-card h3 {
  margin-top: var(--ds-sp-3);
  font-size: 18px;
}

.workshop-card p,
.workshop-card footer {
  color: var(--ds-muted);
  font-size: var(--ds-font-xs);
}

.workshop-card footer {
  margin-top: auto;
  padding-top: var(--ds-sp-3);
  border-top: 1px solid var(--ds-line);
}

.workshop-card footer strong {
  color: var(--ds-text-soft);
}

.seniority-rule-list {
  overflow: hidden;
  gap: 0;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
}

.seniority-rule-row {
  border-bottom: 1px solid var(--ds-line);
  background: var(--ds-surface);
}

.seniority-rule-row:last-child {
  border-bottom: 0;
}

.seniority-rule-row > summary {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(150px, .7fr) minmax(220px, 1fr) auto;
  min-height: 88px;
  align-items: center;
  gap: var(--ds-sp-4);
  padding: var(--ds-sp-3) var(--ds-sp-4);
  cursor: pointer;
  list-style: none;
}

.seniority-rule-row > summary::-webkit-details-marker {
  display: none;
}

.seniority-rule-row > summary:hover,
.seniority-rule-row[open] > summary {
  background: var(--ds-accent-soft);
}

.seniority-rule-row > summary > span:not(.seniority-edit-label) {
  display: grid;
  gap: 3px;
}

.seniority-rule-row small {
  color: var(--ds-muted);
  font-size: var(--ds-font-xs);
}

.seniority-rule-row .seniority-rule-card {
  grid-template-columns: minmax(220px, 1fr) minmax(160px, .6fr) auto;
  padding: var(--ds-sp-4);
  border: 0;
  border-top: 1px solid var(--ds-line);
  border-radius: 0;
  background: var(--ds-surface-muted);
}

.employee-card-dialog,
.role-card-dialog {
  background: var(--ds-surface);
}

.employee-card-head {
  min-height: 72px;
}

.employee-card-tabs {
  border-color: var(--ds-line);
  background: var(--ds-surface);
}

.employee-card-tab.is-active {
  border: 1px solid var(--ds-accent);
  background: var(--ds-accent-soft);
  box-shadow: none;
}

.personnel-screen .payroll-dashboard-kpis > article,
.personnel-screen .personnel-summary-item {
  min-height: 102px;
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.personnel-screen .personnel-summary-grid {
  gap: var(--ds-sp-3);
  border: 0;
  background: transparent;
}

.personnel-screen .personnel-summary-item {
  border-right: 1px solid var(--ds-line);
}

.personnel-screen .personnel-summary-item strong {
  font-size: 22px;
}

.personnel-screen .payroll-dashboard-panel,
.personnel-screen .payroll-section,
.personnel-screen .payroll-department {
  border-color: var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

@media (max-width: 1000px) {
  .workshop-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roles-master-layout,
  .seniority-rule-row > summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .roles-master-list {
    max-height: 340px;
    overflow-y: auto;
    border-right: 0;
    border-bottom: 1px solid var(--ds-line);
  }
}

@media (max-width: 700px) {
  .personnel-screen {
    gap: var(--ds-sp-3);
  }

  .personnel-page-head {
    min-height: 0;
  }

  .personnel-page-head h1 {
    font-size: 24px;
  }

  .personnel-header-controls,
  .personnel-directory-primary-row,
  .personnel-directory-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .personnel-header-controls .personnel-directory-switch,
  .segmented-control.personnel-reference-switch,
  .personnel-search-field,
  .personnel-source-field {
    width: 100%;
    max-width: none;
  }

  .personnel-search-field,
  .personnel-source-field {
    flex: 0 0 auto;
  }

  .personnel-settings-menu {
    align-self: flex-end;
  }

  .personnel-filter-form {
    width: 100%;
    margin-left: 0;
  }

  .personnel-secondary-filter {
    margin-left: 0;
  }

  .personnel-role-stack {
    max-width: 56%;
    justify-items: end;
    text-align: right;
  }

  .workshop-card-grid,
  .seniority-rule-row .seniority-rule-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .seniority-rule-row > summary {
    min-height: 0;
  }

  .seniority-edit-label {
    width: 100%;
  }
}
}

@layer modules {
.payroll-analysis-filter {
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.payroll-page-head {
  align-items: center;
  margin-bottom: 0;
}

.payroll-head-actions {
  align-items: center;
}

.payroll-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface-muted);
}

.segmented-control.payroll-view-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(136px, 1fr));
  flex: 0 0 auto;
}

.payroll-analysis-filter {
  margin-left: auto;
}

.analysis-filter-status:empty {
  display: none;
}

.analysis-filter-status {
  flex-basis: 100%;
  color: var(--ds-danger);
  font-size: var(--ds-font-xs);
  text-align: right;
}

@media (min-width: 900px) {
  .page:has(> .payroll-analysis-page) {
    width: 100%;
    max-width: none;
  }
}

.payroll-period-navigator {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-1);
}

.payroll-period-step {
  width: var(--ds-control-compact);
  min-width: var(--ds-control-compact);
  height: var(--ds-control-compact);
  color: var(--ds-text);
  font-size: 22px;
  text-decoration: none;
}

.payroll-period-trigger {
  min-width: 168px;
  justify-content: center;
}

.payroll-period-trigger .ui-dropdown-caret {
  margin-left: var(--ds-sp-1);
}

.payroll-dashboard {
  gap: var(--ds-sp-4);
}

.payroll-dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ds-sp-2);
}

.payroll-dashboard-kpis article {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--ds-sp-1);
  min-height: 96px;
  padding: var(--ds-sp-3) var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
  box-shadow: none;
}

.payroll-dashboard-kpis span,
.payroll-dashboard-kpis small {
  color: var(--ds-muted);
}

.payroll-dashboard-kpis span {
  font-size: var(--ds-font-sm);
  font-weight: var(--ds-weight-semibold);
}

.payroll-kpi-label {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
}

.payroll-kpi-label svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--ds-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.payroll-dashboard-kpis strong {
  font-size: clamp(18px, 1.55vw, 26px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: var(--ds-line-tight);
  white-space: nowrap;
}

.payroll-dashboard-kpis small {
  min-height: 18px;
  font-size: var(--ds-font-xs);
}

.payroll-dashboard-kpis article:first-child small {
  color: var(--ds-success);
  font-weight: var(--ds-weight-semibold);
}

.payroll-dashboard-visuals {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr);
  gap: var(--ds-sp-3);
  align-items: start;
}

.payroll-dashboard-panel {
  min-width: 0;
  margin-bottom: 0;
  padding: var(--ds-sp-5);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
  box-shadow: none;
}

.payroll-daily-section {
  display: grid;
  align-content: start;
  gap: var(--ds-sp-3);
}

.payroll-panel-total {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.payroll-cartesian-chart {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--ds-sp-2);
  min-width: 0;
}

.payroll-chart-y-axis {
  display: flex;
  height: 176px;
  flex-direction: column;
  justify-content: space-between;
  color: var(--ds-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
}

.payroll-day-chart {
  position: relative;
  display: grid;
  align-items: end;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: clamp(1px, 0.2vw, var(--ds-sp-1));
  min-width: 0;
  height: 204px;
  overflow: visible;
}

.payroll-day-chart::before {
  position: absolute;
  inset: 0 0 28px;
  border-bottom: 1px solid var(--ds-line-strong);
  border-left: 1px solid var(--ds-line-strong);
  background: linear-gradient(to bottom, var(--ds-line) 1px, transparent 1px);
  background-size: 100% 25%;
  content: "";
  pointer-events: none;
}

.payroll-day {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  height: 204px;
  grid-template-rows: 176px 28px;
  align-items: end;
  padding: 0 2px;
  color: var(--ds-muted);
  font-size: var(--ds-font-xs);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--ds-motion-fast) var(--ds-ease),
    color var(--ds-motion-fast) var(--ds-ease);
}

.payroll-day:hover,
.payroll-day:focus-visible {
  background: var(--ds-surface-muted);
  color: var(--ds-accent-strong);
}

.payroll-day::after {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 50%;
  min-width: 112px;
  padding: var(--ds-sp-2) var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-2);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-popover);
  color: var(--ds-text);
  content: attr(data-chart-label) "\A" attr(data-chart-value);
  font-size: var(--ds-font-sm);
  font-weight: var(--ds-weight-semibold);
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, 6px);
  transition: opacity var(--ds-motion-fast) var(--ds-ease),
    transform var(--ds-motion-fast) var(--ds-ease);
  white-space: pre;
}

.payroll-day:hover::after,
.payroll-day:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.payroll-day.has-payroll-anomaly::after {
  border-color: var(--ds-warning-line);
  content: attr(data-chart-label) "\A" attr(data-chart-value) "\A" attr(data-chart-alert);
}

.payroll-day-chart.is-dense .payroll-day:nth-child(even) > span {
  opacity: 0;
}

.payroll-day-bar {
  position: relative;
  z-index: 1;
  width: 78%;
  min-width: 4px;
  max-width: 48px;
  height: 176px;
  justify-self: center;
  overflow: visible;
}

.payroll-day-bar-value {
  fill: var(--ds-accent);
  transition: fill var(--ds-motion-fast) var(--ds-ease);
}

.payroll-day:hover .payroll-day-bar-value,
.payroll-day:focus-visible .payroll-day-bar-value {
  fill: var(--ds-accent-strong);
}

.payroll-day.has-payroll-anomaly .payroll-day-bar-value,
.payroll-day.has-payroll-anomaly:hover .payroll-day-bar-value,
.payroll-day.has-payroll-anomaly:focus-visible .payroll-day-bar-value {
  fill: var(--ds-warning);
}

.payroll-day.has-payroll-anomaly > span {
  color: var(--ds-warning);
  font-weight: var(--ds-weight-semibold);
}

.payroll-day > span {
  align-self: end;
  padding-bottom: 2px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: clip;
  white-space: nowrap;
}

.payroll-analysis-kpis {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.payroll-analysis-kpis small {
  color: var(--ds-muted);
  font-size: 11px;
}

.payroll-kpi-unavailable strong {
  color: var(--ds-muted);
}

.payroll-distribution {
  display: grid;
  align-content: start;
  gap: var(--ds-sp-3);
}

.payroll-distribution-head {
  align-items: center;
  margin-bottom: 0;
}

.payroll-distribution-title-options {
  display: inline-grid;
  vertical-align: baseline;
}

.payroll-distribution-title-option {
  grid-area: 1 / 1;
}

.payroll-distribution-title-option.is-inactive {
  visibility: hidden;
}

.segmented-control.payroll-distribution-switch {
  display: inline-grid;
  width: max-content;
  grid-template-columns: max-content max-content;
  flex: 0 0 auto;
}

.payroll-distribution-switch a {
  min-height: var(--ds-control-compact);
  padding: var(--ds-sp-2) var(--ds-sp-3);
  font-size: var(--ds-font-xs);
}

.payroll-view-switch a:hover:not(.is-active),
.payroll-distribution-switch a:hover:not(.is-active) {
  background: var(--ds-surface-muted);
  color: var(--ds-text);
}

.payroll-distribution-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-sp-3);
  align-items: center;
}

.payroll-distribution-projections {
  display: grid;
  min-width: 0;
}

.payroll-distribution-projection {
  min-width: 0;
  grid-area: 1 / 1;
}

.payroll-distribution-projection.is-inactive {
  visibility: hidden;
  pointer-events: none;
}

.payroll-donut-wrap {
  display: grid;
  place-items: center;
  min-height: 148px;
}

.payroll-donut-chart {
  position: relative;
  width: min(100%, 156px);
  aspect-ratio: 1;
}

.payroll-donut {
  display: block;
  width: 100%;
  overflow: visible;
}

.payroll-donut circle {
  fill: none;
  stroke-width: 17;
}

.payroll-donut-series {
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
}

.payroll-donut-track {
  stroke: var(--ds-surface-muted);
}

.payroll-donut-segment {
  stroke-linecap: butt;
  transition-property: opacity, stroke-width;
  transition-duration: var(--ds-motion-fast);
  transition-timing-function: var(--ds-ease);
}

.payroll-donut-cell {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.payroll-donut-segment-hit {
  stroke: transparent;
  stroke-width: 34;
  pointer-events: stroke;
}

.payroll-donut-chart.is-interacting .payroll-donut-cell:not(.is-active) .payroll-donut-segment {
  opacity: 0.42;
}

.payroll-donut-cell.is-active .payroll-donut-segment {
  stroke-width: 21;
}

.payroll-donut-segment-1 { stroke: var(--ds-accent); }
.payroll-donut-segment-2 { stroke: #f47b20; }
.payroll-donut-segment-3 { stroke: #8156d9; }
.payroll-donut-segment-4 { stroke: var(--ds-success); }
.payroll-donut-segment-5 { stroke: #d34f73; }
.payroll-donut-segment-6 { stroke: var(--ds-warning); }

.payroll-donut-total {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  width: 58%;
  justify-items: center;
  transform: translate(-50%, -50%);
  text-align: center;
  transition-property: opacity;
  transition-duration: var(--ds-motion-fast);
  transition-timing-function: var(--ds-ease);
}

.payroll-donut-total span,
.payroll-donut-total small {
  color: var(--ds-muted);
  font-size: 10px;
}

.payroll-donut-total strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--ds-text);
  font-size: 14px;
  font-weight: var(--ds-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--ds-line-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payroll-distribution-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--ds-sp-3);
}

.payroll-distribution-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: var(--ds-sp-2);
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: var(--ds-sp-1) 0;
  border-top: 1px solid var(--ds-line);
}

.payroll-distribution-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payroll-donut-tooltip {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  display: grid;
  width: 112px;
  min-height: 64px;
  align-content: center;
  gap: 2px;
  padding: var(--ds-sp-2);
  visibility: hidden;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-2);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-popover);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  text-align: center;
  transition-property: opacity;
  transition-duration: var(--ds-motion-fast);
  transition-timing-function: var(--ds-ease);
}

.payroll-donut-tooltip > span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ds-muted);
  font-size: 10px;
  line-height: var(--ds-line-tight);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.payroll-donut-tooltip strong {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: var(--ds-line-tight);
  white-space: nowrap;
}

.payroll-donut-chart.is-interacting .payroll-donut-total {
  visibility: hidden;
  opacity: 0;
}

.payroll-donut-chart.is-interacting .payroll-donut-tooltip {
  visibility: visible;
  opacity: 1;
}

.payroll-distribution-share {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.payroll-distribution-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--ds-r-full);
}

.payroll-distribution-dot-1 { background: var(--ds-accent); }
.payroll-distribution-dot-2 { background: #f47b20; }
.payroll-distribution-dot-3 { background: #8156d9; }
.payroll-distribution-dot-4 { background: var(--ds-success); }
.payroll-distribution-dot-5 { background: #d34f73; }
.payroll-distribution-dot-6 { background: var(--ds-warning); }

.payroll-day-detail,
.payroll-day-department {
  display: grid;
  gap: var(--ds-sp-4);
}

.payroll-day-department + .payroll-day-department {
  padding-top: var(--ds-sp-4);
  border-top: 1px solid var(--ds-line);
}

.payroll-day-detail .data-table td:last-child,
.payroll-day-detail .data-table th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.payroll-ledger-head {
  padding-top: var(--ds-sp-2);
}

.payroll-ledger-head > strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.payroll-table-wrap {
  overflow-x: auto;
}

.payroll-table {
  min-width: 1520px;
}

.payroll-table th:nth-child(n + 3),
.payroll-table td:nth-child(n + 3) {
  text-align: right;
  white-space: nowrap;
}

.payroll-advance-form {
  width: 108px;
  justify-content: flex-end;
  margin: 0;
}

.payroll-advance-form [data-fragment-submit-status]:empty {
  display: none;
}

.payroll-table td:nth-child(2) small {
  display: block;
  margin-top: 2px;
  color: var(--ds-muted);
}

.payroll-table-hint {
  margin: var(--ds-sp-3) 0 0;
}

.payroll-departments {
  display: grid;
  gap: var(--ds-sp-4);
}

.payroll-department {
  padding: 0;
  overflow: hidden;
}

.payroll-department-head {
  padding: var(--ds-sp-4);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--ds-motion-fast) var(--ds-ease);
}

.payroll-department-head::-webkit-details-marker {
  display: none;
}

.payroll-department-head > span {
  color: var(--ds-muted);
  font-size: var(--ds-font-sm);
  text-align: right;
}

.payroll-department-head:hover {
  background: var(--ds-surface-muted);
}

.payroll-department-head:focus-visible {
  outline: 3px solid var(--ds-accent-soft);
  outline-offset: -3px;
}

.payroll-department-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--ds-sp-3);
}

.payroll-department-title > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.payroll-department-title strong {
  overflow: hidden;
  font-size: var(--ds-font-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payroll-department-title small {
  color: var(--ds-muted);
}

.payroll-department-chevron {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--ds-motion-fast) var(--ds-ease);
}

.payroll-department[open] .payroll-department-chevron {
  transform: rotate(90deg);
}

.payroll-department[open] .payroll-department-head {
  border-bottom: 1px solid var(--ds-line);
  background: var(--ds-accent-soft);
}

.employee-card[data-employee-card-mode="payroll"] .employee-card-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employee-payroll-panel,
.employee-payroll-history {
  min-width: 0;
}

.employee-payroll-summary {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface-muted);
}

.employee-payroll-summary > div {
  display: grid;
  gap: var(--ds-sp-1);
  padding: var(--ds-sp-4);
  border-right: 1px solid var(--ds-line);
}

.employee-payroll-summary > div:last-child {
  border-right: 0;
}

.employee-payroll-summary span {
  color: var(--ds-muted);
  font-size: var(--ds-font-xs);
  font-weight: var(--ds-weight-bold);
}

.employee-payroll-summary strong {
  font-size: 20px;
}

.employee-payroll-composition {
  margin: calc(var(--ds-sp-2) * -1) 0 0;
}

.employee-payroll-action {
  display: grid;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
}

.employee-payroll-payout-form {
  grid-template-columns: minmax(140px, .7fr) minmax(240px, 1.8fr) auto;
  align-items: end;
}

.employee-payroll-adjustment-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

.employee-payroll-adjustment-form .employee-payroll-comment {
  grid-column: 1 / 3;
}

.employee-payroll-action .ui-button {
  white-space: nowrap;
}

.personnel-title-switch {
  margin-top: var(--ds-sp-1);
}

.personnel-title-switch .segmented-control a {
  padding: 9px 14px;
  font-size: 18px;
}

.segmented-control.personnel-directory-switch {
  display: inline-grid;
  width: max-content;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
}

.segmented-control.personnel-reference-switch {
  display: inline-grid;
  width: max-content;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
}

.personnel-reference-switch a {
  justify-content: center;
  text-align: center;
}

.personnel-directory-switch a {
  justify-content: center;
  text-align: center;
}

.personnel-page-head > :first-child > p {
  min-height: 38px;
}

.personnel-list-head > :first-child {
  min-height: 64px;
}

.personnel-header-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-2);
  padding: var(--ds-sp-1);
  border: 0;
  border-radius: var(--ds-r-3);
  background: var(--ds-surface-muted);
}

.personnel-header-controls .personnel-directory-switch a {
  min-height: var(--ds-control-compact);
  border-color: transparent;
  border-radius: var(--ds-r-2);
  background: transparent;
}

.personnel-header-controls .personnel-directory-switch a.is-active {
  border-color: var(--ds-line);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-sm);
}

}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro-medium.woff") format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro-bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro-black.woff") format("woff");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro-light-italic.woff") format("woff");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro-italic.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro-medium-italic.woff") format("woff");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro-bold-italic.woff") format("woff");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro-black-italic.woff") format("woff");
  font-style: italic;
  font-weight: 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ds-white: #ffffff;
  --ds-bg: #f6f7f8;
  --ds-surface: #ffffff;
  --ds-surface-muted: #fafbfc;
  --ds-line: #e5e7eb;
  --ds-line-strong: #d5d9df;
  --ds-border: var(--ds-line);
  --ds-text: #14181f;
  --ds-text-soft: #4b5563;
  --ds-muted: #6b7280;
  --ds-text-muted: var(--ds-muted);
  --ds-accent: #5b7dbe;
  --ds-accent-strong: #4c6fac;
  --ds-accent-soft: #eef2fa;
  --ds-success: #2f8f5b;
  --ds-success-soft: #e9f6ee;
  --ds-success-line: #bfe3cd;
  --ds-warning: #8a5b11;
  --ds-warning-soft: #fff4e0;
  --ds-warning-line: #f2dcb0;
  --ds-warning-border: var(--ds-warning-line);
  --ds-danger: #d64541;
  --ds-danger-soft: #fdecec;
  --ds-danger-line: #f4c9c7;
  --ds-danger-action: #a61b1b;
  --ds-danger-action-hover: #7d1111;
  --ds-menu-star: #15803d;
  --ds-menu-puzzle: #7c3aed;
  --ds-menu-plowhorse: #c2410c;
  --ds-menu-dog: #64748b;
  --ds-shadow-sm: 0 1px 2px rgb(20 24 31 / 6%);
  --ds-shadow: 0 4px 10px rgb(20 24 31 / 8%), 0 1px 2px rgb(20 24 31 / 5%);
  --ds-shadow-raised: var(--ds-shadow);
  --ds-shadow-popover: 0 10px 15px -3px rgb(20 24 31 / 12%), 0 4px 6px -4px rgb(20 24 31 / 10%);
  --ds-shadow-modal: 0 10px 15px -3px rgb(20 24 31 / 16%), 0 4px 6px -4px rgb(20 24 31 / 12%);
  --ds-overlay: rgb(20 24 31 / 64%);
  --ds-r-1: 4px;
  --ds-r-2: 6px;
  --ds-r-3: 8px;
  --ds-r-full: 999px;
  --ds-radius-md: var(--ds-r-2);
  --ds-radius-lg: var(--ds-r-3);
  --ds-sp-1: 4px;
  --ds-sp-2: 8px;
  --ds-sp-3: 12px;
  --ds-sp-4: 16px;
  --ds-sp-5: 20px;
  --ds-sp-6: 24px;
  --ds-sp-7: 28px;
  --ds-sp-8: 32px;
  --ds-sp-9: 36px;
  --ds-sp-10: 40px;
  --ds-control: 44px;
  --ds-control-compact: 36px;
  --ds-control-small: 28px;
  --ds-control-short: 112px;
  --ds-form-column-min: 220px;
  --ds-font-xs: 11px;
  --ds-font-sm: 12px;
  --ds-font-md: 13px;
  --ds-font-base: 14px;
  --ds-font-lg: 16px;
  --ds-font-xl: 20px;
  --ds-font-2xl: 24px;
  --ds-line-tight: 1.25;
  --ds-line-base: 1.45;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;
  --ds-motion-fast: 100ms;
  --ds-motion-base: 200ms;
  --ds-motion-slow: 800ms;
  --ds-ease: cubic-bezier(.2, 0, 0, 1);
  --ds-disabled-opacity: .58;
  --ds-focus-ring: 0 0 0 3px var(--ds-accent-soft);
  --ds-dialog-compact: 480px;
  --ds-dialog: 672px;
  --ds-dialog-wide: 960px;
  --ds-side-nav: 240px;
  --ds-side-nav-collapsed: 60px;
  --ds-bottom-nav: 64px;
  --ds-topbar: 52px;
  --ds-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --ds-font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --ds-surface-subtle: var(--ds-surface-muted);
}

@media (max-width: 599px) {
  :root {
    --ds-control-compact: 44px;
  }
}

@layer modules {
/* Analysis: autonomous ABC and menu-engineering module. */
.analysis-page-head {
  align-items: flex-start;
}

.analysis-source-bar,
.analysis-source-details,
.analysis-kpis {
  display: grid;
  gap: var(--ds-sp-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--ds-sp-4);
}

.analysis-source-bar,
.analysis-source-details {
  align-items: center;
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: transparent;
}

.analysis-source-bar div,
.analysis-source-details div,
.analysis-kpis article {
  display: grid;
  gap: var(--ds-sp-1);
}

.analysis-source-bar span,
.analysis-source-details span,
.analysis-kpis span {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.analysis-empty-source {
  display: grid;
  gap: var(--ds-sp-3);
  justify-items: start;
}

.analysis-missing-fields {
  max-width: 100%;
  padding: var(--ds-sp-3);
  overflow-wrap: anywhere;
  border-radius: var(--ds-r-2);
  background: var(--ds-surface-muted);
}

.analysis-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--ds-sp-3);
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.analysis-filter-select {
  min-width: 160px;
}

.analysis-filter-select .text-input {
  min-height: 36px;
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
}

.analysis-filter-pill {
  white-space: nowrap;
}

.analysis-filter-menu {
  width: max-content;
}

.analysis-filter-options {
  display: grid;
}

.analysis-filter-option {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
}

.analysis-filter-menu-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-sp-1);
  padding-bottom: var(--ds-sp-1);
  border-bottom: 1px solid var(--ds-line);
}

.analysis-filter-divider {
  height: 1px;
  margin: var(--ds-sp-1) 0;
  background: var(--ds-line);
}

.analysis-date-range {
  display: grid;
  gap: var(--ds-sp-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analysis-date-range label {
  display: grid;
  gap: var(--ds-sp-1);
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 700;
}

.analysis-filter-apply {
  width: 100%;
  margin-top: var(--ds-sp-1);
  justify-content: center;
}

.analysis-filter-submit {
  margin-left: auto;
}

.analysis-filter-unavailable {
  background: var(--ds-surface-muted);
  color: var(--ds-muted);
  opacity: .78;
}

.analysis-tabs,
.analysis-tab-list,
.analysis-controls,
.segmented-control {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
  flex-wrap: wrap;
}

.segmented-control a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--ds-line-strong);
  border-radius: 999px;
  color: var(--ds-text-soft);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.segmented-control a.is-active {
  border-color: var(--ds-accent);
  background: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
}

.analysis-tabs {
  justify-content: space-between;
  margin-bottom: var(--ds-sp-4);
}

.analysis-tab-list {
  display: inline-flex;
  padding: var(--ds-sp-1);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface-muted);
}

.analysis-tab {
  padding: 8px 14px;
  border-radius: var(--ds-r-2);
  color: var(--ds-muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.analysis-tab.is-active {
  background: var(--ds-surface);
  box-shadow: 0 2px 8px rgb(20 24 31 / 8%);
  color: var(--ds-text);
}

.analysis-export {
  margin-right: 0;
  margin-left: auto;
}

.analysis-kpis article {
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
}

.analysis-kpis strong {
  font-size: 20px;
}

.analysis-kpis small {
  color: var(--ds-muted);
  font-size: 11px;
  line-height: 1.35;
}

.analysis-panel {
  padding: 0;
  overflow: hidden;
}

.analysis-section-head,
.analysis-controls {
  padding: var(--ds-sp-4);
}

.analysis-controls {
  justify-content: space-between;
  border-top: 1px solid var(--ds-line);
}

.analysis-controls label {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
  color: var(--ds-text-soft);
  font-size: 14px;
}

.analysis-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.analysis-table {
  min-width: 920px;
}

.analysis-table td strong,
.analysis-table td small {
  display: block;
}

.analysis-table td small {
  margin-top: 3px;
  color: var(--ds-muted);
}

.abc-letter {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.abc-a { background: #dcfce7; color: #166534; }
.abc-b { background: #fef3c7; color: #92400e; }
.abc-c { background: #fee2e2; color: #991b1b; }

.menu-quadrants {
  display: grid;
  gap: var(--ds-sp-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 var(--ds-sp-4) var(--ds-sp-4);
}

.menu-card {
  display: grid;
  gap: var(--ds-sp-2);
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-left-width: 4px;
  border-radius: var(--ds-r-3);
  background: var(--ds-surface-muted);
}

.menu-card p {
  margin: 0;
  color: var(--ds-text-soft);
  font-size: 13px;
}

.menu-star { --menu-color: var(--ds-menu-star); }
.menu-puzzle { --menu-color: var(--ds-menu-puzzle); }
.menu-plowhorse { --menu-color: var(--ds-menu-plowhorse); }
.menu-dog { --menu-color: var(--ds-menu-dog); }
.menu-card { border-left-color: var(--menu-color); }

.menu-label {
  color: var(--menu-color);
  font-weight: 700;
}

.menu-scatter-wrap {
  padding: 0 var(--ds-sp-4) var(--ds-sp-4);
  overflow-x: auto;
}

.menu-scatter {
  width: 100%;
  min-width: 620px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.menu-scatter text {
  fill: var(--ds-text-soft);
  stroke: none;
  font-size: 12px;
  font-weight: 700;
}

.menu-zone { stroke: none; opacity: .09; fill: var(--menu-color); }
.menu-median { stroke: var(--ds-line-strong); stroke-dasharray: 5 5; }
.menu-axis { stroke: var(--ds-text-soft); }
.menu-dot { fill: var(--menu-color); stroke: #fff; stroke-width: 1.5; opacity: .82; }
.menu-axis-label { font-size: var(--ds-font-xs); }

.analysis-footnote {
  color: var(--ds-muted);
  font-size: 12px;
}


.analysis-drill-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-3);
  margin: 0 var(--ds-sp-4) var(--ds-sp-3);
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-accent);
  border-radius: var(--ds-r-2);
  background: var(--ds-accent-soft);
}

.analysis-drill-context div {
  display: grid;
  gap: 2px;
}

.analysis-drill-context span {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.analysis-abc-bands {
  display: grid;
  gap: var(--ds-sp-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 var(--ds-sp-4) var(--ds-sp-4);
}

.analysis-abc-band {
  display: grid;
  align-items: center;
  gap: 2px var(--ds-sp-2);
  grid-template-columns: auto 1fr;
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface-muted);
  color: var(--ds-text);
  text-decoration: none;
}

.analysis-abc-band .abc-letter {
  grid-row: span 3;
}

.analysis-abc-band > span:not(.abc-letter),
.analysis-abc-band small {
  color: var(--ds-muted);
}

.analysis-abc-band.is-active {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 2px var(--ds-accent-soft);
}

.analysis-table-dense {
  min-width: 1180px;
  font-size: 12px;
}

.analysis-position-table {
  width: 1320px;
  min-width: 1320px;
  table-layout: fixed;
}

.analysis-position-table-wrap {
  height: clamp(420px, 68dvh, 720px);
  overflow: auto;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-2);
  background: var(--ds-surface);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.analysis-position-table-wrap:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ds-accent) 45%, transparent);
  outline-offset: 2px;
}

.analysis-page-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
}

.analysis-alert {
  position: relative;
  z-index: 4;
  display: inline-flex;
}

.analysis-page-actions .analysis-alert-popover {
  right: 0;
  left: auto;
}

.analysis-alert-popover {
  --ui-popover-border: var(--ds-warning-line);
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--ds-sp-2));
  left: 0;
  width: min(520px, calc(100vw - 48px));
  color: var(--ds-text-soft);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  pointer-events: none;
}

.analysis-alert-error .analysis-alert-popover {
  --ui-popover-border: var(--ds-danger-line);
}

.analysis-alert-popover strong {
  color: var(--ds-text);
}

.analysis-alert:hover .analysis-alert-popover,
.analysis-alert:focus-within .analysis-alert-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.analysis-position-table th:nth-child(1),
.analysis-position-table td:nth-child(1) {
  width: 38px;
}

.analysis-position-table th:nth-child(2),
.analysis-position-table td:nth-child(2) {
  width: 132px;
}

.analysis-position-table th:nth-child(3),
.analysis-position-table td:nth-child(3) {
  width: 200px;
}

.analysis-position-table th:nth-child(n + 4):nth-child(-n + 7),
.analysis-position-table td:nth-child(n + 4):nth-child(-n + 7) {
  width: 40px;
  text-align: center;
}

.analysis-position-table th:nth-child(8),
.analysis-position-table td:nth-child(8) {
  width: 86px;
}

.analysis-position-table th:nth-child(9),
.analysis-position-table td:nth-child(9),
.analysis-position-table th:nth-child(10),
.analysis-position-table td:nth-child(10) {
  width: 92px;
}

.analysis-position-table th:nth-child(11),
.analysis-position-table td:nth-child(11) {
  width: 104px;
}

.analysis-position-table th:nth-child(12),
.analysis-position-table td:nth-child(12),
.analysis-position-table th:nth-child(13),
.analysis-position-table td:nth-child(13) {
  width: 88px;
}

.analysis-position-table th:nth-child(14),
.analysis-position-table td:nth-child(14),
.analysis-position-table th:nth-child(15),
.analysis-position-table td:nth-child(15) {
  width: 120px;
}

.analysis-position-table .analysis-cell-primary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-position-table .analysis-item-size {
  color: var(--ds-muted);
  font-weight: 500;
}

.analysis-position-table .analysis-table-metric {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ds-sp-1);
}

.analysis-position-table .analysis-table-metric strong,
.analysis-position-table .analysis-table-metric small {
  display: inline;
  margin: 0;
}

.analysis-position-table .analysis-table-profit strong {
  color: var(--ds-success);
}

.analysis-position-table thead th {
  z-index: 3;
  box-shadow: 0 1px 0 var(--ds-line);
  white-space: normal;
  vertical-align: bottom;
}

.analysis-position-table tfoot th {
  z-index: 2;
  white-space: nowrap;
}

.analysis-table-dense th,
.analysis-table-dense td {
  padding: 7px 7px;
  vertical-align: top;
  white-space: nowrap;
}

.analysis-table-dense thead th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--ds-surface-muted);
}

.analysis-table-dense thead a {
  display: inline-flex;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.analysis-table-dense thead a:hover,
.analysis-table-dense thead a:focus-visible {
  color: var(--ds-accent-strong);
  text-decoration: underline;
}

.analysis-table-dense tbody tr:hover {
  background: var(--ds-accent-soft);
}

.analysis-table-dense tfoot th {
  position: sticky;
  bottom: 0;
  background: var(--ds-surface);
  box-shadow: 0 -1px 0 var(--ds-line);
  font-weight: 800;
}

.analysis-table-dense code {
  font-size: 11px;
  white-space: nowrap;
}

.analysis-page a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ds-accent) 55%, transparent);
  outline-offset: 2px;
}

/* Finance: keep the long statement inside the available viewport. */
.income-expenses-table-shell {
  max-height: 65dvh;
  overflow-anchor: none;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.income-expenses-table-shell:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ds-accent) 55%, transparent);
  outline-offset: 2px;
}

.income-expenses-collapse-context {
  display: none;
  width: 1px;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
}

.income-expenses-table-shell.is-preserving-collapse-context
  .income-expenses-collapse-context {
  display: block;
}

.income-expenses-statement .ui-hierarchy-table {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
}

.income-expenses-statement .income-expenses-label-column {
  width: 360px;
}

.income-expenses-statement .income-expenses-value-column {
  width: 170px;
}

.income-expenses-statement .ui-hierarchy-table th:first-child,
.income-expenses-statement .ui-hierarchy-table td:first-child {
  white-space: normal;
}

.income-expenses-statement .ui-hierarchy-table th:first-child {
  z-index: 7;
  left: 0;
}

.income-expenses-statement .ui-hierarchy-table th:not(:first-child),
.income-expenses-statement .income-expenses-value-cell {
  white-space: nowrap;
}

.income-expenses-statement .income-expenses-value-cell {
  display: table-cell;
  vertical-align: middle;
}

.income-expenses-value-main {
  display: grid;
  min-height: 1.35em;
  align-items: center;
  justify-items: end;
  line-height: 1.35;
}

.income-expenses-value-percent {
  display: block;
  min-height: 1.25em;
  margin-top: 2px;
  color: var(--ds-muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.25;
  text-align: right;
}

.income-expenses-column-select {
  width: 100%;
  min-height: 60px;
  justify-content: flex-end;
  padding: 0 var(--ds-sp-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.3;
  letter-spacing: inherit;
  text-align: right;
  text-transform: inherit;
  white-space: normal;
  box-shadow: none;
}

.income-expenses-column-select:hover,
.income-expenses-column-select:focus-visible {
  border-color: transparent;
  background: color-mix(in srgb, var(--ds-accent-soft) 52%, transparent);
  color: var(--ds-text);
  box-shadow: none;
}

.income-expenses-statement .income-expenses-column-header {
  padding: 0;
}

.income-expenses-statement [data-income-column].is-income-column-selected {
  background-color: color-mix(in srgb, var(--ds-accent-soft) 42%, var(--ds-surface));
}

.income-expenses-statement
  .ui-hierarchy-row:has(.ui-hierarchy-toggle)
  > [data-income-column].is-income-column-selected::before {
  background: color-mix(
    in srgb,
    var(--ds-accent-soft) 42%,
    var(--ui-hierarchy-row-current)
  );
}

.income-expenses-value-empty {
  color: var(--ds-muted);
  font-weight: 400;
}

.income-expenses-statement .income-expenses-row-section-income {
  --ui-hierarchy-row-rest: color-mix(in srgb, var(--ds-success-soft) 62%, var(--ds-surface));
}

.income-expenses-statement .income-expenses-row-section-cost {
  --ui-hierarchy-row-rest: color-mix(in srgb, var(--ds-warning-soft) 58%, var(--ds-surface));
}

.income-expenses-statement .income-expenses-row-section-expenses {
  --ui-hierarchy-row-rest: color-mix(in srgb, var(--ds-accent-soft) 72%, var(--ds-surface));
}

.income-expenses-statement .income-expenses-row-section-uncontrolled_expenses {
  --ui-hierarchy-row-rest: color-mix(in srgb, var(--ds-danger-soft) 50%, var(--ds-surface));
}

.income-expenses-statement .income-expenses-stage-total > td {
  --ui-hierarchy-row-current: var(--ds-surface-muted);

  border-top: 1px solid var(--ds-line-strong);
  border-bottom-color: var(--ds-line-strong);
  color: var(--ds-text);
}

.income-expenses-statement .income-expenses-stage-total-gross_profit > td,
.income-expenses-statement .income-expenses-stage-total-operating_profit > td,
.income-expenses-statement .income-expenses-stage-total-profit > td {
  --ui-hierarchy-row-current: color-mix(in srgb, var(--ds-accent-soft) 48%, var(--ds-surface));
}

.income-expenses-statement .ui-hierarchy-table th:last-child,
.income-expenses-statement .ui-hierarchy-table td:last-child {
  border-left: 1px solid var(--ds-line-strong);
}

.income-expenses-row-writeoff-message .income-expenses-row-label {
  color: var(--ds-text-muted);
  font-size: var(--ds-font-sm);
}

.income-expenses-page-head {
  align-items: center;
}

.income-expenses-data-note {
  color: var(--ds-muted);
  font-size: var(--ds-font-xs);
}

.income-expenses-settings-section {
  display: grid;
  gap: var(--ds-sp-5);
}

.income-expenses-settings-dialog .modal-head {
  margin-bottom: var(--ds-sp-4);
}

.income-expenses-settings-dialog .income-expenses-settings-body,
.income-expenses-settings-dialog .income-expenses-settings-section {
  display: grid;
  gap: var(--ds-sp-4);
}

.income-expenses-settings-dialog .analysis-filter-bar,
.income-expenses-settings-dialog .income-expenses-settings-section {
  margin-bottom: 0;
}

.income-expenses-settings-dialog .income-expenses-settings-section {
  padding: 0;
  border: 0;
  box-shadow: none;
}

.income-expenses-settings-dialog .income-expenses-settings-section + .income-expenses-settings-section {
  padding-top: var(--ds-sp-5);
  border-top: 1px solid var(--ds-line);
}

.income-expenses-settings-dialog .income-expenses-settings-section > .section-head {
  display: none;
}

.income-expenses-settings-subhead {
  display: none;
}

.income-expenses-settings-dialog .income-expenses-settings-subhead {
  display: grid;
  gap: var(--ds-sp-1);
}

.income-expenses-settings-subhead > strong {
  color: var(--ds-text);
  font-size: var(--ds-font-lg);
}

.income-expenses-settings-subhead > p {
  margin: 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-font-md);
}

.income-expenses-settings-dialog .income-expenses-rule-card,
.income-expenses-settings-dialog .income-expenses-rule-form {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.income-expenses-rule-list {
  display: grid;
  gap: var(--ds-sp-3);
}

.income-expenses-rule-card,
.income-expenses-rule-form {
  display: grid;
  gap: var(--ds-sp-3);
}

.income-expenses-rule-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
}

.income-expenses-rule-form {
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr) auto auto;
  align-items: end;
}

.income-expenses-warehouse-rule-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.income-expenses-warehouse-suggestion-form {
  grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1.2fr) auto;
  align-items: end;
}

.income-expenses-rule-summary {
  display: grid;
  gap: var(--ds-sp-1);
  min-width: 0;
}

.income-expenses-rule-summary > span {
  overflow-wrap: anywhere;
  color: var(--ds-text-muted);
  font-size: var(--ds-font-sm);
}

.income-expenses-rule-create {
  padding: var(--ds-sp-4);
  border: 1px dashed var(--ds-line-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
}

.income-expenses-payment-picker {
  position: relative;
}

.income-expenses-payment-picker > .ui-dropdown-trigger {
  width: 100%;
  min-height: var(--ds-control);
  justify-content: space-between;
}

.income-expenses-payment-options {
  max-height: min(360px, 55dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.income-expenses-payment-options .ui-option span {
  overflow-wrap: anywhere;
}

.income-expenses-rule-delete {
  align-self: end;
  color: var(--ds-text-muted);
}

.income-expenses-rule-delete-form {
  display: flex;
  justify-content: flex-end;
}

.income-expenses-category-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: var(--ds-sp-3);
  align-items: end;
}

@media (max-width: 760px) {
  .income-expenses-rule-card,
  .income-expenses-rule-form,
  .income-expenses-category-form {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 960px) {
  .income-expenses-page {
    display: flex;
    height: calc(100dvh - var(--ds-sp-8) - var(--ds-sp-8));
    min-height: 0;
    flex-direction: column;
  }

  .income-expenses-statement {
    display: flex;
    min-height: 0;
    flex: 1 1 0;
    flex-direction: column;
    margin-bottom: 0;
  }

  .income-expenses-statement > .section-head {
    flex: 0 0 auto;
  }

  .income-expenses-table-shell {
    min-height: 0;
    max-height: none;
    flex: 1 1 0;
  }
}

.menu-card {
  color: var(--ds-text);
  text-decoration: none;
}

.menu-card.is-active {
  border-color: var(--menu-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--menu-color) 18%, transparent);
}
.analysis-connection-picker,
.analysis-source-form,
.analysis-group-create {
  margin-bottom: var(--ds-sp-4);
}

.analysis-group-list {
  display: grid;
  gap: var(--ds-sp-2);
  margin-top: var(--ds-sp-4);
}

.analysis-group-row {
  display: grid;
  align-items: center;
  gap: var(--ds-sp-2);
  grid-template-columns: minmax(0, 1fr) auto;
}

.analysis-group-edit {
  display: grid;
  align-items: center;
  gap: var(--ds-sp-2);
  grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.4fr) 120px;
}

.analysis-group-payment-picker {
  min-width: 0;
}

.analysis-group-payment-picker > .ui-dropdown-trigger {
  width: 100%;
}

.analysis-group-payment-picker > .ui-dropdown-menu {
  max-height: 280px;
  overflow-y: auto;
}

.analysis-group-edit .analysis-assignment-status {
  grid-column: 1 / -1;
  margin-top: calc(-1 * var(--ds-sp-1));
}

.analysis-group-delete {
  color: var(--ds-danger);
}

.analysis-group-delete:hover {
  border-color: var(--ds-danger);
  background: var(--ds-danger-soft);
}

.analysis-payment-assignment {
  display: grid;
  gap: var(--ds-sp-1);
  min-width: 220px;
}

.analysis-assignment-status {
  min-height: 16px;
  color: var(--ds-success);
  font-size: 12px;
}

.analysis-assignment-status[data-state="error"] {
  color: #8c2424;
}

@media (max-width: 1100px) {
  .menu-quadrants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .page-head.analysis-page-head {
    align-items: stretch;
    flex-direction: column;
  }

  .page-head.analysis-page-head > .secondary-button {
    display: inline-flex;
    align-self: flex-start;
  }

  .analysis-source-bar,
  .analysis-source-details,
  .analysis-kpis,
  .menu-quadrants,
  .analysis-abc-bands,
  .analysis-group-row,
  .analysis-group-edit {
    grid-template-columns: 1fr;
  }

  .analysis-filter-select,
  .analysis-dropdown,
  .analysis-filter-pill,
  .analysis-filter-submit {
    width: 100%;
  }

  .analysis-filter-select .text-input {
    width: 100%;
  }

  .analysis-filter-pill {
    justify-content: space-between;
  }

  .analysis-filter-menu {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-top: var(--ds-sp-1);
    box-shadow: none;
  }

  .analysis-group-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .analysis-group-edit {
    grid-template-columns: 1fr;
  }

  .analysis-export {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }

  .analysis-tabs {
    align-items: stretch;
    flex-direction: column;
  }

  .analysis-tab-list {
    display: flex;
  }

  .analysis-tab {
    flex: 1;
    text-align: center;
  }


  .analysis-drill-context {
    align-items: stretch;
    flex-direction: column;
    margin-right: var(--ds-sp-3);
    margin-left: var(--ds-sp-3);
  }

  .analysis-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .analysis-controls > * {
    width: 100%;
  }

  .analysis-table-dense th,
  .analysis-table-dense td {
    padding: 8px;
  }
  .analysis-order-input { max-width: none; }
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--ds-bg);
  font-family: var(--ds-font);
  color: var(--ds-text);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--ds-bg);
}

button,
input {
  font: inherit;
}

button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--ds-sp-2);
  left: var(--ds-sp-2);
  padding: var(--ds-sp-2) var(--ds-sp-3);
  border: 1px solid var(--ds-accent);
  border-radius: var(--ds-r-2);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-weight: var(--ds-weight-semibold);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--ds-sp-4)));
  transition: transform var(--ds-motion-fast) var(--ds-ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

button:not(:disabled),
a {
  cursor: pointer;
}

svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.app-shell {
  min-height: 100vh;
}

.side-nav {
  display: none;
}

.workspace {
  min-width: 0;
}

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  min-height: var(--ds-topbar);
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-3);
  padding: 10px var(--ds-sp-4);
  border-bottom: 1px solid var(--ds-line);
  background: rgb(255 255 255 / 94%);
  backdrop-filter: blur(12px);
}

.topbar-context {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.topbar-context strong {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-kicker {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--ds-sp-2);
}

.environment-badge {
  display: none;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  color: var(--ds-text-soft);
  background: var(--ds-surface-muted);
  font-size: 12px;
  font-weight: 700;
}

.avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--ds-accent);
  color: var(--ds-white);
  font-size: 14px;
  font-weight: 800;
}

.icon-button {
  display: grid;
  width: var(--ds-control);
  height: var(--ds-control);
  padding: 0;
  place-items: center;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-2);
  background: var(--ds-surface);
  color: var(--ds-text-soft);
}

.icon-button svg {
  width: 20px;
  height: 20px;
}

.icon-button:focus-visible,
.primary-button:focus-visible,
.danger-button:focus-visible,
.secondary-button:focus-visible,
.nav-item:focus-visible,
.bottom-nav-item:focus-visible,
.text-input:focus-visible {
  outline: 3px solid var(--ds-accent-soft);
  outline-offset: 2px;
}

.icon-button:active,
.primary-button:active,
.danger-button:active,
.secondary-button:active {
  transform: translateY(1px);
}

.page {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: var(--ds-sp-5) var(--ds-sp-4) calc(var(--ds-bottom-nav) + var(--ds-sp-6));
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sp-4);
  margin-bottom: var(--ds-sp-5);
}

.page-head h1,
.section-head h2,
.modal-head h2 {
  margin: 0;
  color: var(--ds-text);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.page-head p,
.section-head p,
.employee-card-section-head p {
  text-wrap: pretty;
}

.page-head h1 {
  margin-top: var(--ds-sp-1);
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.15;
}

.page-head p {
  max-width: 680px;
  margin: var(--ds-sp-2) 0 0;
  color: var(--ds-text-soft);
  font-size: 14px;
  line-height: 1.55;
}

.section-label {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.status-strip {
  display: grid;
  margin-bottom: var(--ds-sp-6);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.status-strip-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-4);
}

.status-strip-item + .status-strip-item {
  border-top: 1px solid var(--ds-line);
}

.status-strip-item div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.status-strip-item strong {
  font-size: 13px;
}

.status-strip-item span:last-child {
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.35;
}

.status-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: var(--ds-r-2);
  background: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
  font-size: 11px;
  font-weight: 800;
}

.status-icon-ready {
  background: var(--ds-success-soft);
  color: var(--ds-success);
}

.dashboard-grid {
  display: grid;
  gap: var(--ds-sp-6);
  margin-bottom: var(--ds-sp-8);
}

.section {
  min-width: 0;
  margin-bottom: var(--ds-sp-8);
}

.dashboard-grid .section {
  margin-bottom: 0;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sp-4);
  margin-bottom: var(--ds-sp-4);
}

.section-head h2 {
  margin-top: var(--ds-sp-1);
  font-size: 18px;
  line-height: 1.25;
}

.entity-list {
  display: grid;
  gap: var(--ds-sp-3);
}

.entity-card {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.entity-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--ds-r-2);
  background: var(--ds-accent-soft);
  color: var(--ds-accent);
}

.entity-icon svg {
  width: 21px;
  height: 21px;
}

.entity-copy {
  min-width: 0;
}

.entity-copy h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}

.entity-copy p {
  margin: var(--ds-sp-1) 0 0;
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.45;
}

.badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border: 1px solid var(--ds-line-strong);
  border-radius: 999px;
  color: var(--ds-text-soft);
  background: var(--ds-surface-muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

.badge-muted {
  color: var(--ds-muted);
}

.badge-ready {
  border-color: var(--ds-success-soft);
  background: var(--ds-success-soft);
  color: var(--ds-success);
}

.badge-error {
  border-color: #f1b5b5;
  background: #fff5f5;
  color: #8c2424;
}

.tool-panel {
  align-self: start;
  padding: var(--ds-sp-5);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.tool-panel-copy {
  margin: 0 0 var(--ds-sp-5);
  color: var(--ds-text-soft);
  font-size: 13px;
  line-height: 1.5;
}

.field {
  display: grid;
  gap: var(--ds-sp-2);
}

.field[hidden] {
  display: none !important;
}

.field > span {
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 700;
}

.field small {
  color: var(--ds-muted);
  font-size: 11px;
  line-height: 1.35;
}

.secret-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ds-sp-2);
}

.text-input {
  width: 100%;
  min-height: var(--ds-control);
  padding: 0 var(--ds-sp-3);
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-r-2);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 16px;
}

.text-input[readonly] {
  background: var(--ds-surface-muted);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
  margin-top: var(--ds-sp-5);
}

.primary-button,
.danger-button,
.secondary-button {
  display: inline-flex;
  min-height: var(--ds-control);
  align-items: center;
  justify-content: center;
  padding: 9px var(--ds-sp-4);
  border-radius: var(--ds-r-2);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.primary-button {
  border: 1px solid var(--ds-accent);
  background: var(--ds-accent);
  color: var(--ds-white);
}

.primary-button:hover {
  border-color: var(--ds-accent-strong);
  background: var(--ds-accent-strong);
}

.secondary-button {
  border: 1px solid var(--ds-line-strong);
  background: var(--ds-surface);
  color: var(--ds-text);
}

.secondary-button:hover {
  border-color: var(--ds-accent);
  color: var(--ds-accent-strong);
}

.page-head > .secondary-button {
  display: none;
}

.table-shell {
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.data-table th {
  padding: var(--ds-sp-3) var(--ds-sp-4);
  border-bottom: 1px solid var(--ds-line);
  color: var(--ds-muted);
  background: var(--ds-surface-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.data-table td {
  padding: var(--ds-sp-4);
  border-bottom: 1px solid var(--ds-line);
  color: var(--ds-text-soft);
  vertical-align: middle;
}

.data-table td strong {
  color: var(--ds-text);
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-left: 3px solid var(--ds-accent);
  border-radius: var(--ds-r-2);
  background: var(--ds-surface);
}

.notice-icon {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.notice strong {
  font-size: 13px;
}

.notice p {
  margin: var(--ds-sp-1) 0 0;
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.45;
}

.bottom-nav {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  min-height: var(--ds-bottom-nav);
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  padding: 7px max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom))
    max(7px, env(safe-area-inset-left));
  border-top: 1px solid var(--ds-line);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 -8px 20px rgb(20 24 31 / 5%);
  backdrop-filter: blur(12px);
}

.bottom-nav-item {
  display: grid;
  min-width: 0;
  min-height: 58px;
  padding: 5px 2px;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 0;
  border-radius: var(--ds-r-2);
  background: transparent;
  color: var(--ds-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
}

.bottom-nav-item svg {
  width: 21px;
  height: 21px;
}

.bottom-nav-item.is-active {
  background: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
}

.bottom-nav-item:disabled {
  cursor: default;
  opacity: 0.64;
}

.toast-region {
  position: fixed;
  z-index: 60;
  right: var(--ds-sp-4);
  bottom: calc(var(--ds-bottom-nav) + var(--ds-sp-4));
  left: var(--ds-sp-4);
  pointer-events: none;
}

.toast {
  display: flex;
  max-width: 420px;
  margin-left: auto;
  align-items: flex-start;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
  pointer-events: auto;
}

.toast[hidden] {
  display: none;
}

.toast-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--ds-success-soft);
  color: var(--ds-success);
  font-weight: 900;
}

.toast div {
  display: grid;
  gap: 3px;
}

.toast strong {
  font-size: 13px;
}

.toast div span {
  color: var(--ds-muted);
  font-size: 12px;
}

.modal {
  width: min(calc(100% - 32px), 480px);
  padding: 0;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow);
}

.modal::backdrop {
  background: var(--ds-overlay);
  backdrop-filter: blur(2px);
}

.modal form {
  padding: var(--ds-sp-5);
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sp-4);
}

.modal-head h2 {
  margin-top: var(--ds-sp-1);
  font-size: 20px;
}

.modal-copy {
  margin: var(--ds-sp-5) 0;
  color: var(--ds-text-soft);
  font-size: 14px;
  line-height: 1.55;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--ds-line);
  padding-top: var(--ds-sp-4);
}

@media (max-width: 599px) {
  .entity-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .entity-card > .badge {
    grid-column: 2;
    justify-self: start;
  }

  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table tr {
    padding: var(--ds-sp-3) var(--ds-sp-4);
    border-bottom: 1px solid var(--ds-line);
  }

  .data-table tr:last-child {
    border-bottom: 0;
  }

  .data-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-4);
    padding: 5px 0;
    border: 0;
  }

  .data-table td::before {
    content: attr(data-label);
    color: var(--ds-muted);
    font-size: 11px;
    font-weight: 700;
  }
}

@media (min-width: 600px) {
  .environment-badge,
  .page-head > .secondary-button {
    display: inline-flex;
  }

  .status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .status-strip-item + .status-strip-item {
    border-top: 0;
    border-left: 1px solid var(--ds-line);
  }
}

@media (min-width: 900px) {
  .side-nav {
    position: fixed;
    z-index: 40;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: var(--ds-side-nav);
    flex-direction: column;
    padding: var(--ds-sp-4);
    border-right: 1px solid var(--ds-line);
    background: var(--ds-surface);
  }

  .brand {
    display: flex;
    min-height: 52px;
    align-items: center;
    gap: var(--ds-sp-3);
    padding: 0 var(--ds-sp-2);
    color: var(--ds-text);
    text-decoration: none;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: var(--ds-r-2);
  }

  .brand-copy {
    display: grid;
    gap: 2px;
  }

  .brand-copy strong {
    font-size: 15px;
  }

  .brand-copy small {
    color: var(--ds-muted);
    font-size: 11px;
  }

  .nav-list {
    display: grid;
    gap: var(--ds-sp-1);
    margin-top: var(--ds-sp-6);
  }

  .nav-item {
    display: flex;
    min-height: var(--ds-control);
    width: 100%;
    align-items: center;
    gap: var(--ds-sp-3);
    padding: 0 var(--ds-sp-3);
    border: 0;
    border-radius: var(--ds-r-2);
    background: transparent;
    color: var(--ds-text-soft);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
  }

  .nav-item svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .nav-item.is-active {
    background: var(--ds-accent-soft);
    color: var(--ds-accent-strong);
  }

  .nav-item:disabled {
    cursor: default;
    opacity: 0.58;
  }

  .side-nav-footer {
    display: flex;
    min-height: 38px;
    margin-top: auto;
    align-items: center;
    gap: var(--ds-sp-2);
    padding: 0 var(--ds-sp-3);
    color: var(--ds-muted);
    font-size: 11px;
    font-weight: 700;
  }

  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ds-success);
    box-shadow: 0 0 0 3px var(--ds-success-soft);
  }

  .workspace {
    margin-left: var(--ds-side-nav);
  }

  .topbar {
    padding-right: var(--ds-sp-6);
    padding-left: var(--ds-sp-6);
  }

  .page {
    padding: var(--ds-sp-8) var(--ds-sp-6) 48px;
  }

  .dashboard-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
  }

  .tool-panel {
    position: sticky;
    top: calc(var(--ds-topbar) + var(--ds-sp-5));
  }

  .bottom-nav {
    display: none;
  }

  .toast-region {
    bottom: var(--ds-sp-5);
    left: auto;
    width: 420px;
  }

  .text-input {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.auth-page {
  min-height: 100vh;
  background: var(--ds-bg);
}

.auth-shell {
  width: min(100% - 32px, 480px);
  margin: 0 auto;
  padding: 48px 0;
}

.auth-brand {
  width: max-content;
  margin-bottom: var(--ds-sp-6);
}

.auth-card {
  padding: 28px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
}

.auth-card h1 {
  margin: var(--ds-sp-2) 0 10px;
}

.auth-card > p {
  margin: 0 0 var(--ds-sp-6);
  color: var(--ds-text-soft);
}

.olap-report-selector {
  max-width: 980px;
}

.olap-automatic-usage {
  color: var(--ds-accent-strong);
  font-weight: 750;
}

.olap-automatic-usage ul {
  display: grid;
  margin: var(--ds-sp-2) 0 0;
  padding-left: 1.2rem;
  gap: var(--ds-sp-1);
}

.olap-automatic-usage code {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.status-grid.olap-report-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.olap-run-status {
  margin-top: var(--ds-sp-4);
}

.olap-aggregate-totals {
  display: grid;
  gap: var(--ds-sp-3);
  margin-top: var(--ds-sp-3);
  padding-top: var(--ds-sp-3);
  border-top: 1px solid var(--ds-line);
}

.olap-aggregate-totals[hidden] {
  display: none;
}

.olap-aggregate-totals > span {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.olap-aggregate-total-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ds-sp-2);
}

.olap-aggregate-total-grid article {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
}

.olap-aggregate-total-grid article > small {
  color: var(--ds-muted);
  font-weight: 750;
}

.olap-aggregate-total-grid article > strong {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.2;
}

.olap-aggregate-total-grid article > code {
  overflow-wrap: anywhere;
}

.olap-aggregate-total-grid article > p {
  margin: var(--ds-sp-1) 0 0;
  color: #8c5a13;
  font-size: 12px;
  line-height: 1.35;
}

.olap-field-picker {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
  align-items: start;
  gap: var(--ds-sp-4);
}

.olap-field-picker [hidden] {
  display: none !important;
}

.olap-field-palette,
.olap-field-selection {
  min-width: 0;
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.olap-field-panel-head,
.olap-field-zone-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--ds-sp-3);
}

.olap-field-panel-head {
  margin-bottom: var(--ds-sp-4);
}

.olap-field-panel-head h3,
.olap-field-zone-head h4,
.olap-field-group h4 {
  margin: 0;
}

.olap-field-panel-head h3 {
  font-size: 14px;
}

.olap-field-panel-head small,
.olap-field-zone-head small,
.olap-field-copy small {
  color: var(--ds-muted);
}

.olap-field-search {
  margin-bottom: var(--ds-sp-3);
}

.olap-field-catalog {
  max-height: 640px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--ds-sp-1);
}

.olap-field-group {
  display: grid;
  min-width: 0;
  margin: 0 0 var(--ds-sp-4);
  gap: var(--ds-sp-2);
}

.olap-field-group h4 {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.olap-field-group-list,
.olap-field-selection {
  display: grid;
  gap: var(--ds-sp-3);
}

.olap-available-field,
.olap-selected-field {
  min-width: 0;
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-2);
  background: var(--ds-surface-muted);
}

.olap-available-field {
  display: grid;
  gap: var(--ds-sp-3);
}

.olap-field-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.olap-field-copy strong {
  color: var(--ds-text);
  font-size: 13px;
  line-height: 1.35;
}

.olap-field-copy code {
  overflow-wrap: anywhere;
  color: var(--ds-muted);
  font-size: 11px;
}

.olap-available-field-actions,
.olap-selected-field-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-1);
}

.olap-field-action {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-r-1);
  background: var(--ds-surface);
  color: var(--ds-text-soft);
  font-size: 11px;
  font-weight: 750;
}

.olap-field-action:hover {
  border-color: var(--ds-accent);
  color: var(--ds-accent-strong);
}

.olap-field-action:focus-visible {
  outline: 3px solid var(--ds-accent-soft);
  outline-offset: 1px;
}

.olap-field-action:disabled {
  opacity: 0.42;
  cursor: default;
}

.olap-available-field.is-filtered,
.olap-selected-field.is-filtered,
.olap-active-filter {
  border-color: color-mix(in srgb, var(--ds-accent) 55%, var(--ds-line));
}

.olap-filter-action {
  color: var(--ds-accent-strong);
}

.olap-field-zone {
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-2);
  background: var(--ds-surface-muted);
}

.olap-field-zone-head h4 {
  font-size: 13px;
}

.olap-field-zone-count {
  display: inline-flex;
  min-width: 26px;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
  font-size: 11px;
  font-weight: 800;
}

.olap-selected-field-list {
  display: grid;
  margin: var(--ds-sp-3) 0 0;
  padding: 0;
  gap: var(--ds-sp-2);
  list-style: none;
}

.olap-selected-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-sp-3);
  background: var(--ds-surface);
}

.olap-field-zone-empty,
.olap-field-empty {
  margin: var(--ds-sp-3) 0 0;
  color: var(--ds-muted);
  font-size: 12px;
}

.olap-field-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.olap-filter-zone {
  border-color: color-mix(in srgb, var(--ds-accent) 35%, var(--ds-line));
}

.olap-filter-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(780px, calc(100vh - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--ds-r-3);
  background: transparent;
  color: var(--ds-text);
}

.olap-filter-dialog [hidden] {
  display: none !important;
}

.olap-filter-dialog::backdrop {
  background: rgb(19 25 31 / 52%);
  backdrop-filter: blur(2px);
}

.olap-filter-dialog-card {
  display: grid;
  max-height: min(780px, calc(100vh - 32px));
  overflow: hidden;
  gap: var(--ds-sp-4);
}

.olap-filter-dialog-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--ds-sp-4);
}

.olap-filter-dialog-head h3 {
  margin: 2px 0;
}

.olap-filter-dialog-head code {
  color: var(--ds-muted);
  font-size: 11px;
}

.olap-filter-dialog-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  background: var(--ds-surface-muted);
  color: var(--ds-text);
  font-size: 23px;
  line-height: 1;
}

.olap-filter-value-editor {
  display: grid;
  min-height: 0;
  gap: var(--ds-sp-3);
}

.olap-filter-choice-list {
  display: grid;
  max-height: min(420px, 48vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ds-sp-2);
  gap: 2px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-2);
  background: var(--ds-surface-muted);
}

.olap-filter-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 36px;
  padding: 6px var(--ds-sp-2);
  gap: var(--ds-sp-2);
  border-radius: var(--ds-r-1);
  color: var(--ds-text-soft);
  font-size: 12px;
}

.olap-filter-choice:hover {
  background: var(--ds-surface);
}

.olap-filter-toggle-all {
  padding: 0 var(--ds-sp-2);
}

.olap-filter-range-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-3);
}

.olap-filter-dialog-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
}

.olap-filter-dialog-spacer {
  flex: 1 1 auto;
}

.checkbox-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--ds-sp-2);
  color: var(--ds-text-soft);
  font-size: 12px;
  line-height: 1.4;
}

.checkbox-row code {
  display: block;
  overflow-wrap: anywhere;
}

.olap-filter-list {
  display: grid;
  gap: var(--ds-sp-3);
}

.olap-filter-row,
.olap-definition-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.olap-definition-grid {
  margin-top: var(--ds-sp-5);
}

.olap-wide-field {
  grid-column: span 2;
}

.compact-form {
  align-items: center;
}

.compact-form .text-input {
  width: auto;
  min-width: 150px;
}

.compact-button {
  min-height: 38px;
  padding: 8px 14px;
}

.entity-card-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--ds-sp-4);
}

.access-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  align-items: start;
  gap: var(--ds-sp-4);
}

.access-role-card {
  grid-template-columns: minmax(0, 1fr);
}

.access-empty-state {
  display: grid;
  min-width: 0;
  padding: clamp(var(--ds-sp-5), 4vw, var(--ds-sp-8));
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: linear-gradient(135deg, var(--ds-surface) 0%, var(--ds-accent-soft) 180%);
}

.access-empty-copy {
  display: grid;
  max-width: 680px;
  min-width: 0;
  gap: var(--ds-sp-3);
}

.access-empty-copy h3,
.access-empty-copy p,
.access-owner-card p {
  margin: 0;
}

.access-empty-copy h3 {
  font-size: 20px;
  line-height: 1.3;
}

.access-empty-copy p {
  color: var(--ds-text-soft);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.access-capability-count {
  font-size: 13px;
}

.access-empty-action {
  width: fit-content;
  margin-top: var(--ds-sp-2);
}

.entity-card-active {
  border-color: var(--ds-accent);
  background: var(--ds-accent-soft);
}

.access-permission-panel,
.access-employee-card {
  min-width: 0;
}

.permission-form {
  display: grid;
  min-width: 0;
}

.permission-catalog-group {
  display: grid;
  min-width: 0;
  gap: var(--ds-sp-3);
  margin: 0;
  padding: var(--ds-sp-4) 0;
  border: 0;
  border-top: 1px solid var(--ds-line);
}

.permission-catalog-group legend {
  padding: 0;
  font-size: 15px;
  font-weight: 750;
}

.permission-group-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
  color: var(--ds-muted);
}

.permission-toggle {
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ds-accent-strong);
  font-size: 12px;
  font-weight: 750;
}

.permission-toggle:hover {
  text-decoration: underline;
}

.entity-actions {
  display: grid;
  gap: 10px;
  width: 100%;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-2);
  width: 100%;
}

.permission-option {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-2);
  cursor: pointer;
}

.permission-option span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.permission-option small {
  color: var(--ds-muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.permission-save-row {
  display: flex;
  justify-content: flex-start;
  padding-top: var(--ds-sp-4);
  border-top: 1px solid var(--ds-line);
}

.access-owner-card {
  padding-block: var(--ds-sp-5);
}

.access-owner-card p {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.access-permission-panel .badge,
.access-employee-card .badge {
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.notice-error {
  margin-bottom: var(--ds-sp-4);
  border-color: #f1b5b5;
  background: #fff5f5;
  color: #8c2424;
}

.error-support {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-sp-3);
  margin-bottom: var(--ds-sp-5);
  padding: var(--ds-sp-4);
  border: 2px solid #c94b4b;
  border-radius: var(--ds-r-3);
  background: #fff5f5;
  color: #7a1f1f;
  font-weight: 750;
}

.request-code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}

.error-back-link {
  display: inline-flex;
  width: fit-content;
  margin-top: var(--ds-sp-4);
  text-decoration: none;
}

.session-user-list,
.session-device-list,
.session-list,
.observability-error-list {
  display: grid;
  gap: var(--ds-sp-4);
}

.session-user-group {
  margin: 0;
}

.session-device {
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.session-device-head,
.session-row,
.observability-error-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sp-4);
  padding: var(--ds-sp-4);
}

.session-device-head {
  border-bottom: 1px solid var(--ds-line);
}

.session-device-head h3,
.session-device-head p,
.session-row p {
  margin: 0;
}

.session-device-head p,
.session-row p {
  color: var(--ds-muted);
}

.device-name-form {
  padding: var(--ds-sp-3) var(--ds-sp-4);
  border-bottom: 1px solid var(--ds-line);
  background: var(--ds-bg);
}

.session-row + .session-row {
  border-top: 1px solid var(--ds-line);
}

.observability-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-4);
  margin-bottom: var(--ds-sp-5);
}

.observability-summary article {
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.observability-summary article > span {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 750;
}

.observability-summary article > strong {
  display: block;
  margin-top: var(--ds-sp-2);
  font-size: 2rem;
}

.observability-summary ol {
  display: grid;
  gap: var(--ds-sp-2);
  margin: var(--ds-sp-3) 0 0;
  padding-left: 1.2rem;
}

.observability-summary li {
  padding-left: var(--ds-sp-2);
}

.observability-summary li b {
  float: right;
}

.observability-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-sp-4);
}

.observability-filter-actions {
  display: flex;
  align-items: end;
  gap: var(--ds-sp-2);
}

.observability-error-card {
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.observability-error-head {
  padding: 0;
}

.observability-error-head > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-sp-3);
}

.observability-error-card h2 {
  margin: var(--ds-sp-4) 0 var(--ds-sp-2);
  font-size: 18px;
}

.observability-message {
  margin: 0;
  overflow-wrap: anywhere;
}

.observability-error-card details {
  margin-top: var(--ds-sp-4);
  border-top: 1px solid var(--ds-line);
  padding-top: var(--ds-sp-4);
}

.observability-error-card summary {
  cursor: pointer;
  font-weight: 750;
}

.observability-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-3);
}

.observability-fields div {
  min-width: 0;
  padding: var(--ds-sp-3);
  border-radius: var(--ds-r-2);
  background: var(--ds-bg);
}

.observability-fields dt {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.observability-fields dd {
  margin: var(--ds-sp-1) 0 0;
  overflow-wrap: anywhere;
}

.observability-fields .observability-field-wide {
  grid-column: 1 / -1;
}

.observability-fields pre,
.traceback {
  max-height: 360px;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.pin-input {
  font-size: 1.35rem;
  letter-spacing: 0.2em;
}

button[aria-busy="true"] {
  cursor: wait;
  opacity: 0.7;
}

.tab-list {
  display: flex;
  gap: var(--ds-sp-2);
  margin-bottom: var(--ds-sp-6);
  padding-bottom: var(--ds-sp-2);
  overflow-x: auto;
  border-bottom: 1px solid var(--ds-line);
}

.connection-name-form {
  margin-bottom: var(--ds-sp-5);
}

.tab-link {
  padding: 9px 14px;
  border-radius: var(--ds-r-2);
  color: var(--ds-text-soft);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.tab-link.is-active {
  background: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
}

.settings-grid,
.status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-4);
  padding: var(--ds-sp-5);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.settings-grid .button-row {
  align-self: end;
  margin: 0;
}

.toggle-field {
  display: flex;
  min-height: var(--ds-control);
  align-items: center;
  gap: var(--ds-sp-2);
  font-size: 13px;
  font-weight: 700;
}

.status-grid {
  margin-top: var(--ds-sp-4);
}

.status-grid div {
  min-width: 0;
}

.status-grid dt {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-grid dd {
  margin: var(--ds-sp-1) 0 0;
  overflow-wrap: anywhere;
}

.source-settings {
  display: grid;
  min-width: 190px;
  gap: var(--ds-sp-2);
}

.source-settings .text-input {
  min-height: 38px;
  font-size: 13px;
}

.server-monitor-tools {
  display: flex;
  max-width: 900px;
  align-items: end;
  gap: var(--ds-sp-5);
  margin-top: var(--ds-sp-5);
}

.server-monitor-search {
  display: grid;
  width: min(620px, 100%);
  max-width: 620px;
  gap: var(--ds-sp-3);
}

.server-monitor-search > span {
  font-size: 13px;
  font-weight: 750;
}

.server-monitor-toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: var(--ds-sp-3);
  padding-bottom: 1px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.server-monitor-groups {
  display: grid;
  gap: var(--ds-sp-3);
  margin-top: var(--ds-sp-5);
}

.server-monitor-group {
  overflow: clip;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
}

.server-monitor-group > summary {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-4) var(--ds-sp-5);
  cursor: pointer;
  font-weight: 800;
}

.server-monitor-group > summary small {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
}

.server-monitor-group[open] > summary {
  border-bottom: 1px solid var(--ds-border);
}

.server-endpoint-list {
  display: grid;
}

.production-read-gap {
  margin: var(--ds-sp-4);
}

.server-endpoint-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.85fr);
  gap: var(--ds-sp-5);
  padding: var(--ds-sp-5);
  border-bottom: 1px solid var(--ds-border);
}

.server-endpoint-row:last-child {
  border-bottom: 0;
}

.server-endpoint-row[hidden],
.server-monitor-group[hidden] {
  display: none;
}

.server-endpoint-main,
.server-endpoint-controls {
  min-width: 0;
}

.server-endpoint-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sp-3);
}

.server-endpoint-title strong,
.server-endpoint-main code,
.server-endpoint-main p {
  overflow-wrap: anywhere;
}

.server-endpoint-main code {
  display: block;
  margin-top: var(--ds-sp-2);
  color: var(--ds-text);
  font-size: 12px;
}

.server-endpoint-main p {
  margin: var(--ds-sp-3) 0 0;
  color: var(--ds-muted);
  line-height: 1.45;
}

.server-endpoint-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
  margin-top: var(--ds-sp-3);
}

.server-endpoint-controls {
  display: grid;
  align-content: start;
  gap: var(--ds-sp-3);
}

.server-schedule {
  min-width: 0;
}

.server-schedule label {
  display: grid;
  gap: var(--ds-sp-2);
  font-size: 13px;
  font-weight: 750;
}

.server-schedule [data-daily-time-field][hidden] {
  display: none;
}

.server-sync-state {
  padding: var(--ds-sp-3);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
}

.server-sync-state > strong {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
}

.server-sync-state > strong::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #83909e;
  content: "";
  flex: 0 0 auto;
}

.server-sync-state[data-state="queued"] > strong::before,
.server-sync-state[data-state="running"] > strong::before {
  background: #2673c9;
  animation: sync-status-pulse 1.2s ease-in-out infinite;
}

.server-sync-state[data-state="succeeded"] > strong::before {
  background: #208550;
}

.server-sync-state[data-state="failed"] > strong::before {
  background: #c94b4b;
}

@keyframes sync-status-pulse {
  50% {
    opacity: 0.35;
    transform: scale(0.82);
  }
}

@media (prefers-reduced-motion: reduce) {
  .server-sync-state[data-state="queued"] > strong::before,
  .server-sync-state[data-state="running"] > strong::before {
    animation: none;
  }
}

.command-not-connected {
  padding: var(--ds-sp-3);
  border-left: 3px solid #c94b4b;
  color: #8c2424;
  font-weight: 750;
}

.iiko-directory-groups {
  display: grid;
  gap: var(--ds-sp-5);
}

.iiko-directory-group {
  display: grid;
  gap: var(--ds-sp-4);
}

.compact-section-head {
  margin-bottom: 0;
}

.iiko-role-list {
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface-muted);
}

.iiko-role-list h4,
.iiko-role-list ul {
  margin: 0;
}

.iiko-role-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-2) var(--ds-sp-5);
  padding: var(--ds-sp-3) 0 0 var(--ds-sp-5);
}

.command-ready,
.command-embedded,
.command-transport-only {
  padding: var(--ds-sp-3);
  border-left: 3px solid var(--ds-success);
  color: var(--ds-text-soft);
  font-weight: 750;
}

.command-embedded {
  border-left-color: #2673c9;
}

.command-transport-only {
  border-left-color: #c88a1b;
}

.server-empty-group,
.server-search-empty {
  margin: 0;
  padding: var(--ds-sp-5);
  color: var(--ds-muted);
}

.technical-key {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
}

.readiness-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 750;
}

.readiness-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
}

.readiness-label.is-ready {
  color: var(--ds-success);
}

.readiness-label.is-embedded {
  color: #2673c9;
}

.readiness-label.is-embedded .readiness-dot {
  background: #2673c9;
}

.readiness-label.is-transport-only {
  color: #8b5f10;
}

.readiness-label.is-transport-only .readiness-dot {
  background: #c88a1b;
}

.readiness-label.is-ready .readiness-dot {
  background: var(--ds-success);
}

.readiness-label.is-unimplemented,
.readiness-label.is-pending {
  color: #a33a3a;
}

.readiness-label.is-unimplemented .readiness-dot,
.readiness-label.is-pending .readiness-dot {
  background: #c94b4b;
}

.cell-note {
  display: block;
  margin-top: 4px;
  color: var(--ds-muted);
  line-height: 1.4;
}

.error-text {
  color: #8c2424;
}

.cloud-step-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-3) var(--ds-sp-6);
  margin: 0;
  padding-left: 1.4rem;
}

.cloud-status-line {
  margin: var(--ds-sp-4) 0 0;
  overflow-wrap: anywhere;
}

.cloud-organization-list,
.cloud-webhook-list {
  display: grid;
  gap: var(--ds-sp-4);
}

.webhook-status-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
  margin: calc(-1 * var(--ds-sp-2)) 0 var(--ds-sp-4);
}

.webhook-last-event {
  margin: var(--ds-sp-4) 0;
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-subtle);
}

.webhook-last-event .section-head {
  margin-bottom: var(--ds-sp-2);
}

.webhook-last-event h4,
.webhook-last-event p {
  margin: 0;
}

.webhook-last-event small {
  color: var(--ds-muted);
}

.cloud-organization-card {
  min-width: 0;
  padding: var(--ds-sp-5);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
}

.cloud-organization-card h3 {
  overflow-wrap: anywhere;
}

.cloud-terminal-list {
  display: grid;
  gap: var(--ds-sp-2);
  margin: var(--ds-sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.cloud-terminal-list li {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-3);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
}

.cloud-terminal-list li > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cloud-terminal-list small {
  display: block;
  margin-top: var(--ds-sp-1);
  color: var(--ds-muted);
}

.cloud-webhook-form {
  display: grid;
  gap: var(--ds-sp-4);
  margin-top: var(--ds-sp-4);
}

.cloud-webhook-form fieldset {
  min-width: 0;
  margin: 0;
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
}

.cloud-webhook-form legend {
  padding: 0 var(--ds-sp-2);
  font-weight: 800;
}

.webhook-event-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-2) var(--ds-sp-4);
}

.webhook-event-grid .toggle-field {
  min-width: 0;
  align-items: flex-start;
}

.webhook-event-grid small {
  display: block;
  margin-top: 2px;
  color: var(--ds-muted);
  overflow-wrap: anywhere;
}

.webhook-actions {
  flex-wrap: wrap;
}

.cloud-webhook-form > small {
  color: var(--ds-muted);
  line-height: 1.45;
}

@media (max-width: 759px) {
  .status-grid.olap-report-facts {
    grid-template-columns: 1fr;
  }

  .olap-field-picker,
  .olap-filter-row,
  .olap-definition-grid {
    grid-template-columns: 1fr;
  }

  .olap-filter-range-grid {
    grid-template-columns: 1fr;
  }

  .olap-filter-dialog-card {
    padding: var(--ds-sp-4);
  }

  .olap-filter-dialog-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .olap-filter-dialog-actions .primary-button,
  .olap-filter-dialog-actions .secondary-button {
    flex: 1 1 140px;
  }

  .olap-field-catalog {
    max-height: none;
  }

  .olap-selected-field {
    grid-template-columns: 1fr;
  }

  .olap-field-action {
    min-height: 44px;
  }

  .olap-wide-field {
    grid-column: auto;
  }

  .auth-shell {
    padding: var(--ds-sp-6) 0;
  }

  .auth-card {
    padding: var(--ds-sp-5);
  }

  .permission-grid {
    grid-template-columns: 1fr;
  }

  .access-layout {
    grid-template-columns: 1fr;
  }

  .access-empty-action,
  .permission-save-row .primary-button {
    width: 100%;
  }

  .access-permission-panel .section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .inline-form,
  .compact-form {
    align-items: stretch;
    flex-direction: column;
  }

  .compact-form .text-input {
    width: 100%;
  }

  .settings-grid,
  .status-grid {
    grid-template-columns: 1fr;
    padding: var(--ds-sp-4);
  }

  .server-monitor-group > summary {
    align-items: flex-start;
    flex-direction: column;
    padding: var(--ds-sp-4);
  }

  .server-endpoint-row {
    grid-template-columns: 1fr;
    gap: var(--ds-sp-4);
    padding: var(--ds-sp-4);
  }

  .server-endpoint-title {
    flex-direction: column;
  }

  .server-monitor-tools {
    align-items: stretch;
    flex-direction: column;
    gap: var(--ds-sp-4);
  }

  .server-monitor-search,
  .server-endpoint-controls .secondary-button {
    width: 100%;
  }

  .cloud-step-list,
  .webhook-event-grid {
    grid-template-columns: 1fr;
  }

  .cloud-organization-card {
    padding: var(--ds-sp-4);
  }

  .cloud-terminal-list li,
  .webhook-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .webhook-actions .primary-button,
  .webhook-actions .secondary-button {
    width: 100%;
  }

  .server-monitor-toggle {
    min-height: auto;
    white-space: normal;
  }

  .session-device-head,
  .session-row,
  .observability-error-head {
    align-items: stretch;
    flex-direction: column;
  }

  .observability-summary,
  .observability-filters,
  .observability-fields {
    grid-template-columns: 1fr;
  }

  .observability-fields .observability-field-wide {
    grid-column: auto;
  }

  .observability-filter-actions,
  .observability-filter-actions .primary-button,
  .observability-filter-actions .secondary-button {
    width: 100%;
  }
}
/* Shared fragment refresh states stay outside document flow to avoid layout jumps. */
[data-fragment-stale="true"] {
  position: relative;
}

[data-fragment-stale="true"]::after {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  border: 1px solid var(--ds-warning-border, #d7a82f);
  border-radius: 999px;
  background: var(--ds-surface, #fff);
  color: var(--ds-text-muted, #5d6470);
  content: "Данные могут быть устаревшими";
  font-size: 12px;
  line-height: 1.2;
  pointer-events: none;
}

.fragment-reload-notice {
  position: fixed;
  z-index: 100;
  right: 16px;
  bottom: 16px;
  display: flex;
  max-width: min(440px, calc(100vw - 32px));
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border, #d9dde5);
  border-radius: 8px;
  background: var(--ds-surface, #fff);
  box-shadow: var(--ds-shadow-raised, 0 8px 24px rgb(25 33 45 / 16%));
  color: var(--ds-text, #202631);
}

.fragment-reload-notice[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .fragment-reload-notice {
    right: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    left: 8px;
    max-width: none;
  }
}

/* Personnel center */
.personnel-page-head {
  align-items: flex-end;
}

.personnel-tabs,
.personnel-filter-form,
.personnel-visibility-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-sp-2);
}

.personnel-tabs {
  justify-content: flex-end;
}

.personnel-directory-actions,
.personnel-directory-bar,
.directory-refresh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-sp-2);
}

.personnel-directory-bar {
  justify-content: flex-end;
  margin-bottom: var(--ds-sp-4);
}

.checkbox-line {
  display: inline-flex;
  min-height: var(--ds-control);
  align-items: center;
  gap: var(--ds-sp-2);
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 700;
}

.checkbox-line input {
  width: 18px;
  height: 18px;
  accent-color: var(--ds-accent);
}

.back-link {
  color: var(--ds-accent-strong);
  font-weight: 750;
}

.back-link {
  display: inline-flex;
  margin-bottom: var(--ds-sp-3);
  font-size: 13px;
}

.badge-danger {
  border-color: #f1b5b5;
  background: #fff5f5;
  color: #8c2424;
}

.danger-button {
  border: 1px solid #a61b1b;
  background: #a61b1b;
  color: var(--ds-white);
}

.danger-button:hover {
  border-color: #7d1111;
  background: #7d1111;
}

.personnel-row-deleted td:not(:last-child) {
  color: var(--ds-muted);
  text-decoration: line-through;
}

.personnel-history-actions,
.seniority-rule-list {
  display: grid;
  gap: var(--ds-sp-3);
}

.personnel-history-actions .inline-form {
  display: grid;
  grid-template-columns: minmax(145px, 1fr) auto;
  gap: var(--ds-sp-2);
}

.personnel-history-actions details {
  max-width: 420px;
}

.personnel-history-actions summary {
  color: #a61b1b;
  cursor: pointer;
  font-weight: 700;
}

.seniority-rule-card {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(220px, 1fr) minmax(160px, 0.7fr) auto;
  align-items: end;
  gap: var(--ds-sp-4);
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.seniority-rule-card h3,
.seniority-rule-card p {
  margin: 0;
}

.seniority-rule-card p {
  margin-top: var(--ds-sp-1);
  color: var(--ds-muted);
}

.personnel-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.personnel-summary-item {
  display: grid;
  align-content: start;
  gap: var(--ds-sp-2);
  padding: var(--ds-sp-4);
  border-right: 1px solid var(--ds-line);
}

.personnel-summary-item:last-child {
  border-right: 0;
}

.personnel-summary-item > span {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.personnel-summary-item strong {
  color: var(--ds-text);
  font-size: 14px;
}

.personnel-summary-item a {
  color: var(--ds-accent-strong);
  font-size: 12px;
  font-weight: 700;
}

.personnel-two-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-8);
  padding: var(--ds-sp-5);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.personnel-two-columns .section-head {
  min-height: 98px;
}

.role-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  align-items: start;
  gap: var(--ds-sp-5);
}

.role-detail-main {
  min-width: 0;
}

.role-employee-sidebar {
  position: sticky;
  top: var(--ds-sp-4);
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.role-employee-sidebar .section-head {
  margin-bottom: var(--ds-sp-3);
}

.role-employee-list {
  display: grid;
  gap: var(--ds-sp-2);
}

.role-employee-link {
  display: grid;
  gap: 3px;
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-2);
  color: var(--ds-text);
  text-decoration: none;
}

.role-employee-link:hover,
.role-employee-link:focus-visible {
  border-color: var(--ds-accent);
  background: var(--ds-accent-soft);
}

.role-employee-link span {
  color: var(--ds-muted);
  font-size: 12px;
}

.employee-card-dialog {
  --ds-dialog-wide: 900px;
  max-height: calc(100dvh - var(--ds-sp-8));
  overflow: hidden;
}

.role-card-dialog {
  --ds-dialog-wide: 980px;
}

.role-card .employee-card-close {
  width: var(--ds-control);
  padding: 0;
}

.employee-card-loading {
  display: grid;
  min-height: 240px;
  align-content: center;
  gap: var(--ds-sp-4);
  place-items: center;
  color: var(--ds-muted);
  font-weight: 700;
}

.employee-card-loading[hidden] {
  display: none;
}

.employee-card-loading.is-error {
  color: var(--ds-danger);
}

.employee-card {
  display: flex;
  max-height: calc(100dvh - 72px);
  flex-direction: column;
  overflow: hidden;
}

.employee-card :is(button, input, select) {
  touch-action: manipulation;
}

.employee-card-head,
.employee-card-identity,
.employee-card-badges,
.employee-card-section-head,
.employee-card-role-command {
  display: flex;
  align-items: center;
}

.employee-card-head,
.employee-card-section-head {
  justify-content: space-between;
  gap: var(--ds-sp-4);
}

.employee-card-head {
  padding-bottom: var(--ds-sp-4);
  border-bottom: 1px solid var(--ds-line);
}

.employee-card-identity {
  min-width: 0;
  gap: var(--ds-sp-3);
}

.employee-card-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: var(--ds-r-full);
  background: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
  font-size: 18px;
  font-weight: 800;
}

.employee-card-identity h2,
.employee-card-identity p,
.employee-card-section-head h3,
.employee-card-section-head p,
.employee-card-setting h3,
.employee-card-setting p {
  margin: 0;
}

.employee-card-identity h2 {
  overflow: hidden;
  margin-top: 2px;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-card-identity p,
.employee-card-section-head p {
  margin-top: var(--ds-sp-1);
  color: var(--ds-muted);
  font-size: 12px;
}

.employee-card-badges {
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
  padding: var(--ds-sp-3) 0;
}

.employee-card-notice {
  margin-bottom: var(--ds-sp-2);
}

.employee-card-status {
  min-height: 18px;
  margin: 0;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
}

.employee-card-status[data-state="saved"] {
  color: var(--ds-success);
}

.employee-card-status[data-state="error"] {
  color: var(--ds-danger);
}

.employee-card-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-sp-1);
  padding: var(--ds-sp-2);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface-muted);
}

.employee-card-tab {
  min-height: var(--ds-control);
  padding: 0 var(--ds-sp-3);
  border: 0;
  border-radius: var(--ds-r-2);
  background: transparent;
  color: var(--ds-text-soft);
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}

.employee-card-tab:hover,
.employee-card-tab:focus-visible {
  background: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
}

.employee-card-tab.is-active {
  background: var(--ds-surface);
  color: var(--ds-accent-strong);
  box-shadow: var(--ds-shadow-sm);
}

.employee-card-panels {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: var(--ds-sp-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.employee-card-panel {
  display: grid;
  gap: var(--ds-sp-4);
  padding-right: var(--ds-sp-1);
}

.employee-card-panel[hidden] {
  display: none;
}

.role-card-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.role-card-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr);
  gap: var(--ds-sp-4);
}

.role-card-employees,
.role-card-facts {
  min-width: 0;
}

.role-card-employees .role-employee-list {
  max-height: 360px;
  padding-right: var(--ds-sp-1);
  overflow-y: auto;
}

.role-card-facts dl {
  display: grid;
  gap: var(--ds-sp-4);
  margin: 0;
}

.role-card-facts dl > div {
  display: grid;
  gap: var(--ds-sp-1);
}

.role-card-facts dt {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.role-card-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.role-card-facts .ui-button {
  justify-self: start;
}

.role-card-settings form {
  display: grid;
  gap: var(--ds-sp-3);
}

.role-card-workshop-form {
  grid-template-columns: 1fr;
}

.role-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-4);
  margin-top: var(--ds-sp-4);
  padding-top: var(--ds-sp-3);
  border-top: 1px solid var(--ds-line);
}

.role-card-footer p {
  margin: 0;
  color: var(--ds-muted);
  font-size: 12px;
}

.employee-card-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
}

.employee-card-summary > div {
  display: grid;
  gap: var(--ds-sp-1);
  min-width: 0;
  padding: var(--ds-sp-4);
  border-right: 1px solid var(--ds-line);
}

.employee-card-summary > div:last-child {
  border-right: 0;
}

.employee-card-summary span,
.employee-role-boundaries .field > span,
.employee-role-boundary-static > span {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.employee-card-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-card-section-head h3,
.employee-card-setting h3 {
  font-size: 16px;
}

.employee-card-table-shell {
  margin: 0;
}

.employee-card-table th,
.employee-card-table td {
  padding: var(--ds-sp-3);
}

.employee-card-attendance-table {
  min-width: 760px;
}

.employee-card-attendance-table td:first-child {
  display: grid;
  gap: 2px;
}

.employee-card-attendance-table td:first-child small {
  color: var(--ds-muted);
}

.employee-card-role-select {
  min-width: 190px;
}

.employee-card-attendance-head {
  align-items: flex-end;
}

.employee-card-month-field {
  min-width: 160px;
}

.employee-card-empty {
  margin: 0;
  padding: var(--ds-sp-6);
  border: 1px dashed var(--ds-line-strong);
  border-radius: var(--ds-r-3);
  color: var(--ds-muted);
  text-align: center;
}

.employee-role-history-list {
  display: grid;
  gap: var(--ds-sp-2);
}

.employee-role-history-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(320px, 1.4fr) auto;
  align-items: end;
  gap: var(--ds-sp-4);
  padding: var(--ds-sp-3) var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.employee-role-history-main {
  display: grid;
  gap: var(--ds-sp-1);
  align-self: center;
}

.employee-role-history-main small {
  color: var(--ds-muted);
}

.employee-role-history-main strong,
.employee-role-history-main small {
  overflow-wrap: anywhere;
}

.employee-role-boundaries {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: var(--ds-sp-2);
}

.employee-role-boundaries form,
.employee-role-delete {
  margin: 0;
}

.employee-role-boundary-static {
  display: grid;
  min-height: var(--ds-control);
  align-content: center;
  gap: var(--ds-sp-1);
}

.employee-role-delete {
  align-self: start;
  justify-self: end;
}

.employee-role-delete-button {
  width: var(--ds-control);
  padding: 0;
  color: var(--ds-danger-action);
}

.employee-role-delete-button:hover,
.employee-role-delete-button:focus-visible {
  border-color: color-mix(in srgb, var(--ds-danger-action) 34%, var(--ds-line));
  background: color-mix(in srgb, var(--ds-danger-action) 8%, var(--ds-surface));
}

.period-delete-cell {
  width: var(--ds-control);
  text-align: right;
}

.period-delete-form {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.employee-card-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-3);
}

.employee-card-settings-grid > :only-child {
  grid-column: 1 / -1;
}

.field-hint {
  margin: calc(-1 * var(--ds-sp-1)) 0 0;
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.45;
}

.employee-card-setting {
  display: grid;
  align-content: start;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.employee-card-setting-wide {
  grid-column: 1 / -1;
}

.employee-card-role-command {
  align-items: end;
  gap: var(--ds-sp-3);
}

.employee-card-role-command .field {
  flex: 1 1 220px;
}

@media (max-width: 900px) {
  .payroll-toolbar,
  .payroll-page-head {
    align-items: stretch;
    flex-direction: column;
  }

  .payroll-head-actions,
  .payroll-daily-section .section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .payroll-head-actions form,
  .payroll-head-actions .primary-button {
    width: 100%;
  }

  .payroll-daily-section .section-head > strong {
    align-self: flex-start;
  }

  .payroll-analysis-filter {
    width: 100%;
    margin-left: 0;
  }

  .payroll-period-navigator {
    width: 100%;
  }

  .payroll-period-dropdown {
    flex: 1 1 auto;
  }

  .payroll-period-trigger {
    width: 100%;
  }

  .payroll-dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payroll-dashboard-visuals {
    grid-template-columns: 1fr;
  }

  .payroll-distribution-head {
    align-items: stretch;
    flex-direction: column;
  }

  .payroll-distribution-switch {
    width: max-content;
  }

  .payroll-distribution-body {
    grid-template-columns: minmax(150px, .65fr) minmax(0, 1.35fr);
  }

  .payroll-analysis-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employee-payroll-summary {
    grid-template-columns: 1fr;
  }

  .employee-payroll-summary > div {
    border-right: 0;
    border-bottom: 1px solid var(--ds-line);
  }

  .employee-payroll-summary > div:last-child {
    border-bottom: 0;
  }

  .employee-payroll-payout-form,
  .employee-payroll-adjustment-form {
    grid-template-columns: 1fr;
  }

  .employee-payroll-adjustment-form .employee-payroll-comment {
    grid-column: auto;
  }

  .employee-payroll-action .ui-button {
    width: 100%;
  }

  .personnel-page-head {
    align-items: stretch;
    flex-direction: column;
  }

  .personnel-tabs {
    justify-content: flex-start;
  }

  .personnel-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seniority-rule-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personnel-summary-item:nth-child(2) {
    border-right: 0;
  }

  .role-detail-layout {
    grid-template-columns: 1fr;
  }

  .role-employee-sidebar {
    position: static;
  }

  .employee-card-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role-card-overview-grid {
    grid-template-columns: 1fr;
  }

  .employee-card-summary > div:nth-child(2) {
    border-right: 0;
  }

  .employee-card-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--ds-line);
  }

  .employee-role-history-item {
    grid-template-columns: 1fr;
  }

  .employee-role-delete {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }
}

@media (max-width: 640px) {
  .personnel-tabs,
  .personnel-tabs .primary-button,
  .personnel-tabs .secondary-button,
  .personnel-filter-form,
  .personnel-filter-form .secondary-button,
  .personnel-visibility-form,
  .personnel-visibility-form .secondary-button {
    width: 100%;
  }

  .personnel-directory-actions,
  .personnel-directory-bar,
  .directory-refresh-actions,
  .directory-refresh-actions form,
  .directory-refresh-actions button {
    width: 100%;
  }

  .personnel-list-head,
  .personnel-filter-form,
  .personnel-visibility-form {
    align-items: stretch;
    flex-direction: column;
  }

  .personnel-summary-grid,
  .personnel-two-columns,
  .seniority-rule-card,
  .personnel-history-actions .inline-form {
    grid-template-columns: 1fr;
  }

  .personnel-summary-item {
    border-right: 0;
    border-bottom: 1px solid var(--ds-line);
  }

  .personnel-summary-item:last-child {
    border-bottom: 0;
  }

  .personnel-two-columns {
    gap: var(--ds-sp-6);
    padding: var(--ds-sp-4);
  }

  .personnel-two-columns .section-head {
    min-height: 0;
  }

  .employee-card-dialog {
    max-height: calc(100dvh - var(--ds-sp-4));
  }

  .employee-card {
    max-height: calc(100dvh - 56px);
  }

  .employee-card-head,
  .employee-card-section-head,
  .employee-card-role-command {
    align-items: stretch;
    flex-direction: column;
  }

  .employee-card-close,
  .employee-card-month-field,
  .employee-card-role-command .ui-button {
    width: 100%;
  }

  .employee-card-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role-card-tabs {
    grid-template-columns: 1fr;
  }

  .role-card .employee-card-badges {
    width: 100%;
    justify-content: space-between;
    padding-bottom: 0;
  }

  .employee-card-summary,
  .employee-card-settings-grid,
  .employee-role-boundaries {
    grid-template-columns: 1fr;
  }

  .employee-card-summary > div {
    border-right: 0;
    border-bottom: 1px solid var(--ds-line);
  }

  .employee-card-summary > div:last-child {
    border-bottom: 0;
  }

  .role-card-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .role-card-footer .ui-button {
    width: 100%;
  }
}

}

/*
 * Global operational UI foundation.
 *
 * The legacy Analysis screen is the visual donor: compact type, a 4px rhythm,
 * restrained surfaces and information-dense tables.  Business behaviour stays
 * owned by the current Jinja/fragment contracts; these rules only make the
 * shared primitives render consistently across every module.
 */
@layer ui-core {
html {
  background: var(--ds-bg);
  font-size: 14px;
}

body {
  font-family: var(--ds-font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ds-text);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
}

.ui-page,
.page {
  width: 100%;
  padding: var(--ds-sp-5) var(--ds-sp-4) calc(var(--ds-bottom-nav) + var(--ds-sp-6));
}

.page-head {
  margin-bottom: var(--ds-sp-4);
}

.page-head h1 {
  margin-top: var(--ds-sp-1);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}

.page-head p {
  margin-top: var(--ds-sp-1);
  font-size: 13px;
  line-height: 1.45;
}

.ui-section,
.section {
  min-width: 0;
  margin-bottom: var(--ds-sp-6);
}

.ui-section-head,
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sp-4);
  margin-bottom: var(--ds-sp-3);
}

.section-head h2,
.section > h2 {
  font-size: 16px;
  line-height: 1.3;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}

.topbar {
  min-height: 60px;
  padding-block: var(--ds-sp-2);
  background: rgb(255 255 255 / 96%);
  box-shadow: var(--ds-shadow-sm);
}

.topbar-context strong {
  font-size: 13px;
}

.environment-badge {
  min-height: 28px;
  border-radius: var(--ds-r-2);
  background: var(--ds-surface);
}

.ui-field,
.field {
  display: grid;
  gap: var(--ds-sp-1);
  min-width: 0;
}

.ui-field > span,
.field > span,
.ui-field > label,
.field > label {
  color: var(--ds-text-soft);
  font-size: 13px;
  font-weight: 600;
}

.ui-field > small,
.field > small {
  color: var(--ds-muted);
  font-size: var(--ds-font-xs);
  line-height: 1.35;
}

.ui-control,
.text-input {
  width: 100%;
  min-width: 0;
  min-height: var(--ds-control);
  padding: 0 var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-2);
  background-color: transparent;
  color: var(--ds-text);
  font-size: 16px;
  line-height: var(--ds-line-base);
  transition: border-color var(--ds-motion-fast) var(--ds-ease),
    box-shadow var(--ds-motion-fast) var(--ds-ease),
    background var(--ds-motion-fast) var(--ds-ease);
}

.ui-control:hover:not(:disabled):not([readonly]),
.text-input:hover:not(:disabled):not([readonly]) {
  border-color: var(--ds-line-strong);
}

.ui-control:focus,
.text-input:focus {
  border-color: var(--ds-accent);
  box-shadow: var(--ds-focus-ring);
  outline: 0;
}

.ui-control[readonly],
.text-input[readonly] {
  background-color: transparent;
}

.ui-control:disabled,
.text-input:disabled {
  cursor: not-allowed;
  opacity: var(--ds-disabled-opacity);
}

.ui-control[aria-invalid="true"],
.text-input[aria-invalid="true"] {
  border-color: var(--ds-danger);
  box-shadow: 0 0 0 3px var(--ds-danger-soft);
}

textarea.ui-control,
textarea.text-input {
  min-height: 104px;
  padding-block: var(--ds-sp-2);
  resize: vertical;
}

.ui-control-compact {
  min-height: var(--ds-control-compact);
  height: var(--ds-control-compact);
  padding-block: 7px;
  font-size: var(--ds-font-md);
}

select.ui-control,
select.text-input {
  padding-right: 36px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ds-muted) 50%),
    linear-gradient(135deg, var(--ds-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

/* Shared form controls. Native semantics stay in the DOM; appearance is core-owned. */
input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
  border: 1px solid var(--ds-line-strong);
  background-color: var(--ds-surface);
  appearance: none;
  cursor: pointer;
  transition: border-color var(--ds-motion-fast) var(--ds-ease),
    background-color var(--ds-motion-fast) var(--ds-ease),
    box-shadow var(--ds-motion-fast) var(--ds-ease);
}

input[type="checkbox"] {
  border-radius: var(--ds-r-1);
}

input[type="checkbox"]:checked {
  border-color: var(--ds-accent);
  background-color: var(--ds-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.3' d='m5 10 3 3 7-7'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
}

input[type="checkbox"]:indeterminate {
  border-color: var(--ds-accent);
  background-color: var(--ds-accent);
  background-image: linear-gradient(var(--ds-white), var(--ds-white));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 2px;
}

input[type="radio"] {
  border-radius: var(--ds-r-full);
}

input[type="radio"]:checked {
  border-color: var(--ds-accent);
  background: var(--ds-accent);
  box-shadow: inset 0 0 0 5px var(--ds-surface);
}

input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) {
  border-color: var(--ds-accent);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  cursor: not-allowed;
  opacity: .5;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: var(--ds-sp-2);
  color: var(--ds-text);
  font-size: var(--ds-font-md);
  font-weight: var(--ds-weight-bold);
}

/* Shared dropdown contract used by Analysis, OPIU and future modules. */
.ui-dropdown {
  position: relative;
}

.ui-dropdown > summary,
.ui-dropdown-trigger {
  list-style: none;
}

.ui-dropdown > summary::-webkit-details-marker,
.ui-dropdown-trigger::-webkit-details-marker {
  display: none;
}

.ui-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
  min-height: var(--ds-control-compact);
  padding: 7px var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-2);
  background: transparent;
  color: var(--ds-text);
  font-size: var(--ds-font-md);
  font-weight: var(--ds-weight-semibold);
  cursor: pointer;
  transition: border-color var(--ds-motion-fast) var(--ds-ease),
    box-shadow var(--ds-motion-fast) var(--ds-ease),
    background var(--ds-motion-fast) var(--ds-ease);
}

.ui-dropdown-label {
  color: var(--ds-muted);
  font-size: var(--ds-font-xs);
  font-weight: var(--ds-weight-bold);
}

.ui-dropdown-value {
  color: var(--ds-text);
  font-size: var(--ds-font-md);
  font-weight: var(--ds-weight-bold);
}

.ui-dropdown-caret {
  margin-left: auto;
  color: var(--ds-muted);
  font-size: var(--ds-font-xs);
  transition: transform var(--ds-motion-base) var(--ds-ease);
}

.ui-dropdown[open] > .ui-dropdown-trigger .ui-dropdown-caret {
  transform: rotate(180deg);
}

.ui-dropdown-trigger:hover,
.ui-dropdown[open] > .ui-dropdown-trigger {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px var(--ds-accent-soft);
}

.ui-dropdown-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--ds-sp-1));
  left: 0;
  display: grid;
  gap: var(--ds-sp-1);
  min-width: 260px;
  max-width: min(360px, calc(100vw - var(--ds-sp-8)));
  max-height: min(420px, calc(100vh - 120px));
  padding: var(--ds-sp-2);
  overflow-y: auto;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-popover);
}

.ui-dropdown-menu[popover]:not(:popover-open) {
  display: none;
}

.ui-dropdown-menu[popover]:popover-open {
  display: grid;
}

.ui-dropdown-menu-wide {
  min-width: 320px;
}

.ui-dropdown-menu-compact {
  min-width: 180px;
}

.ui-dropdown-menu-end {
  right: 0;
  left: auto;
}

.ui-option,
.ui-dropdown-menu > label {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
  justify-content: space-between;
  min-height: var(--ds-control-compact);
  padding: 7px var(--ds-sp-2);
  border-radius: var(--ds-r-2);
  color: var(--ds-text);
  font-size: var(--ds-font-md);
  text-decoration: none;
  cursor: pointer;
}

.ui-option:hover,
.ui-option:focus-visible,
.ui-dropdown-menu > label:hover {
  background: var(--ds-surface-muted);
}

.ui-option.is-active,
.ui-option[aria-selected="true"] {
  background: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
  font-weight: var(--ds-weight-bold);
}

.ui-option-check,
.ui-dropdown-menu > label {
  justify-content: flex-start;
}

.ui-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-2);
  min-height: var(--ds-control-small);
  color: var(--ds-text);
  text-decoration: none;
  cursor: pointer;
}

.ui-switch input[type="checkbox"],
.ui-switch-track {
  width: 40px;
  height: 22px;
  flex: 0 0 40px;
  border-radius: var(--ds-r-full);
  background-image: none;
  box-shadow: inset 0 0 0 0 var(--ds-surface);
}

.ui-switch-track {
  border: 1px solid var(--ds-line-strong);
  background-color: var(--ds-surface);
  transition: border-color var(--ds-motion-fast) var(--ds-ease),
    background-color var(--ds-motion-fast) var(--ds-ease);
}

.ui-switch input[type="checkbox"]::before,
.ui-switch-track::before {
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px;
  border-radius: var(--ds-r-full);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-sm);
  content: "";
  transition: transform var(--ds-motion-base) var(--ds-ease);
}

.ui-switch input[type="checkbox"]:checked::before,
.ui-switch[aria-checked="true"] .ui-switch-track::before {
  transform: translateX(18px);
}

.ui-switch[aria-checked="true"] .ui-switch-track {
  border-color: var(--ds-accent);
  background-color: var(--ds-accent);
}

.ui-switch:hover .ui-switch-track,
.ui-switch:focus-visible .ui-switch-track {
  border-color: var(--ds-accent);
}

.ui-card,
.ui-list,
.ui-empty-state,
.ui-popover {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.ui-card,
.ui-empty-state {
  padding: var(--ds-sp-4);
}

.ui-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.ui-list-row {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  min-height: var(--ds-control);
  padding: var(--ds-sp-2) var(--ds-sp-3);
  border-bottom: 1px solid var(--ds-line);
}

.ui-list-row:last-child {
  border-bottom: 0;
}

.ui-empty-state {
  color: var(--ds-muted);
  text-align: center;
}

.ui-popover {
  padding: var(--ds-sp-2);
  border-color: var(--ui-popover-border, var(--ds-line));
  box-shadow: var(--ds-shadow-popover);
}

.is-fragment-refreshing {
  min-height: var(--ds-control);
  overflow-anchor: none;
}

.is-fragment-loading {
  position: relative;
  cursor: progress;
}

.is-fragment-loading::before {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 28%;
  height: 2px;
  border-radius: 999px;
  background: var(--ds-accent);
  content: "";
  pointer-events: none;
  animation: fragment-loading-progress var(--ds-motion-slow) var(--ds-ease) infinite
    alternate;
}

@keyframes fragment-loading-progress {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(257%);
  }
}

input[type="number"],
input[type="date"],
input[type="month"],
.data-table,
.analysis-kpis strong,
.status-strip strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.ui-button,
.primary-button,
.danger-button,
.secondary-button {
  display: inline-flex;
  min-height: var(--ds-control-compact);
  align-items: center;
  justify-content: center;
  gap: var(--ds-sp-2);
  padding: 8px var(--ds-sp-4);
  border: 1px solid transparent;
  border-radius: var(--ds-r-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--ds-motion-fast) var(--ds-ease),
    border-color var(--ds-motion-fast) var(--ds-ease),
    color var(--ds-motion-fast) var(--ds-ease),
    box-shadow var(--ds-motion-fast) var(--ds-ease);
}

.ui-button-primary,
.primary-button {
  border-color: var(--ds-accent);
  background: var(--ds-accent);
  color: var(--ds-white);
}

.ui-button-primary:hover,
.primary-button:hover {
  border-color: var(--ds-accent-strong);
  background: var(--ds-accent-strong);
}

.ui-button-secondary,
.secondary-button {
  border-color: var(--ds-line-strong);
  background: var(--ds-surface);
  color: var(--ds-text);
}

.ui-button-secondary:hover,
.secondary-button:hover {
  border-color: var(--ds-accent);
  color: var(--ds-accent-strong);
}

.ui-button-danger,
.danger-button {
  border-color: var(--ds-danger-action);
  background: var(--ds-danger-action);
  color: var(--ds-white);
}

.ui-button-danger:hover,
.danger-button:hover {
  border-color: var(--ds-danger-action-hover);
  background: var(--ds-danger-action-hover);
}

.ui-button-compact,
.compact-button {
  min-height: var(--ds-control-compact);
  padding: 7px var(--ds-sp-3);
}

.primary-button:hover,
.secondary-button:hover,
.danger-button:hover {
  box-shadow: var(--ds-shadow-sm);
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--ds-disabled-opacity);
}

button[aria-busy="true"]::after {
  width: 12px;
  height: 12px;
  margin-left: var(--ds-sp-2);
  border: 2px solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: ds-spin .65s linear infinite;
}

@keyframes ds-spin {
  to { transform: rotate(360deg); }
}

[data-fragment-submit-status]:empty {
  display: none;
}

[data-fragment-submit-status][data-state="error"] {
  color: var(--ds-danger);
}

[data-fragment-submit-status][data-state="saved"] {
  color: var(--ds-success);
}

.status-strip,
.entity-card,
.tool-panel,
.table-shell,
.notice,
.analysis-source-bar,
.analysis-source-details,
.analysis-filter-bar,
.analysis-kpis article {
  border-color: var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
  box-shadow: none;
}

.entity-card {
  padding: var(--ds-sp-3);
  color: var(--ds-text);
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

a.entity-card:hover,
a.entity-card:focus-visible,
.entity-card-active {
  border-color: var(--ds-line-strong);
  background: var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-sm);
}

.tool-panel {
  padding: var(--ds-sp-4);
}

.badge {
  min-height: 24px;
  padding: 2px var(--ds-sp-2);
  border: 0;
  font-size: 12px;
  font-weight: 600;
}

.badge-ready {
  background: var(--ds-success-soft);
  color: var(--ds-success);
}

.badge-error,
.badge-danger {
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}

.ui-notice,
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-left: 3px solid var(--ds-accent);
  border-radius: var(--ds-r-2);
  background: var(--ds-surface);
}

.ui-notice-success,
.notice-success {
  border-color: var(--ds-success-line);
  background: var(--ds-success-soft);
  color: var(--ds-success);
}

.ui-notice-warning,
.notice-warning {
  border-color: var(--ds-warning-line);
  background: var(--ds-warning-soft);
  color: var(--ds-warning);
}

.ui-notice-danger,
.notice-error {
  border-color: var(--ds-danger-line);
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}

.table-shell,
.table-wrap {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.ui-table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: left;
}

.ui-table th,
.data-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  padding: var(--ds-sp-2);
  background: var(--ds-surface-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.ui-table td,
.data-table td {
  padding: var(--ds-sp-2);
  border-bottom: 1px solid var(--ds-line);
  color: var(--ds-text-soft);
  vertical-align: middle;
}

.ui-table tbody tr:hover td,
.data-table tbody tr:hover td {
  background: var(--ds-table-cell-hover, var(--ds-surface-muted));
}

/* Opt-in hierarchy table: visual levels only; domains keep their own data and behaviour. */
.ui-hierarchy-table {
  --ui-hierarchy-accent: #5a76c9;
  --ui-hierarchy-band: #edf0ff;
  --ui-hierarchy-guide: #d4dcf4;
  --ui-hierarchy-divider: #edf0f4;
  --ui-hierarchy-link: #d96d63;
  --ui-hierarchy-node-x: 20px;
  --ui-hierarchy-divider-x: 20px;
  --ui-hierarchy-toggle-label-offset: 36px;
  --ui-hierarchy-elbow-radius: 8px;

  border-collapse: separate;
  border-spacing: 0;
  color: var(--ds-text);
}

.ui-hierarchy-table th {
  z-index: 3;
  height: 64px;
  padding: 0 var(--ds-sp-3);
  border-bottom: 1px solid var(--ds-line-strong);
  background: var(--ds-surface);
  color: var(--ds-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.25;
  text-transform: uppercase;
  vertical-align: middle;
}

.ui-hierarchy-table th:first-child,
.ui-hierarchy-table td:first-child {
  border-right: 1px solid var(--ds-line);
}

.ui-hierarchy-table .ui-hierarchy-row {
  --ui-hierarchy-row-rest: var(--ds-surface);
  --ui-hierarchy-row-current: var(--ui-hierarchy-row-rest);
  --ui-hierarchy-guide-1-size: 100%;
  --ui-hierarchy-guide-2-size: 100%;
  --ui-hierarchy-guide-3-size: 100%;
  --ui-hierarchy-guide-4-size: 100%;
  --ui-hierarchy-divider-size: 1px;

  background: var(--ds-surface);
}

.ui-hierarchy-table .ui-hierarchy-row-accent {
  --ui-hierarchy-row-rest: var(--ui-hierarchy-band);
}

.ui-hierarchy-table .ui-hierarchy-guide-end-1 {
  --ui-hierarchy-guide-1-size: calc(50% - var(--ui-hierarchy-elbow-radius));
}

.ui-hierarchy-table .ui-hierarchy-guide-end-2 {
  --ui-hierarchy-guide-2-size: calc(50% - var(--ui-hierarchy-elbow-radius));
}

.ui-hierarchy-table .ui-hierarchy-guide-end-3 {
  --ui-hierarchy-guide-3-size: calc(50% - var(--ui-hierarchy-elbow-radius));
}

.ui-hierarchy-table .ui-hierarchy-guide-end-4 {
  --ui-hierarchy-guide-4-size: calc(50% - var(--ui-hierarchy-elbow-radius));
}

.ui-hierarchy-table .ui-hierarchy-row > td {
  height: 62px;
  padding: 0 var(--ds-sp-5);
  border-bottom: 1px solid var(--ui-hierarchy-divider);
  background-color: var(--ds-surface);
  color: var(--ds-text-soft);
  font-size: 13px;
  line-height: 1.35;
  transition: background-color var(--ds-motion-fast) var(--ds-ease);
}

.ui-hierarchy-table .ui-hierarchy-row > td:first-child {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  border-bottom: 0;
  background-color: var(--ds-surface);
  background-image: linear-gradient(var(--ui-hierarchy-divider), var(--ui-hierarchy-divider));
  background-repeat: no-repeat;
  background-position: var(--ui-hierarchy-divider-x) 100%;
  background-size: calc(100% - var(--ui-hierarchy-divider-x)) var(--ui-hierarchy-divider-size);
}

.ui-hierarchy-table .ui-hierarchy-level-1 {
  --ui-hierarchy-node-x: 40px;
  --ui-hierarchy-divider-x: 42px;
  --ui-hierarchy-toggle-label-offset: 32px;
}

.ui-hierarchy-table .ui-hierarchy-level-2 {
  --ui-hierarchy-node-x: 60px;
  --ui-hierarchy-divider-x: 61px;
  --ui-hierarchy-toggle-label-offset: 30px;
}

.ui-hierarchy-table .ui-hierarchy-level-3 {
  --ui-hierarchy-node-x: 80px;
  --ui-hierarchy-divider-x: 81px;
  --ui-hierarchy-toggle-label-offset: 30px;
}

.ui-hierarchy-table .ui-hierarchy-level-4 {
  --ui-hierarchy-node-x: 100px;
  --ui-hierarchy-divider-x: 101px;
  --ui-hierarchy-toggle-label-offset: 30px;
}

.ui-hierarchy-table .ui-hierarchy-level-1 > td:first-child {
  background-image:
    linear-gradient(var(--ui-hierarchy-divider), var(--ui-hierarchy-divider)),
    linear-gradient(var(--ui-hierarchy-guide), var(--ui-hierarchy-guide));
  background-position: 42px 100%, 20px 0;
  background-size:
    calc(100% - 42px) var(--ui-hierarchy-divider-size),
    1px var(--ui-hierarchy-guide-1-size);
}

.ui-hierarchy-table .ui-hierarchy-level-2 > td:first-child {
  background-image:
    linear-gradient(var(--ui-hierarchy-divider), var(--ui-hierarchy-divider)),
    linear-gradient(var(--ui-hierarchy-guide), var(--ui-hierarchy-guide)),
    linear-gradient(var(--ui-hierarchy-guide), var(--ui-hierarchy-guide));
  background-position: 61px 100%, 20px 0, 40px 0;
  background-size:
    calc(100% - 61px) var(--ui-hierarchy-divider-size),
    1px var(--ui-hierarchy-guide-1-size),
    1px var(--ui-hierarchy-guide-2-size);
}

.ui-hierarchy-table .ui-hierarchy-level-3 > td:first-child {
  background-image:
    linear-gradient(var(--ui-hierarchy-divider), var(--ui-hierarchy-divider)),
    linear-gradient(var(--ui-hierarchy-guide), var(--ui-hierarchy-guide)),
    linear-gradient(var(--ui-hierarchy-guide), var(--ui-hierarchy-guide)),
    linear-gradient(var(--ui-hierarchy-guide), var(--ui-hierarchy-guide));
  background-position: 81px 100%, 20px 0, 40px 0, 60px 0;
  background-size:
    calc(100% - 81px) var(--ui-hierarchy-divider-size),
    1px var(--ui-hierarchy-guide-1-size),
    1px var(--ui-hierarchy-guide-2-size),
    1px var(--ui-hierarchy-guide-3-size);
}

.ui-hierarchy-table .ui-hierarchy-level-4 > td:first-child {
  background-image:
    linear-gradient(var(--ui-hierarchy-divider), var(--ui-hierarchy-divider)),
    linear-gradient(var(--ui-hierarchy-guide), var(--ui-hierarchy-guide)),
    linear-gradient(var(--ui-hierarchy-guide), var(--ui-hierarchy-guide)),
    linear-gradient(var(--ui-hierarchy-guide), var(--ui-hierarchy-guide)),
    linear-gradient(var(--ui-hierarchy-guide), var(--ui-hierarchy-guide));
  background-position: 101px 100%, 20px 0, 40px 0, 60px 0, 80px 0;
  background-size:
    calc(100% - 101px) var(--ui-hierarchy-divider-size),
    1px var(--ui-hierarchy-guide-1-size),
    1px var(--ui-hierarchy-guide-2-size),
    1px var(--ui-hierarchy-guide-3-size),
    1px var(--ui-hierarchy-guide-4-size);
}

.ui-hierarchy-table .ui-hierarchy-row:not(:has(.ui-hierarchy-toggle)) > td {
  background-color: var(--ui-hierarchy-row-current);
}

.ui-hierarchy-table .ui-hierarchy-row:has(.ui-hierarchy-toggle) > td {
  position: relative;
  isolation: isolate;
  border-bottom: 0;
  background-color: var(--ds-surface);
  box-shadow: none;
}

.ui-hierarchy-table .ui-hierarchy-row:has(.ui-hierarchy-toggle) {
  --ui-hierarchy-divider-size: 0px;
}

.ui-hierarchy-table .ui-hierarchy-row:has(.ui-hierarchy-toggle) > td:not(:first-child) {
  background-image: none;
}

.ui-hierarchy-table .ui-hierarchy-row:has(.ui-hierarchy-toggle) > td::before {
  position: absolute;
  z-index: -1;
  inset: 2px 0;
  background: var(--ui-hierarchy-row-current);
  content: "";
  pointer-events: none;
}

.ui-hierarchy-table .ui-hierarchy-row:has(.ui-hierarchy-toggle) > td:first-child::before {
  left: var(--ui-hierarchy-node-x);
  border-radius: 8px 0 0 8px;
}

.ui-hierarchy-table .ui-hierarchy-row:has(.ui-hierarchy-toggle) > td:last-child::before {
  border-radius: 0 8px 8px 0;
}

.ui-hierarchy-table .ui-hierarchy-row > td:first-child:not(:has(.ui-hierarchy-toggle))::before,
.ui-hierarchy-table .ui-hierarchy-row > td:first-child:not(:has(.ui-hierarchy-toggle))::after {
  position: absolute;
  z-index: 0;
  top: 50%;
  content: "";
  pointer-events: none;
}

.ui-hierarchy-table .ui-hierarchy-row > td:first-child:not(:has(.ui-hierarchy-toggle))::before {
  left: calc(var(--ui-hierarchy-node-x) - 20px);
  width: 20px;
  height: var(--ui-hierarchy-elbow-radius);
  box-sizing: border-box;
  border-bottom: 1px solid var(--ui-hierarchy-guide);
  border-left: 1px solid var(--ui-hierarchy-guide);
  border-bottom-left-radius: var(--ui-hierarchy-elbow-radius);
  background: var(--ui-hierarchy-row-current);
  transform: translateY(calc(-1 * var(--ui-hierarchy-elbow-radius)));
}

.ui-hierarchy-table .ui-hierarchy-row > td:first-child:not(:has(.ui-hierarchy-toggle))::after {
  left: calc(var(--ui-hierarchy-node-x) - 3px);
  width: 6px;
  height: 6px;
  border-radius: var(--ds-r-full);
  background: var(--ui-hierarchy-guide);
  transform: translateY(-2.5px);
}

.ui-button.ui-hierarchy-toggle {
  position: relative;
  z-index: auto;
  display: flex;
  width: calc(100% - var(--ui-hierarchy-node-x) + 2px);
  min-height: 58px;
  align-items: center;
  justify-content: flex-start;
  margin: 2px 0 2px var(--ui-hierarchy-node-x);
  padding: 0 var(--ds-sp-3) 0 var(--ui-hierarchy-toggle-label-offset);
  border: 0;
  border-radius: 8px 0 0 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  box-shadow: none;
}

.ui-hierarchy-level-1 .ui-hierarchy-toggle::before,
.ui-hierarchy-level-2 .ui-hierarchy-toggle::before,
.ui-hierarchy-level-3 .ui-hierarchy-toggle::before,
.ui-hierarchy-level-4 .ui-hierarchy-toggle::before {
  position: absolute;
  z-index: 0;
  top: calc(50% - var(--ui-hierarchy-elbow-radius));
  left: -20px;
  width: 20px;
  height: var(--ui-hierarchy-elbow-radius);
  box-sizing: border-box;
  border-bottom: 1px solid var(--ui-hierarchy-guide);
  border-left: 1px solid var(--ui-hierarchy-guide);
  border-bottom-left-radius: var(--ui-hierarchy-elbow-radius);
  background: var(--ds-surface);
  content: "";
  pointer-events: none;
}

.ui-hierarchy-toggle[aria-expanded="true"]::after {
  position: absolute;
  z-index: -1;
  top: calc(50% + 12px);
  bottom: -2px;
  left: 0;
  width: 1px;
  background: var(--ui-hierarchy-guide);
  content: "";
  pointer-events: none;
}

.ui-hierarchy-level-0 .ui-hierarchy-toggle[aria-expanded="true"]::after {
  top: calc(50% + 14px);
}

.ui-button.ui-hierarchy-toggle:hover {
  border-color: transparent;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.ui-hierarchy-table
  .ui-hierarchy-row:has(.ui-hierarchy-toggle):hover
  > td:first-child::after,
.ui-hierarchy-table
  .ui-hierarchy-row:has(.ui-hierarchy-toggle:focus-visible)
  > td:first-child::after {
  position: absolute;
  z-index: 2;
  inset: 2px 0 2px var(--ui-hierarchy-node-x);
  border-radius: 8px 0 0 8px;
  box-shadow:
    inset 1px 0 0 var(--ui-hierarchy-accent),
    inset 0 1px 0 var(--ui-hierarchy-accent),
    inset 0 -1px 0 var(--ui-hierarchy-accent);
  content: "";
  pointer-events: none;
}

.ui-hierarchy-table
  .ui-hierarchy-row:has(.ui-hierarchy-toggle):hover
  > td:not(:first-child)::after,
.ui-hierarchy-table
  .ui-hierarchy-row:has(.ui-hierarchy-toggle:focus-visible)
  > td:not(:first-child)::after {
  position: absolute;
  z-index: 2;
  inset: 2px 0;
  box-shadow:
    inset 0 1px 0 var(--ui-hierarchy-accent),
    inset 0 -1px 0 var(--ui-hierarchy-accent);
  content: "";
  pointer-events: none;
}

.ui-hierarchy-table
  .ui-hierarchy-row:has(.ui-hierarchy-toggle):hover
  > td:last-child::after,
.ui-hierarchy-table
  .ui-hierarchy-row:has(.ui-hierarchy-toggle:focus-visible)
  > td:last-child::after {
  border-radius: 0 8px 8px 0;
  box-shadow:
    inset -1px 0 0 var(--ui-hierarchy-accent),
    inset 0 1px 0 var(--ui-hierarchy-accent),
    inset 0 -1px 0 var(--ui-hierarchy-accent);
}

.ui-button.ui-hierarchy-toggle:focus-visible {
  outline: 0;
}

.ui-button.ui-hierarchy-toggle:focus-visible .ui-hierarchy-caret {
  outline: 3px solid color-mix(in srgb, var(--ui-hierarchy-accent) 42%, transparent);
  outline-offset: 2px;
}

.ui-hierarchy-caret {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: -12px;
  display: inline-grid;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  place-items: center;
  border: 1px solid var(--ui-hierarchy-accent);
  border-radius: var(--ds-r-full);
  background: var(--ds-surface);
  color: var(--ui-hierarchy-accent);
  font-size: 0;
  line-height: 1;
  transition-property: background-color, border-color, color;
  transition-duration: var(--ds-motion-fast);
  transition-timing-function: var(--ds-ease);
}

.ui-hierarchy-level-0 .ui-hierarchy-caret {
  left: -14px;
  width: 28px;
  height: 28px;
  margin-top: -14px;
}

.ui-hierarchy-caret::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  content: "";
  transform: translate(-50%, -50%) rotate(-135deg);
  transition: transform var(--ds-motion-fast) var(--ds-ease);
}

.ui-hierarchy-toggle[aria-expanded="false"] .ui-hierarchy-caret::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.ui-hierarchy-row.is-hierarchy-revealing > td {
  animation: ui-hierarchy-reveal var(--ds-motion-fast) var(--ds-ease) both;
}

@keyframes ui-hierarchy-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ui-hierarchy-row-accent .ui-hierarchy-caret {
  border-color: var(--ui-hierarchy-accent);
  background: var(--ui-hierarchy-accent);
  color: var(--ds-white);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--ui-hierarchy-accent) 22%, transparent);
}

.ui-hierarchy-row-group:not(.ui-hierarchy-row-accent)
  .ui-hierarchy-toggle[aria-expanded="false"]
  .ui-hierarchy-caret {
  border-color: transparent;
  background: #f5f7fa;
  color: var(--ds-muted);
}

.ui-hierarchy-row-section {
  font-weight: 700;
}

.ui-hierarchy-row-group,
.ui-hierarchy-row-total {
  font-weight: 600;
}

.ui-hierarchy-row-detail {
  font-style: italic;
  font-weight: 400;
}

.ui-hierarchy-row-total > td {
  color: var(--ds-text);
}

.ui-hierarchy-row > td:first-child:not(:has(.ui-hierarchy-toggle)) .ui-hierarchy-label {
  width: calc(100% - var(--ui-hierarchy-node-x) - 16px);
  min-height: 62px;
  margin-left: calc(var(--ui-hierarchy-node-x) + 16px);
}

.ui-hierarchy-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  color: var(--ds-text-soft);
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
}

.ui-hierarchy-label strong,
.ui-hierarchy-table td strong {
  color: var(--ds-text);
  font-weight: 700;
}

.ui-hierarchy-info {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  place-items: center;
  border: 1px solid #dfe1e7;
  border-radius: var(--ds-r-full);
  background: transparent;
  color: #b9bec9;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
}

.ui-hierarchy-source-link {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-left: auto;
  place-items: center;
  color: var(--ui-hierarchy-link);
}

.ui-hierarchy-source-link svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-width: 1.45;
}

@media (max-width: 599px) {
  .ui-hierarchy-table .ui-hierarchy-row > td,
  .ui-button.ui-hierarchy-toggle {
    min-height: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-hierarchy-table .ui-hierarchy-row > td,
  .ui-button.ui-hierarchy-toggle,
  .ui-hierarchy-caret,
  .ui-hierarchy-caret::before,
  .ui-hierarchy-row.is-hierarchy-revealing > td {
    animation: none;
    transition: none;
  }
}

[data-record-href] {
  cursor: pointer;
}

[data-record-href]:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
}

.ui-table tbody tr[data-record-href]:hover > td,
.ui-table tbody tr[data-record-href]:focus-visible > td,
.data-table tbody tr[data-record-href]:hover > td,
.data-table tbody tr[data-record-href]:focus-visible > td {
  background: var(--ds-accent-soft);
}

[data-record-href]:not(tr):hover,
[data-record-href]:not(tr):focus-visible {
  border-color: var(--ds-accent);
  background: var(--ds-accent-soft);
}

.ui-dialog,
.modal {
  width: min(var(--ds-dialog), calc(100vw - var(--ds-sp-8)));
  max-width: none;
  padding: var(--ds-sp-5);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  max-height: calc(100dvh - var(--ds-sp-8));
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--ds-bg);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-modal);
}

.ui-dialog-compact {
  width: min(var(--ds-dialog-compact), calc(100vw - var(--ds-sp-8)));
}

.ui-dialog-wide {
  width: min(var(--ds-dialog-wide), calc(100vw - var(--ds-sp-8)));
}

.ui-dialog > form,
.modal > form {
  padding: 0;
}

.ui-dialog::backdrop,
.modal::backdrop {
  background: var(--ds-overlay);
}

.ui-dialog[open],
.modal[open] {
  animation: ui-dialog-enter 150ms var(--ds-ease);
}

.ui-dialog[open]::backdrop,
.modal[open]::backdrop {
  animation: ui-backdrop-enter 150ms ease-out;
}

@keyframes ui-dialog-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes ui-backdrop-enter {
  from { opacity: 0; }
}

.modal-head {
  align-items: center;
}

.modal-close {
  width: var(--ds-control-compact);
  height: var(--ds-control-compact);
  flex: 0 0 var(--ds-control-compact);
}

.bottom-nav {
  grid-auto-columns: minmax(72px, 1fr);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.nav-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.nav-item,
.bottom-nav-item {
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.bottom-nav-item .nav-icon {
  width: 18px;
  height: 18px;
}
}

@layer modules {
/* Analysis keeps the legacy information hierarchy after the shared table rules. */
.analysis-filter-bar {
  padding: var(--ds-sp-3);
}

.analysis-filter-bar.payroll-analysis-filter {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

[data-analysis-local-panel][hidden] {
  display: none;
}

.analysis-filter-select .text-input {
  min-height: var(--ds-control-compact);
  height: var(--ds-control-compact);
  font-size: 12px;
}

.segmented-control a {
  min-height: var(--ds-control-compact);
  padding: 7px var(--ds-sp-3);
  border-color: var(--ds-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.analysis-tab-list {
  gap: var(--ds-sp-1);
}

.analysis-tab {
  min-height: var(--ds-control-compact);
  padding: 8px var(--ds-sp-3);
  font-size: 12px;
  font-weight: 700;
}

.analysis-kpis {
  gap: var(--ds-sp-2);
}

.analysis-kpis article {
  padding: var(--ds-sp-3);
}

.analysis-kpis strong {
  font-size: 20px;
}

.analysis-abc-bands {
  gap: var(--ds-sp-2);
}

.analysis-abc-band {
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.analysis-abc-band.abc-band-a {
  border-color: var(--ds-success-line);
  background: var(--ds-success-soft);
}

.analysis-abc-band.abc-band-b {
  border-color: var(--ds-warning-line);
  background: var(--ds-warning-soft);
}

.analysis-abc-band.abc-band-c {
  border-color: var(--ds-danger-line);
  background: var(--ds-danger-soft);
}

.analysis-abc-band.is-active.abc-band-a {
  background: color-mix(in srgb, var(--ds-success-soft) 72%, var(--ds-success-line));
}

.analysis-abc-band.is-active.abc-band-b {
  background: color-mix(in srgb, var(--ds-warning-soft) 72%, var(--ds-warning-line));
}

.analysis-abc-band.is-active.abc-band-c {
  background: color-mix(in srgb, var(--ds-danger-soft) 72%, var(--ds-danger-line));
}

.analysis-settings-dialog {
  --ds-dialog: 760px;
  overflow: hidden;
}

.analysis-settings-dialog-head {
  margin-bottom: var(--ds-sp-2);
}

.analysis-settings-dialog-status {
  min-height: 18px;
  margin: 0 0 var(--ds-sp-2);
  color: var(--ds-muted);
  font-size: 12px;
}

.analysis-settings-dialog-status[data-state="error"] {
  color: var(--ds-danger);
}

.analysis-settings-dialog-loading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-3);
  min-height: var(--ds-control);
}

.analysis-settings-dialog-loading[hidden],
.analysis-settings-dialog-loading [hidden] {
  display: none;
}

.analysis-settings-dialog-host {
  max-height: calc(100dvh - 190px);
  overflow: auto;
  overscroll-behavior: contain;
}

.analysis-settings-content {
  display: grid;
  gap: var(--ds-sp-3);
}

.analysis-settings-dialog-connection {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-sp-3);
  margin: 0;
  padding: 0 var(--ds-sp-1);
  color: var(--ds-muted);
  font-size: 12px;
}

.analysis-settings-dialog-connection strong {
  color: var(--ds-text);
}

.analysis-settings-dialog .section {
  padding: var(--ds-sp-4);
}

.analysis-table-dense {
  font-size: 12px;
}

.data-table.analysis-table-dense th,
.data-table.analysis-table-dense td {
  padding: var(--ds-sp-2);
  vertical-align: middle;
}

.analysis-table th,
.analysis-table td {
  text-align: right;
}

.analysis-table th:nth-child(-n + 3),
.analysis-table td:nth-child(-n + 3) {
  text-align: left;
}

.analysis-table-dense tbody tr:hover td {
  background: var(--ds-surface-muted);
}

.analysis-table-dense tbody tr td.analysis-fc-low {
  --ds-table-cell-hover: color-mix(in srgb, var(--ds-success-soft) 72%, var(--ds-success-line));

  background: var(--ds-success-soft);
}

.analysis-table-dense tbody tr td.analysis-fc-medium {
  --ds-table-cell-hover: color-mix(in srgb, var(--ds-warning-soft) 72%, var(--ds-warning-line));

  background: var(--ds-warning-soft);
}

.analysis-table-dense tbody tr td.analysis-fc-high {
  --ds-table-cell-hover: color-mix(in srgb, var(--ds-danger-soft) 72%, var(--ds-danger-line));

  background: var(--ds-danger-soft);
}

.abc-letter {
  width: 24px;
  height: 22px;
  border-radius: var(--ds-r-1);
}

.menu-card {
  border-left-width: 1px;
  background: var(--ds-surface);
}

.menu-card.menu-star {
  border-color: var(--ds-success-line);
  background: var(--ds-success-soft);
}

.menu-card.menu-puzzle {
  border-color: #bcd0ec;
  background: var(--ds-accent-soft);
}

.menu-card.menu-plowhorse {
  border-color: var(--ds-warning-line);
  background: var(--ds-warning-soft);
}

.menu-card.menu-dog {
  border-color: var(--ds-danger-line);
  background: var(--ds-danger-soft);
}

/* Stop-list analytics: PostgreSQL history with three deliberate filters. */
.analysis-module-switch {
  display: inline-flex;
  gap: var(--ds-sp-1);
  margin: 0 0 var(--ds-sp-4);
  padding: var(--ds-sp-1);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface-muted);
}

.analysis-module-switch a {
  min-height: var(--ds-control-compact);
  padding: 8px var(--ds-sp-3);
  border-radius: var(--ds-r-2);
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.analysis-module-switch a.is-active {
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-sm);
  color: var(--ds-text);
}

.stoplist-analysis-filters {
  justify-content: flex-start;
}

.analysis-filter-empty {
  margin: var(--ds-sp-2);
  color: var(--ds-muted);
  font-size: 12px;
}

.stoplist-analysis-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stoplist-analysis-kpis small {
  color: var(--ds-muted);
  font-size: 11px;
  line-height: 1.35;
}

.stoplist-analysis-grid {
  display: grid;
  gap: var(--ds-sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stoplist-trend-panel {
  grid-column: 1 / -1;
}

.stoplist-trend-scroll {
  max-width: 100%;
  padding: 0 var(--ds-sp-4) var(--ds-sp-4);
  overflow-x: auto;
}

.stoplist-trend-chart {
  display: grid;
  align-items: end;
  gap: var(--ds-sp-2);
  grid-auto-columns: minmax(76px, 1fr);
  grid-auto-flow: column;
  min-width: max-content;
  min-height: 260px;
  padding: var(--ds-sp-3) 0 0;
  border-bottom: 1px solid var(--ds-line-strong);
}

.stoplist-trend-column {
  display: grid;
  align-self: stretch;
  gap: var(--ds-sp-1);
  grid-template-rows: 18px minmax(150px, 1fr) auto auto;
  min-width: 0;
  text-align: center;
}

.stoplist-trend-value,
.stoplist-trend-column small {
  color: var(--ds-muted);
  font-size: 10px;
  white-space: nowrap;
}

.stoplist-trend-column strong {
  font-size: 11px;
  white-space: nowrap;
}

.stoplist-trend-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: var(--ds-r-1) var(--ds-r-1) 0 0;
  background: linear-gradient(to top, var(--ds-surface-muted), transparent);
}

.stoplist-trend-bar {
  display: block;
  width: min(44px, 70%);
  border-radius: var(--ds-r-1) var(--ds-r-1) 0 0;
  background: linear-gradient(180deg, #6ea0dc, var(--ds-accent-strong));
}

.stoplist-section-stack {
  display: flex;
  height: 30px;
  margin: 0 var(--ds-sp-4) var(--ds-sp-4);
  overflow: hidden;
  border-radius: var(--ds-r-2);
  background: var(--ds-surface-muted);
}

.stoplist-section-stack span,
.stoplist-horizontal-track span {
  display: block;
  min-width: 0;
}

.stoplist-section-stack .is-bar,
.stoplist-section-legend .is-bar,
.stoplist-horizontal-track .is-bar {
  background: #4f86c6;
}

.stoplist-section-stack .is-kitchen,
.stoplist-section-legend .is-kitchen,
.stoplist-horizontal-track .is-kitchen {
  background: #d28a3d;
}

.stoplist-section-legend {
  display: grid;
  gap: var(--ds-sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 var(--ds-sp-4) var(--ds-sp-4);
}

.stoplist-section-legend article,
.stoplist-section-legend span {
  display: grid;
  gap: var(--ds-sp-1);
}

.stoplist-section-legend span {
  grid-template-columns: 10px 1fr;
  align-items: center;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 700;
}

.stoplist-section-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.stoplist-section-legend strong {
  font-size: 20px;
}

.stoplist-section-legend small {
  color: var(--ds-muted);
  font-size: 11px;
}

.stoplist-horizontal-chart {
  display: grid;
  gap: var(--ds-sp-3);
  padding: 0 var(--ds-sp-4) var(--ds-sp-4);
}

.stoplist-horizontal-chart article {
  display: grid;
  gap: var(--ds-sp-1);
}

.stoplist-horizontal-chart article > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-sp-3);
  font-size: 12px;
}

.stoplist-horizontal-chart article > div:first-child span,
.stoplist-horizontal-chart small {
  color: var(--ds-muted);
}

.stoplist-horizontal-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ds-surface-muted);
}

.stoplist-horizontal-track span {
  height: 100%;
  border-radius: inherit;
  background: var(--ds-accent);
}

.is-scale-width-0 { width: 0; }
.is-scale-width-1 { width: 5%; }
.is-scale-width-2 { width: 10%; }
.is-scale-width-3 { width: 15%; }
.is-scale-width-4 { width: 20%; }
.is-scale-width-5 { width: 25%; }
.is-scale-width-6 { width: 30%; }
.is-scale-width-7 { width: 35%; }
.is-scale-width-8 { width: 40%; }
.is-scale-width-9 { width: 45%; }
.is-scale-width-10 { width: 50%; }
.is-scale-width-11 { width: 55%; }
.is-scale-width-12 { width: 60%; }
.is-scale-width-13 { width: 65%; }
.is-scale-width-14 { width: 70%; }
.is-scale-width-15 { width: 75%; }
.is-scale-width-16 { width: 80%; }
.is-scale-width-17 { width: 85%; }
.is-scale-width-18 { width: 90%; }
.is-scale-width-19 { width: 95%; }
.is-scale-width-20 { width: 100%; }

.is-scale-height-0 { height: 0; }
.is-scale-height-1 { height: 5%; }
.is-scale-height-2 { height: 10%; }
.is-scale-height-3 { height: 15%; }
.is-scale-height-4 { height: 20%; }
.is-scale-height-5 { height: 25%; }
.is-scale-height-6 { height: 30%; }
.is-scale-height-7 { height: 35%; }
.is-scale-height-8 { height: 40%; }
.is-scale-height-9 { height: 45%; }
.is-scale-height-10 { height: 50%; }
.is-scale-height-11 { height: 55%; }
.is-scale-height-12 { height: 60%; }
.is-scale-height-13 { height: 65%; }
.is-scale-height-14 { height: 70%; }
.is-scale-height-15 { height: 75%; }
.is-scale-height-16 { height: 80%; }
.is-scale-height-17 { height: 85%; }
.is-scale-height-18 { height: 90%; }
.is-scale-height-19 { height: 95%; }
.is-scale-height-20 { height: 100%; }

.stoplist-product-chart {
  max-height: 430px;
  overflow-y: auto;
}

.stoplist-analysis-note {
  margin: var(--ds-sp-4) 0 0;
  color: var(--ds-muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  .stoplist-analysis-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stoplist-analysis-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 599px) {
  .analysis-alert-popover {
    width: min(520px, calc(100vw - 24px));
  }

  .analysis-module-switch {
    display: flex;
  }

  .analysis-module-switch a {
    flex: 1 1 0;
    text-align: center;
  }

  .stoplist-analysis-filters .analysis-dropdown,
  .stoplist-analysis-filters .analysis-filter-pill {
    width: 100%;
  }

  .stoplist-analysis-filters .analysis-filter-pill {
    justify-content: space-between;
  }

  .stoplist-analysis-kpis {
    grid-template-columns: 1fr;
  }

  .stoplist-section-legend {
    grid-template-columns: 1fr;
  }
}
}

@layer ui-core {
.report-filter-bar {
  position: relative;
  padding-bottom: 20px;
}

.report-filter-bar.payroll-analysis-filter {
  padding-bottom: 16px;
}

.report-filter-status {
  position: absolute;
  right: var(--ds-sp-3);
  bottom: 3px;
  min-height: 14px;
  flex-basis: auto;
  line-height: 14px;
  pointer-events: none;
}

.report-filter-bar.payroll-analysis-filter .report-filter-status {
  right: 0;
  bottom: 0;
}

.analysis-settings-dialog .analysis-group-payment-picker > .ui-dropdown-menu {
  position: static;
  width: 100%;
  max-width: none;
  margin-top: var(--ds-sp-1);
}

.ui-dropdown-menu.analysis-filter-menu-align-end {
  right: 0;
  left: auto;
}

.ui-button.analysis-alert-trigger {
  display: inline-grid;
  width: 28px;
  min-height: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border-color: var(--ds-warning-line);
  border-radius: 50%;
  background: var(--ds-warning-soft);
  color: var(--ds-warning);
  font-weight: 800;
  line-height: 1;
  cursor: help;
}

.analysis-alert-clear .ui-button.analysis-alert-trigger {
  border-color: var(--ds-line-strong);
  background: var(--ds-surface-muted);
  color: var(--ds-muted);
}

.analysis-alert-error .ui-button.analysis-alert-trigger {
  border-color: var(--ds-danger-line);
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}

.ui-button.analysis-alert-trigger:hover {
  filter: brightness(.98);
}

.ui-button.analysis-alert-trigger:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ds-accent) 45%, transparent);
  outline-offset: 2px;
}

@media (min-width: 900px) {
  .brand-mark {
    width: 30px;
    height: 30px;
  }

  .nav-item span:last-child {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .text-input {
    font-size: 13px;
  }
}

@media (max-width: 599px) {
  .ui-button,
  .primary-button,
  .secondary-button,
  .danger-button {
    min-height: var(--ds-control);
  }

  .ui-button.analysis-alert-trigger {
    width: 44px;
    min-height: 44px;
    height: 44px;
  }

  .topbar {
    min-height: var(--ds-topbar);
    padding: var(--ds-sp-1) var(--ds-sp-3);
    box-shadow: none;
  }

  .topbar-context {
    display: none;
  }

  .topbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  .topbar-actions .environment-badge {
    display: inline-flex;
    max-width: calc(100% - 76px);
    overflow: hidden;
    border: 0;
    background: transparent;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-dialog,
  .modal,
  .ui-dialog-compact,
  .ui-dialog-wide {
    width: calc(100vw - var(--ds-sp-4));
    max-height: calc(100dvh - var(--ds-sp-4));
    padding: var(--ds-sp-4);
  }

  .payroll-dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payroll-dashboard-kpis article {
    min-height: 96px;
    padding: var(--ds-sp-3);
  }

  .payroll-dashboard-kpis article:first-child,
  .payroll-dashboard-kpis article:last-child {
    grid-column: 1 / -1;
  }

  .payroll-dashboard-panel {
    padding: var(--ds-sp-4);
  }

  .payroll-day-chart {
    display: grid;
    grid-auto-columns: minmax(38px, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
  }

  .payroll-cartesian-chart {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .payroll-day-chart.is-dense .payroll-day:nth-child(even) > span {
    opacity: 1;
  }

  .payroll-distribution-body,
  .payroll-distribution-list {
    grid-template-columns: 1fr;
  }

  .payroll-donut-wrap {
    min-height: 148px;
  }

  .payroll-donut-chart {
    width: min(100%, 156px);
  }

  .payroll-day-detail .section-head,
  .payroll-day-department .section-head,
  .payroll-ledger-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .personnel-header-controls {
    align-items: stretch;
  }

  .segmented-control.personnel-directory-switch {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .segmented-control.personnel-reference-switch {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-dropdown,
  .ui-dropdown-trigger {
    width: 100%;
  }

  .personnel-header-controls .personnel-settings-menu,
  .personnel-header-controls .personnel-settings-menu > .ui-dropdown-trigger {
    width: auto;
  }

  .ui-dropdown-menu {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-top: var(--ds-sp-1);
  }

  .page {
    padding-right: var(--ds-sp-3);
    padding-left: var(--ds-sp-3);
  }

  .page-head h1 {
    font-size: 22px;
  }

  .data-table td {
    padding: 5px 0;
  }

  .analysis-table,
  .analysis-table tbody,
  .analysis-table tr,
  .analysis-table td {
    display: table;
    width: auto;
  }

  .analysis-table {
    display: table;
    width: 100%;
  }

  .analysis-table tbody {
    display: table-row-group;
  }

  .analysis-table thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .analysis-table tr {
    display: table-row;
  }

  .analysis-table td {
    display: table-cell;
    padding: var(--ds-sp-2);
  }

  .analysis-table td::before {
    content: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-dialog[open],
  .modal[open],
  .ui-dialog[open]::backdrop,
  .modal[open]::backdrop,
  button[aria-busy="true"]::after {
    animation: none;
  }

  .is-fragment-loading::before {
    width: 100%;
    transform: none;
    animation: none;
  }
}

.bottom-nav .nav-group {
  display: contents;
}

.bottom-nav-more {
  min-width: 0;
}

.bottom-nav-more > summary {
  height: 100%;
  list-style: none;
  cursor: pointer;
}

.bottom-nav-more > summary::-webkit-details-marker {
  display: none;
}

.bottom-nav-menu {
  position: fixed;
  z-index: 35;
  right: var(--ds-sp-3);
  bottom: calc(var(--ds-bottom-nav) + var(--ds-sp-2) + env(safe-area-inset-bottom));
  left: var(--ds-sp-3);
  display: grid;
  max-height: min(520px, calc(100dvh - var(--ds-bottom-nav) - var(--ds-sp-6)));
  overflow-y: auto;
  gap: var(--ds-sp-1);
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-popover);
}

.bottom-nav-menu-label {
  padding: var(--ds-sp-2) var(--ds-sp-2) var(--ds-sp-1);
  color: var(--ds-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bottom-nav-menu-item {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-2) var(--ds-sp-3);
  border-radius: var(--ds-r-2);
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.bottom-nav-menu-item.is-active {
  background: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
}

@media (max-width: 899px) {
  .bottom-nav {
    grid-auto-columns: minmax(0, 1fr);
    min-height: var(--ds-bottom-nav);
    padding: var(--ds-sp-1) max(var(--ds-sp-1), env(safe-area-inset-right))
      max(var(--ds-sp-1), env(safe-area-inset-bottom))
      max(var(--ds-sp-1), env(safe-area-inset-left));
    overflow: visible;
  }

  .bottom-nav-item {
    min-height: 52px;
    font-weight: 500;
  }
}

@media (min-width: 900px) {
  .side-nav {
    width: var(--ds-side-nav);
    padding: var(--ds-sp-3) var(--ds-sp-2);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: var(--ds-bg);
  }

  .side-nav-header {
    display: flex;
    min-height: 52px;
    align-items: center;
    gap: var(--ds-sp-1);
  }

  .brand {
    min-height: 52px;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: var(--ds-sp-2);
    padding: 0 var(--ds-sp-2);
  }

  .nav-list {
    gap: var(--ds-sp-1);
    margin-top: var(--ds-sp-4);
  }

  .brand-copy {
    display: grid;
  }

  .nav-list {
    display: block;
  }

  .nav-group + .nav-group {
    margin-top: var(--ds-sp-4);
  }

  .nav-group-label {
    display: block;
    padding: 0 var(--ds-sp-3) var(--ds-sp-1);
    color: var(--ds-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .nav-item {
    min-height: 36px;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--ds-sp-3);
    padding: 6px var(--ds-sp-3);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
  }

  .side-nav-footer {
    min-height: 44px;
    justify-content: flex-start;
    gap: var(--ds-sp-1);
    padding: var(--ds-sp-1) var(--ds-sp-2);
    border-top: 1px solid var(--ds-line);
    font-size: 11px;
  }

  .side-nav-account {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--ds-sp-2);
  }

  .side-nav-account-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  .side-nav-account-copy strong,
  .side-nav-account-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .side-nav-account-copy strong {
    color: var(--ds-text);
    font-size: 12px;
    font-weight: 600;
  }

  .side-nav-account-copy small {
    color: var(--ds-muted);
    font-size: 10px;
    font-weight: 500;
  }

  .side-nav-toggle,
  .side-nav-logout {
    width: var(--ds-control-compact);
    height: var(--ds-control-compact);
    flex: 0 0 var(--ds-control-compact);
    background: transparent;
  }

  .side-nav-toggle svg {
    transform-origin: center;
  }

  .workspace {
    margin-left: var(--ds-side-nav);
  }

  .app-shell[data-side-nav-ready="true"] .side-nav {
    transition: width var(--ds-motion-base) cubic-bezier(.4, 0, .2, 1);
  }

  .app-shell[data-side-nav-ready="true"] .workspace {
    transition: margin-left var(--ds-motion-base) cubic-bezier(.4, 0, .2, 1);
  }

  .app-shell[data-side-nav-ready="true"] .side-nav-toggle svg {
    transition: transform var(--ds-motion-base) cubic-bezier(.4, 0, .2, 1);
  }

  .topbar {
    display: none;
  }

  .page {
    margin: 0;
    padding: var(--ds-sp-8);
  }

  .app-shell[data-side-nav-collapsed="true"] .side-nav {
    width: var(--ds-side-nav-collapsed);
  }

  .app-shell[data-side-nav-collapsed="true"] .workspace {
    margin-left: var(--ds-side-nav-collapsed);
  }

  .app-shell[data-side-nav-collapsed="true"] .side-nav-header {
    min-height: 88px;
    flex-direction: column;
    justify-content: center;
  }

  .app-shell[data-side-nav-collapsed="true"] .brand {
    min-height: 36px;
    flex: 0 0 auto;
    padding: 0;
  }

  .app-shell[data-side-nav-collapsed="true"] .brand-copy,
  .app-shell[data-side-nav-collapsed="true"] .nav-group-label,
  .app-shell[data-side-nav-collapsed="true"] .nav-item span,
  .app-shell[data-side-nav-collapsed="true"] .side-nav-account-copy {
    display: none;
  }

  .app-shell[data-side-nav-collapsed="true"] .nav-group + .nav-group {
    margin-top: var(--ds-sp-2);
  }

  .app-shell[data-side-nav-collapsed="true"] .nav-item {
    justify-content: center;
    padding: 6px;
  }

  .app-shell[data-side-nav-collapsed="true"] .side-nav-footer {
    flex-direction: column;
    padding: var(--ds-sp-2) 0;
  }

  .app-shell[data-side-nav-collapsed="true"] .side-nav-account {
    flex: 0 0 auto;
  }

  .app-shell[data-side-nav-collapsed="true"] .side-nav-toggle svg {
    transform: rotate(180deg);
  }
}
}

/*
 * Shared layout authority.
 *
 * Visual components live in ui-core, domain states live in modules, and every
 * reusable relationship between components lives here.  Keeping this layer
 * last prevents a component's default geometry from overriding an explicitly
 * selected core layout primitive.
 */
@layer ui-layout {
.ui-stack,
.stack-form {
  display: grid;
  gap: var(--ds-sp-4);
}

:where(.ui-stack, .stack-form) > * {
  min-width: 0;
  margin-block: 0;
}

.ui-stack-compact {
  gap: var(--ds-sp-2);
}

.ui-stack-loose {
  gap: var(--ds-sp-6);
}

.ui-inline,
.inline-form {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--ds-sp-3);
}

.ui-inline > .ui-field,
.ui-inline > .field,
.inline-form > .ui-field,
.inline-form > .field {
  flex: 1 1 180px;
}

.fragment-submit-feedback {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}

:where(.ui-inline, .inline-form, .ui-action-row, .button-row, .action-row)
  > .fragment-submit-feedback {
  flex: 1 1 100%;
}

.ui-inline-nowrap {
  flex-wrap: nowrap;
}

.ui-grid {
  display: grid;
  gap: var(--ds-sp-4);
}

.ui-form-grid,
.personnel-rate-form {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--ds-form-column-min)), 1fr)
  );
  align-items: end;
  gap: var(--ds-sp-4);
  margin: 0;
}

:where(.ui-form-grid, .personnel-rate-form) > :is(
  .ui-button,
  .primary-button,
  .secondary-button,
  .danger-button
) {
  width: 100%;
}

.ui-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-sp-3);
}

.ui-control-row > :is(.ui-control, .text-input) {
  width: 100%;
  min-width: 0;
}

.ui-control-short {
  width: var(--ds-control-short);
  min-width: var(--ds-control-short);
  max-width: 100%;
}

.ui-control-numeric,
.ui-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
}

/* Finance keeps the hierarchy visible while its value columns scroll horizontally. */
.income-expenses-statement .ui-hierarchy-table .income-expenses-row > td:first-child {
  position: sticky;
  z-index: 4;
  left: 0;
}

.ui-action-row,
.button-row,
.action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-sp-2);
  margin-top: var(--ds-sp-4);
}

.ui-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-sp-3);
}

@media (max-width: 599px) {
  .ui-inline,
  .inline-form,
  .ui-control-row {
    display: grid;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-inline > *,
  .inline-form > *,
  .ui-control-row > *,
  .ui-control-short {
    width: 100%;
    min-width: 0;
  }

  .ui-form-grid,
  .personnel-rate-form {
    grid-template-columns: minmax(0, 1fr);
  }
}
}

@layer modules {
/* Late scoped corrections keep the page-22 contract above legacy personnel rules. */
.personnel-screen .personnel-page-head {
  min-height: 78px;
  align-items: flex-start;
  margin-bottom: 0;
}

.personnel-screen .personnel-page-head > :first-child > p,
.personnel-screen .personnel-list-head > :first-child {
  min-height: 0;
}

.personnel-screen .personnel-header-controls {
  min-height: 60px;
  padding: var(--ds-sp-2);
  border: 1px solid var(--ds-line);
  background: var(--ds-surface);
}

.personnel-screen .personnel-header-controls .personnel-directory-switch a.is-active,
.personnel-screen .personnel-reference-switch a.is-active {
  border-color: var(--ds-accent);
  background: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
  box-shadow: none;
}

.personnel-payroll-settings-screen > .section {
  padding: var(--ds-sp-4);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.personnel-payroll-settings-screen > .section .section-head {
  margin-bottom: var(--ds-sp-4);
}

.personnel-payroll-settings-screen .personnel-rate-form,
.personnel-payroll-settings-screen .personnel-filter-form {
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-2);
  background: var(--ds-surface-muted);
}

.payroll-analysis-page.is-day-detail .payroll-page-head {
  min-height: 92px;
}

.payroll-day-back {
  margin-bottom: var(--ds-sp-2);
}

.payroll-analysis-page.is-day-detail .payroll-dashboard > .payroll-dashboard-kpis {
  display: none;
}

.payroll-analysis-page.is-day-detail .payroll-day-detail {
  display: grid;
  gap: var(--ds-sp-3);
  margin: 0;
}

.payroll-day-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ds-sp-3);
}

.payroll-day-kpis article {
  display: grid;
  min-height: 102px;
  align-content: start;
  gap: var(--ds-sp-2);
  padding: var(--ds-sp-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.payroll-day-kpis span,
.payroll-day-kpis small {
  color: var(--ds-muted);
  font-size: var(--ds-font-xs);
}

.payroll-day-kpis strong {
  overflow: hidden;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payroll-day-department {
  overflow: hidden;
  gap: 0;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.payroll-day-department + .payroll-day-department {
  padding-top: 0;
  border-top: 1px solid var(--ds-line);
}

.payroll-day-department-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  min-height: 82px;
  align-items: center;
  gap: var(--ds-sp-4);
  padding: var(--ds-sp-3) var(--ds-sp-4);
  cursor: pointer;
  list-style: none;
}

.payroll-day-department-summary::-webkit-details-marker {
  display: none;
}

.payroll-day-department-summary:hover,
.payroll-day-department[open] > .payroll-day-department-summary {
  background: var(--ds-accent-soft);
}

.payroll-day-department-summary > span {
  display: grid;
  gap: var(--ds-sp-1);
}

.payroll-day-department-summary > span:nth-child(2) {
  justify-items: end;
}

.payroll-day-department-summary small {
  color: var(--ds-muted);
  font-size: var(--ds-font-xs);
}

.payroll-day-department-chevron {
  color: var(--ds-accent-strong);
  font-size: 18px;
  transition: transform var(--ds-motion-fast) var(--ds-ease);
}

.payroll-day-department[open] .payroll-day-department-chevron {
  transform: rotate(180deg);
}

.payroll-day-table th,
.payroll-day-table td {
  height: 54px;
  padding: var(--ds-sp-3) var(--ds-sp-4);
}

.payroll-day-table th:nth-child(n + 3),
.payroll-day-table td:nth-child(n + 3) {
  text-align: right;
  white-space: nowrap;
}

.payroll-day-source-note {
  min-height: 36px;
  align-items: center;
  padding: var(--ds-sp-2) var(--ds-sp-3);
  border-left-width: 1px;
  font-size: var(--ds-font-xs);
}

.payroll-anomaly-notice {
  display: grid;
  gap: var(--ds-sp-2);
}

.payroll-anomaly-notice > strong {
  color: var(--ds-text);
}

.payroll-anomaly-notice ul {
  display: grid;
  gap: var(--ds-sp-1);
  margin: 0;
  padding-left: var(--ds-sp-5);
}

.payroll-anomaly-list > li {
  display: grid;
  gap: var(--ds-sp-2);
  overflow-wrap: anywhere;
}

.payroll-day-department.has-payroll-anomaly {
  border-color: var(--ds-warning-line);
}

.payroll-day-department.has-payroll-anomaly > .payroll-day-department-summary {
  box-shadow: inset 3px 0 0 var(--ds-warning);
}

.payroll-day-table tr.payroll-anomaly-row > td {
  background: var(--ds-warning-soft);
}

.payroll-day-table tr.payroll-anomaly-row:hover > td {
  background: color-mix(in srgb, var(--ds-warning-soft) 72%, var(--ds-warning-line));
}

.payroll-anomaly-row-note {
  display: block;
  margin-top: var(--ds-sp-1);
  color: var(--ds-warning);
  font-size: var(--ds-font-xs);
  font-weight: var(--ds-weight-semibold);
}

.payroll-norm-form {
  display: grid;
  gap: var(--ds-sp-4);
}

.payroll-norm-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-3);
  align-items: end;
}

.payroll-norm-roles-field {
  grid-column: 1 / -1;
}

.payroll-norm-role-picker,
.payroll-norm-role-picker > .ui-dropdown-trigger {
  width: 100%;
}

.payroll-norm-role-menu {
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
}

.payroll-norm-role-menu .ui-option-check > span {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-3);
}

.payroll-norm-role-menu small {
  color: var(--ds-muted);
  white-space: nowrap;
}

.payroll-norm-list {
  display: grid;
  gap: var(--ds-sp-3);
}

.payroll-norm-card {
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-3);
  background: var(--ds-surface);
}

.payroll-norm-card-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  min-height: 82px;
  align-items: center;
  gap: var(--ds-sp-4);
  padding: var(--ds-sp-3) var(--ds-sp-4);
  cursor: pointer;
  list-style: none;
}

.payroll-norm-card-summary::-webkit-details-marker {
  display: none;
}

.payroll-norm-card-summary:hover,
.payroll-norm-card[open] > .payroll-norm-card-summary {
  background: var(--ds-accent-soft);
}

.payroll-norm-card-summary > span {
  display: grid;
  gap: var(--ds-sp-1);
}

.payroll-norm-card-summary > span:nth-child(2) {
  justify-items: end;
}

.payroll-norm-card-summary small {
  color: var(--ds-muted);
  font-size: var(--ds-font-xs);
}

.payroll-norm-card[open] .payroll-day-department-chevron {
  transform: rotate(180deg);
}

.payroll-norm-card-body {
  display: grid;
  gap: var(--ds-sp-4);
  padding: var(--ds-sp-4);
  border-top: 1px solid var(--ds-line);
}

@media (max-width: 1000px) {
  .payroll-day-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .personnel-screen .personnel-page-head {
    min-height: 0;
  }

  .payroll-day-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .payroll-distribution-projections {
    display: block;
  }

  .payroll-distribution-projection.is-inactive {
    display: none;
  }

  .payroll-day-department-summary {
    grid-template-columns: minmax(0, 1fr) 24px;
  }

  .payroll-day-department-summary > span:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    justify-items: start;
  }

  .payroll-day-department-chevron {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .payroll-norm-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .payroll-norm-roles-field {
    grid-column: auto;
  }

  .payroll-norm-card-summary {
    grid-template-columns: minmax(0, 1fr) 24px;
  }

  .payroll-norm-card-summary > span:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    justify-items: start;
  }

  .payroll-norm-card-summary > .payroll-day-department-chevron {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}
}