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

@layer base {
  body {
    @apply bg-gradient-to-br from-pink-100 via-purple-50 to-blue-100 min-h-screen;
    @apply dark:bg-gradient-to-br dark:from-gray-900 dark:via-gray-800 dark:to-gray-900;
  }
  
  .text-2xs {
    font-size: 0.65rem;
    line-height: 0.9rem;
  }
}

@layer utilities {
  .overflow-wrap-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .animate-fadeIn {
    animation: fadeIn 0.15s ease-out forwards;
  }
  
  /* Inline Edit Styles */
  [data-controller="inline-edit"] [data-inline-edit-target="content"] {
    position: relative;
    transition: all 0.2s ease;
  }
  
  [data-controller="inline-edit"] [data-inline-edit-target="content"]:hover {
    background-color: rgba(219, 234, 254, 0.3);
    border-radius: 0.25rem;
  }
  
  .dark [data-controller="inline-edit"] [data-inline-edit-target="content"]:hover {
    background-color: rgba(75, 85, 99, 0.3);
  }
  
  [data-controller="inline-edit"] [data-inline-edit-target="content"]::before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #93c5fd;
    transition: width 0.3s ease;
  }
  
  .dark [data-controller="inline-edit"] [data-inline-edit-target="content"]::before {
    background-color: #6b7280;
  }
  
  [data-controller="inline-edit"] [data-inline-edit-target="content"]:hover::before {
    width: 100%;
  }
  
  /* Make textarea fill available space */
  [data-controller="inline-edit"] [data-inline-edit-target="form"] {
    width: 100%;
  }
  
  [data-controller="inline-edit"] [data-inline-edit-target="input"] {
    min-width: 100%;
    width: 100%;
    overflow-y: hidden;
  }
  
  /* Highlight animation for edited items */
  @keyframes highlightEdit {
    0% { background-color: rgba(219, 234, 254, 0); }
    30% { background-color: rgba(219, 234, 254, 0.5); }
    100% { background-color: rgba(219, 234, 254, 0); }
  }
  
  @media (prefers-color-scheme: dark) {
    @keyframes highlightEdit {
      0% { background-color: rgba(75, 85, 99, 0); }
      30% { background-color: rgba(75, 85, 99, 0.5); }
      100% { background-color: rgba(75, 85, 99, 0); }
    }
  }
  
  .highlight-edit {
    animation: highlightEdit 1.5s ease-out;
  }
  
  /* Filtering styles */
  .filtering-active .drag-handle {
    opacity: 0 !important;
    cursor: default !important;
    display: none !important;
  }
  
  .filtering-active [id^="item_"] {
    transition: all 0.3s ease-in-out;
  }
  
  /* Ensure checkboxes always remain visible during filtering */
  .filtering-active [type="checkbox"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }
  
  .filter-match {
    position: relative;
  }
  
  .filter-match::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: rgb(59, 130, 246);
    border-radius: 3px;
  }
  
  /* Sortable styles */
  .sortable-ghost {
    opacity: 0.4;
    background-color: rgba(219, 234, 254, 0.5) !important;
  }
  
  .dark .sortable-ghost {
    background-color: rgba(75, 85, 99, 0.5) !important;
  }
  
  .sortable-chosen {
    background-color: rgba(219, 234, 254, 0.8) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .dark .sortable-chosen {
    background-color: rgba(75, 85, 99, 0.8) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  }
  
  .sortable-drag {
    opacity: 0.9;
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  .dark .sortable-drag {
    background-color: #374151;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
  }
  
  .sorting-active .drag-handle {
    visibility: visible !important;
    opacity: 1 !important;
    color: #4F46E5 !important;
  }
  
  /* Mobile menu styles now handled directly in HTML with fixed positioning */
}

@layer components {
  /* Compact page header style */
  .page-title {
    @apply text-lg md:text-xl font-bold mb-2 md:mb-3 bg-gradient-to-r bg-clip-text text-transparent;
  }
  
  .page-title-primary {
    @apply from-blue-500 to-purple-500;
  }
  
  .page-title-secondary {
    @apply from-purple-500 to-pink-500;
  }
  
  .page-title-accent {
    @apply from-orange-500 to-red-500;
  }
  
  .page-container {
    @apply max-w-2xl mx-auto p-2 md:p-4;
  }
  
  .page-container-fluid {
    @apply mx-auto p-2 md:p-4 w-full max-w-4xl lg:max-w-5xl xl:max-w-6xl;
  }
  
  .nav-btn {
    @apply py-2 px-3 md:px-4 flex items-center justify-center h-10 rounded-lg shadow-sm transition-all font-medium text-sm;
  }
  
  .btn-primary {
    @apply nav-btn bg-gradient-to-r from-blue-400 to-blue-500 text-white hover:from-blue-500 hover:to-blue-600 focus:ring-2 focus:ring-blue-300 focus:outline-none;
  }
  
  .btn-secondary {
    @apply nav-btn bg-gradient-to-r from-purple-400 to-pink-400 text-white hover:from-purple-500 hover:to-pink-500 focus:ring-2 focus:ring-pink-300 focus:outline-none;
  }
  
  .form-input {
    @apply mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-400 focus:ring focus:ring-blue-200 focus:ring-opacity-50 transition-all;
    @apply dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:focus:border-blue-400 dark:focus:ring-blue-400;
  }
  
  .card {
    @apply bg-white bg-opacity-80 backdrop-blur-sm rounded-lg shadow-lg p-2 md:p-6 border border-gray-100;
    @apply dark:bg-gray-800 dark:bg-opacity-80 dark:border-gray-700 dark:text-white;
  }
  
  .nav-pill {
    @apply nav-btn bg-white bg-opacity-80 text-gray-700 hover:shadow-md;
    @apply dark:bg-gray-800 dark:bg-opacity-80 dark:text-gray-100 dark:hover:text-white;
  }
  
  .nav-pill-active {
    @apply bg-gradient-to-r from-blue-100 to-purple-100 shadow-md;
    @apply dark:from-blue-900 dark:to-purple-900 dark:text-white;
  }
  
  .nav-link {
    @apply py-1.5 px-2 flex items-center text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors;
    @apply dark:text-gray-300 dark:hover:text-gray-200;
  }
  
  .nav-link-active {
    @apply text-blue-600 font-semibold;
    @apply dark:text-blue-400;
  }
  
  .flash {
    @apply px-3 md:px-5 py-3 md:py-4 rounded-lg shadow-sm relative mt-3 md:mt-6 mb-3 md:mb-6 mx-2 md:mx-4 backdrop-blur-sm bg-opacity-70 border flex items-center;
    @apply dark:bg-opacity-80;
  }
  
  .flash-notice {
    @apply flash bg-pastel-green border-green-200 text-green-800;
    @apply dark:bg-green-900 dark:border-green-700 dark:text-green-100;
  }
  
  .flash-alert {
    @apply flash bg-pastel-pink border-pink-200 text-pink-800;
    @apply dark:bg-red-900 dark:border-red-700 dark:text-red-100;
  }
  
  .flash-warning {
    @apply flash bg-pastel-yellow border-yellow-200 text-yellow-800;
    @apply dark:bg-yellow-900 dark:border-yellow-700 dark:text-yellow-100;
  }
  
  .tooltip {
    @apply relative;
    /* group class should be applied directly in HTML */
  }
  
  .tooltip-text {
    @apply absolute z-50 invisible opacity-0 bg-gray-800 text-white text-xs rounded p-2 shadow-lg whitespace-nowrap;
    @apply bottom-full left-1/2 -translate-x-1/2 mb-2;
    @apply transition-opacity duration-300;
    @apply dark:bg-gray-600 dark:text-gray-100;
    /* group-hover classes should be applied directly in HTML */
  }
  
  /* Show tooltip on hover */
  .tooltip:hover .tooltip-text {
    @apply visible opacity-100;
  }
  
  .tooltip-text::after {
    @apply absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-800;
    @apply dark:border-t-gray-600;
    content: "";
  }
}
/*
 * 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.
 *


 */