/* =============================================================================
   Dashboard shell: sidebar, top bar, page frame
   ============================================================================= */

@layer components {

  .boot-splash { display: grid; place-items: center; min-block-size: 60dvh; }
  .boot-splash .brand-orb { inline-size: 3rem; block-size: 3rem; animation-duration: 1.6s; }

  .shell {
    --sidebar-w: 16.5rem;
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-block-size: 100dvh;
    transition: grid-template-columns var(--dur-3) var(--ease-out);
  }
  .shell.is-collapsed { --sidebar-w: 5.25rem; }

  /* ---------------------------------------------------------------- Sidebar */
  .sidebar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    block-size: 100dvh;
    padding: var(--s-4) var(--s-3);
    background: linear-gradient(180deg, oklch(100% 0 0 / 0.05), oklch(100% 0 0 / 0.015));
    border-inline-end: 1px solid var(--border);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
    backdrop-filter: blur(var(--blur)) saturate(140%);
    animation: slide-in-left var(--dur-4) var(--ease-out) both;
  }
  @keyframes slide-in-left { from { opacity: 0; translate: calc(-16px * var(--m)) 0; } }

  .sidebar__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding-inline: var(--s-2); min-block-size: 2.75rem; }
  .is-collapsed .sidebar__brand { flex-direction: column; padding-inline: 0; gap: var(--s-3); }

  .nav { display: grid; gap: 0.2rem; }

  .nav__item {
    --focus-radius: var(--radius-m);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-block-size: 2.9rem;
    padding-inline: var(--s-3);
    border-radius: var(--radius-m);
    color: var(--text-dim);
    font-weight: 500;
    font-size: var(--fs-s);
    text-align: start;
    inline-size: 100%;
    transition: color var(--dur-2), background-color var(--dur-2), transform var(--dur-2) var(--ease-spring);
  }
  .nav__item .icon { transition: transform var(--dur-3) var(--ease-spring), color var(--dur-2); }
  .nav__item:hover { color: var(--text); background: var(--surface); }
  .nav__item:hover .icon { transform: scale(1.12) rotate(-6deg); }
  .nav__item:active { transform: scale(0.97); }

  .nav__item.active {
    color: var(--text);
    background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 20%, transparent), color-mix(in oklch, var(--accent) 4%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 25%, transparent);
  }
  .nav__item.active .icon { color: var(--accent); }
  .nav__item.active::before {
    content: "";
    position: absolute;
    inset-inline-start: -0.75rem;
    inset-block: 0.6rem;
    inline-size: 3px;
    border-radius: 3px;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
    animation: bar-in var(--dur-3) var(--ease-spring) both;
  }
  @keyframes bar-in { from { scale: 1 0; } }

  .nav__label { white-space: nowrap; overflow: hidden; transition: opacity var(--dur-2), inline-size var(--dur-3); }
  .is-collapsed .nav__label { opacity: 0; inline-size: 0; position: absolute; pointer-events: none; }
  .is-collapsed .nav__item { justify-content: center; padding-inline: 0; }

  .nav__badge {
    margin-inline-start: auto;
    padding: 0.05rem 0.5rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-faint);
    border: 1px solid var(--border);
  }
  .nav__badge.is-open { color: var(--warning); border-color: color-mix(in oklch, var(--warning) 50%, transparent); }

  .nav__item--search .kbd { margin-inline-start: auto; font-size: 0.62rem; }

  .sidebar__foot { margin-block-start: auto; display: grid; gap: var(--s-2); }

  .user-chip {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2);
    border-radius: var(--radius-m);
    background: var(--surface);
    border: 1px solid var(--border);
  }
  .is-collapsed .user-chip { flex-direction: column; padding: var(--s-2) 0; }
  .user-chip__text { display: grid; line-height: 1.2; min-inline-size: 0; }
  .user-chip__text strong { font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; }
  .user-chip__text small { font-size: 0.7rem; color: var(--text-faint); font-family: var(--font-mono); }
  .user-chip__out { margin-inline-start: auto; }
  .is-collapsed .user-chip__out { margin-inline-start: 0; }

  .avatar {
    display: grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    flex: none;
    border-radius: 50%;
    font-weight: 700;
    font-size: var(--fs-s);
    color: var(--accent-ink);
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in oklch, var(--accent) 50%, transparent);
  }

  /* ---------------------------------------------------------------- Main column */
  /* Backdrop for the mobile drawer only; must not take a grid cell on desktop. */
  .shell__scrim { display: none; }

  .shell__main { min-inline-size: 0; display: flex; flex-direction: column; }

  .topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: calc(var(--z-sticky) - 1);
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-block-size: 4.25rem;
    padding: var(--s-3) var(--gutter);
    background: linear-gradient(180deg, color-mix(in oklch, var(--bg) 80%, transparent), color-mix(in oklch, var(--bg) 35%, transparent));
    border-block-end: 1px solid oklch(100% 0 0 / 0.04);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
  .topbar__menu { display: none; }
  .topbar__title { flex: 1; min-inline-size: 0; }
  .topbar__actions { display: flex; align-items: center; gap: var(--s-2); }
  .topbar__clock { color: var(--text-dim); font-size: var(--fs-s); padding-inline: var(--s-2); }

  .crumb {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
  }
  .crumb .icon { color: var(--accent); }

  .search-pill {
    --focus-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    block-size: 2.4rem;
    padding-inline: 0.9rem 0.45rem;
    border-radius: var(--radius-pill);
    color: var(--text-faint);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: var(--fs-s);
    transition: border-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease-spring);
  }
  .search-pill:hover { color: var(--text-dim); border-color: var(--accent-line); box-shadow: 0 0 20px -6px var(--accent); }
  .search-pill:active { transform: scale(0.97); }
  .search-pill__text { min-inline-size: 9rem; text-align: start; }
  .search-pill .kbd { min-inline-size: 1.4rem; block-size: 1.4rem; font-size: 0.62rem; }

  .vault-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    block-size: 2.4rem;
    padding-inline: 0.5rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--warning);
    background: color-mix(in oklch, var(--warning) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--warning) 40%, transparent);
    animation: rise-in var(--dur-3) var(--ease-spring) both;
    transition: background-color var(--dur-2);
  }
  .vault-pill:hover { background: color-mix(in oklch, var(--warning) 22%, transparent); }
  .vault-pill .ring__value { stroke: var(--warning); }

  .shell__content { flex: 1; min-inline-size: 0; }

  .page-pad { padding: var(--s-5) var(--gutter) var(--s-8); display: grid; gap: var(--s-5); }
  .page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4); }
  .page-head__tools { display: flex; gap: var(--s-2); }

  .center-card { display: grid; gap: var(--s-4); justify-items: center; text-align: center; max-inline-size: 34rem; margin: var(--s-7) auto; padding: clamp(var(--s-5), 4vw, var(--s-7)); border-radius: var(--radius-xl); }

  /* ---------------------------------------------------------------- Responsive: drawer on small screens */
  @media (max-width: 900px) {
    .shell, .shell.is-collapsed { grid-template-columns: minmax(0, 1fr); --sidebar-w: 17rem; }

    .sidebar {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      inline-size: var(--sidebar-w);
      z-index: var(--z-overlay);
      translate: -105% 0;
      background: var(--glass-solid);
      transition: translate var(--dur-3) var(--ease-out);
      animation: none;
    }
    .is-nav-open .sidebar { translate: 0 0; box-shadow: var(--shadow-3); }
    .sidebar__collapse { display: none; }
    .is-collapsed .nav__label { opacity: 1; inline-size: auto; position: static; }
    .is-collapsed .nav__item { justify-content: flex-start; padding-inline: var(--s-3); }

    .shell__scrim {
      display: block;
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-overlay) - 1);
      background: var(--scrim);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--dur-3);
    }
    .is-nav-open .shell__scrim { opacity: 1; pointer-events: auto; }

    .topbar__menu { display: inline-grid; }
    .search-pill__text, .search-pill .kbd, .topbar__clock { display: none; }
    .search-pill { padding-inline: 0.7rem; }
  }
}