/* VGUG POS shared page styling */
body.pos-page {
  background-color: #c8cdd3;
}
body.pos-page .card {
  background-color: #fff;
}
@media print {
  body.pos-page { background-color: #fff; }
}

.pos-header .navbar { min-height: 72px; }
.pos-header .nav-link { border-radius: .4rem; padding-left: .7rem!important; padding-right: .7rem!important; }
.pos-header .nav-link.active { background: rgba(255,255,255,.14); font-weight: 600; }
.pos-nav-search { min-width: 220px; }
.pos-page .card { border-color: rgba(0,0,0,.08); }
@media (min-width: 992px) { .pos-nav-search { width: min(300px, 25vw); } }

/* Improve contrast on the medium-gray page canvas, without altering white cards. */
.pos-page main > .text-muted,
.pos-page main > .text-secondary,
.pos-page main > p.text-muted,
.pos-page main > p.text-secondary,
.pos-page main > div .text-muted,
.pos-page main > div .text-secondary,
.pos-page main > form .text-muted,
.pos-page main > form .text-secondary {
  color: #444b53 !important;
}

/* Stronger secondary actions outside cards and tables. */
.pos-page main > .btn-outline-secondary,
.pos-page main > form .btn-outline-secondary,
.pos-page main > div .btn-outline-secondary,
.pos-page main > .btn-outline-primary,
.pos-page main > form .btn-outline-primary,
.pos-page main > div .btn-outline-primary {
  --bs-btn-color: #343c45;
  --bs-btn-border-color: #65717d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #485563;
  --bs-btn-hover-border-color: #485563;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #343c45;
  --bs-btn-active-border-color: #343c45;
}

/* Keep the regular Bootstrap appearance for controls inside white cards. */
.pos-page .card .btn-outline-secondary {
  --bs-btn-color: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6c757d;
  --bs-btn-hover-border-color: #6c757d;
}
.pos-page .card .btn-outline-primary {
  --bs-btn-color: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0d6efd;
  --bs-btn-hover-border-color: #0d6efd;
}
@media print {
  .pos-page main .text-muted,
  .pos-page main .text-secondary { color: #6c757d !important; }
}

/* Light-filled secondary buttons on the gray page canvas. */
.pos-page main .btn-outline-secondary,
.pos-page main .btn-outline-primary {
  --bs-btn-bg: #edf0f3;
  --bs-btn-border-color: #7c8792;
  --bs-btn-color: #303943;
  --bs-btn-hover-bg: #d9dfe5;
  --bs-btn-hover-border-color: #5d6975;
  --bs-btn-hover-color: #20272e;
  --bs-btn-active-bg: #cbd3da;
  --bs-btn-active-border-color: #5d6975;
  --bs-btn-active-color: #20272e;
}
.pos-page .card .btn-outline-secondary,
.pos-page .card .btn-outline-primary {
  --bs-btn-bg: #f1f3f5;
  --bs-btn-border-color: #a3adb7;
  --bs-btn-color: #3d4853;
  --bs-btn-hover-bg: #e0e5ea;
  --bs-btn-hover-border-color: #75828f;
  --bs-btn-hover-color: #25303a;
}
.pos-customer-results {
  position: absolute;
  z-index: 1050;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 250px;
  overflow-y: auto;
  box-shadow: 0 5px 15px rgba(0,0,0,.16);
}