/* Application styles */

/* Dashboard sidebar — always a horizontal sticky strip */
.dash-sidebar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  position: sticky !important;
  top: 56px !important;
  z-index: 30 !important;
  background: var(--bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border) !important;
  border-right: none !important;
  padding: 8px 14px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none;
  flex-shrink: 0 !important;
  align-self: auto !important;
}

/* Dashboard layout — padding-top removed; outer <main> in the layout
   clears the navbar. Stacking both caused ~1 inch of empty space above
   every dashboard page. */
.dash-layout {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh;
  max-width: 1100px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.dash-layout > main {
  padding: 20px 20px 160px !important;
  flex: 1;
  min-width: 0;
}
@media (min-width: 640px) {
  .dash-layout > main { padding: 28px 40px 60px !important; }
}

.app-shell { padding-left: 16px; padding-right: 16px; }
@media (min-width: 640px) {
  .app-shell { max-width: 680px !important; }
}
@media (min-width: 1024px) {
  .app-shell { max-width: 860px !important; }
}

/* Override green tokens → orange */
:root {
  --ok:      #f97316;
  --ok-soft: rgba(249, 115, 22, 0.12);
  --accent:  #f97316;
  --accent-soft:   rgba(249, 115, 22, 0.10);
  --accent-border: rgba(249, 115, 22, 0.35);
  --accent-pulse:  rgba(249, 115, 22, 0.30);
}

.live-pulse,
.dash-live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f97316;
  flex-shrink: 0;
  animation: live-ring 1.6s ease-out infinite;
}

@keyframes live-ring {
  0%   { box-shadow: 0 0 0 0   rgba(249, 115, 22, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(249, 115, 22, 0);    }
}

.hidden { display: none !important; }

/* ── Mobile centering hardening ───────────────────────────────────────────────
   1. Prevent any rogue horizontal overflow (wide image, card grid, etc) from
      pushing the page and making the content look off-center.
   2. Use transform-based centering on the bottom tab bar — left:0;right:0
      with margin-inline:auto has edge cases on iOS Safari where the bar
      ends up a pixel or two off-center. translateX(-50%) is bulletproof.
   3. Respect horizontal safe-area insets (notched phones in landscape) so
      content doesn't tuck under the notch or home indicator. */
html, body {
  overflow-x: hidden;
}
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.bottom-tabs {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
}

/* Prevent pac-container backdrop from blocking touch on surrounding elements */
.pac-container { pointer-events: none !important; }
.pac-item { pointer-events: auto !important; }

/* ── Sticky save bar (floats at viewport bottom while editing long forms) ── */
.save-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
  padding: 12px 16px;
  padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px));
}
.save-bar-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}
.save-bar-inner .save-bar-label {
  margin-right: auto;
  font-size: 12px;
  color: var(--muted-fg);
}
/* Vendor bottom tab bar is always visible — float save bar above it */
body:has(.bottom-tabs--vendor) .save-bar {
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  padding-bottom: 12px;
}