html[data-ui-scale] {
  font-size: var(--ui-font-size);
}

body.app-body {
  font-size: var(--ui-font-size);
  line-height: var(--ui-line-height);
}

.app-main {
  padding-top: var(--app-header-height);
}

.app-content {
  padding-top: var(--ui-space-xl);
  padding-bottom: calc(var(--ui-space-xl) + var(--ui-space-md));
}

.app-content--full {
  padding-inline: var(--ui-space-lg);
}

.app-header {
  height: var(--app-header-height);
  gap: var(--ui-space-lg);
  padding-inline: var(--ui-space-lg);
}

.app-header__nav,
.app-header__tools,
.app-header__brand {
  gap: var(--ui-space-sm);
}

.app-header__nav-link,
.app-header__nav-button,
.app-header__lang-toggle,
.app-header__notifications-button,
.app-user-button,
.app-header__module-back {
  min-height: var(--ui-control-height);
  padding-inline: var(--ui-control-padding-x);
  font-size: var(--ui-font-size);
}

.app-user-button__avatar {
  width: calc(var(--ui-control-height) - 10px);
  height: calc(var(--ui-control-height) - 10px);
  font-size: var(--ui-small-font-size);
}

.app-dropdown__menu,
.app-dropdown__sub-menu {
  font-size: var(--ui-font-size);
  border-radius: var(--ui-radius);
}

.app-dropdown__item,
.app-dropdown__sub-toggle,
.app-dropdown__report-item {
  min-height: var(--ui-control-height);
  padding: var(--ui-space-sm) var(--ui-control-padding-x);
  font-size: var(--ui-font-size);
}

.app-dropdown__label {
  display: block;
  margin-bottom: var(--ui-space-xs);
  color: var(--app-text-muted);
  font-size: var(--ui-small-font-size);
  font-weight: 700;
  text-transform: uppercase;
}

.app-dropdown__section {
  padding: var(--ui-space-sm) var(--ui-control-padding-x);
  border-bottom: 1px solid var(--app-border);
}

.app-ui-scale-control {
  min-width: 230px;
}

.app-ui-scale-control__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-space-xs);
}

.app-ui-scale-control__option {
  min-height: var(--ui-control-height-sm);
  padding: 0 var(--ui-space-sm);
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius);
  background: var(--app-surface);
  color: var(--app-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--ui-small-font-size);
  white-space: nowrap;
}

.app-ui-scale-control__option:hover,
.app-ui-scale-control__option.is-active {
  border-color: color-mix(in srgb, var(--app-primary) 42%, var(--app-border));
  background: color-mix(in srgb, var(--app-primary) 9%, #fff);
  color: var(--app-primary);
}

.app-page-header,
.page-header,
.module-page-header {
  gap: var(--ui-space-md);
  margin-bottom: var(--ui-space-lg);
}

.app-section-stack,
.dashboard-stack,
.module-grid,
.settings-grid,
.app-launcher-grid,
.ar-module-grid,
.app-kpi-grid,
.dashboard-kpi-grid {
  gap: var(--ui-card-gap);
}

.app-card,
.module-tile,
.app-module-tile,
.ar-module-tile,
.kpi-card,
.ar-kpi-card,
.metric-panel,
.app-panel,
.wizard-panel,
.operation-panel,
.report-preview,
.dashboard-section {
  padding: var(--ui-card-padding);
  border-radius: var(--ui-radius);
}

.btn,
.app-button,
button.app-button,
.app-input,
.app-select,
.app-textarea,
input[type="text"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
/* 2026-08-21: the module-form control joins this rule so the two field spellings
   cannot drift. They had been resolving different tokens -- .app-input took
   --ui-radius and --ui-font-size (4px/14px) while .app-module-form__control took
   --tbl-radius-sm and --ui-small-font-size (2px/12px) -- and because this file is
   the last stylesheet head.php loads, .app-input always won its own values. Two
   controls sitting side by side on the same page did not match. */
.app-module-form__control {
  min-height: var(--ui-control-height);
  padding-inline: var(--ui-control-padding-x);
  /* Box system, not --ui-radius: the 2026-08-11 adoption moved to sharp corners. */
  border-radius: var(--tbl-radius-sm);
  /* Controls carry the small size; --ui-font-size is the body size. This is what
     the approved module-form design uses, and it scales with the 100/90/80 tiers. */
  font-size: var(--ui-small-font-size);
}

.btn-sm,
.app-button--sm,
.app-pagination__button,
.ar-pagination__button,
.action-menu__trigger,
.row-action-trigger,
.ar-row-action-trigger {
  min-height: var(--ui-control-height-sm);
  min-width: var(--ui-control-height-sm);
  font-size: var(--ui-small-font-size);
}

.app-toolbar,
.page-toolbar,
.workspace-toolbar,
.ar-toolbar,
.odoo-list-control-bar,
.report-toolbar,
.dashboard-toolbar {
  min-height: var(--ui-toolbar-height);
  gap: var(--ui-space-sm);
  padding: var(--ui-space-xs) var(--ui-space-sm);
}

.app-table,
.data-grid,
.ar-data-grid,
.workspace-data-grid,
.odoo-list-table,
.report-table,
.collections-table {
  font-size: var(--ui-table-font-size);
}

:is(.app-table, .data-grid, .ar-data-grid, .workspace-data-grid, .odoo-list-table, .report-table, .collections-table) :is(th, td) {
  padding: var(--ui-table-cell-padding-y) var(--ui-table-cell-padding-x);
}

:is(.app-table, .data-grid, .ar-data-grid, .workspace-data-grid, .odoo-list-table, .report-table, .collections-table) tbody tr {
  min-height: var(--ui-table-row-height);
}

.app-modal__panel,
.modal-panel,
.app-drawer__panel,
.drawer-panel {
  border-radius: var(--ui-radius);
}

.app-modal__header,
.app-modal__footer,
.app-drawer__header,
.app-drawer__footer {
  padding: var(--ui-space-md) var(--ui-card-padding);
}

.app-modal__body,
.app-drawer__body {
  padding: var(--ui-card-padding);
}

.upload-control,
.app-upload-control {
  gap: var(--ui-space-sm);
  padding: var(--ui-card-padding);
}

.app-badge,
.badge,
.status-badge,
.chip,
.app-chip {
  min-height: var(--ui-control-height-sm);
  padding-inline: var(--ui-space-sm);
  font-size: var(--ui-small-font-size);
}