/* ══════════════════════════════════════════════════════════════════
   13 — CLIENT SHELL: the left rail (redesign Phase 3)
   Replaces layer 10's horizontal top-nav transform for body.role-client
   (this file loads later, so identical selectors win). The admin's rail
   structure with the client's tone: warm-white, icons AND group labels
   on desktop — the same grouping mobile shows, which is the point
   (closes F4, F5; the 57px magic constant dies with the top nav, F21).
   Spec: handoff_client_portal — rail 232px, .wom-nav-item geometry.
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  body.role-client .topbar { background: var(--warm-white); }
  body.role-client .sidebar-toggle { display: none; }
  body.role-client .nav-logo { filter: none; }

  /* Sidebar → warm-white LEFT rail (undo layer 10's top-bar transform) */
  body.role-client .sidebar {
    position: fixed;
    top: calc(60px + env(safe-area-inset-top, 0px));
    left: 0;
    right: auto;
    bottom: 0;
    width: 232px;
    height: auto;
    background: var(--warm-white);
    border-right: 1px solid var(--cream-dark);
    border-bottom: none;
    flex-direction: column;
    overflow-y: auto;
    z-index: 100;
  }
  body.role-client .sidebar.collapsed { width: 232px; } /* no rail collapse for clients */
  body.role-client .sidebar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px 12px 24px;
    width: auto;
    max-width: none;
    margin: 0;
    flex: none;
  }

  /* Group labels come BACK (layer 10 hid them) */
  body.role-client .nav-section-label {
    display: block;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: var(--ls-label, 0.14em);
    text-transform: uppercase;
    color: var(--dim);
    padding: 16px 12px 5px;
    margin: 0;
  }

  /* Nav items: icon + label + badge, oak-tint active with a 3px oak rail */
  body.role-client .nav-tab {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    color: var(--navy);
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    border-bottom: none;
    border-left: 3px solid transparent;
    font-size: 14px;
    font-weight: 300;
    white-space: nowrap;
    position: relative;
  }
  body.role-client .nav-tab svg { display: inline-block; flex: none; opacity: 0.85; }
  body.role-client .nav-tab:hover { background: var(--oak-bg); color: var(--navy-deep); }
  body.role-client .nav-tab.active {
    background: var(--oak-bg);
    color: var(--navy-deep);
    border-bottom: none;
    border-left-color: var(--oak);
    font-weight: 500;
  }
  body.role-client .nav-tab.active::before { display: none; }
  body.role-client .nav-tab .wom-nav-badge { margin-left: auto; }

  /* Content: offset for the rail; the 57px top-nav constant is gone */
  body.role-client .main-content,
  body.role-client .main-content.sidebar-collapsed {
    margin-left: 232px !important;
    margin-top: calc(60px + env(safe-area-inset-top, 0px));
  }
  body.role-client .page { max-width: var(--container-xl, 1200px); }
}

/* ─── Rail brand header — the church's own identity, not ours ─────── */
.client-rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 8px;
}
.client-rail-brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: var(--radius-full, 9999px);
  flex: none;
}
.client-rail-brand .crb-name {
  font-weight: 800;
  font-size: 13px;
  color: var(--navy-deep);
  line-height: 1.15;
}
.client-rail-brand .crb-type {
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 2px;
}
/* In the mobile drawer the brand shows too — slightly tighter */
@media (max-width: 768px) {
  .client-rail-brand { padding: 14px 16px 6px; }
}

/* ─── Topbar "Visit site ↗" — clients only, populated by JS ───────── */
.topbar-visit-site {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--oak);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.topbar-visit-site:hover { background: var(--oak-bg); }
/* Desktop-only — the mobile topbar has no room next to the logo. */
@media (max-width: 768px) {
  .topbar-visit-site { display: none !important; }
}

/* ─── Mobile More sheet: group labels (same labels as the rail) ───── */
.mobile-more-label {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 14px 16px 4px;
}