/*
Sidebar

<div class="sidebar-wrapper" data-state="expanded|collapsed" data-mobile>   SidebarProvider: flex row
  <div class="sidebar" data-mode data-side data-variant data-state>          in flow; its width is the gap
    <div class="sidebar-container">                                         absolute, full height; slides off
      <div class="sidebar-inner">                                           the colored panel
        .sidebar-header / .sidebar-content / .sidebar-footer
      <button class="sidebar-rail">
  <main class="sidebar-inset">                                              SidebarInset

Collapsing is driven from the wrapper's data-state, which the server
renders from open, so the first paint is already right. Icon mode rules
read  :where(.sidebar-wrapper[data-state="collapsed"]) .sidebar[data-mode="icon"].

Under the provider's mobileBreakpoint the desktop sidebar is hidden and
the same content renders in a Sheet. The provider measures the
breakpoint and marks the wrapper [data-mobile] (and [data-measured]);
before that, on the server's first paint, the default 768px breakpoint
is the 48rem media query and any other breakpoint paints the desktop
layout.
*/

@layer components {

.sidebar-wrapper {
  --sidebar-w:          var(--sidebar-width, var(--space-64));
  --sidebar-w-icon:     var(--sidebar-width-icon, calc(var(--control-height-sm) + 2 * var(--space-2)));
  --sidebar-w-mobile:   var(--sidebar-width-mobile, calc(var(--sidebar-w) + var(--space-8)));
  --sidebar-h:          var(--sidebar-height, 100svh);
  /* Colors: the contract's --sidebar-bg, -ink, -accent, -accent-ink and
     -border. A class may set the shorter --sidebar, --sidebar-foreground
     and --sidebar-accent-foreground names, which win over the theme. */
  --sb-bg:          var(--sidebar, var(--sidebar-bg));
  --sb-ink:         var(--sidebar-foreground, var(--sidebar-ink));
  --sb-accent:      var(--sidebar-accent);
  --sb-accent-ink:  var(--sidebar-accent-foreground, var(--sidebar-accent-ink));
  --sb-border:      var(--sidebar-border);
  --sb-primary:     var(--sidebar-primary, var(--accent));
  --sb-primary-ink: var(--sidebar-primary-foreground, var(--accent-ink));
  --sb-ring:        var(--sidebar-ring, var(--focus));
  --sidebar-ease:       var(--duration-normal) var(--ease-linear);
  --sidebar-inset-gap:    var(--space-2);
  --sidebar-inset-radius: var(--radius-surface);
  --sidebar-inset-shadow: var(--surface-shadow);

  display:    flex;
  width:      100%;
  min-height: var(--sidebar-h);
  overflow:   clip;
}

.sidebar-wrapper:has(> .sidebar[data-variant="inset"]) {
  background: var(--sb-bg);
}

/* Desktop Sidebar */

.sidebar {
  position:   sticky;
  top:        0;
  z-index:    var(--z-raised);   /* sticky is a stacking context: keep the rail above the inset */
  align-self: flex-start;
  flex:       none;
  width:      var(--sidebar-w);
  height:     var(--sidebar-h);
  color:      var(--sb-ink);
  transition: width var(--sidebar-ease);
}

/* side is physical (shadcn): left or right of the screen in either
   direction. Order puts it there whatever the DOM order and dir are. */
.sidebar[data-side="left"]  { order: -1; }
.sidebar[data-side="right"] { order: 1; }
.sidebar[data-side="left"]:dir(rtl)  { order: 1; }
.sidebar[data-side="right"]:dir(rtl) { order: -1; }

.sidebar-container {
  position:   absolute;
  inset-block: 0;
  left:       0;
  z-index:    var(--z-raised);
  display:    flex;
  width:      var(--sidebar-w);
  height:     100%;
  transition: left var(--sidebar-ease), right var(--sidebar-ease), width var(--sidebar-ease);
}

.sidebar[data-side="right"] > .sidebar-container {
  left:  auto;
  right: 0;
}

.sidebar[data-variant="sidebar"][data-side="left"] > .sidebar-container {
  border-right: var(--surface-border-width) solid var(--sb-border);
}

.sidebar[data-variant="sidebar"][data-side="right"] > .sidebar-container {
  border-left: var(--surface-border-width) solid var(--sb-border);
}

.sidebar[data-variant="floating"] > .sidebar-container,
.sidebar[data-variant="inset"] > .sidebar-container {
  padding: var(--space-2);
}

.sidebar-inner {
  display:        flex;
  flex-direction: column;
  width:          100%;
  height:         100%;
  min-width:      0;
  background:     var(--sb-bg);
}

.sidebar[data-variant="floating"] .sidebar-inner {
  border:        var(--surface-border-width) solid var(--sb-border);
  border-radius: var(--radius-surface);
  box-shadow:    var(--shadow-sm);
}

/* Collapsed: offcanvas slides the panel out and the gap closes. */
:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="offcanvas"] {
  width: 0;
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="offcanvas"][data-side="left"] > .sidebar-container {
  left: calc(-1 * var(--sidebar-w));
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="offcanvas"][data-side="right"] > .sidebar-container {
  right: calc(-1 * var(--sidebar-w));
}

/* Off the canvas, the panel's controls leave the tab order and the
   accessibility tree once the slide ends (visibility, delayed by the
   slide). The rail stays, so a pointer can still bring it back. */
.sidebar-inner {
  transition: visibility 0s;
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="offcanvas"] .sidebar-inner {
  visibility: hidden;
  transition: visibility 0s linear var(--duration-normal);
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="offcanvas"] .sidebar-rail {
  visibility: visible;
}

/* Collapsed: icon narrows to a rail of icon buttons. */
:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="icon"],
:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="icon"] > .sidebar-container {
  width: var(--sidebar-w-icon);
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="icon"]:is([data-variant="floating"], [data-variant="inset"]) {
  width: calc(var(--sidebar-w-icon) + var(--space-4));
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="icon"]:is([data-variant="floating"], [data-variant="inset"]) > .sidebar-container {
  width: calc(var(--sidebar-w-icon) + var(--space-4) + 2 * var(--surface-border-width));
}

/* Not collapsible: a plain column. */
.sidebar[data-mode="none"] {
  position: relative;
  height:   auto;
  align-self: stretch;
}

.sidebar[data-mode="none"] > .sidebar-container {
  position: relative;
}

/* Phone: the sheet replaces the panel, and an inset page is not a card. */
.sidebar-wrapper[data-mobile] {
  --sidebar-inset-gap:    0px;
  --sidebar-inset-radius: 0px;
  --sidebar-inset-shadow: none;
}

.sidebar-wrapper[data-mobile] > .sidebar:not([data-mode="none"]) {
  display: none;
}

@media (max-width: 47.99rem) {
  .sidebar-wrapper[data-breakpoint="768"]:not([data-measured]) {
    --sidebar-inset-gap:    0px;
    --sidebar-inset-radius: 0px;
    --sidebar-inset-shadow: none;
  }

  .sidebar-wrapper[data-breakpoint="768"]:not([data-measured]) > .sidebar:not([data-mode="none"]) {
    display: none;
  }
}

/* Phone Sheet */

.dialog.sheet.sidebar-sheet {
  --sheet-width: var(--sidebar-w-mobile);
  width:      var(--sidebar-w-mobile);
  max-width:  calc(100vw - var(--space-12));
  padding:    0;
  gap:        0;
  background: var(--sb-bg);
  color:      var(--sb-ink);
}

.sidebar-sheet > .sheet-header,
.sidebar-sheet > .dialog-header {
  position:    absolute;
  width:       1px;
  height:      1px;
  overflow:    hidden;
  clip-path:   inset(50%);
  white-space: nowrap;
}

.sidebar-sheet-inner {
  display:        flex;
  flex-direction: column;
  width:          100%;
  height:         100%;
  min-height:     0;
}

/* Rail */

.sidebar-rail {
  position:   absolute;
  inset-block: 0;
  z-index:    1;
  display:    flex;
  width:      var(--space-4);
  padding:    0;
  border:     0;
  background: none;
  transform:  translateX(-50%);
  transition: transform var(--sidebar-ease);
  cursor:     w-resize;
}

.sidebar[data-side="left"] .sidebar-rail {
  right: calc(-1 * var(--space-4));
}

.sidebar[data-side="right"] .sidebar-rail {
  left:   0;
  cursor: e-resize;
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-side="left"] .sidebar-rail {
  cursor: e-resize;
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-side="right"] .sidebar-rail {
  cursor: w-resize;
}

.sidebar-rail::after {
  content:    "";
  position:   absolute;
  inset-block: 0;
  left:       50%;
  width:      calc(2 * var(--surface-border-width));
  transition: background-color var(--duration-fast) var(--ease-out);
}

.sidebar-rail:hover::after {
  background: var(--sb-border);
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="offcanvas"] .sidebar-rail {
  transform: translateX(0);
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="offcanvas"] .sidebar-rail::after {
  left: 100%;
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="offcanvas"][data-side="right"] .sidebar-rail {
  left: calc(-1 * var(--space-4));
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="offcanvas"][data-side="right"] .sidebar-rail::after {
  left: 0;
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="offcanvas"] .sidebar-rail:hover {
  background: var(--sb-bg);
}

@media (max-width: 40rem) {
  .sidebar-rail {
    display: none;
  }
}

/* Inset */

.sidebar-inset {
  position:       relative;
  display:        flex;
  flex:           1 1 0;
  flex-direction: column;
  min-width:      0;
  background:     var(--bg);
}

.sidebar[data-variant="inset"] ~ .sidebar-inset {
  margin:        var(--sidebar-inset-gap);
  margin-left:   0;
  border-radius: var(--sidebar-inset-radius);
  box-shadow:    var(--sidebar-inset-shadow);
}

.sidebar[data-variant="inset"][data-side="right"] ~ .sidebar-inset {
  margin-left:  var(--sidebar-inset-gap);
  margin-right: 0;
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-variant="inset"] ~ .sidebar-inset {
  margin-left:  var(--sidebar-inset-gap);
  margin-right: var(--sidebar-inset-gap);
}

/* Sections */

.sidebar-header,
.sidebar-footer {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  padding:        var(--space-2);
}

.sidebar-content {
  display:        flex;
  flex:           1 1 0;
  flex-direction: column;
  gap:            var(--space-2);
  min-height:     0;
  overflow:       auto;
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="icon"] .sidebar-content {
  overflow: hidden;
}

.sidebar-separator {
  flex:       none;
  height:     var(--surface-border-width);
  margin:     0 var(--space-2);
  border:     0;
  background: var(--sb-border);
}

.sidebar-input.input,
.sidebar-input {
  width:      100%;
  height:     var(--control-height-sm);
  background: var(--bg);
  box-shadow: none;
}

/* Groups */

.sidebar-group {
  position:       relative;
  display:        flex;
  flex-direction: column;
  width:          100%;
  min-width:      0;
  padding:        var(--space-2);
}

.sidebar-group-label {
  display:        flex;
  flex:           none;
  align-items:    center;
  justify-content: flex-start;
  gap:            var(--space-2);
  width:          100%;
  height:         var(--control-height-sm);
  padding:        0 var(--space-2);
  border:         0;
  border-radius:  var(--radius-item);
  background:     none;
  font-family:    var(--font-ui);
  font-size:      var(--text-caption);
  font-weight:    var(--weight-ui);
  color:          var(--ink-dim);
  text-align:     start;
  outline:        none;
  transition:     margin var(--sidebar-ease), opacity var(--sidebar-ease);
}

.sidebar-group-label .icon {
  width:  var(--icon-size);
  height: var(--icon-size);
  flex:   none;
}

button.sidebar-group-label:hover {
  background: var(--sb-accent);
  color:      var(--sb-accent-ink);
}

.sidebar-group-label:focus-visible {
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--sb-ring);
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="icon"] .sidebar-group-label {
  margin-top: calc(-1 * var(--control-height-sm));
  opacity:    0;
}

.sidebar-group-action,
.sidebar-menu-action {
  position:        absolute;
  display:         grid;
  place-items:     center;
  width:           var(--space-5);
  height:          var(--space-5);
  padding:         0;
  border:          0;
  border-radius:   var(--radius-item);
  background:      none;
  color:           var(--sb-ink);
  cursor:          pointer;
  outline:         none;
  transition:      background-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.sidebar-group-action {
  top:              var(--space-3-5);
  inset-inline-end: var(--space-3);
}

.sidebar-group-action .icon,
.sidebar-menu-action .icon {
  width:  var(--icon-size);
  height: var(--icon-size);
}

/* A bigger hit area on touch screens. */
.sidebar-group-action::after,
.sidebar-menu-action::after {
  content:  "";
  position: absolute;
  inset:    calc(-1 * var(--space-2));
}

@media (min-width: 48rem) {
  .sidebar-group-action::after,
  .sidebar-menu-action::after {
    display: none;
  }
}

.sidebar-group-action:hover,
.sidebar-menu-action:hover {
  background: var(--sb-accent);
  color:      var(--sb-accent-ink);
}

.sidebar-group-action:focus-visible,
.sidebar-menu-action:focus-visible {
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--sb-ring);
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="icon"] :is(.sidebar-group-action, .sidebar-menu-action, .sidebar-menu-badge, .sidebar-menu-sub) {
  display: none;
}

.sidebar-group-content {
  width:     100%;
  font-size: var(--text-ui);
}

/* Menu */

.sidebar-menu,
.sidebar-menu-sub {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  min-width:      0;
  margin:         0;
  padding:        0;
  list-style:     none;
}

.sidebar-menu-item,
.sidebar-menu-sub-item {
  position: relative;
}

.sidebar-menu-button,
.sidebar-menu-sub-button {
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  gap:             var(--space-2);
  width:           100%;
  min-width:       0;
  overflow:        hidden;
  border:          0;
  border-radius:   var(--radius-item);
  background:      none;
  color:           var(--sb-ink);
  font-family:     var(--font-ui);
  font-weight:     var(--weight-body);
  text-align:      start;
  text-decoration: none;
  outline:         none;
  cursor:          pointer;
  transition:      background-color var(--duration-fast) var(--ease-out), width var(--sidebar-ease), height var(--sidebar-ease), padding var(--sidebar-ease);
}

.sidebar-menu-button {
  height:    var(--item-height);
  padding:   var(--space-2);
  font-size: var(--text-ui);
}

.sidebar-menu-button.is-sm {
  height:    calc(var(--item-height) - var(--space-1));
  font-size: var(--text-ui-sm);
}

.sidebar-menu-button.is-lg {
  height: var(--control-height-lg);
}

.sidebar-menu-button .icon,
.sidebar-menu-sub-button .icon {
  flex:   none;
  width:  var(--icon-size);
  height: var(--icon-size);
}

.sidebar-menu-button > span:last-child,
.sidebar-menu-sub-button > span:last-child {
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
}

.sidebar-menu-button:hover,
.sidebar-menu-sub-button:hover,
.sidebar-menu-button[data-state="open"]:hover {
  background: var(--sb-accent);
  color:      var(--sb-accent-ink);
}

/* A row or an action whose DropdownMenu is open (shadcn
   data-[state=open]:bg-sidebar-accent). Collapsible rows also carry
   data-state="open", so only a menu trigger is matched. */
.sidebar-menu-button[aria-haspopup="menu"][data-state="open"],
.sidebar-menu-action[aria-haspopup="menu"][data-state="open"],
.sidebar-group-action[aria-haspopup="menu"][data-state="open"],
.sidebar-menu-button[data-active],
.sidebar-menu-sub-button[data-active] {
  background: var(--sb-accent);
  color:      var(--sb-accent-ink);
}

.sidebar-menu-button:focus-visible,
.sidebar-menu-sub-button:focus-visible {
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--sb-ring);
}

.sidebar-menu-button[aria-disabled="true"],
.sidebar-menu-sub-button[aria-disabled="true"] {
  opacity:        var(--opacity-disabled);
  pointer-events: none;
}

/* A disabled button already ignores clicks; it keeps hit testing so it
   still swallows a press instead of passing it to the row behind. */
.sidebar-menu-button:disabled,
.sidebar-menu-button:disabled:hover {
  opacity:    var(--opacity-disabled);
  background: none;
  color:      var(--sb-ink);
  cursor:     not-allowed;
}

.sidebar-menu-button.is-outline {
  background: var(--bg);
  box-shadow: 0 0 0 var(--surface-border-width) var(--sb-border);
}

.sidebar-menu-button.is-outline:hover {
  background: var(--sb-accent);
}

/* Room for an action at the end of the row. */
.sidebar-menu-item:where(:has(> .sidebar-menu-action, > [data-menu-root] .sidebar-menu-action)) .sidebar-menu-button {
  padding-inline-end: var(--space-8);
}

.sidebar-sheet .sidebar-rail {
  display: none;
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="icon"] .sidebar-menu-button {
  width:   var(--control-height-sm);
  height:  var(--control-height-sm);
  padding: var(--space-2);
}

:where(.sidebar-wrapper[data-state="collapsed"]) > .sidebar[data-mode="icon"] .sidebar-menu-button.is-lg {
  padding: 0;
}

.sidebar-menu-action {
  top:              var(--space-1-5);
  inset-inline-end: var(--space-1);
}

.sidebar-menu-item:has(.sidebar-menu-button.is-sm) .sidebar-menu-action { top: var(--space-1); }
.sidebar-menu-item:has(.sidebar-menu-button.is-lg) .sidebar-menu-action { top: var(--space-2-5); }

.sidebar-menu-item:has(.sidebar-menu-button[data-active]) .sidebar-menu-action {
  color: var(--sb-accent-ink);
}

@media (hover: hover) and (min-width: 48rem) {
  .sidebar-menu-action.is-hover {
    opacity: 0;
  }

  .sidebar-menu-item:hover .sidebar-menu-action.is-hover,
  .sidebar-menu-item:focus-within .sidebar-menu-action.is-hover,
  .sidebar-menu-action.is-hover[data-state="open"],
  .sidebar-menu-item:has(.sidebar-menu-button[data-active]) .sidebar-menu-action.is-hover {
    opacity: 1;
  }
}

.sidebar-menu-badge {
  position:         absolute;
  top:              var(--space-1-5);
  inset-inline-end: var(--space-1);
  display:          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-item);
  font-size:        var(--text-caption);
  font-weight:      var(--weight-ui);
  font-variant-numeric: tabular-nums;
  color:            var(--sb-ink);
  pointer-events:   none;
  user-select:      none;
}

.sidebar-menu-item:has(.sidebar-menu-button.is-sm) > .sidebar-menu-badge { top: var(--space-1); }
.sidebar-menu-item:has(.sidebar-menu-button.is-lg) > .sidebar-menu-badge { top: var(--space-2-5); }

.sidebar-menu-item:has(.sidebar-menu-button[data-active]) > .sidebar-menu-badge,
.sidebar-menu-item:hover > .sidebar-menu-badge {
  color: var(--sb-accent-ink);
}

.sidebar-menu-skeleton {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  height:        var(--item-height);
  padding:       0 var(--space-2);
  border-radius: var(--radius-item);
}

.sidebar-menu-skeleton-icon {
  flex:          none;
  width:         var(--icon-size);
  height:        var(--icon-size);
  border-radius: var(--radius-item);
}

.sidebar-menu-skeleton-text {
  flex:      1 1 auto;
  height:    var(--icon-size);
  max-width: var(--skeleton-width);
}

.sidebar-menu-sub {
  margin:              0 var(--space-3-5);
  padding:             var(--space-0-5) var(--space-2-5);
  border-inline-start: var(--surface-border-width) solid var(--sb-border);
}

.sidebar-menu-sub-button {
  height:    calc(var(--item-height) - var(--space-1));
  padding:   0 var(--space-2);
  font-size: var(--text-ui);
}

.sidebar-menu-sub-button.is-sm {
  font-size: var(--text-ui-sm);
}

/* Trigger */

.sidebar-trigger.button .icon {
  width:  var(--icon-size);
  height: var(--icon-size);
}

/* The panel icon points at the sidebar: mirrored when it docks right,
   which is where an rtl sidebar sits (shadcn rtl:rotate-180). */
.sidebar-trigger[data-side="right"] .icon {
  transform: scaleX(-1);
}

}