/* ==========================================================================
   App sidebar
   Figma source: Left Sidebar (3462:21751) on Tax / Settings.
   Page bg is WHITE; the sidebar is the pink rounded column (app-bg-pink),
   inset 16px from the viewport edge, full height. Items: 48px icon cell +
   14px label. Active item: dark 40px rounded box, white icon.
   Collapse behaviour exists in Figma (Open/Close arrow) — the
   .sidebar--collapsed modifier hides labels.
   ========================================================================== */

.sidebar {
  flex: none;
  padding: var(--space-4) 0 var(--space-4) var(--space-4);
  height: 100vh;
  /* Anchored at all times (Peter, 29 Jun). position:FIXED (not sticky — sticky
     left a GPU paint duplicate on Peter's Chrome). Space is reserved with
     padding-left on .app (see app-shell.css). Expanding overlays content. */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
}

/* THE MENU IS WHITE (Peter, 15 Aug 2026 — SHARED FILE). Tonight it went
   full-strength #FFE000, then the Home yellow at the pink's tint; his verdict
   on the tint was "looks like Twitter Bootstrap", so the menu carries no colour
   at all. That is the fifth and sixth attempt at a coloured menu — see the
   1 Aug note: the yellow lives on Home's canvas, and the chrome stays out of
   the way. Do not colour this again without Peter reopening it. */
.sidebar__col {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  /* THE PINK MENU IS GONE, AGAIN (Peter, 7 Sep: "get the fading in and fading
     out pink menu on the left gone, it clashes with some of the other colours").
     Reverses the 28 Aug call that brought it back. White on every page, the
     same as Home, no fade. SHARED FILE: this is the master chat's edit. */
  background: var(--color-surface);
  border-radius: var(--radius-md);
  /* Smooth, lightly-bouncy open/close (Peter, 23 Jun 2026) */
  width: 163px;
  transition: width 0.42s cubic-bezier(0.34, 1.42, 0.6, 1);
}

/* Clip labels during the expand animation — but NOT when collapsed, so the hover tooltips
   (which sit outside the column) aren't clipped away. */
.sidebar:not(.sidebar--collapsed) .sidebar__col {
  overflow: hidden;
}

.sidebar--collapsed .sidebar__col {
  width: 68px;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar__col { transition: none; }
}

/* Lighter icon weight to match the Company icon (Peter, 23 Jun 2026) */
.sidebar__iconbox > svg {
  stroke-width: 1;   /* thin, like the Company icon */
}

/* Jet black icons (not the muted text colour) — except the active item, which is white-on-dark */
.sidebar__item:not([aria-current="page"]) .sidebar__iconbox > svg {
  stroke: #000;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar__item {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: var(--color-text);
  text-decoration: none;
}

/* 48px outer cell; stateful items get the 40px inner box */
.sidebar__icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar__iconbox {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}

.sidebar__iconbox > svg,
.sidebar__iconbox > img {
  width: 24px;
  height: 24px;
}

/* CRISPNESS IS HANDLED IN ui.js, NOT HERE (30 Jul 2026).

   ui.js already nudges every sidebar icon's viewBox to "-0.5 -0.5 24 24", which
   lands the 1px strokes on the pixel grid. I added a CSS translate of half a
   pixel on top of that, which shifted them straight back OFF the grid — two
   half-pixel corrections cancelling into a blur worse than the original.

   Don't re-add a transform here. If an icon looks soft, the fix is that
   uiSharpenSidebarIcons() hasn't run over it yet — call it after injecting the
   markup. */

.sidebar__item[aria-current="page"] .sidebar__iconbox {
  background: var(--color-text);
  color: var(--color-surface);
}

/* img-based icons (euro, company) can't take currentColor — invert on dark */
.sidebar__item[aria-current="page"] .sidebar__iconbox > img {
  filter: invert(1) brightness(1.8);
}

.sidebar__label {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.sidebar--collapsed .sidebar__label {
  display: none;
}

/* The Open/Close row isn't a real destination — lighter label so it reads as a control */
.sidebar__nav button.sidebar__item .sidebar__label {
  color: var(--color-text-muted);
}

.sidebar__spacer {
  flex: 1;
}

/* Submenu panel — second-level nav next to the sidebar (Menu / Settings, 3574:66750) */
.submenu {
  flex: none;
  width: max-content;   /* hug the longest link (Peter, 23 Jun 2026) */
  padding: 24px 14px;   /* ~longest link + ~30px */
  border-right: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
}

.submenu__title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  padding-bottom: 24px;
}
/* The submenu heading links back to the Settings home (the grouped hub). */
.submenu__title a { color: inherit; text-decoration: none; }
.submenu__title a:hover { text-decoration: underline; }

.submenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.submenu__link {
  display: inline-block;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
}

.submenu__link[aria-current="page"] {
  background: var(--color-bg-subtle);
}

/* provisional */
.submenu__link:hover {
  background: var(--color-bg-subtle-light);
}

/* provisional */
.sidebar__item:hover .sidebar__iconbox {
  background: var(--color-bg-translucent);
}

.sidebar__item[aria-current="page"]:hover .sidebar__iconbox {
  background: var(--color-text);
}

/* Open/Close toggle: the arrow spins to match the menu position (test report 1.3).
   Expanded = arrow points left (close); collapsed = rotated to point right (open). */
.sidebar button.sidebar__item:not(.pchip) svg { transition: transform 0.25s ease; }
/* ONLY THE OPEN/CLOSE ARROW ROTATES (Peter, 30 Jul). The profile switcher is also a
   button.sidebar__item, so this rule was turning its avatar upside down. */
.sidebar--collapsed button.sidebar__item:not(.pchip) svg { transform: rotate(180deg); }

/* Smoother collapse: fade the labels rather than hard cut */
.sidebar__label { transition: opacity 0.2s ease; }

/* Mobile: icon rail — the design's own collapsed state, applied automatically */
@media (max-width: 768px) {
  .sidebar { padding: var(--space-2) 0 var(--space-2) var(--space-2); }
  .sidebar .sidebar__label { display: none; }
  .submenu { width: 120px; padding: var(--space-4) var(--space-2); }
}

/* Tooltip on collapsed sidebar — Peter's design: icons + tooltip */
.sidebar--collapsed .sidebar__item { position: relative; }
.sidebar--collapsed .sidebar__item:hover > .sidebar__label,
.sidebar--collapsed .sidebar__item:focus-visible > .sidebar__label {
  display: flex;
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  translate: 0 -50%;
  height: auto;
  padding: 6px 10px;
  background: var(--color-text);
  color: var(--color-surface);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  white-space: nowrap;
  box-shadow: var(--shadow-panel);
  z-index: 100;
  pointer-events: none;
}

@media (max-width: 768px) {
  .sidebar .sidebar__item { position: relative; }
  .sidebar .sidebar__item:hover > .sidebar__label,
  .sidebar .sidebar__item:focus-visible > .sidebar__label {
    display: flex;
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    translate: 0 -50%;
    height: auto;
    padding: 6px 10px;
    background: var(--color-text);
    color: var(--color-surface);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    white-space: nowrap;
    box-shadow: var(--shadow-panel);
    z-index: 100;
    pointer-events: none;
  }
}

/* ───────── Phone: sidebar becomes a bottom tab bar (≤640px) ─────────
   App-like primary nav (ref: bullet-live TabNavigator). Only the 5 work
   sections show; the desktop Open/Close toggle, spacer and Company/Settings
   (items 6+) are dropped from the bar. */
@media (max-width: 640px) {
  .sidebar {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 0;
    border-right: none;
    border-top: var(--border-width) solid var(--color-border);
    background: var(--color-surface);
    z-index: 60;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* The collapsed rule's 68px outranked this on specificity, so the coloured
     column only covered the first two items of the bottom bar — invisible while
     it was pale pink, obvious the moment it became yellow (Peter, 15 Aug). */
  .sidebar__col,
  .sidebar--collapsed .sidebar__col { flex-direction: row; width: 100%; gap: 0; flex: 1; padding: 0; }
  .sidebar__nav { flex-direction: row; width: 100%; justify-content: space-around; align-items: stretch; gap: 0; }
  .sidebar__nav > li:nth-child(n+6) { display: none; }            /* keep Home/Invoice/Bank/Tax/Payroll */
  .sidebar__item { flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 2px 7px; width: auto; min-height: 0; }
  .sidebar__icon { width: auto; height: auto; min-width: 0; min-height: 0; padding: 0; margin: 0; }
  .sidebar .sidebar__label {
    display: block;
    position: static;
    height: auto;
    width: auto;
    opacity: 1;
    transform: none;
    font-size: 11px;
    line-height: 1;
    color: var(--color-text-muted);
    background: none;
    box-shadow: none;
    padding: 0;
    white-space: nowrap;
  }
  .sidebar__item[aria-current="page"] .sidebar__label { color: var(--color-text); font-weight: var(--weight-medium); }
  .sidebar__iconbox { width: 24px; height: 24px; }
  .sidebar__iconbox > svg, .sidebar__iconbox > img { width: 22px; height: 22px; }
  /* the active pill background reads oddly squashed in a short bar — keep it subtle */
  .sidebar__item[aria-current="page"] .sidebar__iconbox { background: none; }
}

/* Arriving FROM Home the colour fades up instead of snapping (Peter, 31 Jul —
   guides chat; Home's nav is white, so the colour change is a real transition).
   Same fade now that the menu is the Home yellow (Peter, 15 Aug: "fade it in
   the same when it loads"). ui.js adds .sidebar-pinkin for one load off a
   sessionStorage flag Home sets — the class name is history, the behaviour is
   the point. */
/* arriving from white Home the pink fades up over 3s (Peter's number, 28 Aug)
   — the white-to-white husk here was the fade left for dead by fc73ded */
/* 7 Sep: the pink is gone (see .sidebar__col), so the fade has nothing to fade to. The class and
   the flag in ui.js are left in place, harmless; this rule is deliberately empty. */
.sidebar .sidebar__col.sidebar-pinkin { animation: none; }

/* A LOCKED NAV ITEM (personal-tax chat, 11 Aug 2026 — SHARED FILE).
   Used by Bullet Personal: the tax return stays shut until the client's
   documents are in, because half a return is worse than none. It still shows,
   quietened and padlocked, and clicking it goes to the Inbox — hiding it would
   leave them hunting for a thing we took away. */
.sidebar__item.is-locked .sidebar__iconbox,
.sidebar__item.is-locked .sidebar__label { opacity: .45; }
.sidebar__item.is-locked:hover .sidebar__iconbox,
.sidebar__item.is-locked:hover .sidebar__label { opacity: .7; }


/* the pink fades OUT over 3s arriving back on white Home (Peter, 28 Aug) */
/* 7 Sep: gone with the pink (Peter: "the menu is still glowing pink, get rid of that") */
.sidebar .sidebar__col.sidebar-pinkout { animation: none; }