chati-dev 4.3.0 → 4.4.0

package/framework/scaffold/saas-dashboard/app/shell.css.template

@@ -0,0 +1,1070 @@
+/*
+ * shell.css -- App Shell BEM Component Styles
+ * saas-dashboard preset v1.0.0
+ *
+ * WHAT THIS FILE COVERS
+ * ---------------------
+ * All CSS rules for the five shell components rendered by AppShell:
+ *   AppShell    (shell-root, shell-backdrop, shell-main, shell-content)
+ *   Sidebar     (sidebar, all sub-elements, collapsed and mobile modifiers)
+ *   Topbar      (topbar, topbar-inner, left/right slots, search, notifications,
+ *                user menu, dropdown)
+ *   Breadcrumb  (breadcrumb, breadcrumb-list, breadcrumb-item variants)
+ *   ThemeToggle (theme-toggle, theme-toggle-icon, overlay variant)
+ *
+ * DESIGN CONTRACT
+ * ---------------
+ * Every value in this file is expressed as a CSS custom property that
+ * was declared in globals.css. The only exceptions are:
+ *   - border widths and outline offsets: 1px and 2px (no token exists,
+ *     and --space-px resolves to 1px, used where appropriate).
+ *   - Structural sidebar widths: consumed via --shell-sidebar-w, which
+ *     itself references --spacing-sidebar-w or --spacing-sidebar-w-col.
+ *   - The backdrop z-index offset (z-index calc) uses the --z-sidebar token.
+ *
+ * MOTION RULES
+ * ------------
+ * Transitions name exactly the property being animated. Easing tokens
+ * are drawn from globals.css:
+ *   --ease-out    entering elements
+ *   --ease-in     leaving elements
+ *   --ease-in-out symmetric toggles (sidebar collapse, chevron rotation)
+ * The @media (prefers-reduced-motion: reduce) block at the bottom of
+ * globals.css collapses all durations, so no per-component reduced-motion
+ * block is required here.
+ *
+ * LAYER
+ * -----
+ * All rules live inside @layer shell so Tailwind utilities applied
+ * directly on elements (if any) naturally win over these structural
+ * styles without !important escalation.
+ */
+
+@layer shell {
+
+  /* ==========================================================================
+     1. APP SHELL ROOT GRID
+     ==========================================================================
+     The outer grid places the sidebar column and the main column side by side.
+     --shell-sidebar-w is set as an inline style by AppShell.tsx and transitions
+     via the grid-template-columns transition declared here.
+     On mobile (< 768px) the sidebar leaves the grid entirely (0px column).
+  ========================================================================== */
+
+  .shell-root {
+    display: grid;
+    grid-template-columns: var(--shell-sidebar-w, var(--spacing-sidebar-w)) 1fr;
+    grid-template-rows: 1fr;
+    min-height: 100dvh;
+    background-color: var(--color-bg-base);
+    transition:
+      grid-template-columns var(--duration-slow) var(--ease-in-out);
+  }
+
+  /* On mobile the sidebar floats as a fixed overlay: collapse its grid lane. */
+  @media (max-width: 767px) {
+    .shell-root {
+      grid-template-columns: 0 1fr;
+    }
+  }
+
+  /* --------------------------------------------------------------------------
+     1a. Mobile backdrop scrim
+  -------------------------------------------------------------------------- */
+
+  .shell-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: var(--color-overlay-scrim);
+    /* Sit just below the sidebar so it does not intercept sidebar clicks. */
+    z-index: calc(var(--z-sidebar) - 1);
+    /* Opacity transition is preserved under prefers-reduced-motion per
+       globals.css rules (opacity-only fades are kept at 80ms). */
+    opacity: 1;
+    transition:
+      opacity var(--duration-normal) var(--ease-out);
+  }
+
+  /* --------------------------------------------------------------------------
+     1b. Main column: stacks topbar above scrollable content
+  -------------------------------------------------------------------------- */
+
+  .shell-main {
+    display: flex;
+    flex-direction: column;
+    min-height: 100dvh;
+    /* Clip overflowing page content: only shell-content scrolls. */
+    overflow: hidden;
+    background-color: var(--color-bg-base);
+  }
+
+  /* --------------------------------------------------------------------------
+     1c. Content area: the scrollable page canvas
+  -------------------------------------------------------------------------- */
+
+  .shell-content {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    /* Padding gives page components breathing room without each page
+       having to declare its own edge spacing. */
+    padding: var(--spacing-page-edge);
+    /* Max width prevents very long lines on ultra-wide viewports. */
+    max-width: 1440px;
+    width: 100%;
+    /* Remove default outline: focus is managed programmatically via
+       AppShell route-change effect; the element receives tabIndex=-1. */
+    outline: none;
+    scroll-behavior: auto;
+  }
+
+  /* ==========================================================================
+     2. SIDEBAR
+     ==========================================================================
+     The sidebar is a flex column occupying the left grid lane on desktop.
+     On mobile it is a fixed overlay drawer that slides in from the left.
+     Width transitions are handled by the shell-root grid column, NOT by the
+     sidebar element itself. The sidebar only transitions label opacity and
+     max-width (see comment in Sidebar.tsx for the max-width exception rationale).
+  ========================================================================== */
+
+  .sidebar {
+    /* Desktop: fixed height, flex column, fills the grid lane vertically. */
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
+    position: sticky;
+    top: 0;
+    /* Overflow hidden prevents label text from peeking out during collapse. */
+    overflow: hidden;
+    background-color: var(--color-bg-overlay);
+    border-right: 1px solid var(--color-border-default);
+    z-index: var(--z-sidebar);
+    /* Width is driven by the shell-root grid column, no explicit width here.
+       We do set a min-width so the icon column never shrinks below collapsed size. */
+    min-width: var(--spacing-sidebar-w-col);
+    box-shadow: var(--shadow-1);
+    transition:
+      background-color var(--duration-normal) var(--ease-in-out),
+      border-color var(--duration-normal) var(--ease-in-out);
+  }
+
+  /* --------------------------------------------------------------------------
+     Mobile: position:fixed off-screen by default; slide in when open.
+  -------------------------------------------------------------------------- */
+
+  @media (max-width: 767px) {
+    .sidebar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      height: 100dvh;
+      width: var(--spacing-sidebar-w);
+      transform: translateX(-100%);
+      transition:
+        transform var(--duration-slow) var(--ease-in-out),
+        background-color var(--duration-normal) var(--ease-in-out);
+    }
+
+    .sidebar--mobile-open {
+      transform: translateX(0);
+    }
+  }
+
+  /* ==========================================================================
+     2a. Sidebar header (logo + wordmark + collapse button)
+  ========================================================================== */
+
+  .sidebar-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-4);
+    height: var(--spacing-topbar-h);
+    border-bottom: 1px solid var(--color-border-default);
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+
+  /* Logo mark: the square brand icon always visible. */
+  .sidebar-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .sidebar-logo-mark {
+    display: block;
+    width: var(--space-8);
+    height: var(--space-8);
+    border-radius: var(--radius-sm);
+    background-color: var(--color-accent);
+    /* Fallback visual when no brand image is provided. */
+    background-image: none;
+  }
+
+  /* Wordmark: the text name next to the logo mark. */
+  .sidebar-wordmark {
+    font-size: var(--type-small);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
+    letter-spacing: var(--type-h4-ls);
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    /* Collapse animation: opacity + max-width so it gracefully disappears
+       without leaving a gap. Transition is on opacity + max-width per the
+       exception documented in Sidebar.tsx. */
+    max-width: 200px;
+    opacity: 1;
+    will-change: max-width;
+    transition:
+      opacity var(--duration-normal) var(--ease-in-out),
+      max-width var(--duration-slow) var(--ease-in-out);
+  }
+
+  .sidebar--collapsed .sidebar-wordmark {
+    opacity: 0;
+    max-width: 0;
+    pointer-events: none;
+  }
+
+  /* Collapse button: shows a chevron, desktop-only. */
+  .sidebar-collapse-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--space-7);
+    height: var(--space-7);
+    border-radius: var(--radius-default);
+    border: none;
+    background-color: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    margin-left: auto;
+    transition:
+      background-color var(--duration-normal) var(--ease-in-out),
+      color var(--duration-fast) var(--ease-in-out);
+  }
+
+  .sidebar-collapse-btn:hover {
+    background-color: var(--color-bg-raised);
+    color: var(--color-text-primary);
+  }
+
+  .sidebar-collapse-btn:active {
+    background-color: var(--color-bg-highlight);
+  }
+
+  .sidebar-collapse-btn:focus-visible {
+    outline: 2px solid var(--color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* Mobile: hide the collapse button (mobile uses sidebar-mobile-close-btn). */
+  @media (max-width: 767px) {
+    .sidebar-collapse-btn {
+      display: none;
+    }
+  }
+
+  /* Chevron icon inside the collapse button. Rotates when sidebar is collapsed. */
+  .sidebar-collapse-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      transform var(--duration-slow) var(--ease-in-out);
+  }
+
+  .sidebar-collapse-icon--flipped {
+    transform: rotate(180deg);
+  }
+
+  /* Mobile close button: visible only on mobile, hidden on desktop. */
+  .sidebar-mobile-close-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--space-8);
+    height: var(--space-8);
+    border-radius: var(--radius-default);
+    border: none;
+    background-color: transparent;
+    color: var(--color-text-muted);
+    font-size: var(--type-h3);
+    cursor: pointer;
+    margin-left: auto;
+    transition:
+      background-color var(--duration-normal) var(--ease-in-out),
+      color var(--duration-fast) var(--ease-in-out);
+  }
+
+  .sidebar-mobile-close-btn:hover {
+    background-color: var(--color-bg-raised);
+    color: var(--color-text-primary);
+  }
+
+  .sidebar-mobile-close-btn:active {
+    background-color: var(--color-bg-highlight);
+  }
+
+  .sidebar-mobile-close-btn:focus-visible {
+    outline: 2px solid var(--color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  @media (max-width: 767px) {
+    .sidebar-mobile-close-btn {
+      display: flex;
+    }
+
+    /* On mobile, collapse button is already hidden; keep close visible. */
+    .sidebar-collapse-btn {
+      display: none;
+    }
+  }
+
+  /* ==========================================================================
+     2b. Sidebar navigation
+  ========================================================================== */
+
+  .sidebar-nav {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(--space-3) 0;
+    /* Thin scrollbar track to avoid obscuring nav content. */
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border-default) transparent;
+  }
+
+  .sidebar-nav::-webkit-scrollbar {
+    width: var(--space-1);
+  }
+
+  .sidebar-nav::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .sidebar-nav::-webkit-scrollbar-thumb {
+    background-color: var(--color-border-default);
+    border-radius: var(--radius-pill);
+  }
+
+  /* Section: a named group of nav items. */
+  .sidebar-section {
+    margin-bottom: var(--space-2);
+  }
+
+  /* Section heading: "Account", "Support" etc.
+     Hidden by collapsing opacity + max-height when sidebar is collapsed. */
+  .sidebar-section-heading {
+    margin: 0;
+    padding: var(--space-2) var(--space-4) var(--space-1);
+    font-size: var(--type-caption);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-muted);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    overflow: hidden;
+    max-height: 32px;
+    opacity: 1;
+    will-change: max-height, padding;
+    transition:
+      opacity var(--duration-normal) var(--ease-in-out),
+      max-height var(--duration-slow) var(--ease-in-out),
+      padding var(--duration-slow) var(--ease-in-out);
+  }
+
+  .sidebar--collapsed .sidebar-section-heading {
+    opacity: 0;
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    pointer-events: none;
+  }
+
+  /* List: reset list styles. */
+  .sidebar-section-list {
+    list-style: none;
+    margin: 0;
+    padding: 0 var(--space-2);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-px);
+  }
+
+  /* ==========================================================================
+     2c. Nav item (sidebar-nav-item, active modifier)
+  ========================================================================== */
+
+  .sidebar-nav-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    height: var(--space-10);
+    border-radius: var(--radius-default);
+    color: var(--color-text-secondary);
+    text-decoration: none;
+    font-size: var(--type-small);
+    font-weight: var(--font-weight-medium);
+    white-space: nowrap;
+    overflow: hidden;
+    position: relative;
+    /* Left accent line for active state: rendered via box-shadow so it
+       stays inside the border-radius without a pseudo-element. */
+    transition:
+      background-color var(--duration-normal) var(--ease-in-out),
+      color var(--duration-fast) var(--ease-in-out),
+      box-shadow var(--duration-fast) var(--ease-in-out);
+  }
+
+  .sidebar-nav-item:hover {
+    background-color: var(--color-bg-raised);
+    color: var(--color-text-primary);
+  }
+
+  .sidebar-nav-item:active {
+    background-color: var(--color-bg-highlight);
+  }
+
+  .sidebar-nav-item:focus-visible {
+    outline: 2px solid var(--color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* Active state: tinted bg + accent text + left border via inset box-shadow. */
+  .sidebar-nav-item--active {
+    background-color: var(--color-bg-highlight);
+    color: var(--color-text-accent);
+    /* 3px inset left-side accent stripe. */
+    box-shadow: inset 3px 0 0 var(--color-accent);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .sidebar-nav-item--active:hover {
+    background-color: var(--color-bg-highlight);
+    color: var(--color-text-accent);
+  }
+
+  /* When collapsed, center the icon by removing left padding gap. */
+  .sidebar--collapsed .sidebar-nav-item {
+    justify-content: center;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  /* ==========================================================================
+     2d. Nav item sub-elements: icon, label, badge
+  ========================================================================== */
+
+  .sidebar-nav-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--space-5);
+    height: var(--space-5);
+    color: inherit;
+  }
+
+  .sidebar-nav-label {
+    flex: 1 1 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 200px;
+    opacity: 1;
+    will-change: max-width;
+    transition:
+      opacity var(--duration-normal) var(--ease-in-out),
+      max-width var(--duration-slow) var(--ease-in-out);
+  }
+
+  /* Hidden label state: collapsed sidebar. */
+  .sidebar-nav-label--hidden,
+  .sidebar--collapsed .sidebar-nav-label {
+    opacity: 0;
+    max-width: 0;
+    pointer-events: none;
+  }
+
+  /* Badge: numeric count on nav items. */
+  .sidebar-nav-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--space-5);
+    height: var(--space-5);
+    padding: 0 var(--space-1);
+    border-radius: var(--radius-pill);
+    background-color: var(--color-accent);
+    color: var(--color-text-inverse);
+    font-size: var(--type-caption);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: var(--type-caption-ls);
+    line-height: 1;
+    flex-shrink: 0;
+    transition:
+      background-color var(--duration-fast) var(--ease-in-out),
+      transform var(--duration-fast) var(--ease-spring);
+  }
+
+  /* Collapsed badge: dot indicator only (no number). */
+  .sidebar-nav-badge-dot {
+    position: absolute;
+    top: var(--space-2);
+    right: var(--space-2);
+    width: var(--space-2);
+    height: var(--space-2);
+    border-radius: var(--radius-circle);
+    background-color: var(--color-accent);
+    flex-shrink: 0;
+  }
+
+  /* ==========================================================================
+     2e. Sidebar footer: user identity block
+  ========================================================================== */
+
+  .sidebar-footer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-3);
+    border-top: 1px solid var(--color-border-default);
+    flex-shrink: 0;
+  }
+
+  .sidebar-user {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-1);
+    border-radius: var(--radius-default);
+    overflow: hidden;
+  }
+
+  /* Avatar circle: shared base for both expanded and collapsed variants. */
+  .sidebar-user-avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--space-8);
+    height: var(--space-8);
+    border-radius: var(--radius-circle);
+    background-color: var(--color-accent-subtle);
+    border: 1px solid var(--color-border-accent);
+    cursor: default;
+  }
+
+  /* Collapsed avatar: centered standalone, adds a title tooltip in HTML. */
+  .sidebar-user-avatar--collapsed {
+    margin: 0 auto;
+  }
+
+  .sidebar-user-initials {
+    font-size: var(--type-caption);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-accent);
+    letter-spacing: 0.04em;
+    line-height: 1;
+  }
+
+  .sidebar-user-info {
+    flex: 1 1 auto;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-px);
+  }
+
+  .sidebar-user-name {
+    margin: 0;
+    font-size: var(--type-small);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: var(--type-small-lh);
+  }
+
+  .sidebar-user-email {
+    margin: 0;
+    font-size: var(--type-caption);
+    color: var(--color-text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: var(--type-caption-lh);
+  }
+
+  /* ==========================================================================
+     3. TOPBAR
+     ==========================================================================
+     Sticky horizontal bar across the top of the main column. Uses
+     backdrop-filter blur for the frosted-glass effect as content scrolls
+     beneath it. Height is driven by --spacing-topbar-h (48px).
+  ========================================================================== */
+
+  .topbar {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-topbar);
+    height: var(--spacing-topbar-h);
+    background-color: color-mix(in srgb, var(--color-bg-overlay) 85%, transparent);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border-bottom: 1px solid var(--color-border-default);
+    flex-shrink: 0;
+    transition:
+      background-color var(--duration-normal) var(--ease-in-out),
+      border-color var(--duration-normal) var(--ease-in-out);
+  }
+
+  /* Inner layout: left slot + right slot, full height flex row. */
+  .topbar-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0 var(--space-4);
+    gap: var(--space-3);
+  }
+
+  /* Left slot: sidebar trigger + breadcrumb. */
+  .topbar-left {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  /* Right slot: search, notifications, user menu. */
+  .topbar-right {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-shrink: 0;
+  }
+
+  /* --------------------------------------------------------------------------
+     3a. Topbar icon button (shared base for hamburger, notifications, etc.)
+  -------------------------------------------------------------------------- */
+
+  .topbar-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--space-9);
+    height: var(--space-9);
+    border-radius: var(--radius-default);
+    border: none;
+    background-color: transparent;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    transition:
+      background-color var(--duration-normal) var(--ease-in-out),
+      color var(--duration-fast) var(--ease-in-out);
+  }
+
+  .topbar-icon-btn:hover {
+    background-color: var(--color-bg-raised);
+    color: var(--color-text-primary);
+  }
+
+  .topbar-icon-btn:active {
+    background-color: var(--color-bg-highlight);
+  }
+
+  .topbar-icon-btn:focus-visible {
+    outline: 2px solid var(--color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* Position-relative variant: used for notification bell so the badge
+     can be positioned absolutely relative to the button. */
+  .topbar-icon-btn--relative {
+    position: relative;
+  }
+
+  /* --------------------------------------------------------------------------
+     3b. Search button
+  -------------------------------------------------------------------------- */
+
+  .topbar-search-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    height: var(--space-9);
+    padding: 0 var(--space-3);
+    border-radius: var(--radius-default);
+    border: 1px solid var(--color-border-default);
+    background-color: var(--color-bg-sunken);
+    color: var(--color-text-muted);
+    font-size: var(--type-small);
+    cursor: pointer;
+    transition:
+      background-color var(--duration-normal) var(--ease-in-out),
+      border-color var(--duration-normal) var(--ease-in-out),
+      color var(--duration-fast) var(--ease-in-out);
+  }
+
+  .topbar-search-btn:hover {
+    background-color: var(--color-bg-raised);
+    border-color: var(--color-border-emphasis);
+    color: var(--color-text-secondary);
+  }
+
+  .topbar-search-btn:focus-visible {
+    outline: 2px solid var(--color-focus-ring);
+    outline-offset: 2px;
+    border-color: var(--color-border-accent);
+  }
+
+  .topbar-search-icon {
+    flex-shrink: 0;
+    color: var(--color-text-muted);
+  }
+
+  .topbar-search-label {
+    white-space: nowrap;
+  }
+
+  /* Keyboard shortcut hint: hidden on mobile. */
+  .topbar-search-kbd {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: 2px var(--space-1);
+    border-radius: var(--radius-sharp);
+    border: 1px solid var(--color-border-emphasis);
+    background-color: var(--color-bg-raised);
+    font-family: var(--font-mono);
+    font-size: var(--type-caption);
+    color: var(--color-text-muted);
+    line-height: 1;
+  }
+
+  @media (max-width: 767px) {
+    .topbar-search-label,
+    .topbar-search-kbd {
+      display: none;
+    }
+
+    .topbar-search-btn {
+      width: var(--space-9);
+      padding: 0;
+      justify-content: center;
+      border: none;
+      background-color: transparent;
+    }
+  }
+
+  /* --------------------------------------------------------------------------
+     3c. Notification badge
+  -------------------------------------------------------------------------- */
+
+  .topbar-notif-badge {
+    position: absolute;
+    top: var(--space-1);
+    right: var(--space-1);
+    min-width: var(--space-4);
+    height: var(--space-4);
+    padding: 0 var(--space-1);
+    border-radius: var(--radius-pill);
+    background-color: var(--color-danger);
+    color: var(--color-neutral-0);
+    font-size: var(--type-caption);
+    font-weight: var(--font-weight-bold);
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  /* --------------------------------------------------------------------------
+     3d. User menu trigger
+  -------------------------------------------------------------------------- */
+
+  .topbar-user-menu {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .topbar-user-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    height: var(--space-9);
+    padding: 0 var(--space-2);
+    border-radius: var(--radius-default);
+    border: none;
+    background-color: transparent;
+    color: var(--color-text-secondary);
+    font-size: var(--type-small);
+    font-weight: var(--font-weight-medium);
+    cursor: pointer;
+    transition:
+      background-color var(--duration-normal) var(--ease-in-out),
+      color var(--duration-fast) var(--ease-in-out);
+  }
+
+  .topbar-user-trigger:hover {
+    background-color: var(--color-bg-raised);
+    color: var(--color-text-primary);
+  }
+
+  .topbar-user-trigger:active {
+    background-color: var(--color-bg-highlight);
+  }
+
+  .topbar-user-trigger:focus-visible {
+    outline: 2px solid var(--color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* Avatar circle in the topbar. */
+  .topbar-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--space-8);
+    height: var(--space-8);
+    border-radius: var(--radius-circle);
+    background-color: var(--color-accent-subtle);
+    border: 1px solid var(--color-border-accent);
+    font-size: var(--type-caption);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-accent);
+    letter-spacing: 0.04em;
+    line-height: 1;
+  }
+
+  /* User display name: hidden on mobile. */
+  .topbar-user-name {
+    white-space: nowrap;
+  }
+
+  @media (max-width: 767px) {
+    .topbar-user-name {
+      display: none;
+    }
+  }
+
+  /* Chevron caret: rotates when the menu is open. */
+  .topbar-chevron {
+    flex-shrink: 0;
+    color: var(--color-text-muted);
+    transition:
+      transform var(--duration-normal) var(--ease-in-out),
+      color var(--duration-fast) var(--ease-in-out);
+  }
+
+  .topbar-chevron--open {
+    transform: rotate(180deg);
+    color: var(--color-text-primary);
+  }
+
+  @media (max-width: 767px) {
+    .topbar-chevron {
+      display: none;
+    }
+  }
+
+  /* --------------------------------------------------------------------------
+     3e. User dropdown menu
+  -------------------------------------------------------------------------- */
+
+  .topbar-dropdown {
+    position: absolute;
+    top: calc(100% + var(--space-1));
+    right: 0;
+    min-width: 180px;
+    background-color: var(--color-bg-overlay);
+    border: 1px solid var(--color-border-emphasis);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-2);
+    padding: var(--space-1) var(--space-1);
+    z-index: var(--z-dropdown);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-px);
+  }
+
+  .topbar-dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-default);
+    font-size: var(--type-small);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-secondary);
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      background-color var(--duration-normal) var(--ease-in-out),
+      color var(--duration-fast) var(--ease-in-out);
+  }
+
+  .topbar-dropdown-item:hover {
+    background-color: var(--color-bg-raised);
+    color: var(--color-text-primary);
+  }
+
+  .topbar-dropdown-item:active {
+    background-color: var(--color-bg-highlight);
+  }
+
+  .topbar-dropdown-item:focus-visible {
+    outline: 2px solid var(--color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* Destructive item (Sign out): danger color. */
+  .topbar-dropdown-item--destructive {
+    color: var(--color-danger);
+  }
+
+  .topbar-dropdown-item--destructive:hover {
+    background-color: var(--color-danger-subtle);
+    color: var(--color-danger);
+  }
+
+  /* ==========================================================================
+     4. BREADCRUMB
+  ========================================================================== */
+
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .breadcrumb-list {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .breadcrumb-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+
+  /* Last breadcrumb: can shrink to show full preceding path. */
+  .breadcrumb-item--current {
+    overflow: hidden;
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  /* Middle breadcrumbs: hidden on very narrow viewports. */
+  .breadcrumb-item--middle {
+    display: flex;
+  }
+
+  @media (max-width: 479px) {
+    .breadcrumb-item--middle {
+      display: none;
+    }
+  }
+
+  .breadcrumb-link {
+    font-size: var(--type-small);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-muted);
+    text-decoration: none;
+    border-radius: var(--radius-sm);
+    padding: var(--space-px) var(--space-1);
+    transition:
+      color var(--duration-fast) var(--ease-in-out),
+      background-color var(--duration-normal) var(--ease-in-out);
+  }
+
+  .breadcrumb-link:hover {
+    color: var(--color-text-primary);
+    background-color: var(--color-bg-raised);
+  }
+
+  .breadcrumb-link:focus-visible {
+    outline: 2px solid var(--color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .breadcrumb-current {
+    font-size: var(--type-small);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: var(--space-px) var(--space-1);
+    display: block;
+  }
+
+  .breadcrumb-separator {
+    color: var(--color-text-muted);
+    font-size: var(--type-caption);
+    user-select: none;
+    flex-shrink: 0;
+  }
+
+  /* ==========================================================================
+     5. THEME TOGGLE
+     ==========================================================================
+     Both Sun and Moon icons are always in the DOM; the active icon has
+     opacity:1 (set inline by the component) and the inactive one has
+     opacity:0. This produces a cross-fade without layout shift.
+  ========================================================================== */
+
+  .theme-toggle {
+    /* Inherits topbar-icon-btn layout and interaction styles.
+       Additional override: relative positioning for the overlay icon. */
+    position: relative;
+  }
+
+  /* Base icon: stacks at its natural flow position. */
+  .theme-toggle-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* Only opacity is transitioned, no transform. */
+    transition:
+      opacity var(--duration-normal) var(--ease-in-out);
+  }
+
+  /* Overlay icon: absolute, stacked exactly over the base icon. */
+  .theme-toggle-icon--overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      opacity var(--duration-normal) var(--ease-in-out);
+  }
+
+} /* end @layer shell */