/* Ecran Design System — structural layout: shell, sidebar, topbar, content. */

.app-shell { display: flex; min-height: 100vh; }

/* --- Sidebar --- */
.sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-medium);
  display: flex; flex-direction: column;
  padding: var(--space-4) var(--space-3);
  transition: width var(--dur) var(--ease);
  z-index: 30;
}
.sidebar__brand { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-4); }
.sidebar__logo { font-family: var(--font-serif); font-weight: 700; font-size: var(--text-lg); color: var(--accent-primary); letter-spacing: .02em; }

.product-badge { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-medium); }
.product-badge__icon {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--radius-md);
  background: var(--accent-primary); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-serif); font-weight: 700; font-size: var(--text-base);
}
.product-badge__title { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-base); color: var(--text-primary); line-height: 1.2; }
.product-badge__subtitle { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

.nav { display: flex; flex-direction: column; gap: var(--space-1); overflow-y: auto; flex: 1; }
.nav-section { padding: var(--space-4) var(--space-2) var(--space-1); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-light); }
.nav-section:first-child { padding-top: var(--space-1); }

.nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500;
  position: relative; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-item:hover { background: color-mix(in srgb, var(--bg-secondary) 70%, transparent); color: var(--text-primary); }
.nav-item.is-active { background: color-mix(in srgb, var(--bg-card) 75%, transparent); color: var(--text-primary); }
.nav-item.is-active::before { content: ""; position: absolute; left: -3px; top: 8px; bottom: 8px; width: 3px; border-radius: var(--radius-full); background: var(--accent-primary); }
.nav-item.is-active .icon { color: var(--accent-primary); }
.nav-item .icon { flex: 0 0 20px; color: var(--text-muted); }
.nav-item__label { white-space: nowrap; overflow: hidden; }
.nav-item__badge { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); background: var(--bg-secondary); color: var(--text-secondary); padding: 1px 7px; border-radius: var(--radius-full); }

.sidebar__footer { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-medium); }
.user-chip { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-md); }
.user-chip__avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--radius-full); background: var(--accent-primary); color: #fff; display: grid; place-items: center; font-size: var(--text-xs); font-weight: 600; }
.user-chip__name { font-size: var(--text-sm); font-weight: 500; line-height: 1.2; }
.user-chip__meta { font-size: var(--text-xs); color: var(--text-muted); }

/* --- Main column --- */
.app-main { flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-width: 0; transition: margin-left var(--dur) var(--ease); }

.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-height);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-6);
  background: var(--bg-glass); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light);
}
.topbar__title { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 600; }
.topbar__spacer { flex: 1; }

.content { padding: var(--space-6); max-width: var(--content-max); width: 100%; margin: 0 auto; flex: 1; }

/* --- Collapsed sidebar --- */
html[data-sidebar="collapsed"] .sidebar { width: var(--sidebar-collapsed-width); }
html[data-sidebar="collapsed"] .app-main { margin-left: var(--sidebar-collapsed-width); }
html[data-sidebar="collapsed"] .nav-item__label,
html[data-sidebar="collapsed"] .nav-item__badge,
html[data-sidebar="collapsed"] .nav-section,
html[data-sidebar="collapsed"] .product-badge__text,
html[data-sidebar="collapsed"] .sidebar__logo,
html[data-sidebar="collapsed"] .user-chip__text { display: none; }
html[data-sidebar="collapsed"] .nav-item { justify-content: center; }
html[data-sidebar="collapsed"] .product-badge { justify-content: center; }

/* --- Auth (no shell) --- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); }
.auth-card { width: 100%; max-width: 380px; }

/* --- Grids --- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* --- Mobile drawer --- */
.sidebar-toggle { display: inline-flex; }
.scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 25; }

@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 960px) {
  .sidebar { transform: translateX(-100%); transition: transform var(--dur) var(--ease); width: var(--sidebar-width); }
  html[data-drawer="open"] .sidebar { transform: translateX(0); }
  html[data-drawer="open"] .scrim { display: block; }
  .app-main { margin-left: 0; }
}
@media (max-width: 720px) { .kpi-grid, .grid-2, .grid-3 { grid-template-columns: 1fr; } .content { padding: var(--space-4); } }