/*
 * Terminal43 Code - Layout System
 * Sidebar + Top Bar grid layout with multiple modes
 */

:root {
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 52px;
  --mobile-nav-height: 64px;
}

/* ============================================
   LAYOUT GRID
   ============================================ */

.app-layout {
  display: grid;
  min-height: 100vh;
  transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Default: sidebar + main column */
.layout-default .app-layout {
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr auto;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content"
    "sidebar footer";
}

/* Collapsed sidebar (icon-only) */
.layout-collapsed .app-layout {
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
  grid-template-rows: var(--topbar-height) 1fr auto;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content"
    "sidebar footer";
}

/* Expand collapsed sidebar on hover */
.layout-collapsed .app-sidebar:hover {
  width: var(--sidebar-width);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1100;
  box-shadow: var(--shadow-xl);
}

/* Learning mode: no sidebar, full width for split-pane editor */
.layout-learning .app-layout {
  grid-template-columns: 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  grid-template-areas:
    "topbar"
    "content";
}

/* Full width: no sidebar (landing, login, register) */
.layout-fullwidth .app-layout {
  grid-template-columns: 1fr;
  grid-template-rows: var(--topbar-height) 1fr auto;
  grid-template-areas:
    "topbar"
    "content"
    "footer";
}

/* Admin variant */
.layout-admin .app-layout {
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr auto;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content"
    "sidebar footer";
}

/* ============================================
   GRID AREA ASSIGNMENTS
   ============================================ */

.app-sidebar {
  grid-area: sidebar;
}

.app-topbar {
  grid-area: topbar;
}

.app-content {
  grid-area: content;
  overflow-y: auto;
  padding: 24px;
  min-width: 0; /* Prevent grid blowout */
}

.app-footer {
  grid-area: footer;
}

/* Learning mode: no padding, full height */
.layout-learning .app-content {
  padding: 0;
  overflow: hidden;
}

/* Full width mode: no constraints, no padding (pages provide their own) */
.layout-fullwidth .app-content {
  padding: 0;
  overflow: visible;
  max-width: none;
}

/* Hide sidebar in modes that don't use it */
.layout-learning .app-sidebar,
.layout-fullwidth .app-sidebar {
  display: none;
}

/* Hide footer in learning mode */
.layout-learning .app-footer {
  display: none;
}

/* ============================================
   CONTENT CONTAINERS
   ============================================ */

.content-narrow {
  max-width: 800px;
  margin: 0 auto;
}

.content-medium {
  max-width: 1000px;
  margin: 0 auto;
}

.content-wide {
  max-width: 1200px;
  margin: 0 auto;
}

.content-full {
  width: 100%;
}

/* ============================================
   RESPONSIVE LAYOUT
   ============================================ */

/* Auto-collapse on medium screens */
@media (max-width: 1200px) and (min-width: 1025px) {
  .layout-default .app-layout {
    grid-template-columns: var(--sidebar-width-collapsed) 1fr;
  }

  .layout-default .app-sidebar {
    width: var(--sidebar-width-collapsed);
  }

  /* Expand on hover */
  .layout-default .app-sidebar:hover {
    width: var(--sidebar-width);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1100;
    box-shadow: var(--shadow-xl);
  }
}

/* Tablet: sidebar becomes overlay drawer */
@media (max-width: 1024px) {
  .layout-default .app-layout,
  .layout-admin .app-layout,
  .layout-collapsed .app-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "content"
      "footer";
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    height: 100vh;
    z-index: 1200;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .app-sidebar.open {
    left: 0;
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1199;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .sidebar-overlay.active {
    display: block;
    opacity: 1;
  }
}

/* Phone: show bottom nav */
@media (max-width: 768px) {
  .app-content {
    padding: 16px;
    padding-bottom: calc(var(--mobile-nav-height) + 16px);
  }

  .app-mobile-nav {
    display: flex !important;
  }
}

/* Default: hide mobile nav */
.app-mobile-nav {
  display: none;
}

/* ============================================
   SPLIT PANE (Learning Mode)
   ============================================ */

.split-pane {
  display: flex;
  height: calc(100vh - var(--topbar-height));
  overflow: hidden;
}

.split-pane-left {
  width: 40%;
  min-width: 300px;
  max-width: 60%;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
}

.split-pane-divider {
  width: 4px;
  cursor: col-resize;
  background: var(--border);
  transition: background 0.2s;
  flex-shrink: 0;
}

.split-pane-divider:hover,
.split-pane-divider.dragging {
  background: var(--primary);
}

.split-pane-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .split-pane {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - var(--topbar-height));
  }

  .split-pane-left {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .split-pane-divider {
    display: none;
  }

  .split-pane-right {
    flex: 1;
    min-height: 50vh;
  }
}

/* ============================================
   PAGE HEADER UTILITY
   ============================================ */

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.page-header p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}