/* ── Module-nav vertical rail (brand tokens + logical CSS only) ── */
/* Shared across all module pages; CRM uses this via class alias.   */

/* The [hidden] attribute must truly hide — beats inline display:flex on the
   now-rail-driven CRUD object switchers and hardens rail panel hiding. */
[hidden] { display:none !important; }

/* vertical rail: sits beside the collapsed icon sidebar */
.module-nav {
  position:relative;
  display:flex; flex-direction:column; flex:none; gap:6px; align-items:stretch;
  inline-size:228px;
  overflow:visible;
  padding:10px; border-inline-end:1px solid var(--surface-border);
  background:var(--color-khadi-100);
  scrollbar-width:thin;
}
.mn-chip {
  flex:none; display:flex; align-items:center; gap:9px; inline-size:100%;
  min-block-size:44px; padding-block:6px; padding-inline:6px 12px;
  border:1px solid var(--surface-border); border-radius:8px;
  background:var(--surface-card); color:var(--text-secondary);
  text-align:start; cursor:pointer;
  transition:border-color .14s, box-shadow .14s, background .14s;
}
.mn-chip:hover { border-color:color-mix(in srgb, var(--mn-accent, var(--color-sindoor-500)) 45%, transparent); }
.mn-chip[aria-selected="true"] {
  border-color:var(--mn-accent, var(--color-sindoor-300));
  box-shadow:inset 3px 0 0 var(--mn-accent, var(--color-sindoor-500)), var(--shadow-1);
  background:var(--surface-card);
}
.mn-chip:focus-visible { outline:2px solid var(--mn-accent, var(--color-sindoor-500)); outline-offset:2px; }
.mn-num {
  flex:none; inline-size:26px; block-size:26px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  background:var(--color-khadi-200); color:var(--text-secondary);
}
.mn-num svg { inline-size:15px; block-size:15px; }
.mn-chip[aria-selected="true"] .mn-num {
  background:var(--mn-accent, var(--color-sindoor-500)); color:var(--mn-on-accent, var(--text-on-accent));
}
.mn-body { display:flex; flex-direction:column; gap:1px; min-inline-size:0; }
.mn-label {
  font-size:13px; font-weight:500; color:var(--text-strong);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-inline-size:160px;
}
.mn-phase {
  font-family:var(--font-mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-tertiary);
}
/* nav header: module title row */
.mn-scroll { flex:1; min-block-size:0; display:flex; flex-direction:column; gap:6px; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
/* expanded: full horizontal wordmark (accent dot + name). collapsed: module icon. */
.mn-title { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; }
.mn-wordmark { display:flex; align-items:center; font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--text-strong); letter-spacing:-.01em; white-space:nowrap; }
.mn-wordmark::before { content:""; flex:none; display:inline-block; inline-size:8px; block-size:8px; border-radius:50%; background:var(--mn-accent, var(--color-sindoor-500)); margin-inline-end:8px; }
.mn-logo { display:none; flex:none; inline-size:26px; block-size:26px; object-fit:contain; align-items:center; justify-content:center; font-size:18px; line-height:1; }
.module-nav.is-collapsed .mn-logo { display:flex; }
/* nav groups */
.mn-grouphdr { font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-tertiary); padding:8px 8px 3px; margin:0; }
.mn-toggle { display:flex; align-items:center; justify-content:space-between; inline-size:100%; border:0; background:transparent; cursor:pointer; min-block-size:28px; }
.mn-toggle:focus-visible { outline:2px solid var(--mn-accent, var(--color-sindoor-500)); outline-offset:2px; }
.mn-toggle .caret { transition:transform .15s ease; font-size:13px; color:var(--text-tertiary); }
.mn-toggle[aria-expanded="true"] .caret { transform:rotate(90deg); }
.mn-steps { display:flex; flex-direction:column; gap:6px; }
.mn-steps[hidden] { display:none; }
.mn-rec .mn-num { font-size:13px; }
.mn-count { flex:none; margin-inline-start:auto; font-family:var(--font-mono); font-size:10px; color:var(--text-secondary); background:var(--color-khadi-200); border-radius:99px; padding:1px 7px; }
/* N3: collapse-to-icon-rail toggle + collapsed state */
.mn-nav-toggle { position:absolute; inset-inline-end:-11px; top:calc(var(--header-height, 52px) / 2); transform:translateY(-50%); z-index:30; flex:none; inline-size:22px; block-size:22px; display:flex; align-items:center; justify-content:center; border:1px solid var(--color-khadi-300); background:var(--surface-canvas); cursor:pointer; color:var(--text-secondary); font-size:14px; line-height:1; border-radius:4px; }
.mn-nav-toggle:hover { background:var(--surface-card); color:var(--text-strong); }
.mn-nav-toggle:focus-visible { box-shadow:none; outline:2px solid var(--mn-accent, var(--color-sindoor-400)); outline-offset:1px; }
.module-nav.is-collapsed { inline-size:60px; padding-inline:8px; align-items:center; }
.module-nav.is-collapsed .mn-wordmark,
.module-nav.is-collapsed .mn-body,
.module-nav.is-collapsed .mn-count,
.module-nav.is-collapsed .mn-grouphdr { display:none !important; }
/* collapsed: keep every chip as an icon regardless of group expand state */
.module-nav.is-collapsed .mn-steps,
.module-nav.is-collapsed .mn-steps[hidden] { display:flex !important; }
.module-nav.is-collapsed .mn-title { justify-content:center; padding-inline:0; min-block-size:38px; }
.module-nav.is-collapsed .mn-nav-toggle { font-size:14px; }
.module-nav.is-collapsed .mn-chip { justify-content:center; padding-inline:0; inline-size:44px; align-self:center; }