/* ============================================================
   TribeCity Modern UI — Mobile Bottom Navigation Bar
   Dedicated stylesheet for the sticky bottom tab bar + "More"
   bottom sheet. Markup: views/templates/header/bottomNavMobile.tpl
   Loaded by: views/templates/layouts/head.tpl

   Additive — does not touch the hamburger drawer (tcmobilemenu.css).
   Kept separate so each mobile pattern owns its own tokens.
   ============================================================ */

/* Tokens — tweak the whole bar/sheet from one place */
:root {
  --tc-bn-h:            62px;
  --tc-bn-bg:           #ffffff;
  --tc-bn-fg:           #6b7280;
  --tc-bn-fg-active:    #1f2430;
  --tc-bn-border:       rgba(0, 0, 0, 0.10);
  --tc-bn-surface:      rgba(0, 0, 0, 0.04);
  --tc-bn-surface-hov:  rgba(0, 0, 0, 0.07);
  --tc-bn-overlay:      rgba(15, 18, 26, 0.45);
  --tc-bn-accent:       var(--tc-brand, #e8a66d);
  --tc-bn-active-bg:    rgba(232, 166, 109, 0.12);
  --tc-bn-radius:       16px;
  --tc-bn-ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --tc-bn-speed:        0.28s;
  --tc-bn-z:            900;          /* below the fixed top header (1000) */
}

/* ---------- Sticky bottom bar ---------- */
.tc-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  height: calc(var(--tc-bn-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--tc-bn-bg);
  border-top: 1px solid var(--tc-bn-border);
  z-index: var(--tc-bn-z);
}

.tc-bn-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Tight icon-to-label gap so the pair reads as one unit (operator: closer
     + prettier). Extra top pad gives the icon air under the bar's top edge. */
  gap: 2px;
  padding: 9px 2px 7px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tc-bn-fg);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.tc-bn-tab:active { transform: scale(0.94); }
.tc-bn-tab:focus-visible {
  color: var(--tc-bn-fg-active);
  background: var(--tc-bn-surface);
}

.tc-bn-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
}
.tc-bn-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.tc-bn-icon svg {
  width: 17px;
  height: 17px;
  opacity: 0.85;
}
.tc-bn-icon i {
  font-size: 17px;
  line-height: 1;
}

.tc-bn-label {
  max-width: 100%;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active tab — accent color + a short rounded indicator line above the icon
   (operator preference over the pill: cleaner). Badge-safe — the line is a
   ::before on the tab, it never touches .tc-bn-icon, so the unread bubble
   stays anchored. */
.tc-bn-tab { position: relative; }
.tc-bn-tab.active { color: var(--tc-bn-accent); }
.tc-bn-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  background: var(--tc-bn-accent);
  border-radius: 999px;
}
.tc-bn-tab.active .tc-bn-label { font-weight: 700; }
.tc-bn-tab.active .tc-bn-icon img { opacity: 1; }
.tc-bn-tab.active .tc-bn-icon svg { opacity: 1; }

/* Unread badge bubble */
.tc-bn-badge {
  position: absolute;
  top: -5px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #e8632f;
  border-radius: 999px;
}

/* ---------- "More" bottom sheet ---------- */
.tc-bn-sheet-overlay {
  position: fixed;
  inset: 0;
  height: 100vh;
  background: var(--tc-bn-overlay);
  z-index: calc(var(--tc-bn-z) + 1);
  display: none;
  opacity: 0;
  transition: opacity var(--tc-bn-speed) ease-in-out;
}

.tc-bn-sheet-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--tc-bn-bg);
  color: var(--tc-bn-fg-active);
  border-top: 1px solid var(--tc-bn-border);
  border-radius: var(--tc-bn-radius) var(--tc-bn-radius) 0 0;
  transform: translateY(100%);
  transition: transform var(--tc-bn-speed) var(--tc-bn-ease);
  z-index: calc(var(--tc-bn-z) + 2);
}

.tc-bn-sheet.active .tc-bn-sheet-panel { transform: translateY(0); }
.tc-bn-sheet.active .tc-bn-sheet-overlay { display: block; opacity: 1; }

.tc-bn-sheet-handle {
  align-self: center;
  width: 36px;
  height: 4px;
  margin: 2px 0 10px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  flex-shrink: 0;
}

.tc-bn-sheet-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tc-bn-fg);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
  z-index: 2;
}
.tc-bn-sheet-close:active { transform: scale(0.94); }
.tc-bn-sheet-close svg { width: 18px; height: 18px; display: block; }

.tc-bn-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sheet header — a titled row ("More") that gives the tile grid a clear top
   edge and lets the first row clear the absolutely-positioned close button
   (which is why the old padding-right:44px hack is gone). */
.tc-bn-sheet-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin-bottom: 10px;
}
.tc-bn-sheet-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tc-bn-fg-active);
}

/* Tile grid — 3-up icon tiles (icon over label), replacing the old vertical
   list. Scannable at a glance; each tile keeps its link, active state, and
   unread badge. */
.tc-bn-sheet-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.tc-bn-sheet-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 4px;
  min-height: 72px;
  background: var(--tc-bn-surface);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--tc-bn-fg-active);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.tc-bn-sheet-link:active { transform: scale(0.96); }
.tc-bn-sheet-link:focus-visible {
  background: var(--tc-bn-surface-hov);
  color: var(--tc-bn-fg-active);
  text-decoration: none;
}
/* Active tile — accent tint + accent border (the transparent base border
   keeps geometry identical so nothing shifts on activation). */
.tc-bn-sheet-link.active {
  background: var(--tc-bn-active-bg);
  border-color: var(--tc-bn-accent);
}
.tc-bn-sheet-link-icon {
  width: auto;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  color: var(--tc-bn-fg);
  flex-shrink: 0;
}
.tc-bn-sheet-link.active .tc-bn-sheet-link-icon { color: var(--tc-bn-accent); }
.tc-bn-sheet-link-text {
  max-width: 100%;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Badge floats on the tile's top-right corner (was an inline row-end pill). */
.tc-bn-sheet-link .tc-bn-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  margin-left: 0;
  box-shadow: none;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
}

.tc-bn-sheet-help {
  text-align: center;
  font-size: 12px;
  opacity: 0.8;
}
.tc-bn-sheet-help a,
.tc-bn-sheet-help a:focus-visible {
  color: var(--tc-bn-fg);
  text-decoration: none;
  font-size: 12px;
}

/* ---------- "You" tab — bottom-bar avatar + identity/account sheet ---------- */
/* Avatar shown in the bottom bar's trailing slot (replaces the old More dots). */
.tc-bn-you-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  background-color: var(--tc-bn-surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tc-bn-you-avatar i { font-size: 14px; color: var(--tc-bn-fg); }
/* Active "You" — accent ring on the avatar (in addition to the shared top line). */
.tc-bn-tab.tc-bn-you.active .tc-bn-you-avatar {
  box-shadow: 0 0 0 2px var(--tc-bn-accent);
}

/* Identity card at the top of the You sheet. */
.tc-bn-you-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 4px 6px;
}
.tc-bn-you-card-avatar {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  background-color: var(--tc-bn-surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tc-bn-you-card-avatar i { font-size: 22px; color: var(--tc-bn-fg); }
.tc-bn-you-card-info { min-width: 0; }
.tc-bn-you-card-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--tc-bn-fg-active);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-bn-you-card-email {
  font-size: 12.5px;
  color: var(--tc-bn-fg);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section labels between the sheet's blocks (Go to / Your account). */
.tc-bn-you-sectionlabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tc-bn-fg);
  margin: 2px 4px 4px;
}

/* Account link list (relocated from the old top-header profile dropdown). */
.tc-bn-you-links {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tc-bn-you-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px;
  border-radius: 8px;
  color: var(--tc-bn-fg-active);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.12s ease;
}
.tc-bn-you-link:hover,
.tc-bn-you-link:focus-visible {
  background: var(--tc-bn-surface);
  color: var(--tc-bn-fg-active);
  text-decoration: none;
}
.tc-bn-you-link i {
  width: 18px;
  text-align: center;
  font-size: 15px;
  color: var(--tc-bn-fg);
  flex-shrink: 0;
}
.tc-bn-you-link--signout,
.tc-bn-you-link--signout i { color: #e0533d; }
.tc-bn-you-sep {
  height: 1px;
  background: var(--tc-bn-border);
  margin: 4px 4px;
}

/* ---------- Content offset (mobile only) ----------
   The bar is fixed; reserve space so it never covers the
   footer / page bottom. Scoped via :has() so it only applies
   on pages that actually render the bar (authenticated pages)
   — public/login pages have no .tc-bottom-nav and get no dead
   space. Desktop & tablet are untouched (media query). */
@media screen and (max-width: 767px) {
  body:has(.tc-bottom-nav) {
    padding-bottom: calc(var(--tc-bn-h) + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- iOS app only: extra room under the tab bar ----------
   The bottom nav was getting visually cut off inside the iOS wrapper. The
   .is-ios-app class comes from $isIOSApp (tc_app cookie AND an iOS UA — see
   core.class.php) and is emitted on <html> in layouts/head.tpl, so this cannot
   affect Android, mobile web, or desktop.

   Deliberately scoped to iOS ONLY: an earlier global version of this change was
   reverted (87aeaa0) because the extra space was wrong on web/Android.

   Added ON TOP OF env(safe-area-inset-bottom) rather than replacing it, so
   home-indicator devices still clear the indicator. The bar's height grows by the
   same amount so the tab row keeps its size instead of being squashed, and the
   body offset grows too or page content would slide under the taller bar. */
.is-ios-app .tc-bottom-nav {
  height: calc(var(--tc-bn-h) + 20px + env(safe-area-inset-bottom, 0px));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

@media screen and (max-width: 767px) {
  .is-ios-app body:has(.tc-bottom-nav) {
    padding-bottom: calc(var(--tc-bn-h) + 20px + env(safe-area-inset-bottom, 0px));
  }
}