/* ===== Real-app shell: full-viewport surface chosen automatically by device =====
   Phones (narrow) -> mobile POS. Touch devices >= 768px (tablets, incl. large
   landscape iPad) -> tablet POS. Mouse/desktop >= 768px -> management console.
   Using pointer type (not just width) so a 1366px tablet and a 1366px laptop
   are told apart correctly. */
.app-surface {
  display: none;
}

@media (max-width: 767px) {
  .app-mobile {
    display: block;
  }
}

@media (min-width: 768px) and (pointer: coarse) {
  .app-tablet {
    display: block;
  }
}

@media (min-width: 768px) and (not (pointer: coarse)) {
  .app-desktop {
    display: block;
  }
}

/* Manual override for demos/testing: append ?view=mobile|tablet|desktop */
html.force-mobile .app-surface,
html.force-tablet .app-surface,
html.force-desktop .app-surface {
  display: none;
}

html.force-mobile .app-mobile {
  display: block;
}

html.force-tablet .app-tablet {
  display: block;
}

html.force-desktop .app-desktop {
  display: block;
}

/* Mobile cashier POS fills the screen (no device bezel) */
.app-mobile {
  position: fixed;
  inset: 0;
}

/* Tablet cashier POS fills the screen (no device bezel) */
.app-tablet {
  position: fixed;
  inset: 0;
}

/* Desktop console: full-width app shell with sticky sidebar + toolbar */
.app-desktop {
  min-height: 100vh;
}

.app-desktop .desktop-app {
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.app-desktop .desktop-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
}

.app-desktop .desktop-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
}