:root { --brand: #1f3a5f; --brand-light: #2c5282; }
.bg-brand { background-color: var(--brand) !important; }
.text-brand { color: var(--brand) !important; }
.btn-brand { background-color: var(--brand); color: #fff; }
.btn-brand:hover { background-color: var(--brand-light); color: #fff; }
body { background-color: #f4f6f9; }
.kpi-card { border: 0; border-left: 4px solid var(--brand); }
.kpi-card .kpi-value { font-size: 1.5rem; font-weight: 700; }
.pos-item-btn { min-height: 84px; white-space: normal; font-size: .9rem; }
.pos-cat-btn { min-width: 110px; }
.veg-dot, .nonveg-dot { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; }
.veg-dot { background:#198754; border:1px solid #14532d; }
.nonveg-dot { background:#dc3545; border:1px solid #7f1d1d; }
.kds-card { border-top: 5px solid #6c757d; }
.kds-new { border-top-color: #0d6efd; }
.kds-cooking { border-top-color: #fd7e14; }
.kds-ready { border-top-color: #198754; }
.table > :not(caption) > * > * { padding: .55rem .75rem; }
@media print {
  nav, .no-print { display: none !important; }
  body { background: #fff; }
}
.receipt { max-width: 380px; margin: 0 auto; font-family: 'Courier New', monospace; }
.receipt hr { border-top: 1px dashed #333; opacity: 1; }

/* ===================== Phase 4.1 — Responsive fixes ===================== */
/* Compact navbar: links never wrap, tighter spacing so everything fits on laptops */
.nav-compact .nav-link,
.nav-compact .navbar-text,
.nav-compact .dropdown-item { white-space: nowrap; }
.nav-compact .nav-link { padding: .5rem .55rem; font-size: .95rem; }
.nav-compact .navbar-brand { font-size: 1.05rem; }
.brand-truncate { max-width: 220px; }

/* On mid-size desktops (navbar expanded but tight), squeeze a little more */
@media (min-width: 1200px) and (max-width: 1500px) {
  .nav-compact .nav-link { padding: .5rem .4rem; font-size: .88rem; }
  .nav-compact .nav-link .bi { display: none; }   /* drop icons first, keep labels */
  .brand-truncate { max-width: 160px; }
}

/* When collapsed into the hamburger (below 1200px), restore comfortable spacing */
@media (max-width: 1199.98px) {
  .nav-compact .nav-link { font-size: 1rem; padding: .55rem .75rem; }
  .nav-compact .navbar-nav .dropdown-menu { border: 0; padding-left: 1rem; }
}

/* Wide tables inside cards scroll horizontally instead of breaking the page */
.card { overflow-x: auto; }
.card .dropdown-menu { position: absolute; } /* keep dropdowns unclipped */

/* KPI cards: slightly smaller numbers on small screens so 2-up fits phones */
@media (max-width: 576px) {
  .kpi-card .kpi-value { font-size: 1.15rem; }
  main.container-fluid { padding-left: .6rem; padding-right: .6rem; }
}

/* POS layout: cart panel sits below the menu on tablets/small laptops (col-lg handles it);
   make item buttons a bit smaller on narrow screens */
@media (max-width: 768px) {
  .pos-item-btn { min-height: 70px; font-size: .82rem; }
}