/* ============================================================================
 * shell.css — the app frame: sidebar + top bar + content.
 * Rendered by js/shell.js. Load after tokens/base/components.
 * ========================================================================== */

/* Desktop: two columns (fixed sidebar + flexible content). */
.app { min-height: 100dvh; }
@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
  /* minmax(0,1fr) lets the content column shrink instead of overflowing. */
}

/* --- Sidebar -------------------------------------------------------------- */
.sidebar {
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-3);
  gap: var(--sp-2);
}
/* Desktop: pin the sidebar to the viewport — long pages scroll, it doesn't
 * (Paramètres/Déconnexion always in view). It scrolls itself if ever taller. */
@media (min-width: 1024px) {
  .sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
}
.sidebar__brand { display: block; padding: var(--sp-2) var(--sp-3) var(--sp-5); }
.sidebar__logo { height: 36px; width: auto; }   /* mono logo renders bronze by default */
.sidebar__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sidebar__spacer { flex: 1; }                    /* pushes Paramètres + Déconnexion to the bottom */

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; padding: 0 var(--sp-3);
  border: none; background: transparent;
  border-radius: var(--r-md);
  color: var(--text-2); font-size: var(--fs-base); text-align: left;
  cursor: pointer; width: 100%;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nav-item__icon { display: inline-flex; color: currentColor; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }

/* Active page: tinted row + gold left bar + bronze icon + bolder label. */
.nav-item.is-active { background: var(--surface-2); color: var(--text); font-weight: 600; }
.nav-item.is-active .nav-item__icon { color: var(--gold-ink); }
.nav-item.is-active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--gold-500);
}
/* Logout is destructive → separated (it's after the spacer) and danger-colored. */
.nav-item--danger { color: var(--danger); }
.nav-item--danger:hover { background: var(--danger-bg); color: var(--danger); }

/* --- Drawer + scrim (mobile only) ---------------------------------------- */
.scrim { display: none; }
@media (max-width: 1023px) {
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 260px;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease-out);
    z-index: 1041; box-shadow: var(--shadow-lg);
  }
  .app.is-drawer-open .sidebar { transform: none; }
  .scrim {
    display: block; position: fixed; inset: 0;
    background: rgba(20, 17, 11, .5);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur) var(--ease-out);
    z-index: 1040;
  }
  .app.is-drawer-open .scrim { opacity: 1; visibility: visible; }
}

/* --- Main column + top bar ------------------------------------------------ */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 100dvh; }

.topbar {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface); border-bottom: 1px solid var(--border);
  min-height: 60px;
}
.topbar__title {
  font-size: var(--fs-xl); font-weight: 600;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar__spacer { flex: 1; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: none; background: transparent;
  border-radius: var(--r-md); color: var(--text-2); cursor: pointer;
}
.iconbtn:hover { background: var(--surface-2); }
.menu-btn { display: inline-flex; }
@media (min-width: 1024px) { .menu-btn { display: none; } }  /* sidebar is always visible on desktop */

/* Search lives in the top bar on tablet+; hidden on phones (added later as needed). */
.topbar__search { display: none; }
@media (min-width: 768px) {
  .topbar__search {
    display: flex; align-items: center; gap: var(--sp-2);
    height: 40px; padding: 0 var(--sp-4);
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-pill); flex: 0 1 320px; min-width: 0;
  }
}
.topbar__search-icon { display: inline-flex; color: var(--text-muted); }
.topbar__search-input { border: none; background: transparent; outline: none; width: 100%; min-width: 0; }

/* Primary "+ Nouveau" action; label hides on the smallest screens. */
.topbar__action { height: 40px; min-height: 40px; padding: 0 var(--sp-4); }
@media (max-width: 479px) { .topbar__action-label { display: none; } }

.topbar__user {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--text-2); max-width: 220px;
}
.topbar__user-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 639px) { .topbar__user-email { display: none; } }

.content { flex: 1; min-width: 0; padding: var(--sp-6) var(--sp-4); }
@media (min-width: 768px) { .content { padding: var(--sp-8) var(--sp-6); } }