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