/* ==========================================================================
   Chancery app shell layout — header, sidebar, content, footer grid, plus
   nav item and preview-banner styling. Every app/*.html page (except login)
   sets <body class="app-shell-layout"> to opt into this grid.
   ========================================================================== */

#app-shell-root { display: contents; }

body.app-shell-layout {
  display: grid;
  grid-template-columns: var(--app-sidebar-width) 1fr;
  grid-template-rows: auto var(--app-header-height) 1fr auto;
  grid-template-areas:
    "sidebar banner"
    "sidebar header"
    "sidebar content"
    "sidebar footer";
  min-height: 100vh;
  transition: grid-template-columns var(--duration-base) var(--ease-out-custom);
}

body.app-shell-layout.sidebar-collapsed {
  grid-template-columns: var(--app-sidebar-width-collapsed) 1fr;
}

/* Header ------------------------------------------------------------------ */
.app-header {
  grid-area: header;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: var(--app-header-height); padding: 0 var(--space-6);
  background: #fff; border-bottom: 1px solid var(--color-border-default);
  position: sticky; top: 0; z-index: var(--z-header);
}
.app-header__left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.app-header__center { flex: 1; display: flex; justify-content: center; min-width: 0; }
.app-header__right { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }

.brand-lockup { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.brand-mark svg { display: block; width: 26px; height: 26px; }
.brand-wordmark { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; color: var(--color-navy-900); white-space: nowrap; }

.sidebar-toggle { display: none; }

.user-menu-trigger { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-2) 6px 6px; border-radius: var(--radius-full); transition: background-color var(--duration-fast) var(--ease-out-custom); }
.user-menu-trigger:hover { background: var(--color-navy-100); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-navy-800); color: #fff; font-size: var(--text-small); font-weight: 700; flex-shrink: 0; }
.user-menu-trigger__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.user-menu-trigger__name { font-size: var(--text-small); font-weight: 600; color: var(--color-navy-900); }

/* Preview banner ------------------------------------------------------------ */
.preview-banner {
  grid-area: banner;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: var(--color-gold-50); border-bottom: 1px solid var(--color-gold-border, var(--color-gold-200));
  color: var(--color-gold-800); padding: var(--space-2) var(--space-6); font-size: var(--text-body-sm); font-weight: 500;
}
.preview-banner span { display: flex; align-items: center; gap: var(--space-2); }
.preview-banner__exit { font-size: var(--text-small); font-weight: 700; color: var(--color-gold-800); text-decoration: underline; flex-shrink: 0; }

/* Sidebar ------------------------------------------------------------------- */
.app-sidebar {
  grid-area: sidebar;
  background: var(--color-navy-900); color: var(--color-navy-300);
  display: flex; flex-direction: column;
  padding: var(--space-5) var(--space-3);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-navy-500); padding: var(--space-5) var(--space-3) var(--space-2); font-weight: 700; }

.nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-md);
  color: var(--color-navy-300); font-size: var(--text-body-sm); font-weight: 500;
  transition: background-color var(--duration-fast) var(--ease-out-custom), color var(--duration-fast) var(--ease-out-custom);
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.is-active { background: var(--color-navy-700); color: var(--color-gold-400); font-weight: 600; box-shadow: inset 3px 0 0 var(--color-gold-400); }
.nav-item .icon { flex-shrink: 0; }

.sidebar-stats { margin: var(--space-6) var(--space-1) var(--space-2); padding: var(--space-4); background: rgba(255,255,255,0.03); border: 1px solid var(--color-navy-800); border-radius: var(--radius-lg); }
.sidebar-stats__title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-navy-500); font-weight: 700; margin-bottom: var(--space-3); }
.sidebar-stats__row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; }
.sidebar-stats__label { font-size: var(--text-small); color: var(--color-navy-300); }
.sidebar-stats__value { font-family: var(--font-mono); font-size: var(--text-body); font-weight: 600; color: #fff; }
body.sidebar-collapsed .sidebar-stats { display: none; }

.app-sidebar__footer { display: flex; flex-direction: column; gap: var(--space-3); margin-top: auto; padding-top: var(--space-6); }
.sidebar-classification-note { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-navy-500); padding: var(--space-3); border-top: 1px solid var(--color-navy-800); }

.app-sidebar .focusable:focus-visible,
.app-sidebar a:focus-visible,
.app-sidebar button:focus-visible {
  box-shadow: 0 0 0 2px var(--color-navy-900), 0 0 0 5px var(--color-focus-ring);
}

body.sidebar-collapsed .app-sidebar .nav-item__label,
body.sidebar-collapsed .app-sidebar .nav-group-label,
body.sidebar-collapsed .app-sidebar .sidebar-classification-note span,
body.sidebar-collapsed .brand-wordmark { display: none; }
body.sidebar-collapsed .app-sidebar .nav-item { justify-content: center; }
body.sidebar-collapsed .app-sidebar .sidebar-classification-note { justify-content: center; }

/* Content & footer ----------------------------------------------------------- */
#page-content { grid-area: content; padding: var(--space-8) var(--space-8) var(--space-16); max-width: var(--container-app-content-max); width: 100%; margin: 0 auto; min-width: 0; }

.app-footer {
  grid-area: footer;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-5) var(--space-8); border-top: 1px solid var(--color-border-default);
  font-size: var(--text-small); color: var(--color-navy-500);
}
.app-footer__links { display: flex; gap: var(--space-5); }
.app-footer__links a:hover { color: var(--color-navy-800); }

/* Responsive ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  body.app-shell-layout, body.app-shell-layout.sidebar-collapsed { grid-template-columns: 0 1fr; }
  .sidebar-toggle { display: inline-flex; }
  .app-sidebar {
    position: fixed; inset: 0 auto 0 0; width: 280px; z-index: var(--z-overlay);
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-out-soft);
    box-shadow: var(--shadow-lg);
  }
  body.mobile-nav-open .app-sidebar { transform: translateX(0); }
  body.sidebar-collapsed .app-sidebar .nav-item__label,
  body.sidebar-collapsed .app-sidebar .nav-group-label { display: block; }
  body.sidebar-collapsed .app-sidebar .nav-item { justify-content: flex-start; }
  .app-header__center { display: none; }
  #page-content { padding: var(--space-5); }
  .app-footer { padding: var(--space-4) var(--space-5); }
}

@media (max-width: 640px) {
  .user-menu-trigger__meta { display: none; }
  .app-header { padding: 0 var(--space-4); }
}