/* ─────────────────────────────────────────────────────────────────────────────
   layout.css — Palette : Composition Colorimétrique
   Structure de l'application — style application web professionnelle
   © Code propriétaire — Tous droits réservés.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Corps ─────────────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-sans);
  background: var(--bg-app);
  color: var(--text-primary);
  --wm-inset-left: 0px;
  --wm-inset-right: 0px;
  --wm-inset-top: 0px;
  --wm-inset-bottom: 0px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Barre de menu supérieure ────────────────────────────────────────────── */

.menubar {
  height: var(--menubar-h);
  min-height: var(--menubar-h);
  background: var(--bg-menubar);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  position: relative;
  z-index: 20000;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}

.menubar-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-right: var(--s-4);
  border-right: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.brand-logo {
  font-size: 15.3px;
  color: var(--accent);
  line-height: 1;
}

.brand-name {
  font-size: 11.7px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

/* ── Shell principal ─────────────────────────────────────────────────────── */

.app-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

/* ── Sidebar gauche (Dock + Panneau rétractable) ─────────────────────────── */

:root {
  --sidebar-dock-w: 60px;
  --sidebar-panel-w: 240px;
}

.sidebar-container {
  display: flex;
  height: 100%;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-surface);
  transition: width var(--t-base) ease;
  width: calc(var(--sidebar-dock-w) + var(--sidebar-panel-w));
  position: relative;
  z-index: 1000;
}

.sidebar-container.collapsed {
  width: var(--sidebar-dock-w);
}

.sidebar-dock {
  width: var(--sidebar-dock-w);
  height: 100%;
  background: var(--bg-surface-2);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--s-4);
  gap: var(--s-3);
  flex-shrink: 0;
}

.sidebar-panel {
  width: var(--sidebar-panel-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--t-base) ease, opacity var(--t-base) ease;
  opacity: 1;
}

.sidebar-container.collapsed .sidebar-panel {
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.sidebar-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.sidebar-panel-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.sidebar-collapse-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--s-1) var(--s-2);
  font-size: 11px;
  border-radius: var(--r-md);
  transition: color var(--t-base), background var(--t-base);
}

.sidebar-collapse-btn:hover {
  background: var(--bg-surface-3);
  color: var(--text-primary);
}

.sidebar-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.sidebar-panel-content::-webkit-scrollbar { width: 4px; }
.sidebar-panel-content::-webkit-scrollbar-track { background: transparent; }
.sidebar-panel-content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--r-full);
}

/* ── Zone des panneaux ───────────────────────────────────────────────────── */

.panels-area {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding-top: var(--wm-inset-top);
  padding-right: var(--wm-inset-right);
  padding-bottom: var(--wm-inset-bottom);
  padding-left: var(--wm-inset-left);
  display: flex;
  flex-direction: column;
  gap: 0;
  align-content: flex-start;
  transition: padding 120ms ease;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.panels-area::-webkit-scrollbar { width: 4px; }
.panels-area::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--r-full);
}

/* Rangée de panneaux côte à côte */
.panels-row {
  display: flex;
  gap: 0;
  align-items: stretch;
  width: 100%;
  margin-top: -1px;
}

.panels-row .panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.panels-row--access {
  display: flex;
  gap: 0;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
  margin-top: -1px;
}
.panels-row--access .panel {
  flex: 1;
  min-width: 234px;
}

/* ─── Tiled Layout Overrides for Docked Panels ─── */

/* Docked panels: remove border-radius and shadow to sit flush, collapse borders using negative margins */
.panel:not(.panel--floating):not(.panel--in-group):not(.panel--snapped-l):not(.panel--snapped-r):not(.panel--snapped-t):not(.panel--snapped-b):not(.panel--snapped-tl):not(.panel--snapped-tr):not(.panel--snapped-bl):not(.panel--snapped-br) {
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-top: -1px;
  margin-left: -1px;
  border: 1px solid var(--border) !important;
  height: auto !important;
  min-height: min-content !important;
}

/* Prevent hover shadow on docked panels to keep them flat and flush */
.panel:not(.panel--floating):not(.panel--in-group):not(.panel--snapped-l):not(.panel--snapped-r):not(.panel--snapped-t):not(.panel--snapped-b):not(.panel--snapped-tl):not(.panel--snapped-tr):not(.panel--snapped-bl):not(.panel--snapped-br):hover {
  box-shadow: none !important;
}

/* Ensure docked panel bodies display all content cleanly without internal scrollbars and flex properly when stretched */
.panel:not(.panel--floating):not(.panel--in-group):not(.panel--snapped-l):not(.panel--snapped-r):not(.panel--snapped-t):not(.panel--snapped-b):not(.panel--snapped-tl):not(.panel--snapped-tr):not(.panel--snapped-bl):not(.panel--snapped-br) .panel-body,
.panel:not(.panel--floating):not(.panel--in-group):not(.panel--snapped-l):not(.panel--snapped-r):not(.panel--snapped-t):not(.panel--snapped-b):not(.panel--snapped-tl):not(.panel--snapped-tr):not(.panel--snapped-bl):not(.panel--snapped-br) .panel-body--preview,
.panel:not(.panel--floating):not(.panel--in-group):not(.panel--snapped-l):not(.panel--snapped-r):not(.panel--snapped-t):not(.panel--snapped-b):not(.panel--snapped-tl):not(.panel--snapped-tr):not(.panel--snapped-bl):not(.panel--snapped-br) .panel-body--access {
  overflow: visible !important;
  min-height: 0 !important;
  flex: 1 !important;
}

/* Reduce padding of preview stage body when docked to save space */
.panel:not(.panel--floating):not(.panel--in-group):not(.panel--snapped-l):not(.panel--snapped-r):not(.panel--snapped-t):not(.panel--snapped-b):not(.panel--snapped-tl):not(.panel--snapped-tr):not(.panel--snapped-bl):not(.panel--snapped-br) .panel-body--preview {
  padding: var(--s-4) !important;
}

/* Make free drawing panel larger when docked for comfortable illustration */
#panelSketch:not(.panel--floating):not(.panel--in-group):not(.panel--snapped-l):not(.panel--snapped-r):not(.panel--snapped-t):not(.panel--snapped-b):not(.panel--snapped-tl):not(.panel--snapped-tr):not(.panel--snapped-bl):not(.panel--snapped-br) {
  min-height: 560px !important;
}

/* ─── Illustrator Profile Grid Layout (Tiled Columns) ─── */

/* Bypasser les wrappers de rangées pour que panelSketch et panelViz deviennent des enfants directs de la grille */
.panels-area[data-active-profile="illustrator"] #panelsRow,
.panels-area[data-active-profile="illustrator"] #panelsRowAccess {
  display: contents !important;
}

.panels-area[data-active-profile="illustrator"] {
  display: grid !important;
  grid-template-columns: var(--illustrator-col-left, 50%) var(--illustrator-col-right, 50%) !important;
  grid-template-rows: 1fr !important;
  height: calc(100vh - var(--wm-inset-top) - var(--wm-inset-bottom) - var(--menubar-h)) !important;
  gap: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Sketchpad takes the entire left column when docked */
.panels-area[data-active-profile="illustrator"] #panelSketch:not(.panel--floating) {
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  margin-top: -1px !important;
  margin-left: -1px !important;
  border: 1px solid var(--border) !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

.panels-area[data-active-profile="illustrator"] #panelSketch:not(.panel--floating) .panel-body--sketch {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important; /* Keep canvas drawing area from scrolling page */
}

/* Right Group (Palette + Viz) takes column 2 when docked */
.panels-area[data-active-profile="illustrator"] .panel-group[data-group-id="illustrator-right-group"]:not(.panel--floating),
.panels-area[data-active-profile="illustrator"] #illustrator-right-group:not(.panel--floating) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin-top: -1px !important;
  margin-left: -1px !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 2 !important;
}

.panels-area[data-active-profile="illustrator"] #panelPalette {
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;
}

.panels-area[data-active-profile="illustrator"] #panelPalette .panel-body--palette {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

.panels-area[data-active-profile="illustrator"] #panelViz {
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;
}

.panels-area[data-active-profile="illustrator"] #panelViz .panel-body--viz {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  container-type: size !important;
}

/* Responsive fallback for Illustrator Grid Layout */
@media (max-width: 900px) {
  .panels-area[data-active-profile="illustrator"] #panelsRow,
  .panels-area[data-active-profile="illustrator"] #panelsRowAccess {
    display: flex !important;
  }
  .panels-area[data-active-profile="illustrator"] {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }
  .panels-area[data-active-profile="illustrator"] #panelSketch {
    height: auto !important;
    min-height: 560px !important;
  }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  :root { --sidebar-w: 241px; }
}

@media (max-width: 900px) {
  .panels-row { flex-direction: column; }
  .panels-row .panel { width: 100%; }
  .panels-row--access .panel { min-width: 0; }
}

@media (max-width: 702px) {
  :root { --sidebar-w: 216px; }
  .menubar-nav { display: none; }
}

@media (max-width: 558px) {
}

@media (max-width: 486px) {
  .app-shell { flex-direction: column; overflow: visible; }
  body { height: auto; overflow: visible; }
  .sidebar-container {
    width: 100% !important;
    height: auto !important;
    flex-direction: column;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-container.collapsed {
    width: 100% !important;
  }
  .sidebar-dock {
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: space-around;
    padding: var(--s-2) 0;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
  .sidebar-panel {
    width: 100%;
    height: auto;
    max-height: 55vh;
    transition: max-height var(--t-base) ease, opacity var(--t-base) ease;
  }
  .sidebar-container.collapsed .sidebar-panel {
    width: 100%;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
  }
  .sidebar-panel-content {
    max-height: calc(55vh - 50px);
  }
  .panels-area { overflow: visible; }
}