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

/* GemFlow — Simple, warm, readable, sharp */

@layer base {
  html {
    font-size: 17px;
    overflow-x: hidden;
  }

  body {
    @apply bg-white text-gray-800 antialiased;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  button,
  .btn,
  input[type="submit"],
  a.btn {
    @apply min-h-[44px];
  }
}

@layer components {

  /* Buttons — Sharp corners, primary is emerald */
  .btn {
    @apply inline-flex items-center justify-center px-5 py-2.5 text-base font-semibold rounded-none transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-500;
  }

  .btn-secondary {
    @apply bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-400;
  }

  .btn-success {
    @apply bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-500;
  }

  .btn-danger {
    @apply bg-red-500 text-white hover:bg-red-600 focus:ring-red-400;
  }

  /* Item selection buttons — Sharp */
  .btn-kiosk {
    @apply flex flex-col items-center justify-center p-4 w-full bg-white border-2 border-gray-200 rounded-none hover:border-emerald-500 hover:bg-emerald-50 focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 transition-all duration-150 cursor-pointer;
  }

  .btn-kiosk.selected {
    @apply border-emerald-500 bg-emerald-50;
  }

  /* Cards — Sharp corners */
  .card {
    @apply bg-white rounded-none border border-gray-200;
  }

  .card-header {
    @apply px-3 py-3 sm:px-6 sm:py-4 border-b border-gray-100 bg-gray-50/50;
  }

  .card-body {
    @apply p-3 sm:p-6;
  }

  /* Form inputs — Sharp corners */
  .form-input {
    @apply w-full px-4 py-3 text-base border-2 border-gray-200 rounded-none focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 placeholder-gray-400 transition-all duration-150;
  }

  .form-label {
    @apply block text-sm font-semibold text-gray-700 mb-2;
  }

  .form-select {
    @apply w-full px-4 py-3 text-base border-2 border-gray-200 rounded-none focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 bg-white cursor-pointer transition-all duration-150;
  }

  /* Navigation */
  .nav-link {
    @apply flex items-center gap-2 px-4 py-2.5 text-base text-gray-600 rounded-none hover:bg-gray-100 hover:text-gray-900 transition-colors duration-150;
  }

  .nav-link.active {
    @apply bg-emerald-50 text-emerald-700 font-medium;
  }

  /* Stats */
  .stat-card {
    @apply bg-white rounded-none p-6 border border-gray-200;
  }

  .stat-value {
    @apply text-3xl font-bold text-gray-900 tabular-nums;
  }

  .stat-label {
    @apply text-sm font-medium text-gray-500 uppercase tracking-wide;
  }

  /* Badges — Sharp */
  .badge {
    @apply inline-flex items-center px-2.5 py-1 text-sm font-medium rounded-none;
  }

  .badge-success {
    @apply bg-emerald-100 text-emerald-700;
  }

  .badge-warning {
    @apply bg-amber-100 text-amber-700;
  }

  .badge-danger {
    @apply bg-red-100 text-red-700;
  }

  .badge-info {
    @apply bg-blue-100 text-blue-700;
  }

  /* Table */
  .table {
    @apply w-full text-left;
  }

  .table th {
    @apply px-5 py-4 text-sm font-semibold text-gray-600 uppercase tracking-wide bg-gray-50 border-b border-gray-200;
  }

  .table td {
    @apply px-5 py-4 border-b border-gray-100;
  }

  .table tbody tr:hover {
    @apply bg-gray-50;
  }

  /* Alerts — Sharp */
  .alert {
    @apply p-4 rounded-none text-base font-medium;
  }

  .alert-success {
    @apply bg-emerald-50 text-emerald-800 border border-emerald-200;
  }

  .alert-error {
    @apply bg-red-50 text-red-800 border border-red-200;
  }

  .alert-warning {
    @apply bg-amber-50 text-amber-800 border border-amber-200;
  }

  .alert-info {
    @apply bg-blue-50 text-blue-800 border border-blue-200;
  }

  /* Links — Old school blue */
  .link {
    @apply text-blue-600 hover:text-blue-800 underline;
  }
}

@layer utilities {
  .text-price {
    @apply font-mono text-xl font-bold text-gray-900 tabular-nums;
  }

}