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

@layer components {
  /* ─── Buttons ─── */
  .btn-primary {
    @apply px-4 py-2.5 bg-primary-600 text-white rounded-lg font-medium
           hover:bg-primary-700 active:bg-primary-800
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
           transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-secondary {
    @apply px-4 py-2.5 bg-white text-gray-700 rounded-lg font-medium border border-gray-300
           hover:bg-gray-50 active:bg-gray-100
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
           transition-all duration-200;
  }
  .btn-danger {
    @apply px-4 py-2.5 bg-red-600 text-white rounded-lg font-medium
           hover:bg-red-700 active:bg-red-800
           focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2
           transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-warning {
    @apply px-4 py-2.5 bg-amber-500 text-white rounded-lg font-medium
           hover:bg-amber-600 active:bg-amber-700
           focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2
           transition-all duration-200;
  }

  /* ─── Action Buttons (Icon buttons in tables) ─── */
  .btn-action {
    @apply inline-flex items-center justify-center p-2 rounded-lg
           text-gray-500 bg-white border border-gray-200
           hover:bg-gray-50 hover:border-gray-300
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1
           transition-all duration-200 cursor-pointer;
  }
  .btn-action-edit {
    @apply btn-action text-amber-600 hover:bg-amber-50 hover:border-amber-200
           focus:ring-amber-500;
  }
  .btn-action-delete {
    @apply btn-action text-red-600 hover:bg-red-50 hover:border-red-200
           focus:ring-red-500;
  }
  .btn-action-return {
    @apply btn-action text-green-600 hover:bg-green-50 hover:border-green-200
           focus:ring-green-500;
  }
  .btn-action-view {
    @apply btn-action text-blue-600 hover:bg-blue-50 hover:border-blue-200
           focus:ring-blue-500;
  }

  /* ─── Form Inputs ─── */
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1.5;
  }

  .form-input {
    @apply w-full px-4 py-2.5 bg-white border border-gray-300 rounded-lg text-gray-900
           placeholder-gray-400 text-sm
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500
           hover:border-gray-400
           transition-all duration-200;
  }

  .form-textarea {
    @apply form-input resize-none;
  }

  .form-select {
    @apply w-full px-4 py-2.5 bg-white border border-gray-300 rounded-lg text-gray-900 text-sm
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500
           hover:border-gray-400 cursor-pointer
           transition-all duration-200 appearance-none;
    /* Custom dropdown arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
  }

  /* ─── Legacy support ─── */
  .input-field {
    @apply form-input;
  }

  /* ─── Cards ─── */
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden
           hover:shadow-md transition-shadow duration-200;
  }
  .stat-card {
    @apply bg-white rounded-xl p-6 shadow-sm border border-gray-100
           hover:shadow-lg hover:border-primary-200
           transition-all duration-300 cursor-pointer;
  }

  /* ─── Form Group ─── */
  .form-group {
    @apply flex flex-col;
  }

  /* ─── Input error state ─── */
  .form-input.error {
    @apply border-red-400 focus:ring-red-500 focus:border-red-500;
  }
  .form-input.valid {
    @apply border-green-400 focus:ring-green-500 focus:border-green-500;
  }
}

/* ─── Custom scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ─── Date input picker styling ─── */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
