/*
 * FILE: layout.css
 * PURPOSE:
 * - Page skeleton and main zone composition.
 * BELONGS HERE:
 * - Shells, wrappers, containers, section layout, sidebar/main layout,
 *   split layouts, grids, stacks, toolbars, sticky zones, responsive collapse.
 * DOES NOT BELONG HERE:
 * - Buttons, cards, form fields, feature-specific elements.
 */

.l-page,
.l-shell {
  width: 100%;
}

.l-container {
  width: min(100% - (var(--space-6) * 2), var(--page-max-width));
  margin-inline: auto;
}

.l-container--sm { max-width: var(--container-sm); }
.l-container--md { max-width: var(--container-md); }
.l-container--lg { max-width: var(--container-lg); }
.l-container--xl { max-width: var(--container-xl); }

.l-content-frame {
  width: min(100%, var(--content-max-width));
}

.l-page-frame {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
}

.l-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.l-page-header__main,
.l-page-header__meta,
.l-page-header__actions {
  min-width: 0;
}

.l-page-header__main {
  display: grid;
  gap: var(--space-2);
}

.l-page-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-left: auto;
}

.l-section {
  padding-block: var(--space-8);
}

.l-section--tight {
  padding-block: var(--space-6);
}

.l-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.l-stack--sm { gap: var(--space-2); }
.l-stack--lg { gap: var(--space-6); }
.l-stack--xl { gap: var(--space-8); }

.l-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.l-row--between {
  justify-content: space-between;
}

.l-grid {
  display: grid;
  gap: var(--space-4);
}

.l-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.l-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.l-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
}

.l-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.l-app--sidebar {
  grid-template-columns: minmax(18rem, var(--sidebar-width-md)) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.l-sidebar {
  min-width: 0;
}

.l-main {
  min-width: 0;
}

.l-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.l-toolbar__main,
.l-toolbar__actions {
  min-width: 0;
}

.l-toolbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-left: auto;
}

.l-sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.l-scroll {
  min-width: 0;
  overflow: auto;
}

@media (max-width: 1024px) {
  .l-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .l-app--sidebar,
  .l-split {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 768px) {
  .l-container {
    width: min(100% - (var(--space-4) * 2), var(--page-max-width));
  }

  .l-grid--2,
  .l-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .l-row,
  .l-toolbar,
  .l-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .l-toolbar__actions,
  .l-page-header__actions {
    width: 100%;
    justify-content: stretch;
    margin-left: 0;
  }

  .l-toolbar__actions > *,
  .l-page-header__actions > * {
    width: 100%;
  }
}

.l-resizable-split {
  display: grid;
  grid-template-columns: var(--org-workspace-sidebar-width, 22rem) var(--org-workspace-divider-width, 0.875rem) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  min-width: 0;
}

.l-resizable-split__sidebar,
.l-resizable-split__main {
  min-width: 0;
}

.l-resizable-split__sidebar {
  overflow: hidden;
}

.l-resizable-split__divider {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}

.l-resizable-split__divider::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--border-default);
}

@media (max-width: 1024px) {
  .l-resizable-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .l-resizable-split__divider {
    display: none;
  }
}


/* -------------------------------------------------- */
/* ORGANIZATION WORKSPACE SPLIT */
/* -------------------------------------------------- */

.org-page--workspace {
  --org-workspace-sidebar-width: var(--org-workspace-sidebar-width-persisted, var(--sidebar-width-md, 22rem));
  --org-workspace-sidebar-min: var(--sidebar-width-md, 22rem);
  --org-workspace-sidebar-max: 33.333333vw;
  --org-workspace-divider-width: 0.875rem;
}

.l-workspace,
.org-workspace-split {
  width: 100%;
  min-width: 0;
}

.l-workspace {
  display: grid;
  grid-template-columns: var(--org-workspace-sidebar-width) var(--org-workspace-divider-width) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  min-width: 0;
}

.l-workspace__sidebar,
.l-workspace__main,
.org-workspace-split__sidebar,
.org-workspace-split__main {
  min-width: 0;
}

.l-workspace__sidebar,
.org-workspace-split__sidebar {
  overflow: hidden;
}

.l-workspace__divider,
.org-workspace-split__divider {
  display: block;
  position: relative;
  z-index: 2;
  align-self: stretch;
  width: var(--org-workspace-divider-width);
  min-width: var(--org-workspace-divider-width);
  min-height: 100%;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  background: transparent;
}

.l-workspace__divider::before,
.l-workspace__divider::after,
.org-workspace-split__divider::before,
.org-workspace-split__divider::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.l-workspace__divider::before,
.org-workspace-split__divider::before {
  width: 1px;
  background: var(--border-default);
}

.l-workspace__divider::after,
.org-workspace-split__divider::after {
  width: 0.25rem;
  opacity: 0;
  background: var(--state-selected-bg);
  transition: opacity var(--transition-fast);
}

.l-workspace__divider:hover::before,
.org-workspace-split__divider:hover::before {
  background: var(--state-selected-border);
}

.l-workspace__divider:hover::after,
.org-workspace-split__divider:hover::after {
  opacity: 1;
}

.l-workspace__sidebar > .org-card,
.l-workspace__main > .org-card,
.org-workspace-split__sidebar > .org-card,
.org-workspace-split__main > .org-card {
  min-width: 0;
  padding: var(--space-5);
}

@media (max-width: 1024px) {
  .l-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .l-workspace__divider,
  .org-workspace-split__divider {
    display: none !important;
  }
}