/* Tempest customisations on top of the Phoenix theme. Vendor files stay untouched. */

:root {
  --tp-bottom-bar-height: 4.25rem;
  --tp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tp-safe-left: env(safe-area-inset-left, 0px);
  --tp-safe-right: env(safe-area-inset-right, 0px);
}

html, body { overscroll-behavior-y: none; }
body { -webkit-tap-highlight-color: transparent; }

/* Theme toggle icons */
[data-bs-theme="light"] .tp-theme-dark-only,
[data-bs-theme="dark"] .tp-theme-light-only { display: none !important; }

.tp-topbar { padding-left: max(1rem, var(--tp-safe-left)); padding-right: max(1rem, var(--tp-safe-right)); }

.tp-app .content {
  padding-left: max(1rem, var(--tp-safe-left));
  padding-right: max(1rem, var(--tp-safe-right));
}

@media (max-width: 991.98px) {
  .tp-app .content {
    padding-bottom: calc(var(--tp-bottom-bar-height) + var(--tp-safe-bottom) + 1.5rem);
  }
  .tp-toasts { bottom: calc(var(--tp-bottom-bar-height) + var(--tp-safe-bottom)); }
}
@media (min-width: 992px) {
  .tp-app .content { padding-bottom: 3rem; }
  .tp-toasts { bottom: 0; }
}
.tp-toasts { right: 0; z-index: 1090; }

.tp-sidebar-account { margin-top: auto; }
.navbar-vertical .nav-link-icon svg { width: 16px; height: 16px; }
.navbar-vertical label.nav-link { cursor: pointer; }
.navbar-top .navbar-nav-icons svg { width: 20px; height: 20px; }

/* iPhone bottom bar: Locations, Add location, Map */
.tp-bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: calc(var(--tp-bottom-bar-height) + var(--tp-safe-bottom));
  padding: 0 var(--tp-safe-right) var(--tp-safe-bottom) var(--tp-safe-left);
  background: var(--phoenix-body-bg, var(--phoenix-emphasis-bg));
  border-top: 1px solid var(--phoenix-border-color-translucent, var(--phoenix-border-color));
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .05);
}
.tp-bottom-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  min-height: 44px;
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--phoenix-body-color);
  text-decoration: none;
  cursor: pointer;
}
.tp-bottom-item svg { width: 22px; height: 22px; }
.tp-bottom-item.active { color: var(--phoenix-primary); }
.tp-bottom-add { color: var(--phoenix-primary); }
.tp-add-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem; height: 3.25rem;
  margin-top: -1.25rem;
  border-radius: 50%;
  background: var(--phoenix-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(56, 116, 255, .45);
}
.tp-add-circle svg { width: 28px; height: 28px; }

.tp-visually-hidden-input {
  position: absolute !important;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Sync status pill */
.tp-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
  border: 1px solid var(--phoenix-border-color);
  padding: .2rem .7rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--phoenix-body-color);
  white-space: nowrap;
}
.tp-sync-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--phoenix-secondary); }
.tp-sync-pill[data-state="synced"] .tp-sync-dot { background: var(--phoenix-success); }
.tp-sync-pill[data-state="pending"] .tp-sync-dot { background: var(--phoenix-warning); }
.tp-sync-pill[data-state="syncing"] .tp-sync-dot { background: var(--phoenix-info); animation: tp-pulse 1s infinite alternate; }
.tp-sync-pill[data-state="offline"] .tp-sync-dot { background: var(--phoenix-gray-500, #8a94ad); }
.tp-sync-pill[data-state="error"] .tp-sync-dot,
.tp-sync-pill[data-state="signin"] .tp-sync-dot { background: var(--phoenix-danger); }
@keyframes tp-pulse { from { opacity: .35; } to { opacity: 1; } }
@media (max-width: 400px) { #sync-label { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; } }

/* Large touch targets */
.tp-touch, .tp-app .btn-lg { min-height: 48px; }
.tp-app .form-control, .tp-app .form-select { min-height: 44px; font-size: 16px; } /* 16px stops iOS zooming on focus */

/* Location cards */
.tp-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.tp-card { overflow: hidden; height: 100%; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.tp-card:hover, .tp-card:hover * { color: inherit; text-decoration: none; }
.tp-app .form-label { text-transform: none; font-size: .875rem; }
.tp-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--phoenix-secondary-bg, #eff2f6);
  display: flex; align-items: center; justify-content: center;
  color: var(--phoenix-tertiary-color);
  overflow: hidden;
}
.tp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-thumb .tp-thumb-badges { position: absolute; top: .5rem; left: .5rem; display: flex; gap: .25rem; flex-wrap: wrap; }

.tp-photo-strip { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .25rem; }
.tp-photo-strip > * { flex: 0 0 auto; scroll-snap-align: start; }
.tp-photo-strip img { height: 9rem; width: auto; border-radius: .5rem; display: block; cursor: zoom-in; }
.tp-hero { width: 100%; max-height: 60vh; object-fit: contain; border-radius: .5rem; background: #000; }

/* Coordinates */
.tp-coord { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; user-select: all; -webkit-user-select: all; word-break: break-all; }
.tp-coord-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Desktop list + map side by side */
.tp-split { display: grid; gap: 1.25rem; }
@media (min-width: 1200px) {
  .tp-split.has-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tp-split.has-map .tp-split-map { position: sticky; top: calc(var(--phoenix-navbar-top-height) + 1rem); height: calc(100vh - var(--phoenix-navbar-top-height) - 3rem); }
}
.tp-map { width: 100%; height: 100%; min-height: 20rem; border-radius: .5rem; }
.tp-map-full { height: calc(100vh - var(--phoenix-navbar-top-height) - var(--tp-bottom-bar-height) - var(--tp-safe-bottom) - 6rem); min-height: 18rem; }
@media (min-width: 992px) { .tp-map-full { height: calc(100vh - var(--phoenix-navbar-top-height) - 7rem); } }

/* Forecast */
.tp-score { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.tp-period.passed { opacity: .55; }
.tp-hours { font-size: .8rem; }
.tp-hours td, .tp-hours th { white-space: nowrap; padding: .25rem .4rem; }
@media (min-width: 1200px) { .tp-forecast-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }

/* Capture */
.tp-capture-preview { width: 100%; max-height: 45vh; object-fit: contain; border-radius: .5rem; background: var(--phoenix-secondary-bg); }
.tp-sticky-action {
  position: sticky;
  bottom: calc(var(--tp-bottom-bar-height) + var(--tp-safe-bottom) + .5rem);
  z-index: 5;
}
@media (min-width: 992px) { .tp-sticky-action { bottom: 1rem; } }

.tp-chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.tp-chip-group .btn { border-radius: 999px; }

.tp-conflict-value { white-space: pre-wrap; word-break: break-word; }
.tp-muted-dash { color: var(--phoenix-tertiary-color); font-style: italic; }

.tp-auth-card { max-width: 26rem; }