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

/* PicknDine Warm Theme Color Palette */
:root {
  /* Brand color palette */
  --pd-primary: #F26F3F; /* Main brand color from logo (orange) */
  --pd-primary-light: #F7916A; /* Lighter orange */
  --pd-primary-dark: #DD5927; /* Darker orange */
  --pd-secondary: #1E544C; /* Dark teal from logo text */
  --pd-secondary-light: #2C6F65; /* Lighter teal */
  --pd-secondary-dark: #15403A; /* Darker teal */
  
  /* Warm neutrals palette */
  --pd-background: #F3ECE3; /* Cream paper-like background */
  --pd-surface: #FFFFFF; /* Pure white */
  --pd-surface-alt: #F9F5F0; /* Slightly off-white for cards */
  --pd-surface-warm: #F5E6D8; /* Warm beige for alternate surfaces */
  
  /* Text colors */
  --pd-text: #2E2E2E; /* Almost black */
  --pd-text-light: #545454; /* Dark grey for secondary text */
  --pd-text-lighter: #777777; /* Medium grey for tertiary text */
  --pd-text-inverse: #FFFFFF; /* White text for dark backgrounds */
  
  /* Accent colors */
  --pd-terracotta: #E08F62; /* Terracotta */
  --pd-terracotta-light: #F3C7A1; /* Light terracotta */
  --pd-soft-red: #FC766A; /* Soft red for errors/alerts */
  --pd-sage: #B1C6B3; /* Sage green */
  --pd-mint: #88B6A3; /* Mint green for success states */
  --pd-yellow: #F9C97B; /* Warm yellow for ratings */
  
  /* Shadow colors */
  --pd-shadow-sm: 0 2px 4px rgba(177, 134, 95, 0.1);
  --pd-shadow-md: 0 4px 8px rgba(177, 134, 95, 0.15);
  --pd-shadow-lg: 0 8px 16px rgba(177, 134, 95, 0.2);
}

/* Import Poppins and Quicksand fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

/* Root element styles for better defaults */
html, body {
  background-color: var(--pd-background);
  color: var(--pd-text);
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Background Colors */
.bg-base { background-color: var(--pd-background) !important; }
.bg-mantle { background-color: var(--pd-surface-warm) !important; }
.bg-crust { background-color: var(--pd-surface-alt) !important; }
.bg-surface0 { background-color: var(--pd-surface) !important; }
.bg-surface1 { background-color: var(--pd-surface-alt) !important; }
.bg-surface2 { background-color: var(--pd-surface-warm) !important; }
.bg-mauve { background-color: var(--pd-primary) !important; }
.bg-lavender { background-color: var(--pd-primary-light) !important; }
.bg-blue { background-color: var(--pd-secondary) !important; }
.bg-sapphire { background-color: var(--pd-secondary-light) !important; }
.bg-sky { background-color: var(--pd-terracotta) !important; }
.bg-teal { background-color: var(--pd-terracotta-light) !important; }
.bg-green { background-color: var(--pd-mint) !important; }
.bg-yellow { background-color: var(--pd-yellow) !important; }
.bg-peach { background-color: var(--pd-terracotta) !important; }
.bg-maroon { background-color: var(--pd-terracotta-light) !important; }
.bg-red { background-color: var(--pd-soft-red) !important; }
.bg-pink { background-color: var(--pd-primary-light) !important; }
.bg-flamingo { background-color: var(--pd-primary) !important; }
.bg-rosewater { background-color: var(--pd-terracotta-light) !important; }

/* Text Colors */
.text-text { color: var(--pd-text) !important; }
.text-subtext1 { color: var(--pd-text-light) !important; }
.text-subtext0 { color: var(--pd-text-lighter) !important; }
.text-overlay2 { color: var(--pd-text-light) !important; }
.text-overlay1 { color: var(--pd-text-lighter) !important; }
.text-overlay0 { color: var(--pd-text-lighter) !important; }
.text-surface2 { color: var(--pd-text-lighter) !important; }
.text-surface1 { color: var(--pd-text-light) !important; }
.text-mauve { color: var(--pd-primary) !important; }
.text-lavender { color: var(--pd-primary-dark) !important; }
.text-blue { color: var(--pd-secondary) !important; }
.text-sapphire { color: var(--pd-secondary-light) !important; }
.text-sky { color: var(--pd-terracotta) !important; }
.text-teal { color: var(--pd-terracotta-light) !important; }
.text-green { color: var(--pd-mint) !important; }
.text-yellow { color: var(--pd-yellow) !important; }
.text-peach { color: var(--pd-terracotta) !important; }
.text-maroon { color: var(--pd-terracotta-light) !important; }
.text-red { color: var(--pd-soft-red) !important; }
.text-pink { color: var(--pd-primary-light) !important; }
.text-flamingo { color: var(--pd-primary) !important; }
.text-rosewater { color: var(--pd-terracotta-light) !important; }

/* Border Colors */
.border-surface2 { border-color: rgba(226, 143, 98, 0.2) !important; }
.border-mauve { border-color: var(--pd-primary) !important; }
.border-lavender { border-color: var(--pd-primary-light) !important; }
.border-blue { border-color: var(--pd-secondary) !important; }
.border-green { border-color: var(--pd-mint) !important; }
.border-red { border-color: var(--pd-soft-red) !important; }

/* Hover Colors */
.hover\:bg-surface1:hover { background-color: var(--pd-surface-alt) !important; }
.hover\:bg-surface2:hover { background-color: var(--pd-surface-warm) !important; }
.hover\:bg-mauve:hover { background-color: var(--pd-primary) !important; }
.hover\:bg-lavender:hover { background-color: var(--pd-primary-light) !important; }
.hover\:bg-maroon:hover { background-color: var(--pd-terracotta-light) !important; }
.hover\:bg-teal:hover { background-color: var(--pd-terracotta) !important; }
.hover\:text-mauve:hover { color: var(--pd-primary) !important; }
.hover\:text-lavender:hover { color: var(--pd-primary-light) !important; }
.hover\:text-teal:hover { color: var(--pd-terracotta) !important; }

/* Opacity Variants */
.bg-mauve\/20 { background-color: rgba(242, 111, 63, 0.2) !important; }
.bg-green\/20 { background-color: rgba(136, 182, 163, 0.2) !important; }
.bg-surface0\/50 { background-color: rgba(255, 255, 255, 0.5) !important; }
.bg-lavender\/20 { background-color: rgba(247, 145, 106, 0.2) !important; }
.bg-green\/10 { background-color: rgba(136, 182, 163, 0.1) !important; }
.bg-red\/10 { background-color: rgba(252, 118, 106, 0.1) !important; }
.bg-blue\/20 { background-color: rgba(30, 84, 76, 0.2) !important; }

/* Component Styles */
.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition-property: color, background-color, border-color, transform, box-shadow;
  transition-duration: 300ms;
  display: inline-block;
  text-align: center;
  box-shadow: var(--pd-shadow-sm);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--pd-shadow-md);
}

.btn-primary {
  background-color: var(--pd-primary);
  color: var(--pd-text-inverse);
}
.btn-primary:hover {
  background-color: var(--pd-primary-dark);
}

.btn-secondary {
  background-color: var(--pd-secondary);
  color: var(--pd-text-inverse);
}
.btn-secondary:hover {
  background-color: var(--pd-secondary-dark);
}

.btn-outline {
  border: 1px solid var(--pd-primary);
  color: var(--pd-primary);
  background-color: transparent;
}
.btn-outline:hover {
  background-color: rgba(242, 111, 63, 0.1);
  color: var(--pd-primary-dark);
}

.btn-danger {
  background-color: var(--pd-soft-red);
  color: var(--pd-text-inverse);
}
.btn-danger:hover {
  background-color: #e05e52;
}

.btn-success {
  background-color: var(--pd-mint);
  color: var(--pd-text-inverse);
}
.btn-success:hover {
  background-color: #76a090;
}

.card {
  background-color: var(--pd-surface);
  border-radius: 0.75rem;
  box-shadow: var(--pd-shadow-sm);
  overflow: hidden;
  transition: all 300ms;
  border: 1px solid rgba(226, 143, 98, 0.1);
}
.card:hover {
  box-shadow: var(--pd-shadow-md);
  transform: translateY(-2px);
}

.card-content {
  padding: 1.5rem;
}

.input {
  width: 100%;
  padding: 0.625rem;
  border: 1px solid rgba(226, 143, 98, 0.3);
  border-radius: 0.5rem;
  background-color: var(--pd-surface);
  color: var(--pd-text);
  transition: all 200ms;
}
.input:focus {
  border-color: var(--pd-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 111, 63, 0.2);
}

.select {
  padding: 0.625rem;
  border: 1px solid rgba(226, 143, 98, 0.3);
  border-radius: 0.5rem;
  background-color: var(--pd-surface);
  color: var(--pd-text);
  transition: all 200ms;
}
.select:focus {
  border-color: var(--pd-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 111, 63, 0.2);
}

.tag {
  background-color: var(--pd-surface-warm);
  color: var(--pd-text);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  display: inline-block;
  font-weight: 500;
}

.tag-primary {
  background-color: rgba(30, 84, 76, 0.15);
  color: var(--pd-secondary);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  display: inline-block;
  font-weight: 500;
}

.tag-success {
  background-color: rgba(136, 182, 163, 0.2);
  color: var(--pd-secondary);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  display: inline-block;
  font-weight: 500;
}

.tag-warning {
  background-color: rgba(249, 201, 123, 0.3);
  color: #9B6E2E;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  display: inline-block;
  font-weight: 500;
}

.alert-success {
  background-color: rgba(136, 182, 163, 0.2);
  border-left: 4px solid var(--pd-mint);
  color: var(--pd-secondary);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}

.alert-warning {
  background-color: rgba(249, 201, 123, 0.2);
  border-left: 4px solid var(--pd-yellow);
  color: #9B6E2E;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}

.alert-error {
  background-color: rgba(252, 118, 106, 0.1);
  border-left: 4px solid var(--pd-soft-red);
  color: var(--pd-soft-red);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}

.avatar {
  width: 4rem;
  height: 4rem;
  background-color: rgba(242, 111, 63, 0.2);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--pd-primary);
  border: 2px solid var(--pd-primary-light);
}

.stat-card {
  background-color: var(--pd-surface-alt);
  padding: 1.25rem;
  border-radius: 0.75rem;
  box-shadow: var(--pd-shadow-sm);
  border: 1px solid rgba(226, 143, 98, 0.1);
  transition: all 300ms;
}
.stat-card:hover {
  box-shadow: var(--pd-shadow-md);
  transform: translateY(-2px);
}

.stat-card-primary {
  background-color: rgba(242, 111, 63, 0.1);
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(242, 111, 63, 0.2);
  box-shadow: var(--pd-shadow-sm);
  transition: all 300ms;
}
.stat-card-primary:hover {
  box-shadow: var(--pd-shadow-md);
  transform: translateY(-2px);
}

.stat-card-success {
  background-color: rgba(136, 182, 163, 0.1);
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(136, 182, 163, 0.2);
  box-shadow: var(--pd-shadow-sm);
  transition: all 300ms;
}
.stat-card-success:hover {
  box-shadow: var(--pd-shadow-md);
  transform: translateY(-2px);
}

/* Common Tailwind overrides */
.bg-white {
  background-color: var(--pd-surface) !important;
}

.bg-gray-50 {
  background-color: var(--pd-background) !important;
}

.text-gray-600, .text-gray-700, .text-gray-800 {
  color: var(--pd-text) !important;
}

.text-white {
  color: var(--pd-text-inverse) !important;
}

.text-indigo-600 {
  color: var(--pd-primary) !important;
}

.hover\:text-indigo-800:hover {
  color: var(--pd-primary-dark) !important;
}

.hover\:bg-indigo-700:hover {
  background-color: var(--pd-primary-light) !important;
}

.bg-indigo-600 {
  background-color: var(--pd-primary) !important;
}

.border-t {
  border-top-color: rgba(226, 143, 98, 0.2) !important;
}

/* Enhance transitioning for hover effects */
a, button, .btn, .card {
  transition: all 0.3s ease-in-out;
}

/* Better form control styling */
input[type="text"], 
input[type="email"], 
input[type="password"],
input[type="search"],
input[type="date"],
textarea, 
select {
  background-color: var(--pd-surface);
  color: var(--pd-text);
  border: 1px solid rgba(226, 143, 98, 0.3);
  border-radius: 0.5rem;
  padding: 0.625rem;
  transition: all 200ms;
}

input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus, 
select:focus {
  border-color: var(--pd-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 111, 63, 0.2);
}

::placeholder {
  color: var(--pd-text-lighter);
  opacity: 0.7;
}

/* Star ratings */
.text-yellow-500, .text-yellow {
  color: var(--pd-yellow) !important;
}

.text-gray-300 {
  color: var(--pd-text-lighter) !important;
}

/* MapBox custom styling */
.mapboxgl-popup {
  max-width: 250px;
  font-family: 'Poppins', sans-serif;
}

.mapboxgl-popup-content {
  background-color: var(--pd-surface);
  color: var(--pd-text);
  border-radius: 0.75rem;
  padding: 0.75rem;
  box-shadow: var(--pd-shadow-md);
  border: 1px solid rgba(226, 143, 98, 0.1);
}

.mapboxgl-popup-close-button {
  color: var(--pd-text);
  right: 8px;
  top: 8px;
  font-size: 18px;
}

.mapboxgl-popup-close-button:hover {
  background-color: transparent;
  color: var(--pd-primary);
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
  border-bottom-color: var(--pd-surface);
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
  border-top-color: var(--pd-surface);
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  border-right-color: var(--pd-surface);
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  border-left-color: var(--pd-surface);
}

.mapboxgl-ctrl-logo {
  display: none !important;
}

.mapboxgl-ctrl-attrib {
  background-color: var(--pd-surface) !important;
  color: var(--pd-text-lighter) !important;
  border-radius: 0 0 0.25rem 0.25rem;
}

.mapboxgl-ctrl-attrib a {
  color: var(--pd-primary) !important;
}

.mapboxgl-ctrl button {
  background-color: var(--pd-surface) !important;
}

.mapboxgl-ctrl button:hover {
  background-color: var(--pd-surface-alt) !important;
}

.mapboxgl-ctrl-icon {
  filter: invert(0.2);
}

.mapbox-marker {
  box-shadow: 0 0 0 4px var(--pd-surface);
  transition: all 0.3s ease;
}

.mapbox-marker:hover {
  transform: scale(1.2);
  box-shadow: 0 0 0 6px var(--pd-surface-alt);
}

/* Custom gradient backgrounds */
.bg-gradient-warm {
  background: linear-gradient(135deg, var(--pd-background) 0%, var(--pd-surface-warm) 100%);
}

.bg-gradient-primary {
  background: linear-gradient(135deg, var(--pd-primary-light) 0%, var(--pd-primary) 100%);
}

.bg-gradient-secondary {
  background: linear-gradient(135deg, var(--pd-secondary-light) 0%, var(--pd-secondary) 100%);
}

/* Animation classes */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.duration-300 {
  transition-duration: 300ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-bounce {
  animation: bounce 1s infinite;
}
.animate-spin {
  animation: spin 1.5s linear infinite;
}
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-110 { transform: scale(1.1); }
.scale-125 { transform: scale(1.25); }
.scale-150 { transform: scale(1.5); }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

@keyframes bounce {
  0%, 100% { 
    transform: translateY(0); 
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% { 
    transform: translateY(-10px); 
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Loading spinner */
.spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--pd-text-lighter);
  border-top-color: var(--pd-primary);
  border-radius: 50%;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}