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

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

  .content {
    @apply bg-base p-4;
    @apply md:shadow-sm md:rounded-lg md:border md:border-base md:m-4;
  }

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

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

  /*----------------------------------------*
   * 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 {
    @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
   *----------------------------------------*/
  .btn-tab {
    @apply rounded-md border border-transparent
           py-2 px-4 text-sm font-medium
           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 {
  }

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

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

  .resource-title {
    @apply text-lg font-semibold leading-6 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 li {
    @apply p-4 hover:bg-gray-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
   *----------------------------------------*/
  .tasks-list {
    @apply bg-base divide-y rounded-lg divide-gray-200 dark:divide-gray-700;
  }

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

  .resource-body .task {
    @apply px-4;
  }

  .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
   *----------------------------------------*/
  .projects-list {
    @apply bg-base divide-y rounded-lg divide-gray-200 dark:divide-gray-700;
  }

  .project-row {
    @apply px-4 py-3 flex items-start justify-between gap-4 text-sm
           hover:bg-neutral-50 dark:hover:bg-gray-800 transition;
  }

  .comment-row {
    @apply px-4 py-3 flex items-start gap-4 text-sm;
  }

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

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

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

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

  /* Body Color */
  .body-color {
    @apply bg-neutral-100 dark:bg-gray-950 text-gray-800 dark:text-gray-300;
  }

  /* Subnav */
  .subnav-css {
    @apply py-3 border-b border-base text-base bg-base;
  }

  .title-subnav {
    @apply pt-1 pb-3 border-b border-base text-base bg-base;
  }

  /* Task Details Styles */
  .task-details-done {
    @apply bg-gray-300 dark:bg-gray-700 text-base;
  }

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

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

  .avatar-nav {
    @apply rounded-full bg-white dark:bg-black;
  }

  /* 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.
 *


 */