/* Shared menu for the dashboard pages (nav.js). Load after the page's other stylesheets.
   Layout classes live on <html>: nav-style-topbar | nav-style-sidebar, plus nav-collapsed. */

:root {
  --nav-top: 60px;           /* height taken at the top (sticky filter bar, chat panel, drawers) */
  --nav-left: 0px;           /* width taken on the left by the sidebar */
  --nav-w: 248px;
  --nav-w-collapsed: 76px;
  --nav-spring: cubic-bezier(.34, 1.3, .5, 1);
  --nav-gradient: linear-gradient(90deg, var(--c-blue), var(--c-violet), var(--c-magenta), var(--c-orange), var(--c-blue));
}
@media (min-width: 761px) {
  html.nav-style-sidebar { --nav-top: 0px; --nav-left: var(--nav-w); }
  html.nav-style-sidebar.nav-collapsed { --nav-left: var(--nav-w-collapsed); }
}
html.nav-lock-scroll { overflow: hidden; }

.app-shell {
  padding-inline-start: var(--nav-left);
  transition: padding-inline-start var(--t-base) var(--ease), padding-inline-end var(--t-base) var(--ease);
}

/* =========================================================================
   Top bar (default)
   ========================================================================= */
.nav { display: block; position: sticky; top: 0; z-index: 2147483647; }

.nav-bar {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 14px;
  height: 60px; padding: 0 20px;
}
/* The frosted surface lives on a pseudo-element: backdrop-filter on .nav-bar itself would trap the
   fixed-position drawer inside it. */
.nav-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t-base) var(--ease);
}
.nav.is-scrolled .nav-bar::before { box-shadow: var(--shadow-md); }
.nav-bar::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: -1px; height: 2px; z-index: -1;
  background: var(--nav-gradient); background-size: 200% 100%;
  opacity: .85; animation: nav-shimmer 12s linear infinite;
}
@keyframes nav-shimmer { to { background-position: -200% 0; } }

/* Brand */
.nav-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; flex-shrink: 0; border-radius: 10px; }
.nav-mark { width: 32px; height: 32px; border-radius: 9px; transition: transform 400ms var(--nav-spring); }
.nav-mark .icon { width: 16px; height: 16px; }
.nav-brand:hover .nav-mark { transform: rotate(-8deg) scale(1.06); }
.nav-brand-text { line-height: 1.2; white-space: nowrap; }
.nav-brand-text strong { display: block; font-size: 14px; letter-spacing: -.01em; }
.nav-brand-text span { display: block; font-size: 11.5px; color: var(--muted); }

.nav-slot { display: flex; align-items: center; }

/* The panel holds search, links and the user menu: a row here, a column in the sidebar/drawer. */
.nav-panel { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.nav-links { order: 1; }
.nav-spacer { order: 2; flex: 1; }
.nav-search { order: 3; }
.nav-user { order: 4; }
.nav-collapse { order: 5; }

/* Links: pill tabs with a sliding highlight */
.nav-links {
  position: relative; display: flex; gap: 2px; padding: 4px; margin-inline-start: 8px;
  border-radius: 999px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.nav-thumb {
  position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; pointer-events: none;
  border-radius: 999px; background: var(--panel);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--border);
  transition: transform 380ms var(--nav-spring), width 380ms var(--nav-spring), height 380ms var(--nav-spring), opacity var(--t-base) var(--ease);
}
.nav-thumb::before { content: ""; position: absolute; display: none; }
.nav-link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--text); }
.nav-link-icon { position: relative; display: inline-flex; }
.nav-link .icon { width: 16px; height: 16px; transition: transform 300ms var(--nav-spring); }
.nav-link:hover .icon { transform: scale(1.12); }
.nav-link[aria-current="page"] .nav-link-icon { color: var(--accent); }
/* Ask AI gets the brand gradient and a live dot. */
.nav-link--chat .nav-link-icon { color: var(--c-violet); }
.nav-link--chat:hover .icon { transform: rotate(15deg) scale(1.15); }
.nav-ai-dot {
  width: 7px; height: 7px; border-radius: 50%; margin-inline-start: -2px;
  background: linear-gradient(135deg, var(--c-blue), var(--c-magenta));
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-violet) 60%, transparent);
  animation: nav-pulse 2.4s ease-out infinite;
}
/* Count bubble on a link (follow-ups due on Daily Tasks). */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  color: #fff; background: var(--status-critical);
}
.nav-badge[hidden] { display: none; }
@keyframes nav-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-violet) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
/* chat-widget.css rings the Ask AI trigger while its panel is open; tint the tab instead. */
.nav .ask-ai-link[aria-expanded="true"] { box-shadow: none; color: var(--text); background: color-mix(in srgb, var(--c-violet) 14%, transparent); }

/* Groups: a button that opens a submenu. Top bar → dropdown under the button. */
.nav-group { position: relative; display: flex; flex-direction: column; }
.nav-group-btn { border: none; background: none; cursor: pointer; font-family: inherit; }
.nav-group-btn:hover { background: none; }
.nav-group-btn[data-current="true"] { color: var(--text); }
.nav-group-btn[data-current="true"] .nav-link-icon { color: var(--accent); }
.nav .nav-group-chev { width: 13px; height: 13px; margin-inline-start: -2px; color: var(--muted); transition: transform var(--t-base) var(--ease); }
.nav-group[data-open="true"] .nav-group-chev { transform: rotate(180deg); }
.nav-submenu {
  position: absolute; inset-inline-start: 0; top: calc(100% + 12px); z-index: 70; min-width: 290px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 6px;
  transform-origin: top left; animation: menu-in var(--t-base) var(--ease);
}
.nav-group:not([data-open="true"]) .nav-submenu { display: none; }
.nav-submenu-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 6px; }
.nav-sublink {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.nav-sublink:hover { background: var(--row-hover); }
.nav-sublink-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
}
.nav-sublink-icon .icon { width: 16px; height: 16px; }
.nav-sublink[aria-current="page"] .nav-sublink-icon { background: linear-gradient(135deg, var(--c-blue), var(--c-violet)); color: #fff; }
.nav-sublink-text { line-height: 1.3; min-width: 0; }
.nav-sublink-text strong { display: block; font-size: 13px; }
.nav-sublink-text small { display: block; font-size: 11.5px; color: var(--muted); white-space: normal; }

/* Search */
.nav-search {
  display: flex; align-items: center; gap: 8px; width: 230px;
  padding: 7px 7px 7px 12px; border-radius: 999px; text-align: start;
  font-size: 13px; color: var(--muted);
  background: color-mix(in srgb, var(--text) 4%, transparent); border-color: var(--border);
}
.nav-search:hover { color: var(--text); border-color: var(--border-strong); background: color-mix(in srgb, var(--text) 6%, transparent); }
.nav-search .icon { width: 15px; height: 15px; }
.nav-search .nav-kbd { margin-inline-start: auto; }
.nav-kbd {
  display: inline-flex; align-items: center; gap: 2px;
  font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted);
  padding: 3px 6px; border-radius: 6px; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--border); border-bottom-width: 2px;
}

/* User */
.nav-user { position: relative; }
.nav-user-btn {
  display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px;
  border-radius: 999px; border-color: transparent; background: transparent; text-align: start;
}
.nav-user-btn:hover, .nav-user[data-open="true"] .nav-user-btn { background: var(--row-hover); border-color: var(--border); }
.nav-avatar { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px color-mix(in srgb, var(--c-violet) 45%, transparent); }
.nav-user-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; max-width: 170px; }
.nav-user-text strong, .nav-user-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-text strong { font-size: 12.5px; }
.nav-user-text span { font-size: 11px; color: var(--muted); }
.nav-chev { width: 14px; height: 14px; color: var(--muted); transition: transform var(--t-base) var(--ease); }
.nav-user[data-open="true"] .nav-chev { transform: rotate(180deg); }

.nav-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 10px); width: 270px; z-index: 70;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 6px;
  transform-origin: top right; animation: menu-in var(--t-base) var(--ease);
}
.nav-menu[hidden] { display: none; }
.nav-menu-who { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.nav-menu-who .avatar { width: 38px; height: 38px; font-size: 13px; }
.nav-menu-who div { min-width: 0; line-height: 1.3; }
.nav-menu-who strong, .nav-menu-who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-menu-who strong { font-size: 13.5px; }
.nav-menu-who span { font-size: 12px; color: var(--muted); }
.nav-menu-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 6px; }
.nav-menu .menu-item .nav-kbd { margin-inline-start: auto; }

.nav-theme {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 3px; margin: 0 6px 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
}
.nav-theme-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 8px;
  background: var(--panel); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border);
  transition: transform 320ms var(--nav-spring), width 320ms var(--nav-spring);
}
.nav-theme button {
  position: relative; z-index: 1; border: none; background: none; color: var(--muted);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 4px; font-size: 12px; font-weight: 600;
}
.nav-theme button:hover { background: none; color: var(--text); }
.nav-theme button[aria-checked="true"] { color: var(--text); }
.nav-theme button .icon { width: 14px; height: 14px; }

/* Desktop-only and phone-only controls. Prefixed with .nav to beat dashboard.css's
   button.icon-btn { display: inline-flex }. */
.nav .nav-burger, .nav .nav-search-mini, .nav .nav-drawer-head, .nav .nav-backdrop, .nav .nav-collapse { display: none; }
.nav-burger, .nav-search-mini, .nav-drawer-close { border: none; background: none; }
.nav-burger .icon, .nav-search-mini .icon, .nav-drawer-close .icon { width: 20px; height: 20px; }

@media (max-width: 1100px) and (min-width: 761px) {
  html:not(.nav-style-sidebar) .nav-search { width: auto; }
  html:not(.nav-style-sidebar) .nav-search .nav-label { display: none; }
  html:not(.nav-style-sidebar) .nav-user-text { display: none; }
}
@media (max-width: 900px) and (min-width: 761px) {
  html:not(.nav-style-sidebar) .nav-brand-text span { display: none; }
  html:not(.nav-style-sidebar) .nav-link { padding: 7px 11px; }
}

/* =========================================================================
   Sidebar (desktop) and the phone drawer share the column layout
   ========================================================================= */
@media (min-width: 761px) {
  html.nav-style-sidebar .nav-bar {
    position: fixed; top: 0; inset-inline-start: 0; bottom: 0; width: var(--nav-left); height: auto;
    flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 12px 12px;
    transition: width var(--t-base) var(--ease);
  }
  html.nav-style-sidebar .nav-bar::before { border-bottom: none; border-inline-end: 1px solid var(--border); }
  html.nav-style-sidebar .nav-bar::after {
    top: 0; bottom: 0; inset-inline-start: auto; inset-inline-end: -1px; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--c-blue), var(--c-violet), var(--c-magenta), var(--c-orange), var(--c-blue));
    background-size: 100% 200%; animation-name: nav-shimmer-y;
  }
  html.nav-style-sidebar .nav-brand { padding: 2px 6px 6px; }
  html.nav-style-sidebar .nav-slot { display: none; }
  html.nav-style-sidebar .nav .nav-collapse { display: flex; }
}
@keyframes nav-shimmer-y { to { background-position: 0 -200%; } }

@media (min-width: 761px) { html.nav-style-sidebar .nav-panel { flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; } }
@media (max-width: 760px) { .nav-panel { flex-direction: column; align-items: stretch; gap: 10px; } }

/* Column-layout pieces. Written once with a shared selector list via :is(). */
:is(html.nav-style-sidebar .nav-panel, .nav.is-mobile .nav-panel) .nav-search { order: 0; width: auto; border-radius: 10px; padding: 9px 8px 9px 12px; }
:is(html.nav-style-sidebar .nav-panel, .nav.is-mobile .nav-panel) .nav-links {
  flex-direction: column; gap: 2px; padding: 0; margin: 0; border: none; border-radius: 0; background: none;
}
:is(html.nav-style-sidebar .nav-panel, .nav.is-mobile .nav-panel) .nav-links::before {
  content: "Menu"; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 6px 12px 6px;
}
:is(html.nav-style-sidebar .nav-panel, .nav.is-mobile .nav-panel) .nav-link { padding: 10px 12px; gap: 12px; font-size: 13.5px; border-radius: 10px; }
:is(html.nav-style-sidebar .nav-panel, .nav.is-mobile .nav-panel) .nav-link .icon { width: 18px; height: 18px; }
:is(html.nav-style-sidebar .nav-panel, .nav.is-mobile .nav-panel) :is(.nav-ai-dot, .nav-badge) { margin-inline-start: auto; }
:is(html.nav-style-sidebar .nav-panel, .nav.is-mobile .nav-panel) .nav-thumb {
  border-radius: 10px; box-shadow: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--c-violet) 6%, transparent));
}
:is(html.nav-style-sidebar .nav-panel, .nav.is-mobile .nav-panel) .nav-thumb::before {
  display: block; inset-inline-start: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--c-blue), var(--c-violet), var(--c-magenta));
}
:is(html.nav-style-sidebar .nav-panel, .nav.is-mobile .nav-panel) .nav-user-btn {
  width: 100%; padding: 8px; border-radius: 12px; border-color: var(--border);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
:is(html.nav-style-sidebar .nav-panel, .nav.is-mobile .nav-panel) .nav-user-text { flex: 1; max-width: none; }
:is(html.nav-style-sidebar .nav-panel, .nav.is-mobile .nav-panel) .nav-chev { transform: rotate(180deg); }
:is(html.nav-style-sidebar .nav-panel, .nav.is-mobile .nav-panel) .nav-user[data-open="true"] .nav-chev { transform: none; }
:is(html.nav-style-sidebar .nav-panel, .nav.is-mobile .nav-panel) .nav-menu {
  top: auto; bottom: calc(100% + 8px); inset-inline-start: 0; inset-inline-end: auto; width: 100%; min-width: 250px; transform-origin: bottom left;
}

/* Groups in the column layout (expanded sidebar, phone drawer): the submenu expands in place. */
:is(html.nav-style-sidebar:not(.nav-collapsed) .nav-panel, .nav.is-mobile .nav-panel) .nav-group { position: static; }
:is(html.nav-style-sidebar:not(.nav-collapsed) .nav-panel, .nav.is-mobile .nav-panel) .nav-group-btn { width: 100%; text-align: start; }
:is(html.nav-style-sidebar:not(.nav-collapsed) .nav-panel, .nav.is-mobile .nav-panel) .nav-group-chev { margin-inline-start: auto; transform: rotate(-90deg); }
:is(html.nav-style-sidebar:not(.nav-collapsed) .nav-panel, .nav.is-mobile .nav-panel) .nav-group[data-open="true"] .nav-group-chev { transform: none; }
:is(html.nav-style-sidebar:not(.nav-collapsed) .nav-panel, .nav.is-mobile .nav-panel) .nav-submenu {
  position: static; min-width: 0; padding: 2px 0 4px 20px; margin-inline-start: 9px;
  background: none; border: none; border-inline-start: 1px solid var(--border); border-radius: 0; box-shadow: none; animation: none;
}
:is(html.nav-style-sidebar:not(.nav-collapsed) .nav-panel, .nav.is-mobile .nav-panel) .nav-submenu-title { display: none; }
:is(html.nav-style-sidebar:not(.nav-collapsed) .nav-panel, .nav.is-mobile .nav-panel) .nav-sublink { padding: 8px 10px; gap: 10px; }
:is(html.nav-style-sidebar:not(.nav-collapsed) .nav-panel, .nav.is-mobile .nav-panel) .nav-sublink:hover { background: none; }
:is(html.nav-style-sidebar:not(.nav-collapsed) .nav-panel, .nav.is-mobile .nav-panel) .nav-sublink-icon { width: 26px; height: 26px; border-radius: 8px; }
:is(html.nav-style-sidebar:not(.nav-collapsed) .nav-panel, .nav.is-mobile .nav-panel) .nav-sublink-text strong { font-size: 13px; font-weight: 600; }
:is(html.nav-style-sidebar:not(.nav-collapsed) .nav-panel, .nav.is-mobile .nav-panel) .nav-sublink-text small { display: none; }

.nav-collapse {
  align-items: center; gap: 12px; padding: 9px 12px; border: none; background: none;
  border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 600;
}
.nav-collapse:hover { color: var(--text); }
.nav-collapse .icon { width: 18px; height: 18px; transition: transform var(--t-base) var(--ease); }

/* Collapsed rail: icons only, labels as tooltips */
@media (min-width: 761px) {
  html.nav-style-sidebar.nav-collapsed .nav-bar { padding-inline-start: 10px; padding-inline-end: 10px; }
  html.nav-style-sidebar.nav-collapsed :is(.nav-label, .nav-brand-text, .nav-kbd, .nav-chev, .nav-ai-dot) { display: none; }
  /* .nav .nav-panel: outranks the column layout's :is(...) rule that sets the "Menu" caption. */
  html.nav-style-sidebar.nav-collapsed .nav .nav-panel .nav-links::before { content: ""; padding: 0; height: 1px; margin: 0 8px 6px; background: var(--border); }
  html.nav-style-sidebar.nav-collapsed .nav-brand { justify-content: center; padding: 2px 0 6px; }
  html.nav-style-sidebar.nav-collapsed :is(.nav-link, .nav-search, .nav-collapse) { justify-content: center; padding-inline-start: 0; padding-inline-end: 0; }
  html.nav-style-sidebar.nav-collapsed .nav-badge { position: absolute; top: 2px; inset-inline-end: 4px; min-width: 15px; height: 15px; padding: 0 3px; font-size: 9.5px; }
  html.nav-style-sidebar.nav-collapsed .nav-user-btn { justify-content: center; padding: 6px 0; border-color: transparent; background: none; }
  html.nav-style-sidebar.nav-collapsed .nav-collapse .icon { transform: scaleX(-1); }
  html.nav-style-sidebar.nav-collapsed .nav-link--chat .nav-link-icon::after {
    content: ""; position: absolute; top: -2px; inset-inline-end: -3px; width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-blue), var(--c-magenta)); animation: nav-pulse 2.4s ease-out infinite;
  }
  html.nav-style-sidebar.nav-collapsed [data-label]::after {
    content: attr(data-label); position: absolute; inset-inline-start: calc(100% + 14px); top: 50%;
    transform: translate(-6px, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
    padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: var(--text); color: var(--bg); box-shadow: var(--shadow-md);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  html.nav-style-sidebar.nav-collapsed [data-label]:is(:hover, :focus-visible)::after { opacity: 1; transform: translate(0, -50%); }
  html.nav-style-sidebar.nav-collapsed :is(.nav-search, .nav-collapse) { position: relative; }
  /* Groups on the rail: a flyout to the right; hide the button's tooltip while it is open. */
  html.nav-style-sidebar.nav-collapsed .nav-group-chev { display: none; }
  html.nav-style-sidebar.nav-collapsed .nav-submenu { inset-inline-start: calc(100% + 14px); top: -6px; transform-origin: top left; }
  html.nav-style-sidebar.nav-collapsed .nav-group[data-open="true"] .nav-group-btn::after { display: none; }
}

/* =========================================================================
   Phones: compact bar + slide-in drawer (both styles)
   ========================================================================= */
@media (max-width: 760px) {
  .nav-bar { padding: 0 10px 0 6px; gap: 6px; }
  .nav .nav-burger, .nav .nav-search-mini { display: inline-flex; }
  .nav-search-mini { margin-inline-start: auto; }
  .nav-brand-text span { display: none; }
  .nav-slot { order: 0; }

  .nav-backdrop {
    position: fixed; inset: 0; z-index: 1;
    background: rgba(8, 10, 18, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease);
  }
  .nav .nav-backdrop { display: block; }
  .nav.is-drawer-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  .nav-panel {
    position: fixed; top: 0; inset-inline-start: 0; bottom: 0; z-index: 2;
    width: min(300px, 86vw); padding: 14px 12px 16px; overflow-y: auto;
    background: var(--panel); border-radius: 0 20px 20px 0; box-shadow: var(--shadow-lg);
    transform: translateX(-104%); visibility: hidden;
    transition: transform 320ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 320ms;
  }
  .nav.is-drawer-open .nav-panel { transform: none; visibility: visible; transition: transform 320ms cubic-bezier(.2, .8, .2, 1); }
  .nav .nav-drawer-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 6px; font-size: 14.5px; }
  .nav-drawer-close { margin-inline-start: auto; }
  /* Stagger the links in as the drawer opens. */
  .nav.is-drawer-open .nav-link { animation: nav-in 360ms var(--nav-spring) both; }
  .nav.is-drawer-open .nav-link:nth-of-type(2) { animation-delay: 40ms; }
  .nav.is-drawer-open .nav-link:nth-of-type(3) { animation-delay: 80ms; }
}
@keyframes nav-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   Command palette
   ========================================================================= */
.nav-palette {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px;
}
.nav-palette[hidden] { display: none; }
.nav-palette-backdrop {
  position: absolute; inset: 0; background: rgba(8, 10, 18, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 200ms var(--ease);
}
.nav-palette-box {
  position: relative; width: min(620px, 100%); overflow: hidden;
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--c-violet) 15%, transparent);
  opacity: 0; transform: translateY(-10px) scale(.98);
  transition: opacity 200ms var(--ease), transform 260ms var(--nav-spring);
}
.nav-palette-box::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0; height: 2px; background: var(--nav-gradient); }
.nav-palette.is-open .nav-palette-backdrop { opacity: 1; }
.nav-palette.is-open .nav-palette-box { opacity: 1; transform: none; }

.nav-palette-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.nav-palette-input > .icon { width: 19px; height: 19px; color: var(--accent); }
.nav-palette-input input { flex: 1; min-width: 0; border: none; background: none; padding: 4px 0; font-size: 15.5px; }
.nav-palette-input input:focus-visible { box-shadow: none; }

.nav-palette-list { list-style: none; margin: 0; padding: 6px; max-height: min(52vh, 420px); overflow-y: auto; }
.nav-palette-group { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 5px; }
.nav-palette-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 11px; cursor: pointer; }
.nav-palette-item[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.nav-palette-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--muted);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-palette-icon .icon { width: 16px; height: 16px; }
.nav-palette-item[aria-selected="true"] .nav-palette-icon { background: linear-gradient(135deg, var(--c-blue), var(--c-violet)); color: #fff; }
.nav-palette-text { flex: 1; min-width: 0; line-height: 1.3; }
.nav-palette-text > span { display: block; font-size: 13.5px; font-weight: 600; }
.nav-palette-text small { display: block; font-size: 11.5px; color: var(--muted); }
.nav-palette-text mark { background: none; color: var(--accent); }
.nav-palette-go { color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.nav-palette-item[aria-selected="true"] .nav-palette-go { opacity: 1; transform: none; }
.nav-palette-empty { padding: 30px 16px; text-align: center; color: var(--muted); }
.nav-palette-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); }
.nav-palette-foot span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 760px) { .nav-palette { padding-top: 8vh; } .nav-palette-foot { display: none; } }

/* =========================================================================
   Jump-to-section highlight (dashboard)
   ========================================================================= */
#kpi-grid, .content [id^="panel-"] { scroll-margin-top: calc(var(--nav-top) + 84px); }
.nav-flash { animation: nav-flash 1.5s var(--ease); border-radius: var(--radius-md); }
@keyframes nav-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  35% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---- Right-to-left (Arabic) ---------------------------------------------------
   Layout flips through logical properties above; these cover what they can't:
   slide-in directions, transform origins and icons that point somewhere. */
[dir="rtl"] .nav-submenu, [dir="rtl"] .nav-menu { transform-origin: top right; }
[dir="rtl"] .nav-user .nav-menu { transform-origin: top left; }
[dir="rtl"] :is(html.nav-style-sidebar .nav-panel, .nav.is-mobile .nav-panel) .nav-thumb::before { border-radius: 3px 0 0 3px; }
[dir="rtl"] :is(html.nav-style-sidebar:not(.nav-collapsed) .nav-panel, .nav.is-mobile .nav-panel) .nav-group-chev { transform: rotate(90deg); }
[dir="rtl"] :is(html.nav-style-sidebar:not(.nav-collapsed) .nav-panel, .nav.is-mobile .nav-panel) .nav-group[data-open="true"] .nav-group-chev { transform: none; }
[dir="rtl"] .nav-collapse .icon, [dir="rtl"] #logout-btn .icon, [dir="rtl"] .nav-palette-go .icon { transform: scaleX(-1); }
html.nav-style-sidebar.nav-collapsed[dir="rtl"] .nav-collapse .icon { transform: none; }
[dir="rtl"] .nav-palette-go { transform: translateX(4px); }
@media (max-width: 760px) {
  [dir="rtl"] .nav-panel { border-radius: 20px 0 0 20px; transform: translateX(104%); }
  [dir="rtl"] .nav.is-drawer-open .nav-panel { transform: none; }
  [dir="rtl"] .nav.is-drawer-open .nav-link { animation-name: nav-in-rtl; }
}
@keyframes nav-in-rtl { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }