/* ========================================================================== nav-shell.css — the 3-tier navigation shell (Rail · Panel · Topbar), the command palette and the mobile drawer. Every colour/space is a token from nav-tokens.css. RTL/LTR safe via logical properties (inset-inline / *-inline). ========================================================================== */ /* ---- Shell layout (overrides the legacy .dashboard-wrapper) -------------- */ body { background: var(--nv-bg); } .dashboard-wrapper { display: flex; align-items: stretch; gap: var(--nv-gutter); padding: var(--nv-gutter); min-height: 100vh; background: var(--nv-bg); color: var(--nv-text); } .app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--nv-gutter); } .app-content > .footer { margin-top: auto; } /* ---- Tier 1 · Rail ------------------------------------------------------- */ .nav-rail { flex: 0 0 var(--nv-rail-w); width: var(--nv-rail-w); background: var(--nv-surface); border: 1px solid var(--nv-border); border-radius: var(--nv-radius-lg); box-shadow: var(--nv-shadow-sm); display: flex; flex-direction: column; align-items: center; padding: 10px 0; position: sticky; top: var(--nv-gutter); height: calc(100vh - (2 * var(--nv-gutter))); } .nav-rail-logo { width: 40px; height: 40px; border-radius: 11px; overflow: hidden; margin-bottom: 12px; flex: 0 0 auto; display: block; } .nav-rail-logo img { width: 100%; height: 100%; object-fit: contain; } .nav-rail-items { display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: center; overflow-y: auto; flex: 1; } .nav-rail-items::-webkit-scrollbar { width: 0; } .nav-rail-btn { position: relative; width: 44px; height: 44px; border: 0; border-radius: 13px; background: transparent; color: var(--nv-text-soft); display: flex; align-items: center; justify-content: center; font-size: 1.02rem; cursor: pointer; transition: var(--nv-transition); } .nav-rail-btn:hover { background: var(--sec-tint, var(--nv-surface-2)); color: var(--sec, var(--nv-text)); } .nav-rail-btn.active { background: var(--sec-tint); color: var(--sec); } .nav-rail-btn.active::before { content: ''; position: absolute; inset-inline-start: -10px; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; border-radius: var(--nv-radius-pill); background: var(--sec); } .nav-rail-btn .nrb-badge { position: absolute; top: 5px; inset-inline-end: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--nv-success); border: 2px solid var(--nv-surface); } /* Rail tooltip — rendered on by nav-shell.js (a CSS ::after here would be clipped by the scrollable .nav-rail-items container). */ .nav-rail-tip { position: fixed; z-index: 4000; pointer-events: none; background: var(--nv-text); color: var(--nv-surface); font-size: .74rem; font-weight: 700; padding: 5px 10px; border-radius: 8px; white-space: nowrap; box-shadow: var(--nv-shadow); opacity: 0; transform: translateY(-50%) scale(.92); transform-origin: center; transition: opacity .12s ease, transform .12s ease; } .nav-rail-tip.show { opacity: 1; transform: translateY(-50%) scale(1); } .nav-rail-foot { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .nav-rail-tool { width: 44px; height: 40px; border: 0; border-radius: 12px; cursor: pointer; background: var(--nv-surface-2); color: var(--nv-text-soft); display: flex; align-items: center; justify-content: center; transition: var(--nv-transition); } .nav-rail-tool:hover { color: var(--nv-brand); background: var(--nv-brand-tint); } /* ---- Tier 2 · Panel ----------------------------------------------------- */ .nav-panel { flex: 0 0 var(--nv-panel-w); width: var(--nv-panel-w); background: var(--nv-surface); border: 1px solid var(--nv-border); border-radius: var(--nv-radius-lg); box-shadow: var(--nv-shadow-sm); display: flex; flex-direction: column; position: sticky; top: var(--nv-gutter); height: calc(100vh - (2 * var(--nv-gutter))); overflow: hidden; } .nav-panel-head { padding: 16px 16px 12px; border-bottom: 1px solid var(--nv-border-2); display: flex; align-items: center; gap: 10px; } .nav-panel-head .np-ic { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; background: var(--sec-tint); color: var(--sec); display: flex; align-items: center; justify-content: center; font-size: .9rem; } .nav-panel-head .np-title { font-weight: 800; font-size: .98rem; color: var(--nv-text); } .nav-panel-biz { padding: 10px 12px; border-bottom: 1px solid var(--nv-border-2); } .nav-panel-biz select { width: 100%; border: 1px solid var(--nv-border); border-radius: var(--nv-radius-sm); background: var(--nv-surface-2); color: var(--nv-text); padding: 7px 10px; font-size: .82rem; } .nav-panel-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; } .nav-panel-link { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--nv-radius-sm); color: var(--nv-text-soft); text-decoration: none; font-size: .86rem; font-weight: 600; transition: var(--nv-transition); position: relative; } .nav-panel-link .npl-ic { width: 20px; text-align: center; font-size: .92rem; flex: 0 0 auto; } .nav-panel-link:hover { background: var(--nv-surface-2); color: var(--nv-text); } .nav-panel-link.active { background: var(--sec-tint); color: var(--sec); font-weight: 800; } .nav-panel-link .npl-badge { margin-inline-start: auto; font-size: .6rem; font-weight: 800; padding: 1px 7px; border-radius: var(--nv-radius-pill); } .npl-badge.new { background: var(--nv-success); color: #fff; } .npl-badge.beta { background: var(--nv-warning); color: #fff; } /* ---- Tier 3 · Topbar (floating glass) ----------------------------------- */ .nav-topbar { position: sticky; top: var(--nv-gutter); z-index: 30; height: var(--nv-topbar-h); background: var(--nv-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--nv-glass-brd); border-radius: var(--nv-radius); box-shadow: var(--nv-shadow-sm); display: flex; align-items: center; gap: 14px; padding: 0 16px; } .nav-hamburger { display: none; border: 0; background: transparent; color: var(--nv-text); font-size: 1.1rem; cursor: pointer; } .nav-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; margin-inline-end: auto; } .nav-crumb .cr-sec { font-size: .8rem; color: var(--nv-text-mute); font-weight: 600; white-space: nowrap; } .nav-crumb .cr-sep { color: var(--nv-text-mute); font-size: .7rem; } .nav-crumb .cr-page { font-size: .95rem; color: var(--nv-text); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-cmd { margin-inline: auto; max-width: 380px; flex: 1; display: flex; align-items: center; gap: 8px; cursor: pointer; background: var(--nv-surface-2); border: 1px solid var(--nv-border); border-radius: var(--nv-radius-pill); padding: 7px 14px; color: var(--nv-text-mute); font-size: .82rem; transition: var(--nv-transition); } .nav-cmd:hover { border-color: var(--nv-brand); } .nav-cmd .kbd { margin-inline-start: auto; font-size: .68rem; font-weight: 700; background: var(--nv-surface); border: 1px solid var(--nv-border); border-radius: 6px; padding: 2px 7px; color: var(--nv-text-soft); } .nav-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .nav-act { position: relative; width: 38px; height: 38px; border: 0; border-radius: 11px; cursor: pointer; background: transparent; color: var(--nv-text-soft); display: flex; align-items: center; justify-content: center; transition: var(--nv-transition); font-size: .95rem; text-decoration: none; } .nav-act:hover { background: var(--nv-surface-2); color: var(--nv-brand); } .nav-act .na-count { position: absolute; top: 3px; inset-inline-end: 3px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--nv-danger); color: #fff; font-size: .58rem; font-weight: 800; border-radius: var(--nv-radius-pill); display: flex; align-items: center; justify-content: center; border: 2px solid var(--nv-glass); } .nav-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--nv-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; cursor: pointer; overflow: hidden; } .nav-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ---- Command palette ---------------------------------------------------- */ .nav-cmdk { position: fixed; inset: 0; z-index: 3000; display: none; } .nav-cmdk.open { display: block; } .nav-cmdk-scrim { position: absolute; inset: 0; background: rgba(15,23,42,.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .nav-cmdk-box { position: absolute; inset-inline: 0; top: 12vh; margin-inline: auto; width: min(92vw, 560px); background: var(--nv-surface); border: 1px solid var(--nv-border); border-radius: var(--nv-radius); box-shadow: var(--nv-shadow-lg); overflow: hidden; } .nav-cmdk-input { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--nv-border-2); } .nav-cmdk-input i { color: var(--nv-text-mute); } .nav-cmdk-input input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--nv-text); font-size: 1rem; } .nav-cmdk-results { max-height: 52vh; overflow-y: auto; padding: 6px; } .nav-cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--nv-radius-sm); color: var(--nv-text); text-decoration: none; cursor: pointer; } .nav-cmdk-item .ck-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--nv-surface-2); display: flex; align-items: center; justify-content: center; color: var(--nv-text-soft); flex: 0 0 auto; } .nav-cmdk-item .ck-sec { margin-inline-start: auto; font-size: .7rem; color: var(--nv-text-mute); } .nav-cmdk-item.active, .nav-cmdk-item:hover { background: var(--nv-brand-tint); } .nav-cmdk-empty { padding: 24px; text-align: center; color: var(--nv-text-mute); font-size: .85rem; } /* ---- Account dropdown --------------------------------------------------- */ .nav-menu-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 220px; background: var(--nv-surface); border: 1px solid var(--nv-border); border-radius: var(--nv-radius); box-shadow: var(--nv-shadow); padding: 6px; display: none; z-index: 40; } .nav-menu-pop.open { display: block; } .nav-menu-pop a, .nav-menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 9px 12px; border: 0; background: transparent; color: var(--nv-text); border-radius: var(--nv-radius-sm); font-size: .85rem; text-decoration: none; cursor: pointer; } .nav-menu-pop a:hover, .nav-menu-pop button:hover { background: var(--nv-surface-2); } .nav-menu-pop .divider { height: 1px; background: var(--nv-border-2); margin: 5px 0; } .nav-pos { position: relative; } /* ---- Mobile drawer + scrim ---------------------------------------------- */ .nav-scrim { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1900; display: none; } .nav-scrim.open { display: block; } @media (max-width: 992px) { .dashboard-wrapper { padding: var(--nv-gutter); gap: 0; } .nav-hamburger { display: inline-flex; } .nav-cmd { display: none; } /* Rail + Panel merge into one off-canvas drawer */ .nav-rail, .nav-panel { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; height: 100vh; border-radius: 0; transition: transform var(--nv-transition); z-index: 2000; } .nav-panel { inset-inline-start: var(--nv-rail-w); width: min(78vw, var(--nv-panel-w)); } /* Fully off-canvas when closed — each element's own inline offset is added so nothing peeks at the screen edge (LTR uses negative, RTL positive). */ .nav-rail { transform: translateX(calc(-100% - 8px)); } .nav-panel { transform: translateX(calc(-100% - var(--nv-rail-w) - 8px)); } [dir="rtl"] .nav-rail { transform: translateX(calc(100% + 8px)); } [dir="rtl"] .nav-panel { transform: translateX(calc(100% + var(--nv-rail-w) + 8px)); } body.nav-drawer-open .nav-rail, body.nav-drawer-open .nav-panel { transform: translateX(0); } .app-content { width: 100%; } } /* ========================================================================== Panel collapse (desktop) + responsive hardening for all 3 tiers ========================================================================== */ /* Collapse toggle button (desktop only) */ .nav-collapse-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 11px; flex: 0 0 auto; background: transparent; color: var(--nv-text-soft); cursor: pointer; transition: var(--nv-transition); font-size: .95rem; } .nav-collapse-btn:hover { background: var(--nv-surface-2); color: var(--nv-brand); } /* Smooth panel width animation */ .nav-panel { transition: flex-basis var(--nv-transition), width var(--nv-transition), opacity var(--nv-transition), margin var(--nv-transition), padding var(--nv-transition); } /* Desktop: collapsed → panel folds away, content widens. Rail stays. */ @media (min-width: 993px) { body.nav-panel-collapsed .nav-panel { flex-basis: 0; width: 0; min-width: 0; opacity: 0; border-width: 0; overflow: hidden; pointer-events: none; } /* rotate the toggle glyph when collapsed */ body.nav-panel-collapsed .nav-collapse-btn i { transform: scaleX(-1); } } /* On mobile the collapse toggle is replaced by the hamburger/drawer */ @media (max-width: 992px) { .nav-collapse-btn { display: none; } } /* Tablet / narrow: tighten the topbar */ @media (max-width: 768px) { .nav-topbar { gap: 8px; padding: 0 10px; } .nav-crumb .cr-sec, .nav-crumb .cr-sep { display: none; } /* keep only the page name */ .nav-topbar .nav-panel-biz { min-width: 120px !important; } } /* Phones: drop non-essential actions, shrink further */ @media (max-width: 520px) { .nav-topbar { gap: 4px; padding: 0 8px; } .nav-act[data-optional] { display: none; } /* language + quick WhatsApp */ .nav-topbar .nav-panel-biz { display: none; } /* branch switch → available inside pages */ .nav-crumb .cr-page { max-width: 42vw; } } /* ========================================================================== Notification / Messages feed dropdowns ========================================================================== */ .nav-menu-pop.nav-feed { width: 340px; min-width: 340px; max-width: 92vw; padding: 0; overflow: hidden; } .nav-feed-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--nv-border-2); font-weight: 800; font-size: .9rem; color: var(--nv-text); } .nav-feed-body { max-height: min(60vh, 420px); overflow-y: auto; } .nav-feed-item { display: flex; gap: 11px; align-items: flex-start; padding: 11px 14px; text-decoration: none; color: var(--nv-text); border-bottom: 1px solid var(--nv-border-2); transition: var(--nv-transition); } .nav-feed-item:last-child { border-bottom: 0; } .nav-feed-item:hover { background: var(--nv-surface-2); } .nav-feed-item.unread { background: var(--nv-brand-tint); } .nav-feed-ic { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; background: var(--nv-surface-2); color: var(--nv-brand); display: flex; align-items: center; justify-content: center; font-size: .9rem; overflow: hidden; } .nav-feed-ic img { width: 100%; height: 100%; object-fit: cover; } .nav-feed-tx { min-width: 0; flex: 1; } .nav-feed-tx .ft-title { font-weight: 700; font-size: .82rem; color: var(--nv-text); display: flex; align-items: center; gap: 6px; } .nav-feed-tx .ft-title .ft-badge { margin-inline-start: auto; font-size: .58rem; font-weight: 800; background: var(--nv-danger); color: #fff; border-radius: var(--nv-radius-pill); padding: 1px 6px; flex: 0 0 auto; } .nav-feed-tx .ft-body { font-size: .76rem; color: var(--nv-text-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .nav-feed-tx .ft-time { font-size: .68rem; color: var(--nv-text-mute); margin-top: 3px; } .nav-feed-foot { display: block; text-align: center; padding: 11px; font-size: .8rem; font-weight: 700; color: var(--nv-brand); text-decoration: none; border-top: 1px solid var(--nv-border-2); } .nav-feed-foot:hover { background: var(--nv-surface-2); } .nav-feed-loading, .nav-feed-empty { padding: 26px 14px; text-align: center; color: var(--nv-text-mute); font-size: .82rem; } /* On phones, feed dropdowns detach into a centered sheet so they never clip off-screen */ @media (max-width: 560px) { .nav-menu-pop.nav-feed { position: fixed; inset-inline: 0; top: calc(var(--nv-topbar-h) + var(--nv-gutter) + 4px); margin-inline: auto; width: 94vw; min-width: 0; max-width: 94vw; } } /* ========================================================================== Rail scroll polish + mobile drawer friendliness ========================================================================== */ .nav-rail-items { scroll-behavior: smooth; overscroll-behavior: contain; padding-block: 2px; } @media (max-width: 992px) { /* Give the drawer real depth + a comfortable panel width on phones */ body.nav-drawer-open .nav-rail, body.nav-drawer-open .nav-panel { box-shadow: var(--nv-shadow-lg); } .nav-panel { width: min(78vw, var(--nv-panel-w)); } } @media (max-width: 560px) { /* Panel fills the space beside the rail so lists are easy to tap */ .nav-panel { width: calc(100vw - var(--nv-rail-w)); max-width: 320px; } } /* Drawer close button — only inside the off-canvas panel on mobile */ .nav-drawer-close { display: none; margin-inline-start: auto; width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 10px; background: var(--nv-surface-2); color: var(--nv-text-soft); align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; transition: var(--nv-transition); } .nav-drawer-close:hover { background: var(--nv-danger); color: #fff; } @media (max-width: 992px) { .nav-drawer-close { display: inline-flex; } .nav-scrim.open { display: block; } } /* ========================================================================== Collapsible panel groups (sub-menus) — mirrors the old sidebar dropdowns ========================================================================== */ .nav-group { display: flex; flex-direction: column; } .nav-group-toggle { display: flex; align-items: center; gap: 11px; width: 100%; text-align: start; padding: 9px 12px; border: 0; background: transparent; border-radius: var(--nv-radius-sm); color: var(--nv-text-soft); font-size: .86rem; font-weight: 700; cursor: pointer; transition: var(--nv-transition); } .nav-group-toggle:hover { background: var(--nv-surface-2); color: var(--nv-text); } .nav-group-toggle .npl-ic { width: 20px; text-align: center; font-size: .92rem; flex: 0 0 auto; } .nav-group-toggle .ng-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-group-toggle .ng-arrow { font-size: .68rem; color: var(--nv-text-mute); transition: transform var(--nv-transition); flex: 0 0 auto; } .nav-group.open > .nav-group-toggle { color: var(--sec); } .nav-group.open > .nav-group-toggle .ng-arrow { transform: rotate(180deg); } /* Grid-rows collapse trick — animates height without a magic max-height */ .nav-group-list { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--nv-transition); } .nav-group.open > .nav-group-list { grid-template-rows: 1fr; } .nav-group-list .ng-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding-block: 2px; } /* Child links sit indented under their group */ .nav-panel-link.npl-child { padding-inline-start: 30px; font-size: .83rem; } .nav-panel-link.npl-child .npl-ic { font-size: .84rem; } /* ========================================================================== Floating AI Assistant chat ========================================================================== */ .nav-ai-launcher { color: var(--sec-ai, var(--nv-brand)); background: var(--sec-ai-tint, var(--nv-brand-tint)); } .nav-ai-launcher:hover { color: #fff; background: var(--sec-ai, var(--nv-brand)); } .nav-ai-launcher.active { color: #fff; background: var(--sec-ai, var(--nv-brand)); } .nav-ai { position: fixed; inset: 0; z-index: 3500; display: none; pointer-events: none; } .nav-ai.open { display: block; } .nav-ai-panel { position: absolute; inset-block-end: calc(var(--nv-gutter) + 8px); inset-inline-start: calc(var(--nv-rail-w) + var(--nv-gutter) + 8px); width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 32px)); display: flex; flex-direction: column; pointer-events: auto; background: var(--nv-surface); border: 1px solid var(--nv-border); border-radius: var(--nv-radius); box-shadow: var(--nv-shadow-lg); overflow: hidden; transform: translateY(12px) scale(.98); opacity: 0; transition: transform var(--nv-transition), opacity var(--nv-transition); } .nav-ai.open .nav-ai-panel { transform: none; opacity: 1; } .nav-ai-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--nv-border-2); background: var(--sec-ai-tint, var(--nv-brand-tint)); } .nav-ai-ava { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: var(--sec-ai, var(--nv-brand)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .95rem; } .nav-ai-ava.lg { width: 46px; height: 46px; font-size: 1.2rem; border-radius: 14px; } .nav-ai-hd-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; } .nav-ai-title { font-weight: 800; font-size: .9rem; color: var(--nv-text); } .nav-ai-sub { font-size: .7rem; color: var(--nv-text-mute); } .nav-ai-expand, .nav-ai-close { width: 32px; height: 32px; flex: 0 0 auto; border: 0; border-radius: 9px; background: transparent; color: var(--nv-text-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: var(--nv-transition); } .nav-ai-expand:hover, .nav-ai-close:hover { background: var(--nv-surface); color: var(--nv-text); } .nav-ai-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .nav-ai-welcome { text-align: center; color: var(--nv-text-mute); margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; } .nav-ai-welcome p { font-size: .85rem; margin: 0; } .nav-ai-msg { max-width: 84%; padding: 9px 13px; border-radius: 14px; font-size: .84rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; } .nav-ai-msg.user { align-self: flex-end; background: var(--sec-ai, var(--nv-brand)); color: #fff; border-end-end-radius: 4px; } .nav-ai-msg.ai { align-self: flex-start; background: var(--nv-surface-2); color: var(--nv-text); border-end-start-radius: 4px; } .nav-ai-msg.err { align-self: flex-start; background: var(--nv-danger); color: #fff; } .nav-ai-typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 14px; background: var(--nv-surface-2); border-radius: 14px; } .nav-ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--nv-text-mute); animation: navAiBlink 1.2s infinite both; } .nav-ai-typing span:nth-child(2) { animation-delay: .2s; } .nav-ai-typing span:nth-child(3) { animation-delay: .4s; } @keyframes navAiBlink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } } .nav-ai-input { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--nv-border-2); } .nav-ai-input textarea { flex: 1; resize: none; max-height: 120px; border: 1px solid var(--nv-border); border-radius: var(--nv-radius-sm); background: var(--nv-surface-2); color: var(--nv-text); padding: 9px 12px; font: inherit; font-size: .84rem; outline: none; } .nav-ai-input textarea:focus { border-color: var(--sec-ai, var(--nv-brand)); } .nav-ai-send { width: 38px; height: 38px; flex: 0 0 auto; border: 0; border-radius: 11px; background: var(--sec-ai, var(--nv-brand)); color: #fff; cursor: pointer; transition: var(--nv-transition); } .nav-ai-send:hover { filter: brightness(1.08); } .nav-ai-send:disabled { opacity: .5; cursor: not-allowed; } /* Phones: dock the chat as a near-fullscreen sheet */ @media (max-width: 560px) { .nav-ai-panel { inset: auto 0 0 0; margin-inline: auto; width: 100vw; height: 88vh; border-radius: var(--nv-radius) var(--nv-radius) 0 0; } } /* ========================================================================== Mobile fallbacks for topbar controls that hide on small screens ========================================================================== */ .nav-only-mobile { display: none; } /* Branch switcher relocated into the account menu (phones only) */ .nav-acct-branch { padding: 8px 12px 4px; } .nav-acct-branch label { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--nv-text-mute); margin-bottom: 5px; } .nav-acct-branch select { width: 100%; border: 1px solid var(--nv-border); border-radius: var(--nv-radius-sm); background: var(--nv-surface-2); color: var(--nv-text); padding: 7px 10px; font-size: .82rem; } /* Search fallback appears exactly when the inline search bar (.nav-cmd) hides */ @media (max-width: 992px) { .nav-act.nav-only-mobile { display: inline-flex; } } /* Branch fallback appears exactly when the topbar branch switcher hides */ @media (max-width: 520px) { .nav-acct-branch.nav-only-mobile { display: block; } } /* ========================================================================== Client ▸ Branch switcher (integrated topbar selector) ========================================================================== */ .nav-biz-group { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; min-width: 0; } .nav-biz-field { display: flex; align-items: center; gap: 6px; min-width: 0; background: var(--nv-surface-2); border: 1px solid var(--nv-border); border-radius: 10px; padding: 5px 9px; } .nav-biz-field > i { color: var(--nv-text-mute); font-size: .76rem; flex: 0 0 auto; } .nav-biz-field select { border: 0; background: transparent; color: var(--nv-text); font-size: .8rem; max-width: 150px; outline: none; cursor: pointer; text-overflow: ellipsis; } .nav-biz-field select:disabled { cursor: default; color: var(--nv-text-soft); opacity: 1; } .nav-biz-branch { border-color: color-mix(in srgb, var(--sec-emr, var(--nv-brand)) 55%, var(--nv-border)); } .nav-biz-branch > i { color: var(--sec-emr, var(--nv-brand)); } @media (max-width: 768px) { .nav-biz-field select { max-width: 96px; } } /* ── Notifications: unread state + mark-all-read ── */ .nav-feed-allread { border: 0; background: transparent; color: var(--nv-brand); font-size: .7rem; font-weight: 700; cursor: pointer; padding: 0; } .nav-feed-allread:hover { text-decoration: underline; } .nav-notif-item.unread { background: var(--nv-brand-tint); } .nav-notif-item .ft-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--nv-brand); margin-inline-end: 6px; vertical-align: middle; } /* ── Live sidebar badges (counts on panel links + rail sections) ── */ .nav-panel-link .npl-count { margin-inline-start: auto; min-width: 18px; height: 18px; padding: 0 5px; background: var(--nv-danger); color: #fff; font-size: .62rem; font-weight: 800; border-radius: var(--nv-radius-pill); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .nav-rail-btn .nrb-count { position: absolute; top: 1px; inset-inline-end: 1px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--nv-danger); color: #fff; font-size: .55rem; font-weight: 800; border-radius: var(--nv-radius-pill); display: flex; align-items: center; justify-content: center; border: 2px solid var(--nv-surface); } /* ── Tasks 3-colour badge on the sidebar (new · in-progress · overdue) ── */ .nav-panel-link .npl-tk { margin-inline-start: auto; display: inline-flex; gap: 3px; flex: 0 0 auto; } .npl-tk .tk-seg { min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--nv-radius-pill); font-size: .6rem; font-weight: 800; color: #fff; display: inline-flex; align-items: center; justify-content: center; } .npl-tk .tk-seg.g { background: #16a34a; animation: tkPulseG 1.8s infinite; } .npl-tk .tk-seg.y { background: #d97706; animation: tkPulseY 1.8s infinite; } .npl-tk .tk-seg.r { background: #dc2626; animation: tkPulseR 1.3s infinite; } @keyframes tkPulseG { 0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,.55); } 50% { box-shadow: 0 0 0 4px rgba(22,163,74,0); } } @keyframes tkPulseY { 0%,100% { box-shadow: 0 0 0 0 rgba(217,119,6,.55); } 50% { box-shadow: 0 0 0 4px rgba(217,119,6,0); } } @keyframes tkPulseR { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.65); } 50% { box-shadow: 0 0 0 5px rgba(220,38,38,0); } }