/* Collapsible app sidebar — the icon rail. State: <html data-sidebar>, set by
   src/nav/sidebar-collapse.js. Desktop only: at 992px and below the sidebar is
   the bottom tab bar from index.css, untouched here. Logical properties keep
   RTL (sidebar on the right) and LTR (on the left) correct with one set of rules. */

.sidebar-collapse-toggle { display: none; }

@media (min-width: 993px) {
  .app-container { transition: grid-template-columns .24s ease; }
  html[data-sidebar="collapsed"] .app-container { grid-template-columns: 76px minmax(0, 1fr); }

  /* The toggle is a round handle on the sidebar's inner edge, in the same
     place in both states. */
  .sidebar-collapse-toggle {
    position: absolute; inset-block-start: 30px; inset-inline-end: -14px; z-index: 2;
    display: grid; place-items: center;
    inline-size: 28px; block-size: 28px; padding: 0;
    border: 1px solid var(--border-color); border-radius: 50%;
    background: var(--bg-secondary); color: var(--text-secondary);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  .sidebar-collapse-toggle:hover { background: var(--accent-light); color: var(--accent-hover); border-color: var(--accent-hover); }
  .sidebar-collapse-toggle:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
  /* The chevron points toward the edge the sidebar folds into: mirrored when
     the sidebar is on the right (RTL), turned around when collapsed. */
  [dir="rtl"] .sidebar-collapse-toggle svg { transform: scaleX(-1); }
  .sidebar-collapse-chevron { transform-box: fill-box; transform-origin: center; transition: transform .2s ease; }
  html[data-sidebar="collapsed"] .sidebar-collapse-chevron { transform: scaleX(-1); }

  /* While the width animates, clip the text that is appearing or leaving. */
  html[data-sidebar-animating] .app-sidebar > :not(.sidebar-collapse-toggle) { overflow: hidden; }
  html[data-sidebar-animating] .app-sidebar * { white-space: nowrap; }

  /* ---- Collapsed rail ---------------------------------------------------- */
  html[data-sidebar="collapsed"] .app-sidebar { padding: 1.25rem .75rem; }

  html[data-sidebar="collapsed"] .brand-section { align-items: center; margin-block: .5rem 1.75rem; }
  html[data-sidebar="collapsed"] .brand-section .brand-logo { gap: 0; }
  html[data-sidebar="collapsed"] .brand-word,
  html[data-sidebar="collapsed"] .brand-subtitle { display: none; }

  html[data-sidebar="collapsed"] .nav-menu { align-items: stretch; }
  html[data-sidebar="collapsed"] .nav-link {
    position: relative; justify-content: center; gap: 0;
    padding: .75rem 0; min-block-size: 44px;
  }
  /* Labels stay in the accessibility tree; only the icon is drawn. */
  html[data-sidebar="collapsed"] .nav-link > span[data-i18n] {
    position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  html[data-sidebar="collapsed"] #setupNav > span[aria-hidden="true"] { font-size: 1.0625rem; line-height: 1; }
  /* The setup percent stays visible as a small badge on the icon's corner. */
  html[data-sidebar="collapsed"] #setupNav .setup-nav-percent {
    position: absolute; inset-block-start: 1px; inset-inline-end: -4px; margin: 0;
    font-size: 0.5625rem; line-height: 1; padding: 2px 4px; border-radius: 6px;
    box-shadow: 0 0 0 2px var(--bg-secondary);
  }

  /* Footer: the three controls stack, the profile shrinks to its avatar. */
  html[data-sidebar="collapsed"] .compact-sidebar-footer { margin-inline: 0; align-items: center; }
  html[data-sidebar="collapsed"] .compact-sidebar-footer .side-appearance { inline-size: 100%; }
  html[data-sidebar="collapsed"] .compact-sidebar-footer .compact-toolbar { flex-direction: column; align-items: center; gap: 8px; }
  html[data-sidebar="collapsed"] .compact-toolbar #languageToggle { inline-size: 44px; }
  html[data-sidebar="collapsed"] .compact-toolbar .language-flag,
  html[data-sidebar="collapsed"] .compact-toolbar .sidebar-version { display: none; }
  html[data-sidebar="collapsed"] .compact-sidebar-footer .compact-profile {
    flex-direction: column; gap: 4px; padding: 6px 0; inline-size: 100%; box-sizing: border-box;
  }
  html[data-sidebar="collapsed"] .compact-profile .side-user { flex: none; justify-content: center; }
  html[data-sidebar="collapsed"] .compact-profile .su-meta {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  html[data-sidebar="collapsed"] .compact-profile .side-user .su-av { inline-size: 34px; block-size: 34px; }
  html[data-sidebar="collapsed"] .compact-profile .logout-btn { inline-size: 36px; block-size: 36px; padding: 7px; }

  /* The footer menus are anchored to the sidebar width, which the rail makes
     far too narrow: give them their own width and let them open past the
     rail's edge into the page. */
  html[data-sidebar="collapsed"] .side-appearance .cp-menu,
  html[data-sidebar="collapsed"] .side-appearance .a11y-pop,
  html[data-sidebar="collapsed"] .compact-toolbar .appearance-panel {
    inset-inline-start: 0; inset-inline-end: auto;
    inline-size: 280px; max-inline-size: calc(100vw - 32px); min-width: 0;
  }
  html[data-sidebar="collapsed"] .compact-sidebar-footer .appearance-panel .cp-menu { inline-size: 100%; }
}

@media (min-width: 993px) and (prefers-reduced-motion: reduce) {
  .app-container, .sidebar-collapse-toggle, .sidebar-collapse-chevron { transition: none; }
}