/* Shared screen-only geometry. Keep document/print fields and native toggles intact. */
:root {
  --ui-control-height: 46px;
  --ui-header-height: 80px;
}

#root :is(input, select):not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"], [type="image"], [type="button"], [type="submit"], [type="reset"], [multiple], [size], .document-inline-field):not(.document-channel-table *),
body :is(#app, .modal-backdrop, .lock-screen) :is(input, select):not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"], [multiple], [size]):not(.document-preview *, .paper *, .sheet *) {
  box-sizing: border-box;
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  min-width: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-family: inherit;
  vertical-align: middle;
}

/* A native select remains keyboard/touch accessible; only its outer geometry changes. */
#root select:not([multiple], [size]):not(.document-channel-table *),
body :is(#app, .modal-backdrop, .lock-screen) select:not([multiple], [size]) {
  padding-right: 32px;
}

#root :is(.primary-button, .secondary-button, .login-button, .op-primary, .it-primary, .it-secondary, .supply-primary, .supply-secondary),
#root :is(.it-toolbar, .supply-toolbar, .op-actions, .op-task-feedback, .booking-form-actions) > button,
#root .op-form > button,
#root .op-form footer button,
body :is(.toolbar, .claim-editor-main, .modal-footer, .modal-foot) .btn:not(.icon-btn) {
  box-sizing: border-box;
  min-height: var(--ui-control-height);
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Help text must not stretch the label-to-control gap in adjacent fields. */
#root :is(.form-grid, .it-form-grid, .supply-form-grid, .op-form-grid, .external-form-grid, .channel-grid) {
  align-items: start;
}
#root :is(.form-grid, .it-form-grid, .supply-form-grid, .op-form-grid, .external-form-grid, .channel-grid) > label,
body .field {
  align-content: start;
  min-width: 0;
}

@media (min-width: 1101px) {
  :root { --header-h: var(--ui-header-height); }
  #root :is(.app-topbar, .admin-topbar, .it-topbar, .supply-topbar, .ops-header, .booking-header),
  body > .app-header {
    box-sizing: border-box;
    height: var(--ui-header-height);
    min-height: var(--ui-header-height);
    padding-top: 0;
    padding-bottom: 0;
  }
  body > .app-header { --header-h: var(--ui-header-height); }
}

/* Keep visible focus on controls in modules whose original styles remove outlines. */
#root :is(input, select, textarea, button):focus-visible {
  outline: 2px solid #327a68;
  outline-offset: 2px;
}