/* ═══════════════════════════════════════════════
   SIDEBAR PERSONALITY — colored section rail

   Each workspace area owns a hue (Parra panel system): Home=rose, Documents=blue,
   Calendar=gold, Tasks=lime, Databases=purple. The icons wear their hue at rest
   (a gentle desaturated mix), brighten on hover/active, and — when the sidebar is
   collapsed — become full-colour icon chips so the rail reads as a colourful spine.
═══════════════════════════════════════════════ */

/* ── Expanded: resting section tint on each icon, full hue on hover/active ── */
.nav-it[data-nav="home"]      .ni{color:color-mix(in srgb,var(--ac) 72%,var(--mu))}
.nav-it[data-nav="documents"] .ni{color:color-mix(in srgb,var(--c-docs) 72%,var(--mu))}
.nav-it[data-nav="calendar"]  .ni{color:color-mix(in srgb,var(--go) 72%,var(--mu))}
.nav-it[data-nav="tasks"]     .ni{color:color-mix(in srgb,var(--gr) 72%,var(--mu))}
.nav-it[data-nav="databases"] .ni{color:color-mix(in srgb,var(--pu) 72%,var(--mu))}
.nav-it[data-nav="home"]:hover      .ni,.nav-it[data-nav="home"].active      .ni{color:var(--ac)}
.nav-it[data-nav="documents"]:hover .ni,.nav-it[data-nav="documents"].active .ni{color:var(--c-docs)}
.nav-it[data-nav="calendar"]:hover  .ni,.nav-it[data-nav="calendar"].active  .ni{color:var(--go)}
.nav-it[data-nav="tasks"]:hover     .ni,.nav-it[data-nav="tasks"].active     .ni{color:var(--gr)}
.nav-it[data-nav="databases"]:hover .ni,.nav-it[data-nav="databases"].active .ni{color:var(--pu)}
/* Databases was missing its active tint + purple hover */
.nav-it[data-nav="databases"].active{background:color-mix(in srgb,var(--pu) 13%,transparent)}

/* ── Collapsed: the rail becomes coloured icon chips ── */
body.sb-collapsed .nav-it{width:40px;height:40px;margin:0 auto 5px;border-radius:11px;justify-content:center;padding:0;
  transition:background var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
body.sb-collapsed .nav-it:hover{transform:translateY(-1px)}
body.sb-collapsed .nav-it[data-nav="home"]     {background:color-mix(in srgb,var(--ac) 13%,transparent)}
body.sb-collapsed .nav-it[data-nav="documents"]{background:color-mix(in srgb,var(--c-docs) 13%,transparent)}
body.sb-collapsed .nav-it[data-nav="calendar"] {background:color-mix(in srgb,var(--go) 13%,transparent)}
body.sb-collapsed .nav-it[data-nav="tasks"]    {background:color-mix(in srgb,var(--gr) 13%,transparent)}
body.sb-collapsed .nav-it[data-nav="databases"]{background:color-mix(in srgb,var(--pu) 13%,transparent)}
body.sb-collapsed .nav-it[data-nav="home"]      .ni{color:var(--ac)}
body.sb-collapsed .nav-it[data-nav="documents"] .ni{color:var(--c-docs)}
body.sb-collapsed .nav-it[data-nav="calendar"]  .ni{color:var(--go)}
body.sb-collapsed .nav-it[data-nav="tasks"]     .ni{color:var(--gr)}
body.sb-collapsed .nav-it[data-nav="databases"] .ni{color:var(--pu)}
/* Active chip reads stronger via a hue ring. */
body.sb-collapsed .nav-it[data-nav="home"].active     {box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ac) 55%,transparent)}
body.sb-collapsed .nav-it[data-nav="documents"].active{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c-docs) 55%,transparent)}
body.sb-collapsed .nav-it[data-nav="calendar"].active {box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--go) 55%,transparent)}
body.sb-collapsed .nav-it[data-nav="tasks"].active    {box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--gr) 55%,transparent)}
body.sb-collapsed .nav-it[data-nav="databases"].active{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--pu) 55%,transparent)}

/* ── Collapsed-rail hover fly-out ── */
.sb-flyout{position:fixed;z-index:1001;display:none;min-width:200px;max-width:248px;
  background:var(--sur);border:1px solid var(--bd2);border-radius:var(--r-lg);
  box-shadow:var(--elev-2);padding:6px;animation:cmdkIn var(--t-fast) ease}
.sb-flyout.open{display:block}
.sbf-hd{font-size:10px;letter-spacing:var(--ls-label);text-transform:uppercase;padding:5px 8px 6px}
.sbf-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-md);cursor:pointer;font-size:12.5px;color:var(--tx)}
.sbf-row:hover{background:var(--sur2)}
.sbf-ico{width:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mu)}
.sbf-ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
.sbf-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbf-sep{height:1px;background:var(--bd);margin:5px 4px}
.sbf-empty{padding:9px;color:var(--mu);font-size:11px;text-align:center}
.sbf-label{padding:7px 11px;font-size:12.5px;color:var(--tx);border-radius:0}