/* Admin panel — shared visual language with POS / storefront (Jafer Belleza) */

:root {
  --admin-brand: #db2777;
  --admin-brand-hover: #ec4899;
  --admin-brand-strong: #be185d;
  --admin-link: #b91c5c;
  --admin-danger: #e11d48;
  --admin-surface: #ffffff;
  --admin-surface-muted: #f8fafc;
  --admin-border: #e2e8f0;
  --admin-text: #1e293b;
  --admin-text-muted: #64748b;
  --admin-overlay: rgba(15, 23, 42, 0.45);
}

.dark {
  --admin-brand: #ec4899;
  --admin-brand-hover: #f472b6;
  --admin-brand-strong: #be185d;
  --admin-link: #fbcfe8;
  --admin-danger: #f43f5e;
  --admin-surface: #111827;
  --admin-surface-muted: #0f172a;
  --admin-border: #374151;
  --admin-text: #e5e7eb;
  --admin-text-muted: #9ca3af;
  --admin-overlay: rgba(0, 0, 0, 0.65);
}

.admin-page {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #fff1f2 0%, #ffffff 45%, #f8fafc 100%);
  color: #1e293b;
}

.admin-skip-link {
  position: absolute;
  top: -40px;
  left: 0.5rem;
  z-index: 100;
  padding: 0.5rem 0.75rem;
  background: #db2777;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  text-decoration: none;
  transform: translateY(0);
  transition: top 0.15s ease-out;
}

.admin-skip-link:focus {
  top: 0.5rem;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.admin-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.dark .admin-page-title {
  color: #f3f4f6;
}

.admin-period-switch-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.admin-period-switch-link:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.dark .admin-period-switch-link {
  color: #cbd5e1;
}

.dark .admin-period-switch-link:hover {
  background: #1f2937;
  color: #f3f4f6;
}

.admin-period-switch-link--active,
.admin-period-switch-link[aria-current="page"] {
  background: #db2777;
  color: #fff;
}

.admin-period-switch-link--active:hover,
.admin-period-switch-link[aria-current="page"]:hover {
  background: #ec4899;
  color: #fff;
}

.dark .admin-page {
  background: linear-gradient(to bottom, #030712 0%, #030712 100%);
  color: #e5e7eb;
}

.admin-auth-page {
  background: linear-gradient(to bottom, #fff1f2 0%, #ffffff 45%, #f8fafc 100%);
  color: #1e293b;
}

.dark .admin-auth-page {
  background: linear-gradient(to bottom, #030712 0%, #030712 100%);
  color: #e5e7eb;
}

.admin-shell {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.admin-sidebar {
  width: 16rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-self: stretch;
  border-right: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.dark .admin-sidebar {
  border-color: #374151;
  background: rgba(17, 24, 39, 0.96);
}

/* Mobile drawer behavior — sidebar slides in from the left under 768px */
@media (max-width: 767px) {
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2);
    /* Safe-area: iOS notch / home bar */
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .admin-sidebar--open {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar {
    transition: none;
  }
}

.admin-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--admin-overlay);
  opacity: 0;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
}

.admin-sidebar-backdrop:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 768px) {
  .admin-sidebar-backdrop {
    display: none;
  }
}

/* Mobile-only menu buttons. Outside the media query, default to display:none
   so we don't override Tailwind's md:hidden via source-order specificity. */
.admin-menu-btn {
  display: none;
}

@media (max-width: 767px) {
  .admin-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* ≥44×44 touch target */
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--admin-border);
    background: var(--admin-surface);
    color: var(--admin-text);
    cursor: pointer;
  }

  .admin-menu-btn:hover {
    background: var(--admin-surface-muted);
  }

  .admin-menu-btn--close {
    border: none;
    background: transparent;
    /* ≥44×44 touch target */
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

.admin-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1.5rem 1.5rem 3rem;
}

/* Scrollable nav; brand stays pinned to the top of the sidebar column */
.admin-sidebar > nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Extra room below the last link (scroll area end; overrides Tailwind pb-6 on <nav>) */
  padding-bottom: 3rem;
}

.admin-brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1rem 0.75rem;
  font-weight: 700;
  font-size: 1rem;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.dark .admin-brand {
  color: #f3f4f6;
}

/* Group headings: extra vertical rhythm + divider so blocks don’t run together */
.admin-nav-section {
  margin-top: 1.5rem;
  padding: 0.75rem 0.75rem 0.35rem;
  border-top: 1px solid #e2e8f0;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}

.admin-nav-section:first-of-type {
  margin-top: 0;
  padding: 0 0.75rem 0.35rem;
  border-top: none;
}

.dark .admin-nav-section {
  color: #9ca3af;
  border-top-color: #374151;
}

.dark .admin-nav-section:first-of-type {
  border-top: none;
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.45rem 0.75rem;
  margin: 0.1rem 0;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
  text-decoration: none;
}

.admin-nav-link:hover {
  background: #fff1f2;
  color: #be185d;
}

.dark .admin-nav-link {
  color: #d1d5db;
}

.dark .admin-nav-link:hover {
  background: rgba(190, 24, 93, 0.15);
  color: #fbcfe8;
}

.admin-nav-link--active {
  background: #fce7f3;
  color: #9d174d;
  font-weight: 600;
}

.dark .admin-nav-link--active {
  background: rgba(157, 23, 77, 0.35);
  color: #fce7f3;
}

/* Icon inside a nav link */
.admin-nav-link svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: #64748b;
  transition: color 0.1s ease-out;
}

.dark .admin-nav-link svg {
  color: #9ca3af;
}

.admin-nav-link:hover svg {
  color: #be185d;
}

.dark .admin-nav-link:hover svg {
  color: #fbcfe8;
}

.admin-nav-link--active svg {
  color: #be185d;
}

.dark .admin-nav-link--active svg {
  color: #f472b6;
}

/* Link text auto-grows to push badge to the right */
.admin-nav-link__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Nav section toggle (collapsible sections) ──────────────────────────── */

.admin-nav-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  /* ≥44px touch target — keep visual padding small but bump min-height */
  padding: 0 0.25rem;
  min-height: 2.75rem;
  cursor: pointer;
  color: inherit;
  text-align: left;
  font: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-nav-section-toggle:focus-visible {
  outline: 2px solid #ec4899;
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Wrapper that pairs the section icon with its label, leaving the chevron
   on the right side of the flex toggle. */
.admin-nav-section-toggle__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.admin-nav-section-icon {
  width: 0.875rem;
  height: 0.875rem;
  color: #94a3b8;
  flex-shrink: 0;
}

.dark .admin-nav-section-icon {
  color: #64748b;
}

.admin-nav-section-chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: #94a3b8;
  transition: transform 0.15s ease-out;
  flex-shrink: 0;
}

.dark .admin-nav-section-chevron {
  color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
  .admin-nav-section-chevron {
    transition: none;
  }
}

/* ── Sidebar quick-search input ─────────────────────────────────────────── */

.admin-sidebar-search {
  position: relative;
  margin: 0.5rem 0.5rem 0;
}

.admin-sidebar-search__icon {
  position: absolute;
  top: 50%;
  left: 0.6rem;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  color: #94a3b8;
  pointer-events: none;
}

.dark .admin-sidebar-search__icon {
  color: #6b7280;
}

.admin-sidebar-search__input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.4rem 2.75rem 0.4rem 2rem;
  font-size: 0.8125rem;
  background: #f8fafc;
  color: #0f172a;
  outline: none;
}

.admin-sidebar-search__input:focus {
  border-color: #ec4899;
  background: #fff;
}

.dark .admin-sidebar-search__input {
  background: #0f172a;
  border-color: #374151;
  color: #f3f4f6;
}

.dark .admin-sidebar-search__input:focus {
  border-color: #ec4899;
  background: #1f2937;
}

.admin-sidebar-search__hint {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.35rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-family: ui-monospace, monospace;
  color: #94a3b8;
  background: #fff;
  line-height: 1;
  pointer-events: none;
}

.dark .admin-sidebar-search__hint {
  background: #1f2937;
  border-color: #374151;
  color: #6b7280;
}

.admin-sidebar-search__input:focus + .admin-sidebar-search__hint,
.admin-sidebar-search:focus-within .admin-sidebar-search__hint {
  display: none;
}

.admin-sidebar-search__no-results {
  margin: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: #94a3b8;
}

.dark .admin-sidebar-search__no-results {
  color: #6b7280;
}

/* ── Sidebar numeric badges ─────────────────────────────────────────────── */

.admin-sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex-shrink: 0;
}

.admin-sidebar-badge--neutral {
  background: #e2e8f0;
  color: #334155;
}

.dark .admin-sidebar-badge--neutral {
  background: #374151;
  color: #d1d5db;
}

.admin-sidebar-badge--info {
  background: #fce7f3;
  color: #9d174d;
}

.dark .admin-sidebar-badge--info {
  background: rgba(190, 24, 93, 0.3);
  color: #fbcfe8;
}

.admin-sidebar-badge--warn {
  background: #fef3c7;
  color: #92400e;
}

.dark .admin-sidebar-badge--warn {
  background: rgba(146, 64, 14, 0.35);
  color: #fcd34d;
}

.admin-sidebar-badge--danger {
  background: #fee2e2;
  color: #991b1b;
}

.dark .admin-sidebar-badge--danger {
  background: rgba(153, 27, 27, 0.35);
  color: #fca5a5;
}

.admin-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.admin-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* ---------------------------------------------------------------------------
   Filter card on resource index pages
   --------------------------------------------------------------------------- */

:root {
  --admin-control-height: 2.5rem;
}

.admin-filter-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0.85rem 1rem;
  align-items: end;
  padding: 1rem 1.25rem 1.1rem;
  transition: border-color 0.15s ease-out, background 0.15s ease-out;
}

.admin-filter-card__search {
  grid-column: 1 / -1;
}

.admin-filter-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: end;
  height: var(--admin-control-height);
}

/* ── Mobile filter drawer ──────────────────────────────────────────────── */

/* Trigger button: only visible on small screens */
.admin-filter-drawer-trigger {
  display: none;
}

/* Dialog: on small screens it's a real modal; on md+ it's always-open static */
.admin-filter-dialog {
  /* On desktop: always visible as a normal block (not a modal) */
  display: block;
  position: static;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  max-width: none;
  width: auto;
  overflow: visible;
  /* Remove default dialog backdrop overlay on desktop */
  color: inherit;
  margin-bottom: 1rem;
}

/* Remove dialog backdrop on desktop */
.admin-filter-dialog::backdrop {
  display: none;
}

.admin-filter-dialog__header {
  display: none;
}

.admin-filter-dialog__inner {
  /* No special styling on desktop — filter card handles its own style */
}

/* On small screens: show the trigger button and use native dialog behavior */
@media (max-width: 767px) {
  .admin-filter-drawer-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.875rem;
    height: 2.75rem; /* ≥44px touch target */
    min-width: 44px;
    border-radius: 0.625rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 0.75rem;
    transition: border-color 0.12s ease, background 0.12s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .admin-filter-drawer-trigger {
      transition: none;
    }
  }

  .dark .admin-filter-drawer-trigger {
    border-color: #374151;
    background: #1f2937;
    color: #e5e7eb;
  }

  .admin-filter-drawer-trigger:hover {
    border-color: #db2777;
    background: #fff1f2;
    color: #be185d;
  }

  .dark .admin-filter-drawer-trigger:hover {
    border-color: #ec4899;
    background: rgba(219, 39, 119, 0.1);
    color: #f472b6;
  }

  /* On mobile: dialog becomes a full-height bottom sheet modal */
  .admin-filter-dialog {
    display: none; /* hidden when not open */
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 90dvh;
    margin: auto 0 0;
    padding: 0;
    border: none;
    border-radius: 1rem 1rem 0 0;
    background: #ffffff;
    color: #1e293b;
    overflow-y: auto;
    z-index: 200;
    /* Safe-area for devices with home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .dark .admin-filter-dialog {
    background: #111827;
    color: #e5e7eb;
  }

  /* When dialog is open (native open attribute) */
  .admin-filter-dialog[open] {
    display: flex;
    flex-direction: column;
  }

  .admin-filter-dialog::backdrop {
    display: block;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
  }

  @media (prefers-reduced-motion: reduce) {
    .admin-filter-dialog::backdrop {
      backdrop-filter: none;
    }
  }

  .admin-filter-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
  }

  .dark .admin-filter-dialog__header {
    border-bottom-color: #1f2937;
  }

  .admin-filter-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* ≥44×44 touch target */
    min-width: 44px;
    min-height: 44px;
    border-radius: 0.5rem;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.12s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .admin-filter-dialog__close {
      transition: none;
    }
  }

  .admin-filter-dialog__close:hover {
    background: #f1f5f9;
    color: #1e293b;
  }

  .dark .admin-filter-dialog__close {
    color: #9ca3af;
  }

  .dark .admin-filter-dialog__close:hover {
    background: #1f2937;
    color: #e5e7eb;
  }

  .admin-filter-dialog__inner {
    padding: 0.75rem 0;
    overflow-y: auto;
    flex: 1;
  }

  /* Remove bottom margin from filter card inside the dialog on mobile */
  .admin-filter-dialog .admin-filter-card,
  .admin-filter-dialog .admin-card {
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .admin-filter-card {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .admin-filter-card__actions {
    grid-column: 1 / -1;
    height: auto;
    flex-wrap: wrap;
  }
}

.admin-filter-card--simple {
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-filter-card[data-filters-active="true"] {
  border-color: rgba(219, 39, 119, 0.45);
  background: linear-gradient(to bottom, #fff7fb, #ffffff 35%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(219, 39, 119, 0.08);
}

.dark .admin-filter-card[data-filters-active="true"] {
  border-color: rgba(244, 114, 182, 0.5);
  background: linear-gradient(to bottom, rgba(190, 24, 93, 0.08), transparent 35%);
}

/* Inputs and selects share a fixed height so search + filter row align. */
.admin-filter-card .admin-input,
.admin-filter-card .admin-select {
  height: var(--admin-control-height);
  padding: 0 0.85rem;
  font-size: 0.9rem;
}

.admin-filter-card .admin-select {
  /* preserve native arrow without browser shrinking the field */
  padding-right: 1.85rem;
}

/* Label rhythm — uppercase muted labels visually attach to their input. */
.admin-filter-card .admin-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0;
  min-width: 0;     /* allow grid cells to shrink without overflow */
}

.admin-filter-card .admin-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

/* Link-style secondary action (Limpiar) — flat, no chrome. */
.admin-btn-link {
  display: inline-flex;
  align-items: center;
  height: var(--admin-control-height);
  padding: 0 0.6rem;
  border: 0;
  background: transparent;
  color: var(--admin-link);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

.admin-btn-link:hover {
  background: rgba(190, 24, 93, 0.08);
  text-decoration: underline;
}

.dark .admin-btn-link:hover {
  background: rgba(244, 114, 182, 0.15);
}

.admin-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #fff7fb;
  border: 1px solid #fce7f3;
  border-radius: 0.625rem;
}

.dark .admin-filter-chips {
  background: rgba(190, 24, 93, 0.08);
  border-color: rgba(190, 24, 93, 0.3);
}

.admin-filter-chips .admin-filter-chips__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.25rem;
}

.dark .admin-filter-chips .admin-filter-chips__label {
  color: #94a3b8;
}

a.admin-filter-chip,
.admin-filter-chips .admin-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  /* ≥44px touch target (visual pill stays compact) */
  min-height: 2.75rem;
  padding: 0.3rem 0.7rem 0.3rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  border-radius: 9999px;
  background: #fce7f3;
  color: #9d174d;
  border: 1px solid #fbcfe8;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease-out;
}

a.admin-filter-chip:hover,
.admin-filter-chips .admin-filter-chip:hover {
  background: #fbcfe8;
  color: #831843;
}

.dark a.admin-filter-chip,
.dark .admin-filter-chips .admin-filter-chip {
  background: rgba(190, 24, 93, 0.3);
  color: #fbcfe8;
  border-color: rgba(244, 114, 182, 0.4);
}

.dark a.admin-filter-chip:hover,
.dark .admin-filter-chips .admin-filter-chip:hover {
  background: rgba(190, 24, 93, 0.5);
  color: #fff;
}

.admin-filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: rgba(157, 23, 77, 0.15);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}

.dark .admin-filter-chip__remove {
  background: rgba(252, 207, 232, 0.25);
}

/* Date-range preset chips ------------------------------------------------- */
.admin-date-range-field .admin-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-date-preset-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.2rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: background 0.12s ease-out, border-color 0.12s ease-out, color 0.12s ease-out;
}

.admin-date-preset-chip:hover {
  border-color: #db2777;
  color: #db2777;
  background: #fff7fb;
}

.dark .admin-date-preset-chip:hover {
  border-color: #ec4899;
  color: #ec4899;
  background: rgba(190, 24, 93, 0.12);
}

.admin-date-preset-chip--active {
  background: #db2777;
  border-color: #db2777;
  color: #fff;
}

.dark .admin-date-preset-chip--active {
  background: #ec4899;
  border-color: #ec4899;
  color: #fff;
}

/* Row link cursor ---------------------------------------------------------- */
tr[data-controller~="admin-row-link"] {
  cursor: pointer;
}

tr[data-controller~="admin-row-link"]:hover td {
  background: #f8fafc;
}

.dark tr[data-controller~="admin-row-link"]:hover td {
  background: rgba(55, 65, 81, 0.5);
}

/* Column-toggle dropdown --------------------------------------------------- */
.admin-column-toggle-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
  min-width: 220px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 0.625rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
  padding: 0.5rem 0;
  margin-top: 0.35rem;
}

.dark .admin-column-toggle-dropdown {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.admin-column-toggle-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.875rem;
  color: var(--admin-text);
  cursor: pointer;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
}

.admin-column-toggle-item:hover {
  background: var(--admin-surface-muted);
}

/* Saved views row ---------------------------------------------------------- */
.admin-saved-views {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.admin-saved-view-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 9999px;
  border: 1.5px solid var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text-muted);
  text-decoration: none;
  transition: border-color 0.12s ease-out, color 0.12s ease-out;
}

.admin-saved-view-chip:hover {
  border-color: #db2777;
  color: #db2777;
}

.dark .admin-saved-view-chip:hover {
  border-color: #ec4899;
  color: #ec4899;
}

.admin-saved-view-chip--default {
  border-color: #db2777;
  color: #db2777;
}

.dark .admin-saved-view-chip--default {
  border-color: #ec4899;
  color: #ec4899;
}

/* Status badge ------------------------------------------------------------ */
.admin-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  white-space: nowrap;
}

.admin-status-badge--neutral {
  background: #f1f5f9;
  color: #475569;
}

.dark .admin-status-badge--neutral {
  background: rgba(71, 85, 105, 0.3);
  color: #94a3b8;
}

.admin-status-badge--info {
  background: #eff6ff;
  color: #1d4ed8;
}

.dark .admin-status-badge--info {
  background: rgba(29, 78, 216, 0.2);
  color: #93c5fd;
}

.admin-status-badge--warn {
  background: #fffbeb;
  color: #d97706;
}

.dark .admin-status-badge--warn {
  background: rgba(217, 119, 6, 0.2);
  color: #fcd34d;
}

.admin-status-badge--danger {
  background: #fff1f2;
  color: #e11d48;
}

.dark .admin-status-badge--danger {
  background: rgba(225, 29, 72, 0.2);
  color: #fda4af;
}

.admin-status-badge--success {
  background: #f0fdf4;
  color: #15803d;
}

.dark .admin-status-badge--success {
  background: rgba(21, 128, 61, 0.2);
  color: #86efac;
}

/* Icon action buttons in rows --------------------------------------------- */
.admin-row-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0.5rem;
  color: var(--admin-text-muted);
  transition: background 0.12s ease-out, color 0.12s ease-out;
  flex-shrink: 0;
}

.admin-row-action-btn:hover {
  background: var(--admin-surface-muted);
  color: var(--admin-text);
}

.dark .admin-row-action-btn:hover {
  background: rgba(55, 65, 81, 0.6);
  color: var(--admin-text);
}

.admin-row-action-btn:focus-visible {
  outline: 2px solid #db2777;
  outline-offset: 2px;
}

.admin-bulk-bar {
  position: sticky;
  bottom: 0;
  /* Safe-area: home bar on notched devices */
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  margin-top: 2rem;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 0.75rem 0.75rem 0 0;
  padding-top: 1rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.08);
  z-index: 10;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.dark .admin-bulk-bar {
  background: var(--admin-surface);
  border-color: var(--admin-border);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
}

.admin-bulk-bar--inactive {
  display: none;
}

.admin-bulk-bar--active {
  opacity: 1;
  border-color: #db2777;
  box-shadow: 0 -6px 16px rgba(219, 39, 119, 0.15);
  animation: admin-bulk-bar-in 0.2s ease-out;
}

@keyframes admin-bulk-bar-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

.admin-bulk-bar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.admin-bulk-bar__clear {
  background: transparent;
  border: 0;
  color: var(--admin-link);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.admin-bulk-bar__clear:hover {
  text-decoration: underline;
}

.admin-tile {
  text-decoration: none;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.admin-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.admin-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: #f1f5f9;
  color: #475569;
}

.dark .admin-tile__icon {
  background: #1f2937;
  color: #cbd5e1;
}

.admin-tile--brand .admin-tile__icon {
  background: #fce7f3;
  color: #9d174d;
}

.dark .admin-tile--brand .admin-tile__icon {
  background: rgba(190, 24, 93, 0.3);
  color: #fbcfe8;
}

.admin-tile--warn .admin-tile__icon {
  background: #fef3c7;
  color: #92400e;
}

.dark .admin-tile--warn .admin-tile__icon {
  background: rgba(146, 64, 14, 0.35);
  color: #fcd34d;
}

.admin-tile--danger .admin-tile__icon {
  background: #fee2e2;
  color: #991b1b;
}

.dark .admin-tile--danger .admin-tile__icon {
  background: rgba(153, 27, 27, 0.35);
  color: #fca5a5;
}

.admin-tile--positive .admin-tile__icon {
  background: #d1fae5;
  color: #065f46;
}

.dark .admin-tile--positive .admin-tile__icon {
  background: rgba(6, 95, 70, 0.35);
  color: #6ee7b7;
}

/* Sparkline canvas / svg */
.admin-sparkline-svg {
  color: #db2777;
  display: block;
}

.dark .admin-sparkline-svg {
  color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
  .admin-sparkline-canvas {
    display: none;
  }
  .admin-sparkline-fallback {
    display: block;
  }
}

.admin-sparkline-canvas {
  display: block;
}

.admin-sparkline-fallback {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .admin-sparkline-canvas {
    display: none;
  }
  .admin-sparkline-fallback {
    display: block;
  }
}

.dark .admin-card {
  background: #111827;
  border-color: #374151;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.admin-table th,
.admin-table td {
  padding: 0.65rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.dark .admin-table th,
.dark .admin-table td {
  border-color: #374151;
}

.admin-table th {
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 1;
}

.dark .admin-table th {
  color: #94a3b8;
  background: #0f172a;
}

.admin-table tr:hover td {
  background: #fdf2f8;
}

.dark .admin-table tr:hover td {
  background: rgba(190, 24, 93, 0.12);
}

.admin-table-sort-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.admin-table-sort-link:hover {
  color: #be185d;
}

.dark .admin-table-sort-link:hover {
  color: #fbcfe8;
}

.admin-table th[aria-sort="ascending"],
.admin-table th[aria-sort="descending"] {
  color: #be185d;
}

.dark .admin-table th[aria-sort="ascending"],
.dark .admin-table th[aria-sort="descending"] {
  color: #fbcfe8;
}

/* ── Mobile index cards (visible below md breakpoint) ───────────────────── */

/* On small screens: hide desktop table, show card list.
   On md+ screens: show desktop table, hide card list. */
.admin-table-wrap--responsive {
  display: none;
}

@media (min-width: 768px) {
  .admin-table-wrap--responsive {
    display: block;
  }
}

.admin-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .admin-cards {
    display: none;
  }
}

.admin-cards__item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  padding: 0.875rem 1rem 0;
}

@media (prefers-reduced-motion: reduce) {
  .admin-cards__item {
    transition: none;
  }
}

.admin-cards__item:hover {
  box-shadow: 0 4px 12px rgba(219, 39, 119, 0.1);
  border-color: #fbcfe8;
}

.dark .admin-cards__item {
  background: #111827;
  border-color: #374151;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark .admin-cards__item:hover {
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.15);
  border-color: #be185d;
}

.admin-cards__head {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}

.admin-cards__primary-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.35;
}

.dark .admin-cards__primary-label {
  color: #e5e7eb;
}

.admin-cards__primary-sub {
  font-size: 0.8125rem;
  color: #64748b;
  margin-top: 0.1rem;
}

.dark .admin-cards__primary-sub {
  color: #9ca3af;
}

.admin-cards__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.375rem 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid #f1f5f9;
  margin-bottom: 0;
}

.dark .admin-cards__meta {
  border-top-color: #1f2937;
}

.admin-cards__meta--details {
  border-top: none;
  padding-top: 0.25rem;
}

.admin-cards__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.admin-cards__meta-label {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}

.dark .admin-cards__meta-label {
  color: #6b7280;
}

.admin-cards__meta-value {
  font-size: 0.8125rem;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .admin-cards__meta-value {
  color: #d1d5db;
}

.admin-cards__details {
  margin: 0 -1rem;
  padding: 0 1rem;
  border-top: 1px solid #f1f5f9;
}

.dark .admin-cards__details {
  border-top-color: #1f2937;
}

.admin-cards__details-toggle {
  font-size: 0.75rem;
  font-weight: 500;
  color: #db2777;
  cursor: pointer;
  padding: 0.375rem 0;
  list-style: none;
  user-select: none;
}

.admin-cards__details-toggle::-webkit-details-marker {
  display: none;
}

.dark .admin-cards__details-toggle {
  color: #f472b6;
}

.admin-cards__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 0.375rem 0 0.5rem;
  border-top: 1px solid #f1f5f9;
  margin: 0 -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.dark .admin-cards__actions {
  border-top-color: #1f2937;
}

.admin-cards__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ≥44×44 touch target */
  min-width: 44px;
  min-height: 44px;
  border-radius: 0.5rem;
  color: #64748b;
  transition: background-color 0.12s ease, color 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {
  .admin-cards__action-btn {
    transition: none;
  }
}

.admin-cards__action-btn:hover {
  background-color: #f1f5f9;
  color: #db2777;
}

.dark .admin-cards__action-btn {
  color: #9ca3af;
}

.dark .admin-cards__action-btn:hover {
  background-color: #1f2937;
  color: #f472b6;
}

/* ── End mobile index cards ──────────────────────────────────────────────── */

.admin-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-badge--info {
  background: #dbeafe;
  color: #1e40af;
}

.admin-badge--warn {
  background: #fef3c7;
  color: #92400e;
}

.admin-badge--ok {
  background: #dcfce7;
  color: #166534;
}

.admin-badge--bad {
  background: #ffe4e6;
  color: #9f1239;
}

.dark .admin-badge--info {
  background: rgba(30, 64, 175, 0.35);
  color: #93c5fd;
}

.dark .admin-badge--warn {
  background: rgba(146, 64, 14, 0.35);
  color: #fcd34d;
}

.dark .admin-badge--ok {
  background: rgba(22, 101, 52, 0.35);
  color: #86efac;
}

.dark .admin-badge--bad {
  background: rgba(159, 18, 57, 0.35);
  color: #fda4af;
}

.admin-btn-primary,
.admin-btn-soft,
.admin-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  min-height: 2.5rem;
  border: none;
  cursor: pointer;
}

.admin-btn-primary {
  background: #db2777;
  color: #fff;
}

.admin-btn-primary:hover {
  background: #ec4899;
}

.admin-btn-soft {
  background: #fff;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.dark .admin-btn-soft {
  background: #1f2937;
  color: #d1d5db;
  border-color: #4b5563;
}

.admin-btn-danger {
  background: #e11d48;
  color: #fff;
}

.admin-input,
.admin-select,
.admin-textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  background: #fff;
  color: #0f172a;
}

.dark .admin-input,
.dark .admin-select,
.dark .admin-textarea {
  background: #1f2937;
  border-color: #4b5563;
  color: #f3f4f6;
}

.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {
  outline: 2px solid #ec4899;
  outline-offset: 0;
  border-color: #ec4899;
}

/* Override full-width default for compact filters (Tailwind w-* loses to width:100% on .admin-input). */
.admin-input--narrow {
  width: 10rem;
  max-width: 100%;
  flex-shrink: 0;
}

.admin-field {
  margin-bottom: 0;
}

.admin-label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
}

.dark .admin-label {
  color: #cbd5e1;
}

.admin-flash-container {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 24rem;
}

.admin-flash {
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  animation: admin-flash-in 0.3s ease-out;
}

@keyframes admin-flash-in {
  from { opacity: 0; transform: translateY(-1rem); }
  to { opacity: 1; transform: translateY(0); }
}

.admin-flash--notice {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.admin-flash--alert {
  background: #ffe4e6;
  color: #9f1239;
  border: 1px solid #fda4af;
}

.dark .admin-flash--notice {
  background: rgba(22, 101, 52, 0.35);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.35);
}

.dark .admin-flash--alert {
  background: rgba(159, 18, 57, 0.35);
  color: #fecdd3;
  border-color: rgba(244, 63, 94, 0.35);
}

.admin-flash-dismiss {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  /* ≥44×44 touch target */
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.admin-flash-dismiss:hover {
  opacity: 1;
}

.admin-muted {
  font-size: 0.8125rem;
  color: #64748b;
}

.dark .admin-muted {
  color: #9ca3af;
}

/* Logidze history modals (<dialog>) — fixed header, scrollable body.
   Unqualified display:flex on <dialog> overrides the UA rule that hides dialog:not([open]),
   so closed dialogs must be forced hidden and flex layout applied only when [open]. */
dialog.admin-dialog:not([open]) {
  display: none;
}

dialog.admin-dialog[open] {
  width: min(48rem, 92vw);
  max-height: min(90vh, 48rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Raw Logidze JSON modal: scroll the body; force long lines to wrap (no horizontal clip).
   overflow-x-hidden was clipping both edges; <pre> defaults to min-width: max-content without this. */
.admin-dialog-json-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

pre.admin-dialog-json-pre {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 1rem;
  font-size: 0.75rem;
  line-height: 1.625;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  /* Beat UA <pre> nowrap + max-content sizing so strings wrap inside the panel */
  white-space: pre-wrap !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  line-break: anywhere;
}

.dark pre.admin-dialog-json-pre {
  background-color: rgba(3, 7, 18, 0.5);
  border-color: #334155;
}

.admin-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.dark .admin-dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

/* Admin pagination */
.admin-pagy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  color: #334155;
  background: #fff;
}

/* ≥44px touch target on mobile (visual size stays the same) */
@media (max-width: 767px) {
  .admin-pagy-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

.admin-pagy-btn:hover { background: #f1f5f9; }

.admin-pagy-current {
  background: #e11d73;
  color: #fff;
  border-color: #e11d73;
}

.admin-pagy-current:hover { background: #be185d; }

.admin-pagy-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.dark .admin-pagy-btn {
  background: #1e293b;
  border-color: #374151;
  color: #cbd5e1;
}

.dark .admin-pagy-btn:hover { background: #334155; }

.dark .admin-pagy-current {
  background: #e11d73;
  color: #fff;
  border-color: #e11d73;
}

.dark .admin-pagy-current:hover { background: #be185d; }

/* Multi-select combobox */
.admin-multi-select {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border: 1px solid #cbd5e1;
  border-radius: .5rem;
  background: #fff;
  padding: .5rem;
}
.dark .admin-multi-select { background: #0f172a; border-color: #334155; }

.admin-multi-select__pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-height: 2rem;
  padding: .25rem 0;
}
.admin-multi-select__pills:empty { padding: 0; min-height: 0; }
.admin-multi-select__empty { font-size: .8125rem; color: #64748b; padding: .25rem 0; margin: 0; }
.dark .admin-multi-select__empty { color: #94a3b8; }

.admin-multi-select__pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: #fce7f3;
  color: #9d174d;
  border: 1px solid #fbcfe8;
  border-radius: 9999px;
  padding: .15rem .5rem .15rem .65rem;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
}
.dark .admin-multi-select__pill {
  background: rgba(190, 24, 93, .25);
  color: #fbcfe8;
  border-color: rgba(244, 114, 182, .35);
}

.admin-multi-select__pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.admin-multi-select__pill-remove:hover {
  background: rgba(157, 23, 77, .15);
}

.admin-multi-select__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.admin-multi-select__search { flex: 1 1 12rem; min-width: 12rem; }
.admin-multi-select__action {
  font-size: .75rem;
  color: #be185d;
  background: transparent;
  border: 0;
  padding: .25rem .35rem;
  cursor: pointer;
  font-weight: 600;
}
.admin-multi-select__action:hover { text-decoration: underline; }
.dark .admin-multi-select__action { color: #f472b6; }

.admin-multi-select__count {
  margin-left: auto;
  font-size: .75rem;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.dark .admin-multi-select__count { color: #94a3b8; }

.admin-multi-select__options {
  max-height: 14rem;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: .375rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.dark .admin-multi-select__options {
  background: #0b1220;
  border-color: #334155;
}
.admin-multi-select__options:empty { display: none; }

.admin-multi-select__option {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .65rem;
  text-align: left;
  background: transparent;
  border: 0;
  color: #0f172a;
  font-size: .875rem;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}
.admin-multi-select__option:last-child { border-bottom: 0; }
.admin-multi-select__option:hover,
.admin-multi-select__option--active {
  background: #fdf2f8;
}
.admin-multi-select__option--selected {
  background: #fce7f3;
  color: #831843;
  font-weight: 500;
}
.admin-multi-select__option:focus { outline: 2px solid #ec4899; outline-offset: -2px; }

.dark .admin-multi-select__option { color: #e2e8f0; border-bottom-color: #1e293b; }
.dark .admin-multi-select__option:hover,
.dark .admin-multi-select__option--active { background: rgba(190, 24, 93, .2); }
.dark .admin-multi-select__option--selected {
  background: rgba(190, 24, 93, .35);
  color: #fce7f3;
}

.admin-multi-select__checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid #cbd5e1;
  border-radius: 3px;
  background: #fff;
  color: transparent;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.admin-multi-select__checkbox--checked {
  background: #be185d;
  border-color: #be185d;
  color: #fff;
}
.dark .admin-multi-select__checkbox { background: #0b1220; border-color: #475569; }
.dark .admin-multi-select__checkbox--checked { background: #ec4899; border-color: #ec4899; color: #fff; }

.admin-multi-select__label { flex: 1; }

.admin-multi-select__no-results {
  font-size: .8125rem;
  color: #64748b;
  padding: .5rem;
  margin: 0;
  text-align: center;
}

/* ── Admin tabs ─────────────────────────────────────────────────────────── */

.admin-tabs__list {
  display: flex;
  flex-direction: row;
  gap: 0;
  border-bottom: 1px solid var(--admin-border);
  margin-bottom: 1rem;
  overflow-x: auto;
}

.admin-tabs__list button {
  padding: 0.5rem 1rem;
  font-weight: 500;
  color: var(--admin-text-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.875rem;
  transition: color 0.15s;
}

.admin-tabs__list button[aria-selected="true"] {
  color: #be185d;
  border-bottom-color: #db2777;
  font-weight: 600;
}

.admin-tabs__list button:hover:not([aria-selected="true"]) {
  color: var(--admin-text);
}

.admin-tabs__count {
  opacity: 0.7;
  font-weight: 400;
  font-size: 0.8125rem;
  margin-left: 0.25rem;
}

.admin-tabs section[role="tabpanel"]:focus {
  outline: none;
}

/* Dark mode overrides */
.dark .admin-tabs__list button[aria-selected="true"] {
  color: #fbcfe8;
  border-bottom-color: #ec4899;
}
.dark .admin-multi-select__no-results { color: #94a3b8; }

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */
.admin-breadcrumbs {
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--admin-text-muted);
}

.admin-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.admin-breadcrumb {
  display: inline-flex;
  align-items: center;
}

.admin-breadcrumb:not(:last-child)::after {
  content: "›";
  margin: 0 0.4rem;
  color: var(--admin-text-muted);
  opacity: 0.5;
}

.admin-breadcrumb a {
  color: var(--admin-link);
  text-decoration: none;
  font-weight: 500;
}

.admin-breadcrumb a:hover {
  text-decoration: underline;
}

.admin-breadcrumb--current span,
.admin-breadcrumb [aria-current="page"] {
  color: var(--admin-text);
  font-weight: 600;
}

/* ── Inline form validation ─────────────────────────────────────────────── */
.admin-input[aria-invalid="true"],
.admin-select[aria-invalid="true"],
.admin-textarea[aria-invalid="true"] {
  border-color: var(--admin-danger);
  outline-color: var(--admin-danger);
}

.admin-field--invalid > .admin-label {
  color: var(--admin-danger);
}

.admin-field-error {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--admin-danger);
  font-weight: 500;
}

/* ── Image uploader (drag & drop) ───────────────────────────────────────── */
.admin-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.75rem 1rem;
  border: 2px dashed #cbd5e1;
  border-radius: 0.75rem;
  background: #f8fafc;
  color: var(--admin-text);
  text-align: center;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}

.dark .admin-uploader {
  background: #0f172a;
  border-color: #4b5563;
}

.admin-uploader:hover {
  border-color: var(--admin-brand);
  background: #fff1f5;
}

.dark .admin-uploader:hover {
  background: #1f2937;
  border-color: var(--admin-brand-hover);
}

.admin-uploader:focus-visible {
  outline: 2px solid var(--admin-brand);
  outline-offset: 2px;
}

.admin-uploader--drag-over {
  border-color: var(--admin-brand);
  background: #fff1f5;
  transform: scale(1.005);
}

.dark .admin-uploader--drag-over {
  background: #1f2937;
  border-color: var(--admin-brand-hover);
}

.admin-uploader-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: rgba(219, 39, 119, 0.1);
  color: var(--admin-brand);
}

.dark .admin-uploader-icon {
  background: rgba(236, 72, 153, 0.15);
  color: var(--admin-brand-hover);
}

.admin-uploader-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.admin-uploader-primary {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--admin-text);
}

.admin-uploader-secondary {
  font-size: 0.8125rem;
  color: var(--admin-text-muted);
}

.admin-uploader-input.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-uploader-status {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--admin-text-muted);
  min-height: 1.25rem;
}

.admin-uploader-existing-label,
.admin-uploader-previews-label {
  margin-top: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--admin-text-muted);
}

.admin-uploader-existing,
.admin-uploader-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem 0;
}

.admin-uploader-previews:empty {
  display: none;
}

.admin-uploader-existing-item {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f1f5f9;
  border: 1px solid var(--admin-border);
  aspect-ratio: 1 / 1;
}

.dark .admin-uploader-existing-item {
  background: #1f2937;
}

.admin-uploader-existing-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-image-gallery__item {
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 0.5rem;
  background: #fff;
}

.dark .admin-image-gallery__item {
  background: #1f2937;
}

.admin-image-gallery__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #f8fafc;
}

.dark .admin-image-gallery__image {
  background: #111827;
}

.admin-image-gallery__caption {
  display: block;
  padding: 0.45rem 0.55rem;
  color: var(--admin-text-muted);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-uploader-preview-item {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--admin-border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}

.dark .admin-uploader-preview-item {
  background: #1f2937;
}

.admin-uploader-preview-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.admin-uploader-preview-name {
  display: block;
  padding: 0.35rem 0.5rem;
  font-size: 0.6875rem;
  color: var(--admin-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-uploader-preview-remove {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 150ms ease, transform 150ms ease;
}

.admin-uploader-preview-remove::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.admin-uploader-preview-remove svg {
  width: 1rem;
  height: 1rem;
  position: relative;
  z-index: 1;
}

.admin-uploader-preview-remove:hover {
  background: var(--admin-danger);
}

.admin-uploader-preview-remove:focus-visible {
  outline: 2px solid var(--admin-brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .admin-uploader,
  .admin-uploader--drag-over,
  .admin-uploader-preview-remove {
    transition: none;
    transform: none;
  }
}

/* ── Admin form density layout (Batch F1) ───────────────────────────────── */

/* Cap the form card width on wide screens — a 1200px-wide form reads as
   sprawling. Inputs at most 600px wide pair well in two columns. */
form.admin-card {
  max-width: 56rem;
}

/* Tighten the default vertical rhythm of the form card itself; the grid
   below owns its own spacing. */
form.admin-card.space-y-4 > * + * {
  margin-top: 0.75rem;
}

/* Two-column responsive grid for the resource form */
.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 0.75rem;
}

@media (min-width: 768px) {
  .admin-form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .admin-form-grid > .admin-field--full,
  .admin-form-grid > fieldset.admin-checkbox-group {
    grid-column: 1 / -1;
  }
}

/* Field-width discipline — short for pure-numeric fields, medium for typical
   identifiers/text/dates. The medium cap is deliberately wider than the
   datetime browser-default so SKU + Disponible desde align edge-to-edge in
   their respective grid columns. */
.admin-input--short {
  max-width: 10rem;
}

.admin-input--medium {
  max-width: 100%;
}

/* Visibility / boolean checkbox group fieldset */
.admin-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--admin-border);
  border-radius: 0.5rem;
  background: var(--admin-surface-muted);
  margin: 0;
}

.admin-checkbox-group legend {
  padding: 0 0.35rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--admin-text-muted);
}

.admin-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.875rem;
}

.admin-checkbox-row input[type="checkbox"] {
  margin: 0;
}

/* Sticky form-actions bar. Pins to the bottom of the scrolling area; uses
   bottom: -3rem to compensate for .admin-main's padding-bottom: 3rem so the
   bar visually ends flush with the viewport bottom edge instead of leaving
   3rem of background gradient below it. The bar is fully opaque so scrolled
   content doesn't bleed through it. */
.admin-form-actions {
  position: sticky;
  bottom: -3rem;
  z-index: 5;
  margin: 1rem -1.25rem -1.25rem;
  padding: 0.85rem 1.25rem 1.05rem;
  /* Safe-area: home bar on notched devices */
  padding-bottom: calc(1.05rem + env(safe-area-inset-bottom, 0px));
  background: var(--admin-surface);
  border-top: 1px solid var(--admin-border);
  border-radius: 0 0 0.75rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  justify-content: flex-end;
  align-items: center;
  box-shadow: 0 -8px 16px -10px rgba(15, 23, 42, 0.12);
}

.dark .admin-form-actions {
  box-shadow: 0 -8px 16px -10px rgba(0, 0, 0, 0.55);
}

.admin-form-actions::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  top: -0.75rem;
  height: 0.75rem;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.05), transparent);
  pointer-events: none;
}

.dark .admin-form-actions::before {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
}

.admin-form-actions .admin-form-actions__cancel {
  margin-right: auto;
  font-weight: 500;
}

.admin-form-actions [type="submit"],
.admin-form-actions .admin-btn-primary {
  min-width: 7rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(219, 39, 119, 0.18);
}

.admin-form-actions [type="submit"]:hover,
.admin-form-actions .admin-btn-primary:hover {
  box-shadow: 0 2px 6px rgba(219, 39, 119, 0.28);
}

/* -----------------------------------------------------------------------
   Nested fields section (e.g. product prices inline editor)
   ----------------------------------------------------------------------- */
.admin-form-section {
  border-top: 1px solid var(--admin-border);
  padding-top: 0.75rem;
}

.admin-form-section h3 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: var(--admin-text);
}

.admin-form-section > p.admin-muted {
  margin-bottom: 0.5rem;
}

.admin-nested-list {
  margin-top: 0.5rem;
}

.admin-nested-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 7rem 7rem 2rem;
  gap: 0.5rem;
  align-items: end;
  padding: 0.5rem;
  border: 1px solid var(--admin-border);
  border-radius: 0.5rem;
  background: var(--admin-surface);
}

.admin-nested-row + .admin-nested-row {
  margin-top: 0.5rem;
}

.admin-nested-row[data-marked-for-destroy="true"] {
  opacity: 0.4;
  text-decoration: line-through;
}

.admin-nested-add-btn {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--admin-link);
  background: transparent;
  border: 1px dashed var(--admin-border);
  border-radius: 0.5rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.admin-nested-add-btn:hover {
  background: var(--admin-surface-muted);
  border-style: solid;
}

.admin-nested-remove-btn {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--admin-text-muted);
  cursor: pointer;
  align-self: end;
  margin-bottom: 0.25rem;
}

.admin-nested-remove-btn:hover {
  background: var(--admin-surface-muted);
  color: var(--admin-danger);
}

/* Variant rows are collapsible cards, not flat strips. The summary is the
   row's "header" and the body holds the field grid + image dropzone. */
.admin-variant-row {
  display: block;          /* override .admin-nested-row's grid layout */
  padding: 0;
  overflow: hidden;
}

.admin-variant-row__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  cursor: pointer;
  list-style: none;        /* remove default ▶ marker */
  user-select: none;
  font-weight: 500;
}

.admin-variant-row__summary::-webkit-details-marker {
  display: none;
}

.admin-variant-row__summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.25rem;
  font-size: 0.75rem;
  transition: transform 0.15s ease-out;
  color: var(--admin-text-muted);
}

.admin-variant-row[open] > .admin-variant-row__summary::before {
  transform: rotate(90deg);
}

.admin-variant-row__title { flex: 1; }

.admin-variant-row__sku {
  font-family: ui-monospace, SFMono-Regular, monospace;
  white-space: nowrap;
}

.admin-variant-row__body {
  border-top: 1px solid var(--admin-border);
  padding: 0.85rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--admin-surface-muted);
}

.admin-variant-row__images {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.admin-variant-row__image-thumbs {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.admin-variant-row__image-thumbs li img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 0.4rem;
  border: 1px solid var(--admin-border);
}

/* ── Quick-create context: locked / pre-filled fields ─────────────────────── */

.admin-readonly-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background: #fce7f3;
  color: #9d174d;
  border: 1px solid #fbcfe8;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}

.dark .admin-readonly-pill {
  background: rgba(190, 24, 93, 0.25);
  color: #fbcfe8;
  border-color: rgba(244, 114, 182, 0.4);
}

/* ── Order status-action buttons ─────────────────────────────────────────── */

.admin-status-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: 0.6rem;
  border: 1px solid var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease-out, border-color 0.15s ease-out;
}

.admin-status-action-btn:hover {
  background: var(--admin-surface-muted);
  border-color: var(--admin-text-muted);
}

.admin-status-action-btn--processing {
  color: #92400e;
  border-color: #fde68a;
  background: #fffbeb;
}

.admin-status-action-btn--processing:hover {
  background: #fef3c7;
}

.dark .admin-status-action-btn--processing {
  color: #fde68a;
  border-color: #92400e;
  background: rgba(146, 64, 14, 0.2);
}

.dark .admin-status-action-btn--processing:hover {
  background: rgba(146, 64, 14, 0.35);
}

.admin-status-action-btn--shipped {
  color: #fff;
  border-color: #db2777;
  background: #db2777;
}

.admin-status-action-btn--shipped:hover {
  background: #be185d;
  border-color: #be185d;
}

.admin-status-action-btn[aria-disabled="true"],
.admin-status-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.admin-shipment-info {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--admin-border);
  border-radius: 0.6rem;
  background: var(--admin-surface-muted);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 0.8rem;
  font-size: 0.875rem;
}

.admin-shipment-info dt {
  color: var(--admin-text-muted);
  font-weight: 500;
}

.admin-shipment-info dd {
  margin: 0;
  font-weight: 600;
  word-break: break-all;
}

/* ── Phase 5: Form section groups (progressive disclosure) ──────────────── */

.admin-form-section-group {
  border: 1px solid var(--admin-border);
  border-radius: 0.625rem;
  background: var(--admin-surface);
  overflow: hidden;
}

.admin-form-section-group + .admin-form-section-group {
  margin-top: 0.5rem;
}

.admin-form-section-group__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--admin-surface-muted);
  border-bottom: 1px solid transparent;
}

.admin-form-section-group[open] > .admin-form-section-group__summary {
  border-bottom-color: var(--admin-border);
}

.admin-form-section-group__summary::-webkit-details-marker {
  display: none;
}

.admin-form-section-group__summary:focus-visible {
  outline: 2px solid var(--admin-brand);
  outline-offset: -2px;
}

.admin-form-section-group__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--admin-text);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.admin-form-section-group__error-dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--admin-danger);
  flex-shrink: 0;
}

.admin-form-section__chevron {
  width: 1rem;
  height: 1rem;
  color: var(--admin-text-muted);
  flex-shrink: 0;
  transition: transform 0.18s ease-out;
}

.admin-form-section__chevron--open {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .admin-form-section__chevron {
    transition: none;
  }
}

.admin-form-section-group__body {
  padding: 0.85rem 1rem;
}

/* ── Phase 5.2: Inline per-field validation toast ───────────────────────── */

.admin-form-field-toast {
  position: fixed;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-radius: 0.6rem;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 0.875rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  max-width: min(24rem, 90vw);
  animation: admin-toast-in 0.2s ease-out;
}

@keyframes admin-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(0.5rem); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.admin-form-field-toast--leaving {
  animation: admin-toast-out 0.2s ease-in forwards;
}

@keyframes admin-toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to { opacity: 0; transform: translateX(-50%) translateY(0.5rem); }
}

.admin-form-field-toast__undo {
  background: none;
  border: none;
  color: #f472b6;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

.admin-form-field-toast__undo:hover {
  color: #fbcfe8;
}

@media (prefers-reduced-motion: reduce) {
  .admin-form-field-toast,
  .admin-form-field-toast--leaving {
    animation: none;
  }
}

/* ── Phase 5.3: Image uploader enhancements ─────────────────────────────── */

/* Cover ribbon badge */
.admin-uploader-cover-badge {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.15rem 0.4rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #db2777;
  color: #fff;
  border-radius: 0.375rem 0 0.375rem 0;
  line-height: 1.4;
  pointer-events: none;
}

/* Cover image gets a pink ring */
.admin-uploader-existing-item--cover {
  outline: 2px solid #db2777;
  outline-offset: 2px;
  border-radius: 0.5rem;
}

.dark .admin-uploader-existing-item--cover {
  outline-color: #ec4899;
}

/* Drag handle cursor on reorderable items */
.admin-uploader-existing-item[draggable="true"] {
  cursor: grab;
}

.admin-uploader-existing-item[draggable="true"]:active {
  cursor: grabbing;
}

.admin-uploader-existing-item--drag-over {
  outline: 2px dashed #db2777;
  outline-offset: 2px;
  border-radius: 0.5rem;
  opacity: 0.7;
}

/* Hidden-but-committed removal — animated out then placeholder */
.admin-uploader-existing-item--removed {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .admin-uploader-existing-item--removed {
    transition: none;
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
@media screen and (max-width: 1023px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

@layer components {
  .pos-page {
    @apply min-h-screen bg-gradient-to-b from-rose-50 via-white to-slate-50 text-slate-800;
  }

  .pos-header {
    @apply border-b border-slate-200 bg-white/95 backdrop-blur;
  }

  .pos-card {
    @apply rounded-xl border border-slate-200 bg-white p-6 shadow-sm;
  }

  .pos-card-muted {
    @apply rounded-xl border border-rose-100 bg-rose-50/60 p-6;
  }

  .pos-section-title {
    @apply text-xl font-semibold text-slate-900;
  }

  .pos-label {
    @apply mb-1 block text-sm font-medium text-slate-700;
  }

  .pos-input {
    @apply w-full rounded-lg border-slate-300 text-base focus:border-pink-500 focus:ring-pink-500;
  }

  .pos-btn-primary {
    @apply inline-flex items-center justify-center rounded-lg bg-pink-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-pink-500;
  }

  .pos-btn-neutral {
    @apply inline-flex items-center justify-center rounded-lg bg-slate-800 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-slate-700;
  }

  .pos-btn-soft {
    @apply inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50;
  }

  .pos-btn-success {
    @apply inline-flex items-center justify-center rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-emerald-500;
  }

  .pos-btn-warning {
    @apply inline-flex items-center justify-center rounded-lg bg-amber-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-amber-500;
  }

  .pos-btn-danger {
    @apply inline-flex items-center justify-center rounded-lg bg-rose-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-rose-500;
  }

  .pos-btn-disabled {
    @apply inline-flex items-center justify-center rounded-lg bg-slate-300 px-4 py-2 text-sm font-semibold text-slate-600 cursor-not-allowed;
  }

  .pos-chip {
    @apply rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide;
  }

  .pos-table-wrap {
    @apply overflow-x-auto rounded-lg border border-slate-200;
  }

  .pos-table {
    @apply min-w-full divide-y divide-slate-200 text-sm;
  }

  .pos-thead {
    @apply bg-slate-50 text-slate-700;
  }

  .pos-th {
    @apply px-3 py-2 text-left font-semibold;
  }

  .pos-td {
    @apply px-3 py-2;
  }

  .pos-link {
    @apply font-semibold text-pink-700 hover:text-pink-600;
  }
}

/* Hide scrollbar utility for horizontal carousels */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Turbo Frame loading states */
turbo-frame[busy] {
  position: relative;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

turbo-frame[busy]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 50;
  background: linear-gradient(90deg, transparent, #db2777, transparent);
  animation: turbo-loading-bar 1.2s ease-in-out infinite;
}

@keyframes turbo-loading-bar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Hotwire Native: hide elements that duplicate native UI */
[data-native-app] header[data-controller="toggle"],
[data-native-app] [data-test-id="mobile-bottom-nav"],
[data-native-app] [data-controller="announcement-bar"] {
  display: none !important;
}

/* Hotwire Native Bridge: hide web elements when native component is active */
[data-bridge-components~="button"] [data-controller~="bridge--button"] {
  display: none;
}

/* Quick-add checkmark animation */
.checkmark-circle {
  stroke-dasharray: 63;
  stroke-dashoffset: 63;
  animation: checkmark-circle-draw 0.4s ease-out forwards;
}

.checkmark-check {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: checkmark-check-draw 0.3s ease-out 0.3s forwards;
}

@keyframes checkmark-circle-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes checkmark-check-draw {
  to { stroke-dashoffset: 0; }
}
/* POS - Jafer Belleza Point of Sale Styles */

/* Layout */
.pos-page { min-height: 100vh; background: linear-gradient(to bottom, #fff1f2 0%, #ffffff 40%, #f8fafc 100%); color: #1e293b; }
.pos-header { background: rgba(255,255,255,0.95); border-bottom: 1px solid #e2e8f0; backdrop-filter: blur(8px); }

/* Layout - Dark */
.dark .pos-page { background: linear-gradient(to bottom, #030712 0%, #030712 100%); color: #e5e7eb; }
.dark .pos-header { background: rgba(17,24,39,0.95); border-bottom-color: #374151; }

/* Cards */
.pos-card { background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; padding: 1.5rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.pos-card-muted { background: rgba(255,241,242,.6); border: 1px solid #ffe4e6; border-radius: .75rem; padding: 1.5rem; }

/* Cards - Dark */
.dark .pos-card { background: #111827; border-color: #374151; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.dark .pos-card-muted { background: rgba(120, 53, 15, .2); border-color: #92400e; }

/*
 * Nested panels inside POS modals/cards (reward SMS, order totals, etc.).
 * Use this instead of only Tailwind `bg-slate-50 dark:bg-gray-800` on inner divs: if the
 * compiled tailwind.css is stale, `dark:` utilities may be missing while `bg-slate-50`
 * still applies — producing a bright panel inside an otherwise dark UI.
 */
.pos-inset-panel {
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;
}
.dark .pos-inset-panel {
  border-color: #374151;
  background-color: rgba(31, 41, 55, 0.85);
}

/* Typography */
.pos-section-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: #0f172a; }
.pos-label { display: block; margin-bottom: .25rem; font-size: .875rem; font-weight: 500; color: #334155; }

/* Typography - Dark */
.dark .pos-section-title { color: #f3f4f6; }
.dark .pos-label { color: #d1d5db; }

/* Form inputs */
.pos-input { width: 100%; border: 1px solid #cbd5e1; border-radius: .5rem; padding: .5rem .75rem; font-size: 1rem; color: #0f172a; background: #fff; }
.pos-input:focus { outline: 2px solid #ec4899; outline-offset: 0; border-color: #ec4899; }

/* Form inputs - Dark */
.dark .pos-input { background: #1f2937; border-color: #4b5563; color: #f3f4f6; }
.dark .pos-input:focus { outline-color: #ec4899; border-color: #ec4899; }

/* Buttons - shared base */
.pos-btn-primary, .pos-btn-neutral, .pos-btn-soft, .pos-btn-success, .pos-btn-warning, .pos-btn-danger, .pos-btn-disabled {
  display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; padding: .625rem 1.25rem; font-size: .875rem; font-weight: 600; text-decoration: none; min-height: 2.75rem;
}
.pos-btn-lg { padding: .75rem 1.5rem; font-size: 1rem; min-height: 3rem; }

/* Button variants */
.pos-btn-primary { background: #db2777; color: #fff; } .pos-btn-primary:hover { background: #ec4899; }
.pos-btn-neutral { background: #1e293b; color: #fff; } .pos-btn-neutral:hover { background: #334155; }
.pos-btn-soft { background: #fff; color: #334155; border: 1px solid #cbd5e1; } .pos-btn-soft:hover { background: #f8fafc; }
.pos-btn-success { background: #059669; color: #fff; } .pos-btn-success:hover { background: #10b981; }
.pos-btn-warning { background: #d97706; color: #fff; } .pos-btn-warning:hover { background: #f59e0b; }
.pos-btn-danger { background: #e11d48; color: #fff; } .pos-btn-danger:hover { background: #f43f5e; }
.pos-btn-disabled { background: #cbd5e1; color: #475569; cursor: not-allowed; }

/* Button variants - Dark */
.dark .pos-btn-neutral { background: #374151; } .dark .pos-btn-neutral:hover { background: #4b5563; }
.dark .pos-btn-soft { background: #1f2937; color: #d1d5db; border-color: #4b5563; } .dark .pos-btn-soft:hover { background: #374151; }
.dark .pos-btn-disabled { background: #374151; color: #6b7280; }

/* Button focus states */
.pos-btn-primary:focus-visible, .pos-btn-neutral:focus-visible,
.pos-btn-soft:focus-visible, .pos-btn-success:focus-visible,
.pos-btn-warning:focus-visible, .pos-btn-danger:focus-visible {
  outline: 2px solid #ec4899; outline-offset: 2px;
}

/* Chips and status pills */
.pos-chip { display: inline-block; border-radius: 9999px; padding: .25rem .75rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pos-status-pill { border: 1px solid transparent; }
.pos-status-pill::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; }
.pos-status-pill--completed { background: #dcfce7; color: #166534; border-color: #86efac; }
.pos-status-pill--completed::before { background: #16a34a; }
.pos-status-pill--draft { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.pos-status-pill--draft::before { background: #2563eb; }
.pos-status-pill--progress { background: #fef3c7; color: #78350f; border-color: #fcd34d; }
.pos-status-pill--progress::before { background: #d97706; }
.pos-status-pill--cancelled { background: #ffe4e6; color: #9f1239; border-color: #fda4af; }
.pos-status-pill--cancelled::before { background: #e11d48; }
.pos-status-pill--default { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }

/* Status pills - Dark */
.dark .pos-status-pill--completed { background: rgba(22, 101, 52, .3); color: #86efac; border-color: rgba(34, 197, 94, .3); }
.dark .pos-status-pill--draft { background: rgba(30, 64, 175, .3); color: #93c5fd; border-color: rgba(37, 99, 235, .3); }
.dark .pos-status-pill--progress { background: rgba(120, 53, 15, .3); color: #fcd34d; border-color: rgba(217, 119, 6, .3); }
.dark .pos-status-pill--cancelled { background: rgba(159, 18, 57, .3); color: #fda4af; border-color: rgba(225, 29, 72, .3); }
.dark .pos-status-pill--default { background: #1f2937; color: #d1d5db; border-color: #4b5563; }

/* Table */
.pos-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: .5rem; }
.pos-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.pos-thead { background: #f8fafc; color: #334155; }
.pos-th, .pos-td { padding: .5rem .75rem; text-align: left; }
.pos-th { font-weight: 600; }
.pos-table tbody tr + tr td { border-top: 1px solid #f1f5f9; }

/* Compact variant — denser rows for high-frequency lists like recent orders */
.pos-table--compact { font-size: .75rem; }
.pos-table--compact .pos-th,
.pos-table--compact .pos-td { padding: .375rem .625rem; }
.pos-table--compact .pos-chip { padding: .125rem .5rem; font-size: .625rem; letter-spacing: .03em; }
.pos-table--compact .pos-status-pill::before { width: 5px; height: 5px; margin-right: 3px; }

/* Table - Dark */
.dark .pos-table-wrap { border-color: #374151; }
.dark .pos-thead { background: #1f2937; color: #d1d5db; }
.dark .pos-table tbody tr + tr td { border-top-color: #1f2937; }

/* Links */
.pos-link { color: #be185d; font-weight: 600; text-decoration: none; }
.pos-link:hover { color: #db2777; }
.pos-link:focus-visible { outline: 2px solid #ec4899; outline-offset: 2px; border-radius: 2px; }

/* Links - Dark */
.dark .pos-link { color: #f472b6; }
.dark .pos-link:hover { color: #f9a8d4; }

/* Keyboard shortcut badge */
.pos-kbd { display: inline-block; padding: 0.125rem 0.375rem; border: 1px solid #cbd5e1; border-radius: 0.25rem; background: #f8fafc; font-size: 0.6875rem; font-weight: 600; color: #64748b; }

/* Keyboard shortcut badge - Dark */
.dark .pos-kbd { background: #374151; border-color: #4b5563; color: #9ca3af; }

/* Flash animations */
@keyframes posFlashSlideIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(-1rem); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes posFlashPop {
  0% { transform: scale(.7); opacity: .2; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.pos-header-flash-wrap {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.pos-header-flash {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: posFlashSlideIn 0.3s ease-out;
  cursor: pointer;
}

.pos-flash-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  animation: posFlashPop .28s ease-out;
}

.pos-header-flash.pos-flash-success { background: #16a34a; }
.pos-header-flash.pos-flash-error { background: #dc2626; }

/* Quantity flash animation */
@keyframes posQtyFlash {
  0% { background-color: #fef3c7; }
  100% { background-color: transparent; }
}

@keyframes posQtyFlashDark {
  0% { background-color: rgba(120, 53, 15, .4); }
  100% { background-color: transparent; }
}

.pos-qty-flash {
  animation: posQtyFlash 0.5s ease-out;
}

.dark .pos-qty-flash {
  animation: posQtyFlashDark 0.5s ease-out;
}

/* Scanner indicator dot */
@keyframes posScannerDotPulse {
  0% { transform: scale(0.6); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.pos-scanner-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: posScannerDotPulse 0.8s ease-out forwards;
}

.pos-scanner-dot--success { background: #16a34a; }
.pos-scanner-dot--error { background: #dc2626; }

/* Last-scanned item highlight (Task 23) */
@keyframes posItemFlash {
  0% { background: #dcfce7; }
  100% { background: transparent; }
}

.pos-item-flash {
  animation: posItemFlash 1.5s ease-out;
}

@keyframes posItemFlashDark {
  0% { background: rgba(22, 101, 52, .3); }
  100% { background: transparent; }
}

.dark .pos-item-flash {
  animation: posItemFlashDark 1.5s ease-out;
}

/* Quantity stepper buttons */
.pos-qty-stepper-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: .5rem; border: 1px solid #cbd5e1;
  background: #fff; color: #64748b;
  transition: all 0.15s ease;
  cursor: pointer;
  flex-shrink: 0;
}

/* Compact quantity input for the scanner stepper. Specific class wins over
   the global `.pos-input { width: 100% }` rule because pos.css source order
   places this rule later. */
.pos-input.pos-input--qty {
  width: 3rem;
  flex-shrink: 0;
}
.pos-qty-stepper-btn:hover { background: #f1f5f9; color: #334155; }
.pos-qty-stepper-btn:active { transform: scale(0.85); background: #fce7f3; }

.pos-qty-stepper-btn--sm { width: 1.75rem; height: 1.75rem; }

.dark .pos-qty-stepper-btn { background: #1f2937; border-color: #4b5563; color: #9ca3af; }
.dark .pos-qty-stepper-btn:hover { background: #374151; color: #d1d5db; }
.dark .pos-qty-stepper-btn:active { background: rgba(236, 72, 153, .2); }

/* ============================================================
   POS Line Items — dense card-row layout (density refresh)
   ============================================================ */

.pos-line-items {
  --pos-line-item-pad-y: 0.45rem;
  --pos-line-item-pad-x: 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  overflow: hidden;
}
.dark .pos-line-items { border-color: #374151; }

.pos-line-items__sticky-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: #f8fafc;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  border-bottom: 1px solid #e2e8f0;
}
.dark .pos-line-items__sticky-header { background: #1f2937; color: #d1d5db; border-bottom-color: #374151; }

.pos-line-item {
  padding: var(--pos-line-item-pad-y) var(--pos-line-item-pad-x);
  border-top: 1px solid #f1f5f9;
}
.pos-line-item:nth-child(even) { background: rgba(15, 23, 42, 0.025); }
.dark .pos-line-item:nth-child(even) { background: rgba(255, 255, 255, 0.025); }
.dark .pos-line-item { border-top-color: #1f2937; }

.pos-line-item__primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.pos-line-item__name {
  min-width: 0;
  font-weight: 500;
}
.pos-line-item__product { color: #0f172a; }
.dark .pos-line-item__product { color: #f3f4f6; }
.pos-line-item__variant { color: #64748b; font-weight: 400; margin-left: 0.25rem; }
.dark .pos-line-item__variant { color: #94a3b8; }

.pos-line-item__price-block {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
}
.pos-line-item__unit { color: #475569; min-width: 4.5rem; text-align: right; }
.dark .pos-line-item__unit { color: #94a3b8; }
.pos-line-item__total { font-weight: 600; min-width: 5rem; text-align: right; color: #0f172a; }
.dark .pos-line-item__total { color: #f3f4f6; }

.pos-line-item__pricing-mode {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 0.4rem;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
}
.pos-line-item__pricing-mode--wholesale {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.dark .pos-line-item__pricing-mode { background: #374151; border-color: #4b5563; color: #9ca3af; }
.dark .pos-line-item__pricing-mode--wholesale { background: rgba(120, 53, 15, 0.4); color: #fcd34d; border-color: rgba(217, 119, 6, 0.4); }

.pos-line-item__qty {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.pos-line-item__qty button {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.45rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pos-line-item__qty button:hover { background: #f1f5f9; }
.dark .pos-line-item__qty button { background: #1f2937; border-color: #4b5563; color: #d1d5db; }
.dark .pos-line-item__qty button:hover { background: #374151; }
.pos-line-item__qty span { min-width: 1.5rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.pos-line-item__remove {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.4rem;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pos-line-item__remove:hover { color: #dc2626; background: #fef2f2; }
.dark .pos-line-item__remove:hover { color: #fca5a5; background: rgba(220, 38, 38, 0.15); }

.pos-line-item__meta {
  margin-top: 0.2rem;
  font-size: 0.7rem;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
.dark .pos-line-item__meta { color: #6b7280; }

.pos-line-item__variant-summary {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: #64748b;
}
.dark .pos-line-item__variant-summary { color: #9ca3af; }

.pos-line-item__expand-btn {
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease-out;
}
.pos-line-item__expand-btn[aria-expanded="true"] { transform: rotate(180deg); }
.dark .pos-line-item__expand-btn { color: #9ca3af; }

/* ============================================================
   POS Scanner area — tighter chrome (B1.3)
   ============================================================ */

.pos-scan-area {
  border: 1px solid #d1fae5;
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  background: rgba(236, 253, 245, 0.5);
}
.dark .pos-scan-area {
  border-color: rgba(6, 78, 59, 0.5);
  background: rgba(6, 78, 59, 0.15);
}

/* Pagy pagination */
.pagy nav, nav.pagy { display: flex !important; align-items: center; gap: 0.25rem; flex-wrap: wrap; background: transparent !important; }
.pagy nav .pagy-info, nav.pagy .pagy-info, .pagy .pagy-info { display: none !important; }
.pagy nav a, .pagy nav span, nav.pagy a, nav.pagy span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; padding: 0 0.5rem;
  border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500;
  text-decoration: none; border: 1px solid #e2e8f0; color: #334155; background: #fff;
}
.pagy nav a:hover, nav.pagy a:hover { background: #f1f5f9; }
.pagy nav a.current, nav.pagy a.current { background: #e11d73 !important; color: #fff !important; border-color: #e11d73 !important; }
.pagy nav a[aria-disabled], nav.pagy a[aria-disabled], .pagy nav span[aria-disabled], nav.pagy span[aria-disabled] { opacity: 0.4; pointer-events: none; }
.dark .pagy nav a, .dark .pagy nav span, .dark nav.pagy a, .dark nav.pagy span { background: #1e293b; border-color: #374151; color: #cbd5e1; }
.dark .pagy nav a:hover, .dark nav.pagy a:hover { background: #334155; }
.dark .pagy nav a.current, .dark nav.pagy a.current { background: #e11d73 !important; color: #fff !important; border-color: #e11d73 !important; }
/*
 * Print receipt for the POS thermal printer.
 *
 * The screen styles render a friendly preview at ~280px wide so the operator
 * can verify the receipt before printing. The @media print block then switches
 * to a 58mm page (matching the in-store thermal printer's paper width) using
 * a monospace font that renders crisply on thermal heads and keeps columns
 * aligned without measuring text.
 */

body {
  margin: 0;
  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111827;
  background: #ffffff;
}

.receipt {
  max-width: 280px;
  margin: 0 auto;
  border: 1px dashed #9ca3af;
  padding: 14px;
}

h1 {
  margin: 0 0 4px;
  font-size: 18px;
  text-align: center;
}

.sub {
  margin: 0 0 2px;
  font-size: 12px;
  text-align: center;
  color: #4b5563;
}

.store-info {
  margin: 0 0 12px;
  font-size: 11px;
  text-align: center;
  color: #6b7280;
  line-height: 1.4;
}

.meta {
  margin: 10px 0;
  font-size: 12px;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 8px;
}

th, td {
  padding: 4px 0;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}

th:last-child, td:last-child {
  text-align: right;
}

td.qty, th.qty {
  text-align: center;
  width: 30px;
}

.total {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}

.payment-breakdown {
  margin-top: 6px;
  font-size: 12px;
  border-top: 1px dashed #d1d5db;
  padding-top: 6px;
}

.payment-row {
  display: flex;
  justify-content: space-between;
  margin: 2px 0;
}

.footer {
  text-align: center;
  font-size: 11px;
  color: #6b7280;
  margin-top: 12px;
}

.footer p {
  margin: 2px 0;
}

.actions {
  max-width: 280px;
  margin: 12px auto 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.btn {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

.btn-primary {
  border-color: #059669;
  background: #059669;
  color: #fff;
}

@media print {
  /* Match the in-store 58mm thermal receipt printer. Using the printer's
     actual page size avoids the browser laying out a wider canvas that
     the driver then crops/scales (which throws centering off and feeds
     extra blank paper). `size: <width> auto` lets the receipt cut at the
     end of content instead of padding to a fixed page height. */
  @page {
    size: 58mm auto;
    margin: 0;
  }
  html, body {
    margin: 0;
    padding: 0;
    width: 58mm;
    background: #ffffff;
    /* Monospace renders crisply on thermal heads and lets columns line
       up without measuring text. Black text only — gray tones don't
       reproduce well on thermal paper. */
    font-family: "Courier New", "Liberation Mono", "Consolas", monospace;
    font-size: 11px;
    color: #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .actions { display: none; }
  .receipt {
    border: 0;
    max-width: 58mm;
    width: 58mm;
    margin: 0;
    /* Side gutters keep text off the print-head edges; vertical padding
       stays small so the auto page cuts close to the last line. */
    padding: 2mm 3mm;
  }
  h1 { font-size: 13px; margin: 0 0 2px; color: #000; }
  .sub { font-size: 10px; color: #000; margin: 0 0 2px; }
  .store-info { font-size: 10px; color: #000; margin: 0 0 6px; }
  .meta { margin: 4px 0; font-size: 10px; }
  .meta-row { margin: 0; gap: 4px; }
  table { font-size: 10px; margin-top: 4px; }
  thead th {
    border-bottom: 1px solid #000;
    padding: 2px 0;
  }
  tbody td {
    border-bottom: none;
    padding: 1px 0;
    /* Long product names should wrap inside the column rather than push
       the price off the right edge of the 58mm paper. */
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  td.qty, th.qty { width: 22px; }
  .total {
    margin-top: 6px;
    font-size: 12px;
    border-top: 1px dashed #000;
    padding-top: 4px;
  }
  .payment-breakdown {
    font-size: 10px;
    border-top: 1px dashed #000;
  }
  .footer { margin-top: 8px; font-size: 9px; color: #000; }
  .footer p { margin: 1px 0; }
  /* Defensive: never force a page break inside the receipt. Some
     browsers honor the parent's `page-break-inside: avoid` by pushing
     the entire block to a fresh page, which leaves the previous page
     blank and feeds extra paper. */
  .receipt, .receipt * {
    page-break-inside: auto;
    break-inside: auto;
    page-break-before: auto;
    page-break-after: auto;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.pos-page {
  min-height: 100vh;
  background: linear-gradient(to bottom, #fff1f2 0%, #ffffff 40%, #f8fafc 100%);
  color: #1e293b;
}

.pos-header {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid #e2e8f0;
  backdrop-filter: blur(8px);
}

.pos-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.pos-card-muted {
  background: rgba(255, 241, 242, 0.6);
  border: 1px solid #ffe4e6;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.pos-section-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: #0f172a;
}

.pos-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
}

.pos-input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  color: #0f172a;
  background: #ffffff;
}

.pos-input:focus {
  outline: 2px solid #ec4899;
  outline-offset: 0;
  border-color: #ec4899;
}

.pos-btn-primary,
.pos-btn-neutral,
.pos-btn-soft,
.pos-btn-success,
.pos-btn-warning,
.pos-btn-danger,
.pos-btn-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.pos-btn-primary { background: #db2777; color: #ffffff; }
.pos-btn-primary:hover { background: #ec4899; }

.pos-btn-neutral { background: #1e293b; color: #ffffff; }
.pos-btn-neutral:hover { background: #334155; }

.pos-btn-soft { background: #ffffff; color: #334155; border: 1px solid #cbd5e1; }
.pos-btn-soft:hover { background: #f8fafc; }

.pos-btn-success { background: #059669; color: #ffffff; }
.pos-btn-success:hover { background: #10b981; }

.pos-btn-warning { background: #d97706; color: #ffffff; }
.pos-btn-warning:hover { background: #f59e0b; }

.pos-btn-danger { background: #e11d48; color: #ffffff; }
.pos-btn-danger:hover { background: #f43f5e; }

.pos-btn-disabled {
  background: #cbd5e1;
  color: #475569;
  cursor: not-allowed;
}

.pos-chip {
  display: inline-block;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pos-table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

.pos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.pos-thead {
  background: #f8fafc;
  color: #334155;
}

.pos-th,
.pos-td {
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.pos-th {
  font-weight: 600;
}

.pos-table tbody tr + tr td {
  border-top: 1px solid #f1f5f9;
}

.pos-link {
  color: #be185d;
  font-weight: 600;
  text-decoration: none;
}

.pos-link:hover {
  color: #db2777;
}

/* ---------------------------------------------------------------------------
 * Storefront / shared utilities (extracted from inline view styles).
 * Inline `style="..."` belongs in CSS files; only dynamic single-value props
 * (e.g. progress-bar width) are passed in via CSS custom properties.
 * ------------------------------------------------------------------------- */

/* Subtle dot pattern used as a hero background overlay. */
.dot-pattern-bg {
  background-image: radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);
  background-size: 40px 40px;
}

/* Bouncing-dot animation delays for the chat typing indicator. */
.animate-bounce-delay-1 { animation-delay: 0.1s; }
.animate-bounce-delay-2 { animation-delay: 0.2s; }

/* iOS / Hotwire Native bottom safe-area padding. Apply on elements that sit
 * flush with the bottom of the viewport (sticky bars, bottom navs). */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Progress / fill bars driven by a `--progress` custom property on the inline
 * style. Width still scales with the value, but no rule lives in markup. */
.progress-bar-fill {
  width: var(--progress, 0%);
}

/* Checkout-step connectors animate from 0% → 100% width when the step
 * before them is complete. Toggled by checkout_steps_controller.js. */
.checkout-step-connector {
  width: 0%;
}

.checkout-step-connector.is-complete {
  width: 100%;
}

/* Hide the native number-input spinners on cart/quantity fields so the
 * styled +/- controls own the interaction. */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.no-spinner {
  -moz-appearance: textfield;
}

/* Disable CSS transitions/animations in the test environment so Capybara
 * does not race the animation start. Toggled by a `data-test-mode` body
 * attribute set by the application layout when Rails.env.test? is true. */
[data-test-mode] *,
[data-test-mode] *::before,
[data-test-mode] *::after {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
}

/* Chat widget: the only fixed element pinned to the right edge with safe-area
 * awareness; cannot use Tailwind's `right-2` because we need `max(...)`. */
.chat-widget-anchor {
  left: auto;
  right: max(0.5rem, env(safe-area-inset-right));
}

.chat-widget-menu {
  list-style: none;
  z-index: 10001;
}

.chat-widget-panel {
  position: fixed;
  z-index: 10000;
  border-radius: 24px;
  clip-path: inset(0 round 24px);
}

/* ---------------------------------------------------------------------------
 * Chat widget — toggle, panel, responsive sizing.
 * ------------------------------------------------------------------------- */
details.chat-widget-toggle[open] .chat-open-icon {
  display: none;
}

details.chat-widget-toggle[open] .chat-close-icon {
  display: block;
}

.chat-panel-surface {
  border-color: rgb(209 213 219 / 0.9);
  box-shadow:
    0 26px 50px -12px rgb(15 23 42 / 0.32),
    0 10px 22px -10px rgb(15 23 42 / 0.24),
    0 0 0 1px rgb(255 255 255 / 0.55);
}

/* Mobile (< 1024px): position toggle button above the bottom nav */
@media (max-width: 1023px) {
  .chat-widget-container {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 4.5rem) !important;
  }
}

/* Desktop (>= 1024px): standard bottom positioning */
@media (min-width: 1024px) {
  .chat-widget-container {
    bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
  }
}

/* Desktop: chat panel sizing (>= 640px) */
@media (min-width: 640px) {
  #chat-panel {
    right: max(0.5rem, env(safe-area-inset-right));
    bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.5rem);
    width: 460px;
    max-width: calc(100vw - 1rem);
    height: min(75vh, calc(100vh - 7rem));
    max-height: 760px;
  }
}

/* Mobile: chat panel as bottom sheet above the bottom nav */
@media (max-width: 639px) {
  #chat-panel {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 7rem);
    max-height: none;
    border-radius: 16px 16px 0 0 !important;
    clip-path: inset(0 round 16px 16px 0 0) !important;
  }
}