@import "tailwindcss";
/* Note: Leaflet CSS is loaded from /leaflet/leaflet.css in the layout */

/* Enable class-based dark mode (controlled by .dark class on html element) */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  /* Typography - Inter as default sans-serif */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  
  /* Primary Brand (Coral #FF5757) */
  --color-primary-1-50: #fff5f5;
  --color-primary-1-100: #ffe3e3;
  --color-primary-1-200: #ffc0c0;
  --color-primary-1-300: #ff9b9b;
  --color-primary-1-400: #ff6f6f;
  --color-primary-1-500: #FF5757;
  --color-primary-1-600: #e24646;
  --color-primary-1-700: #b83636;
  --color-primary-1-800: #8c2929;
  --color-primary-1-900: #5c1a1a;
  --color-primary-1-950: #3d1111;

  /* Secondary (Electric Blue #0a78e4) */
  --color-primary-2-50: #eaf4ff;
  --color-primary-2-100: #d4e9ff;
  --color-primary-2-200: #a8d4ff;
  --color-primary-2-300: #79bdff;
  --color-primary-2-400: #4aa2fb;
  --color-primary-2-500: #2286f2;
  --color-primary-2-600: #0a78e4;
  --color-primary-2-700: #0760b7;
  --color-primary-2-800: #054a8b;
  --color-primary-2-900: #033660;
  --color-primary-2-950: #022440;

  /* Accent (Crimson #cc012c) */
  --color-primary-3-50: #ffeaf0;
  --color-primary-3-100: #ffc9d7;
  --color-primary-3-200: #ff93af;
  --color-primary-3-300: #ff5c84;
  --color-primary-3-400: #f52c59;
  --color-primary-3-500: #cc012c;
  --color-primary-3-600: #a00122;
  --color-primary-3-700: #7a001b;
  --color-primary-3-800: #550013;
  --color-primary-3-900: #36000c;
  --color-primary-3-950: #200007;

  /* Ink (Charcoal #141317) */
  --color-primary-4-50: #e9e8ea;
  --color-primary-4-100: #c8c6cb;
  --color-primary-4-200: #a5a3a9;
  --color-primary-4-300: #7f7c82;
  --color-primary-4-400: #4f4d54;
  --color-primary-4-500: #2e2b33;
  --color-primary-4-600: #141317;
  --color-primary-4-700: #0d0d10;
  --color-primary-4-800: #070709;
  --color-primary-4-900: #030304;
  --color-primary-4-950: #000000;

  /* Surface colors for cards/backgrounds */
  --color-surface-50: #fafafa;
  --color-surface-100: #f5f5f5;
  --color-surface-200: #e5e5e5;
  --color-surface-300: #d4d4d4;
  --color-surface-400: #a3a3a3;
  --color-surface-500: #737373;
  --color-surface-600: #525252;
  --color-surface-700: #404040;
  --color-surface-800: #262626;
  --color-surface-900: #171717;
  --color-surface-950: #0a0a0a;
}


/* ==========================================================================
   COMPONENT UTILITY CLASSES
   Design system components for consistent UI patterns
   
   NOTE: In Tailwind v4, @apply only works with built-in utilities,
   not with custom classes. Each class must be self-contained.
   ========================================================================== */

/* Cards - Standard container with dark/light mode support */
.card {
  @apply bg-white dark:bg-surface-800 rounded-2xl border border-surface-200 dark:border-surface-800;
}

.card-elevated {
  @apply bg-white dark:bg-surface-800 rounded-2xl border border-surface-200 dark:border-surface-800 shadow-lg;
}

.card-interactive {
  @apply bg-white dark:bg-surface-800 rounded-2xl border border-surface-200 dark:border-surface-800 transition-all duration-200 hover:shadow-md hover:border-surface-300 dark:hover:border-surface-700 active:scale-[0.99];
}

/* Section Headers - Bold left-aligned titles */
.section-header {
  @apply text-xl font-bold text-surface-900 dark:text-white;
}

.section-header-sm {
  @apply text-lg font-semibold text-surface-900 dark:text-white;
}

/* Avatar Sizes - Consistent avatar dimensions with 44px min for touch */
.avatar-sm {
  @apply h-8 w-8 rounded-full object-cover flex-shrink-0;
}

.avatar-md {
  @apply h-10 w-10 rounded-full object-cover flex-shrink-0;
}

.avatar-lg {
  @apply h-12 w-12 rounded-full object-cover flex-shrink-0;
}

.avatar-xl {
  @apply h-16 w-16 rounded-full object-cover flex-shrink-0;
}

.avatar-2xl {
  @apply h-20 w-20 rounded-full object-cover flex-shrink-0;
}

/* Avatar Placeholder - For users without profile photos */
.avatar-placeholder {
  @apply flex items-center justify-center bg-gradient-to-br from-primary-2-500 to-primary-2-700 text-white font-semibold;
}

/* Badge variants - Status and role indicators */
.badge {
  @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold;
}

.badge-primary {
  @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-primary-1-100 dark:bg-primary-1-900/30 text-primary-1-700 dark:text-primary-1-300;
}

.badge-secondary {
  @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-primary-2-100 dark:bg-primary-2-900/30 text-primary-2-700 dark:text-primary-2-300;
}

.badge-success {
  @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300;
}

.badge-warning {
  @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300;
}

.badge-neutral {
  @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400;
}

/* Button variants - Touch-friendly with 44px min height */
.btn {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl font-semibold text-sm transition-all duration-200 min-h-[44px] active:scale-[0.98];
}

.btn-primary {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl font-semibold text-sm transition-all duration-200 min-h-[44px] active:scale-[0.98] bg-primary-1-500 hover:bg-primary-1-600 text-white shadow-md hover:shadow-lg;
}

.btn-secondary {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl font-semibold text-sm transition-all duration-200 min-h-[44px] active:scale-[0.98] bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 text-surface-900 dark:text-white border border-surface-200 dark:border-surface-700;
}

.btn-ghost {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl font-semibold text-sm transition-all duration-200 min-h-[44px] active:scale-[0.98] hover:bg-surface-100 dark:hover:bg-surface-800 text-surface-700 dark:text-surface-300;
}

.btn-sm {
  @apply px-3 py-1.5 text-xs min-h-[36px];
}

.btn-lg {
  @apply px-6 py-3 text-base min-h-[52px];
}

/* Floating Action Button - Primary action trigger */
.fab {
  @apply fixed bottom-24 right-4 md:bottom-8 md:right-8 z-40 flex items-center justify-center w-14 h-14 rounded-full bg-primary-1-500 hover:bg-primary-1-600 text-white shadow-xl hover:shadow-2xl transition-all duration-200 active:scale-95;
}

/* Input styling - Form fields */
.input {
  @apply w-full px-4 py-3 rounded-xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 text-surface-900 dark:text-white placeholder:text-surface-400 dark:placeholder:text-surface-500 focus:outline-none focus:ring-2 focus:ring-primary-2-500 focus:border-transparent transition-all;
}

.input-label {
  @apply block text-sm font-medium text-surface-700 dark:text-surface-300 mb-1.5;
}

/* Empty State - Consistent empty state design */
.empty-state {
  @apply flex flex-col items-center justify-center py-12 px-4 text-center;
}

.empty-state-icon {
  @apply w-16 h-16 rounded-full bg-surface-100 dark:bg-surface-800 flex items-center justify-center mb-4;
}

.empty-state-title {
  @apply text-lg font-semibold text-surface-900 dark:text-white mb-2;
}

.empty-state-text {
  @apply text-sm text-surface-500 dark:text-surface-400 max-w-sm;
}

/* Nav item - Bottom navigation touch targets */
.nav-item {
  @apply flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[48px] text-surface-300 transition-colors hover:text-white;
}

.nav-item-active {
  @apply flex flex-col items-center justify-center gap-1 py-2 px-3 min-w-[64px] min-h-[48px] transition-colors text-primary-1-500;
}

/* Activity item - Feed list styling */
.activity-item {
  @apply flex items-start gap-3 py-3;
}

.activity-avatar {
  @apply h-10 w-10 rounded-full object-cover flex-shrink-0;
}

.activity-content {
  @apply flex-1 min-w-0;
}

.activity-text {
  @apply text-sm text-surface-700 dark:text-surface-300;
}

.activity-time {
  @apply text-xs text-surface-500 dark:text-surface-500 mt-0.5;
}

/* Sortable.js drag and drop states */
.sortable-ghost {
  opacity: 0.4;
}

.sortable-chosen {
  cursor: grabbing !important;
}

.sortable-drag {
  opacity: 1;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: rotate(2deg);
}

.sortable-fallback {
  opacity: 1 !important;
}

/* Safe area padding for mobile devices with notches */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ==========================================================================
   MATERIAL SYMBOLS ICONS
   Google Material Symbols Outlined with variable font settings
   Usage: <span class="material-symbols-outlined">icon_name</span>
   Filled: <span class="material-symbols-outlined filled">icon_name</span>
   ========================================================================== */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.material-symbols-outlined.filled {
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Size variants for Material Symbols */
.material-symbols-outlined.text-sm {
  font-size: 18px;
}

.material-symbols-outlined.text-base {
  font-size: 20px;
}

.material-symbols-outlined.text-lg {
  font-size: 24px;
}

.material-symbols-outlined.text-xl {
  font-size: 28px;
}

.material-symbols-outlined.text-2xl {
  font-size: 32px;
}

.material-symbols-outlined.text-3xl {
  font-size: 36px;
}

/* ==========================================================================
   TABS COMPONENT
   Simple tab navigation with active state styling
   ========================================================================== */

.tabs-container {
  @apply flex items-center gap-1 p-1 bg-surface-100 dark:bg-surface-800 rounded-xl;
}

.tabs-button {
  @apply px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white;
}

.tabs-button.tabs-active {
  @apply bg-white dark:bg-surface-700 text-surface-900 dark:text-white shadow-sm;
}

/* ==========================================================================
   LEAFLET MAP OVERRIDES
   Custom styling for Leaflet maps and bottle markers
   ========================================================================== */

/* Fix Leaflet default icon path issues with bundlers */
.leaflet-default-icon-path {
  background-image: url("leaflet/dist/images/marker-icon.png");
}

/* Custom bottle marker container - reset Leaflet defaults */
.bottle-marker-container {
  background: transparent !important;
  border: none !important;
}

/* Bottle marker styling */
.bottle-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottle-marker-image {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottle-marker-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bottle-marker-rating {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

/* Bottle popup styling - always light background for readability */
.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  padding: 0 !important;
  background: white !important;
  color: #111827 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

.leaflet-popup-content {
  margin: 12px 14px !important;
}

.leaflet-popup-tip {
  background: white !important;
}

/* Close button styling - positioned inside the popup */
.leaflet-popup-close-button {
  color: #9ca3af !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  text-align: center !important;
  padding: 0 !important;
  top: 4px !important;
  right: 4px !important;
  background: #f3f4f6 !important;
  border-radius: 50% !important;
}

.leaflet-popup-close-button:hover {
  color: #374151 !important;
  background: #e5e7eb !important;
}

/* Dark mode map adjustments - only for tiles, popups stay light */
.dark .leaflet-tile {
  filter: brightness(0.9) contrast(1.1);
}

.dark .bottle-marker-image {
  background: #262626;
  border-color: #404040;
}

/* ==========================================================================
   MULTISELECT DROPDOWN DARK MODE
   Custom styling for the multiselect component in dark mode
   ========================================================================== */

/* Selected option in dropdown */
.multiselect-option-selected {
  background-color: #d4e9ff; /* primary-2-100 */
  color: #0760b7; /* primary-2-700 */
}

.dark .multiselect-option-selected {
  background-color: rgba(3, 54, 96, 0.4); /* primary-2-900 with opacity */
  color: #79bdff; /* primary-2-300 */
}

/* Unselected option hover */
.multiselect-option-unselected:hover {
  background-color: #f9fafb; /* gray-50 */
}

.dark .multiselect-option-unselected:hover {
  background-color: #525252; /* surface-600 */
}

/* Checkmark color */
.multiselect-checkmark {
  color: #0a78e4; /* primary-2-600 */
}

.dark .multiselect-checkmark {
  color: #4aa2fb; /* primary-2-400 */
}