/* ==========================================================================
   style.css
   Custom rules on top of Tailwind (loaded via CDN in index.html).
   Ported from the spirit of the original src/index.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

html, body {
  font-family: var(--font-sans);
  background-color: #f8fafc;
  -webkit-font-smoothing: antialiased;
}

.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

/* Slightly custom slate shade used for a couple of accent text colors in
   the original design (between slate-800 and slate-900). */
.text-slate-850 { color: #172033; }
.bg-slate-850 { background-color: #172033; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.25s ease-out; }

/* Hide scrollbars on horizontally-scrolling chip rows (POS category bar) */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* Slim, unobtrusive scrollbars everywhere else */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Print: only the invoice/receipt modal should print */
@media print {
  body * { visibility: hidden; }
  .fixed.inset-0 { position: static !important; background: none !important; backdrop-filter: none !important; }
  .fixed.inset-0 .bg-white, .fixed.inset-0 .bg-white * { visibility: visible; }
  .fixed.inset-0 .bg-white {
    position: absolute; left: 0; top: 0; width: 100%;
    box-shadow: none !important; border: none !important;
  }
  button { display: none !important; }
}