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

@media screen {
  .erp-surface,
  .erp-card {
    border: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
    border-radius: var(--erp-radius-lg);
    background: var(--erp-surface);
    box-shadow: var(--erp-shadow-xs);
  }

  .erp-surface--subtle { background: var(--erp-surface-subtle); }
  .erp-surface--muted { background: var(--erp-surface-muted); }
  .erp-surface--success { background: var(--erp-surface-success-subtle); }
  .erp-surface--warning { background: var(--erp-surface-warning-subtle); }
  .erp-surface--danger { background: var(--erp-surface-danger-subtle); }
  .erp-surface--info { background: var(--erp-surface-info-subtle); }

  /* Existing panels remain quieter than cards. */
  .panel {
    background: var(--erp-surface);
    box-shadow: var(--erp-shadow-xs);
  }

  /* Existing work-entry cards share one interactive surface without changing their content or layout. */
  .task-card,
  .work-queue-card {
    border-color: var(--erp-border);
    border-radius: var(--erp-radius-lg);
    background: var(--erp-surface);
    box-shadow: var(--erp-shadow-xs);
    transition: border-color var(--erp-duration-fast) var(--erp-ease-standard),
      background-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);
  }

  .task-card:hover,
  button.work-queue-card:hover {
    border-color: var(--erp-border-strong);
    background: var(--erp-surface-hover);
    box-shadow: var(--erp-shadow-sm);
    transform: translateY(-1px);
  }

  .task-card.primary-task,
  .company-tile.active {
    border-color: var(--erp-primary);
    background: var(--erp-surface-selected);
  }

  .task-card:focus-visible,
  button.work-queue-card:focus-visible {
    outline: none;
    box-shadow: var(--erp-shadow-focus);
  }

  .work-queue-card.is-disabled {
    background: var(--erp-surface-muted);
    box-shadow: none;
  }

  .company-tile {
    border-color: var(--erp-border);
    background: var(--erp-surface);
  }

  /* Dialogs retain their existing flow; only their surface hierarchy is shared here. */
  .modal-backdrop {
    background: rgba(23, 36, 43, 0.34);
  }

  .bom-dialog,
  .master-confirm-dialog {
    border: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
    border-radius: var(--erp-radius-lg);
    background: var(--erp-surface-overlay);
    box-shadow: var(--erp-shadow-md);
  }

  .bom-dialog > header,
  .bom-dialog > footer {
    background: var(--erp-surface-overlay);
  }

  .bom-dialog > header { border-bottom-color: var(--erp-border); }
  .bom-dialog > footer { border-top-color: var(--erp-border); }

  /* Future sections may opt into these classes without introducing a new component framework. */
  .erp-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--erp-space-3);
    padding-bottom: var(--erp-space-3);
    border-bottom: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
  }

  .erp-section-title,
  .erp-section-description { margin: 0; }
  .erp-section-description { color: var(--erp-text-muted); }

  .empty-list,
  .erp-empty-state,
  .bom-empty-state,
  .part-picker-empty {
    border-color: var(--erp-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-surface-muted);
    color: var(--erp-text-muted);
  }

  .erp-skeleton,
  .erp-skeleton-line {
    border-radius: var(--erp-radius-sm);
    background: var(--erp-surface-subtle);
  }

  @media (prefers-reduced-motion: reduce) {
    .task-card,
    .work-queue-card { transition: none; }

    .task-card:hover,
    button.work-queue-card:hover { transform: none; }
  }
}