/* ===========================
 * App Shell Component Styles (LSH-77)
 * ===========================
 * The persistent Heilsugátt application chrome — collapsible sidebar
 * rail + header — promoted from heylsugatt/shell/ (hg-* → lsh-shell-*).
 * Composes stock DS pieces: .btn.btn-icon-only (header icon buttons,
 * paint via the .lsh-shell-iconbtn skin — D9), .input-field (search),
 * .avatar (user-menu trigger), [data-tooltip], .lsh-menu.
 *
 * Dimension scale = element-scoped custom props on .lsh-shell (D2);
 * zero new :root tokens. Rules that can render outside a .lsh-shell
 * root (docs fragments) carry fallbacks for the scoped props.
 *
 * State model (D3): data-sidebar="open|collapsed" + data-patient=
 * "active|none" on the root. js/shell.js flips attributes only —
 * every visual lives here.
 * ===========================
 * Dark mode rides semantic tokens via data-theme. The logo <img>s bake
 * light-navy fills into the SVGs, so [data-theme="dark"] swaps them to
 * the -inverse assets (CSS-file-relative paths, layout.css precedent).
 * =========================== */


/* ─── 1. Shell frame ─── */

.lsh-shell {
  --shell-sidebar-w: 240px;
  --shell-sidebar-w-collapsed: 56px;
  --shell-header-h: 64px;
  --shell-patient-h: 32px;
  --shell-nav-icon: 20px;   /* glyph size inside the 40px control */
  display: grid;
  grid-template-columns: var(--shell-sidebar-w) 1fr;
  height: 100dvh;
  overflow: hidden;
  font-family: var(--font-primary);
  color: var(--text-primary);
  transition: grid-template-columns var(--transition-slow);
}
.lsh-shell[data-sidebar="collapsed"] {
  grid-template-columns: var(--shell-sidebar-w-collapsed) 1fr;
}


/* ─── 2. Sidebar ─── */

.lsh-shell-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-primary);   /* same surface as the header in both modes */
  border-right: 1px solid var(--border-secondary);
  overflow: hidden;
}
.lsh-shell-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  flex-shrink: 0;
  padding: var(--spacing-4) var(--spacing-2) var(--spacing-3);
}
.lsh-shell-sidebar__group {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: 0 var(--spacing-2);
  min-height: 0;
  overflow-y: auto;
}
.lsh-shell-sidebar__footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-2) var(--spacing-6);
}
.lsh-shell-sidebar__divider {
  height: 1px;
  width: 100%;
  margin: var(--spacing-1) 0;
  border: none;
  background: var(--border-secondary);
}


/* ─── 3. Logo ─── */

.lsh-shell-logo {
  display: flex;
  align-items: center;
  height: 40px;
  min-width: 0;
  padding-left: var(--spacing-1);
  text-decoration: none;
}
.lsh-shell-logo__mark { display: block; height: 40px; width: auto; }

/* Dark mode: the wordmark/mark bake dark-navy fills into the SVG, so token
   overrides can't recolor them — swap to the DS -inverse assets instead. */
[data-theme="dark"] .lsh-shell-logo__mark { content: url("../../assets/logos/heilsugatt-logo-inverse.svg"); }
[data-theme="dark"] .lsh-shell-sidebar__toggle-mark { content: url("../../assets/logos/heilsugatt-logomark-inverse.svg"); }


/* ─── 4. Collapse toggle ─── */
/* Open: shows the panel icon. Collapsed: shows the logo mark, which swaps
   to the panel icon on hover. Tooltip text is stamped by js/shell.js. */

.lsh-shell-sidebar__toggle {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--icon-fg-subtle);
  cursor: pointer;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}
.lsh-shell-sidebar__toggle:hover {
  background: var(--bg-brand-primary-alt);
  color: var(--text-brand-primary-alt);
}
.lsh-shell-sidebar__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--brand-500);
}
.lsh-shell-sidebar__toggle-mark { display: none; width: 32px; height: 32px; }  /* collapsed only */
.lsh-shell-sidebar__toggle-panel { display: inline-flex; }
.lsh-shell-sidebar__toggle-panel svg { display: block; }


/* ─── 5. Nav item ─── */

.lsh-shell-nav__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  min-height: 40px;
  padding: var(--spacing-1-5);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--fg-tertiary);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}
.lsh-shell-nav__item:hover {
  background: var(--bg-brand-primary-alt);
  color: var(--text-brand-primary-alt);
}
.lsh-shell-nav__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--brand-500);
}
.lsh-shell-nav__item.is-active {
  background: var(--bg-brand-primary-alt);
  color: var(--text-brand-primary-alt);
}

.lsh-shell-nav__icon {
  flex-shrink: 0;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--shell-nav-icon, 20px);
  color: var(--icon-fg-subtle);
}
.lsh-shell-nav__item:hover .lsh-shell-nav__icon,
.lsh-shell-nav__item.is-active .lsh-shell-nav__icon { color: inherit; }

.lsh-shell-nav__text { display: flex; flex-direction: column; min-width: 0; }
.lsh-shell-nav__label { white-space: nowrap; }
.lsh-shell-nav__sub {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}
.lsh-shell-nav__chevron {
  margin-left: auto;
  font-size: var(--font-size-sm);
  color: var(--icon-fg-subtle);
  transition: transform var(--transition-normal);
}
.lsh-shell-nav__item[aria-expanded="true"] .lsh-shell-nav__chevron { transform: rotate(180deg); }


/* ─── 6. Collapsed rail ─── */

.lsh-shell[data-sidebar="collapsed"] .lsh-shell-sidebar__head { justify-content: center; }
.lsh-shell[data-sidebar="collapsed"] .lsh-shell-logo { display: none; }
.lsh-shell[data-sidebar="collapsed"] .lsh-shell-sidebar__toggle-mark { display: block; }
.lsh-shell[data-sidebar="collapsed"] .lsh-shell-sidebar__toggle-panel { display: none; }
.lsh-shell[data-sidebar="collapsed"] .lsh-shell-sidebar__toggle:hover .lsh-shell-sidebar__toggle-mark { display: none; }
.lsh-shell[data-sidebar="collapsed"] .lsh-shell-sidebar__toggle:hover .lsh-shell-sidebar__toggle-panel { display: inline-flex; }
.lsh-shell[data-sidebar="collapsed"] .lsh-shell-nav__label,
.lsh-shell[data-sidebar="collapsed"] .lsh-shell-nav__sub,
.lsh-shell[data-sidebar="collapsed"] .lsh-shell-nav__text,
.lsh-shell[data-sidebar="collapsed"] .lsh-shell-nav__chevron { display: none; }
.lsh-shell[data-sidebar="collapsed"] .lsh-shell-nav__item {
  width: 40px;
  margin-inline: auto;
  padding: 0;
  justify-content: center;
}
.lsh-shell[data-sidebar="collapsed"] .lsh-shell-nav__icon { width: auto; }


/* ─── 7. Main column + header ─── */

.lsh-shell-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.lsh-shell-header {
  flex-shrink: 0;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-secondary);
}
.lsh-shell-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  height: var(--shell-header-h, 64px);
  padding: 0 var(--spacing-4);
}
.lsh-shell-header__nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  min-width: 0;
  flex: 1;
}
.lsh-shell-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  flex-shrink: 0;
}


/* ─── 8. Icon button skin (D9) ─── */
/* Structure (square hit-target, padding 0, radius, focus ring) comes from
   composing .btn.btn-icon-only — markup: class="btn btn-icon-only
   lsh-shell-iconbtn". This skin adds only the shell's ghost/brand-tint
   paint (icon-fg-subtle → brand tint on hover), shared with the sidebar
   toggle and nav items. Deliberately NOT .btn-tertiary-gray — its default
   fg and dark-mode hover diverge from the shell recipe (spec D9). */

.btn.btn-icon-only.lsh-shell-iconbtn {
  background: transparent;
  border-color: transparent;
  color: var(--icon-fg-subtle);
  font-size: var(--shell-nav-icon, 20px);
  transition: background-color var(--transition-normal), color var(--transition-normal);
}
.btn.btn-icon-only.lsh-shell-iconbtn:hover {
  background: var(--bg-brand-primary-alt);
  border-color: transparent;
  color: var(--text-brand-primary-alt);
}
/* Patient-bar action size — pins the full square itself so it does not
   depend on .btn-xs height rules. */
.btn.btn-icon-only.lsh-shell-iconbtn--sm {
  width: 24px;
  min-width: 24px;
  height: 24px;
  font-size: var(--font-size-sm);
}


/* ─── 9. Search (composes .input-field unchanged) ─── */

.lsh-shell-search.input-field {
  height: 40px;
  width: 320px;
  flex-shrink: 1;
  padding: 0 var(--spacing-3);
}
.lsh-shell-search .input-el { font-size: var(--font-size-sm); line-height: var(--line-height-sm); }
.lsh-shell-search .input-el::-webkit-search-cancel-button { display: none; }


/* ─── 10. Avatar (user-menu trigger) ─── */
/* Composes the stock .avatar; markup carries the sanctioned inline
   overrides --avatar-bg: var(--bg-brand-solid) / --avatar-fg:
   var(--text-white). This class only adapts the <button> host. */

.lsh-shell-header__avatar {
  border: none;
  padding: 0;
  margin-left: var(--spacing-1);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}
.lsh-shell-header__avatar:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--brand-500);
}


/* ─── 11. Content area ─── */

.lsh-shell-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--bg-secondary);
}
.lsh-shell-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  color: var(--text-tertiary);
}
.lsh-shell-placeholder i { font-size: 28px; color: var(--fg-quinary); }
.lsh-shell-placeholder p { margin: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--text-secondary); }
.lsh-shell-placeholder span { font-size: var(--font-size-sm); }


/* ─── 12. Responsive (D7 — faithful upstreaming) ─── */
/* ≤1024px the rail auto-collapses regardless of data-sidebar. */

@media (max-width: 1024px) {
  .lsh-shell,
  .lsh-shell[data-sidebar="open"] { grid-template-columns: var(--shell-sidebar-w-collapsed) 1fr; }
  .lsh-shell .lsh-shell-nav__label,
  .lsh-shell .lsh-shell-nav__sub,
  .lsh-shell .lsh-shell-nav__text,
  .lsh-shell .lsh-shell-nav__chevron { display: none; }
  .lsh-shell .lsh-shell-nav__item { width: 40px; margin-inline: auto; padding: 0; justify-content: center; }
  .lsh-shell .lsh-shell-nav__icon { width: auto; }
  .lsh-shell .lsh-shell-sidebar__head { justify-content: center; }
  .lsh-shell .lsh-shell-logo { display: none; }
  .lsh-shell .lsh-shell-sidebar__toggle-mark { display: block; }
  .lsh-shell .lsh-shell-sidebar__toggle-panel { display: none; }
  .lsh-shell .lsh-shell-sidebar__toggle:hover .lsh-shell-sidebar__toggle-mark { display: none; }
  .lsh-shell .lsh-shell-sidebar__toggle:hover .lsh-shell-sidebar__toggle-panel { display: inline-flex; }
}
@media (max-width: 640px) {
  .lsh-shell-search.input-field { width: auto; }
}


/* ─── 13. Docs miniature (D13) ─── */
/* Scoped-height frame so the 100dvh shell can live inside a
   .component-example. --shell-demo-height is a sanctioned scoped custom
   prop (the --demo-min-height pattern). width: 100% guards the
   .component-example flex-centering shrink-wrap trap (LSH-137). */

.lsh-shell--demo {
  height: var(--shell-demo-height, 560px);
  width: 100%;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-lg);
}