/* Admin-only Tailwind utilities + component layer; loaded from AdminLayout (separate chunk). No @tailwind base — storefront app.css already applied preflight. */
@config "../../tailwind.admin.config.js";

@tailwind components;
@tailwind utilities;

@layer components {
  /*
   * Sticky sidebar needs a scroll ancestor without overflow-x hidden.
   * Storefront body uses overflow-x:hidden — relaxed while admin is mounted.
   */
  body.admin-shell {
    overflow-x: visible;
    @apply bg-zinc-100 text-zinc-900;
  }

  .dark body.admin-shell {
    @apply bg-zinc-950 text-zinc-100;
  }

  .admin-table-wrap table {
    @apply bg-white text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100;
  }

  .admin-table-wrap table tbody td {
    @apply text-zinc-900 dark:text-zinc-100;
  }

  .admin-table-wrap table thead th {
    @apply text-zinc-600 dark:text-zinc-300;
  }

  .admin-panel-shell {
    @apply w-full min-w-0 lg:grid lg:min-h-[100dvh] lg:grid-cols-[16rem_minmax(0,1fr)] lg:items-start;
  }

  .admin-sidebar {
    @apply isolate bg-white dark:bg-zinc-900/95;
  }

  @media (min-width: 1024px) {
    .admin-sidebar {
      position: sticky;
      top: 0;
      align-self: start;
      max-height: 100dvh;
    }
  }

  .admin-main-column {
    @apply relative z-0 flex min-h-[100dvh] min-w-0 flex-col lg:col-start-2;
  }

  .admin-sidebar-nav {
    -webkit-overflow-scrolling: touch;
  }

  .admin-nav-item {
    @apply relative z-10 touch-manipulation;
  }

  /* Shell content area — every admin page sits inside .admin-page */
  .admin-page {
    @apply min-w-0 w-full max-w-full space-y-6;
  }
  .admin-page--narrow {
    @apply mx-auto w-full max-w-4xl;
  }
  .admin-page--medium {
    @apply mx-auto w-full max-w-6xl;
  }
  .admin-page--wide {
    @apply mx-auto w-full max-w-[88rem];
  }

  .admin-page-header-actions {
    @apply flex w-full min-w-0 flex-wrap items-center justify-start gap-2 sm:justify-end;
  }

  .admin-table-wrap {
    @apply min-w-0 overflow-x-auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-table-wrap > table {
    @apply w-full border-collapse;
    border-spacing: 0;
  }

  .admin-table-wrap > table.admin-table--fixed {
    table-layout: fixed;
  }

  .admin-table-wrap > table:not(.admin-table--fixed) {
    table-layout: auto;
  }

  /* Keep thead/tbody on the same column grid (prevents header/body misalignment). */
  body.admin-shell .admin-table-wrap > table thead,
  body.admin-shell .admin-table-wrap > table tbody,
  body.admin-shell .admin-table-wrap > table tfoot {
    display: table-row-group !important;
  }

  body.admin-shell .admin-table-wrap > table tr {
    display: table-row !important;
  }

  body.admin-shell .admin-table-wrap > table th,
  body.admin-shell .admin-table-wrap > table td {
    display: table-cell !important;
    vertical-align: middle;
  }

  .admin-table-wrap > table tbody > tr + tr {
    @apply border-t border-zinc-200/80 dark:border-zinc-700/80;
  }

  .admin-table {
    @apply w-full border-collapse text-left;
    table-layout: auto;
  }

  /* Wide data tables: fixed layout + colgroup keeps headers aligned with cells. */
  .admin-table--fixed {
    table-layout: fixed;
  }
  .admin-table--fixed .admin-td,
  .admin-table--fixed .admin-th {
    @apply align-middle;
  }
  .admin-table--fixed thead {
    @apply sticky top-0 z-10;
  }
  .admin-table--fixed thead .admin-th {
    @apply border-b-2 border-zinc-200 shadow-sm dark:border-zinc-600;
  }

  .admin-th {
    @apply whitespace-nowrap px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 sm:px-6 sm:py-4;
    background: linear-gradient(to bottom, rgb(250 250 250), rgb(245 245 245));
  }
  .dark .admin-th {
    background: linear-gradient(to bottom, rgb(39 39 42 / 0.6), rgb(24 24 27 / 0.5));
  }
  .admin-th-first {
    @apply rounded-tl-xl pl-4 sm:pl-6;
  }
  .admin-th-last {
    @apply rounded-tr-xl pr-4 text-right sm:pr-6;
  }
  .admin-td {
    @apply px-4 py-3 text-sm text-zinc-900 dark:text-zinc-100 sm:px-6 sm:py-4;
  }
  .admin-td-first {
    @apply pl-4 sm:pl-6;
  }
  .admin-td-last {
    @apply pr-4 sm:pr-6;
  }
  .admin-row {
    @apply border-t border-zinc-200/80 bg-white text-zinc-900 dark:border-zinc-700/80 dark:bg-zinc-900 dark:text-zinc-100;
  }

  .admin-table thead + tbody .admin-row:first-child,
  .admin-table tbody > tr:first-child {
    @apply border-t-0;
  }
  .admin-row:hover {
    @apply bg-zinc-50/90 dark:bg-zinc-800/60;
  }
  /* Inset shadow avoids layout shift from border-left on hover */
  .admin-row:hover .admin-td-first {
    box-shadow: inset 3px 0 0 0 rgb(251 191 36);
  }
  .dark .admin-row:hover .admin-td-first {
    box-shadow: inset 3px 0 0 0 rgb(245 158 11);
  }

  .admin-action {
    @apply inline-flex items-center gap-1.5 rounded-lg px-2.5 py-2 text-sm font-medium transition;
  }
  .admin-action-edit {
    @apply text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-white;
  }
  .admin-action-delete {
    @apply text-zinc-500 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400;
  }
  .admin-action-divider {
    @apply w-px self-stretch bg-zinc-200 dark:bg-zinc-600;
    min-height: 1.25rem;
  }

  .admin-tab-bar {
    @apply -mb-px flex gap-1 overflow-x-auto pb-px;
    -webkit-overflow-scrolling: touch;
  }
  .admin-tab-btn {
    @apply shrink-0 whitespace-nowrap rounded-t-xl border-b-2 px-3 py-2.5 text-sm font-medium transition sm:px-4 sm:py-3;
  }

  .status-badge {
    @apply inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium;
  }
  .status-badge-active {
    @apply bg-emerald-50 text-emerald-700 dark:bg-emerald-900/35 dark:text-emerald-400;
  }
  .status-badge-inactive {
    @apply bg-zinc-100 text-zinc-600 dark:bg-zinc-700 dark:text-zinc-400;
  }
  .status-badge-warning {
    @apply bg-amber-50 text-amber-700 dark:bg-amber-900/35 dark:text-amber-400;
  }
  .status-badge-info {
    @apply bg-sky-50 text-sky-700 dark:bg-sky-900/35 dark:text-sky-400;
  }
  .status-badge-success {
    @apply bg-emerald-50 text-emerald-700 dark:bg-emerald-900/35 dark:text-emerald-400;
  }
  .status-badge-danger {
    @apply bg-red-50 text-red-700 dark:bg-red-900/35 dark:text-red-400;
  }
  .status-badge-neutral {
    @apply bg-zinc-100 text-zinc-600 dark:bg-zinc-700 dark:text-zinc-400;
  }
  .slug-pill {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  }
}