.departments-section {
  background: #fffdf8;
}
.departments-heading {
  margin-bottom: 45px;
}
.departments-section .department-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  margin-bottom: 0;
}
.product-tile.department-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 24px;
  min-height: 270px;
  border: 1px solid #e2e5d9;
  border-radius: 12px;
  background: #fafbf5;
  box-shadow: 0 4px 15px #354c2410;
  text-align: left;
  overflow: hidden;
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}
.product-tile:hover {
  transform: translateY(-4px);
  border-color: #b2bf9f;
  box-shadow: 0 12px 28px #364c2212;
}
.tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tile-icon {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border: 1px solid #dfe6d6;
  border-radius: 9px;
  background: #eef2e6;
  color: #60744b;
}
.tile-icon svg {
  width: 22px;
  height: 22px;
}
.tile-arrow {
  color: #879873;
  font-size: 18px;
}
.product-tile strong {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 19px 0 9px;
}
.product-tile .tile-line {
  font-size: 12px;
  color: #808b78;
  line-height: 1.6;
  min-height: 38px;
}
.product-tile em {
  font-size: 10px;
  color: #8e7b4e;
  display: flex;
  justify-content: space-between;
  margin-top: 19px;
  font-style: normal;
}
.tile-mini {
  height: 43px;
  display: flex;
  gap: 5px;
  align-items: end;
  margin-top: 21px;
  padding: 0 6px;
  border-bottom: 1px solid #e3e8d9;
}
.tile-mini i {
  width: 17%;
  height: var(--v);
  background: #cad7be;
  border-radius: 3px 3px 0 0;
  transform-origin: bottom;
  animation: tile-breathe 5s var(--delay) ease-in-out infinite;
}
.mini-1 {
  align-items: center;
  gap: 9px;
  border: 0;
}
.mini-1 i {
  height: 17px;
  border-radius: 4px;
  background: #d9d1b4;
  animation-name: tile-flow;
}
.mini-2 i {
  border-radius: 8px 8px 0 0;
  background: #bdcfc4;
}
.mini-3 {
  align-items: center;
  border-bottom: 1px solid #e1ddc8;
}
.mini-3 i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c1a774;
  box-shadow: 0 0 0 5px #efeadb;
  flex: 0 0 7px;
  margin-right: 11px;
  animation-name: tile-flow;
}
@keyframes tile-breathe {
  0%,
  100% {
    transform: scaleY(0.85);
    opacity: 0.65;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
@keyframes tile-flow {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(2px);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
.product-modal {
  width: min(1480px, 94vw);
  height: 90dvh;
  max-height: 90dvh;
  max-width: none;
  padding: 0;
  overflow: hidden;
  background: #f3f4ee;
  border: 1px solid #dbe0d1;
  border-radius: 14px;
  color: #2c372e;
}
.product-modal-header {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 72px;
  padding: 12px 20px;
  background: #fffefa;
  border-bottom: 1px solid #dfe4d7;
  touch-action: pan-x;
}
.product-brand {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.product-brand .brandmark {
  flex-shrink: 0;
  font-size: 26px;
}
.product-brand > #product-title {
  font-size: 14px;
  font-weight: 600;
  border-left: 1px solid #e0e4d8;
  padding-left: 20px;
}
.product-modal-header > .sample-label {
  margin-left: auto;
}
.product-modal-header .app-dialog-close {
  min-width: 46px;
  height: 46px;
  flex-shrink: 0;
}
.product-layout {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  height: calc(100% - 72px);
  min-height: 0;
}
.product-sidebar {
  display: flex;
  flex-direction: column;
  padding: 25px 12px 16px;
  background: #293d32;
  color: #dce5d5;
  overflow-y: auto;
}
.workspace-label {
  display: block;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #a7b39c;
  margin-bottom: 20px;
  padding-left: 8px;
}
.product-sidebar nav {
  display: grid;
  gap: 4px;
}
.product-sidebar nav button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 8px;
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  background: none;
  text-align: left;
  color: #b9c8b3;
  font-size: 10px;
  line-height: 1.35;
}
.product-sidebar nav svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.product-sidebar nav button[aria-current="page"] {
  color: #fffdf8;
  background: #52634a;
}
.product-sidebar nav button:hover {
  background: #3c5142;
}
.workspace-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  font-size: 9px;
}
.workspace-user small {
  display: block;
  font-size: 8px;
  color: #9eac92;
  margin-top: 4px;
}
.workspace-user .app-avatar {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
  background: #53644c;
  color: #e2e9dc;
  border: 0;
  font-size: 9px;
}
.product-screen {
  padding: 27px;
  overflow: auto;
  overscroll-behavior: contain;
  min-width: 0;
  scrollbar-gutter: stable;
  font-size: 12px;
}
.product-screen h2 {
  font-family: "Inter Tight", Inter, sans-serif;
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-size: 29px;
}
.product-screen h4 {
  font-size: 12px;
  font-weight: 600;
  margin: 22px 0 12px;
}
.product-screen .workspace-breadcrumb {
  font-size: 9px;
  color: #98a08f;
  margin: 0 0 9px;
}
.workspace-toolbar {
  align-items: flex-end;
}
.workspace-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.workspace-stats {
  margin-bottom: 24px;
}
.workspace-stats .app-stat > strong {
  font-size: 27px;
}
.product-screen .app-card {
  padding: 20px;
}
.product-screen .app-card h3 {
  font-size: 18px;
}
.product-screen .app-card-heading {
  margin-bottom: 20px;
}
.product-screen .app-caption {
  line-height: 1.7;
}
.product-toast {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  max-width: calc(100% - 40px);
  width: max-content;
  padding: 11px 18px;
  background: #253a2e;
  color: #fffef6;
  border: 1px solid #7e9372;
  border-radius: 8px;
  box-shadow: 0 5px 25px #1d291b33;
  z-index: 30;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.product-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.booking-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 215px;
  gap: 18px;
}
.product-screen .booking-board {
  padding: 18px 12px;
}
.booking-key {
  font-size: 8px;
  color: #899480;
  display: flex;
  align-items: center;
  gap: 5px;
}
.booking-key i {
  width: 6px;
  height: 6px;
  background: #e0c894;
  border: 1px solid #c2a369;
  border-radius: 2px;
}
.booking-key .seated {
  background: #acc6b1;
  border-color: #69977b;
}
.booking-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 9px;
}
.booking-grid th {
  font-weight: 500;
  padding: 12px 2px;
  color: #75836c;
  font-size: 9px;
}
.booking-grid thead th {
  background: #f6f8f0;
  border-block: 1px solid #e8ecdf;
}
.booking-grid th:first-child {
  width: 44px;
}
.booking-grid th small {
  display: block;
  font-size: 7px;
  color: #a0a791;
  margin-top: 4px;
  font-weight: 400;
}
.booking-grid td {
  border: 1px solid #e9ecdf;
  height: 54px;
  padding: 3px;
  vertical-align: top;
}
.booking-event {
  width: 100%;
  min-height: 45px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 4px;
  border: 1px solid #decea7;
  border-left: 3px solid #b49a5b;
  border-radius: 4px;
  background: #f5efdd;
  text-align: left;
}
.booking-event strong {
  font-size: 8px;
  line-height: 1.25;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.booking-event span {
  font-size: 7px;
  color: #9b885f;
  line-height: 1.2;
}
.booking-event.seated {
  background: #e7f0e4;
  border-color: #c5d9bc;
  border-left-color: #7a9d6a;
}
.booking-event.seated span {
  color: #749366;
}
.booking-event:hover {
  filter: brightness(0.97);
  outline: 1px solid #9ba984;
}
.booking-aside {
  display: grid;
  align-content: start;
  gap: 16px;
}
.booking-aside .app-card {
  padding: 18px;
}
.booking-aside p:not(.app-caption) {
  font-size: 11px;
  line-height: 1.7;
  color: #7a886f;
}
.waitlist {
  display: grid;
  gap: 15px;
  margin-top: 18px;
}
.waitlist > div {
  padding-bottom: 15px;
  border-bottom: 1px solid #e8ecdf;
}
.waitlist strong,
.waitlist small {
  display: block;
  font-size: 11px;
}
.waitlist small {
  font-size: 9px;
  margin-top: 4px;
  color: #8d9981;
}
.waitlist .app-badge {
  margin-top: 8px;
  font-size: 8px;
}
.guest-mini-stats {
  display: flex;
  gap: 28px;
  border-block: 1px solid #e4e9da;
  margin: 18px 0;
  padding: 12px 0;
}
.guest-mini-stats small {
  font-size: 8px;
  color: #8b987d;
}
.guest-mini-stats b {
  display: block;
  font-size: 17px;
  font-weight: 500;
  margin-top: 5px;
}
.booking-guest .app-btn {
  margin-top: 16px;
}
.booking-allergy {
  background: #faeeda;
  padding: 9px;
  color: #92793b !important;
  margin-bottom: 12px;
}
.booking-form {
  margin-bottom: 22px;
}
.booking-mobile {
  display: none;
}
.kitchen-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  font-size: 10px;
  color: #929b87;
}
.kitchen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.kitchen-ticket {
  background: #fffefa;
  border: 1px solid #dce3d2;
  border-top: 4px solid #84a672;
  border-radius: 9px;
  padding: 18px;
  min-width: 0;
}
.kitchen-ticket.warm {
  border-top-color: #c69b4d;
}
.kitchen-ticket.late {
  border-top-color: #b66c51;
}
.kitchen-ticket header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.kitchen-ticket header small {
  font-size: 8px;
  color: #939c86;
  letter-spacing: 0.06em;
}
.kitchen-ticket h3 {
  font-size: 21px;
  font-family: "Inter Tight", Inter, sans-serif;
  line-height: 1.2;
  margin-top: 5px;
}
.kitchen-ticket time {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 500;
  color: #85916d;
}
.kitchen-ticket.warm time {
  color: #a88438;
}
.kitchen-ticket.late time {
  color: #ad6149;
}
.ticket-allergy {
  background: #f9e9e0;
  color: #9b5b3d;
  border: 1px solid #ebd3c3;
  font-size: 9px;
  padding: 8px;
  margin-top: 14px;
  font-weight: 600;
}
.kitchen-ticket ul {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 23px 0;
  font-size: 12px;
  min-height: 51px;
}
.kitchen-ticket li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ticket-check {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border: 1px solid #d3dcc6;
  border-radius: 3px;
}
.ticket-note {
  font-size: 9px;
  color: #929d83;
  margin-bottom: 22px;
  min-height: 27px;
}
.kitchen-ticket .app-btn {
  width: 100%;
}
.recipe-workspace {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
}
.recipe-list {
  align-self: start;
}
.recipe-list > h3 {
  margin-bottom: 18px;
}
.recipe-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 13px 9px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #e9ecdf;
  background: none;
  font-size: 11px;
  border-radius: 5px;
}
.recipe-list button[aria-pressed="true"] {
  background: #e8eedf;
  color: #566f42;
}
.recipe-list button small {
  display: block;
  font-size: 8px;
  color: #99a088;
  margin-top: 4px;
}
.recipe-list button b {
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
}
.recipe-card-full > .app-card-heading h3 {
  font-size: 28px;
}
.recipe-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 22px 0;
}
.recipe-metrics .app-stat {
  background: #f5f7ee;
  padding: 13px;
}
.recipe-metrics .app-stat strong {
  font-size: 24px;
}
.recipe-metrics .app-stat small {
  font-size: 8px;
  line-height: 1.5;
}
.allergen-matrix {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.allergen-matrix > span {
  display: block;
  padding: 9px;
  background: #f4f6ef;
  color: #8b967d;
  font-size: 9px;
  border: 1px solid #e9ecdf;
  border-radius: 5px;
}
.allergen-matrix > span small {
  display: block;
  font-size: 8px;
  margin-top: 5px;
  color: #acb39f;
}
.allergen-matrix > span.contains {
  color: #987f43;
  border-color: #dfd4ac;
  background: #f7f0db;
}
.allergen-matrix > span.contains small {
  color: #a5925b;
}
.recipe-method {
  display: grid;
  gap: 13px;
  padding-left: 23px;
  color: #7a876c;
  font-size: 12px;
  line-height: 1.7;
}
.recipe-ingredients {
  font-size: 11px;
}
.stock-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 100px 115px;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #e8ecdd;
}
.stock-row > div:first-child strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.stock-row small {
  font-size: 9px;
  color: #92a07e;
  display: block;
  margin-top: 4px;
}
.stock-gauge {
  height: 5px;
  background: #e9eddc;
  border-radius: 4px;
  overflow: hidden;
}
.stock-gauge > span {
  display: block;
  height: 100%;
  background: #b4c69e;
  border-radius: 4px;
  transition: width 1s;
}
.stock-value {
  font-size: 15px;
  font-weight: 500;
}
.stock-value small {
  display: inline;
  font-weight: 400;
}
.stock-row .app-badge {
  justify-self: start;
}
.stock-row .app-btn {
  font-size: 10px;
  padding: 8px;
}
.supplier-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
}
.supplier-product {
  padding: 23px 0;
  border-bottom: 1px solid #e6ebdc;
}
.supplier-product h3 {
  font-size: 15px !important;
}
.supplier-product h3 small {
  display: block;
  font-size: 9px;
  letter-spacing: 0;
  font-weight: 400;
  color: #92a07d;
  margin-top: 6px;
}
.supplier-offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 15px;
}
.supplier-offers button {
  display: flex;
  flex-direction: column;
  padding: 13px 10px;
  align-items: flex-start;
  text-align: left;
  border: 1px solid #e1e7d6;
  border-radius: 7px;
  background: #f9fbf5;
  gap: 8px;
}
.supplier-offers button span {
  font-size: 9px;
  color: #869576;
}
.supplier-offers button strong {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 23px;
  font-weight: 500;
}
.supplier-offers button small {
  font-size: 8px;
  color: #90a07e;
  line-height: 1.5;
}
.supplier-offers button.best-offer {
  background: #eff5e9;
  border-color: #bed1ab;
}
.supplier-offers button.best-offer small {
  color: #648749;
}
.supplier-basket {
  align-self: start;
  position: sticky;
  top: 0;
}
.basket-lines {
  margin-top: 24px;
}
.basket-lines article {
  padding: 15px 0;
  border-bottom: 1px solid #e7ecdc;
}
.basket-lines strong,
.basket-lines small {
  display: block;
  font-size: 12px;
}
.basket-lines small {
  font-size: 9px;
  color: #91a07e;
  margin-top: 5px;
}
.basket-lines article > div {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  margin-top: 12px;
}
.basket-lines input {
  width: 47px;
  height: 33px;
  border: 1px solid #d8e3cb;
  border-radius: 4px;
  padding: 4px;
  color: #587345;
  background: #fbfcf7;
}
.basket-lines label {
  font-size: 8px;
  color: #91a37a;
}
.basket-lines article > div button {
  margin-left: auto;
  border: 0;
  background: none;
  font-size: 19px;
  color: #a4b38f;
}
.basket-total {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 22px 0;
  font-size: 11px;
}
.supplier-basket .app-btn {
  width: 100%;
  margin-bottom: 14px;
}
.supplier-basket .app-empty {
  padding: 28px 8px;
  margin: 22px 0;
}
.invoice-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.invoice-summary h3 {
  font-size: 22px !important;
}
.invoice-summary p {
  font-size: 10px;
  color: #899778;
  margin-top: 8px;
}
.invoice-summary > strong {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 29px;
  font-weight: 500;
}
.invoice-summary > strong small {
  display: block;
  text-align: right;
  font-family: Inter, sans-serif;
  font-size: 9px;
  color: #9caa88;
  font-weight: 400;
}
.invoice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
}
.invoice-table {
  font-size: 11px;
}
.invoice-decision h3 {
  font-size: 24px !important;
}
.invoice-decision > p {
  font-size: 11px;
  line-height: 1.8;
  color: #90a078;
  margin-top: 16px;
}
.claim-note {
  background: #f7f2e2;
  border: 1px solid #e9dfbd;
  border-radius: 7px;
  padding: 14px;
  margin: 22px 0;
  color: #978145;
  font-size: 11px;
}
.claim-note p {
  font-size: 10px;
  line-height: 1.7;
  margin-top: 10px;
}
.invoice-decision .app-btn {
  display: flex;
  width: 100%;
  margin-top: 10px;
}
.bills-table {
  font-size: 11px;
}
.bills-table .app-badge {
  font-size: 9px;
}
.bills-table .app-btn {
  font-size: 10px;
}
.hr-workspace {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
}
.staff-list {
  display: grid;
  gap: 5px;
  margin-top: 20px;
}
.staff-list button {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  min-width: 0;
  border: 0;
  border-radius: 6px;
  padding: 13px 8px;
  background: none;
  width: 100%;
}
.staff-list button[aria-pressed="true"] {
  background: #eff4e7;
}
.staff-list button > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.staff-list strong {
  font-size: 11px;
  display: block;
  font-weight: 500;
}
.staff-list small {
  font-size: 9px;
  color: #99a687;
  display: block;
  margin-top: 5px;
}
.staff-list .app-badge {
  font-size: 8px;
}
.onboarding-progress {
  height: 5px;
  border-radius: 4px;
  background: #e4ecd8;
  margin: 23px 0;
}
.onboarding-progress span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #9cb87e;
  transition: width 1s;
}
.onboarding-checks {
  display: grid;
  gap: 6px;
  margin-bottom: 22px;
}
.onboarding-checks > div {
  display: grid;
  grid-template-columns: 19px 1fr;
  gap: 6px 9px;
  padding: 12px 0;
  border-bottom: 1px solid #e8eede;
}
.onboarding-checks span {
  grid-row: span 2;
  color: #bcc5ad;
  font-size: 18px;
  align-self: center;
}
.onboarding-checks strong {
  font-size: 11px;
  font-weight: 500;
}
.onboarding-checks small {
  font-size: 9px;
  color: #9eab8c;
}
.onboarding-checks .complete span {
  color: #80a45b;
}
.document-list > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 0;
  border-bottom: 1px solid #e9edde;
  font-size: 10px;
}
.document-list .app-badge {
  font-size: 8px;
}
.product-screen .rota-card {
  padding: 18px;
}
.rota-grid {
  display: grid;
  grid-template-columns: 110px repeat(7, minmax(0, 1fr));
  font-size: 10px;
  gap: 0;
  border-top: 1px solid #e2e9d6;
  border-left: 1px solid #e2e9d6;
}
.rota-grid > div {
  min-width: 0;
  border-bottom: 1px solid #e2e9d6;
  border-right: 1px solid #e2e9d6;
  padding: 8px 5px;
}
.rota-corner {
  display: flex;
  align-items: center;
  background: #f3f7ea;
  color: #879c70;
  font-size: 9px;
}
.rota-day {
  background: #f3f7ea;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rota-day strong {
  font-size: 10px;
  font-weight: 500;
}
.rota-day span {
  font-size: 8px;
  color: #889c6e;
}
.rota-day small {
  font-size: 7px;
  color: #a0ae88;
}
.rota-day b {
  font-size: 8px;
  color: #9d844d;
  font-weight: 500;
}
.rota-person {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.rota-person strong {
  font-size: 9px;
  font-weight: 500;
}
.rota-person span,
.rota-person small {
  font-size: 7px;
  color: #9aa984;
}
.rota-cell {
  min-height: 65px;
  display: grid;
  place-items: center;
  background: #fffefa;
  transition: background 0.15s;
}
.rota-cell.drop-target {
  background: #e2edc8;
  outline: 2px dashed #9bb577;
}
.shift {
  width: 100%;
  min-height: 45px;
  border: 1px solid #cadab7;
  border-left: 3px solid #9bb57d;
  border-radius: 5px;
  padding: 7px 3px;
  background: #edf4e2;
  text-align: left;
  cursor: grab;
  color: #748e56;
}
.shift strong {
  display: block;
  font-size: 8px;
  font-weight: 500;
  white-space: normal;
  overflow-wrap: anywhere;
}
.shift small {
  display: block;
  font-size: 7px;
  margin-top: 6px;
}
.shift-kitchen {
  background: #f5efdd;
  border-color: #e0d1a5;
  border-left-color: #c3a86b;
  color: #ab945b;
}
.shift-bar {
  background: #e7eef0;
  border-color: #c4d8dc;
  border-left-color: #84a8b1;
  color: #7495a0;
}
.shift.selected {
  outline: 2px solid #9cae79;
  outline-offset: 2px;
}
.shift-off {
  font-size: 8px;
  color: #b8c1a5;
}
.shift-editor {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 15px;
  padding: 18px 0;
}
.shift-editor h4 {
  grid-column: 1/-1;
  margin: 5px 0;
}
.rota-mobile {
  display: none;
}
.analytics-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}
.analytics-products {
  grid-column: 1/-1;
}
.analytics-grid .app-chart {
  margin-top: 20px;
}
.analytics-grid .app-chart-canvas {
  height: 270px;
}
.analytics-products .app-table {
  font-size: 11px;
}
.alex-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 20px;
}
.alex-welcome {
  text-align: center;
  padding: 24px 10px 36px;
}
.alex-orb {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9efdc;
  color: #9baf7a;
  box-shadow: 0 0 0 8px #f4f7e9;
  margin: 0 auto 25px;
  font-size: 29px;
}
.alex-welcome h3 {
  font-size: 22px !important;
}
.alex-welcome p {
  font-size: 12px;
  color: #94a47e;
  max-width: 350px;
  margin: 15px auto 0;
  line-height: 1.7;
}
.chat-log {
  display: grid;
  gap: 20px;
}
.chat-message {
  padding: 17px 20px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.8;
}
.chat-message.user {
  background: #eaf0e0;
  margin-left: 35px;
  color: #6a8352;
}
.chat-message.assistant {
  background: #f7f7ed;
  border: 1px solid #e8ead7;
  color: #84946c;
  margin-right: 12px;
}
.chat-message.assistant p {
  min-height: 100px;
}
.alex-question {
  width: 100%;
  justify-content: space-between;
  margin-top: 27px;
  font-weight: 400;
  font-size: 12px;
}
.alex-conversation > .app-caption {
  margin-top: 20px;
  text-align: center;
}
.alex-context > div {
  display: grid;
  gap: 7px;
  padding: 18px 0;
  border-bottom: 1px solid #e4e9d6;
}
.alex-context > div > span {
  font-size: 10px;
  color: #95a57e;
}
.alex-context strong {
  font-size: 19px;
  font-weight: 500;
}
.alex-context small {
  display: block;
  font-size: 9px;
  color: #a5b08e;
  margin-top: 7px;
  font-weight: 400;
}
.alex-context #alex-draft {
  display: block;
  border: 0;
}
.alex-context #alex-draft h4 {
  margin-top: 0;
}
.alex-context #alex-draft p {
  font-size: 11px;
  line-height: 1.9;
  color: #879a6e;
}
.alex-context #alex-draft > strong {
  display: block;
  font-size: 12px;
  margin: 15px 0;
}
.alex-context #alex-draft .app-btn {
  width: 100%;
  font-size: 10px;
}
#modal-pos-mount .till-device {
  border-width: 5px;
  border-radius: 12px;
  box-shadow: none;
}
.product-screen:has(#modal-pos-mount) {
  padding: 20px;
}
.product-modal .till-device {
  font-family: Inter, sans-serif;
}
.product-modal .till-device .till-sheet {
  font-size: 13px;
}
@media (max-width: 1200px) {
  .booking-workspace {
    grid-template-columns: 1fr;
  }
  .booking-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .booking-aside > .app-card:last-child {
    display: none;
  }
  .booking-grid th {
    padding: 9px 2px;
  }
  .booking-event strong {
    font-size: 9px;
  }
  .supplier-workspace,
  .invoice-layout {
    grid-template-columns: minmax(0, 1fr) 230px;
  }
  .product-screen {
    padding: 22px;
  }
  .product-layout {
    grid-template-columns: 135px minmax(0, 1fr);
  }
  .product-sidebar {
    padding-inline: 8px;
  }
  .product-sidebar nav button {
    font-size: 9px;
  }
  .product-screen .app-stat > strong {
    font-size: 24px;
  }
  .kitchen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-modal .till-screen {
    grid-template-columns: 100px minmax(0, 1fr) 250px;
  }
  .product-modal .dish-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-modal .till-caption {
    left: 111px;
  }
}
@media (max-width: 1023px) {
  .departments-section .department-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .product-tile.department-card {
    padding: 22px;
  }
  .product-layout {
    grid-template-columns: 1fr;
  }
  .product-sidebar {
    display: none;
  }
  .product-screen {
    padding: 24px;
  }
  .product-modal {
    width: 94vw;
  }
  .recipe-workspace {
    grid-template-columns: 185px minmax(0, 1fr);
  }
  .rota-grid {
    display: none;
  }
  .rota-mobile {
    display: grid;
    gap: 10px;
  }
  .rota-mobile details {
    border: 1px solid #e0e8d2;
    border-radius: 6px;
    padding: 0 14px;
  }
  .rota-mobile summary {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    min-height: 50px;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
  }
  .rota-mobile summary > span {
    font-size: 9px;
    color: #8d9f73;
    font-weight: 400;
  }
  .rota-mobile details > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #e6ecd9;
    font-size: 11px;
  }
  .rota-mobile details > div small {
    display: block;
    font-size: 8px;
    color: #a4b08d;
    margin-top: 4px;
  }
}
@media (max-width: 760px) {
  .departments-section .department-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .product-tile.department-card {
    padding: 18px;
    min-height: 252px;
  }
  .product-tile strong {
    font-size: 19px;
  }
  .product-tile .tile-line {
    font-size: 11px;
    min-height: 52px;
  }
  .product-tile em {
    font-size: 9px;
  }
  .product-modal {
    width: 96vw;
    height: 94dvh;
    max-height: 94dvh;
    border-radius: 12px;
  }
  .product-modal-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 7px 12px;
    height: 96px;
    padding: 12px 16px;
  }
  .product-brand {
    gap: 13px;
  }
  .product-brand > #product-title {
    font-size: 12px;
    line-height: 1.3;
    padding-left: 13px;
  }
  .product-modal-header > .sample-label {
    grid-column: 1;
    grid-row: 2;
    margin-left: 0;
    justify-self: start;
    font-size: 8px;
    padding: 4px 7px;
  }
  .product-modal-header > .app-dialog-close {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 44px;
  }
  .product-layout {
    height: calc(100% - 96px);
  }
  .product-screen {
    padding: 18px;
    scrollbar-gutter: auto;
  }
  .product-screen h2 {
    font-size: 26px;
  }
  .product-screen .app-card {
    padding: 18px;
  }
  .product-screen .app-stat > strong {
    font-size: 25px;
  }
  .workspace-stats .app-stat {
    padding: 13px;
  }
  .workspace-stats .app-stat > small {
    font-size: 8px;
    min-height: 23px;
  }
  .product-screen .workspace-toolbar {
    align-items: stretch;
    gap: 16px;
  }
  .workspace-actions {
    width: 100%;
  }
  .booking-desktop {
    display: none;
  }
  .booking-mobile {
    display: grid;
    gap: 19px;
  }
  .booking-slot h4 {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin: 0 0 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid #e8ecdd;
  }
  .booking-slot h4 span {
    font-size: 9px;
    color: #95a681;
    font-weight: 400;
  }
  .booking-slot > div {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
  }
  .booking-table {
    font-size: 10px;
    min-width: 24px;
    color: #a7b593;
  }
  .booking-mobile .booking-event {
    padding: 11px 10px;
    min-height: 49px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .booking-mobile .booking-event strong {
    font-size: 11px;
    overflow-wrap: normal;
  }
  .booking-mobile .booking-event span {
    font-size: 9px;
    white-space: nowrap;
  }
  .booking-aside {
    grid-template-columns: 1fr;
  }
  .booking-aside:has(.booking-guest) {
    grid-row: 1;
  }
  .booking-key {
    font-size: 8px;
  }
  .kitchen-grid {
    grid-template-columns: 1fr;
  }
  .kitchen-ticket {
    padding: 20px;
  }
  .kitchen-ticket header small {
    font-size: 10px;
  }
  .kitchen-ticket h3 {
    font-size: 24px;
  }
  .kitchen-ticket time {
    font-size: 17px;
  }
  .kitchen-ticket ul {
    font-size: 14px;
  }
  .recipe-workspace {
    grid-template-columns: 1fr;
  }
  .recipe-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
  }
  .recipe-list > h3 {
    grid-column: 1/-1;
  }
  .recipe-list button {
    align-items: flex-start;
    font-size: 11px;
    padding: 11px 5px;
    gap: 8px;
  }
  .recipe-list button b {
    font-size: 9px;
  }
  .recipe-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .recipe-metrics .app-stat {
    padding: 10px;
  }
  .recipe-metrics .app-stat > span {
    font-size: 9px;
  }
  .recipe-metrics .app-stat strong {
    font-size: 19px;
  }
  .recipe-metrics .app-stat small {
    font-size: 7px;
  }
  .allergen-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stock-row {
    grid-template-columns: minmax(0, 1fr) 95px;
    gap: 12px;
    padding: 20px 0;
  }
  .stock-row > div:first-child {
    grid-column: 1;
  }
  .stock-gauge {
    grid-column: 1;
    grid-row: 2;
  }
  .stock-value {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }
  .stock-row > .app-btn,
  .stock-row > .app-badge {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
  .stock-row > .app-btn {
    font-size: 9px;
    padding: 7px;
    min-height: 38px;
  }
  .supplier-workspace,
  .invoice-layout,
  .hr-workspace,
  .alex-workspace {
    grid-template-columns: 1fr;
  }
  .supplier-basket {
    position: relative;
    top: auto;
  }
  .supplier-offers {
    gap: 6px;
  }
  .supplier-offers button {
    padding: 12px 7px;
  }
  .supplier-offers button span {
    font-size: 8px;
  }
  .supplier-offers button strong {
    font-size: 21px;
  }
  .supplier-offers button small {
    font-size: 7px;
  }
  .invoice-summary {
    flex-wrap: wrap;
  }
  .invoice-summary > strong {
    font-size: 26px;
  }
  .responsive-table thead {
    display: none;
  }
  .responsive-table tbody {
    display: grid;
    gap: 15px;
  }
  .responsive-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid #e4ebd6;
  }
  .responsive-table tbody :is(th, td) {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .responsive-table tbody th {
    grid-column: 1/-1;
    font-size: 13px;
    font-weight: 600;
  }
  .responsive-table td:before {
    content: attr(data-label);
    display: block;
    font-size: 9px;
    color: #9fae85;
    margin-bottom: 6px;
  }
  .staff-list button {
    padding: 15px 8px;
  }
  .onboarding-detail .app-card-heading {
    flex-wrap: wrap;
  }
  .document-list > div {
    flex-wrap: wrap;
  }
  .shift-editor {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .shift-editor .app-btn {
    grid-column: 1/-1;
  }
  .rota-mobile summary {
    flex-wrap: wrap;
    gap: 4px;
    padding: 12px 0;
  }
  .rota-mobile summary > span {
    font-size: 8px;
  }
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  .analytics-products {
    grid-column: auto;
  }
  .analytics-grid .app-chart-canvas {
    height: 230px;
  }
  .alex-context {
    order: 2;
  }
  .alex-welcome {
    padding: 20px 0;
  }
  .alex-welcome h3 {
    font-size: 23px !important;
  }
  .chat-message.user {
    margin-left: 10px;
  }
  .chat-message.assistant {
    margin-right: 0;
  }
  .product-screen:has(#modal-pos-mount) {
    padding: 12px;
  }
  .product-modal .till-screen {
    display: block;
  }
  .product-modal .till-caption {
    left: 14px;
  }
  .product-modal .till-brand {
    gap: 6px;
    font-size: 10px;
  }
  .product-modal .till-topbar {
    padding: 0 8px;
    gap: 5px;
  }
  .product-modal .till-top-actions {
    gap: 6px;
  }
  .product-modal .till-time {
    display: none;
  }
  .product-modal .till-menu-button {
    width: 29px;
    height: 29px;
  }
  .product-modal .dish-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-modal .dish-tile .dish-name {
    font-size: 13px;
  }
  .product-modal .till-venue {
    font-size: 9px;
  }
  .product-modal .till-status {
    font-size: 9px;
  }
}
@media (max-width: 420px) {
  .departments-section > .wrap {
    padding-inline: 15px;
  }
  .product-tile.department-card {
    padding: 16px 13px;
  }
  .product-tile strong {
    font-size: 17px;
  }
  .product-tile .tile-line {
    font-size: 10px;
    min-height: 46px;
  }
  .tile-mini {
    gap: 4px;
  }
  .mini-3 i {
    margin-right: 7px;
  }
  .product-screen {
    padding: 15px;
  }
  .product-screen .app-card {
    padding: 15px;
  }
  .product-modal .app-stat > strong {
    font-size: 22px;
  }
  .product-toast {
    font-size: 10px;
    bottom: 12px;
    padding: 10px 13px;
  }
  .recipe-metrics .app-stat strong {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tile-mini i {
    animation: none;
  }
  .product-tile.department-card {
    transition: none;
  }
  .product-tile:hover {
    transform: none;
  }
  .stock-gauge > span {
    transition: none;
  }
}

/* Avoid compressed category names in the inline iPad at tablet widths. */
@media (min-width:761px) and (max-width:1023px){#till-demo .dish-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}