/* application.css */

/* Base / resets */
@import "color_palette.css";
@import "bootstrap-overrides.css";

:root {
  --bs-body-font-family: Verdana, Geneva, sans-serif;
  --bs-body-bg: var(--menurooster-putty, #f4f3f2);
  --bs-card-bg: var(--menurooster-putty, #f4f3f2);
  --bs-list-group-bg: var(--menurooster-putty, #f4f3f2);
  --bs-table-bg: var(--menurooster-putty, #f4f3f2);
}

html,
body {
  font-family: Verdana, Geneva, sans-serif;
  background-color: var(--menurooster-putty, #f4f3f2) !important;
}

main {
  background-color: var(--menurooster-putty, #f4f3f2) !important;
  min-height: calc(100vh - 56px);
}

.navbar {
  background-color: var(--menurooster-french-grey-15, #d1ccc7) !important;
}

.navbar-brand {
  font-weight: 700;
}

.app-navbar-brand {
  display: inline-flex;
  align-items: center;
}

.app-navbar-brand__logo {
  display: block;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

/* ================================
   Navbar CTA Buttons
   ================================ */
.navbar-cta {
  background-color: var(--menurooster-french-grey-15, #d1ccc7) !important;
}

.navbar-cta,
.navbar-cta .container-fluid {
  overflow: visible;
}

.navbar-cta .dropdown-menu {
  position: absolute;
  top: 100%;
  z-index: 1100;
}

.navbar-buttons {
  overflow: visible;
  position: relative;
  transition: all 0.3s ease;
  gap: 0;
}

.welcome-bar {
  font-family: 'Verdana', sans-serif;
  font-size: 9pt;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--menurooster-blue, #272d47);
}

.welcome-bar-separator {
  margin: 0 0.5em;
}

.welcome-bar-dropdown {
  font-family: 'Verdana', sans-serif;
  font-size: 9pt;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--menurooster-blue, #272d47);
  text-decoration: none;
}

.welcome-bar-dropdown:hover {
  color: var(--menurooster-blue-medium, #404b72);
}

.welcome-bar-location-dropdown {
  text-transform: none;
}

.navbar-cta .btn-call-to-action,
.navbar-cta .btn-call-to-action-yellow,
.navbar-cta .btn-call-to-action-blue-soft,
.navbar-cta .btn-call-to-action-blue-light,
.navbar-cta .btn-call-to-action-blue-medium,
.navbar-cta .btn-call-to-action-green {
  background-color: transparent !important;
  width: 3rem;
  height: 3rem;
  border-radius: 0;
  color: var(--menurooster-blue, #272d47) !important;
  font-size: 1.2rem;
  box-shadow: none !important;
  border: none !important;
}

.navbar-cta .btn-call-to-action:hover,
.navbar-cta .btn-call-to-action-yellow:hover,
.navbar-cta .btn-call-to-action-blue-soft:hover,
.navbar-cta .btn-call-to-action-blue-light:hover,
.navbar-cta .btn-call-to-action-blue-medium:hover,
.navbar-cta .btn-call-to-action-green:hover {
  background-color: var(--menurooster-french-grey-20, #c7c2bd) !important;
  color: var(--menurooster-blue-medium, #404b72) !important;
  transform: scale(1.05);
}

.navbar-cta .btn-call-to-action:active,
.navbar-cta .btn-call-to-action-yellow:active,
.navbar-cta .btn-call-to-action-blue-soft:active,
.navbar-cta .btn-call-to-action-blue-light:active,
.navbar-cta .btn-call-to-action-blue-medium:active,
.navbar-cta .btn-call-to-action-green:active {
  transform: scale(0.98);
}

.navbar-cta .btn-call-to-action:focus-visible {
  outline: 2px solid var(--menurooster-blue, #272d47) !important;
  outline-offset: 2px;
}

.navbar-cta .btn-call-to-action.dropdown-toggle.show,
.navbar-cta .btn-call-to-action.dropdown-toggle[aria-expanded="true"] {
  background-color: rgba(39, 45, 71, 0.15) !important;
  color: var(--menurooster-blue, #272d47) !important;
}

.navbar-cta .cta-with-label {
  position: relative;
  width: 3rem;
  min-width: 3rem;
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.navbar-cta .cta-with-label:hover {
  transform: none;
}

.navbar-cta .cta-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 3rem;
  white-space: nowrap;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 0.25rem;
  line-height: 1.1;
  text-align: center;
  color: var(--menurooster-blue, #272d47) !important;
  font-family: 'Verdana', sans-serif;
  opacity: 0.9;
}

.navbar-logo-icon {
  height: 3rem;
  width: 3rem;
  object-fit: contain;
}

.nav-location-toggle {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-location-account {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-location-dropdown {
  min-width: 18rem;
}

.order-guide-location-picker__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.order-guide-location-picker__toggle {
  align-self: flex-start;
  padding: 0;
  border: 0;
  color: var(--menurooster-blue, #272d47);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
}

.order-guide-location-picker__toggle:hover,
.order-guide-location-picker__toggle:focus {
  color: var(--menurooster-blue-medium, #404b72);
  text-decoration: none;
}

.order-guide-location-picker__toggle[data-empty="true"] {
  color: var(--menurooster-french-grey-60, #7f7872);
}

.order-guide-location-picker__toggle.disabled,
.order-guide-location-picker__toggle:disabled {
  color: var(--menurooster-french-grey-60, #7f7872);
  opacity: 1;
}

.order-guide-location-picker__menu {
  min-width: 14rem;
}

.order-guide-location-picker--compact .order-guide-location-picker__field {
  align-items: center;
  text-align: center;
}

/* ================================
   Call-to-Action Buttons (Square with label)
   ================================ */
.call-to-action-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.cta-with-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 4rem;
  min-width: 4rem;
  transition: transform 0.2s ease;
}

.cta-with-label:hover {
  transform: translateY(-2px);
}

.btn-call-to-action,
.btn-call-to-action-yellow,
.btn-call-to-action-blue-soft,
.btn-call-to-action-blue-light,
.btn-call-to-action-blue-medium,
.btn-call-to-action-green {
  border: none;
  border-radius: 0;
  width: 4rem;
  height: 4rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-family: 'Verdana', sans-serif;
  font-weight: 400;
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.btn-call-to-action {
  background-color: var(--menurooster-blue, #272d47);
  color: var(--menurooster-white, #ffffff);
}

.btn-call-to-action:hover {
  background-color: var(--menurooster-blue-medium, #404b72);
  color: var(--menurooster-white, #ffffff);
  transform: scale(1.03);
}

.btn-call-to-action:active {
  transform: scale(0.98);
}

.btn-call-to-action:focus-visible {
  outline: 2px solid var(--menurooster-blue, #272d47);
  outline-offset: 3px;
}

.btn-call-to-action-yellow {
  background-color: var(--menurooster-yellow, #f0c808);
  color: var(--menurooster-blue, #272d47);
}

.btn-call-to-action-yellow:hover {
  background-color: var(--menurooster-yellow-light, #f5d442);
  color: var(--menurooster-blue, #272d47);
  transform: scale(1.03);
}

.btn-call-to-action-yellow:active {
  transform: scale(0.98);
}

.btn-call-to-action-blue-soft {
  background-color: var(--menurooster-blue-soft, #5a678f);
  color: var(--menurooster-white, #ffffff);
}

.btn-call-to-action-blue-soft:hover {
  background-color: var(--menurooster-blue-medium, #404b72);
  color: var(--menurooster-white, #ffffff);
  transform: scale(1.03);
}

.btn-call-to-action-blue-soft:active {
  transform: scale(0.98);
}

.btn-call-to-action-blue-light {
  background-color: var(--menurooster-blue-light, #6b7ba3);
  color: var(--menurooster-white, #ffffff);
}

.btn-call-to-action-blue-light:hover {
  background-color: var(--menurooster-blue-medium, #404b72);
  color: var(--menurooster-white, #ffffff);
  transform: scale(1.03);
}

.btn-call-to-action-blue-light:active {
  transform: scale(0.98);
}

.btn-call-to-action-blue-medium {
  background-color: var(--menurooster-blue-medium, #404b72);
  color: var(--menurooster-white, #ffffff);
}

.btn-call-to-action-blue-medium:hover {
  background-color: var(--menurooster-blue-soft, #5a678f);
  color: var(--menurooster-white, #ffffff);
  transform: scale(1.03);
}

.btn-call-to-action-blue-medium:active {
  transform: scale(0.98);
}

.btn-call-to-action-green {
  background-color: var(--menurooster-green, #4a7c59);
  color: var(--menurooster-white, #ffffff);
}

.btn-call-to-action-green:hover {
  background-color: var(--menurooster-green-light, #5d9970);
  color: var(--menurooster-white, #ffffff);
  transform: scale(1.03);
}

.btn-call-to-action-green:active {
  transform: scale(0.98);
}

.cta-label {
  display: block;
  width: 100%;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 0.25rem;
  line-height: 1.1;
  text-align: center;
  color: #444;
  font-family: 'Verdana', sans-serif;
}

.btn-menurooster-blue {
  background-color: var(--menurooster-blue, #272d47);
  border-color: var(--menurooster-blue, #272d47);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-blue:hover,
.btn-menurooster-blue:focus {
  background-color: var(--menurooster-blue-medium, #404b72);
  border-color: var(--menurooster-blue-medium, #404b72);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-blue:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(39, 45, 71, 0.25);
}

.btn-menurooster-blue:active {
  background-color: var(--menurooster-blue-dark, #272d47);
  border-color: var(--menurooster-blue-dark, #272d47);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-blue-soft {
  background-color: var(--menurooster-blue-soft, #6d80ad);
  border-color: var(--menurooster-blue-soft, #6d80ad);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-blue-soft:hover,
.btn-menurooster-blue-soft:focus {
  background-color: var(--menurooster-blue-light, #526394);
  border-color: var(--menurooster-blue-light, #526394);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-blue-soft:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(109, 128, 173, 0.25);
}

.btn-menurooster-blue-soft:active {
  background-color: var(--menurooster-blue-medium, #404b72);
  border-color: var(--menurooster-blue-medium, #404b72);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-yellow {
  background-color: var(--menurooster-yellow, #ffd084);
  border-color: var(--menurooster-yellow, #ffd084);
  color: var(--menurooster-blue, #272d47);
}

.btn-menurooster-yellow:hover,
.btn-menurooster-yellow:focus {
  background-color: var(--menurooster-yellow-medium, #ffb64d);
  border-color: var(--menurooster-yellow-medium, #ffb64d);
  color: var(--menurooster-blue, #272d47);
}

.btn-menurooster-yellow:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(255, 208, 132, 0.35);
}

.btn-menurooster-yellow:active {
  background-color: var(--menurooster-yellow-dark, #ff9b17);
  border-color: var(--menurooster-yellow-dark, #ff9b17);
  color: var(--menurooster-blue, #272d47);
}

.btn-menurooster-white {
  background-color: var(--menurooster-white, #ffffff);
  border-color: transparent;
  color: var(--menurooster-blue, #272d47);
  outline: none;
  box-shadow: none;
}

.btn-menurooster-white:hover,
.btn-menurooster-white:focus {
  background-color: var(--menurooster-french-grey-02, #f5f3f1);
  border-color: transparent;
  color: var(--menurooster-blue, #272d47);
  outline: none;
  box-shadow: none;
}

.btn-menurooster-white:focus-visible {
  box-shadow: none;
  outline: none;
}

.btn-menurooster-white:active {
  background-color: var(--menurooster-french-grey-05, #ede9e6);
  border-color: transparent;
  color: var(--menurooster-blue, #272d47);
  outline: none;
  box-shadow: none;
}

.btn-menurooster-white-red-dark {
  background-color: var(--menurooster-french-grey-10, #d9d5d1);
  border-color: transparent;
  color: var(--menurooster-red-dark, #961531);
}

.btn-menurooster-white-red-dark:hover,
.btn-menurooster-white-red-dark:focus {
  background-color: var(--menurooster-french-grey-15, #d1ccc7);
  border-color: transparent;
  color: var(--menurooster-red-dark, #961531);
}

.btn-menurooster-white-red-dark:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(150, 21, 49, 0.18);
}

.btn-menurooster-white-red-dark:active {
  background-color: var(--menurooster-french-grey-20, #c7c2bd);
  border-color: transparent;
  color: var(--menurooster-red-dark, #961531);
}

.btn-menurooster-red-dark {
  background-color: var(--menurooster-red-dark, #961531);
  border-color: var(--menurooster-red-dark, #961531);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-red-dark:hover,
.btn-menurooster-red-dark:focus {
  background-color: var(--menurooster-red, #d45968);
  border-color: var(--menurooster-red, #d45968);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-red-dark:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(150, 21, 49, 0.35);
}

.btn-menurooster-red-dark:active {
  background-color: var(--menurooster-red-dark, #961531);
  border-color: var(--menurooster-red-dark, #961531);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-french-grey {
  background-color: var(--menurooster-french-grey-20, #c7c2bd);
  border-color: var(--menurooster-french-grey-20, #c7c2bd);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-french-grey:hover,
.btn-menurooster-french-grey:focus {
  background-color: var(--menurooster-french-grey-25, #bdb8b2);
  border-color: var(--menurooster-french-grey-25, #bdb8b2);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-french-grey:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(199, 194, 189, 0.35);
}

.btn-menurooster-french-grey:active {
  background-color: var(--menurooster-french-grey-30, #b2ada7);
  border-color: var(--menurooster-french-grey-30, #b2ada7);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-red {
  background-color: var(--menurooster-red, #d45968);
  border-color: var(--menurooster-red, #d45968);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-red:hover,
.btn-menurooster-red:focus {
  background-color: var(--menurooster-red-medium, #be1e2d);
  border-color: var(--menurooster-red-medium, #be1e2d);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-red:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(212, 89, 104, 0.35);
}

.btn-menurooster-red:active {
  background-color: var(--menurooster-red-dark, #961531);
  border-color: var(--menurooster-red-dark, #961531);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-green {
  background-color: var(--menurooster-green-medium, #5ccf4d);
  border-color: var(--menurooster-green-medium, #5ccf4d);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-green:hover,
.btn-menurooster-green:focus {
  background-color: var(--menurooster-green-dark, #2fa626);
  border-color: var(--menurooster-green-dark, #2fa626);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-green:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(92, 207, 77, 0.35);
}

.btn-menurooster-green:active {
  background-color: var(--menurooster-green-dark, #2fa626);
  border-color: var(--menurooster-green-dark, #2fa626);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-moss {
  background-color: var(--menurooster-moss, #658865);
  border-color: var(--menurooster-moss, #658865);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-moss:hover,
.btn-menurooster-moss:focus {
  background-color: #567556;
  border-color: #567556;
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-moss:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(101, 136, 101, 0.35);
}

.btn-menurooster-moss:active {
  background-color: #496349;
  border-color: #496349;
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-olive {
  background-color: var(--menurooster-olive, #869447);
  border-color: var(--menurooster-olive, #869447);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-olive:hover,
.btn-menurooster-olive:focus {
  background-color: #74813b;
  border-color: #74813b;
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-olive:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(134, 148, 71, 0.35);
}

.btn-menurooster-olive:active {
  background-color: #667133;
  border-color: #667133;
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-purple {
  background-color: var(--menurooster-purple, #b19cd8);
  border-color: var(--menurooster-purple, #b19cd8);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-purple:hover,
.btn-menurooster-purple:focus {
  background-color: #9b82cc;
  border-color: #9b82cc;
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-purple:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(177, 156, 216, 0.35);
}

.btn-menurooster-purple:active {
  background-color: #8568bc;
  border-color: #8568bc;
  color: var(--menurooster-white, #ffffff);
}

.menurooster-square-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  line-height: 1;
  border-radius: 0;
}

.menurooster-square-icon-button i {
  font-size: 1rem;
}

.inventory-session__viewport {
  width: min(100%, 26rem);
  margin: 0.85rem auto 0;
}

.inventory-session__item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.inventory-session__item-card--single {
  width: 100%;
  padding: 1.25rem 1rem;
  background-color: var(--menurooster-french-grey-05, #e4e1de);
  border-color: var(--menurooster-french-grey-05, #e4e1de);
}

.inventory-session__item-copy {
  width: 100%;
  text-align: center;
}

.inventory-session__below-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.inventory-session__progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: 0.25rem 0.75rem;
  background-color: var(--menurooster-french-grey-10, #f1f4f5);
  border-radius: 999px;
  color: var(--menurooster-blue, #272d47);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.inventory-session__location {
  margin-bottom: 0.5rem;
  color: var(--menurooster-french-grey-60, #66727d);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
}

.inventory-session__item-name {
  display: -webkit-box;
  font-family: "Oswald", Verdana, Geneva, sans-serif;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.15;
  min-height: calc(1.15em * 2);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.inventory-session__item-name-link {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.inventory-session__item-name-link:hover,
.inventory-session__item-name-link:focus {
  color: inherit;
  text-decoration: none;
}

.inventory-session__count-form {
  width: 100%;
  min-width: 0;
}

.inventory-session__count-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.inventory-session__count-input-row {
  width: 100%;
  display: flex;
  justify-content: center;
}

.inventory-session__count-button-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.inventory-session__count-input {
  background-color: var(--menurooster-white, #ffffff);
  color: var(--menurooster-black, #000000);
  width: min(100%, 6rem);
  height: 1in;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  text-align-last: center;
}

.inventory-session__step-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1in;
  min-width: 1in;
  height: 1in;
  padding: 0;
  border-radius: 0;
  line-height: 1;
}

.inventory-session__step-button i {
  font-size: 1.75rem;
}

.inventory-session__status {
  min-height: 1.1rem;
  margin-top: 0.35rem;
  text-align: center;
}

.inventory-session__navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.75rem;
}

.inventory-session__nav-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1in;
  min-width: 1in;
  height: 1in;
  background-color: var(--menurooster-purple, #b19cd8);
  border: 1px solid var(--menurooster-purple, #b19cd8);
  color: #fff;
  text-decoration: none;
  border-radius: 0;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.inventory-session__nav-button:hover,
.inventory-session__nav-button:focus {
  background-color: var(--menurooster-purple-dark, #9a82c0);
  border-color: var(--menurooster-purple-dark, #9a82c0);
  color: #fff;
  text-decoration: none;
}

.inventory-session__nav-button i {
  font-size: 1.75rem;
}

.inventory-session__nav-button--disabled,
.inventory-session__nav-button.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.inventory-session__navigation-label {
  min-width: 0;
  color: var(--menurooster-blue, #272d47);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
}

.inventory-session__footer-action {
  display: flex;
  justify-content: center;
}

.mode-screen__footer {
  width: min(100%, 26rem);
  margin: 1.5rem auto 0;
  padding: 1rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--menurooster-french-grey-20, #d8dfe3);
}

.mode-screen__footer h2 {
  margin-bottom: 0.25rem;
}

.order-mode__summary-shell {
  margin-top: 1rem;
}

.order-mode__search-shell {
  margin-top: 0.5rem;
}

.order-mode__transcript-shell {
  width: min(100%, 60rem);
  margin-top: 0.75rem;
}

.order-mode__transcript-shell [data-order-mode-transcript-target="status"][data-state="active"] {
  color: var(--menurooster-blue, #272d47);
  font-weight: 700;
}

.order-mode__transcript-shell [data-order-mode-transcript-target="status"][data-state="error"] {
  color: var(--menurooster-red, #eb4f47);
}

.order-mode__transcript-shell [data-order-mode-transcript-target="interim"] {
  min-height: 1.2rem;
  color: var(--menurooster-french-grey-60, #66727d);
  font-style: italic;
}

.order-mode__transcript-meter {
  width: min(100%, 16rem);
  height: 0.55rem;
  background-color: var(--menurooster-french-grey-10, #f1f4f5);
  border-radius: 999px;
  overflow: hidden;
}

.order-mode__transcript-meter-bar {
  width: 4%;
  height: 100%;
  background-color: var(--menurooster-blue, #272d47);
  transition: width 0.1s linear;
}

.order-mode__search-form .form-control {
  min-height: 3rem;
  background-color: var(--menurooster-white, #ffffff);
}

.order-mode__search-meta {
  margin-top: 0.5rem;
  color: var(--menurooster-french-grey-60, #66727d);
  font-size: 0.9rem;
  text-align: center;
}

.order-mode__summary-shell .card {
  margin-bottom: 0;
}

.order-mode__item-card {
  background-color: var(--menurooster-french-grey-05, #e4e1de);
  background-image: none;
}

.order-mode__item-name--ordered,
.order-mode__item-name--ordered .inventory-session__item-name-link,
.order-mode__item-name--ordered .inventory-session__item-name-link:hover,
.order-mode__item-name--ordered .inventory-session__item-name-link:focus {
  color: var(--menurooster-black, #000000);
}

.order-mode__count-input-shell {
  position: relative;
  display: block;
  width: min(100%, 6rem);
  overflow: visible;
}

.order-mode__count-input-shell .inventory-session__count-input {
  width: 100%;
}

.order-mode__par {
  position: absolute;
  top: 0.15rem;
  left: calc(100% + 0.2rem);
  color: var(--menurooster-red-dark, #961531);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.order-mode__inventory {
  position: absolute;
  top: 0.15rem;
  right: calc(100% + 0.2rem);
  color: var(--menurooster-blue-medium, #404b72);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.order-mode__progress-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

.order-mode__furthest-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.75rem;
  background-color: var(--menurooster-french-grey-10, #f1f4f5);
  color: var(--menurooster-blue, #272d47);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.order-mode__jump-button {
  border-radius: 0;
  font-weight: 700;
}

.inventory-session__status--saving {
  color: var(--menurooster-blue, #272d47);
}

.inventory-session__status--saved {
  color: var(--menurooster-green, #5ccf4d);
}

.inventory-session__status--error {
  color: var(--menurooster-red, #eb4f47);
}

@media (max-width: 767px) {
  .inventory-session__viewport {
    width: min(100%, 22rem);
  }

  .order-mode__transcript-shell {
    width: min(100%, 22rem);
  }

  .inventory-session__item-card--single {
    padding: 1rem 0.85rem;
  }

  .inventory-session__count-button-row {
    width: auto;
  }

  .inventory-session__navigation {
    gap: 0.5rem;
  }

  .inventory-session__navigation-label {
    font-size: 0.85rem;
  }
}

.btn-menurooster-orange {
  background-color: var(--menurooster-orange, #ff8b00);
  border-color: var(--menurooster-orange, #ff8b00);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-orange:hover,
.btn-menurooster-orange:focus {
  background-color: var(--menurooster-orange-medium, #d87e13);
  border-color: var(--menurooster-orange-medium, #d87e13);
  color: var(--menurooster-white, #ffffff);
}

.btn-menurooster-orange:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(255, 185, 102, 0.3);
}

.btn-menurooster-orange:active {
  background-color: var(--menurooster-orange-dark, #b75300);
  border-color: var(--menurooster-orange-dark, #b75300);
  color: var(--menurooster-white, #ffffff);
}

.distributor-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  line-height: 1;
  font-size: 1rem;
  text-decoration: none;
}

.distributor-row-action-view {
  color: var(--menurooster-blue, #272d47);
}

.distributor-row-action-edit {
  color: var(--menurooster-french-grey-20, #c7c2bd);
}

.distributor-row-action-delete {
  color: var(--menurooster-red, #d45968);
}

.distributor-row-action:hover,
.distributor-row-action:focus {
  opacity: 0.8;
}

label.numeric-field-label {
  display: block;
  width: min(100%, 18rem);
  margin-left: auto;
  text-align: right;
}

input[type="number"],
input[data-numeric-field="true"] {
  text-align: right;
}

input[type="number"]:not(.allow-spin-buttons),
input[data-numeric-field="true"] {
  -moz-appearance: textfield;
}

input[type="number"]:not(.allow-spin-buttons)::-webkit-outer-spin-button,
input[type="number"]:not(.allow-spin-buttons)::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.numeric-field-row input[type="number"],
.numeric-field-row input[data-numeric-field="true"],
.numeric-field-row input.numeric-form-control {
  width: min(100%, 18rem);
  margin-left: auto;
}

.catalog-picker {
  position: relative;
}

.catalog-picker__menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 18rem;
  overflow-y: auto;
}

.order-guide-search {
  position: relative;
  width: min(100%, 40rem);
  flex: 0 0 min(100%, 40rem);
}

.order-guide-search .input-group {
  width: 100%;
  flex-wrap: nowrap;
}

.order-guide-search .input-group .form-control {
  width: 1%;
  min-width: 0;
  flex: 1 1 auto;
}

.order-guide-search__menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 18rem;
  overflow-y: auto;
}

.menurooster-list-name {
  display: block;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--menurooster-black, #000000) !important;
}

.distributors-index-table thead th {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: var(--menurooster-french-grey-05, #e4e1de) !important;
  color: var(--menurooster-black, #000000) !important;
}

.distributors-index-table tbody tr:nth-of-type(odd) > * {
  background-color: var(--menurooster-white, #ffffff) !important;
}

.distributors-index-table tbody tr:nth-of-type(even) > * {
  background-color: var(--menurooster-french-grey-02, #f5f3f1) !important;
}

.distributors-index-table tbody td {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Main content wrapper */
.content-wrapper {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.app-image-viewer-modal {
  background-color: #000000;
  border: 0;
  border-radius: 0;
}

.app-image-viewer-modal__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background-color: #000000;
}

.app-image-viewer-modal__body {
  padding: 1rem;
  background-color: #000000;
}

.app-image-viewer-modal__gallery {
  display: grid;
  gap: 1rem;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 0.35rem;
  scroll-snap-type: y proximity;
}

.app-image-viewer-modal__gallery--single {
  overflow-y: visible;
  padding-right: 0;
}

.app-image-viewer-modal__gallery-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  scroll-snap-align: center;
}

.app-image-viewer-modal__gallery-item[data-selected="true"] {
  outline: 1px solid rgba(255, 255, 255, 0.22);
  outline-offset: 0.35rem;
}

.app-image-viewer-modal__image {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

.marketplace-product-show__hero-name {
  font-family: "Oswald", Verdana, Geneva, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

.marketplace-product-card__item-name {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
}