html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
html { -webkit-text-size-adjust: 100%; }

/* Flash toast animation */
.flash-toast { animation: toast-in .25s ease-out, toast-out .4s ease-in 4s forwards; }
@keyframes toast-in { from { transform: translateX(110%); opacity:0; } to { transform: translateX(0); opacity:1; } }
@keyframes toast-out { to { transform: translateX(110%); opacity: 0; } }

/* Make tables scroll smoothly on touch */
.overflow-x-auto { -webkit-overflow-scrolling: touch; }

/* Min touch targets — accessibility 48px */
button, a.h-12, input, select, textarea { min-height: 44px; }
button.w-9, a.w-9 { min-height: 36px; }
.h-11 { min-height: 44px; }

/* ─────────── Desktop layout (sidebar + main gap) ─────────────────────
   The shipped tailwind.min.css does NOT include w-64 / lg:ml-64 / lg:pl-64,
   so we pin the sidebar width and the main offset deterministically here
   to guarantee a permanent visible gap between the side menu and the page
   content (and a small breathing space below the fixed header). */
/* ─────────── Authenticated main: guaranteed top clearance ───────────
   The fixed top header is 4rem (h-16). The shipped tailwind.min.css does
   NOT include pt-20, so on mobile the page content was sliding under the
   header. Force a solid top padding for any main that follows the
   sidebar (i.e. authenticated layout) on every viewport. */
aside#sidebar ~ main {
  padding-top: 5rem !important;       /* 4rem header + 1rem breathing room */
}

@media (min-width: 1024px) {
  aside#sidebar {
    width: 16rem !important;          /* fixed sidebar width */
  }
  /* Only the authenticated main (which is a sibling of the sidebar) gets
     the offset. Login / unauth pages have no aside#sidebar, so they keep
     their default centered layout. */
  aside#sidebar ~ main {
    margin-left: 16rem !important;    /* clear the sidebar */
    padding-left: 2rem !important;    /* permanent gap from sidebar edge */
    padding-right: 2rem !important;   /* matching right gutter */
    padding-top: 5.5rem !important;   /* breathing space below header */
  }
}

/* ─────────── Header: firm, opaque, professional on mobile ──────────
   Replace the semi-transparent backdrop-blur with a solid background so
   page text cannot bleed through, and add a slightly stronger shadow
   so the header feels anchored to the top of the viewport. */
header.fixed {
  background-color: #ffffff !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 12px -2px rgba(0,0,0,0.08) !important;
}
.dark header.fixed {
  background-color: #18181b !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 12px -2px rgba(0,0,0,0.5) !important;
}

/* Spinner */
.loading-spinner.show { display: inline-block; }

/* ─────────── MOBILE-FIRST UX FIXES ─────────── */

/* iOS: prevent input auto-zoom on focus (Safari zooms when font-size < 16px) */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea {
    font-size: 16px !important;
  }
  /* Slightly reduce side gutters & give content room to breathe */
  body { font-size: 15px; }
  h1 { letter-spacing: -0.01em; }
  /* Toasts: full-width, top-stacked, away from header clock */
  #flash {
    top: env(safe-area-inset-top, 0) !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    max-width: none !important;
  }
  /* Make tables less cramped */
  table { font-size: 13px; }
  th, td { white-space: nowrap; }
  /* Cards spacing */
  .shadow-card { box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px -6px rgba(0,0,0,.08); }
  /* Tap highlight removal for clean buttons */
  button, a { -webkit-tap-highlight-color: transparent; }
  /* Buttons feel pressed on tap */
  button:active, a:active { transform: scale(0.98); }
}

/* Hide scrollbar visually but keep functional on mobile */
@media (max-width: 640px) {
  .overflow-x-auto::-webkit-scrollbar { height: 4px; }
  .overflow-x-auto::-webkit-scrollbar-thumb { background: #ef4444; border-radius: 4px; }
}

/* iOS safe-area for fixed bottom nav (notch / home indicator) */
nav.sm\:hidden.fixed.bottom-0 {
  padding-bottom: env(safe-area-inset-bottom, 0);
}
/* Push main content above the bottom nav AND the home indicator
   (bottom nav is ~64px tall — 4.5rem total clearance is plenty). */
@media (max-width: 640px) {
  main   { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0)) !important; }
  footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0)) !important;
           padding-top: 0.5rem !important; font-size: 11px; }
}

/* iOS safe-area for fixed top header */
header.fixed.top-0 {
  padding-top: env(safe-area-inset-top, 0);
}

/* Modal: close-on-backdrop look (still requires JS). Inner panel slides up on mobile. */
@media (max-width: 640px) {
  /* Modals docked to bottom on small screens, full-width nicer feel */
  #txModal > div, #itemModal > div, #editUserModal > div {
    width: 100%;
    max-width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    align-self: flex-end;
    animation: modal-up .22s ease-out;
  }
  #txModal, #itemModal, #editUserModal { align-items: flex-end !important; padding: 0 !important; }
}
@keyframes modal-up { from { transform: translateY(20px); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }

/* Smoother focus ring everywhere */
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.25);
}

/* Bigger native date/select picker tap area on mobile */
@media (max-width: 640px) {
  input[type="date"], input[type="time"], select { padding-right: 0.75rem; }
}

/* Sticky bottom action bar utility (used optionally) */
.mobile-action-bar {
  position: sticky;
  bottom: calc(5rem + env(safe-area-inset-bottom, 0));
  z-index: 30;
}

/* ─────────── Mobile compaction (keep dashboard tight, no wasted space) ─────────── */
@media (max-width: 640px) {
  /* Tighter section vertical rhythm */
  main .mb-5 { margin-bottom: 0.75rem !important; }
  main .mb-4 { margin-bottom: 0.625rem !important; }
  /* Tile / card paddings get smaller on phones */
  main .shadow-card.p-4,
  main .shadow-card .p-4 { padding: 0.75rem !important; }
  /* KPI numbers slightly smaller so 2-column grid fits cleanly */
  main .text-2xl { font-size: 1.25rem !important; line-height: 1.5rem; }
  /* Header block at top of pages: less bottom padding/margin */
  main h1.text-xl { font-size: 1.05rem !important; }
  main .pb-4.border-b { padding-bottom: 0.5rem !important; }
  main .mb-5.pb-4 { margin-bottom: 0.625rem !important; }
  /* Tighten the gap on KPI grid */
  main .grid.gap-3 { gap: 0.5rem !important; }
  /* List rows in the dashboard cards: a touch tighter */
  main ul li.py-3 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
  /* Reduce top breathing room under the fixed header on phones */
  main.pt-28 { padding-top: 6.25rem !important; }
}