/* @import "tailwindcss"; */

@theme {
  /* Primary and secondary brand colors - overridden by layout :root when whitelabel/cookfolio */
  --color-primary: #FF6100;
  --color-primary-hover: #F08447;
  --color-primary-light: #FEF0E8;
  --color-primary-dark: #FF6600;
  --color-secondary: #929D00;
  --color-secondary-hover: #A3AE00;
}

/* System font stack for zero-latency font loading */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Global scrollbar styles - dark mode */
html.dark {
  scrollbar-width: thin;
  scrollbar-color: #7c2d12 #374151 !important; /* orange-900 thumb, gray-700 track */
}

html.dark ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html.dark ::-webkit-scrollbar-track {
  background: #374151; /* gray-700 */
}

html.dark ::-webkit-scrollbar-thumb {
  background: #7c2d12 !important; /* orange-900 - dark orange */
  border-radius: 6px;
  border: 2px solid #374151; /* gray-700 - matches track */
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #ea580c !important; /* orange-600 - hover color */
}

/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * 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.
 */

/* Primary color utilities - fallback for Tailwind v4 */
.bg-primary { background-color: var(--color-primary, #FF6100); }
.dark .bg-primary { background-color: var(--color-primary, #FF6100) !important; }
.bg-primary-hover { background-color: var(--color-primary-hover, #F08447); }
.dark .bg-primary-hover { background-color: var(--color-primary-hover, #F08447) !important; }
.bg-primary-light { background-color: var(--color-primary-light, #FEF0E8); }
.dark .bg-primary-light { background-color: color-mix(in srgb, var(--color-primary, #FF6100) 20%, white) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark, #FF6600); }

/* Content area background - darker than cards (gray-800) and top bar */
.dark main.bg-gray-100 {
  background-color: rgb(10, 15, 25) !important; /* Very dark gray, darker than gray-900 (17, 24, 39) */
}

/* Body background - match content area for consistency */
.dark body.bg-gray-100 {
  background-color: rgb(10, 15, 25) !important; /* Very dark gray, darker than gray-900 (17, 24, 39) */
}

/* Logo dark mode - change white fills to primary orange */
.dark svg path[fill="#fff"],
.dark svg path[fill="white"],
.dark svg path[fill="#ffffff"] {
  fill: var(--color-primary, #FF6100) !important;
}

/* Standard headline color in dark mode - matches sidebar inactive links (gray-300) */
/* This provides a base, but Tailwind classes will override if more specific */
.dark h1.text-gray-900,
.dark h2.text-gray-900,
.dark h3.text-gray-900,
.dark h4.text-gray-900,
.dark h5.text-gray-900,
.dark h6.text-gray-900 {
  color: rgb(209, 213, 219) !important; /* gray-300 */
}

/* Override for thead links FIRST - keep gray-300 for legibility */
.dark thead a,
.dark thead th a,
.dark table thead a {
  color: rgb(209, 213, 219) !important; /* gray-300 - same as "Aktionen" text */
}

/* Standard link color in dark mode - use theme primary */
/* Exclude links with explicit text color classes (white, gray-200, gray-300) and buttons */
.dark a:not(.text-white):not([class*="text-gray-200"]):not([class*="text-gray-300"]):not([class*="hover:text-white"]):not([class*="bg-"]) {
  color: var(--color-primary-hover, rgb(234, 88, 12)) !important;
}
.dark a.text-primary:not(.text-white):not([class*="text-gray-200"]):not([class*="text-gray-300"]) {
  color: var(--color-primary-hover, rgb(234, 88, 12)) !important;
}

/* Override for create book button - use gray-200 text in dark mode for buttons with orange-900 background */
.dark a.bg-orange-600:not([class*="dark:bg-orange-900"]) {
  color: rgb(255, 255, 255) !important; /* white */
}
/* Buttons with dark orange-900 background should have gray-200 text */
.dark a[class*="dark:bg-orange-900"],
.dark button[class*="dark:bg-orange-900"],
.dark input[type="submit"][class*="dark:bg-orange-900"] {
  color: rgb(229, 231, 235) !important; /* gray-200 */
}

/* Form Input Styling - Match table component search field */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="password"],
.dark input[type="search"],
.dark input[type="tel"],
.dark input[type="url"],
.dark textarea,
.dark select {
  background-color: rgb(55, 65, 81) !important; /* gray-700 */
  border-color: rgb(75, 85, 99) !important; /* gray-600 */
  color: rgb(243, 244, 246) !important; /* gray-100 */
}

.dark input[type="text"]::placeholder,
.dark input[type="email"]::placeholder,
.dark input[type="number"]::placeholder,
.dark input[type="date"]::placeholder,
.dark input[type="password"]::placeholder,
.dark input[type="search"]::placeholder,
.dark textarea::placeholder {
  color: rgb(156, 163, 175) !important; /* gray-400 */
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="number"]:focus,
.dark input[type="date"]:focus,
.dark input[type="password"]:focus,
.dark input[type="search"]:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: rgb(249, 115, 22) !important; /* orange-500 */
  outline: none !important;
  box-shadow: 0 0 0 1px rgb(249, 115, 22) !important;
}

/* Form Labels - Match sidebar links and headings (gray-300) */
.dark label:not(.text-white):not(.text-gray-100):not(.text-gray-200),
.dark form label,
.dark .text-gray-900.dark\:text-gray-100 {
  color: rgb(209, 213, 219) !important; /* gray-300 */
}

/* Select Dropdown Options - Dark Mode */
.dark select option {
  background-color: rgb(55, 65, 81) !important; /* gray-700 */
  color: rgb(243, 244, 246) !important; /* gray-100 */
}

/* Select Dropdown Highlight - Orange instead of blue */
.dark select:focus option:checked,
.dark select option:checked {
  background-color: rgb(234, 88, 12) !important; /* orange-600 */
  color: rgb(255, 255, 255) !important;
}

/* Select dropdown when open - ensure options are visible */
.dark select:focus {
  background-color: rgb(55, 65, 81) !important; /* gray-700 */
}

/* Ensure select dropdowns have proper padding like inputs */
.dark select {
  padding-top: 0.5rem !important; /* py-2 */
  padding-bottom: 0.5rem !important; /* py-2 */
}

/* Lab select in import modal - custom chevron with spacing */
#lab_select.lab-select-custom {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem; /* pr-10 - creates space to the right of chevron */
}

.dark #lab_select.lab-select-custom {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23d1d5db' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Checkboxes - Primary orange when checked (bright mode) */
input[type="checkbox"] {
  accent-color: rgb(255, 97, 0) !important; /* primary orange #FF6100 */
}

input[type="checkbox"]:checked {
  accent-color: rgb(255, 97, 0) !important; /* primary orange #FF6100 */
}

/* Checkboxes - Gray when inactive, orange-800 when active (dark mode) */
.dark input[type="checkbox"] {
  background-color: rgb(75, 85, 99) !important; /* gray-600 */
  border-color: rgb(107, 114, 128) !important; /* gray-500 */
  accent-color: var(--color-primary, rgb(154, 52, 18)) !important;
}

.dark input[type="checkbox"]:checked {
  background-color: var(--color-primary, rgb(154, 52, 18)) !important;
  border-color: var(--color-primary, rgb(154, 52, 18)) !important;
  accent-color: var(--color-primary, rgb(154, 52, 18)) !important;
}

.dark input[type="checkbox"]:focus {
  border-color: rgb(249, 115, 22) !important; /* orange-500 */
  box-shadow: 0 0 0 1px rgb(249, 115, 22) !important;
}

/* Radio Buttons - Same as checkboxes */
.dark input[type="radio"] {
  background-color: rgb(75, 85, 99) !important; /* gray-600 */
  border-color: rgb(107, 114, 128) !important; /* gray-500 */
}

.dark input[type="radio"]:checked {
  background-color: rgb(154, 52, 18) !important; /* orange-800 */
  border-color: rgb(154, 52, 18) !important;
}

.dark input[type="radio"]:focus {
  border-color: rgb(249, 115, 22) !important; /* orange-500 */
  box-shadow: 0 0 0 1px rgb(249, 115, 22) !important;
}

/* Icons inside input fields - Match search field icon (gray-400) */
.dark .absolute.inset-y-0 svg,
.dark input + svg,
.dark .relative svg.text-gray-400 {
  color: rgb(156, 163, 175) !important; /* gray-400 */
}

/* Orange Buttons - Use orange-600 (medium orange) instead of primary orange in dark mode */
/* But NOT for buttons that have dark:bg-orange-900 class (those should use orange-900) */
.dark .bg-orange-600:not([class*="dark:bg-orange-900"]),
.dark button.bg-orange-600:not([class*="dark:bg-orange-900"]),
.dark input[type="submit"].bg-orange-600:not([class*="dark:bg-orange-900"]) {
  background-color: rgb(234, 88, 12) !important; /* orange-600 - medium orange link color */
}

.dark .bg-orange-600:hover:not([class*="dark:bg-orange-900"]),
.dark button.bg-orange-600:hover:not([class*="dark:bg-orange-900"]),
.dark input[type="submit"].bg-orange-600:hover:not([class*="dark:bg-orange-900"]) {
  background-color: rgb(249, 115, 22) !important; /* orange-500 - slightly lighter on hover */
}

/* CSV Import Droparea - Same bgcolor as select box when dragging */
.dark [data-analysis-import-target="dropZone"].border-orange-500,
.dark [data-analysis-import-target="dropZone"].bg-orange-50 {
  background-color: rgb(55, 65, 81) !important; /* gray-700 - same as select box */
  border-color: rgb(249, 115, 22) !important; /* orange-500 */
}

/* CSV Preview Table - Match table component dark styling */
.dark [data-analysis-import-target="previewTable"] .bg-white,
.dark [data-analysis-import-target="previewTable"] div.bg-white {
  background-color: rgb(31, 41, 55) !important; /* gray-800 */
  border-color: rgb(55, 65, 81) !important; /* gray-700 */
}

.dark [data-analysis-import-target="previewTable"] table {
  background-color: rgb(31, 41, 55) !important; /* gray-800 */
  color: rgb(243, 244, 246) !important; /* gray-100 */
}

.dark [data-analysis-import-target="previewTable"] .bg-gray-50,
.dark [data-analysis-import-target="previewTable"] thead.bg-gray-50 {
  background-color: rgb(154, 52, 18) !important; /* orange-800 */
  color: rgb(209, 213, 219) !important; /* gray-300 */
}

.dark [data-analysis-import-target="previewTable"] thead th {
  background-color: rgb(154, 52, 18) !important; /* orange-800 */
  color: rgb(209, 213, 219) !important; /* gray-300 */
  border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

.dark [data-analysis-import-target="previewTable"] tbody {
  background-color: rgb(31, 41, 55) !important; /* gray-800 */
}

.dark [data-analysis-import-target="previewTable"] tbody tr {
  border-color: rgb(55, 65, 81) !important; /* gray-700 */
}

.dark [data-analysis-import-target="previewTable"] tbody tr:hover,
.dark [data-analysis-import-target="previewTable"] tbody tr.hover\:bg-gray-50:hover {
  background-color: rgb(55, 65, 81) !important; /* gray-700 */
}

.dark [data-analysis-import-target="previewTable"] tbody td {
  border-color: rgb(55, 65, 81) !important; /* gray-700 */
  color: rgb(243, 244, 246) !important; /* gray-100 */
}

.dark [data-analysis-import-target="previewTable"] .text-gray-900 {
  color: rgb(243, 244, 246) !important; /* gray-100 */
}

.dark [data-analysis-import-target="previewTable"] .text-gray-700 {
  color: rgb(209, 213, 219) !important; /* gray-300 */
}

.dark [data-analysis-import-target="previewTable"] .text-gray-500 {
  color: rgb(156, 163, 175) !important; /* gray-400 */
}

.dark [data-analysis-import-target="previewTable"] .text-gray-400 {
  color: rgb(156, 163, 175) !important; /* gray-400 */
}

.dark [data-analysis-import-target="previewTable"] .border-gray-200,
.dark [data-analysis-import-target="previewTable"] .border-gray-300,
.dark [data-analysis-import-target="previewTable"] .border-gray-100 {
  border-color: rgb(55, 65, 81) !important; /* gray-700 */
}

.dark [data-analysis-import-target="previewTable"] .divide-gray-200 {
  border-color: rgb(55, 65, 81) !important; /* gray-700 */
}

/* Recipe Modal Dark Mode Styling */
.dark .recipe-modal-view,
.dark .recipe-content {
  color: rgb(229, 231, 235) !important; /* gray-200 */
}

.dark .recipe-modal-view .card {
  background-color: rgb(31, 41, 55) !important; /* gray-800 */
  border-color: rgb(55, 65, 81) !important; /* gray-700 */
  color: rgb(229, 231, 235) !important; /* gray-200 */
}

.dark .recipe-modal-view .card p,
.dark .recipe-modal-view .card td,
.dark .recipe-modal-view .card li {
  color: rgb(229, 231, 235) !important; /* gray-200 */
}

.dark .recipe-modal-view .card-orange-title {
  color: rgb(234, 88, 12) !important; /* orange-600 */
}

.dark .recipe-modal-view .ingredient-part {
  color: rgb(234, 88, 12) !important; /* orange-600 */
}

/* Nutrients Table Dark Mode */
.dark .recipe-modal-view .nutrients-compact-table {
  background-color: rgb(31, 41, 55) !important; /* gray-800 */
  color: rgb(229, 231, 235) !important; /* gray-200 */
}

.dark .recipe-modal-view .nutrients-compact-table th,
.dark .recipe-modal-view .nutrients-compact-table td {
  color: rgb(229, 231, 235) !important; /* gray-200 */
}

.dark .recipe-modal-view .nutrients-compact-table .nutrients-header th {
  background-color: rgb(154, 52, 18) !important; /* orange-800 */
  color: rgb(209, 213, 219) !important; /* gray-300 */
}

.dark .recipe-modal-view .nutrients-compact-table .nutrients-row-even {
  background-color: rgb(31, 41, 55) !important; /* gray-800 */
}

.dark .recipe-modal-view .nutrients-compact-table .nutrients-row-odd {
  background-color: rgb(55, 65, 81) !important; /* gray-700 */
}

/* Times Table Dark Mode */
.dark .recipe-modal-view .times-table {
  color: rgb(229, 231, 235) !important; /* gray-200 */
}

.dark .recipe-modal-view .times-table td {
  color: rgb(229, 231, 235) !important; /* gray-200 */
  border-color: rgb(55, 65, 81) !important; /* gray-700 */
}

.dark .recipe-modal-view .times-table tr {
  border-bottom-color: rgb(55, 65, 81) !important; /* gray-700 */
}

.dark .recipe-modal-view .times-table .total-row {
  background-color: rgb(55, 65, 81) !important; /* gray-700 */
}

.dark .recipe-modal-view .times-table .total-row td {
  color: rgb(229, 231, 235) !important; /* gray-200 */
}

.dark .recipe-modal-view .card-allergens p {
  color: rgb(229, 231, 235) !important; /* gray-200 */
}

.dark .recipe-modal-view .step-text {
  color: rgb(229, 231, 235) !important; /* gray-200 */
}

/* Trix Editor Toolbar - Dark Mode */
.dark trix-toolbar {
  background-color: rgb(31, 41, 55) !important; /* gray-800 */
  border-color: rgb(55, 65, 81) !important; /* gray-700 */
  color: rgb(209, 213, 219) !important; /* gray-300 */
}

.dark trix-toolbar .trix-button-group {
  border-color: rgb(55, 65, 81) !important; /* gray-700 */
}

/* Trix toolbar buttons - make icons visible in dark mode */
.dark trix-toolbar button.trix-button {
  color: rgb(243, 244, 246) !important; /* gray-100 - lighter for better visibility */
}

.dark trix-toolbar button.trix-button:hover:not(:disabled) {
  background-color: rgb(55, 65, 81) !important; /* gray-700 */
  color: rgb(255, 255, 255) !important; /* white */
}

.dark trix-toolbar button.trix-button:not(:disabled):active,
.dark trix-toolbar button.trix-button.trix-active {
  background-color: rgb(75, 85, 99) !important; /* gray-600 */
  color: rgb(255, 255, 255) !important; /* white */
}

/* Disabled Trix buttons - make them visible but clearly disabled */
.dark trix-toolbar button.trix-button:disabled {
  opacity: 0.7 !important;
  color: rgb(156, 163, 175) !important; /* gray-400 - lighter than before */
  cursor: not-allowed !important;
}

/* Trix toolbar icons - invert colors for dark mode visibility */
.dark trix-toolbar .trix-button--icon,
.dark trix-toolbar button.trix-button svg,
.dark trix-toolbar button.trix-button .trix-icon {
  filter: invert(100%) !important;
}

.dark trix-toolbar button.trix-button:disabled .trix-button--icon,
.dark trix-toolbar button.trix-button:disabled svg,
.dark trix-toolbar button.trix-button:disabled .trix-icon {
  filter: invert(100%) opacity(0.6) !important; /* Invert and reduce opacity for disabled */
}

/* Remove invert on hover - icons become dark for contrast with lighter background */
/* Using double invert to cancel out the base invert */
.dark trix-toolbar button.trix-button:hover:not(:disabled) .trix-button--icon,
.dark trix-toolbar button.trix-button:hover:not(:disabled) svg,
.dark trix-toolbar button.trix-button:hover:not(:disabled) .trix-icon {
  filter: invert(100%) invert(100%) !important; /* Double invert cancels out to original black */
}

/* Remove invert when active - icons become dark for contrast with lighter background */
.dark trix-toolbar button.trix-button.trix-active .trix-button--icon,
.dark trix-toolbar button.trix-button.trix-active svg,
.dark trix-toolbar button.trix-button.trix-active .trix-icon {
  filter: invert(100%) invert(100%) !important; /* Double invert cancels out to original black */
}

/* Trix toolbar input fields (like link URL input) */
.dark trix-toolbar input[type="url"],
.dark trix-toolbar input[type="text"] {
  background-color: rgb(55, 65, 81) !important; /* gray-700 */
  border-color: rgb(75, 85, 99) !important; /* gray-600 */
  color: rgb(243, 244, 246) !important; /* gray-100 */
}

.text-primary { color: var(--color-primary, #FF6100); }
.text-primary-hover { color: var(--color-primary-hover, #F08447); }
.text-primary-light { color: var(--color-primary-light, #FEF0E8); }
.bg-secondary { background-color: var(--color-secondary, #929D00); }
.bg-secondary-light { background-color: var(--color-secondary-light, #E8E9CC); }
.text-secondary { color: var(--color-secondary, #929D00); }
.dark .bg-secondary { background-color: var(--color-secondary, #929D00) !important; }
.dark .bg-secondary-light { background-color: color-mix(in srgb, var(--color-secondary, #929D00) 20%, white) !important; }
.dark .text-secondary { color: var(--color-secondary-hover, #A3AE00) !important; }
.hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover, #F08447); }
.hover\:text-primary-hover:hover { color: var(--color-primary-hover, #F08447); }
.focus\:ring-primary:focus { --tw-ring-color: var(--color-primary, #FF6100); }
.focus\:border-primary:focus { border-color: var(--color-primary, #FF6100); }
.focus-visible\:bg-primary-hover:focus-visible { background-color: var(--color-primary-hover, #F08447); }
.border-primary { border-color: var(--color-primary, #FF6100); }
.border-secondary { border-color: var(--color-secondary, #929D00); }
.hover\:bg-primary-light:hover { background-color: var(--color-primary-light, #FEF0E8); }
.hover\:bg-secondary-hover:hover { background-color: var(--color-secondary-hover, #A3AE00); }

/* Base font family - matches legacy application */
body {
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
}

/* Font weights matching legacy */
.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

/* Login Page Styles */
.devise-layout {
  background-color: #f3f4f6;
}

.devise-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Sidebar Navigation Styles */
.nav-item-link {
  /* All icons and text inherit color from parent */
}

.nav-item-link .nav-item-icon,
.nav-item-link .nav-item-label {
  color: inherit;
}

/* Sortable Tables */
.hidden-column {
  display: none !important;
}

/* Turbo Frame Pagination Slide Transitions using View Transitions API */

/* Keyframes for slide animations */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutToLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slideOutToRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

/* Mark pagination content for view transitions - each gets a unique name based on ID */
#book_recipes-starter-content { view-transition-name: book-recipes-starter; }
#book_recipes-main_course-content { view-transition-name: book-recipes-main-course; }
#book_recipes-dessert-content { view-transition-name: book-recipes-dessert; }
#favorites-starter-content { view-transition-name: favorites-starter; }
#favorites-main_course-content { view-transition-name: favorites-main-course; }
#favorites-dessert-content { view-transition-name: favorites-dessert; }
#available_recipes-starter-content { view-transition-name: available-recipes-starter; }
#available_recipes-main_course-content { view-transition-name: available-recipes-main-course; }
#available_recipes-dessert-content { view-transition-name: available-recipes-dessert; }

/* Default animations for "next" direction (slide left) - applies to all view transition names */
::view-transition-old(book-recipes-starter),
::view-transition-old(book-recipes-main-course),
::view-transition-old(book-recipes-dessert),
::view-transition-old(favorites-starter),
::view-transition-old(favorites-main-course),
::view-transition-old(favorites-dessert),
::view-transition-old(available-recipes-starter),
::view-transition-old(available-recipes-main-course),
::view-transition-old(available-recipes-dessert) {
  animation: 300ms ease-in-out both slideOutToLeft;
}

::view-transition-new(book-recipes-starter),
::view-transition-new(book-recipes-main-course),
::view-transition-new(book-recipes-dessert),
::view-transition-new(favorites-starter),
::view-transition-new(favorites-main-course),
::view-transition-new(favorites-dessert),
::view-transition-new(available-recipes-starter),
::view-transition-new(available-recipes-main-course),
::view-transition-new(available-recipes-dessert) {
  animation: 300ms ease-in-out both slideInFromRight;
}

/* Animations for "prev" direction (slide right) */
turbo-frame[data-transition-direction="prev"] ::view-transition-old(book-recipes-starter),
turbo-frame[data-transition-direction="prev"] ::view-transition-old(book-recipes-main-course),
turbo-frame[data-transition-direction="prev"] ::view-transition-old(book-recipes-dessert),
turbo-frame[data-transition-direction="prev"] ::view-transition-old(favorites-starter),
turbo-frame[data-transition-direction="prev"] ::view-transition-old(favorites-main-course),
turbo-frame[data-transition-direction="prev"] ::view-transition-old(favorites-dessert),
turbo-frame[data-transition-direction="prev"] ::view-transition-old(available-recipes-starter),
turbo-frame[data-transition-direction="prev"] ::view-transition-old(available-recipes-main-course),
turbo-frame[data-transition-direction="prev"] ::view-transition-old(available-recipes-dessert) {
  animation: 300ms ease-in-out both slideOutToRight;
}

turbo-frame[data-transition-direction="prev"] ::view-transition-new(book-recipes-starter),
turbo-frame[data-transition-direction="prev"] ::view-transition-new(book-recipes-main-course),
turbo-frame[data-transition-direction="prev"] ::view-transition-new(book-recipes-dessert),
turbo-frame[data-transition-direction="prev"] ::view-transition-new(favorites-starter),
turbo-frame[data-transition-direction="prev"] ::view-transition-new(favorites-main-course),
turbo-frame[data-transition-direction="prev"] ::view-transition-new(favorites-dessert),
turbo-frame[data-transition-direction="prev"] ::view-transition-new(available-recipes-starter),
turbo-frame[data-transition-direction="prev"] ::view-transition-new(available-recipes-main-course),
turbo-frame[data-transition-direction="prev"] ::view-transition-new(available-recipes-dessert) {
  animation: 300ms ease-in-out both slideInFromLeft;
}

/* Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(book-recipes-starter),
  ::view-transition-old(book-recipes-main-course),
  ::view-transition-old(book-recipes-dessert),
  ::view-transition-old(favorites-starter),
  ::view-transition-old(favorites-main-course),
  ::view-transition-old(favorites-dessert),
  ::view-transition-old(available-recipes-starter),
  ::view-transition-old(available-recipes-main-course),
  ::view-transition-old(available-recipes-dessert),
  ::view-transition-new(book-recipes-starter),
  ::view-transition-new(book-recipes-main-course),
  ::view-transition-new(book-recipes-dessert),
  ::view-transition-new(favorites-starter),
  ::view-transition-new(favorites-main-course),
  ::view-transition-new(favorites-dessert),
  ::view-transition-new(available-recipes-starter),
  ::view-transition-new(available-recipes-main-course),
  ::view-transition-new(available-recipes-dessert) {
    animation: none !important;
  }
}