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

@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);
  }
}

@layer components {
  /* ── Phase 75 ERB-01: dead Tailwind-directive shim block removed ─────────────
     This file is served RAW by Propshaft (no Tailwind compile step), so every
     utility-composition directive here was permanently dead CSS the browser
     already dropped. The 35 dead component rules (.btn-primary, .btn-secondary,
     .card*, .tooltip*, .theme-toggle*, .card-interactive, status/sidebar badges,
     form/heading/text/gradient/skeleton/mobile-menu/heatmap helpers, …) were
     removed in Phase 75 Plan 04. The LIVE, on-skin replacements for the three
     still-consumed editorial shims (.btn-primary, .card-interactive,
     .theme-toggle-pill) live in app/assets/tailwind/application.css @layer
     components (plain-CSS, editorial-token-bound, Tailwind-v4-compiled).
     Only the live plain-CSS print rule below is retained.
     ─────────────────────────────────────────────────────────────────────────── */

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

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