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

/*  Table of Contents
 *  -----------------
 *  1. Base & Theme
 *  2. Navigation
 *  3. Buttons
 *  4. Forms & Inputs
 *  5. Tabs
 *  6. Flash Messages
 *  7. Resource Containers
 *  8. Lists & Data Display
 *  9. Tasks
 *  10. Typography & Text
 *  11. Utilities
 */

html.compact { zoom: 0.95; }

@layer components {

  /*----------------------------------------*
   * 1. Base & Theme
   *----------------------------------------*/
  .body-color {
    @apply bg-gray-100 dark:bg-slate-950 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;
  }

  #new-tasks-section:not(:has(.task)) {
    display: none;
  }

  .content {
    @apply m-4;
  }

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

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

  .turbo-progress-bar {
    background: #312e81 !important;
  }

  /*----------------------------------------*
   * 1b. Sidebar
   *----------------------------------------*/
  .page-content {
    @apply lg:pl-56;
  }

  .sidebar-link {
    @apply flex items-center gap-x-2 rounded-md p-2 text-sm font-medium transition-colors;
  }

  /*----------------------------------------*
   * 1c. Themes
   *----------------------------------------*/
  .theme-violet .theme-bg      { @apply bg-violet-200 dark:bg-slate-900; }
  .theme-violet .theme-text    { @apply text-violet-900 dark:text-violet-400; }
  .theme-violet .theme-border  { @apply border-violet-300 dark:border-slate-800; }
  .theme-violet .sidebar-link  { @apply text-violet-900 dark:text-slate-300; }
  .theme-violet .sidebar-link:hover { @apply bg-violet-950/5 dark:bg-violet-100/15; }
  .theme-violet .sidebar-link[aria-current="page"] { @apply bg-violet-950/5 dark:bg-violet-100/15 dark:text-violet-400; }
  .theme-violet .btn-primary {
    @apply text-violet-800 bg-violet-50 hover:bg-violet-100 border-violet-400
           dark:text-violet-300 dark:bg-violet-500/10 dark:hover:bg-violet-500/20 dark:border-violet-500/30;
  }
  .theme-violet .link-primary {
    @apply text-violet-900 hover:text-violet-700 dark:text-violet-100 dark:hover:text-violet-300;
  }
  .theme-violet .checkbox,
  .theme-violet .radio         { @apply text-violet-600 focus-visible:ring-violet-600; }
  .theme-violet .checkbox-round { @apply text-violet-700 dark:text-violet-300 focus-visible:ring-violet-500; }

  .theme-pink .theme-bg        { @apply bg-pink-200 dark:bg-slate-900; }
  .theme-pink .theme-text      { @apply text-pink-900 dark:text-pink-400; }
  .theme-pink .theme-border    { @apply border-pink-300 dark:border-slate-800; }
  .theme-pink .sidebar-link    { @apply text-pink-900 dark:text-slate-300; }
  .theme-pink .sidebar-link:hover { @apply bg-pink-950/5 dark:bg-pink-100/15; }
  .theme-pink .sidebar-link[aria-current="page"] { @apply bg-pink-950/5 dark:bg-pink-100/15 dark:text-pink-400; }
  .theme-pink .btn-primary {
    @apply text-pink-800 bg-pink-50 hover:bg-pink-100 border-pink-400
           dark:text-pink-300 dark:bg-pink-500/10 dark:hover:bg-pink-500/20 dark:border-pink-500/30;
  }
  .theme-pink .link-primary {
    @apply text-pink-900 hover:text-pink-700 dark:text-pink-100 dark:hover:text-pink-300;
  }
  .theme-pink .checkbox,
  .theme-pink .radio           { @apply text-pink-600 focus-visible:ring-pink-600; }
  .theme-pink .checkbox-round  { @apply text-pink-700 dark:text-pink-300 focus-visible:ring-pink-500; }

  .theme-orange .theme-bg      { @apply bg-orange-200 dark:bg-slate-900; }
  .theme-orange .theme-text    { @apply text-orange-900 dark:text-orange-400; }
  .theme-orange .theme-border  { @apply border-orange-300 dark:border-slate-800; }
  .theme-orange .sidebar-link  { @apply text-orange-900 dark:text-slate-300; }
  .theme-orange .sidebar-link:hover { @apply bg-orange-950/5 dark:bg-orange-100/15; }
  .theme-orange .sidebar-link[aria-current="page"] { @apply bg-orange-950/5 dark:bg-orange-100/15 dark:text-orange-400; }
  .theme-orange .btn-primary {
    @apply text-orange-800 bg-orange-50 hover:bg-orange-100 border-orange-400
           dark:text-orange-300 dark:bg-orange-500/10 dark:hover:bg-orange-500/20 dark:border-orange-500/30;
  }
  .theme-orange .link-primary {
    @apply text-orange-900 hover:text-orange-700 dark:text-orange-100 dark:hover:text-orange-300;
  }
  .theme-orange .checkbox,
  .theme-orange .radio         { @apply text-orange-600 focus-visible:ring-orange-600; }
  .theme-orange .checkbox-round { @apply text-orange-700 dark:text-orange-300 focus-visible:ring-orange-500; }

  .theme-indigo .theme-bg      { @apply bg-indigo-200 dark:bg-slate-900; }
  .theme-indigo .theme-text    { @apply text-indigo-900 dark:text-indigo-400; }
  .theme-indigo .theme-border  { @apply border-indigo-300 dark:border-slate-800; }
  .theme-indigo .sidebar-link  { @apply text-indigo-900 dark:text-slate-300; }
  .theme-indigo .sidebar-link:hover { @apply bg-indigo-950/5 dark:bg-indigo-100/15; }
  .theme-indigo .sidebar-link[aria-current="page"] { @apply bg-indigo-950/5 dark:bg-indigo-100/15 dark:text-indigo-400; }
  .theme-indigo .btn-primary {
    @apply text-indigo-800 bg-indigo-50 hover:bg-indigo-100 border-indigo-400
           dark:text-indigo-300 dark:bg-indigo-500/10 dark:hover:bg-indigo-500/20 dark:border-indigo-500/30;
  }
  .theme-indigo .link-primary {
    @apply text-indigo-900 hover:text-indigo-700 dark:text-indigo-100 dark:hover:text-indigo-300;
  }
  .theme-indigo .checkbox,
  .theme-indigo .radio         { @apply text-indigo-600 focus-visible:ring-indigo-600; }
  .theme-indigo .checkbox-round { @apply text-indigo-700 dark:text-indigo-300 focus-visible:ring-indigo-500; }

  .theme-gray .theme-bg        { @apply bg-gray-200 dark:bg-slate-900; }
  .theme-gray .theme-text      { @apply text-gray-900 dark:text-gray-400; }
  .theme-gray .theme-border    { @apply border-gray-300 dark:border-slate-800; }
  .theme-gray .sidebar-link    { @apply text-gray-900 dark:text-slate-300; }
  .theme-gray .sidebar-link:hover { @apply bg-gray-950/5 dark:bg-gray-100/15; }
  .theme-gray .sidebar-link[aria-current="page"] { @apply bg-gray-950/5 dark:bg-gray-100/15 dark:text-gray-300; }
  .theme-gray .btn-primary {
    @apply text-gray-800 bg-gray-50 hover:bg-gray-100 border-gray-400
           dark:text-gray-300 dark:bg-gray-500/10 dark:hover:bg-gray-500/20 dark:border-gray-500/30;
  }
  .theme-gray .link-primary {
    @apply text-gray-900 hover:text-gray-700 dark:text-gray-100 dark:hover:text-gray-300;
  }
  .theme-gray .checkbox,
  .theme-gray .radio           { @apply text-gray-600 focus-visible:ring-gray-600; }
  .theme-gray .checkbox-round  { @apply text-gray-700 dark:text-gray-300 focus-visible:ring-gray-500; }

  /*----------------------------------------*
   * 2. Navigation
   *----------------------------------------*/
  .nav-container {
    @apply py-4 border-b border-base text-default 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 border-gray-200 dark:border-gray-700 -my-1;
  }

  /*----------------------------------------*
   * 3. Buttons
   *----------------------------------------*/
  .btn {
    @apply py-2 px-3 rounded-md text-sm cursor-pointer font-medium
           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;
  }

  .icon-btn {
    @apply inline-flex items-center p-1.5;
  }

  .btn-base {
    @apply btn border bg-gray-100 dark:bg-gray-800
           hover:text-gray-900 dark:hover:text-gray-100
           hover:bg-gray-200 dark:hover:bg-gray-700 transition
           text-gray-600 dark:text-gray-300
           border-base;
  }

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

  .btn-primary {
    @apply btn border;
  }

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

  .btn-remove {
    @apply btn border font-medium
           bg-red-50 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;
  }

  /*----------------------------------------*
   * 4. Forms & Inputs
   *----------------------------------------*/
  .form-label {
    @apply block text-sm font-medium text-gray-900 dark:text-gray-200 mb-2;
  }

  .form-section {
    @apply divide-y divide-gray-200 dark:divide-gray-700 space-y-0;
  }

  .form-group {
    @apply p-4;
  }

  .form-group-header {
    @apply mb-4;
  }

  .form-hint {
    @apply text-sm text-muted;
  }

  .error-box {
    @apply p-4 mb-4 bg-red-50 border border-red-200 rounded-md dark:bg-red-900/20 dark:border-red-800;
  }

  .base-input {
    @apply rounded-md px-2 py-2 border border-gray-200 dark:border-gray-700 text-sm
           focus-visible:ring-violet-500 outline-none focus-visible:ring-2
           bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100
           placeholder-gray-600 dark:placeholder-gray-300 dark:focus:bg-gray-950;
  }

  .checkbox {
    @apply bg-gray-100 border-gray-300 rounded
           focus-visible:ring-2 dark:bg-gray-700 dark:border-gray-600;
  }

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

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

  /*----------------------------------------*
   * 5. Tabs
   *----------------------------------------*/
  .tab-container {
    @apply inline-flex items-center gap-2 bg-gray-100 dark:bg-gray-800 p-1 rounded-lg
           border border-gray-200 dark:border-gray-700;
  }

  .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-700 shadow-sm text-gray-900 dark:text-gray-100;
  }

  /*----------------------------------------*
   * 6. Flash Messages
   *----------------------------------------*/
   .flash-notice {
     @apply bg-emerald-50 border rounded-md border-emerald-300 text-emerald-900 dark:bg-emerald-950 dark:border-emerald-800 dark:text-emerald-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;
   }

  /*----------------------------------------*
   * 7. Resource Containers
   *----------------------------------------*/
  .resource-container {
    @apply bg-base shadow-sm rounded-lg;
  }

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

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

  .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 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
           first:rounded-t-lg last:rounded-b-lg;
  }

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

  .version-card {
    @apply border border-gray-200 dark:border-gray-700 rounded-lg;
  }

  .version-card-header {
    @apply px-4 py-2 border-b border-gray-200 dark:border-gray-700
           bg-gray-50 dark:bg-gray-800 rounded-t-lg;
  }

  .version-card-title {
    @apply font-medium text-gray-900 dark:text-gray-200 text-sm;
  }

  .version-card-meta {
    @apply text-xs text-gray-500 dark:text-gray-400;
  }

  .version-card-body {
    @apply p-4;
  }

  /*----------------------------------------*
   * 8. Lists & Data Display
   *----------------------------------------*/
  .data-row {
    @apply flex justify-between items-center p-4;
  }

  .data-label {
    @apply text-sm font-medium text-gray-900 dark:text-gray-200;
  }

  .list-row {
    @apply flex items-center justify-between;
  }

  .list-item-content {
    @apply ml-4 min-w-0 flex-1;
  }

  .list-item-actions {
    @apply flex-shrink-0 flex items-center space-x-2;
  }

  /*----------------------------------------*
   * 9. 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;
  }

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

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

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

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

  .user-content a {
    @apply underline font-semibold;
  }

  .user-content h1 {
    @apply text-lg font-bold mt-4 mb-2;
  }

  .user-content h2 {
    @apply text-base font-bold mt-4 mb-2;
  }

  .user-content h3 {
    @apply text-sm font-bold mt-3 mb-1;
  }

  .user-content p {
    @apply mb-2;
  }

  .user-content p:last-child {
    @apply mb-0;
  }

  .user-content ul {
    @apply list-disc ml-4 mb-2;
  }

  .user-content ol {
    @apply list-decimal ml-4 mb-2;
  }

  .user-content code {
    @apply px-1 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-xs;
  }

  .user-content pre {
    @apply p-3 bg-gray-100 dark:bg-gray-800 rounded mb-2 overflow-x-auto;
  }

  .user-content pre code {
    @apply p-0 bg-transparent;
  }

  .user-content blockquote {
    @apply border-l-4 border-gray-300 dark:border-gray-600 pl-3 italic mb-2;
  }

  .user-content table {
    @apply w-full mb-2 border-collapse;
  }

  .user-content th {
    @apply text-left font-semibold p-2 border-b-2 border-gray-300 dark:border-gray-600;
  }

  .user-content td {
    @apply p-2 border-b border-gray-200 dark:border-gray-700;
  }

  /*----------------------------------------*
   * 10. Typography & Text
   *----------------------------------------*/
  .text-muted {
    @apply text-gray-500 dark:text-gray-400;
  }

  .text-primary {
    @apply text-default 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;
  }

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

  .comment-body a {
    @apply underline text-violet-700;
  }

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

  .link-primary {
    @apply transition-colors;
  }

  .checkbox-round {
    @apply bg-gray-100 border-gray-300 dark:border-gray-600 rounded-xl
           focus-visible:ring-2 dark:bg-gray-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.
 *


 */