/**
 * Shared UX/UI consistency layer
 * Keeps public and admin interfaces aligned on controls, focus states, and surfaces.
 */

:root {
  --ui-control-height: 44px;
  --ui-control-radius: 12px;
  --ui-surface-radius: 16px;
  --ui-surface-border: 1px solid var(--border-on-dark);
  --ui-surface-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  --ui-card-hover-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
  --ui-focus-ring: 0 0 0 3px rgba(var(--primary-rgb), 0.24);
  --ui-card-focus-border: rgba(var(--primary-rgb), 0.42);
  --ui-card-transition:
    transform var(--motion-fast) var(--motion-ease-emphasis),
    box-shadow var(--motion-base) var(--motion-ease-standard),
    border-color var(--motion-base) var(--motion-ease-standard),
    background-color var(--motion-base) var(--motion-ease-standard);
  --ui-button-letter-spacing: 0.06em;
}

:root[data-theme='light'] {
  --ui-surface-border: 1px solid rgba(82, 64, 58, 0.16);
  --ui-surface-shadow: 0 10px 24px rgba(82, 64, 58, 0.12);
  --ui-card-hover-shadow: 0 16px 30px rgba(82, 64, 58, 0.16);
  --ui-card-focus-border: rgba(var(--primary-rgb), 0.34);
}

:is(
  .btn,
  .btn-primary,
  .btn-outline-primary,
  .admin-btn-primary,
  .admin-btn-secondary,
  .export-btn,
  .filter-btn,
  .action-btn
) {
  min-height: var(--ui-control-height);
  border-radius: var(--ui-control-radius);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ui-button-letter-spacing);
  transition:
    transform var(--motion-fast) var(--motion-ease-emphasis),
    box-shadow var(--motion-base) var(--motion-ease-standard),
    background-color var(--motion-base) var(--motion-ease-standard),
    border-color var(--motion-base) var(--motion-ease-standard),
    color var(--motion-base) var(--motion-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  :is(
    .btn,
    .btn-primary,
    .btn-outline-primary,
    .admin-btn-primary,
    .admin-btn-secondary,
    .export-btn,
    .filter-btn,
    .action-btn
  ):hover {
    transform: translateY(-1px);
  }
}

.modal :is(.btn, .btn-primary, .btn-outline-primary) {
  min-height: auto;
  letter-spacing: normal;
}

.modal :is(.btn, .btn-primary, .btn-outline-primary):hover {
  transform: none;
}

:is(
  .btn,
  .btn-primary,
  .btn-outline-primary,
  .admin-btn-primary,
  .admin-btn-secondary,
  .export-btn,
  .filter-btn,
  .action-btn,
  .page-link
):focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring) !important;
}
body.public-mood :is(.card, .accordion-item) {
  border-radius: var(--ui-surface-radius);
  border: var(--ui-surface-border);
  box-shadow: var(--ui-surface-shadow);
}

body.public-mood :is(.card, .accordion-item, .ui-card),
body.admin-app
  :is(
    .card,
    .ui-card,
    .stat-card,
    .service-card,
    .product-card,
    .event-card,
    .project-card,
    .opp-card,
    .application-card,
    .inquiry-card
  ) {
  border-radius: var(--ui-surface-radius);
  overflow-wrap: anywhere;
  transition: var(--ui-card-transition);
}

@media (hover: hover) and (pointer: fine) {
  body.public-mood :is(.card, .accordion-item, .ui-card):hover,
  body.admin-app
    :is(
      .card,
      .ui-card,
      .stat-card,
      .service-card,
      .product-card,
      .event-card,
      .project-card,
      .opp-card,
      .application-card,
      .inquiry-card
    ):hover {
    box-shadow: var(--ui-card-hover-shadow);
  }
}

body.admin-app
  :is(.main-content .page-header, .filters-bar, .table-container, .activity-section, .chart-card) {
  border-radius: var(--ui-surface-radius);
  border: var(--ui-surface-border);
  box-shadow: var(--ui-surface-shadow);
}

body.public-mood :is(.card, .accordion-item, .ui-card):focus-visible,
body.public-mood :is(.card, .accordion-item, .ui-card):focus-within,
body.admin-app
  :is(
    .card,
    .ui-card,
    .stat-card,
    .service-card,
    .product-card,
    .event-card,
    .project-card,
    .opp-card,
    .application-card,
    .inquiry-card
  ):focus-visible,
body.admin-app
  :is(
    .card,
    .ui-card,
    .stat-card,
    .service-card,
    .product-card,
    .event-card,
    .project-card,
    .opp-card,
    .application-card,
    .inquiry-card
  ):focus-within {
  outline: none;
  border-color: var(--ui-card-focus-border);
  box-shadow: var(--ui-focus-ring), var(--ui-card-hover-shadow);
}

body.admin-app :is(.page-header, .admin-page-actions, .action-btns) {
  gap: 12px;
}

body.admin-app .table thead th {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--admin-text-muted);
  border-bottom: 1px solid var(--admin-border);
}

body.admin-app .table tbody td {
  color: var(--admin-text);
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .btn,
    .btn-primary,
    .btn-outline-primary,
    .admin-btn-primary,
    .admin-btn-secondary,
    .export-btn,
    .filter-btn,
    .action-btn,
    .page-link,
    .card,
    .accordion-item,
    .ui-card,
    .stat-card,
    .service-card,
    .product-card,
    .event-card,
    .project-card,
    .opp-card,
    .application-card,
    .inquiry-card
  ) {
    transition: none !important;
    animation: none !important;
  }

  :is(
    .btn,
    .btn-primary,
    .btn-outline-primary,
    .admin-btn-primary,
    .admin-btn-secondary,
    .export-btn,
    .filter-btn,
    .action-btn,
    .page-link,
    .card,
    .accordion-item,
    .ui-card,
    .stat-card,
    .service-card,
    .product-card,
    .event-card,
    .project-card,
    .opp-card,
    .application-card,
    .inquiry-card
  ):hover {
    transform: none !important;
  }
}

@media (hover: none), (pointer: coarse) {
  :is(
    .btn,
    .btn-primary,
    .btn-outline-primary,
    .admin-btn-primary,
    .admin-btn-secondary,
    .export-btn,
    .filter-btn,
    .action-btn,
    .page-link,
    .card,
    .accordion-item,
    .ui-card,
    .stat-card,
    .service-card,
    .product-card,
    .event-card,
    .project-card,
    .opp-card,
    .application-card,
    .inquiry-card
  ):hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  body.admin-app .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  body.admin-app :is(.admin-page-actions, .action-btns) {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
}