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

@layer base {
  body {
    font-family: 'Inter', sans-serif;
    @apply bg-gray-50 text-gray-900;
  }

  *, ::before, ::after {
    box-sizing: border-box;
  }

  html, body {
    margin: 0;
    line-height: 1.5;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
  p, figure, blockquote, dl, dd, pre { margin: 0; }
  ul, ol, menu { list-style: none; margin: 0; padding: 0; }
  a { color: inherit; text-decoration: inherit; }

  button, optgroup {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0; 
    line-height: inherit;
    color: inherit;
  }

  input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    line-height: inherit;
    color: inherit;
  }

  button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
    border: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }

  .border, .border-0, .border-2, .border-4, .border-8,
  .border-t, .border-b, .border-l, .border-r,
  .border-x, .border-y {
    border-style: solid;
    border-color: #e5e7eb;
  }

  .v-application .v-field__input {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@layer components {
  .btn-primary {
    @apply bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-secondary {
    @apply bg-white text-gray-700 px-4 py-2 rounded-lg font-medium border border-gray-300 hover:bg-gray-50 transition-colors;
  }
  .btn-danger {
    @apply bg-red-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-red-700 transition-colors;
  }
  .btn-success {
    @apply bg-emerald-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-emerald-700 transition-colors;
  }
  .input-field {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-shadow;
  }
  .label-field {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200;
  }
  .tw-badge-success {
    @apply items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800;
  }
  .tw-badge-error {
    @apply items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800;
  }
  .tw-badge-draft {
    @apply items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700;
  }
  .tw-badge-warning {
    @apply items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800;
  }
  .badge-active {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800;
  }
  .badge-inactive {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600;
  }
}