/* ==========================================================================
   layout.css — the persistent application shell
   Grid: [sidebar] [header / page]. Only the page pane scrolls.
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 100%;
  height: 100vh;
  height: 100dvh;
  transition: grid-template-columns var(--dur) var(--ease);
}

.app[data-sidebar="collapsed"] { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar {
  grid-column: 1;
  /* A five-percent tonal fall from top to bottom. Enough to read as a lit
     surface, far too little to read as a gradient. */
  background: linear-gradient(180deg, var(--color-sidebar-top) 0%, var(--color-sidebar) 62%);
  color: var(--color-on-dark);
  display: flex;
  flex-direction: column;
  min-height: 0;
  z-index: var(--z-sidebar);
  /* A dark seam on the outside, a hairline of light on the inside. */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 var(--color-sidebar-edge);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--header-h);
  padding: 0 var(--space-4);
  flex: 0 0 auto;
  border-bottom: 1px solid var(--color-sidebar-border);
  overflow: hidden;
}

.brand-mark {
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--color-primary-lit) 0%, var(--color-primary-hover) 100%);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: var(--edge-light), 0 1px 3px rgba(0, 0, 0, 0.4);
}

.brand-mark svg { width: 17px; height: 17px; }

.brand-text { min-width: 0; }

.brand-name {
  display: block;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

.brand-sub {
  display: block;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
  white-space: nowrap;
  margin-top: 2px;
}

.sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-3) 0 var(--space-5);
}

.sidebar__nav::-webkit-scrollbar-thumb { background-color: #3D3833; }

.nav-group { margin-bottom: var(--space-4); }

.nav-group__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #6A625A;
  padding: 0 var(--space-4) 6px;
  white-space: nowrap;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: calc(100% - 16px);
  height: 33px;
  margin: 1px 8px;
  padding: 0 10px;
  border-radius: 7px;
  color: var(--color-on-dark-soft);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.005em;
  position: relative;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.nav-item:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-on-dark);
  text-decoration: none;
}

/* Active reads as a raised tile catching the same light as the panel: a fill,
   a hairline of light along its top edge, and the accent held to a short bar. */
.nav-item.is-active {
  background: var(--color-sidebar-raised);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* No separate accent bar: once the tile is raised and the icon carries the
   accent, a detached sliver at the panel edge is one signal too many. */

.nav-item__icon {
  flex: 0 0 17px;
  width: 17px; height: 17px;
  opacity: 0.62;
  transition: opacity var(--dur-fast) var(--ease);
}
.nav-item:hover .nav-item__icon { opacity: 0.85; }
.nav-item.is-active .nav-item__icon { opacity: 1; color: var(--color-primary-lit); }

.nav-item__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.nav-item__count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  min-width: 19px;
  text-align: center;
  padding: 2px 5px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.07);
  color: #B8B0A5;
}

.nav-item__count[data-tone="alert"] {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--edge-light);
}

/* --- Sidebar footer: user card ------------------------------------------ */

.sidebar__footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--color-sidebar-border);
  padding: var(--space-3);
}

.user-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2);
  border-radius: var(--radius);
  transition: background-color var(--dur-fast) var(--ease);
  overflow: hidden;
}

.user-card:hover { background: var(--color-sidebar-raised); }

.user-card__text { min-width: 0; flex: 1 1 auto; }
.user-card__name { display: block; font-size: var(--text-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card__role { display: block; font-size: var(--text-xs); color: var(--color-on-dark-muted); white-space: nowrap; }

/* --- Collapsed state ---------------------------------------------------- */

.app[data-sidebar="collapsed"] .brand-text,
.app[data-sidebar="collapsed"] .nav-group__label,
.app[data-sidebar="collapsed"] .nav-item__label,
.app[data-sidebar="collapsed"] .nav-item__count,
.app[data-sidebar="collapsed"] .user-card__text { display: none; }

.app[data-sidebar="collapsed"] .sidebar__brand { justify-content: center; padding: 0; }
.app[data-sidebar="collapsed"] .nav-item { justify-content: center; padding: 0; }
.app[data-sidebar="collapsed"] .user-card { justify-content: center; padding: var(--space-2) 0; }
.app[data-sidebar="collapsed"] .user-card__caret { display: none; }
/* Collapsed, the panel is 60px wide, so the menu opens beside it instead. */
.app[data-sidebar="collapsed"] .sidebar__footer .menu--up { left: calc(100% + 6px); bottom: 0; }

/* Group separation survives the loss of labels. */
.app[data-sidebar="collapsed"] .nav-group { margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-sidebar-border); }
.app[data-sidebar="collapsed"] .nav-group:last-child { border-bottom: 0; }

/* Tooltip replaces the label when collapsed. */
.app[data-sidebar="collapsed"] .nav-item:hover .nav-item__tip { opacity: 1; transform: translateX(0); }

.nav-item__tip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  margin-top: -13px;
  /* Opaque: this floats over page content, not over the panel. */
  background: #2A2621;
  color: var(--color-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  box-shadow: var(--shadow-md);
  display: none;
}

.app[data-sidebar="collapsed"] .nav-item__tip { display: block; }

/* ==========================================================================
   Main column
   ========================================================================== */

.main {
  grid-column: 2;
  display: grid;
  grid-template-rows: var(--header-h) 1fr;
  min-width: 0;
  min-height: 0;
}

/* --- Header -------------------------------------------------------------- */

.header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(25, 22, 18, 0.025);
  z-index: var(--z-header);
}

.header__search {
  position: relative;
  flex: 1 1 auto;
  max-width: 460px;
}

.header__context {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-right: var(--space-3);
  border-right: 1px solid var(--color-border);
  margin-right: var(--space-1);
  white-space: nowrap;
}

.header__actions { display: flex; align-items: center; gap: var(--space-1); }

/* --- Page pane ----------------------------------------------------------- */

.page {
  grid-row: 2;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.page__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-12);
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.page-head__title { font-size: var(--text-2xl); letter-spacing: -0.025em; }
.page-head__sub { font-size: var(--text-md); color: var(--color-text-muted); margin-top: 3px; }
.page-head__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Back link above a detail page title. */
.page-back {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.page-back:hover { color: var(--color-primary); text-decoration: none; }

/* --- Section rhythm ------------------------------------------------------ */

.section-title { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; }

/* --- Grids used by pages ------------------------------------------------- */

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Deliberately asymmetric: the work queue earns more room than the sidebar rail. */
.grid-main-rail { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
.grid-rail-main { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); }