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

@layer components {
  /* Typography */
  .text-heading-1 {
    @apply font-bold text-4xl text-gray-900;
  }

  .text-heading-2 {
    @apply font-semibold text-2xl text-gray-900;
  }

  .text-heading-3 {
    @apply font-semibold text-xl text-gray-900;
  }

  .text-body {
    @apply text-sm text-gray-700;
  }

  .text-caption {
    @apply text-xs text-gray-500;
  }

  /* Form Elements */
  .form-label {
    @apply block text-sm font-medium leading-6 text-gray-900;
  }

  .form-input {
    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6;
  }

  .form-select {
    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6;
  }

  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors duration-200;
  }

  .btn-primary {
    @apply btn bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600;
  }

  .btn-secondary {
    @apply btn bg-white text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-gray-400 focus-visible:ring-2;
  }

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

  .btn-success {
    @apply btn bg-green-600 text-white hover:bg-green-500 focus-visible:outline-green-600;
  }

  .btn-warning {
    @apply btn bg-yellow-600 text-white hover:bg-yellow-500 focus-visible:outline-yellow-600;
  }

  /* Links */
  .link {
    @apply text-blue-600 hover:text-blue-700 hover:underline transition-colors duration-200;
  }

  .link-muted {
    @apply text-gray-600 hover:text-gray-700 hover:underline transition-colors duration-200;
  }

  /* Cards */
  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200;
  }

  .card-header {
    @apply px-6 py-4 border-b border-gray-200;
  }

  .card-body {
    @apply px-6 py-4;
  }

  /* Alerts */
  .alert {
    @apply rounded-md p-4 border;
  }

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

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

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

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

  /* Navigation */
  .nav-link {
    @apply text-gray-600 hover:text-gray-900 hover:bg-gray-50 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
  }

  .nav-link-active {
    @apply bg-blue-50 text-blue-700 hover:bg-blue-100;
  }

  /* Layout */
  .container-content {
    @apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .section {
    @apply space-y-6;
  }

  .section-header {
    @apply border-b border-gray-200 pb-4;
  }

    /* Lists */
  .list-row {
    @apply flex items-center justify-between py-3 border-b border-gray-200 last:border-b-0;
  }

  .list-row-hover {
    @apply hover:bg-gray-50 transition-colors duration-200;
  }

  /* Status indicators */
  .status-success {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800;
  }

  .status-error {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800;
  }

  .status-warning {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800;
  }

  /* Legacy support - keeping existing classes for backward compatibility */
  .label {
    @apply form-label;
  }

  .input {
    @apply form-input;
  }

  .btn-link {
    @apply link;
  }
}
/*
 * 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.
 *


 */