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

@layer components {
  .body-color {
    @apply bg-gray-100 dark:bg-black text-gray-800 dark:text-gray-300;
  }

  .bg-base {
    @apply bg-white dark:bg-gray-900;
  }

  .main-container {
    @apply container mx-auto max-w-screen-md flex;
  }

  .content {
    @apply m-4;
  }

  .border-base {
    @apply border-gray-200 dark:border-gray-700;
  }

  .text-base {
    @apply text-gray-700 dark:text-gray-300;
  }

  /*----------------------------------------*
   * Nav
   *----------------------------------------*/
  .nav-container {
    @apply py-3 border-b border-base text-base space-y-2 bg-base;
  }

  .nav-title {
    @apply justify-between items-center mx-auto max-w-screen-md px-4;
  }

  .nav-controls {
    @apply justify-between items-center mx-auto max-w-screen-md px-4;
  }

  .nav-title-link {
    @apply font-bold leading-8 text-base line-clamp-1 text-black dark:text-white;
  }

  .nav-container .btn-base {
    @apply border-none;
  }


  /*----------------------------------------*
   * Buttons
   *----------------------------------------*/
  .btn {
    @apply py-2 px-3 rounded-md text-sm cursor-pointer
           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 {
    @apply btn border bg-gray-100 dark:bg-gray-800
           dark:hover:bg-gray-700 hover:bg-gray-200 hover:shadow transition
           border-base;
  }

  .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-gray-100 text-red-600 border-red-600 hover:bg-red-600 hover:text-white
           dark:bg-gray-800 dark:text-red-500 dark:border-red-500 dark:hover:bg-red-600 dark:hover:text-white
           focus-visible:ring-red-600;
  }

  /*----------------------------------------*
   * Input Fields
   *----------------------------------------*/
  .base-input {
    @apply rounded-md px-2 py-2 shadow-sm border text-base md:text-sm
           border-base
           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
   *----------------------------------------*/
  .tab-container {
    @apply inline-flex items-center gap-2 bg-gray-100 dark:bg-gray-800 p-1 rounded-lg;
  }

  .tab {
    @apply inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md
           text-gray-600 dark:text-gray-400
           hover:text-gray-900 dark:hover:text-gray-100
           hover:bg-gray-50 dark:hover:bg-gray-700;
  }

  .tab-active {
    @apply inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md
           bg-white dark:bg-gray-900 shadow-sm;
  }


  /*----------------------------------------*
   * 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-base shadow-sm rounded-lg;
  }

  .resource-body {
    @apply p-4;
  }

  .resource-header {
    @apply p-4 flex justify-between items-center border-b border-base;
  }

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

  .resource-subtitle {
    @apply text-base font-semibold text-gray-900 dark:text-gray-100;
  }

  .resource-description {
    @apply mt-1 max-w-2xl text-sm text-muted;
  }

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

  .resource-list > * {
    @apply block p-4 text-sm hover:bg-neutral-50 dark:hover:bg-gray-800 transition-colors duration-200;
  }

  .resource-empty-state {
    @apply text-center px-4 py-6;
  }

  .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-muted;
  }

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

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

  /*----------------------------------------*
   * Project Tasks
   *----------------------------------------*/
  .resource-body .task {
    @apply px-4;
  }

  .resource-list .task {
    @apply px-4 py-2 text-sm
           hover:bg-neutral-50 dark:hover:bg-gray-800;
  }

  .task-done {
    @apply text-gray-700 dark:text-gray-400
           line-through dark:decoration-gray-400 decoration-gray-600;
  }

  .task-todo {
    @apply text-black dark:text-gray-100;
  }

  /*----------------------------------------*
   * Project Lists
   *----------------------------------------*/
  .status-dot-overdue {
    @apply inline-block h-2 w-2 rounded-full bg-red-500;
  }

  /*----------------------------------------*
   * Misc
   *----------------------------------------*/
  .text-muted {
    @apply text-gray-500 dark:text-gray-400;
  }

  .text-primary {
    @apply text-base font-medium;
  }

  .text-secondary {
    @apply text-sm text-muted;
  }

  .list-text-primary {
    @apply text-sm font-medium;
  }

  .task-name {
    @apply list-text-primary text-gray-900 dark:text-gray-100 line-clamp-2;
  }

  .list-text-secondary {
    @apply text-xs text-muted;
  }

  /*----------------------------------------*
   * CSS Helper Classes (non-theme)
   *----------------------------------------*/

  /* Avatar Styles */
  .avatar-bg {
    @apply bg-gray-200 dark:bg-gray-800 rounded-full;
  }

  /* Link Styles */
  .link-primary {
    @apply text-violet-900 dark:text-violet-100 hover:text-violet-700 hover:dark:text-violet-300;
  }

  /* Checkbox Styles */
  .checkbox-round {
    @apply focus-visible:ring-violet-500 text-violet-700 dark:text-violet-300
           bg-gray-100 border-gray-300 dark:border-gray-600 rounded-xl
           focus-visible:ring-2 dark:bg-gray-700;
  }

  .comment-body {
    @apply text-sm text-gray-900 dark:text-gray-200 break-words;
  }

  .comment-body a {
    @apply underline text-violet-700;
  }
}
/*
 * 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.
 *


 */