/* Shared controls only. This file intentionally does not define page, card, table, or list layouts. */

@media screen {
  :is(button, input, select, textarea) {
    font-family: var(--erp-font-sans);
  }

  :is(.primary, .secondary, .back-button, .danger-button, .action-icon-button, .tf-icon-button, .tf-action-button) {
    border-radius: var(--erp-radius-md);
    transition: background-color var(--erp-duration-fast) var(--erp-ease-standard),
      border-color var(--erp-duration-fast) var(--erp-ease-standard),
      color var(--erp-duration-fast) var(--erp-ease-standard),
      box-shadow var(--erp-duration-fast) var(--erp-ease-standard),
      transform var(--erp-duration-fast) var(--erp-ease-standard);
  }

  :is(.primary, .secondary, .back-button, .danger-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--erp-control-height-md);
    padding: 8px 14px;
    border: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
    font-weight: var(--erp-font-weight-semibold);
    line-height: var(--erp-line-height-tight);
  }

  .primary {
    border-color: var(--erp-primary);
    background: var(--erp-primary);
    color: #fff;
  }

  .primary:hover:not(:disabled) {
    border-color: var(--erp-primary-hover);
    background: var(--erp-primary-hover);
  }

  .primary:active:not(:disabled) {
    border-color: var(--erp-primary-active);
    background: var(--erp-primary-active);
    transform: translateY(1px);
  }

  .secondary,
  .back-button {
    border-color: var(--erp-border);
    background: var(--erp-surface);
    color: var(--erp-text);
  }

  .secondary:hover:not(:disabled),
  .back-button:hover:not(:disabled) {
    border-color: var(--erp-border-strong);
    background: var(--erp-surface-subtle);
    color: var(--erp-text-secondary);
  }

  .ghost,
  .tf-icon-button--ghost,
  .tf-action-button--ghost,
  .action-icon-button.ghost {
    border-color: transparent;
    background: transparent;
    color: var(--erp-text-secondary);
  }

  .ghost:hover:not(:disabled),
  .tf-icon-button--ghost:hover:not(:disabled),
  .tf-action-button--ghost:hover:not(:disabled),
  .action-icon-button.ghost:hover:not(:disabled) {
    background: var(--erp-surface-subtle);
    color: var(--erp-text);
  }

  .danger-button,
  .tf-icon-button--danger,
  .tf-action-button--danger,
  .action-icon-button.danger {
    border-color: color-mix(in srgb, var(--erp-danger) 35%, var(--erp-surface));
    background: color-mix(in srgb, var(--erp-danger) 6%, var(--erp-surface));
    color: var(--erp-danger);
  }

  .danger-button:hover:not(:disabled),
  .tf-icon-button--danger:hover:not(:disabled),
  .tf-action-button--danger:hover:not(:disabled),
  .action-icon-button.danger:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--erp-danger) 52%, var(--erp-surface));
    background: color-mix(in srgb, var(--erp-danger) 11%, var(--erp-surface));
  }

  :is(.primary, .secondary, .back-button, .danger-button, .ghost, .action-icon-button, .tf-icon-button, .tf-action-button):disabled {
    cursor: not-allowed;
    opacity: .52;
    transform: none;
  }

  :is(.primary, .secondary, .back-button, .danger-button, .ghost, .action-icon-button, .tf-icon-button, .tf-action-button):focus-visible {
    outline: none;
    box-shadow: var(--erp-shadow-focus);
  }

  .action-icon-button,
  .tf-icon-button--md {
    width: var(--erp-control-height-md);
    height: var(--erp-control-height-md);
  }

  .tf-icon-button,
  .action-icon-button {
    border-color: var(--erp-border);
    background: var(--erp-surface);
    color: var(--erp-text);
  }

  .tf-icon-button:hover:not(:disabled),
  .action-icon-button:hover:not(:disabled) {
    border-color: var(--erp-border-strong);
    background: var(--erp-surface-subtle);
  }

  .tf-icon-button--sm {
    width: var(--erp-control-height-sm);
    height: var(--erp-control-height-sm);
  }

  .tf-icon-button--lg {
    width: var(--erp-control-height-lg);
    height: var(--erp-control-height-lg);
  }

  .action-icon-button.tiny-action,
  .tf-icon-button.compact,
  .tf-action-button.compact {
    min-height: var(--erp-control-height-sm);
  }

  .action-icon-button.tiny-action {
    width: var(--erp-control-height-sm);
    height: var(--erp-control-height-sm);
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: var(--erp-control-height-md);
    border: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-surface);
    color: var(--erp-text);
    line-height: var(--erp-line-height-normal);
    transition: border-color var(--erp-duration-fast) var(--erp-ease-standard),
      box-shadow var(--erp-duration-fast) var(--erp-ease-standard),
      background-color var(--erp-duration-fast) var(--erp-ease-standard);
  }

  textarea {
    min-height: 96px;
  }

  :is(input, select, textarea)::placeholder {
    color: var(--erp-text-muted);
    opacity: .82;
  }

  :is(input, select, textarea):hover:not(:disabled) {
    border-color: var(--erp-border-strong);
  }

  :is(input, select, textarea):focus-visible {
    border-color: var(--erp-primary);
    outline: none;
    box-shadow: var(--erp-shadow-focus);
  }

  :is(input, select, textarea):disabled {
    cursor: not-allowed;
    border-color: var(--erp-border);
    background: var(--erp-surface-subtle);
    color: var(--erp-text-muted);
    opacity: .72;
  }

  :is(input, select, textarea)[aria-invalid="true"],
  :is(input, select, textarea).is-error,
  :is(input, select, textarea).error {
    border-color: var(--erp-danger);
  }

  :is(input, select, textarea)[aria-invalid="true"]:focus-visible,
  :is(input, select, textarea).is-error:focus-visible,
  :is(input, select, textarea).error:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--erp-danger) 22%, transparent);
  }

  :is(input[type="search"], .erp-list-search input, .product-list-search input, .bom-search-input input) {
    background-color: var(--erp-surface);
  }

  .erp-control--sm { min-height: var(--erp-control-height-sm); }
  .erp-control--md { min-height: var(--erp-control-height-md); }
  .erp-control--lg { min-height: var(--erp-control-height-lg); }
}

@media screen and (max-width: 640px) {
  :is(.primary, .secondary, .back-button, .danger-button, .tf-action-button) {
    min-height: 44px;
  }

  .tf-icon-button,
  .action-icon-button {
    min-width: 44px;
    min-height: 44px;
  }
}