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

@layer components {
  /*----------------------------------------*
   * Buttons
   *----------------------------------------*/
  .btn {
    @apply py-2 px-3 rounded-md text-sm cursor-pointer
           md:px-4
           whitespace-nowrap
           transition transform duration-200 ease-in-out
           focus:outline-none focus-visible:ring-2
           focus-visible:ring-violet-500 focus-visible:ring-offset-2;
  }

  .btn:active {
    @apply transform scale-95;
  }

  .btn-sm {
    @apply btn py-1 px-2;
  }

  .btn-base,
  .btn-gray {
    @apply btn border bg-white dark:bg-gray-800
           hover:shadow transition
           border-gray-300 dark:border-gray-700 dark:hover:bg-gray-700;
  }

  .btn-base-sm {
    @apply btn-base py-1 px-2 text-xs;
  }

  .btn-primary {
    @apply btn border text-white
           bg-violet-800 hover:bg-violet-900
           border-violet-600 dark:border-violet-700;
  }

  .btn-primary-sm {
    @apply btn-primary py-1 px-2;
  }

  .btn-remove {
    @apply btn border font-medium
           bg-white text-red-800 border-gray-400 hover:bg-red-700 hover:text-white
           dark:border-red-900 dark:bg-red-800 dark:hover:bg-red-900 dark:text-gray-200
           focus-visible:ring-red-600;
  }

  /*----------------------------------------*
   * Input Fields
   *----------------------------------------*/
  .base-input {
    @apply rounded-md px-2 py-2 shadow-sm border text-sm
           border-gray-300 dark:border-gray-600
           focus-visible:ring-violet-500 outline-none focus-visible:ring-2
           bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100
           placeholder-gray-600 dark:placeholder-gray-300 dark:focus:bg-gray-950;
  }


  /*----------------------------------------*
   * Tab Buttons
   *----------------------------------------*/
  .btn-tab {
    @apply rounded-md border border-transparent
           py-2 px-3 text-sm font-medium
           md:px-4
           focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500;
  }

  .btn-tab:hover {
    @apply text-black dark:text-gray-300;
  }


  /*----------------------------------------*
   * Section Titles
   *----------------------------------------*/
  .section-title {
    @apply font-semibold text-gray-900 mb-4 pb-4 border-b
           dark:border-gray-600 dark:text-gray-200;
  }

  /*----------------------------------------*
   * Form Controls: Checkbox, Radio
   *----------------------------------------*/
  .checkbox {
    @apply text-violet-600 bg-gray-100 border-gray-300 rounded
           focus-visible:ring-2 focus-visible:ring-violet-600 dark:bg-gray-700 dark:border-gray-600;
  }

  .radio {
    @apply text-violet-600 bg-gray-100 border-gray-300
           focus-visible:ring-2 focus-visible:ring-violet-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600;
  }

  /*----------------------------------------*
   * Turbo Progress Bar
   *----------------------------------------*/
  .turbo-progress-bar {
    background: #312e81 !important;
  }

  /*----------------------------------------*
   * File Select
   *----------------------------------------*/
  .file-select {
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2
           text-gray-700 dark:text-gray-300
           file:bg-gray-100 file:text-gray-700 file:cursor-pointer;
  }

  @media (prefers-color-scheme: dark) {
    .file-select::file-selector-button {
      @apply text-gray-300 bg-gray-800;
    }
  }

  .dark .file-select::file-selector-button {
    @apply text-gray-300 bg-gray-800;
  }

  .light .file-select::file-selector-button {
    @apply text-gray-700 bg-gray-100;
  }



  /*----------------------------------------*
   * Flash Components
   *----------------------------------------*/
   .flash-notice {
     @apply bg-violet-50 border rounded-md border-violet-300 text-violet-900 dark:bg-violet-950 dark:border-violet-800 dark:text-violet-200;
   }

   .flash-alert {
     @apply bg-red-50 border rounded-md border-red-400 text-red-700 dark:bg-red-700 dark:text-white dark:border-red-800;
   }

  /*----------------------------------------*
   * Project Resource Components
   *----------------------------------------*/
  .resource-container {
    @apply bg-white dark:bg-gray-900 shadow-sm rounded-lg overflow-hidden;
  }

  .resource-header {
    @apply p-4 flex justify-between items-center border-b border-gray-200 dark:border-gray-700;
  }

  .resource-title {
    @apply text-lg font-medium leading-6 text-gray-900 dark:text-gray-100;
  }

  .resource-description {
    @apply mt-1 max-w-2xl text-sm text-gray-500 dark:text-gray-400;
  }

  .resource-list {
    @apply divide-y divide-gray-200 dark:divide-gray-800;
    list-style: none;
  }

  .resource-list li {
    @apply p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200;
  }

  .resource-empty-state {
    @apply text-center py-12;
  }

  .resource-empty-icon {
    @apply mx-auto h-12 w-12 text-gray-400 dark:text-gray-600;
  }

  .resource-empty-title {
    @apply mt-2 text-sm font-medium text-gray-900 dark:text-gray-200;
  }

  .resource-empty-description {
    @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
  }

  .resource-empty-action {
    @apply mt-6;
  }

  .resource-action-icon {
    @apply -ml-1 mr-2 h-5 w-5;
  }

  /*----------------------------------------*
   * Project Tasks
   *----------------------------------------*/
  .tasks-list {
    @apply divide-y divide-dashed bg-white dark:bg-gray-900 rounded-lg divide-gray-200 dark:divide-gray-700;
  }

  /*----------------------------------------*
   * Misc
   *----------------------------------------*/
  .nav-border {
    @apply border-b border-gray-200 dark:border-gray-800;
  }
}
/*
 * 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.
 *


 */