/*
 * 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.
 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* Safe Area Support for iOS/Android */
/* Note: Bottom safe area is handled by fixed bottom nav (_mobile_bottom_nav.html.erb) */
/* Only apply top/left/right safe areas to avoid double padding on bottom */
html {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

body {
  /* Prevent content from going under system UI */
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* Remove default disclosure triangle markers on all details/summary elements */
summary {
  list-style: none;
  list-style-type: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::marker {
  display: none;
  content: '';
}

.input-text-field {
  @apply block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-primary sm:text-sm/6;
}

/* Hotwire Combobox Customization */
.hw-combobox__main__wrapper {
  @apply w-full border border-gray-300 text-sm rounded-md focus-within:border-primary focus-within:outline-none focus-within:ring-2 focus-within:ring-primary;
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
  width: 100% !important;
  max-width: none !important;
}

.hw-combobox {
  @apply w-full block;
  flex: 1 !important;
  width: 100% !important;
  max-width: none !important;
}

.hw-combobox__input {
  @apply w-full border-0 focus:ring-0 focus:outline-none text-sm px-3 py-2;
  min-width: 0 !important;
  width: 100% !important;
}

.hw-combobox__group__label {
  @apply px-3 py-1.5 text-xs bg-gray-50 uppercase tracking-wide font-medium text-gray-600;
}

.hw-combobox__listbox {
  @apply rounded-md shadow-lg border border-gray-200 bg-white;
}

.hw-combobox__option {
  @apply px-4 py-2 cursor-pointer text-sm text-gray-900 hover:bg-primary/10;
}

.hw-combobox__option[aria-selected="true"] {
  @apply bg-primary/20 text-primary-600;
}

.hw-combobox__handle {
  @apply text-gray-400 hover:text-gray-600;
}

/* Custom Radio Button Styles */
.radio-indicator {
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.08);
}

label:hover .radio-indicator {
  background-color: #FFDDDB;
  border-width: 2px;
  border-color: #E63939;
  box-shadow: none;
}

input[type='radio']:checked + .radio-indicator {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='5' fill='%23E63939'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: none;
  background-color: #FFDDDB;
  border-width: 2px;
  border-color: #E63939;
}

/* Custom Checkbox Styles */
.checkbox-indicator {
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.08);
}

label:has(input[type='checkbox']:focus) {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #FF4444;
  border-radius: 0.25rem;
}

label:hover .checkbox-indicator {
  background-color: #FFDDDB;
  border-width: 2px;
  border-color: #E63939;
  box-shadow: none;
}

input[type='checkbox']:checked + .checkbox-indicator {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='3' fill='%23E63939'/%3E%3Cpath d='M12.207 5.207a1 1 0 0 0-1.414-1.414L7 7.586 5.207 5.793a1 1 0 0 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l4.5-4.5z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: none;
  background-color: #FFDDDB;
  border-width: 2px;
  border-color: #E63939;
}

/* Shopping List Specific Checkbox Styles */
[data-shopping-list-target="item"] input[type='checkbox']:checked + .checkbox-indicator {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 175 175' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E63939' d='m32.794 161.91c-3.325-0.48-6.217-1.15-6.428-1.49s-1.189-1.91-2.173-3.48c-2.766-4.41-4.696-9.18-7.803-19.28-5.537-18-6.615-22.68-5.874-25.52 1.145-4.38 11.067-10.56 17.246-10.75 4.986-0.15 5.566 0.28 8.466 6.27 1.712 3.53 4.223 9.16 5.579 12.5s3.341 6.07 4.411 6.07c1.069 0 5.099-4.98 8.955-11.07s7.617-11.76 8.359-12.59c0.742-0.84 2.177-3.087 3.188-5.002 4.337-8.211 39.47-56.403 49.93-68.482 2.38-2.75 4.33-5.475 4.33-6.057 0-0.581 3.38-3.243 7.5-5.915 5.64-3.651 9.63-5.061 16.08-5.671 11.93-1.128 13.05-0.046 8.03 7.726-2.26 3.49-5.32 7.632-6.81 9.203s-5.91 7.036-9.83 12.143c-3.91 5.107-7.81 9.928-8.68 10.714-0.86 0.786-3.07 3.679-4.93 6.429-1.85 2.75-3.72 5.321-4.15 5.714-3.73 3.407-43.814 59.198-47.205 65.718-1.023 1.96-2.245 3.89-2.717 4.28s-4.581 6.32-9.131 13.17c-4.551 6.85-8.966 12.88-9.812 13.4-3.1 1.92-10.641 2.82-16.531 1.97z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 85%;
  box-shadow: none;
  background-color: transparent;
  border-width: 0;
  border-color: transparent;
}

/* Shopping List Item States */
.shopping-item--removed {
  @apply opacity-60 bg-gray-50;
}

.shopping-item--removed:hover {
  @apply bg-gray-100;
}

.shopping-item--conflict {
  @apply border-l-4 border-warning bg-warning/10;
}

.shopping-item--locked {
  @apply bg-warning/10;
}

/* Shopping List Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
    background-color: rgb(255, 184, 77, 0.3);
  }
}

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

.shopping-item--adding {
  animation: fadeIn 0.5s ease-out;
}

.shopping-item--removing {
  animation: fadeOut 0.5s ease-out;
}

.shopping-item--updating {
  animation: pulse 0.6s ease-in-out;
}

.shopping-item--marking-removed {
  animation: slideFromLeft 0.4s ease-out;
}