/* ============================================================================
   TRIPWAFFLE CUSTOM STYLES
   Combined universal + specific styles for performance
   ============================================================================ */

/* IMPORTANT: @import must come first, before any other rules */
@import url("https://fonts.googleapis.com/css2?family=Sanchez&display=swap");

/* ============================================
   THEME SYSTEM - CSS CUSTOM PROPERTIES
   Supports dark mode (default) and future light mode
   ============================================ */

/* Dark theme (default) - Waffle Brown with Yellow accents */
:root {
	/* Border radius (matches rounded-lg for consistency) */
	--radius-base: 0.5rem;               /* 8px - used for cards and accordions */

	/* Background colors (waffle-brown tones, darkened for better text contrast) */
	--tw-bg-header: 35 25 18;            /* Dark brown - Header/footer/bottom nav */
	--tw-bg-page: 30 24 20;              /* Custom dark brown - Page background */
	--tw-bg-surface: 44 34 28;           /* waffle-brown-950 - Cards, nav, components */
	--tw-bg-elevated: 59 49 41;          /* Between 900-950 - Dropdowns, modals, popovers */
	--tw-bg-hover: 77 64 54;             /* waffle-brown-900 - Hover states */
	--tw-bg-active: 89 73 59;            /* waffle-brown-800 - Active/pressed states */

	/* Border colors */
	--tw-border-default: 77 64 54;       /* waffle-brown-900 - Default borders */
	--tw-border-subtle: 59 49 41;        /* Between 900-950 - Subtle borders */
	--tw-border-accent: 200 103 23;      /* waffle-yellow-600 - Accent borders */

	/* Primary accent colors (waffle-yellow tones) */
	--tw-accent-950: 64 23 8;            /* waffle-yellow-950 - Darkest accent */
	--tw-accent-900: 111 48 24;          /* waffle-yellow-900 - Dark accent backgrounds */
	--tw-accent-800: 135 58 25;          /* waffle-yellow-800 - Darker buttons */
	--tw-accent-700: 166 73 23;          /* waffle-yellow-700 - Button backgrounds */
	--tw-accent-600: 200 103 23;         /* waffle-yellow-600 - Selected states, hover */
	--tw-accent-500: 226 137 30;         /* waffle-yellow-500 - Progress bars, highlights */
	--tw-accent-400: 234 171 60;         /* waffle-yellow-400 - Text accents, icons */
	--tw-accent-300: 238 191 91;         /* waffle-yellow-300 - Light accent text */
	--tw-accent-200: 244 216 147;        /* waffle-yellow-200 - Lightest accent */

	/* Text colors */
	--tw-text-primary: 255 255 255;      /* White - Primary text */
	--tw-text-secondary: 211 205 181;    /* waffle-brown-200 - Secondary text */
	--tw-text-muted: 164 149 107;        /* waffle-brown-400 - Muted text */
	--tw-text-disabled: 128 109 78;      /* waffle-brown-600 - Disabled text */

	/* Secondary colors (status indicators) */
	--tw-green-900: 23 61 36;            /* waffle-green-900 */
	--tw-green-500: 55 146 80;           /* waffle-green-500 */
	--tw-green-400: 93 176 113;          /* waffle-green-400 */
	--tw-green-200: 185 225 191;         /* waffle-green-200 */
	--tw-orange-900: 117 31 25;          /* waffle-orange-900 */
	--tw-orange-500: 234 86 46;          /* waffle-orange-500 */
	--tw-orange-400: 238 115 73;         /* waffle-orange-400 */
	--tw-orange-200: 248 201 176;        /* waffle-orange-200 */
	--tw-red-900: 124 31 45;             /* waffle-red-900 */
	--tw-red-500: 226 81 82;             /* waffle-red-500 */
	--tw-red-400: 237 129 127;           /* waffle-red-400 */
	--tw-red-200: 249 211 210;           /* waffle-red-200 */
	--tw-yellow-900: 111 48 24;          /* waffle-yellow-900 (amber) */
	--tw-yellow-500: 226 137 30;         /* waffle-yellow-500 (amber) */
	--tw-yellow-400: 234 171 60;         /* waffle-yellow-400 */
	--tw-yellow-200: 244 216 147;        /* waffle-yellow-200 */

	/* Event type colors */
	--tw-blue-900: 41 62 127;            /* waffle-blue-900 - Flight bg */
	--tw-blue-500: 78 134 227;           /* waffle-blue-500 - Flight border */
	--tw-blue-200: 197 220 248;          /* waffle-blue-200 - Flight text */
	--tw-pink-900: 124 31 61;            /* waffle-pink-900 - Accommodation bg */
	--tw-pink-500: 226 82 142;           /* waffle-pink-500 - Accommodation border */
	--tw-pink-200: 248 210 229;          /* waffle-pink-200 - Accommodation text */
	--tw-purple-900: 94 40 103;          /* waffle-purple-900 - Diverted bg */
	--tw-purple-500: 183 82 209;         /* waffle-purple-500 - Diverted border */
	--tw-purple-200: 239 215 247;        /* waffle-purple-200 - Diverted text */

	/* Focus ring */
	--tw-ring-accent: 166 73 23;         /* waffle-yellow-700 - Focus ring color */
}

/* Light theme - warm waffle-brown tones with yellow accents */
html.light {
	/* Background colors (warm cream/beige tones) */
	--tw-bg-header: 180 165 140;         /* Warm brown-beige - Header/footer/bottom nav */
	--tw-bg-page: 246 245 240;           /* waffle-brown-50 - Page background */
	--tw-bg-surface: 232 230 217;        /* waffle-brown-100 - Cards/panels */
	--tw-bg-elevated: 255 255 255;       /* White - Elevated surfaces */
	--tw-bg-hover: 211 205 181;          /* waffle-brown-200 - Hover states */
	--tw-bg-active: 185 175 139;         /* waffle-brown-300 - Active states */

	/* Border colors */
	--tw-border-default: 185 175 139;    /* waffle-brown-300 */
	--tw-border-subtle: 211 205 181;     /* waffle-brown-200 */
	--tw-border-accent: 166 73 23;       /* waffle-yellow-700 */

	/* Primary accent colors (waffle-yellow - same as dark theme) */
	--tw-accent-950: 64 23 8;            /* waffle-yellow-950 */
	--tw-accent-900: 111 48 24;          /* waffle-yellow-900 */
	--tw-accent-800: 135 58 25;          /* waffle-yellow-800 */
	--tw-accent-700: 166 73 23;          /* waffle-yellow-700 */
	--tw-accent-600: 200 103 23;         /* waffle-yellow-600 */
	--tw-accent-500: 226 137 30;         /* waffle-yellow-500 */
	--tw-accent-400: 234 171 60;         /* waffle-yellow-400 */
	--tw-accent-300: 238 191 91;         /* waffle-yellow-300 */
	--tw-accent-200: 244 216 147;        /* waffle-yellow-200 */

	/* Text colors (dark brown tones) */
	--tw-text-primary: 44 34 28;         /* waffle-brown-950 - Primary text */
	--tw-text-secondary: 89 73 59;       /* waffle-brown-800 - Secondary text */
	--tw-text-muted: 128 109 78;         /* waffle-brown-600 - Muted text */
	--tw-text-disabled: 164 149 107;     /* waffle-brown-400 - Disabled text */

	/* Secondary colors for light mode (slightly adjusted) */
	--tw-green-900: 27 74 42;            /* waffle-green-800 */
	--tw-green-500: 39 116 62;           /* waffle-green-600 */
	--tw-green-400: 55 146 80;           /* waffle-green-500 */
	--tw-green-200: 138 203 151;         /* waffle-green-300 */
	--tw-orange-900: 145 34 27;          /* waffle-orange-800 */
	--tw-orange-500: 219 55 27;          /* waffle-orange-600 */
	--tw-orange-400: 234 86 46;          /* waffle-orange-500 */
	--tw-orange-200: 243 163 126;        /* waffle-orange-300 */
	--tw-red-900: 145 32 44;             /* waffle-red-800 */
	--tw-red-500: 190 45 53;             /* waffle-red-600 */
	--tw-red-400: 226 81 82;             /* waffle-red-500 */
	--tw-red-200: 244 176 173;           /* waffle-red-300 */
	--tw-yellow-900: 135 58 25;          /* waffle-yellow-800 (amber) */
	--tw-yellow-500: 200 103 23;         /* waffle-yellow-600 (amber) */
	--tw-yellow-400: 226 137 30;         /* waffle-yellow-500 */
	--tw-yellow-200: 238 191 91;         /* waffle-yellow-300 */

	/* Event type colors for light mode */
	--tw-blue-900: 45 71 160;            /* waffle-blue-800 */
	--tw-blue-500: 46 97 213;            /* waffle-blue-600 */
	--tw-blue-200: 111 166 235;          /* waffle-blue-400 */
	--tw-pink-900: 148 32 70;            /* waffle-pink-800 */
	--tw-pink-500: 208 50 107;           /* waffle-pink-600 */
	--tw-pink-200: 237 131 178;          /* waffle-pink-400 */
	--tw-purple-900: 112 43 125;         /* waffle-purple-800 */
	--tw-purple-500: 162 65 184;         /* waffle-purple-600 */
	--tw-purple-200: 210 141 229;        /* waffle-purple-400 */

	/* Focus ring */
	--tw-ring-accent: 200 103 23;        /* waffle-yellow-600 */
}

/* ============================================
   BASE STYLES
   ============================================ */

/* Prevent horizontal scrollbar during transitions */
html {
	overflow-x: hidden;
}

/* ============================================
   VIEW TRANSITIONS & SWUP
   ============================================ */

/* Page exit animations - triggered on navigation */

/* Trip page: slide day cards left when navigating to event */
.swup-exit-left [data-trip-accordion] {
	animation: slideOutLeft 150ms ease-out forwards;
}

/* Stagger animation for multiple day cards */
.swup-exit-left [data-trip-accordion]:nth-child(1) { animation-delay: 0ms; }
.swup-exit-left [data-trip-accordion]:nth-child(2) { animation-delay: 20ms; }
.swup-exit-left [data-trip-accordion]:nth-child(3) { animation-delay: 40ms; }
.swup-exit-left [data-trip-accordion]:nth-child(4) { animation-delay: 60ms; }
.swup-exit-left [data-trip-accordion]:nth-child(5) { animation-delay: 80ms; }
.swup-exit-left [data-trip-accordion]:nth-child(n+6) { animation-delay: 100ms; }

@keyframes slideOutLeft {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(-30px);
	}
}

/* Event page: slide in from right when arriving from trip page */
.swup-enter-right {
	animation: slideInRight 150ms ease-out forwards;
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Event page: slide out right when going back to trip */
.swup-exit-right {
	animation: slideOutRight 150ms ease-out forwards;
}

@keyframes slideOutRight {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(30px);
	}
}

/* Trip page: slide in from left when returning from event */
.swup-enter-left [data-trip-accordion] {
	animation: slideInLeft 150ms ease-out forwards;
}

/* Stagger animation for entrance */
.swup-enter-left [data-trip-accordion]:nth-child(1) { animation-delay: 0ms; }
.swup-enter-left [data-trip-accordion]:nth-child(2) { animation-delay: 20ms; }
.swup-enter-left [data-trip-accordion]:nth-child(3) { animation-delay: 40ms; }
.swup-enter-left [data-trip-accordion]:nth-child(4) { animation-delay: 60ms; }
.swup-enter-left [data-trip-accordion]:nth-child(5) { animation-delay: 80ms; }
.swup-enter-left [data-trip-accordion]:nth-child(n+6) { animation-delay: 100ms; }

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Smooth scroll behavior */
html {
	scroll-behavior: smooth;
}

/* Reduce motion preference - disable exit animations */
@media (prefers-reduced-motion: reduce) {
	.swup-exit-left [data-trip-accordion],
	.swup-exit-right,
	.swup-enter-right,
	.swup-enter-left [data-trip-accordion] {
		animation: none;
	}
}

/* Heading font application */
h1, h2, h3, h4, h5, h6 {
  font-family: "Sanchez", serif;
}

/* ============================================
   DATEPICKER STYLING
   ============================================ */

/* Datepicker selected date highlighting */
.datepicker-cell.selected,
.datepicker-cell.selected:hover,
[date-rangepicker] .datepicker-cell.selected,
[date-rangepicker] .datepicker-cell.selected:hover {
	background-color: rgb(var(--tw-accent-600)) !important; /* accent-600 */
	color: white !important;
}

.datepicker-cell.range-start,
.datepicker-cell.range-end,
[date-rangepicker] .datepicker-cell.range-start,
[date-rangepicker] .datepicker-cell.range-end {
	background-color: rgb(var(--tw-accent-600)) !important; /* accent-600 */
	color: white !important;
}

.datepicker-cell.range,
[date-rangepicker] .datepicker-cell.range {
	background-color: rgb(var(--tw-accent-500)) !important; /* accent-500 */
	color: white !important;
}

.datepicker-cell.focused:not(.selected),
[date-rangepicker] .datepicker-cell.focused:not(.selected) {
	background-color: rgb(var(--tw-bg-hover)) !important; /* theme hover */
}

/* Datepicker popup styling - only style the outer container */
.datepicker-dropdown,
.datepicker.datepicker-dropdown {
	background-color: rgb(var(--tw-bg-elevated)) !important; /* theme elevated */
	border: 1px solid rgb(var(--tw-border-default)) !important; /* theme border */
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
	border-radius: 0.5rem !important;
	padding: 0.75rem !important;
}

/* Remove duplicate styling from inner picker */
.datepicker-picker {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.datepicker-view {
	padding: 0 !important;
	margin: 0 !important;
	background-color: transparent !important;
}

.datepicker-grid {
	background-color: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}

.datepicker-main {
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
}

.datepicker-cell {
	background-color: transparent !important;
	border: none !important;
	color: white !important;
}

.datepicker-header {
	margin-bottom: 0.5rem !important;
	padding: 0 !important;
}

.datepicker-controls {
	padding: 0 !important;
	margin-bottom: 0.5rem !important;
}

/* Navigation arrows */
.datepicker-controls .button,
.datepicker-controls button,
.datepicker .prev-btn,
.datepicker .next-btn {
	color: white !important;
	background-color: transparent !important;
}

.datepicker-controls .button:hover,
.datepicker-controls button:hover,
.datepicker .prev-btn:hover,
.datepicker .next-btn:hover {
	background-color: rgb(var(--tw-bg-hover)) !important; /* theme hover */
}

/* Arrow SVG icons */
.datepicker-controls svg,
.datepicker .prev-btn svg,
.datepicker .next-btn svg {
	stroke: white !important;
	fill: white !important;
}

/* Month/year title */
.datepicker-view .view-switch,
.datepicker .view-switch,
.datepicker-title,
.datepicker-controls .view-switch {
	color: white !important;
	font-weight: 600 !important;
}

/* Day of week headers */
.datepicker-view .dow,
.datepicker .dow,
.datepicker .days-of-week .dow {
	color: rgb(var(--tw-text-secondary)) !important; /* theme text secondary */
}

/* Day cells */
.datepicker-cell.day {
	color: white !important;
}

/* Previous/next month dates */
.datepicker-cell.prev,
.datepicker-cell.next {
	color: rgb(var(--tw-text-muted)) !important; /* theme text muted */
}

/* Disabled dates */
.datepicker-cell.disabled {
	color: rgb(var(--tw-text-disabled)) !important; /* theme text disabled */
}

/* Light mode datepicker overrides */
html.light .datepicker-cell {
	color: rgb(var(--tw-text-primary)) !important;
}

html.light .datepicker-cell.day {
	color: rgb(var(--tw-text-primary)) !important;
}

html.light .datepicker-controls .button,
html.light .datepicker-controls button,
html.light .datepicker .prev-btn,
html.light .datepicker .next-btn {
	color: rgb(var(--tw-text-primary)) !important;
}

html.light .datepicker-controls svg,
html.light .datepicker .prev-btn svg,
html.light .datepicker .next-btn svg {
	stroke: rgb(var(--tw-text-primary)) !important;
	fill: rgb(var(--tw-text-primary)) !important;
}

html.light .datepicker-view .view-switch,
html.light .datepicker .view-switch,
html.light .datepicker-title,
html.light .datepicker-controls .view-switch {
	color: rgb(var(--tw-text-primary)) !important;
}

html.light .datepicker-dropdown,
html.light .datepicker.datepicker-dropdown {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* ============================================
   TIME INPUT STYLING
   ============================================ */

/* Ensure time inputs are interactive and style the native picker icon */
input[type="time"] {
	cursor: text !important;
	pointer-events: auto !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.625rem center;
	background-size: 1rem;
	padding-right: 2.5rem !important;
	position: relative;
}

input[type="time"]::-webkit-calendar-picker-indicator {
	cursor: pointer !important;
	opacity: 0;
	position: absolute;
	right: 0;
	width: 2.5rem;
	height: 100%;
	top: 0;
}

input[type="time"]:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23D1D5DB' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
}

/* ============================================
   DATE INPUT STYLING
   ============================================ */

/* Native date input styling - matches time input pattern */
input[type="date"] {
	cursor: text !important;
	pointer-events: auto !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 10h16m-8-3V4M7 7V4m10 3V4M5 20h14a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.625rem center;
	background-size: 1rem;
	padding-right: 2.5rem !important;
	position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer !important;
	opacity: 0;
	position: absolute;
	right: 0;
	width: 2.5rem;
	height: 100%;
	top: 0;
}

input[type="date"]:hover {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23D1D5DB' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 10h16m-8-3V4M7 7V4m10 3V4M5 20h14a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z'/%3E%3C/svg%3E");
}

/* ============================================
   BORDER RADIUS UTILITIES
   (from Flowbite datepicker - used for cards/accordions)
   ============================================ */

.rounded-base {
	border-radius: var(--radius-base);
}

.rounded-s-base {
	border-start-start-radius: var(--radius-base);
	border-end-start-radius: var(--radius-base);
}

.rounded-e-base {
	border-start-end-radius: var(--radius-base);
	border-end-end-radius: var(--radius-base);
}

/* ============================================
   HEADER COMPONENTS
   ============================================ */

header .avatar {
	width: 2em;
	height: 2em;
	border-radius: 4em;
}

/* ============================================
   TIMELINE COMPONENTS
   ============================================ */

.timeline-item {
	margin-left: 1em;
}

.timeline-item .timeline-image {
	text-align: right;
}

.timeline-item .timeline-image img {
	border-radius: 10em;
	width: 5em;
	height: 5em;
	background-color: #fff;
}

.timeline-item .timeline-icon svg {
	width: 3em;
	height: 3em;
	margin: 1em 0 1em 0;
}

.timeline-item .timeline-time {
	font-size: 1.4em;
}

.timeline-item .flight-flags img {
	width: 1em;
	height: 1em;
}

/* ============================================
   TRIP ACCORDION SCROLL OFFSET
   ============================================ */

/* Offset scroll position to account for fixed navbar */
[id^="accordion-day-"] {
	scroll-margin-top: 80px; /* navbar height (~72px) + padding */
}

/* Toast notification for "jumping to today" indicator */
.tw-collapse-toast {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgb(var(--tw-bg-elevated));
	border: 1px solid rgb(var(--tw-border-default));
	color: rgb(var(--tw-text-secondary));
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
	z-index: 50;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.tw-collapse-toast.visible {
	opacity: 1;
}

/* Reduce motion preference - disable smooth scrolling and animations */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	[id^="accordion-day-"] [data-trip-accordion-target] + div {
		transition: none !important;
	}

	.tw-collapse-toast {
		transition: none;
	}
}

/* ============================================
   MAP COMPONENTS
   ============================================ */

.leaflet-container {
	background-color: rgba(0, 0, 0, 0.8);
}

/* ============================================
   BOTTOM NAVIGATION
   ============================================ */

/* Safe area for iOS devices with home indicator */
.safe-area-bottom {
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Scroll offset to account for sticky header */
html {
	scroll-padding-top: 60px;
}

/* Add event dropdown animation */
#add-event-dropdown {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.2s ease-out, transform 0.2s ease-out;
	pointer-events: none;
}

#add-event-dropdown.show {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Center dropdown on larger screens */
@media (min-width: 640px) {
	#add-event-dropdown {
		transform: translateX(-50%) translateY(10px);
	}
	#add-event-dropdown.show {
		transform: translateX(-50%) translateY(0);
	}
}

/* Backdrop blur for transparent nav/bottom bar */
.backdrop-blur-sm {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* ============================================
   HEADER LOGO/BACK BUTTON TRANSITIONS
   ============================================ */

/* Smooth transitions for header elements when JS toggles visibility */
.header-logo,
.header-back-btn {
	transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

/* ============================================
   BOTTOM NAVIGATION TRANSITIONS
   ============================================ */

/* Bottom nav inner container needs relative positioning */
#tw-bottom-nav > div {
	position: relative;
	min-height: 60px;
}

/* Bottom nav sections - absolutely positioned for crossfade */
#tw-nav-dashboard,
#tw-nav-trip,
#tw-nav-event {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 0.2s ease-out;
}

/* Hidden state for nav sections */
#tw-nav-dashboard[data-visible="false"],
#tw-nav-trip[data-visible="false"],
#tw-nav-event[data-visible="false"] {
	opacity: 0;
	pointer-events: none;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
	#add-event-dropdown,
	.header-logo,
	.header-back-btn,
	#tw-nav-dashboard,
	#tw-nav-trip,
	#tw-nav-event {
		transition: none;
	}
}

/* ============================================
   PWA INSTALL PROMPT
   ============================================ */

/* Slide-up animation for install banner */
.pwa-slide-up {
	animation: pwaSlideUp 0.3s ease-out forwards;
}

@keyframes pwaSlideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Auto-hide install prompts when running as installed PWA */
@media (display-mode: standalone) {
	.pwa-install-prompt {
		display: none !important;
	}
}

/* Reduce motion preference for PWA prompts */
@media (prefers-reduced-motion: reduce) {
	.pwa-slide-up {
		animation: none;
	}
}