/*
 * This is a manifest file that'll be compiled into application.css.
 * Inter font is loaded via app/javascript/application.css (Vite entry) — no duplicate here.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Import Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import custom components */
@import 'custom-components.css';

@layer utilities {
  /* Turbo Progress Bar Customization */
  .turbo-progress-bar {
    background: linear-gradient(to right, #3b82f6, #60a5fa);
    height: 4px;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
  }

  /* Animations */
  @keyframes shake {
    0%,
    100% {
      transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      transform: translateX(-4px);
    }

    20%,
    40%,
    60%,
    80% {
      transform: translateX(4px);
    }
  }

  .animate-shake {
    animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }
}

/* Custom styles */
@layer base {
  /* Only show focus outlines when tabbing */
  body:not(.user-is-tabbing) :focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }

  :root {
    /* Color System */
    --color-primary: 37 99 235;
    /* blue-600 */
    --color-primary-dark: 29 78 216;
    /* blue-700 */
    --color-bg-base: 255 255 255;
    --color-bg-subtle: 243 244 246;
    /* gray-100 */
    --color-text-primary: 17 24 39;
    /* gray-900 */
    --color-text-secondary: 75 85 99;
    /* gray-600 */

    /* Spacing Scale */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-12: 3rem;

    /* Typography Scale */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    --font-sans: 'Inter', system-ui, sans-serif;
  }

  [data-theme='dark'] {
    --color-bg-base: 17 24 39;
    /* gray-900 */
    --color-bg-subtle: 31 41 55;
    /* gray-800 */
    --color-text-primary: 249 250 251;
    /* gray-50 */
    --color-text-secondary: 209 213 219;
    /* gray-300 */
    --color-primary: 59 130 246;
    /* blue-500 for better dark mode visibility */
    --color-primary-dark: 37 99 235;
    /* blue-600 */
  }

  [data-high-contrast='true'] {
    --color-bg-base: 0 0 0;
    --color-bg-subtle: 17 17 17;
    --color-text-primary: 255 255 255;
    --color-text-secondary: 255 255 0;
    --color-primary: 255 255 0;
    --color-primary-dark: 255 215 0;
  }

  /* Enhanced focus states for high contrast mode */
  [data-high-contrast='true'] .focus\:ring-2:focus,
  [data-high-contrast='true'] button:focus,
  [data-high-contrast='true'] a:focus,
  [data-high-contrast='true'] input:focus,
  [data-high-contrast='true'] select:focus,
  [data-high-contrast='true'] textarea:focus {
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px !important;
  }

  /* High contrast borders */
  [data-high-contrast='true'] .border,
  [data-high-contrast='true'] .border-t,
  [data-high-contrast='true'] .border-b,
  [data-high-contrast='true'] .border-l,
  [data-high-contrast='true'] .border-r {
    border-color: #ffffff !important;
  }

  /* Dark mode coverage for common light-only utility classes */
  .dark .bg-white {
    background-color: rgb(var(--color-bg-base));
  }

  .dark .bg-gray-50,
  .dark .bg-gray-100,
  .dark .bg-gray-200 {
    background-color: rgb(var(--color-bg-subtle));
  }

  .dark .border-gray-200,
  .dark .border-gray-300 {
    border-color: rgba(255, 255, 255, 0.08);
  }

  .dark .text-gray-900,
  .dark .text-gray-800 {
    color: rgb(var(--color-text-primary));
  }

  .dark .text-gray-700,
  .dark .text-gray-600,
  .dark .text-gray-500 {
    color: rgb(var(--color-text-secondary));
  }

  .dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.12);
  }

  .dark .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.18);
  }

  .dark .placeholder-gray-400::placeholder {
    color: rgb(156 163 175);
    opacity: 1;
  }

  .dark .text-blue-700,
  .dark .text-blue-800,
  .dark .text-blue-900 {
    color: rgb(191 219 254);
  }

  .dark .border-blue-100,
  .dark .border-blue-200 {
    border-color: rgba(191, 219, 254, 0.3);
  }

  .dark .hover\:bg-gray-50:hover,
  .dark .hover\:bg-gray-100:hover {
    background-color: rgb(var(--color-bg-subtle));
  }

  .dark .hover\:bg-blue-100:hover {
    background-color: rgba(59, 130, 246, 0.22);
  }

  .dark .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.12);
  }

  .dark .bg-yellow-50 {
    background-color: rgba(234, 179, 8, 0.12);
  }

  .dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.12);
  }

  .dark .border-red-200 {
    border-color: rgba(254, 202, 202, 0.35);
  }

  /* Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  html {
    font-family: var(--font-sans);
  }

  body {
    @apply bg-[rgb(var(--color-bg-base))] text-[rgb(var(--color-text-primary))] antialiased;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700;
  }

  /* Enhanced Card Components with Dark Mode */
  .card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6;
  }

  .card-header {
    @apply border-b border-gray-200 dark:border-gray-700 pb-4 mb-4;
  }

  /* Improved Tooltip Styling */
  .tooltip {
    @apply absolute z-50 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-lg pointer-events-none transition-opacity duration-200 dark:bg-gray-700;
  }

  .tooltip::before {
    content: '';
    @apply absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700;
  }

  /* Enhanced Focus Ring for Accessibility */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-shadow duration-200;
  }

  .theme-toggle {
    @apply inline-flex items-center justify-center h-11 w-11 rounded-full text-gray-500 dark:text-gray-200 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white dark:focus:ring-offset-gray-900 transition-colors duration-200;
  }

  .theme-toggle-pill {
    @apply inline-flex items-center justify-center gap-2 px-4 min-h-[44px] rounded-full border border-gray-200 dark:border-gray-700 bg-white/90 dark:bg-gray-900/90 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white dark:focus:ring-offset-gray-900 transition-colors duration-200 backdrop-blur;
  }

  /* Smooth Progress Bars */
  [role='progressbar'],
  .progress-bar {
    @apply transition-all duration-500 ease-out;
  }

  /* Form Input Polish with Dark Mode */
  input[type='text'],
  input[type='email'],
  input[type='password'],
  textarea,
  select {
    @apply transition-shadow duration-200 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
  }

  /* Calendar Heatmap Dark Mode Fixes */
  .heatmap-day {
    @apply transition-colors duration-200 cursor-pointer hover:ring-2 hover:ring-offset-1 hover:ring-blue-300;
  }

  /* Skeleton Loading States */
  .skeleton {
    @apply animate-pulse bg-gray-200 dark:bg-gray-700 rounded;
  }

  /* Enhanced Mobile Menu */
  .mobile-menu {
    @apply fixed inset-0 z-40 bg-white dark:bg-gray-900 transform transition-transform duration-300 ease-in-out;
  }

  .mobile-menu.hidden {
    @apply translate-x-full;
  }

  /* Status Badges with Better Contrast */
  .status-badge-success {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
  }

  .status-badge-pending {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
  }

  .status-badge-error {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
  }

  /* Enhanced Form Styling */
  .form-input {
    @apply appearance-none block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent sm:text-sm bg-white dark:bg-gray-700 dark:text-white transition-all duration-200;
  }

  /* Enhanced Card with Hover Effects */
  .card-interactive {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 transition-all duration-200 hover:shadow-md hover:-translate-y-0.5;
  }

  /* Improved Typography Hierarchy */
  .heading-primary {
    @apply text-3xl font-bold text-gray-900 dark:text-white;
  }

  .heading-secondary {
    @apply text-xl font-semibold text-gray-900 dark:text-white;
  }

  .text-body {
    @apply text-gray-600 dark:text-gray-300;
  }

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

  /* Enhanced Focus States */
  .focus-visible {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
  }

  /* Gradient Backgrounds */
  .bg-gradient-primary {
    @apply bg-gradient-to-r from-blue-600 to-blue-700;
  }

  .bg-gradient-success {
    @apply bg-gradient-to-r from-green-600 to-green-700;
  }

  /* Sidebar Navigation Styles */
  .sidebar-item {
    @apply flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500;
  }

  .sidebar-item.active {
    @apply bg-blue-50 text-blue-700 dark:bg-blue-900/40 dark:text-white;
  }

  .sidebar-item:not(.active) {
    @apply text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800;
  }

  .sidebar-badge {
    @apply ml-auto inline-flex items-center justify-center px-2 py-0.5 text-xs font-semibold rounded-full;
  }

  .sidebar-badge--default {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
  }

  .sidebar-badge--danger {
    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
  }

  .sidebar-badge--warning {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
  }

  /* Sidebar transitions */
  .sidebar-transition {
    @apply transition-all duration-300 ease-in-out;
  }

  /* Print styles - hide sidebar */
  @media print {
    nav[role='navigation'][aria-label*='navigation'] {
      display: none !important;
    }

    main {
      margin-left: 0 !important;
    }
  }
}