.shell-layout {
  display: grid;
  min-height: 100vh;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}
.shell-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.shell-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-sidebar-bg);
  border-inline-end: 1px solid var(--color-sidebar-border);
  overflow: hidden;
  transition: width .18s ease;
  height: 100vh;
  z-index: 40;
}
.shell-topbar {
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 24px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
  flex: 0 0 auto;
}
.topbar-start {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
html[dir="rtl"] .topbar-actions { flex-direction: row-reverse; }
html[dir="ltr"] .topbar-actions { flex-direction: row; }
.shell-content {
  flex: 1;
  overflow: auto;
  padding: 20px 24px 24px;
}
.content-container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}
.profile-layout { display: grid; gap: 12px; }
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.profile-stack { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

/* ── Collapsed sidebar ──────────────────────────────────────── */
.shell-layout[data-sidebar-state="collapsed"] {
  grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
}
.shell-layout[data-sidebar-state="collapsed"] .shell-sidebar {
  width: var(--sidebar-collapsed-width);
}
.shell-layout[data-sidebar-state="collapsed"] .brand-copy,
.shell-layout[data-sidebar-state="collapsed"] .brand-separator,
.shell-layout[data-sidebar-state="collapsed"] .nav-group-title,
.shell-layout[data-sidebar-state="collapsed"] .nav-label,
.shell-layout[data-sidebar-state="collapsed"] .nav-badge,
.shell-layout[data-sidebar-state="collapsed"] .user-meta,
.shell-layout[data-sidebar-state="collapsed"] .user-actions { display: none; }
.shell-layout[data-sidebar-state="collapsed"] .brand { justify-content: center; padding-inline: 4px; }
.shell-layout[data-sidebar-state="collapsed"] .nav-item { justify-content: center; padding-inline: 0; }
.shell-layout[data-sidebar-state="collapsed"] .user-card {
  justify-content: center;
  padding-inline: 0;
  border-color: transparent;
}
html[dir="ltr"] .shell-layout:not([data-sidebar-state="collapsed"]) .sidebar-collapse-icon { transform: rotate(180deg); }
html[dir="rtl"] .shell-layout[data-sidebar-state="collapsed"] .sidebar-collapse-icon { transform: rotate(180deg); }

/* ── Login shell ────────────────────────────────────────────── */
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  /* Zaal navy backdrop — the sign-in page always renders on the zaal-navy theme,
     so --brand-primary resolves to the brand navy (#042552). */
  background: var(--brand-primary);
}

/* ── Mobile ─────────────────────────────────────────────────── */
.mobile-menu-button { display: none; }
.mobile-backdrop { display: none; }

/* ── iOS standalone (PWA) safe areas ─────────────────────────
   Added to the Home Screen, the web view is full-screen (viewport-fit=cover), so
   content would slide under the notch / Dynamic Island / home indicator. The
   env(safe-area-inset-*) values are 0 on non-notched devices and in a normal
   browser tab, so these rules are inert everywhere except an installed PWA. */
.shell-topbar {
  padding-top: env(safe-area-inset-top);
  padding-inline-start: max(24px, env(safe-area-inset-left));
  padding-inline-end: max(24px, env(safe-area-inset-right));
}

@media (max-width: 720px) {
  .shell-layout { display: block; }
  .shell-main { height: auto; overflow: visible; }
  .shell-content { overflow: visible; }
  .shell-sidebar { padding-top: env(safe-area-inset-top); }
  .shell-sidebar {
    position: fixed;
    inset-block: 0;
    inline-start: 0;
    width: var(--sidebar-width);
    height: 100%;
    transform: translateX(-100%);
    z-index: 50;
  }
  html[dir="rtl"] .shell-sidebar {
    inline-start: auto;
    inline-end: 0;
    transform: translateX(100%);
  }
  .shell-layout[data-mobile-drawer="open"] .shell-sidebar { transform: translateX(0); }
  .shell-layout[data-mobile-drawer="open"] .mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--color-overlay-bg);
    z-index: 30;
  }
  .dashboard-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .shell-content { padding-inline: 14px; }
}

/* ── Mobile bottom-tab navigation (PWA) ──────────────────────
   On phones the desktop sidebar/hamburger are replaced by a fixed bottom tab
   bar plus a slide-up "more" sheet (see includes/mobile_nav.html). Hidden on
   desktop entirely. */
.mobile-tabbar { display: none; }
.mobile-more-sheet { display: none; }

@media (max-width: 720px) {
  /* Replace the desktop drawer with the bottom bar. The backdrop hide matches the
     specificity of the "drawer open" rule above and wins by source order (this block
     comes later), so no forced override is needed. */
  .shell-sidebar { display: none; }
  .mobile-menu-button { display: none; }
  .shell-layout[data-mobile-drawer="open"] .mobile-backdrop { display: none; }

  /* Content clears the fixed bar (≈60px) + the home-indicator inset. */
  .shell-content { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  .mobile-tabbar {
    display: flex;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    background: var(--color-surface);
    border-top: 1px solid var(--color-divider);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .07);
  }
  .mobile-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px 6px;
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-text-muted);
    font: inherit;
    position: relative;
  }
  .mobile-tab.is-active { color: var(--color-primary); }
  .mobile-tab-icon { display: inline-flex; width: 22px; height: 22px; }
  .mobile-tab-icon svg { width: 22px; height: 22px; }
  .mobile-tab-label {
    font-size: 11px;
    line-height: 1;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-tab-badge {
    position: absolute;
    top: 3px;
    inset-inline-start: calc(50% + 6px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--status-danger-text, #C94A4A);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
  }

  /* Slide-up "more" sheet. */
  .mobile-more-sheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 70; }
  .mobile-more-backdrop { position: absolute; inset: 0; background: var(--color-overlay-bg); }
  .mobile-more-panel {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    background: var(--color-surface);
    border-radius: 16px 16px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 28px rgba(0, 0, 0, .2);
  }
  .mobile-more-handle { width: 40px; height: 4px; margin: 6px auto 14px; border-radius: 2px; background: var(--color-divider); }
  .mobile-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .mobile-more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px;
    border-radius: 12px;
    background: var(--color-surface-muted);
    color: var(--color-text);
    text-decoration: none;
    text-align: center;
    position: relative;
  }
  .mobile-more-icon { display: inline-flex; width: 24px; height: 24px; }
  .mobile-more-icon svg { width: 24px; height: 24px; }
  .mobile-more-label { font-size: 12px; line-height: 1.3; }
  .mobile-more-badge { top: 8px; inset-inline-start: auto; inset-inline-end: 8px; }
  .mobile-more-logout { margin-top: 14px; }
  .mobile-more-logout-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

  /* Installed portal app (standalone): چت is its own separate app, so hide the چت tab.
     Switching between the apps is via the home-screen icons, not an in-portal link. */
  html.is-standalone .mobile-tab[data-navkey="chat:inbox"] { display: none; }

  /* Overflow safety net: nothing should push the page sideways on a phone. Keep
     the page from scrolling horizontally, and let wide data tables scroll inside
     their own box (not the card — that would trap date-picker / chips popups). */
  html, body { overflow-x: hidden; }
  .content-container, .card, .shell-content { max-width: 100%; }
  .table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}