/* ================================================================
 * ProVsup Design System — pv-layout.css
 * Structure globale : app container, header, aside, content
 * Nécessite pv-variables.css
 * ================================================================ */

/* ── Base ───────────────────────────────────────────────────────── */

body.pv-theme {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.pv-theme .app {
  background: var(--bg);
}

body.pv-theme .app::before {
  background-color: var(--bg) !important;
}



/* ── Header / Command bar ───────────────────────────────────────── */

body.pv-theme.app-header-fixed,
body.pv-theme .app.app-header-fixed {
  padding-top: var(--cmdbar-h) !important;
}

body.pv-theme .app-header {
  height: var(--cmdbar-h) !important;
  min-height: var(--cmdbar-h) !important;
  background: var(--cmd-bg) !important;
  border-bottom: 1px solid var(--cmd-border) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}


/* ── Aside (rail) ───────────────────────────────────────────────── */

body.pv-theme .app-aside {
  position: fixed !important;
  top: var(--cmdbar-h) !important;
  bottom: 0 !important;
  height: auto !important;
  width: var(--rail-expanded-w) !important;
  background: var(--rail-bg) !important;
  box-shadow: none !important;
  border-right: 1px solid var(--rail-border) !important;
  transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  z-index: 100;
}

/* Fond du pseudo-element de l'aside (Bootstrap le colore séparément) */
body.pv-theme .app-aside::before {
  background-color: var(--rail-bg) !important;
  border-right: 1px solid var(--rail-border) !important;
}

body.pv-theme .app-content {
  margin-left: var(--rail-expanded-w) !important;
  background: var(--bg) !important;
  transition: margin-left 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  height: calc(100vh - var(--cmdbar-h));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Aside folded = icon rail (56px) ────────────────────────────── */

body.pv-theme .app-aside-folded .app-aside {
  width: var(--rail-w) !important;
  overflow: visible !important;
}

body.pv-theme .app-aside-folded .app-content {
  margin-left: var(--rail-w) !important;
}


/* ── Content area ───────────────────────────────────────────────── */

body.pv-theme .app-content-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0 !important;
  float: none !important;
}



/* ── Scrollbar globale ──────────────────────────────────────────── */

body.pv-theme ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

body.pv-theme ::-webkit-scrollbar-track {
  background: transparent;
}

body.pv-theme ::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: var(--r-pill);
}

body.pv-theme ::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* ── États de page spéciaux ─────────────────────────────────────── */

.pv-state-hidden,
.pv-theme .app-header.navbar.pv-state-hidden {
  display: none !important;
}