/* static/css/bela/workspace.css */

/* === Custom properties Atlas / Deep Dive === */
:root {
  --color-atlas: #425779;
  --color-deepdive: #e8622c;
  --color-mode: var(--color-atlas);
  --z-canvas: 10;
  --z-rail: 20;
  --z-panel: 25;
  --z-topbar: 30;
  --z-overlay: 40;
  --z-toast: 50;
  --rail-width-open: 320px;
  --rail-width-collapsed: 48px;
  --list-width: 360px;
  --detail-width: 640px;
  --canvas-min: 480px;
  --topbar-height: 56px;
  --anim-panel: 220ms ease-out;
}

[data-mode="atlas"] { --color-mode: var(--color-atlas); }
[data-mode="dd"]    { --color-mode: var(--color-deepdive); }

/* === Layout structure === */
.workspace-root { height: 100dvh; }
.workspace-body { position: relative; }
.workspace-canvas {
  transition: flex-basis var(--anim-panel), min-width var(--anim-panel);
}

/* === Left rail === */
.workspace-left-rail {
  width: var(--rail-width-open);
  z-index: var(--z-rail);
  border-right: 1px solid #e8e3d8;
  background: #ffffff;
  transition: width var(--anim-panel);
}
.workspace-left-rail[data-collapsed="true"] {
  width: var(--rail-width-collapsed) !important;
}
/* Suppress transition during drag-resize to avoid lag. JS toggles data-resizing. */
.workspace-left-rail[data-resizing="true"] {
  transition: none;
}

/* === List panel === overlay-positioned (ne pousse pas la canvas) === */
.workspace-list-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 0;
  overflow: hidden;
  transition: width var(--anim-panel), right var(--anim-panel);
  z-index: var(--z-panel);
  border-left: 1px solid #e8e3d8;
  background: #ffffff;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.06);
}
.workspace-list-panel[data-open="true"] { width: var(--list-width); }
/* En Option A avec Detail ouvert, on décale la List à gauche du Detail */
.workspace-root[data-option="A"] .workspace-list-panel[data-open="true"][data-compact="true"] {
  right: var(--detail-width);
}

/* === Detail panel === overlay-positioned, au-dessus de la List === */
.workspace-detail-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 0;
  overflow: hidden;
  transition: width var(--anim-panel);
  z-index: var(--z-panel);
  border-left: 1px solid #e8e3d8;
  background: #ffffff;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.06);
}
.workspace-detail-panel[data-open="true"] { width: var(--detail-width); }

@media (prefers-reduced-motion: reduce) {
  .workspace-canvas, .workspace-left-rail, .workspace-list-panel, .workspace-detail-panel {
    transition: none;
  }
}

/* === Option B fallback : Detail remplace List (viewport étroit) === */
.workspace-root[data-option="B"] .workspace-list-panel[data-open="true"][data-compact="true"] {
  width: 0;
}

/* === Canvas accents + skeletons follow the active mode color === */
.workspace-canvas .skeleton {
  background: color-mix(in srgb, var(--color-mode) 10%, transparent);
  animation: workspace-pulse 1.6s ease-in-out infinite;
}
@keyframes workspace-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-canvas .skeleton { animation: none; }
}
.workspace-canvas .accent     { color: var(--color-mode); }
.workspace-canvas .accent-bg  { background-color: var(--color-mode); }
.workspace-canvas a:hover     { color: var(--color-mode); }