/* "Add to home screen" banner (public/shared/install-banner.js) for the back office, register, kitchen display and control panel.
   Only tokens all their stylesheets define (--panel, --ink, --muted, --line), with fallbacks; the button takes the page's
   main colour: --brand in the ERP, --accent in the panel. Below the pages' dialogs (z 100+), so an open dialog stays on top. */
.a2hs-bar {
  position: fixed; inset-inline: 0; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: var(--panel, #fff); color: var(--ink, #1f1f1f);
  border-bottom: 1px solid var(--line, #e5e5e5); box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  font: 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif;
  animation: a2hs-in .25s ease-out;
}
@keyframes a2hs-in { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .a2hs-bar { animation: none; } }
.a2hs-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--line, #eee); }
.a2hs-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.a2hs-title { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.a2hs-sub { color: var(--muted, #666); font-size: 12.5px; overflow-wrap: anywhere; }
.a2hs-add {
  flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--brand, var(--accent, #3b6df0)); color: var(--on-brand, var(--on-accent, #fff));
  font: inherit; font-weight: 700;
}
.a2hs-x {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; margin-inline-start: -4px;
  border: 0; border-radius: 50%; background: none; color: var(--muted, #666); cursor: pointer;
}
.a2hs-add:focus-visible, .a2hs-x:focus-visible, .a2hs-ok:focus-visible { outline: 2px solid var(--brand, var(--accent, #3b6df0)); outline-offset: 2px; }

.a2hs-scrim {
  position: fixed; inset: 0; z-index: 1000; display: grid; align-items: end; justify-items: center;
  padding: 16px 12px max(16px, env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .45);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif;
}
.a2hs-sheet {
  width: min(440px, 100%); display: grid; gap: 14px; padding: 20px 18px 16px;
  background: var(--panel, #fff); color: var(--ink, #1f1f1f); border-radius: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.a2hs-h { margin: 0; font-size: 17px; font-weight: 750; }
.a2hs-steps { margin: 0; padding-inline-start: 22px; display: grid; gap: 10px; }
.a2hs-ic { display: inline-grid; place-items: center; vertical-align: -4px; margin-inline: 3px; padding: 2px; border-radius: 6px; background: var(--line, #eee); color: var(--brand, var(--accent, #3b6df0)); }
.a2hs-ok {
  min-height: 46px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--brand, var(--accent, #3b6df0)); color: var(--on-brand, var(--on-accent, #fff)); font: inherit; font-weight: 700;
}