/* Non-utility CSS: animations, print, responsive fixes */
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

@keyframes fadein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadein { animation: fadein .15s ease-out; }
.modal { animation: fadein .15s ease-out; }

/* ===========================================================
 * Responsive fixes for narrow viewports (mobile + small windows)
 * =========================================================== */

/* Any card body that contains a table scrolls horizontally instead of
 * pushing the page wider than the viewport. Modern browsers (Safari 15.4+,
 * Chrome 105+, Firefox 121+) all support :has(). */
.card-body:has(> .table),
.card-body:has(> table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Phone portrait (≤ 640px) */
@media (max-width: 640px) {
  /* Tighter table spacing */
  .table th, .table td { padding: 0.4rem 0.55rem; font-size: 12.5px; }

  /* Card headers — let inputs/filters take the full width row, stack neatly */
  .card-header { padding: 0.6rem 0.75rem; gap: 0.5rem; flex-direction: column; align-items: stretch; }
  .card-header > * { width: 100%; }
  .card-header .flex { flex-wrap: wrap; }
  .card-header .input,
  .card-header .select { width: 100%; max-width: none; }

  /* Card body padding */
  .card-body:not(.p-0) { padding: 0.85rem; }

  /* Modals fill the screen on phones */
  .modal-backdrop { padding: 0.5rem; }
  .modal { margin: 0.5rem 0 !important; max-width: 100% !important; border-radius: 0.5rem; }

  /* Brand area: hide tagline; smaller logo */
  #company-tagline { display: none; }
  #company-name { font-size: 0.95rem; }
  header svg, header img.w-9, header img.w-10 { width: 32px !important; height: 32px !important; }

  /* Header layout: brand on its own row, search full-width row, nav scrolls */
  header > div { gap: 0.5rem !important; }
  header .relative { width: 100%; max-width: 100% !important; order: 2; }
  header nav { order: 3; width: 100%; justify-content: flex-start !important; }
  #global-search { width: 100%; }

  /* Buttons should never overflow the screen */
  .btn-primary, .btn-secondary, .btn-danger { padding-left: 0.6rem; padding-right: 0.6rem; }

  /* Quick-action / page-action button groups wrap */
  section > .flex.flex-wrap { gap: 0.4rem; }
}

/* Tablet & narrow laptop window (≤ 900px) — keep nav on one row but
 * allow horizontal scrolling so all items remain reachable. */
@media (max-width: 900px) {
  #nav {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    max-width: 100%;
    padding-bottom: 2px;
  }
  #nav::-webkit-scrollbar { height: 3px; }
  #nav .nav-btn { white-space: nowrap; flex-shrink: 0; }

  /* Stop search from squeezing the brand label */
  header .relative.flex-1 { min-width: 160px; }
}

/* Print (invoices) — unchanged */
@media print {
  header, footer, #nav, .no-print { display: none !important; }
  body { background: white !important; color: #000; }
  body.printing-invoice .modal-backdrop {
    position: static; background: white; padding: 0; overflow: visible;
  }
  body.printing-invoice .modal {
    box-shadow: none; max-width: 100% !important; margin: 0; border: none;
  }
  body.printing-invoice .modal > .card-header,
  body.printing-invoice .modal > div:last-child { display: none !important; }
  body.printing-invoice #invoice-print { color: #000 !important; }
  body.printing-invoice * { color-adjust: exact !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}