: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; }
}

/* ==========================================================================
   Reports mega-menu — 17 reports in four readable columns instead of one
   long scrolling list. Only the Reports dropdown uses this.
   ========================================================================== */
.mega-menu {
  width: min(980px, calc(100vw - 2rem));
  border: 0;
  border-radius: .7rem;
  box-shadow: 0 12px 34px rgba(16, 30, 54, .18);
  padding: 1rem;
}

/* faint separators between columns, but not before the first one */
.mega-col + .mega-col {
  border-left: 1px solid #eef1f6;
}

.mega-head {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8a94a6;
  padding: 0 .45rem .45rem;
  margin-bottom: .15rem;
  border-bottom: 1px solid #f1f4f8;
}

.mega-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .45rem;
  margin-top: .12rem;
  border-radius: .4rem;
  color: #24374f;
  text-decoration: none;
  font-size: .9rem;
  line-height: 1.2;
  white-space: nowrap;
}

.mega-item:hover,
.mega-item:focus {
  background: #eef3fa;
  color: #1F3A5F;
}

.mega-item i {
  width: 1.15rem;
  flex: 0 0 1.15rem;
  text-align: center;
  color: #7b8aa1;
  font-size: .95rem;
}

.mega-item:hover i { color: #1F3A5F; }

/* Collapsed navbar (tablet / phone): drop the panel width and the column rules
   so the menu simply stacks inside the burger menu. */
@media (max-width: 1199.98px) {
  .mega-menu {
    width: 100%;
    box-shadow: none;
    padding: .5rem .25rem;
  }
  .mega-col + .mega-col { border-left: 0; }
  .mega-head { margin-top: .5rem; }
  .mega-item { white-space: normal; }
}