/* Zero Day Dad mobile readability overrides
   Keeps desktop styling intact while making phone buttons/tabs legible and tappable. */
@media (max-width: 760px) {
  :root {
    --mobile-button-font: clamp(0.95rem, 3.7vw, 1.08rem);
    --mobile-small-button-font: clamp(0.9rem, 3.4vw, 1rem);
  }

  button,
  .btn,
  .button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a.btn,
  a.button,
  .tab,
  .nav-tab,
  .cat-tab,
  .filter-tab,
  .chip,
  .pill,
  .tag,
  .quick-add .btn,
  .btn-pixel,
  .btn-sm,
  .action-btn,
  .primary-action,
  .secondary-action {
    font-size: var(--mobile-button-font) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.01em !important;
    min-height: 44px !important;
    padding: 0.72rem 0.9rem !important;
    white-space: normal !important;
    text-wrap: balance;
  }

  .tabs,
  .tab-bar,
  .nav-tabs,
  .cat-tabs,
  .quick-add,
  .btn-row,
  .grocery-actions {
    gap: 0.5rem !important;
  }

  .tabs .tab,
  #mainTabs .tab,
  #dayTabs .tab {
    flex: 0 0 auto !important;
    min-width: 82px !important;
  }

  .btn-sm,
  .cat-tab,
  .chip,
  .pill,
  .tag,
  small button,
  button small {
    font-size: var(--mobile-small-button-font) !important;
  }

  input,
  select,
  textarea {
    font-size: 1rem !important;
  }
}

@media (max-width: 380px) {
  button,
  .btn,
  .button,
  [role="button"],
  .tab,
  .cat-tab,
  .quick-add .btn,
  .btn-pixel,
  .btn-sm,
  .action-btn {
    font-size: 0.95rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}