/* App shell: desktop sidebar, mobile header + bottom tabbar, main column. */

.app-shell { display: flex; align-items: stretch; background: var(--canvas); min-height: 100vh; }

/* ---- Desktop sidebar ---- */
.app-sidebar {
  width: var(--sidebar-w);
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  border-right: 1px solid var(--border);
  background: var(--card);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
}

/* Only positioning — the lockup itself comes from .brand-lockup (components.css).
   padding-left matches .app-nav-item's 12px so the mark and the nav icons share
   one left edge; the same insets are used by the lesson rail + Comunitate rail. */
.app-sidebar-brand { padding: 4px 12px 18px; }

.app-nav { display: flex; flex-direction: column; gap: 2px; }

.app-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}
.app-nav-item:hover { background: var(--surface); color: var(--ink); }
.app-nav-item.is-active { background: var(--teal-tint); color: var(--teal-ink); }
.app-nav-item.is-active:hover { background: var(--teal-tint); color: var(--teal-ink); }

.app-nav-badge {
  margin-left: auto;
  min-width: 18px; height: 18px;
  border-radius: var(--r-pill);
  background: var(--coral);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.app-sidebar-spacer { flex: 1; }

.app-sidebar-foot { padding: 14px 0 4px; border-top: 1px solid var(--divider); }

.app-prof-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: inherit;
}
.app-prof-row:hover { background: var(--surface); color: inherit; }
.app-prof-row.is-active { background: var(--teal-tint); }

.app-prof-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; }
.app-prof-link:hover { color: inherit; }

.app-prof-avatar { width: 40px; height: 40px; flex: none; border-radius: var(--r-pill); overflow: hidden; background: var(--surface); }
.app-prof-body { min-width: 0; flex: 1; }
.app-prof-name { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-prof-sub { font-size: 11.5px; color: var(--muted-2); }

.app-logout {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
}
.app-logout:hover { background: var(--surface); color: var(--slate); }

/* ---- Main column ---- */
.app-main { flex: 1; min-width: 0; display: flex; justify-content: center; padding: 44px 48px 64px; }

.screen { width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 24px; }

.screen-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 16px; flex-wrap: wrap; }
.screen-title { font-size: clamp(27px, 6vw, 34px); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.screen-sub { margin-top: 8px; font-size: 13px; color: var(--muted-2); }

.screen-h2 { font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }

/* ---- Mobile top header ---- */
.m-header {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: 54px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.m-header-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.m-header-brand .brand-word { font-size: 15.5px; }
.m-avatar {
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  display: block;
}
.m-avatar.is-active { box-shadow: 0 0 0 2px var(--teal); }

/* ---- Mobile bottom tabbar ---- */
.m-tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(28, 27, 25, .07);
}
.m-tabbar-row { display: flex; align-items: stretch; padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); }

.m-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 2px 3px;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 600;
}
.m-tab:hover { color: var(--muted-2); }
.m-tab.is-active { color: var(--teal-ink); }

.m-tab-pill { display: flex; align-items: center; justify-content: center; width: 54px; height: 31px; border-radius: var(--r-pill); }
.m-tab.is-active .m-tab-pill { background: var(--teal-tint); }

.m-tab-world { flex: none; width: 62px; display: flex; align-items: flex-start; justify-content: center; }
.m-tab-world-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  margin-top: -7px;
  border-radius: var(--r-pill);
  background: var(--ink);
  border: 3px solid var(--canvas);
  box-shadow: 0 8px 20px rgba(15, 34, 48, .28);
}
.m-tab-world-btn:hover { background: var(--navy-2); }
.m-tab-world-btn--teal { background: var(--teal); box-shadow: 0 8px 20px rgba(11, 95, 94, .32); }
.m-tab-world-btn--teal:hover { background: var(--teal-hover); }

/* ---- Breakpoints ---- */
@media (max-width: 1100px) {
  .app-main { padding: 32px 26px 64px; }
}

@media (max-width: 767px) {
  .app-sidebar { display: none; }
  .m-header { display: flex; }
  .m-tabbar { display: block; }
  .app-main { padding: 76px 16px 118px; }
}