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



/* Landing page styles */
.bg-grid-pattern {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

.has-participant-color-badge {
    position: relative;
    padding-left: 32px !important;
  }
  
  .has-participant-color-badge::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 26px;
    background-color: var(--badge-color);
    border-radius: 9999px 0 0 9999px;
  }
  @keyframes fadeAway {
    0% {
      transform: translateX(0) translateY(0);
      opacity: 1;
    }
  
    100% {
      opacity: 0;
      transform: translateY(-20px);
      font-size: x-large;
      font-weight: 800;
    }
  }
  
  .fade-away {
    z-index: 99999;
    animation: fadeAway 1s ease-in-out;
  }
  .weird-points-centering * {
    text-align: center;
    line-height: 2;
    height: 100%;
    width: 100%;
  }  
  @view-transition {
    navigation: auto;
  }
  
  
  @keyframes shimmer-bounce {
    0% {
      background-position: -100%;
    }
    50% {
      background-position: 100%;
    }
    100% {
      background-position: -100%;
    }
  }
  
  .shimmer-text {
    background-size: 100%;
    animation: shimmer-bounce 10s infinite ease-in-out;
  }

  .home .edit-section {
    display: none;
  }
  
  .home.edit-mode .edit-section {
    display: flex;
    z-index: 100;
    pointer-events: all;
  }
  .home.edit-mode .edit-section form {
    z-index: 3;
    
  }
  .home .edit-button,
  .home .archive-button {
    visibility: hidden;

  }
  .home.edit-mode .edit-button,
  .home.edit-mode .archive-button {
    visibility: visible;
    z-index: 3;
  }
  .home.home.edit-mode .participant-button {
    pointer-events: none;
    cursor: not-allowed;
    background-color: #3b3b3b;
    opacity: 0.5;
    z-index: 3;
    width: 100%;
  }
  
  .home.home.edit-mode .task-content,
  .home.home.edit-mode .task-title {
    opacity: 0.5;
  }
  
  .home.edit-mode .task {
    cursor: move;
    position: relative;
    pointer-events: none;
  }
  .home.edit-mode .task::after {
    content: "\f047";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the text */
    color: rgba(255, 255, 255, 0.836);
    font-size: 16px;
    font-weight: bold;
    font: normal normal normal 14px / 1 FontAwesome;
    background-color: rgba(0, 0, 0, 0.25); /* Semi-transparent background */
    padding: 12px;
  
    text-align: center;
    align-content: center;
    z-index: 1; /* Ensure it appears above the content */
    pointer-events: none; /* Allow interactions to pass through */
    font-size: 2em;
    
  }
  
  .home.edit-mode .sortable-handle {
    width: 30%;
    height: 30%;
    position: absolute;
    top: 35%;
    left: 35%;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 2;
    pointer-events: all;
  }


  .sortable-handle {
    display: none;
  }

  /* Multi-participant timer styles */
  .participant-button.selected {
    opacity: 0.8;
    box-shadow: 0 0 0 2px #10b981, 0 0 0 4px rgba(16, 185, 129, 0.2);
  }
  
  .participant-button.selected::after {
    content: "✓";
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: #10b981;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
  }

  /* Hide Firebase auth buttons until JavaScript loads */
  .no-js [data-action*="firebase-auth"] {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
  }

  /* Household list expandable styles */
  .household-item.expanded .expand-icon {
    transform: rotate(180deg);
  }

  .household-item.current {
    border-color: rgb(99 102 241);
  }

  /* Global emoji font family for consistent cross-platform rendering */
  /* WebView uses system fonts only (set via JS), browsers use web fonts */
  *[data-emoji-picker-target="preview"],
  *[data-participant-avatar],
  .emoji,
  [class*="emoji"],
  emoji-picker,
  /* Apply to any element that might contain emojis */
  .participant-button,
  .w-12.h-12.rounded-full span,
  .w-6.h-6 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
  }

  /* Emoji Picker Theming */
  emoji-picker {
    --border-color: rgb(203 213 225); /* slate-300 */
    --background: rgb(255 255 255);
    --category-emoji-size: 1.375rem;
    --emoji-size: 1.75rem;
    --indicator-color: rgb(59 130 246); /* blue-500 */
    --num-columns: 8;
    --outline-color: rgb(59 130 246);
    --emoji-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  /* Dark mode theming for emoji picker */
  .dark emoji-picker,
  emoji-picker.dark {
    --border-color: rgb(75 85 99); /* gray-600 */
    --background: rgb(55 65 81); /* gray-700 */
    --input-border-color: rgb(75 85 99);
    --input-font-color: rgb(243 244 246); /* gray-100 */
    --input-placeholder-color: rgb(156 163 175); /* gray-400 */
    --outline-color: rgb(59 130 246);
    --category-font-color: rgb(209 213 219); /* gray-300 */
    --button-hover-background: rgb(75 85 99);
  }

  /* Mobile responsive emoji picker */
  @media (max-width: 640px) {
    emoji-picker {
      --num-columns: 6; /* Reduce from 8 to 6 columns on mobile */
      --emoji-size: 1.5rem; /* Slightly smaller emojis */
      --category-emoji-size: 1.25rem;
    }

    /* Fullscreen modal on mobile */
    .emoji-picker-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.75);
      z-index: 9999;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .emoji-picker-modal-content {
      width: 100%;
      max-width: 100%;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .emoji-picker-modal emoji-picker {
      max-height: 100%;
      flex: 1;
      overflow: hidden;
    }

    .emoji-picker-close-btn {
      background: rgb(239 68 68); /* red-500 */
      color: white;
      padding: 0.75rem 1.5rem;
      border-radius: 0.5rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      width: 100%;
      max-width: 400px;
      transition: background-color 0.2s;
    }

    .emoji-picker-close-btn:hover {
      background: rgb(220 38 38); /* red-600 */
    }

    .dark .emoji-picker-close-btn {
      background: rgb(239 68 68);
    }

    .dark .emoji-picker-close-btn:hover {
      background: rgb(220 38 38);
    }
  }

  /* Loading state for emoji picker */
  emoji-picker.is-loading {
    opacity: 0.5;
    pointer-events: none;
    cursor: wait;
  }