/**
 * Mobile Hotfix CSS - BoozeButler
 * Small patches for mobile UI issues without breaking desktop
 * 
 * What changed / Why safe:
 * - All fixes are scoped to mobile only via @media (max-width: 768px)
 * - Uses !important only where necessary to override conflicting rules
 * - No structural changes, only visual adjustments
 */

/* ============================================================
   C) Header too large on mobile - reduce title font size
   ============================================================ */
@media (max-width: 768px) {
  .bb-header-title {
    font-size: 0.875rem !important; /* Further reduced from 1rem to 0.875rem (14px) */
    line-height: 1.2 !important; /* Tighter line height */
    max-width: 150px !important; /* More aggressive truncation */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .bb-header-logo__text {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    max-width: calc(100vw - 120px) !important; /* Account for logo + menu button */
  }
  
  /* Ensure logo + title row doesn't push content off-screen */
  .bb-header-left {
    min-width: 0 !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
  }
  
  .bb-header-logo {
    flex-shrink: 0 !important;
    min-width: auto !important;
  }
  
  /* Logo size increased by 30% on mobile (68px * 0.75 = 51px for mobile, but keep larger for visibility) */
  .bb-header-logo img,
  .bb-logo,
  .bb-logo-img {
    width: 52px !important; /* Increased from 40px to match 30% larger size (68px * 0.75 ≈ 51px, rounded to 52px) */
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
  }
  
  /* ALWAYS hide brand wordmark on mobile (subtitle provides branding) */
  .bb-brand-wordmark {
    display: none !important;
  }
  
  /* ALWAYS show header subtitle on mobile (replaces wordmark branding) */
  .bb-header-subtitle {
    display: block !important;
    font-size: 0.75rem !important;
    margin-top: 1px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Allow title to wrap if needed, but keep subtitle on one line */
  .bb-header-logo__text {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
  
  .bb-header-title {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   E) AI Bartender textbox and button layout on mobile
   ============================================================ */
@media (max-width: 768px) {
  /* Change layout to vertical: textarea full width, button underneath */
  .chat-input-area {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-sm, 8px) !important;
    padding: var(--space-md, 16px) !important;
  }
  
  /* Textarea full width on mobile */
  #chatInput,
  .chat-input {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: none !important; /* Remove flex: 1 */
    min-height: 120px !important;
    padding: var(--space-md, 16px) !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
  }
  
  /* Button underneath, normal size (not full width) */
  #chatSubmitBtn,
  .chat-submit-btn {
    width: auto !important;
    min-width: auto !important;
    max-width: 200px !important; /* Reasonable button size */
    align-self: flex-start !important; /* Left align button */
    padding: var(--space-sm, 8px) var(--space-lg, 24px) !important;
    font-size: 0.9375rem !important; /* Slightly smaller font */
  }
}

/* ============================================================
   I) Analytics Metrics Overview pills too large + numbers not centered
   ============================================================ */
@media (max-width: 768px) {
  .analytics-metric-card {
    padding: var(--space-sm, 8px) var(--space-md, 16px) !important;
    min-height: 80px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: var(--space-xs, 4px) !important;
  }
  
  .analytics-metric-card__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  .analytics-metric-card__value {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  .analytics-metric-card__label {
    text-align: center !important;
    width: 100% !important;
  }
  
  .analytics-metric-card__icon-container {
    margin-bottom: var(--space-xs, 4px) !important;
  }
}