/* =====================================================
   SahiHisab — Walk-in Orders Mobile Fixes
   Targeted fixes for phone-sized screens
   ===================================================== */

/* ─── Header: tighter padding on mobile ────────────── */
@media (max-width: 480px) {
  body .wi-header {
    padding: 8px 14px 10px;
    align-items: center;
  }

  body .wi-header-title {
    font-size: 1.15rem;
  }

  body .wi-header-subtitle {
    font-size: 0.7rem;
  }

  body .wi-header-actions {
    gap: 8px;
  }

  body .wi-add-fab {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  body .wi-add-fab .material-symbols-rounded {
    font-size: 1.1rem;
  }
}

/* ─── Filter Pills: tighter on small screens ──────── */
@media (max-width: 480px) {
  body .wi-filters {
    padding: 6px 14px 10px;
    gap: 6px;
  }

  body .wi-filter-pill {
    min-height: 44px;
    padding: 0 12px;
    font-size: 1rem;
  }
}

/* ─── List Cards: compact on mobile ───────────────── */
@media (max-width: 480px) {
  body .wi-orders-list {
    padding: 6px 12px 16px;
    gap: 8px;
  }

  body .wi-card {
    padding: 12px;
    border-radius: 12px;
    gap: 8px;
  }

  body .wi-card-type-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  body .wi-card-type-icon .material-symbols-rounded {
    font-size: 1.1rem;
  }

  body .wi-card-name {
    font-size: 0.82rem;
  }

  body .wi-card-meta {
    font-size: 0.72rem;
  }

  body .wi-status-badge {
    height: 22px;
    padding: 0 8px;
    font-size: 0.69rem;
  }

  body .wi-card-total {
    font-size: 0.92rem;
  }

  body .wi-card-paid,
  body .wi-card-due,
  body .wi-card-paid-full {
    font-size: 0.7rem;
  }

  body .wi-card-payment-info {
    gap: 6px;
  }

  body .wi-card-date {
    font-size: 0.69rem;
  }

  body .wi-card-date .material-symbols-rounded {
    font-size: 0.75rem;
  }
}

/* ─── Grid Cards: single column on tiny phones ────── */
@media (max-width: 380px) {
  body .wi-orders-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 6px 12px 16px;
  }
}

@media (min-width: 381px) and (max-width: 480px) {
  body .wi-orders-grid {
    gap: 8px;
    padding: 6px 12px 16px;
  }

  body .wi-grid-card {
    padding: 10px;
    border-radius: 12px;
    gap: 8px;
  }

  body .wi-grid-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  body .wi-grid-card-icon .material-symbols-rounded {
    font-size: 0.9rem;
  }

  body .wi-grid-card .wi-status-badge {
    height: 20px;
    padding: 0 6px;
    font-size: 0.65rem;
  }

  body .wi-grid-card-name {
    font-size: 0.78rem;
  }

  body .wi-grid-card-type {
    font-size: 0.69rem;
  }

  body .wi-grid-card-amount {
    font-size: 0.85rem;
  }

  body .wi-grid-card-due-tag,
  body .wi-grid-card-paid-tag {
    font-size: 0.65rem;
  }
}

/* ─── Wizard Stepper: 7 steps fit on mobile ────────── */
@media (max-width: 480px) {

  /* Ensure stepper scrolls smoothly with active step visible */
  body .wizard-stepper {
    scroll-snap-type: x proximity;
    scroll-padding: 0 12px;
  }

  body .step-item {
    scroll-snap-align: center;
    padding: 2px;
  }

  body .step-number {
    width: 22px;
    height: 22px;
  }

  body .step-number .material-symbols-rounded {
    font-size: 0.72rem;
  }

  body .step-connector {
    width: 10px;
    margin: 0 1px;
  }
}

/* ─── Wizard Nav: proper spacing above bottom nav ──── */
@media (max-width: 768px) {
  body .wi-wizard-nav {
    padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 10px);
  }

  body .wi-wizard-nav .btn {
    font-size: 1rem;
    min-height: 44px;
  }
}

/* ─── Type Grid: compact cards on mobile ──────────── */
@media (max-width: 480px) {
  body .wi-type-card {
    padding: 10px 6px;
    min-width: 78px;
  }

  body .wi-type-card .material-symbols-rounded {
    font-size: 1.25rem;
  }

  body .wi-type-card > div {
    font-size: 0.72rem;
  }
}

/* ─── Wizard Content: enough bottom padding ────────── */
@media (max-width: 768px) {
  body #wiStepContent {
    padding-bottom: 140px;
  }
}

/* ─── Spec Fields: tighter layout on mobile ────────── */
@media (max-width: 480px) {

  /* Multiselect chips smaller */
  body .wi-multiselect label {
    padding: 5px 10px;
    font-size: 0.8rem;
  }

  /* Item row grid: better columns */
  body .wi-item-row {
    padding: 8px;
    margin-bottom: 6px;
  }
}

/* ─── FB Package Cards: responsive grid ────────────── */
@media (max-width: 480px) {
  body #fbPackageGrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body #fbPackageGrid .package-card {
    padding: 12px;
  }
}

/* ─── FB Addon Cards: responsive grid ──────────────── */
@media (max-width: 480px) {
  body #fbAddonGrid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body .fb-addon-card {
    padding: 10px;
  }
}

/* ─── FB Expenses: input widths on mobile ──────────── */
@media (max-width: 480px) {
  body .fb-expense-input {
    width: 100px;
    min-height: 44px;
    font-size: 1rem;
  }
}

/* ─── FB Payment: delivery days grid ───────────────── */
@media (max-width: 380px) {

  /* On very small phones, stack delivery days 2+1 */
  body #wiStepContent [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── FB Review: compact pricing section ───────────── */
@media (max-width: 480px) {

  /* Delivery timeline badges */
  body #wiStepContent .review-section+div[style*="display:flex;gap:8px"] > div {
    padding: 6px 8px;
    font-size: 0.72rem;
  }
}

/* ─── Detail Modal: action buttons on mobile ──────── */
@media (max-width: 480px) {
  body .wi-detail-actions {
    gap: 6px;
  }

  body .wi-detail-actions .btn {
    font-size: 1rem;
    min-height: 44px;
    padding: 6px 8px;
  }
}

/* ─── Empty State: compact on mobile ──────────────── */
@media (max-width: 480px) {
  body .wi-empty {
    padding: 36px 20px;
  }

  body .wi-empty .material-symbols-rounded {
    font-size: 2.5rem;
    margin-bottom: 8px;
  }

  body .wi-empty p {
    font-size: 0.82rem;
  }
}

/* ─── Pagination: compact on mobile ───────────────── */
@media (max-width: 480px) {
  body #walkInPagination {
    padding: 0 12px 16px;
  }
}

/* ─── Mobile overflow containment ────────────────── */
@media (max-width: 768px) {

  /* Walk-in header — prevent actions from pushing wider */
  body .wi-header {
    max-width: 100%;
    overflow: hidden;
  }

  /* Walk-in filters — already overflow-x:auto, ensure mask doesn't escape */
  body .wi-filters {
    max-width: 100%;
  }

  /* Walk-in cards — truncate long names */
  body .wi-card-info {
    overflow: hidden;
  }

  /* Grid cards — prevent overflow */
  body .wi-grid-card {
    overflow: hidden;
  }
}

@media (max-width: 480px) {

  /* Card bottom row — truncate long payment text */
  body .wi-card-total {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}