@tailwind base;
@tailwind components;
@tailwind utilities;

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

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

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

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

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

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

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

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

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

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

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

.pos-qty-flash {
  animation: posQtyFlash 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;
}
/*
 * 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;
}