/* css/app.css
   Small hand-written styles that sit on top of Tailwind's utility
   classes — animations and scrollbar tweaks that Tailwind's core
   utilities (no build step, so no plugins) can't express on their own.
*/

html, body, #app {
  height: 100%;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-toast-in {
  animation: toast-in 160ms ease-out;
}

/* Thin, unobtrusive scrollbars for the nav and route outlet */
#app-sidebar nav::-webkit-scrollbar,
#route-outlet::-webkit-scrollbar {
  width: 8px;
}

/* ---------------------------------------------------------------------
   Responsive app shell
   On screens below the `lg` breakpoint the sidebar becomes a slide-in
   drawer opened from the header hamburger (#nav-hamburger), with a dimmed
   overlay behind it. From `lg` up it is a normal static column as before.
--------------------------------------------------------------------- */
#sidebar-overlay {
  display: none;
}

@media (max-width: 1023.98px) {
  #app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: 280px !important;
    transform: translateX(-100%);
    transition: transform 200ms ease;
  }
  #app-sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.35);
  }
  #sidebar-overlay.mobile-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 23, 42, 0.35);
  }
  body:has(#app-sidebar.mobile-open) {
    overflow: hidden;
  }
}
#app-sidebar nav::-webkit-scrollbar-thumb,
#route-outlet::-webkit-scrollbar-thumb {
  background-color: #e2e8f0;
  border-radius: 9999px;
}

/* Receipt printing (Phase 3, Section 28): the print-only container is
   hidden on screen and injected with receipt HTML just before
   window.print() is called (see components/receiptView.js). This rule
   hides everything else so only the receipt appears on the printed page. */
#receipt-print-area {
  display: none;
}

/* Print-only brand header: always in the DOM but only shown when printing
   a report page (i.e. when #receipt-print-area is NOT the target).
   Sits above the main content so the logo appears on every printed report. */
#print-brand-header {
  display: none;
}

@media print {
  /* ----- Receipt mode: show ONLY the receipt area ----- */
  body:has(#receipt-print-area:not(:empty)) * {
    visibility: hidden;
  }
  body:has(#receipt-print-area:not(:empty)) #receipt-print-area,
  body:has(#receipt-print-area:not(:empty)) #receipt-print-area * {
    visibility: visible;
  }
  #receipt-print-area {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  /* ----- Report mode: hide chrome, show brand header + content ----- */
  body:not(:has(#receipt-print-area:not(:empty))) #app-sidebar,
  body:not(:has(#receipt-print-area:not(:empty))) #app-header,
  body:not(:has(#receipt-print-area:not(:empty))) .no-print {
    display: none !important;
  }
  body:not(:has(#receipt-print-area:not(:empty))) #print-brand-header {
    display: block !important;
    text-align: center;
    padding: 12px 0 8px;
    border-bottom: 2px solid #0f172a;
    margin-bottom: 16px;
  }
}