.has-app-navigation { padding-bottom: 0; }

.app-navigation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: 18px 20px;
  border-bottom: 1px solid var(--theme-border, #d8e1d8);
  background: var(--theme-surface, #fff);
}

.app-navigation-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--theme-text, #17251d);
  text-decoration: none;
}

.app-navigation-brand img { display: block; width: min(190px, 32vw); max-height: 64px; }

.app-navigation-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.app-primary-navigation,
.app-scheduling-navigation {
  display: flex;
  min-width: 0;
  align-items: stretch;
  gap: 7px;
}

.app-primary-navigation a,
.app-admin-utility,
.app-scheduling-navigation a {
  display: inline-flex;
  min-height: 46px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--theme-border, #d8e1d8);
  border-radius: 8px;
  background: var(--theme-surface, #fff);
  color: var(--theme-text, #17251d);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.app-primary-navigation a { padding: 11px 14px; }
.app-admin-utility { padding: 11px 14px; border-color: #93a89a; color: #244c29; }

.app-primary-navigation a[aria-current="page"],
.app-admin-utility[aria-current="page"],
.app-scheduling-navigation a[aria-current="page"] {
  border-color: #79b680;
  background: #eef7ed;
  color: #1f5d31;
}

.app-scheduling-navigation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1500px, calc(100% - 40px));
  margin: 16px auto 0;
  gap: 4px;
}

.app-scheduling-navigation a {
  min-height: 52px;
  padding: 11px 12px;
  border-radius: 10px 10px 0 0;
  color: #5c6b5e;
}

.app-mobile-page-context { display: none; }

.app-bottom-navigation {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 0;
  display: none;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: min(430px, 100%);
  align-items: center;
  gap: 2px;
  padding: 15px 10px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #cbd6cc;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 -8px 24px rgba(24, 48, 31, .10);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
}

.app-bottom-navigation-item {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 54px;
  place-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #68776d;
  text-decoration: none;
}

.app-bottom-navigation-item svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.5;
}

.app-bottom-navigation-item.active { color: #173f24; }

.app-bottom-navigation-item > .app-nav-underline {
  width: 31px;
  height: 4px;
  border-radius: 99px;
  background: transparent;
}

.app-bottom-navigation-item.active > .app-nav-underline { background: currentColor; }
.app-bottom-navigation-item .detail-letter { fill: currentColor; stroke: none; }

.app-nav-badge {
  position: absolute;
  top: 0;
  right: calc(50% - 27px);
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 99px;
  background: #b4232e;
  color: #fff;
  font-size: .66rem;
  font-weight: 900;
}

.app-nav-badge[hidden] { display: none; }

/* The saved dark appearance also covers shared phone navigation. Page-specific
   palettes, including Prayer green, retain their more specific rules. */
:where(html[data-theme="dark"]) .app-bottom-navigation {
  background: var(--theme-surface, #222725);
  border-color: var(--theme-border, #3a403d);
}
:where(html[data-theme="dark"]) .app-bottom-navigation-item { color: var(--theme-muted, #9ca39f); }
:where(html[data-theme="dark"]) .app-bottom-navigation-item.active { color: var(--theme-text, #f7f8f7); }
:where(html[data-theme="dark"]) .app-nav-badge { border-color: var(--theme-surface, #222725); }


@media (max-width: 1040px) {
  .app-navigation-header { align-items: flex-start; flex-direction: column; }
  .app-navigation-actions { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
  .app-primary-navigation { flex: 0 0 auto; }
}

@media (max-width: 759px) {
  .has-app-navigation { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .app-navigation-header { display: none; }
  .app-bottom-navigation { display: grid; }
  .app-mobile-page-context {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 10px 14px;
    border-bottom: 1px solid var(--theme-border, #d8e1d8);
    background: var(--theme-surface, #fff);
    color: #1f5d31;
    font-size: 13px;
    font-weight: 900;
  }
  .app-mobile-page-context a { color: inherit; text-decoration: none; }
  .app-scheduling-navigation {
    width: calc(100% - 24px);
    grid-template-columns: 1fr 1fr;
    margin-top: 12px;
  }
  .app-scheduling-navigation a { min-height: 48px; border-radius: 6px; font-size: 12px; }
}

/* One desktop frame across member destinations and the Operations Desk. */
@media(min-width:760px){
 html{scrollbar-gutter:stable}
 body .app-navigation-header{width:min(1200px,calc(100% - 40px));box-sizing:border-box;min-height:76px;margin:0 auto;padding:12px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;background:var(--theme-canvas);border-bottom:1px solid var(--theme-border)}
 #app-view>.app-navigation-header,.messages-shell>.app-navigation-header{width:100%}
 body .app-navigation-brand img{width:146px;max-height:48px}
 body .app-navigation-actions,body .app-primary-navigation{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;overflow:visible;padding:0}
 body .app-primary-navigation a,body .app-admin-utility{position:static;inset:auto;transform:none;min-height:44px;padding:10px 12px;font-weight:600;border-radius:10px;font-size:14px}
 body .app-admin-utility[hidden]{display:none}
 body .messages-shell,body .scheduling-shell,body .ops-shell{width:min(1200px,calc(100% - 40px));max-width:none;margin-inline:auto;box-sizing:border-box;padding-inline:0}
}
@media(min-width:760px) and (max-width:1000px){
 body .app-navigation-header{flex-direction:column;align-items:flex-start;gap:8px}
 body .app-navigation-actions{width:100%;justify-content:flex-start}
 body .app-primary-navigation{justify-content:flex-start}
}