/* ═══════════════════════════════════════════════════════════════════
   SOVEL POS — Desktop (Windows) presentation layer
   Loaded on every surface; rules apply ONLY when running inside the
   native Windows shell (html[data-shell="desktop"][data-platform="windows"]).
   Presentation only — no business logic, no payload, no endpoints.
   ═══════════════════════════════════════════════════════════════════ */

html[data-shell="desktop"][data-platform="windows"] body {
  /* Operation prioritizes legibility; brand fonts stay on titles only. */
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system,
               BlinkMacSystemFont, sans-serif;
  /* The page scrolls normally; the header below is sticky so the
     window stays draggable and the nav reachable at any scroll depth.
     (overflow:hidden here previously killed page scroll — long views
     like Settings became unreachable.) */
}

/* Keep the header pinned while long views (Settings, Service Log)
   scroll underneath — desktop-app feel, and the drag region is always
   available. */
html[data-shell="desktop"][data-platform="windows"] .app-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Reserve space for the Windows caption buttons when the integrated
   title bar (Window Controls Overlay) is active in desktop mode.
   env(titlebar-area-width) is the REAL geometry Chromium reports for
   the overlay (window width minus the min/max/close cluster), so the
   header content can never slide underneath the caption buttons at
   any window size or DPI scaling. Fallback reserves 170px. */
html[data-shell="desktop"][data-platform="windows"][data-window-mode="desktop"] .app-header,
html[data-shell="desktop"][data-platform="windows"][data-window-mode="desktop"] header {
  min-height: 48px;
  -webkit-app-region: drag;    /* let the header drag the window */
  user-select: none;
  padding-right: calc((100% - env(titlebar-area-width, calc(100% - 170px))) + 16px);
}

/* Interactive zones inside the header must stay clickable — the nav
   and the whole right cluster (printer status pill, user menu and its
   dropdown) opt out of the drag region as CONTAINERS, so every child
   (including non-button elements like the print-status <div>) works. */
html[data-shell="desktop"][data-platform="windows"] .app-header .app-nav,
html[data-shell="desktop"][data-platform="windows"] .app-header .app-header-right,
html[data-shell="desktop"][data-platform="windows"] .app-header button,
html[data-shell="desktop"][data-platform="windows"] .app-header a,
html[data-shell="desktop"][data-platform="windows"] header nav,
html[data-shell="desktop"][data-platform="windows"] header button,
html[data-shell="desktop"][data-platform="windows"] header a {
  -webkit-app-region: no-drag;
}

/* Touch-safe targets on a POS terminal (Microsoft guidance: ≥40px;
   POS practice: 48px min, 56px in kiosk). */
html[data-shell="desktop"][data-platform="windows"] button,
html[data-shell="desktop"][data-platform="windows"] .app-nav a,
html[data-shell="desktop"][data-platform="windows"] .btn {
  min-height: 44px;
}

html[data-shell="desktop"][data-platform="windows"][data-window-mode="kiosk"] button,
html[data-shell="desktop"][data-platform="windows"][data-window-mode="kiosk"] .btn {
  min-height: 56px;
}

/* Accessibility: visible focus + high-contrast support. */
html[data-shell="desktop"][data-platform="windows"] :focus-visible {
  outline: 3px solid Highlight;
  outline-offset: 2px;
}

@media (forced-colors: active) {
  html[data-shell="desktop"][data-platform="windows"] button,
  html[data-shell="desktop"][data-platform="windows"] .app-nav a,
  html[data-shell="desktop"][data-platform="windows"] .order-card,
  html[data-shell="desktop"][data-platform="windows"] .card {
    forced-color-adjust: auto;
    border: 1px solid ButtonText;
  }
  html[data-shell="desktop"][data-platform="windows"] .status-dot {
    border: 1px solid ButtonText;
  }
}