/* UX-STD v1 · team-native */

/* ─── Safe Area ─────────────────────────────────────────── */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Bottom sticky bars need safe-area padding */
.ux-sticky-bottom,
.bottom-actions,
[data-sticky-bottom] {
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
}

/* ─── Frosted Glass Header ─────────────────────────────── */
/* admin.html's .header is deliberately NOT here: it carries its own day/night colours
   and is already sticky; forcing a dark glass over it turned the day theme muddy. */
.ux-navbar,
.epgb-topbar,
.top-bar {
  position: sticky;
  top: 0;
  background: rgba(5, 4, 3, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(196, 26, 26, 0.35);
}

@supports not (backdrop-filter: blur(1px)) {
  .ux-navbar,
  .epgb-topbar,
  .top-bar {
    background: #050403;
  }
}

/* ─── admin.html sidebar → horizontal tab strip (mobile) ─────
   Only admin.html has .sidebar. Its own ≤600px rules keep a 62px vertical icon rail
   (width:62px, column tabs, sticky top:57px). Here the rail becomes a sticky, scrollable
   horizontal strip directly under the header stack, so every tab is reachable with one
   thumb swipe. --tn-stack is measured by team-native.js (.epgb-topbar + .header);
   57px = admin's header alone, the same value admin.html already assumes. */
@media (max-width: 600px) {
  .layout {
    flex-direction: column;
  }

  .sidebar {
    position: sticky;
    top: var(--tn-stack, 57px);
    width: 100%;
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 0 6px;
    border-left: 0;
    border-bottom: 1px solid rgba(196, 26, 26, 0.35);
    /* theme-aware: admin flips --bg-rgb in day mode, and its .side-tab labels use --cream
       (dark in day) — a fixed dark glass here put black text on a dark strip */
    background: rgba(var(--bg-rgb, 5, 4, 3), 0.88);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    z-index: 90;
  }
  .sidebar::-webkit-scrollbar { display: none; }

  @supports not (backdrop-filter: blur(1px)) {
    .sidebar {
      background: rgb(var(--bg-rgb, 5, 4, 3));
    }
  }

  /* section dividers make no sense in a row */
  .sidebar .side-section {
    display: none;
  }

  .sidebar .side-tab {
    flex: 0 0 auto;
    width: auto;
    min-width: 64px;
    min-height: 56px;
    padding: 8px 8px 6px;
    scroll-snap-align: start;
    border-right: 0;
    border-bottom: 3px solid transparent;
  }
  .sidebar .side-tab .lbl {
    font-size: 0.6rem;
    max-width: 72px;
  }
  .sidebar .side-tab.active {
    border-right-width: 0;
    border-bottom-color: var(--red, #c41a1a);
  }

  /* the long-press tooltip can't escape a scrolling row — labels are visible anyway */
  .sidebar .side-tab[data-tip-mobile].peek::after {
    display: none;
  }

  /* admin header action row (theme / notifications / invoices / reports) is redundant on the
     phone: theme = the floating ⛙ button, invoices + reports = staff-hub tiles, notification
     prefs = button in the 🔴 live tab (.tn-notif-btn). Logo + live badge stay. */
  .header .icon-btn {
    display: none;
  }
  .header > div:has(.icon-btn) {
    display: none;
  }
  .tn-mob-only {
    display: inline-flex !important;
  }

  /* Prevent horizontal overflow */
  html, body {
    overflow-x: clip;
  }
}

/* mobile-only relocation of the notification-prefs trigger (admin.html, 🔴 live tab) */
.tn-mob-only {
  display: none;
}
.tn-notif-btn {
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  margin: 0 0 12px;
  border: 1px solid var(--grey, rgba(216, 208, 192, 0.3));
  border-radius: 8px;
  background: transparent;
  color: var(--cream, inherit);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.tn-notif-btn svg {
  width: 20px;
  height: 20px;
}

/* ─── Width Stretch Fix ────────────────────────────────── */
.stretch-fix {
  width: stretch;
  width: -webkit-fill-available;
  width: -moz-available;
}

/* ─── Scroll Anchoring ─────────────────────────────────── */
.orders-list,
.feed,
.live-list,
[data-live-list] {
  overflow-anchor: auto;
}

/* Text balance for headings */
h1, h2, h3, .section-title {
  text-wrap: balance;
}

/* ─── UX Switch (Toggle) ───────────────────────────────── */
.ux-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.ux-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ux-switch-track {
  position: relative;
  width: 44px;
  height: 26px;
  background: #3a3a3a;
  border-radius: 13px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.ux-switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.ux-switch input:checked + .ux-switch-track {
  background: #c41a1a;
}

.ux-switch input:checked + .ux-switch-track::after {
  transform: translateX(18px);
}

.ux-switch-lbl {
  font-size: 0.9rem;
}

/* iOS native switch vibrates on its own */
.ux-switch input[switch] + .ux-switch-track {
  display: none;
}

.ux-switch input[switch] {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  width: 51px;
  height: 31px;
  background: #3a3a3a;
  border-radius: 16px;
}

@supports selector(:has(*)) {
  /* Only show custom track when NOT using native switch */
  .ux-switch:has(input:not([switch])) .ux-switch-track {
    display: block;
  }
  .ux-switch:has(input[switch]) .ux-switch-track {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ux-switch-track,
  .ux-switch-track::after {
    transition: none;
  }
}

/* ─── Styled Select (iOS 18+ / Chrome) ─────────────────── */
@supports (appearance: base-select) {
  select,
  ::picker(select) {
    appearance: base-select;
  }

  select {
    background: #0d0b09;
    color: #d8d0c0;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    padding: 0.55rem 0.8rem;
    font: inherit;
    min-height: 44px;
  }

  ::picker(select) {
    background: #0d0b09;
    border: 1px solid #c41a1a;
    border-radius: 8px;
    padding: 0.3rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
  }

  option {
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
  }

  option:checked {
    background: rgba(196, 26, 26, 0.25);
  }

  option::checkmark {
    color: #c41a1a;
  }

  select::picker-icon {
    color: #c41a1a;
  }
}

/* ─── Dialog (Bottom Sheet Mobile) ─────────────────────── */
dialog {
  background: #0d0b09;
  color: #d8d0c0;
  border: 1px solid #c41a1a;
  border-radius: 14px 14px 0 0;
  margin: auto 0 0;
  width: stretch;
  width: -webkit-fill-available;
  max-width: 100%;
  padding: 1rem calc(1rem + env(safe-area-inset-left)) calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-right));
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Dialog open animation */
dialog[open] {
  translate: 0 0;
  opacity: 1;
}

@starting-style {
  dialog[open] {
    translate: 0 30px;
    opacity: 0;
  }
}

dialog {
  transition: translate 0.22s, opacity 0.22s, overlay 0.22s allow-discrete, display 0.22s allow-discrete;
}

/* Desktop: centered dialog */
@media (min-width: 700px) {
  dialog {
    margin: auto;
    max-width: 520px;
    border-radius: 14px;
  }
}

/* ─── View Transitions ─────────────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) {
    animation: none;
  }
}

/* ─── Wake Lock Indicator ──────────────────────────────── */
.wake-lock-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  margin-inline-start: 6px;
  vertical-align: middle;
  animation: wakePulse 2s ease-in-out infinite;
}

@keyframes wakePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .wake-lock-dot {
    animation: none;
  }
}

/* ─── Install Prompt Card ──────────────────────────────── */
.install-prompt-card {
  background: rgba(196, 26, 26, 0.1);
  border: 1px solid rgba(196, 26, 26, 0.3);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.install-prompt-card .install-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.install-prompt-card .install-text {
  flex: 1;
}

.install-prompt-card .install-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.install-prompt-card .install-desc {
  font-size: 0.85rem;
  color: var(--dim, #888);
  margin-bottom: 10px;
}

.install-prompt-card .install-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.install-prompt-card button {
  padding: 8px 16px;
  border-radius: 6px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
}

.install-prompt-card .btn-install {
  background: #c41a1a;
  color: #fff;
}

.install-prompt-card .btn-dismiss {
  background: transparent;
  border: 1px solid #3a3a3a;
  color: var(--dim, #888);
}