body.mesa-authenticated {
  --mesa-shell-topbar-height: 64px;
}

.mesa-shell-topbar {
  display: flex;
  align-items: center;
  gap: var(--mesa-space-3);
  height: var(--mesa-shell-topbar-height);
  min-height: var(--mesa-shell-topbar-height);
  padding-inline: var(--mesa-space-4);
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--mesa-espresso);
  color: var(--mesa-surface);
  box-shadow: var(--mesa-shadow-1);
}

.mesa-shell-topbar :focus-visible {
  outline-color: var(--mesa-surface);
}

.mesa-shell-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mesa-space-2);
  flex: none;
  color: var(--mesa-surface);
  text-decoration: none;
}

.mesa-shell-brand:hover { color: var(--mesa-surface); }
.mesa-shell-brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--mesa-radius-sm);
  background: var(--mesa-brand);
  color: var(--mesa-surface);
  font-family: var(--mesa-font-brand);
  font-weight: var(--mesa-font-weight-bold);
}
.mesa-shell-brand-copy { display: flex; flex-direction: column; line-height: 1; }
.mesa-shell-brand-copy strong { font-family: var(--mesa-font-brand); letter-spacing: .07em; }
.mesa-shell-brand-copy small { font-size: 10px; margin-top: 2px; }

.mesa-shell-location {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-inline-start: var(--mesa-space-4);
  border-inline-start: 1px solid var(--mesa-ink-muted);
  line-height: 1.2;
}
.mesa-shell-location span { color: var(--mesa-border); font-size: var(--mesa-type-caption-size); }
.mesa-shell-location strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mesa-shell-context {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-inline-start: auto;
  text-align: right;
  line-height: 1.25;
}
.mesa-shell-context strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesa-shell-context span { color: var(--mesa-border); font-size: var(--mesa-type-caption-size); }

.mesa-shell-menu,
.mesa-shell-logout,
.mesa-shell-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mesa-space-2);
  min-height: var(--mesa-target-default);
  border: 1px solid currentColor;
  border-radius: var(--mesa-radius-sm);
  background: transparent;
  color: inherit;
  padding: var(--mesa-space-2) var(--mesa-space-3);
  font: inherit;
  cursor: pointer;
}
.mesa-shell-menu:hover,
.mesa-shell-logout:hover { background: rgb(255 255 255 / .12); color: inherit; }
.mesa-shell-icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mesa-shell-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.mesa-shell-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.mesa-shell-layout > .container.app-shell { min-width: 0; width: 100%; }
body.mesa-authenticated[data-mesa-shell-mode="standard"] .mesa-shell-layout > .container.app-shell {
  max-width: none;
}
body.mesa-authenticated[data-mesa-shell-mode="operational"] .mesa-shell-layout {
  display: block;
}
body.mesa-authenticated[data-mesa-shell-surface="sales"] .container.app-shell,
body.mesa-authenticated[data-mesa-shell-surface="tables"] .container.app-shell {
  width: 100%;
  max-width: none;
  height: calc(100vh - var(--mesa-shell-topbar-height));
  height: calc(100dvh - var(--mesa-shell-topbar-height));
  padding: 0;
}
body.mesa-authenticated[data-mesa-shell-surface="sales"] .container.app-shell > main,
body.mesa-authenticated[data-mesa-shell-surface="tables"] .container.app-shell > main {
  height: 100%;
}
.mesa-shell-sidebar {
  min-width: 0;
  max-height: calc(100dvh - var(--mesa-shell-topbar-height));
  overflow-y: auto;
  padding: var(--mesa-space-4);
  position: sticky;
  top: var(--mesa-shell-topbar-height);
  background: var(--mesa-surface);
  border-inline-end: 1px solid var(--mesa-border);
}
.mesa-shell-navigation { display: block; }
.mesa-shell-nav-group + .mesa-shell-nav-group { margin-block-start: var(--mesa-space-4); }
.mesa-shell-nav-group h2 {
  margin: 0 0 var(--mesa-space-1);
  color: var(--mesa-ink-muted);
  font-size: var(--mesa-type-caption-size);
  font-weight: var(--mesa-font-weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mesa-shell-nav-group ul { list-style: none; margin: 0; padding: 0; }
.mesa-shell-nav-link {
  display: flex;
  align-items: center;
  gap: var(--mesa-space-3);
  min-height: var(--mesa-target-default);
  padding: var(--mesa-space-2) var(--mesa-space-3);
  border-radius: var(--mesa-radius-sm);
  color: var(--mesa-ink);
  text-decoration: none;
}
.mesa-shell-nav-link:hover { background: var(--mesa-neutral-soft); color: var(--mesa-ink); }
.mesa-shell-nav-link[data-active="true"] {
  background: var(--mesa-page);
  color: var(--mesa-espresso);
  font-weight: var(--mesa-font-weight-bold);
  box-shadow: inset 3px 0 0 var(--mesa-brand);
}

.mesa-shell-drawer {
  --bs-offcanvas-width: min(320px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  background: var(--mesa-surface);
  overflow-y: auto;
  transition-duration: var(--mesa-motion-overlay);
}
.mesa-shell-drawer-header { gap: var(--mesa-space-2); padding: var(--mesa-space-4); }
.mesa-shell-drawer-header h2 { min-width: 0; margin: 0; font-size: var(--mesa-type-h3-size); }
.mesa-shell-close { color: var(--mesa-ink); }
.mesa-shell-drawer-context {
  display: flex;
  flex-direction: column;
  padding: 0 var(--mesa-space-4) var(--mesa-space-4);
  color: var(--mesa-ink);
}
.mesa-shell-drawer-context span { color: var(--mesa-ink-muted); font-size: var(--mesa-type-small-size); }
.mesa-shell-drawer .mesa-shell-navigation { padding: 0 var(--mesa-space-4); overflow-y: auto; }
.mesa-shell-drawer-logout { margin: var(--mesa-space-4); border-top: 1px solid var(--mesa-border); padding-top: var(--mesa-space-4); }
.mesa-shell-drawer-logout .mesa-shell-logout { width: 100%; color: var(--mesa-ink); }
.mesa-shell-drawer-logout .mesa-shell-logout:hover { background: var(--mesa-neutral-soft); }

.mesa-shell-skip {
  position: fixed;
  inset-block-start: -100px;
  inset-inline-start: var(--mesa-space-2);
  z-index: 110;
  padding: var(--mesa-space-2) var(--mesa-space-3);
  background: var(--mesa-surface-elevated);
  color: var(--mesa-ink);
}
.mesa-shell-skip:focus-visible { inset-block-start: var(--mesa-space-2); }

@media (min-width: 1200px) {
  .mesa-shell-layout[data-mesa-has-sidebar="true"] { grid-template-columns: 208px minmax(0, 1fr); }
  .mesa-shell-topbar[data-mesa-has-sidebar="true"] .mesa-shell-menu { display: none; }
}
@media (min-width: 1280px) {
  .mesa-shell-layout[data-mesa-has-sidebar="true"] { grid-template-columns: 224px minmax(0, 1fr); }
}
@media (max-width: 1199.98px) {
  .mesa-shell-sidebar { display: none; }
}
@media (max-width: 767.98px) {
  body.mesa-authenticated { --mesa-shell-topbar-height: 56px; }
  .mesa-shell-brand-copy { display: none; }
  .mesa-shell-location { padding-inline-start: var(--mesa-space-2); }
  .mesa-shell-location span { display: none; }
  .mesa-shell-context span,
  .mesa-shell-topbar-logout { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mesa-shell-drawer { transition-duration: 0s; }
}
@media (max-width: 768px) {
  body.mesa-authenticated[data-mesa-shell-surface="tables"] .container.app-shell,
  body.mesa-authenticated[data-mesa-shell-surface="tables"] .container.app-shell > main {
    height: auto;
    min-height: calc(100dvh - var(--mesa-shell-topbar-height));
  }
}
@media print {
  .mesa-shell-topbar,
  .mesa-shell-sidebar,
  .mesa-shell-drawer,
  .mesa-shell-skip { display: none; }
  .mesa-shell-layout { display: block; }
  .mesa-shell-layout > .container.app-shell { max-width: none; padding: 0; }
  body.mesa-authenticated[data-mesa-shell-surface="sales"] .container.app-shell,
  body.mesa-authenticated[data-mesa-shell-surface="tables"] .container.app-shell,
  body.mesa-authenticated[data-mesa-shell-surface="sales"] .container.app-shell > main,
  body.mesa-authenticated[data-mesa-shell-surface="tables"] .container.app-shell > main {
    height: auto;
    overflow: visible;
  }
}