/* 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);
  }

  .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;
    width: 2.5rem;
    height: 2.5rem;
    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;
    width: 2rem;
    height: 2rem;
  }
}

.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: block;
  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;
}

.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);
}

@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;
  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);
}

.admin-bulk-bar {
  position: sticky;
  bottom: 0;
  margin-top: 2rem;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 0.75rem 0.75rem 0 0;
  padding: 1rem 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;
}

.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;
}

.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;
  padding: 0.125rem;
  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;
}

.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;
  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;
}
@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; }
/*
 * 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;
}